/**
 * 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;}
@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);}
.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;}

.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__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);}

@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;}
  .gc-shop__tabs{width:100%;margin-bottom:24px;padding:.3rem;}
  .gc-shop__tab{font-size:.82rem;padding:.5rem .85rem;}
  .gc-shop__glider{top:.3rem;height:calc(100% - .6rem);}
  .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__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;}
}