/* ============================================================
   DICE PEPTIDES — SHOP ARCHIVE STYLESHEET (product archive only)
   Arrangement only — every value is a v1.0 token; product cards,
   tabs, fields, buttons, badges, trust-strip and footer are
   reused from base.css, not redefined here. Loaded only on the
   shop / product category / product search archives.
   ============================================================ */

/* ---- Breadcrumb: shared component, now defined in base.css ---- */

/* ---- Shop hero (compact archive header) ----------------- */
.shop-hero { position: relative; overflow: hidden; padding-top: var(--sp-16); padding-bottom: var(--sp-10); }
/* the single sanctioned subtle glow, very low opacity, behind the title */
.shop-hero::before { content: ''; position: absolute; top: -30%; left: 50%; width: 760px; height: 760px; transform: translateX(-50%); background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%); opacity: .5; pointer-events: none; }
.shop-hero__inner { position: relative; max-width: 600px; }
.shop-hero__kicker { display: block; margin-bottom: var(--sp-3); }
.shop-hero__title { color: var(--text-primary); }
/* Two wordings inside one <h1>; the phone block below swaps which is shown. */
.shop-hero__compact { display: none; }
.shop-hero__intro { margin-top: var(--sp-4); }
.shop-hero__count { display: block; margin-top: var(--sp-5); font-size: 13px; color: var(--text-muted); }

/* ---- Toolbar (sticky discovery bar) --------------------- */
.shop-toolbar {
  position: sticky; top: var(--nav-h); z-index: 40;          /* below --z-nav (50) */
  background: var(--bg-base); padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-base) var(--ease-out);
}
.shop-toolbar.is-stuck {                                      /* mirrors the navbar's stuck blur */
  background: rgba(245,247,251,0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.shop-toolbar__sentinel { position: absolute; top: -1px; height: 1px; width: 1px; }

/* Category tabs: reuse .tabs/.tab, made horizontally scrollable on small screens */
.shop-cats { overflow-x: auto; margin-bottom: var(--sp-4); scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats .tabs { margin-bottom: 0; flex-wrap: nowrap; }  /* shop tabs scroll horizontally (see .shop-cats), don't wrap */
.tab[aria-current="page"] { background: var(--bg-overlay); color: var(--text-primary); }  /* link-tab active state */

.shop-toolbar__bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.shop-search { position: relative; flex: 1; min-width: 220px; }
.shop-search .field { padding-left: 40px; }
.shop-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.shop-toolbar__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.shop-count { color: var(--text-muted); white-space: nowrap; }

/* Select control (sort) — built on .field tokens; v1.0 chevron mask */
.field-select { position: relative; }
.field-select select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 38px 10px 14px; background: var(--bg-elevated);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer;
  outline: none; transition: border-color var(--dur-fast);
}
.field-select select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.field-select::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%); pointer-events: none; background-color: var(--text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- Active-filter chips -------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filter-chips:empty { display: none; }
.filter-chips:not(:empty) { padding-top: var(--sp-5); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--accent-dim); color: var(--accent); border: none;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast);
}
.filter-chip:hover { background: var(--accent-glow); }
.filter-chip svg { width: 12px; height: 12px; }
/* "Clear all" = a chip-shaped action that sits with the facet chips. Shares the
   chip's exact geometry (padding / radius / font / border:none) so its height
   matches the active "Regen" chip, but a neutral surface keeps it visually
   distinct from a removable facet. Hover/active mirror the DS accent states;
   focus ring comes from the global button:focus-visible rule in base.css. */
.filter-chips__clear {
  display: inline-flex; align-items: center; padding: 4px 10px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: none; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; /* line-height inherited to match .filter-chip's box height exactly */
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter-chips__clear:hover  { background: var(--accent-glow); color: var(--accent); }
.filter-chips__clear:active { background: var(--accent-dim); color: var(--accent); }

/* ---- Filter panel / drawer ------------------------------ */
/* Base = inline panel (no-JS usable). .js upgrades to a slide-over drawer. */
.shop-filters { margin-top: var(--sp-5); }
.shop-filters__overlay { display: none; }
.shop-filters__panel {
  display: flex; flex-direction: column; gap: var(--sp-6);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.shop-filters__head { display: flex; align-items: center; justify-content: space-between; }
.filter-group { border: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.filter-group__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.filter-price { display: flex; align-items: center; gap: var(--sp-2); }
.filter-price .field { width: 100%; }
.filter-check { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.filter-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.shop-filters__actions { margin-top: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* JS drawer behavior */
.js .shop-filters { position: fixed; inset: 0; z-index: var(--z-drawer); margin: 0; visibility: hidden; }
.js .shop-filters.is-open { visibility: visible; }
.js .shop-filters__overlay { display: block; position: absolute; inset: 0; background: rgba(15,26,51,0.45); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.js .shop-filters.is-open .shop-filters__overlay { opacity: 1; }
.js .shop-filters__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw);
  border: none; border-left: 1px solid var(--border-subtle); border-radius: 0;
  overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
}
.js .shop-filters.is-open .shop-filters__panel { transform: none; }

/* ---- Loading skeleton (matches card footprint → no CLS) -- */
.skeleton-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.skeleton-card__media { aspect-ratio: 1; background: var(--bg-elevated); }
.skeleton-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.skeleton-line { height: 12px; border-radius: var(--radius-sm); background: var(--bg-elevated); }
.skeleton-line--sm { width: 40%; }
.skeleton-line--lg { width: 80%; }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  animation: dice-shimmer 1.4s infinite;
}
@keyframes dice-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; display: none; } }

/* ---- Empty state ---------------------------------------- */
.shop-empty { text-align: center; max-width: 480px; margin-inline: auto; padding-block: var(--sp-20); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.shop-empty[hidden] { display: none; }
.shop-empty svg { color: var(--text-muted); }
.shop-empty h2 { color: var(--text-primary); }
.shop-empty__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }

/* ---- Pagination ----------------------------------------- */
.shop-pagination { margin-top: var(--sp-10); }
.shop-end { text-align: center; color: var(--text-muted); margin-top: var(--sp-4); }
.shop-pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.shop-pages a, .shop-pages span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary);
  font-size: 14px; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.shop-pages a:hover { border-color: var(--accent); color: var(--accent); }
.shop-pages .current { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.shop-loadmore.is-loading { opacity: 0.6; pointer-events: none; }

/* ---- Newsletter band ------------------------------------ */
.newsletter__inner { max-width: 560px; margin-inline: auto; text-align: center; }
.newsletter__inner h2 { color: var(--text-primary); margin-top: var(--sp-2); }
.newsletter__form { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.newsletter__form .field { flex: 1; }
.newsletter__status { margin-top: var(--sp-3); font-size: 13px; color: var(--success); }
.newsletter__status[data-error] { color: var(--danger); }
.newsletter__note { margin-top: var(--sp-3); color: var(--text-muted); }

/* ---- Educational section (learn-before-you-buy cards) --- */
.edu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.edu-card { position: relative; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.edu-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.edu-card__icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--sp-4); }
.edu-card__title { color: var(--text-primary); margin-bottom: var(--sp-2); }
.edu-card__link { margin-top: auto; padding-top: var(--sp-4); font-size: 13px; font-weight: 600; color: var(--accent); }
.edu-card__link::after { content: ''; position: absolute; inset: 0; }

/* ---- Shop responsive (inherits homepage grid breakpoints) */
@media (max-width: 900px) {
  .edu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .newsletter__form { flex-direction: column; }
  .edu-grid { grid-template-columns: 1fr; }

  /* ---- Compact archive header --------------------------------------------
     The tall orientation hero earns its space on desktop; on a phone it just
     pushed the catalogue below the fold. Breadcrumb, kicker, intro and the
     decorative glow are hidden, leaving the heading (in its shorter wording)
     over the live product count — ~55px instead of ~230px. */
  .breadcrumb { display: none; }
  .shop-hero { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .shop-hero::before { display: none; }
  .shop-hero__kicker, .shop-hero__intro { display: none; }
  .shop-hero__wide { display: none; }
  .shop-hero__compact { display: inline; }
  /* Doubled class on purpose: the typography token is written `.t-h1.t-h1`
     (0,2,0) to outrank the Elementor kit, so a single class cannot override it. */
  .shop-hero__title.shop-hero__title { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; }
  /* The product count is dropped on phones: the same figure is already implicit
     in the grid immediately below, and the row cost height above the fold. The
     element stays in the DOM because dice.js keeps it in sync via
     [data-shop-count] on every AJAX filter — hiding it, rather than removing
     it, leaves that wiring (and the aria-live announcement path) intact. */
  .shop-hero__count { display: none; }

  /* ---- Compliance notice ------------------------------------------------
     The condensed one-row wording + phone fit rules used to live here, scoped
     to this archive. They are now the site-wide default in base.css (same
     values, same measurements), so this block was an exact duplicate and is
     gone. The archive renders identically. */

  /* ---- Trust strip: hidden on phones ------------------------------------
     The four assurances repeat what the badges on each product card already
     say, and the band cost a further row above the first product. Hidden only
     here: the same shared partial is used by the product page and /start, and
     shop.css doesn't load there, so those keep it. The COA section lower down
     this page is a bare .trust-strip__list inside .section--surface (no
     .trust-strip wrapper), so it is deliberately NOT matched by this rule. */
  .trust-strip { display: none; }

  /* ---- Category pills: shorter and tighter, still one scrolling row ----- */
  .shop-cats { margin-bottom: var(--sp-2); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .shop-cats .tabs { padding: 3px; }
  .shop-cats .tab { padding: 6px 12px; font-size: 13px; }

  /* ---- Toolbar: category tabs + search only -----------------------------
     The whole meta ROW is dropped on phones — the "Showing x of y" count, the
     sort <select>, the Filters trigger and the no-JS Apply all live inside
     .shop-toolbar__meta. Hiding the row rather than the individual controls is
     what actually reclaims the height: .shop-search is `flex: 1 0 100%`, so
     once the meta is gone .shop-toolbar__bar has a single flex item, its gap
     has nothing to sit between and collapses on its own. No empty band, and no
     leftover rule needed — the previous per-control sizing here (which existed
     only to keep Sort ⟷ Filters on one line) is now dead and removed.

     The <select name="orderby"> deliberately STAYS in the DOM: a display:none
     control is still submitted with the form, so the page keeps posting the
     default order and dice.js can still read it. Sorting and filtering are
     untouched — simply not surfaced at this width. Desktop and tablet are
     unaffected; this is inside the 600px query.

     Filters applied elsewhere still surface: .filter-chips sits outside the
     toolbar and already self-hides when empty (`.filter-chips:empty`), so it
     costs nothing here but still reports state if a filtered URL is opened. */
  .shop-toolbar { padding-block: var(--sp-3); }
  .shop-search { flex: 1 0 100%; min-width: 0; }
  .shop-toolbar__meta { display: none; }

  /* ---- Products start sooner ------------------------------------------- */
  .shop-results { padding-top: var(--sp-4); }
}