/* Store surfaces use the same Origyn tokens in both themes. Keep this file
   after the legacy Store styles so page-specific hard-coded colors cannot win. */
body.store-page {
  --store-bg: var(--ui-bg, #faf7f1);
  --store-surface: var(--ui-surface, #fffdf9);
  --store-soft: var(--ui-soft, #f4ede3);
  --store-ink: var(--ui-ink, #171717);
  --store-muted: var(--ui-muted, #625c55);
  --store-line: var(--ui-line, #e8e2d9);
  --store-accent: var(--ui-accent, #ff6b35);
  --store-accent-strong: var(--ui-accent-strong, #a83b16);
}

body.store-page .store-header {
  background: color-mix(in srgb, var(--store-bg) 96%, transparent);
  border-color: var(--store-line);
}

body.store-page .store-header nav,
body.store-page .store-nav-links a,
body.store-page .logo { color: var(--store-ink); }

body.store-page :is(.store-search-top, .big-search) {
  background: var(--store-surface);
  border-color: var(--store-line);
  color: var(--store-ink);
}

body.store-page :is(.store-search-top input, .big-search input) {
  color: var(--store-ink);
}

body.store-page :is(.store-search-top input, .big-search input)::placeholder {
  color: var(--store-muted);
  opacity: .88;
}

body.store-page #home,
body.store-page #discover,
body.store-page #categories {
  background: var(--store-bg) !important;
  color: var(--store-ink) !important;
}

body.store-page #ecosystem,
body.store-page .brand-rail,
body.store-page .trust-section,
body.store-page .newsletter {
  background: var(--store-soft) !important;
  color: var(--store-ink) !important;
}

body.store-page #originals {
  background: #171717 !important;
  color: #fffdf9 !important;
}

body.store-page .featured-strip {
  background: var(--store-accent) !important;
  color: #171717 !important;
}

body.store-page :is(.hero-copy, .section-heading, .section-intro, .trust-copy,
  .trust-points, .featured-copy, .newsletter) :is(h1, h2, h3) {
  color: var(--store-ink) !important;
}

body.store-page :is(.hero-copy, .section-heading, .section-intro, .trust-copy,
  .trust-points, .featured-copy, .newsletter) p:not(.eyebrow) {
  color: var(--store-muted) !important;
}

body.store-page #originals :is(.section-intro, .section-intro h2,
  .section-intro p:not(.eyebrow)) {
  color: #fff3e7 !important;
}

body.store-page #originals .section-intro .eyebrow {
  color: var(--store-accent) !important;
}

body.store-page .featured-strip :is(h2, p:not(.eyebrow), .eyebrow) {
  color: #171717 !important;
}

body.store-page :is(.primary-btn, #shop-now, .newsletter button) {
  background: var(--store-accent) !important;
  border-color: var(--store-accent) !important;
  color: #171717 !important;
}
body.store-page :is(.primary-btn, #shop-now):hover,
body.store-page .newsletter button:hover {
  background: color-mix(in srgb, var(--store-accent) 88%, #fff) !important;
  border-color: var(--store-accent-strong) !important;
  color: #171717 !important;
}

body.store-page .brand-rail {
  border-color: var(--store-line);
  color: var(--store-accent-strong);
}

body.store-page .brand-rail span:first-child,
body.store-page .trust-points h3,
body.store-page .trust-points b { color: var(--store-ink); }

body.store-page :is(.search-panel, .product-card, .category-grid button,
  .cart-drawer, .origyn-orders-card, .origyn-checkout-card) {
  background: var(--store-surface);
  border-color: var(--store-line);
  color: var(--store-ink);
}

body.store-page .product-card { box-shadow: 0 2px 0 color-mix(in srgb, var(--store-ink) 5%, transparent); }
body.store-page .product-card:hover { border-color: var(--store-accent-strong); }
body.store-page .product-card h3,
body.store-page .product-price,
body.store-page .category-grid button strong { color: var(--store-ink) !important; }
body.store-page .product-card p,
body.store-page .results-meta,
body.store-page .category-grid button small,
body.store-page .category-grid button span { color: var(--store-muted) !important; }
body.store-page .product-card .product-origin { color: var(--store-accent-strong) !important; }
body.store-page .product-visual,
body.store-page .product-api-image { background: var(--store-soft) !important; }
body.store-page .product-badge,
body.store-page .product-save,
body.store-page .mini-btn,
body.store-page .results-meta select,
body.store-page .filter {
  background: var(--store-surface);
  border-color: var(--store-line);
  color: var(--store-ink);
}
body.store-page .filter.active,
body.store-page .mini-btn.dark,
body.store-page .nav-action#cart-open {
  background: var(--store-ink) !important;
  border-color: var(--store-ink) !important;
  color: var(--store-accent) !important;
}
body.store-page .product-save.saved { background: var(--store-accent) !important; color: #171717 !important; }
body.store-page .search-empty-state { color: var(--store-ink); }
body.store-page .search-empty-state p,
body.store-page .search-empty-state .search-hint { color: var(--store-muted) !important; }

body.store-page .cart-drawer { border-left: 1px solid var(--store-line); }
body.store-page .cart-head,
body.store-page .cart-foot,
body.store-page .cart-row { border-color: var(--store-line); }
body.store-page .cart-head h2,
body.store-page .cart-row h4,
body.store-page .cart-foot strong { color: var(--store-ink); }
body.store-page .cart-empty,
body.store-page .cart-row p { color: var(--store-muted); }
body.store-page .cart-controls button,
body.store-page .cart-head button { background: var(--store-soft); border-color: var(--store-line); color: var(--store-ink); }
body.store-page .origyn-order-status { background: var(--store-soft); color: var(--store-ink); }

/* Keep the blank catalogue state compact; a large fixed viewport-height empty
   block makes an empty marketplace look broken and hides the next useful path. */
body.store-page .search-empty-state {
  height: auto !important;
  min-height: clamp(210px, 28vh, 340px) !important;
}

/* Desktop header search grows into available space on focus. The catalogue
   search gets a restrained scale and contrast cue without shifting the grid. */
body.store-page .store-search-top {
  flex: 1 1 220px;
  max-width: 320px;
  transition: flex-basis 260ms cubic-bezier(.2,.75,.25,1), max-width 260ms cubic-bezier(.2,.75,.25,1), border-color 180ms ease, box-shadow 180ms ease;
}

@media (min-width: 761px) {
  body.store-page .store-search-top:focus-within {
    flex-basis: clamp(270px, 25vw, 380px);
    max-width: 380px;
    border-color: var(--store-accent-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 22%, transparent);
  }
}

body.store-page .big-search {
  transform: scale(1);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2,.75,.25,1), border-color 180ms ease, box-shadow 180ms ease;
}
body.store-page .big-search:focus-within {
  transform: scale(1.012);
  border-color: var(--store-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 20%, transparent);
}
body.store-page :is(.store-search-top, .big-search):focus-within input { outline: none; }

@media (max-width: 650px) {
  body.store-page .search-empty-state { min-height: 190px !important; }
  body.store-page .big-search:focus-within { transform: scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
  body.store-page .store-search-top,
  body.store-page .big-search { transition: none; }
  body.store-page .big-search:focus-within { transform: none; }
}

:root[data-theme="dark"] body.store-page {
  --origyn-ink: var(--ui-ink);
  --origyn-orange: var(--ui-accent);
  --origyn-paper: var(--ui-bg);
  --origyn-muted: var(--ui-muted);
  --origyn-line: var(--ui-line);
  --accent: var(--ui-accent);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --soft: var(--ui-soft);
}

:root[data-theme="dark"] body.store-page #home,
:root[data-theme="dark"] body.store-page #discover,
:root[data-theme="dark"] body.store-page #categories {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}

:root[data-theme="dark"] body.store-page :is(#ecosystem, .brand-rail, .trust-section, .newsletter) {
  background: var(--ui-soft) !important;
  color: var(--ui-ink) !important;
}

:root[data-theme="dark"] body.store-page .brand-rail span:first-child,
:root[data-theme="dark"] body.store-page .trust-points h3,
:root[data-theme="dark"] body.store-page .trust-points b { color: var(--ui-ink) !important; }

:root[data-theme="dark"] body.store-page #originals {
  background: #0e0f0d !important;
  color: var(--ui-ink) !important;
}

:root[data-theme="dark"] body.store-page .featured-strip {
  background: #a83b16 !important;
  color: #fff3e7 !important;
}

:root[data-theme="dark"] body.store-page .text-btn {
  color: var(--ui-ink) !important;
}

:root[data-theme="dark"] body.store-page .featured-strip :is(h2, p:not(.eyebrow), .eyebrow) { color: #fff3e7 !important; }
:root[data-theme="dark"] body.store-page :is(.store-header, .cart-drawer) { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
:root[data-theme="dark"] body.store-page #cart-open { background: var(--ui-accent) !important; color: #171717 !important; border-color: var(--ui-accent) !important; }
:root[data-theme="dark"] body.store-page #cart-open b { color: #171717 !important; }
:root[data-theme="dark"] body.store-page .product-visual { background: #29271f !important; color: var(--ui-ink); }
:root[data-theme="dark"] body.store-page .product-badge { background: color-mix(in srgb, var(--ui-surface) 94%, transparent); }
:root[data-theme="dark"] body.store-page .cart-controls button,
:root[data-theme="dark"] body.store-page .cart-head button { background: var(--ui-soft); color: var(--ui-ink); }

/* Keep the cart quantity badge inside the compact navigation control so it
   cannot extend the page's scrollable width on narrow and full-width layouts. */
.origyn-brand.store-page #cart-open { position: relative; }
.origyn-brand.store-page #cart-open #cart-count {
  position: absolute;
  top: -5px;
  right: 0;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  margin: 0;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #171511;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.origyn-brand.store-page #cart-open #cart-count[hidden] { display:none !important; }

/* Saved and cart counts share the same small, warm accent badge. */
body.store-page .store-count-badge {
  border: 1px solid color-mix(in srgb, var(--ui-bg) 82%, transparent);
  background: var(--ui-accent) !important;
  color: #171511 !important;
  font-weight: 850;
  box-shadow: 0 3px 10px #0004;
}
body.store-page .store-count-badge.count-pop { animation: origyn-count-pop 260ms cubic-bezier(.2,.8,.25,1); }
@keyframes origyn-count-pop {
  0% { transform:scale(.72); }
  68% { transform:scale(1.2); }
  100% { transform:scale(1); }
}

.cart-head-actions { display:flex; align-items:center; gap:8px; }
body.store-page .cart-head-actions button,
body.store-page .saved-edit-toggle {
  display:inline-flex;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid var(--ui-line);
  border-radius:999px;
  background:var(--ui-surface);
  color:var(--ui-ink);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease;
}
body.store-page .cart-head-actions button:hover,
body.store-page .saved-edit-toggle:hover { border-color:var(--ui-accent); background:var(--ui-accent); color:#171511; transform:translateY(-1px); }
body.store-page .cart-head-actions button[hidden],
body.store-page .saved-edit-toggle[hidden] { display:none !important; }
body.store-page :is(.cart-head-actions button,.saved-edit-toggle):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
.cart-controls { display:flex; align-items:center; gap:7px; }
.cart-controls .cart-quantity { display:grid; min-width:30px; min-height:36px; place-items:center; color:var(--ui-ink); font-size:13px; font-weight:800; }
body.store-page .cart-controls .cart-remove,
body.store-page .product-remove-saved {
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--ui-accent) 48%,var(--ui-line));
  border-radius:50%;
  background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));
  color:var(--ui-accent-strong);
  cursor:pointer;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease,transform 180ms ease;
}
body.store-page .cart-controls .cart-remove:hover,
body.store-page .product-remove-saved:hover { transform:scale(1.06); border-color:var(--ui-accent); background:var(--ui-accent); color:#171511; }
body.store-page .cart-controls .cart-remove[hidden] { display:none !important; }
body.store-page .cart-remove svg,
body.store-page .product-remove-saved svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.product-visual { position:relative; }
body.store-page .product-remove-saved { position:absolute; z-index:3; top:10px; right:10px; }
body.store-page.saved-editing #store-grid .product-save { display:none; }
body.store-page .saved-edit-toggle[aria-pressed="true"] { border-color:var(--ui-accent); color:var(--ui-accent-strong); }
body.store-page .saved-edit-toggle[aria-pressed="true"]:hover { color:#171511; }
body.store-page.saved-page .all-products-section .results-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.store-page.saved-page .all-products-section .results-meta #result-count { min-width:0; }

@media (prefers-reduced-motion: reduce) {
  body.store-page .store-count-badge.count-pop { animation:none; }
  body.store-page :is(.cart-head-actions button,.saved-edit-toggle,.cart-remove,.product-remove-saved) { transition:none; }
}
