/* =========================================================
   SCOPIONE — Product Category & Taxonomy Archive Styles
   ---------------------------------------------------------
   Loads on: is_product_taxonomy() OR is_post_type_archive('product')
             — but excluding is_shop() (which uses shop-landing.php).
   Template: scopione/woocommerce/archive-product.php
   Note: The .shop-header / .scopione-empty-state markup only
   renders here. Selectors below are safe without a body-class
   prefix because (a) the enqueue is gated and (b) the targeted
   classes do not exist on shop-landing.php.

   Phase 1 (category-batch-1) — strict extraction of inline styles
   from archive-product.php (Scopione Patched v5).
   Phase 2 (category-batch-2) — subcategory grid layout (CSS Grid).
   Phase 3 (category-batch-3) — migrated all .product-category
   styling here from scopione-child.css for proper file ownership.
   Tokens (--sc-card, --sc-gap, --sc-radius, --sc-shadow,
   --sc-shadow-hover, --sc-border, --sc-text) come from :root
   in scopione-child.css (loads first).
   ========================================================= */


/* ============================================================
   Archive header (shop-header section + inner container)
   ============================================================ */
.shop-header.page-title.bg-dark {
    text-align: center;
    padding: 1.6rem 0 .8rem 0;            /* compact header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.shop-header .sc-archive-header__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}


/* ============================================================
   Yoast breadcrumbs wrapper
   ============================================================ */
.shop-header .scopione-breadcrumbs {
    margin: 0 0 .55rem 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}

.shop-header .scopione-breadcrumbs #breadcrumbs {
    margin: 0;
}


/* ============================================================
   Archive H1 title
   ============================================================ */
.shop-header #scopione-archive-heading {
    color: #fff;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .4rem 0;
}


/* ============================================================
   Term / shop description
   ============================================================ */
.shop-header .taxonomy-description {
    margin: .2rem auto 0 auto;
    max-width: 900px;
    color: rgba(255, 255, 255, .62);
    font-size: 1.10rem;
    line-height: 1.6;
    text-align: center;
}


/* ============================================================
   Outer product-grid wrapper container
   ============================================================ */
.sc-archive-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}


/* ============================================================
   Empty-state card (no products in this archive)
   ============================================================ */
.scopione-empty-state {
    margin: 1.5rem auto 2rem auto;
    max-width: 980px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
    padding: 1.25rem 1rem 1.25rem;
    text-align: center;
}

.scopione-empty-state__inner {
    max-width: 760px;
    margin: 0 auto;
}

.scopione-empty-state #empty-state-heading {
    margin: 0 0 .85rem 0;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 800;
    color: #111;
}

.scopione-empty-state__lead {
    margin: 0 auto 1.1rem auto;
    max-width: 700px;
    font-size: .96rem;
    line-height: 1.6;
    color: #4a4a4a;
}

.scopione-empty-state__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: .1rem 0 .9rem 0;
}

.scopione-empty-state__btn {
    display: inline-block;
    padding: .7rem 1rem;
    border-radius: 10px;
    border: 0;
    text-decoration: none;
    font-weight: 700;
}

.scopione-empty-state__btn--primary {
    background: #ffbe3d;
    color: #111;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}

.scopione-empty-state__btn--secondary {
    background: #111;
    color: #fff;
}

.scopione-empty-state__micro {
    margin: .35rem 0 0 0;
    font-size: .9rem;
    color: #777;
}


/* ============================================================
   Subcategory grid layout (category-batch-2)
   ------------------------------------------------------------
   WC native markup (kept):
     <ul class="products sc-subcategories-grid">
       <li class="product-category product first|last">
         <a href><img srcset><h2 class="woocommerce-loop-category__title">Name</h2></a>
       </li>
     </ul>
   Card visual styling is below in the migrated .product-category
   block (see category-batch-3). This block only sets the GRID
   layout for the UL container.
   ============================================================ */

ul.products.sc-subcategories-grid {
    list-style: none;
    margin: 1.5rem 0 2rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

ul.products.sc-subcategories-grid > li.product-category {
    /* override WC's default float/percentage column layout */
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
    list-style: none;
}

ul.products.sc-subcategories-grid > li.product-category::before,
ul.products.sc-subcategories-grid > li.product-category::after {
    content: none;
}

@media (max-width: 575.98px) {
    ul.products.sc-subcategories-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
        margin: 1rem 0 1.5rem 0;
    }
}


/* ============================================================
   Category card visuals — MIGRATED from scopione-child.css
   (category-batch-3). Selectors and values preserved verbatim
   so behavior is byte-identical to the prior baseline. Lives
   here because these styles only render on product taxonomy
   archives, where this stylesheet is enqueued.
   ============================================================ */

/* --- Base card title (was scopione-child.css line 5832) --- */
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  text-align: center;
  color: #343a40 !important;
  padding: 0;
  margin-bottom: 1rem;
}

/* --- Base card frame (was scopione-child.css lines 5857–5869) --- */
.woocommerce ul.products li.product-category {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.0125);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.022);
  padding: 0 !important;
  border-radius: .5rem;
  transition: all .1s ease-in-out;
}

.woocommerce ul.products li.product-category:hover {
  border-color: rgba(0,0,0,0.125);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

/* --- Image border-radius (was scopione-child.css line 5892, split off) --- */
.woocommerce ul.products li.product-category a img {
  border-radius: .5rem .5rem 0 0;
}

/* --- Enhanced "Category Tiles" block (was scopione-child.css lines 5999–6111) --- */
.woocommerce ul.products > li.product-category {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--sc-radius) !important;
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  box-shadow: var(--sc-shadow) !important;
  transition: box-shadow .28s ease, transform .28s ease !important;
  transform-style: preserve-3d !important;
  padding-bottom: 6px !important;
}

.woocommerce ul.products > li.product-category * { margin-bottom: 0 !important; }

.woocommerce ul.products > li.product-category::before {
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--sc-yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}

.woocommerce ul.products > li.product-category:hover,
.woocommerce ul.products > li.product-category:focus-within {
  transform: translateY(-10px) rotateX(1.2deg);
  box-shadow: var(--sc-shadow-hover) !important;
}

.woocommerce ul.products > li.product-category:hover::before,
.woocommerce ul.products > li.product-category:focus-within::before {
  transform: scaleX(1);
}

.woocommerce ul.products > li.product-category > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
}

.woocommerce ul.products > li.product-category > a > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: contain !important;
  background: #f5f5f5 !important;
  transition: transform .32s ease !important;
}

/* Promote to its own GPU layer only when the user hasn't requested reduced
   motion — avoids unnecessary compositing for motion-sensitive users
   (category-batch-A2, item A2). */
@media (prefers-reduced-motion: no-preference) {
  .woocommerce ul.products > li.product-category > a > img {
    will-change: transform;
  }
}

.woocommerce ul.products > li.product-category:hover > a > img,
.woocommerce ul.products > li.product-category:focus-within > a > img {
  transform: translateZ(0) scale(1.05) translateY(-3px);
}

.woocommerce ul.products > li.product-category .woocommerce-loop-category__title{
  margin: 0 !important;
  padding: 12px 18px 9px !important;
  min-height: auto !important;
  color: var(--sc-text) !important;

  /* Use Scopione typography system (Space Grotesk) */
  font-family: var(--font-display) !important;
  font-weight: var(--weight-display-strong) !important; /* 700 */
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  letter-spacing: var(--track-title) !important;        /* -0.02em */

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-top: 0 !important;
}

.woocommerce ul.products > li.product-category .count { display: none !important; }
.woocommerce ul.products > li.product-category .woocommerce-loop-product__link + * { display: none !important; }

.woocommerce ul.products > li.product-category .woocommerce-loop-category__title::after {
  content: "Shop Now";
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--sc-yellow);
  color: var(--sc-dark);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .15px;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 6px 16px rgba(255,190,61,.25);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

.woocommerce ul.products > li.product-category:hover .woocommerce-loop-category__title::after,
.woocommerce ul.products > li.product-category:focus-within .woocommerce-loop-category__title::after {
  opacity: 1;
  transform: translateY(0);
}

.woocommerce ul.products > li.product-category > a:focus-visible {
  outline: 2px solid var(--sc-yellow) !important;
  outline-offset: 3px !important;
  border-radius: var(--sc-radius) !important;
}

/* --- Desktop grid sizing for category tiles (was scopione-child.css lines 6403–6406) --- */
@media (min-width: 1280px) {
  .woocommerce ul.products > li.product-category {
    flex: 0 1 420px !important;
    max-width: 440px !important;
  }
}

/* --- Reduced motion for category tiles (was part of scopione-child.css lines 6459–6480) --- */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products > li.product-category,
  .woocommerce ul.products > li.product-category > a > img,
  .woocommerce ul.products > li.product-category::before,
  .woocommerce ul.products > li.product-category .woocommerce-loop-category__title::after {
    transition: none !important;
    transform: none !important;
  }
}

/* --- Category-grid ↔ Product-grid spacing on archives
       (was scopione-child.css lines 6482–6523) --- */
:root{
  --sc-catprod-gap: 12px; /* default (desktop/tablet) */
}

@media (max-width: 768px){
  :root{ --sc-catprod-gap: 12px !important;}
}

@media (min-width: 1280px){
  :root{ --sc-catprod-gap: 18px; }
}

/* When Woo outputs Categories UL and Products UL back-to-back */
body.woocommerce.archive ul.products + ul.products,
body.woocommerce.tax ul.products + ul.products,
body.post-type-archive-product ul.products + ul.products{
  margin-top: var(--sc-catprod-gap) !important;
}

/* Some themes inject a clearfix div between the two ULs */
body.woocommerce.archive ul.products + .clear,
body.woocommerce.tax ul.products + .clear,
body.post-type-archive-product ul.products + .clear{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce.archive ul.products + .clear + ul.products,
body.woocommerce.tax ul.products + .clear + ul.products,
body.post-type-archive-product ul.products + .clear + ul.products{
  margin-top: var(--sc-catprod-gap) !important;
}


/* ============================================================
   Archive section :root tokens
   (was scopione-child.css lines 5808–5817 — category-batch-4)
   These are consumed by the migrated product card / desktop-grid
   blocks below. --sc-text duplicated here on purpose; another
   :root in scopione-child.css line ~6960 also declares it for
   non-archive consumers (checkout/etc) — both files load on
   archive surfaces, last :root wins for cascade order, identical
   value avoids any visible difference.
   ============================================================ */
:root {
  --sc-card: 360px;
  --sc-gap: 22px;
  --sc-radius: 8px;
  --sc-shadow: 0 6px 18px rgba(0,0,0,.06);
  --sc-shadow-hover: 0 24px 52px rgba(0,0,0,.18);
  --sc-border: rgba(0,0,0,.08);
  --sc-text: #111;
  /* --sc-yellow and --sc-dark inherited from canonical :root */
}


/* ============================================================
   Result count
   (was scopione-child.css lines 5820–5829 — category-batch-4)
   ============================================================ */
.woocommerce .woocommerce-result-count {
  color: rgba(0,0,0,0.5);
  font-size: .8125rem;
  text-align: center;
  width: 100%;
}

.shop-header + .container .woocommerce-result-count {
  margin: 14px 0 12px;
}


/* ============================================================
   Generic .product card base + title + star/price + button
   (was scopione-child.css lines 5832–5876 — category-batch-4)
   Applies on every surface where .product cards render
   (categories, single-product related, cart-empty, index.php).
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  padding: 0.2rem 0rem;
  font-size: 1rem;
  color: #343a40 !important;
  height: 48px;
  overflow: hidden;
  margin-bottom: 10px;
}

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .price {
  margin-left: 1rem;
}

.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce ul.products li.product .button { margin: 1rem; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: .5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.022);
  transition: all .1s ease-in-out;
  margin: 0 2% 1.2em 0;
}

.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
  margin-right: 0;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: rgba(0,0,0,0.125);
  box-shadow: 0 0.125rem 0.45rem rgba(0,0,0,0.075);
}

.woocommerce ul.products li.product a img {
  border-radius: .5rem .5rem 0 0;
}


/* ============================================================
   Archive Buttons (yellow primary + added-to-cart secondary)
   (was scopione-child.css lines 5885–5964 — category-batch-4)
   ============================================================ */
body:not(.single-product) .woocommerce .wc-block-grid__product .wp-block-button__link,
body.archive ul.products li.product a.button,
body.archive ul.products li.product button.button,
body.shop ul.products li.product a.button,
body.shop ul.products li.product button.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.95rem 0 !important;
  box-sizing: border-box !important;
  background: var(--sc-yellow) !important;
  color: #212529 !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

body:not(.single-product) .woocommerce .wc-block-grid__product .wp-block-button__link:hover,
body.archive ul.products li.product a.button:hover,
body.archive ul.products li.product button.button:hover,
body.shop ul.products li.product a.button:hover,
body.shop ul.products li.product button.button:hover {
  background: #e6a825 !important;
  filter: saturate(1.02);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

body:not(.single-product) .woocommerce .wc-block-grid__product .wp-block-button__link:active,
body.archive ul.products li.product a.button:active,
body.archive ul.products li.product button.button:active,
body.shop ul.products li.product a.button:active,
body.shop ul.products li.product button.button:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  filter: saturate(.98);
}

body:not(.single-product) .woocommerce .wc-block-grid__product .wp-block-button__link:focus-visible,
body.archive ul.products li.product a.button:focus-visible,
body.archive ul.products li.product button.button:focus-visible,
body.shop ul.products li.product a.button:focus-visible,
body.shop ul.products li.product button.button:focus-visible {
  outline: 2px solid var(--sc-yellow) !important;
  outline-offset: 3px !important;
}

body.archive ul.products li.product a.added_to_cart,
body.shop ul.products li.product a.added_to_cart,
body:not(.single-product) .woocommerce .wc-block-grid__product a.added_to_cart {
  display: block;
  margin-top: .55rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: background-color .12s ease, border-color .12s ease;
}

body.archive ul.products li.product a.added_to_cart:hover,
body.shop ul.products li.product a.added_to_cart:hover,
body:not(.single-product) .woocommerce .wc-block-grid__product a.added_to_cart:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,190,61,.35);
}


/* ============================================================
   Generic image grid + min-heights for product card metrics
   (was scopione-child.css lines 5966–5977 — category-batch-4)
   ============================================================ */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  aspect-ratio: auto !important;
  background: transparent !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 3.2em; }
.woocommerce ul.products li.product .price { min-height: 26px; display: block; }
.woocommerce ul.products li.product .button { min-height: 40px; white-space: nowrap; }


/* ============================================================
   Product Cards (.product:not(.product-category)) — full block
   (was scopione-child.css lines 5982–6112 — category-batch-4)
   ============================================================ */
.woocommerce ul.products li.product:not(.product-category) {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.woocommerce ul.products li.product:not(.product-category)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--sc-yellow);
  border-radius: 0 0 8px 8px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  z-index: 5;
  pointer-events: none;
}

.woocommerce ul.products li.product:not(.product-category):hover,
.woocommerce ul.products li.product:not(.product-category):focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

.woocommerce ul.products li.product:not(.product-category):hover::before,
.woocommerce ul.products li.product:not(.product-category):focus-within::before {
  transform: scaleX(1);
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  transition: transform .28s ease;
}

.woocommerce ul.products li.product:not(.product-category):hover a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product:not(.product-category):focus-within a.woocommerce-LoopProduct-link img {
  transform: scale(1.03);
}

.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
  margin: 12px 14px 8px;
  color: var(--sc-text);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.woocommerce ul.products li.product:not(.product-category) .price {
  margin: 0 14px 12px;
  color: var(--sc-dark);
  font-weight: 900;
  font-size: 1.25em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}

.woocommerce ul.products li.product:not(.product-category) .price del {
  color: rgba(0,0,0,.55);
  opacity: .85;
  font-size: .85em;
}

.woocommerce ul.products li.product:not(.product-category) .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product:not(.product-category) .button,
.woocommerce ul.products li.product:not(.product-category) .added_to_cart {
  margin: 0 14px 14px;
  margin-top: auto;
  display: block;
  text-align: center;
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: .15px;
}

.woocommerce ul.products li.product:not(.product-category) .button {
  background: var(--sc-yellow);
  color: var(--sc-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 8px 18px rgba(255,190,61,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.woocommerce ul.products li.product:not(.product-category) .button:hover,
.woocommerce ul.products li.product:not(.product-category) .button:focus {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 2px 0 rgba(0,0,0,.20), 0 12px 26px rgba(255,190,61,.35);
}

.woocommerce ul.products li.product:not(.product-category) .added_to_cart {
  background: var(--sc-dark);
  color: #fff;
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 3px;
  border-radius: 8px;
}


/* ============================================================
   Pagination (full block)
   (was scopione-child.css lines 6114–6207 — category-batch-4)
   ============================================================ */
body.woocommerce nav.woocommerce-pagination {
  margin: 10px auto 11px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.woocommerce nav.woocommerce-pagination::before,
body.woocommerce nav.woocommerce-pagination::after,
body.woocommerce nav.woocommerce-pagination ul.page-numbers::before,
body.woocommerce nav.woocommerce-pagination ul.page-numbers::after {
  content: none !important;
  display: none !important;
}

body.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.woocommerce nav.woocommerce-pagination ul.page-numbers li,
body.woocommerce nav.woocommerce-pagination ul.page-numbers li::before,
body.woocommerce nav.woocommerce-pagination ul.page-numbers li::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  content: none !important;
}

body.woocommerce nav.woocommerce-pagination .page-numbers,
body.woocommerce nav.woocommerce-pagination .page-numbers a,
body.woocommerce nav.woocommerce-pagination .page-numbers span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  color: var(--sc-dark) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.woocommerce nav.woocommerce-pagination .page-numbers.current {
  background: var(--sc-yellow) !important;
  border-color: var(--sc-yellow) !important;
  color: var(--sc-dark) !important;
  box-shadow: 0 6px 16px rgba(255,190,61,.30) !important;
}

body.woocommerce nav.woocommerce-pagination .page-numbers a:hover {
  background: var(--sc-dark) !important;
  color: #fff !important;
  border-color: var(--sc-dark) !important;
  transform: translateY(-1px);
}

body.woocommerce nav.woocommerce-pagination .page-numbers.prev,
body.woocommerce nav.woocommerce-pagination .page-numbers.next {
  min-width: 54px !important;
  padding: 0 14px !important;
}

body.woocommerce nav.woocommerce-pagination .page-numbers a:focus-visible {
  outline: 2px solid var(--sc-yellow) !important;
  outline-offset: 2px !important;
  border-radius: 12px !important;
}

body.woocommerce nav.woocommerce-pagination + *,
body.woocommerce nav.woocommerce-pagination + .clear {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.woocommerce .products + nav.woocommerce-pagination {
  margin-top: 10px !important;
}


/* ============================================================
   Keep Exploring / sc-archive-keep-exploring
   (was scopione-child.css lines 6209–6227 — category-batch-4)
   ============================================================ */
.sc-archive-keep-exploring {
  margin-top: 30px;
  padding: 35px 0;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,.10);
}

.sc-ake__container { max-width: 1200px; margin: 0 auto; padding: 0 16px; color: #fff; }
.sc-ake__header { text-align: center; margin-bottom: 15px; }
.sc-ake__title { font-size: 28px; font-weight: 800; margin: 0; }
.sc-ake__subtitle { color: rgba(255,255,255,.82); margin: 6px 0 0; }
.sc-ake__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 15px 0; }
.sc-chip { padding: .5rem 1rem; background: rgba(255,255,255,.06); border-radius: 40px; color: #fff; text-decoration: none; }
.sc-chip:hover { border: 1px solid var(--sc-yellow); }
.sc-ake__grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.sc-ake__card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 16px; border-radius: 12px; }
.sc-btn--primary { background: var(--sc-yellow); color: var(--sc-dark); padding: .7rem 1.2rem; border-radius: 8px; text-decoration: none; font-weight: 700; }
.sc-btn--ghost { border: 1px solid rgba(255,255,255,.25); color: #fff; padding: .7rem 1.2rem; border-radius: 8px; text-decoration: none; margin-left: .5rem; }


/* ============================================================
   Desktop Grid (1280px+) for archive product UL + LIs
   (was scopione-child.css lines 6229–6271 — category-batch-4)
   The .product-category 420px override already lives in the
   "MIGRATED" block above (category-batch-3).
   ============================================================ */
@media (min-width: 1280px) {
  body.woocommerce.archive ul.products,
  body.woocommerce.tax ul.products,
  body.post-type-archive-product ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: var(--sc-gap) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: calc(var(--sc-card)*3 + var(--sc-gap)*2) !important;
  }

  body.woocommerce.archive ul.products > li.product,
  body.woocommerce.tax ul.products > li.product,
  body.post-type-archive-product ul.products > li.product {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 1 var(--sc-card) !important;
    max-width: var(--sc-card) !important;
  }

  body.woocommerce.archive ul.products[class*="columns-"] > li,
  body.woocommerce.tax ul.products[class*="columns-"] > li,
  body.post-type-archive-product ul.products[class*="columns-"] > li {
    clear: none !important;
  }

  body.woocommerce.archive ul.products::before,
  body.woocommerce.archive ul.products::after {
    content: none !important;
    display: none !important;
  }
}


/* ============================================================
   Mobile (max-width: 575.98px) archive bits
   (was scopione-child.css lines 6273–6278 — category-batch-4)
   .category-img is unrelated to category pages (legacy block
   from a different feature) and stays in scopione-child.css.
   ============================================================ */
@media (max-width: 575.98px) {
  .woocommerce ul.products li.product { float: none !important; width: auto !important; }
}


/* ============================================================
   Tablet (max-width: 768px) archive bits
   (was scopione-child.css lines 6280–6306 — category-batch-4)
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product .woocommerce-loop-category__title { margin-bottom: .5em; }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product { padding: 0.5rem; margin: 0 0 1.2em 0 !important; }

  body.woocommerce nav.woocommerce-pagination { margin: 10px auto 12px !important; }
  body.woocommerce nav.woocommerce-pagination ul.page-numbers { gap: 6px !important; }

  body.woocommerce nav.woocommerce-pagination .page-numbers,
  body.woocommerce nav.woocommerce-pagination .page-numbers a,
  body.woocommerce nav.woocommerce-pagination .page-numbers span {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  body.woocommerce nav.woocommerce-pagination .page-numbers.prev,
  body.woocommerce nav.woocommerce-pagination .page-numbers.next {
    min-width: 42px !important;
    padding: 0 10px !important;
  }
}


/* ============================================================
   Small Mobile (max-width: 420px) pagination
   (was scopione-child.css lines 6308–6321 — category-batch-4)
   ============================================================ */
@media (max-width: 420px) {
  body.woocommerce nav.woocommerce-pagination { margin: 8px auto 10px !important; }

  body.woocommerce nav.woocommerce-pagination .page-numbers,
  body.woocommerce nav.woocommerce-pagination .page-numbers a,
  body.woocommerce nav.woocommerce-pagination .page-numbers span {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
  }
}


/* ============================================================
   Reduced Motion for archive product cards + buttons
   (was scopione-child.css lines 6323–6341 — category-batch-4;
   the .product-category portion already migrated in batch-3)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body:not(.single-product) .woocommerce .wc-block-grid__product .wp-block-button__link,
  body.archive ul.products li.product a.button,
  body.archive ul.products li.product button.button,
  body.shop ul.products li.product a.button,
  body.shop ul.products li.product button.button,
  body.archive ul.products li.product a.added_to_cart,
  body.shop ul.products li.product a.added_to_cart,
  body:not(.single-product) .woocommerce .wc-block-grid__product a.added_to_cart,
  .woocommerce ul.products li.product:not(.product-category),
  .woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link img,
  .woocommerce ul.products li.product:not(.product-category)::before,
  .woocommerce ul.products li.product:not(.product-category) .button {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   Force Product Cards to MOBILE look at ALL sizes
   (was scopione-child.css lines 6345–6385 — category-batch-4)
   ============================================================ */
:root{
  --sc-prod-pad: 0.4rem; /* this is the "mobile" inset look */
}

/* 1) Always give product cards the mobile padding/inset */
body.woocommerce.archive ul.products > li.product:not(.product-category),
body.woocommerce.tax ul.products > li.product:not(.product-category),
body.post-type-archive-product ul.products > li.product:not(.product-category){
  padding: var(--sc-prod-pad) !important;
  box-sizing: border-box !important;
}

/* 2) Undo the desktop breakpoint override that makes cards behave differently */
@media (min-width: 1280px){
  body.woocommerce.archive ul.products > li.product:not(.product-category),
  body.woocommerce.tax ul.products > li.product:not(.product-category),
  body.post-type-archive-product ul.products > li.product:not(.product-category){
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 3) Keep the image rounding consistent with the inset/mobile look */
body.woocommerce.archive ul.products > li.product:not(.product-category) a.woocommerce-LoopProduct-link img,
body.woocommerce.tax ul.products > li.product:not(.product-category) a.woocommerce-LoopProduct-link img,
body.post-type-archive-product ul.products > li.product:not(.product-category) a.woocommerce-LoopProduct-link img{
  border-radius: 8px 8px 0 0 !important;
}

/* 4) Make the CTA sit at the bottom consistently (without changing full-width button) */
body.archive ul.products > li.product:not(.product-category) a.button,
body.archive ul.products > li.product:not(.product-category) button.button,
body.shop ul.products > li.product:not(.product-category) a.button,
body.shop ul.products > li.product:not(.product-category) button.button{
  margin-top: auto !important;
}


/* ============================================================
   Center + clamp product card titles (no cutoff)
   (was scopione-child.css lines 6387–6408 — category-batch-4)
   ============================================================ */
.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title{
  text-align: center !important;

  /* undo any fixed title height */
  height: auto !important;
  max-height: none !important;

  /* predictable multi-line clamp */
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important; /* set to 2 if desired */
  overflow: hidden !important;
  white-space: normal !important;

  /* keep grid cards aligned */
  min-height: calc(1.25em * 3) !important;
}


/* ============================================================
   Pagination spacing (top + bottom) tokens
   (was scopione-child.css lines 6410–6436 — category-batch-4)
   ============================================================ */
:root{
  --sc-pagination-top: 16px;
  --sc-pagination-bottom: 20px;
}

/* Main pagination block spacing */
body.woocommerce nav.woocommerce-pagination{
  margin: var(--sc-pagination-top) auto var(--sc-pagination-bottom) !important;
}

/* Some themes add a separate top margin when pagination follows the product grid */
.woocommerce .products + nav.woocommerce-pagination{
  margin-top: var(--sc-pagination-top) !important;
}

/* Very small screens */
@media (max-width: 420px){
  :root{
    --sc-pagination-top: 10px;
    --sc-pagination-bottom: 18px;
  }
}


/* =========================================================
   ARCHIVE CTA / EDITORIAL SLIDER (.sc-archive-edu)
   (was scopione-child.css lines 7990–8517 — category-batch-4)
   Renders via scopione_archive_edu_cta() at functions.php:3050
   on `woocommerce_after_shop_loop` priority 20, gated to
   is_shop() || is_product_taxonomy().
   - Full-bleed background band
   - Inner content clamped to 1160px
   - Scroll-snap slider
   - Premium CTA + help bar
   - Mobile: 1 slide per view, centered, no peek, arrows hidden
   ========================================================= */

/* ==============================
   0) Band (full-bleed breakout)
   ============================== */
body.woocommerce .sc-archive-edu{
  --sc-yellow:#ffbe3d;
  --sc-ink:#111;
  --sc-max:1160px;
  --sc-pad:18px;
  --sc-gap:22px;
  --sc-r:8px;

  /* KEEP DARK TOP SPACE SAME EVERYWHERE */
  --sc-band-pt: 16px;

  position: relative;

  /* Full-bleed pattern that doesn't trigger horizontal scroll on viewports
     with a visible scrollbar (where 100vw > document.documentElement.clientWidth).
     Mirrors the proven approach used by body.single-product .sc-product-edu. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: var(--sc-band-pt) 0 26px;
  overflow-x: clip; /* fallback to overflow-x: hidden in older browsers */
  overflow-y: visible;

  background:
    radial-gradient(900px 280px at 18% 12%, rgba(255,190,61,.16), rgba(255,190,61,0) 60%),
    radial-gradient(800px 280px at 85% 45%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #0b0b0b 0%, #111 100%);
}

/* local box sizing safety */
body.woocommerce .sc-archive-edu,
body.woocommerce .sc-archive-edu *,
body.woocommerce .sc-archive-edu *::before,
body.woocommerce .sc-archive-edu *::after{
  box-sizing: border-box;
}

/* ==============================
   1) 1200-ish content clamp
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__shell{
  max-width: var(--sc-max);
  margin: 0 auto;
  padding: 0 var(--sc-pad);
  position: relative;
}

/* ==============================
   2) Header
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__head{
  text-align: center;
  padding: 16px 8px 0;
  margin: 0 0 18px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: rgba(255,255,255,.80);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;

  padding: 0 10px;
  margin: 0 0 10px;
  max-width: 100%;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__eyebrow::before{
  content:"";
  width: 40px;
  height: 10px;
  border-radius: 8px;
  background: var(--sc-yellow);
  box-shadow: 0 0 0 6px rgba(255,190,61,.14);
}

body.woocommerce .sc-archive-edu .sc-archive-edu__title{
  margin: 0 0 10px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 30px);
}

body.woocommerce .sc-archive-edu .sc-archive-edu__title span{
  color: var(--sc-yellow);
}

body.woocommerce .sc-archive-edu .sc-archive-edu__sub{
  margin: 0 auto;
  max-width: 880px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

/* ==============================
   3) Slider wrapper + arrows
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__trackwrap{
  position: relative;
  margin: 18px 0 16px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__nav{
  position: absolute;
  left: 6px;
  right: 6px;
  top: 57%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__navbtn{
  pointer-events: auto;
  width: 60px;
  height: 65px;
  border-radius: var(--sc-r);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(17,17,17,.78);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 14px 30px rgba(0,0,0,.55);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__navbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,190,61,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.65), 0 0 18px rgba(255,190,61,.18);
}

/* ==============================
   4) Track (scroll-snap)
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__track{
  display: flex;
  gap: var(--sc-gap);

  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;

  padding: 4px 0 12px;
  margin: 0;

  touch-action: pan-x;
  overscroll-behavior-x: contain;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__track::-webkit-scrollbar{ height: 8px; }
body.woocommerce .sc-archive-edu .sc-archive-edu__track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
body.woocommerce .sc-archive-edu .sc-archive-edu__track::-webkit-scrollbar-track{
  background: transparent;
}

/* ==============================
   5) Cards (desktop = 3-up)
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__card{
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--sc-gap) * 2)) / 3);
  max-width: calc((100% - (var(--sc-gap) * 2)) / 3);
  min-width: 320px;
}

/* Card shell */
body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink{
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
  text-decoration: none;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--sc-r);
  overflow: hidden;

  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Promote to its own GPU layer only when the user hasn't requested reduced
   motion (category-batch-A2, item A2). */
@media (prefers-reduced-motion: no-preference) {
  body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink {
    will-change: transform;
  }
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink:hover{
  transform: translateY(-6px);
  border-color: rgba(255,190,61,.28);
  box-shadow:
    0 24px 70px rgba(0,0,0,.62),
    0 0 26px rgba(255,190,61,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ==============================
   6) Image (1200x630)
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__imgwrap{
  position: relative;
  overflow: hidden;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__imgwrap img{
  width: 100%;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
  height: auto;

  transform: scale(1);
  transition: transform .6s ease;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink:hover .sc-archive-edu__imgwrap img{
  transform: scale(1.06);
}

/* hard-disable any legacy overlay UI */
body.woocommerce .sc-archive-edu .sc-archive-edu__imgfade,
body.woocommerce .sc-archive-edu .sc-archive-edu__imgwrap .overlay,
body.woocommerce .sc-archive-edu .sc-archive-edu__tag,
body.woocommerce .sc-archive-edu .sc-archive-edu__kicker{
  display: none !important;
}

/* ==============================
   7) Card body + CTA
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cardtitle{
  margin: 0;
  color: var(--sc-yellow);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.35;
  text-align: center;
  transition: color .25s ease, text-shadow .25s ease;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink:hover .sc-archive-edu__cardtitle{
  color: #fff;
  text-shadow: 0 0 10px rgba(255,190,61,.55);
}

body.woocommerce .sc-archive-edu .sc-archive-edu__desc{
  margin: 0 0 6px;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
  text-align: center;
  font-size: .95rem;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cta{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 18px;

  border-radius: var(--sc-r);
  border: 1px solid rgba(255,190,61,.75);
  background: rgba(15,15,15,.55);
  color: #fff;

  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  text-decoration: none;

  box-shadow: 0 14px 34px rgba(0,0,0,.65);
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__cta:hover{
  background: var(--sc-yellow);
  color: #000;
  box-shadow: 0 0 22px rgba(255,190,61,.45), 0 18px 48px rgba(255,190,61,.18);
  transform: translateY(-1px);
}

/* ==============================
   8) Help bar + buttons
   ============================== */
body.woocommerce .sc-archive-edu .sc-archive-edu__help{
  border-radius: var(--sc-r);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 18px 48px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);

  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__helpcopy strong{
  display: block;
  color: #fff;
  font-weight: 950;
  margin: 0 0 4px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__helpcopy span{
  display: block;
  color: rgba(255,255,255,.78);
}

body.woocommerce .sc-archive-edu .sc-archive-edu__helpactions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__btn{
  height: 46px;
  padding: 0 16px;
  border-radius: var(--sc-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__btn--primary{
  background: linear-gradient(180deg, #ffd37a, var(--sc-yellow));
  color: var(--sc-ink);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
  min-width: 190px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__btn--ghost{
  background: rgba(15,15,15,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 22px rgba(0,0,0,.35);
  min-width: 170px;
}

body.woocommerce .sc-archive-edu .sc-archive-edu__btn:hover{
  transform: translateY(-1px);
}

/* ==============================
   9) Responsive (do NOT change top dark space)
   ============================== */
@media (max-width: 1024px){
  body.woocommerce .sc-archive-edu{
    padding: var(--sc-band-pt) 0 22px;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__card{
    flex: 0 0 calc((100% - var(--sc-gap)) / 2);
    max-width: calc((100% - var(--sc-gap)) / 2);
    min-width: 300px;
  }
}

@media (max-width: 768px){
  body.woocommerce .sc-archive-edu{
    --sc-pad: 16px;
    padding: var(--sc-band-pt) 0 20px;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__head{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* hide arrows on mobile */
  body.woocommerce .sc-archive-edu .sc-archive-edu__nav{
    display: none !important;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__track{
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__card{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    scroll-snap-align: center !important;
    scroll-snap-stop: always;

    padding-left: 12px;
    padding-right: 12px;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__cardlink{
    width: 100%;
    margin: 0 !important;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__help{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__helpactions{
    width: 100%;
    justify-content: center;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__btn{
    width: 100%;
    white-space: normal;
  }

  body.woocommerce .sc-archive-edu .sc-archive-edu__btn--primary,
  body.woocommerce .sc-archive-edu .sc-archive-edu__btn--ghost{
    min-width: 0;
  }
}

@media (max-width: 420px){
  body.woocommerce .sc-archive-edu .sc-archive-edu__card{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ==============================
   10) Focus + reduced motion
   ============================== */
body.woocommerce .sc-archive-edu a:focus-visible,
body.woocommerce .sc-archive-edu button:focus-visible{
  outline: 2px solid rgba(255,190,61,.75);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  body.woocommerce .sc-archive-edu *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   11) Add WHITE space on pages WITHOUT pagination (large screens)
   IMPORTANT: :has() must be on BODY itself (no line breaks before :has)
   ========================================================= */
@supports selector(:has(*)){
  @media (min-width: 1025px){

    /* No pagination => add the missing gap between product grid and the band */
    body.woocommerce-page.woocommerce:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout)
    :has(.sc-archive-edu):not(:has(nav.woocommerce-pagination, .woocommerce-pagination, nav.pagination, .pagination))
    .sc-archive-edu{
      margin-top: 40px !important;
    }

    /* Pagination present => keep current layout */
    body.woocommerce-page.woocommerce:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout)
    :has(.sc-archive-edu):has(nav.woocommerce-pagination, .woocommerce-pagination, nav.pagination, .pagination)
    .sc-archive-edu{
      margin-top: 0 !important;
    }
  }
}


/* ============================================================
   Category-scoped HERO + BREADCRUMB overrides (category-batch-5)
   ------------------------------------------------------------
   The base .shop-header and #breadcrumbs styling lives in
   scopione-child.css (lines ~167 + ~293) because the same
   markup is shared by 7+ page templates: archive-product,
   page-about, page-contact, page-dealer, page-testimonials,
   page.php, page-home, single-product.

   Editing those base rules would change the hero background +
   breadcrumb link colors on ALL of those pages.

   The body-scoped duplicates below carry identical values today
   so the live render is unchanged. They have higher specificity
   (0,2,1+) than the universal versions (0,1,0+), so they win
   on category / tag / product-archive pages.

   👉 To change the category hero or breadcrumbs WITHOUT touching
   other page templates, edit ONLY the rules in this section.
   ============================================================ */

/* --- Hero background image
       (override of scopione-child.css:293 .shop-header) --- */
body.tax-product_cat .shop-header,
body.tax-product_tag .shop-header,
body.post-type-archive-product .shop-header {
    background-image: url("/wp-content/themes/scopione/img/cat-bg-2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- Yoast breadcrumb link colors
       (override of scopione-child.css:167–169 #breadcrumbs a) --- */
body.tax-product_cat #breadcrumbs a,
body.tax-product_tag #breadcrumbs a,
body.post-type-archive-product #breadcrumbs a {
    color: #6c757d;
}

body.tax-product_cat #breadcrumbs a:hover,
body.tax-product_tag #breadcrumbs a:hover,
body.post-type-archive-product #breadcrumbs a:hover {
    color: #999;
}

body.tax-product_cat #breadcrumbs a:focus-visible,
body.tax-product_tag #breadcrumbs a:focus-visible,
body.post-type-archive-product #breadcrumbs a:focus-visible {
    /* Visible focus outline (WCAG 2.4.7). Keep the ambient yellow halo
       via box-shadow but never suppress the outline itself. */
    outline: 2px solid var(--sc-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 190, 61, .35);
    border-radius: 2px;
}