/* ============================================================================
   House of BKN — interior pages
   About · Contact · Knowledge Base · Delivery & Returns · Privacy & Terms ·
   Track Order

   Kept apart from bkn-core.css so the approved homepage cannot be disturbed by
   work on these pages. Everything here is addressed through the stable
   _element_id values the generators set, because Elementor containers have no
   CSS-classes control — only widgets do.
   ========================================================================= */

/* --------------------------------------------------------------- variables */
:root {
  --bkn-cream: #FBF8F4;
  --bkn-band: #F3EFE7;
  --bkn-green: #2A4635;
  --bkn-leaf: #3F6B52;
  --bkn-ink: #221F1B;
  --bkn-body: #5C564D;
  --bkn-muted: #8A8175;
  --bkn-light: #F6F1E7;
  --bkn-terra: #B4553F;
  --bkn-line: #E9E2D6;
  --bkn-line2: #E5DDD0;
  --bkn-line3: #EFE9DF;
}

/* --------------------------------------------------------------- utilities */

/*
 * The design's rows are all `repeat(auto-fit, minmax(N, 1fr))`. Elementor lays
 * containers out with percentage flex columns, which cannot express that: four
 * 25% columns plus three gaps overflow the row and the last card wraps onto a
 * line of its own. Re-declaring the row as a grid restores the original
 * behaviour and drops the need for width breakpoints entirely.
 */
/* zero Elementor's default 10px padding on the plain rows we lay out ourselves */
#bkn-ab-steprow, #bkn-ab-photos, #bkn-ab-photorow, #bkn-ab-values,
#bkn-ab-pillars, #bkn-ab-ctabtns,
#bkn-ct-channels, #bkn-ct-hours, #bkn-ct-faqgrid, #bkn-ct-actions,
#bkn-kb-starters, #bkn-kb-routine, #bkn-kb-ing, #bkn-kb-checks, #bkn-kb-guarbtns,
#bkn-dl-highlights, #bkn-dl-zones, #bkn-dl-pay, #bkn-dl-returns, #bkn-dl-guar,
#bkn-pv-toc, #bkn-pv-body {
  padding: 0;
}

/* ============================================================== ABOUT (937) */

/*
 * Measures are given in ch, which resolves against the FONT OF THE ELEMENT IT IS
 * SET ON. Putting it on the Elementor widget wrapper would measure against the
 * 16px body font and clamp a 68px display heading to about 150px, so every one
 * of these targets the heading or paragraph itself.
 */
#bkn-ab-hero-inner > .e-con { max-width: 100%; }
#bkn-ab-h1 .elementor-heading-title { max-width: 15ch; }
#bkn-ab-heroP p { max-width: 56ch; }

/* stats — original: repeat(auto-fit, minmax(210px, 1fr)) */
#bkn-ab-stats > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}

/* why we curate — original: repeat(auto-fit, minmax(320px, 1fr)) */
#bkn-ab-curate > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
}
#bkn-ab-curateH .elementor-heading-title { max-width: 22ch; }

/*
 * Pillar numerals come from a counter rather than typed-in digits, so a client
 * reordering the list in Elementor gets 1,2,3,4 rather than a broken sequence.
 */
#bkn-ab-pillars { counter-reset: bkn-pillar; }
#bkn-ab-pillars > .elementor-widget {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
#bkn-ab-pillars > .elementor-widget::before {
  counter-increment: bkn-pillar;
  content: counter(bkn-pillar);
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: #EAF0E7;
  color: var(--bkn-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 'Nunito Sans', system-ui, sans-serif;
}
#bkn-ab-pillars .elementor-icon-box-wrapper { display: block; text-align: left; }
#bkn-ab-pillars .elementor-icon-box-title { margin: 0; }

/* store photographs — fixed ratios so the column keeps the original rhythm */
.bkn-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bkn-shot-wide img { aspect-ratio: 16 / 10; }
.bkn-shot-sq img { aspect-ratio: 1 / 1; }
#bkn-ab-photorow { display: grid; grid-template-columns: 1fr 1fr; }

/* four-step sourcing — original: repeat(auto-fit, minmax(240px, 1fr)) */
#bkn-ab-steprow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#bkn-ab-steprow > .e-con { height: 100%; }
#bkn-ab-steprow > .e-con > .e-con { height: 100%; }

/* who we serve — original: repeat(auto-fit, minmax(300px, 1fr)) */
#bkn-ab-serve > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
#bkn-ab-serveH .elementor-heading-title { max-width: 20ch; }

/* closing CTA — copy left, buttons right, wrapping together on narrow screens */
#bkn-ab-cta > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
#bkn-ab-ctaH .elementor-heading-title { max-width: 24ch; }
#bkn-ab-ctaP p { max-width: 52ch; }
#bkn-ab-ctabtns { flex: 0 0 auto; }

@media (max-width: 900px) {
  #bkn-ab-ctabtns { justify-content: flex-start; }
}

/*
 * Elementor gives every column container a percentage width (25%, 50%, …). In a
 * flex row that is the layout; inside the grids declared above it makes each
 * card a quarter of its own track. Releasing the width lets the track govern.
 */
#bkn-ab-stats > .e-con-inner > .e-con,
#bkn-ab-steprow > .e-con,
#bkn-ab-curate > .e-con-inner > .e-con,
#bkn-ab-serve > .e-con-inner > .e-con,
#bkn-ab-photorow > .e-con,
#bkn-ab-photos,
#bkn-ab-values {
  width: auto;
}

/* the CTA band is a two-part flex row, not a grid: copy grows, buttons do not */
#bkn-ab-cta > .e-con-inner > .e-con:first-child {
  flex: 1 1 420px;
  width: auto;
  min-width: 0;
}
#bkn-ab-ctabtns {
  flex: 0 0 auto;
  width: auto;
}

/* the shopfront is shot from below, so a square crop should favour the sign */
.bkn-shot-front img { object-position: center 32%; }

/* ============================================================ CONTACT (938) */

#bkn-ct-h1 .elementor-heading-title { max-width: 19ch; }
#bkn-ct-heroP p { max-width: 58ch; }
#bkn-ct-formP p { max-width: 52ch; }

/* channel cards — original: repeat(auto-fit, minmax(240px, 1fr)) */
#bkn-ct-channels > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
#bkn-ct-channels > .e-con-inner > .e-con,
#bkn-ct-channels > .e-con-inner > .e-con > .e-con { width: auto; height: 100%; }

/* form beside the store card — original: repeat(auto-fit, minmax(320px, 1fr)) */
#bkn-ct-main > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
#bkn-ct-main > .e-con-inner > .e-con { width: auto; }
#bkn-ct-aside { width: auto; }
.bkn-shot-43 img { aspect-ratio: 4 / 3; }

/*
 * The shopfront in the Contact aside is a near-square photograph, so the shared
 * 4:3 crop cut the top off the sign. Let it keep its own proportions: the column
 * has no fixed height, so nothing below it moves.
 */
#bkn-ct-aside .bkn-shot-front img {
  aspect-ratio: auto;
  height: auto;
  object-fit: initial;
  object-position: center;
}

/* opening hours: day left, time right, hairline between */
#bkn-ct-hours > .e-con { width: auto; }
#bkn-ct-hours > .e-con:last-child { border-bottom: 0; padding-bottom: 0; }
#bkn-ct-hours p { margin: 0; }

/*
 * WPForms ships with its own stylesheet switched off (Settings -> disable-css
 * = 3), so the consultation form is dressed here, the same way the Contact
 * Form 7 version was. Selectors are scoped to #bkn-ct-form so nothing here
 * touches the newsletter form on the homepage.
 */
#bkn-ct-form .wpforms-container { margin: 0; }
#bkn-ct-form .wpforms-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#bkn-ct-form .wpforms-field-container { display: contents; }
#bkn-ct-form .wpforms-field { margin: 0; padding: 0; grid-column: 1 / -1; }
/* WPForms' own layout classes, reproduced without its stylesheet */
#bkn-ct-form .wpforms-one-half { grid-column: span 1; }
#bkn-ct-form .wpforms-submit-container { grid-column: 1 / -1; margin: 0; }

#bkn-ct-form .wpforms-field-label {
  display: block;
  font: 400 12.5px/1.6 "Nunito Sans", system-ui, sans-serif;
  color: #6C665C;
}
#bkn-ct-form .wpforms-required-label { color: #B4553F; border: 0; }
#bkn-ct-form .wpforms-field-sublabel,
#bkn-ct-form .wpforms-field-description {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #8A8175;
}

#bkn-ct-form input[type="text"],
#bkn-ct-form input[type="tel"],
#bkn-ct-form input[type="email"],
#bkn-ct-form select,
#bkn-ct-form textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #DCD3C6;
  border-radius: 11px;
  padding: 13px 14px;
  font: 400 14.5px/1.6 "Nunito Sans", system-ui, sans-serif;
  color: var(--bkn-ink);
  background: #FCFAF6;
  outline: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* the select loses its arrow with appearance:none, so draw one back on */
#bkn-ct-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C665C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
#bkn-ct-form textarea { min-height: 132px; resize: vertical; }
#bkn-ct-form input:focus,
#bkn-ct-form select:focus,
#bkn-ct-form textarea:focus {
  border-color: var(--bkn-green);
  box-shadow: 0 0 0 3px rgba(42, 70, 53, .10);
}

#bkn-ct-form button[type="submit"],
#bkn-ct-form .wpforms-submit {
  justify-self: start;
  width: auto;
  background: var(--bkn-green);
  color: var(--bkn-light);
  border: 0;
  border-radius: 999px;
  padding: 15px 32px;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
#bkn-ct-form .wpforms-submit:hover { background: var(--bkn-ink); transform: translateY(-2px); }
#bkn-ct-form .wpforms-submit[disabled] { opacity: .6; cursor: default; transform: none; }
#bkn-ct-form .wpforms-submit-spinner { margin-left: 10px; vertical-align: middle; }

/* validation */
#bkn-ct-form label.wpforms-error,
#bkn-ct-form em.wpforms-error {
  display: block;
  margin-top: 5px;
  font: 400 12.5px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: #8C3F2B;
  font-style: normal;
}
#bkn-ct-form input.wpforms-error,
#bkn-ct-form select.wpforms-error,
#bkn-ct-form textarea.wpforms-error { border-color: #C08070; }

#bkn-ct-form .wpforms-confirmation-container,
#bkn-ct-form .wpforms-confirmation-container-full,
#bkn-ct-form .wpforms-error-container {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid #CFE0C9;
  background: #F2F7F0;
  border-radius: 12px;
  padding: 14px 16px;
  font: 400 14px/1.6 "Nunito Sans", system-ui, sans-serif;
  color: #2F4A38;
}
#bkn-ct-form .wpforms-error-container { border-color: #E4C5BB; background: #FBF2EF; color: #7A3B29; }
#bkn-ct-form .wpforms-confirmation-container p:last-child,
#bkn-ct-form .wpforms-error-container p:last-child { margin-bottom: 0; }

/* WPForms' aria-hidden anti-spam fields must not claim a grid track */
#bkn-ct-form .wpforms-form { position: relative; }
#bkn-ct-form .wpforms-field:has(> label[aria-hidden="true"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  #bkn-ct-form .wpforms-form { grid-template-columns: minmax(0, 1fr); }
  #bkn-ct-form .wpforms-one-half { grid-column: 1 / -1; }
}

#bkn-ct-consent a { color: var(--bkn-leaf); text-decoration: underline; }

/* the map sits full-bleed with the directions button floating over its foot */
#bkn-ct-mapband { position: relative; }
#bkn-ct-mapframe iframe { display: block; width: 100%; border: 0; }
#bkn-ct-mapcta {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: auto;
  z-index: 2;
}
#bkn-ct-mapcta .elementor-button {
  box-shadow: 0 14px 30px rgba(34, 31, 27, .16);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
#bkn-ct-mapcta .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(34, 31, 27, .22);
}

/* FAQ pairs — two readable columns, hairline above each */
#bkn-ct-faqgrid,
#bkn-dl-faqgrid,
#bkn-kb-faqgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
#bkn-ct-faqgrid > .e-con,
#bkn-ct-faqgrid > .e-con > .e-con,
#bkn-dl-faqgrid > .e-con,
#bkn-dl-faqgrid > .e-con > .e-con,
#bkn-kb-faqgrid > .e-con,
#bkn-kb-faqgrid > .e-con > .e-con { width: auto; }

/* =================================================== DELIVERY & RETURNS (940) */

#bkn-dl-h1 .elementor-heading-title { max-width: 20ch; }
#bkn-dl-introP p { max-width: 62ch; }
#bkn-dl-zonesP p { max-width: 70ch; }
#bkn-dl-guarH .elementor-heading-title { max-width: 22ch; }
#bkn-dl-guarP p { max-width: 56ch; }

/* glass highlight chips over the hero photograph */
#bkn-dl-highlights > .e-con { width: auto; backdrop-filter: blur(6px); }

/*
 * Delivery zones. Built as containers rather than a pasted <table> so each cell
 * stays an editable widget; the column ratios come from the original.
 */
#bkn-dl-zones { overflow: hidden; }
#bkn-dl-zones > .e-con { width: auto; }
#bkn-dl-zonehead,
#bkn-dl-zones > .e-con[id^="bkn-dl-zonerow-"] {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
#bkn-dl-zonehead > .e-con,
#bkn-dl-zones > .e-con[id^="bkn-dl-zonerow-"] > .e-con { width: auto; }
#bkn-dl-zones p { margin: 0; }

/* payment and returns columns — original: repeat(auto-fit, minmax(300px, 1fr)) */
#bkn-dl-split > .e-con-inner,
#bkn-dl-guarsec > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
#bkn-dl-split > .e-con-inner > .e-con,
#bkn-dl-guarsec > .e-con-inner > .e-con { width: auto; }

#bkn-dl-pay > .e-con { width: auto; }
#bkn-dl-pay > .e-con > .e-con:first-child { flex: 0 0 auto; width: auto; align-self: flex-start; }
#bkn-dl-pay > .e-con > .e-con:last-child { flex: 1 1 auto; width: auto; min-width: 0; }
#bkn-dl-returns > .e-con { width: auto; }
#bkn-dl-returns > .e-con:last-child { border-bottom: 0; }
#bkn-dl-guar > .e-con { width: auto; }

/* ==================================================== PRIVACY & TERMS (941) */

#bkn-pv-h1 .elementor-heading-title { max-width: 22ch; }
#bkn-pv-intro p { max-width: 62ch; }

#bkn-pv-main > .e-con-inner { align-items: flex-start; }
#bkn-pv-main > .e-con-inner > .e-con { width: auto; }
#bkn-pv-toc { flex: 0 0 250px; position: sticky; top: 120px; }
#bkn-pv-body { flex: 1 1 300px; min-width: 300px; max-width: 78ch; }

#bkn-pv-toclist .elementor-icon-list-item { display: block; }
#bkn-pv-toclist .elementor-icon-list-item a {
  display: block;
  padding: 9px 12px;
  border-left: 2px solid var(--bkn-line2);
  border-radius: 0 9px 9px 0;
  color: var(--bkn-body);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#bkn-pv-toclist .elementor-icon-list-item a:hover {
  background: var(--bkn-band);
  color: var(--bkn-ink);
  border-left-color: var(--bkn-green);
}
#bkn-pv-toclist .elementor-icon-list-text { padding: 0; }

@media (max-width: 900px) {
  /* on a phone a sticky sidebar just eats the screen */
  #bkn-pv-toc { position: static; flex-basis: 100%; }
}

/* ======================================================= TRACK ORDER (942) */

#bkn-tr-sub p { max-width: 60ch; }
#bkn-tr-main > .e-con-inner { max-width: 1000px; margin-inline: auto; }
#bkn-tr-form { box-shadow: 0 18px 44px rgba(34, 31, 27, .06); }

/* WooCommerce's tracking form, dressed to match the original's lookup card */
#bkn-tr-form .track_order {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  margin: 0;
}
#bkn-tr-form .track_order p { margin: 0; }
#bkn-tr-form .form-row { width: auto; padding: 0; margin: 0; }
#bkn-tr-form label {
  display: block;
  margin-bottom: 7px;
  font: 600 11px/1.4 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bkn-muted);
}
#bkn-tr-form input[type="text"],
#bkn-tr-form input[type="email"] {
  width: 100%;
  border: 1px solid #DCD3C6;
  border-radius: 12px;
  padding: 15px 16px;
  font: 400 15px/1.4 "Nunito Sans", system-ui, sans-serif;
  background: #FCFAF6;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#bkn-tr-form input:focus {
  border-color: var(--bkn-green);
  box-shadow: 0 0 0 3px rgba(42, 70, 53, .10);
}
#bkn-tr-form button[type="submit"] {
  background: var(--bkn-green);
  color: var(--bkn-light);
  border: 0;
  border-radius: 999px;
  padding: 16px 30px;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
#bkn-tr-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(42, 70, 53, .26);
}
/* the result WooCommerce prints once an order resolves */
#bkn-tr-form .woocommerce-order-overview,
#bkn-tr-form .shop_table {
  margin-top: 22px;
  font-size: 14.5px;
}
#bkn-tr-form .woocommerce-info,
#bkn-tr-form .woocommerce-error {
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 14px;
}

/* the five stages, as a legend of what each order status means */
#bkn-tr-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  counter-reset: bkn-stage;
}
#bkn-tr-steps > .e-con {
  width: auto;
  position: relative;
  padding-left: 38px;
}
#bkn-tr-steps > .e-con::before {
  counter-increment: bkn-stage;
  content: counter(bkn-stage);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bkn-green);
  color: var(--bkn-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
}
#bkn-tr-help a { color: var(--bkn-leaf); text-decoration: underline; }

@media (max-width: 720px) {
  #bkn-tr-form .track_order { grid-template-columns: 1fr; }
  #bkn-tr-form button[type="submit"] { justify-self: start; }
}

/* ===================================================== KNOWLEDGE BASE (939) */

#bkn-kb-h1 .elementor-heading-title { max-width: 20ch; }
#bkn-kb-introP p { max-width: 62ch; }
#bkn-kb-routineP p,
#bkn-kb-ingP p { max-width: 70ch; }
#bkn-kb-authH .elementor-heading-title { max-width: 22ch; }

/* search box, sitting on the hero photograph */
.bkn-kb-search {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin-top: 34px;
  padding: 6px 8px 6px 22px;
  border: 1px solid rgba(246, 241, 231, .28);
  border-radius: 999px;
  background: rgba(23, 32, 25, .55);
  backdrop-filter: blur(6px);
}
.bkn-kb-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--bkn-light);
  padding: 12px 0;
  font: 400 15px/1.4 "Nunito Sans", system-ui, sans-serif;
}
.bkn-kb-search input::placeholder { color: rgba(246, 241, 231, .62); }
.bkn-kb-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.bkn-kb-count {
  flex: 0 0 auto;
  background: var(--bkn-leaf);
  color: var(--bkn-light);
  border-radius: 999px;
  padding: 11px 20px;
  font: 700 11.5px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* topic pills */
.bkn-kb-pills { display: flex; gap: 9px; flex-wrap: wrap; }
.bkn-kb-pill {
  cursor: pointer;
  font: 400 12.5px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .06em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #DCD3C6;
  background: transparent;
  color: #5C5750;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bkn-kb-pill:hover { border-color: var(--bkn-green); color: var(--bkn-green); }
.bkn-kb-pill.is-active {
  background: var(--bkn-green);
  border-color: var(--bkn-green);
  color: var(--bkn-light);
}

/* start-here cards and the routine row */
#bkn-kb-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#bkn-kb-routine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
#bkn-kb-ing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
#bkn-kb-starters > .e-con,
#bkn-kb-starters > .e-con > .e-con,
#bkn-kb-routine > .e-con,
#bkn-kb-routine > .e-con > .e-con,
#bkn-kb-ing > .e-con,
#bkn-kb-ing > .e-con > .e-con { width: auto; height: 100%; }
#bkn-kb-starters a { color: inherit; }
#bkn-kb-starters > .e-con > .e-con { transition: background-color .2s ease; }
#bkn-kb-starters > .e-con > .e-con:hover { background: #EDE6DA; }
#bkn-kb-ing p { margin: 0; }

/*
 * The guides. Elementor's accordion supplies the open/close behaviour; these
 * rules give each item the card shape and the three-part title the design uses.
 */
#bkn-kb-articles .elementor-accordion { display: flex; flex-direction: column; gap: 14px; }
#bkn-kb-articles .elementor-accordion-item {
  background: #fff;
  border: 1px solid var(--bkn-line);
  border-radius: 20px;
  overflow: hidden;
}
#bkn-kb-articles .elementor-tab-title {
  padding: 26px 28px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
#bkn-kb-articles .elementor-tab-title a,
#bkn-kb-articles .elementor-tab-title .elementor-accordion-title {
  flex: 1;
  min-width: 0;
  display: block;
}
#bkn-kb-articles .elementor-accordion-icon {
  order: 2;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #DCD3C6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bkn-body);
  font-size: 13px;
  transition: transform .22s ease, border-color .22s ease;
}
#bkn-kb-articles .elementor-tab-title.elementor-active .elementor-accordion-icon {
  border-color: var(--bkn-green);
  color: var(--bkn-green);
}
.bkn-kb-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bkn-kb-topic {
  font: 400 10.5px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bkn-leaf);
  background: #EAF0E7;
  border-radius: 999px;
  padding: 5px 11px;
}
.bkn-kb-read {
  font: 400 12.5px/1 "Nunito Sans", system-ui, sans-serif;
  color: var(--bkn-muted);
}
.bkn-kb-title {
  display: block;
  margin-top: 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.2;
  color: var(--bkn-ink);
  text-wrap: pretty;
}
.bkn-kb-summary {
  display: block;
  margin-top: 10px;
  max-width: 78ch;
  font: 400 15px/1.75 "Nunito Sans", system-ui, sans-serif;
  color: var(--bkn-body);
}
#bkn-kb-articles .elementor-tab-content {
  border: 0;
  padding: 0 28px 30px;
  border-top: 1px solid var(--bkn-line3);
  margin: 0 28px 24px;
  padding: 24px 0 0;
}
.bkn-kb-block { margin-bottom: 20px; }
.bkn-kb-block h4 {
  margin: 0 0 8px;
  font: 700 13px/1.4 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bkn-green);
}
.bkn-kb-block p {
  margin: 0;
  max-width: 82ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: #3D382F;
}
.bkn-kb-shop {
  background: var(--bkn-band);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.bkn-kb-shop-copy { flex: 1; min-width: 220px; }
.bkn-kb-shop-label {
  font: 400 11px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bkn-muted);
}
.bkn-kb-shop-copy p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bkn-body2, #4A443C);
}
.bkn-kb-shop-cta {
  flex: 0 0 auto;
  background: var(--bkn-green);
  color: var(--bkn-light);
  border-radius: 999px;
  padding: 13px 24px;
  font: 700 11.5px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease;
}
.bkn-kb-shop-cta:hover { background: var(--bkn-ink); color: var(--bkn-light); }
.bkn-kb-anchor { display: none; }

/* authenticity checks — same counter treatment as the About pillars */
#bkn-kb-authsec > .e-con-inner { align-items: start; }
#bkn-kb-authsec > .e-con-inner > .e-con { width: auto; }
#bkn-kb-checks { counter-reset: bkn-check; }
#bkn-kb-checks > .elementor-widget { display: flex; gap: 16px; align-items: flex-start; }
#bkn-kb-checks > .elementor-widget::before {
  counter-increment: bkn-check;
  content: counter(bkn-check);
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bkn-ink);
  color: var(--bkn-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Nunito Sans", system-ui, sans-serif;
}
#bkn-kb-checks .elementor-icon-box-wrapper { display: block; text-align: left; }
#bkn-kb-checks .elementor-icon-box-title { margin: 0; }
#bkn-kb-guarcard { align-self: start; }
#bkn-kb-guarbtns > .elementor-widget { width: 100%; }

@media (max-width: 640px) {
  .bkn-kb-search { flex-wrap: wrap; border-radius: 20px; padding: 12px 14px; }
  .bkn-kb-count { width: 100%; text-align: center; }
  .bkn-kb-title { font-size: 24px; }
  #bkn-kb-articles .elementor-tab-title { padding: 20px; gap: 12px; }
  #bkn-kb-articles .elementor-tab-content { margin-inline: 20px; }
}

/* Elementor wraps the whole accordion title in an anchor, which underlines the
   pill, the read time and the summary along with it. The original has none. */
#bkn-kb-articles .elementor-tab-title a,
#bkn-kb-articles .elementor-tab-title a:hover,
#bkn-kb-articles .elementor-accordion-title,
#bkn-kb-starters a,
#bkn-kb-starters a:hover { text-decoration: none; }
#bkn-kb-articles .elementor-tab-title { cursor: pointer; }
#bkn-kb-articles .elementor-tab-title:hover .bkn-kb-title { color: var(--bkn-green); }
.bkn-kb-title { transition: color .2s ease; }

/*
 * WooCommerce's tracking form opens with its own instruction paragraph and a
 * float-clearing div. Both are grid children here: the paragraph steals the
 * first column and pushes the billing-email field off the card. The paragraph
 * also repeats the intro sitting directly above it, so it goes.
 */
#bkn-tr-form .track_order > p:not([class]),
#bkn-tr-form .track_order > .clear { display: none; }
#bkn-tr-form .track_order .form-row-first,
#bkn-tr-form .track_order .form-row-last { float: none; width: auto; }

/*
 * The result WooCommerce prints once an order resolves. It marks the order
 * number, date and status with <mark>, which the browser paints highlighter
 * yellow — replaced here with the brand's own emphasis.
 */
#bkn-tr-form .woocommerce-thankyou-order-details,
#bkn-tr-form p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--bkn-body2, #4A443C);
}
#bkn-tr-form mark {
  background: transparent;
  color: var(--bkn-green);
  font-weight: 700;
}
#bkn-tr-form h2 {
  margin: 26px 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--bkn-ink);
}
#bkn-tr-form table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bkn-line);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
#bkn-tr-form table.shop_table th,
#bkn-tr-form table.shop_table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--bkn-line3);
  text-align: left;
  font-size: 14.5px;
}
#bkn-tr-form table.shop_table thead th {
  background: var(--bkn-band);
  font: 600 11px/1.4 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C665C;
}
#bkn-tr-form table.shop_table tr:last-child td,
#bkn-tr-form table.shop_table tr:last-child th { border-bottom: 0; }
#bkn-tr-form table.shop_table a { color: var(--bkn-ink); text-decoration: none; }
#bkn-tr-form table.shop_table a:hover { color: var(--bkn-green); }
#bkn-tr-form address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--bkn-body);
  border: 1px solid var(--bkn-line);
  border-radius: 14px;
  padding: 16px 18px;
}
#bkn-tr-form .woocommerce-customer-details { margin-top: 4px; }
/* WooCommerce's own table rules add vertical rules that overhang the last row */
#bkn-tr-form table.shop_table,
#bkn-tr-form table.shop_table th,
#bkn-tr-form table.shop_table td { border-left: 0; border-right: 0; }
#bkn-tr-form table.shop_table { border: 1px solid var(--bkn-line); }
#bkn-tr-form table.shop_table td:last-child,
#bkn-tr-form table.shop_table th:last-child { text-align: right; }

/*
 * On a phone the four zone columns collapse to about 70px each and every cell
 * wraps to five lines. A price table is worth reading, so below 760px the card
 * becomes its own horizontal scroller at a width the text actually fits —
 * the page itself never scrolls sideways.
 */
@media (max-width: 760px) {
  #bkn-dl-zones {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #bkn-dl-zonehead,
  #bkn-dl-zones > .e-con[id^="bkn-dl-zonerow-"] { min-width: 620px; }
  #bkn-dl-zonehead > .e-con { padding: 14px 16px; }
  #bkn-dl-zones > .e-con[id^="bkn-dl-zonerow-"] > .e-con { padding: 16px; }
}

/* ===================================================== PAGE HERO BACKGROUNDS

   Elementor writes the literal string `background-position:custom` into the
   per-post CSS instead of resolving background_xpos/background_ypos, so every
   container with a custom focal point falls back to 0% 0% and shows the top-
   left corner of its photograph. The homepage hero already carries this same
   correction; these are the interior page heroes.

   The gradients are each page's own, three stops rather than two: dense under
   the copy on the left, then clearing off the photograph far earlier than a
   straight two-stop fade, which is what lets the image actually read.
   ========================================================================= */

#bkn-ab-hero, #bkn-ct-hero, #bkn-kb-hero, #bkn-dl-hero {
  background-position: center 38% !important;
}

#bkn-ab-hero::before, #bkn-kb-hero::before {
  background-image: linear-gradient(90deg,
    rgba(29, 44, 34, .72) 0%,
    rgba(29, 44, 34, .30) 60%,
    rgba(29, 44, 34, .12) 100%) !important;
}
#bkn-dl-hero::before {
  background-image: linear-gradient(90deg,
    rgba(29, 44, 34, .74) 0%,
    rgba(29, 44, 34, .30) 62%,
    rgba(29, 44, 34, .14) 100%) !important;
}
#bkn-ct-hero::before {
  background-image: linear-gradient(90deg,
    rgba(24, 22, 19, .74) 0%,
    rgba(24, 22, 19, .26) 70%,
    /* the original holds flat past 70% rather than fading further */
    rgba(24, 22, 19, .26) 100%) !important;
}

/*
 * Page-hero scrims. On desktop the gradient runs left to right, clearing the
 * photograph on the right where there is no copy. On a phone the copy spans the
 * full width, so a left-to-right scrim leaves the last words sitting on a bright
 * highlight. Below 900px the gradient turns downward and stays dense the whole
 * way across; Elementor paints container overlays on ::before.
 */
@media (max-width: 900px) {
  #bkn-ab-hero::before {
    background-image: linear-gradient(175deg,
      rgba(29, 44, 34, .82) 0%, rgba(29, 44, 34, .72) 55%, rgba(29, 44, 34, .62) 100%) !important;
  }
  #bkn-dl-hero::before,
  #bkn-kb-hero::before {
    background-image: linear-gradient(175deg,
      rgba(29, 44, 34, .84) 0%, rgba(29, 44, 34, .74) 55%, rgba(29, 44, 34, .64) 100%) !important;
  }
  #bkn-ct-hero::before {
    background-image: linear-gradient(175deg,
      rgba(24, 22, 19, .84) 0%, rgba(24, 22, 19, .74) 55%, rgba(24, 22, 19, .64) 100%) !important;
  }
}

/* ------------------------------------------------ About: the store band
 *
 * The shopfront photo is shown at its own 4:3 frame rather than cropped into a
 * tile, so the sign and the whole facade stay in view. Nothing here sets a
 * height: the image reserves its space from its own width/height attributes,
 * which also stops the section jumping while it loads.
 */
#bkn-ab-storefront .elementor-widget-container { line-height: 0; }
#bkn-ab-storefront img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: initial;          /* never crop: show the whole frame */
  border-radius: 6px;
}

#bkn-ab-store > .elementor-widget,
#bkn-ab-store > .e-con { width: 100%; }

#bkn-ab-storeH .elementor-heading-title { max-width: 22ch; }
#bkn-ab-storeP p { max-width: 68ch; }

#bkn-ab-storefacts {
  display: grid;
  /* three real items: auto-fit would leave an empty fourth track on a wide screen */
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
@media (max-width: 860px) { #bkn-ab-storefacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #bkn-ab-storefacts { grid-template-columns: 1fr; } }
#bkn-ab-storefacts > .elementor-widget { width: auto; }
#bkn-ab-storefacts .elementor-icon-box-wrapper { display: block; text-align: left; }
#bkn-ab-storefacts .elementor-icon-box-title { margin: 0 0 6px; }
#bkn-ab-storefacts .elementor-icon-box-description { margin: 0; }
#bkn-ab-storefacts > .elementor-widget {
  border-top: 1px solid #E0D8C9;
  padding-top: 16px;
}

#bkn-ab-storebtns > .elementor-widget { width: auto; }