/*
 * CWFD UI Consistency. Brings pages that drifted back onto the house tokens set in
 * the child theme (CWFD TYPE SYSTEM): one heading colour, one type scale for page
 * and section titles, pill buttons, and readable product cards.
 * Oct 2026 audit (375px): five different navies on headings (#0e2a52, #0a3763,
 * #003e7d, #143050, #0b2d4d), page titles at 30-34px in weights 500-800, buttons
 * with 3px, 10px, 12px and pill corners, and 6.6px category text on product cards.
 */

/* 1. Page titles: one size, weight and colour on About, FAQ and the landing pages. */
body .cwfd-about-hero__title,
body .cwfd-faq-design .cwfd-faq-hero h2,
body .cwfd-lp .cwfd-lp-title{
  color: var(--cwfd-heading, #0e2a52) !important;
  font-family: var(--cwfd-font-headings, "Newsreader", Georgia, serif) !important;
  font-size: var(--cwfd-fs-3xl, clamp(30px, 2.8vw + 21px, 52px)) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
}

/* 2. Section titles: one size and colour. */
body .cwfd-about-section-title h2,
body .cwfd-faq-design .cwfd-faq-section-title,
body .cwfd-lp > h2{
  color: var(--cwfd-heading, #0e2a52) !important;
  font-family: var(--cwfd-font-headings, "Newsreader", Georgia, serif) !important;
  font-size: var(--cwfd-fs-h2, clamp(23px, 1.6vw + 16px, 36px)) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* 3. Smaller headings and the product title: same navy. */
body .cwfd-about-milestone h3,
body.woocommerce-account .account-sub-title,
body .cwfd-faq-design .cwfd-faq-toggle .vc_toggle_title h4,
body .single-product .product_title,
body.single-product .product_title,
body .cwfd-gc-title,
body .cwfd-lp-faq summary,
body .cwfd-lp strong{
  color: var(--cwfd-heading, #0e2a52) !important;
}
body.woocommerce-account .account-sub-title{ font-weight: 600 !important; }

/* 4. Buttons: pill corners and a 48px tap height, like the rest of the site.
      WPForms styles its button through its own variables, so set those too. */
body .wpforms-container{
  --wpforms-button-border-radius: 999px;
  --wpforms-button-background-color: var(--cwfd-blue, #003e7d);
  --wpforms-button-background-color-alt: var(--cwfd-blue, #003e7d);
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-size-height: 48px;
}
html body div.wpforms-container-full .wpforms-form button.wpforms-submit,
html body div.wpforms-container .wpforms-form button[type="submit"]{
  min-height: 48px !important;
  padding: 14px 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cwfd-blue, #003e7d) !important;
  color: #fff !important;
  font-family: var(--cwfd-font, "Plus Jakarta Sans", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
html body div.wpforms-container-full .wpforms-form button.wpforms-submit:hover,
html body div.wpforms-container-full .wpforms-form button.wpforms-submit:focus{
  background: var(--cwfd-blue-dark, #00254c) !important;
}

html body.woocommerce-account #customer_login form.woocommerce-form button.button,
html body.woocommerce-account #customer_login form.woocommerce-form button.woocommerce-Button,
html body.woocommerce-account .woocommerce form.woocommerce-form button.woocommerce-Button.button,
html body.woocommerce-account .woocommerce form.woocommerce-form button.cwfd-otp-verify-btn{
  min-height: 48px !important;
  border-radius: 999px !important;
}

/* 5. Product cards: the category line rendered at 6.6px. Readable on desktop,
      hidden on phones where the card has no room for it. */
body ul.products .product-content .category-list,
body ul.products .product-content .category-list a{
  font-size: 12px !important;
  line-height: 1.4 !important;
}
@media (max-width: 575px){
  body ul.products .product-content .category-list{ display: none !important; }
}

/* 6. Phones, logged-out visitors: two products per row instead of one (as on
      Woolworths), so browsing the range takes half the scrolling. Logged-in
      trade customers keep the one-column card with its quantity controls. */
@media (max-width: 575px){
  html body.b2bking_logged_out ul.products.products-container.ccols-1{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }
  html body.b2bking_logged_out ul.products.products-container.ccols-1 > li.product-col{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html body.b2bking_logged_out ul.products.products-container.ccols-1 li.product-col .woocommerce-loop-product__title{
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  html body.b2bking_logged_out ul.products.products-container.ccols-1 li.product-col .price{
    font-size: 13px !important;
  }
}

/* 7. Phones, shop and category pages: the banner and the filter box pushed the
      first product below the bottom of the screen (894px down on an 812px phone).
      Shorter banner, and the filters on one row like Woolworths' filter chips. */
@media (max-width: 767px){
  body .cwfd-premium-banner{
    padding: 16px 18px !important;
    margin-bottom: 10px !important;
  }
  body .cwfd-premium-banner p{ display: none !important; }

  body form.cwfd-filter-bar{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-bottom: 14px !important;
  }
  body form.cwfd-filter-bar .cwfd-filter-bar__title,
  body form.cwfd-filter-bar .cwfd-filter-reset,
  body form.cwfd-filter-bar label:nth-of-type(3){ display: none !important; }
  body form.cwfd-filter-bar label{ margin: 0 !important; min-width: 0 !important; }
  /* The field names stay for screen readers; the selects already read "All Categories" / "All Brands". */
  body form.cwfd-filter-bar label > span{
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
  }
  body form.cwfd-filter-bar select{
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  body form.cwfd-filter-bar button[type="submit"]{
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
  }
}

/* ==========================================================================
   1.1.0: one type scale and one colour set, the way Woolworths keeps to a few
   sizes and colours. Oct 2026 audit (11 pages, 375px): 24 text sizes and about
   40 text colours in page content. The scale below uses the theme's own tokens.
     12px   labels, eyebrows, badges
     14px   small text: form labels, help text, card titles, meta
     15-16  body text (--cwfd-fs-base)
     18-22  card and sub headings (--cwfd-fs-lg)
     23-36  section titles (--cwfd-fs-h2), 30-52 page titles (--cwfd-fs-3xl)
   Colours: headings #0e2a52, body #334155, secondary #64748b, links #003e7d.
   White text on dark bands is left alone.
   ========================================================================== */

/* 8. Labels, eyebrows and badges: 12px (were 10-11.5px). */
body .cwfd-eyebrow,
body .bp-eyebrow,
body .cwfd-about-eyebrow,
body .cwfd-premium-banner__eyebrow,
body .cwfd-lp-kicker,
body .cwfd-faq-design .cwfd-faq-kicker,
body .cwfd-cbr__label{
  font-size: 12px !important;
  letter-spacing: .1em !important;
}
body .cwfd-badge,
body .cwfd-milk-promo__badge,
body ul.products .onsale,
body ul.products .stock{
  font-size: 12px !important;
}

/* 9. Small text: 14px (were 12.5, 13, 13.5 and 14.5px). */
body ul.products li.product-col .woocommerce-loop-product__title{
  font-size: clamp(14px, .2vw + 13.3px, 15px) !important;
  line-height: 1.35 !important;
}
body.woocommerce-account .woocommerce-form label,
body .cwfd-auth-switch,
body .cwfd-auth-switch a,
body .cwfd-gc-text,
body .cwfd-gc-help,
body .cwfd-gc-help strong,
body .bp-stat,
body .cwfd-about-stat,
body .cwfd-shortcut__label,
body form.cwfd-filter-bar button[type="submit"]{
  font-size: 14px !important;
}

/* 10. Body text and FAQ questions: the base size (were 15-16.5px). */
body .cwfd-faq-design .vc_toggle_title label,
body .cwfd-faq-design .vc_toggle_title h4,
body .woocommerce-tabs h2.resp-accordion{
  font-size: var(--cwfd-fs-base, 16px) !important;
  font-weight: 700 !important;
}

/* 11. Card and sub headings: one size (were 15.5, 18.5, 22 and 23px). */
body .cwfd-about-milestone h3,
body .cwfd-about-card h3,
body .cwfd-gc-title,
body .cwfd-cbr__date{
  font-size: var(--cwfd-fs-lg, 20px) !important;
  line-height: 1.25 !important;
}

/* 12. Section titles everywhere: the theme's h2 size (were 21.5, 22 and 23px). */
body .cwfd-section-title h2,
body .cwfd-cbr > h2,
body .cwfd-lp-band h2,
body .cwfd-faq-design .cwfd-faq-contact h2{
  font-size: var(--cwfd-fs-h2, clamp(23px, 1.6vw + 16px, 36px)) !important;
  line-height: 1.2 !important;
}
body .cwfd-section-title h2,
body .cwfd-cbr > h2{
  color: var(--cwfd-heading, #0e2a52) !important;
}

/* 13. Body text colour: #334155 (were #1f2937, #222529, #4a6076, #526174,
       #5b6675, #5b6b7a and rgba(0,0,0,.85)). */
body .cwfd-lp > p,
body .cwfd-lp > ul li,
body .cwfd-lp > ol li,
body .cwfd-lp-faq details p,
body .cwfd-about-intro,
body .cwfd-about-hero__lead,
body .cwfd-about-list li,
body .cwfd-gc-text,
body .cwfd-sub,
body .cwfd-cbr,
body .cwfd-faq-design .vc_toggle_content,
body .wpforms-container .wpforms-field-label,
body.woocommerce-account .woocommerce-form label,
body .woocommerce-LostPassword a{
  color: #334155 !important;
}

/* 14. Secondary text: #64748b (were #5d6d80, #697587, #6b7f94, #7a8699,
       #8a8b8e, #9aa7b8 and rgba(0,0,0,.55)). */
body .cwfd-lp-intro,
body .cwfd-faq-design .cwfd-faq-hero p:last-child,
body .cwfd-gc-help,
body .wpforms-container .wpforms-field-description,
body.woocommerce-account .woocommerce-form small,
body .cwfd-rfc-attr{
  color: #64748b !important;
}

/* 15. Links in page text: brand blue #003e7d (were #0070f3, #145da0, #205294). */
body .cwfd-lp > p a,
body .cwfd-lp > ul a,
body .cwfd-lp > ol a,
body .cwfd-lp-faq details p a,
body .cwfd-cbr > p a,
body .cwfd-cbr li a,
body .cwfd-faq-design .vc_toggle_content a,
body .cwfd-register-price-link{
  color: var(--cwfd-blue, #003e7d) !important;
}

/* 16. Remaining heading navies: #0e2a52 (were #0a3763, #10264a, #1d3557, #222529). */
body .cwfd-about-year,
body .cwfd-faq-design .vc_toggle_title label,
body .woocommerce-tabs h2.resp-accordion,
body .cwfd-cbr__date,
body .cwfd-cbr__faq summary{
  color: var(--cwfd-heading, #0e2a52) !important;
}

/* 17. Components the first pass missed (found by re-measuring). */
/* Registration and login field labels: 14px body colour (were 13px). */
body .b2bking_custom_registration_container label,
body.woocommerce-account .woocommerce-form label.mb-1{
  font-size: 14px !important;
  color: #334155 !important;
}
/* FAQ page questions: base size, heading navy (were 16.5px #1d3557). */
body section.vc_do_toggle label,
body section.vc_do_toggle .vc_toggle_title h4{
  font-size: var(--cwfd-fs-base, 16px) !important;
  font-weight: 700 !important;
  color: var(--cwfd-heading, #0e2a52) !important;
}
/* Contact form labels and help text (WPForms' own selectors are more specific). */
html body div.wpforms-container-full .wpforms-form .wpforms-field-label{
  color: #334155 !important;
}
html body div.wpforms-container-full .wpforms-form .wpforms-field-description{
  color: #64748b !important;
}
/* About page: body text, headings, links and the eyebrow on the house colours. */
body .cwfd-about-milestone p,
body .cwfd-about-card p{
  color: #334155 !important;
}
body .cwfd-about-stat{
  color: #64748b !important;
}
body .cwfd-about-card h3,
body .cwfd-about-milestone h3,
body .cwfd-about-year,
body .cwfd-about-stat strong,
body .cwfd-about-eyebrow,
body .cwfd-about-journey-link a,
body .cwfd-about-contact-line a{
  color: var(--cwfd-heading, #0e2a52) !important;
}
/* Canberra page text and category links. */
body .cwfd-cbr > p:not(.cwfd-cbr__lede):not(.cwfd-cbr__first),
body .cwfd-cbr li,
body .cwfd-cbr li strong,
body .cwfd-cbr__faq p{
  color: #334155 !important;
}
body .cwfd-cbr__cats a,
body .cwfd-cbr__first a,
body .cwfd-cbr__run a{
  color: var(--cwfd-blue, #003e7d) !important;
}
/* Product page guest card and shortcuts. */
body .cwfd-gc-benefits span,
body .cwfd-shortcut__label{
  color: var(--cwfd-heading, #0e2a52) !important;
}
/* Home section buttons: 14px (were 13.5px). */
body .cwfd-section-head .cwfd-btn,
body .cwfd-section-head .cwfd-btn span{
  font-size: 14px !important;
}

/* 18. Last one-offs from the re-measure. */
/* Product page description text and its bold lines. */
body.single-product .summary .description p,
body.single-product .summary .description li p,
body.single-product .summary .description span{
  color: #334155 !important;
}
body.single-product .summary .description strong{
  color: var(--cwfd-heading, #0e2a52) !important;
}
/* Product cards outside the shop grid (home page carousels): same title size. */
body .product-loop-title h3.woocommerce-loop-product__title{
  font-size: clamp(14px, .2vw + 13.3px, 15px) !important;
  line-height: 1.35 !important;
}
/* Secondary lines: one muted grey, nothing under 12px. */
body .cwfd-shortcut__sub,
body .cwfd-ts-item span,
body .cwfd-shortcuts__heading,
body .cwfd-about-network-note,
body .cwfd-about-journey-link,
body .cwfd-about-identity span{
  color: #64748b !important;
}
body .cwfd-ts-item span,
body ul.products .product-image .stock{
  font-size: 12px !important;
}
body .cwfd-about-identity strong,
body .cwfd-about-btn{
  color: var(--cwfd-heading, #0e2a52) !important;
}
/* (1.1.2: button labels are left to inherit the button's own text colour. Forcing them
   blue made "Sign in" invisible on the blue Sign in button on product pages.) */
body .cwfd-gc-help a strong{
  color: var(--cwfd-blue, #003e7d) !important;
}

/* 19. "Register to view pricing" on product cards: brand blue, not the bright #0070f3
       the child theme sets (its rule loads later, so this one is more specific). */
html body a.cwfd-register-price-link,
html body .bp-cta{
  color: var(--cwfd-blue, #003e7d) !important;
}

/* 20. FAQ page "Need help..." band: the child theme forces every h2 on the FAQ page blue
       (body.cwfd-legal--frequently-asked-questions .main-content h2), which made this
       heading blue on navy. Restore the band's white. */
html body .cwfd-faq-design .cwfd-faq-contact h2,
html body.cwfd-legal--frequently-asked-questions .main-content .cwfd-faq-contact h2{
  color: #ffffff !important;
}