/* Shared storefront rhythm. Themes supply their own colours. */
:root{--browse-gap:16px;--browse-row-gap:20px}
.catalog-grid{gap:var(--browse-row-gap) var(--browse-gap)}
.product-card{background:var(--browse-card);border-color:var(--browse-border)}
.product-card:hover{box-shadow:none}
.new-arrival-card{background:var(--browse-card);border-color:var(--browse-border)}
.section-head{align-items:center}
.section-head p{max-width:52ch;line-height:1.6}
.product-name,.new-arrival-copy h3{overflow-wrap:anywhere}
.product-body{flex:1;display:flex;flex-direction:column;align-items:stretch}
.product-body .price-line{margin-top:auto;padding-top:8px;flex-wrap:wrap}
.product-rail{scroll-padding-inline:2px}
.filter-block select{min-height:44px}
.rail-controls{flex-shrink:0}
:root[data-storefront-theme="light"]{--browse-card:#FFFFFF;--browse-border:#E5E5E5}
:root[data-storefront-theme="dark"]{--browse-card:#101010;--browse-border:#292929}
/* Size cards from the collection's available width, including the sidebar. */
.catalog-wrap{container-type:inline-size;container-name:collection;min-width:0}
.catalog-grid{--catalog-columns:2;grid-template-columns:repeat(var(--catalog-columns),minmax(0,1fr))}
@media(min-width:680px){
 @container collection (min-width:640px){.catalog-grid{--catalog-columns:3}}
 @container collection (min-width:880px){.catalog-grid{--catalog-columns:4}}
 @container collection (min-width:1164px){.catalog-grid{--catalog-columns:5}}
}
@media(min-width:901px){.shop-layout{gap:22px}.filter-panel{background:var(--surface-container-low)}.section{padding-top:44px}.section-head{margin-bottom:16px}}
@media(max-width:679px){:root{--browse-gap:10px;--browse-row-gap:14px}.section-head{gap:12px}.product-body{padding:10px}.price-line{gap:6px}}
@media(max-width:359px){.product-body{padding:10px 8px}.stock{font-size:10px}}

/* Keep the dot controls within the photo area, so every card body starts alike. */
.product-media .product-gallery{padding-bottom:0;background:var(--surface)}


.product-gallery .gallery-dots{display:none}
.product-media .gallery-count{bottom:10px;right:10px}
@media(max-width:900px){body>#mobileBottomNav{position:fixed;top:auto;transform:none;transition:none;will-change:auto}}

/* Desktop categories use the same translucent surface as the mobile dock. */
@media(min-width:901px){
 :where(html[data-storefront-theme]) .desktop-category-sticky{background:var(--surface);border-bottom-color:var(--navigation-edge)}
 @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(html[data-storefront-theme]) .desktop-category-sticky{background:var(--navigation-glass);backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12)}
 }
}

/* Compact spacing without shrinking photos or touch controls. */
:where(html[data-storefront-theme]) .section-head{gap:14px}
:where(html[data-storefront-theme]) .product-body{padding:12px}
:where(html[data-storefront-theme]) .new-arrival-copy{padding:12px;gap:7px}
:where(html[data-storefront-theme]) .new-arrival-copy p{min-height:0}
:where(html[data-storefront-theme]) .best-seller-section{padding:16px 0;margin:0}
:where(html[data-storefront-theme]) .best-seller-section .section-head{margin-bottom:14px}
:where(html[data-storefront-theme]) .filter-panel{padding:16px}
:where(html[data-storefront-theme]) .filter-block{padding:10px 0}
:where(html[data-storefront-theme]) .catalog-toolbar{margin-bottom:12px}
@media(min-width:901px){
 :where(html[data-storefront-theme]) .brand-row{padding-top:12px;padding-bottom:12px}
 :where(html[data-storefront-theme]) .desktop-category-sticky{padding-top:6px;padding-bottom:6px}
}
@media(max-width:900px){
 :where(html[data-storefront-theme]) .section{padding-top:32px}
 :where(html[data-storefront-theme]) .section-head{margin-bottom:14px}
 :where(html[data-storefront-theme]) .product-body{padding:10px}
}
@media(max-width:359px){:where(html[data-storefront-theme]) .product-body{padding:10px 8px}}

/* Follow the same header state and timing as the desktop category row. */
@media(min-width:901px){
 :where(html[data-storefront-theme]) .filter-panel{top:calc(var(--desktop-header-height,90px) + var(--desktop-categories-height,51px) + 16px);transition:top .22s var(--ease)}
 .site-shell:has(.app-header.is-scroll-hidden) .filter-panel{top:calc(var(--desktop-categories-height,51px) + 16px)}
}
@media(prefers-reduced-motion:reduce){:where(html[data-storefront-theme]) .filter-panel{transition:none}}

/* Reserve an equal title area so brand labels line up without script measurements. */
.catalog-grid .product-name{height:2.8em;min-height:2.8em;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:901px){
 .brand-row .top-actions{gap:8px;align-items:center}
 .brand-row .top-action,.brand-row .cart-action{height:48px;min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface-container-low);color:var(--ink);box-shadow:none;padding:8px 12px;gap:9px}
 .brand-row .top-action .icon,.brand-row .cart-icon{width:22px;height:22px;color:var(--ink)}
 .brand-row .top-action .ui-icon,.brand-row .cart-icon .ui-icon{width:22px;height:22px}
 .brand-row .top-action>span:last-child{display:block;text-align:left;line-height:1.25}
 .brand-row .top-action small{font-size:10px;font-weight:600;color:var(--muted)}
 .brand-row .top-action strong{font-size:12px;font-weight:750;color:var(--ink);margin-top:2px}
 .brand-row .cart-action{display:flex;flex-direction:row}
 .brand-row .cart-label{font-size:12px;font-weight:750;order:1}
 .brand-row .cart-bubble{position:static;order:2;border:0;min-width:22px;height:22px;padding:3px 6px;display:grid;place-items:center;background:var(--surface-container-high);color:var(--ink);font-size:11px;line-height:1}
 .brand-row .top-action:hover,.brand-row .cart-action:hover{background:var(--surface-container-high);border-color:var(--line-strong)}
}
@media(min-width:901px) and (max-width:1100px){.brand-row .top-action,.brand-row .cart-action{padding:8px}.brand-row .top-action>span:last-child{display:none}.brand-row .cart-label{display:none}}

/* Cover the space above the moving category bar while the header transitions.
   The header paints above this surface; no scroll interception or extra blur. */
@media(min-width:901px){
 .desktop-category-sticky::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--desktop-header-height,90px);background:var(--surface);pointer-events:none}
}

/* In four/five-column collection rows, keep the caption to name and price. */
@media(min-width:680px){
 @container collection (min-width:880px){
  .catalog-grid > .product-card .product-brand,
  .catalog-grid > .product-card .stock,
  .catalog-grid > .product-card .original-price{display:none}
 }
}

/* Keep all three product actions reachable without horizontal panning. */
@media(max-width:600px){
 .product-sheet .sheet-tabs{display:flex;justify-content:safe center;gap:4px;overflow-x:auto;scrollbar-width:none}
 .product-sheet .sheet-tab{min-width:0;flex:0 0 auto;white-space:nowrap;padding:8px 10px;min-height:44px;line-height:1.35;text-align:center}
}

/* Consistent reading hierarchy and spacing; colours come from the active theme. */
:root{--shop-radius:16px;--shop-control-radius:12px}
.section-head h2{font-size:clamp(25px,2.4vw,34px);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.section-head .eyebrow{font-weight:600;letter-spacing:.1em;line-height:1.5}
.catalog-grid .product-name{font-size:14px;font-weight:650;letter-spacing:-.01em}
.catalog-grid .price{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.catalog-grid .product-brand{font-size:11px;font-weight:500;letter-spacing:.035em}
.catalog-grid .stock{font-size:11px;line-height:1.5}
.catalog-grid .product-card{border-radius:var(--shop-radius)}
:where(.section,.sheet-body) button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.view-info h2{font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.025em;margin-block:8px 14px;overflow-wrap:anywhere}
.view-info>.eyebrow{font-weight:550;letter-spacing:.08em;line-height:1.5}
.view-info>.price-line .price{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.view-info .detail-panel{border-radius:var(--shop-radius);padding:16px;margin-block:16px}
.view-info .size-button{min-height:44px;border-radius:var(--shop-control-radius)}
.view-info .pair-quantity-panel{border:0;padding:0;background:transparent;box-shadow:none}
.view-info .view-actions{gap:10px;margin-block:18px}
.view-info .view-actions button{min-height:44px;border-radius:var(--shop-control-radius);line-height:1.4;white-space:normal}
.pair-detail{border-top:1px solid var(--line);padding:14px 0;line-height:1.65}
.pair-detail summary{font-size:14px;font-weight:600;cursor:pointer;min-height:32px;display:list-item}
.pair-detail .detail-copy{font-size:14px;margin:8px 0 0;line-height:1.7}
.pair-detail summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.catalog-state{grid-column:1/-1;padding:32px 20px;text-align:center;border:1px solid var(--line);border-radius:var(--shop-radius);background:var(--surface);min-height:180px;display:grid;justify-items:center;align-content:center;gap:12px}
.catalog-state h3,.catalog-state p{margin:0}.catalog-state h3{font-size:20px;font-weight:650}.catalog-state p{max-width:42ch;color:var(--muted);line-height:1.6}.catalog-state button{min-height:44px;padding:10px 20px;border-radius:var(--shop-control-radius)}
.catalog-skeleton{border:1px solid var(--line);border-radius:var(--shop-radius);overflow:hidden;min-width:0}
.catalog-skeleton-photo{aspect-ratio:1;background:var(--surface-container-high)}
.catalog-skeleton-copy{padding:14px}.catalog-skeleton-line{height:12px;border-radius:6px;background:var(--surface-container-high);margin-bottom:12px;width:80%}.catalog-skeleton-line:last-child{width:45%;margin-bottom:0}
#catalogGrid[aria-busy=true] .catalog-skeleton{animation:none}
@media(max-width:679px){.catalog-grid .product-name{font-size:13px}.catalog-grid .price{font-size:16px}.view-info .detail-panel{padding:14px}.catalog-state{padding:24px 14px}}

/* Clearly separate the resumed collection from the featured rail. */
.collection-continuation{grid-column:1/-1;margin:8px 0 2px;font-size:clamp(20px,2vw,26px);font-weight:650;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}

#productSheet.is-order{top:var(--order-viewport-top,0px);bottom:auto;height:var(--order-viewport-height,100dvh);max-height:var(--order-viewport-height,100dvh)}
#productSheet .message-composer{border-block:0;box-shadow:none}

#productSheet .sheet-tabs{justify-content:safe center}

#productSheet.is-order .order-scroll{padding-bottom:calc(16px + var(--order-keyboard-cover,0px))}