/*
Theme Name: Siboni's Coffee Classic
Theme URI: https://siboniscoffee.com.au
Author: Lanna Mountain Marketing
Author URI: https://lannamountain.io
Description: Classic PHP WooCommerce theme for Siboni's Coffee (Direction D) — forest green + teal palette, Spectral/Oswald/Lato type system. Editable via the WordPress Customizer and native menus. Built as the classic-theme counterpart to the "Siboni's Coffee" block theme for side-by-side comparison.
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC requires at least: 8.0
WC tested up to: 9.0
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siboni-classic
Tags: e-commerce, custom-colors, custom-menu, two-columns
*/

/* ─────────────────────────────────────────────
   DESIGN TOKENS — Direction D (ground truth: directionD.jsx)
───────────────────────────────────────────── */
:root {
  --forest:       #193C34;
  --forest-hover: #234F45;
  --fern:         #2F6357;
  --sage:         #5C8478;
  --pale-mint:    #D9E9E3;
  --teal:         #98DBCD;
  --teal-dark:    #5FA898;
  --teal-pale:    #E9F7F3;
  --ink:          #050505;
  --muted:        #5B5F5A;
  --white:        #FFFFFF;
  --cream:        #F7F3EB;   /* warm beige page canvas */
  --off-white:    #F0EAE0;   /* deeper beige for alternating bands */
  --line:         #E3DED2;

  --serif: 'Spectral', Georgia, serif;
  --label: 'Oswald', 'Arial Narrow', sans-serif;
  --body:  'Lato', 'Helvetica Neue', Arial, sans-serif;
}

/* ─────────────────────────────────────────────
   BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); transition: color 180ms ease; }
a:hover { color: var(--forest-hover); }

.sib-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3.sib-serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.1; margin: 0; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute;
}

/* Eyebrow — Oswald tracked uppercase with rule */
.sib-eyebrow {
  font-family: var(--label);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fern);
  display: inline-flex; align-items: center; gap: 10px;
}
.sib-eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: var(--teal); display: inline-block; border-radius: 2px;
}
.sib-eyebrow--on-dark { color: var(--teal); }

/* Buttons */
.sib-btn {
  display: inline-block;
  font-family: var(--body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em; padding: 15px 30px;
  cursor: pointer; border-radius: 8px;
  transition: all 180ms ease;
  border: 1px solid var(--forest);
  text-decoration: none; text-align: center;
  background: var(--forest); color: var(--white);
}
.sib-btn:hover { background: var(--forest-hover); border-color: var(--forest-hover); color: var(--white); }
.sib-btn--outline { background: transparent; color: var(--forest); }
.sib-btn--outline:hover { background: var(--pale-mint); border-color: var(--forest); color: var(--forest); }
.sib-btn--teal { background: var(--teal); color: var(--forest); border-color: var(--teal); }
.sib-btn--sm { padding: 8px 16px; font-size: 13px; }
.sib-btn--cancel { background: transparent; color: var(--muted); border-color: var(--line); }
.sib-btn--cancel:hover { background: #fdecea; border-color: #c0392b; color: #c0392b; }

/* My Account → My Subscriptions */
.sib-sub-list { display: flex; flex-direction: column; gap: 16px; }
.sib-sub-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.sib-sub-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sib-sub-status {
  font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--teal-pale); color: var(--forest);
}
.sib-sub-status--paused { background: #fff3cd; color: #8a6d3b; }
.sib-sub-status--cancelled { background: #f1f1f1; color: var(--muted); }
.sib-sub-card__meta { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; color: var(--muted); }
.sib-sub-card__meta li { margin-bottom: 4px; }
.sib-sub-card__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.sib-sub-card__freq-row { display: flex; gap: 8px; }
.sib-sub-card__freq-row select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.sib-sub-card__buttons { display: flex; gap: 8px; margin-left: auto; }
.sib-btn--teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--forest); }

/* Stars + review badge */
.sib-stars { display: inline-flex; gap: 2px; color: var(--forest); }
.sib-stars svg { display: block; }
.sib-stars--teal { color: var(--teal); }
.sib-review-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 14px; color: var(--ink);
  text-decoration: none;
}
.sib-review-badge strong { font-weight: 700; }
.sib-review-badge--dark { color: var(--white); }

/* Labelled photo placeholder (striped) — swap for real photos */
.sib-placeholder {
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--pale-mint) 0 12px, var(--teal-pale) 12px 24px);
  display: flex; align-items: center; justify-content: center;
}
.sib-placeholder__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 600; color: var(--fern);
  text-transform: uppercase; letter-spacing: 0.05em; text-align: center;
  padding: 8px 18px; background: rgba(255,255,255,0.72); border-radius: 6px;
  position: relative; z-index: 1;
}
.sib-media { position: relative; overflow: hidden; }
.sib-media img { width: 100%; height: 100%; object-fit: cover; }
.sib-media--contain img { object-fit: contain; padding: 24px; background: var(--white); box-sizing: border-box; }

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.sib-header { background: var(--white); position: sticky; top: 0; z-index: 50; }

.sib-utility {
  border-bottom: 1px solid var(--line);
  padding: 7px 32px;
  display: flex; justify-content: center; align-items: center;
  gap: 28px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.sib-utility__sep { color: var(--line); }

.sib-header__bar {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  height: 82px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
/* The logo and the actions must never absorb flex pressure — the global reset
   sets img{max-width:100%}, so without flex-shrink:0 the logo box collapses and
   drags the wordmark with it (it was rendering 29px wide instead of 135px).
   The nav is the element that gives way; below 1100px it moves to the drawer. */
.sib-header__logo { flex-shrink: 0; }
.sib-header__logo a { display: block; line-height: 0; }
.sib-header__logo img { height: 56px; width: auto; }

/* .sib-header__bar is capped at max-width:1200px, so viewports above 1200px get
   exactly the same bar as 1200px — there is no room up there for looser nav
   spacing. These values used to live only in the max-width:1200px block, which
   left the >1200px case ~200px over budget. Base values now, so the two sides
   of that boundary render identically. */
.sib-nav { display: flex; gap: 16px; }
.sib-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.sib-nav a {
  font-size: 13.5px; font-weight: 500; color: var(--forest);
  text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; opacity: 0.82;
}
.sib-nav a:hover,
.sib-nav .current-menu-item > a,
.sib-nav .current-menu-ancestor > a,
.sib-nav .current_page_item > a {
  font-weight: 700; border-bottom-color: var(--teal); opacity: 1;
}

.sib-header__actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.sib-header__actions .sib-contact-link {
  font-size: 14px; font-weight: 500; color: var(--forest); text-decoration: none;
}
.sib-cart-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--forest); text-decoration: none;
}
.sib-account-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--forest); text-decoration: none;
}
.sib-account-link:hover { color: var(--forest-hover); }
/* Visible wording beside the Cart/Account icons — they were icon-only with a
   screen-reader-only label, which made them easy to miss. Costs ~87px of the
   header bar, which is why the nav now collapses at 1100px rather than 1024px. */
.sib-action-label { white-space: nowrap; }

/* Coffee Concierge banner — sits under the sticky nav, rotates through a few messages */
.sib-concierge-bar { background: var(--forest); color: var(--white); }
.sib-concierge-bar__inner {
  max-width: 1200px; margin: 0 auto; padding: 9px 32px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; letter-spacing: 0.01em;
}
.sib-concierge-bar__inner svg { flex: 0 0 auto; }
.sib-concierge-bar__text { flex: 0 1 auto; }
.sib-concierge-bar__link {
  color: var(--teal); text-decoration: underline; font-weight: 700; margin-left: 4px; flex: 0 0 auto;
}

/* Mobile nav toggle */
.sib-nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; color: var(--forest);
}
.sib-nav-toggle span {
  display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* ─────────────────────────────────────────────
   HOME — HERO
───────────────────────────────────────────── */
.sib-hero {
  max-width: 1200px; margin: 0 auto;
  padding: 64px 32px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.sib-hero h1 { margin: 22px 0 0; }
.sib-hero__copy {
  font-size: 17px; line-height: 1.7; color: var(--muted);
  max-width: 470px; margin: 22px 0 30px;
}
.sib-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.sib-hero__visual { position: relative; }
.sib-hero__visual .sib-placeholder,
.sib-hero__visual .sib-media { aspect-ratio: 4 / 5; border-radius: 18px; margin: 0; }
.sib-hero__badge {
  position: absolute; bottom: -24px; left: -24px;
  background: var(--forest); color: var(--white);
  padding: 20px 24px; border-radius: 8px; max-width: 200px;
  box-shadow: 0 18px 40px -16px rgba(5,5,5,0.35);
}
.sib-hero__badge-number { font-family: var(--serif); font-size: 32px; line-height: 1; }
.sib-hero__badge-text { font-size: 12px; color: var(--teal); margin-top: 6px; line-height: 1.4; }

/* ─────────────────────────────────────────────
   HOME — CATEGORY STRIP
───────────────────────────────────────────── */
.sib-cats { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sib-cats__inner { max-width: 1200px; margin: 0 auto; padding: 48px 32px; }
.sib-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sib-cat-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-decoration: none; display: block;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sib-cat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(5,5,5,0.28); }
.sib-cat-card .sib-placeholder, .sib-cat-card .sib-media { aspect-ratio: 16 / 10; }
.sib-cat-card__body { padding: 18px 20px 20px; }
.sib-cat-card__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sib-cat-card__desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ─────────────────────────────────────────────
   HOME — HERITAGE
───────────────────────────────────────────── */
.sib-heritage {
  max-width: 1200px; margin: 0 auto; padding: 88px 32px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.sib-heritage .sib-placeholder, .sib-heritage .sib-media { aspect-ratio: 5 / 4; border-radius: 18px; margin: 0; }
.sib-heritage h2 { margin: 18px 0; }
.sib-heritage p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.sib-heritage .sib-btn { margin-top: 10px; }

/* ─────────────────────────────────────────────
   HOME — WHY SIBONI'S
───────────────────────────────────────────── */
.sib-why { background: var(--forest); color: var(--white); }
.sib-why__inner { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-why__head { text-align: center; margin-bottom: 48px; }
.sib-why__head h2 { color: var(--white); margin: 18px 0 0; }
.sib-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sib-why__item { border-top: 2px solid var(--teal); padding-top: 20px; }
.sib-why__item h3 {
  font-family: var(--body); font-size: 17px; font-weight: 700;
  margin: 0 0 10px; line-height: 1.3; color: var(--white);
}
.sib-why__item p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; }

/* ─────────────────────────────────────────────
   HOME — FEATURED / SECTION HEADS
───────────────────────────────────────────── */
.sib-section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px; flex-wrap: wrap; gap: 16px;
}
.sib-section__head h2 { margin: 16px 0 0; font-size: clamp(26px, 3.2vw, 38px); }
.sib-view-all {
  font-size: 14px; font-weight: 700; color: var(--forest);
  text-decoration: none; border-bottom: 1px solid var(--forest); padding-bottom: 2px;
}

/* ─────────────────────────────────────────────
   BEAN CARD (product card)
───────────────────────────────────────────── */
.sib-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.sib-bean-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sib-bean-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(5,5,5,0.28); }
.sib-bean-card--soldout:hover { transform: none; box-shadow: none; }
.sib-bean-card__media { position: relative; }
.sib-bean-card__media .sib-placeholder, .sib-bean-card__media .sib-media { aspect-ratio: 4 / 3; }
/* Product shots are portrait on white — show the whole product, never crop */
.sib-bean-card__media .sib-media { background: var(--white); }
.sib-bean-card__media .sib-media img { object-fit: contain; padding: 10px; }
.sib-bean-card__link { text-decoration: none; color: inherit; display: block; }
.sib-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--forest); color: var(--white);
  font-family: var(--label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.sib-tag--soldout {
  left: auto; right: 14px;
  background: rgba(255,255,255,0.92); color: var(--muted);
  letter-spacing: 0.1em; padding: 5px 10px;
}
.sib-bean-card__body { padding: 20px 22px 22px; }
.sib-bean-card__meta {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fern); margin-bottom: 6px;
}
.sib-bean-card__name { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.sib-bean-card__notes { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; min-height: 38px; }
.sib-bean-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.sib-bean-card__price { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.sib-bean-card__price .woocommerce-Price-amount { font-family: var(--serif); }
.sib-bean-card__price small { font-family: var(--body); font-size: 12px; color: var(--muted); }
.sib-bean-card__select { font-size: 13px; font-weight: 700; color: var(--forest); }
.sib-bean-card--soldout .sib-bean-card__select { color: var(--muted); }

/* ─────────────────────────────────────────────
   HOME — REVIEWS
───────────────────────────────────────────── */
.sib-reviews { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sib-reviews__inner { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-reviews__head { text-align: center; margin-bottom: 44px; }
.sib-reviews__head .sib-stars { margin-bottom: 14px; }
.sib-reviews__head h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 8px; }
.sib-reviews__head p { font-size: 15px; color: var(--muted); margin: 0; }
/* Reviews carousel: horizontal scroll-snap track, 3 cards per view on
   desktop, arrows + auto-advance added by main.js */
.sib-reviews__grid {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.sib-reviews__grid::-webkit-scrollbar { display: none; }
.sib-reviews__grid > * { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; scroll-snap-align: start; }
.sib-review-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 26px;
}
.sib-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.sib-carousel-btn {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--forest);
  cursor: pointer; font-size: 18px; line-height: 1;
  transition: all 150ms ease; display: inline-flex; align-items: center; justify-content: center;
}
.sib-carousel-btn:hover { border-color: var(--forest); background: var(--pale-mint); }
.sib-review-card p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 14px 0 16px; }
.sib-review-card cite {
  font-family: var(--label); font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ─────────────────────────────────────────────
   HOME — VISIT
───────────────────────────────────────────── */
.sib-visit { max-width: 1200px; margin: 0 auto; }
.sib-visit > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.sib-visit__copy { padding: 80px 32px 80px 32px; max-width: 500px; margin-left: auto; width: 100%; }
.sib-visit__copy h2 { margin: 18px 0 16px; font-size: clamp(26px, 3.2vw, 38px); }
.sib-visit__copy .sib-visit-address { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 8px; }
.sib-visit__copy .sib-visit-hours { font-size: 15px; color: var(--muted); margin: 0 0 24px; }
.sib-visit__media { min-height: 360px; padding: 80px 0; }
.sib-visit__media .sib-placeholder, .sib-visit__media .sib-media, .sib-visit__media .sib-map { height: 100%; min-height: 360px; }
.sib-visit__media .sib-map { aspect-ratio: auto; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.sib-footer { background: var(--forest); color: var(--white); }
.sib-footer__inner { max-width: 1200px; margin: 0 auto; padding: 60px 32px 30px; }
/* Brand block + four nav columns (Shop, Services, About, Order and account
   info). Gap tightened from 40px when the fifth column landed so the narrower
   columns don't start wrapping their link labels at ~1200px. */
.sib-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.sib-footer__brand > a { display: inline-block; line-height: 0; }
.sib-footer__brand img { height: 42px; width: auto; }
.sib-footer__tagline { text-align: center; padding: 30px 0 0; }
.sib-footer__tagline img { height: 18px; width: auto; opacity: 0.85; }
.sib-footer__brand p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.7; margin: 20px 0 0; max-width: 260px; }
.sib-footer__brand .sib-review-badge { margin-top: 16px; }
.sib-footer__col h4 {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0 0 16px;
}
.sib-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sib-footer__col li { margin-bottom: 10px; }
.sib-footer__col a { font-size: 14px; color: rgba(255,255,255,0.78); text-decoration: none; }
.sib-footer__col a:hover { color: var(--white); }
.sib-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 22px; font-size: 12px; color: rgba(255,255,255,0.55);
}
.sib-footer__legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sib-footer__legal-links a { color: rgba(255,255,255,0.55); text-decoration: none; }
.sib-footer__legal-links a:hover { color: var(--white); }
.sib-footer__credit {
  padding-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.4);
}
.sib-footer__credit a { color: rgba(255,255,255,0.55); text-decoration: none; }
.sib-footer__credit a:hover { color: var(--white); }

/* Legal pages (Terms & Conditions, Shipping/Returns/Refunds, Privacy Policy) */
.sib-legal-intro { color: var(--muted); font-size: 14px; font-style: italic; }

/* ─────────────────────────────────────────────
   SHOP / ARCHIVE (Beans)
───────────────────────────────────────────── */
.sib-archive-hero { background: var(--off-white); border-bottom: 1px solid var(--line); }
.sib-archive-hero__inner { max-width: 1200px; margin: 0 auto; padding: 52px 32px 46px; }
.sib-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.sib-breadcrumb a { color: var(--fern); text-decoration: none; }
.sib-breadcrumb .current { color: var(--ink); }
.sib-archive-hero h1 { font-size: clamp(36px, 4.6vw, 54px); margin: 16px 0 12px; }
.sib-archive-hero__intro { font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 540px; margin: 0; }

.sib-archive-hero--with-image .sib-archive-hero__inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
}
.sib-archive-hero--with-image .sib-archive-hero__intro { max-width: none; }
.sib-archive-hero__visual img { width: 100%; max-width: 420px; height: auto; border-radius: 18px; display: block; margin-left: auto; }
.sib-archive-hero__visual--coffee-machines img, .sib-archive-hero__visual--machines img { max-width: 315px; margin-right: 40px; }

.sib-filter-bar {
  max-width: 1200px; margin: 0 auto; padding: 28px 32px 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.sib-filter-bar__label {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 6px;
}
.sib-filter-pill {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  text-decoration: none; transition: all 150ms ease;
}
.sib-filter-pill:hover { border-color: var(--forest); color: var(--ink); }
.sib-filter-pill--active { background: var(--forest); border-color: var(--forest); color: var(--white); }
.sib-filter-pill--active:hover { color: var(--white); }
.sib-filter-bar--secondary { padding-top: 10px; }

.sib-archive-grid { max-width: 1200px; margin: 0 auto; padding: 28px 32px 84px; }
.sib-archive-grid ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* Neutralise Woo's float-based layout stylesheet inside our grids */
.sib-archive-grid ul.products::before, .sib-archive-grid ul.products::after,
.sib-related ul.products::before, .sib-related ul.products::after { display: none; content: none; }
.sib-archive-grid ul.products li.product, .sib-related ul.products li.product {
	float: none; width: auto; margin: 0; padding: 0; clear: none;
}
.sib-no-products { font-size: 15px; color: var(--muted); padding: 40px 0; }

/* ─────────────────────────────────────────────
   SINGLE PRODUCT
───────────────────────────────────────────── */
.sib-product-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 24px 32px 0; font-size: 13px; color: var(--muted); }
.sib-product { max-width: 1200px; margin: 0 auto; padding: 32px 32px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

.sib-product__visual { position: sticky; top: 116px; }
.sib-product__stage {
  background: var(--off-white); border-radius: 18px;
  padding: 48px 24px; display: flex; justify-content: center;
}
.sib-product__stage .sib-media img { max-height: 420px; width: auto; object-fit: contain; }
.sib-product__thumbs { display: flex; gap: 14px; margin-top: 16px; }
.sib-product__thumbs > * { flex: 0 0 136px; width: 136px; aspect-ratio: 1 / 1; border-radius: 8px; }
.sib-product__thumb {
  position: relative; border: 2px solid var(--line); padding: 0; margin: 0;
  background: none; cursor: pointer; overflow: hidden;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sib-product__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/22px no-repeat;
  opacity: 0; transition: opacity .15s ease;
}
.sib-product__thumb:hover, .sib-product__thumb:focus-visible {
  border-color: var(--fern); outline: none; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.sib-product__thumb:hover::after, .sib-product__thumb:focus-visible::after { opacity: 1; }

/* Product image lightbox — click the main stage image to enlarge */
.sib-lightbox {
  position: fixed; inset: 0; background: rgba(20,20,18,.86);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 48px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.sib-lightbox--open { opacity: 1; pointer-events: auto; }
.sib-lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.sib-lightbox__close {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background .15s ease;
}
.sib-lightbox__close:hover, .sib-lightbox__close:focus-visible { background: rgba(255,255,255,.3); outline: none; }

/* CSS bean-bag illustration (until real packaging photos exist) */
.sib-beanbag { position: relative; width: 240px; margin: 0 auto; }
.sib-beanbag__bag {
  width: 240px; height: 360px;
  background: linear-gradient(155deg, #2b2622 0%, #14110e 100%);
  border-radius: 10px 10px 26px 26px;
  box-shadow: 0 30px 55px -22px rgba(20,36,28,0.45);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sib-beanbag__seal { position: absolute; top: 0; left: 0; right: 0; height: 18px; background: #1a1714; border-radius: 10px 10px 0 0; }
.sib-beanbag__valve { position: absolute; top: 28px; right: 30px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #3a342e; background: #1e1a16; }
.sib-beanbag__label {
  width: 168px; padding: 20px 16px 16px; background: var(--teal);
  border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); text-align: center;
}
.sib-beanbag__brand { font-family: var(--label); font-size: 13px; font-weight: 700; color: var(--forest); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.sib-beanbag__brand--wide { letter-spacing: 0.22em; margin-bottom: 6px; }
.sib-beanbag__rule { width: 70%; border-top: 1px solid rgba(25,60,52,0.4); margin-bottom: 8px; }
.sib-beanbag__name { font-family: var(--serif); font-size: 26px; font-style: italic; color: var(--forest); line-height: 1.1; }
.sib-beanbag__origin { font-family: var(--body); font-size: 8px; color: var(--fern); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }

.sib-product__info h1 { font-size: clamp(38px, 4.6vw, 54px); margin: 16px 0 10px; line-height: 1; }
.sib-product__price { font-family: var(--serif); font-size: 24px; color: var(--fern); margin-bottom: 20px; }
.sib-product__price .woocommerce-Price-amount { font-family: var(--serif); }
.sib-product__price del { opacity: 0.5; margin-right: 8px; }
/* Subscribe & save price. <ins> defaults to underlined, which reads as a link
   next to the struck-through one-time price — strip it and let colour carry it. */
.sib-product__price ins { text-decoration: none; background: none; }
.sib-product__price .sib-sub-price-note {
  display: block; font-family: var(--body); font-size: 13px;
  color: var(--muted); margin-top: 2px; letter-spacing: .02em;
}
.sib-product__price ins { text-decoration: none; }
.sib-product__desc { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 22px; }
.sib-product__desc p { margin: 0 0 12px; }
/* Brew-method icons embedded in the imported descriptions: the source markup
   uses display:inline divs; keep them (and their captions) on one row. */
.sib-product__desc img { display: inline-block; vertical-align: middle; }
.sib-product__desc div[style*="display: inline"] {
	display: inline-block !important;
	width: auto !important;
	margin: 0 26px 8px 0;
	text-align: center;
}

.sib-notes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.sib-note-pill {
  font-size: 13px; color: var(--forest); background: var(--teal-pale);
  border-radius: 999px; padding: 6px 14px;
}

.sib-product__form { border-top: 1px solid var(--line); padding-top: 24px; }

/* Woo variation form styled to Direction D */
.sib-product__form table.variations { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.sib-product__form table.variations,
.sib-product__form table.variations tbody,
.sib-product__form table.variations tr,
.sib-product__form table.variations th,
.sib-product__form table.variations td { display: block; width: 100%; text-align: left; }
.sib-product__form table.variations th.label { padding: 0 0 10px; }
.sib-product__form table.variations td.value { padding: 0 0 20px; }
.sib-product__form table.variations label,
.sib-sel-label {
  display: block; font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.sib-product__form select {
  width: 100%; padding: 13px 14px; font-family: var(--body); font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer;
}
.sib-product__form .reset_variations { font-size: 12px; color: var(--muted); }
.sib-product__form .sib-grind-field { margin: 0 0 20px; }

/* Subscribe & save toggle */
.sib-product__form .sib-subscribe-field { margin: 0 0 20px; }
.sib-product__form .sib-subscribe-field > .sib-sel-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
  color: var(--ink); margin-bottom: 10px;
}
.sib-product__form .sib-subscribe-field > .sib-sel-label input { cursor: pointer; }
.sib-product__form .sib-subscribe-field > .sib-sel-label--disabled { cursor: default; color: var(--muted); }
.sib-product__form .sib-subscribe-field > .sib-sel-label--disabled input { cursor: not-allowed; }
.sib-product__form .sib-subscribe-field > .sib-sel-label--disabled a { color: var(--forest); text-decoration: underline; font-weight: 600; }
.sib-product__form .sib-subscribe-options {
  margin: 4px 0 0 26px; padding: 14px 16px; background: var(--teal-pale); border-radius: 8px;
}
.sib-product__form .sib-subscribe-options .sib-sel-label { margin: 0 0 8px; }
.sib-product__form .sib-subscribe-options select { margin-bottom: 14px; }
.sib-product__form .sib-subscribe-options select:last-child { margin-bottom: 0; }

/* JS-enhanced size pills (replaces the Size select) */
.sib-size-pills { display: flex; gap: 10px; }
.sib-size-pill {
  flex: 1; padding: 12px 0; cursor: pointer;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 8px;
  transition: all 150ms ease;
}
.sib-size-pill:hover { border-color: var(--forest); }
.sib-size-pill--active { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* Qty + add to cart row */
.sib-product__form .woocommerce-variation-add-to-cart,
.sib-product__form form.cart:not(.variations_form),
.sib-atc-row { display: flex; gap: 14px; align-items: stretch; }
.sib-product__form .quantity {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.sib-product__form .quantity input.qty {
  width: 44px; border: none; text-align: center;
  font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield; height: 100%; min-height: 46px;
}
.sib-product__form .quantity input.qty::-webkit-outer-spin-button,
.sib-product__form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sib-qty-btn {
  width: 40px; min-height: 46px; border: none; background: none; cursor: pointer;
  font-size: 20px; color: var(--ink); line-height: 1;
}
.sib-product__form .single_add_to_cart_button {
  flex: 1; font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer; border-radius: 8px; border: 1px solid var(--forest);
  background: var(--forest); color: var(--white); transition: background 200ms, color 200ms;
  padding: 13px 20px;
}
.sib-product__form .single_add_to_cart_button:hover { background: var(--forest-hover); }
.sib-product__form .single_add_to_cart_button.sib-added { background: var(--teal); border-color: var(--teal); color: var(--forest); }
.sib-product__form .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }
.sib-product__shipnote { font-size: 13px; color: var(--muted); margin-top: 18px; }
.sib-product__form .woocommerce-variation-price { display: none; } /* price shown in main price element via JS */
.sib-product__form .single_variation_wrap .woocommerce-variation { margin-bottom: 14px; }
.sib-product__form .woocommerce-variation-availability { font-size: 13px; color: var(--muted); }
.sib-product__form .stock.out-of-stock { color: #a04545; }

/* Related products */
.sib-related { background: var(--off-white); border-top: 1px solid var(--line); }
.sib-related__inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }
.sib-related__inner > h2 { font-size: 30px; margin: 0 0 28px; }
.sib-related ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sib-related ul.products li.product { margin: 0; }

/* ─────────────────────────────────────────────
   BLOCK-EDITABLE PAGES (.sib-home, .sib-wholesale, .sib-repairs, .sib-about, .sib-contact)
   These pages are core-block content; these rules make core blocks
   (buttons, columns, headings) wear the Direction D design.
───────────────────────────────────────────── */
.sib-home .wp-block-buttons, .sib-wholesale .wp-block-buttons, .sib-repairs .wp-block-buttons, .sib-about .wp-block-buttons, .sib-contact .wp-block-buttons { gap: 14px; }
.sib-home .wp-block-button__link,
.sib-wholesale .wp-block-button__link,
.sib-repairs .wp-block-button__link,
.sib-about .wp-block-button__link,
.sib-contact .wp-block-button__link {
	font-family: var(--body); font-size: 14px; font-weight: 700;
	letter-spacing: 0.01em; padding: 15px 30px; border-radius: 8px;
	transition: all 180ms ease; text-decoration: none;
	background: var(--forest); color: var(--white);
	border: 1px solid var(--forest);
}
.sib-home .wp-block-button__link:hover,
.sib-wholesale .wp-block-button__link:hover,
.sib-repairs .wp-block-button__link:hover,
.sib-about .wp-block-button__link:hover,
.sib-contact .wp-block-button__link:hover { background: var(--forest-hover); border-color: var(--forest-hover); color: var(--white); }
.sib-home .is-style-outline .wp-block-button__link,
.sib-home .is-style-siboni-outline .wp-block-button__link,
.sib-wholesale .is-style-outline .wp-block-button__link,
.sib-wholesale .is-style-siboni-outline .wp-block-button__link,
.sib-repairs .is-style-outline .wp-block-button__link,
.sib-repairs .is-style-siboni-outline .wp-block-button__link,
.sib-about .is-style-outline .wp-block-button__link,
.sib-about .is-style-siboni-outline .wp-block-button__link,
.sib-contact .is-style-outline .wp-block-button__link,
.sib-contact .is-style-siboni-outline .wp-block-button__link {
	background: transparent; color: var(--forest); border: 1px solid var(--forest);
}
.sib-home .is-style-outline .wp-block-button__link:hover,
.sib-home .is-style-siboni-outline .wp-block-button__link:hover,
.sib-wholesale .is-style-outline .wp-block-button__link:hover,
.sib-wholesale .is-style-siboni-outline .wp-block-button__link:hover,
.sib-repairs .is-style-outline .wp-block-button__link:hover,
.sib-repairs .is-style-siboni-outline .wp-block-button__link:hover,
.sib-about .is-style-outline .wp-block-button__link:hover,
.sib-about .is-style-siboni-outline .wp-block-button__link:hover,
.sib-contact .is-style-outline .wp-block-button__link:hover,
.sib-contact .is-style-siboni-outline .wp-block-button__link:hover { background: var(--pale-mint); color: var(--forest); }
.sib-home .is-style-siboni-teal .wp-block-button__link,
.sib-wholesale .is-style-siboni-teal .wp-block-button__link,
.sib-repairs .is-style-siboni-teal .wp-block-button__link,
.sib-about .is-style-siboni-teal .wp-block-button__link,
.sib-contact .is-style-siboni-teal .wp-block-button__link {
	background: var(--teal); color: var(--forest); border: 1px solid var(--teal);
}
.sib-home .is-style-siboni-teal .wp-block-button__link:hover,
.sib-wholesale .is-style-siboni-teal .wp-block-button__link:hover,
.sib-repairs .is-style-siboni-teal .wp-block-button__link:hover,
.sib-about .is-style-siboni-teal .wp-block-button__link:hover,
.sib-contact .is-style-siboni-teal .wp-block-button__link:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--forest); }

/* Columns blocks used as our section grids keep the theme layout */
.sib-home .wp-block-columns, .sib-wholesale .wp-block-columns, .sib-repairs .wp-block-columns, .sib-about .wp-block-columns, .sib-contact .wp-block-columns { flex-wrap: nowrap; }
.sib-home .wp-block-column, .sib-wholesale .wp-block-column, .sib-repairs .wp-block-column, .sib-about .wp-block-column, .sib-contact .wp-block-column { min-width: 0; }
.sib-review-cite {
	font-family: var(--label); font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.sib-why__head h2 { color: var(--white); }
@media (max-width: 782px) {
	.sib-home .wp-block-columns, .sib-wholesale .wp-block-columns, .sib-repairs .wp-block-columns, .sib-about .wp-block-columns, .sib-contact .wp-block-columns { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────
   GENERIC PAGES / CART / CHECKOUT / ACCOUNT
───────────────────────────────────────────── */
.sib-page { max-width: 1200px; margin: 0 auto; padding: 48px 32px 84px; }
.sib-page--narrow { max-width: 860px; }
.sib-page__header { margin-bottom: 32px; }
.sib-page__header h1 { font-size: clamp(32px, 4vw, 48px); }
.sib-entry { font-size: 16px; line-height: 1.75; color: var(--ink); }
.sib-entry h2, .sib-entry h3 { margin-top: 1.4em; }
.sib-entry a { color: var(--fern); }

/* ─────────────────────────────────────────────
   BLOG ARCHIVE — CARD GRID
───────────────────────────────────────────── */
.sib-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sib-blog-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; list-style: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sib-blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(5,5,5,0.28); }
.sib-blog-card__link { text-decoration: none; color: inherit; display: block; }
.sib-blog-card__media.sib-placeholder, .sib-blog-card__media.sib-media { aspect-ratio: 16 / 10; }
.sib-blog-card__body { padding: 20px 22px 24px; }
.sib-blog-card__cat {
  display: inline-block; font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
}
.sib-blog-card__title { font-size: 19px; line-height: 1.35; margin: 0 0 10px; }
.sib-blog-card__excerpt { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
.sib-blog-card__date {
  font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.sib-single-media.sib-placeholder, .sib-single-media.sib-media {
  aspect-ratio: 16 / 9; border-radius: 18px; margin-bottom: 32px;
}

/* Soften Woo defaults on cart/checkout to match brand */
.woocommerce .sib-page a.button, .woocommerce .sib-page button.button,
.woocommerce .sib-page input.button, .woocommerce .sib-page .button.alt,
.woocommerce .sib-page .checkout-button {
  background: var(--forest); color: var(--white); border-radius: 8px;
  font-family: var(--body); font-weight: 700;
}
.woocommerce .sib-page a.button:hover, .woocommerce .sib-page button.button:hover,
.woocommerce .sib-page input.button:hover, .woocommerce .sib-page .button.alt:hover,
.woocommerce .sib-page .checkout-button:hover { background: var(--forest-hover); color: var(--white); }
.woocommerce .sib-page table.shop_table { border: 1px solid var(--line); border-radius: 12px; }
.woocommerce .sib-page table.shop_table th { font-family: var(--label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--teal-dark); background: var(--teal-pale); color: var(--ink);
}
.woocommerce-message a.button, .woocommerce-info a.button { background: var(--forest); color: var(--white); }
.woocommerce-error { border-top-color: #a04545; }

/* WooCommerce Blocks cart/checkout — brand the action buttons (they are <a>
   elements, so without this they inherit the theme link colour on Woo's
   default dark background) */
.wc-block-components-button,
a.wc-block-cart__submit-button,
a.wc-block-components-checkout-place-order-button {
	background-color: var(--forest) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--body) !important;
	font-weight: 700 !important;
}
.wc-block-components-button:hover,
a.wc-block-cart__submit-button:hover,
a.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--forest-hover) !important;
	color: var(--white) !important;
}
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"] {
	opacity: 0.55;
}
/* Quantity steppers and links inside the blocks UI stay legible */
.wc-block-cart a, .wc-block-checkout a { color: var(--fern); }

/* Woo notices — brand-styled. AJAX adds bypass these entirely; they only
   appear for validation errors ("choose an option") and non-AJAX fallbacks. */
.woocommerce-message,
.woocommerce-info,
ul.woocommerce-error {
  list-style: none;
  margin: 0 0 10px; padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px; line-height: 1.5;
  background: var(--teal-pale); color: var(--forest);
  border: 1px solid var(--teal-dark); border-left-width: 4px;
}
ul.woocommerce-error {
  background: #FAEDEA; color: #7A2E23; border-color: #C65B4E;
}
ul.woocommerce-error li { margin: 0; }
.woocommerce-message a,
.woocommerce-info a {
  color: var(--fern); font-weight: 700;
}
.woocommerce-message .button,
.woocommerce-info .button {
  float: right; margin-left: 16px;
  background: none; border: none; padding: 0;
  font-size: 14px; font-weight: 700; color: var(--fern);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Added-to-cart toast */
.sib-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--forest); color: var(--white);
  font-family: var(--body); font-size: 14px; font-weight: 700;
  padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(5,5,5,0.45);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
  z-index: 100;
}
.sib-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sib-toast .sib-toast__check { color: var(--teal); margin-right: 8px; }

/* ─────────────────────────────────────────────
   CART DRAWER — slide-out mini-cart
───────────────────────────────────────────── */
body.sib-drawer-lock { overflow: hidden; }

.sib-cart-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.sib-cart-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.4);
  opacity: 0; transition: opacity 240ms ease;
}
.sib-cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--white);
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px -24px rgba(5,5,5,0.35);
  transform: translateX(100%); transition: transform 280ms ease;
}
.sib-cart-drawer--open { pointer-events: auto; }
.sib-cart-drawer--open .sib-cart-drawer__overlay { opacity: 1; }
.sib-cart-drawer--open .sib-cart-drawer__panel { transform: translateX(0); }

.sib-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.sib-cart-drawer__head h3 { margin: 0; font-size: 24px; }
.sib-cart-drawer__close {
  background: none; border: none; cursor: pointer;
  padding: 8px; margin: -8px; color: var(--forest); line-height: 0;
}
.sib-cart-drawer__close:hover { color: var(--forest-hover); }

.sib-cart-drawer__body {
  flex: 1; overflow-y: auto; padding: 20px 28px 28px;
  display: flex; flex-direction: column;
}
.sib-cart-drawer__body .widget_shopping_cart_content {
  flex: 1; display: flex; flex-direction: column;
}

/* Empty state */
.sib-cart-drawer .woocommerce-mini-cart__empty-message {
  font-family: var(--serif); font-size: 22px; color: var(--ink);
  text-align: center; margin: auto 0; padding: 40px 0;
}

/* Item list */
.sib-cart-drawer ul.woocommerce-mini-cart {
  list-style: none; margin: 0; padding: 0; flex: 1;
}
.sib-cart-drawer li.woocommerce-mini-cart-item {
  position: relative;
  padding: 16px 28px 16px 0; border-bottom: 1px solid var(--line);
}
.sib-cart-drawer li.woocommerce-mini-cart-item img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  float: none; margin: 0;
}
.sib-cart-drawer li.woocommerce-mini-cart-item > a:not(.remove) {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  font-size: 14.5px; font-weight: 700; color: var(--forest);
  text-decoration: none; line-height: 1.4;
}
.sib-cart-drawer li.woocommerce-mini-cart-item .quantity {
  display: block; padding-left: 78px; margin-top: 4px;
  font-size: 13.5px; color: var(--muted);
}
.sib-cart-drawer li.woocommerce-mini-cart-item .quantity .woocommerce-Price-amount { color: var(--ink); font-weight: 700; }
.sib-cart-drawer li.woocommerce-mini-cart-item dl.variation {
  margin: 2px 0 0; padding-left: 78px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 2px 6px;
}
.sib-cart-drawer li.woocommerce-mini-cart-item dl.variation dt,
.sib-cart-drawer li.woocommerce-mini-cart-item dl.variation dd { margin: 0; display: inline; }
.sib-cart-drawer li.woocommerce-mini-cart-item dl.variation dd p { margin: 0; display: inline; }
.sib-cart-drawer a.remove {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 400; line-height: 1;
  color: var(--muted) !important; text-decoration: none;
  border: 1px solid var(--line); background: var(--white);
  transition: all 160ms ease;
}
.sib-cart-drawer a.remove:hover {
  color: var(--white) !important; background: var(--forest); border-color: var(--forest);
}

/* Subtotal + buttons */
.sib-cart-drawer .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 0; padding-top: 18px; border-top: 2px solid var(--forest);
  font-size: 15px; color: var(--ink);
}
.sib-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
}
.sib-cart-drawer .woocommerce-mini-cart__buttons {
  display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0;
}
.sib-cart-drawer .woocommerce-mini-cart__buttons a.button {
  display: block; text-align: center;
  font-family: var(--body); font-size: 14px; font-weight: 700;
  padding: 14px 24px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--forest);
  background: transparent; color: var(--forest);
  transition: all 180ms ease;
}
.sib-cart-drawer .woocommerce-mini-cart__buttons a.button:hover { background: var(--pale-mint); }
.sib-cart-drawer .woocommerce-mini-cart__buttons a.button.checkout {
  background: var(--forest); color: var(--white); order: -1;
}
.sib-cart-drawer .woocommerce-mini-cart__buttons a.button.checkout:hover {
  background: var(--forest-hover); border-color: var(--forest-hover);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
/* The primary menu carries 10 top-level items, so the full desktop header needs
   the whole 1200px bar to fit. The nav gap/font tightening that used to live
   here is now in the base styles (see .sib-nav above) — once the bar stops
   growing at 1200px there is nothing to gain from looser spacing above it.
   What remains here is the genuine narrow-viewport squeeze: less bar padding
   and a slightly smaller logo once the viewport itself drops below the cap. */
@media (max-width: 1200px) {
  .sib-header__bar { padding: 0 24px; gap: 16px; }
  .sib-header__logo img { height: 48px; }
  .sib-header__actions { gap: 16px; }
}

/* Header collapses to the hamburger here. Was 1024px, raised to 1100px when
   the Cart/Account icons gained visible labels (+87px on .sib-header__actions):
   at 1040px the nav and the actions were left only ~16px apart, so the band
   between 1024 and 1100 is now dropped into the drawer instead of squeezed. */
@media (max-width: 1100px) {
  .sib-nav-toggle { display: block; }
  .sib-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px; flex-direction: column; gap: 0;
    box-shadow: 0 24px 40px -24px rgba(5,5,5,0.25);
  }
  .sib-nav.sib-nav--open { display: block; }
  .sib-nav ul { flex-direction: column; gap: 0; }
  .sib-nav a { display: block; padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  /* Touch-sized targets for the icon links once the header is finger-driven. */
  .sib-header__actions .sib-contact-link,
  .sib-header__actions .sib-account-link,
  .sib-header__actions .sib-cart-link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 1024px) {
  .sib-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .sib-why__grid { grid-template-columns: repeat(2, 1fr); }
  .sib-grid-3, .sib-archive-grid ul.products, .sib-related ul.products { grid-template-columns: repeat(2, 1fr); }
  .sib-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .sib-reviews__grid > * { flex-basis: calc((100% - 24px) / 2); }
  .sib-footer__grid { grid-template-columns: 1fr 1fr; }
  .sib-hero { gap: 40px; }
  .sib-heritage { gap: 40px; }
  .sib-product { gap: 44px; }
}

@media (max-width: 782px) {
  /* Header shrinks (the nav already collapsed at 1024px) */
  .sib-header__bar { height: 68px; padding: 0 16px; gap: 12px; }
  .sib-header__logo img { height: 40px; }
  .sib-concierge-bar__inner { padding: 8px 16px; font-size: 12.5px; gap: 6px; }
  .sib-concierge-bar__link { margin-left: 2px; }
  .sib-header__actions { gap: 14px; }
  .sib-header__actions .sib-contact-link { font-size: 13.5px; }
  .sib-utility { gap: 10px; padding: 6px 16px; font-size: 11.5px; }
  .sib-utility__sep { display: none; }
  .sib-utility .sib-review-badge { font-size: 12px; }

  /* Stacked layouts */
  .sib-hero { grid-template-columns: 1fr; padding: 40px 24px 48px; gap: 48px; }
  .sib-hero__badge { bottom: -18px; left: 16px; }
  .sib-cats__inner { padding: 36px 24px; }
  .sib-cats__grid { grid-template-columns: 1fr; }
  .sib-heritage { grid-template-columns: 1fr; padding: 56px 24px; }
  .sib-why__inner { padding: 56px 24px; }
  .sib-why__grid { grid-template-columns: 1fr; }
  .sib-section { padding: 56px 24px; }
  .sib-grid-3, .sib-archive-grid ul.products, .sib-related ul.products { grid-template-columns: 1fr; }
  .sib-blog-grid { grid-template-columns: 1fr; }
  .sib-reviews__grid > * { flex-basis: 100%; }
  .sib-reviews__inner { padding: 56px 24px; }
  .sib-visit > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  .sib-visit__copy { padding: 56px 24px 40px; max-width: none; }
  .sib-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .sib-footer__legal { flex-direction: column; }

  .sib-archive-hero__inner { padding: 36px 24px 32px; }
  .sib-archive-hero--with-image .sib-archive-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .sib-filter-bar { padding: 20px 24px 0; }
  .sib-filter-bar--secondary { padding-top: 10px; }
  .sib-archive-grid { padding: 20px 24px 56px; }

  .sib-product { grid-template-columns: 1fr; padding: 24px 24px 48px; gap: 36px; }
  .sib-product__visual { position: static; }
  .sib-product-breadcrumb { padding: 18px 24px 0; }
  .sib-related__inner { padding: 48px 24px; }
  .sib-page { padding: 32px 24px 56px; }
}

/* Smallest phones: the Contact word no longer fits beside the icons —
   drop it (it stays in the footer and on the contact page). The Cart/Account
   labels collapse back to icon-only here too, but stay visually-hidden rather
   than display:none so each link keeps its accessible name. */
@media (max-width: 420px) {
  .sib-header__actions .sib-contact-link { display: none; }
}

@media (max-width: 374px) {
  .sib-action-label {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute;
  }
}

/* ─────────────────────────────────────────────
   CATEGORY PAGE — EXPANDED SEO CONTENT + FAQ
───────────────────────────────────────────── */
.sib-cat-content { background: var(--off-white); border-top: 1px solid var(--line); }
.sib-cat-content__inner { max-width: 800px; margin: 0 auto; padding: 56px 32px; }
.sib-cat-content h2 { font-family: var(--serif); font-size: 24px; margin: 32px 0 10px; color: var(--forest); }
.sib-cat-content h2:first-child { margin-top: 0; }
.sib-cat-content p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0; }

.sib-cat-faq { max-width: 800px; margin: 0 auto; padding: 48px 32px 72px; }
.sib-cat-faq h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 20px; color: var(--forest); }
.sib-faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.sib-faq-item summary { cursor: pointer; font-family: var(--label); font-size: 15px; font-weight: 500; color: var(--ink); list-style: none; }
.sib-faq-item summary::-webkit-details-marker { display: none; }
.sib-faq-item summary::after { content: '+'; float: right; color: var(--fern); }
.sib-faq-item[open] summary::after { content: '–'; }
.sib-faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

.sib-cat-related { max-width: 1200px; margin: 0 auto; padding: 0 32px 72px; }
.sib-cat-related__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sib-cat-related__link { font-family: var(--label); font-size: 14px; padding: 10px 18px; border: 1px solid var(--fern); border-radius: 999px; color: var(--fern); text-decoration: none; }
.sib-cat-related__link:hover { background: var(--fern); color: var(--white); }

@media (max-width: 480px) {
	.sib-cat-content__inner, .sib-cat-faq { padding-left: 24px; padding-right: 24px; }
}

/* ─────────────────────────────────────────────
   WHOLESALE PAGE
───────────────────────────────────────────── */
/* Sections manage their own max-width (like the homepage) — undo the
   generic .sib-page box so full-bleed bands span edge to edge. */
.sib-page.sib-wholesale { max-width: none; padding: 0; }

.sib-areas-strip { max-width: 760px; padding-top: 40px; padding-bottom: 40px; }
.sib-areas-strip p:not(.sib-eyebrow) { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 10px 0 0; }

.sib-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 20px; }
.sib-offer-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; }
.sib-offer-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--forest); margin: 0 0 10px; }
.sib-offer-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

.sib-steps-section { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sib-steps-section__inner { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 20px; }
.sib-step { border-top: 2px solid var(--fern); padding-top: 18px; }
.sib-step__num { font-family: var(--serif); font-size: 26px; color: var(--teal-dark); margin: 0; }
.sib-step h3 { font-family: var(--label); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); margin: 10px 0 8px; }
.sib-step p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

.sib-wholesale-form { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-wholesale-form__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.sib-wholesale-form__inner h2 { margin: 16px 0 30px; }
.sib-form { text-align: left; }
.sib-form__row { margin-bottom: 18px; }
.sib-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sib-form label { display: block; font-family: var(--label); font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.sib-form input, .sib-form select, .sib-form textarea {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; box-sizing: border-box;
}
.sib-form input:focus, .sib-form select:focus, .sib-form textarea:focus { outline: none; border-color: var(--forest); }
.sib-form button { margin-top: 6px; width: 100%; }
.sib-form-notice { padding: 14px 16px; border-radius: 8px; font-size: 14.5px; margin: 0 0 24px; }
.sib-form-notice--success { background: var(--pale-mint); color: var(--forest); }
.sib-form-notice--error { background: #FBE8E8; color: #8A2C2C; }
.sib-wholesale-form__direct { margin-top: 24px; font-size: 14px; color: var(--muted); }
.sib-wholesale-form__direct a { color: var(--forest); font-weight: 600; }

@media (max-width: 900px) {
  .sib-offer-grid { grid-template-columns: 1fr; }
  .sib-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sib-steps { grid-template-columns: 1fr; }
  .sib-form__row--split { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   REPAIRS PAGE
───────────────────────────────────────────── */
.sib-page.sib-repairs { max-width: none; padding: 0; }
.sib-page.sib-subscriptions { max-width: none; padding: 0; }

.sib-brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 20px; }
.sib-brand-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; }
.sib-brand-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--forest); margin: 0 0 10px; }
.sib-brand-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.sib-brands-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

.sib-steps--3 { grid-template-columns: repeat(3, 1fr); }

.sib-trust-note { max-width: 760px; padding-top: 0; padding-bottom: 0; }
.sib-trust-note p { font-size: 16px; line-height: 1.75; color: var(--ink); text-align: center; margin: 0 auto 18px; }
.sib-trust-note p:last-child { margin-bottom: 0; }
.sib-areas-note { font-size: 14.5px; color: var(--muted); }

.sib-repairs-form { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sib-repairs-form__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.sib-repairs-form__inner h2 { margin: 16px 0 30px; }
.sib-repairs-form__direct { margin-top: 24px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.sib-repairs-form__direct a { color: var(--forest); font-weight: 600; }

@media (max-width: 900px) {
  .sib-brands-grid { grid-template-columns: 1fr; }
  .sib-steps--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sib-steps--3 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   SUBSCRIPTIONS PAGE
───────────────────────────────────────────── */
/* The hero photo is a native 3:2 landscape shot; the shared 4/5 portrait ratio
   hard-cropped it AND left it towering over a much shorter text column, so this
   page keeps the image landscape and the two columns roughly level. */
.sib-page.sib-subscriptions .sib-hero__visual .sib-media { aspect-ratio: 3 / 2; }
/* Columns stretch to the taller (text) side, so centre the shorter landscape
   image in its column rather than leaving all the slack under it. */
.sib-page.sib-subscriptions .sib-hero__visual { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sib-page.sib-subscriptions .sib-hero__visual > .wp-block-group__inner-container { width: 100%; }

/* Clear the sticky header when the hero CTAs jump down the page. */
.sib-page.sib-subscriptions [id] { scroll-margin-top: 130px; }

/* ─────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────── */
.sib-page.sib-about { max-width: none; padding: 0; }

/* The "Three families, one roastery" intro sits in a .sib-section__head.sib-section
   div (80px bottom padding + 36px margin-bottom), directly followed by the first
   .sib-heritage timeline row (88px top padding) — stacked, that's ~200px of dead
   space. Collapse it down to one section's worth of breathing room. */
.sib-about .sib-section__head.sib-section { padding-bottom: 0; }
.sib-about .sib-section + .sib-heritage { padding-top: 44px; }

.sib-approach { max-width: 960px; margin: 0 auto; padding: 70px 32px; text-align: center; }
.sib-approach p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 14px 0 0; }
.sib-approach__label { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); margin: 32px 0 0 !important; }
.sib-approach__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; margin-top: 28px; }
.sib-approach__item { flex: 0 1 240px; max-width: 240px; }
.sib-approach__icon { width: 42px; height: 42px; margin: 0 auto 16px; color: var(--teal-dark); }
.sib-approach__item h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--forest); margin: 0 0 8px; }
.sib-approach__item p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

.sib-team-note { max-width: 720px; margin: 0 auto; text-align: center; }
.sib-team-note p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 14px 0 0; }

.sib-cta-band { max-width: 1000px; margin: 0 auto; padding: 60px 32px 90px; text-align: center; }
.sib-cta-band .wp-block-buttons { justify-content: center; gap: 16px; flex-wrap: wrap; }
.sib-cta-band p { margin-top: 20px; font-family: var(--serif); font-size: 18px; color: var(--forest); }

/* ─────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────── */
.sib-page.sib-contact { max-width: none; padding: 0; }
.sib-page.sib-contact .sib-hero { grid-template-columns: 1fr; text-align: center; }
.sib-page.sib-contact .sib-hero > div { max-width: 700px; margin: 0 auto; }
.sib-page.sib-contact .sib-hero__ctas { justify-content: center; }

.sib-contact-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.sib-contact-details h2 { margin: 16px 0 20px; }
.sib-contact-details__row { font-size: 15.5px; line-height: 1.8; color: var(--muted); margin: 0 0 6px; }
.sib-contact-details__row a { color: var(--forest); font-weight: 600; }
.sib-contact-details__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 20px; }

.sib-social-links { display: flex; gap: 14px; }
.sib-social-links__item {
  display: inline-flex; align-items: center; font-family: var(--label);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--forest); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 18px; text-decoration: none; transition: all 180ms ease;
}
.sib-social-links__item:hover { background: var(--pale-mint); border-color: var(--forest); color: var(--forest); }

/* Aspect-ratio wrapper keeps the Google Maps iframe from causing layout
   shift while it loads. */
.sib-map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.sib-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.sib-landmarks { max-width: 900px; padding-top: 0; padding-bottom: 56px; }
.sib-landmarks p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0; }

.sib-contact-form { max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; }
.sib-contact-form__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.sib-contact-form__inner h2 { margin: 16px 0 30px; }

/* Honeypot — visually hidden but still present/tabbable-avoided for bots
   that ignore CSS. Never use display:none, which some spam bots skip. */
.sib-form__hp {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .sib-contact-info { grid-template-columns: 1fr; }
  .sib-map { aspect-ratio: 16 / 10; }
}

/* ─────────────────────────────────────────────
   CART — SUBSCRIBE & SAVE, PER CART LINE
   Server-rendered below the Cart block, then moved by main.js into each
   cart line's own cell (see inc/cart-subscribe.php for why it starts out
   below). Two presentations, therefore: the standalone fallback card, and
   the compact --inline one used once a control sits in its row.
───────────────────────────────────────────── */
.sib-cart-subscribe { margin: 8px 0 40px; }
.sib-cart-subscribe__pending {
  padding: 24px 26px;
  background: var(--teal-pale); border: 1px solid var(--pale-mint); border-radius: 14px;
}
.sib-cart-subscribe__pending[hidden] { display: none; }
.sib-cart-subscribe__title {
  font-family: var(--serif); font-size: 22px; line-height: 1.25;
  color: var(--forest); margin: 0 0 6px;
}
.sib-cart-subscribe__intro { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.sib-cart-subscribe__notice {
  font-size: 14px; margin: 0 0 18px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
}
.sib-cart-subscribe__notice--success { border-color: var(--teal-dark); color: var(--forest); }
.sib-cart-subscribe__notice--error { border-color: #c0392b; background: #fdecea; color: #922b21; }

.sib-cart-subscribe__item {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin: 0 0 14px;
}
.sib-cart-subscribe__name {
  font-family: var(--label); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px;
}
.sib-cart-subscribe__choice {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 8px;
}
.sib-cart-subscribe__choice input { cursor: pointer; margin: 0; }
.sib-cart-subscribe__choice--disabled { cursor: default; color: var(--muted); font-weight: 400; }
.sib-cart-subscribe__choice--disabled input { cursor: not-allowed; }
.sib-cart-subscribe__choice--disabled a { color: var(--forest); text-decoration: underline; font-weight: 600; }

.sib-cart-subscribe__opts {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 10px 0 0 26px; padding: 14px 16px;
  background: var(--teal-pale); border-radius: 8px;
}
.sib-cart-subscribe__opts[hidden] { display: none; }
.sib-cart-subscribe__opt { flex: 1 1 180px; margin: 0; }
.sib-cart-subscribe__opt .sib-sel-label { margin: 0 0 6px; }
.sib-cart-subscribe__opt select {
  width: 100%; padding: 11px 12px; font-family: var(--body); font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer;
}
.sib-cart-subscribe__submit { margin-top: 12px; }

/* Script-driven: the Update button only earns its space once that line has
   actually been edited. With JS off the --js class never lands, so the button
   stays visible and the form is still submittable. */
.sib-cart-subscribe__item--js .sib-cart-subscribe__submit { display: none; }
.sib-cart-subscribe__item--js.sib-cart-subscribe__item--dirty .sib-cart-subscribe__submit { display: inline-block; }

/* Inline: sitting inside a cart line, under that product's own name, price and
   metadata. Kept quiet — the row already says which product this is. */
.sib-cart-subscribe__item--inline {
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 12px 0 0; margin: 12px 0 0;
}
.sib-cart-subscribe__item--inline .sib-cart-subscribe__name { display: none; }
.sib-cart-subscribe__item--inline .sib-cart-subscribe__choices { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sib-cart-subscribe__item--inline .sib-cart-subscribe__choice { font-size: 13px; font-weight: 400; margin: 0; }
.sib-cart-subscribe__item--inline .sib-cart-subscribe__opts {
  margin: 10px 0 0; padding: 12px 14px;
}
.sib-cart-subscribe__item--inline .sib-cart-subscribe__opt select { padding: 8px 10px; font-size: 13px; }

@media (max-width: 600px) {
  .sib-cart-subscribe__pending { padding: 20px 18px; }
  .sib-cart-subscribe__opts { margin-left: 0; }
}