/* ==========================================================================
   WEIGH N BUY V3 — CONSOLIDATED APPROVED STYLING
   Replacement for: assets/css/wnb-v3-approved.css
   Scope: styling/responsive fixes only. No cart/variation/Tawk JS logic here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. BRAND / TYPOGRAPHY
   -------------------------------------------------------------------------- */
:root {
  --wnb-orange: #ff6a00;
  --wnb-orange-dark: #c94e00;
  --wnb-ink: #07182f;
  --wnb-text: #172033;
  --wnb-muted: #667085;
  --wnb-border: #e1e6ed;
  --wnb-green-bg: #f1f8f1;
  --wnb-green-border: #d7ead8;
  --wnb-green-text: #315d3a;
  --wnb-green-strong: #246b35;
  --wnb-warm-bg: #fff7f0;
}

html, body, button, input, select, textarea {
  font-family: "Manrope", sans-serif;
}

/* --------------------------------------------------------------------------
   02. HEADER / MOBILE MENU
   -------------------------------------------------------------------------- */
.wnb-mobile-menu-heading {
  margin: 4px 0 7px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wnb-mobile-menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.wnb-mobile-menu-links a {
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--wnb-ink);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.wnb-mobile-menu-links a:hover,
.wnb-mobile-menu-links a:focus-visible {
  background: #fff3eb;
  color: var(--wnb-orange-dark);
  outline: none;
}

.wnb-mobile-menu-divider {
  height: 1px;
  margin: 10px 0;
  background: #e5e7eb;
}

@media (max-width: 1023px) {
  [data-mobile-menu] {
    background: var(--wnb-warm-bg) !important;
    border-top-color: #f2dfd1 !important;
  }

  [data-mobile-menu] .container-page {
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .wnb-mobile-menu-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .wnb-mobile-menu-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 8px;
    color: var(--wnb-text);
    font-size: 14px;
    font-weight: 650;
  }

  .wnb-mobile-menu-links a:hover,
  .wnb-mobile-menu-links a:focus-visible {
    background: #ffe9d8 !important;
    color: #b94700 !important;
  }

  .wnb-mobile-menu-divider {
    margin: 8px 0 !important;
    background: #efd8c8 !important;
  }
}

/* --------------------------------------------------------------------------
   03. CATALOGUE INFORMATION BAR
   Desktop remains as approved. Mobile reflows without collapsing.
   -------------------------------------------------------------------------- */
.wnb-catalogue-info-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 28px 4px;
  background: #fff;
}

.wnb-catalogue-info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: min(1140px, 100%);
  min-height: 40px;
  gap: 6px 11px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, #fff7f2 0%, #fff0e6 100%);
  color: #111827;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
}

.wnb-catalogue-info-icon {
  width: 25px;
  height: 25px;
  color: #ff5a00;
  flex: 0 0 25px;
}

.wnb-catalogue-info-icon svg {
  width: 100%;
  height: 100%;
}

.wnb-catalogue-info-bar strong {
  color: #ff5a00;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .wnb-catalogue-info-wrap {
    padding: 10px 14px 2px;
  }
}

@media (max-width: 560px) {

  .wnb-catalogue-info-wrap {
    width: 100% !important;
    padding: 8px 10px 3px !important;
    box-sizing: border-box !important;
  }

  .wnb-catalogue-info-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    gap: 2px 5px !important;
    padding: 9px 10px !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .wnb-catalogue-info-bar > * {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .wnb-catalogue-info-bar > :nth-child(1) {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin-right: 2px !important;
  }

  .wnb-catalogue-info-bar > :nth-child(2) {
    white-space: normal !important;
  }

  .wnb-catalogue-info-bar > :nth-child(3) {
    color: #ff5a00 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .wnb-catalogue-info-bar > :nth-child(4),
  .wnb-catalogue-info-bar > :nth-child(6) {
    display: inline !important;
  }

  .wnb-catalogue-info-bar > :nth-child(5) {
    color: #172033 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .wnb-catalogue-info-bar > :nth-child(7) {
    color: #111827 !important;
    white-space: normal !important;
  }
}

/* --------------------------------------------------------------------------
   04. PRODUCT LIST / CARDS
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .woocommerce ul.products.wnb-proposed-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px 24px !important;
  }
}

.wnb-product-card-media {
  overflow: hidden;
}

.wnb-card-hover-action {
  position: absolute;
  inset: auto 10px 12px 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 38px;
  border: 1px solid rgba(255, 106, 0, .72);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  color: var(--wnb-orange-dark) !important;
  font-size: 13.2px;
  font-weight: 800;
  text-decoration: none !important;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
  backdrop-filter: blur(5px);
}

.wnb-product-card:hover .wnb-card-hover-action,
.wnb-product-card:focus-within .wnb-card-hover-action {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.wnb-card-hover-action:hover,
.wnb-card-hover-action:focus-visible {
  background: rgba(255, 246, 240, .95);
  outline: 2px solid rgba(255, 106, 0, .26);
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
  .wnb-card-hover-action {
    display: none !important;
  }
}

/*
 * Approved green value strip. flex-wrap/white-space were `nowrap` here
 * unconditionally, with the max-width:560px block below switching them
 * to wrap -- but this rule and that one are equal specificity (both
 * `.woocommerce ul.products.wnb-proposed-grid .wnb-tile-weight-row`),
 * so which one actually wins for a real phone depends on exactly where
 * 560px falls relative to its viewport, and reportedly still clipped
 * ("Pay fo...", price digits missing) on a real device. Wrapping by
 * default removes that fight entirely -- desktop cards are wide enough
 * that this content fits on one line anyway, so nothing changes there,
 * and mobile no longer depends on a second rule to fix what this one
 * broke.
 */
.woocommerce ul.products.wnb-proposed-grid .wnb-tile-weight-row,
.wnb-tile-weight-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 2px 6px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--wnb-green-border) !important;
  border-radius: 6px !important;
  background: var(--wnb-green-bg) !important;
  color: var(--wnb-green-text) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/*
 * When there's an offer (original weight -> "Pay for" chargeable weight),
 * the row has two logical halves: "300g -> Pay for" and "200g . GBP35/kg".
 * Letting all of it wrap freely as flat flex items (the rule above) broke
 * mid-phrase in odd places on narrower cards -- "Pay for" stranded alone,
 * or the rate split from its weight. woocommerce/content-product.php now
 * groups each half into its own .wnb-tile-weight-line{1,2} span, and each
 * line is a single flex row that itself is never allowed to wrap (nowrap
 * + no shrinking), so it always renders complete rather than breaking
 * mid-phrase. The two lines are auto-width (not forced full-width), so on
 * a card with room (desktop) they sit side by side as ONE single line;
 * `.has-offer`'s own flex-wrap only drops line 2 onto its own row when
 * the card is too narrow to fit both together (mobile), rather than
 * always stacking them on a fixed breakpoint. column-gap is tightened to
 * 4px (matching each line's own internal word-gap) so the join between
 * "Pay for" and "200g" reads as one evenly-spaced line rather than a
 * visibly bigger gap than the rest of the phrase.
 */
.woocommerce ul.products.wnb-proposed-grid .wnb-tile-weight-row.has-offer,
.wnb-tile-weight-row.has-offer {
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 3px !important;
  column-gap: 4px !important;
}

.wnb-tile-weight-line1,
.wnb-tile-weight-line2 {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.wnb-tile-bag-icon { color: #2f8f4e !important; }
.wnb-tile-regular-weight { color: #172033 !important; }
.wnb-tile-arrow { color: #ff5a00 !important; }
.wnb-tile-pay-copy { color: #667085 !important; }
.wnb-tile-pay-weight {
  color: #ff5a00 !important;
  font-weight: 800 !important;
}

.wnb-tile-rate,
.wnb-tile-rate .woocommerce-Price-amount {
  color: #2f8f4e !important;
  font-weight: 800 !important;
}

.woocommerce ul.products.wnb-proposed-grid li.product.wnb-assorted-sale-only {
  border-color: rgba(255, 106, 0, .72);
}

.wnb-assorted-sale-row {
  display: flex !important;
  min-height: 58px;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.wnb-assorted-sale-badge {
  position: static !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content;
  min-height: 22px;
  margin: 0 auto !important;
  padding: 4px 8px;
  border: 1px solid var(--wnb-orange);
  border-radius: 5px;
  background: #fff7f0;
  color: var(--wnb-orange-dark);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
}

.wnb-promotion-badge {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 7;
  max-width: calc(100% - 22px);
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--wnb-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.wnb-product-card-rating {
  margin-top: 6px;
  min-height: 16px;
  font-size: 12px;
}

.wnb-product-card-rating .star-rating {
  color: var(--wnb-orange);
}

/* Mobile cards: preserve all four information lines, contain line 4 safely. */
@media (max-width: 560px) {
  .woocommerce ul.products.wnb-proposed-grid li.product,
  .woocommerce ul.products.wnb-proposed-grid .wnb-product-card,
  .woocommerce ul.products.wnb-proposed-grid .wnb-product-card-body,
  .woocommerce ul.products.wnb-proposed-grid .wnb-tile-pricing {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce ul.products.wnb-proposed-grid .wnb-product-card {
    overflow: hidden !important;
  }

  .woocommerce ul.products.wnb-proposed-grid .wnb-tile-weight-row {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 2px 4px !important;
    padding: 7px 7px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  .wnb-tile-weight-row > * {
    max-width: 100%;
  }

  .wnb-tile-rate {
    white-space: nowrap !important;
  }

  /*
   * When line 2 ("200g . GBP35/kg") wraps onto its own row under line 1
   * on a narrow card, center it in the leftover space instead of leaving
   * it flush left -- auto margins on a flex item are resolved per wrapped
   * line, so this only takes effect once line 2 has actually dropped to
   * its own row (on a wide card where both lines still fit together,
   * this has no visible effect since there's no leftover space on that
   * shared line to distribute).
   */
  .wnb-tile-weight-row.has-offer .wnb-tile-weight-line2 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   05. MOBILE FILTER DRAWER
   -------------------------------------------------------------------------- */
.wnb-filter-mobile-head,
.wnb-filter-mobile-actions {
  display: none;
}

@media (max-width: 900px) {
  html.wnb-filter-drawer-open,
  html.wnb-filter-drawer-open body {
    overflow: hidden !important;
  }

  .wnb-filter-sidebar[data-filters-panel] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 0 14px calc(88px + env(safe-area-inset-bottom)) !important;
    background: #fffaf6 !important;
    transform: translateX(-102%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility .22s ease;
  }

  .wnb-filter-sidebar[data-filters-panel].is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .wnb-filter-mobile-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    min-height: 58px;
    margin: 0 -14px 12px;
    padding: 0 10px;
    border-bottom: 1px solid #eedfd4;
    background: var(--wnb-warm-bg);
  }

  .wnb-filter-mobile-head strong {
    text-align: center;
    color: var(--wnb-text);
    font-size: 15px;
  }

  .wnb-filter-back,
  .wnb-filter-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wnb-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .wnb-filter-heading {
    display: none !important;
  }

  .wnb-filter-mobile-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid !important;
    grid-template-columns: minmax(110px, .75fr) minmax(0, 1.5fr);
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #eadbd0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(23, 32, 51, .08);
  }

  .wnb-filter-clear-mobile,
  .wnb-filter-show-products {
    min-height: 44px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
  }

  .wnb-filter-clear-mobile {
    border: 1px solid #d9dde4;
    background: #fff;
    color: var(--wnb-text);
  }

  .wnb-filter-show-products {
    border: 1px solid var(--wnb-orange);
    background: var(--wnb-orange);
    color: #fff;
  }
}

/* --------------------------------------------------------------------------
   06. SINGLE PRODUCT / PDP
   -------------------------------------------------------------------------- */
.single-product .container-page1 {
  padding-top: 16px;
  padding-bottom: 30px;
}

.single-product .summary.entry-summary > * + * {
  margin-top: 10px;
}

.single-product .summary.entry-summary form.cart {
  margin-top: 16px !important;
}

/* =========================================================
   PRODUCT DETAIL — APPROVED ORANGE + GREEN COLOUR COMBINATION
   ========================================================= */

/* Main green pricing strip */
.single-product .wnb-single-weight-pricing {
  background: #f1f8f1 !important;
  border-color: #d7ead8 !important;
  color: #667085 !important;
}

/* Bag icon */
.single-product .wnb-single-weight-pricing .wnb-tile-bag-icon {
  color: #2f8f4e !important;
}

/* Actual weight */
.single-product .wnb-single-weight-pricing .wnb-tile-regular-weight {
  color: #172033 !important;
  font-weight: 800 !important;
}

/* Arrow */
.single-product .wnb-single-weight-pricing .wnb-tile-arrow {
  color: #ff5a00 !important;
  font-weight: 700 !important;
}

/* "Pay for" */
.single-product .wnb-single-weight-pricing .wnb-tile-pay-copy {
  color: #667085 !important;
}

/* Pay weight */
.single-product .wnb-single-weight-pricing .wnb-tile-pay-weight {
  color: #ff5a00 !important;
  font-weight: 800 !important;
}

/* £35/kg */
.single-product .wnb-single-weight-pricing .wnb-tile-rate,
.single-product .wnb-single-weight-pricing .wnb-tile-rate .woocommerce-Price-amount {
  color: #2f8f4e !important;
  font-weight: 800 !important;
}

.wnb-product-tabs {
  margin-top: 34px !important;
}

.single-product .related.products {
  margin-top: 38px !important;
}

.wnb-size-guide-link {
  display: inline-flex;
  margin-top: 2px;
  color: var(--wnb-orange-dark) !important;
  font-size: 11px;
  font-weight: 700;
}

.wnb-purchase-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

.wnb-purchase-qty {
  flex: 0 0 auto;
  min-height: 44px;
}

.wnb-purchase-add {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
}

.wnb-purchase-wishlist {
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px;
}

.single-product .wnb-purchase-wishlist .wnb-wishlist-label {
  display: none !important;
}

.single_add_to_cart_button:disabled,
.single_add_to_cart_button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
}

.single_add_to_cart_button:not(:disabled) {
  background: var(--wnb-orange) !important;
  border-color: var(--wnb-orange) !important;
}

.single_add_to_cart_button[data-cart-added="1"] {
  background: var(--wnb-ink) !important;
  border-color: var(--wnb-ink) !important;
}

.wnb-stock-note {
  margin: 7px 0 0;
}

.wnb-assorted-sale-notice {
  width: fit-content;
  max-width: 620px;
  margin: 14px 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 106, 0, .45);
  border-radius: 10px;
  background: #fff7f2;
  color: var(--wnb-ink);
}

.wnb-assorted-sale-notice strong {
  display: block;
  color: var(--wnb-orange-dark);
  font-size: 13px;
}

.wnb-assorted-sale-notice p {
  margin: 5px 0 0;
  color: #526071;
  font-size: 12px;
  line-height: 1.55;
}

.wnb-cart-inline-message {
  margin: 8px 0 0;
  color: #9f2d20;
  font-size: 14.4px;
  font-weight: 650;
}

.wnb-cart-inline-message.is-success {
  color: var(--wnb-green-strong);
}

/* Mobile PDP: contain every element and keep purchase controls usable. */
@media (max-width: 767px) {
  .single-product [data-product-page],
  .single-product .container-page1,
  .single-product div.product,
  .single-product .summary.entry-summary,
  .single-product .wnb-product-gallery,
  .single-product form.cart,
  .single-product .variations_form,
  .single-product .single_variation_wrap,
  .single-product .woocommerce-variation-add-to-cart {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .single-product [data-product-page] {
    overflow-x: hidden !important;
  }

  .single-product .container-page1 {
    padding-top: 10px;
  }

  .single-product div.product {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .single-product .woocommerce-product-gallery,
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .woocommerce-product-gallery__image,
  .single-product .woocommerce-product-gallery__image a,
  .single-product .woocommerce-product-gallery__image img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .single-product .summary.entry-summary {
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  .single-product .product_title {
    margin-bottom: 8px !important;
    font-size: clamp(24px, 6.4vw, 32px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  .single-product .price {
    margin-bottom: 10px !important;
  }

  .single-product .wnb-single-weight-pricing {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 10px !important;
  }

  .single-product .wnb-single-weight-line {
    gap: 4px 6px !important;
    font-size: 19px;
  }

  .single-product [data-wnb-pill-group] {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
    gap: 7px !important;
  }

  .single-product [data-wnb-pill-option] {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .single-product .wnb-purchase-row {
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) 42px !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .single-product .wnb-purchase-qty {
    display: grid !important;
    grid-template-columns: 32px 30px 32px;
    align-items: center;
    min-width: 0 !important;
  }

  .single-product .wnb-purchase-qty button {
    width: 32px !important;
    min-width: 32px !important;
    height: 44px !important;
    padding: 8px !important;
  }

  .single-product .wnb-purchase-qty .qty {
    width: 30px !important;
    min-width: 30px !important;
    height: 44px !important;
    padding-inline: 0 !important;
  }

  .single-product .wnb-purchase-add {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding-inline: 8px !important;
    font-size: 14.4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-product .wnb-purchase-wishlist {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 44px !important;
    overflow: hidden;
  }

  .wnb-product-tabs {
    margin-top: 26px !important;
  }
}

@media (max-width: 359px) {
  .single-product .wnb-purchase-row {
    grid-template-columns: 90px minmax(0, 1fr) 38px !important;
    gap: 4px !important;
  }

  .single-product .wnb-purchase-qty {
    grid-template-columns: 30px 30px 30px;
  }

  .single-product .wnb-purchase-qty button {
    width: 30px !important;
    min-width: 30px !important;
  }

  .single-product .wnb-purchase-wishlist {
    width: 38px !important;
    min-width: 38px !important;
  }

  .single-product .wnb-purchase-add {
    font-size: 13.2px !important;
  }
}

/* --------------------------------------------------------------------------
   07. CART / 1KG MINIMUM
   -------------------------------------------------------------------------- */
.wnb-progress-checkout {
  transition: opacity .18s ease, background .18s ease;
}

.wnb-progress-checkout[disabled] {
  background: #d7dce4 !important;
  border-color: #d7dce4 !important;
  color: #667085 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.wnb-progress-fill {
  background: var(--wnb-orange) !important;
}

.wnb-product-variation {
  margin-top: 4px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.wnb-product-variation dl,
.wnb-product-variation p {
  margin: 0;
}

.wnb-product-variation dt,
.wnb-product-variation dd {
  display: inline;
  margin: 0;
}

.wnb-product-variation dt::after { content: ": "; }
.wnb-product-variation dd + dt::before { content: " · "; }

/* --------------------------------------------------------------------------
   08. ACCOUNT / REGISTRATION
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
  max-width: 1180px;
  margin-inline: auto;
  padding-top: 12px !important;
}

.woocommerce-account .form-fieldset {
  width: 100%;
}

.woocommerce-account .form-input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
}

/* Compact registration privacy notice */
.woocommerce-account .wnb-registration-privacy,
.woocommerce-account .woocommerce-privacy-policy-text {
  display: block !important;
  margin-top: 10px !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.woocommerce-account .wnb-registration-privacy a,
.woocommerce-account .woocommerce-privacy-policy-text a {
  color: #c94e00 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Reduce unnecessary vertical space on My Account / registration pages */
.woocommerce-account main#main-content {
  padding-top: 24px !important;
}

.woocommerce-account .wnb-account-auth,
.woocommerce-account .wnb-auth-shell,
.woocommerce-account .wnb-account-login {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  .woocommerce-account main#main-content {
    padding-top: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   09. FOOTER / SOCIAL ICONS
   -------------------------------------------------------------------------- */
.wnb-footer-utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 7px;
}

.wnb-footer-utility-links a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
}

.wnb-footer-utility-links a:hover,
.wnb-footer-utility-links a:focus-visible {
  color: var(--wnb-orange);
  outline: none;
}

.wnb-social-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   10. COOKIE CONSENT
   -------------------------------------------------------------------------- */
.wnb-cookie-banner[hidden] {
  display: none !important;
}

.wnb-cookie-banner {
  position: fixed;
  inset: auto 18px 18px 18px;
  z-index: 100000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.wnb-cookie-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(920px, 100%);
  gap: 22px;
  padding: 17px 18px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 45px rgba(7, 24, 47, .16);
  pointer-events: auto;
}

.wnb-cookie-banner h2 {
  margin: 0 0 4px;
  color: var(--wnb-ink);
  font-size: 15px;
  font-weight: 800;
}

.wnb-cookie-banner p {
  margin: 0;
  max-width: 640px;
  color: #5b6677;
  font-size: 11px;
  line-height: 1.55;
}

.wnb-cookie-banner p a {
  color: var(--wnb-orange-dark);
  font-weight: 700;
  text-decoration: underline;
}

.wnb-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.wnb-cookie-banner__actions button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.wnb-cookie-reject {
  border: 1px solid var(--wnb-orange);
  background: #fff;
  color: var(--wnb-orange-dark);
}

.wnb-cookie-accept {
  border: 1px solid var(--wnb-orange);
  background: var(--wnb-orange);
  color: #fff;
}

@media (max-width: 640px) {
  .wnb-cookie-banner {
    inset: auto 10px calc(72px + env(safe-area-inset-bottom)) 10px;
  }

  .wnb-cookie-banner__content {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .wnb-cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* PDP only — hide duplicate WooCommerce "View cart" link */
.single-product .added_to_cart.wc-forward {
    display: none !important;
}

/* =========================================================
   PDP PRICE — FINAL UK RETAIL STYLE
   £19   Was £23
   Current price left / old price right with strike-through
   ========================================================= */

.single-product .summary .price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 8px 0 14px !important;
}


/* ---------- CURRENT PRICE — LEFT ---------- */

.single-product .summary .price ins {
    order: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.single-product .summary .price ins .woocommerce-Price-amount,
.single-product .summary .price ins bdi {
    color: #d94f00 !important;
    font-size: 33.6px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}


/* ---------- OLD PRICE — RIGHT ---------- */

.single-product .summary .price del {
    order: 2 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;

    color: #8a9099 !important;
    font-size: 14.4px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    /* Important: don't strike through "Was" */
    text-decoration: none !important;
}


/* Add "Was" before old price */

.single-product .summary .price del::before {
    content: "Was ";
    margin-right: 3px;
    text-decoration: none !important;
}


/* Strike through ONLY the old price amount */

.single-product .summary .price del .woocommerce-Price-amount,
.single-product .summary .price del bdi {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
}

/* =========================================================
   MOBILE CART BANNER — FINAL CLEAN SENTENCE STYLE
   Desktop unchanged
   ========================================================= */

@media (max-width: 639px) {

    .wnb-cart-banner {
        align-items: center !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    body.home{padding-top: 10px;}
    body {padding-top: 74px;}

    /* Bag icon */
    .wnb-cart-banner-icon {
        flex: 0 0 auto !important;
        align-self: center !important;
    }

    /* Banner text — flows naturally as one sentence */
    .wnb-cart-banner-text {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }

    /* Keep all parts flowing inline */
    .wnb-cart-banner-text > span,
    .wnb-cart-banner-text > strong {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: inherit !important;
    }

    /* £35/kg — subtle emphasis, not too bold */
    .wnb-cart-banner-text > strong {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    /* Separator dots */
    .wnb-cart-banner-text .wnb-banner-dot {
        display: inline !important;
        margin: 0 3px !important;
        padding: 0 !important;
        font-size: 10px !important;
        font-weight: 400 !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE SHOP — FILTER + SORT BUTTONS ONLY
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  [data-filters-toggle],
  [data-sort-toggle] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 42px !important;
    padding: 0 14px !important;

    border: 1px solid #e1e6ed !important;
    border-radius: 8px !important;
    background: #f5f6f7 !important;

    color: #172033 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow: none !important;
  }

  [data-filters-toggle] svg,
  [data-sort-toggle] svg {
    width: 16px !important;
    height: 16px !important;
  }

  [data-filters-toggle]:active,
  [data-sort-toggle]:active {
    background: #eceff2 !important;
  }
}
/* --------------------------------------------------------------------------
   14. MOBILE BOTTOM NAV — FIXED / STABLE
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  [data-mobile-nav] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: flex !important;
    min-height: 58px !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9998 !important;
  }

  [data-mobile-nav] > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* Dependent catalogue options hidden when their parent Category is inactive. */
[data-style-parent][hidden],
[data-filter-group][hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   15. COMPACT CHECKOUT / ADDRESS FORM
   -------------------------------------------------------------------------- */
[data-checkout-page] .form-fieldset {
  border-radius: 12px !important;
  padding: 15px !important;
}

[data-checkout-page] #customer_details .woocommerce-billing-fields__field-wrapper,
[data-checkout-page] #customer_details .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px 12px !important;
}

[data-checkout-page] #customer_details .form-row {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 1 / -1;
}

/*
 * QA found the desktop checkout's billing/shipping fields visually
 * misaligned -- "Email address" side-by-side with "First name", then
 * "Last name" alone with a blank gap beside it. Root cause: this list
 * originally assumed WooCommerce's default field order (First, Last,
 * ... City, Postcode, Phone, Email last), pairing each of these fields
 * with whichever neighbour also got 'grid-column: auto'. But this
 * checkout moves Email to the very FIRST field (for the Stripe email
 * autofill integration -- see its "stripe-gateway-checkout-email-field"
 * class), which put it immediately before First name with nothing to
 * its own left -- so the two paired up with each other instead, and
 * Last name (still 'auto') was left pairing with nothing, since County
 * sits between it and the next 'auto' field. Removed email/phone/city/
 * postcode from this list: First+Last is the only pairing that stays
 * genuinely adjacent regardless of any plugin reordering the other
 * fields, so it's the only one still safe to keep side-by-side --
 * everything else now gets its own full-width row from the default
 * 'grid-column: 1 / -1' above, so there is no gap it can fall into.
 */
[data-checkout-page] #billing_first_name_field,
[data-checkout-page] #billing_last_name_field,
[data-checkout-page] #shipping_first_name_field,
[data-checkout-page] #shipping_last_name_field {
  grid-column: auto !important;
}

[data-checkout-page] #customer_details label,
[data-checkout-page] #customer_details .form-label {
  display: block;
  margin: 0 0 4px !important;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

[data-checkout-page] #customer_details input.input-text,
[data-checkout-page] #customer_details input[type="text"],
[data-checkout-page] #customer_details input[type="email"],
[data-checkout-page] #customer_details input[type="tel"],
[data-checkout-page] #customer_details select,
[data-checkout-page] #customer_details .select2-selection--single {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

[data-checkout-page] #customer_details textarea {
  min-height: 68px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

[data-checkout-page] #customer_details .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
}

[data-checkout-page] #customer_details .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

[data-checkout-page] #ship-to-different-address {
  margin: 0 !important;
  padding: 0 !important;
}

[data-checkout-page] #ship-to-different-address label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 650 !important;
}

[data-checkout-page] #ship-to-different-address-checkbox {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
}

[data-checkout-page] .shipping_address {
  margin-top: 12px !important;
}

[data-checkout-page] .wnb-checkout-summary dt,
[data-checkout-page] .wnb-checkout-summary dd {
  margin: 0 !important;
}

@media (max-width: 639px) {
  [data-checkout-page] .form-fieldset {
    padding: 13px !important;
  }

  [data-checkout-page] #customer_details .woocommerce-billing-fields__field-wrapper,
  [data-checkout-page] #customer_details .woocommerce-shipping-fields__field-wrapper {
    gap: 9px !important;
  }

  [data-checkout-page] #customer_details .form-row,
  [data-checkout-page] #billing_first_name_field,
  [data-checkout-page] #billing_last_name_field,
  [data-checkout-page] #billing_email_field,
  [data-checkout-page] #billing_phone_field,
  [data-checkout-page] #billing_city_field,
  [data-checkout-page] #billing_postcode_field,
  [data-checkout-page] #shipping_first_name_field,
  [data-checkout-page] #shipping_last_name_field,
  [data-checkout-page] #shipping_city_field,
  [data-checkout-page] #shipping_postcode_field {
    grid-column: 1 / -1 !important;
  }
}


/* ==========================================================================
   V3.7.2 — MOBILE FILTER DRAWER / BOTTOM NAV HOTFIX
   ========================================================================== */

@media (max-width: 639px) {
  :root {
    --wnb-mobile-nav-h: calc(64px + env(safe-area-inset-bottom));
    --wnb-filter-actions-h: 66px;
  }

  .wnb-filter-sidebar[data-filters-panel] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: var(--wnb-mobile-nav-h) !important;
    left: 0 !important;
    height: auto !important;
    max-height: none !important;
    z-index: 9990 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;

    padding: 0 14px calc(var(--wnb-filter-actions-h) + 26px) !important;
  }

  .wnb-filter-mobile-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 9994 !important;
    margin: 0 -14px 12px !important;
  }

  .wnb-filter-mobile-actions {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 0 !important;
    z-index: 9995 !important;
    width: auto !important;
    margin: 0 -14px calc(-1 * (var(--wnb-filter-actions-h) + 26px)) !important;
    min-height: var(--wnb-filter-actions-h) !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  [data-mobile-nav] {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9998 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* --------------------------------------------------------------------------
   06. MOBILE FILTER ACTIONS -- MOVED ABOVE "CATEGORY" (was pinned to the
   bottom of the drawer). By request, archive-product.php now renders the
   "Clear all" / "Show N products" bar right after the FILTERS heading,
   before the Category section, instead of after every filter group. The
   two rules above this one (max-width:900px and max-width:639px) were
   written back when this bar always lived at the bottom, and deliberately
   pin it there with position:fixed/sticky + bottom:0 -- CSS positioning
   like that overrides normal document order, so moving the markup alone
   wasn't enough. This override undoes that pinning (appended last, so it
   wins the cascade over the earlier !important rules) so the bar now
   just sits in normal flow exactly where the markup places it.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .wnb-filter-mobile-actions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 0 16px !important;
    box-shadow: none !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eadbd0;
    background: transparent !important;
  }

  /*
   * Both blocks above reserved extra bottom padding on the drawer itself
   * (88px, or var(--wnb-filter-actions-h) + 26px on very small phones) so
   * the last filter section never sat underneath the sticky bar. With the
   * bar no longer floating over the bottom, that reserved space would
   * just be a large empty gap after the last filter -- shrink it back to
   * an ordinary bit of breathing room instead.
   */
  .wnb-filter-sidebar[data-filters-panel] {
    padding-bottom: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   07. MY ACCOUNT NAV TABS -- COMPACT ON MOBILE
   -------------------------------------------------------------------------- */
/*
 * woocommerce/myaccount/navigation.php renders these tabs with the same
 * px-3 py-2.5 text-sm Tailwind classes at every viewport width -- fine on
 * desktop where they sit in a single column, but on mobile (a horizontally
 * scrolling row, per that template's `flex gap-2 overflow-x-auto`) that
 * padding/font-size makes each tab noticeably oversized against everything
 * else on the page. Shrinks padding, font-size and the gap between tabs
 * specifically on narrow screens; desktop is untouched.
 */
@media (max-width: 767px) {
  .woocommerce-MyAccount-navigation {
    gap: 6px !important;
  }

  .woocommerce-MyAccount-navigation a {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }
}

/*
 * Same tab row, mobile only: group it as one visible pill-strip (a soft
 * grey track behind the individual black/white pills) instead of the
 * links floating loose directly on the page background, and fade the
 * right edge out so it's visually obvious the row scrolls instead of
 * looking like it's simply cut off mid-tab. -webkit-overflow-scrolling
 * keeps the scroll itself feeling native on iOS.
 */
@media (max-width: 767px) {
  .woocommerce-MyAccount-navigation {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 6px !important;
    border-radius: 14px !important;
    background: #f4f5f7 !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%) !important;
  }

  .woocommerce-MyAccount-navigation a {
    border-radius: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   08. CHECKOUT PAYMENT ROW -- STOP HORIZONTAL PAGE SCROLL ON MOBILE
   -------------------------------------------------------------------------- */
/*
 * woocommerce/checkout/payment-method.php and woocommerce/cart/cart-shipping.php
 * add `gap-x-2` / `[&_img]:max-w-full` (plus flex-wrap/min-w-0, which ARE
 * already in the compiled Tailwind build) to the payment/delivery method
 * rows -- but this theme's Tailwind CSS is a pre-built static file, not a
 * live compiler, so any class combination that wasn't already present
 * somewhere in the source at build time silently does nothing. gap-x-2
 * and the [&_img] arbitrary-variant selector fell into that gap. Without
 * them, a gateway whose get_icon() returns a promo link plus several
 * card-brand images (Revolut Pay's "New users get up to £20" + Revolut/
 * VISA/Mastercard icons, seen live) had nothing forcing it to wrap or
 * shrink on a narrow phone screen, so the row -- and with it the whole
 * checkout page -- scrolled horizontally instead of wrapping onto a
 * second line.
 */
.wc_payment_method > label {
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.wc_payment_method > label > span {
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

.wc_payment_method > label img {
  max-width: 100%;
  height: auto;
}