/* DESIGN 2 — UNFORMED as a five-panel colour installation. */
.shop-page { background:#fff; color:var(--oxblood); }
.shop-page .catalog { background:#fff; }

/* The Shop keeps its existing five-panel movement, but now lives on a crisp
   white field. The announcement remains the existing oxblood strip. */
.shop-header,
.catalog-toolbar { background:#fff; border-color:rgba(74,10,4,.28); }
.shop-header .brand,
.shop-header .side-menu-toggle,
.shop-header .text-button,
.shop-header .bag-button,
.catalog-trigger { color:var(--oxblood); }
.catalog-image { background:#fff; box-shadow:inset 0 0 0 1px rgba(74,10,4,.12); }
.catalog-card,
.catalog-info { color:var(--oxblood); }

/* Footer is intentionally the only full oxblood field on the Shop page. */
.shop-page > .footer-full { background:var(--oxblood); border-top-color:rgba(237,232,223,.34); }
.shop-page > .footer-full,
.shop-page > .footer-full a,
.shop-page > .footer-full span,
.shop-page > .footer-full .footer-newsletter-trigger { color:var(--ivory); }

.catalog-grid { display:flex; align-items:stretch; gap:2px; height:clamp(430px, 64vw, calc(100svh - 156px)); margin:0; padding:0 3.1vw var(--catalog-footer-spacing); overflow-anchor:none; }
.catalog-card { position:relative; flex:1 1 0; min-width:0; overflow:hidden; contain:layout paint; color:var(--ink); text-decoration:none; will-change:flex-grow, filter; transition:flex-grow .56s cubic-bezier(.16,1,.3,1), filter .3s ease; }
.catalog-card:hover, .catalog-card:focus-within { flex-grow:3.3; }
.catalog-grid:has(.catalog-card:hover) .catalog-card:not(:hover), .catalog-grid:has(.catalog-card:focus-within) .catalog-card:not(:focus-within) { filter:brightness(.92); }
.catalog-image { height:100%; aspect-ratio:auto; background:#fff; box-shadow:inset 0 0 0 1px rgba(74,10,4,.12); }
.catalog-image::after { inset:auto 17% 12%; opacity:.64; }
.catalog-card { --rest-scale:1; --rest-y:0%; --expanded-scale:1; --expanded-y:0%; }
/* Resting silhouettes are optically normalised to the Espresso panel. */
.product-beige { --rest-scale:1.62; --expanded-scale:1; }
.product-black { --rest-scale:1.28; --expanded-scale:1; }
.product-coffee { --rest-scale:1.66; --rest-y:4px; --expanded-scale:1; }
.product-white { --rest-scale:1.64; --rest-y:2px; --expanded-scale:1; }
.product-espresso { --rest-scale:1.07; --rest-y:2px; --expanded-scale:1; }
.catalog-image [data-gallery-image],
.catalog-image .catalog-hover-image { position:absolute; top:50%; left:50%; display:block; object-fit:contain; object-position:center; pointer-events:none; will-change:opacity, transform; }
.catalog-image [data-gallery-image] { z-index:1; width:76%; max-height:62%; transform:translate(-50%, -50%) translateY(var(--rest-y)) scale(var(--rest-scale)) !important; transition:opacity .24s ease; }
.catalog-image .catalog-hover-image { z-index:2; width:auto; height:72%; max-width:82%; max-height:none; opacity:0; transform:translate(-50%, -50%) translateY(var(--expanded-y)) scale(var(--expanded-scale)); transition:opacity .24s ease; }
.catalog-card.gallery-active .catalog-image [data-gallery-image] { opacity:0; }
.catalog-card.gallery-active .catalog-image .catalog-hover-image { opacity:1; }
.catalog-info { position:absolute; z-index:4; right:18px; bottom:16px; left:18px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:end; min-height:0; padding:0; background:transparent; color:var(--ink); font-size:14px; }
.catalog-info span:first-child { max-width:160px; letter-spacing:-.015em; }
.catalog-info span:last-child { align-self:end; font-size:10px; }
.catalog-grid:has(.catalog-card:hover) .catalog-info [data-catalog-price], .catalog-grid:has(.catalog-card:focus-within) .catalog-info [data-catalog-price] { opacity:0; }
.catalog-stock-status { grid-column:1/-1; margin:6px 0 0; color:var(--oxblood); font-size:11px; }
.catalog-sold-out-badge { top:0; padding:12px 18px 13px; border-radius:0 0 11px 11px; font:10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }

@media (max-width:760px) {
  .catalog-grid { display:grid; grid-template-columns:1fr; height:auto; min-height:0; gap:18px; padding:0 20px 72px; }
  .catalog-card, .catalog-card:hover, .catalog-card:focus-within { min-height:min(126vw,620px); }
  .catalog-image { height:100%; }
  .catalog-image img { width:67%; max-height:64%; }
  .catalog-info { right:14px; bottom:14px; left:14px; font-size:13px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-card,
  .catalog-image [data-gallery-image],
  .catalog-image .catalog-hover-image { transition:none; }
}

/* site-header.css is loaded after this page stylesheet. Keep every control
   legible against Shop's white field without changing header behaviour. */
.shop-page .shop-header .brand,
.shop-page .shop-header .side-menu-toggle,
.shop-page .shop-header .text-button,
.shop-page .shop-header .bag-button { color:var(--oxblood) !important; }
.shop-page .catalog-card,
.shop-page .catalog-info { color:var(--oxblood); }

/* Shop palette refinement: ivory panels become one uninterrupted field.
   The fixed Shop navigation and its toolbar form the oxblood counterpoint. */
.shop-page,
.shop-page .catalog { background:var(--ivory); }
.shop-page .shop-header,
.shop-page .catalog-toolbar { background:var(--oxblood); border-color:transparent; }
.shop-page .shop-header { border-bottom:1px solid rgba(237,232,223,.62); }
.shop-page .shop-header .brand,
.shop-page .shop-header .side-menu-toggle,
.shop-page .shop-header .text-button,
.shop-page .shop-header .bag-button,
.shop-page .catalog-trigger { color:var(--ivory) !important; }
.catalog-grid { gap:0; }
.catalog-image { background:var(--ivory); box-shadow:none; }
.shop-page .catalog-card,
.shop-page .catalog-info { color:var(--oxblood); }