/**
 * WooCommerce shop, archives, taxonomies, and single product
 * (PLP grid, product cards, archive header, sidebar filters).
 * Not loaded on cart or checkout.
 */
/* Loop imagery: keep color for stronger contrast, retain slow motion. */
@media (prefers-reduced-motion: no-preference) {
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
  .woocommerce ul.products li.product .woocommerce-card__media img {
    filter: none;
    transition: transform 1.65s var(--sg-lux-ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img,
    .woocommerce ul.products li.product:focus-within a.woocommerce-LoopProduct-link img,
    .woocommerce ul.products li.product:hover .woocommerce-card__media img,
    .woocommerce ul.products li.product:focus-within .woocommerce-card__media img {
      transform: scale(1.03);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
  .woocommerce ul.products li.product .woocommerce-card__media img {
    filter: none;
    transform: none;
    transition: none;
  }
}

/* --- Modern shop page styling --- */

/* Mobile "Show filters" bar.
   The parent bleeds it past the content column with `margin-left: -1.3em;
   width: calc(100% + 2.6em)`, sized for its own gutter — 1.3em of the bar's
   11px font is 14.3px, but our archive gutter is 1.25rem, so the bar stopped
   ~6px short of both screen edges and lined up with nothing. Bleed by our
   gutter instead, and keep it clear of the sorting row below. */
@media (max-width: 992px) {
  .mobile-filter {
    margin-left: -1.25rem;
    width: calc(100% + 2.5rem);
  }
}

/* Sorting + pagination bar */
.shoptimizer-sorting {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0;
  gap: 1rem;
  box-shadow: none;
  align-items: center;
  border-bottom: 1px solid var(--sg-border);
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease;
}

/* Shoptimizer repeats the sort select and the count under the grid (below
   Load more on the shop): a second "Default order" at the foot of every
   archive. The bar at the top keeps both; pagination lives outside this bar. */
.shoptimizer-sorting.sorting-end {
  display: none;
}

/* --- Result count --- */
.shoptimizer-sorting .woocommerce-result-count {
  font-size: 0.8rem;
  color: var(--sg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  padding-left: 1rem;
}
.shoptimizer-sorting .woocommerce-result-count::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--sg-accent-2);
  opacity: 0.6;
}

/* --- Ordering form --- */
.shoptimizer-sorting .woocommerce-ordering {
  margin-right: 0;
  position: relative;
}

/* --- Select dropdown --- */
.shoptimizer-sorting select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-family: var(--sg-body);
  font-size: 0.85rem;
  color: var(--sg-text);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}
.shoptimizer-sorting select.orderby:hover {
  border-color: var(--sg-accent-2);
  background-color: rgba(133, 72, 54, 0.03);
}
.shoptimizer-sorting select.orderby:focus {
  outline: none;
  border-color: var(--sg-accent-2);
  box-shadow: 0 0 0 2px rgba(133, 72, 54, 0.08);
}

/* --- Notices wrapper (prevent layout shift) --- */
.shoptimizer-sorting .woocommerce-notices-wrapper:empty {
  display: none;
}

.shoptimizer-sorting .woocommerce-pagination {
  margin-left: auto;
}

.woocommerce-pagination ul.page-numbers {
  border: 0;
  display: inline-flex;
  gap: 0.35rem;
  padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
  border: 0;
}

.woocommerce-pagination ul.page-numbers a,
.woocommerce-pagination ul.page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--sg-text);
  font-weight: 500;
  transition: border-color 0.2s ease;
}

.woocommerce-pagination ul.page-numbers a:hover,
.woocommerce-pagination ul.page-numbers span.current {
  border-color: var(--sg-accent-2);
}

/* ==========================================================================
      PRODUCT CARDS — Enhanced
      ========================================================================== */

/* --- Card container --- */
.woocommerce ul.products li.product {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem;
  margin: 0;
  border-left: 1px solid var(--sg-border);
  border-bottom: 1px solid var(--sg-border);
  position: relative;
  /* Stretch each card to the tallest in its row; parent ul.products is a
     flex-wrap row so stretch gives equal-height cards. */
  display: flex;
  flex-direction: column;
  align-self: stretch;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;

  &:nth-child(4n + 1) {
    border-left: 0;
  }
}

/* Parent ships `align-self: flex-start` at ≥993px for both the plain
   body:not(.static-cta-buttons) case and the .static-cta-buttons +
   .cgkit-swatch-hover case, which defeats equal-height cards. Beat both
   with a single rule that stretches every product card regardless of the
   body/swatch classes active on the page.

   Specificity note: parent's `body:not(.static-cta-buttons) ul.products
   li.product` is (0,2,3). Using the doubled-class hack `li.product.product`
   bumps this rule to (0,3,2), winning on the classes axis. */
@media (min-width: 993px) {
  .woocommerce ul.products li.product.product {
    align-self: stretch;
  }
}

/* Out-of-stock cards hung 30px below the rest of their row. The swatches plugin
   ships `ul.products li.product.ckit-hide-cta:not(.product-category) {
   padding-bottom: 0; margin-bottom: 30px }` at ≥993px, and it only marks cards
   whose CTA it replaced with swatches — an out-of-stock product gets the
   waiting-list link instead, so it never gets `.ckit-hide-cta`. The grid row
   still sizes to the tallest card *plus* that margin, so the card without it
   stretched a full 30px lower than its neighbours (bottom border and all).
   Give the un-marked cards the same box so every card in a row ends level.
   The redesigned archive grid owns its spacing in catalog.css. Keep this
   older spacing only for the separate 404 grid. Home/PDP carousels differ. */
@media (min-width: 993px) {
  .fragnatium-not-found
    ul.products
    li.product:not(.ckit-hide-cta):not(.product-category) {
    padding-bottom: 0;
    margin-bottom: 30px;
  }
}

.woocommerce ul.products li.product:hover {
  opacity: 1;
  background-color: var(--sg-accent-light-bg);
}

.woocommerce ul.products li.product::before {
  display: none;
}

/* --- Image wrapper ---
   Fixed 1:1 aspect ratio so bottles of different proportions (tall vs. wide)
   occupy the same vertical space across cards; bottle stays centered via
   object-fit: contain. */
.woocommerce ul.products li.product .woocommerce-image__wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.75rem;
  aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
  }
}

/* Touch navigation is a single action, including on wide tablets. Do not let
   emulated hover move imagery or reveal purchase controls before a link opens. */
@media (hover: none), (pointer: coarse) {
  ul.products li.product .woocommerce-image__wrapper,
  ul.products li.product .woocommerce-image__wrapper img,
  ul.products li.product .woocommerce-card__media img {
    transform: none !important;
    transition: none !important;
  }

  ul.products li.product .commercekit-wishlist.mini {
    opacity: 1;
    transform: none;
  }

  ul.products li.product .woocommerce-image__wrapper > a,
  ul.products li.product .woocommerce-loop-product__title a {
    touch-action: manipulation;
  }

  /* Shoptimizer creates a horizontal scroll/snap container even with one
     image. An inert carousel must not compete with tapping or page scrolling. */
  ul.products li.product .woocommerce-image__wrapper:not(:has(.gallery-image)) .shoptimizer-plp-carousel-container {
    display: block;
    overflow: clip;
    scroll-snap-type: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }

  ul.products li.product .woocommerce-image__wrapper:not(:has(.gallery-image)) .shoptimizer-plp-image-wrapper {
    display: block;
    width: 100%;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart {
    position: relative;
    opacity: 1;
  }

  body ul.products li.product.cgkit-swatch-hover form.cgkit-swatch-form table.variations tr {
    display: table;
  }
}

/* --- Badges (Sale, New!, etc.) ---
   The sale label (Shoptimizer, priority 7) and the CommerceKit badge wrapper
   (priority 8) are separate absolutely positioned siblings, both anchored to
   the top-left of the image wrapper. CommerceKit ships an offset rule --
   `.sale-item.product-label + .ckit-badge_wrapper { top: 36px }` -- but our
   wrapper rule below outranks it on specificity, so a product that is both on
   sale and new stacked the two on top of each other. We restate the offset at
   our own specificity and drive both badges off shared tokens so the stack
   stays aligned if the badge type scale changes. */
.woocommerce ul.products li.product {
  /* Distance from the image wrapper's top-left corner. */
  --fg-badge-inset: 1rem;
  /* One badge's box: 0.25rem padding top and bottom + a 0.7rem/1.4 line box. */
  --fg-badge-height: 1.48rem;
  /* Matches the 5px margin CommerceKit puts between badges in its own column. */
  --fg-badge-gap: 0.3rem;
}

.woocommerce ul.products li.product .ckit-badge_wrapper {
  position: absolute;
  top: var(--fg-badge-inset);
  left: var(--fg-badge-inset);
  z-index: 2;
}

/* Sale label shares the badge column's origin and type, so the two read as one
   stack rather than two unrelated pills at different insets. */
.woocommerce
  ul.products
  li.product
  .woocommerce-image__wrapper
  .sale-item.product-label {
  top: var(--fg-badge-inset);
  left: var(--fg-badge-inset);
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  font-family: var(--sg-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 0;
  line-height: 1.4;
}

/* Sale label is always emitted before the badge wrapper, so drop the wrapper
   one badge-height below it when both are present. */
.woocommerce
  ul.products
  li.product
  .sale-item.product-label
  + .ckit-badge_wrapper {
  top: calc(
    var(--fg-badge-inset) + var(--fg-badge-height) + var(--fg-badge-gap)
  );
}

.woocommerce ul.products li.product .ckit-badge {
  font-family: var(--sg-body);
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem !important;
  border-radius: 0 !important;
  line-height: 1.4;
}

/* --- Card header / content area --- */
.woocommerce ul.products li.product .woocommerce-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1rem;
  flex: 1 1 auto;
}

/* Pin swatch block to the bottom so swatches align across cards of different
   title lengths. On the header's own child: the swatch wrap itself sits
   inside the form, where an auto margin pushes nothing, and neighbouring
   cards' buttons ended up to 47px apart. A sold-out card has its stock row
   in the form's place. */
.woocommerce ul.products li.product .woocommerce-card__header > form.cgkit-swatch-form,
.woocommerce ul.products li.product .woocommerce-card__header > .fragnatium-loop-oos {
  margin-top: auto;
}

/* --- Category label --- */
.woocommerce ul.products li.product .product__categories {
  margin: 0 0 0.2rem;
  /* Not 1: a long house ("Jean Paul Gaultier") wraps on a phone card. */
  line-height: 1.35;
}

.woocommerce ul.products li.product .product__categories a,
.woocommerce ul.products li.product .product__categories span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-accent-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.woocommerce ul.products li.product .product__categories a:hover {
  color: var(--sg-text);
}

/* --- Product title --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sg-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
  color: var(--sg-text);
  line-height: 1.35;
  /* Reserve two lines so cards with short titles align with longer neighbours.
     line-clamp caps longer titles at two lines (rare). */
  min-height: calc(1.05rem * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a {
  color: var(--sg-accent-2);
}

/* --- Price --- */
.woocommerce ul.products li.product .price {
  font-size: 0.9rem;
  color: var(--sg-muted);
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
}

/* Price range separator */
.woocommerce
  ul.products
  li.product
  .price
  > span[aria-hidden='true']:not(.woocommerce-Price-amount) {
  color: var(--sg-border);
  margin: 0 0.15rem;
}

/* --- Variation swatches (Quick add buttons: 2ml, 5ml, 10ml) --- */
.cgkit-as-wrap-plp {
  margin-top: 0.65rem;
}

.cgkit-as-wrap-plp .cgkit-swatch-title {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin-bottom: 0.4rem;
  display: block;
}

.cgkit-attribute-swatches {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.cgkit-attribute-swatch.cgkit-button {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto;
  min-width: 0;
}

/* Ascending sort by ml. Rendered order from WC is alphabetical (100 ml first);
   flex order lets smaller sizes surface first without touching PHP output.
   `data-attribute-value` carries the taxonomy slug (e.g. "2-ml") while
   `data-attribute-text` carries the display name ("2 ml") — match both so we
   cover pa_size (taxonomy) and legacy product-level attributes. */
.cgkit-attribute-swatch:has([data-attribute-value="1-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="1 ml"]) { order: 1; }
.cgkit-attribute-swatch:has([data-attribute-value="2-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="2 ml"]) { order: 2; }
.cgkit-attribute-swatch:has([data-attribute-value="3-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="3 ml"]) { order: 3; }
.cgkit-attribute-swatch:has([data-attribute-value="5-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="5 ml"]) { order: 4; }
.cgkit-attribute-swatch:has([data-attribute-value="10-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="10 ml"]) { order: 5; }
.cgkit-attribute-swatch:has([data-attribute-value="15-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="15 ml"]) { order: 6; }
.cgkit-attribute-swatch:has([data-attribute-value="20-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="20 ml"]) { order: 7; }
.cgkit-attribute-swatch:has([data-attribute-value="30-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="30 ml"]) { order: 8; }
.cgkit-attribute-swatch:has([data-attribute-value="50-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="50 ml"]) { order: 9; }
.cgkit-attribute-swatch:has([data-attribute-value="75-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="75 ml"]) { order: 10; }
.cgkit-attribute-swatch:has([data-attribute-value="100-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="100 ml"]) { order: 11; }
.cgkit-attribute-swatch:has([data-attribute-value="105-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="105 ml"]) { order: 12; }
.cgkit-attribute-swatch:has([data-attribute-value="125-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="125 ml"]) { order: 13; }
.cgkit-attribute-swatch:has([data-attribute-value="150-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="150 ml"]) { order: 14; }
.cgkit-attribute-swatch:has([data-attribute-value="200-ml"]),
.cgkit-attribute-swatch:has([data-attribute-text="200 ml"]) { order: 15; }

.cgkit-attribute-swatch button.swatch.cgkit-swatch {
  font-family: var(--sg-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.45rem;
  min-width: 0;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  background: transparent;
  color: var(--sg-text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.5s var(--sg-lux-ease),
    background-color 0.5s var(--sg-lux-ease),
    color 0.5s var(--sg-lux-ease);
}

.cgkit-attribute-swatch button.swatch.cgkit-swatch:hover {
  border-color: var(--sg-accent);
  background: var(--sg-accent-light-bg);
  color: var(--sg-text);
}

.cgkit-attribute-swatch button.swatch.cgkit-swatch.selected,
.cgkit-attribute-swatch button.swatch.cgkit-swatch[aria-checked='true'] {
  border-color: var(--sg-accent-2);
  background: var(--sg-accent-2);
  color: var(--sg-on-dark);
}

/* Hide the cross overlay inside swatch buttons */
.cgkit-attribute-swatch button.swatch .cross {
  display: none;
}

/* --- Details/Summary quick-add accordion --- */
.woocommerce ul.products li.product .woocommerce-card__header details {
  margin-top: 0.5rem;
  border: 0;
}

.woocommerce ul.products li.product .woocommerce-card__header details summary {
  display: none;
}

/* --- Quantity input (hidden by default via existing rule, but styled as fallback) --- */
.woocommerce ul.products li.product .quantity:not(.buttons_added) {
  display: inline-flex;
  align-items: center;
}

.woocommerce ul.products li.product .quantity input.qty {
  width: 3rem;
  padding: 0.3rem 0.25rem;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  font-family: var(--sg-body);
  font-size: 0.85rem;
  text-align: center;
  color: var(--sg-text);
  background: transparent;
  transition: border-color 0.2s ease;
}

.woocommerce ul.products li.product .quantity input.qty:focus {
  outline: none;
  border-color: var(--sg-accent);
}

/* --- Add to cart / Select options button --- */
.woocommerce ul.products li.product .button {
  margin-top: 0.75rem;
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--sg-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--sg-text);
  border: 0;
  border-bottom: 1px solid var(--sg-text);
  cursor: pointer;
  transition:
    color 0.5s var(--sg-lux-ease),
    border-color 0.5s var(--sg-lux-ease),
    padding-left 0.5s var(--sg-lux-ease);
}

.woocommerce ul.products li.product .button:hover {
  background: transparent;
  color: var(--sg-accent);
  border-color: var(--sg-accent);
  padding-left: 0.3rem;
}

/* Disabled state (no variation selected) */
.woocommerce ul.products li.product .button.disabled,
.woocommerce ul.products li.product .button.wc-variation-selection-needed {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* --- Single ATC wrap (plugin wrapper) --- */
.cgkit-as-single-atc-wrap,
.cgkit-as-empty-atc-wrap {
  margin-top: 0;
}

.cgkit-as-single-atc-wrap .button.cgkit-as-single-atc,
.cgkit-as-empty-atc-wrap .button {
  display: inline-block;
  margin-top: 0.75rem;
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--sg-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--sg-text);
  border: 0;
  border-bottom: 1px solid var(--sg-text);
  text-decoration: none;
  transition:
    color 0.5s var(--sg-lux-ease),
    border-color 0.5s var(--sg-lux-ease),
    padding-left 0.5s var(--sg-lux-ease);
}

.cgkit-as-single-atc-wrap .button:hover,
.cgkit-as-empty-atc-wrap .button:hover {
  color: var(--sg-accent);
  border-color: var(--sg-accent);
  background: transparent;
  padding-left: 0.3rem;
}

/* --- Variation price (inside card) --- */
.cgkit-as-variation-price .price {
  font-size: 0.9rem;
  color: var(--sg-muted);
}

/* --- Responsive tweaks --- */
@media (max-width: 767px) {
  .cgkit-attribute-swatch button.swatch.cgkit-swatch {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .woocommerce ul.products li.product {
    padding: 0.75rem;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
        SIDEBAR FILTERS — Enhanced
        ========================================================================== */

/* --- Widget container --- */
#secondary .widget {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 1.25rem;
  box-shadow: none;
  margin-bottom: 1.75rem;
}

/* --- Widget titles --- */
#secondary .widget-title,
#secondary .widgettitle {
  font-family: var(--sg-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
  position: relative;
  padding-bottom: 0.6rem;
}
#secondary .widget-title::after,
#secondary .widgettitle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--sg-accent-2);
  border-radius: 1px;
}

/* --- Base list reset --- */
.product-categories,
.wc-brand-list-layered-nav-product_brand,
.woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* --- List items --- */
.product-categories li,
.wc-brand-list-layered-nav-product_brand li,
.woocommerce-widget-layered-nav-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.85rem !important;
  margin-bottom: 0 !important;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--sg-border);
  background: transparent;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    padding-left 0.25s ease;
}

/* Hover — all lists */
.product-categories li:hover,
.wc-brand-list-layered-nav-product_brand li:hover,
.woocommerce-widget-layered-nav-list li:hover {
  background: rgba(133, 72, 54, 0.035);
  border-color: var(--sg-accent-2);
  padding-left: 1.1rem !important;
}

/* Pseudo-element alignment */
.wc-brand-list-layered-nav-product_brand li::before,
.woocommerce-widget-layered-nav-list li::before {
  top: 50%;
  margin-top: -4px !important;
}

/* --- Links --- */
.product-categories a,
.wc-brand-list-layered-nav-product_brand a,
.woocommerce-widget-layered-nav-list a {
  color: var(--sg-text);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.75rem 0;
  transition: color 0.2s ease;
  flex: 1;
}
.product-categories a:hover,
.wc-brand-list-layered-nav-product_brand a:hover,
.woocommerce-widget-layered-nav-list a:hover {
  color: var(--sg-accent-2);
  text-decoration: none !important;
}

/* --- Active / current category --- */
.product-categories li.current-cat > a,
.wc-brand-list-layered-nav-product_brand li.chosen > a {
  color: var(--sg-accent-2);
  font-weight: 600;
}
.product-categories li.current-cat,
.wc-brand-list-layered-nav-product_brand li.chosen {
  background: rgba(26, 26, 26, 0.06);
  border-left: 2px solid var(--sg-accent-2);
}

/* --- Nested subcategories --- */
.product-categories li.cat-parent > ul.children {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.product-categories ul.children li {
  padding-left: 1.6rem !important;
  border-bottom: 1px solid rgba(222, 215, 206, 0.5);
}
.product-categories ul.children li:last-child {
  border-bottom: 0;
}
.product-categories ul.children a {
  font-size: 0.85rem;
  color: var(--sg-muted);
}
.product-categories ul.children a:hover {
  color: var(--sg-accent-2);
}
.product-categories ul.children li.current-cat > a {
  color: var(--sg-accent-2);
  font-weight: 600;
}

/* --- Count badges --- */
.wc-brand-list-layered-nav-product_brand .count,
.woocommerce-widget-layered-nav-list .count {
  color: var(--sg-muted);
  font-size: 0.75rem;
  position: relative !important;
  background: rgba(133, 72, 54, 0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  line-height: 1.5;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.wc-brand-list-layered-nav-product_brand li:hover .count,
.woocommerce-widget-layered-nav-list li:hover .count {
  background: var(--sg-accent-2);
  color: #fff;
}

/* --- Close drawer button --- */
.secondary-wrapper .close-drawer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  cursor: pointer;
  color: var(--sg-text);
  padding: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.secondary-wrapper .close-drawer svg {
  width: 16px;
  height: 16px;
}
.secondary-wrapper .close-drawer:hover {
  background: var(--sg-accent-2);
  border-color: var(--sg-accent-2);
  color: #fff;
  transform: rotate(90deg);
}

/* --- Scrollbar styling (for drawer overflow) --- */
#secondary::-webkit-scrollbar {
  width: 4px;
}
#secondary::-webkit-scrollbar-track {
  background: transparent;
}
#secondary::-webkit-scrollbar-thumb {
  background: var(--sg-border);
  border-radius: 0;
}
#secondary::-webkit-scrollbar-thumb:hover {
  background: var(--sg-muted);
}

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--sg-accent-2);
}

.widget_price_filter .price_slider_amount button {
  border-radius: 0;
  background: transparent;
  color: var(--sg-text);
  padding: 0.35rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sg-text);
}

/* The PLP grid. The 404 page (class-not-found.php) prints the same cards
   outside an archive, so each grid rule names its wrapper too. */
:root {
  --fragnatium-plp-cols-desktop: 4;
  --fragnatium-plp-cols-tablet: 2;
}

@media (min-width: 992px) {
  .archive.woocommerce ul.products,
  .fragnatium-not-found ul.products {
    display: grid;
    grid-template-columns: repeat(
      var(--fragnatium-plp-cols-desktop),
      minmax(0, 1fr)
    );
    column-gap: 30px;
    row-gap: 40px;
    width: 100%;
    margin-left: 0;
  }

  .archive.woocommerce ul.products li.product,
  .fragnatium-not-found ul.products li.product {
    width: 100%;
    padding: 0;
  }
}

/* Six across once the content column has stopped growing.
   1400px is --sg-container-max, so this is exactly the point where the grid is
   at full width and a sixth column costs the other five nothing: cards land at
   ~200px. Below it four is right — six at 1200px would be ~160px a card, which
   is narrower than the 2/5/10 ml swatch row underneath and would wrap it.
   Only reachable because the PLP sidebar is gone; with it the same screen was
   a ~1100px column. */
@media (min-width: 1400px) {
  :root {
    --fragnatium-plp-cols-desktop: 6;
  }
}

/* The hairline between cards is a left border on every card that does not start
   a row, so which ones those are moves with the column count. The base rule
   (4n + 1) is right only at four across — restate it per breakpoint rather than
   leave the seam falling mid-row. `nth-child` cannot read a custom property, so
   these have to be written out. */
@media (min-width: 1400px) {
  .archive.woocommerce ul.products li.product,
  .fragnatium-not-found ul.products li.product {
    border-left: 1px solid var(--sg-border);
  }

  .archive.woocommerce ul.products li.product:nth-child(6n + 1),
  .fragnatium-not-found ul.products li.product:nth-child(6n + 1) {
    border-left: 0;
  }
}

@media (max-width: 991px) {
  .archive.woocommerce ul.products li.product,
  .fragnatium-not-found ul.products li.product {
    border-left: 1px solid var(--sg-border);
  }

  .archive.woocommerce ul.products li.product:nth-child(2n + 1),
  .fragnatium-not-found ul.products li.product:nth-child(2n + 1) {
    border-left: 0;
  }
}

@media (max-width: 991px) {
  /* Reset the parent theme's negative-margin bleed pattern on mobile.
     The parent sets: ul.products { width:calc(100%+30px); margin-left:-15px }
     to create gutters via negative margins. We reset these here since our
     grid layout handles spacing via gap/padding instead. */
  .woocommerce ul.products {
    width: 100%;
    margin-left: 0;
  }

  .archive.woocommerce ul.products,
  .fragnatium-not-found ul.products {
    display: grid;
    grid-template-columns: repeat(
      var(--fragnatium-plp-cols-tablet),
      minmax(0, 1fr)
    );
  }

  .archive.woocommerce ul.products li.product,
  .fragnatium-not-found ul.products li.product {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* The homepage bestsellers grid (this stylesheet loads there too): without
     it the 0.75rem card padding above stacked on the header's own, and every
     price range wrapped. Padding only; the home grid sizes its own cards. */
  .woocommerce .fragnatium-home__bestsellers-grid.products li.product {
    padding-left: 0;
    padding-right: 0;
  }
}
/* ─── Brand archive description ──────────────────────────────────────────── */

.brand-archive-description {
  max-width: 639px;
  color: var(--sg-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0.5rem 0 1.5rem;
}

.brand-archive-description p:last-child {
  margin-bottom: 0;
}

/* Brand archive FAQ */
.brand-archive-faq {
  margin: 1.5rem 0 1.25rem;
  max-width: 48rem;
}

.brand-archive-faq__heading {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.brand-archive-faq__item {
  border-bottom: 1px solid var(--sg-border, rgba(34, 40, 49, 0.14));
}

.brand-archive-faq__question {
  cursor: pointer;
  padding: 0.65rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  list-style: none;
  transition: color 0.5s ease-out;
}

.brand-archive-faq__question::-webkit-details-marker {
  display: none;
}

.brand-archive-faq__question::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  font-weight: 400;
}

.brand-archive-faq__item[open] > .brand-archive-faq__question::before {
  content: '−';
}

.brand-archive-faq__question:hover {
  color: var(--sg-accent-2, #222831);
}

.brand-archive-faq__answer {
  padding: 0 0 0.75rem 1.2em;
  font-size: 0.85rem;
  color: var(--sg-slate, #6b6b6b);
  line-height: 1.6;
}

.brand-archive-faq__answer p {
  margin: 0;
}

/* Discovery sets category: the size note, a caption after the sort select
   (class-pdp-layout.php prints it inside Shoptimizer's sorting bar, which is
   a flex row on desktop and a two-column grid on a phone; the parent orders
   the select 2 and the result count 3). */
.fragnatium-discovery-set-archive-notice {
  order: 3;
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  margin: 0;
  font: var(--sg-caption);
  color: var(--sg-muted);
}


/* ==========================================================================
      LOAD MORE
      ========================================================================== */

/* Rendered on every paginated archive, shown only once shop-load-more.js has
   marked the document. An archive whose script never arrives keeps
   WooCommerce's pagination and never sees a button that would do nothing. */
.fragnatium-load-more {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0 0.5rem;
  text-align: center;
}

body.fragnatium-load-more-active .fragnatium-load-more {
  display: flex;
}

/* The count moves here with the button: WooCommerce's own result count and
   pagination describe page 1 of 6, which stops being true on the first click.
   Both come back if the fetch fails twice and the button reverts to a link. */
body.fragnatium-load-more-active:not(.fragnatium-load-more-fallback) .woocommerce-pagination,
body.fragnatium-load-more-active:not(.fragnatium-load-more-fallback) .woocommerce-result-count {
  display: none;
}

.fragnatium-load-more__progress {
  margin: 0;
  font: var(--sg-caption);
  letter-spacing: var(--sg-track-caps-tight);
  text-transform: uppercase;
  color: var(--sg-muted);
}

.fragnatium-load-more__button {
  position: relative;
  overflow: hidden;
  justify-content: center;
  min-width: 14rem;
}

/* Indeterminate hairline rather than a spinner — the accent sweeping under the
   label is the same gesture the rest of the system uses, and a circle would be
   the only round thing on the site. */
.fragnatium-load-more__button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sg-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.fragnatium-load-more__button.is-loading {
  cursor: progress;
}

.fragnatium-load-more__button.is-loading::after {
  animation: fragnatium-load-more-sweep 1.1s var(--sg-lux-ease) infinite;
}

@keyframes fragnatium-load-more-sweep {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  51% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fragnatium-load-more__button.is-loading::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* The paragraph carries its message from the server and is revealed by dropping
   the attribute, so it has to stay hidden against any `p { display }` rule. */
.fragnatium-load-more__error[hidden] {
  display: none;
}

.fragnatium-load-more__error {
  margin: 0;
  max-width: 28rem;
  font: var(--sg-body-sm);
  color: var(--sg-text);
  border-left: 2px solid var(--sg-accent);
  padding-left: 0.75rem;
  text-align: left;
}

/* ==========================================================================
      GENDER QUICK FILTER
      ========================================================================== */

/* Inside the filter bar (below), immediately after the ordering select. On a
   narrow screen without the modal the cards wrap onto their own line rather
   than squeezing the select. */
.fragnatium-gender-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fragnatium-gender-filter__card {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  background: transparent;
  color: var(--sg-text);
  font-family: var(--sg-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sg-track-caps-tight);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--sg-dur-fast) ease,
    border-color var(--sg-dur-fast) ease,
    color var(--sg-dur-fast) ease;
}

.fragnatium-gender-filter__card:hover {
  border-color: var(--sg-accent-2);
  background: var(--sg-accent-light-bg);
  color: var(--sg-text);
}

.fragnatium-gender-filter__card:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
}

/* Active reads as the ink CTA does elsewhere, so "on" is the same idea here as
   on every other control in the system. */
.fragnatium-gender-filter__card.is-active {
  background: var(--sg-text);
  border-color: var(--sg-text);
  color: var(--sg-on-dark);
}

.fragnatium-gender-filter__card.is-active:hover {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-text);
}

.fragnatium-gender-filter__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.fragnatium-gender-filter__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Waiting on the grid. The cards stay clickable-looking but the pointer says
   otherwise; the grid below dims via its own aria-busy rule. */
.fragnatium-gender-filter.is-loading .fragnatium-gender-filter__card {
  cursor: progress;
}

.woocommerce ul.products[aria-busy='true'] {
  opacity: 0.55;
  transition: opacity var(--sg-dur-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  .fragnatium-gender-filter__card,
  .woocommerce ul.products[aria-busy='true'] {
    transition: none;
  }
}


/* Its own line when it appears — the cards are a flex row and a sentence
   squeezed between them would be unreadable. */
.fragnatium-gender-filter__error {
  flex: 1 0 100%;
  margin: 0.25rem 0 0;
  font: var(--sg-body-sm);
  color: var(--sg-text);
  border-left: 2px solid var(--sg-accent);
  padding-left: 0.75rem;
}

.fragnatium-gender-filter__error[hidden] {
  display: none;
}

/* ==========================================================================
      FILTER BAR: gender cards + Brand / Accord / Notes dropdowns; a modal on a phone
      ========================================================================== */

/* The brand panel spans the sorting bar rather than hanging off its button,
   which can sit anywhere along the row — anchored to the button it would run
   off the right edge on a tablet. */
.shoptimizer-sorting:has(.fragnatium-filters) {
  position: relative;
}

.fragnatium-filters,
.fragnatium-filters__panel,
.fragnatium-filters__body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fragnatium-filters.is-loading,
.fragnatium-filters__panel.is-loading {
  cursor: progress;
}

/* Phone-only and modal-only pieces. */
.fragnatium-filters__open,
.fragnatium-filters__head,
.fragnatium-filters__show,
.fragnatium-filters__label {
  display: none;
}

.fragnatium-filters__foot {
  display: flex;
  align-items: center;
}

.fragnatium-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font: var(--sg-caption);
  color: var(--sg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.25rem;
}

/* Inline, the panel's foot holds only the modal's buttons: "Clear all" lives
   in the chip row under the bar, beside what it clears. */
.fragnatium-filters > .fragnatium-filters__panel > .fragnatium-filters__foot {
  display: none;
}

.fragnatium-filters__clear:hover {
  color: var(--sg-text);
}

.fragnatium-filters__clear[hidden] {
  display: none;
}

.fragnatium-filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  background: var(--sg-text);
  color: var(--sg-on-dark);
  font: 600 0.65rem/1 var(--sg-body);
  letter-spacing: 0;
}

.fragnatium-filters__count[hidden] {
  display: none;
}

/* --- The selection, spelled out under the bar (render_chips()) ---
   Outlined in ink: "on", like the active card, without a row of solid ink
   blocks competing with the grid below. */
.fragnatium-filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-2);
  margin: calc(-1 * var(--sg-space-2)) 0 var(--sg-space-5);
}

.fragnatium-filters__chips[hidden] {
  display: none;
}

.fragnatium-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-2);
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem 0.35rem 0.8rem;
  border: 1px solid var(--sg-text);
  background: var(--sg-surface);
  color: var(--sg-text);
  font: var(--sg-caption);
  text-decoration: none;
  transition:
    background-color var(--sg-dur-fast) ease,
    border-color var(--sg-dur-fast) ease;
}

.fragnatium-filters__chip svg {
  flex: 0 0 auto;
  transition: transform var(--sg-dur-fast) var(--sg-lux-ease);
}

.fragnatium-filters__chip:hover {
  background: var(--sg-accent-light-bg);
  color: var(--sg-text);
}

.fragnatium-filters__chip:hover svg {
  transform: rotate(90deg);
}

.fragnatium-filters__chip:focus-visible,
.fragnatium-filters__clear:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
}

/* A list with something chosen in it says so on its button, in ink like a
   chosen card — not only by the number. Never in the sheet, where the button
   is a section heading. */
.fragnatium-filters > .fragnatium-filters__panel .fragnatium-brand-filter:has(.fragnatium-brand-filter__option.is-active) > .fragnatium-brand-filter__toggle {
  border-color: var(--sg-text);
}

/* The chosen names: for a screen reader beside the button's label ("Accord,
   Woody" rather than "Accord, 1"), and visible in the sheet's headings. The
   commas are drawn here, so each name stays its own translated text node. */
.fragnatium-brand-filter__picked {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fragnatium-brand-filter__picked > span + span::before {
  content: ', ';
}

/* --- The dropdowns: <details>, so they open without JavaScript ---
   Brand came first, so every list (Brand, Accord, Notes) wears its classes. */
.fragnatium-brand-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--sg-border);
  color: var(--sg-text);
  font-family: var(--sg-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sg-track-caps-tight);
  text-transform: uppercase;
  line-height: 1;
  min-height: calc(18px + 0.8rem + 2px); /* Level with the gender cards. */
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition:
    background-color var(--sg-dur-fast) ease,
    border-color var(--sg-dur-fast) ease;
}

.fragnatium-brand-filter__toggle::-webkit-details-marker {
  display: none;
}

.fragnatium-brand-filter__toggle:hover,
.fragnatium-brand-filter[open] .fragnatium-brand-filter__toggle {
  border-color: var(--sg-accent-2);
  background: var(--sg-accent-light-bg);
}

.fragnatium-brand-filter__toggle:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
}

/* The summary's own label is the visible "Brand" here, unlike the section
   labels, which only the modal shows. */
.fragnatium-brand-filter__toggle .fragnatium-filters__label {
  display: inline;
}

.fragnatium-brand-filter__chevron {
  transition: transform var(--sg-dur-fast) ease;
}

.fragnatium-brand-filter[open] .fragnatium-brand-filter__chevron {
  transform: rotate(180deg);
}

.fragnatium-brand-filter__panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 30;
  /* Notes runs to 80-odd names; the panel scrolls rather than pushing the
     grid a screen down. */
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  box-shadow: var(--sg-shadow-card-hover);
}

.fragnatium-brand-filter__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.15rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Box on the first line, not centred on the label: a name that wraps
   ("Maison Francis Kurkdjian" in the phone sheet) left it between the lines. */
.fragnatium-brand-filter__option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0.25rem;
  color: var(--sg-text);
  font: var(--sg-body-sm);
  text-decoration: none;
  cursor: pointer;
}

.fragnatium-brand-filter__option:hover .fragnatium-brand-filter__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fragnatium-brand-filter__option:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 1px;
}

.fragnatium-brand-filter__box {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Half of (line height - box): centred on the first line of --sg-body-sm. */
  margin-top: calc((0.85rem * 1.6 - 16px) / 2);
  border: 1px solid var(--sg-muted);
  background: transparent;
  transition:
    background-color var(--sg-dur-fast) ease,
    border-color var(--sg-dur-fast) ease;
}

.fragnatium-brand-filter__option.is-active .fragnatium-brand-filter__box {
  background: var(--sg-text);
  border-color: var(--sg-text);
}

/* The tick: two borders of a rotated box, in the on-dark colour. */
.fragnatium-brand-filter__option.is-active .fragnatium-brand-filter__box::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--sg-on-dark);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.fragnatium-brand-filter__option.is-active .fragnatium-brand-filter__name {
  font-weight: 600;
}

.fragnatium-brand-filter__option[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

.fragnatium-brand-filter__option[aria-disabled='true']:hover .fragnatium-brand-filter__name {
  text-decoration: none;
}

.fragnatium-brand-filter__note {
  margin: 0.75rem 0 0;
  font: var(--sg-caption);
  color: var(--sg-muted);
  border-left: 2px solid var(--sg-accent);
  padding-left: 0.75rem;
}

.fragnatium-brand-filter__note[hidden] {
  display: none;
}

.fragnatium-filters .fragnatium-gender-filter__error {
  flex: 1 0 100%;
}

/* --- A phone without the modal (no JavaScript, or no <dialog>) --- */
@media (max-width: 767px) {
  .fragnatium-filters {
    order: -1;
    width: 100%;
  }

  .fragnatium-filters__panel,
  .fragnatium-filters__body,
  .fragnatium-gender-filter {
    width: 100%;
  }

  .fragnatium-gender-filter__card {
    flex: 1 1 auto;
    justify-content: center;
  }

  .fragnatium-brand-filter {
    width: 100%;
  }

  .fragnatium-brand-filter__toggle {
    width: 100%;
  }

  .fragnatium-brand-filter__toggle .fragnatium-brand-filter__chevron {
    margin-left: auto;
  }
}

/* --- A phone with the modal: one button, beside the sort select --- */
@media (max-width: 767px) {
  body.fragnatium-filters-modal .shoptimizer-sorting .fragnatium-filters {
    width: auto;
    flex: 1 1 0;
  }

  body.fragnatium-filters-modal .shoptimizer-sorting .woocommerce-ordering {
    flex: 1 1 0;
    min-width: 0;
  }

  body.fragnatium-filters-modal .shoptimizer-sorting select.orderby {
    width: 100%;
    min-height: 44px;
  }

  /* The bar is a grid here (Shoptimizer's), sized to content: the button and
     the select came out 115px and 219px wide, and 34px and 38px tall. Two
     equal halves, one tap-sized height. */
  body.fragnatium-filters-modal .shoptimizer-sorting:has(.fragnatium-filters) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fragnatium-filters__chip,
  .fragnatium-filters__chips .fragnatium-filters__clear {
    min-height: 44px;
  }

  body.fragnatium-filters-modal .fragnatium-filters > .fragnatium-filters__panel {
    display: none;
  }

  body.fragnatium-filters-modal .fragnatium-filters__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--sg-text);
    border-radius: 0;
    background: var(--sg-text);
    color: var(--sg-on-dark);
    font-family: var(--sg-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--sg-track-caps-tight);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
  }

  body.fragnatium-filters-modal .fragnatium-filters__open:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
  }

  body.fragnatium-filters-modal .fragnatium-filters__open .fragnatium-filters__count {
    background: var(--sg-accent);
    color: var(--sg-text);
  }
}

/* --- The modal: a sheet up from the bottom --- */
html.fragnatium-filters-locked {
  overflow: hidden;
}

.fragnatium-filters__dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sg-text);
  font-family: var(--sg-body);
}

.fragnatium-filters__dialog::backdrop {
  background: rgba(34, 40, 49, 0.5);
}

.fragnatium-filters__dialog .fragnatium-filters__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  max-height: calc(100% - 2.5rem);
  background: var(--sg-surface);
}

.fragnatium-filters__dialog .fragnatium-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--sg-border);
}

.fragnatium-filters__title {
  margin: 0;
  font: var(--sg-h3);
  color: var(--sg-text);
}

.fragnatium-filters__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sg-text);
  cursor: pointer;
}

.fragnatium-filters__close:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: -2px;
}

.fragnatium-filters__dialog .fragnatium-filters__body {
  display: block;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
}

.fragnatium-filters__dialog .fragnatium-filters__group + .fragnatium-filters__group {
  margin-top: 1.5rem;
}

.fragnatium-filters__dialog .fragnatium-filters__label {
  display: block;
  margin: 0 0 0.75rem;
  font: var(--sg-eyebrow);
  letter-spacing: var(--sg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sg-muted);
}

.fragnatium-filters__dialog .fragnatium-gender-filter__card {
  flex: 1 1 0;
  justify-content: center;
  padding: 0.65rem 0.5rem;
}

/* In the sheet each list's <details> is a collapsible section, not a
   dropdown — and never wears the dropdown's open highlight, which outranks a
   plain selector. A hairline between sections keeps three closed headings
   reading as three rows. */
.fragnatium-filters__dialog .fragnatium-brand-filter {
  border-top: 1px solid var(--sg-border);
}

.fragnatium-filters__dialog .fragnatium-filters__group + .fragnatium-brand-filter {
  margin-top: 1rem;
}

/* Consecutive sections are rows between hairlines, not rows with a gap
   under each that reads as part of the heading above it. */
.fragnatium-filters__dialog .fragnatium-brand-filter + .fragnatium-brand-filter {
  margin-top: 0;
}

.fragnatium-filters__dialog .fragnatium-brand-filter:last-child {
  border-bottom: 1px solid var(--sg-border);
}

/* A closed heading names what is chosen inside it ("Brand … Creed, Xerjoff"),
   which says more than the count it replaces here. */
.fragnatium-filters__dialog .fragnatium-brand-filter__picked {
  position: static;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  clip-path: none;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font: var(--sg-body-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sg-text);
}

.fragnatium-filters__dialog .fragnatium-brand-filter__toggle .fragnatium-filters__count {
  display: none;
}

.fragnatium-filters__dialog .fragnatium-filters__clear {
  min-height: 44px;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__toggle,
.fragnatium-filters__dialog .fragnatium-brand-filter[open] .fragnatium-brand-filter__toggle {
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__toggle .fragnatium-filters__label {
  margin: 0;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__chevron {
  flex: 0 0 auto;
  margin-left: auto;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__panel {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 0 0 0.75rem;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__list {
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}

.fragnatium-filters__dialog .fragnatium-brand-filter__option {
  min-height: 44px;
  /* Top-aligned now, so the padding centres a one-line name in the 44px row. */
  padding: calc((44px - 0.85rem * 1.6) / 2) 0;
}

.fragnatium-filters__dialog .fragnatium-filters__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sg-border);
}

.fragnatium-filters__dialog .fragnatium-filters__show {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  margin: 0;
}

/* While the grid behind the sheet catches up, the count on the button is the
   previous answer: Load more's accent sweep says so, in the same gesture. */
.fragnatium-filters__dialog .fragnatium-filters__show::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sg-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.fragnatium-filters__dialog .fragnatium-filters__panel.is-loading .fragnatium-filters__show::after {
  animation: fragnatium-load-more-sweep 1.1s var(--sg-lux-ease) infinite;
}

.fragnatium-filters__dialog .fragnatium-gender-filter__error {
  margin: 0 1.25rem 0.75rem;
}

/* --- Motion: transform and opacity only, and none of it under reduced motion ---
   The sheet rises from the bottom edge over a fading-in backdrop and leaves
   the same way (shop-grid.js waits for `fragnatium-sheet-down` before it
   closes the dialog); a dropdown or section eases its options in; a tick, a
   chip and a changed count each arrive with a small settle. */
@media (prefers-reduced-motion: no-preference) {
  .fragnatium-filters__dialog[open] .fragnatium-filters__panel {
    animation: fragnatium-sheet-up 0.35s var(--sg-lux-ease);
  }

  .fragnatium-filters__dialog[open]::backdrop {
    animation: fragnatium-fade-in 0.35s var(--sg-lux-ease);
  }

  .fragnatium-filters__dialog.is-closing .fragnatium-filters__panel {
    animation: fragnatium-sheet-down 0.25s ease-in forwards;
  }

  .fragnatium-filters__dialog.is-closing::backdrop {
    animation: fragnatium-fade-out 0.25s ease-in forwards;
  }

  .fragnatium-brand-filter[open] > .fragnatium-brand-filter__panel {
    animation: fragnatium-drop-in var(--sg-dur-fast) var(--sg-lux-ease);
  }

  .fragnatium-brand-filter__option.is-active .fragnatium-brand-filter__box::after {
    animation: fragnatium-tick-in var(--sg-dur-fast) var(--sg-lux-ease);
  }

  .fragnatium-filters__chip.is-new {
    animation: fragnatium-chip-in 0.3s var(--sg-lux-ease);
  }

  .fragnatium-filters__count.is-bumped {
    animation: fragnatium-count-bump 0.3s var(--sg-lux-ease);
  }
}

@keyframes fragnatium-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@keyframes fragnatium-sheet-down {
  from {
    transform: none;
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes fragnatium-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fragnatium-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fragnatium-drop-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* The tick is a rotated box, so its own rotation has to ride along. */
@keyframes fragnatium-tick-in {
  from {
    transform: rotate(45deg) scale(0.3);
    opacity: 0;
  }
  to {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

@keyframes fragnatium-chip-in {
  from {
    transform: translateY(4px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes fragnatium-count-bump {
  40% {
    transform: scale(1.25);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fragnatium-brand-filter__toggle,
  .fragnatium-brand-filter__chevron,
  .fragnatium-brand-filter__box,
  .fragnatium-filters__chip,
  .fragnatium-filters__chip svg {
    transition: none;
  }

  .fragnatium-filters__dialog .fragnatium-filters__panel.is-loading .fragnatium-filters__show::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* --- Product search (class-product-search.php) ---
   The notice says when the grid is a correction or the closest match rather
   than what was typed; the empty state gives a search that found nothing
   somewhere to go. Both sit in the archive column, under the H1. */
.fragnatium-search-notice {
  margin: 0 0 var(--sg-space-5);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-left: 3px solid var(--sg-accent);
  background: var(--sg-accent-light-bg);
  font: var(--sg-body-md);
  color: var(--sg-text);
}

.fragnatium-search-notice strong {
  font-weight: 600;
}

.fragnatium-search-empty {
  margin-top: var(--sg-space-8);
}

.fragnatium-search-empty__code {
  margin: 0 0 var(--sg-space-8);
  font: var(--sg-body-md);
}

.fragnatium-search-empty__code a,
.fragnatium-search-empty__all a {
  color: var(--sg-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fragnatium-search-empty__title {
  margin: 0 0 var(--sg-space-5);
  font: var(--sg-h3);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
}

.fragnatium-search-empty .woocommerce {
  margin-bottom: var(--sg-space-8);
}

.fragnatium-search-empty__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2);
  margin: 0 0 var(--sg-space-4);
  padding: 0;
  list-style: none;
}

.fragnatium-search-empty__brands a {
  display: inline-block;
  padding: var(--sg-space-2) var(--sg-space-4);
  border: 1px solid var(--sg-border);
  font: var(--sg-caption);
  letter-spacing: var(--sg-track-caps-tight);
  text-transform: uppercase;
  color: var(--sg-text);
  text-decoration: none;
  transition: border-color var(--sg-dur-fast) var(--sg-lux-ease);
}

.fragnatium-search-empty__brands a:hover,
.fragnatium-search-empty__brands a:focus-visible {
  border-color: var(--sg-text);
}

.fragnatium-search-empty__all {
  margin: 0;
  font: var(--sg-body-sm);
}