/* ═══════════════════════════════════════════════════════════════════════════
   togo-page-shop.css
   TogoPeptide — Shop page visual polish (additive layer)
   Sessie 2026-05-22 · visual-polish agent

   Scope        : body[data-page="shop"] only
   Strategy     : page-scoped, token-based, mobile-first
   Constraints  : NO HTML edits · NO overflow-x bandaids · respects prefers-
                  reduced-motion · WCAG AA contrast · 44px tap targets
   Stacking     : loaded AFTER shop-glowup.css + togo-final-polish.css, so
                  rules here win on equal specificity

   Issues addressed (12 polish targets):
     1. Catalog hero header — centered, with print-button properly aligned
     2. Sticky filter sidebar — top offset accounts for shell + safe-area
     3. Sidebar scrollbar — slim, brand-tinted, not OS-default
     4. Filter checkboxes — accent color in light/dark + better focus ring
     5. Quick-filter chips — focus-visible ring + dark-mode hover when pressed
     6. Toolbar — vertical alignment of count + controls (was baseline drift)
     7. Sort + search + density — uniform 38px height + focus-visible rings
     8. Mobile drawer close button — 44px tap target (was ~30px)
     9. Mobile drawer panel — safe-area padding for notch + home-indicator
    10. Card grid — equal heights via min-height + body flex-grow
    11. Catalog card badge stack — z-order + drop-shadow for legibility
    12. Empty-state + active-chips — hide chip row when empty (collapses
        unwanted gap above grid)
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 01 · Catalog hero header alignment ───────────────────────────────── */
/* The first .section__head ("Research Compounds.") has the print-button
   in its own <p>. Center it on hero, ensure print-button has good touch
   target + theme-aware border. */
body[data-page="shop"] main > .section:first-of-type .section__head{
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body[data-page="shop"] main > .section:first-of-type .section__head > p:last-child{
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}
body[data-page="shop"] .print-button{
  min-height: 40px;
  border-color: var(--color-border-strong);
  color: var(--color-text-soft);
}
body[data-page="shop"] .print-button:hover,
body[data-page="shop"] .print-button:focus-visible{
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-accent-soft);
}

body[data-page="shop"] .entry-grid > .card.card--media .card__eyebrow{
  color: var(--color-accent-text, var(--color-accent)) !important;
}

html[data-theme="light"] body[data-page="shop"] .print-button{
  border-color: rgba(10, 10, 12, 0.22);
  color: var(--color-text-soft);
}
html[data-theme="light"] body[data-page="shop"] .print-button:hover,
html[data-theme="light"] body[data-page="shop"] .print-button:focus-visible{
  border-color: var(--color-accent-on-weak);
  color: var(--color-accent-on-weak);
  background: rgba(184, 37, 47, 0.06);
}

/* Desktop rhythm: the global 80px section padding leaves the catalog intro
   floating too far above the category cards. Tighten only this commerce pair. */
@media (min-width: 768px){
  body[data-page="shop"] main > .section:first-of-type{
    padding-top: clamp(44px, 4.2vw, 60px) !important;
    padding-bottom: clamp(18px, 2vw, 28px) !important;
  }

  body[data-page="shop"] main > .section:first-of-type .section__head{
    margin-bottom: 0 !important;
  }

  body[data-page="shop"] main > .section:nth-of-type(2){
    padding-top: clamp(24px, 2.4vw, 34px) !important;
  }
}

/* Mobile shop density: the print affordance is desktop-only chrome. Tighten
   the catalog intro so category cards start inside the first viewport. */
@media (max-width: 640px){
  body[data-page="shop"] main > .section:first-of-type{
    padding-top: 22px !important;
    padding-bottom: 6px !important;
  }

  body[data-page="shop"] main > .section:first-of-type .section__head{
    max-width: none !important;
    text-align: left;
  }

  body[data-page="shop"] main > .section:first-of-type .section__title{
    margin-bottom: 8px !important;
    line-height: 1.04 !important;
  }

  body[data-page="shop"] main > .section:first-of-type .section__lead{
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body[data-page="shop"] main > .section:first-of-type .section__head > p:last-child{
    display: none !important;
  }

  body[data-page="shop"] main > .section:nth-of-type(2){
    padding-top: 12px !important;
  }

  body[data-page="shop"] main > .section:nth-of-type(2) .section__head{
    margin-bottom: 16px !important;
  }
}


/* ── 01b · Shop shell header — desktop/tablet clipping guard ─────────── */
@media (min-width: 768px){
  body[data-page="shop"] .site-header__inner{
    min-height: var(--header-height, 64px);
    height: var(--header-height, 64px);
  }

  body[data-page="shop"] .site-header__nav{
    min-height: var(--header-height, 64px);
    overflow: visible;
  }

  body[data-page="shop"] .site-header .btn.btn--sm{
    min-height: 50px !important;
    height: 50px !important;
    block-size: 50px !important;
    padding-block: 0 !important;
    line-height: 1.25;
    overflow: visible;
  }

  body[data-page="shop"] .nav-shop__trigger{
    padding-inline: 2px;
  }

  body[data-page="shop"] .shop-card--primary{
    min-height: 58px;
  }
}

@media (min-width: 768px) and (max-width: 820px){
  body[data-page="shop"] .site-header__inner{
    gap: 10px;
    padding-inline: 20px;
  }

  body[data-page="shop"] .site-header__nav{
    gap: 16px;
  }
}


/* ── 02 · Sticky filter sidebar — top offset ──────────────────────────── */
/* Existing rule pins to top:96px which collides with the 56px sticky
   header + 36px trust-bar on certain breakpoints. Adopt a CSS variable
   that the shell already exposes (--header-offset) with a sensible
   fallback, and add bottom-padding so the last filter group doesn't kiss
   the viewport edge. */
body[data-page="shop"] .shop-filters{
  top: calc(var(--header-offset, 88px) + var(--space-4));
  max-height: calc(100vh - var(--header-offset, 88px) - var(--space-6));
  padding-bottom: var(--space-5);
  /* Soft elevation so sidebar reads as separated from the section bg */
  box-shadow: 0 1px 0 var(--color-border) inset,
              0 8px 24px -16px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] body[data-page="shop"] .shop-filters{
  box-shadow: 0 1px 0 var(--color-border) inset,
              0 8px 24px -16px rgba(20, 18, 12, 0.10);
}


/* ── 03 · Sidebar scrollbar — slim, brand-tinted ──────────────────────── */
body[data-page="shop"] .shop-filters{
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
body[data-page="shop"] .shop-filters::-webkit-scrollbar{ width: 6px; }
body[data-page="shop"] .shop-filters::-webkit-scrollbar-track{ background: transparent; }
body[data-page="shop"] .shop-filters::-webkit-scrollbar-thumb{
  background: var(--color-border-strong);
  border-radius: 999px;
}
body[data-page="shop"] .shop-filters::-webkit-scrollbar-thumb:hover{
  background: var(--color-accent);
}


/* ── 04 · Filter checkboxes — accent + focus ring ─────────────────────── */
body[data-page="shop"] .shop-filters__option{
  /* Bigger hit target without changing visual rhythm */
  padding: 8px 6px;
  margin: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 6px;
}
body[data-page="shop"] .shop-filters__option:hover{
  background: var(--color-bg-elevated);
}
body[data-page="shop"] .shop-filters__option input{
  accent-color: var(--color-accent);
}
body[data-page="shop"] .shop-filters__option input:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
body[data-page="shop"] .shop-filters__clear:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ── 05 · Quick-filter chips — focus ring + pressed-hover ─────────────── */
body[data-page="shop"] .shop-quick-filter{
  /* Aligns the dot with the text baseline */
  line-height: 1;
  padding: 9px 14px 9px 12px;
}
body[data-page="shop"] .shop-quick-filter:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Hover on a PRESSED chip in dark — preserves accent ring but brightens */
body[data-page="shop"] .shop-quick-filter[aria-pressed="true"]:hover{
  background: rgba(224, 27, 27, 0.20);
  border-color: var(--color-accent-hover, #ff3030);
}
html[data-theme="light"] body[data-page="shop"] .shop-quick-filter[aria-pressed="true"]:hover{
  background: rgba(184, 37, 47, 0.16);
}
/* Make the dot pop on pressed state */
body[data-page="shop"] .shop-quick-filter[aria-pressed="true"] .shop-quick-filter__dot{
  background: var(--color-accent-hover, #ff3030);
  box-shadow: 0 0 0 3px rgba(224, 27, 27, 0.18);
}


/* ── 06 · Toolbar — vertical alignment fix ────────────────────────────── */
/* The toolbar uses flex baseline-default which causes count + controls to
   drift when controls grow. Force center alignment + min-height so the
   row always reserves space, no layout jump on filter-state changes. */
body[data-page="shop"] .shop-toolbar{
  align-items: center;
  min-height: 44px;
}
body[data-page="shop"] .shop-toolbar__right{
  align-items: center;
}


/* ── 07 · Sort/search/density — uniform height + focus rings ──────────── */
body[data-page="shop"] .shop-search input,
body[data-page="shop"] .shop-sort,
body[data-page="shop"] .shop-mobile-filter-btn{
  height: 38px;
}
body[data-page="shop"] .shop-density{
  height: 38px;
  padding: 3px;
  align-items: stretch;
}
body[data-page="shop"] .shop-density button{
  height: auto;
  min-width: 34px;
}
body[data-page="shop"] .shop-density button:focus-visible,
body[data-page="shop"] .shop-sort:focus-visible,
body[data-page="shop"] .shop-mobile-filter-btn:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Sort select — accent border on focus, not the basic browser default */
body[data-page="shop"] .shop-sort:focus{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}


/* ── 08 · Mobile drawer close — 44px tap target ───────────────────────── */
body[data-page="shop"] .shop-drawer__close{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 24px;
  padding: 0;
}
body[data-page="shop"] .shop-drawer__close:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-text);
}
body[data-page="shop"] .shop-drawer__head{
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}


/* ── 09 · Mobile drawer panel — safe-area padding ─────────────────────── */
body[data-page="shop"] .shop-drawer__panel{
  width: min(336px, calc(100vw - 28px));
  max-width: none;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
}
body[data-page="shop"] #shop-filters-drawer{
  min-width: 0;
}
body[data-page="shop"] #shop-filters-drawer .shop-filters__group{
  padding-block: 12px;
}
body[data-page="shop"] #shop-filters-drawer .shop-filters__group:first-child{
  padding-top: 0;
}
body[data-page="shop"] #shop-filters-drawer .shop-filters__label{
  margin-bottom: 8px;
}
body[data-page="shop"] #shop-filters-drawer .shop-filters__option{
  min-height: 44px;
  padding: 10px 8px;
  gap: 10px;
}
body[data-page="shop"] #shop-filters-drawer .shop-filters__option input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  flex: 0 0 16px;
}


/* ── 10 · Card grid — equal heights ───────────────────────────────────── */
/* The catalog grid uses auto-fill which gives equal column-widths but
   cards with longer descriptions push the row taller, leaving short
   neighbours with a gap below the body. Force flex column layout in card
   body so it pushes content evenly. */
body[data-page="shop"] .shop-grid .card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="shop"] .shop-grid .card__body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body[data-page="shop"] .shop-grid .card__body-text{
  margin-top: auto;
  margin-bottom: 0;
}

/* Product packshots are square assets. The global media contract uses cover,
   which crops vial/label detail in desktop 4:3 cards. Shop cards should show
   the full product, not a zoomed crop. */
body[data-page="shop"] .shop-grid a.card.card--media .card__media{
  aspect-ratio: 1 / 1 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.10)) !important;
}

body[data-page="shop"] .shop-grid a.card.card--media .card__media img{
  object-fit: contain !important;
  object-position: center center !important;
  padding: clamp(8px, 1.4vw, 14px) !important;
  box-sizing: border-box !important;
}

body[data-page="shop"] .shop-grid a.card.card--media .card__media::before{
  height: 24% !important;
  opacity: 0.72;
}

/* Category entry cards use tall bundle/vial photography. The shared card
   media default is cover, which zooms those assets beyond the frame. */
body[data-page="shop"] .entry-grid > .card.card--media .card__media{
  --shop-entry-media-pad: clamp(8px, 2.4vw, 14px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.10));
}

body[data-page="shop"] .entry-grid > .card.card--media .card__media picture{
  display: contents;
  min-width: 0;
}

body[data-page="shop"] .entry-grid > .card.card--media .card__media img{
  position: absolute !important;
  inset: var(--shop-entry-media-pad) !important;
  width: calc(100% - (var(--shop-entry-media-pad) * 2)) !important;
  height: calc(100% - (var(--shop-entry-media-pad) * 2)) !important;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  box-sizing: border-box;
}


/* ── 11 · Card badge — z-order + drop-shadow ──────────────────────────── */
/* The brand badge sits over the picture; on light-toned product images
   the contrast can wash out. Add a soft drop-shadow + ensure z above
   picture but below interactive overlays. Also align the badge-stack
   inside the catalog grid (existing rules cover position; we tighten). */
body[data-page="shop"] .shop-grid .card__badge,
body[data-page="shop"] .shop-grid .card-badge-stack{
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
html[data-theme="light"] body[data-page="shop"] .shop-grid .card__badge,
html[data-theme="light"] body[data-page="shop"] .shop-grid .card-badge-stack{
  filter: drop-shadow(0 1px 2px rgba(20, 18, 12, 0.12));
}


/* ── 12 · Active-chips row — collapse when empty ──────────────────────── */
/* The #shop-chips container reserves vertical space even when empty
   (16px bottom-margin). When no chips render, this leaves an awkward gap
   between quick-filter row and grid. Collapse it. */
body[data-page="shop"] .shop-chips:empty{
  display: none;
}
body[data-page="shop"] .shop-chip:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ── Extras — small spacing + responsive tweaks ───────────────────────── */

/* Sidebar label spacing tightened — was 10px which broke against 8px
   option padding above */
body[data-page="shop"] .shop-filters__label{
  margin-bottom: var(--space-2);
}

/* Quick-filter row + chip row stacking — keep visual rhythm when both
   are present (chips below quick filters), and when only one is shown */
body[data-page="shop"] .shop-quick-filters + .shop-chips:not(:empty){
  margin-top: -4px;
}

/* Stack-CTA below catalog — pull it slightly closer on shop page so the
   "Open the Stack" feels like a natural next step, not a separate page */
body[data-page="shop"] .stack-cta{
  margin-top: var(--space-2);
}

/* Trust-pills row — give it more breathing room above footer */
body[data-page="shop"] .tgp-trust-pills{
  margin-top: var(--space-3);
}

/* Tablet (641-980) — sidebar hidden, drawer takes over. Make sure the
   toolbar doesn't shrink the search field below usable width while the
   density toggle still claims space */
@media (min-width: 641px) and (max-width: 980px){
  body[data-page="shop"] .shop-toolbar__right{
    flex-wrap: nowrap;
  }
  body[data-page="shop"] .shop-search{
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-page="shop"] .shop-search input{
    width: 100%;
    min-width: 160px;
  }
}

/* Mobile (≤640) — drawer button gets full a11y treatment + the catalog
   density toggle stays hidden (existing rule). Also keep card title
   from clipping under the badge on tiny phones */
@media (max-width: 640px){
  body[data-page="shop"] .section > .container:has(.shop-layout){
    padding-inline: 16px;
  }
  body[data-page="shop"] .shop-toolbar{
    margin: 0 0 12px !important;
    padding: 0 !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-page="shop"] .shop-toolbar__count{
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.25;
  }
  body[data-page="shop"] .shop-toolbar__right{
    min-block-size: 0 !important;
    gap: 8px !important;
  }
  body[data-page="shop"] .shop-toolbar__right > *,
  body[data-page="shop"] .shop-search input,
  body[data-page="shop"] .shop-sort,
  body[data-page="shop"] .shop-mobile-filter-btn{
    min-block-size: 44px !important;
    block-size: 44px !important;
  }
  body[data-page="shop"] .shop-sort{
    padding-block: 8px !important;
  }
  body[data-page="shop"] .shop-quick-filters{
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  body[data-page="shop"] .shop-quick-filter{
    min-height: 40px !important;
    padding: 8px 12px 8px 10px !important;
    font-size: 12.25px !important;
    line-height: 1.15 !important;
  }
  body[data-page="shop"] .shop-layout > .shop-main,
  body[data-page="shop"] .shop-grid{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body[data-page="shop"] .shop-grid{
    gap: 10px !important;
  }
  body[data-page="shop"] .shop-mobile-filter-btn{
    min-height: 44px;
  }
  body[data-page="shop"] .entry-grid > .card.card--media .card__body{
    padding: 10px 11px 12px !important;
    gap: 0 !important;
  }
  body[data-page="shop"] .entry-grid > .card.card--media .card__eyebrow{
    display: none !important;
  }
  body[data-page="shop"] .entry-grid > .card.card--media .card__title{
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }
  body[data-page="shop"] .entry-grid > .card.card--media .card__body-text{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.36 !important;
    margin: 0 !important;
  }
  body[data-page="shop"] .shop-grid .card__media{
    /* Slightly squarer aspect on phones — gives badge more headroom */
    aspect-ratio: 1 / 1;
  }
  body[data-page="shop"] .shop-grid .card__body{
    padding: 12px 14px !important;
  }
  body[data-page="shop"] .shop-grid .card__title{
    font-size: 13.75px !important;
    line-height: 1.22 !important;
    margin-bottom: 7px !important;
  }
  body[data-page="shop"] .shop-grid .card__body-text{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }
  /* Hero head — keep centered on phone too, but tighten max-width */
  body[data-page="shop"] main > .section:first-of-type .section__head{
    max-width: 90%;
  }

  body[data-page="shop"].shop-toolbar-near-bottom .tgp-mobile-nav,
  body[data-page="shop"].shop-toolbar-near-bottom .togo-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
  }
}

@media (max-width: 820px){
  body[data-page="shop"] .togo-anchor-link{
    display: none !important;
  }
}

@media (min-width: 641px) and (max-width: 900px){
  body[data-page="shop"] .shop-toolbar + .shop-grid{
    padding-top: 14px;
  }
}

/* 375px still has enough room for two premium product columns:
   311px content width - 10px gap = 150.5px per card. Keep 1-col only for
   legacy mini screens where image, badges, and title would crowd. */
@media (min-width: 341px) and (max-width: 380px){
  body[data-page="shop"] .shop-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  body[data-page="shop"] .shop-grid .card__body{
    padding: 11px 12px 13px !important;
  }
  body[data-page="shop"] .shop-grid .card__eyebrow{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 9.75px !important;
    line-height: 1.18 !important;
    margin-bottom: 4px !important;
  }
  body[data-page="shop"] .shop-grid .card__title{
    min-height: 33px !important;
    font-size: 13.75px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  body[data-page="shop"] .shop-grid .card__body-text{
    font-size: 11.25px !important;
    line-height: 1.38 !important;
  }
}

/* Reduce-motion guard — no scale/translate on card hover for users who
   opt out (existing layers add hover transforms) */
@media (prefers-reduced-motion: reduce){
  body[data-page="shop"] .shop-grid .card:hover{
    transform: none;
  }
  body[data-page="shop"] .shop-quick-filter[aria-pressed="true"] .shop-quick-filter__dot{
    box-shadow: none;
  }
}

/* Category entry tiles: these are navigation affordances, not full product
   cards. Keep them compact so the catalog starts sooner on every viewport. */
body[data-page="shop"] .entry-grid > .card.card--media .card__media {
  aspect-ratio: 4 / 3;
}

body[data-page="shop"] .entry-grid > .card.card--media .card__body {
  text-align: center;
}

body[data-page="shop"] .entry-grid > .card.card--media .card__body-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  body[data-page="shop"] .entry-grid > .card.card--media .card__body {
    min-height: 0;
    padding: 8px 10px 10px !important;
    justify-content: center;
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__eyebrow,
  body[data-page="shop"] .entry-grid > .card.card--media .card__body-text {
    display: none !important;
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__title {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.16 !important;
  }
}

@media (min-width: 641px) and (max-width: 899px) {
  body[data-page="shop"] .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__body {
    min-height: 0;
    padding: 10px 12px 12px !important;
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__eyebrow,
  body[data-page="shop"] .entry-grid > .card.card--media .card__body-text {
    display: none !important;
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__title {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }
}

@media (min-width: 1180px) {
  body[data-page="shop"] .entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="shop"] .entry-grid > .card.card--media .card__body {
    padding: 14px 16px 16px;
  }
}

/* Shop category tiles are navigation, not product cards. The global media-card
   contract intentionally makes product cards dark; here that made category
   navigation feel heavy and over-outlined on mobile. */
body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media {
  background: color-mix(in srgb, var(--color-bg-elevated) 94%, var(--color-accent) 6%) !important;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media:hover,
body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 36%, var(--color-border)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
}

body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__media {
  margin: 8px 8px 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #141418 0%, #08080a 100%) !important;
}

body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__media::before {
  height: 20% !important;
  opacity: .58;
}

body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__media img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  transform: none;
  transform-origin: center;
}

html[data-theme="light"] body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media {
  background: #fff !important;
  border-color: rgba(15, 23, 42, .11) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .075) !important;
}

html[data-theme="light"] body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__title {
  color: #111114 !important;
}

html[data-theme="light"] body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__body-text {
  color: #55514a !important;
}

/* Product media safe-zone: corner chrome should not push the packshot off-center. */
body[data-page="shop"] .shop-grid a.card.card--media .card__media img {
  padding: 28px 24px 24px !important;
}

/* Dense 2-column catalog grids leave only ~32px side gutters on 375-430px.
   A 44px fixed FAB cannot sit there without covering product cards. */
@media (max-width: 899px) {
  body[data-page="shop"] #togo-feedback-fab,
  body[data-page="shop"] .tgp-back-to-top {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body[data-page="shop"] .entry-grid {
    gap: 12px !important;
  }

  body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media {
    border-radius: 18px;
  }

  body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__media {
    margin: 6px 6px 0;
    border-radius: 14px;
    aspect-ratio: 5 / 4;
  }

  body[data-page="shop"] .entry-grid > a.card.card--interactive.card--media .card__media img {
    transform: none;
  }

  body[data-page="shop"] .shop-grid a.card.card--media .card__media img {
    padding: 26px 18px 18px !important;
  }

  body[data-page="shop"] .shop-grid a.card.card--media .card__media > .togo-wishlist-heart {
    top: 7px !important;
    right: 7px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  body[data-page="shop"] .shop-grid a.card.card--media .card__media > .togo-wishlist-heart svg {
    width: 14px !important;
    height: 14px !important;
  }

  body[data-page="shop"] .shop-grid a.card.card--media .card__body-text {
    display: none !important;
  }
}