/* ==========================================================================
   wc-archive.css — LIVE shop & category pages
   --------------------------------------------------------------------------
   Why this file exists
   --------------------
   The /shop/ page and every /category/... page are WooCommerce ARCHIVES. They
   are rendered by WooCommerce/Flatsome, not by an Elementor canvas, so free
   Elementor cannot open them and they never pick up the `.vd-` design rules
   that style the Elementor-built pages.

   This file closes that gap WITHOUT rebuilding the archive and WITHOUT any
   paid plugin. It targets Flatsome's own markup:

       .category-page-row          the sidebar + grid wrapper
       #shop-sidebar               the category sidebar
       .woocommerce-ordering       the "Sort by" form
       .woocommerce-result-count   "Showing 1-20 of 430 results"
       ul.products                the product grid
       .woocommerce-pagination     the page links

   Scope: every rule is under body.tax-product_cat or body.post-type-archive
   with woocommerce in the body class, so nothing here can reach the header,
   the footer, a product page or a blog post.

   Design tokens come from homepage.css (:root) — same violet, same fonts, same
   card treatment — so these pages match the rest of the site rather than
   looking like a separate theme bolted on.
   ========================================================================== */

/* Scope guard: Flatsome only. If the theme is swapped, every rule here falls
   away on its own and nothing breaks. */
body.tax-product_cat .category-page-row,
body.post-type-archive.woocommerce .category-page-row {
  --vd-arch-pad: clamp(16px, 3vw, 32px);
}

/* --------------------------------------------------------------- SIDEBAR -- */
body.tax-product_cat #shop-sidebar,
body.post-type-archive.woocommerce #shop-sidebar {
  font-family: var(--vd-font-b, "Inter", sans-serif);
}

/* The "Browse" heading Flatsome prints above the category list. */
body.tax-product_cat #shop-sidebar .widget-title,
body.post-type-archive.woocommerce #shop-sidebar .widget-title {
  margin: 0 0 4px;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748B;
}

/* Flatsome's little divider under the heading. */
body.tax-product_cat #shop-sidebar .is-divider,
body.post-type-archive.woocommerce #shop-sidebar .is-divider {
  background: var(--vd-violet, #6C4DF6) !important;
  opacity: .55;
  margin: 12px 0 10px;
}

/* The category list itself. */
body.tax-product_cat #shop-sidebar ul.product-categories,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.tax-product_cat #shop-sidebar ul.product-categories > li,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories > li {
  border-bottom: 1px solid var(--vd-line, #E7E9EF);
}
body.tax-product_cat #shop-sidebar ul.product-categories > li:last-child,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories > li:last-child {
  border-bottom: 0;
}

body.tax-product_cat #shop-sidebar ul.product-categories a,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
  font-size: 14.5px;
  font-weight: 500;
  color: #1E293B;
  text-decoration: none;
  transition: color .16s ease;
}
body.tax-product_cat #shop-sidebar ul.product-categories a:hover,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories a:hover {
  color: var(--vd-violet, #6C4DF6);
}

/* The category currently being viewed. */
body.tax-product_cat #shop-sidebar ul.product-categories .current-cat a,
body.tax-product_cat #shop-sidebar ul.product-categories .current-menu-item a,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories .current-cat a {
  color: var(--vd-violet, #6C4DF6);
  font-weight: 700;
}

/* Sub-categories: indented, lighter, smaller. They stay — only the pill row
   above the grid was limited to top-level. */
body.tax-product_cat #shop-sidebar ul.product-categories .children,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories .children {
  list-style: none;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #EDE9FE;
}
body.tax-product_cat #shop-sidebar ul.product-categories .children a,
body.post-type-archive.woocommerce #shop-sidebar ul.product-categories .children a {
  padding: 7px 2px;
  font-size: 13.5px;
  color: #64748B;
}

/* ------------------------------------------------- RESULT COUNT + SORTING -- */
body.tax-product_cat .woocommerce-result-count,
body.post-type-archive.woocommerce .woocommerce-result-count {
  margin: 0;
  font-family: var(--vd-font-b, "Inter", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #475569;
}

body.tax-product_cat .woocommerce-ordering,
body.post-type-archive.woocommerce .woocommerce-ordering {
  margin: 0;
}
body.tax-product_cat .woocommerce-ordering select,
body.post-type-archive.woocommerce .woocommerce-ordering select {
  min-width: 210px;
  padding: 11px 38px 11px 16px;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 12px;
  background-color: #fff;
  font-family: var(--vd-font-b, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
body.tax-product_cat .woocommerce-ordering select:focus,
body.post-type-archive.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--vd-violet, #6C4DF6);
  outline: none;
}

/* Put the count left and the sort right on one row, matching the toolbar on the
   Elementor-built shop page. Flatsome stacks them by default. */
@media (min-width: 768px) {
  body.tax-product_cat .woocommerce-ordering,
  body.post-type-archive.woocommerce .woocommerce-ordering {
    float: right;
    margin-left: 16px;
  }
  body.tax-product_cat .woocommerce-result-count,
  body.post-type-archive.woocommerce .woocommerce-result-count {
    padding-top: 12px;
  }
}

/* ---------------------------------------------------------- PRODUCT GRID -- */
/* Flatsome's own grid rules are aggressive; this brings the cards in line with
   the .vd-products treatment used everywhere else (white card, hairline border,
   rounded corners, lift on hover, violet sale price). */
body.tax-product_cat ul.products,
body.post-type-archive.woocommerce ul.products {
  clear: both;
}

body.tax-product_cat ul.products li.product,
body.post-type-archive.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: var(--vd-radius, 16px);
  overflow: hidden;
  box-shadow: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

body.tax-product_cat ul.products li.product:hover,
body.post-type-archive.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--vd-shadow-lg, 0 18px 40px -18px rgba(11, 13, 18, .35));
}

/* Flatsome pads its own card body; normalise so the text sits consistently. */
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--vd-ink, #0B0D12);
  padding: 0 10px;
  margin: 12px 0 6px;
}

body.tax-product_cat ul.products li.product .price,
body.post-type-archive.woocommerce ul.products li.product .price {
  color: var(--vd-ink, #0B0D12);
  margin-bottom: 12px;
  font-weight: 700;
}

/* One sale colour site-wide, matching the Elementor pages. */
body.tax-product_cat ul.products li.product .price ins,
body.post-type-archive.woocommerce ul.products li.product .price ins {
  color: var(--vd-sale, #FF3B5C) !important;
  text-decoration: none;
}
body.tax-product_cat ul.products li.product .price del,
body.post-type-archive.woocommerce ul.products li.product .price del {
  color: #94A3B8;
  font-weight: 500;
  margin-right: 6px;
  opacity: 1;
}

/* The Add to cart button — same violet pill as the shop page. */
body.tax-product_cat ul.products li.product .button,
body.post-type-archive.woocommerce ul.products li.product .button {
  background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(109, 40, 217, .28);
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.tax-product_cat ul.products li.product .button:hover,
body.tax-product_cat ul.products li.product .button:focus,
body.post-type-archive.woocommerce ul.products li.product .button:hover,
body.post-type-archive.woocommerce ul.products li.product .button:focus {
  background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(109, 40, 217, .38);
  transform: translateY(-2px);
}

/* Sale flag — Flatsome's ribbon clashes with the card border. */
body.tax-product_cat ul.products li.product .onsale,
body.post-type-archive.woocommerce ul.products li.product .onsale {
  min-height: 0;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--vd-sale, #FF3B5C);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ PAGINATION -- */
/* Same violet pills as the Elementor-built shop page. WooCommerce prints
   `page-numbers` on the <ul> as well as on each item, so the pill styling is
   scoped to the items or it lands on the list itself. */
body.tax-product_cat .woocommerce-pagination,
body.post-type-archive.woocommerce .woocommerce-pagination {
  width: 100%;
  margin: 44px 0 0;
  text-align: center;
  clear: both;
}

body.tax-product_cat .woocommerce-pagination ul.page-numbers,
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
body.tax-product_cat .woocommerce-pagination ul.page-numbers > li,
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li {
  display: flex;
  list-style: none;
  margin: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* Flatsome/Elector can inject a ::before into managed list items; it showed up
   as a stray dot beside every page number. */
body.tax-product_cat .woocommerce-pagination ul.page-numbers > li::before,
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li::before {
  content: none !important;
  display: none !important;
}

body.tax-product_cat .woocommerce-pagination ul.page-numbers > li > .page-numbers,
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li > .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px;
  background: #fff;
  color: var(--vd-ink, #0B0D12);
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background .2s ease, color .2s ease;
}

body.tax-product_cat .woocommerce-pagination ul.page-numbers > li > .page-numbers.current,
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li > .page-numbers.current {
  background: linear-gradient(180deg, #7C3AED, #6D28D9);
  color: #fff;
}

body.tax-product_cat .woocommerce-pagination ul.page-numbers > li > .page-numbers:hover:not(.current),
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li > .page-numbers:hover:not(.current) {
  background: #E9E2FF;
  color: #5B21B6;
}

/* Unselected pills get a faint violet tint so the row reads as a set, matching
   the shop page toolbar. */
body.tax-product_cat .woocommerce-pagination ul.page-numbers > li > .page-numbers:not(.current),
body.post-type-archive.woocommerce .woocommerce-pagination ul.page-numbers > li > .page-numbers:not(.current) {
  background: #F4F0FF;
}

/* --------------------------------------------------------------- MOBILE --- */
@media (max-width: 767px) {
  /* Sidebar above the grid on phones: a 25%-wide category tree beside
     2-up cards leaves the cards about 130px wide. */
  body.tax-product_cat .category-page-row > .col,
  body.post-type-archive.woocommerce .category-page-row > .col {
    width: 100% !important;
    float: none !important;
  }
  body.tax-product_cat #shop-sidebar {
    margin-bottom: 26px;
    padding: 18px 16px;
    border: 1px solid var(--vd-line, #E7E9EF);
    border-radius: 16px;
    background: #fff;
  }
  /* Flatten the tree into wrapping chips rather than a long indented list. */
  body.tax-product_cat #shop-sidebar ul.product-categories,
  body.post-type-archive.woocommerce #shop-sidebar ul.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.tax-product_cat #shop-sidebar ul.product-categories > li,
  body.post-type-archive.woocommerce #shop-sidebar ul.product-categories > li {
    border-bottom: 0 !important;
  }
  body.tax-product_cat #shop-sidebar ul.product-categories a,
  body.post-type-archive.woocommerce #shop-sidebar ul.product-categories a {
    padding: 8px 14px;
    border: 1px solid var(--vd-line, #E7E9EF);
    border-radius: 999px;
    background: #FAF9FF;
    font-size: 13.5px;
    font-weight: 600;
    justify-content: center;
  }
  body.tax-product_cat #shop-sidebar ul.product-categories .children,
  body.post-type-archive.woocommerce #shop-sidebar ul.product-categories .children {
    display: none;
  }
  /* Count and sort stack full width. */
  body.tax-product_cat .woocommerce-ordering,
  body.post-type-archive.woocommerce .woocommerce-ordering {
    float: none !important;
    margin: 12px 0 0;
  }
  body.tax-product_cat .woocommerce-ordering select,
  body.post-type-archive.woocommerce .woocommerce-ordering select {
    width: 100%;
    min-width: 0;
  }
}