/* =====================================================================
   Green Shop — design system & page styles
   Measurements derived from the approved screenshots (scaled to a 1440px viewport).
   ===================================================================== */

@font-face { font-family: 'Source Serif 4'; src: url('/fonts/source-serif-4.woff2') format('woff2-variations'), url('/fonts/source-serif-4.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.woff2') format('woff2-variations'), url('/fonts/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root {
  --green: #2b4d36;
  --green-hover: #213e2b;
  --green-soft: #3d6249;
  --green-900: #233e2f;
  --ink: #17262b;
  --text: #3b4642;
  --muted: #646d69;
  /* The one global page background (warm off-white sampled from the approved homepage). */
  --page: #fbf9f4;
  --cream: #f7f4ec;
  --sage-50: #f3f3ec;
  --sage-100: #eceee5;
  --sage-200: #dde3d6;
  --sage-300: #c9d1c1;
  --line: #e6e3d9;
  --line-strong: #d8d5c9;
  --white: #fff;
  --danger: #a3321f;
  /* Desktop maximum widths. Widened by 12% (frame 1216 → 1362, footer 1220 → 1366); the frame and footer are
     shared by every page so the navigation and footer stay identical site-wide. */
  --frame: 1362px;
  --footer-width: 1366px;
  /* Layout system (one set of widths for every page):
     main container    — image-heavy sections, product grids, cart/checkout (the approved homepage width)
     reading container — legal text, the contact form, long single-column copy
     reading measure   — line length for running text inside wider layouts (FAQ answers) */
  --container: 1295px;
  --frame-top: 17px;
  /* Divided page header (Contact, FAQ, policies): text → rule, and rule → page content */
  --header-rule-gap: 28px;
  --header-content-gap: 44px;
  --container-reading: 860px;
  --measure: 72ch;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(34, 46, 36, .04), 0 6px 18px rgba(34, 46, 36, .06);
  --shadow-lift: 0 2px 4px rgba(34, 46, 36, .06), 0 12px 28px rgba(34, 46, 36, .1);
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Hover motion: ease-out curve; only transform/opacity animate on cards and images (compositor-only, no per-frame paint). */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 350ms;
  --t-btn: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 15px/1.55 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; position: relative;
  /* Sticky-footer layout: on short pages <main> grows so the footer ends at the viewport bottom;
     long pages simply flow. No fixed/absolute footer, no spacer elements. */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
body > main { flex: 1 0 auto; }
body > .frame, body > .site-footer { flex: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
picture { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
main { display: block; position: relative; z-index: 1; outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
.container--reading { width: min(var(--container-reading), 100% - 2 * var(--gutter)); }

/* ---------- Type ---------- */
.overline { font: 500 11px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #2c3833; }
.overline--sm { font-size: 10.5px; letter-spacing: .3em; color: #46514c; }
.h2 { font: 500 31px/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); font-variation-settings: 'opsz' 40; }
.h2--lg { font-size: 35px; }
.lead { font-size: 16px; color: var(--text); }
.label-heading { font: 600 14px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 500 14px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative;
  transition: background-color var(--t-btn) var(--ease-out), color var(--t-btn) var(--ease-out), border-color var(--t-btn) var(--ease-out), transform var(--t-btn) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--green); color: #fff; }
/* The darker hover fill and the hover shadow live on one pre-drawn layer that fades in via opacity, behind the
   label (isolated stacking context). Animating background-color/box-shadow directly repaints the button every frame. */
.btn--primary { isolation: isolate; }
.btn--primary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--green-hover); box-shadow: 0 6px 14px rgba(33, 62, 43, .22); opacity: 0; transition: opacity var(--t-btn) var(--ease-out); pointer-events: none; }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:hover::before { opacity: 1; }
.btn--primary:active { transform: translateY(0); }
.btn--primary:active::before { opacity: 0; }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }
.btn--lg { min-height: 45px; padding: 0 26px; font-size: 15px; }
.btn--xl { min-height: 50px; padding: 0 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--arrow .icon { transition: transform var(--t-btn) var(--ease-out); }
.btn--arrow:hover .icon { transform: translateX(3px); }
.btn--disabled, .btn[disabled], .btn[aria-disabled='true'] { background: #c9cec6; color: #4e5650; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--disabled::before, .btn[disabled]::before, .btn[aria-disabled='true']::before { display: none; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Add to Cart feedback (set by site.js). The state label is overlaid and the original label fades out without
   leaving the layout or the accessibility tree, so the button never changes size. */
.btn__state { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: inherit; opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out); }
.js-add-to-cart .btn > :not(.btn__state) { transition: opacity 180ms var(--ease-out); }
.btn.is-pending > :not(.btn__state), .btn.is-added > :not(.btn__state), .btn.is-failed > :not(.btn__state) { opacity: 0; }
.btn.is-pending .btn__state, .btn.is-added .btn__state, .btn.is-failed .btn__state { opacity: 1; }
.btn.is-pending { cursor: progress; }
.btn__spinner { width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font: 500 13.5px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-arrow .icon { width: 17px; height: 17px; transition: transform var(--t-btn) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow--sm { font-size: 13px; gap: 8px; }

/* ---------- Shared decorative backdrop (views/partials/backdrop.njk) ----------
   Delicate sage sprigs down both page edges, identical on every page. They sit behind all content,
   in the side margins and partly off-screen; their visible width never exceeds the free margin
   beside the content column, so they never reach products, headings or buttons. */
.backdrop {
  /* Starts level with the site frame (the body is a flex column, so the frame's top margin no longer collapses into it). */
  position: absolute; inset: var(--frame-top) 0 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* free space beside the main content column */
  --margin: max(0px, (100vw - var(--container)) / 2 - 10px);
}
.sprig {
  --w: calc(clamp(150px, (100vw - var(--frame)) / 2 + 80px, 290px) * var(--k, 1));
  position: absolute; width: var(--w); max-width: none; height: auto; user-select: none;
  opacity: var(--o, .6); transform: rotate(var(--r, 0deg)) scaleX(var(--fx, 1));
}
.sprig--l { left: min(-.3 * var(--w), var(--margin) - var(--w)); }
.sprig--r { right: min(-.3 * var(--w), var(--margin) - var(--w)); }
.sprig--l.sprig--f2, .sprig--r:not(.sprig--f2) { --fx: -1; }
.sprig--f4 { --k: 1.2; }
/* Depth: a few sprigs sit slightly further back (softer and lighter, never heavily blurred). */
.sprig--n3, .sprig--n6, .sprig--n10, .sprig--n13 { filter: blur(.8px); --o: .48; }
.sprig--n1  { top: 70px;   --r: -6deg; --o: .55; }
.sprig--n2  { top: 360px;  --r: 4deg; }
.sprig--n3  { top: 760px;  --r: 8deg; }
.sprig--n4  { top: 1060px; --r: -10deg; }
.sprig--n5  { top: 1380px; --r: 2deg; }
.sprig--n6  { top: 1700px; --r: -6deg; }
.sprig--n7  { top: 2080px; --r: -4deg; }
.sprig--n8  { top: 2380px; --r: 8deg; }
.sprig--n9  { top: 2760px; --r: 6deg; }
.sprig--n10 { top: 3100px; --r: -4deg; }
.sprig--n11 { top: 3480px; --r: 10deg; }
.sprig--n12 { top: 3800px; --r: -8deg; }
.sprig--n13 { top: 4180px; --r: 0deg; }
.sprig--n14 { top: 4500px; --r: 6deg; }
.leaf { position: absolute; pointer-events: none; user-select: none; }
/* Narrower screens have no free side margin: the content stays clean. */
@media (max-width: 1279px) { .backdrop { display: none; } }

/* Content sits above decor */
.section, .trust-band { position: relative; z-index: 1; }

/* ---------- Site frame & universal header ---------- */
.frame {
  position: relative; z-index: 3; width: min(var(--frame), 100% - 2 * 32px); margin: var(--frame-top) auto 0;
  background: var(--white); border-radius: 7px 7px 0 0; box-shadow: 0 14px 40px rgba(40, 44, 30, .1);
}
.site-header { position: relative; z-index: 20; background: var(--white); border-radius: 7px 7px 0 0; }
.site-header__inner { height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 42px 0 152px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; }
.brand__logo img { height: 48px; width: auto; }
.brand__name { font: 500 31px/1 var(--serif); color: var(--green); letter-spacing: -.01em; font-variation-settings: 'opsz' 36; white-space: nowrap; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 37px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 14px 0; background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--sans); color: var(--ink); text-decoration: none;
}
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__toggle.is-active::after { right: 14px; }
.nav__chev { width: 12px; height: 12px; transition: transform .2s; }
.nav__item--dropdown { position: relative; }
.dropdown {
  list-style: none; position: absolute; top: calc(100% + 2px); left: 50%; min-width: 200px; padding: 8px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s;
}
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); text-decoration: none; }
.dropdown a:hover, .dropdown a:focus-visible, .dropdown a[aria-current='page'] { background: var(--sage-100); color: var(--green); }
.nav__item--dropdown:hover .dropdown, .nav__item--dropdown.is-open .dropdown, .nav__item--dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .18s var(--ease);
}
.nav__item--dropdown:hover .nav__chev, .nav__item--dropdown.is-open .nav__chev { transform: rotate(180deg); }
.btn--cart { justify-self: end; min-height: 42px; width: 141px; padding: 0 16px; gap: 9px; font-size: 14px; position: relative; }
.cart-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e8ede3; color: var(--green); border: 1.5px solid var(--green); font: 600 11px/17px var(--sans); text-align: center; transition: transform .25s var(--ease); }
.cart-badge.is-empty { display: none; }
.cart-badge.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }
.menu-toggle { display: none; }

/* ---------- Homepage hero ---------- */
.hero { position: relative; height: 415px; overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media img { object-position: 60% 50%; }
.hero__inner { position: relative; z-index: 4; /* above the blend() layers */ padding: 60px 0 0 130px; max-width: 520px; }
.hero__inner .overline { margin-bottom: 21px; }
.hero__title { font: 500 63px/.86 var(--serif); letter-spacing: -.012em; color: #1a272b; font-variation-settings: 'opsz' 60; margin-bottom: 15px; }
.hero__text { font-size: 16px; line-height: 1.45; max-width: 340px; color: #3a4441; margin-bottom: 15px; }
/* Hero/banner → page transition (blend() macro), shared by the homepage hero, About hero and every inner banner. */
.hero-blend {
  /* Extends past the frame into the side margins (up to 160px, never beyond the viewport). */
  --ext: max(0px, min(160px, (100vw - min(var(--frame), 100vw - 64px)) / 2 - 10px));
  position: absolute; z-index: 3; left: 50%; bottom: -1px; width: calc(100% + 2 * var(--ext)); max-width: none;
  height: clamp(56px, 7.6vw, 112px); translate: -50% 0; pointer-events: none;
  /* Only the parts beyond the frame fade out sideways; the bottom stays solid page colour. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ext), #000 calc(100% - var(--ext)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ext), #000 calc(100% - var(--ext)), transparent 100%);
}
.hero-blend .hb-1 { fill: #e8eadf; opacity: .6; }
.hero-blend .hb-2 { fill: var(--page); opacity: .72; }
.hero-blend .hb-3 { fill: var(--page); }
@media (max-width: 860px) { .hero-blend { --ext: 0px; -webkit-mask-image: none; mask-image: none; } }
/* The frame has no hard bottom edge: no white box behind the photo, and its shadow fades out above the blend. */
.frame:has(.hero-blend) { box-shadow: none; background: transparent; }
/* Every other page (compact banner or none): the frame is just the white header box, identical on all of them. */
.frame:not(:has(.hero-blend)) { box-shadow: none; background: transparent; }
.frame:not(:has(.hero-blend)) .site-header { box-shadow: 0 12px 32px rgba(40, 44, 30, .07); }
.frame:has(.hero-blend)::after { content: ''; position: absolute; inset: 0 0 140px; z-index: -1; border-radius: inherit; box-shadow: 0 14px 40px rgba(40, 44, 30, .09); pointer-events: none; }

/* ---------- Section scaffolding ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head--rule { display: grid; grid-template-columns: 68px auto minmax(40px, 1fr) auto; align-items: end; column-gap: 0; }
.section-head--rule::before { content: ''; height: 1px; background: #8fa08b; margin: 0 20px 15px 0; }
.section-head--rule > div + a { margin-left: 190px; }
.section-head--rule::after { content: ''; grid-column: 3; grid-row: 1; height: 1px; background: #8fa08b; margin: 0 0 15px 22px; }
.section-head--rule > a { grid-column: 4; margin-bottom: 8px; }
.center-head { text-align: center; }
.center-head .overline { margin-bottom: 9px; }
.center-head .lead { margin-top: 10px; }

/* ---------- Card hover lift (collection, product, idea and offer cards) ----------
   The lift is a transform and the deeper shadow is a pre-drawn pseudo-element that fades in, so the
   whole hover runs on the compositor: no layout and no per-frame repaint. Image clipping moved from
   the card to its media wrapper, because a clipped card would also clip its own hover shadow. */
.ccard, .pcard, .icard, .ocard { position: relative; transition: transform var(--t-hover) var(--ease-out); }
.ccard::after, .pcard::after, .icard::after, .ocard::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--shadow-lift);
  opacity: 0; transition: opacity var(--t-hover) var(--ease-out); pointer-events: none;
}
.ccard:hover, .pcard:hover, .icard:hover, .ocard:hover { transform: translateY(-2px); }
.ccard:hover::after, .pcard:hover::after, .icard:hover::after, .ocard:hover::after { opacity: 1; }
/* Image zoom: transform-only, the same timing as the lift. Hover-capable devices pre-promote these few
   images to their own layer, which removes the re-raster "snap" at the start and end of each zoom. */
.ccard__media img, .pcard__media img { transition: transform var(--t-hover) var(--ease-out); }
.ccard:hover .ccard__media img, .pcard:hover .pcard__media img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) { .ccard__media img, .pcard__media img { will-change: transform; } }

/* ---------- Home: collection cards ---------- */
.home-collections { padding-top: 26px; }
.home-collections .overline { margin-bottom: 6px; }
.ccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.ccard {
  display: block; height: 183px; border-radius: var(--radius); text-decoration: none;
  background: #f6f4ee; border: 1px solid #ebe7dd; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.ccard__media { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--radius) - 1px); }
.ccard__media img { position: absolute; left: 0; top: 0; height: 100%; width: 62%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); }
.ccard__media--bonsai-trees img { object-position: 30% 60%; width: 58%; }
.ccard__media--decorative-vases img { object-position: 22% 50%; }
.ccard__media--home-decor img { object-position: 40% 50%; }
.ccard__body { position: absolute; inset: 0 0 0 57%; display: flex; flex-direction: column; justify-content: center; padding-right: 16px; }
.ccard__title { font: 500 15.5px/1.3 var(--sans); color: var(--ink); margin-bottom: 9px; }
.ccard__text { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 148px; }
.ccard__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 15px; font: 500 13px/1 var(--sans); color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.ccard__link .icon { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }
.ccard:hover .ccard__link .icon { transform: translateX(3px); }

/* ---------- Product cards (shared) ---------- */
.home-featured { padding-top: 36px; }
.home-featured .section-head { margin-bottom: 16px; align-items: center; padding: 0 12px; }
.pgrid { display: grid; gap: 15px; }
.pgrid--5 { grid-template-columns: repeat(5, 1fr); }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pcard {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid #ebe8e0; border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
}
.pcard__media { display: block; aspect-ratio: 1.34; overflow: hidden; border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; background: var(--sage-50); }
.pcard__media > picture, .cart-row__thumb > picture, .co-items__thumb > picture { height: 100%; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 13px 15px 13px; }
.pcard__title { font: 400 14px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.pcard__title a { text-decoration: none; }
/* The whole card opens the product: the title link is stretched over the card (one link, one tab stop).
   Add to Cart sits above it, so it stays independent; no nested interactive elements. */
.pcard__title a::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard__form, .pcard .btn--disabled { position: relative; z-index: 2; }
.pcard:hover .pcard__title a { text-decoration: underline; text-underline-offset: 3px; }
@supports selector(.a:has(.b)) {
  .pcard__title a:focus-visible { outline: none; }
  .pcard:has(.pcard__title a:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
}
.pcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard__price { font: 600 15px/1.3 var(--sans); color: var(--ink); margin: 4px 0 13px; }
.pcard__form { margin-top: auto; }
/* Rows of cards share their name / price / button rows (subgrid), so a name that wraps to two lines keeps
   every price and Add to Cart button in that row aligned, and all cards in a row stay the same height. */
@supports (grid-template-rows: subgrid) {
  .pgrid > .pcard { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .pgrid > .pcard > .pcard__body { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .pgrid > .pcard .pcard__form, .pgrid > .pcard .pcard__body > .btn { align-self: end; }
}
.btn--card { min-height: 42px; gap: 9px; font-size: 13.5px; }
.btn--card .icon { width: 17px; height: 17px; }
.pcard.is-unavailable .pcard__media img { filter: grayscale(.4); opacity: .85; }

/* ---------- Home: trust band ---------- */
.trust-band { margin-top: 14px; padding: 22px 0 26px; background: linear-gradient(180deg, rgba(236, 237, 226, 0) 0, rgba(236, 237, 226, .8) 32%, rgba(236, 237, 226, .8) 68%, rgba(236, 237, 226, 0) 100%); }
.trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust li { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 58px; font-size: 14px; line-height: 1.5; color: #2f3a36; }
.trust li + li { border-left: 1px solid #d3d7cb; }
.trust .icon { width: 44px; height: 44px; color: var(--green); --icon-bg: #f1f1e8; }

/* ---------- Home: story ---------- */
.home-story { padding-top: 8px; }
.story { display: grid; grid-template-columns: 566fr 539fr; gap: 51px; align-items: stretch; }
/* The box (2.31:1) is close to the photo (2.22:1): cover shows ~96% of it. Anchor to the top so the small crop
   comes off the floor, not the bonsai canopy. */
.story__media img { width: 100%; height: 245px; object-fit: cover; object-position: 50% 0%; border-radius: 3px; box-shadow: var(--shadow-card); }
.story__body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; }
.story__body .overline { margin-bottom: 12px; }
.story__title { font-size: 29px; line-height: 1.13; margin-bottom: 14px; }
.story__text { font-size: 15.5px; line-height: 1.45; color: #4a5450; max-width: 470px; margin-bottom: 18px; }
.story__body .btn { min-width: 196px; }

/* ---------- Home: ideas ---------- */
.home-ideas { padding: 22px 0 64px; margin-top: 30px; }
.icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 34px; }
.icard { background: var(--white); border: 1px solid #ebe8e0; border-radius: var(--radius-sm); text-align: center; }
.icard__media { overflow: hidden; border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; }
/* The photos are 16:9 and the boxes ~2:1, so cover shows their full width and ~90% of their height.
   Each photo is positioned on its subject, matching the reference compositions. */
.icard__media img { width: 100%; height: 165px; object-fit: cover; }
.icard__media--idea-bonsai-care img { object-position: 50% 40%; }
.icard__media--idea-styling-vases img { object-position: 50% 85%; }
.icard__media--idea-calmer-living img { object-position: 50% 25%; }
.icard__body { padding: 14px 16px 15px; }
.icard__title { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.icard__text { font-size: 13px; color: var(--muted); margin: 4px 0 9px; }

/* ---------- Universal footer ---------- */
/* Straight top edge on every page: no wave, separator, clip-path or overlay. */
.site-footer { position: relative; z-index: 1; background: var(--green-900); color: #e3e9e1; overflow: hidden; border: 0; clip-path: none; }
.site-footer__leaves .fleaf { position: absolute; filter: brightness(.525) saturate(1.3); opacity: .5; }
.fleaf--l { left: -60px; bottom: -70px; width: 180px; transform: rotate(-8deg); }
.fleaf--r { right: -50px; bottom: -40px; width: 170px; transform: rotate(10deg); }
.site-footer__grid { width: min(var(--footer-width), 100% - 2 * var(--gutter)); display: grid; grid-template-columns: 384fr 148fr 176fr 226fr 286fr; padding: 17px 0 22px; position: relative; }
.fbrand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.fbrand__logo img { width: 64px; height: auto; }
.fbrand__text { display: flex; flex-direction: column; gap: 6px; }
.fbrand__name { font: 500 24px/1 var(--serif); color: #fff; letter-spacing: -.005em; }
.fbrand__tag { font: 500 8.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #cfd8cd; }
.fcontact { list-style: none; margin-top: 22px; padding-left: 10px; display: grid; gap: 11px; }
.fcontact li { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #e8ede6; white-space: nowrap; }
.fcontact .icon { width: 19px; height: 19px; color: #fff; }
.fcontact a { color: inherit; text-decoration: none; }
.fcontact a:hover { text-decoration: underline; }
.fcol { padding-top: 18px; }
.fcol__title { font: 600 14px/1.3 var(--sans); color: #fff; margin-bottom: 11px; }
.fcol__toggle { display: none; }
.fcol__list { list-style: none; display: grid; gap: 4px; }
.fcol__list a { font-size: 13px; line-height: 1.45; color: #dde5da; text-decoration: none; }
.fcol__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fjoin__text { font-size: 12.5px; color: #dde5da; margin: -2px 0 15px; }
.fjoin { display: flex; height: 38px; max-width: 282px; }
.fjoin__input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 3px 0 0 3px; background: #fff; color: var(--ink); font-size: 12.5px; }
.fjoin__input::placeholder { color: #7a827d; }
.fjoin__btn { width: 50px; border: 0; border-radius: 0 3px 3px 0; background: var(--green-soft); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.fjoin__btn:hover { background: #4a7357; }
.fjoin__btn .icon { width: 18px; height: 18px; }
.fjoin__consent { font-size: 11px; color: #b9c6b8; margin-top: 7px; max-width: 282px; }
.fjoin__consent a { color: inherit; font-size: inherit; }
.fjoin__status { font-size: 12px; margin-top: 6px; color: #fff; min-height: 1em; }
.fjoin__status.is-error { color: #ffd2c7; }
.site-footer__bottom { width: min(var(--footer-width), 100% - 2 * var(--gutter)); border-top: 1px solid rgba(255, 255, 255, .16); padding: 13px 0 15px; text-align: center; font-size: 12px; color: #dfe6dc; position: relative; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 12px); opacity: 0;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; max-width: calc(100% - 32px);
  background: var(--green-900); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lift); font-size: 14px;
  transition: opacity .25s, transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast a { color: #fff; font-weight: 600; }
.toast.is-error { background: var(--danger); }

/* ---------- Reveal on scroll (only when JS is active; content always visible otherwise) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ccard:hover, .pcard:hover, .icard:hover, .ocard:hover, .btn--primary:hover,
  .ccard:hover .ccard__media img, .pcard:hover .pcard__media img { transform: none; }
  .ccard__media img, .pcard__media img { will-change: auto; }
}

/* =====================================================================
   Shared components
   ===================================================================== */
.h3 { font: 500 24px/1.2 var(--serif); color: var(--ink); }
.h2--xl { font-size: 38px; }
.muted { color: var(--muted); }
.req { color: #b3261e; font-weight: 500; }
.opt { color: var(--muted); font-weight: 400; }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: 13px; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #47524d; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: #7b847f; }
.crumbs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23, 38, 43, .35); }
.crumbs a:hover { color: var(--green); text-decoration-color: currentColor; }

/* Secondary-page banner: compact and quiet. No box, no waves: the photo occupies the right part of the frame
   and dissolves into the page background to the left and downwards, so the title and the content below lead. */
.banner { position: relative; display: flex; align-items: center; min-height: 208px; }
.banner__media { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; pointer-events: none; }
.banner__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 42%;
  --fade-x: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 26%, rgba(0, 0, 0, .85) 52%, #000 70%, #000 90%, rgba(0, 0, 0, .25) 100%);
  --fade-y: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
  -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect;
}
.banner__inner { position: relative; z-index: 4; padding: 28px 0 34px; }
.banner__inner > * { max-width: 600px; }
.banner .crumbs { margin-bottom: 14px; }
.banner__title { font: 500 44px/1.06 var(--serif); letter-spacing: -.01em; color: #142530; font-variation-settings: 'opsz' 60; }
.banner__sub { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: #3c4844; max-width: 540px; }
.banner__meta { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; color: #3c4844; }
.banner__meta .icon { width: 18px; height: 18px; color: var(--green); }
/* Divided variant (banner macro, divided=true): a hairline separates the page introduction from its content.
   --header-w is the main container's width, worked out from the frame, which is 64px narrower than the page below
   the frame maximum. That keeps the text and rule on the same edges as the content at every width. */
.banner--divided { --header-w: min(var(--container), 100% + 2 * (32px - var(--gutter))); min-height: 0; }
.banner--divided .banner__inner { flex: none; width: var(--header-w); margin-inline: calc((100% - var(--header-w)) / 2); padding-bottom: var(--header-rule-gap); }
.banner--divided::after { content: ''; position: absolute; bottom: 0; left: calc((100% - var(--header-w)) / 2); width: var(--header-w); height: 1px; background: color-mix(in srgb, var(--green-soft) 18%, transparent); }
/* The photo finishes its fade above the rule, so it never touches it. */
.banner--divided .banner__media { bottom: 12px; }

/* Notices & status */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 14.5px; margin-bottom: 18px; border: 1px solid; }
.notice .icon { width: 19px; height: 19px; margin-top: 1px; }
.notice--ok { background: #eef4ec; border-color: #c9dcc6; color: #23452f; }
.notice--warn { background: #fbf6e8; border-color: #eadcae; color: #5b4a17; }
.notice--error { background: #fbeeea; border-color: #eec8bd; color: #7c2716; }
.notice--block { margin-bottom: 22px; }
.notice__list { list-style: none; margin: 8px 0 4px; display: grid; gap: 2px; font-size: 13.5px; }
.form-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 15px; margin: 4px 0 18px; outline: none; }
.form-status .icon { width: 20px; height: 20px; }
.form-status.is-success { background: #eef4ec; border: 1px solid #c9dcc6; color: #23452f; }
.form-status.is-error { background: #fbeeea; border: 1px solid #eec8bd; color: #7c2716; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 500; background: var(--sage-100); color: var(--ink); }
.pill--paid { background: #dcebd8; color: #1f4a2b; }
.pill--payment_failed, .pill--expired, .pill--cancelled { background: #f6e1db; color: #7c2716; }
.pill--pending_payment, .pill--awaiting_manual_payment { background: #f6eed4; color: #5b4a17; }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 7px; font: 500 15px/1.3 var(--sans); color: var(--ink); }
.field input, .field textarea, .field select, .select select {
  width: 100%; min-height: 44px; padding: 10px 15px; border: 1px solid #d9d6cb; border-radius: 5px; background: #fff;
  font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8d948f; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #b9bfb2; }
.field input:focus, .field textarea:focus, .field select:focus, .select select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(43, 77, 54, .15); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #b3261e; }
.field__error { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: #a3261a; }
.field__error .icon { width: 16px; height: 16px; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select .icon { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--ink); }
.select--sm select { min-height: 38px; padding: 6px 36px 6px 12px; font-size: 14px; }
.privacy-note { font-size: 13px; color: var(--muted); margin: 2px 0 20px; }
.privacy-note a { color: var(--green); }

/* Quantity stepper */
.qty { display: inline-flex; align-items: stretch; height: 46px; border: 1px solid #d9d6cb; border-radius: 5px; background: #fff; overflow: hidden; }
.qty__btn { width: 40px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: background .2s; }
.qty__btn:hover:not(:disabled) { background: var(--sage-100); }
.qty__btn:disabled { color: #b8beb7; cursor: not-allowed; }
.qty__btn .icon { width: 17px; height: 17px; }
.qty input { width: 64px; border: 0; border-inline: 1px solid #e3e0d6; text-align: center; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.qty--sm { height: 42px; border-radius: 9px; }
.qty--sm .qty__btn { width: 32px; }
.qty--sm input { width: 34px; border: 0; font-size: 15px; }

/* Values row (icons with captions) */
.values { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.values li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 14px; }
.values li + li { border-left: 1px solid #dad9cd; }
.values .icon { width: 42px; height: 42px; color: var(--green); margin-bottom: 12px; }
.values strong { font: 600 14px/1.3 var(--sans); color: var(--ink); margin-bottom: 6px; }
.values span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.values a { color: var(--green); }

/* =====================================================================
   Shop / collections
   ===================================================================== */
.shop { padding: 20px 0 48px; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.shop-bar__count { font-size: 14.5px; color: #3c4643; }
.sort { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.sort .select { width: 166px; }
.pgrid--4 .pcard__media { aspect-ratio: 1.22; }
.pgrid--4 .pcard__body { padding: 15px 17px 11px; }
.pgrid--4 .pcard__title { font-size: 14.5px; }
.pgrid--4 .pcard__price { font-size: 15.5px; margin: 5px 0 12px; }
.pgrid--4 .btn--card { min-height: 40px; font-size: 14px; }
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.pager__btn { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid #dedbd1; border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; transition: border-color .2s, background .2s; }
.pager__btn .icon { width: 16px; height: 16px; }
a.pager__btn:hover { border-color: var(--green); color: var(--green); }
.pager__btn.is-current { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.pager__btn.is-disabled { color: #b8beb7; }
.empty-state { text-align: center; padding: 50px 0; display: grid; gap: 16px; justify-items: center; }

/* =====================================================================
   Product detail
   ===================================================================== */
/* Product page content sits on the page background in the main container (no separate sheet). */
.frame-sheet { position: relative; z-index: 2; padding: 6px 0 44px; }
.page-product .crumbs { margin: 22px 0 18px; }
.pdp { display: grid; grid-template-columns: minmax(0, 543fr) minmax(0, 441fr); gap: 48px; }
.pdp__media img { width: 100%; aspect-ratio: 1.475; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow-card); }
.pdp__title { font: 500 39px/1.1 var(--serif); letter-spacing: -.01em; font-variation-settings: 'opsz' 48; margin-top: 2px; }
.pdp__price { font: 600 24px/1.2 var(--sans); color: var(--ink); margin: 10px 0 12px; }
.pdp__lead { font-size: 15px; line-height: 1.6; color: #45504c; max-width: 440px; }
.pdp__qty { display: flex; align-items: center; gap: 30px; margin: 24px 0 18px; }
.pdp__qty label { font: 500 15px var(--sans); color: var(--ink); }
.btn--buy { min-height: 50px; font-size: 17px; gap: 14px; max-width: 437px; }
.btn--buy .icon { width: 22px; height: 22px; }
.pdp__note { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 437px; margin-top: 16px; font-size: 13.5px; color: #4d5753; }
.pdp__note .icon { width: 22px; height: 22px; color: var(--green); }
.pdp-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.pdp-details__text { padding-right: 46px; border-right: 1px solid var(--line); }
.pdp-details__text p { font-size: 15px; line-height: 1.6; color: #45504c; margin-top: 8px; }
.pdp-facts { list-style: none; padding: 26px 0 0 40px; display: grid; gap: 12px; align-content: start; }
.pdp-facts li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: #45504c; }
.pdp-facts .icon { width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
.pdp-facts strong { color: var(--ink); font-weight: 600; }
.pdp-facts a { color: var(--green); }
.pdp-trust { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; padding: 13px 10px; background: #f0f0e9; border-radius: 4px; }
.pdp-trust li { display: flex; align-items: center; gap: 18px; padding: 2px 26px; }
.pdp-trust li + li { border-left: 1px solid #d7d9cd; }
.pdp-trust .icon { width: 36px; height: 36px; color: var(--green); --icon-bg: #f0f0e9; }
.pdp-trust span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pdp-trust a { text-decoration: none; }
.pdp-trust a:hover strong { text-decoration: underline; }
.pdp-trust strong { font: 500 15px/1.4 var(--serif); color: var(--ink); }
.related { margin-top: 26px; }
.related .h3 { margin-bottom: 10px; }
.pgrid--related { gap: 15px; }
.pcard--compact .pcard__media { aspect-ratio: 1.34; }
.pcard--compact .pcard__body { padding: 10px 12px 9px; }
.pcard--compact .pcard__title { font-size: 13px; font-weight: 500; }
.pcard--compact .pcard__price { font-size: 13px; margin: 1px 0 8px; }
.pcard--compact .btn--card { min-height: 32px; font-size: 12.5px; }
.pcard--compact .btn--card .icon { width: 15px; height: 15px; }

/* =====================================================================
   About
   ===================================================================== */
.hero--about .hero__inner { padding-top: 52px; max-width: 560px; }
.hero__title--about { font-size: 45px; line-height: 1.05; margin-bottom: 14px; }
.hero__text--about { font-size: 15px; line-height: 1.5; max-width: 405px; margin-bottom: 18px; }
.hero--about .btn { min-width: 224px; }
.about-mission { padding-top: 36px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 593fr) minmax(0, 564fr); gap: 59px; align-items: start; }
.about-mission__media img { width: 100%; height: 373px; object-fit: cover; object-position: 30% 50%; border-radius: 3px; box-shadow: var(--shadow-card); }
.about-mission__body { padding-top: 14px; }
.about-mission__body .overline { margin-bottom: 12px; }
.about-mission__body .h2 { margin-bottom: 16px; font-size: 36px; line-height: 1.12; }
.about-mission__text { font-size: 15.5px; line-height: 1.5; color: #45504c; max-width: 530px; }
.about-mission .values { margin-top: 26px; margin-left: -12px; }
.about-offer { padding-top: 70px; }
.about-offer .center-head .lead { max-width: 740px; margin-inline: auto; line-height: 1.45; }
.about-approach .lead { max-width: 680px; margin-inline: auto; line-height: 1.45; }
.ocards { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ocard { background: #fff; border: 1px solid #ebe8e0; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.ocard__media { overflow: hidden; border-radius: 3px 3px 0 0; }
.ocard__media img { width: 100%; height: 186px; object-fit: cover; }
.ocard__media--bonsai-trees img { object-position: 50% 62%; }
.ocard__body { padding: 18px 24px 20px; }
.ocard__title { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.ocard__text { font-size: 14px; color: var(--muted); margin: 3px 0 13px; }
.about-approach { padding-top: 64px; padding-bottom: 64px; }
.about-approach .h2 { line-height: 1.12; }
.values--approach { max-width: 700px; margin: 30px auto 0; }
.values--approach .icon { width: 44px; height: 44px; }
.center-cta { display: flex; justify-content: center; margin-top: 26px; }

/* =====================================================================
   Contact
   ===================================================================== */
.contact { padding: var(--header-content-gap) 0 40px; }
.contact-card { max-width: var(--container-reading); margin: 0 auto; padding: 34px 48px 40px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.contact-card__title { font-size: 31px; }
.contact-card__intro { font-size: 16.5px; color: #4a5450; margin: 10px 0 22px; }
.contact-form .btn { min-width: 266px; }
.help-strip { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 24px; max-width: var(--container-reading); margin: 22px auto 0; padding: 22px 10px 6px; border-top: 1px solid var(--line); }
.help-strip__icon, .still__icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #dde6da; color: var(--green); }
.help-strip__icon .icon { width: 34px; height: 34px; }
.help-strip .h2 { font-size: 34px; }
.help-strip p { font-size: 16px; color: #4a5450; margin-top: 4px; }
.help-strip .btn { min-width: 163px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { padding: var(--header-content-gap) 0 44px; }
.faq__layout { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: start; }
.faq__nav { display: grid; gap: 1px; padding: 22px; background: #f5f5ee; border-radius: 8px; }
.faq__tab { position: relative; display: flex; align-items: center; gap: 22px; min-height: 58px; padding: 0 20px; border-radius: 6px; font-size: 17px; color: var(--ink); text-decoration: none; transition: background .2s; }
.faq__tab .icon { width: 24px; height: 24px; color: var(--green); }
.faq__tab:hover { background: #eef1ea; }
.is-tabbed .faq__tab[aria-selected='true'] { background: #e8ede3; }
.is-tabbed .faq__tab[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--green); }
.faq__panel { outline: none; }
.faq__panel + .faq__panel { margin-top: 36px; }
.is-tabbed .faq__panel + .faq__panel { margin-top: 0; }
.faq__title { font-size: 32px; }
.faq__intro { font-size: 16px; color: #4a5450; margin: 6px 0 22px; max-width: var(--measure); }
.acc__item { border: 1px solid #dddcd2; border-radius: 6px; background: #fff; margin-bottom: 10px; overflow: hidden; transition: box-shadow .2s; }
.acc__item:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.acc__h { font: inherit; }
.acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 11px 18px; border: 0; background: #fff; text-align: left; font: 500 16.5px/1.4 var(--sans); color: var(--ink); cursor: pointer; transition: background .2s; }
.acc__btn:hover { background: #f7f8f3; }
.acc__item.is-open .acc__btn { background: #ebeee6; }
.acc__chev { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.acc__item.is-open .acc__chev { transform: rotate(180deg); }
.acc__panel > * { max-width: var(--measure); }
.acc__panel { padding: 16px 18px 18px; border-top: 1px solid #e3e3d9; font-size: 15px; line-height: 1.7; color: #4a5450; animation: accIn .25s var(--ease); }
.acc__panel p + p { margin-top: 8px; }
.acc__panel a { color: var(--green); }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } }
.still { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 32px; margin-top: 30px; padding: 26px 42px; background: #f1f1e9; border-radius: 10px; }
.still__icon { width: 84px; height: 84px; background: #d7e1d0; }
.still__icon .icon { width: 42px; height: 42px; }
.still .h2 { font-size: 30px; }
.still p { font-size: 16.5px; line-height: 1.5; color: #4a5450; margin-top: 6px; }
.still .btn { min-width: 216px; }

/* =====================================================================
   Cart
   ===================================================================== */
.cart { padding: 30px 0 50px; }
.cart__layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.cart-table { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cart-table__head, .cart-row { display: grid; grid-template-columns: 1fr 100px 140px 100px; align-items: center; column-gap: 10px; }
.cart-table__head { padding: 15px 20px; background: #f3f3ec; font-size: 14px; font-weight: 500; color: var(--ink); }
.cart-table__head span:not(:first-child), .cart-row > div:not(:first-child) { text-align: center; }
.cart-table__head span:last-child, .cart-row__total { text-align: right !important; }
.cart-row { padding: 16px 20px; border-top: 1px solid #eeebe2; transition: opacity .3s; }
.cart-row.is-removing { opacity: .4; }
.cart-row.is-unavailable { background: #fcf8f1; }
.cart-row__product { display: flex; align-items: center; gap: 20px; }
.cart-row__thumb { flex: none; width: 92px; height: 100px; border-radius: 4px; overflow: hidden; background: var(--sage-50); }
.cart-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__name { font: 500 16px/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.cart-row__name:hover { text-decoration: underline; }
.cart-row__meta { font-size: 14px; color: var(--muted); margin: 6px 0 10px; }
.cart-row__remove { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--green); font-size: 14px; cursor: pointer; }
.cart-row__remove .icon { width: 16px; height: 16px; }
.cart-row__remove:hover { text-decoration: underline; }
.cart-row__price { font-size: 14.5px; }
.cart-row__total { font-weight: 600; font-size: 15px; color: var(--ink); }
.cart-row__label { display: none; }
.cart-row__qtyform { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cart__continue { margin-top: 30px; min-width: 212px; }
.summary { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.summary__title { font: 500 21px/1.2 var(--serif); color: var(--ink); padding: 16px 18px; background: #f3f3ec; }
.summary__head { display: flex; align-items: center; justify-content: space-between; background: #f3f3ec; padding-right: 22px; }
.summary__head .summary__title { background: none; }
.edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--green); }
.edit-link .icon { width: 15px; height: 15px; }
.summary__rows { margin: 0; padding: 14px 18px 4px; }
.summary__rows div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px; color: #4a5450; }
.summary__rows dd { margin: 0; color: var(--ink); text-align: right; }
.summary__total { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 18px 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.summary__total span { font: 500 19px var(--serif); color: var(--ink); }
.summary__total strong { font: 500 30px/1 var(--serif); color: var(--ink); }
.summary__total small { font: 400 14px var(--sans); color: var(--muted); }
.summary__total--box { margin: 10px 18px 16px; padding: 14px 12px; border: 0; background: #f3f3ec; border-radius: 4px; }
.summary > .btn, .summary--co > .btn { width: calc(100% - 36px); margin: 0 18px; }
.summary__note { display: flex; gap: 8px; margin: 10px 18px 0; font-size: 13px; color: #5b4a17; }
.summary__note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.summary__msg { margin: 0 18px 8px; font-size: 13.5px; color: #7c2716; }
.summary__trust { list-style: none; margin: 14px 18px 4px; }
.summary__trust li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid #eeebe2; }
.summary__trust .icon { width: 28px; height: 28px; color: var(--green); }
.summary__trust span { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.summary__trust strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.summary__trust a { color: var(--green); }
.cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 30px; }
.cart-empty__art { position: relative; width: 300px; height: 220px; margin-bottom: 26px; }
.cart-empty__art::before { content: ''; position: absolute; inset: 0 30px; border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%; background: #eef0e8; }
.cart-empty__icon { position: absolute; left: 50%; top: 46%; width: 150px; height: 130px; transform: translate(-50%, -50%); color: #6f8a72; }
.cart-empty__leaf { width: 120px; opacity: .8; }
.cart-empty__leaf--l { left: -6px; bottom: -6px; transform: scaleX(-1) rotate(-10deg); }
.cart-empty__leaf--r { right: -6px; bottom: 6px; transform: rotate(-6deg); }
.cart-empty__text { font-size: 17px; line-height: 1.6; color: #4a5450; margin: 16px 0 28px; }
.cart-empty .btn { min-width: 260px; }
.values--cart { width: min(560px, 100%); margin-top: 70px; }

/* =====================================================================
   Checkout
   ===================================================================== */
.checkout { padding: 26px 0 50px; }
.co__layout { display: grid; grid-template-columns: 1fr 448px; gap: 24px; align-items: start; }
.co-step { position: relative; margin: 0 0 14px; padding: 22px 30px 18px 84px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.co-step__head { display: contents; }
.co-step__num { position: absolute; left: 24px; top: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font: 500 19px var(--serif); }
.co-step__title { display: block; font: 500 24px/1.2 var(--serif); color: var(--ink); padding-top: 6px; }
.co-step__intro { font-size: 14px; color: #4a5450; margin: 4px 0 14px; max-width: 520px; }
.co-step .field { max-width: 344px; margin-bottom: 12px; }
.co-step .field label { font-size: 14.5px; margin-bottom: 6px; }
.co-step .field input, .co-step .select select { min-height: 38px; padding: 7px 13px; font-size: 14.5px; }
.co-pay-note { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #4a5450; padding: 12px 14px; background: #f6f6f0; border-radius: 5px; }
.co-pay-note .icon { width: 18px; height: 18px; color: var(--green); }
.co-summary { position: sticky; top: 20px; display: grid; gap: 14px; }
.co-items { list-style: none; margin: 0 18px; }
.co-items li { display: grid; grid-template-columns: 78px 1fr auto; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eeebe2; }
.co-items__thumb { width: 78px; height: 78px; border-radius: 4px; overflow: hidden; background: var(--sage-50); }
.co-items__thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-items__info { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.co-items__info strong { font: 500 15px/1.3 var(--serif); color: var(--ink); }
.co-items__total { font: 600 16px var(--sans); color: var(--ink); }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 18px 18px; font-size: 12.5px; color: #4a5450; text-align: center; }
.co-secure .icon { width: 20px; height: 20px; flex: none; }
.values--co { padding: 22px 6px; background: #f3f3ec; border-radius: 8px; }
.values--co li { padding: 0 8px; }
.values--co .icon { width: 30px; height: 30px; margin-bottom: 8px; }
.values--co strong { font-size: 13px; }
.values--co span { font-size: 12px; }

/* =====================================================================
   Policies, sitemap, status pages, order
   ===================================================================== */
.policy { padding: var(--header-content-gap) 0 56px; }
.policy__sec { padding: 30px 0 28px; border-bottom: 1px solid var(--line); }
.policy__sec:first-child { padding-top: 0; }
.policy__sec:last-child { border-bottom: 0; }
.policy__h { font: 500 34px/1.2 var(--serif); color: var(--ink); margin-bottom: 12px; font-variation-settings: 'opsz' 40; }
.policy__n { margin-right: 4px; }
.policy__sec p { font-size: 16.5px; line-height: 1.7; color: #3f4a46; }
.policy__sec p + p, .policy__sec ul + p, .policy__sec p + ul { margin-top: 12px; }
.policy__sec a { color: var(--green); }
.policy__list { list-style: none; display: grid; gap: 8px; }
.policy__list li { display: flex; gap: 14px; font-size: 16.5px; line-height: 1.6; color: #3f4a46; }
.policy__list .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--green); }
.sitemap { padding: 30px 0 60px; }
.sitemap__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sitemap__list { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.sitemap__list a { color: var(--green); }
.status-page { padding: 30px 0 70px; }
.status-page__inner { text-align: center; }
.status-page__code { font: 500 96px/1 var(--serif); color: #6f806c; }
.status-page__text { font-size: 17px; margin: 12px 0 24px; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.order { padding: 30px 0 60px; }
.order__layout { display: grid; grid-template-columns: 1fr 420px; gap: 30px; align-items: start; }
.order__facts { margin: 0 0 24px; display: grid; gap: 14px; }
.order__facts div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order__facts dt { font-weight: 500; color: var(--ink); }
.order__facts dd { margin: 0; }
.order__help { margin-top: 22px; font-size: 14px; color: var(--muted); }
.order__help a { color: var(--green); }

/* =====================================================================
   Responsive
   ===================================================================== */
/* Desktop: fixed-height boxes scale with the wider columns so images keep their framing (no extra cropping).
   The ratios are the previous 1216/1156 px desktop sizes; tablet and mobile keep their fixed heights. */
@media (min-width: 1241px) {
  .hero { height: clamp(415px, min(var(--frame), 100vw - 64px) * 415 / 1216, 600px); }
  .ccard { height: auto; aspect-ratio: 375 / 183; }
  .story__media img { height: auto; aspect-ratio: 566 / 245; }
  .icard__media img { height: auto; aspect-ratio: 325 / 165; }
  /* About: image boxes keep the proportions they had at the previous 1216 px width */
  .about-mission__media img { height: auto; aspect-ratio: 593 / 373; }
  .ocard__media img { height: auto; aspect-ratio: 393 / 186; }
}

@media (max-width: 1240px) {
  .site-header__inner { padding: 0 28px 0 40px; }
  .hero__inner { padding-left: 60px; }
  .story { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .pdp { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1.6fr .8fr 1fr 1.1fr 1.5fr; }
  .fcontact li { white-space: normal; }
}

@media (max-width: 1024px) {
  .cart__layout { grid-template-columns: 1fr 300px; }
  .co__layout { grid-template-columns: 1fr 360px; }
  .order__layout { grid-template-columns: 1fr 340px; }
  .cart-table__head, .cart-row { grid-template-columns: 1fr 80px 110px 80px; }
  .nav__list { gap: 26px; }
  .brand__name { font-size: 26px; }
  .brand__logo img { height: 42px; }
  .site-header__inner { padding: 0 24px; }
  .pgrid--5 { grid-template-columns: repeat(3, 1fr); }
  .pgrid--4 { grid-template-columns: repeat(3, 1fr); }
  .pgrid--related { grid-template-columns: repeat(2, 1fr); }
  .section-head--rule { grid-template-columns: auto 1fr; }
  .section-head--rule::before, .section-head--rule::after { display: none; }
    .section-head--rule > a { grid-column: 2; justify-self: end; margin-left: 0; }
  .ccard__body { left: 52%; }
  .trust li { flex-direction: column; text-align: center; gap: 8px; }
  .faq__layout { grid-template-columns: 250px 1fr; gap: 24px; }
  .faq__tab { font-size: 15px; gap: 14px; padding: 0 14px; }
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .fcol--brand { grid-column: 1 / -1; }
  .fcol--join { grid-column: span 3; }
  .sitemap__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .frame, .frame-sheet { width: 100%; margin-top: 0; border-radius: 0; }
  .cart__layout, .co__layout, .order__layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .site-header { border-radius: 0; position: sticky; top: 0; }
  .site-header__inner { grid-template-columns: 1fr auto auto; height: 64px; padding: 0 16px; gap: 10px; }
  .brand__logo img { height: 38px; }
  .brand__name { font-size: 23px; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 6px; }
  .menu-toggle .icon { width: 26px; height: 26px; }
  .menu-toggle__close, .is-menu-open .menu-toggle__open { display: none; }
  .is-menu-open .menu-toggle__close { display: block; }
  .btn--cart { width: auto; min-height: 38px; padding: 0 12px; font-size: 13px; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 14px 24px rgba(0, 0, 0, .08); display: none; }
  .no-js .nav { display: block; position: static; box-shadow: none; grid-column: 1 / -1; }
  .no-js .site-header__inner { height: auto; padding-top: 10px; }
  .is-menu-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; }
  .nav__link { width: 100%; padding: 15px 4px; font-size: 16px; border-bottom: 1px solid #f0eee7; justify-content: space-between; }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--green); font-weight: 600; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 8px 12px; display: none; min-width: 0; }
  .nav__item--dropdown.is-open .dropdown, .no-js .dropdown { display: block; transform: none; }
  .nav__item--dropdown:hover .dropdown { transform: none; }
  .dropdown a { font-size: 15px; padding: 12px; }
  .hero { height: auto; display: flex; flex-direction: column-reverse; background: #f5ede1; }
  .hero__media img { position: relative; inset: auto; height: 300px; object-position: 64% 60%; }
  .hero__inner { padding: 36px 24px 26px; max-width: none; }
  .hero__title { font-size: 48px; }
  .hero__title--about { font-size: 36px; }
  /* Mobile: compact, the photo stays a faint accent on the right behind left-aligned text */
  :root { --header-rule-gap: 18px; --header-content-gap: 28px; }
  .banner--divided { --header-w: calc(100% - 2 * var(--gutter)); }
  .banner { min-height: 0; }
  .banner__media { width: 72%; }
  .banner__media img { opacity: .55; --fade-x: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .4) 45%, #000 85%); }
  .banner__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--page) 0, rgba(251, 249, 244, .78) 55%, rgba(251, 249, 244, .25) 100%); }
  .banner__inner { padding: 18px 0 22px; }
  .banner .crumbs { margin-bottom: 10px; }
  .banner__title { font-size: 32px; }
  .banner__sub { font-size: 15px; margin-top: 8px; }
  .banner__meta { margin-top: 12px; }
  .ccards { grid-template-columns: 1fr; gap: 12px; }
  .story, .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .icards, .ocards { grid-template-columns: 1fr; gap: 18px; padding: 0; }
  .ocards { margin-top: 24px; }
  .trust { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .trust li:nth-child(3) { border-left: 0; }
  .pdp { grid-template-columns: 1fr; gap: 22px; padding: 0; }
  .page-product .crumbs { margin-left: 0; }
  .pdp-details { grid-template-columns: 1fr; margin: 26px 0 0; }
  .pdp-details__text { border-right: 0; padding-right: 0; }
  .pdp-facts { padding: 18px 0 0; }
  .pdp-trust { grid-template-columns: 1fr; gap: 8px; background: none; padding: 0; }
  .pdp-trust li { background: #f0f0e9; border-radius: 6px; padding: 12px 16px; }
  .pdp-trust li + li { border-left: 0; }
  .btn--buy, .pdp__note { max-width: none; }
  .faq__layout { grid-template-columns: 1fr; }
  .faq__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 8px; gap: 4px; }
  .faq__tab { min-height: 44px; gap: 8px; }
  .is-tabbed .faq__tab[aria-selected='true']::before { top: auto; left: 10px; right: 10px; bottom: 0; width: auto; height: 3px; }
  .still, .help-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; padding: 24px 20px; }
  .contact-card { padding: 26px 20px 30px; }
  .contact-form .btn { width: 100%; min-width: 0; }
  .co-step { padding: 20px 18px 16px; }
  .co-step__num { position: static; display: inline-grid; margin-right: 10px; vertical-align: middle; width: 34px; height: 34px; font-size: 17px; }
  .co-step__title { display: inline; font-size: 21px; }
  .co-step .field { max-width: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .ccard__media img { width: 52%; }
  .ccard__media--bonsai-trees img { width: 50%; }
  .ccard__body { left: 50%; }
  .btn--cart__label { font-size: 12.5px; }
  .h2 { font-size: 27px; }
  .h2--lg, .h2--xl { font-size: 29px; }
  .section-head { flex-wrap: wrap; }
  .section-head--rule { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .section-head--rule > a { margin: 0; }
  .label-heading { font-size: 13px; }
  .home-featured .section-head { padding: 0; }
  .pgrid--5, .pgrid--4, .pgrid--related { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pcard__body, .pgrid--4 .pcard__body { padding: 10px 10px 10px; }
  .pcard__title, .pgrid--4 .pcard__title { font-size: 13px; }
  .pcard__price, .pgrid--4 .pcard__price { font-size: 13.5px; margin: 2px 0 9px; }
  .btn--card, .pgrid--4 .btn--card { min-height: 36px; font-size: 12.5px; gap: 6px; padding: 0 8px; }
  .btn--card .icon { width: 15px; height: 15px; }
  .pcard--compact .pcard__media { aspect-ratio: 1.3; }
  .shop-bar { flex-wrap: wrap; }
  .shop-bar__count { font-size: 13px; }
  .sort { font-size: 13px; gap: 8px; }
  .sort .select { width: 150px; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li { font-size: 13px; }
  .trust li + li { border-left: 0; }
  .values { grid-template-columns: 1fr; gap: 18px; }
  .values li + li { border-left: 0; padding-top: 18px; border-top: 1px solid #dad9cd; }
  .values--co { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .values--co li + li { border-top: 0; padding-top: 0; border-left: 1px solid #dad9cd; }
  .cart-table__head { display: none; }
  .cart-row { grid-template-columns: 1fr 1fr 1fr; row-gap: 12px; padding: 16px; }
  .cart-row__product { grid-column: 1 / -1; gap: 14px; }
  .cart-row__thumb { width: 80px; height: 86px; }
  .cart-row > div:not(:first-child) { text-align: left; }
  .cart-row__label { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-bottom: 2px; }
  .cart-row__qtyform { align-items: flex-start; }
  .cart__continue { width: 100%; }
  .order__facts div { grid-template-columns: 1fr; gap: 4px; }
  .sitemap__grid { grid-template-columns: 1fr; }
  /* footer becomes disclosure rows (as in the approved mobile mockup) */
  .site-footer__grid { grid-template-columns: 1fr; row-gap: 0; padding-top: 22px; }
  .fcol--join { grid-column: auto; }
  .fcol { padding-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .fcol--brand { border: 0; padding-bottom: 16px; }
  .js .fcol__label { display: none; }
  .js .fcol__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 13px 0; border: 0; background: none; color: #fff; font: 600 14px var(--sans); cursor: pointer; }
  .js .fcol__title { margin: 0; }
  .fcol__toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
  .fcol__toggle[aria-expanded='true'] .icon { transform: rotate(90deg); }
  .js .fcol.is-collapsed .fcol__list { display: none; }
  .js .fcol .fcol__list { padding-bottom: 14px; }
  .fjoin { max-width: none; }
  .fcontact li { white-space: normal; }
  .site-footer__bottom { border-top: 0; }
}