/* ==========================================================================
   EL DORADO FURNITURE — edf-v2.css  (v2.0)
   Companion stylesheet to the website's ckbe.min.css.

   RULES — READ BEFORE TOUCHING THIS FILE
   1. Every EDF page loads TWO stylesheets (plus Font Awesome), in this order:
        a) ckbe.min.css  (original site CSS — never edited)
        b) edf-v2.css    (this file — all new/campaign components)
   2. HTML files must NOT contain <style> blocks or new inline CSS.
      The only inline style allowed is a per-element CSS variable
      (e.g. style="--x:20%;--y:40%" on hotspots, --ph-ar on placeholders).
   3. Only classes listed in the APPROVED CLASS REGISTRY below may be used.
      Need a new class? Request it from the main UX/UI owner (Angie). Only
      the owner adds classes to this file and bumps the version.
   4. All classes use the .edf- prefix so they can never collide with ckbe.
      The wrapper <div class="edf"> carries the design tokens (custom
      properties) and must surround every v2 component.

   DESIGN TOKENS (defined on .edf)
     sage #9BB18C · sage-deep #5F7350 · blue #4C779E · navy #385672
     ink #222 · ink-soft #555 · rule #D3D3D3 · band #F7F7F7 · focus #4D4DFF

   CHANGELOG
     v2.0  Consolidated from the Italian Design Edit campaign CSS and its
           former inline <style> / style="" rules. Renamed .ide -> .edf.
           Added .edf-prod__price--sale / .edf-prod__was (red sale price,
           struck-through former price).
     v2.1  FAQ compact treatment: smaller heading/questions/answers, brand-blue
           eyebrow (.edf-faq). No new classes.

   APPROVED CLASS REGISTRY (108 classes)
     .edf
     .edf-anchornav
     .edf-body
     .edf-body--onImage
     .edf-body-disclaimer
     .edf-body-disclaimer--spaced
     .edf-btn
     .edf-btn--outline
     .edf-btn--solid
     .edf-btn__icon
     .edf-callout
     .edf-callout__tag
     .edf-callout__tip
     .edf-caption
     .edf-cart
     .edf-detailpair
     .edf-detailpair__cap
     .edf-display
     .edf-events
     .edf-events__title
     .edf-eyebrow
     .edf-eyebrow--italian
     .edf-eyebrow--onImage
     .edf-fade
     .edf-faq
     .edf-faq__a
     .edf-faq__cols
     .edf-faq__item
     .edf-faq__list
     .edf-faq__mark
     .edf-faq__q
     .edf-fig
     .edf-fig--crop32
     .edf-fig--wide31
     .edf-grid-prod
     .edf-grid2
     .edf-grid3
     .edf-h1
     .edf-h2
     .edf-h3
     .edf-hero
     .edf-hero__copy
     .edf-hero__inner
     .edf-hero__kicker
     .edf-hero__media
     .edf-hotspot
     .edf-hotspot--end
     .edf-hotspot--pending
     .edf-hotspot--start
     .edf-hotspot--up
     .edf-hotspot__dot
     .edf-hotspot__label
     .edf-hotspot__price
     .edf-lede
     .edf-madeinitaly
     .edf-madeinitaly--overlap
     .edf-madeinitaly__badge
     .edf-madeinitaly__flag
     .edf-madeinitaly__name
     .edf-materials
     .edf-microcopy
     .edf-microcopy--onDark
     .edf-microcopy--spaced
     .edf-pending
     .edf-ph
     .edf-ph--square
     .edf-ph--wide
     .edf-ph__label
     .edf-pieces
     .edf-pieces__pending
     .edf-prod
     .edf-prod--pending
     .edf-prod__base
     .edf-prod__cat
     .edf-prod__foot
     .edf-prod__hover
     .edf-prod__link
     .edf-prod__media
     .edf-prod__media--swap
     .edf-prod__name
     .edf-prod__pendingnote
     .edf-prod__price
     .edf-prod__price--sale
     .edf-prod__was
     .edf-promo
     .edf-promo__media
     .edf-quote
     .edf-quote-cite
     .edf-quoteband
     .edf-rise
     .edf-rule
     .edf-sec
     .edf-sec--tall
     .edf-sec--tight
     .edf-shell
     .edf-split
     .edf-split--even
     .edf-split--flip
     .edf-split--mediafirst
     .edf-split--sticky
     .edf-split__media
     .edf-sr
     .edf-stagger
     .edf-sticky
     .edf-vp
     .edf-vp__head
     .edf-vp__label
     .edf-zoom
   ========================================================================== */

.edf{
  --sage:#9BB18C;
  --sage-deep:#5F7350;        /* sage darkened to 5.2:1 on white — see A11Y note */
  --blue:#4C779E;
  --navy:#385672;
  --ink:#222222;
  --ink-soft:#555555;
  --rule:#D3D3D3;
  --band:#F7F7F7;
  --ph:#E6E6E6;
  --ph-line:#B9B9B9;
  --white:#ffffff;
  --focus:#4D4DFF;

  --gutter:clamp(1rem,4vw,3.5rem);
  --air-s:clamp(1.75rem,3vw,2.75rem);
  --air-m:clamp(3rem,6vw,5.5rem);
  --air-l:clamp(4.5rem,9vw,8rem);

  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-size:clamp(0.9375rem,0.35vw + 0.875rem,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.edf *,.edf *::before,.edf *::after{ box-sizing:border-box; }
.edf img{ display:block; max-width:100%; height:auto; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
/* The page wrapper section.main already supplies the site container:
     max-width:1600px; width:100%; margin:0 auto; padding:0 20px  (ckbe.min.css)
   so the content box is 1560px, exactly as drawn in the mockup. This must add
   nothing on top of that, or the content sits indented from the global header
   and the promo banners. */
.edf-shell{ width:100%; }
.edf-sec{ padding:var(--air-m) 0; }
.edf-sec--tight{ padding:var(--air-s) 0; }
.edf-sec--tall{ padding:var(--air-l) 0; }
.edf-rule{ height:0; border:0; border-top:1px dotted var(--rule); margin:0; }

.edf-split{ display:grid; gap:var(--air-s); align-items:start; }
/* Grid items default to min-width:auto, so a column will not shrink below the
   intrinsic width of an image inside it — a 1344px silhouette would force its
   column to 1344px and push the page into horizontal scroll. min-width:0 lets
   the track shrink; the images then honour width:100% / max-width:100%. */
.edf-split > *,
.edf-grid3 > *,
.edf-grid2 > *,
.edf-pieces > *{ min-width:0; }
@media (min-width:56.25em){
  .edf-split{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2rem,4vw,4.5rem); }
  /* Lifestyle sections: the copy column holds still while the tall image scrolls
     past, then releases naturally into the next section. Needs the grid item to
     stretch to the row height — with align-items:start it has no room to travel. */
  .edf-split--sticky{ align-items:stretch; }
  /* Photo on the left, copy on the right — the wide track leads. */
  .edf-split--mediafirst{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .edf-split--mediafirst > .edf-split__media{ order:-1; }
  .edf-sticky{ position:sticky; top:clamp(1.5rem,5vh,3.25rem); }
  .edf-split--even{ grid-template-columns:1fr 1fr; align-items:center; }
  .edf-split--flip > .edf-split__media{ order:-1; }
}
.edf-grid3{ display:grid; gap:var(--air-s); }
@media (min-width:40em){ .edf-grid3{ grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2.5rem); } }
.edf-grid2{ display:grid; gap:var(--air-s); }
@media (min-width:48em){ .edf-grid2{ grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2vw,2rem); } }

/* --------------------------------------------------------------------------
   CHARACTER STYLES  (the new styles this page adds to the kit)
   -------------------------------------------------------------------------- */

/* Eyebrow — section label. Sage, uppercase, wide tracking. */
.edf-eyebrow{
  display:block; margin:0 0 .7em;
  font-size:.8125rem; font-weight:400; line-height:1.3;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-deep);
}
/* Italian phrase variant — same style, italic (LA DOLCE VITA, IL MERITATO RIPOSO) */
.edf-eyebrow--italian{ font-style:italic; letter-spacing:.2em; }
/* On the hero photo, over dark imagery */
.edf-eyebrow--onImage{ color:var(--white); letter-spacing:.28em; }

.edf-h1{
  margin:0; font-weight:400; letter-spacing:-.01em; line-height:1.25;
  font-size:clamp(1.375rem,1.2vw + 1rem,1.75rem);
}
.edf-h2{
  margin:0 0 .45em; font-weight:300; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.625rem,2.4vw + .5rem,2.75rem);
}
.edf-h3{
  margin:0 0 .4em; font-weight:400; letter-spacing:-.01em; line-height:1.25;
  font-size:clamp(1.0625rem,.6vw + .875rem,1.3125rem);
}
.edf-display{
  margin:0 0 .5em; font-weight:300; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2.25rem,4.5vw + .5rem,4.25rem);
  color:var(--white);
}
.edf-body{ margin:0 0 1.15em; max-width:65ch; }
.edf-body:last-child{ margin-bottom:0; }
.edf-body--onImage{ color:var(--white); max-width:55ch; }
.edf-lede{ margin:0 0 1.5em; max-width:100ch; color:var(--ink); }
.edf-caption{ margin:.85em 0 0; font-size:.8125rem; line-height:1.45; color:var(--ink-soft); }
.edf-microcopy{ margin:0 0 .6em; font-size:.75rem; color:var(--ink-soft); }

.edf-body-disclaimer{ margin:0 0 .6em; font-size:.75rem; color:var(--ink-soft); }

/* Quote band
   A11Y: the mockup sets white text on sage #9BB18C. Measured, that is 2.3:1 —
   it fails AA for both the quote (needs 3:1 at that size) and the cite line
   (needs 4.5:1). The band color is kept exactly as approved and the text is
   set in ink instead, which measures 7.0:1.
   To go back to white text the band has to darken to about #6F8760; swap
   --quote-band and --quote-ink together, never one alone. */
.edf-quoteband{
  --quote-band:var(--sage);
  --quote-ink:#fff;
  background:var(--quote-band);
  padding:clamp(2.5rem,6vw,5rem) var(--gutter);
}
.edf-quote{
  margin:0 auto; max-width:86ch; text-align:center; text-wrap:balance;
  font-style:italic; font-weight:300; line-height:1.25; color:var(--quote-ink);
  font-size:clamp(1.25rem,2.2vw + .5rem,2.125rem);
}
.edf-quote-cite{
  display:block; margin-top:1.6em; font-style:normal;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--quote-ink); opacity:.82;
}

/* Anchor nav under the hero */
.edf-anchornav{
  margin-top:var(--air-s);
  border-top:1px dotted var(--rule); border-bottom:1px dotted var(--rule);
}
/* Sizes measured off the mockup: the items are ~21px with 0.2em tracking and a
   consistent 75px gap between them (item starts at x 182 / 353 / 531 / 753 / 932,
   widths 96.5 / 102.7 / 146.8 / 104 / 112.1 — a 75pt gap every time). */
.edf-anchornav ul{
  display:flex; flex-wrap:wrap; gap:0 clamp(1.5rem,4.7vw,4.7rem);
  margin:0; padding:0; list-style:none; justify-content:flex-start;
}
/* Small screens: tighten the tracking and gap so the six items fit on two lines
   rather than three, and keep them left aligned with the rest of the page. */
@media (max-width:47.9375em){
  .edf-anchornav ul{ gap:0 clamp(.75rem,3.2vw,1.4rem); }
  .edf-anchornav a{ font-size:.8125rem; letter-spacing:.1em; padding:.7rem 0; }
}
.edf-anchornav a{
  display:block; padding:clamp(1rem,2vw,2rem) 0; text-decoration:none; color:var(--ink);
  font-size:clamp(.9375rem,.6vw + .75rem,1.3125rem);
  letter-spacing:.2em; text-transform:uppercase;
}
.edf-anchornav a:hover,.edf-anchornav a:focus-visible{ color:var(--blue); text-decoration:none; }

/* --------------------------------------------------------------------------
   BUTTONS
   Kit classes carry production styling (button / .accented-3). These add only
   the sizing + icon behavior the mockup shows.
   -------------------------------------------------------------------------- */
/* Geometry and timing are lifted from ckbe.min.css so these match the kit's real
   buttons rather than approximating them.

   Every one of these is an <a>, so every link state is written out explicitly —
   :link, :visited, :hover, :focus, :active — and the selectors carry element +
   class weight. Without that, any `a` colour rule on the site can leak a link
   colour into the label, which is how grey text gets in. There is no state in
   which any of these buttons has grey text. */
.edf-btn{
  display:inline-block; font:inherit; font-size:100%; line-height:normal;
  padding:10px 15px; border:solid 1px transparent; border-radius:3px;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
}

/* PRIMARY — kit `button`: #4c779e, hover #7299bb, white label at every state. */
.edf-btn--solid,
.edf a.edf-btn--solid,
.edf a.edf-btn--solid:link,
.edf a.edf-btn--solid:visited{
  background:#4c779e; border-color:#4c779e; color:#fff;
}
.edf-btn--solid:hover,
.edf-btn--solid:focus,
.edf-btn--solid:focus-visible,
.edf-btn--solid:active,
.edf a.edf-btn--solid:hover,
.edf a.edf-btn--solid:focus,
.edf a.edf-btn--solid:active{
  background:#7299bb; border-color:#7299bb; color:#fff;
}

/* SECONDARY — inverted primary. White fill with a #4C779E border and label;
   on hover it fills with that same #4C779E and the label flips to white. */
.edf-btn--outline,
.edf a.edf-btn--outline,
.edf a.edf-btn--outline:link,
.edf a.edf-btn--outline:visited{
  background:#fff; border-color:#4c779e; color:#4c779e;
}
.edf-btn--outline:hover,
.edf-btn--outline:focus,
.edf-btn--outline:focus-visible,
.edf-btn--outline:active,
.edf a.edf-btn--outline:hover,
.edf a.edf-btn--outline:focus,
.edf a.edf-btn--outline:active{
  background:#4c779e; border-color:#4c779e; color:#fff;
}

.edf-btn__icon{ margin-left:.45em; }

/* Cart button on product cards — kit primary colors, kit radius. */
.edf-cart{
  flex:0 0 auto; width:2.75rem; height:2.25rem; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#4c779e; border:solid 1px #4c779e; border-radius:3px;
  color:#fff; cursor:pointer; letter-spacing:0; text-decoration:none;
  transition:background .15s ease-in-out, border .15s ease-in-out;
}
.edf-cart:hover,
.edf-cart:focus,
.edf-cart:focus-visible,
.edf-cart:active{ background:#7299bb; border-color:#7299bb; color:#fff; }
/* ckbe.min.css sets `button>i:last-child{ margin:0 -2px 0 10px }`, which is meant
   for an icon trailing a text label. A lone icon matches it too and gets shoved
   off-center, so it is reset here. Same specificity as the kit rule, but this
   sheet loads after it. */
.edf-cart > i.fa{
  display:block; width:auto; margin:0; line-height:1; font-size:.9375rem;
}


/* --------------------------------------------------------------------------
   v4 ADDITIONS
   -------------------------------------------------------------------------- */

/* "Featured Premium Materials" — the label above each swatch trio. It reads red
   in the hotspot guides, but that is guide mark-up; sampled from the v4 mockup it
   is ink, so it ships as a plain label. */
.edf-materials{
  margin:var(--air-s) 0 .9rem;
  font-size:1rem; font-weight:400; color:var(--ink);
}

/* "Made in Italy" caption under a silhouette: product name plus the badge. */
.edf-madeinitaly{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.1rem;
  margin-top:1rem;
}
.edf-madeinitaly--overlap{
  position:relative;
  margin-top:calc(1rem - var(--mii-pull, 0px));
}
.edf-madeinitaly__name{ font-size:.6875rem; letter-spacing:.02em; }
.edf-madeinitaly__name a{ color:var(--ink); text-decoration:underline; }
.edf-madeinitaly__name a:hover,
.edf-madeinitaly__name a:focus-visible{ color:var(--blue); }
.edf-madeinitaly__badge{
  display:inline-flex; align-items:baseline; gap:.4em;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-deep);
}
/* The global `.edf img { height:auto }` rule is (0,1,1) and outranked a plain
   `.edf-madeinitaly__flag` (0,1,0), so the flag rendered at its intrinsic 92x60.
   Element+class weight fixes it. Sized to sit on the cap height of the label
   beside it, so it reads as a small inline icon rather than a picture. */
.edf img.edf-madeinitaly__flag{
  height:.85em; width:auto; display:inline-block; vertical-align:baseline;
  position:relative; top:.06em; flex:0 0 auto;
}

/* Product cards with a second photo that cross-fades in on hover. Both images
   stack in the same box; the base fades out as the hover image fades in. */
/* The product photo is a link to the PDP. It is aria-hidden and out of the tab
   order because the product name and the cart button beside it already link
   there — three links to one page would be read three times. */
.edf-prod__link{ display:block; width:100%; height:100%; }

.edf-prod__media--swap{ position:relative; }
.edf-prod__media--swap img{
  transition:opacity .45s ease-in-out;
}
.edf-prod__media--swap .edf-prod__hover{
  position:absolute; left:0; bottom:0; width:100%; height:100%;
  object-fit:contain; object-position:left bottom; opacity:0;
}
.edf-prod:hover .edf-prod__media--swap .edf-prod__hover,
.edf-prod:focus-within .edf-prod__media--swap .edf-prod__hover{ opacity:1; }
.edf-prod:hover .edf-prod__media--swap .edf-prod__base,
.edf-prod:focus-within .edf-prod__media--swap .edf-prod__base{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .edf-prod__media--swap img{ transition:none; }
}

/* A product card whose link is not available yet. */
.edf-prod--pending .edf-prod__name{ color:var(--ink); }
.edf-prod__pendingnote{
  margin:.35em 0 0; font-size:.75rem; color:#C8102E;
}

/* --------------------------------------------------------------------------
   FIGURES, LIFESTYLE IMAGES, HOTSPOT MARKERS
   -------------------------------------------------------------------------- */
.edf-fig{ margin:0; position:relative; }
.edf-fig img{ width:100%; }
/* Controlled crop, for a source image whose ratio does not match its slot. */
.edf-fig--crop32{ overflow:hidden; }
.edf-fig--crop32 img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
@supports not (aspect-ratio:1/1){ .edf-fig--crop32 img{ max-height:32rem; } }
/* The events photo is a wide landscape crop in v4 (952 x 307). */
.edf-fig--wide31{ overflow:hidden; }
.edf-fig--wide31 img{ width:100%; aspect-ratio:952/307; object-fit:cover; }
@supports not (aspect-ratio:1/1){ .edf-fig--wide31 img{ max-height:18rem; } }
.edf-detailpair{ display:flex; align-items:flex-start; gap:1rem; margin-top:var(--air-s); }
.edf-detailpair img{ width:clamp(4.5rem,9vw,7.25rem); }
.edf-detailpair__cap{ font-size:.8125rem; color:var(--ink-soft); line-height:1.4; }

/* Hotspot markers.
   At rest: a white dot, nothing else. On hover or keyboard focus the dot fills
   with #5D84AB (sampled from the hotspot guide), grows a little, and a white pill
   fades in below it carrying the product name in bold and the price lighter
   beside it. Each marker is a real link to the product page, so it is reachable
   by keyboard and announced with its name and price. Positions are percentages,
   so they track the photo at any width. */
.edf-hotspot{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:2.75rem; height:2.75rem;              /* 44px minimum hit target */
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; z-index:2;
}
.edf-hotspot:hover,
.edf-hotspot:focus-visible{ z-index:6; }

.edf-hotspot__dot{
  width:1.05rem; height:1.05rem; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px rgba(34,34,34,.16), 0 2px 8px rgba(34,34,34,.28);
  transition:transform .4s cubic-bezier(.22,.68,.28,1),
             background-color .3s ease-in-out,
             box-shadow .3s ease-in-out;
}
.edf-hotspot:hover .edf-hotspot__dot,
.edf-hotspot:focus-visible .edf-hotspot__dot{
  background:#5D84AB;
  transform:scale(1.35);
  box-shadow:0 0 0 1px rgba(34,34,34,.10), 0 3px 12px rgba(34,34,34,.32);
}

.edf-hotspot__label{
  position:absolute; top:calc(50% + 1.05rem); left:50%; margin-left:-2.5rem;
  background:#fff; color:var(--ink);
  border-radius:8px; box-shadow:0 4px 16px rgba(34,34,34,.22);
  padding:.6em .85em; white-space:nowrap;
  font-size:clamp(.75rem,.35vw + .65rem,.875rem); line-height:1.25;
  opacity:0; transform:translateY(.4rem);
  transition:opacity .3s ease-in-out, transform .4s cubic-bezier(.22,.68,.28,1);
  pointer-events:none;
}
.edf-hotspot__label b{ font-weight:700; }
.edf-hotspot__price{ font-weight:400; color:var(--ink-soft); }
.edf-hotspot:hover .edf-hotspot__label,
.edf-hotspot:focus-visible .edf-hotspot__label{ opacity:1; transform:translateY(0); }

/* A piece with no product link or price yet. The guide marks these in red, so
   they read as outstanding rather than looking like finished content. The marker
   is a <span>, not a link, so it is not focusable and promises nothing. */
.edf-hotspot--pending .edf-hotspot__dot{
  background:#fff; box-shadow:0 0 0 1px rgba(200,16,46,.55), 0 2px 8px rgba(34,34,34,.28);
}
.edf-hotspot--pending:hover .edf-hotspot__dot{ background:#C8102E; }
.edf-hotspot--pending .edf-hotspot__price{ color:#C8102E; }
.edf-pieces__pending{ color:#C8102E; }
.edf-pieces__pending + span{ color:#C8102E; }

/* Which way a label opens is set per marker so it always stays inside the photo.
   The label is a fixed size in rem while the photo scales, so the markers nearest
   an edge need to open inwards — most visible at narrow widths. */

/* near the left edge: the label starts level with the marker */
.edf-hotspot--start .edf-hotspot__label{ left:50%; margin-left:-.5rem; }

/* near the right edge: the label opens leftwards. The overhang past the marker
   is tunable per marker with --lab-x, for the few sitting right on the edge. */
.edf-hotspot--end .edf-hotspot__label{
  left:auto; right:50%; margin-left:0; margin-right:var(--lab-x,-2.5rem);
}

/* near the bottom: the label opens above the marker */
.edf-hotspot--up .edf-hotspot__label{
  top:auto; bottom:calc(50% + 1.05rem); transform:translateY(-.4rem);
}
.edf-hotspot--up:hover .edf-hotspot__label,
.edf-hotspot--up:focus-visible .edf-hotspot__label{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .edf-hotspot__dot,.edf-hotspot__label{ transition:none; }
  .edf-hotspot:hover .edf-hotspot__dot,
  .edf-hotspot:focus-visible .edf-hotspot__dot{ transform:none; }
}

/* "Every piece is also listed below".
   Hard rule: an item never wraps. The column count then has to follow the width
   actually available, which is why there are three states. Measured at 11px, the
   two-row layout needs up to 712px and the media column runs about 0.55 of the
   content box, so two rows only fit once the viewport is past ~1335px. The
   breakpoint below is set at 1408px to leave a margin on that measurement. */
.edf-pieces{
  margin:0; padding:.85rem 0 0; list-style:none;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr;
  column-gap:clamp(.9rem,1.8vw,1.75rem);
  row-gap:.15rem;
  font-size:clamp(.625rem,.5vw + .45rem,.6875rem);
}
.edf-pieces li{
  display:flex; align-items:baseline; justify-content:space-between; gap:.9em;
  padding:.3rem 0; white-space:nowrap;
}
.edf-pieces a{ color:var(--ink); text-decoration:underline; white-space:nowrap; }
.edf-pieces a:hover,.edf-pieces a:focus-visible{ color:var(--blue); }
.edf-pieces span{ color:var(--ink-soft); white-space:nowrap; }

/* Below the split, the list stops being a grid entirely and flows as wrapping
   inline items — a single-column stack of 8-9 rows eats far too much height on a
   phone. Each item still holds together on one line and never breaks mid-name. */
@media (max-width:56.24em){
  .edf-pieces{
    display:flex; flex-wrap:wrap; gap:.35rem 1.25rem;
    grid-template-columns:none; grid-template-rows:none;
  }
  .edf-pieces li{ flex:0 0 auto; justify-content:flex-start; gap:.45em; padding:.15rem 0; }
}

/* two columns as soon as the split goes side by side */
@media (min-width:56.25em){
  .edf-pieces{ grid-template-columns:repeat(2,max-content); }
}
/* two rows, filled column by column — the layout the design calls for */
@media (min-width:88em){
  .edf-pieces{
    grid-template-columns:none;
    grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    column-gap:1.25rem;
  }
}

/* --------------------------------------------------------------------------
   PRODUCT CARDS
   -------------------------------------------------------------------------- */
/* Product rows are four-up and flush with the section text, so no inset. */
.edf-grid-prod{ display:grid; gap:var(--air-s); }
.edf-grid-prod > *{ min-width:0; }
@media (min-width:40em){
  .edf-grid-prod{ grid-template-columns:repeat(2,1fr); gap:clamp(1.25rem,2.5vw,2.5rem); }
}
@media (min-width:64em){
  .edf-grid-prod{ grid-template-columns:repeat(4,1fr); }
}

/* The image and the text block below it share one width, so the image's left edge
   lines up with the product name, and the cart button — pushed to the far end of
   that same width — lines up with the image's right edge. Every product export is
   square, so a 1/1 media box holds them all without letterboxing. */
.edf-prod{ display:flex; flex-direction:column; --prod-w:min(100%, 18rem); }
.edf-prod__media{
  position:relative;                          /* positioning context for .edf-callout */
  width:var(--prod-w); aspect-ratio:1/1;
  display:flex; align-items:flex-end; justify-content:flex-start;
}
@supports not (aspect-ratio:1/1){ .edf-prod__media{ min-height:15rem; } }
.edf-prod__media img{ max-width:100%; max-height:100%; width:auto; height:auto; }
.edf-prod .edf-ph{ width:var(--prod-w); }
.edf-prod__foot{
  width:var(--prod-w);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-top:1.25rem;
}
.edf-prod__name{ margin:0; font-size:1rem; font-weight:400; line-height:1.25; }
.edf-prod__cat{ margin:.15em 0 .3em; font-size:.75rem; color:var(--ink-soft); }
.edf-prod__price{ margin:0; font-size:1rem; }
.edf-prod__price sup{ font-size:.7em; top:-.35em; }
/* Reduced price: sale price in red (#C8102E, 6.0:1 on white), former price struck
   through in soft ink beside it. Markup: <p class="edf-prod__price edf-prod__price--sale">
   <sup>$</sup>1,799 <span class="edf-prod__was">Was <sup>$</sup>2,099</span></p> */
.edf-prod__price--sale{ color:#C8102E; font-weight:700; }
.edf-prod__was{
  display:block; font-size:.8125rem; font-weight:400;
  color:var(--ink-soft); text-decoration:line-through;
}

/* --------------------------------------------------------------------------
   PRODUCT CALLOUT  (.edf-callout)
   --------------------------------------------------------------------------
   A hard-coded copy of the live site's `div.callout` badge, so a piece flagged
   here reads at exactly the same size and weight as the same flag does on a
   category tile.*/

.edf-callout{
  position:absolute; top:10px; left:10px; right:0; z-index:3;
  pointer-events:none;                        /* the badge takes the hover, not the box */
  font-size:16px;                             /* the 80% below resolves against this */
  line-height:1.6;
}
.edf-callout__tag{
  position:relative;                          /* anchors the tooltip; no size effect */
  display:inline-block; text-align:center;
  border-style:solid; border-width:1px; border-radius:1px;
  font-size:80%; font-weight:500;
  padding:4px 6px; margin-bottom:6px;
  color:#FFFFFF; background:var(--sage); border-color:var(--sage);
  pointer-events:auto; cursor:pointer;
}
@media (max-width:1024px){
  .edf-callout__tag{ padding:3px 4px; margin-bottom:5px; }
}

/* The tooltip the live site builds from `data-tooltip-content`. There is no
   tooltip script on this page, so it is a real element sitting above the badge
   and revealed on hover or keyboard focus. It is allowed to overflow the media
   box, so the callout is raised over neighboring cards while it is open.

   It lives *inside* the badge rather than beside it under an `aria-describedby`
   id. An id would have to be unique per product, which would make the block
   something you edit instead of something you paste; nesting it means focusing
   the badge announces the bubble's copy as part of the badge's own name. The
   repeated heading inside the bubble is aria-hidden so it is not read twice. */
.edf-callout:hover,
.edf-callout:focus-within{ z-index:7; }

.edf-callout__tip{
  position:absolute; left:0; bottom:100%; margin-bottom:.5rem;
  display:block; width:15rem; max-width:70vw;
  background:#fff; color:var(--ink); text-align:left;
  border-radius:8px; box-shadow:0 4px 16px rgba(34,34,34,.22);
  padding:.85em 1em;
  font-size:.875rem; line-height:1.35;
  opacity:0; transform:translateY(.4rem);
  transition:opacity .3s ease-in-out, transform .4s cubic-bezier(.22,.68,.28,1);
  pointer-events:none;
}
.edf-callout__tip b{ display:block; font-weight:700; margin-bottom:.15em; }
/* The pointer under the bubble, aimed at the middle of the badge. */
.edf-callout__tip::after{
  content:""; position:absolute; top:100%; left:1.75rem;
  border:8px solid transparent; border-top-color:#fff; border-bottom:0;
}
.edf-callout:hover .edf-callout__tip,
.edf-callout:focus-within .edf-callout__tip{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .edf-callout__tip{ transition:none; }
}

/* --------------------------------------------------------------------------
   VALUE PROP CARDS  (Italian Design / Special Pricing / BluCard)
   -------------------------------------------------------------------------- */
.edf-vp{ border:1px solid var(--rule); padding:clamp(1.1rem,1.8vw,1.6rem); }
.edf-vp__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.edf-vp__head img{ height:1.05rem; width:auto; }
.edf-vp__label{
  font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep);
}
.edf-vp h3{ margin:0 0 .4em; font-size:1rem; font-weight:400; }
.edf-vp p{ margin:0; font-size:.8125rem; line-height:1.5; color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   PROMO CARDS
   -------------------------------------------------------------------------- */
.edf-promo{ display:flex; gap:1.1rem; border:1px solid var(--rule); padding:1.1rem; align-items:flex-start; }
.edf-promo__media{ flex:0 0 clamp(6rem,12vw,9rem); }
.edf-promo h3{ margin:0 0 .35em; font-size:1.0625rem; font-weight:400; }
.edf-promo p{ margin:0 0 .9em; font-size:.8125rem; line-height:1.5; color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   EVENTS SCHEDULE
   -------------------------------------------------------------------------- */
.edf-events{ margin:var(--air-s) 0 0; }
.edf-events__title{ margin:0 0 .8em; font-size:1rem; font-weight:400; }
.edf-events ul{ margin:0; padding:0; list-style:none; }
.edf-events li{ padding:.3rem 0; font-size:.9375rem; }
.edf-events a{ color:var(--ink); text-decoration:none; }
.edf-events a:hover,.edf-events a:focus-visible{ color:var(--blue); text-decoration:underline; }
.edf-events .fa{ color:var(--blue); margin-left:.4em; }

/* --------------------------------------------------------------------------
   GREY PLACEHOLDERS — image not delivered yet
   The label names the slot and the export size needed. Delete the whole
   .edf-ph element and put the real image element in its place.
   (Written out in words rather than as a tag so that grepping the built file
   for image tags returns only real images.)
   -------------------------------------------------------------------------- */
.edf-ph{
  position:relative;
  aspect-ratio:var(--ph-ar,952/671);
  background:var(--ph);
  border:1px dashed var(--ph-line);
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem; text-align:center;
}
@supports not (aspect-ratio:1/1){ .edf-ph{ min-height:14rem; } }
.edf-ph__label{
  font-size:.8125rem; line-height:1.5; color:#5A5A5A; max-width:32ch;
}
.edf-ph__label b{ display:block; margin-top:.4em; color:var(--ink); font-weight:700; }
.edf-ph--square{ --ph-ar:1/1; }
.edf-ph--wide{ --ph-ar:21/9; }

/* --------------------------------------------------------------------------
   DESIGN-QA MARKER — "PENDING FINAL VERSION OF THIS IMAGE"
   Review aid. build-management.sh strips every .edf-pending element, so it
   never reaches production.
   -------------------------------------------------------------------------- */
.edf-pending{
  margin:.9rem 0 0; color:#C8102E; font-size:.875rem; font-weight:400;
  letter-spacing:.01em;
}

/* --------------------------------------------------------------------------
   HERO — split panel: sage copy box on the left, photograph on the right.
   Stacks on small screens with the photograph first.
   -------------------------------------------------------------------------- */
.edf-hero {
  position: relative;
  display: grid;
}

@media (min-width: 56.25em) {
  .edf-hero {
    grid-template-columns: 0.4fr 0.6fr;
    align-items: stretch;
    min-height: clamp(26rem, 38vw, 34rem);
  }
  /* The photograph leads in source order so it stacks first on small screens;
     on the split layout the copy panel moves to the left column. */
  .edf-hero__copy { order: -1; }
}

.edf-hero__media {
  position: relative;
  /* The edf-zoom scroll animation scales this image slightly. Without clipping
     here, the scaled image paints wider than its box and the page gets a
     horizontal scrollbar. */
  overflow: hidden;
}

.edf-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* On the split layout the photograph fills whatever height the copy panel
   sets, so it is taken out of flow rather than given its own aspect ratio. */
@media (min-width: 56.25em) {
  .edf-hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* The sage panel.
   A11Y: white copy on flat sage #9BB18C measures 2.3:1 and fails AA, so the
   gradient runs between two darkened sage values — #5F7350 (5.2:1) to
   #677C57 (4.6:1). Lightening the right-hand stop any further drops the body
   copy below 4.5:1. */
.edf-hero__copy {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #5F7350 0%, #677C57 100%);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}

.edf-hero__inner {
  width: 100%;
  max-width: 42rem;
}

.edf-hero__kicker {
  width: clamp(3.5rem, 6vw, 7rem);
  height: 2px;
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
  background: var(--sage);
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
.edf :focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.edf-hero :focus-visible{ outline-color:var(--white); }
.edf-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   SCROLL MOTION — soft, slow, and entirely optional
   Progressive enhancement: without animation-timeline support every element
   is simply visible. Nothing here moves layout.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .edf-rise,.edf-fade,.edf-zoom > img{
      animation-timeline:view();
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.22,.68,.28,1);
    }
    .edf-rise{ animation-name:edf-rise; animation-range:entry 4% entry 82%; }
    .edf-fade{ animation-name:edf-fade; animation-range:entry 0% entry 65%; }
    .edf-zoom > img{ animation-name:edf-zoom; animation-range:cover 0% cover 100%; animation-timing-function:linear; }
    .edf-stagger > *{ animation:edf-rise both cubic-bezier(.22,.68,.28,1); animation-timeline:view(); }
    /* All ranges stay in `entry` units. Mixing `entry` with `cover` inverts on a
       tall element — on mobile a full-width card made `cover 2%` resolve BEFORE
       `entry 25%`, so the 4th card and beyond never ran and stayed at opacity 0. */
    .edf-stagger > *:nth-child(1){ animation-range:entry 4%  entry 76%; }
    .edf-stagger > *:nth-child(2){ animation-range:entry 11% entry 84%; }
    .edf-stagger > *:nth-child(3){ animation-range:entry 18% entry 92%; }
    .edf-stagger > *:nth-child(4){ animation-range:entry 25% entry 98%; }
    .edf-stagger > *:nth-child(n+5){ animation-range:entry 30% entry 100%; }
  }
}
@keyframes edf-rise{ from{ opacity:0; transform:translateY(1.75rem); } to{ opacity:1; transform:none; } }
@keyframes edf-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes edf-zoom{ from{ transform:scale(1.05); } to{ transform:scale(1); } }

/* --------------------------------------------------------------------------
   FAQ  (.edf-faq)
   --------------------------------------------------------------------------
   Native <details>/<summary> disclosures. There is no script on this page, and
   there does not need to be: the browser supplies the button role, the
   expanded / collapsed state and full keyboard operation (Enter, Space) for
   free, which is exactly what an ARIA accordion would have to hand-build.

   A11Y  — every question is a real control with a real state. The +/- mark is
           aria-hidden decoration; the accessible name is the question text
           alone. All sixteen questions are on the page at once, in two
           columns, so nothing is behind a second control.
   SEO / LLM — answers stay in the DOM when collapsed, so crawlers and
           assistive tech read the whole set either way. The block carries
           schema.org FAQPage / Question / Answer as microdata attributes
           rather than a JSON-LD block, because this page ships as a
           management paste that carries no script tags at all.
   TYPE  — answer copy sits at page body size (inherited from .edf), NOT the
           .75rem of .edf-body-disclaimer. This is meant to be read.
   -------------------------------------------------------------------------- */
/* Compact treatment: 14px body, smaller heading and questions, brand-blue
   eyebrow. Text stays ink (#222); questions go brand blue on hover. No green. */
.edf-faq{ font-size:.875rem; }
.edf-faq .edf-eyebrow{ color:var(--blue); }
.edf-faq .edf-h2{ font-size:clamp(1.25rem,1vw + 1rem,1.5rem); }
.edf-faq > .edf-body{ max-width:65ch; }

/* Two columns from 56.25em up — the same breakpoint .edf-split uses, so the FAQ
   goes two-up exactly where the rest of the page does. Below it the columns
   stack and read as one continuous list. */
.edf-faq__cols{
  display:grid; gap:0;
  margin-top:var(--air-s);
}
@media (min-width:56.25em){
  .edf-faq__cols{ grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4.5rem); }
}
/* Stacked, the second column's top rule would sit on the first column's last
   bottom rule and read as a double hairline. */
@media (max-width:56.1875em){
  .edf-faq__cols > .edf-faq__list + .edf-faq__list{ border-top:0; }
}
.edf-faq__list{ border-top:1px dotted var(--rule); }
.edf-faq__item{ border-bottom:1px dotted var(--rule); }

/* Question row. `list-style:none` plus the WebKit marker reset drop the native
   triangle; the +/- at the right is ours, so it scales with the type. */
.edf-faq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem;
  padding:clamp(.9rem,1.6vw,1.25rem) 0;
  font-size:clamp(.875rem,.4vw + .78rem,.9375rem);
  font-weight:400; line-height:1.35; color:var(--ink);
  cursor:pointer; list-style:none;
}
.edf-faq__q::-webkit-details-marker{ display:none; }
.edf-faq__q:hover{ color:var(--blue); }
/* The focus ring is drawn on the whole row, so offset 0 keeps it from
   colliding with the hairlines above and below it. */
.edf-faq__q:focus-visible{ outline-offset:0; }

/* +/- indicator, two bars so it needs no icon font. */
.edf-faq__mark{
  flex:0 0 auto; position:relative; width:.85em; height:.85em;
  margin-top:.3em; color:var(--blue);
}
.edf-faq__mark::before,
.edf-faq__mark::after{
  content:""; position:absolute; top:50%; left:0;
  width:100%; height:2px; background:currentColor; transform:translateY(-50%);
  transition:transform .2s ease-in-out, opacity .2s ease-in-out;
}
.edf-faq__mark::after{ transform:translateY(-50%) rotate(90deg); }
.edf-faq__item[open] .edf-faq__mark::after{ transform:translateY(-50%); opacity:0; }

.edf-faq__a{ padding:0 0 clamp(1rem,1.8vw,1.4rem); }
.edf-faq__a p{ margin:0 0 .85em; max-width:74ch; }
.edf-faq__a p:last-child{ margin-bottom:0; }

@media (prefers-reduced-motion:reduce){
  .edf-faq__mark::before,
  .edf-faq__mark::after{ transition:none; }
}


/* ==========================================================================
   SECTION 99 · MODIFIERS PROMOTED FROM FORMER INLINE style="" ATTRIBUTES
   Replace margin-top:.85rem / color:white / margin-top:40px written inline.
   ========================================================================== */
.edf-microcopy--spaced{ margin-top:.85rem; }
.edf-microcopy--onDark{ color:var(--white); }
.edf-body-disclaimer--spaced{ margin-top:40px; }

/* Full-bleed dotted section divider. Pairs with the site utilities on an empty <p>:
   <p class="edf-section-divider align-center border-bottom margin-bottom padding-bottom"></p>
   Replaces inline padding/margin ±20px that stretched the border past the gutters. */
.edf-section-divider{ padding-left:20px; padding-right:20px; margin-left:-20px; margin-right:-20px; }