/* Woody Leather - core stylesheet
   Extracted from the static build. Tokens map 1:1 to the design system.
   Do not hardcode colours - use the custom properties in :root. */
/* ==========================================================================
   Woody Leather — core stylesheet
   Tokens map 1:1 to the WordPress theme variables. Do not hardcode colours.
   ========================================================================== */

:root{
  /* Colour — drawn from the logo plaque and the actual product hides */
  --walnut:#241610;
  --bark:#34211A;
  --bark-2:#442C21;
  --suede:#EDE6DA;
  --parchment:#F6F1E8;
  --brass:#C08A3E;
  --brass-lt:#E0B463;
  --oxblood:#6B2028;
  --forest:#23402F;
  --ink:#1F150E;
  --muted:#7C6A56;
  --line:#D8CDBB;

  /* Type */
  --display:"Marcellus",Georgia,serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;

  /* Scale */
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.06rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.6rem);
  --step-4:clamp(2.4rem,1.5rem + 3.2vw,4.2rem);

  --shell:1240px;
  --gap:clamp(1.5rem,4vw,3rem);

  /* Hero height. --hero-h is the share of the screen the hero takes; the
     sticky header is subtracted from it so the two together fill that much
     and no more. Change --hero-h alone to make the hero taller or shorter. */
  --head-h:5rem;
  --hero-h:80vh;
}

/* On phones the address bar makes vh taller than the screen really is, so the
   hero would sit partly under it. dvh measures what is actually visible. */
@supports (height:100dvh){
  :root{ --hero-h:80dvh; }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--suede);color:var(--ink);
  font-family:var(--body);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
/* Flex/grid display rules otherwise beat the attribute and the element stays
   on screen — this keeps [hidden] meaning hidden wherever we use it. */
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}
p{margin:0 0 1em}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.shell--narrow{width:min(100% - 2.5rem,820px);margin-inline:auto}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.dark{background:var(--walnut);color:var(--parchment)}
.dark h1,.dark h2,.dark h3{color:var(--parchment)}

/* --- Signature: the saddle stitch -------------------------------------- */
.stitch{
  height:7px;width:100%;
  background:repeating-linear-gradient(112deg,var(--brass) 0 2px,transparent 2px 13px);
  opacity:.75;
}
.stitch--tight{background:repeating-linear-gradient(112deg,var(--brass) 0 2px,transparent 2px 10px)}
.stitch--dark{background:repeating-linear-gradient(112deg,var(--bark-2) 0 2px,transparent 2px 13px);opacity:1}

/* Stitched inset frame — used on cards, buttons, images */
.stitched{position:relative}
.stitched::after{
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px dashed rgba(192,138,62,.55);
}

/* --- Eyebrow / labels --------------------------------------------------- */
.eyebrow{
  font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:110px}
.eyebrow--center{justify-content:center}
.eyebrow--center::after,.eyebrow--center::before{content:"";flex:0 0 60px;height:1px;background:currentColor;opacity:.35}

.lede{font-size:var(--step-1);line-height:1.5;color:var(--muted);max-width:56ch}
.dark .lede{color:#C9B79E}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  --btn-bg:var(--oxblood);--btn-fg:var(--parchment);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  padding:1.05rem 2rem;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--body);font-size:var(--step--1);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s ease,background .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--parchment);box-shadow:inset 0 0 0 1px rgba(192,138,62,.6)}
.btn--ghost:hover{--btn-bg:rgba(192,138,62,.14)}
.btn--brass{--btn-bg:var(--brass);--btn-fg:var(--walnut)}
.btn--wa{--btn-bg:var(--forest);--btn-fg:var(--parchment)}
.btn--block{width:100%}
/* An outlined button for the secondary action beside a solid one. It was only
   ever defined in the admin stylesheet, so the public pages using it were
   drawing a second solid oxblood button instead. */
.btn--quiet{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--quiet:hover{--btn-bg:rgba(192,138,62,.12)}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;
}

/* --- Header ------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(36,22,16,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(192,138,62,.28);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.brand{text-decoration:none;display:block;line-height:1}
.brand__name{
  font-family:var(--display);color:var(--brass-lt);
  font-size:1.32rem;letter-spacing:.2em;text-transform:uppercase;
}
.brand__rule{height:1px;background:linear-gradient(90deg,var(--brass),rgba(192,138,62,0));margin:.42rem 0 .3rem}
.brand__tag{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:#9A836A}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  color:var(--parchment);text-decoration:none;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem 0;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .3s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav-toggle{display:none;background:none;border:1px solid rgba(192,138,62,.5);color:var(--parchment);padding:.55rem .8rem;border-radius:2px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

/* --- Hero --------------------------------------------------------------- */
.hero{
  /* --hero-bg is set in the page head from Admin → Logo & media. The file
     here is the fallback, so the hero still has its photograph if that
     setting is ever empty. */
  position:relative;background:var(--walnut) var(--hero-bg,url("../img/hero-bg.jpg")) center/cover;
  color:var(--parchment);overflow:hidden;
}
/* An inner page carries the same hero, only shorter — the home page earns a
   full screen, a section page does not. --hero-h is what the height is built
   from, so overriding it here is the whole change. */
.hero--inner{--hero-h:64vh}
/* Two layers over the leather photograph. This one is the readability scrim:
   heaviest on the left, under the headline, thinning to the right where the
   collage sits. Warmed from flat black-brown towards the hide colour, so the
   leather underneath still reads as leather. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(23,13,9,.95) 0%,rgba(28,17,10,.86) 45%,rgba(38,23,16,.58) 100%);
}
/* And this one is the gold: a brass light falling from the upper right, a
   second smaller pool bottom right, and a thin warm sheen along the top edge.
   Laid over the scrim rather than under it, or the tint would be buried. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(68% 58% at 76% 28%,rgba(224,180,99,.30),transparent 66%),
    radial-gradient(42% 38% at 96% 86%,rgba(192,138,62,.20),transparent 70%),
    linear-gradient(180deg,rgba(224,180,99,.12),transparent 38%);
}
/* min-height rather than height: the hero settles at --hero-h on a normal
   screen, and still grows rather than clipping the text on a short or
   zoomed-in one. The header is subtracted so the two fill --hero-h together. */
.hero__inner{
  /* z-index, because ::after is the last child of .hero and would otherwise
     paint the gold wash over the headline. */
  position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--gap);align-items:center;
  min-height:calc(var(--hero-h) - var(--head-h));
  padding-block:clamp(1rem,2vw,1.5rem);
}
/* The hero runs tighter than the rest of the site: its eyebrow, headline and
   lede all sit closer together, and the lede is a step smaller, so the block
   stays short enough to centre inside --hero-h. */
.hero .eyebrow{margin-bottom:.7rem}
.hero h1{font-size:var(--step-4);letter-spacing:-.01em;margin-bottom:.8rem}
.hero .lede{font-size:var(--step-0);line-height:1.55;max-width:52ch}
.hero h1 em{font-style:normal;color:var(--brass-lt)}
/* The accent word in struck gold rather than flat brass. Guarded, because
   without background-clip the transparent fill would leave the word invisible
   — the plain brass above stays in that case. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{
    background:linear-gradient(94deg,var(--brass) 0%,#F2DCA8 42%,var(--brass-lt) 70%,var(--brass) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.hero__plaque{position:relative;justify-self:end;max-width:390px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.55)}
/* The collage photograph beside the headline. Wider than the plaque it
   replaced, because it is a landscape picture with a lot in it — at 390px the
   wallets and keyrings along the bottom turn to specks.
   No frame, no shadow, and the edges masked away to nothing: the picture has
   a dark wooden ground of its own, so once the border is gone it reads as
   part of the hero rather than a card laid on top of it. */
.hero__shot{
  position:relative;justify-self:end;width:100%;max-width:600px;height:auto;
  -webkit-mask-image:radial-gradient(130% 118% at 52% 46%,#000 76%,rgba(0,0,0,.6) 90%,transparent 100%);
  mask-image:radial-gradient(130% 118% at 52% 46%,#000 76%,rgba(0,0,0,.6) 90%,transparent 100%);
}

.hero__facts{
  position:relative;display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;
  border-top:1px solid rgba(192,138,62,.3);padding-top:1rem;margin-top:1.7rem;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:#B79C7E;
}

/* --- Collections grid --------------------------------------------------- */
.grid{display:grid;gap:1.4rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--bark);overflow:hidden;border-radius:2px;
}
.card__media{aspect-ratio:1/1;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.05)}
/* Dark veil over the whole photograph on hover, so the details stay readable. */
.card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(14,8,5,.94),rgba(14,8,5,.8));
  opacity:0;transition:opacity .35s ease;
}
.card:hover::before,.card:focus-visible::before{opacity:1}
/* Title and the link stay hidden until the card is hovered. */
.card__body{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:1.5rem 1.3rem 1.2rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .35s ease;
}
.card:hover .card__body,.card:focus-visible .card__body{opacity:1;transform:none}
.card__title{font-family:var(--display);color:var(--parchment);font-size:var(--step-1)}
.card::after{content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;border:1px dashed rgba(192,138,62,0);transition:border-color .35s ease}
.card:hover::after{border-color:rgba(192,138,62,.65)}
/* Touch screens have no hover, so the details stay on with a lighter veil. */
@media(hover:none){
  .card::before{opacity:1;background:linear-gradient(to top,rgba(14,8,5,.92),rgba(14,8,5,0) 65%)}
  .card__body,.card__go{opacity:1;transform:none}
}

/* Product card (light surface) */
.pcard{background:var(--parchment);border:1px solid var(--line);border-radius:2px;text-decoration:none;color:inherit;display:block;transition:border-color .3s ease,transform .3s ease}
.pcard:hover{border-color:var(--brass);transform:translateY(-3px)}
.pcard__media{aspect-ratio:1/1;overflow:hidden;background:var(--bark)}
.pcard__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.pcard__body{padding:1.1rem 1.2rem 1.35rem}
.pcard__name{font-family:var(--display);font-size:1.22rem;margin-bottom:.25rem}
.pcard__spec{font-size:var(--step--1);color:var(--muted)}
.pcard__link{margin-top:.8rem;font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood);font-weight:700}

/* --- Process ------------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem}
.step{padding:0 1.6rem;border-left:1px solid var(--line)}
.step:first-child{padding-left:0;border-left:0}
.step__no{font-family:var(--display);font-size:2.4rem;color:var(--brass);line-height:1;display:block;margin-bottom:.7rem}
.step h3{font-size:var(--step-1);margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.95rem;margin:0}

/* --- Swatches ----------------------------------------------------------- */
.swatch-row{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.5rem}
.swatch{text-align:center;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:#B79C7E}
.swatch i{display:block;width:74px;height:74px;border-radius:50%;margin:0 0 .7rem;box-shadow:inset 0 -8px 18px rgba(0,0,0,.35),0 0 0 1px rgba(192,138,62,.45),0 0 0 6px rgba(192,138,62,.12)}

/* --- Split / editorial -------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.split img{border-radius:2px}

/* --- Product detail ----------------------------------------------------- */
.crumbs{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-block:1.6rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--oxblood)}

/* Photographs on the left, enquiry form on the right. The specification and
   the detail notes sit in their own band below, so the columns here stay to
   the photographs and the form. */
.product{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:start;
}

/* Specification / In the detail, as tabs in their own band below. The strip
   carries hidden in the markup and the script removes it, so without
   JavaScript the panels stack under their own headings instead. */
.tabs-band{padding-block:clamp(2.5rem,5vw,4rem)}
.tabs__list{display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.tabs__list button{
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:.5rem 1.1rem .55rem;cursor:pointer;line-height:1.3;
  font-family:var(--body);font-size:.88rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .25s ease,border-color .25s ease;
}
.tabs__list button:hover{color:var(--ink)}
.tabs__list button[aria-selected="true"]{color:var(--brass);border-bottom-color:var(--brass)}
.tabs__panel:focus{outline:none}
.tabs__panel .specs,.tabs__panel .feature-list{margin-top:0}
/* Full width in the band, so the notes read in two columns. */
.tabs__panel .feature-list{columns:2;column-gap:var(--gap)}
.tabs__panel .feature-list li{break-inside:avoid}

/* Square frame. Product photographs arrive both landscape and portrait, and a
   square sits between the two, so nothing important gets cropped out of shot
   whichever way round the photo was taken. */
.gallery__main{position:relative;aspect-ratio:1/1;background:var(--bark);overflow:hidden;border-radius:2px}
.gallery__main img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gallery__main:hover img{transform:scale(1.04)}

/* Step arrows over the photograph. They sit inside the dashed stitch line
   rather than across it, and fade up on hover so they do not compete with the
   product on first look — but stay faintly visible on touch, where there is no
   hover to reveal them. */
.gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(36,22,16,.5);color:var(--parchment);
  font-family:var(--body);font-size:1.5rem;line-height:1;padding-bottom:.15em;
  opacity:0;transition:opacity .25s ease,background .25s ease;
}
.gallery__nav--prev{left:1.1rem}
.gallery__nav--next{right:1.1rem}
.gallery__main:hover .gallery__nav,.gallery__nav:focus-visible{opacity:1}
.gallery__nav:hover{background:rgba(36,22,16,.85)}
/* Nothing reveals them on a touch screen, so they stay visible there. */
@media(hover:none){
  .gallery__nav{opacity:1}
}

/* One row that scrolls sideways, so a product with a dozen photographs keeps
   the strip a single line deep instead of stacking rows under the picture. */
.gallery__strip{position:relative}
.gallery__scroll{
  position:absolute;top:calc(50% - .2rem);transform:translateY(-50%);z-index:2;
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;cursor:pointer;
  background:var(--parchment);color:var(--ink);
  font-family:var(--body);font-size:1.15rem;line-height:1;padding-bottom:.12em;
  box-shadow:0 1px 6px rgba(36,22,16,.18);
  transition:background .25s ease,border-color .25s ease,opacity .25s ease;
}
.gallery__scroll--prev{left:-6px}
.gallery__scroll--next{right:-6px}
.gallery__scroll:hover{border-color:var(--brass);background:#fff}
/* Nothing off the edge, or already at that end — the arrow goes quiet. */
.gallery__strip[data-scrollable="false"] .gallery__scroll{display:none}
.gallery__scroll[disabled]{opacity:0;pointer-events:none}
.gallery__thumbs{
  display:flex;gap:.7rem;margin-top:.7rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding-bottom:.4rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.gallery__thumbs::-webkit-scrollbar{height:6px}
.gallery__thumbs::-webkit-scrollbar-track{background:transparent}
.gallery__thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* Four to a view, whatever the count — the fifth is the hint that it scrolls. */
.gallery__thumbs button{
  flex:0 0 calc((100% - 2.1rem) / 4);scroll-snap-align:start;
  padding:0;border:1px solid var(--line);background:var(--bark);cursor:pointer;
  aspect-ratio:1/1;overflow:hidden;border-radius:2px;
}
.gallery__thumbs button[aria-selected="true"]{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}

/* The clamp is tighter than --step-3 so a typical product name sits on one
   line without being forced there. It used to carry white-space:nowrap, but
   the names outgrew the column: at 360px, 37 of 45 names were wider than the
   320px available and could not wrap, so every one of those product pages
   scrolled sideways. It was not only a phone problem — in the two-column
   desktop layout the heading only gets ~651px, so 25 names overflowed at
   1280px too. Allowing the wrap costs nothing: a name that fits still renders
   on one line. */
.product h1{font-size:clamp(1.45rem,.95rem + 1.7vw,2.2rem);margin-bottom:.45rem}
/* Set below body size — it is a standfirst for the enquiry, not the page copy. */
.product__summary{font-size:.94rem;line-height:1.6;margin-bottom:0}
/* The collection name, the product name and the summary read as one block, so
   they sit closer together here than the site-wide eyebrow spacing allows. */
.product__buy>.eyebrow{margin-bottom:.5rem}
.product__buy .opt-label{margin:1.3rem 0 .7rem}

.opt-label{font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:2rem 0 .9rem;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
/* Used as a <button> on the product page and as an <a> for the admin filters,
   hence the text-decoration reset. */
.chip{
  display:inline-flex;align-items:center;gap:.55rem;background:var(--parchment);
  border:1px solid var(--line);border-radius:2px;padding:.5rem .85rem;cursor:pointer;
  font-family:var(--body);font-size:.85rem;letter-spacing:.06em;text-decoration:none;
}
.chip i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 -3px 6px rgba(0,0,0,.4)}
.chip[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}

/* Read as a plain spec sheet: hairline rules between rows, none top or bottom,
   and the label column pulled in tight against the values. */
.specs{width:100%;border-collapse:collapse;margin-top:1.4rem}
.specs th,.specs td{text-align:left;padding:.5rem 1.5rem .5rem 0;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.45;vertical-align:baseline}
.specs th{width:14rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.86rem}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

.feature-list{list-style:none;padding:0;margin:1.4rem 0 0}
.feature-list li{padding:.4rem 0 .4rem 1.6rem;position:relative;font-size:1.02rem}
.feature-list li::before{content:"";position:absolute;left:.3rem;top:1.05rem;width:6px;height:6px;border-radius:50%;background:var(--brass)}

/* --- Enquiry form ------------------------------------------------------- */
.enquiry{background:var(--parchment);border:1px solid var(--line);border-radius:2px;padding:clamp(1.5rem,3vw,2.2rem);margin-top:1.4rem}
/* No nowrap here either. "Ask about this piece" clears a 320px screen by about
   two pixels in Marcellus — but Georgia stands in until the web font loads and
   is wider, so the heading would push the page sideways on the smallest phones
   for as long as the swap takes. */
.enquiry h2{font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);margin-bottom:.4rem}
.enquiry>p{margin-bottom:1.2rem;font-size:.88rem;line-height:1.55}
.field{margin-bottom:.75rem}
/* Confirms what the form will send; the real values ride on hidden inputs. */
.field .field__locked{background:var(--suede);border-style:dashed;border-color:var(--brass);color:var(--muted);cursor:default}
.field label{display:block;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.field input,.field select,.field textarea{
  width:100%;padding:.62rem .85rem;border:1px solid var(--line);border-radius:2px;
  background:#fff;font-family:var(--body);font-size:.95rem;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass)}
.field textarea{min-height:84px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.check{display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem;margin-bottom:1rem;margin-top:.2rem}
.check input{width:auto;margin-top:.25rem}
.hp{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brass);color:var(--walnut);padding:.75rem 1.2rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
/* Turnstile draws its own box; this only gives it room above the button. */
.captcha{margin:.2rem 0 1rem}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.8rem}
.form-ok{background:var(--forest);color:var(--parchment);padding:1.6rem;border-radius:2px;text-align:center}
.form-ok h3{color:var(--parchment);font-size:var(--step-1);margin-bottom:.4rem}

/* --- Contact ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start}
.info-block{border-top:1px solid var(--line);padding:1.4rem 0}
.info-block h3{font-size:1.15rem;margin-bottom:.4rem}
.info-block p{margin:0;color:var(--muted)}
.info-block a{color:var(--oxblood);text-decoration:none}

/* --- CTA band ----------------------------------------------------------- */
.band{background:var(--bark);color:var(--parchment);text-align:center}
.band h2{font-size:var(--step-3);margin-bottom:1rem}
.band .lede{margin-inline:auto;text-align:center}

/* --- Page head (inner pages) -------------------------------------------- */
.page-head{
  background:var(--walnut) url("../img/hero-bg.jpg") center/cover;position:relative;color:var(--parchment);
}
.page-head::before{content:"";position:absolute;inset:0;background:rgba(23,13,9,.86)}
.page-head .shell{position:relative}
.page-head h1{font-size:var(--step-3);margin-bottom:.8rem}

/* --- Footer ------------------------------------------------------------- */
.site-foot{background:var(--walnut);color:#B79C7E;padding-block:clamp(3rem,6vw,4.5rem) 0}
/* The brand block keeps its width, so the blurb wraps as it did. Only the menu
   column is narrowed: its links are single short words, so an equal quarter
   left most of that column empty and the gap before Collections was really
   that leftover, not the gutter. */
.foot-grid{
  display:grid;grid-template-columns:1.5fr .75fr 1.1fr 1.1fr;
  row-gap:var(--gap);column-gap:clamp(1rem,1.8vw,1.6rem);
}
.foot-grid>div{min-width:0}
.site-foot h4{color:var(--brass);font-family:var(--body);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.6rem}
.site-foot a{color:#B79C7E;text-decoration:none}
.site-foot a:hover{color:var(--brass-lt)}
/* inline-block so the wrapping link is exactly the size of the plaque and
   does not add a text line's worth of height under it. */
.foot-logo-link{display:inline-block}
.foot-logo{width:120px;margin-bottom:1.2rem;border-radius:2px;transition:opacity .25s ease}
.foot-logo-link:hover .foot-logo{opacity:.82}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.6rem 0;margin-top:3rem;border-top:1px solid rgba(192,138,62,.22);font-size:.8rem}

/* --- Social links -------------------------------------------------------- */
/* Brass-ringed buttons. 40px across, so they are catchable on a touch screen
   without the row of five taking over the footer column. */
/* The heading sits close to its own row of icons rather than at the standard
   footer-column distance, so "Follow us" reads as their label and not as the
   start of a fourth column. */
.socials__title{margin-top:1.8rem;margin-bottom:0!important}
.socials__title+.socials{margin-top:.75rem!important}
.socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem!important;list-style:none;padding:0}
.socials li{margin:0}
.socials a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:#B79C7E;box-shadow:inset 0 0 0 1px rgba(192,138,62,.4);
  transition:color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.socials a:hover,.socials a:focus-visible{
  color:var(--walnut);background:var(--brass);box-shadow:inset 0 0 0 1px var(--brass);
}
.social__icon{display:block}


/* --- Collections mosaic (home) ------------------------------------------ */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:1.15rem}
.mosaic .card__media{position:absolute;inset:0;aspect-ratio:auto}
.mosaic .card__body{padding:1.9rem 1.5rem 1.4rem}
.card--big{grid-column:span 2;grid-row:span 2}
.card--wide{grid-column:span 2}
.card--big .card__title{font-size:var(--step-2)}
.card__go{
  display:block;margin-top:.65rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--parchment);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;
}
.card:hover .card__go,.card:focus-visible .card__go{opacity:1;transform:none}

/* --- People (about) ----------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.8rem}
.person{background:var(--parchment);border:1px solid var(--line);border-radius:2px;padding:1.8rem 1.3rem;text-align:center}
/* Photograph and initials share a size so a card with a portrait lines up with
   one still on its monogram. */
.person__mono,.person__photo{
  width:110px;height:110px;border-radius:50%;margin:0 auto 1.1rem;
  box-shadow:0 0 0 1px var(--brass),0 0 0 6px rgba(192,138,62,.12);
}
.person__mono{
  display:grid;place-items:center;
  background:var(--walnut);color:var(--brass);font-family:var(--display);font-size:2rem;letter-spacing:.06em;
}
.person__photo{display:block;object-fit:cover;object-position:center top;background:var(--walnut)}
.person h3{font-size:1.14rem;margin-bottom:.3rem}
.person p{margin:0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.person span{display:block;margin-top:.9rem;font-size:.88rem;color:var(--muted);letter-spacing:0;text-transform:none}

/* Three directors in a four-column row leave a hole at the end, so the row is
   told how many it is carrying. The breakpoints below still override this. */
.people--3{grid-template-columns:repeat(3,1fr)}

@media(max-width:900px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}
  .people{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .mosaic{grid-auto-rows:170px}
  .people{grid-template-columns:1fr}
}
/* On a phone the whole tile is already the link, so the "View collection" line
   is dead weight — and its height pushes the collection name up to the middle
   of a short tile. Dropping it, with tighter padding on the mosaic, lets the
   name sit down on the bottom edge where it belongs. The line goes on both the
   home mosaic and the Products page grid, which carry the same card. */
@media(max-width:760px){
  .card__go{display:none}
  .mosaic .card__body{padding:1rem 1.15rem .95rem}
}

/* --- Tiles (about: mission, vision, reasons) ----------------------------- */
/* One card shape for the short blocks of copy on the About page. Four across,
   like .grid--4 and .steps, so eight reasons fall into two clean rows rather
   than a ragged five-and-three. .tiles--two is the mission/vision pair. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.8rem}
.tiles--two{grid-template-columns:repeat(2,1fr)}
.tiles--3{grid-template-columns:repeat(3,1fr)}
.tile{
  background:var(--parchment);border:1px solid var(--line);
  border-radius:2px;padding:1.5rem 1.5rem 1.6rem;
}
.tile h3{font-size:1.12rem;margin-bottom:.45rem}
.tile p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
/* On the walnut band the parchment card would glare, so it drops to a tint of
   the background it sits on and the body copy lifts to the dark-section grey. */
/* On the walnut band the card needs an edge to be read at all, so the brass
   accent stays there — it is the light tiles that were carrying a stripe they
   did not need. */
.dark .tile{background:rgba(246,241,232,.04);border-color:rgba(192,138,62,.22);border-left:2px solid var(--brass)}
.dark .tile p{color:#C9B79E}

@media(max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .tiles,.tiles--two{grid-template-columns:1fr}
}

/* --- Why list (about: why choose Woody Leather) -------------------------- */
/* No marker at all — no numeral, no tick, no dash. The hairline between
   entries is the only structure, which is enough in a column this narrow. */
.why-list{list-style:none;padding:0;margin:1.8rem 0 0}
.why-list li{
  padding-bottom:1.05rem;margin-bottom:1.05rem;
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.96rem;line-height:1.55;
}
.why-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.why-list strong{
  display:block;margin-bottom:.12rem;
  font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--ink);
}

/* --- Why (franchise) ------------------------------------------------------ */
/* A brass tick against each reason, and no box and no rule around it: this
   page already spends its cards on the support tiles and its numerals on the
   model steps, so a third copy of either would make the three sections read as
   one repeated block. The tick is drawn from two borders rather than set as a
   character, so it is the same weight and the same brass on every machine
   whatever the font does with U+2713. Note that .feature-list elsewhere marks
   its items with a brass dot — the shapes are deliberately not the same.

   Held to a 860px measure and centred — the reasons are short, and given the
   full 1240px they sit far apart with a lot of nothing between them, which is
   what made every earlier version of this section look thin. */
.why-title{font-size:var(--step-2);text-align:center;max-width:26ch;margin-inline:auto}
.why-intro{
  text-align:center;color:var(--muted);font-size:var(--step-1);line-height:1.5;
  max-width:52ch;margin:.9rem auto 0;
}
.why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 3.2rem;
  max-width:860px;margin:3.2rem auto 0;
}
/* The tick hangs in the indent and the note lines up under the heading text,
   so each reason reads as one block starting at the same left edge. */
.why-grid h3{position:relative;font-size:var(--step-1);margin-bottom:.45rem;padding-left:1.9rem}
.why-grid h3::before{
  content:"";position:absolute;left:.15em;top:.3em;width:.6em;height:.32em;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(-45deg);
}
.why-grid p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6;padding-left:1.9rem}

@media(max-width:700px){
  .why-grid{grid-template-columns:1fr;gap:1.9rem}
}

/* --- Blog ---------------------------------------------------------------- */
/* Posts as ruled rows rather than a grid of cards: a shop writes a handful of
   posts, not forty, and a three-column grid holding one or two of them is
   mostly empty space. A row looks deliberate whether there is one or twenty. */
.post-list{border-top:1px solid var(--line);margin-top:2.4rem}
.post-row{
  display:grid;grid-template-columns:300px 1fr;gap:var(--gap);align-items:center;
  padding:1.9rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.post-row--text{grid-template-columns:1fr}
.post-row__media{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--bark)}
.post-row__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.post-row:hover .post-row__media img{transform:scale(1.05)}
.post-row h2{font-size:var(--step-1);margin-bottom:.5rem;transition:color .3s ease}
.post-row:hover h2{color:var(--oxblood)}
.post-row p{color:var(--muted);margin:0 0 .9rem;max-width:64ch}
.post-meta{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem}

@media(max-width:760px){
  .post-row{grid-template-columns:1fr;gap:1.1rem;padding:1.6rem 0}
}

/* --- Single post ---------------------------------------------------------- */
/* The hero: the post's own photograph behind a heavy scrim, or the walnut
   gradient alone when it has none. */
.article-hero{
  position:relative;background:var(--walnut) center/cover;color:var(--parchment);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.article-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,13,9,.88),rgba(38,25,16,.94));
}
.article-hero .shell{position:relative}
.article-hero h1{font-size:var(--step-3);max-width:20ch;margin-bottom:1rem}
.article-hero .lede{color:#C9B79E;max-width:66ch}
/* Category, date and reading time, separated by dots that are drawn rather
   than typed, so the last one never trails a stray separator. */
.article-hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-bottom:1.2rem;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.article-hero__meta span{display:flex;align-items:center;gap:1.4rem}
.article-hero__meta span:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.article-hero__meta a{color:inherit;text-decoration:none}
.article-hero__meta a:hover{color:var(--brass-lt)}

/* Writing on the left, sidebar on the right. */
.article-layout{
  display:grid;grid-template-columns:minmax(0,2.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.article-body{
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:clamp(1.6rem,4vw,3.2rem);
}
/* The summary again at the head of the writing, as a pulled quote. */
.article-quote{
  font-family:var(--display);font-size:var(--step-1);line-height:1.45;color:var(--ink);
  background:var(--parchment);border-left:3px solid var(--brass);
  padding:1.5rem 1.7rem;margin:0 0 2.4rem;
}

.article-side{position:sticky;top:calc(var(--head-h) + 1rem);display:grid;gap:1.2rem}
.side-card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:1.6rem}
.side-card h3{font-size:1.2rem;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.side-card p{margin:0 0 1.2rem;color:var(--muted);font-size:.93rem}
.side-card--dark{background:var(--walnut);border-color:var(--walnut)}
.side-card--dark h3{color:var(--parchment);border-bottom-color:rgba(192,138,62,.3)}
.side-card--dark p{color:#C9B79E}

.side-back{
  display:block;text-align:center;padding:.85rem 1.2rem;border-radius:2px;
  border:1px solid var(--brass);color:var(--oxblood);text-decoration:none;
  font-size:var(--step--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .3s ease,color .3s ease;
}
.side-back:hover{background:var(--brass);color:var(--walnut)}

@media(max-width:1000px){
  /* One column: the sidebar follows the writing and stops sticking, since
     there is nothing beside it to stick against. */
  .article-layout{grid-template-columns:1fr}
  .article-side{position:static}
}

/* The body of a post. Measure is capped so a long paragraph stays readable,
   and the subheadings are the only structure the writing can carry. */
.prose{max-width:68ch}
.prose p{margin:0 0 1.3em}
.prose h2{font-size:var(--step-1);margin:2.2rem 0 .7rem}

@media(max-width:760px){
  .post-lead{grid-template-columns:1fr}
}

/* --- Highlight panel (about: franchise) ---------------------------------- */
/* A walnut panel set inside the page rather than another full-width dark band.
   The franchise note is an aside here — the page of its own carries the detail
   — so it is lifted off the background without becoming a chapter. The dashed
   inset comes from .stitched, the same frame as the hero plaque. */
.highlight{
  background:var(--walnut);color:var(--parchment);border-radius:2px;
  padding:clamp(2.2rem,5vw,3.6rem);text-align:center;
}
.highlight h2{color:var(--parchment);font-size:var(--step-2);max-width:24ch;margin:0 auto .9rem}
.highlight .lede{color:#C9B79E;margin:0 auto 1.9rem;text-align:center}


/* --- Values (about) ------------------------------------------------------ */
/* Five values, so the four-column step row is widened by one. The breakpoints
   in the responsive block below still take it down to two, then one. */
.steps--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){
  /* Two across: every odd item now starts a row and loses its divider. The
     base rule only knows about the third item, which is where a four-column
     row breaks. */
  .steps--5 .step:nth-child(odd){padding-left:0;border-left:0}
}

/* The ranges we make, set as a ruled menu in display type — the list is the
   content of its section rather than a footnote inside one, so it carries the
   weight of a heading and drops the small-print size. */
.feature-list--lead{margin-top:0}
.feature-list--lead li{
  font-family:var(--display);font-size:var(--step-1);line-height:1.3;
  padding:.85rem 0 .95rem 1.6rem;border-bottom:1px solid var(--line);
}
.feature-list--lead li::before{top:1.55rem}
.feature-list--lead li:first-child{border-top:1px solid var(--line)}
/* Each range is a link to its collection. No underline sitting there on all
   five — the row lights up as a whole when it is the one being pointed at. */
.feature-list--lead a{display:block;color:inherit;text-decoration:none;transition:color .25s ease}
.feature-list--lead li:hover{border-bottom-color:var(--brass)}
.feature-list--lead a:hover,.feature-list--lead a:focus-visible{color:var(--oxblood)}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
  .step:nth-child(3){padding-left:0;border-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* One column: photographs, the tabs, then the enquiry form. */
  .product{grid-template-columns:1fr;gap:2rem}
  .contact-grid{grid-template-columns:1fr}
  .hero__inner{grid-template-columns:1fr}
  .hero__plaque{display:none}
  /* The collage stays where the plaque was dropped — it is the range itself,
     not decoration. It moves under the writing and comes down in size. */
  .hero__shot{justify-self:start;max-width:520px}
}
/* The bar carries six items. They stop fitting beside the brand well before
   the old 760px hand-over, so the menu button takes the nav at 900px — the
   width where the two would otherwise start colliding. */
@media(max-width:900px){
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--walnut);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 1.25rem 1.5rem;
    border-bottom:1px solid rgba(192,138,62,.28);display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.85rem 0;width:100%;border-bottom:1px solid rgba(192,138,62,.14)}
  .nav-toggle{display:block}
  .site-head{position:relative}
}

/* Between 900px and the full-width bar the six items need to sit closer. */
@media(min-width:901px) and (max-width:1120px){
  .nav{gap:1.35rem}
  .nav a{letter-spacing:.1em}
}

@media(max-width:760px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  /* No hover to reveal them on a touch screen, so the arrows stay put. */
  .gallery__nav{opacity:1;width:38px;height:38px}
  .gallery__thumbs button{flex-basis:calc((100% - 1.4rem) / 3)}
  .split{grid-template-columns:1fr}
  .tabs__panel .feature-list{columns:1}
  .specs th{width:38%}
  .tabs__list button{padding:.5rem .8rem .55rem;letter-spacing:.08em}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  /* The copyright and the credit sit apart at each end on a wide screen. Once
     they stack there are no ends left to sit at, so both lines centre. */
  .foot-base{justify-content:center;text-align:center}
}
@media(max-width:520px){
  .grid--4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{padding-left:0;border-left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* --- Small screens ------------------------------------------------------ */
/* An email address, a slug or any long unbroken word breaks onto the next
   line instead of pushing the whole page sideways. One rule, because a single
   overflowing string is enough to make every page scroll horizontally. */
body{overflow-wrap:break-word}

@media(max-width:760px){
  /* Safari on iOS zooms the entire page in when a field with text smaller
     than 16px takes focus — the layout jumps off centre and the visitor
     cannot undo it. 16px exactly is the threshold, so every enquiry form
     field sits on it. This rule reaches the admin too, which styles its
     fields from the same .field class. */
  .field input,.field select,.field textarea{font-size:16px}

  /* A thumb is about 44px across. The gallery arrows are always visible on a
     touch screen, so they need to be catchable. */
  .gallery__nav{width:44px;height:44px}
}

@media(max-width:520px){
  /* Two columns leave the specification labels wrapping over three lines on a
     narrow phone. Stacking each label above its value gives both the full
     width of the screen. */
  .specs th,.specs td{display:block;width:auto;padding-right:0}
  .specs th{border-bottom:0;padding-bottom:.1rem}
  .specs td{padding-top:0}

  /* Full width, so the two hero buttons stack as two clear targets rather
     than sitting half-width beside each other. */
  .hero__cta .btn{width:100%}
}


/* --- Server-side form + listing states (added for the PHP build) --------- */
.form-error{
  background:var(--oxblood);color:var(--parchment);
  padding:1.2rem 1.4rem;border-radius:2px;margin-bottom:1.6rem;
}
.form-error h3{color:var(--parchment);font-size:var(--step-1);margin-bottom:.4rem}
.form-error ul{margin:0;padding-left:1.2rem}
.form-error li{margin-bottom:.3rem;font-size:.92rem}
.form-ok p{margin:0}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--oxblood)}

.empty-note{
  border:1px dashed var(--brass);background:var(--parchment);
  border-radius:2px;padding:2.4rem;text-align:center;
}
.empty-note h3{font-size:var(--step-1);margin-bottom:.5rem}
.empty-note p{color:var(--muted);margin:0 auto 1.6rem;max-width:52ch}


/* --- Floating WhatsApp button -------------------------------------------- */
/* WhatsApp's own green rather than the site's brass: this is the one control
   on the page that people find by recognising it, and a brass version of it
   would be a button nobody spots. It sits above everything, out of the way of
   the footer, and never covers the text it floats over.

   Collapsed to a circle by default and widening on hover: the label explains
   it to anyone who hesitates without a permanent bar across the corner. */
.wa-float{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 14px;border-radius:28px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:gap .3s ease,padding .3s ease,background-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.wa-float:hover,.wa-float:focus-visible{
  background:#1DA851;color:#fff;gap:.55rem;padding-right:20px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);transform:translateY(-2px);
}
.wa-float__icon{display:block;flex:0 0 auto}
/* Kept in the page for screen readers at every width; it is the width that
   animates, so there is nothing to un-hide on hover. */
.wa-float__label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  transition:max-width .3s ease;
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{max-width:9rem}

/* A finger is not a pointer: on a touch screen the label would need a tap to
   appear, and that tap is the one that should open WhatsApp. So the button
   stays a plain circle there. */
@media (hover:none){
  .wa-float{padding:0;width:56px;justify-content:center}
  .wa-float__label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float__label{transition:none}
  .wa-float:hover,.wa-float:focus-visible{transform:none}
}