/* ==========================================================================
   The Cheese Barn: label motif layer
   Everything theme.json cannot express lives here.
   Tokens come from theme.json custom properties; do not hardcode new colours.
   ========================================================================== */

:root {
  --cb-rule: var(--wp--preset--color--timber);
  --cb-green-dark: #0F5340; /* hover state of Barn Green, single sanctioned derivative */
}

/* ---- Signature: the double-rule label frame ---- */
.cb-label-frame {
  border: 1px solid var(--cb-rule);
  outline: 1px solid var(--cb-rule);
  outline-offset: 3px;
  background: var(--wp--preset--color--white);
}

/* ---- Eyebrow: label small print ---- */
.cb-eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--barn-green);
  font-weight: 700;
}

/* ---- Announcement bar ---- */
.cb-announce {
  background: var(--wp--preset--color--barn-green);
  color: var(--wp--preset--color--cream);
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* ---- Header ---- */
.cb-header {
  border-bottom: 1px solid rgba(44, 39, 34, 0.25);
}
.cb-header .wp-block-site-logo img {
  height: 54px;
  width: auto;
}
.cb-header .wp-block-navigation a {
  font-weight: 500;
  font-size: 15.5px;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  text-decoration: none;
  color: var(--wp--preset--color--timber);
}
.cb-header .wp-block-navigation a:hover {
  border-color: var(--wp--preset--color--rind-gold);
}
.cb-header .wp-block-navigation .current-menu-item > a {
  border-color: var(--wp--preset--color--brand-maroon);
  color: var(--wp--preset--color--brand-maroon);
}

/* ---- Buttons: hover derivative ---- */
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover {
  background-color: var(--cb-green-dark) !important;
}

/* ---- Secondary (outline) button style ---- */
.is-style-cb-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--wp--preset--color--timber);
  color: var(--wp--preset--color--timber);
}
.is-style-cb-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--rind-gold);
  color: var(--wp--preset--color--brand-maroon);
  background: transparent !important;
}

/* ==========================================================================
   WooCommerce: product cards in the label motif
   Applies to Product Collection / product grid markup.
   ========================================================================== */

/* Grid layout: the Product Collection block ships is-layout-flow (stacked),
   so the theme enforces the grid. QA fix v0.1.1. */
.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
@media (max-width: 1024px) { .wc-block-product-template { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .wc-block-product-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .wc-block-product-template { grid-template-columns: 1fr; } }

/* WordPress's block-gap "* + *" rule leaks onto these grid items, giving every
   card after the first a 24px top margin. That shortens those cards and drops
   them down the row, so the first card in each row reads as taller than its
   neighbours. Spacing here comes from the grid gap, so zero the margin and let
   the items stretch to a common row height. */
.wc-block-product-template > li.wc-block-product,
.wc-block-product-template > .wc-block-product {
  margin-block-start: 0;
  margin-top: 0;
}
.wc-block-product-template { align-items: stretch; }

.wc-block-product-template .wc-block-product,
ul.products li.product {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--cb-rule);
  outline: 1px solid var(--cb-rule);
  outline-offset: 3px;
  padding: 0 0 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-product-template .wc-block-product,
  ul.products li.product { transition: none; }
}
.wc-block-product-template .wc-block-product:hover,
ul.products li.product:hover {
  transform: translateY(-3px);
}

/* Packshot well */
.wc-block-product-template .wc-block-product img,
ul.products li.product img {
  border-bottom: 1px solid rgba(44, 39, 34, 0.18);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--wp--preset--color--white);
}

/* Card text */
.wc-block-product-template .wc-block-product .wp-block-post-title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--wp--preset--color--timber);
  padding: 12px 16px 0;
}
.wc-block-product-template .wc-block-product .wc-block-components-product-price,
ul.products li.product .price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  color: var(--wp--preset--color--timber);
  padding: 4px 16px 8px;
}

/* "inc. GST" suffix set in Woo tax settings renders in <small> */
.price small.woocommerce-price-suffix,
.wc-block-components-product-price small {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12.5px;
  color: #8A8272;
  letter-spacing: 0.03em;
}

/* Add to cart inside the card */
.wc-block-product-template .wc-block-product .wp-block-button,
ul.products li.product .button {
  margin: 6px 16px 16px;
}

/* Colour band footer, keyed off product category classes on the collection <li>.
   Selectors carry .wc-block-product-template for specificity over the frame rule
   (QA-verified v0.1.1: gold cheese, green dairy, maroon hampers and vouchers).
   v0.1.2: also matches the live-site slugs (yoghurt-products, quark-products, sour-cream-products,
   cottage-cheese-products, cream-cheese, ghee-products, gift-vouchers) so the theme works on the live clone. */
.wc-block-product-template li.wc-block-product,
ul.products li.product {
  border-bottom: 9px solid var(--wp--preset--color--rind-gold); /* default: cheese */
}
.wc-block-product-template li.wc-block-product.product_cat-yoghurt,
.wc-block-product-template li.wc-block-product.product_cat-yoghurt-dairy,
.wc-block-product-template li.wc-block-product.product_cat-yoghurt-products,
.wc-block-product-template li.wc-block-product.product_cat-quark-products,
.wc-block-product-template li.wc-block-product.product_cat-sour-cream-products,
.wc-block-product-template li.wc-block-product.product_cat-cottage-cheese-products,
.wc-block-product-template li.wc-block-product.product_cat-cream-cheese,
.wc-block-product-template li.wc-block-product.product_cat-ghee-products,
ul.products li.product.product_cat-yoghurt,
ul.products li.product.product_cat-yoghurt-dairy,
ul.products li.product.product_cat-yoghurt-products,
ul.products li.product.product_cat-quark-products,
ul.products li.product.product_cat-sour-cream-products,
ul.products li.product.product_cat-cottage-cheese-products,
ul.products li.product.product_cat-cream-cheese,
ul.products li.product.product_cat-ghee-products {
  border-bottom-color: var(--wp--preset--color--barn-green);
}
.wc-block-product-template li.wc-block-product.product_cat-hampers,
.wc-block-product-template li.wc-block-product.product_cat-vouchers,
.wc-block-product-template li.wc-block-product.product_cat-gift-vouchers,
ul.products li.product.product_cat-hampers,
ul.products li.product.product_cat-vouchers,
ul.products li.product.product_cat-gift-vouchers {
  border-bottom-color: var(--wp--preset--color--brand-maroon);
}

/* Sale badge */
.wc-block-components-product-sale-badge,
span.onsale {
  background: var(--wp--preset--color--brand-maroon);
  color: var(--wp--preset--color--cream);
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product div.product .woocommerce-product-gallery {
  border: 1px solid var(--cb-rule);
  outline: 1px solid var(--cb-rule);
  outline-offset: 3px;
  background: var(--wp--preset--color--white);
}
.single-product div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--brand-maroon);
  font-weight: 400;
}
.single-product div.product p.price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 30px;
  color: var(--wp--preset--color--timber);
}

/* Trust rule strip (pattern: cb-trust) */
.cb-trust {
  border-top: 1px solid var(--cb-rule);
  border-bottom: 1px solid var(--cb-rule);
  padding: 12px 2px;
}
.cb-trust p {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* Quantity input, square to match */
.quantity .qty {
  border: 1px solid var(--wp--preset--color--timber);
  border-radius: 0;
  height: 46px;
}

/* ==========================================================================
   Dark bands (aging room) and cream feature bands
   ========================================================================== */
.cb-band-dark {
  background: var(--wp--preset--color--timber);
  color: var(--wp--preset--color--cream);
}
.cb-band-dark h2, .cb-band-dark h3 { color: var(--wp--preset--color--cream); }
.cb-band-dark .cb-eyebrow { color: var(--wp--preset--color--rind-gold); }
.cb-band-dark p { color: #CFC8B8; }

.cb-band-cream { background: var(--wp--preset--color--logo-cream); }

/* ---- Footer ---- */
.cb-footer {
  background: var(--wp--preset--color--timber);
  color: #CFC8B8;
}
.cb-footer a { color: #CFC8B8; text-decoration: none; }
.cb-footer a:hover { color: var(--wp--preset--color--cream); }
.cb-footer h4 {
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rind-gold);
}
.cb-footer-plate {
  background: var(--wp--preset--color--logo-cream);
  padding: 14px 18px;
  display: inline-block;
}

/* ---- Focus visibility, sitewide ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--wp--preset--color--rind-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Single product: wide hero with floating summary panel
   Desktop  - hero fills the band, panel floats over the soft left third.
   Mobile   - square packshot on top, panel below as ordinary flow.
   ========================================================================== */

/* Sized so the longest product name ("Lactose Free Organic Yoghurt") sits on
   one line across the wide column, and still wraps cleanly on a phone. */
.cb-product-title {
  text-align: center;
  margin: 0 auto 22px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  text-wrap: balance;
}

.cb-breadcrumbs {
  font-size: 14px;
  color: #6B6157;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cb-breadcrumbs::-webkit-scrollbar { display: none; }
.cb-breadcrumbs a { color: var(--wp--preset--color--barn-green); }

.cb-hero { position: relative; margin: 0 0 clamp(32px, 5vw, 56px); }
.cb-hero__square { display: block; width: 100%; height: auto; }
.cb-hero__panel { display: flex; flex-direction: column; gap: 20px; }
.cb-hero__body { display: flex; flex-direction: column; gap: 14px; }
.cb-hero__summary p { margin: 0 0 12px; }
.cb-hero__summary p:last-child { margin-bottom: 0; }
.cb-hero__summary img { max-width: 84px; height: auto; }

.cb-hero__weight {
  margin: 0;
  font-size: 15px;
  color: #6B6157;
}
.cb-hero__weight span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--timber);
  margin-right: 6px;
}

.cb-hero__buy { display: flex; flex-direction: column; gap: 12px; }

.cb-hero__freight {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wp--preset--color--timber);
  background: rgba(217, 164, 65, 0.16);
  border-left: 3px solid var(--wp--preset--color--rind-gold);
  padding: 10px 12px;
}
.cb-hero__freight a { color: var(--wp--preset--color--brand-maroon); }

.cb-hero__price {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1;
  color: var(--wp--preset--color--brand-maroon);
}
.cb-hero__price .woocommerce-Price-amount { font-size: inherit; }
.cb-hero__price small,
.cb-hero__price .woocommerce-price-suffix {
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  color: #6B6157;
}

/* quantity box and button sit on one line, bottom of the panel */
.cb-hero .cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  flex-wrap: wrap;
}
.cb-hero .cart .quantity input.qty {
  height: 100%;
  min-height: 46px;
  width: 74px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid rgba(44, 39, 34, 0.35);
  background: #fff;
}
.cb-hero .cart button.button {
  min-height: 46px;
  padding: 0 26px;
  background: var(--wp--preset--color--barn-green);
  color: #fff;
  border: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}
.cb-hero .cart button.button:hover { background: #10583F; }

@media (min-width: 783px) {
  .cb-hero {
    background-image: var(--cb-hero);
    background-size: cover;
    /* Centre is deliberate. A long description makes the band taller than the
       render's 16:9 and cover then crops horizontally; anchoring right was
       tried and pulls the product left, under the panel. Centre keeps the
       product clear of the panel at the cost of a small crop on its right. */
    background-position: center;
    /* Sits on the wide content column, not full bleed: at 1240px the 16:9
       render is only lightly cropped, which keeps the product intact. */
    min-height: 600px;
    display: flex;
    align-items: stretch;
    padding: clamp(20px, 2.6vw, 34px);
  }
  .cb-hero__media { display: none; }
  .cb-hero__panel {
    width: clamp(340px, 42%, 520px);
    justify-content: space-between;
    background: rgba(247, 242, 231, 0.84);
    border: 1px solid rgba(44, 39, 34, 0.14);
    padding: clamp(20px, 2.2vw, 30px);
    box-shadow: 0 2px 18px rgba(44, 39, 34, 0.12);
  }
  /* no hero image on file (hampers, vouchers): plain cream band, no overlay */
  .cb-hero--plain { background: var(--wp--preset--color--logo-cream); min-height: 0; }
  .cb-hero--plain .cb-hero__media { display: block; width: 44%; margin-right: 28px; }
  .cb-hero--plain .cb-hero__panel { background: none; border: 0; box-shadow: none; flex: 1; }
}

@media (max-width: 782px) {
  .cb-hero__media { margin-bottom: 18px; }
  .cb-hero__panel { padding: 0 4px; }
}

/* ---- Ingredients and nutrition ---- */
/* Left edge lines up with the hero panel above it: same wide column, same
   inset as the hero's padding. */
.cb-details {
  margin: 0 0 clamp(32px, 5vw, 56px);
  /* Sits on top of the ~24px block gap to give the hero room to breathe
     before the ingredients start. */
  padding-top: clamp(12px, 1.6vw, 22px);
  padding-inline: clamp(20px, 2.6vw, 34px);
}
.cb-details__inner { max-width: 760px; margin: 0; }
.cb-details h3 {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--brand-maroon);
  font-size: 22px;
  margin: 28px 0 10px;
}
.cb-details h3:first-child { margin-top: 0; }
.cb-details .cb-per {
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  color: #6B6157;
}
.cb-nutrition { margin: 0; overflow-x: auto; }
.cb-nutrition table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}
.cb-nutrition th,
.cb-nutrition td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(44, 39, 34, 0.14);
  text-align: left;
}
.cb-nutrition th { font-weight: 400; color: var(--wp--preset--color--timber); }
.cb-nutrition td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cb-nutrition tr:first-child th,
.cb-nutrition tr:first-child td { border-top: 2px solid var(--wp--preset--color--rind-gold); }
.cb-nutrition-note {
  font-size: 13.5px;
  color: #6B6157;
  margin: 10px 0 0;
}

/* ==========================================================================
   Shop lead-in: the two ranges as label cards above the full grid
   ========================================================================== */

.cb-ranges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin: 4px 0 40px;
}
@media (max-width: 700px) { .cb-ranges { grid-template-columns: 1fr; } }

.cb-range {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--cb-rule);
  outline: 1px solid var(--cb-rule);
  outline-offset: 3px;
  border-bottom: 9px solid var(--wp--preset--color--rind-gold);
  transition: transform 0.18s ease;
}
.cb-range--green { border-bottom-color: var(--wp--preset--color--barn-green); }
.cb-range:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .cb-range { transition: none; } }
.cb-range:focus-visible { outline: 3px solid var(--wp--preset--color--rind-gold); outline-offset: 2px; }

.cb-range__media { display: block; overflow: hidden; }
.cb-range__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-bottom: 1px solid rgba(44, 39, 34, 0.18);
}

.cb-range__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  flex: 1;
}
.cb-range__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--wp--preset--color--brand-maroon);
}
.cb-range__desc {
  font-size: 15px;
  line-height: 1.5;
  color: #6B6157;
}
.cb-range__cta {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--barn-green);
}
.cb-range:hover .cb-range__cta { color: var(--cb-green-dark); }
.cb-range__count {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--wp--preset--color--timber);
  background: rgba(217, 164, 65, 0.28);
  border-radius: 2px;
  padding: 2px 8px;
}

.cb-shop-alltitle {
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  color: var(--wp--preset--color--timber);
  margin: 0 0 4px;
}

/* ---- v0.3.2: Where to Buy header button ---- */
.cb-header .cb-wtb .wp-block-button__link {
  background: var(--wp--preset--color--brand-maroon);
  color: var(--wp--preset--color--cream);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 0;
  text-decoration: none;
}
.cb-header .cb-wtb .wp-block-button__link:hover { background: var(--cb-green-dark) !important; }

/* ---- v0.3.2: footer newsletter ---- */
.cb-footer .cb-newsletter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cb-footer .cb-newsletter input[type="text"],
.cb-footer .cb-newsletter input[type="email"] {
  flex: 1 1 140px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(247,242,231,0.35);
  background: rgba(247,242,231,0.06); color: var(--wp--preset--color--cream); font: inherit;
}
.cb-footer .cb-newsletter input::placeholder { color: #A9A291; }
.cb-footer .cb-newsletter button {
  padding: 10px 18px; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--wp--preset--color--rind-gold); color: var(--wp--preset--color--timber);
}
.cb-footer .cb-newsletter button:hover { background: var(--wp--preset--color--cream); }
.cb-footer .cb-newsletter button:disabled { opacity: 0.6; cursor: wait; }
.cb-newsletter__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.cb-newsletter__msg { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; min-height: 1em; }

/* ---- v0.3.2: allergen statement ---- */
.cb-allergen { margin-top: 6px; }

/* ---- v0.3.2: stockist order forms ---- */
.cb-header .cb-stockist-nav {
  font-weight: 700; font-size: 14px; color: var(--wp--preset--color--barn-green);
  text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--rind-gold); padding-bottom: 2px;
}
.cb-stockist-links { margin: 0 0 40px; padding: 24px 28px; background: var(--wp--preset--color--logo-cream); border: 1px solid var(--cb-rule); }
.cb-stockist-links h2 { margin: 4px 0 16px; }
.cb-order-form .gform_wrapper input[type="text"], .cb-order-form .gform_wrapper input[type="email"], .cb-order-form .gform_wrapper input[type="number"], .cb-order-form .gform_wrapper input[type="tel"], .cb-order-form .gform_wrapper select, .cb-order-form .gform_wrapper textarea {
  border: 1px solid rgba(44,39,34,.45); padding: 8px 10px; font: inherit; background: #fff;
}
.cb-order-form .gform_wrapper .gform_button { background: var(--wp--preset--color--barn-green); color: var(--wp--preset--color--cream); border: 0; padding: 12px 26px; font: inherit; font-weight: 700; cursor: pointer; }
.cb-order-form .gform_wrapper .gform_button:hover { background: #0F5340; }