/* A discreet ITAL-UR-RICAN signature sits below the artwork, never over it. */
.product-image,
.product-dialog .detail-image,
.reel-image-wrap:has(> .reel-image),
.denim-concept-image,
.bronx-brand-art{
  --artwork-footer-height:32px;
  --artwork-signature-size:14px;
  isolation:isolate;
  box-sizing:border-box;
  padding-bottom:var(--artwork-footer-height);
}
.product-image,
.reel-image-wrap,
.denim-concept-image,
.bronx-brand-art{
  position:relative;
}
.product-image::before,
.product-dialog .detail-image::before,
.reel-image-wrap:has(> .reel-image)::before,
.denim-concept-image::before,
.bronx-brand-art::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:var(--artwork-footer-height);
  background:#10171d;
  border-top:1px solid #ffffff16;
  pointer-events:none;
  z-index:1;
}
.product-image::after,
.product-dialog .detail-image::after,
.reel-image-wrap:has(> .reel-image)::after,
.denim-concept-image::after,
.bronx-brand-art::after{
  content:"";
  display:block;
  position:absolute;
  left:6px;
  bottom:calc((var(--artwork-footer-height) - var(--artwork-signature-size))/2);
  width:var(--artwork-signature-size);
  height:var(--artwork-signature-size);
  background:url('assets/chrome-logo.webp') center/contain no-repeat;
  pointer-events:none;
  z-index:2;
}
.product-image>img,
.product-dialog .detail-image>img,
.reel-image-wrap>.reel-image,
.denim-concept-image>img,
.bronx-brand-art>img{
  box-sizing:border-box;
  object-fit:contain;
}
/* Keep hover enlargement from pushing the drawing into its signature strip. */
.product-image:hover>img{transform:none}
.graffiti-theme .product-image .choose-label,
.graffiti-theme .product-image:hover .choose-label{
  right:8px;
  bottom:0;
  height:var(--artwork-footer-height);
  max-width:calc(100% - 46px);
  padding:0;
  border:0;
  background:transparent;
  color:#fff3d6;
  font-size:10px;
  white-space:normal;
  text-align:right;
  line-height:1.2;
  gap:6px;
  z-index:2;
}
.graffiti-theme .denim-concept-image #denim-preview-caption{
  left:38px;
  right:8px;
  bottom:0;
  height:var(--artwork-footer-height);
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0;
  background:transparent;
  color:#fff3d6;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.4px;
  text-align:right;
  z-index:2;
}
@media(max-width:720px){
  .product-image,
  .product-dialog .detail-image,
  .reel-image-wrap:has(> .reel-image),
  .denim-concept-image,
  .bronx-brand-art{
    --artwork-footer-height:28px;
    --artwork-signature-size:12px;
  }
  /* Mobile detail images are otherwise position:static. */
  .product-dialog .detail-image{position:relative}
  .graffiti-theme .product-image .choose-label{
    font-size:9px;
    gap:4px;
    right:6px;
    max-width:calc(100% - 40px);
  }
}

/* Every artwork-only apparel design gets a clickable shirt illustration. */
.product-image>.shirt-gallery-preview{display:block;width:100%;height:100%;object-fit:contain}
.product-image:focus-visible,.product-title:focus-visible{outline:4px solid #19b9c8;outline-offset:3px}
.catalog-view-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:22px 0}
.catalog-view-actions p{font-size:13px;line-height:1.6;margin:0}
.catalog-view-actions .button{min-height:48px}
@media(max-width:540px){.catalog-view-actions{gap:12px}.catalog-view-actions .button{width:100%}}
.product-face-note{display:block;width:100%;min-height:44px;padding:10px 9px;background:#ffe15d;color:#111a21;border:1px solid #111a21;text-align:left;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:800;line-height:1.5;cursor:pointer}.product-face-note:hover{background:#50cad3}.product-face-note:focus-visible{outline:3px solid #167baa;outline-offset:3px}