/**
 * GC Shop Archive — product grid + category tabs for the WooCommerce shop
 * and product category archives. Mirrors the on-page product grid design;
 * tabs are server-rendered links (active = filled pill), no JS required.
 * Scoped under .gc-shop.
 */

.gc-shop{--gc-blue:var(--gc-glider-start,#5BA7DB);--gc-blue-soft:var(--gc-glider-end,#6EC1E4);
  --gc-navy:#0E1A24;--gc-ink:#12232F;
  --gc-orange:#F2994A;--gc-line:rgba(14,26,36,.10);--gc-card:#ffffff;--gc-muted:#5a6b78;
  position:relative;padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px);color:var(--gc-ink);}
.gc-shop *{box-sizing:border-box;}
/* Side padding follows the Customizer's GC Shop "Side Padding" control. Capped
   against the viewport so the saved desktop value never crushes narrow screens. */
.gc-shop__inner{max-width:var(--gc-woo-max, 1360px);margin:0 auto;padding-inline:min(var(--gc-woo-x-pad, 40px), 8vw);}

/* Archive leads with a full-bleed hero, so drop the wrap's header clearance and
   let the dark hero bleed up behind the navbar (matching the home page). */
.woocommerce-page-wrap--shop{padding-top:0;}

/* The hero is rendered from an Elementor template, so its container inherits
   Elementor's default block padding (--container-default-padding-*, 10px when the
   kit sets nothing). That showed as a white strip between the dark slider and the
   band below it. The slider is already full-bleed and sets its own padding, so
   zero the wrapper's vertical padding here rather than editing one template. */
.woocommerce-page-wrap--shop > .elementor > .e-con{--padding-top:0px;--padding-bottom:0px;}

/* When the hero comes from a saved template (or the widget fallback) it renders
   as a bare .elementor-widget straight into the wrap, with no container around
   it. Elementor still gives every non-last widget 20px of bottom spacing, which
   showed as a white strip under the slider. Zero it for the widgets this
   template emits (the class is repeated to out-specify Elementor's rule). */
.woocommerce-page-wrap--shop > .elementor-element.elementor-widget,
.woocommerce-page-wrap--shop .gc-shop-fade > .elementor-element.elementor-widget{
  margin-block-end:0;margin-bottom:0;}

/* Blue edge fades. A short blue bleed descends from the hero slider and rises
   from the footer, matching the home page's under-hero fade. The wrapper spans
   from directly beneath the slider to directly above the footer (it absorbs the
   wrap's bottom padding) so both fades meet their edge with no gap. */
.woocommerce-page-wrap--shop{padding-bottom:0;}
.gc-shop-fade{--gc-blue:var(--gc-glider-start,#5BA7DB);position:relative;padding-bottom:80px;
  width:100vw;margin-left:calc(50% - 50vw);
  background:
    linear-gradient(180deg,var(--gc-blue) 0%,rgba(91,167,219,0) 220px),
    linear-gradient(0deg,var(--gc-blue) 0%,rgba(91,167,219,0) 220px);}

/* Sticky search bar. Shop and category archives only: it lives in this template,
   so nothing else on the site inherits it. The offset is measured from the real
   header by gc-shop-archive.js, since the header is padded rather than a fixed
   height and grows for the admin bar. */
/* Shop search inside the site header. It is a full width row of the header's
   grid, so it inherits the bar's tint and blur, travels with the sticky header
   and pushes the page down instead of covering it. Rendered only on the shop
   and category archives, from template-parts/site-header.php. */
/* The header grid's 24px gap is there to space the columns, and it was spacing this row
   off the nav too. Row gap is pulled back so the search sits just under the nav. */
.site-header{row-gap:6px;}
.site-header .primary-navigation{z-index:3;}
.site-header .header-actions{z-index:4;}
.site-header .gc-header-search{grid-column:1 / -1;padding:6px 0 2px;z-index:1;}
.gc-header-search__inner{max-width:620px;margin-inline:auto;}
.gc-header-search .gc-gss{padding:0;}
.gc-header-search .gc-gss__row{margin:0;}
/* The desktop header switches from its grid to a flex row in the two tight
   tiers main.js measures for (.gc-header-fit, .gc-header-compact). grid-column
   means nothing to a flex container, so without this the search row became a
   flex item and joined the nav line, squeezed to whatever space was left and
   pushing the icons over the menu. Let the flex header wrap and give the row a
   full-width second line, which is where the grid puts it too. */
@media(min-width:961px){
  .site-header.gc-header-fit,
  .site-header.gc-header-compact{flex-wrap:wrap;row-gap:6px;}
  .site-header.gc-header-fit .gc-header-search,
  .site-header.gc-header-compact .gc-header-search{order:10;flex:0 0 100%;width:100%;}
  /* Wrapping breaks lines on natural widths before it shrinks anything, so the
     nav (sized by its pill) would push the icons onto a line of their own. A
     zero basis lets it take what is left instead, keeping the top row as it is
     without the search row on it. */
  .site-header.gc-header-compact .primary-navigation{flex:1 1 0;}
}

/* The mobile header is a flex column (.site-branding order:1, .header-actions
   order:2). Without an order of its own this row is order:0, so the search sat
   above the logo. Put it last, under the icon row. */
@media(max-width:960px){
  .site-header .gc-header-search{order:3;width:100%;}
}
@media(max-width:640px){
  .site-header .gc-header-search{padding:5px 0 0;}
}

/* Header */
.gc-shop__head{max-width:640px;margin:0 0 clamp(24px,3.5vw,40px);}
.gc-shop__eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--gc-blue);margin-bottom:.7rem;}
.gc-shop__eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--gc-orange);
  vertical-align:middle;margin-right:.6rem;border-radius:2px;}
.gc-shop__title{margin:0;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;font-weight:800;
  letter-spacing:-.02em;color:var(--gc-navy);}
.gc-shop__lead{margin:.85rem 0 0;font-size:1.02rem;line-height:1.6;color:var(--gc-muted);}
.gc-shop--board{padding-top:0;}
.gc-shop--board .gc-shop__head{max-width:720px;margin-inline:auto;text-align:center;}
.gc-shop__subhead{max-width:640px;margin:0 auto 1.1rem;text-align:center;scroll-margin-top:var(--gc-shop-anchor,120px);}
.gc-shop__subtitle{margin:0;font-family:var(--gc-font-heading,"Manrope",sans-serif);
  font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.015em;
  color:var(--gc-ink);}
.gc-shop__subnote{margin:.35rem 0 0;font-size:.9rem;line-height:1.5;color:var(--gc-muted);}
.gc-shop__subnote p{margin:0;}

/* Tabs (links) */
.gc-shop__tabs{position:relative;display:flex;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;
  padding:.4rem;margin:0 auto clamp(26px,3.5vw,40px);background:rgba(255,255,255,.7);
  border:1px solid var(--gc-line);border-radius:999px;width:fit-content;max-width:100%;
  backdrop-filter:blur(6px);box-shadow:0 8px 30px -18px rgba(14,26,36,.35);scrollbar-width:none;}
.gc-shop__tabs::-webkit-scrollbar{display:none;}
.gc-shop__tab{position:relative;z-index:1;text-decoration:none;font-weight:600;font-size:.92rem;
  color:var(--gc-ink);white-space:nowrap;padding:.62rem 1.15rem;border-radius:999px;
  transition:color .25s,background .25s,box-shadow .25s;}
.gc-shop__tab:hover{color:var(--gc-blue);}
.gc-shop__tab[aria-current="page"]{color:#fff;
  background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-soft));
  box-shadow:0 8px 20px -8px rgba(91,167,219,.7);}
.gc-shop__tab:focus-visible{outline:2px solid var(--gc-orange);outline-offset:2px;}
.gc-shop__count{opacity:.65;font-size:.82em;font-weight:600;margin-left:.35em;}
.gc-shop__tab[aria-current="page"] .gc-shop__count{opacity:.85;}

/* Sliding pill (JS) — mirrors the navbar nav-glider. When active, the JS adds
   .js-glider; the static active-tab fill is neutralised and the glider draws
   the pill, sliding to whichever tab is hovered and resting on the active one. */
.gc-shop__glider{position:absolute;top:.4rem;left:0;height:calc(100% - .8rem);border-radius:999px;
  background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-soft));
  box-shadow:0 8px 20px -8px rgba(91,167,219,.7);pointer-events:none;opacity:0;z-index:0;
  transition:transform .34s cubic-bezier(.4,0,.2,1),width .34s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
.gc-shop__glider.is-ready{opacity:1;}
.gc-shop__tabs.js-glider .gc-shop__tab[aria-current="page"]{background:transparent;box-shadow:none;color:var(--gc-ink);}
.gc-shop__tabs.js-glider .gc-shop__tab.is-lit{color:#fff;}
.gc-shop__tabs.js-glider .gc-shop__tab.is-lit .gc-shop__count{opacity:.85;}

/* Search results reuse the cards inside the already padded and width capped
   .site-main, so the band drops its own vertical padding and inner wrapper. */
.gc-shop--search{padding:0;margin-top:34px;}
.gc-shop--search + .gc-sresults{margin-top:34px;}

/* Grid */
.gc-shop__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2vw,24px);}
/* Grid items default to min-width:auto, so a long unbroken product name can push
   a column past its track and overflow the row on narrow screens. */
.gc-shop__item,.gc-shop__body{min-width:0;}
.gc-shop__grid::before,.gc-shop__grid::after{display:none;}
.gc-shop__card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--gc-card);
  border:1px solid var(--gc-line);border-radius:18px;text-decoration:none;color:inherit;
  box-shadow:0 12px 34px -24px rgba(14,26,36,.5);
  transition:transform .3s cubic-bezier(.4,.7,.2,1),box-shadow .3s,border-color .3s;}
.gc-shop__card:hover{transform:translateY(-6px);border-color:rgba(91,167,219,.45);
  box-shadow:0 26px 50px -26px rgba(91,167,219,.55);}
/* The name is the card's only link; its ::after stretches over the card so the
   whole tile stays clickable while the reviews chip keeps its own links. */
.gc-shop__card:focus-within{outline:2px solid var(--gc-orange);outline-offset:3px;}
.gc-shop__link{color:inherit;text-decoration:none;}
.gc-shop__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px;}
.gc-shop__link:focus-visible{outline:none;}

.gc-shop__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:17px 17px 0 0;
  background:radial-gradient(120% 120% at 50% 0,#f4fafe,#e9f3fb);}
.gc-shop__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,.7,.2,1);}
.gc-shop__card:hover .gc-shop__media img{transform:scale(1.06);}
.gc-shop__sale{position:absolute;top:12px;left:12px;background:var(--gc-orange);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .6rem;border-radius:999px;box-shadow:0 6px 16px -6px rgba(242,153,74,.8);z-index:1;}

/* Quick add to basket — a basket icon in the corner of the artwork, shared by
   every .gc-shop__card surface (shop and category grid, product results in
   search, the Solari board, the cart's suggestion strip). "Learn more" stays as
   the written call to action; this is the shortcut for a shopper who has already
   decided.

   z-index 5 puts it above the stretched card link (.gc-shop__link::after,
   z-index 1) — that overlay is what would otherwise swallow the click. Bottom
   left keeps it clear of the reviews chip (bottom right) and the badges (top).
   Selectors carry the media as well, so WooCommerce's own `.woocommerce a.button`
   reset does not win on specificity.

   That reset is also why the rest state is driven by custom properties the card
   sets rather than by a plain `.gc-shop__card:hover .gc-shop__add` rule: with
   the media in the selector here, any reveal rule written the short way is less
   specific than this one and `opacity:0` would win even while hovered. The
   properties inherit down instead, so the reveal never has to out-specify
   anything and a rule that genuinely needs to override — .loading, the Solari
   flip, the reviews panel below — still just declares the value. */
.gc-shop__card .gc-shop__media a.gc-shop__add{position:absolute;left:12px;bottom:12px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  margin:0;padding:0;border:0;border-radius:999px;overflow:visible;
  background:rgba(255,255,255,.94);color:var(--gc-blue,#5BA7DB);
  box-shadow:0 8px 20px -8px rgba(20,33,43,.55);backdrop-filter:blur(6px);
  line-height:1;text-decoration:none;white-space:normal;
  /* Hidden at rest, and pointer-events off with it: an invisible target sitting
     above the card overlay would eat clicks meant for the card. Keyboard focus
     still reaches it, and focus-within brings it back on screen. */
  opacity:var(--gc-add-o,0);
  transform:translateY(var(--gc-add-y,6px)) scale(var(--gc-add-s,.92));
  pointer-events:var(--gc-add-pe,none);
  transition:opacity .22s,transform .22s cubic-bezier(.4,.7,.2,1),background .22s,color .22s;}
.gc-shop__add-icon,.gc-shop__add-tick{display:flex;align-items:center;justify-content:center;}
.gc-shop__add-tick{display:none;}
.gc-shop__add svg{width:19px;height:19px;display:block;}
.gc-shop__card:hover,
.gc-shop__card:focus-within{--gc-add-o:1;--gc-add-y:0px;--gc-add-s:1;--gc-add-pe:auto;}
/* Set on the button itself, so it beats the card's inherited value. */
.gc-shop__card .gc-shop__media a.gc-shop__add:hover{background:var(--gc-blue,#5BA7DB);color:#fff;
  --gc-add-s:1.06;}
.gc-shop__add:focus-visible{outline:2px solid var(--gc-orange,#F2994A);outline-offset:2px;}
/* Nothing to add from the grid — options to choose, out of stock, external.
   Same control, tinted differently, and WooCommerce's own add_to_cart_url()
   sends it to the product page. */
.gc-shop__card .gc-shop__media a.gc-shop__add--options{color:var(--gc-muted,#5A6B75);}
.gc-shop__card .gc-shop__media a.gc-shop__add--options:hover{background:var(--gc-navy,#14212B);color:#fff;}
/* The two states wc-add-to-cart.js sets on the button. WooCommerce's own
   feedback for both is a webfont glyph on ::after, sized and spaced for a wide
   text button: a spinner while loading, a tick once added. Neither survives a
   40px circle — the glyph and its margin push the icon off centre and spill out
   of the round background, and in the added state it lands next to our own tick
   so the card shows two. Both are off here; the basket spins and the SVG tick
   swaps in instead. */
.gc-shop__card .gc-shop__media a.gc-shop__add.loading{opacity:1;pointer-events:none;padding:0;
  transform:translateY(0) scale(1);}
.gc-shop__card .gc-shop__media a.gc-shop__add::after{display:none;content:none;}
.gc-shop__add.loading .gc-shop__add-icon{animation:gc-shop-add-spin .8s linear infinite;}
.gc-shop__card .gc-shop__media a.gc-shop__add.added{background:var(--gc-blue,#5BA7DB);color:#fff;}
.gc-shop__add.added .gc-shop__add-icon{display:none;}
.gc-shop__add.added .gc-shop__add-tick{display:flex;}
@keyframes gc-shop-add-spin{to{transform:rotate(360deg);}}
/* WooCommerce appends a "View cart" link after the button. On top of the artwork
   it is stray text, and the header basket already confirms the add. */
.gc-shop__card .added_to_cart{display:none;}
/* Bottom left clears the reviews chip, but not the panel the chip opens: that is
   min-width 214px growing leftward from right:12px, so on a card at the grid's
   240px minimum it reaches across the bottom edge and paints over this button
   (.gc-rstar is z-index 6). Since the add is revealed by hovering the card
   rather than the button, it would otherwise sit visible underneath. The peek
   comes first inside .gc-shop__media on all four surfaces, so a sibling
   selector hides the add for as long as the panel is up; declaring opacity
   outright keeps it ahead of the card's reveal. Hover-capable pointers only —
   on touch the panel is display:none (gc-product-badges.css) and the add is the
   control that has to stay put. */
@media (hover:hover){
  .gc-shop__card .gc-shop__media .gc-rstar:hover ~ a.gc-shop__add,
  .gc-shop__card .gc-shop__media .gc-rstar:focus-within ~ a.gc-shop__add{opacity:0;pointer-events:none;}
}

.gc-shop__body{display:flex;flex-direction:column;flex:1;padding:1.05rem 1.15rem 1.25rem;}
.gc-shop__cat{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--gc-blue);margin-bottom:.45rem;}
.gc-shop__name{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;color:var(--gc-navy);}
.gc-shop__price{margin:.6rem 0 0;font-weight:800;font-size:1.12rem;color:var(--gc-ink);
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.gc-shop__price del{font-weight:600;font-size:.9rem;color:var(--gc-muted);text-decoration:line-through;}
.gc-shop__price del .woocommerce-Price-amount{color:inherit;}
.gc-shop__price ins{text-decoration:none;color:var(--gc-orange);}
.gc-shop__cta{margin-top:auto;padding-top:1.05rem;display:inline-flex;align-items:center;gap:.5rem;
  align-self:flex-start;font-weight:700;font-size:.9rem;color:var(--gc-blue);}
.gc-shop__cta svg{width:15px;height:15px;transition:transform .25s;}
.gc-shop__card:hover .gc-shop__cta svg{transform:translateX(4px);}

.gc-shop__buy{position:relative;z-index:2;margin-top:auto;padding-top:1.05rem;}
.gc-shop__buy-form{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:0;}
.gc-shop__buy-form .quantity{display:flex;align-items:center;justify-content:center;align-self:center;
  flex:0 0 auto;padding:2px;
  border:1px solid var(--gc-line);border-radius:var(--gc-radius-pill,999px);background:var(--gc-white,#fff);}
.gc-shop__buy-form .quantity input.qty{width:34px;height:32px;padding:0;margin:0;border:0;background:none;
  text-align:center;font-family:inherit;font-weight:700;font-size:.9rem;color:var(--gc-ink);
  -moz-appearance:textfield;appearance:textfield;}
.gc-shop__buy-form .quantity input.qty:focus-visible{outline:2px solid var(--gc-orange);outline-offset:2px;border-radius:8px;}
.gc-shop__buy-form .quantity input.qty::-webkit-outer-spin-button,
.gc-shop__buy-form .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gc-shop__buy-form .gc-qty-btn{width:30px;height:30px;flex:0 0 auto;color:var(--gc-blue);
  transition:background .15s ease,color .15s ease;}
.gc-shop__buy-form .gc-qty-btn:hover{background:var(--gc-blue);color:#fff;}
.gc-shop__buy-form .gc-qty-btn:focus-visible{outline:2px solid var(--gc-orange);outline-offset:2px;}
.gc-shop__buy-form .gc-qty-btn svg{width:11px;height:11px;}
.gc-shop__buy-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:36px;padding:.35rem .8rem;border:0;border-radius:var(--gc-radius-pill,999px);cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.85rem;line-height:1.2;color:#fff;
  background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-soft));
  box-shadow:0 8px 20px -10px rgba(91,167,219,.8);
  transition:filter .25s,box-shadow .25s,transform .25s;}
.gc-shop__buy-btn:hover{filter:brightness(1.06);box-shadow:0 12px 24px -10px rgba(91,167,219,.9);}
.gc-shop__buy-btn:active{transform:translateY(1px);}
.gc-shop__buy-btn:focus-visible{outline:2px solid var(--gc-orange);outline-offset:2px;}
.gc-shop__buy-icon{display:flex;align-items:center;justify-content:center;}
.gc-shop__buy-icon svg{width:16px;height:16px;display:block;}
.gc-shop__buy-btn.loading{opacity:.75;pointer-events:none;}
.gc-shop__buy-btn.loading .gc-shop__buy-icon{animation:gc-shop-add-spin .8s linear infinite;}
.gc-shop__buy-btn.added .gc-shop__buy-icon{display:none;}
.gc-shop__buy-btn::after{display:none;content:none;}
@media (prefers-reduced-motion:reduce){
  .gc-shop__buy-btn,.gc-shop__buy-btn:hover,.gc-shop__buy-btn:active{transition:none;transform:none;}
  .gc-shop__buy-btn.loading .gc-shop__buy-icon{animation:none;}
}

.gc-shop__empty{text-align:center;color:var(--gc-muted);padding:3rem 0;font-size:1.05rem;}

/* Pagination */
.gc-shop .woocommerce-pagination{margin-top:clamp(32px,4vw,52px);text-align:center;}
.gc-shop .woocommerce-pagination ul{display:inline-flex;gap:.4rem;list-style:none;margin:0;padding:0;border:0;}
.gc-shop .woocommerce-pagination ul li{margin:0;border:0;overflow:visible;}
.gc-shop .woocommerce-pagination a,.gc-shop .woocommerce-pagination span{display:flex;align-items:center;
  justify-content:center;min-width:44px;height:44px;padding:0 .6rem;border-radius:12px;font-weight:700;
  background:rgba(255,255,255,.8);border:1px solid var(--gc-line);color:var(--gc-ink);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;}
.gc-shop .woocommerce-pagination a:hover{border-color:var(--gc-blue);color:var(--gc-blue);}
.gc-shop .woocommerce-pagination span.current{background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-soft));
  color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(91,167,219,.7);}

/* No hover to lean on: the control stays on screen and keeps a 40px target,
   the same way the reviews chip does. */
@media (hover:none){
  .gc-shop__card .gc-shop__media a.gc-shop__add{opacity:1;transform:none;pointer-events:auto;}
  .gc-shop__card .gc-shop__media a.gc-shop__add:hover{background:rgba(255,255,255,.94);
    color:var(--gc-blue,#5BA7DB);transform:none;}
}
@media (prefers-reduced-motion:reduce){
  /* transform declared outright, so neither the card's inherited values nor the
     button's own hover can put the movement back. */
  .gc-shop__card .gc-shop__media a.gc-shop__add,
  .gc-shop__card .gc-shop__media a.gc-shop__add:hover,
  .gc-shop__card .gc-shop__media a.gc-shop__add.loading{transition:none;transform:none;}
  .gc-shop__add.loading .gc-shop__add-icon{animation:none;}
}

@media(max-width:640px){
  .gc-shop{padding:44px 0 48px;}
  .gc-shop__inner{padding-inline:min(var(--gc-woo-x-pad, 40px), 20px);}
  .gc-shop__head{margin-bottom:26px;}
  .gc-shop__eyebrow{font-size:.68rem;letter-spacing:.1em;margin-bottom:.5rem;}
  .gc-shop__eyebrow::before{width:18px;margin-right:.45rem;}
  .gc-shop__title{font-size:clamp(1.5rem,6vw,1.6rem);}
  .gc-shop__lead{margin-top:.6rem;font-size:.92rem;line-height:1.5;}
  /* Phones: the single non-wrapping row hid the last categories behind an
     invisible horizontal scrollbar. Wrap the chips instead so every department
     is on screen, and give each one a 44px tap target. */
  .gc-shop__tabs{width:100%;margin-bottom:24px;padding:.3rem;flex-wrap:wrap;
    justify-content:center;overflow:visible;border-radius:20px;}
  .gc-shop__tab{display:inline-flex;align-items:center;min-height:44px;
    font-size:.82rem;padding:.6rem 1rem;}
  /* Counts overstate what the grid renders (catalog-hidden products are counted)
     and they are what pushes the pills off screen — drop them on phones. */
  .gc-shop__count{display:none;}
  /* A single-row sliding pill cannot follow a wrapped bar, so the glider is off
     here and the static active fill (neutralised by .js-glider) is restored. */
  .gc-shop__glider{display:none;}
  .gc-shop__tabs.js-glider .gc-shop__tab.is-lit{color:var(--gc-ink);}
  .gc-shop__tabs.js-glider .gc-shop__tab[aria-current="page"]{color:#fff;
    background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-soft));
    box-shadow:0 8px 20px -8px rgba(91,167,219,.7);}
  .gc-shop__tabs.js-glider .gc-shop__tab[aria-current="page"] .gc-shop__count{opacity:.85;}
  .gc-shop__grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .gc-shop__card{border-radius:14px;}
  .gc-shop__media{aspect-ratio:4/3;border-radius:13px 13px 0 0;}
  .gc-shop__card .gc-shop__media a.gc-shop__add{left:9px;bottom:9px;opacity:1;transform:none;
    pointer-events:auto;box-shadow:0 6px 14px -8px rgba(20,33,43,.5);}
  .gc-shop__sale{top:8px;left:8px;font-size:.6rem;letter-spacing:.04em;padding:.24rem .45rem;
    box-shadow:none;}
  .gc-shop__body{padding:.7rem .75rem .8rem;}
  .gc-shop__cat{font-size:.6rem;letter-spacing:.06em;margin-bottom:.3rem;}
  .gc-shop__name{font-size:.9rem;line-height:1.25;}
  .gc-shop__price{margin-top:.4rem;font-size:.98rem;gap:.35rem;}
  .gc-shop__price del{font-size:.8rem;}
  .gc-shop__cta{padding-top:.6rem;font-size:.8rem;gap:.35rem;}
  .gc-shop__cta svg{width:13px;height:13px;}
  .gc-shop__empty{padding:2rem 0;font-size:.95rem;}
  .gc-shop-fade{padding-bottom:48px;}
  .gc-shop .woocommerce-pagination{margin-top:28px;}
  .gc-shop .woocommerce-pagination a,.gc-shop .woocommerce-pagination span{min-width:40px;height:40px;
    padding:0 .45rem;border-radius:10px;}
}
@media(max-width:480px){
  .gc-shop{padding:38px 0 42px;}
  .gc-shop__inner{padding-inline:min(var(--gc-woo-x-pad, 40px), 16px);}
  .gc-shop__title{font-size:clamp(1.4rem,6.2vw,1.45rem);}
  .gc-shop__grid{gap:10px;}
  .gc-shop__body{padding:.6rem .65rem .7rem;}
}
/* Auto-load more (infinite scroll) loader. */
.gc-shop__more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;margin-top:24px;
  color:var(--gc-muted,#5A6B75);font-size:14px;
}
.gc-shop__spinner{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--gc-woo-border,#E1E9EE);
  border-top-color:var(--gc-blue,#5BA7DB);
  opacity:0;animation:gc-shop-spin .7s linear infinite;
}
.gc-shop__more.is-loading .gc-shop__spinner{opacity:1;}
.gc-shop__more.is-done{display:none;}
@keyframes gc-shop-spin{to{transform:rotate(360deg);}}

@media(prefers-reduced-motion:reduce){
  .gc-shop *{animation:none!important;transition:none!important;}
  .gc-shop__spinner{animation:none;}
}