/* ===== base ===== */
html,body{touch-action:manipulation}
:root{
  /* Colours: every colour is set in inc/colours.php and printed on :root before this file loads
     (--copper, --sage, --sun, --sky, --owl, --ink, --cream and the rest, each with -rgb, and
     -deep and -shadow on the fills that take white text). This block only builds on them. */
  /* polished rose gold, from Cat's rose gold button kit (9 November 2026): every main button, the Subscribe and
     Get directions buttons, the coming soon Notify me button and editor buttons with no colour picked.
     2 radial reflections, pale at the top left and soft at the bottom right, over a rose gold gradient at 112 degrees.
     The inset shadows draw the polished metal rim; --gold-edge is its 1px border. White text sits on it. */
  --gold-fill:radial-gradient(ellipse at 9% 0%,rgba(255,249,239,.98) 0%,rgba(255,236,221,.75) 14%,transparent 42%),
    radial-gradient(ellipse at 102% 80%,rgba(255,222,207,.95) 0%,rgba(255,219,203,.4) 19%,transparent 44%),
    linear-gradient(112deg,#D5A99A 0%,#CB9A8D 28%,#C18A7E 55%,#C5968A 78%,#E9BAAA 100%);
  --gold-rim:inset 0 1px 0 #FFF6DF,inset 0 2px 0 rgba(255,230,208,.85),inset 0 -1px 0 #754A39,inset 0 -2px 0 #EDB9A1,
    inset 1px 0 0 rgba(255,236,210,.85),inset -1px 0 0 rgba(255,236,210,.85),0 1px 1px rgba(91,54,37,.18),0 5px 9px rgba(91,54,37,.18);
  --gold-edge:#9B654F;
  --gold-focus:#67443D;
  --gold-font:Arial,Helvetica,sans-serif;   /* the kit's button face */
  /* sage pill for every buy button (Add to cart, the stepper plus, Checkout, Place order): a soft top to bottom gradient */
  --buy-fill:linear-gradient(180deg,#8C9B81 0%,#7D8D73 45%,#718166 100%);
  --buy-fill-hover:linear-gradient(180deg,#829378 0%,#738568 45%,#687B5D 100%);
  --buy-edge:#718166;
  --buy-rim:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(45,64,35,.12),0 2px 3px rgba(55,72,44,.15);
  --glass-frame:linear-gradient(150deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.18) 65%,rgba(255,255,255,.55) 100%); /* white glass frame round a photo on a colour card (account tiles, For schools and venues idea cards) */
  --glass-ring:inset 1px 1px 1px rgba(255,255,255,.85),0 4px 10px -6px rgba(42,33,24,.4);
  --fm:"Onest","Segoe UI",system-ui,sans-serif;   /* counts and order references, with tabular numbers */
  /* type scale, fluid from 360px to 1240px wide, in rem so browser text size still applies */
  /* Type scale. Every font size on the site uses one of these 13 size tokens.
     Fluid sizes run from 360px to 1240px wide. All in rem, so text grows with the browser text size. */
  --fs-hero:clamp(2.625rem,1.95rem + 1.5vw,3.5rem);            /* home hero H1: 42 to 56 (was 70 before 1.7.45) */
  --fs-hero-sub:clamp(1rem,.96rem + .2vw,1.0625rem);           /* home hero intro: 16 to 17 */
  --fs-h2-big:clamp(2rem,1.6rem + 1.4vw,2.875rem);             /* home Featured Collections and lifestyle banner H2: 32 to 46 */
  --fs-h2-mid:clamp(1.875rem,1.55rem + 1vw,2.5rem);            /* home Best sellers and On sale H2: 30 to 40 */
  --fs-h1:clamp(1.75rem,1.597rem + .682vw,2.125rem);           /* inner page H1: 28 to 34 */
  --fs-h1-sub:clamp(1rem,.949rem + .227vw,1.125rem);           /* intro under a page H1: 16 to 18 */
  --fs-h1-pdp:clamp(1.5rem,1.295rem + .909vw,2rem);            /* product H1: 24 to 32 */
  --fs-h2-home:clamp(1.75rem,1.5rem + .9vw,2.25rem);           /* home Find us, custom fit and newsletter H2, reviews H2: 28 to 36 */
  --fs-h2:clamp(1.375rem,1.222rem + .682vw,1.75rem);           /* section H2, review score, script accents: 22 to 28 */
  --fs-h3:clamp(1.125rem,1.048rem + .341vw,1.3125rem);         /* card and panel headings, product price, totals: 18 to 21 */
  --fs-h3-sans:clamp(1rem,.974rem + .114vw,1.0625rem);         /* product card titles, tile names, footer headings: 16 to 17 */
  --fs-lg:1.125rem;                                            /* lead text, card prices: 18 */
  --fs-base:1rem;                                              /* body text, buttons, inputs: 16 */
  --fs-sm:.875rem;                                             /* breadcrumbs, meta, old prices, footer links: 14 */
  --fs-xs:.75rem;                                              /* eyebrows, badges, ribbons, small print: 12 */
  --lh-tight:1.05;                                             /* H1, H2 */
  --lh-snug:1.2;                                               /* H3, titles, labels */
  --lh-body:1.5;                                               /* body text, intros */
  /* text widths */
  --w-hero:380px;                                              /* home hero intro */
  --w-intro:46ch;                                              /* intro under a page H1 */
  --w-section:56ch;                                            /* intro under a section H2 */
  --w-read:65ch;                                               /* descriptions, answers, policy text */

  --fh:"Onest","Segoe UI",system-ui,sans-serif;   /* headings, Onest 600 */
  --ft:"Onest","Segoe UI",system-ui,sans-serif;   /* body + ui */
  --fs:"Onest","Segoe UI",system-ui,sans-serif;   /* accent lines, Onest 600 upright */

  --wrap:1264px;
  --sp:clamp(48px,8.34vw,80px);   /* section rhythm */
  --gap:24px;                    /* grid gutter */
  --btn-r:8px;
  --card-r:12px;
  --lift-1:0 1px 2px rgba(42,33,24,.05), 0 4px 10px -5px rgba(42,33,24,.14);
  --lift-2:0 1px 2px rgba(42,33,24,.05), 0 8px 18px -8px rgba(42,33,24,.18), 0 22px 44px -28px rgba(42,33,24,.24);
  --lift-3:0 2px 4px rgba(42,33,24,.06), 0 14px 26px -10px rgba(42,33,24,.22), 0 34px 60px -34px rgba(42,33,24,.30);
  --edge:inset 0 1px 0 rgba(255,255,255,.8);
}
/* home page section rhythm, Tight: 32 on phones, 48 from 960px wide */
#kd-home{--sp:clamp(32px,5vw,48px)}

:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--ft);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);text-wrap:balance}
h1,h2{font-family:var(--fh);font-weight:600;letter-spacing:-.01em}
h3,h4{font-family:var(--ft);letter-spacing:0}
p{margin:0}
a{color:inherit;text-decoration:none}
/* no link underlines on hover, focus or click anywhere on the site, and no colour flash where a phone is tapped.
   The few links underlined at rest (Show all results, the product page WhatsApp line, notice buttons) have stronger rules, so they stay underlined. */
a:hover,a:focus,a:active{text-decoration:none}
html{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--ft);font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center}
.script{font-family:var(--fs);font-weight:600;line-height:var(--lh-tight)}
.photo{background-size:cover;background-position:center;background-repeat:no-repeat}
/* arrow and tick drawn as shapes in the text colour: Onest has no arrow or tick characters */
:root{--kd-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");--kd-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E")}
.kd-arr,.kd-tick{display:inline-block;width:.85em;height:.85em;vertical-align:-.08em;background:currentColor;
  -webkit-mask:var(--kd-arrow) center/contain no-repeat;mask:var(--kd-arrow) center/contain no-repeat}
.kd-arr{margin-left:.3em}
.kd-arr-l{margin:0 .3em 0 0;transform:scaleX(-1)}
.kd-tick{margin-right:.35em;-webkit-mask-image:var(--kd-tick);mask-image:var(--kd-tick)}

/* ---------- buttons ----------
   .btn: the main button, polished rose gold (--gold-fill in :root), white Arial 600 text with no shadow, 10px corners.
   46 tall with 16px text; .btn-lg (home hero, custom fit row, lifestyle banner, Find us) 56 tall with 18px text;
   .btn-sm 44 tall with 14px text. Hover lifts the button 1px, pressed sinks it 1px.
   .btn-line: the outline button, a 2px sage edge with charcoal text, sage wash on hover.
   .btn-buy: the sage pill for Checkout and Place order (the product card pill is in product-card.css).
   .btn-forest: charcoal fill (the Add button on For schools and venues). */
.btn{--bh:46px;--bpx:20px;--bfs:1rem;
  box-sizing:border-box;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--bh);max-width:100%;padding:0 var(--bpx);border:1px solid var(--gold-edge);border-radius:10px;
  background:var(--gold-fill);box-shadow:var(--gold-rim);color:#FFFFFF;
  font:600 var(--bfs)/1.25 var(--gold-font);letter-spacing:0;text-transform:none;text-decoration:none;text-align:center;text-shadow:none;
  white-space:nowrap;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .16s,color .16s,border-color .16s}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:8px;
  border-top:1px solid rgba(121,66,45,.2);border-left:1px solid rgba(121,66,45,.14);border-right:1px solid rgba(121,66,45,.14);
  border-bottom:1px solid rgba(255,231,204,.65);pointer-events:none}
.btn svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.btn:hover{color:#FFFFFF;transform:translateY(-1px)}}
.btn:active{transform:translateY(1px)}
/* white text on every rose gold button, also where a parent link rule (the footer .kf a, page prose, account content) sets its own colour */
.btn:not(.btn-line){color:#FFFFFF}
.btn:focus-visible{outline:2px solid var(--gold-focus);outline-offset:4px}
.btn-lg{--bh:56px;--bpx:28px;--bfs:1.125rem;gap:12px}
.btn-lg svg{width:24px;height:24px;flex-basis:24px}
.btn-sm{--bh:44px;--bpx:16px;--bfs:var(--fs-sm)}
.btn-block{width:100%}
@media (max-width:639px){.hero-actions .btn,.pg-actions .btn,.ab-cta .btn,.pg-form .btn,.ct-items .btn,.ok-actions .btn{width:100%}.pg-form .btn{justify-self:stretch}
  .btn-lg{--bpx:14px;--bfs:.9375rem;gap:6px}.btn-lg svg{width:20px;height:20px;flex-basis:20px}}
/* outline and charcoal buttons: the theme font, no metal */
.btn.btn-line,.btn.btn-buy,.btn.btn-forest{font-family:var(--ft);font-weight:600;border-radius:var(--btn-r);box-shadow:none;background:var(--surface)}
.btn.btn-line::before,.btn.btn-buy::before,.btn.btn-forest::before{content:none}
.btn.btn-line{border:2px solid var(--sage);color:var(--ink);border-radius:10px}  /* since 1.7.90: 10px, the same corners as the rose gold button beside it */
.btn.btn-line:hover{background:var(--sage-wash);border-color:var(--sage-hover);color:var(--ink)}
.btn.btn-line:active{background:var(--sage-wash);border-color:var(--sage-pressed);color:var(--ink)}
.btn.btn-line:focus-visible,.btn.btn-buy:focus-visible,.btn.btn-forest:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn.btn-buy{border:1px solid var(--buy-edge);border-radius:999px;background:var(--buy-fill);box-shadow:var(--buy-rim);color:#FFFFFF;font-weight:700}
.btn.btn-buy:hover{background:var(--buy-fill-hover);color:#FFFFFF}
.btn.btn-buy:active{background:var(--buy-fill-hover);box-shadow:inset 0 1px 3px rgba(45,64,35,.20);color:#FFFFFF}
.btn.btn-forest{border:1px solid var(--ink);background:var(--ink);color:#FFFFFF}
.btn.btn-forest:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:#FFFFFF}
.btn.btn-forest:active{background:var(--ink-pressed);border-color:var(--ink-pressed);color:#FFFFFF}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none}}
.arrow{width:15px;height:15px;flex:0 0 auto}
/* text link with a copper arrow: "See all products" on the home bands, Edit cart, Continue shopping */
.tlink{font-size:var(--fs-sm);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color .16s}
.tlink svg{width:18px;height:18px;flex:none;color:var(--copper);stroke:currentColor;transition:transform .16s}
.tlink:hover{color:var(--copper-pressed)}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- home page ----------
   Built from the "Kiddie Depot Home Page" canvas (9 November 2026). Sections, top to bottom: hero, category row,
   Featured Collections, Find us in Milnerton, Best sellers, Need a custom fit, On sale, lifestyle banner,
   Google reviews, newsletter. The bands share the home rhythm (--sp on #kd-home) and the site wrap. */

/* hero: copy on the left of a cream deep band, the play kitchen photo filling the right 58% and fading in on its left edge.
   Under 860px the photo sits on top, full width, and the copy follows it. */
.home-hero{position:relative;overflow:hidden;background:var(--cream-2);display:flex;flex-direction:column;min-height:460px}
.home-hero-photo{position:absolute;top:0;right:0;z-index:0;width:58%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%;   /* 1.7.84 play kitchen photo: 60% keeps the kitchen clear of the left fade (was 40% 30%) */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%);mask-image:linear-gradient(to right,transparent 0%,#000 14%)}
.home-hero-in{position:relative;z-index:1;flex:1 1 auto;display:flex;align-items:center;width:100%;padding-top:56px;padding-bottom:64px}
.home-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:520px}
.home-hero-eyebrow{margin:0;font-size:var(--fs-sm);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.home-hero h1{margin:0;font-size:var(--fs-hero);line-height:1.12;color:var(--ink-pressed);text-wrap:balance}
.home-hero .lede{margin:0;max-width:var(--w-hero);font-size:var(--fs-hero-sub);line-height:1.55;color:var(--ink)}
.home-hero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
@media (max-width:1199px){.home-hero-in{padding-top:48px;padding-bottom:56px}}
@media (max-width:859px){
  .home-hero{min-height:0}
  .home-hero-photo{position:static;width:100%;height:auto;aspect-ratio:16 / 9;object-position:45% 50%;-webkit-mask-image:none;mask-image:none}
  .home-hero-in{padding-top:32px;padding-bottom:40px}
  .home-hero-copy{max-width:none;align-items:center;text-align:center;margin-inline:auto}   /* centred once the photo stacks above */
  .home-hero .hero-actions{justify-content:center}
}
@media (max-width:639px){.home-hero .hero-actions .btn{width:auto}}
/* 1.7.84 tablets and phones: the photo fills the hero and a frosted card holds the centred copy at the bottom, with an even 16px edge of photo
   round the card, like the home split band and the Need a custom fit panel. The kitchen shows above the card. */
@media (max-width:859px){
  .home-hero{min-height:560px}
  .home-hero-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:45% 30%}
  .home-hero-in,#kd-home .home-hero-in{align-items:flex-end;justify-content:center;padding:16px}
  .home-hero-copy,#kd-home .home-hero-copy{position:relative;z-index:1;flex:0 1 560px;gap:12px;padding:22px 20px 24px;border-radius:14px;
    background:rgba(247,244,238,.7);border:1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 8px 24px rgba(var(--ink-rgb),.14)}
}
/* phones: the full kitchen shows at 4:3 and the frosted card overlaps the bottom 72px of the photo, so the kitchen stays clear */
@media (max-width:639px){
  .home-hero{min-height:0}
  .home-hero-photo{position:static;height:auto;aspect-ratio:4 / 3;object-position:45% 50%}
  .home-hero-in,#kd-home .home-hero-in{margin-top:-72px;padding:0 16px 16px}
  .home-hero-copy,#kd-home .home-hero-copy{flex-basis:auto;padding:18px 18px 20px}
}

/* category row: the 5 shop sections and Specials, each an icon in a raised circle over its name and a copper arrow.
   6 across with hairlines between them; 3 across under 900px and 2 across under 480px. */
.home-cats{border-bottom:1px solid var(--rule);padding:22px 0}
.home-cats-grid{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.home-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:6px 10px;text-align:center;
  color:var(--ink);font-weight:600;font-size:var(--fs-sm);line-height:1.25;transition:color .3s}
.home-cats-grid li + li .home-cat{border-left:1px solid var(--rule)}
.home-cat-ic{flex:none;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-hover);
  background:linear-gradient(180deg,#FFFFFF,var(--cream));border:1.4px solid var(--rule);box-shadow:var(--edge),var(--lift-1);
  transition:background .3s,color .3s,border-color .3s}
.home-cat-ic svg{width:26px;height:26px}
.home-cat-name{display:block;text-wrap:balance}
.home-cat-last{white-space:nowrap}   /* the last word and the arrow wrap together */
.home-cat-name svg{display:inline-block;width:15px;height:15px;margin-left:6px;vertical-align:-2px;color:var(--copper)}
.home-cat:hover .home-cat-ic{background:var(--sage);border-color:var(--sage);color:#FFFFFF}
.home-cat:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:12px}
/* 1.7.81: under 1200px, where the names start to wrap, each category becomes its own white tile instead of a column between hairlines.
   Every tile in a row is the same height, the icon sits in a sage wash circle at the top and the name sits under it in balanced lines.
   6 across from 900px, 3 across (2 rows) under 900px, with a smaller gap, padding and icon on phones. */
@media (max-width:1199px){
  .home-cats{padding:20px 0}
  .home-cats-grid{gap:12px;max-width:none}
  .home-cats-grid li{display:flex}
  .home-cats-grid li .home-cat{flex:1 1 auto;justify-content:flex-start;gap:10px;padding:16px 10px 14px;border:1px solid var(--rule);border-radius:14px;background:#FFFFFF;box-shadow:var(--lift-1);transition:color .3s,border-color .3s}
  .home-cat-ic{width:48px;height:48px;background:var(--sage-wash);border-color:transparent;box-shadow:none}
  .home-cat-ic svg{width:22px;height:22px}
  .home-cat:hover{border-color:var(--sage)}
  .home-cat:focus-visible{outline-offset:2px;border-radius:14px}
}
@media (max-width:899px){
  .home-cats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* centred section head: a letterspaced eyebrow over the heading (Featured Collections) */
.home-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:36px}
.home-head .eyebrow{font-weight:500;letter-spacing:.3em;color:var(--ink)}
.home-head h2{font-size:var(--fs-h2-big);line-height:1.15;color:var(--ink-pressed)}

/* Featured Collections: 4 square photo cards, each with a sage pill naming the collection along its bottom edge.
   2 across under 900px. */
.home-fc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1040px;margin:0 auto}
.home-fc-card{position:relative;display:block;aspect-ratio:1 / 1;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(var(--ink-rgb),.12)}
.home-fc-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.home-fc-card:hover img{transform:scale(1.04)}
.home-fc-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.home-fc-name{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
  border-radius:999px;border:1px solid var(--buy-edge);background:var(--buy-fill);box-shadow:var(--buy-rim);color:#FFFFFF;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;max-width:calc(100% - 24px)}
.home-fc-name svg{flex:none;width:16px;height:16px}
.home-fc-card:hover .home-fc-name{background:var(--buy-fill-hover)}
@media (max-width:900px){.home-fc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.home-fc{gap:12px}.home-fc-name{height:38px;padding:0 14px;font-size:var(--fs-xs)}}

/* Find us in Milnerton: 1 slim sage wash row on laptops (pin, heading and address, opening hours, the 2 buttons).
   Under 1100px: 2 columns and 2 rows, the pin and address top left, the hours top right, 1 button under each,
   with the pin above the heading and every part centred in its column.
   Under 640px: 1 column, all centred; the buttons sit side by side from 480px and stack under it. */
.home-visit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px 28px;padding:20px 28px;border-radius:16px;background:var(--sage-wash)}
.home-visit-main{display:flex;align-items:center;gap:20px;min-width:0}
.home-visit-ic{flex:none;width:48px;height:48px;border-radius:50%;background:var(--sage);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center}
.home-visit-ic svg{width:22px;height:22px}
.home-visit-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-visit h2{margin:0;font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);line-height:1.25;color:var(--ink-pressed)}
.home-visit p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-soft)}
.home-visit-hours{display:flex;flex-direction:column;gap:2px;padding-left:28px;border-left:1px solid var(--rule-strong);font-size:var(--fs-sm);line-height:1.5;color:var(--ink);white-space:nowrap}
.home-visit-hours b{display:inline-flex;align-items:center;gap:6px;margin-bottom:2px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-hover)}
.home-visit-hours b svg{width:14px;height:14px}
.home-visit-actions{display:flex;gap:10px}
.home-visit-actions .btn-line{background:#FFFFFF}
.home-visit-actions .wa-logo{width:22px;height:22px;flex-basis:22px;stroke:none}
/* 1.7.81: under 1100px the card stacks into 3 parts with 1 even gap: the pin and heading centred on 1 line,
   2 white tiles (Address, and Opening hours as day and time rows) and the 2 buttons at equal widths.
   The tiles sit side by side from 520px and stack under it; the buttons stack under 480px.
   The text in the tiles stays left aligned, so the address and the hours read down 1 edge. */
.home-visit-info{display:none}
@media (max-width:1099px){
  .home-visit{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px}
  .home-visit-main{justify-content:center;gap:12px}
  .home-visit-ic{width:40px;height:40px}
  .home-visit-ic svg{width:19px;height:19px}
  .home-visit-copy p,.home-visit-hours{display:none}
  .home-visit-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-visit-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px 18px;border-radius:12px;background:#FFFFFF;border:1px solid var(--rule);
    font-size:var(--fs-sm);line-height:1.5;color:var(--ink);text-align:left}
  .home-visit-tile b{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-hover)}
  .home-visit-tile b svg{flex:none;width:14px;height:14px}
  .home-visit-tile small{font-size:var(--fs-sm);color:var(--ink-soft)}
  .home-visit-times{margin:0;display:flex;flex-direction:column}
  .home-visit-times div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--rule)}
  .home-visit-times div:first-child{padding-top:0;border-top:0}
  .home-visit-times div:last-child{padding-bottom:0}
  .home-visit-times dt{font-weight:600}
  .home-visit-times dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
  .home-visit-times .is-closed dd{color:var(--ink-soft)}
  .home-visit-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-visit-actions .btn{width:100%}
}
@media (max-width:639px){
  .home-visit{gap:16px;padding:16px}
  .home-visit-main{padding-top:4px}
  .home-visit-info{gap:10px}
  .home-visit-tile{padding:14px 16px}
  .home-visit-actions{gap:10px}
}
@media (max-width:519px){.home-visit-info{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.home-visit-actions{grid-template-columns:minmax(0,1fr)}}

/* The furniture revamps band uses this glass panel: a white panel with a 5px glass rim and a shine, inside .home-split.
   Its own rules below take away the band's padding, fill and light and shade, so only the panel shows. */
.home-split{position:relative;isolation:isolate;overflow:hidden;display:flex;border-radius:22px}
.home-split-in{position:relative;isolation:isolate;z-index:1;width:100%;
  border:5px solid transparent;border-radius:22px;color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 35%,rgba(var(--rule-rgb),.10) 60%,rgba(255,255,255,.34) 100%) border-box;
  -webkit-backdrop-filter:blur(3px) saturate(1.3);backdrop-filter:blur(3px) saturate(1.3);
  box-shadow:0 1px 3px rgba(42,33,24,.08),0 8px 18px -8px rgba(42,33,24,.16)}
.home-split-in::before{content:"";position:absolute;inset:0;border-radius:17px;z-index:-1;pointer-events:none;   /* the white panel on the glass */
  background:#FFFFFF;box-shadow:0 0 0 1px var(--rule),0 0 3px rgba(0,0,0,.06)}
.home-split-in::after{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:3;pointer-events:none;   /* the shine on the glass */
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.75),inset -1px -1px 1px 1px rgba(255,255,255,.6),inset 0 0 10px rgba(255,255,255,.35),inset -3px -4px 6px -3px rgba(42,33,24,.18)}

/* ---------- home owl scenes (1.7.88) ----------
   Need a custom fit, the lifestyle banner and the newsletter sit on Cat's painted scenes, from the "Compact blocks at each screen size"
   page of the owl and heart animations canvas. Each scene is 1 rounded block; the copy sits in the open side of the picture.
   The layout follows the block's own width (container queries):
   - 900px and wider: 280px tall on the wide picture. Custom fit and the newsletter put the copy and the button or form in 1 row
     (the newsletter stacks them under 1080px); the lifestyle button sits under its copy.
   - 600 to 899px: 320px tall on the 3:1 picture, the copy stacked on the open side.
   - under 600px: a 200px picture strip on top and the copy centred on a plain panel underneath.
   The pictures fill the block's height and line up with the owl's side, so the hearts are placed in the picture's 400px-high
   artwork space and scaled with it (--s is the picture's height over 400).
   Hearts rise from the owl on a loop. On phones a pink tape draws along the custom fit ruler. The newsletter envelope flies
   into the owl's wings once each time the block comes into view (main.js adds .is-playing), and the picture fades into Cat's
   painted owl holding it. With reduced motion nothing moves and the newsletter shows the painted owl. */
.scene{container-type:inline-size}
.scene-fit{--scene-fill:#C9D1BE;--scene-side:left;--scene-wide:url(../img/home-custom-fit-wide.webp);--scene-img:url(../img/home-custom-fit.webp);--scene-phone:url(../img/home-custom-fit-phone.webp)}
.scene-life{--scene-fill:#F2E8DA;--scene-side:right;--scene-wide:url(../img/home-lifestyle-wide.webp);--scene-img:url(../img/home-lifestyle.webp);--scene-phone:url(../img/home-lifestyle-phone.webp)}
.scene-news{--scene-fill:#EFE6D8;--scene-side:right;--scene-wide:url(../img/home-news-start-wide.webp);--scene-img:url(../img/home-news-start.webp);--scene-phone:url(../img/home-news-start-phone.webp);
  --final-wide:url(../img/home-news-final-wide.webp);--final-img:url(../img/home-news-final.webp);--final-phone:url(../img/home-news-final-phone.webp)}
.scene-box{position:relative;height:280px;border-radius:22px;overflow:hidden;background:var(--scene-fill)}
.scene-pic,.scene-final{--s:.7;--shift:0px;position:absolute;inset:0;background-color:var(--scene-fill);background-image:var(--scene-wide);background-repeat:no-repeat;background-size:cover;   /* the wide pictures are 1200 by 280 at 1x; cover keeps them edge to edge in the widest block */
  
  background-position:var(--scene-side) calc(-1 * var(--shift)) center}
.scene-final{background-image:var(--final-wide);opacity:0}
.scene-copy{position:absolute;top:0;bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.scene-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.scene .eyebrow{font-weight:600;letter-spacing:.22em;color:var(--copper-pressed)}
.scene-fit .eyebrow{color:var(--ink-soft)}
.scene h2{margin:0;font-size:var(--fs-h2-home);line-height:1.1;color:var(--ink-pressed)}
.scene p{margin:0;font-size:var(--fs-base);line-height:1.5;color:var(--ink)}
.scene-copy .btn{flex:none}
.scene-life .scene-copy{left:56px;width:520px;bottom:24px;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}
.scene-life p{max-width:440px}
.scene-fit .scene-copy{left:290px;right:110px;bottom:34px}
.scene-news .scene-copy{left:56px;right:270px;bottom:40px;flex-wrap:wrap;align-content:center;row-gap:10px}

/* hearts */
.scene-hearts{position:absolute;top:0;width:0;height:0;transform:scale(var(--s));pointer-events:none}
.scene-hearts-left{left:0;transform-origin:top left}
.scene-hearts-right{right:calc(-1 * var(--shift));transform-origin:top right}
.scene-heart{position:absolute;opacity:0;animation:scene-rise 7s ease-in-out var(--hd) infinite}
.scene-heart svg{display:block;width:100%;height:100%}
@keyframes scene-rise{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:.95}65%{opacity:.75;transform:translate(var(--dx),-50px) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.4),-78px) scale(.95)}}

/* custom fit: the tape along the ruler (phones only) */
.scene-tape{display:none;position:absolute;left:16px;right:16px;bottom:7px;height:3px;pointer-events:none}
.scene-tape-line{position:absolute;inset:0;border-radius:2px;background:#F296AA;transform-origin:0 50%;animation:scene-measure 6s ease-in-out infinite}
.scene-tape-mark{position:absolute;top:-17px;left:0;width:0;height:0;color:#F296AA;animation:scene-mark 6s ease-in-out infinite}
.scene-tape-mark svg{position:absolute;left:0;top:0;display:block;width:16px;height:16px;fill:currentColor;stroke:none;animation:scene-pop 6s ease-in-out infinite}
@keyframes scene-measure{0%,8%{transform:scaleX(0)}55%,80%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes scene-mark{0%,8%{left:0%}55%,80%{left:100%}95%,100%{left:0%}}
@keyframes scene-pop{0%,52%{transform:translate(-50%,0) scale(1)}58%{transform:translate(-50%,-8px) scale(1.35)}64%,100%{transform:translate(-50%,0) scale(1)}}

/* newsletter: the envelope flight, once per view */
.scene-env{position:absolute;right:0;top:0;width:0;height:0;transform:scale(var(--s));transform-origin:top right;pointer-events:none}
.scene-env-x{position:absolute;right:80px;top:225px;width:135px}
.scene-env-x,.scene-env-y{display:block}
.scene-env img{display:block;width:135px;height:auto;opacity:0;filter:drop-shadow(0 6px 8px rgba(120,60,50,.2))}
.scene-news .scene-heart{animation:none}
.scene-news.is-playing .scene-final{animation:scene-final 6s linear forwards}
.scene-news.is-playing .scene-env-x{animation:scene-fly-x 6s forwards}
.scene-news.is-playing .scene-env-y{animation:scene-fly-y 6s forwards}
.scene-news.is-playing .scene-env img{animation:scene-env 6s forwards}
.scene-news.is-playing .scene-heart{animation:scene-pop-up 6s ease-out var(--hd) forwards}
@keyframes scene-fly-x{0%{transform:translateX(-260px);animation-timing-function:cubic-bezier(.45,0,.55,1)}50%,100%{transform:translateX(0)}}
@keyframes scene-fly-y{0%{transform:translateY(-330px);animation-timing-function:cubic-bezier(.2,.7,.35,1)}50%,100%{transform:translateY(0)}}
@keyframes scene-env{0%{opacity:0;transform:rotate(-26deg) scale(.75);animation-timing-function:ease-out}8%{opacity:1}50%,60%{opacity:1;transform:rotate(-4deg) scale(1)}70%,100%{opacity:0;transform:rotate(-4deg) scale(1)}}
@keyframes scene-final{0%,48%{opacity:0;animation-timing-function:ease-in-out}65%,100%{opacity:1}}
@keyframes scene-pop-up{0%,52%{opacity:0;transform:translate(0,0) scale(.5)}60%{opacity:1}84%{opacity:.8;transform:translate(var(--dx),-70px) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.3),-100px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.scene-final{opacity:1}.scene-env{display:none}.scene-tape-mark{left:100%}}

/* newsletter form: the field and Subscribe in 1 white pill */
.news-form{flex:none;width:430px;max-width:100%;display:flex;align-items:center;gap:8px;padding:5px 5px 5px 20px;border-radius:999px;background:#FFFFFF;border:1px solid var(--rule);box-shadow:0 8px 22px rgba(80,70,50,.12)}
.news-form:focus-within{box-shadow:0 0 0 2px var(--gold-focus),0 8px 22px rgba(80,70,50,.12)}
.news-field{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.news-field input{width:100%;min-width:0;height:44px;border:0;outline:0;background:transparent;font:500 var(--fs-base)/1 var(--ft);color:var(--ink)}
.news-field input::placeholder{color:var(--ink-soft)}
.news-btn{flex:none;border-radius:999px}
.news-btn::before{border-radius:999px}
/* after a sign-up: a thank you in place of the form, or a note under it when the sign-up failed */
.news-thanks{margin:0;flex:none;width:430px;max-width:100%;padding:14px 24px;border-radius:999px;background:#FFFFFF;border:1px solid var(--rule);color:var(--ink);font-weight:600;text-align:center}
.scene .news-err{flex-basis:100%;margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}

/* small laptops: smaller headings; the newsletter copy and form stack */
@container (max-width:1080px){
  .scene h2{font-size:2rem}
  .scene-life .scene-copy{left:44px;width:480px}
  .scene-fit .scene-copy{left:276px;right:48px}
  .scene-news .scene-copy{left:48px;right:250px;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:16px}
  .scene .news-err{flex-basis:auto}
}
/* tablets: 320px tall on the 3:1 picture, the copy stacked on the open side */
@container (max-width:899px){
  .scene-box{height:320px}
  .scene-pic,.scene-final{--s:.8;background-image:var(--scene-img);background-size:auto 100%}
  .scene-final{background-image:var(--final-img)}
  .scene h2{font-size:1.75rem}
  .scene-copy{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
  .scene-life .scene-pic{--shift:90px}   /* the dressing table moves 90px right, so the copy stays on the cream wall */
  .scene-life .scene-copy{left:32px;width:360px;bottom:30px}
  .scene-fit .scene-copy{left:300px;right:36px;bottom:40px}
  .scene-news .scene-copy{left:36px;right:auto;width:min(420px,58%);bottom:56px}
}
/* phones: the picture strip on top, the copy centred on a plain panel underneath */
@container (max-width:599px){
  .scene-box{height:auto}
  .scene-pic{position:relative;inset:auto;height:200px}
  .scene-pic,.scene-final{--s:.5;background-image:var(--scene-phone)}
  .scene-final{background-image:var(--final-phone)}
  .scene-life .scene-pic{--shift:0px}
  .scene-copy,.scene-life .scene-copy,.scene-fit .scene-copy,.scene-news .scene-copy{position:static;width:auto;padding:28px 24px 32px;gap:22px;align-items:center;text-align:center}
  .scene-text{align-items:center;gap:10px}
  .scene .eyebrow{justify-content:center}
  .scene h2{text-wrap:balance}
  .scene-copy .btn{width:100%}
  .scene-tape{display:block}
  .news-form{width:100%;flex-direction:column;align-items:stretch;gap:12px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .news-form:focus-within{box-shadow:none}
  .news-field input{height:52px;padding:0 20px;border-radius:999px;background:#FFFFFF;border:1px solid var(--rule);box-shadow:0 6px 16px rgba(80,70,50,.08);text-align:center}
  .news-field input:focus-visible{box-shadow:0 0 0 2px var(--gold-focus)}
  .news-btn{width:100%}
  .news-thanks{width:100%}
}

/* furniture revamps (theme 1.7.80, from "Home band D" and the category page on the Furniture Revamps Mockup canvas).
   Home: the eyebrow and 2-line heading on the left and See all revamps with the Request a quote link on the right, level with the
   foot of the heading, then the glass panel (.home-split, no band round it since 1.7.82) holding up to 4 square revamp cards in 1 row.
   The cards are the Featured collections cards. Tablets (900px and under): the head stacks centred and the 4 cards stay in 1 row.
   Phones: the buttons stack full width and the cards run in 1 row that scrolls sideways.
   Category page: the centred eyebrow and heading 24px under the breadcrumb, the cards 4 across on desktop (2 on tablets and phones, since 1.7.83),
   then the photo call to action panel. */
.rvp-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.rvp-copy .eyebrow{display:block;font-weight:500;letter-spacing:.3em;line-height:15px;color:var(--ink-soft)}
.rvp .rvp-copy h2,.rvp .rvp-copy h1{margin:0;font-size:var(--fs-h2-home);line-height:1.12;color:var(--ink-pressed)}
.rvp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 32px;margin-bottom:clamp(24px,2.6vw,32px)}
.rvp-top .rvp-copy{align-items:flex-start;text-align:left}
.rvp-actions{flex:none;display:flex;align-items:center;gap:24px}
.rvp .rvp-actions .btn{margin-top:0}
.home-split-in.rvp-in{display:block;padding:clamp(24px,2.6vw,36px)}
.rvp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rvp-grid>li{min-width:0}
.rvp-grid .home-fc-card{height:100%}
.rvp .home-fc-card img,.rvp-grid .home-fc-card img{width:100%;max-width:none;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:cover}   /* the cards fill */
.rvp-n{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* a long name ends in ... inside the pill, never past it */
/* category page */
.rvp-page{padding-bottom:var(--kd-sec)}
.rvp-archive{margin-top:24px}
.rvp-archive .rvp-copy{align-items:center;text-align:center}
.rvp-archive .rvp-copy h1{font-size:var(--fs-h2-big)}
.rvp-grid-page{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px}   /* 1.7.83: 4 across on desktop, previously 3 */
.rvp-empty{margin:28px 0 0;text-align:center;color:var(--ink-soft)}
.rvp-page .kd-cta{max-width:none}   /* the panel runs the full width of the card grid above it */
/* 1.7.82: on the home page the white panel sits straight on the page with no cream band around it,
   and holds 4 revamp cards in 1 row */
.home-split.rvp-band{overflow:visible}
.rvp-home .rvp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 1.7.83: on small laptops (901 to 1100px) the 4 category page cards get the smaller name pill with no arrow, so the names fit */
@media (min-width:901px) and (max-width:1100px){
  .rvp-grid-page{gap:16px}
  .rvp-grid-page .home-fc-name{bottom:12px;height:36px;padding:0 14px;font-size:var(--fs-xs)}
  .rvp-grid-page .home-fc-name svg{display:none}
}
@media (max-width:900px){
  .rvp-top{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .rvp-top .rvp-copy{align-items:center;text-align:center}
  .rvp-actions{flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .rvp-grid,.rvp-grid-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rvp-home .rvp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}   /* tablets keep the 4 cards in 1 row */
  .rvp-home .home-fc-name{bottom:10px;height:34px;padding:0 12px;font-size:var(--fs-xs)}
  .rvp-home .home-fc-name svg{display:none}   /* the arrow makes room for the name on the smaller cards */
}
@media (max-width:639px){
  .home-split-in.rvp-in{padding:16px}
  .rvp-actions{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .rvp-actions .btn{width:100%}
  .rvp-actions .tlink{justify-content:center}
  .rvp-copy br{display:none}   /* the heading wraps on its own at phone width */
  .rvp-grid,.rvp-grid-page{gap:12px}
  /* home: the cards run in 1 row that scrolls sideways, each about 3 quarters of the panel wide, so the names fit their pills */
  .rvp-home .rvp-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 6px;scroll-padding-inline:16px;scrollbar-width:none}
  .rvp-home .rvp-grid::-webkit-scrollbar{display:none}
  .rvp-home .rvp-grid>li{flex:0 0 74%;scroll-snap-align:start}
}
@media (max-width:479px){
  .rvp-grid-page .home-fc-name{padding:0 12px}
  .rvp-grid-page .home-fc-name svg{display:none}   /* 2 across on phones: the arrow makes room for the name */
}

/* phones: the home page type, buttons and icons scale down to sit in proportion with the 2 across product cards
   (cards 173px wide with 11px titles at 390). Headings 30 hero, 26 Featured collections, 22 to 24 the rest, body 15,
   main buttons 46 tall, category row 3 across with 44px icons. Only the home page changes. */
@media (max-width:639px){
  #kd-home{--fs-hero:1.875rem;--fs-hero-sub:.9375rem;--fs-h2-big:1.625rem;--fs-h2-mid:1.5rem;--fs-h2-home:1.375rem}
  #kd-home .home-hero-in{padding-top:28px;padding-bottom:32px}
  #kd-home .home-hero-copy{gap:14px}
  #kd-home .home-hero .hero-actions{margin-top:6px}
  #kd-home .band-head p,#kd-home .scene p,#kd-home .home-visit p{font-size:.9375rem}
  #kd-home .home-visit h2{font-size:1.125rem}
  #kd-home .btn-lg{--bh:46px;--bpx:18px;--bfs:.9375rem}
  #kd-home .btn-lg svg{width:18px;height:18px;flex-basis:18px}
  #kd-home .home-hero-eyebrow{font-size:var(--fs-xs);letter-spacing:.24em}
  #kd-home .home-cats{padding:16px 0}
  #kd-home .home-cats-grid{gap:8px}   /* 3 across, 2 rows of tiles */
  #kd-home .home-cats-grid li .home-cat{gap:8px;padding:12px 6px 10px;border-radius:12px;font-size:var(--fs-xs)}
  #kd-home .home-cat-ic{width:40px;height:40px}
  #kd-home .home-cat-ic svg{width:19px;height:19px}
  #kd-home .home-cat-name svg{width:12px;height:12px;margin-left:4px;vertical-align:-1px}
}

/* ---------- sections ---------- */
section.band{padding:var(--sp) 0}
section.band + section.band{padding-top:0}   /* adjacent bands must not double up */
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,2.6vw,32px)}
.band-head .eyebrow{font-weight:500;letter-spacing:.3em;color:var(--ink)}
.band-head h2{font-size:var(--fs-h2-mid);margin-top:8px}
.band-head .tlink{flex:none;margin-bottom:6px}
body.single-product .band-head h2{font-size:var(--fs-h2)}
.band-head p{color:var(--ink-soft);margin-top:8px;max-width:var(--w-section);font-size:var(--fs-base);text-wrap:balance}
.band-head .inline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.band-head .inline p{margin-top:0}

/* product cards */
.price .now{font-family:var(--ft);font-size:var(--fs-lg);font-weight:700}
.price .was{font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:line-through}
/* story slideshow: the photo stage and 5 thumbnails on the Our story page (template-parts/story-slideshow.php, main.js) */
.life-figure{position:relative;margin:0;justify-self:end;width:100%;max-width:580px}
.life-figure img{display:block;width:100%;height:auto}
.life-shot .pg-photo{aspect-ratio:4/3;max-width:none}
.life-stage .im{grid-area:1/1}
.life-stage .im-b{opacity:0;transition:opacity .45s ease}
.life-stage.swap .im-b{opacity:1}
.life-crops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px);
  width:min(100%,560px);margin:clamp(-48px,-3.6vw,-32px) auto 0;padding-inline:clamp(4px,.8vw,8px);
  position:relative;z-index:5}
.life-thumb{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:block;
  border-radius:20px;transition:transform .22s cubic-bezier(.22,.7,.3,1)}
.life-thumb .pg-photo{display:grid;aspect-ratio:1/1;max-width:none;border-radius:20px}
.life-thumb:nth-child(2){margin-top:clamp(12px,1.2vw,16px)}
.life-thumb:nth-child(4){margin-top:clamp(12px,1.2vw,16px)}
.life-thumb:hover{transform:translateY(-4px)}
.life-thumb.is-on{transform:translateY(-4px)}
.life-thumb.is-on .pg-photo::after{box-shadow:inset 0 0 0 2px var(--copper),
  inset 2px 2px 1px 0 rgba(255,255,255,.7),inset -1px -1px 1px 1px rgba(255,255,255,.55)}
.life-thumb:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.life-stage .im-b{transition:none}.life-thumb{transition:none}}

/* reviews: Google reviews band on Home and Our story.
   Rating line on 1 line at every width; cards on a slider with arrows and a counter under them, no auto slide.
   Each card is its own container and everything inside .rv-in is sized in cqi (a share of the card width), so
   the card scales as 1 piece. Cards a screen: 3 from 1024px, 2 from 700, 3 from 540, 1 under 540.
   At 760px and under the chip, heading and rating line centre like the other section heads; the review text stays left. */
.rv-band{--rv-per:3;--rv-gap:16px;--rv-ar:100/49;
  --k-pad:5.4;--k-g:3;--k-ava:9.6;--k-name:3.85;--k-star:4.6;--k-sg:.7;--k-tx:3.6;--k-rad:4;
  --rv-logo:32px;--rv-sep:24px;--rv-star:18px;--rv-sg:2px;--rv-num:22px;--rv-meta:15px;--rv-lg:12px;--rv-mb:26px;--rv-ct:22px;--rv-all:18px}
.rv-eyebrow{background:var(--copper-wash);color:var(--ink);padding:8px 12px;border-radius:999px;letter-spacing:.16em}
.rv-h{font-size:var(--fs-h2-home);margin:12px 0 14px}
.rv-line{display:flex;align-items:center;gap:var(--rv-lg);white-space:nowrap;margin-bottom:var(--rv-mb)}
.rv-logo{display:inline-flex;align-items:center;gap:calc(var(--rv-logo) * .2);height:var(--rv-logo);flex:none}
.rv-logo svg{height:calc(var(--rv-logo) * .7);width:auto;flex:none}
.rv-logo span{font:600 calc(var(--rv-logo) * .5)/1 var(--ft);color:var(--ink-soft)}
.rv-sep{width:1px;height:var(--rv-sep);background:var(--rule);flex:none}
.rv-stars{display:inline-flex;gap:var(--sg,2px);flex:none}
.rv-stars i{display:block;width:var(--s,16px);height:var(--s,16px);background:linear-gradient(90deg,var(--copper) var(--f),var(--rule) var(--f));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .9-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .9-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.9Z'/%3E%3C/svg%3E") center/contain no-repeat}
.rv-stars-lg{--s:var(--rv-star);--sg:var(--rv-sg)}
.rv-num{font:700 var(--rv-num)/1 var(--fh);color:var(--ink)}
.rv-total{font-size:var(--rv-meta);color:var(--ink-soft)}
.rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--rv-per) - 1) * var(--rv-gap)) / var(--rv-per));gap:var(--rv-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;outline:0}
.rv-track::-webkit-scrollbar{display:none}
.rv-track:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--card-r)}
.rv-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rv-card{container-type:inline-size;min-width:0;aspect-ratio:var(--rv-ar);scroll-snap-align:start}
.rv-in{height:100%;box-sizing:border-box;overflow:hidden;background:var(--surface);border:1px solid var(--rule);
  border-radius:calc(var(--k-rad) * 1cqi);padding:calc(var(--k-pad) * 1cqi);display:flex;flex-direction:column;gap:calc(var(--k-g) * 1cqi)}
.rv-head{display:flex;align-items:center;gap:calc(var(--k-g) * 1cqi);min-width:0}
.rv-ava{width:calc(var(--k-ava) * 1cqi);height:calc(var(--k-ava) * 1cqi);border-radius:50%;flex:none;object-fit:cover;display:grid;place-items:center;
  font:700 calc(var(--k-ava) * .42cqi)/1 var(--ft);color:#FFFFFF;background:var(--ink-hover);text-shadow:var(--ink-shadow)}
.rv-card:nth-child(3n+2) span.rv-ava{background:var(--copper)}
.rv-card:nth-child(3n) span.rv-ava{background:var(--sage)}
.rv-name{min-width:0;font-size:calc(var(--k-name) * 1cqi);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-stars-sm{--s:calc(var(--k-star) * 1cqi);--sg:calc(var(--k-sg) * 1cqi)}
.rv-text{margin:0;font-size:calc(var(--k-tx) * 1cqi);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.rv-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:var(--rv-ct)}
.rv-ctrl[hidden]{display:none}
.rv-ctrl button{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;padding:0;cursor:pointer;transition:background .15s,color .15s}
.rv-ctrl button:hover{background:var(--ink);color:#FFFFFF}
.rv-ctrl button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rv-flip{transform:rotate(180deg)}
.rv-at{margin:0;min-width:3.2em;text-align:center;font-size:var(--rv-meta);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rv-all{margin:var(--rv-all) 0 0;text-align:center;font-size:var(--rv-meta)}
.rv-all a,.rv-all a:hover,.rv-all a:focus,.rv-all a:active{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
@media (max-width:1023px){.rv-band{--rv-per:2;--rv-gap:14px}}
@media (max-width:699px){.rv-band{--rv-per:3;--rv-gap:8px;--rv-ar:100/76;
  --k-pad:7;--k-g:4;--k-ava:14;--k-name:8;--k-star:7;--k-sg:1;--k-tx:7.6;--k-rad:6;
  --rv-logo:26px;--rv-sep:20px;--rv-star:15px;--rv-sg:1px;--rv-num:19px;--rv-meta:14px;--rv-lg:8px;--rv-mb:20px;--rv-ct:18px;--rv-all:16px}}
@media (max-width:760px){.rv-band .wrap{text-align:center}.rv-line{justify-content:center}.rv-in{text-align:left}}
@media (max-width:539px){.rv-band{--rv-per:1;--rv-ar:100/56;--k-pad:6;--k-g:3.5;--k-ava:11;--k-name:5.2;--k-star:5.4;--k-sg:.8;--k-tx:4.6;--k-rad:5}}

/* the newsletter band itself is a home owl scene (rules above) */
section.news-band{padding:0 0 var(--sp)}

/* ---------- footer ----------
   Top band in the header's main-row style, 4 link columns on forest, legal strip.
   Fixed colours (like the header), so it reads the same in light and dark mode.
   Layout: desktop 4 columns from 1200px, tablet 2 columns, phone from 699px down. */
.kf{--kf-wa:#1DA851}  /* WhatsApp green. The footer keeps its forest colours (set in inc/colours.php); only the Get directions button is rose gold */
.kf a{color:inherit;text-decoration:none}
.kf a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.kf svg{display:block;flex:none}

.kf-band{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);color:var(--ink)}
.kf-top{display:grid;gap:32px;padding-top:32px;padding-bottom:32px;align-items:center;
  grid-template-columns:minmax(250px,1fr) auto minmax(0,240px) 300px;grid-template-areas:"brand c1 c2 map"}

.kf-brand{grid-area:brand;display:grid;gap:14px;justify-items:start}
.kf-lock{display:flex;align-items:center;gap:14px}
.kf-logo{display:block;position:relative;flex:none;width:131px;height:92px}   /* the box stays 92px tall, as the round logo's was, so the band and the text around it keep their size */
.kf-lock img{position:absolute;left:0;top:50%;display:block;height:115px;width:auto;transform:translateY(-50%)}   /* 1.7.64: the menu logo (274 x 240 art), 115px tall, reaching 11.5px above and below its box */
.kf-lock .kf-tag{font:700 var(--fs-xs)/var(--lh-snug) var(--ft);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* 1.7.64: the 3 hearts float up from the footer logo as they do from the header logo (same hearts, positions and 4.5s loop) */
.kf-logo .lhrt{display:block;position:absolute;left:48%;top:20%;width:14px;opacity:0;pointer-events:none;animation:kd-heart-float 4.5s ease-in infinite}
.kf-logo .lhrt svg{display:block;width:100%;height:auto;fill:var(--copper)}
.kf-logo .lhrt.lh2{left:38%;width:11px;animation-delay:1.6s}
.kf-logo .lhrt.lh3{left:60%;width:9px;animation-delay:3s}
.kf-logo .lhrt.lh3 svg{fill:var(--sage)}
.kf-blurb{margin:0;max-width:36ch;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-soft)}

/* raised tile: social icons, contact icons, phone quick buttons (the header's button style) */
.kf-tile{background:linear-gradient(180deg,#fff,var(--cream));border:1.4px solid var(--rule);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(42,33,24,.05),0 4px 10px -5px rgba(42,33,24,.14)}

.kf-soc{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.kf-soc a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;transition:transform .15s}
.kf-soc a:hover{transform:translateY(-2px)}
.kf-soc svg{width:20px;height:20px}
.kf-soc .fb{color:#0866FF}.kf-soc .ig{color:#D6249F}

.kf-c{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-body)}
.kf-c1{grid-area:c1}.kf-c2{grid-area:c2}
.kf-c li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center}
.kf-c li.top{align-items:start}
.kf-c .kf-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--kf-sel)}
.kf-c .kf-ic svg{width:17px;height:17px}
.kf .wa svg{color:var(--kf-wa)}
.kf-c a{white-space:nowrap}
.kf-c a:hover{color:var(--kf-sel)}
.kf-c small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--ink-soft)}
.kf-c address{font-style:normal}
.kf-quick{display:none}

.kf-mapcol{grid-area:map;display:flex;flex-direction:column;gap:12px;min-width:0}
.kf-map{position:relative;overflow:hidden;height:200px;border-radius:18px;border:1.4px solid var(--rule);background:#F5F2EC;box-shadow:0 6px 16px -8px rgba(42,33,24,.3);--px:38%;--py:40%}
.kf-gmap{position:absolute;left:calc(var(--px) - 700px);top:calc(var(--py) - 500px);max-width:none}
.kf-gmap .m-ground{fill:#F5F2EC}
.kf-gmap .m-retail{fill:#F4EEE4}.kf-gmap .m-inst{fill:#EEEAE6}.kf-gmap .m-park{fill:#DDEBD5}
.kf-gmap .m-bld{fill:#EAE6DF;stroke:#E0DBD2}.kf-gmap .m-mil{fill:#F5EBD2;stroke:#E6D3A6}
.kf-gmap .m-case,.kf-gmap .m-road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kf-gmap .m-case{stroke:#DCD6CB}.kf-gmap .m-road{stroke:#fff}
.kf-gmap .m-case.m-main{stroke:#E3C26A}.kf-gmap .m-road.m-main{stroke:#F2D88E}
.kf-gmap text{font:500 var(--fs-xs) var(--ft);fill:#77716A;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.kf-gmap .big{font-weight:600;font-size:var(--fs-xs);fill:#6A5A33;stroke:#FBF3D9}
.kf-gmap .poi circle{fill:#9AA59C;stroke:#fff;stroke-width:1.5}
.kf-gmap .poi text{fill:#6E7F72}
.kf-pin{position:absolute;left:var(--px);top:var(--py);width:0;height:0}
.kf-drop{position:absolute;left:-19px;bottom:0;width:38px;height:46px;display:grid;justify-items:center;filter:drop-shadow(0 3px 4px rgba(42,33,24,.35))}
.kf-drop::before{content:"";position:absolute;top:0;left:0;width:38px;height:38px;background:var(--copper-pressed);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.kf-drop img{position:relative;width:30px;height:30px;margin-top:4px;padding:1px;border-radius:50%;background:#fff;object-fit:contain}
.kf-plab{position:absolute;left:24px;top:-44px;white-space:nowrap;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.kf-plab b{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--copper-pressed)}
.kf-plab small{display:block;font-size:var(--fs-xs);font-weight:500;color:#5E6A63}
.kf-osm{position:absolute;right:10px;bottom:6px;font-size:var(--fs-xs);color:rgba(42,33,24,.55)}
.kf-mapcol .btn svg{width:17px;height:17px;flex-basis:17px}

.kf-main{background:radial-gradient(120% 90% at 0% 0%,var(--kf-forest-light) 0%,var(--kf-forest) 55%,var(--kf-forest-dark) 100%);color:var(--kf-on)}
/* desktop: each column as wide as its longest link, the 1st and 4th on the page edges */
.kf-lists{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:32px 48px;padding-top:32px;padding-bottom:32px}
.kf-lists h2{margin:0 0 10px;font:600 var(--fs-base)/var(--lh-snug) var(--fh);color:var(--a);letter-spacing:0}
.kf-l{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.kf-l a{display:flex;align-items:center;gap:10px;min-height:32px;transition:color .15s}
.kf-l a:hover{color:#fff}
.kf-l .kf-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--a);
  background:rgba(20,28,25,.32);box-shadow:inset 1px 2px 5px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06);transition:background-color .15s,color .15s}
.kf-l .kf-ic svg{width:14px;height:14px}
.kf-l a:hover .kf-ic{background:var(--a);color:var(--kf-forest)}
.kf-l .all{font-weight:600}

.kf-strip{background:var(--kf-forest-deep);color:var(--kf-on-soft);font-size:var(--fs-xs)}
.kf-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:18px;padding-bottom:18px}
.kf-pay{display:flex;align-items:center;gap:8px}
.kf-pay svg{width:16px;height:16px;color:var(--kf-sage)}
.kf-leg{display:flex;flex-wrap:wrap;gap:4px 20px}
.kf-leg a:hover{color:#fff}
.kf-credit{color:inherit;text-decoration:none;white-space:nowrap}
.kf-credit:hover{color:#fff}

/* tablet: logo row across the top, contact on the left, map on the right */
@media (max-width:1199px){
  .kf-top{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"brand brand" "c1 map" "c2 map";grid-template-rows:auto auto 1fr;gap:24px 40px;align-items:start}
  .kf-brand{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 32px}
  .kf-mapcol{align-self:stretch}
  .kf-map{flex:1 1 auto;height:auto;min-height:280px;--px:40%;--py:44%}
}
@media (max-width:1099px){
  /* tablet: 2 columns, the 2nd starting on the map edge above */
  .kf-lists{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px 40px}
}
/* phone: Call, WhatsApp and Email as buttons, then address, hours and map. Type steps down a size. */
@media (max-width:699px){
  .kf-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "quick" "c2" "map";grid-template-rows:none;gap:20px;padding-top:28px;padding-bottom:28px}
  .kf-brand{grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center;text-align:center}
  .kf-lock{gap:12px;justify-content:center}
  .kf-logo{width:91px;height:64px}
  .kf-lock img{height:80px}
  .kf-lock .kf-tag{font-size:var(--fs-xs)}
  .kf-blurb{font-size:var(--fs-sm);line-height:var(--lh-body)}
  .kf-soc a{width:40px;height:40px;border-radius:10px}
  .kf-soc svg{width:18px;height:18px}
  .kf-c1{display:none}
  .kf-quick{grid-area:quick;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kf-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border-radius:var(--btn-r);font-size:var(--fs-sm);font-weight:600}
  .kf-quick svg{width:18px;height:18px;color:var(--kf-sel)}
  .kf-c{font-size:var(--fs-sm);gap:10px}
  .kf-c li{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .kf-c .kf-ic{width:34px;height:34px}
  .kf-c .kf-ic svg{width:15px;height:15px}
  .kf-c small{font-size:var(--fs-xs)}
  .kf-map{min-height:0;height:200px;--px:34%;--py:42%}
  .kf-mapcol .btn{--bh:44px;--bfs:var(--fs-sm)}
  .kf-lists{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding-top:28px;padding-bottom:28px}
  .kf-lists h2{font-size:var(--fs-base);margin-bottom:6px}
  .kf-l{gap:0;font-size:var(--fs-sm);line-height:var(--lh-snug)}
  .kf-l a{gap:10px;min-height:34px}
  .kf-l .kf-ic{width:28px;height:28px}
  .kf-l .kf-ic svg{width:14px;height:14px}
  /* strip: centred, payment line first, then legal links, then copyright */
  .kf-strip{font-size:var(--fs-xs);line-height:var(--lh-body)}
  .kf-strip .wrap{flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:16px;padding-bottom:20px}
  .kf-pay{order:1;display:block}
  .kf-pay svg{display:inline-block;vertical-align:-2px;width:13px;height:13px;margin-right:6px}
  .kf-leg{order:2;justify-content:center;gap:0 20px}
  .kf-strip .wrap>span:first-child{order:3;color:rgba(var(--kf-on-soft-rgb),.75)}
}
/* small phones: no list icons, so link names keep to one line */
@media (max-width:479px){
  .kf-l .kf-ic{display:none}
}
@media (pointer:coarse){.kf-leg a{display:inline-flex;align-items:center;min-height:40px}}
@media (prefers-reduced-motion:reduce){.kf *{transition:none!important}}

/* ---------- inner pages ---------- */
/* One breadcrumb position on every page: the left edge of the page wrap, 16px under the header. Templates print it as the first thing in <main>, inside .wrap. */
.crumb{display:block;font-size:var(--fs-sm);color:var(--ink-soft);padding:16px 0 0;margin:0;max-width:none;text-align:left}
.crumb a:hover{color:var(--copper-pressed)}
.crumb .sep{margin:0 8px;opacity:.5}
.page-head{padding:16px 0 calc(var(--sp) * .4);border-bottom:1px solid var(--rule)}
.page-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.page-head p{color:var(--ink-soft);margin-top:12px;max-width:var(--w-intro);font-size:var(--fs-h1-sub);line-height:var(--lh-body);text-wrap:balance}
/* category tiles at the top of every category with subcategories (kd_subcat_tiles), and the collection tiles on Lifestyle Beds & Furniture and Collections
   (kd_collection_tiles), both printed by kd_cat_tiles(): a small square photo with the name and an arrow underneath,
   6 across on desktop, 4 across below 900px and 3 across below 600px. Option B on the "Kiddie Depot Subcategory Tiles" canvas. */
.kd-subs{margin-top:24px}
.kd-subs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kd-sub{display:flex;flex-direction:column;gap:8px;height:100%;color:var(--ink);text-align:left}
.kd-sub-photo{display:block;aspect-ratio:1 / 1;max-width:100%;border-radius:12px;overflow:hidden;background:#FFFFFF;border:1px solid var(--rule)}
.kd-sub-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.kd-sub:hover .kd-sub-photo img{transform:scale(1.04)}
.kd-sub:hover .kd-sub-name{color:var(--copper-pressed)}
.kd-sub:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:12px}
.kd-sub-name{font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug);color:var(--ink-pressed)}
.kd-sub-name svg{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-2px;color:var(--copper)}  /* inline, so a wrapped name keeps the arrow at the end of its last line */
@media (max-width:899px){.kd-subs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:599px){.kd-subs{margin-top:20px}.kd-subs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kd-sub{gap:6px}.kd-sub-name{font-size:var(--fs-xs)}}
@media (prefers-reduced-motion:reduce){.kd-sub-photo img{transition:none}}
.shop{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,3.2vw,32px);padding:calc(var(--sp) * .45) 0 var(--sp);align-items:start}
@media (max-width:900px){.shop{grid-template-columns:1fr;gap:24px}}
.filters{position:sticky;top:96px;display:grid;gap:24px}
@media (max-width:900px){.filters{position:static}}
.pager{display:flex;gap:8px;justify-content:center;margin-top:32px}
.pager a{min-width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--rule);border-radius:var(--btn-r);font-size:var(--fs-sm);font-weight:600;padding:0 12px;background:var(--surface)}
.pager a[aria-current]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.pager a:hover:not([aria-current]){border-color:var(--copper);color:var(--copper-pressed)}
.qty{display:flex;align-items:center;border:1.5px solid var(--rule);border-radius:var(--btn-r);background:var(--surface);min-height:46px}
.qty button{width:42px;border:0;background:transparent;font-size:var(--fs-lg);cursor:pointer;color:var(--ink);font-family:var(--ft)}
.qty span{min-width:34px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

/* overlays */
.ovl{position:fixed;inset:0;z-index:90;background:rgba(24,30,26,.44);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
.ovl.open{opacity:1;visibility:visible}
body.cart-open{overflow:hidden}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:95;background:var(--surface);box-shadow:var(--lift-3);transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.7,.3,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--rule)}
.dr-head h3{font-family:var(--fh);font-size:var(--fs-h3);font-weight:600}
.dr-ship{padding:12px 24px;font-size:var(--fs-sm)}
.dr-items{flex:1;overflow-y:auto;padding:4px 24px}
.cart-empty{display:grid;justify-items:start;gap:12px;padding:24px 0 12px}
.cart-empty p{font-size:var(--fs-base);color:var(--ink-soft)}
.dr-items .cart-empty{padding:24px 0}
.dr-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.dr-item .th{width:74px;height:74px;border-radius:8px;flex:0 0 auto;border:1px solid var(--rule);background-color:var(--cream-2)}
.dr-item h4{font-size:var(--fs-base);font-weight:700;line-height:var(--lh-snug)}
.dr-item .v{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:4px}
.dr-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}
.dr-qty{display:flex;align-items:center;border:1.5px solid var(--rule);border-radius:var(--btn-r);min-height:38px}
.dr-qty button{width:30px;border:0;background:transparent;cursor:pointer;color:var(--ink);font-size:var(--fs-base);font-family:var(--ft)}
.dr-qty span{min-width:24px;text-align:center;font-size:var(--fs-sm);font-weight:600}
.dr-item .pr{font-weight:700;font-size:var(--fs-base)}
.dr-rm{background:transparent;border:0;color:var(--ink-soft);font-size:var(--fs-xs);text-decoration:underline;cursor:pointer;padding:0;font-family:var(--ft)}
.dr-rm{position:relative}.dr-rm::after{content:"";position:absolute;inset:-12px -8px}  /* since 1.7.90: Remove takes taps 12px above and below its text */
.dr-foot{border-top:1px solid var(--rule);padding:16px 24px;display:grid;gap:12px;background:var(--cream-2)}
.dr-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-base)}
.dr-sub b{font-size:var(--fs-h3);font-weight:700;font-variant-numeric:tabular-nums}
.dr-foot small{color:var(--ink-soft);font-size:var(--fs-xs);text-align:center}


/* mobile centring */
@media (max-width:760px){
  .band-head{flex-direction:column;align-items:center;text-align:center}
  .band-head h2{font-size:var(--fs-h2-home)}
  .band-head p{margin-left:auto;margin-right:auto}
}

/* ================= HEADER ================= */
.kdh .wrapx{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kdh .util{background:var(--ink);color:var(--cream);font-size:var(--fs-xs);position:relative;z-index:3}
.kdh .util .wrapx{display:flex;justify-content:space-between;align-items:center;height:32px;gap:16px}
.kdh .util .hmsgs{display:flex;align-items:center;gap:8px;min-width:0}
.kdh .util .hmsgs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdh .util .hlinks{margin-left:auto;display:flex;align-items:center;gap:16px;white-space:nowrap}
.kdh .util a{color:var(--cream);text-decoration:none}
.kdh .util a:hover{color:#FFFFFF}
.kdh .util .tel{font-weight:600;color:var(--cream)}
.kdh .m-short{display:none}
.kdh .hrow{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);box-shadow:var(--edge);position:relative;z-index:3}
.kdh .hrow .wrapx{display:flex;align-items:center}
.kdh .burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;cursor:pointer;
  background:linear-gradient(180deg,#fff,var(--cream));border:1.4px solid var(--rule);border-radius:var(--btn-r);
  box-shadow:var(--edge),var(--lift-1);color:var(--ink)}
.kdh .lock{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none;min-width:0}
.kdh .srch{position:relative;display:flex;align-items:center;gap:8px;height:44px;min-width:0;padding:0 6px 0 16px;
  background:#fff;border:1.4px solid var(--rule);border-radius:var(--btn-r);color:var(--ink-soft);
  box-shadow:inset 0 2px 4px rgba(42,33,24,.06), 0 1px 0 rgba(255,255,255,.9)}
.kdh .srch svg{flex:none}
.kdh .srch.inline{flex:1 1 auto;max-width:620px;margin:0 auto}
.kdh .srch:focus-within{border-color:var(--focus);box-shadow:inset 0 2px 4px rgba(42,33,24,.05), 0 0 0 3px rgba(var(--copper-rgb),.22)}
.kdh .srch:has(.kds-in:focus-visible){box-shadow:inset 0 2px 4px rgba(42,33,24,.05), 0 0 0 2px var(--focus)}  /* since 1.7.89: a solid ring for keyboard focus, like the 3px outline elsewhere */
.kdh .srch input{border:0;outline:0;background:none;font:500 var(--fs-sm) var(--ft);color:var(--ink);width:100%;min-width:0}
.kdh .srch input::placeholder{color:var(--ink-soft)}
.kdh .tools{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.kdh .tbtn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--ink);
  font:600 var(--fs-sm) var(--ft);padding:8px 12px;border-radius:var(--btn-r);white-space:nowrap}
.kdh .tbtn:hover{background:rgba(var(--sage-rgb),.1)}
.kdh .cartbtn{margin-left:4px;background:linear-gradient(180deg,#fff,var(--cream));border:1.4px solid var(--rule);
  box-shadow:var(--edge),var(--lift-1);padding:8px 12px}
.kdh .cartbtn .pip{min-width:19px;height:19px;border-radius:999px;background:var(--copper);color:#FFFFFF;text-shadow:var(--copper-shadow);font:700 var(--fs-xs) var(--ft);display:grid;place-items:center;padding:0 4px}
.kdh .cartbtn .pip.is-empty{background:var(--rule);color:var(--ink-soft)}
/* ---- search: the header field and its dropdown ---- */
.kdh .srch .kds-clear{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--cream-2);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
.kdh .srch .kds-clear[hidden]{display:none}
.kdh .srch .kds-clear:hover{color:var(--ink)}
.kdh .srch .kds-go{flex:none;height:34px;padding:0 16px;border:0;border-radius:calc(var(--btn-r) - 1px);background:var(--ink);color:#FFFFFF;font:600 var(--fs-sm) var(--ft);cursor:pointer}
.kdh .srch .kds-go:hover{background:var(--ink-hover)}
.kdh .srch .kds-go:focus-visible,.kdh .srch .kds-clear:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kdh .srch input::-webkit-search-cancel-button{display:none}
.kdh .srch .kds-in{font-size:var(--fs-base)}  /* 16px, so phones do not zoom in when the field is tapped */
.kdh .kds-drop{position:absolute;top:calc(100% + 10px);left:-1.4px;right:-1.4px;z-index:20;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 20px 44px rgba(42,33,24,.16);max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;color:var(--ink);text-align:left}
.kdh .kds-drop[hidden]{display:none}
.kdh .kds-grid{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:300px}
.kdh .kds-grid > .kds-prods:only-child{grid-column:1 / -1}
.kdh .kds-sugs{padding:16px 10px 12px 12px;border-right:1px solid var(--cream-2);background:var(--paper)}
.kdh .kds-prods{padding:16px 18px 10px;min-width:0}
.kdh .kds-h{margin:0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--copper-pressed)}
.kdh .kds-sugs .kds-h{padding:0 10px 8px}
.kdh .kds-ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px}
.kdh .kds-cnt{font-size:var(--fs-sm);color:var(--ink-soft)}
.kdh .kds-sug{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;
  font:400 var(--fs-base)/1.2 var(--ft);color:var(--ink);cursor:pointer;text-align:left}
.kdh .kds-si{flex:none;color:var(--ink-soft)}
.kdh .kds-st{flex:1;min-width:0}
.kdh .kds-more{font-weight:700}
.kdh .kds-n{font-size:var(--fs-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.kdh .kds-prod{display:flex;align-items:center;gap:14px;padding:8px;margin:0 -8px;border-radius:10px;color:var(--ink)}
.kdh .kds-prod img{width:64px;height:64px;flex:none;object-fit:cover;border-radius:8px;background:var(--cream-2)}
.kdh .kds-pt{flex:1;min-width:0}
.kdh .kds-pn{display:block;font-size:var(--fs-base);font-weight:600;line-height:var(--lh-snug)}
.kdh .kds-hit{background:var(--sun-wash);border-radius:3px}
.kdh .kds-pc{display:block;font-size:var(--fs-sm);color:var(--ink-soft);margin-top:3px}
.kdh .kds-pp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kdh .kds-pp b{font-size:var(--fs-base)}
.kdh .kds-pp s{font-size:var(--fs-sm);color:var(--ink-soft)}
.kdh .kds-sale{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--copper);color:#FFFFFF;text-shadow:var(--copper-shadow);padding:3px 7px;border-radius:4px;margin-bottom:2px}
.kdh .kds-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--cream-2)}
.kdh .kds-cl{font-size:var(--fs-sm);color:var(--ink-soft);margin-right:4px}
.kdh .kds-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1.4px solid var(--rule);border-radius:999px;font-size:var(--fs-sm);font-weight:500;color:var(--ink);background:var(--surface)}
.kdh .kds-chip:hover{border-color:var(--ink)}
.kdh .kds-foot{display:flex;justify-content:center;padding:4px 18px 12px}
.kdh .kds-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;color:var(--ink);font-size:var(--fs-base);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.kdh .kds-all:hover{color:var(--ink);text-decoration-color:var(--sage)}
.kdh .kds-none{padding:24px;display:flex;flex-direction:column;gap:14px}
.kdh .kds-nh{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-snug)}
.kdh .kds-np{margin:0;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft);max-width:52ch}
.kdh .kds-chips{display:flex;gap:8px;flex-wrap:wrap}
.kdh .kds-wa{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--btn-r);background:var(--ink);color:#FFFFFF;font-size:var(--fs-base);font-weight:600}
.kdh .kds-wa:hover{background:var(--ink-hover);color:#FFFFFF}
/* hover and the arrow key highlight */
.kdh .kds-sug:hover,.kdh .kds-prod:hover{background:var(--cream-2)}
.kdh .kds-drop .on{background:var(--copper-wash);box-shadow:inset 3px 0 0 var(--ink)}
.kdh .kds-drop .kds-chip.on,.kdh .kds-drop .kds-all.on,.kdh .kds-drop .kds-wa.on{box-shadow:0 0 0 3px rgba(var(--copper-rgb),.45)}
.kdh .kds-drop .kds-wa.on{background:var(--ink)}
/* the page behind dims a little while the dropdown is open */
.kdh .scrim.kds-dim{background:rgba(24,30,26,.18)}
/* narrow screens: suggestions sit above the products, and the dropdown fills the row */
.kdh .hdr[data-mode="narrow"] .kds-grid{grid-template-columns:1fr;min-height:0}
.kdh .hdr[data-mode="narrow"] .kds-sugs{border-right:0;border-bottom:1px solid var(--cream-2)}
.kdh .searchrow .kds-drop{top:calc(100% + 8px);max-height:calc(100dvh - 190px)}
/* the slim bar: its search icon opens the search row under the bar */
.kdh .hdr.compact.sopen .searchrow{display:block}
.kdh .hdr.compact[data-mode="wide"] .searchrow .wrapx{max-width:860px}
@media (max-width:420px){
  .kdh .srch .kds-go{padding:0 12px}
  .kdh .kds-prod img{width:56px;height:56px}
}
.kdh .searchrow{display:none;position:relative;z-index:6;background:var(--cream);border-top:1px solid var(--cream-2)}
.kdh .searchrow .wrapx{padding-top:8px;padding-bottom:8px}
.kdh .searchrow .srch{width:100%}
.kdh .catrow{background:var(--cream);border-top:1px solid var(--cream-2);box-shadow:0 1px 0 var(--rule), 0 6px 14px -12px rgba(42,33,24,.35);position:relative;z-index:3}
.kdh .catrow .wrapx{display:flex;align-items:center}
.kdh .nitem{position:relative;display:flex;align-items:center}
.kdh .ntop{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:8px 8px 0 0;white-space:nowrap;
  text-decoration:none;color:var(--ink);font:600 var(--fs-sm) var(--ft);background:transparent;border:0;cursor:pointer;transition:background .1s,color .1s}
.kdh .ntop .chev{width:11px;height:11px;opacity:.5;transition:transform .18s}
.kdh .ntop:hover{color:var(--copper-pressed)}
.kdh .nitem.cur .ntop{color:var(--copper-pressed)}
.kdh .nitem.open .ntop{background:transparent;color:var(--copper-pressed);box-shadow:none}
.kdh .nitem.open .chev{transform:rotate(180deg);opacity:.9}
.kdh .ntop.sale{color:var(--ink)}
.kdh .ntop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kdh .lab-short{display:none}
.kdh .mdrawers{position:absolute;left:0;right:0;top:100%;z-index:2}
.kdh .mdrawer{position:absolute;left:0;right:0;top:0;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 62%,var(--cream) 100%);border-bottom:1px solid var(--rule);
  box-shadow:inset 0 1px 0 #fff, 0 18px 30px -18px rgba(42,33,24,.30), 0 40px 70px -40px rgba(42,33,24,.40);
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.3,1),visibility .18s}
.kdh .mdrawer.on{opacity:1;visibility:visible;transform:translateY(0);transition-property:opacity,transform,visibility;transition-delay:0s,0s,0s;transition-duration:.18s,.22s,0s}   /* visible from the first frame, so keyboard focus can move straight in */
.kdh .dtop{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:32px 0 24px}
.kdh .dcols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.kdh .dcol .dcol-h{font-family:var(--fh);font-size:var(--fs-base);font-weight:700;line-height:var(--lh-tight);text-wrap:balance;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.kdh .dcol ul{list-style:none;margin:0;padding:0}
.kdh .dcol a{display:block;text-decoration:none;color:var(--ink);font:500 var(--fs-sm) var(--ft);padding:4px 8px;margin-left:-8px;border-radius:7px}
.kdh .dcol a:hover{background:var(--copper-wash);color:var(--copper-pressed)}
.kdh .dcol a.all{color:var(--ink);font-weight:700}
.kdh .dcol a.all:hover{color:var(--copper-pressed)}
.kdh .dcol a.all::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.3em;vertical-align:-.08em;background:currentColor;
  -webkit-mask:var(--kd-arrow) center/contain no-repeat;mask:var(--kd-arrow) center/contain no-repeat}
.kdh .feat{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.kdh .fcard{display:grid;grid-template-columns:106px 1fr;gap:12px;align-items:center;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,#fff,var(--cream));border:1px solid var(--rule);border-radius:12px;padding:12px;
  box-shadow:var(--edge),var(--lift-1);transition:transform .16s,box-shadow .16s}
.kdh .fcard:hover{transform:translateY(-2px);box-shadow:var(--edge),var(--lift-2)}
.kdh .fcard .im{width:106px;height:82px;border-radius:8px;background:var(--copper-wash) center/cover}
.kdh .fcard strong{display:block;font-family:var(--fh);font-size:var(--fs-base);font-weight:700;margin-bottom:4px;line-height:var(--lh-snug)}
.kdh .fcard span.d{display:block;font-size:var(--fs-xs);color:var(--ink-soft);line-height:var(--lh-body)}
.kdh .dfoot{background:none;border-top:0}  /* no strip or box: the line sits on the drawer */
.kdh .dfoot .wrapx{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;font-size:var(--fs-sm);color:var(--ink-soft)}
.kdh .dfoot .fl{display:flex;align-items:center;gap:24px;min-width:0;flex:1 1 auto}
.kdh .dfoot .fl span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kdh .dfoot .fl span svg{flex:none}
.kdh .dfoot a{color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
/* mobile panel */
.kdh .mpanel{position:absolute;left:0;right:0;top:100%;z-index:2;display:none;
  background:linear-gradient(180deg,var(--paper),var(--cream));border-bottom:1px solid var(--rule);
  box-shadow:inset 0 1px 0 #fff, 0 18px 30px -18px rgba(42,33,24,.30), 0 40px 70px -40px rgba(42,33,24,.40);
  max-height:min(74vh,640px);overflow-y:auto;overscroll-behavior:contain}
.kdh .mpanel .wrapx{padding-top:8px;padding-bottom:24px}
.kdh .arow{border-bottom:1px solid var(--cream-2)}
.kdh .arow > button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 4px;
  background:none;border:0;cursor:pointer;font:600 var(--fs-base) var(--ft);color:var(--ink);text-align:left}
.kdh .arow > a{display:flex;align-items:center;min-height:56px;padding:0;font:600 var(--fs-base) var(--ft);color:var(--ink)}   /* a tab with no drawer */
.kdh .arow > button .chev{width:15px;height:15px;opacity:.55;transition:transform .2s}
.kdh .arow.open > button{color:var(--copper-pressed)}
.kdh .arow.open > button .chev{transform:rotate(180deg)}
.kdh .abody{display:none;padding:4px 0 16px}
.kdh .arow.open .abody{display:block}
.kdh .abody .dcols{grid-template-columns:1fr;gap:12px}
.kdh .abody .dcol .dcol-h{font-size:var(--fs-sm);font-family:var(--ft);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-hover);margin-bottom:4px;padding-bottom:4px}
.kdh .abody .dcol a{font-size:var(--fs-base);padding:8px}
.kdh .abody .fcard{margin-top:12px}
.kdh .hmfoot{display:flex;gap:8px;margin-top:16px}
.kdh .mbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none}
.kdh .mbtn.line{border-radius:var(--btn-r);font:600 var(--fs-base) var(--ft);background:linear-gradient(180deg,#fff,var(--cream));color:var(--ink);border:1.4px solid var(--rule);box-shadow:var(--lift-1)}
.kdh .hdr.panel-open .mpanel{display:block}
.kdh .hdr.panel-open .burger{background:linear-gradient(180deg,var(--cream-2),var(--rule));box-shadow:inset 0 2px 4px rgba(42,33,24,.14)}
/* ---- tiers ---- */
.kdh .hdr[data-tier="lg"] .m-full,.kdh .hdr[data-tier="md"] .m-full,.kdh .hdr[data-tier="sm"] .m-full{display:none}
.kdh .hdr[data-tier="lg"] .m-short,.kdh .hdr[data-tier="md"] .m-short,.kdh .hdr[data-tier="sm"] .m-short{display:inline}
.kdh .hdr[data-tier="lg"] .u2,.kdh .hdr[data-tier="md"] .u2,.kdh .hdr[data-tier="sm"] .u2{display:none}
.kdh .hdr[data-tier="md"] .u3,.kdh .hdr[data-tier="sm"] .u3{display:none}
.kdh .hdr[data-tier="sm"] .uw{display:none}   /* since 1.7.93: the phone menu's Wishlist tile covers sm and xs */
.kdh .hdr[data-tier="sm"] .hmsgs{display:none}
.kdh .hdr[data-tier="xs"] .util{display:none}
.kdh .hdr[data-tier="md"] .lab-full{display:none}   /* short tab names from 860 to 999px */
.kdh .hdr[data-tier="md"] .lab-short{display:inline}
.kdh .hdr[data-tier="lg"] .srch.inline{max-width:480px}
.kdh .hdr[data-tier="md"] .srch.inline{max-width:380px}
.kdh .hdr[data-tier="md"] .wrapx,.kdh .hdr[data-tier="sm"] .wrapx{padding-left:16px;padding-right:16px}
.kdh .hdr[data-tier="md"] .acct span{display:none}
.kdh .hdr[data-mode="narrow"] .catrow,.kdh .hdr[data-mode="narrow"] .mdrawers{display:none}
.kdh .hdr[data-mode="narrow"] .burger{display:inline-flex}
.kdh .hdr[data-tier="sm"] .hrow .wrapx{height:74px}
.kdh .hdr[data-tier="sm"] .acct{display:none}
.kdh .hdr[data-tier="sm"] .srch.inline{max-width:none;flex:1 1 auto}
.kdh .hdr[data-tier="xs"] .hrow .wrapx{display:grid;grid-template-columns:44px 1fr auto;align-items:center;height:66px;gap:8px;padding-left:12px;padding-right:12px}
.kdh .hdr[data-tier="xs"] .lock{justify-self:center}
.kdh .hdr[data-tier="xs"] .srch.inline{display:none}
.kdh .hdr[data-tier="xs"] .searchrow{display:block}
.kdh .hdr[data-tier="xs"] .searchrow .wrapx{padding-left:12px;padding-right:12px}
.kdh .hdr[data-tier="xs"] .acct{display:none}
.kdh .hdr[data-tier="xs"] .cartbtn{padding:8px 12px}
.kdh .hdr[data-tier="xs"] .mpanel .wrapx{padding-left:12px;padding-right:12px}
.kdh .hdr[data-tier="xs"] .hmfoot{flex-direction:column;gap:8px;margin-top:16px}
.kdh .hdr[data-tier="xs"] .mbtn{flex:none;height:50px}
@media (max-width:520px){.kdh .abody .fcard{grid-template-columns:80px 1fr} .kdh .abody .fcard .im{width:80px;height:64px}}
/* drawer at narrower tiers */
.kdh .hdr[data-tier="lg"] .dtop{grid-template-columns:1fr 300px;gap:24px}
.kdh .hdr[data-tier="lg"] .dcols{gap:24px}
.kdh .hdr[data-tier="lg"] .f2,.kdh .hdr[data-tier="md"] .f2{display:none}
.kdh .hdr[data-tier="md"] .dtop{grid-template-columns:1fr 250px;gap:16px;padding:24px 0 24px}
.kdh .hdr[data-tier="md"] .dcols{gap:16px}
.kdh .hdr[data-tier="md"] .dcol a{font-size:var(--fs-sm)}
.kdh .hdr[data-tier="md"] .fcard{grid-template-columns:78px 1fr;gap:12px;padding:8px}
.kdh .hdr[data-tier="md"] .fcard .im{width:78px;height:62px}
.kdh .hdr[data-tier="md"] .fcard strong{font-size:var(--fs-base)}
.kdh .hdr[data-tier="sm"] .abody .dcols{grid-template-columns:1fr 1fr;gap:12px 24px}
.kdh .hdr[data-tier="sm"] .abody .fcard{max-width:420px}
.kdh .scrim{background:rgba(var(--ink-rgb),.32);opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s;z-index:4}
.kdh .scrim.on{opacity:1;visibility:visible}

/* --- header layout ---
   Desktop: the logo spans the search row and the tabs row (see the 1.7.48 block), search filling the middle,
   Contact, Account and cart on the right, the tabs under the search bar.
   Phone and small tablet: logo centred, search as a full-width field under the bar.
   --hpad is the side padding of every row, --lk-pad the space above and below the logo, --lk-art the logo height
   (the search row is that plus --lk-pad twice), --cat-h the tabs row, --ntp the side padding of a tab. */
.kdh .hdr{--hpad:var(--pad,24px);--lk-pad:10px;--lk-art:66px;--ntp:14px;--cat-h:52px}
.kdh .sbtn,.kdh .inrow{display:none}
/* the logo and tagline scale as 1 unit: tagline text and gap are both the logo height x 12/78 (12px beside the 78px desktop logo) */
.kdh .rlock{display:flex;align-items:center;gap:calc(var(--lk-art) * 12 / 78)}
.kdh .rart{display:block;height:var(--lk-art);width:auto;filter:drop-shadow(0 3px 6px rgba(42,33,24,.14))}
.kdh .rtag{display:block;font:500 max(11px, calc(var(--lk-art) * 14 / 78))/1.35 var(--ft);letter-spacing:0;text-transform:none;color:var(--ink-soft);white-space:nowrap}
.kdh .cbtn{text-decoration:none}
.kdh .hdr .hrow .wrapx{height:calc(var(--lk-art) + var(--lk-pad) * 2);gap:var(--lk-gap);padding-left:var(--hpad);padding-right:var(--hpad)}
.kdh .hdr[data-mode="wide"] .hrow{box-shadow:none;z-index:5}
.kdh .hdr[data-mode="wide"] .srch.inline{flex:1 1 auto;max-width:none;margin:0;height:44px}
.kdh .hdr[data-mode="wide"] .tools{gap:4px;margin-left:0}
.kdh .hdr[data-mode="wide"] .catrow .wrapx{gap:12px;height:var(--cat-h);padding-left:calc(var(--hpad) - var(--ntp));padding-right:calc(var(--hpad) - var(--ntp))}
.kdh .hdr[data-mode="wide"] .nitem{height:44px}
.kdh .hdr[data-mode="wide"] .ntop{padding:0 var(--ntp)}
.kdh .hdr[data-tier="lg"]{--ntp:10px}
.kdh .hdr[data-tier="lg"] .catrow .wrapx,.kdh .hdr[data-tier="md"] .catrow .wrapx{gap:4px}
.kdh .hdr[data-tier="md"]{--ntp:8px;--lk-art:58px}   /* 78px search row */
.kdh .hdr[data-tier="md"] .cbtn span,.kdh .hdr[data-tier="md"] .acct span{display:none}
/* 1.7.48 desktop: the logo grows and spans the search row and the tabs row, centred top to bottom across both.
   The tagline is off here and in the floating bar. The search bar and the tabs both start the row gap (--lk-gap, 32px, 20px from 860 to 999px) after the logo,
   and the tabs sit at their usual spacing from there, the first tab in line with the search bar.
   --lk-big is the logo height, --lk-bw its width (274 x 240 art), --lk-gap the search row gap. The line between the 2 rows is off, so the logo sits on 1 surface.
   3 hearts float up from the logo as on the coming soon page.
   The floating bar after scrolling (desktop) shows the logo on its own with the hearts too; they rise 22px there so they fade inside the bar. */
.kdh .hdr{--lk-big:104px;--lk-bw:calc(var(--lk-big) * 274 / 240);--lk-gap:32px}
.kdh .hdr[data-tier="md"]{--lk-big:94px;--lk-gap:20px}
.kdh .rlogo{display:block;position:relative;flex:none}
.kdh .lhrt{display:none}
.kdh .hdr[data-mode="wide"]:not(.compact) .lock{position:relative;align-self:stretch;display:flex;align-items:center}
.kdh .hdr[data-mode="wide"]:not(.compact) .rlock{padding-left:var(--lk-bw)}
.kdh .hdr[data-mode="wide"]:not(.compact) .rtag{display:none}
.kdh .hdr[data-mode="wide"]:not(.compact) .rlogo{position:absolute;left:0;top:calc((var(--lk-art) + var(--lk-pad) * 2 + var(--cat-h) - var(--lk-big)) / 2);width:var(--lk-bw)}
.kdh .hdr[data-mode="wide"]:not(.compact) .rart{height:var(--lk-big);width:100%}
.kdh .hdr[data-mode="wide"]:not(.compact) .catrow{border-top:0}
.kdh .hdr[data-mode="wide"]:not(.compact) .catrow .wrapx{justify-content:flex-start;padding-left:calc(var(--hpad) + var(--lk-bw) + var(--lk-gap) - var(--ntp))}
.kdh .hdr.compact[data-mode="wide"] .rtag{display:none}
.kdh .hdr[data-mode="wide"] .lhrt{display:block;position:absolute;left:48%;top:26%;width:14px;opacity:0;pointer-events:none;animation:kd-heart-float 4.5s ease-in infinite}
.kdh .lhrt svg{display:block;width:100%;height:auto;fill:var(--copper)}
.kdh .hdr[data-mode="wide"] .lhrt.lh2{left:38%;width:11px;animation-delay:1.6s}
.kdh .hdr[data-mode="wide"] .lhrt.lh3{left:60%;width:9px;animation-delay:3s}
.kdh .lhrt.lh3 svg{fill:var(--sage)}
@keyframes kd-heart-float{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-34px) scale(1.1)}}   /* 34px rise: the hearts fade out inside the search row, clear of the utility bar */
.kdh .hdr.compact[data-mode="wide"] .lhrt{animation-name:kd-heart-float-bar}
@keyframes kd-heart-float-bar{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.1)}}
/* narrow: the search field moves to a full-width row under the bar */
.kdh .hdr[data-mode="narrow"]{--lk-art:64px}
.kdh .hdr[data-mode="narrow"] .srch.inline{display:none}
.kdh .hdr[data-mode="narrow"] .searchrow{display:block}
.kdh .hdr[data-mode="narrow"] .searchrow .wrapx{padding:0 var(--hpad) 12px}
.kdh .hdr[data-mode="narrow"] .searchrow{border-top:0;background:var(--cream)}
.kdh .hdr[data-mode="narrow"] .hrow{box-shadow:none}
.kdh .hdr[data-tier="sm"] .hrow .wrapx{gap:16px}
/* tablet: the logo and tagline sit centred between the menu button and the icons */
.kdh .hdr[data-tier="sm"] .hrow .wrapx{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.kdh .hdr[data-tier="sm"] .burger{justify-self:start}
.kdh .hdr[data-tier="sm"] .lock{justify-self:center;margin:0}
.kdh .hdr[data-tier="sm"] .tools{justify-self:end;margin-left:0}
.kdh .hdr[data-tier="sm"] .cbtn span{display:none}
/* compact: set by header.js after scrolling */
.kdh .hdr.compact .util{display:none}
.kdh .hdr.compact[data-mode="wide"] .srch.inline,.kdh .hdr.compact .searchrow{display:none}
.kdh .hdr.compact .sbtn{display:inline-flex}
.kdh .hdr.compact .tools{margin-left:auto}
.kdh .hdr.compact .tbtn:not(.cartbtn) span{display:none}
.kdh .hdr.compact[data-mode="wide"] .catrow{display:none}
.kdh .hdr.compact[data-mode="wide"] .inrow{display:flex;flex:0 1 auto;justify-content:center;align-self:stretch;min-width:0}
.kdh .hdr.compact[data-mode="wide"] .lab-full{display:none}
.kdh .hdr.compact[data-mode="wide"] .lab-short{display:inline}
.kdh .hdr.compact[data-tier="xl"] .lab-full{display:inline}
.kdh .hdr.compact[data-tier="xl"] .lab-short{display:none}

/* --- floating bar after scrolling: the slim bar lifts off the page edges into a solid cream
   rectangle with 14px corners and a glass edge. It holds the round logo (with the tagline on tablets and phones;
   they scale as 1 unit, tagline and gap = logo x 12/78), the tabs on desktop, and the menu's own buttons.
   --sb is the logo height: 12px from both ends of the bar, 8px above and below the logo, 2px from the top of the window. --- */
.kdh .hdr.compact[data-tier]{--sb:64px;--sbk:calc(var(--sb) * 12 / 78)}
.kdh .hdr.compact[data-mode="wide"]{--sb:76px}   /* 1.7.48: desktop floating bar logo 76px (was 64px), with 8px clear above and below */
.kdh .hdr.compact[data-tier="xs"]{--sb:60px}
@media (max-width:379px){.kdh .hdr.compact[data-tier="xs"]{--sb:54px}}
@media (max-width:374px){.kdh .hdr[data-tier="xs"] .rtag,.kdh .hdr.compact[data-tier="xs"] .rtag{display:none}}   /* under 375px the header is too narrow for the 2 line tagline, so the logo shows on its own, at the top of the page and in the bar */
/* 1.7.68: the floating bar runs the full width of the window less 1 even gap (--bar-gap) above it and at each side,
   and the drop-down tray and phone menu open the same gap below it. 16px on desktop, 12px on tablets, 10px on phones. */
.kdh .hdr.compact[data-tier]{--bar-gap:12px}
.kdh .hdr.compact[data-mode="wide"]{--bar-gap:16px}
.kdh .hdr.compact[data-tier="xs"]{--bar-gap:10px}
.kdh .hdr.compact[data-tier] .hrow{background:none;box-shadow:none;padding:var(--bar-gap) var(--bar-gap) 0}
.kdh .hdr.compact[data-tier] .hrow .wrapx{position:relative;isolation:isolate;max-width:none;height:calc(var(--sb) + 16px);padding-left:12px;padding-right:12px;border-radius:14px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.8),inset -1px -1px 1px 1px rgba(255,255,255,.6),inset -3px -4px 6px -3px rgba(42,33,24,.14),0 0 0 1px rgba(var(--rule-rgb),.9),0 12px 26px -14px rgba(42,33,24,.38)}
.kdh .hdr.compact[data-tier="xs"] .hrow .wrapx{gap:10px}
.kdh .hdr.compact[data-mode="wide"] .hrow .wrapx{justify-content:center}   /* 1.7.54: its contents grouped in the middle */
.kdh .hdr.compact .mdrawer{top:var(--bar-gap)}   /* the tray opens 1 gap below the bar */
.kdh .hdr.compact .mdrawer::before{top:calc(-1 * var(--bar-gap) - 1px);height:calc(var(--bar-gap) + 1px)}   /* keeps the pointer on the tray across the gap */
.kdh .hdr.compact[data-mode="wide"] .tools{margin-left:0}   /* 1.7.54: the logo, tabs and icons sit together as 1 group in the middle of the bar, the row gap apart */
.kdh .hdr.compact .rlock{display:flex;gap:var(--sbk)}
.kdh .hdr.compact .rart{height:var(--sb)}
.kdh .hdr.compact .rtag{display:block;font-size:max(11px, calc(var(--sb) * 14 / 78));letter-spacing:0;line-height:1.35}
.kdh .hdr.compact[data-mode="wide"] .nitem{height:calc(var(--sb) + 16px)}
.kdh .hdr.compact[data-mode="wide"] .ntop{height:40px;border-radius:var(--btn-r);padding:0 var(--ntp)}
.kdh .hdr.compact[data-mode="wide"] .nitem.open .ntop{background:transparent;box-shadow:none}
.kdh .hdr.compact[data-tier="xs"] .tools{gap:8px}
.kdh .hdr.compact[data-tier="xs"] .cartbtn{margin-left:0}
.kdh .hdr.compact[data-tier="xs"] .tbtn.sbtn{width:36px;height:40px;min-height:40px;padding:0;justify-content:center}
.kdh .hdr.compact .mpanel{margin:var(--bar-gap) var(--bar-gap) 0;border-radius:14px;border:1px solid var(--rule)}   /* lines up with the bar's edges, 1 gap below it */

/* --- the header on the page --- */
.kdh{position:relative;z-index:60}
.kdh .hdr{position:relative;z-index:40}
.kdh .scrim{position:fixed;inset:0}
/* 1.7.55: the full header scrolls away with the page. Once it has gone, header.js turns on .compact and the
   floating bar is fixed to the top of the window and slides down; scrolling back up it slides away (.bar-out)
   as the header comes back. The header keeps its full height (--kdh-h, set by header.js), so nothing below moves. */
.kdh{min-height:var(--kdh-h,auto)}
.kdh .hdr.compact{position:fixed;top:0;left:0;right:0}
.admin-bar .kdh .hdr.compact{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .kdh .hdr.compact{top:0}}
.kdh .hdr.compact .hrow{animation:kd-bar-in .32s cubic-bezier(.2,.7,.3,1)}
.kdh .hdr.compact.bar-out .hrow{animation:kd-bar-out .2s cubic-bezier(.4,0,1,1) forwards}
@keyframes kd-bar-in{from{transform:translateY(-120%)}}
@keyframes kd-bar-out{to{transform:translateY(-120%)}}
/* desktop: the focus ring goes round the logo, which reaches into the tabs row */
.kdh .hdr[data-mode="wide"]:not(.compact) .lock:focus-visible{outline:0}
.kdh .hdr[data-mode="wide"]:not(.compact) .lock:focus-visible .rlogo{outline:3px solid var(--focus);outline-offset:2px;border-radius:12px}
.kdh a{text-decoration:none}

.sl-block{container-type:inline-size;position:relative;
  --sl-ft:"Onest","Segoe UI",system-ui,sans-serif}
.sl-card{position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;
  transition:transform .24s cubic-bezier(.22,.7,.3,1),box-shadow .24s}
.sl-card::after{content:"";position:absolute;pointer-events:none}
.sl-img{position:relative;aspect-ratio:1;background:var(--cream-2) center/cover no-repeat;display:grid;place-items:center}
.sl-ribbon{position:absolute;top:0;left:0;font-family:var(--sl-ft);font-size:max(var(--fs-xs), calc(11*var(--u)));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:calc(7.5*var(--u)) calc(14*var(--u))}
.sl-body{flex:1;display:flex;flex-direction:column;gap:calc(5.5*var(--u));padding:calc(16*var(--u)) calc(17*var(--u)) calc(19*var(--u))}
.sl-card h3{margin:0;font-family:var(--sl-ft);font-size:max(var(--fs-base), calc(16.5*var(--u)));font-weight:700;line-height:var(--lh-snug);letter-spacing:0;color:var(--ink)}
.sl-price{display:flex;align-items:baseline;gap:calc(9.5*var(--u));margin:calc(6.5*var(--u)) 0 calc(15*var(--u));font-variant-numeric:tabular-nums;line-height:var(--lh-body)}
.sl-price .now{font-family:var(--sl-ft);font-size:max(var(--fs-base), calc(18*var(--u)));font-weight:700;color:var(--ink)}
.sl-price:has(.was) .now,.price:has(.was) .now{color:var(--ink)}
.sl-price .was{font-family:var(--sl-ft);font-size:max(var(--fs-base), calc(14.5*var(--u)));color:var(--ink-soft);text-decoration:line-through}
.sl-add{margin-top:auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(45*var(--u));padding:0 calc(19*var(--u));
  font-family:var(--sl-ft);font-size:max(var(--fs-base), calc(14.5*var(--u)));font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  border-radius:999px;border:calc(1*var(--u)) solid var(--buy-edge);background:var(--buy-fill);color:var(--on-accent);box-shadow:var(--buy-rim);
  transition:background .16s,transform .12s}
.sl-add:hover{background:var(--buy-fill-hover);transform:translateY(-1px)}
.sl-add:active{background:var(--buy-fill-hover);transform:translateY(1px)}



/* ===== cards ===== */

.sl-card{--rim:calc(5*var(--u));--r-out:calc(22*var(--u));--r-in:calc(17*var(--u));--shc:42,33,24;
  padding:var(--rim);border:0;border-radius:var(--r-out);isolation:isolate;overflow:visible;
  background:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 35%,rgba(var(--rule-rgb),.10) 60%,rgba(255,255,255,.34) 100%);
  box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(var(--shc),.08),0 calc(8*var(--u)) calc(18*var(--u)) calc(-8*var(--u)) rgba(var(--shc),.16)}
.sl-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(3px) saturate(1.3);backdrop-filter:blur(3px) saturate(1.3);filter:url(#glass-distortion)}
@media (max-width:899px){.sl-card::before{filter:none}}  /* since 1.7.90: phones and small tablets skip the distortion filter, which repaints on every scroll */
.sl-card::after{inset:0;border-radius:inherit;z-index:3;
  box-shadow:inset calc(2*var(--u)) calc(2*var(--u)) calc(1*var(--u)) 0 rgba(255,255,255,.75),
    inset calc(-1*var(--u)) calc(-1*var(--u)) calc(1*var(--u)) calc(1*var(--u)) rgba(255,255,255,.6),
    inset 0 0 calc(10*var(--u)) rgba(255,255,255,.35),
    inset calc(-3*var(--u)) calc(-4*var(--u)) calc(6*var(--u)) calc(-3*var(--u)) rgba(var(--shc),.18)}
.sl-card:hover{transform:translateY(calc(-6.5*var(--u)));
  box-shadow:0 calc(2*var(--u)) calc(4*var(--u)) rgba(var(--shc),.09),0 calc(14*var(--u)) calc(26*var(--u)) calc(-10*var(--u)) rgba(var(--shc),.20)}
.sl-img{border-radius:var(--r-in) var(--r-in) 0 0;overflow:hidden;background-color:var(--cream-2)}
.sl-body{background:#FFFFFF;border-radius:0 0 var(--r-in) var(--r-in);clip-path:inset(0 -120px -120px -120px)}
.sl-img,.sl-body{box-shadow:0 0 0 calc(1*var(--u)) var(--rule),0 0 calc(3*var(--u)) rgba(0,0,0,.06)}
.sl-ribbon{border-radius:var(--r-in) 0 calc(10.5*var(--u)) 0;background:var(--copper);color:#FFFFFF}


.sl-buy-wrap{margin-top:auto}
.sl-buy-wrap .sl-buy{position:relative;margin:0;display:flex;align-items:center;padding:calc(3.5*var(--u));border-radius:999px;background:#FFFFFF;
  border:calc(1*var(--u)) solid var(--rule);box-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.04),0 calc(6*var(--u)) calc(14*var(--u)) calc(-8*var(--u)) rgba(42,33,24,.22)}
.sl-buy-wrap .st{display:flex;align-items:center;gap:calc(3*var(--u));flex:1;min-width:0}
.sl-buy-wrap[data-in] .st-add{display:none}
.sl-buy-wrap:not([data-in]) .st-step{display:none}
.sl-buy-wrap .sl-qty{position:relative;flex:none;display:flex;align-items:center;height:calc(38*var(--u));padding-left:calc(8*var(--u));border-radius:999px;cursor:pointer;transition:background .16s}
.sl-buy-wrap .sl-qty:hover{background:var(--cream-2)}
.sl-buy-wrap .sl-qty:focus-within{box-shadow:0 0 0 calc(2*var(--u)) var(--focus)}
.sl-buy-wrap .sl-qty select{-webkit-appearance:none;appearance:none;margin:0;border:0;outline:0;background:transparent;cursor:pointer;height:100%;line-height:1;
  padding:0 calc(18*var(--u)) 0 0;font:700 max(var(--fs-base), calc(15*var(--u)))/1 var(--ft);color:var(--ink);font-variant-numeric:tabular-nums}
.sl-buy-wrap .sl-qty svg{position:absolute;right:calc(6*var(--u));top:50%;width:calc(9*var(--u));height:calc(6.5*var(--u));margin-top:calc(-3.25*var(--u));color:var(--ink);pointer-events:none}
.sl-buy-wrap .sl-add{margin:0;flex:1;width:auto;min-width:0;min-height:calc(38*var(--u));padding:0 calc(14*var(--u));display:flex;align-items:center;justify-content:center;
  border:calc(1*var(--u)) solid var(--buy-edge);border-radius:999px;background:var(--buy-fill);color:var(--on-accent);
  font:700 max(var(--fs-base), calc(14.5*var(--u)))/1 var(--ft);white-space:nowrap;cursor:pointer;box-shadow:var(--buy-rim);transition:background .16s,color .16s}
.sl-buy-wrap .sl-add:hover{background:var(--buy-fill-hover);color:var(--on-accent);transform:none}
.sl-buy-wrap .sl-add:active{background:var(--buy-fill-hover);color:var(--on-accent);transform:none}
/* Enquire now: white with a rule border and ink text */
.sl-buy-wrap .sl-add.sl-enq{background:#FFFFFF;color:var(--ink);border-color:var(--rule);box-shadow:none}
.sl-buy-wrap .sl-add.sl-enq:hover,.sl-buy-wrap .sl-add.sl-enq:active{background:#FFFFFF;color:var(--ink);border-color:var(--ink)}
.sl-buy-wrap .stp{flex:none;width:calc(38*var(--u));height:calc(38*var(--u));padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .16s}
.sl-buy-wrap .stp svg{width:calc(16*var(--u));height:calc(16*var(--u))}
.sl-buy-wrap .stp-minus{background:var(--cream-2);color:var(--ink)}
.sl-buy-wrap .stp-minus:hover{background:var(--rule)}
.sl-buy-wrap .stp-plus{background:var(--buy-fill);color:var(--on-accent)}
.sl-buy-wrap .stp-plus:hover{background:var(--buy-fill-hover)}
.sl-buy-wrap .stp-plus:active{background:var(--buy-fill-hover)}
.sl-buy-wrap .stp-l{flex:1;min-width:0;height:calc(38*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u));
  font:700 max(var(--fs-base), calc(14.5*var(--u)))/1 var(--ft);color:var(--ink);white-space:nowrap}
.sl-buy-wrap .tk{width:calc(15*var(--u));height:calc(15*var(--u));flex:none;color:var(--ink)}
.sl-buy-wrap .tk path{stroke-dasharray:16;stroke-dashoffset:0}
.sl-buy-wrap .n{display:inline-block;font-weight:700;font-variant-numeric:tabular-nums}
.sl-buy-wrap .stp:focus-visible,.sl-buy-wrap .sl-add:focus-visible{outline:calc(2*var(--u)) solid var(--focus);outline-offset:calc(2*var(--u))}
.sl-buy-wrap .vc-wrap{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .32s cubic-bezier(.3,.8,.3,1),opacity .2s,visibility 0s .32s}
.sl-buy-wrap[data-in] .vc-wrap{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .32s cubic-bezier(.3,.8,.3,1),opacity .25s .08s,visibility 0s}
.sl-buy-wrap .vc-wrap > div{overflow:hidden;min-height:0;padding:0 4px 4px;margin:0 -4px -4px}
.sl-buy-wrap .vc{margin-top:calc(8*var(--u));height:calc(40*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));border-radius:999px;
  background:#FFFFFF;border:calc(1.4*var(--u)) solid var(--ink);font:600 max(var(--fs-sm), calc(14*var(--u)))/1 var(--ft);color:var(--ink);text-decoration:none;
  transition:background-color .16s,color .16s}
.sl-buy-wrap .vc svg{width:calc(15*var(--u));height:calc(15*var(--u));transition:transform .16s}
.sl-buy-wrap .vc:hover{background:var(--ink);color:#FFFFFF}
.sl-buy-wrap .vc:hover svg{transform:translateX(3px)}
.sl-buy-wrap .vc:focus-visible{outline:calc(2*var(--u)) solid var(--focus);outline-offset:calc(2*var(--u))}
.sl-buy-wrap .kd-dot{position:absolute;width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;pointer-events:none;z-index:5}

.sl-wish{position:absolute;top:calc(10*var(--u));right:calc(10*var(--u));z-index:2;width:calc(36*var(--u));height:calc(36*var(--u));
  display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  border:calc(1*var(--u)) solid rgba(255,255,255,.95);
  box-shadow:0 calc(1*var(--u)) calc(4*var(--u)) rgba(42,33,24,.14),inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.7);
  transition:background .16s,transform .12s}
.sl-wish:hover{background:rgba(255,255,255,.92)}
.sl-wish:active{transform:scale(.92)}
.sl-wish:focus-visible{outline:max(2px, calc(2*var(--u))) solid var(--focus);outline-offset:calc(2*var(--u))}
.sl-wish svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:transparent;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;transition:fill .18s}
.sl-wish[aria-pressed="true"] svg{fill:var(--copper);stroke:var(--copper);animation:sl-wish-pop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes sl-wish-pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sl-wish[aria-pressed="true"] svg{animation:none}}

.pager a[aria-current]{color:var(--on-accent)}
.sl-ribbon.best{background:var(--sage);color:#FFFFFF;text-shadow:var(--sage-shadow)}
@container (min-width:480px){.sl-body h3{min-height:calc(2 * 1.25em)}}
.sl-ribbon{color:#FFFFFF}
/* View cart: white with a charcoal border and charcoal text */
.btn.btn-line.btn-vc{border-color:var(--ink);color:var(--ink)}
.btn.btn-line.btn-vc:hover{background:var(--ink);border-color:var(--ink);color:#FFFFFF}

/* ===== pages ===== */

.pg{padding-bottom:var(--sp)}
.pg .page-head{border-bottom:0;padding-bottom:calc(var(--sp) * .3)}
.pg-prose{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink);max-width:var(--w-read)}
.pg-prose p+p,.pg-prose ul+p,.pg-prose p+ul{margin-top:16px}
.pg-prose h2{font-size:var(--fs-h2);margin:32px 0 12px}
.pg-prose h2:first-child{margin-top:0}
.pg-prose h3{font-family:var(--fh);font-weight:600;font-size:var(--fs-h3);margin:24px 0 8px}
.pg-prose ul{padding-left:16px;margin:0;display:grid;gap:4px}
.pg-prose .script{font-size:var(--fs-h2);color:var(--ink);display:block;margin-top:24px}
.pg-photo{border-radius:20px;aspect-ratio:4/5;background-size:cover;background-position:center;background-color:var(--cream-2);box-shadow:var(--lift-2);border:6px solid var(--surface)}
.pg-photo.wide{aspect-ratio:4/3}
.pg-card{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:24px;box-shadow:var(--lift-1)}
.pg-card h3{font-family:var(--fh);font-weight:600;font-size:var(--fs-h3);margin-bottom:12px}
.pg-card+.pg-card{margin-top:16px}
.pg-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* pillars and steps */
/* forms */
.pg-form{display:grid;gap:12px}
.pg-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-form label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.pg-form label>input,.pg-form label>select,.pg-form label>textarea{margin-top:4px}
.pg-form input,.pg-form select,.pg-form textarea{width:100%;font:500 var(--fs-base)/var(--lh-body) var(--ft);color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--btn-r);min-height:46px;padding:8px 12px;outline:0;transition:border-color .16s,box-shadow .16s}
.pg-form textarea{min-height:130px;resize:vertical}
.pg-form input:focus,.pg-form select:focus,.pg-form textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px rgba(var(--copper-rgb),.25)}
.pg-form .hint{font-size:var(--fs-xs);font-weight:400;color:var(--ink-soft)}
.pg-form label>.hint{margin-left:4px}.pg-form label>.hint::before{content:"(";}.pg-form label>.hint::after{content:")";}
.pg-form select{height:46px;padding-top:0;padding-bottom:0;appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.pg-form input[type=file]{padding:4px 4px;font-size:var(--fs-sm);color:var(--ink-soft);cursor:pointer}
.pg-form input[type=file]::file-selector-button{font:600 var(--fs-sm)/1 var(--ft);color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:calc(var(--btn-r) - 3px);padding:0 12px;height:32px;margin-right:12px;cursor:pointer;transition:border-color .16s,color .16s}
.pg-form input[type=file]::file-selector-button:hover{border-color:var(--copper);color:var(--copper-pressed)}
.pg-form .check{display:flex;align-items:flex-start;gap:8px;font-weight:500;font-size:var(--fs-sm)}
.pg-form .check input{width:18px;height:18px;min-height:0;margin-top:4px;accent-color:var(--ink-soft)}
.pg-form .btn{justify-self:start}
.pg-choice{display:grid;gap:8px}
.pg-choice label{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:500;font-size:var(--fs-base);line-height:var(--lh-body)}
.pg-choice label:has(input:checked){border-color:var(--copper);background:rgba(var(--copper-rgb),.10);box-shadow:inset 0 0 0 1px var(--copper)}
.pg-choice input{margin-top:4px;accent-color:var(--copper);width:auto;min-height:0}
.pg-choice b{display:block;font-weight:700}
.pg-choice small{display:block;color:var(--ink-soft);font-size:var(--fs-sm)}
.pg-choice .pr{margin-left:auto;font-weight:700;white-space:nowrap}
@media (max-width:639px){.pg-choice label{flex-wrap:wrap}.pg-choice label>span:not(.pr){flex:1 1 0;min-width:0}.pg-choice label>span:not(.pr) small{margin-top:4px}.pg-choice .pr{margin-left:0;flex:none;padding-left:32px;width:100%;order:3}.pg-choice label:has(.pr) input{order:0}}
/* tables and lead times */
/* faq */
/* cart */
.cart-lines{display:grid}
.cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:center}
.cart-line .th{width:96px;height:96px;border-radius:12px;border:1px solid var(--rule);background-color:var(--cream-2)}
.cart-line h3{font-size:var(--fs-base);font-weight:700;line-height:var(--lh-snug)}
.cart-line .v{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:4px}
.cart-line .lead{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:var(--fs-xs);color:var(--ink);font-weight:600}
.cart-line .lead svg{width:14px;height:14px}
.cart-line .right{display:grid;gap:8px;justify-items:end}
.cart-line .pr{font-weight:700;font-size:var(--fs-base);font-variant-numeric:tabular-nums}
.cart-sum{display:grid;gap:8px;font-size:var(--fs-base)}
.cart-sum div{display:flex;justify-content:space-between;gap:12px}
.cart-sum .tot{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px;font-size:var(--fs-base)}
.cart-sum .tot b{font-size:var(--fs-h3);font-variant-numeric:tabular-nums}
.cart-coupon{display:flex;gap:8px}
.cart-coupon input{font:500 var(--fs-sm) var(--ft);border:1.5px solid var(--rule);border-radius:var(--btn-r);min-height:42px;padding:0 12px;background:var(--surface);color:var(--ink);width:170px}
/* checkout */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,3vw,48px);align-items:start;padding-top:calc(var(--sp) * .5)}
.co-sec{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:24px;box-shadow:var(--lift-1)}
.co-sec+.co-sec{margin-top:16px}
.co-sec h2{font-size:var(--fs-h3);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.co-sec h2 i{font-style:normal;font-family:var(--ft);font-size:var(--fs-sm);font-weight:700;width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center}
.co-side{position:sticky;top:120px}
#kd-checkout .co-side{position:static;top:auto}
.co-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
.co-item .th{width:56px;height:56px;border-radius:8px;border:1px solid var(--rule);flex:none;background-color:var(--cream-2)}
.co-item b{display:block;font-weight:700}
.co-item span{color:var(--ink-soft);font-size:var(--fs-xs)}
.co-item .pr{margin-left:auto;font-weight:700;white-space:nowrap}
.co-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:4px}
.co-pay-block{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.co-pay-block h3{margin-bottom:12px}
.co-pay-block .pg-choice label{padding:12px 12px;font-size:var(--fs-sm)}
.co-pay-block .pg-choice small{font-size:var(--fs-xs);line-height:var(--lh-body)}
.co-pay-block .check span{font-size:var(--fs-xs);line-height:var(--lh-body)}
.co-pay{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px}
.co-pay span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);border-radius:6px;padding:4px 8px;color:var(--ink-soft);background:var(--surface)}
/* account */
.acct-one{max-width:520px;margin:0 auto;padding-top:calc(var(--sp) * .5)}
.acct-one .pg-card{padding:clamp(24px,3vw,32px)}
#kd-confirmed .ok-head{padding-top:calc(var(--sp) * .6)}
/* thank you */
/* legal: the head, tabs, text and help card run the full site width, left aligned with the breadcrumb (since 1.7.45) */
.pg-legal{max-width:none;margin:0;font-size:var(--fs-base);line-height:var(--lh-body)}
@media (max-width:479px){.pg-tabs{display:flex;gap:8px}.pg-tabs button{flex:1;white-space:nowrap;font-size:var(--fs-sm);padding-inline:8px}}
.pg-legal .pg-ph{white-space:normal;line-height:var(--lh-body)}
.pg-legal h2{font-size:var(--fs-h3);margin:32px 0 8px}
.pg-legal p+p{margin-top:12px}
.pg-legal .updated{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:24px}
.pg-tabs{display:flex;gap:8px;margin-top:16px}
.pg-tabs button{font:600 var(--fs-sm) var(--ft);border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:999px;min-height:38px;padding:0 16px;cursor:pointer}
.pg-tabs button[aria-pressed="true"]{border-color:var(--copper);background:rgba(var(--copper-rgb),.12);color:var(--copper-pressed)}
/* placeholder marker */
.pg-ph{display:inline-block;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border:1px dashed var(--rule-strong);border-radius:999px;padding:4px 8px;background:rgba(255,255,255,.6);white-space:nowrap;vertical-align:middle;margin-left:8px}
@media (max-width:980px){
  .co-grid{grid-template-columns:1fr}
  .co-side{position:static}
  .pg-photo{max-width:440px}
}
@media (max-width:639px){
  .pg-form .row{grid-template-columns:1fr}
  .cart-line{grid-template-columns:76px minmax(0,1fr)}
  .cart-line .th{width:76px;height:76px}
  .cart-line .right{grid-column:2;justify-items:start;grid-auto-flow:column;align-items:center;gap:16px}
}

.pg-card,.co-sec,.pg-photo{position:relative;isolation:isolate;border:5px solid transparent;border-radius:22px;color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 35%,rgba(var(--rule-rgb),.10) 60%,rgba(255,255,255,.34) 100%) border-box;
  -webkit-backdrop-filter:blur(3px) saturate(1.3);backdrop-filter:blur(3px) saturate(1.3);
  box-shadow:0 1px 3px rgba(42,33,24,.08),0 8px 18px -8px rgba(42,33,24,.16)}
.co-side .pg-card{background:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 35%,rgba(var(--rule-rgb),.10) 60%,rgba(255,255,255,.34) 100%) border-box}
/* the panel on the glass */
.pg-card::before,.co-sec::before,.pg-photo::before{content:"";position:absolute;inset:0;border-radius:17px;z-index:-1;pointer-events:none;
  background:#FFFFFF;box-shadow:0 0 0 1px var(--rule),0 0 3px rgba(0,0,0,.06)}
/* the shine on the glass */
.pg-card::after,.co-sec::after,.pg-photo::after{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:3;pointer-events:none;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.75),inset -1px -1px 1px 1px rgba(255,255,255,.6),inset 0 0 10px rgba(255,255,255,.35),inset -3px -4px 6px -3px rgba(42,33,24,.18)}
/* photos: the picture is the panel */
.pg-photo{display:grid;padding:0}
.pg-photo .im{display:block;min-height:0;border-radius:17px;background:#FFFFFF var(--src) center/cover no-repeat}

.cart-line .th,.co-item .th,.dr-item .th{border:0;background-color:#FFFFFF;box-shadow:0 0 0 1px var(--rule),0 2px 6px rgba(42,33,24,.10)}
.dr-ship{border-radius:10px;background:var(--copper-wash);color:var(--ink)}

/* ===== filters ===== */

:root{--af-line:var(--rule-strong);--af-hover:var(--cream-2);--af-on-sel:#FFFFFF;--af-tint:var(--copper-wash);--af-top:16px}

#kd-category .shop{grid-template-columns:272px minmax(0,1fr)}
.af-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the panel */
.af-panel{position:sticky;top:var(--af-top);max-height:calc(100vh - var(--af-top) - 16px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--card-r);box-shadow:var(--lift-1)}
.af-grip{display:none}
.af-head{display:flex;align-items:center;gap:8px;padding:16px 16px 12px;border-bottom:1px solid var(--rule)}
.af-head h2{font-family:var(--fh);font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin-right:auto}
.af-link{background:none;border:0;padding:4px 8px;border-radius:6px;font-family:var(--ft);font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer}
.af-link:hover{background:var(--af-hover)}
.af-link[disabled]{color:var(--af-line);background:none;cursor:default}
.af-close{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--ink);place-items:center;cursor:pointer}
.af-close svg{width:18px;height:18px}
.af-body{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--af-line) transparent}
/* desktop: the panel always stays in view and scrolls inside itself when it is long, so the page never jumps */
/* the form sits between the panel and its parts: it takes the panel's height so the body scrolls inside the panel */
#afForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.af-body{min-height:0}
@media (min-width:901px){.af-panel{overflow-anchor:none}}
/* desktop: the panel is as tall as its filters and never scrolls inside itself: every open group shows at its full height.
   When the filters fit on the screen, the panel stays in view while the shopper scrolls (filters.js adds .af-fits);
   when they are taller than the screen, the panel scrolls with the page. */
@media (min-width:901px){
  .af-panel{position:relative;top:auto;align-self:start;max-height:none;display:block}
  .af-panel #afForm{display:block;max-height:none}
  .af-panel .af-body{overflow:visible;max-height:none}
  .af-panel.af-fits{position:sticky;top:var(--af-top)}
}
.af-foot{display:none}

/* on sale switch */
.af-switch{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);cursor:pointer}
.af-switch .t{font-weight:600;font-size:var(--fs-base);color:var(--ink)}
.af-switch .t small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-soft);margin-top:1px}
.af-switch input{appearance:none;-webkit-appearance:none;margin:0 0 0 auto;width:42px;height:24px;border-radius:999px;background:var(--rule);position:relative;cursor:pointer;transition:background .18s;flex:0 0 auto}
.af-switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(42,33,24,.3);transition:transform .18s}
.af-switch input:checked{background:var(--ink)}
.af-switch input:checked::after{transform:translateX(18px)}

/* groups */
.af-g{border-bottom:1px solid var(--rule)}
.af-g:last-child{border-bottom:0}
.af-g[hidden]{display:none}
.af-g > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 16px;cursor:pointer;user-select:none}
.af-g > summary::-webkit-details-marker{display:none}
.af-g > summary:hover{background:var(--af-hover)}
.af-gt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.af-gs{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;text-align:right}
.af-gs.on{color:var(--ink);font-weight:600}
.af-chev{width:15px;height:15px;color:var(--ink-soft);transition:transform .2s;flex:0 0 auto}
.af-g[open] > summary .af-chev{transform:rotate(180deg)}
.af-in{padding:0 12px 16px}

/* checkbox rows */
.af-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:38px;padding:4px 8px;border-radius:8px;cursor:pointer;font-size:var(--fs-base);line-height:var(--lh-snug);color:var(--ink)}
.af-opt:hover{background:var(--af-hover)}
.af-n{font-family:var(--fm);font-size:var(--fs-xs);color:var(--ink-soft);font-variant-numeric:tabular-nums;font-style:normal}
.af-opt.zero{color:var(--af-line);cursor:default}
.af-opt.zero:hover{background:none}
.af-opt.zero .af-n{color:var(--af-line)}
.af-cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--af-line);border-radius:5px;background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:background .14s,border-color .14s}
.af-cb::after{content:"";width:9px;height:5px;border:2px solid var(--af-on-sel);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.af-cb:checked,.af-cb:indeterminate{background:var(--ink);border-color:var(--ink)}
.af-cb:checked::after{opacity:1}
.af-cb:indeterminate::after{opacity:1;width:8px;height:0;border-width:2px 0 0 0;transform:none}
.af-cb:disabled{border-color:var(--rule);cursor:default}

/* category tree */
.af-trow{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center}
.af-trow .af-opt{font-weight:600}
.af-exp{width:36px;height:36px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer}
.af-exp:hover{background:var(--af-hover);color:var(--ink)}
.af-exp svg{width:15px;height:15px;transition:transform .2s}
.af-exp[aria-expanded="true"] svg{transform:rotate(180deg)}
.af-subs{margin:4px 0 8px 16px;padding-left:8px;border-left:1.5px solid var(--rule)}
.af-subs .af-opt{font-size:var(--fs-sm)}
.af-subs .af-opt3{margin-left:18px}  /* third level: Collections > Alba and the rest */

/* age tiles */
.af-ages{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 4px 0}
.af-age{position:relative;display:flex;flex-direction:column;gap:1px;min-height:60px;padding:8px 24px 12px 12px;border:1.5px solid var(--rule);border-radius:10px;cursor:pointer;background:var(--surface);color:var(--ink);transition:border-color .14s,background .14s}
.af-age:hover{border-color:var(--copper)}
.af-age input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.af-age b{font-size:var(--fs-base);font-weight:700;line-height:var(--lh-snug);white-space:nowrap}
.af-age span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:var(--lh-snug)}
.af-age .af-n{position:absolute;top:9px;right:10px;font-size:var(--fs-xs)}
.af-age:has(input:checked){border-color:var(--ink);background:var(--af-tint)}
.af-age:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.af-age.zero{opacity:.45;cursor:default}
.af-age.zero input{cursor:default}

/* price */
.af-price{padding:4px 8px 0}
.af-hist{display:flex;align-items:flex-end;gap:4px;height:44px;padding:0 12px}
.af-hist i{flex:1;background:var(--rule);border-radius:2px 2px 0 0;min-height:2px;transition:background .15s,height .2s}
.af-hist i.in{background:var(--sage)}
.af-range{position:relative;height:32px;margin:0 4px;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none} /* 1 track, 2 handles, filters.js moves them */
.af-track{position:absolute;left:12px;right:12px;top:14px;height:4px;border-radius:4px;background:var(--rule)}
.af-fill{position:absolute;top:0;bottom:0;background:var(--ink);border-radius:4px}
.af-thumb{position:absolute;top:4px;left:calc(12px + (100% - 24px) * var(--p, 0));width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#FFFFFF;border:2px solid var(--ink);box-shadow:0 2px 6px rgba(42,33,24,.22);cursor:grab;touch-action:none;transition:box-shadow .14s,transform .14s}
.af-thumb::before{content:"";position:absolute;inset:-10px;border-radius:50%} /* a 44px target for fingers */
.af-thumb:hover{box-shadow:0 0 0 6px var(--af-tint),0 2px 6px rgba(42,33,24,.22)}
.af-thumb:focus{outline:none}
.af-thumb:focus-visible{box-shadow:0 0 0 4px var(--focus),0 2px 6px rgba(42,33,24,.22)}
.af-range.drag .af-thumb.on{cursor:grabbing;transform:scale(1.12);box-shadow:0 0 0 8px var(--af-tint),0 2px 8px rgba(42,33,24,.28)}
.af-range.drag{cursor:grabbing}
@media (prefers-reduced-motion: reduce){.af-thumb{transition:none}.af-range.drag .af-thumb.on{transform:none}}
.af-pin{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin-top:8px}
.af-pin label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.af-box{display:flex;align-items:center;gap:4px;height:40px;padding:0 8px;border:1.5px solid var(--af-line);border-radius:var(--btn-r);background:var(--surface);font-size:var(--fs-base);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.af-box:focus-within{border-color:var(--focus)}
.af-box input{width:100%;min-width:0;border:0;padding:0;background:none;font:600 var(--fs-base) var(--ft);color:var(--ink);font-variant-numeric:tabular-nums;outline:none}
.af-to{padding-bottom:8px;font-size:var(--fs-sm);color:var(--ink-soft)}
.af-presets{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.af-preset{border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;font:600 var(--fs-sm) var(--ft);white-space:nowrap;cursor:pointer}
.af-preset:hover{border-color:var(--copper)}
.af-preset[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--af-on-sel)}

/* finish swatches */
.af-fins{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.af-fin{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);position:relative;color:var(--ink)}
.af-fin:hover{background:var(--af-hover)}
.af-fin input{position:absolute;opacity:0;margin:0;inset:0;cursor:pointer}
.af-dot{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(42,33,24,.2);flex:0 0 auto;position:relative;transition:box-shadow .14s}
.af-dot.paint{background:conic-gradient(#D9876C,#F6C25A,#B5DCC6,#84BCCB,#A88AA6,#F08FA5,#D9876C)}  /* painted to order: the linen range colours from kd_finish_colours() */
.af-fin:has(input:checked) .af-dot{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
.af-fin:has(input:checked) .af-dot::after{content:"";position:absolute;left:50%;top:45%;width:5px;height:9px;border:solid var(--tick,#FFFFFF);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.af-dot.light{--tick:var(--ink)}
.af-fin:has(input:checked){font-weight:600}
.af-fin:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
.af-fin .af-n{margin-left:auto}
.af-fin.zero{color:var(--af-line);cursor:default}
.af-fin.zero .af-dot{opacity:.4}
.af-hint{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-soft);padding:8px 8px 0}

/* results column */
.af-results{min-width:0}
.af-rbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.af-count{font-size:var(--fs-base);color:var(--ink-soft);margin-right:auto}
.af-count b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.af-dsort{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-soft)}
.af-sel{-webkit-appearance:none;appearance:none;min-height:44px;padding:0 32px 0 12px;border-radius:var(--btn-r);border:1.5px solid var(--rule);font:600 var(--fs-base) var(--ft);color:var(--ink);cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23756C5D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px}
.af-sel:hover{border-color:var(--copper)}
/* products per row: a pair of icon buttons; product-card.css shows the pair that fits the screen */
.af-cols{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--rule);border-radius:var(--btn-r);background:var(--surface)} /* segmented control, tile icons */
.af-col{display:none;place-items:center;width:38px;height:38px;border:0;border-radius:calc(var(--btn-r) - 3px);background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .14s,color .14s}
.af-col svg{width:18px;height:18px}
.af-col:hover{color:var(--ink);background:var(--af-hover)}
.af-col[aria-pressed="true"]{background:var(--ink);color:var(--af-on-sel);cursor:default}
.af-col:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* type chips above the grid */
.af-scope{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 4px 0;margin-inline:-4px}
.af-scope::-webkit-scrollbar{display:none}
.af-scope:empty{display:none}
.af-sc{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 12px;border-radius:999px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:600 var(--fs-sm) var(--ft);white-space:nowrap;cursor:pointer;transition:background .14s,border-color .14s}
.af-sc:hover{border-color:var(--copper)}
.af-sc[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--af-on-sel)}
.af-sc:disabled{opacity:.45;cursor:default}
.af-sc:disabled:hover{border-color:var(--rule)}
.af-sc .af-n{font-size:var(--fs-xs);color:inherit;opacity:.75}
.af-sc.back{border-style:dashed;color:var(--ink-soft);padding-left:8px}
.af-sc.back svg{width:15px;height:15px}
.af-scope.top{display:none}

/* active filters */
.af-active{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:12px}
.af-active:empty{display:none}
.af-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--copper);
  background:color-mix(in srgb,var(--copper) 16%,var(--surface));color:var(--ink);font:500 var(--fs-sm) var(--ft);cursor:pointer;transition:background .14s}
.af-pill:hover{background:color-mix(in srgb,var(--copper) 30%,var(--surface))}
.af-pill svg{width:14px;height:14px;color:var(--ink)}
.af-pill small{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

#kd-category .sl-block{margin-top:24px}
.sl-card[hidden]{display:none!important}
.af-empty{grid-column:1/-1;text-align:center;padding:48px 16px;border:1.5px dashed var(--af-line);border-radius:var(--card-r);background:var(--surface)}
.af-empty[hidden]{display:none}
.af-empty h3{font-family:var(--fh);font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.af-empty p{margin:8px auto 16px;max-width:46ch;color:var(--ink-soft)}
.af-empty .af-active{justify-content:center;padding-top:0}

/* loading a filter result: skeleton cards in the grid while the new products load, the size of a real card */
.sl-block .sl-card.af-skel{cursor:default;pointer-events:none}
.sl-block .sl-card.af-skel:hover{transform:none}
.sl-block .af-skel .sl-img,.af-sk{background:linear-gradient(100deg,var(--cream-2) 30%,var(--paper) 50%,var(--cream-2) 70%) 0 0/300% 100%;animation:af-shimmer 1.3s linear infinite}
.sl-block .af-skel .sl-body{justify-content:flex-start}
.af-sk{display:block;flex:none;border-radius:calc(6*var(--u))}
.af-sk.l{width:52%;height:calc(12*var(--u));margin-top:calc(3*var(--u))}
.af-sk.t{width:90%;height:calc(16*var(--u));margin-top:calc(12*var(--u))}
.af-sk.t2{width:62%;height:calc(16*var(--u));margin-top:calc(8*var(--u))}
.af-sk.p{width:36%;height:calc(20*var(--u));margin:auto 0 calc(14*var(--u))}
.af-sk.b{width:100%;height:calc(51*var(--u));border-radius:999px}
@keyframes af-shimmer{from{background-position:100% 0}to{background-position:0 0}}
#afApply.is-busy{opacity:.7}
.af-switch.zero{opacity:.55;cursor:default}
.af-switch.zero input{cursor:default}
#afLoop.af-fresh .sl-card{animation:af-fade .32s cubic-bezier(.3,.8,.3,1) both}
@keyframes af-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* infinite scroll (filters.js): the page numbers hide while the next pages load on their own, and come back if a page fails */
#kd-category.af-inf .woocommerce-pagination{display:none}
.af-more{display:flex;justify-content:center;gap:8px;margin:28px 0 0;padding:8px 0}
.af-more-dot{width:10px;height:10px;border-radius:50%;background:var(--copper);opacity:.35;animation:af-dot 1s ease-in-out infinite}
.af-more-dot:nth-child(2){animation-delay:.15s}
.af-more-dot:nth-child(3){animation-delay:.3s}
@keyframes af-dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.af-more-dot{animation:none;opacity:.6}}
@media (prefers-reduced-motion:reduce){.sl-block .af-skel .sl-img,.af-sk{animation:none;background:var(--cream-2)}#afLoop.af-fresh .sl-card{animation:none}}

/* mobile toolbar */
.af-mbar{display:none}
.af-scrim{position:fixed;inset:0;background:rgba(42,33,24,.42);z-index:60;opacity:0;pointer-events:none;transition:opacity .24s}

@media (max-width:900px){
  #kd-category .shop{grid-template-columns:minmax(0,1fr);padding-top:0}
  .af-mbar{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;position:sticky;top:var(--af-bar-top,0px);z-index:30;padding:8px 0;margin-bottom:4px;
    background:color-mix(in srgb,var(--cream) 94%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--rule)}
  .af-mbar::before{content:"";position:absolute;inset:0 calc(var(--pad) * -1);z-index:-1;background:inherit;border-bottom:inherit}
  .af-mbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 12px;border-radius:var(--btn-r);border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:600 var(--fs-base) var(--ft);overflow:hidden;cursor:pointer}
  .af-mbtn:hover{border-color:var(--copper)}
  .af-mbtn svg{width:18px;height:18px;flex:0 0 auto}
  .af-badge{font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);min-width:21px;height:21px;padding:0 4px;border-radius:999px;background:var(--ink);color:var(--af-on-sel);display:inline-grid;place-items:center}
  .af-badge[hidden]{display:none}
  .af-mbtn select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:var(--fs-base)}
  .af-mbtn .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .af-mbar .af-cols{min-height:46px}
  .af-mbar .af-col{height:38px;width:40px}
  .af-dsort{display:none}
  .af-scope.top{display:flex}
  .af-rbar{display:none}
  .af-scope.top{padding-top:12px}
  #kd-category .shop{padding-bottom:calc(var(--sp) * 1.2)}

  .af-panel{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(400px,92vw);max-height:none;border:0;border-radius:0 18px 18px 0;
    transform:translateX(-104%);visibility:hidden;transition:transform .3s cubic-bezier(.22,.7,.3,1),visibility 0s .3s;box-shadow:0 20px 60px -20px rgba(42,33,24,.5)}
  .af-panel.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.22,.7,.3,1)}
  .af-panel.open ~ .af-scrim{opacity:1;pointer-events:auto}
  .af-head{padding:12px 16px 12px}
  .af-close{display:grid}
  .af-foot{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--surface)}
  .af-ghost{min-height:50px;padding:0 16px;border-radius:var(--btn-r);border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:600 var(--fs-base) var(--ft);cursor:pointer}
  .af-ghost[disabled]{color:var(--af-line);cursor:default}
  .af-cta{min-height:50px;border:0;border-radius:var(--btn-r);background:var(--ink);color:var(--af-on-sel);font:700 var(--fs-base) var(--ft);padding:0 16px;white-space:nowrap;cursor:pointer}
  .af-cta:hover{background:var(--ink-hover)}
  .af-cta:active{background:var(--ink-pressed)}
  .af-opt,.af-fin{min-height:44px}
  .af-trow{grid-template-columns:minmax(0,1fr) 44px}
  .af-exp{width:44px;height:44px}
}
@media (max-width:639px){
  .af-panel{top:auto;left:0;right:0;width:auto;height:min(88vh,760px);border-radius:20px 20px 0 0;transform:translateY(104%)}
  .af-panel.dragging{transition:none}
  .af-grip{display:flex;justify-content:center;padding:8px 0 4px;cursor:grab;touch-action:none}
  .af-grip span{width:40px;height:5px;border-radius:5px;background:var(--af-line)}
  .af-head{padding-top:4px;touch-action:none}
  .af-count{font-size:var(--fs-sm)}
}
@media (max-width:760px){.af-rbar{text-align:left}}
@media (max-width:479px){#afMsortLabel{display:none}label[for=afMsort]::after{content:"Sort"}}

/* ===== about ===== */

.ab .ab-top{margin-top:calc(var(--sp) * .3)}

.ab-top{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:clamp(4px,1.4vw,16px)}

.ab-top h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.ab-top h1 em{font-style:normal}

.ab-top p{margin-top:16px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft);max-width:var(--w-intro);text-wrap:balance}

.ab-scene{margin-top:clamp(32px,3.6vw,48px)}
.ab-figure{max-width:none;justify-self:stretch}
.ab-figure .life-shot .pg-photo{aspect-ratio:1400/748}
.ab-figure .life-crops{grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,760px)}
@media (max-width:639px){.ab-figure .life-shot .pg-photo{aspect-ratio:4/3}.ab-figure .life-crops{gap:8px;margin-top:-24px}}

.ab-use{margin-top:clamp(32px,4vw,48px);padding:0 clamp(24px,4vw,48px);text-align:center}
.ab-use::before{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--sage);margin:0 auto clamp(16px,2.4vw,32px)}

.ab-use p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft);max-width:var(--w-section);margin:0 auto;text-wrap:balance}
.ab-use q{display:block;margin-top:clamp(12px,1.4vw,16px);font-family:var(--fh);font-weight:700;
  font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.015em;margin-inline:auto}
.ab-use q::before,.ab-use q::after{color:var(--ink)}

.ab-cta{--art-w:min(220px,22%);position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(32px,4vw,48px);border-radius:22px;background:var(--cream-2);color:var(--ink);
  box-shadow:0 1px 3px rgba(42,33,24,.08),0 8px 18px -8px rgba(42,33,24,.16);
  padding:clamp(24px,3.4vw,48px) calc(var(--art-w) - 26px) clamp(24px,3.4vw,48px) clamp(24px,3.4vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px}
.ab-cta::before,.ab-cta::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-size:cover}
/* the wave, bottom left */
.ab-cta::before{left:0;bottom:0;height:100%;aspect-ratio:439/400;background-image:url(../img/newsletter-wave.webp);background-position:left bottom;
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
/* the mat and wooden car, right */
.ab-cta::after{right:0;top:0;height:100%;width:var(--art-w);background-image:url(../img/newsletter-art.webp);background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.ab-cta > div{position:relative;z-index:1}

.ab-cta h2{font-size:var(--fs-h2);color:var(--ink)}
.ab-cta p{margin-top:8px;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink);max-width:46ch}
.ab-cta .pg-actions{margin-top:0;flex:none;position:relative;z-index:1}

@media (max-width:980px){
  
  .ab-scene .pg-photo{max-width:none}
  .ab-cta{flex-direction:column;align-items:flex-start;--art-w:min(190px,26%)}
}
@media (max-width:639px){
  .ab-use q{max-width:none}
  .ab-cta p{max-width:none}
  .ab-cta .pg-actions .btn{flex:1 1 auto}
}
/* the help card stacks and centres up to 899 (phones and tablets upright); side by side from 900 */
@media (max-width:899px){
  .ab-cta{padding:32px 24px 128px;text-align:center;align-items:stretch}
  .ab-cta::after{right:50%;transform:translateX(50%);top:auto;bottom:0;height:116px;width:min(300px,86%);background-position:center bottom;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent,#000 34%),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
  .ab-cta::before{height:168px;
    -webkit-mask-image:linear-gradient(90deg,#000 66%,transparent),linear-gradient(180deg,transparent,#000 32%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 66%,transparent),linear-gradient(180deg,transparent,#000 32%);mask-composite:intersect}
  .ab-cta .eyebrow{justify-content:center}
  .ab-cta p{margin-inline:auto}
  .ab-cta .pg-actions{width:100%;justify-content:center}
  .ab-cta .pg-actions .btn{justify-content:center}
}

/* ===== delivery ===== */

.dl-page{padding-top:calc(var(--sp) * .45)}
.dl-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.dl-head .dl-lead{margin-top:16px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft);max-width:var(--w-intro);text-wrap:balance}
.dl-block{margin-top:clamp(32px,4vw,48px)}
.dl-block h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.dl-rows{margin-top:16px;padding:4px clamp(16px,2.6vw,32px)}
.dl-row{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.dl-row:last-child{border-bottom:0}
.dl-row b{font-family:var(--ft);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-snug)}
.dl-row p{max-width:var(--w-read);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft)}
.dl-row p+p{margin-top:8px}
.dl-foot{margin-top:16px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-soft)}
.dl-foot a{color:var(--ink);font-weight:600}
#kd-delivery .ab-cta{margin-top:clamp(48px,5vw,64px)}
@media (max-width:639px){
  .dl-rows{padding:4px 16px}
  .dl-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
}

/* ===== faq ===== */

.fq-page{padding-top:calc(var(--sp) * .45)}
.fq-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.fq-head h1 em{font-style:normal}
.fq-head p{max-width:var(--w-intro);margin-top:16px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft);text-wrap:balance}
.fq-block{margin-top:clamp(32px,4vw,48px)}
.fq-block h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.fq-card{margin-top:16px;padding:4px clamp(16px,2.6vw,32px)}
.fq-card details{border-bottom:1px solid var(--rule);background:transparent;border-radius:0;padding:0}
.fq-card details:last-child{border-bottom:0}
.fq-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 0;font-family:var(--ft);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink)}
.fq-card summary::-webkit-details-marker{display:none}
.fq-card summary:hover{color:var(--copper-pressed)}
.fq-card .arw{width:20px;height:20px;flex:none;color:var(--ink);transition:transform .22s cubic-bezier(.22,.7,.3,1),color .22s}
.fq-card details[open] .arw{transform:rotate(180deg);color:var(--copper-pressed)}
.fq-card details[open] summary{padding-bottom:12px}
.fq-card .a{padding:0 0 24px;max-width:var(--w-read);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft)}
.fq-card .a p+p{margin-top:12px}
.fq-card .a a{color:var(--ink);font-weight:600}
.fq-foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--fs-sm)}
.fq-foot a{color:var(--ink);font-weight:600}
.fq-foot span{color:var(--ink-soft)}
#kd-faq .ab-cta,#kd-contact .ab-cta,#kd-legal .ab-cta{margin-top:clamp(48px,5vw,64px)}
@media (max-width:639px){
  .fq-card{padding:0 16px}
  .fq-card summary{gap:16px;padding:16px 0;font-size:var(--fs-base)}
  .fq-card .arw{width:18px;height:18px}
  .fq-foot{justify-content:center;text-align:center}
}

/* ===== custom ===== */

.cu-page{padding-top:calc(var(--sp) * .45)}
.cu-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.cu-head .cu-lead{margin-top:16px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft);max-width:var(--w-intro);text-wrap:balance}
.cu-block{margin-top:clamp(32px,4vw,48px)}
.cu-block h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.cu-rows{margin-top:16px;padding:4px clamp(16px,2.6vw,32px)}
.cu-rows details{border-bottom:1px solid var(--rule)}
.cu-rows details:last-child{border-bottom:0}
.cu-rows summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 0;font-family:var(--ft);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink)}
.cu-rows summary::-webkit-details-marker{display:none}
.cu-rows summary:hover{color:var(--copper-pressed)}
.cu-rows summary .lbl{flex:1;display:flex;align-items:center;gap:12px}
.cu-rows .arw{width:20px;height:20px;flex:none;color:var(--ink);transition:transform .22s cubic-bezier(.22,.7,.3,1),color .22s}
.cu-rows details[open] .arw{transform:rotate(180deg);color:var(--copper-pressed)}
.cu-rows details[open] summary{padding-bottom:12px}
.cu-rows .a{padding:0 0 24px;max-width:var(--w-read);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft)}
.cu-rows .n{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:rgba(var(--sage-rgb),.24);
  font-family:var(--ft);font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.cu-tablist{display:flex;gap:clamp(16px,3vw,32px);flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.cu-tablist button{font-family:var(--fh);font-weight:600;font-size:var(--fs-h3-sans);letter-spacing:-.01em;
  background:transparent;border:0;border-bottom:2px solid transparent;padding:16px 0;margin-bottom:-1px;cursor:pointer;color:var(--ink-soft)}
.cu-tablist button[aria-selected="true"]{color:var(--ink);border-color:var(--copper)}
.cu-tablist button:hover{color:var(--ink)}
.cu-panel[hidden]{display:none}
.cu-form{margin-top:16px;padding:clamp(24px,2.6vw,32px)}
#kd-custom .ab-cta{margin-top:clamp(48px,5vw,64px)}
@media (max-width:639px){
  .cu-rows{padding:0 16px}
  .cu-tablist button{font-size:var(--fs-h3-sans);padding:12px 0}
  .cu-rows summary{gap:12px;padding:16px 0;font-size:var(--fs-base)}
  .cu-rows .arw{width:18px;height:18px}
}

/* ===== cart ===== */

.ct-head{max-width:60ch;padding-top:calc(var(--sp) * .35)}
.ct-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.ct-head p{margin-top:12px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft);text-wrap:balance;max-width:var(--w-intro)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:start;margin-top:clamp(24px,3.2vw,32px)}
.ct-items{padding:4px clamp(16px,2.6vw,32px) 24px;min-width:0}
.ct-items .pg-card+.pg-card,.ct-sum.pg-card+.pg-card{margin-top:0}
.ct-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 16px;border-bottom:1px solid var(--rule)}
.ct-panel-head .n{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ct-items .cart-line{gap:16px;padding:16px 0}
.ct-items .cart-line .th{box-shadow:0 0 0 1px var(--sand)}
.ct-items .cart-line .info h3{margin-bottom:4px}
.ct-items .cart-line .v{font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-body)}
.ct-items .cart-line .sep{color:var(--rule);margin:0 4px}
.ct-items .cart-line .lead{display:inline-block;white-space:nowrap;margin-top:0;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.ct-items .cart-line .lead svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.ct-items .cart-line .dr-rm{margin-top:8px;font-size:var(--fs-xs)}
.ct-items .cart-line .right{gap:12px;align-content:center}
.ct-items .cart-line .pr{white-space:nowrap}
.ct-items .cart-line:last-of-type{border-bottom:0}
.ct-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding-top:16px;border-top:1px solid var(--rule)}
.ct-foot .lbl{font-size:var(--fs-sm);color:var(--ink-soft)}
.ct-sum{position:sticky;top:24px;padding:24px}   /* 1.7.70: 24px from the top of the window, as no floating bar shows above it (was 120px) */
.ct-sum h2{font-size:var(--fs-h3);margin-bottom:12px}
.ct-sum .btn{margin-top:16px}
.ct-sum small{display:block;margin-top:12px;font-size:var(--fs-xs);color:var(--ink-soft);text-align:center}
.ct-block{margin-top:clamp(32px,4vw,48px)}
.ct-block h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.ct-rows{margin-top:16px;padding:4px clamp(16px,2.6vw,32px)}
.ct-row{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ct-row:last-child{border-bottom:0}
.ct-row b{font-family:var(--ft);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-snug)}
.ct-row p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft)}
.ct-more{display:block;margin-top:16px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-soft)}
.ct-more a{color:var(--ink);font-weight:600}
@media (max-width:980px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-sum{position:static}
}
@media (max-width:639px){
  .ct-items{padding:0 16px 16px}
  .ct-rows{padding:4px 16px}
  .ct-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .ct-items .cart-line .sep{display:none}
  .ct-items .cart-line .lead{display:block;margin-top:4px}
}

/* ===== thanks ===== */

.ok-head{max-width:760px;margin:0 auto;text-align:center;padding:calc(var(--sp) * .5) 0 0}
.ok-head .tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--copper-wash)}
.ok-head .tick svg{width:30px;height:30px;color:var(--ink)}
.ok-head .eyebrow{justify-content:center}
.ok-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.ok-head p{color:var(--ink-soft);margin-top:12px;font-size:var(--fs-h1-sub);line-height:var(--lh-body);text-wrap:balance;max-width:var(--w-intro);margin-left:auto;margin-right:auto}
.ok-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--gap);align-items:stretch;margin-top:clamp(32px,3.6vw,48px)}

.ok-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"crumb crumb" "head head" "actions actions" "next order";column-gap:var(--gap);align-items:start}
.ok-wrap>.crumb{grid-area:crumb;justify-self:start}.ok-wrap>.ok-head{grid-area:head;justify-self:center}.ok-wrap>.ok-actions{grid-area:actions}.ok-wrap>.ok-grid{grid-area:next;display:block;margin-top:clamp(32px,3.6vw,48px)}.ok-wrap>.ok-order-wrap{grid-area:order;position:sticky;top:24px;margin-top:clamp(32px,3.6vw,48px)}
@media (max-width:900px){.ok-wrap{display:block}.ok-wrap>.ok-order-wrap{position:static;margin-top:24px}.ok-wrap>.ok-grid{margin-top:32px}.ok-actions{margin-top:24px}}
.ok-grid>section{display:flex;flex-direction:column}
.ok-grid .ok-rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.ok-grid .ok-help{margin-top:16px}
.ok-grid h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.ok-rows{margin-top:16px;padding:4px clamp(16px,2.6vw,32px)}
.ok-row{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ok-row:last-child{border-bottom:0}
.ok-row b{display:flex;align-items:center;gap:12px;font-family:var(--ft);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-snug)}
.ok-row .n{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--copper-wash);
  font-family:var(--ft);font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.ok-row p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink-soft)}
.ok-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.ok-help{margin-top:24px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-soft);max-width:62ch}
.ok-help a{color:var(--ink);font-weight:600}
.ok-order .ref{display:block;font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink-soft);margin-top:4px}
.ok-order h3{font-family:var(--fh);font-weight:600;font-size:var(--fs-h3)}
.ok-order .co-item:first-of-type{border-top:1px solid var(--rule);margin-top:16px}
.ok-meta{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);display:grid;gap:12px}
.ok-meta div{display:grid;gap:4px}
.ok-meta .k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ok-meta .v{font-size:var(--fs-sm);line-height:var(--lh-body)}
@media (max-width:980px){
  .ok-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639px){
  .ok-rows{padding:4px 16px}
  .ok-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
  .ok-actions .btn{flex:1 1 auto;justify-content:center}
}
/* the type chips.
   Desktop: the filter panel lists every sub-type with its own dropdown, so the chip row is left out.
   Tablets and phones (filters in a drawer): the row runs to the screen edges and scrolls sideways, with room after
   the last chip and a fade on the right edge while more chips sit off screen. */
@media (min-width:901px){#afScope{display:none}}
@media (max-width:900px){
  .af-scope{margin-inline:calc(var(--pad) * -1);padding:12px 40px 2px var(--pad);scroll-padding-inline:var(--pad)}
  .af-scope.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
}

/* the same soft shadow under white text on every flat filled colour, so white text looks the same everywhere.
   The polished rose gold buttons and the sage buy pills set their own (none), and light text on the dark bars
   (top bar, footer) has no shadow. */
.btn.btn-forest,.btn.btn-line.btn-vc:hover,.kdh .cartbtn .pip:not(.is-empty),
.pager a[aria-current],.sl-ribbon,.sl-buy-wrap .vc:hover,.co-sec h2 i,
.af-preset[aria-pressed="true"],.af-col[aria-pressed="true"],.af-sc[aria-pressed="true"],.af-badge,.af-cta{text-shadow:var(--ink-shadow)}

/* link hover: links are charcoal at rest and turn deep copper on hover */
.tlink:hover,.pg-prose a:hover,.acct-content a:hover,.kd-blocks a:not(.wp-block-button__link):not(.wp-element-button):hover,
.fq-card .a a:hover,.fq-foot a:hover,.dl-foot a:hover,.ct-more a:hover,.ok-help a:hover,.sv-alt a:hover,
.ac-login-row a:hover,.af-link:hover,.kdh .dfoot a:hover,.fq-editor .wp-block-details a:hover,.rv-all a:hover,
.gt-faq-head a:hover,.ac-help a:hover,.ac-foot a:hover,.enq-alt a:hover,.pdp-wa a:hover,
.woocommerce-terms-and-conditions-link:hover,.woocommerce-terms-and-conditions-checkbox-text a:hover,.woocommerce-privacy-policy-link:hover,
.woocommerce-message .button:hover,.woocommerce-info .button:hover,.woocommerce-error .button:hover{color:var(--copper-pressed)}

/* button states */
.kdh .ntop.sale:hover{color:var(--copper-pressed)}
.kdh .mbtn.line:hover{border-color:var(--ink-soft)}
.drawer .search-close{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--cream);color:var(--ink);cursor:pointer;transition:background .16s}
.drawer .search-close svg{width:20px;height:20px}
.drawer .search-close:hover{background:var(--sand)}
.drawer .search-close:active{background:var(--rule)}
.drawer .search-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dr-qty button{transition:color .16s}
.dr-qty button:hover,.dr-rm:hover{color:var(--copper-pressed)}
/* links whose PHP template sets the rest colour inline (terms, log in, FAQ answers): the hover has to beat the inline style */
a[style*="--ink"]:hover{color:var(--copper-pressed)!important}

/* keyboard focus: 1 copper outline on light backgrounds, white on the dark footer */
.kf-main,.kf-strip{--focus:#FFFFFF}

/* pressed state for charcoal, outline and line buttons: a step darker than the hover */
.btn.btn-line.btn-vc:active{background:var(--ink-pressed);border-color:var(--ink-pressed);color:#FFFFFF}
.kdh .srch .kds-go:active,.kdh .kds-wa:active,.rv-ctrl button:active{background:var(--ink-pressed)}
.sl-buy-wrap .vc:active{background:var(--ink-pressed);color:#FFFFFF}

/* ---------- 1.7.49 checkout, one page: Contact and Delivery on the left, the order summary with Payment, terms and Place order under it on the right (1.7.65) ---------- */
body.woocommerce-checkout form.co-one{grid-template-columns:minmax(0,1fr) 400px}
body.woocommerce-checkout form.co-one>.co-main{grid-column:1;grid-row:1;min-width:0}
body.woocommerce-checkout form.co-one>.co-side{grid-column:2;grid-row:1;position:static}   /* 1.7.65: no longer sticks, so Place order under the summary is always reachable */
form.co-one .co-sec{padding:28px}
form.co-one .co-sec+.co-sec,form.co-one .woocommerce-billing-fields+.woocommerce-additional-fields{margin-top:16px}
form.co-one .co-sec h2{font-size:var(--fs-h3);margin:0 0 16px}
form.co-one .co-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
form.co-one .co-sec-head h2{margin:0}
form.co-one .co-contact .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
form.co-one .co-contact .woocommerce-account-fields{margin-top:12px}
/* address: names side by side, suburb, province and postal code in 3 */
form.co-one .co-address{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:20px}
form.co-one .co-address .form-row{grid-column:span 6}
form.co-one .co-address .form-row-first,form.co-one .co-address .form-row-last{grid-column:span 3}
form.co-one .co-address .form-row-third{grid-column:span 2}
form.co-one #billing_country_field{display:none!important}   /* 1.7.50: WooCommerce sets display:block inline on the country row */
form.co-one .co-notes{margin-top:12px;grid-template-columns:1fr}
/* collecting: the address fields and notes make way for the collection address */
form.co-one.is-collect .co-address .form-row:not(#billing_first_name_field):not(#billing_last_name_field),form.co-one.is-collect .co-notes{display:none}
form.co-one .co-collect{display:flex;gap:12px;margin-top:16px;padding:16px;border-radius:12px;background:var(--sage-wash,#EEF0EA);font-size:var(--fs-sm);line-height:var(--lh-body)}
form.co-one .co-collect[hidden]{display:none}
form.co-one .co-collect svg{flex:none;margin-top:2px;color:var(--sage-pressed,#535E4A)}
form.co-one .co-collect b{display:block;font-weight:600}
form.co-one .co-collect span{display:block}
form.co-one .co-collect .hrs{color:var(--ink-soft);margin-top:4px}
/* delivery options and payment methods: one joined list, the chosen row in sage wash */
form.co-one .co-options,form.co-one #payment .co-methods{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
form.co-one .co-option,form.co-one #payment .co-methods>li{display:block;border:0;border-radius:0;background:var(--surface)}
form.co-one .co-option+.co-option,form.co-one #payment .co-methods>li+li{border-top:1px solid var(--rule);margin:0}
form.co-one .co-option,form.co-one #payment .co-method{display:flex;align-items:center;gap:12px;padding:16px;min-height:64px;cursor:pointer;font-weight:500;font-size:var(--fs-base);line-height:var(--lh-body)}
form.co-one .co-option:has(input:checked),form.co-one #payment .co-methods>li:has(input:checked){background:var(--sage-wash,#EEF0EA)}
form.co-one .co-option input,form.co-one #payment .co-method input{flex:none;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--sage)}
form.co-one .co-option .nm{flex:1;min-width:0}
form.co-one .co-option b{display:block;font-weight:500}
form.co-one .co-option small{display:block;color:var(--ink-soft);font-size:var(--fs-sm)}
form.co-one .co-option .pr{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-soft);white-space:nowrap;font-weight:500}
form.co-one .co-option .pr.free{color:var(--sage-pressed,#535E4A);font-weight:600}
form.co-one .co-delivery .hint{font-size:var(--fs-sm);color:var(--ink-soft);margin:0}
#payment.co-pay-block{margin-top:16px;padding-top:0;border-top:0}
form.co-one #payment .co-method{border:0;border-radius:0;background:transparent;font-size:var(--fs-base)}
form.co-one #payment .co-method-name{flex:1;min-width:0;font-weight:500}
form.co-one #payment .co-method-icons{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
form.co-one #payment .co-method-icons img{height:24px;width:auto;max-width:none;margin:0;display:block}
form.co-one #payment .co-methods .payment_box{margin-top:-14px;padding:0 16px 16px 46px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}   /* 1.7.66: the note tucks under the method name, lined up with it */
form.co-one #payment .co-methods .payment_box p{margin:0}
form.co-one #payment .co-methods .payment_box p+p{margin-top:4px}
/* terms and the pay button under the payment card */
form.co-one #payment .place-order{margin-top:16px}
form.co-one #payment .woocommerce-terms-and-conditions-wrapper .check span{font-size:var(--fs-sm)}
form.co-one #payment .place-order .btn-block{margin-top:16px;width:100%;min-height:56px;font-size:var(--fs-base)}
/* order summary */
form.co-one .co-sumtoggle{display:none}
form.co-one .co-side .co-item{gap:14px;border-bottom:0;padding:8px 0}
form.co-one .co-item .th{position:relative;width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center}
form.co-one .co-item .th .co-qty{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;min-height:0;border:0;padding:0 6px;line-height:1;border-radius:999px;background:var(--ink-soft);color:#FFFFFF;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
form.co-one .co-item .nm{flex:1;min-width:0}
form.co-one .co-item .nm b{font-weight:500;font-size:var(--fs-sm)}
form.co-one .co-item .nm span{display:block}
form.co-one .co-item .pr{font-weight:500}
form.co-one .co-side .cart-sum{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
form.co-one .co-side .cart-sum .soft{color:var(--ink-soft)}
form.co-one .co-side .cart-sum .shipping span:last-child{color:var(--ink-soft)}
form.co-one .co-side .cart-sum .tot{display:flex;align-items:baseline}
form.co-one .co-side .cart-sum .tot b{text-align:right}
form.co-one .co-side .cart-sum .tot small,form.co-one .co-side .cart-sum .tot .includes_tax{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--ink-soft)}
@media (max-width:980px){
  /* 1.7.65: the summary bar on top, then the form, then Payment at the foot (.co-side opens up so its parts can be ordered) */
  body.woocommerce-checkout form.co-one{display:flex;flex-direction:column;gap:24px}
  body.woocommerce-checkout form.co-one>.co-side{display:contents}
  form.co-one .co-side>.co-sumtoggle{order:1}
  body.woocommerce-checkout form.co-one>.co-main{order:3}
  form.co-one .co-side>#payment.co-pay-block{order:4;margin-top:0}
  form.co-one .co-sumtoggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);font:inherit;color:var(--ink);cursor:pointer}
  form.co-one .co-sumtoggle-label{display:flex;align-items:center;gap:8px;color:var(--copper);font-weight:500}
  form.co-one .co-sumtoggle .hide,form.co-one .co-side.open .co-sumtoggle .show{display:none}
  form.co-one .co-side.open .co-sumtoggle .hide{display:inline}
  form.co-one .co-side.open .co-sumtoggle svg{transform:rotate(180deg)}
  form.co-one .co-sumtoggle-total small{display:none}
  form.co-one .co-side>.co-sumbody{display:none;order:2;margin-top:-12px}   /* 12px under the bar */
  form.co-one .co-side.open .co-sumbody{display:block}
}
@media (max-width:639px){
  form.co-one .co-sec{padding:20px 16px}
  form.co-one .co-address .form-row-first,form.co-one .co-address .form-row-last,form.co-one .co-address .form-row-third{grid-column:span 6}
  form.co-one #payment .co-methods .payment_box{padding-left:16px}
}
form.co-one #payment .co-methods>li .co-method:has(input:checked){border:0;box-shadow:none;background:transparent}
form.co-one #payment .co-methods>li+li{margin-top:0}
form.co-one #payment .co-method>span{flex:none}
form.co-one #payment .co-method>.co-method-name{flex:1}

/* 1.7.52 checkout: Google address suggestions under Street address (assets/js/address.js), styled like the header search dropdown.
   address.js wraps the field in .kd-addr-wrap and adds the .kd-addr-list listbox; the arrow keys mark an option with aria-selected. */
.kd-addr-wrap{position:relative;display:block}
.kd-addr-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;text-align:left;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:0 20px 44px rgba(42,33,24,.16);
  max-height:min(60vh,360px);overflow-y:auto;overscroll-behavior:contain}
.kd-addr-list[hidden]{display:none}
.kd-addr-list li[role="option"]{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;margin:0;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ink);line-height:var(--lh-snug)}
.kd-addr-list li[role="option"] b{font-size:var(--fs-base);font-weight:600}
.kd-addr-list li[role="option"] span{font-size:var(--fs-sm);color:var(--ink-soft)}
.kd-addr-list li[role="option"]:hover{background:var(--cream-2)}
.kd-addr-list li[aria-selected="true"]{background:var(--copper-wash);box-shadow:inset 3px 0 0 var(--ink)}
.kd-addr-by{margin:0;padding:6px 10px 2px;font-size:var(--fs-xs);color:var(--ink-soft);text-align:right}

/* ==========================================================================
 * 1.7.76: information and conclusion pages, from the "Kiddie Depot Information
 * and Conclusion Pages" canvas. 24 under the breadcrumb, 96 between sections and
 * 96 above the footer (64 on tablets, 48 on phones), intros the full site width,
 * the photo call to action panel, the Our story redesign, Order received and
 * Pay for your order.
 * ========================================================================== */
:root{--kd-sec:96px}
@media (max-width:899px){:root{--kd-sec:64px}}
@media (max-width:639px){:root{--kd-sec:48px}}

/* Intros run the full site width */
.page-head p,.ab-top p,.dl-head .dl-lead,.fq-head p,.cu-head .cu-lead,.ct-head,.ct-head p,.ok-head p{max-width:none}

/* Spacing */
main.pg:is(#kd-about,#kd-delivery,#kd-faq,#kd-custom,#kd-contact,#kd-schools,#kd-legal,#kd-thanks,#kd-pay,#kd-cart),.error404 main.pg#content{padding-bottom:var(--kd-sec)}
:is(#kd-about,#kd-delivery,#kd-faq,#kd-custom,#kd-contact,#kd-schools,#kd-legal,#kd-thanks,#kd-pay,#kd-cart,.error404 main.pg#content) .crumb{margin-bottom:0}
:is(#kd-delivery,#kd-faq,#kd-custom,#kd-contact,#kd-schools,#kd-legal,#kd-thanks,#kd-pay,#kd-cart,.error404 main.pg#content) :is(.page-head,.dl-head,.fq-head,.cu-head,.ct-head,.ok-head){margin-top:0;padding-top:24px;margin-bottom:0;padding-bottom:0}
:is(#kd-delivery,#kd-faq,#kd-custom) :is(.dl-page,.fq-page,.cu-page){padding-top:0;margin-top:0}
:is(#kd-delivery,#kd-faq,#kd-custom,#kd-contact,#kd-schools,#kd-legal) :is(.dl-block,.fq-block,.cu-block,.gt-grid,.gt-cards,.gt-faq,.sv-card,.sv-ideas-sec,.pg-legal){margin-top:var(--kd-sec);padding-top:0}
#kd-legal .pg-legal>:first-child{margin-top:0}
#kd-contact .gt-notice:not(:empty)~.gt-grid,#kd-schools .sv-notice:not(:empty)+.sv-card{margin-top:24px}
#kd-contact .gt-notice:not(:empty),#kd-schools .sv-notice:not(:empty){margin-top:var(--kd-sec)}
#kd-thanks .ok-wrap>.ok-order-wrap,#kd-thanks .ok-wrap>.ok-grid{margin-top:var(--kd-sec)}
#kd-cart .ct-head+.woocommerce{margin-top:var(--kd-sec)}

/* Call to action panel (kd_cta_band) */
.kd-cta{display:flex;align-items:stretch;width:100%;max-width:1200px;height:240px;margin:var(--kd-sec) auto 0;box-sizing:border-box;border-radius:24px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(42,33,24,.45)}
.kd-cta-sage{background:var(--sage)}
.kd-cta-cream{background:var(--cream-2);border:1px solid var(--rule)}
.kd-cta-photo{flex:0 0 42%;position:relative}
.kd-cta-photo-right .kd-cta-photo{order:2}
.kd-cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kd-cta-keep .kd-cta-photo img{object-position:30% 45%}
.kd-cta-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 48px}
.kd-cta h2{margin:0;font-size:clamp(32px,3.2vw,44px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.kd-cta-sage h2{color:#FFFFFF;text-shadow:var(--sage-shadow)}
.kd-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.kd-cta-sage .kd-cta-line{background:transparent;border:2px solid #FFFFFF;box-shadow:none;color:#FFFFFF;text-shadow:none}
.kd-cta-sage .kd-cta-line:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
@media (max-width:899px){.kd-cta{flex-direction:column;height:auto}.kd-cta-photo,.kd-cta-photo-right .kd-cta-photo{flex:0 0 200px;order:-1}.kd-cta-body{padding:28px}}
@media (max-width:639px){.kd-cta-actions{width:100%}.kd-cta-actions .btn{flex:1 1 100%;justify-content:center}}
/* .kd-cta-keep (the Furniture Revamps page, since 1.7.80): the photo stays beside the copy on tablets, with the buttons stacked
   at 1 width, and on phones the photo fills the panel behind a frosted card */
@media (max-width:899px){
  .kd-cta.kd-cta-keep{flex-direction:row;height:auto;min-height:240px}
  .kd-cta-keep .kd-cta-photo,.kd-cta-keep.kd-cta-photo-right .kd-cta-photo{flex:0 0 42%;order:2}
  .kd-cta-keep.kd-cta-photo-left .kd-cta-photo{order:0}
  .kd-cta-keep .kd-cta-actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:100%;max-width:280px}
  .kd-cta-keep .kd-cta-actions .btn{justify-content:center}
}
@media (max-width:639px){
  .kd-cta.kd-cta-keep{position:relative;isolation:isolate;min-height:440px;align-items:flex-end;padding:16px}
  .kd-cta-keep .kd-cta-photo,.kd-cta-keep.kd-cta-photo-right .kd-cta-photo,.kd-cta-keep.kd-cta-photo-left .kd-cta-photo{position:absolute;inset:0;z-index:-1}
  .kd-cta-keep .kd-cta-body{flex:1 1 auto;padding:18px 18px 20px;border-radius:14px;
    background:rgba(247,244,238,.7);border:1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 8px 24px rgba(var(--ink-rgb),.14)}
  .kd-cta-keep .kd-cta-actions{max-width:none}
}

/* Our story */
#kd-about .os-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center;padding-top:24px}
.os-hero-copy{display:flex;flex-direction:column;gap:20px}
.os-hero-copy h1{margin:0;font-size:var(--fs-h1);line-height:var(--lh-tight)}
.os-hero-copy p{margin:0;font-size:var(--fs-h1-sub);line-height:var(--lh-body);color:var(--ink-soft)}
.os-hero-copy .pg-actions{margin-top:0}
.os-quote{margin:4px 0;display:flex;align-items:flex-start;gap:14px}
.os-quote-mark{flex:none;font-size:64px;line-height:.8;font-weight:700;color:var(--copper)}
.os-quote blockquote{margin:0;padding-top:6px;font-size:clamp(22px,2vw,28px);font-style:italic;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.os-hero-photo{aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative}
.os-hero-photo img,.os-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-know{margin-top:var(--kd-sec)}
.os-know h2{margin:0 0 32px;text-align:center}
.os-know-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.os-know-cards .os-know-card{height:100%;box-sizing:border-box;margin:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.os-know-ic{width:40px;height:40px;margin-bottom:4px;border-radius:50%;background:var(--sage-wash);color:var(--sage-pressed);display:grid;place-items:center}
.os-know-ic svg{width:20px;height:20px}
.os-know-card h3{margin:0}
.os-know-card a{color:var(--copper);font-weight:600}
.os-know-card a:hover{color:var(--copper-pressed)}
.os-photos{margin-top:var(--kd-sec);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.os-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;position:relative}
.os-more{margin:var(--kd-sec) auto 0;max-width:62ch}
#kd-about section.rv-band{padding:0;margin-top:var(--kd-sec)}
@media (max-width:899px){
  #kd-about .os-hero{grid-template-columns:1fr;gap:32px}
  .os-hero-copy{align-items:center;text-align:center}
  .os-hero-copy .pg-actions{justify-content:center}
  .os-quote{justify-content:center}
  .os-know-cards{grid-template-columns:1fr}
  .os-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Order received */
#kd-thanks .ok-wrap{align-items:stretch}
#kd-thanks .ok-wrap>.ok-order-wrap{position:static;display:flex}
#kd-thanks .ok-order{flex:1 1 auto;margin:0;display:flex;flex-direction:column}
#kd-thanks .ok-order .ok-meta{margin-bottom:16px}
#kd-thanks .ok-rows{margin-top:0;padding-top:24px}
#kd-thanks .ok-rows h3,.kd-eft-card h3{margin:0 0 4px}
.kd-card-foot{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.kd-card-foot a{white-space:nowrap}
#kd-thanks .kd-eft-card{margin-top:24px;padding:24px 28px}
.kd-eft-lead{margin:0 0 16px;color:var(--ink-soft)}
.kd-eft-rows{display:grid;gap:10px;padding:16px 20px;border-radius:12px;background:var(--cream)}
.kd-eft-rows div{display:flex;justify-content:space-between;gap:16px}
.kd-eft-rows span{color:var(--ink-soft)}
.kd-eft-rows b{text-align:right}
.kd-eft-foot{margin:16px 0 0;color:var(--ink-soft)}

/* Pay for your order */
#kd-pay .kd-pay-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,3vw,48px);align-items:stretch;margin-top:var(--kd-sec)}
#kd-pay .kd-pay-main,#kd-pay .kd-pay-side{display:flex;min-width:0}
#kd-pay .kd-pay-card,#kd-pay .kd-pay-order{flex:1 1 auto;margin:0;padding:26px 28px;display:flex;flex-direction:column}
#kd-pay .kd-pay-card h3{margin:0 0 14px}
#kd-pay #payment.co-pay-block{margin-top:0;padding-top:0;border-top:0}
#kd-pay .woocommerce-terms-and-conditions-wrapper{margin-top:24px}
#kd-pay #place_order{margin-top:24px;width:100%}
#kd-pay .payment_box .kd-eft{margin-top:12px}
#kd-pay .kd-pay-order .co-item{margin-top:12px}
#kd-pay .kd-pay-order .ok-meta{margin:16px 0}
@media (max-width:899px){#kd-pay .kd-pay-grid{grid-template-columns:1fr}#kd-pay .kd-pay-side{order:-1}}

/* cart error note (since 1.7.90): replaces the browser alert when a cart change does not save (main.js) */
.kd-toast{position:fixed;left:50%;bottom:24px;z-index:95;transform:translateX(-50%);max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;background:var(--ink);color:#FFFFFF;
  font:600 var(--fs-sm)/var(--lh-body) var(--ft);text-align:center;box-shadow:0 8px 24px -8px rgba(42,33,24,.45)}
.kd-toast[hidden]{display:none}

/* phone menu tiles (since 1.7.92): My account and Wishlist side by side at the top of the panel (inc/menus.php) */
.kdh .mtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:4px 0 8px}
.kdh .mtile{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;border-radius:10px;text-decoration:none;
  font:600 var(--fs-base)/1.2 var(--ft);color:var(--ink);box-shadow:var(--lift-1);transition:border-color .16s,background .16s}
.kdh .mtile.mt-acct{background:var(--sage-wash);border:1px solid rgba(var(--sage-rgb),.28)}
.kdh .mtile.mt-wish{background:var(--copper-wash);border:1px solid rgba(var(--copper-rgb),.28)}
.kdh .mtile:hover{border-color:var(--ink-soft)}
.kdh .mtile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.kdh .mt-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#FFFFFF}
.kdh .mt-acct .mt-ic svg{color:var(--sage-pressed)}
.kdh .mt-wish .mt-ic svg{width:17px;height:17px;fill:var(--copper);stroke:var(--copper);stroke-width:1.8;stroke-linejoin:round}
.kdh .mt-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdh .kd-wish-n[hidden]{display:none}

/* wishlist page (since 1.7.92, page-wishlist.php): head with the count, the card grid (4 across on desktop,
   3 on tablets, 2 on phones, from product-card.css), the empty state and the browser note */
main.pg#kd-wishlist{padding-bottom:var(--kd-sec)}
#kd-wishlist .crumb{margin-bottom:0}
.wl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:24px 0 0;margin-bottom:32px}
.wl-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.wl-count{margin-top:12px;font-size:var(--fs-base);color:var(--ink-soft)}
.wl-head-act{flex:none}
.wl-page.is-empty .wl-head-act{display:none}
.wl-grid[hidden]{display:none}
.wl-page[aria-busy="true"] .wl-grid{min-height:240px}
#kd-wishlist .sl-card{transition:opacity .26s ease,transform .26s ease}
#kd-wishlist .sl-card.wl-out{opacity:0;transform:scale(.96)}
.wl-empty{display:grid;justify-items:center;gap:12px;max-width:520px;margin:16px auto 0;padding:48px 24px;text-align:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:16px}
.wl-empty[hidden]{display:none}
.wl-empty-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--copper-wash)}
.wl-empty-ic svg{width:28px;height:28px;fill:var(--copper);stroke:var(--copper);stroke-width:1.8;stroke-linejoin:round}
.wl-empty h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.wl-empty p{color:var(--ink-soft);max-width:400px}
.wl-empty .btn{margin-top:8px}
.wl-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:32px;font-size:var(--fs-sm);color:var(--ink-soft);text-align:center}
.wl-note svg{flex:none}
@media (max-width:639px){
  .wl-head{flex-direction:column;align-items:stretch;gap:16px;padding-top:16px;margin-bottom:24px}
  .wl-head-act .btn{width:100%}
  .wl-empty{padding:32px 16px}
  .wl-note{justify-content:flex-start;text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){#kd-wishlist .sl-card{transition:none}}