/* USA Tree storefront
   ------------------------------------------------------------------
   Warm and earthy rather than the flat white Shopify look that Sow Exotic
   and Everglades Farm both use. Every colour below is taken from the logo
   artwork: its greens, its trunk brown, and the red, orange and yellow of
   the apples on the tree. */

/* Palette sampled directly from the logo artwork so the site and the mark agree.
   The greens are noticeably more yellow-green than a typical "forest" green;
   that is the logo's own hue, not a mistake. */
:root {
  --canopy:      #264a12;  /* logo wordmark green */
  --canopy-deep: #17300a;  /* darker, for the footer and dark sections */
  --leaf:        #4a7021;  /* mid green from the surrounding arc, used for links */
  --leaf-light:  #7ca33f;  /* leaf highlight */
  --bark:        #3b210b;  /* logo trunk and descriptor brown */
  --bark-deep:   #281104;
  --amber:       #dd6a10;  /* the orange apple, primary call to action */
  --amber-deep:  #b4520a;
  --berry:       #c11a12;  /* the red apple, for sale and warning states */
  --gold:        #e3b02a;  /* the yellow apple, highlights */
  --paper:       #fbf8f1;
  --paper-warm:  #f2ecdf;
  --ink:         #1a1813;
  --ink-soft:    #453f36;
  --line:        #e1d9c7;
  --white:       #fffdf8;

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 1px 2px rgba(35,32,27,.05), 0 8px 24px -12px rgba(35,32,27,.22);
  --shadow-lg:0 2px 6px rgba(35,32,27,.06), 0 24px 48px -20px rgba(35,32,27,.3);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
}

/* The houseplant brand, selected by the hostname.
   ------------------------------------------------------------------
   Tokens only, and deliberately nothing else. One stylesheet means a layout change
   lands on both brands at once; a second stylesheet would mean every rule had a twin
   somewhere else that somebody would eventually forget to change.

   Where the palette comes from: the edible side is sampled from the logo, so it is
   orchard colours, cream paper and the orange of an apple. Foliage sold for indoors
   wants the opposite of that. The greens go deeper and bluer, like a leaf in shade
   rather than a leaf in a field; the paper cools off to a grey rather than a cream, so
   a photograph of a dark green plant does not sit on a yellow page; and the call to
   action becomes terracotta, which is a pot, instead of amber, which is a fruit. */
html[data-brand="houseplants"] {
  --canopy:      #1f3d2b;
  --canopy-deep: #132619;
  --leaf:        #3f6b4a;
  --leaf-light:  #74a07c;
  --bark:        #4a3b2f;
  --bark-deep:   #2e241c;
  --amber:       #c2663f;
  --amber-deep:  #9c4e2d;
  --gold:        #d8a657;
  --paper:       #f7f7f3;
  --paper-warm:  #ebeee7;
  --ink:         #171a17;
  --ink-soft:    #3e453d;
  --line:        #d8ddd3;
  --white:       #fdfdfb;

  /* --berry is left alone on purpose. It is the sale and warning colour, and a
     warning that changes hue with the brand is a warning somebody has to learn
     twice. */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

img, picture, svg { max-width: 100%; display: block; }

/* Every image on the site is wrapped in <picture> for the WebP sources. A picture
   element is an inline-level box that does not inherit its parent's height, so any
   fixed-ratio media slot has to stretch the picture as well as the img inside it,
   or the img resolves height:100% against an auto-height parent and collapses. */
.media-fill,
.media-fill picture,
.media-fill img { width: 100%; height: 100%; }
.media-fill img { object-fit: cover; }

a { color: var(--leaf); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber-deep); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--canopy-deep);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--canopy); color: var(--white); padding: .7rem 1.1rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- header -- */

/* The bar spans the full viewport rather than sitting inside the content column,
   and it is white rather than cream because the logo artwork is supplied on a
   white background. Anything other than white would show as a panel behind it. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 92px;
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Flush to the left edge of the viewport. The artwork already carries a little
   whitespace of its own, which supplies the optical margin. */
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { display: block; width: 260px; height: auto; }

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; font-size: .94rem; font-weight: 500; }
.site-nav a { color: var(--ink); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--canopy); border-bottom-color: var(--amber); }

.cart-link { position: relative; color: var(--canopy-deep); width: 26px; height: 26px; flex: none; }
.cart-link svg { width: 26px; height: 26px; }
.cart-link__count {
  position: absolute; top: -7px; right: -9px;
  /* Red rather than orange: white on the orange apple is 3.36:1, which fails
     AA at this size. White on the red apple is 6.03:1. */
  background: var(--berry); color: var(--white);
  font-size: .68rem; font-weight: 700; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; display: grid; place-items: center;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  min-height: clamp(430px, 66vh, 640px);
  display: grid; align-items: end;
  isolation: isolate;
  color: var(--white);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Bottom-up scrim. Without it the headline sits on whatever the photograph
   happens to be doing at that point and becomes unreadable on some crops. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(14,26,7,.92) 0%, rgba(14,26,7,.66) 32%, rgba(14,26,7,.16) 62%, rgba(14,26,7,.3) 100%);
}

.hero__inner { padding: 3.5rem 0 3rem; max-width: 46rem; }
.hero h1 { color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.35); margin-bottom: .45em; }
.hero p { font-size: 1.13rem; color: rgba(255,253,249,.93); max-width: 34rem; }

.hero__eyebrow {
  display: inline-block; margin-bottom: 1rem;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: var(--paper-warm);
  background: rgba(38,74,18,.58);
  border: 1px solid rgba(255,253,249,.25);
  padding: .42rem .85rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* The hero search. Sits over a dark photograph, so the field is solid rather than
   translucent: a search box you cannot read the placeholder in is decoration. */
.hero__search {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.7rem; max-width: 34rem;
}

.hero__search input[type=search] {
  flex: 1 1 16rem; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: .78rem 1rem;
  border: 1px solid rgba(255,253,249,.4);
  border-radius: var(--radius-s);
  background: var(--white); color: var(--ink);
}

.hero__search input[type=search]::placeholder { color: #7d766b; }

.hero__search input[type=search]:focus {
  outline: 3px solid rgba(221,106,16,.45); outline-offset: 1px;
  border-color: var(--amber);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .96rem;
  padding: .78rem 1.5rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--amber); color: #2b1a06; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--amber-deep); color: var(--white); }

.btn--ghost { background: rgba(255,253,249,.1); color: var(--white); border-color: rgba(255,253,249,.55); }
.btn--ghost:hover { background: rgba(255,253,249,.2); color: var(--white); }

.btn--solid { background: var(--canopy); color: var(--white); }
.btn--solid:hover { background: var(--canopy-deep); color: var(--white); }

.btn--outline { background: transparent; color: var(--canopy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--leaf); background: var(--white); color: var(--canopy); }

.btn--block { width: 100%; }
.btn[disabled], .btn--disabled { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------- trust bar -- */

.trustbar { background: var(--canopy-deep); color: #f6f2e7; }
.trustbar ul {
  list-style: none; margin: 0; padding: .95rem 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem 1.5rem;
  font-size: .87rem;
}
.trustbar li { display: flex; align-items: center; gap: .55rem; }
.trustbar svg { width: 17px; height: 17px; flex: none; color: var(--amber); }

/* No underline, as asked. Colour and a small external-link glyph carry the
   affordance instead, and the glyph brightens on hover so it is not colour alone. */
.trustbar__link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: inherit; text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.trustbar__link:hover { color: var(--gold); }
.trustbar__link:hover .trustbar__link-icon { opacity: 1; }
.trustbar__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.trustbar__link-icon { width: 13px; height: 13px; opacity: .6; color: currentColor; transition: opacity .15s ease; }

/* ----------------------------------------------------------------- viewer -- */

/* A modal panel for looking at one document: the registration certificate on the
   landing page and the conversion chart on the guides page. Named for the job
   rather than for the certificate, because it now holds both.
   
   A native <dialog> rather than a hand-rolled overlay: the browser supplies the
   focus trap, the Escape key, the inertness of the page behind it and the
   backdrop, all of which are easy to get subtly wrong by hand. */
.viewer {
  border: 0; padding: 0; max-width: min(900px, 94vw); width: 100%;
  border-radius: var(--radius); background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.viewer::backdrop { background: rgba(14,26,7,.62); backdrop-filter: blur(3px); }

.viewer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white); border-radius: var(--radius) var(--radius) 0 0;
}
.viewer__head h2 { margin: 0; font-size: 1.15rem; }

/* Buttons and links sit together at the head's right edge, so an icon added
   later lands next to the close cross rather than under the title. */
.viewer__tools { display: flex; align-items: center; gap: .15rem; flex: none; }

.viewer__icon {
  background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  text-decoration: none;
}
.viewer__icon svg { width: 19px; height: 19px; }
.viewer__icon:hover { background: var(--paper-warm); color: var(--ink); }

.viewer__body { padding: 1.3rem; }
.viewer__body img {
  width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: #fff;
}

.viewer__note { margin: 1rem 0 0; font-size: .84rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ certificate -- */

.cert__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.4rem; margin: 0 0 1.2rem;
}
.cert__facts dt {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.cert__facts dd { margin: .15rem 0 0; font-size: 1.02rem; font-weight: 600; color: var(--canopy-deep); }

/* Sits directly under the certificate image, where someone has just read the
   growing-ground address and might otherwise set off for it. */
.cert__where {
  margin: 1.1rem 0 0; padding: .95rem 1.1rem;
  background: var(--paper-warm); border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .89rem; color: var(--ink-soft); line-height: 1.55;
}
.cert__where strong { display: block; color: var(--ink); margin-bottom: .25rem; }
.cert__where a { margin-left: .3rem; white-space: nowrap; }

@media (max-width: 560px) {
  .viewer__body { padding: 1rem; }
  .viewer__head { padding: .9rem 1rem; }
}

/* --------------------------------------------------------------- section -- */

.section { padding: clamp(3rem, 6vw, 4.75rem) 0; }
.section--warm { background: var(--paper-warm); }
.section--dark { background: var(--canopy-deep); color: var(--paper-warm); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--amber); }

.section__head { max-width: 42rem; margin-bottom: 2.2rem; }
.section__head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
.section--dark .section__head p { color: rgba(245,240,229,.92); }

.section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; max-width: none;
}

/* ------------------------------------------------------------ card grids -- */

.grid { display: grid; gap: 1.4rem; }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Category card: image with a gradient foot so the label always reads. */
.cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 4 / 5;
  text-decoration: none; color: var(--white);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.cat-card picture, .cat-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-card img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.cat-card:hover img { transform: scale(1.055); }
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,26,7,.9) 0%, rgba(14,26,7,.46) 38%, rgba(14,26,7,0) 68%);
}
.cat-card__body { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.15rem; z-index: 1; }
.cat-card__body h3 { color: var(--white); margin: 0 0 .2em; font-size: 1.22rem; }
.cat-card__body p { margin: 0; font-size: .84rem; color: rgba(255,253,249,.82); line-height: 1.45; }

/* Product card */
.product-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--leaf-light); }

.product-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-warm); }
.product-card__media picture, .product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-card__body h3 { font-size: 1.05rem; margin: 0 0 .12em; }
.product-card__body h3 a { color: inherit; text-decoration: none; }
.product-card__body h3 a:hover { color: var(--leaf); }
.product-card__botanical { font-style: italic; font-size: .82rem; color: var(--ink-soft); margin: 0 0 .7rem; }
.product-card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.product-card__price { font-weight: 700; font-size: 1.05rem; color: var(--canopy-deep); }
.product-card__price small { font-weight: 500; font-size: .74rem; color: var(--ink-soft); }

.badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: 5px;
}
.badge--out { background: #f6e3e1; color: var(--berry); }
.badge--pickup { background: #eee6d6; color: var(--bark); }
.badge--featured {
  position: absolute; top: .65rem; left: .65rem; z-index: 1;
  background: var(--amber); color: #2b1a06;
}

/* --------------------------------------------------------------- catalog -- */

.catalog { display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem; align-items: start; }

.facets { position: sticky; top: 88px; }
.facets__group { border-bottom: 1px solid var(--line); padding: 0 0 1rem; margin: 0 0 1rem; }
.facets__group:last-of-type { border-bottom: 0; }
.facets h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--sans); font-weight: 700; margin-bottom: .6rem; }
.facets label { display: flex; align-items: center; gap: .55rem; padding: .22rem 0; font-size: .9rem; cursor: pointer; }
.facets label:hover { color: var(--canopy); }
.facets input { accent-color: var(--leaf); width: 16px; height: 16px; flex: none; }
.facets .count { margin-left: auto; font-size: .76rem; color: var(--ink-soft); }

.facets__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.2rem; }

.catalog__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-soft);
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .8rem; font-size: .82rem;
  text-decoration: none; color: var(--ink);
}
.chip:hover { border-color: var(--amber); color: var(--amber-deep); }

.catpills { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.catpills a {
  padding: .45rem 1rem; border-radius: 999px; font-size: .88rem;
  text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
}
.catpills a:hover { border-color: var(--leaf); color: var(--canopy); }
.catpills a.is-active { background: var(--canopy); color: var(--white); border-color: var(--canopy); }

/* --------------------------------------------------------------- product -- */

.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: start; }

.product__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-warm); }
.product__media picture { width: 100%; } .product__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.product__botanical { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink-soft); margin: -.3em 0 1.1em; }

.crumbs { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs span { margin: 0 .4rem; opacity: .5; }

.specs { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem 1.2rem; }
.specs li { border-left: 2px solid var(--leaf-light); padding-left: .75rem; }
.specs dt, .specs .k { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.specs .v { font-size: .95rem; }

.buybox { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }

.sizes { display: grid; gap: .6rem; margin: 0 0 1.2rem; }
.size-option { position: relative; display: block; }
.size-option input { position: absolute; opacity: 0; pointer-events: none; }
.size-option__box {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: .75rem .95rem; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.size-option:hover .size-option__box { border-color: var(--leaf-light); }
.size-option input:checked + .size-option__box { border-color: var(--leaf); background: #f3f7ea; }
.size-option input:focus-visible + .size-option__box { outline: 3px solid var(--amber); outline-offset: 2px; }
.size-option input:disabled + .size-option__box { opacity: .45; cursor: not-allowed; }
.size-option__size { font-weight: 600; }
.size-option__meta { font-size: .76rem; color: var(--ink-soft); }
.size-option__price { font-weight: 700; color: var(--canopy-deep); }

.qty { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.qty label { font-size: .85rem; color: var(--ink-soft); }
.qty input {
  width: 72px; font: inherit; padding: .5rem .6rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--white);
}

.notice {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--paper-warm); border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: .85rem 1rem; font-size: .87rem; margin: 1.1rem 0;
  color: var(--ink-soft);
}
.notice svg { width: 17px; height: 17px; flex: none; color: var(--amber-deep); margin-top: .18rem; }
.notice strong { color: var(--ink); }

.traitrow { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0; }
.traitrow span {
  font-size: .78rem; background: var(--paper-warm);
  border: 1px solid var(--line); border-radius: 999px; padding: .28rem .75rem;
  color: var(--ink-soft);
}

.prose { max-width: 40rem; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4em; }
.prose blockquote { border-left: 3px solid var(--leaf-light); margin: 1.4em 0; padding-left: 1.1rem; color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------------------------ cart -- */

.cart { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }

.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 1.1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line__img { width: 88px; height: 88px; border-radius: var(--radius-s); overflow: hidden; background: var(--paper-warm); }
.cart-line__img picture, .cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line h3 { font-size: 1rem; margin: 0 0 .15em; }
.cart-line h3 a { color: inherit; text-decoration: none; }
.cart-line__meta { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.cart-line__controls { display: flex; align-items: center; gap: .6rem; }
.cart-line__controls input { width: 62px; font: inherit; padding: .4rem .5rem; border: 1.5px solid var(--line); border-radius: var(--radius-s); }
.cart-line__price { font-weight: 700; min-width: 5rem; text-align: right; }

.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--berry); }

.summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; position: sticky; top: 88px; box-shadow: var(--shadow); }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .93rem; }
.summary__row--total { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .9rem; font-size: 1.15rem; font-weight: 700; color: var(--canopy-deep); }

.progress { height: 6px; border-radius: 3px; background: var(--paper-warm); overflow: hidden; margin: .5rem 0 .9rem; }
.progress i { display: block; height: 100%; background: var(--amber); border-radius: 3px; }

.fulfil-list { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .86rem; }
.fulfil-list li { display: flex; gap: .55rem; padding: .35rem 0; color: var(--ink-soft); }
.fulfil-list svg { width: 15px; height: 15px; flex: none; color: var(--leaf); margin-top: .25rem; }

.empty { text-align: center; padding: 4rem 1rem; }
.empty svg { width: 56px; height: 56px; color: var(--leaf-light); margin: 0 auto 1.2rem; }

/* -------------------------------------------------------------- checkout -- */

.checkout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }

.formblock {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.2rem;
}
.formblock h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.formblock[hidden] { display: none; }

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); margin-bottom: .3rem;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: .62rem .75rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--leaf); outline: 3px solid rgba(221,106,16,.28); outline-offset: 0;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field__error { display: block; font-size: .8rem; color: var(--berry); margin-top: .25rem; }
.field__hint { display: block; font-size: .74rem; color: var(--ink-soft); margin-top: .25rem; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- guides --- */

.guide-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.guide-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.guide-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-warm); }
.guide-card__media picture, .guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__body { padding: 1.1rem 1.15rem 1.3rem; }
.guide-card__body h3 { font-size: 1.1rem; margin-bottom: .3em; }
.guide-card__body p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* A printable sheet rather than a photograph. It keeps the card shape so the grid
   stays even, but the artwork is a document: filling a 16 by 9 slot would crop the
   title off the top and the buying tips off the bottom, so it is fitted whole
   against the card's paper colour instead. */
.guide-card__media--sheet { padding: .55rem; }
.guide-card__media--sheet picture, .guide-card__media--sheet img { object-fit: contain; }

.page-hero { position: relative; color: var(--white); isolation: isolate; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media picture, .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,26,7,.93), rgba(14,26,7,.56) 55%, rgba(14,26,7,.4));
}
.page-hero__inner { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3rem); max-width: 44rem; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255,253,249,.9); font-size: 1.06rem; margin: 0; }

/* ---------------------------------------------------------------- visit --- */

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.infocard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.infocard + .infocard { margin-top: 1.2rem; }
.hours { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours span { color: var(--ink-soft); }

/* ---------------------------------------------------------------- flash --- */

.flash { margin: 1rem auto; padding: .8rem 1.1rem; border-radius: var(--radius-s); font-size: .92rem; }
.flash--ok { background: #eaf1e2; border: 1px solid #cadcb4; color: var(--canopy); }
.flash--warn { background: #fdefe1; border: 1px solid #f2d2ae; color: var(--amber-deep); }

/* --------------------------------------------------------------- footer --- */

.site-footer { background: var(--canopy-deep); color: rgba(245,240,229,.94); margin-top: 4rem; padding: 3rem 0 2rem; font-size: .9rem; }
.site-footer h3 { color: var(--white); font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; font-family: var(--sans); font-weight: 700; margin-bottom: .9rem; }
.site-footer a { color: rgba(245,240,229,.95); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.site-footer .hours li { border-bottom-color: rgba(243,236,224,.14); }
.site-footer .hours span { color: rgba(245,240,229,.78); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .22rem 0; }
.site-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(245,240,229,.2); font-size: .8rem; color: rgba(245,240,229,.75); }
.site-footer__legal p { margin: 0 0 .5em; }

/* --------------------------------------------------------------- tables --- */

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tablewrap { overflow-x: auto; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .product { grid-template-columns: 1fr; gap: 2rem; }
  .cart { grid-template-columns: 1fr; }
  .summary { position: static; }
  .visit { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .catalog { grid-template-columns: 1fr; }
  .facets { position: static; }
  .site-nav { display: none; }
  .site-header__inner { min-height: 74px; }
  .brand img { width: 185px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .cart-line { grid-template-columns: 64px 1fr; }
  .cart-line__img { width: 64px; height: 64px; }
  .cart-line__price { grid-column: 2; text-align: left; }
  .section__head--row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .cat-card:hover img { transform: none; }
}

/* ---------------------------------------------------------------- catalogue search */

.catsearch {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 0 0 1.1rem;
    flex-wrap: wrap;
}

.catsearch input[type=search] {
    flex: 1 1 18rem;
    padding: .62rem .85rem;
    font-size: .95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.catsearch input[type=search]:focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: 1px;
}

.catsearch__clear {
    font-size: .85rem;
    color: var(--ink-soft);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----------------------------------------------------------- quick care --- */

/* The signup box at the top of a care page. It is the first thing on the page
   because the sign in the customer's hand promised it there, and because they are
   standing in a car park on a phone. */
.carebox { border-left: 3px solid var(--leaf); }
.carebox h2 { font-size: 1.1rem; }

.carebox__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.carebox__row input {
    flex: 1 1 15rem; font: inherit; padding: .68rem .8rem;
    border: 1.5px solid var(--line); border-radius: var(--radius-s);
    background: var(--white); color: var(--ink);
}
.carebox__row input:focus {
    border-color: var(--leaf); outline: 3px solid rgba(221,106,16,.28);
}
.carebox__row .btn { flex: 0 0 auto; }

.carebox__promise {
    margin: 1rem 0 0; font-size: .83rem; line-height: 1.55; color: var(--ink-soft);
}
.carebox__promise strong { color: var(--ink); }

/* The sign's three columns. The cards are top-aligned rather than stretched so the
   columns read as three lists and not as one table. */
.carecols .infocard h3 { font-size: 1rem; margin-bottom: .8rem; }

.carelist { margin: 0; }
.carelist dt {
    font-weight: 700; font-size: .88rem; color: var(--ink);
    margin-top: .85rem;
}
.carelist dt:first-child { margin-top: 0; }
.carelist dd {
    margin: .15rem 0 0; font-size: .88rem; color: var(--ink-soft);
    line-height: 1.5;
}

.careseason h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.careseason__expect { font-size: .93rem; margin: 0 0 .9rem; }
.careseason__todo { margin: 0; padding-left: 1.15rem; font-size: .9rem; color: var(--ink-soft); }
.careseason__todo li { margin-bottom: .45rem; line-height: 1.5; }
.careseason__todo li:last-child { margin-bottom: 0; }

/* The season the visitor is actually standing in. */
.careseason--now { border-left: 3px solid var(--amber); background: var(--paper-warm); }

/* ------------------------------------------------------- added to cart --- */

/* Sits at the top of the buy box, next to the button that was just pressed.
   The layout's flash bar is above the fold and goes unseen, because adding to the
   cart redirects back to the same page and the browser keeps the scroll position. */
.cartadded {
    background: #eaf1e2; border: 1px solid #cadcb4;
    border-radius: var(--radius-s); padding: .85rem .95rem; margin-bottom: 1.1rem;
}
.cartadded__said {
    display: flex; gap: .5rem; align-items: center;
    margin: 0 0 .7rem; font-size: .92rem; font-weight: 600; color: var(--canopy);
}
.cartadded__said svg { width: 17px; height: 17px; flex: none; }

.cartadded__next { display: flex; gap: .5rem; flex-wrap: wrap; }
.cartadded__next .btn { flex: 1 1 auto; font-size: .88rem; padding: .5rem .9rem; }

/* The best-efforts note under a product's specification list. Quiet on purpose: it
   belongs next to the claims it qualifies, without competing with them. */
.product__caveat {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: -.4rem 0 1.4rem;
}