/* Northcode Starter 1.4 — opt-in reusable patterns. */
/* Variables use inline defaults so per-brand values in tokens.css remain authoritative. */

/* Borderless unless glass-border is explicitly added. Add on-dark for dark text context. */
body .glass-light.glass-light.glass-light.glass-light,
body .glass-dark.glass-dark.glass-dark.glass-dark {
  border: 0;
  border-radius: var(--radius);
}
body .glass-light.glass-light.glass-light.glass-light {
  background: var(--glass-light-fallback, rgba(255, 255, 255, .94));
  --nc-glass-border: var(--glass-light-border, rgba(255, 255, 255, .25));
}
body .glass-dark.glass-dark.glass-dark.glass-dark {
  background: var(--glass-dark-fallback, rgba(0, 0, 0, .88));
  --nc-glass-border: var(--glass-dark-border, rgba(255, 255, 255, .15));
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .glass-light.glass-light.glass-light.glass-light,
  body .glass-dark.glass-dark.glass-dark.glass-dark {
    backdrop-filter: blur(var(--glass-blur, 16px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
  }
  body .glass-light.glass-light.glass-light.glass-light { background: var(--glass-light-fill, rgba(255, 255, 255, .15)); }
  body .glass-dark.glass-dark.glass-dark.glass-dark { background: var(--glass-dark-fill, rgba(0, 0, 0, .35)); }
}
body .glass-light.glass-light.glass-light.glass-border,
body .glass-dark.glass-dark.glass-dark.glass-border {
  border: 1px solid var(--nc-glass-border);
}

/* Custom/Loop cards: action must be a direct child, or inside the boxed inner wrapper. */
body .shop-card.shop-card {
  --flex-direction: column;
  --container-widget-height: initial;
  --container-widget-flex-grow: 0;
  --container-widget-width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
body .shop-card.shop-card.e-con-boxed > .e-con-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
}
body .shop-card.shop-card > .card-body,
body .shop-card.shop-card > .e-con-inner > .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}
body .shop-card.shop-card > .card-action,
body .shop-card.shop-card > .e-con-inner > .card-action,
body .card-body.card-body > .card-action {
  margin-top: auto;
  flex-shrink: 0;
}
/* Existing 1.3.1 card-actions remains valid, now including explicit action widgets. */
body .card-actions > .card-action,
body .card-actions > .e-con-inner > .card-action { margin-top: auto; }

/* Existing CSS product grids only; do not apply to carousels, masonry or float-based lists. */
body .shop-cards.shop-cards ul.products {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
body .shop-cards.shop-cards ul.products > li.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: flex-start;
}
body .shop-cards.shop-cards ul.products > li.product > :is(a.button, .card-action),
body .shop-cards.shop-cards ul.products > li.product > a.added_to_cart { margin-top: auto; }

/* Narrowly opt-in mobile normal flow, based on the confirmed NORTH section workaround. */
@media (max-width: 767px) {
  body .flow-mobile.e-con:not(.e-con-boxed),
  body .flow-mobile.e-con > .e-con-inner {
    display: block !important;
    height: auto !important;
  }
  body .flow-mobile.e-con:not(.e-con-boxed) > .elementor-element + .elementor-element,
  body .flow-mobile.e-con > .e-con-inner > .elementor-element + .elementor-element {
    margin-top: var(--nc-flow-gap, var(--row-gap, var(--sp-m)));
  }
  body .flow-mobile .elementor-widget-woocommerce-products,
  body .flow-mobile .elementor-widget-woocommerce-products > .elementor-widget-container {
    height: auto !important;
  }
}

/* Preserve filter functionality; only suppress the known Loop Grid opacity animation. */
body .loop-no-fade.e-loading-overlay { animation: none !important; opacity: 1 !important; }
body .swatches-left .swatchly-type-wrap { justify-content: flex-start !important; }

/* ShopLentor link filter. Names stay in the DOM as link names; visible counts/text are hidden. */
body .shop-colour-swatches ul[data-filter-key="filter_colour"] {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--nc-swatch-gap, var(--sp-3xs));
  margin: 0;
  padding: 0;
  list-style: none;
}
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li {
  flex: 0 0 var(--nc-swatch-hit, 44px);
  width: var(--nc-swatch-hit, 44px);
  margin: 0 !important;
  padding: 0 !important;
}
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--nc-swatch-hit, 44px);
  min-height: var(--nc-swatch-hit, 44px);
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1;
  text-decoration: none;
  --swatch-colour: var(--c-muted);
}
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li > a > span { display: none !important; }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li > a::before {
  content: '' !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  width: var(--nc-swatch-size, 26px) !important;
  height: var(--nc-swatch-size, 26px) !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent);
  border-radius: 50%;
  background: var(--swatch-colour) !important;
  transition: none !important;
}
/* ShopLentor's selected X must not replace or move the colour circle. */
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li > a::after {
  display: none !important;
  content: none !important;
}
body .shop-colour-swatches ul[data-filter-key="filter_colour"] > li.wlchosen > a::before {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="black"] { --swatch-colour: var(--swatch-black, #171717); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="grey-marl"] { --swatch-colour: var(--swatch-grey-marl, #b8b8b6); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="off-black"] { --swatch-colour: var(--swatch-off-black, #353535); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="off-white"] { --swatch-colour: var(--swatch-off-white, #eeeae1); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="olive"] { --swatch-colour: var(--swatch-olive, #50583e); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="stone"] { --swatch-colour: var(--swatch-stone, #b8b0a2); }
body .shop-colour-swatches ul[data-filter-key="filter_colour"] a[data-value="white"] { --swatch-colour: var(--swatch-white, #fff); }