/* Final UX polish for live variants, preview-only choices and touch-friendly shopping. */

/* Keep the product cards dense enough to scan, but never tiny or cramped. */
.merch-card-copy{gap:10px}
.merch-card-title{font-size:1.04rem;line-height:1.2}
.merch-card-price-row span{font-size:.62rem;line-height:1.45}
.merch-card-meta,
.merch-card-meta span:first-child,
.merch-card-meta span:last-child{font-size:.61rem;line-height:1.4}

.merch-card-options{
  display:grid;
  gap:8px;
  min-height:0;
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(190,223,227,.1);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(130,255,255,.018));
}
.merch-card-option-row{
  grid-template-columns:66px minmax(0,1fr);
  gap:9px;
  min-height:30px;
}
.merch-card-option-row>span{
  color:#84989e;
  font-size:.57rem;
  line-height:1.25;
  letter-spacing:.075em;
}
.merch-card-static-option{
  color:#adbdc1;
  font-size:.58rem;
  line-height:1.3;
}

/* Product photography uses one graphite studio surface. The supplier image
   endpoint receives the same base tone so its raster never leaves a white box. */
.merch-page{
  --merch-photo-surface:
    radial-gradient(circle at 50% 30%,rgba(130,255,255,.18),transparent 34%),
    radial-gradient(circle at 50% 74%,rgba(255,255,255,.055),transparent 42%),
    linear-gradient(145deg,#35464e 0%,#243239 46%,#111b20 100%);
}
.merch-card-media,
.merch-detail-stage,
.merch-hero-tile{
  --merch-art-top:39.5%!important;
  --merch-art-width:30%!important;
  --merch-art-height:7%!important;
  background:var(--merch-photo-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.merch-card-garment,
.merch-detail-stage>img:first-child,
.merch-hero-garment{
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.34));
}

/* Garment colors stay compact without turning the card into a color wall. */
.merch-card-option-row>div[data-quick-colors]{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  overflow:visible;
}
.merch-card-option-row>div[data-quick-colors] .merch-card-swatch{margin:0}
.merch-card-color-summary{
  display:block;
  flex:0 0 100%;
  max-width:100%;
  overflow:hidden;
  color:#8fa2a8;
  font-size:.55rem;
  font-weight:850;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Every font choice uses the same footprint. The primary option gets a full
   row; alternates share the second row without changing text scale. */
.merch-card-option-row:has([data-quick-wordmark]){align-items:start}
.merch-card-option-row:has([data-quick-wordmark])>span{padding-top:10px}
.merch-card-option-row>div:has([data-quick-wordmark]){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:7px;
  min-width:0;
  overflow:visible;
  padding:0;
}
.merch-card-option-row>div:has([data-quick-wordmark]) .merch-card-fontname{
  width:100%;
  min-width:0;
  max-width:none;
  height:32px;
  padding-inline:9px;
  border-radius:8px;
  font-size:.57rem;
  font-weight:850;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.merch-card-option-row>div:has([data-quick-wordmark]) .merch-card-fontname:first-child{
  grid-column:1/-1;
}

[data-quick-prints]{
  display:flex!important;
  align-items:center;
  gap:6px!important;
  min-width:0;
  overflow-x:auto;
  padding:1px 1px 3px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
[data-quick-prints]::-webkit-scrollbar{display:none}
.merch-card-swatch,.merch-card-print{width:30px;height:30px}
.merch-card-swatch i{width:19px;height:19px}
.merch-card-print i{width:18px;height:18px}

.merch-card-size-row{align-items:start}
.merch-card-size-row>span{padding-top:8px}
.merch-card-size-options{
  display:flex!important;
  gap:5px!important;
  min-width:0;
  overflow-x:auto;
  padding:1px 1px 3px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
.merch-card-size-options::-webkit-scrollbar{display:none}
.merch-card-size{
  min-width:32px;
  height:30px;
  flex:0 0 auto;
  padding:0 8px;
  border:1px solid rgba(190,223,227,.16);
  border-radius:8px;
  background:#09141a;
  color:#b7c5c9;
  font:inherit;
  font-size:.57rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.merch-card-size:hover{border-color:rgba(130,255,255,.52);color:#fff;background:#0b181e}
.merch-card-size:focus-visible{outline:2px solid #fff;outline-offset:2px}
.merch-card-size[aria-pressed="true"]{
  border-color:#82ffff;
  background:rgba(130,255,255,.13);
  color:#e7ffff;
  box-shadow:0 0 0 1px rgba(130,255,255,.12),0 0 16px rgba(130,255,255,.08);
}
.merch-card-size:active{transform:scale(.96)}

.merch-customize-btn{
  min-height:46px;
  margin-top:14px;
  border-radius:11px;
  font-size:.7rem;
  line-height:1.2;
}
.merch-customize-btn span:last-child{font-size:.86rem}

/* Product detail should read like a store PDP, not fine print. */
.merch-dialog-description{font-size:.81rem;line-height:1.68}
.merch-detail-subhead{font-size:.67rem}
.merch-detail-facts span{font-size:.65rem;line-height:1.55}
.merch-detail-control legend,.merch-detail-size-head>span{font-size:.69rem}
.merch-detail-option{font-size:.66rem}
.merch-detail-service strong{font-size:.67rem}
.merch-detail-service span,.merch-detail-service a{font-size:.59rem}
.merch-detail-status strong{font-size:.66rem}
.merch-detail-status span{font-size:.59rem}
.merch-dialog-price-row>span{font-size:.63rem}
.merch-estimate-note{font-size:.6rem}

.merch-checkout-btn:disabled{
  cursor:not-allowed;
  opacity:.52;
  box-shadow:none;
  filter:saturate(.55);
  transform:none!important;
}

/* The lookbook is swipeable, but the controls stay visually quiet. */
.merch-hero-showcase{
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.merch-hero-carousel-controls::before{
  content:"More looks";
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  transform:translateX(-50%);
  color:#74878e;
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Slightly larger bag/support text prevents the final purchase step from
   becoming the smallest UI on the page. */
.merch-cart-item-head span,
.merch-cart-links button,
.merch-cart-estimate-note,
.merch-cart-trust,
.merch-cart-policy-links a{font-size:.58rem}
.merch-cart-total-row{font-size:.69rem}

@media(max-width:620px){
  .merch-card-body{padding:16px}
  .merch-card-title{font-size:1.1rem}
  .merch-card-price-row span{font-size:.66rem}
  .merch-card-meta,
  .merch-card-meta span:first-child,
  .merch-card-meta span:last-child{font-size:.64rem}
  .merch-card-options{gap:10px;padding:13px 12px}
  .merch-card-option-row{grid-template-columns:68px minmax(0,1fr);gap:9px;min-height:40px}
  .merch-card-option-row>span{font-size:.64rem;line-height:1.3}
  .merch-card-static-option,.merch-card-color-summary{font-size:.63rem}
  .merch-card-swatch,.merch-card-print{width:40px;height:40px}
  .merch-card-swatch i{width:25px;height:25px}
  .merch-card-print i{width:24px;height:24px}
  .merch-card-option-row:has([data-quick-wordmark])>span{padding-top:13px}
  .merch-card-option-row>div:has([data-quick-wordmark]){gap:8px}
  .merch-card-option-row>div:has([data-quick-wordmark]) .merch-card-fontname{height:40px;font-size:.68rem;padding-inline:10px}
  .merch-card-size-row>span{padding-top:13px}
  .merch-card-size{min-width:40px;height:40px;padding-inline:10px;font-size:.65rem}
  .merch-customize-btn{min-height:48px;font-size:.72rem}
  .merch-hero-carousel-controls::before{content:"Swipe for more"}
  .merch-dialog-close{top:max(12px,env(safe-area-inset-top));right:12px}
  .merch-dialog-description{font-size:.82rem}
  .merch-detail-facts span{font-size:.68rem}
  .merch-detail-service span,.merch-detail-service a{font-size:.61rem}
}

/* The four policy tiles are too cramped in two columns on narrow phones. */
@media(max-width:460px){
  .merch-trust-rail{grid-template-columns:1fr}
  .merch-trust-item{padding:14px 15px}
  .merch-trust-item+.merch-trust-item{border-top:1px solid var(--premium-line)}
  .merch-trust-item+.merch-trust-item::before{display:none}
  .merch-trust-item span{font-size:.53rem}
  .merch-trust-item strong{font-size:.72rem}
  .merch-shop-head h1{font-size:clamp(4.2rem,22vw,5.5rem)}
}

@media(prefers-reduced-motion:reduce){
  .merch-card-size{transition:none}
}