/* Self-hosted so the critical path carries no third-party origin: the Google Fonts
   stylesheet was render-blocking and pulled in two more connections
   (fonts.googleapis.com, then fonts.gstatic.com) before any text could paint.
   Manrope and Playfair Display are both SIL Open Font License 1.1.
   Latin + Latin-Ext only; the site has no other scripts. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


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

:root{
  /* a cool near-white, to sit with the black mark rather than warm it */
  --bg:#F4F4F5;
  --card:#FFFFFF;
  --tint:#ECECEE;
  --hair:#DCDCDE;
  --hair-soft:#E8E8EA;

  --ink:#0B0B0D;      /* headings, product names, and the accent - the logo is black */
  --ink2:#55555C;     /* body + all secondary text: 7.2:1 on white */
  --ink3:#66666D;     /* the lightest text used anywhere: clears 4.5:1 on both grounds */

  /* ELKY green, sampled off the signage photo (#576E4E) with the saturation the camera
     washed out put back, and darkened until white type on it clears AA comfortably.
     Change these two and every button, chip, badge and focus ring follows. */
  --acc:#47683B;      /* white on this is 6.3:1 */
  --acc-d:#37522E;    /* hover: unlike black, green can go darker */
  --shopee:#EE4D2D;   /* used only as a recognition cue, never as a large field */

  --nav-h:52px;
  --r:18px;
  --r-sm:12px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}

.wrap{width:min(1180px,100% - 44px);margin-inline:auto}
@media(max-width:600px){.wrap{width:min(1180px,100% - 32px)}}
.narrow{max-width:760px;margin-inline:auto}
.center{text-align:center}
.num{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-weight:800}
.t-hero{font-size:clamp(38px,5.6vw,60px)}
.t-sec{font-size:clamp(27px,3.4vw,40px)}
.lead{font-size:clamp(17px,1.7vw,21px);line-height:1.45;color:var(--ink2);font-weight:500;letter-spacing:-.015em}
/* wide-tracked uppercase, echoing the spacing in the ELKY wordmark */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}

/* ─────────── NAV ─────────── */
.nav{position:sticky;top:0;z-index:70;height:var(--nav-h);
  background:rgba(249,249,250,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair-soft)}
.nav-in{display:flex;align-items:center;gap:8px;height:var(--nav-h)}
.mark{display:block;height:27px;width:auto;flex-shrink:0}
@media(max-width:400px){.mark{height:23px}}
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{font-size:13px;font-weight:600;color:var(--ink2);padding:7px 11px;border-radius:8px;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:rgba(0,0,0,.045)}
@media(max-width:900px){.nav-links{display:none}}
.nav-shop{margin-left:auto;font-size:13px;font-weight:700;color:#fff;background:var(--acc);
  display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:99px;transition:background .15s;white-space:nowrap}
.nav-shop:hover{background:var(--acc-d)}
.nav-shop svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}

/* ─────────── HERO ───────────
   Full-bleed photograph with the copy over it. Held to ~56vh rather than a full screen:
   the category strip stays visible underneath, so the page still opens onto the goods.
   The scrim is heavy because it has to be - the photo is a bright white kitchen, and
   white type over it is nowhere near 4.5:1 unadorned. */
.hero{position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;
  min-height:clamp(360px,56vh,520px);padding:clamp(48px,6.5vw,78px) 0;background:#0B0B0D;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.56) 0%,rgba(8,8,10,.64) 48%,rgba(8,8,10,.76) 100%)}
.hero-copy{position:relative;max-width:940px;margin-inline:auto;color:#fff}
/* hairlines either side of the eyebrow */
/* .92 rather than .84: at 12px this is small text, so it needs 4.5:1 against the
   brightest pixel of the photo behind it, and .84 measured 4.51 - no headroom */
.hero .eyebrow{color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,16px);margin-bottom:clamp(16px,2.4vw,24px)}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";height:1px;flex:0 0 clamp(22px,5vw,56px);
  background:rgba(255,255,255,.5)}
/* on a phone the full eyebrow plus its two rules will not fit on one line, and wrapping
   leaves the rules stranded on the first line with a word orphaned under them. Tighten
   the tracking and drop the rules instead. */
/* Too long for one line on a phone, so it has to break somewhere. Two things to get
   right: the eyebrow is a flex row (for the hairlines), and any inner element becomes a
   second flex item that sits beside the text instead of wrapping with it - so drop back
   to a normal text block here, where the hairlines are hidden anyway. Then keep the
   descriptor whole so the break lands at the separator, not mid-hyphen through
   "space-saving". */
@media(max-width:600px){
  .hero .eyebrow{display:block;font-size:11px;letter-spacing:.14em}
  .hero .eyebrow::before,.hero .eyebrow::after{display:none}
  /* the descriptor is ~200px, so it fits any phone column without an escape hatch */
  .hero .eyebrow .nb{white-space:nowrap}
}
/* one line now, so it can take more size. Italic because that is the line the roman
   "The ELKY range." was setting up, and it reads as the statement rather than a label. */
.hero h1{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:400;
  font-style:italic;font-size:clamp(34px,5.9vw,70px);line-height:1.06;letter-spacing:-.005em;color:#fff}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3.2vw,36px)}
.btn-hero{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;
  border-radius:2px;transition:background .16s,border-color .16s,color .16s}
.btn-hero svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.btn-hero.solid{background:#fff;color:var(--ink)}
.btn-hero.solid:hover{background:rgba(255,255,255,.85)}
.btn-hero.ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-hero.ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:480px){.btn-hero{flex:1 1 100%;justify-content:center}}

/* ─────────── CATEGORY TILES ─────────── */
.sec{padding:clamp(30px,4vw,48px) 0 clamp(20px,2.6vw,30px)}
.sec-hd{margin-bottom:16px;display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.sec-hd h2{font-size:clamp(20px,2.2vw,26px)}

/* six across and image-led, but short: this is a shortcut into the grid below, not a
   feature panel, so it does not get a screen of its own */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* on a phone the six become one swipeable row rather than three stacked rows - that is
   ~400px less between the hero and the first product */
@media(max-width:700px){
  .tiles{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:-16px;padding:2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tiles::-webkit-scrollbar{display:none}
  .tile{flex:0 0 130px;scroll-snap-align:start}
}
.tile{background:var(--card);border-radius:var(--r-sm);padding:14px 10px 13px;text-align:center;
  display:flex;flex-direction:column;align-items:center;transition:transform .2s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,11,13,.11)}
.tile-img{position:relative;width:100%;aspect-ratio:4/3;margin-bottom:9px}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.tile h3{font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tile span{font-size:12.5px;font-weight:600;color:var(--ink3);margin-top:3px}
.tile[aria-selected="true"]{outline:1.5px solid var(--acc);outline-offset:-1.5px}

/* ─────────── FILTER BAR ─────────── */
/* the anchor sits above the sticky strip, so jumping to it has to clear both the nav
   and the strip or the toolbar lands underneath them */
#catalogue,#about{scroll-margin-top:var(--nav-h)}
.bar{position:sticky;top:var(--nav-h);z-index:60;background:rgba(249,249,250,.9);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair-soft);padding:9px 0}
/* one line, always - it scrolls sideways on narrow screens rather than growing taller */
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
@media(max-width:820px){.chips{justify-content:flex-start;margin-inline:-16px;padding-inline:16px}}
.chip{font-size:14px;font-weight:600;color:var(--ink2);padding:8px 15px;border-radius:99px;
  background:transparent;transition:background .15s,color .15s;letter-spacing:-.01em;white-space:nowrap}
.chip:hover{background:rgba(0,0,0,.055);color:var(--ink)}
.chip[aria-selected="true"]{background:var(--acc);color:#fff}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}
.find{position:relative;flex:0 1 250px;min-width:180px}
.find svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink3);stroke-width:2;fill:none;pointer-events:none}
.find input{width:100%;padding:9px 14px 9px 37px;border:1px solid var(--hair);border-radius:99px;
  background:var(--card);font-size:15px;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
.find input::placeholder{color:var(--ink3)}
.find input:focus{border-color:var(--ink3);box-shadow:0 0 0 4px rgba(11,11,13,.07)}
.pick{padding:9px 34px 9px 15px;border:1px solid var(--hair);border-radius:99px;background:var(--card);
  font-size:15px;font-weight:600;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23767679' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
.pick.hide{display:none}
/* the sub-filter reads as "on" when it is doing something */
.pick.active{background-color:var(--acc);border-color:var(--acc);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23ffffff' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ─────────── PRODUCT GRID ─────────── */
.result{font-size:15px;font-weight:600;color:var(--ink2);margin-left:auto}
/* on a phone: search on its own line, the two menus sharing the next one */
@media(max-width:700px){
  .result{margin-left:0;width:100%}
  .find{flex:1 1 100%}
  .pick{flex:1 1 calc(50% - 5px);min-width:0}
}
/* denser than the old 238px track: six across at 1180px instead of four, so a page of
   36 products is six rows rather than nine */
/* the grid is the last thing before the footer now, so the section carries the gap -
   put on the section rather than the pager, which is hidden on a single-page result */
.catalogue{padding-bottom:clamp(34px,4.5vw,60px)}
.grid{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;align-items:stretch}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.item{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);
  padding:18px 15px;text-align:center;transition:transform .22s ease,box-shadow .22s ease}
.item:hover{transform:translateY(-5px);box-shadow:0 12px 34px rgba(11,11,13,.12)}
/* A fixed 4:5 portrait window, the same on every card whatever shape the photo is.
   The image is taken out of flow and told to fill the window with object-fit:contain,
   so it scales down until it fits and never crops. Absolute rather than a flex child
   with max-height:88%: a percentage height against a box sized by aspect-ratio does not
   reliably resolve, and a tall photo would then render at its natural height and stretch
   its own card - which is exactly what these were doing. */
.item-img{position:relative;aspect-ratio:4/5;margin-bottom:14px;flex:0 0 auto}
.item-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%}
.flag{position:absolute;top:0;left:0;font-size:12px;font-weight:700;color:var(--ink2);
  background:var(--tint);padding:4px 10px;border-radius:99px;letter-spacing:-.005em}
.flag.sizes{left:auto;right:0}
.flag.deal{background:var(--acc);color:#fff}

.kicker{font-size:12.5px;font-weight:700;color:var(--ink3);letter-spacing:.01em;margin-bottom:6px}
.name{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.foot{margin-top:auto;padding-top:16px}
.cost{font-size:16px;font-weight:600;color:var(--ink2);letter-spacing:-.015em}
.cost b{font-weight:700;color:var(--ink)}
/* both checkout routes sit on the card. flex-basis 84px with wrap means they sit side by
   side on a desktop card and stack on a phone one, without a second media query */
.buys{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative;z-index:2}
.buy{flex:1 1 84px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:var(--acc);color:#fff;font-size:13.5px;font-weight:700;padding:9px 12px;border-radius:99px;
  transition:background .15s,border-color .15s;letter-spacing:-.01em;white-space:nowrap}
.item:hover .buy{background:var(--acc-d)}
.buy svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.buy.alt{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.item:hover .buy.alt{background:transparent;border-color:var(--acc)}
/* the installation call-out: green so it reads as an offer rather than fine print */
.install{font-size:12.5px;font-weight:700;color:var(--acc);margin-top:6px;letter-spacing:-.005em}
.install::before{content:"+ "}
.install-lg{font-size:14px;font-weight:600;line-height:1.45;margin:16px 0 0}
.install-lg::before{content:""}
.pv-none{font-size:14px;font-weight:600;color:var(--ink3);margin-top:20px}
.cover{position:absolute;inset:0;z-index:1;border-radius:var(--r)}

/* Numbered pages rather than "load more": the page stops growing, and you can jump to
   the end instead of scrolling to it. */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:30px 0 4px;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;padding:0 12px;border-radius:99px;font-size:15px;font-weight:700;
  color:var(--ink2);font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.pager button:hover:not(:disabled){background:var(--tint);color:var(--ink)}
.pager button[aria-current="true"]{background:var(--acc);color:#fff}
.pager button:disabled{color:var(--hair);cursor:default}
.pager .gap{color:var(--ink3);padding:0 2px;font-weight:600}
.pager[hidden]{display:none}

/* appears once you are past the first screen; keeps the trip back short */
.totop{position:fixed;right:20px;bottom:20px;z-index:65;width:42px;height:42px;border-radius:99px;
  background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(11,11,13,.28);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none}
@media(max-width:600px){.totop{right:14px;bottom:14px}}

.none{grid-column:1/-1;text-align:center;padding:72px 20px}
.none b{display:block;font-size:22px;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.none span{color:var(--ink2);font-weight:500}

/* ─────────── ABOUT (about page only) ─────────── */
.about{background:var(--card);padding:clamp(56px,7.5vw,96px) 0}
.about-top{text-align:center;margin-bottom:clamp(38px,5vw,56px)}
/* the ELKY mark is a wide wordmark (4.1:1), so it is set by height and stays modest */
.about-mark{height:clamp(44px,5.5vw,66px);width:auto;margin:0 auto 26px}
.about-top .lead{max-width:56ch;margin-inline:auto}
.about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  border-top:1px solid var(--hair-soft);padding-top:clamp(34px,4vw,46px)}
@media(max-width:820px){.about-cols{grid-template-columns:1fr;gap:28px}}
.about-cols h4{font-size:18px;font-weight:700;margin-bottom:9px}
.about-cols p{font-size:16px;color:var(--ink2);font-weight:500;line-height:1.55}
/* ─────────── DISTRIBUTORS ───────────
   One card per place the range can be bought. Adding another Shopee store is a copy of
   one <a class="dist"> block in the about section of _data/page.html. */
.dists{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  margin-top:clamp(34px,4vw,46px)}
.dist{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--hair-soft);
  border-radius:var(--r);padding:22px 22px 20px;transition:border-color .18s,transform .18s,box-shadow .18s}
.dist:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,11,13,.1)}
.dist-k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.dist h4{font-size:19px;font-weight:800;margin-bottom:3px}
.dist-url{font-size:13.5px;font-weight:600;color:var(--ink3);margin-bottom:10px;overflow-wrap:anywhere}
.dist p{font-size:15px;color:var(--ink2);font-weight:500;line-height:1.5}
.dist-go{margin-top:14px;font-size:14.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.dist-go::after{content:"›";font-size:17px;line-height:1;transition:transform .18s}
.dist:hover .dist-go::after{transform:translateX(3px)}


/* ─────────── FOOTER ─────────── */
.foot-w{border-top:1px solid var(--hair-soft);padding:44px 0 34px;font-size:14px;color:var(--ink2)}
.foot-mark{height:30px;margin-bottom:30px}
.foot-g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:760px){.foot-g{grid-template-columns:repeat(2,1fr);gap:26px}}
.foot-w h5{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.foot-w ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-w li{font-weight:500;line-height:1.4}
.foot-w a{transition:color .15s}
.foot-w a:hover{color:var(--ink)}
.fine{margin-top:34px;padding-top:20px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink2);font-weight:500}

/* ─────────── PRODUCT PANEL ─────────── */
dialog{border:none;padding:0;background:var(--card);color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:rgba(11,11,13,.45);backdrop-filter:blur(3px)}
.sheet{width:min(880px,calc(100vw - 32px));max-height:min(88vh,900px);border-radius:22px;
  margin:auto;overflow:auto;overscroll-behavior:contain}

.dlg-x{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border-radius:99px;
  background:var(--tint);color:var(--ink2);font-size:19px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:.15s}
.dlg-x:hover{background:var(--hair);color:var(--ink)}

.pv{position:relative;padding:30px}
@media(max-width:640px){.pv{padding:22px 18px}}
.pv-top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
@media(max-width:700px){.pv-top{grid-template-columns:1fr;gap:22px}}
.pv-img{position:relative;background:var(--bg);border-radius:16px;aspect-ratio:1}
.pv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px}
.pv-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pv-thumb{width:56px;height:56px;border-radius:10px;background:var(--bg);padding:5px;
  border:1.5px solid transparent;transition:border-color .15s}
.pv-thumb img{width:100%;height:100%;object-fit:contain}
.pv-thumb[aria-current="true"]{border-color:var(--acc)}
.pv-kick{font-size:12.5px;font-weight:700;color:var(--ink3);margin-bottom:7px}
.pv h3{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.14;margin-bottom:6px;overflow-wrap:anywhere}
.pv-code{font-size:13.5px;font-weight:600;color:var(--ink3);overflow-wrap:anywhere}
.pv-price{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:18px 0 4px;font-variant-numeric:tabular-nums}
.pv-price small{font-size:14px;font-weight:600;color:var(--ink2);letter-spacing:-.01em}

/* two checkout routes, equal weight - one filled, one outlined, same size */
.pv-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.pv-acts a{flex:1 1 150px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:700;padding:14px 20px;border-radius:99px;text-align:center;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.btn-shopee{background:var(--acc);color:#fff}
.btn-shopee:hover{background:var(--acc-d)}
.pv-acts svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.pv-lbl{font-size:12.5px;font-weight:700;color:var(--ink3);margin:18px 0 -6px;width:100%}
.pv-note{font-size:13px;color:var(--ink3);font-weight:500;margin-top:13px;line-height:1.45}

.pv-spec{margin-top:30px;padding-top:26px;border-top:1px solid var(--hair-soft)}
.pv-spec h4:first-child{margin-top:0}
.pv-spec-t{font-size:12.5px;font-weight:700;color:var(--ink3);margin-bottom:14px}
.pv-body{font-size:15.5px;color:var(--ink2);line-height:1.6;font-weight:500}
.pv-body h4{font-size:17px;font-weight:700;color:var(--ink);margin:22px 0 8px;letter-spacing:-.02em}
.pv-body p{margin:0 0 10px}
.pv-body ul,.pv-body ol{margin:0 0 12px;padding-left:20px}
.pv-body li{margin-bottom:5px}
.pv-body strong{color:var(--ink);font-weight:700}
.pv-body a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pv-body img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.pv-body table{border-collapse:collapse;width:100%;font-size:14.5px;margin:10px 0}
.pv-body th,.pv-body td{border:1px solid var(--hair);padding:8px 11px;text-align:left}
.pv-body th{background:var(--bg);font-weight:700;color:var(--ink)}
.pv-scroll{overflow-x:auto}

/* ─────────── A11Y ─────────── */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.item:focus-within,.tile:focus-within{box-shadow:0 12px 34px rgba(11,11,13,.12)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:8px;z-index:100;background:var(--card);padding:10px 16px;border-radius:8px;font-weight:700}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .item:hover,.tile:hover,.dist:hover{transform:none}
  .dist:hover .dist-go::after{transform:none}
}

/* Styles for the multi-page site only. Appended to the catalogue's stylesheet by
   site.js, so the shared look (palette, nav, grid, cards, hero) comes from page.html and
   only what the extra page types need lives here. */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs{padding:18px 0 4px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink3)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--hair)}
.crumbs a{color:var(--ink3)}
.crumbs a:hover{color:var(--acc)}

/* ── category page ───────────────────────────────────────────────────────── */
.cat{padding-bottom:clamp(40px,5vw,72px)}
.cat-hd{padding:clamp(14px,2vw,22px) 0 clamp(22px,3vw,32px);max-width:66ch}
.cat-hd h1{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.cat-hd .lead{margin-bottom:10px}
.cat-count{font-size:14.5px;font-weight:700;color:var(--ink3)}

.faq{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair-soft);padding-top:clamp(26px,3vw,38px);max-width:760px}
.faq h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px}
.faq details{border-bottom:1px solid var(--hair-soft);padding:13px 0}
.faq summary{font-size:16px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:700;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:15.5px;color:var(--ink2);font-weight:500;line-height:1.55;margin-top:9px}

.cat-nav{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--hair-soft);padding-top:clamp(24px,3vw,34px)}
.cat-nav h2{font-size:17px;margin-bottom:12px}
.cat-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cat-nav a{display:inline-block;font-size:14px;font-weight:600;padding:8px 15px;border:1px solid var(--hair);border-radius:99px;transition:border-color .15s,background .15s}
.cat-nav a:hover{border-color:var(--acc);background:var(--tint)}

/* ── product page ────────────────────────────────────────────────────────── */
.pd{padding-bottom:clamp(40px,5vw,72px)}
.pd-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,52px);
  align-items:start;padding:clamp(10px,2vw,20px) 0 clamp(30px,4vw,46px)}
@media(max-width:820px){.pd-top{grid-template-columns:1fr;gap:24px}}
.pd-hero{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--card);
  border-radius:var(--r);padding:5%}
.pd-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pd-thumbs img{width:76px;height:76px;object-fit:contain;background:var(--card);border-radius:10px;padding:6px}
.pd-info h1{font-size:clamp(26px,3.4vw,40px);margin:6px 0 8px}
.pd-code{font-size:13.5px;font-weight:600;color:var(--ink3);overflow-wrap:anywhere}
.pd-price{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;margin:16px 0 6px}
.pd-meta{font-size:14.5px;font-weight:600;color:var(--ink2)}
.pd-buy{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* layout only here. Setting `border` on `.pd-buy a` would beat the skin below on
   specificity and flatten the button into plain text, so the skin is restated at
   this depth instead. */
.pd-buy a{flex:1 1 200px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;padding:15px 22px;border-radius:99px;text-align:center;
  transition:background .15s,border-color .15s}
.pd-buy .btn-shopee{background:var(--acc);color:#fff;border:1px solid var(--acc)}
.pd-buy .btn-shopee:hover{background:var(--acc-d);border-color:var(--acc-d)}
.pd-note{font-size:13px;color:var(--ink3);font-weight:500;margin-top:14px;line-height:1.5}

.pd-spec,.pd-about,.pd-more{border-top:1px solid var(--hair-soft);padding-top:clamp(26px,3vw,38px);
  margin-top:clamp(26px,3vw,38px)}
.pd-spec h2,.pd-about h2,.pd-more h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px}
.pd-about p{font-size:16px;color:var(--ink2);font-weight:500;line-height:1.6;max-width:70ch;margin-bottom:10px}
.pd-about a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.more-link{margin-top:20px}
.more-link a{font-size:15.5px;font-weight:700;color:var(--acc)}

/* ── home ────────────────────────────────────────────────────────────────── */
.home .sec{padding:clamp(34px,4.5vw,60px) 0;border-bottom:1px solid var(--hair-soft)}
.home .sec:last-child{border-bottom:none}
.home .sec h2{font-size:clamp(22px,2.8vw,32px);margin-bottom:12px}
.home .sec .lead{max-width:68ch;margin-bottom:24px}

/* four across, to match the product grid, rather than as many as happen to fit */
.cat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.cat-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.cat-cards{grid-template-columns:repeat(2,1fr);gap:10px}}
.cat-card{background:var(--card);border-radius:var(--r);padding:18px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;transition:transform .2s,box-shadow .2s}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,11,13,.11)}
.cat-card-img{width:100%;aspect-ratio:4/3;position:relative;margin-bottom:12px}
.cat-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%}
.cat-card h3{font-size:16px;font-weight:700;line-height:1.25}

.why-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.why-g h3{font-size:17px;font-weight:700;margin-bottom:7px}
.why-g p{font-size:15.5px;color:var(--ink2);font-weight:500;line-height:1.55}

/* ── about ───────────────────────────────────────────────────────────────── */
.about-p{max-width:760px;padding-bottom:clamp(40px,5vw,72px)}
.about-p h1{font-size:clamp(28px,4vw,44px);margin:18px 0 14px}
.about-p h2{font-size:clamp(19px,2.2vw,24px);margin:30px 0 10px}
.about-p p{font-size:16.5px;color:var(--ink2);font-weight:500;line-height:1.65}
.about-p .lead{margin-bottom:8px}
.about-p a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.about-p .about-mark{height:clamp(40px,5vw,58px);width:auto;margin-top:22px}

/* the grid cards link out rather than opening a panel, so the whole card is a link */
.item .cover{cursor:pointer}
.name a{color:inherit}
.item:hover .name a{color:var(--acc)}

/* ── four across, always ─────────────────────────────────────────────────── */
/* The catalogue's grid is auto-fill, which gives five at 1180px. Here the count is
   fixed so rows stay predictable and the related strip fills exactly. */
.grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ── category filter ─────────────────────────────────────────────────────── */
/* .item is display:flex, which beats the UA's [hidden]{display:none}, so hiding a
   filtered-out card needs saying explicitly. */
.item[hidden]{display:none}
.toolbar{margin:0 0 18px}
.no-match{padding:48px 0 8px;font-size:16px;font-weight:600;color:var(--ink2);text-align:center}
.no-match[hidden]{display:none}
.no-match button{font-size:16px;font-weight:700;color:var(--acc);text-decoration:underline;
  text-underline-offset:2px;padding:0}

/* ── Instagram ───────────────────────────────────────────────────────────── */
.ig{display:inline-flex;align-items:center;gap:7px}
.ig svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* the third hero CTA carries an icon, so it needs the gap the other two do not */
.ig-cta{gap:9px}
.ig-cta svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* <picture> wraps every product photo so a WebP can be offered with the JPEG as
   fallback. It is display:inline by default, which would make it — not the <img> —
   the flex item in the thumbnail strip. display:contents removes it from layout so
   the image stays the flex child and the existing sizing rules keep applying. */
.pd-thumbs picture{display:contents}


/* ═══ Mobile navigation ══════════════════════════════════════════════════════
   page.html hides .nav-links below 900px, which is right for the single-file
   catalogue: its nav is two items and a chip strip sits underneath carrying the
   categories. The generated site has neither, so that rule left a phone with no
   category navigation at all — just the logo and the Shopee button. These rules
   are in site.css rather than page.html so only the site gets them. */
@media(max-width:900px){
  .nav{height:auto}
  .nav-in{flex-wrap:wrap;height:auto;padding-top:5px;gap:4px}
  /* Wrapped, not scrolled. A horizontal strip always hides some of the range, and
     the fade at its edge was too quiet to read as "there is more" — the six
     collections are the whole proposition, so they are all on screen at once. */
  .nav-links{display:flex;order:3;flex:0 0 100%;flex-wrap:wrap;
    margin:0;padding-bottom:6px;gap:2px 0;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  /* 44px is the tap-target floor; these were 31px. Height comes from padding so
     the label stays vertically centred. */
  .nav-links a{white-space:nowrap;padding:9px 12px 9px 0;font-size:13px;
    display:inline-flex;align-items:center;min-height:40px}
  /* The desktop underline is drawn inside an 8px-radius link, which reads as a box
     once the row wraps. On a phone the current section is marked in brand green
     instead — no geometry to go wrong across two rows. */
  .nav-links a[aria-current="page"]{box-shadow:none;color:var(--acc);font-weight:800}
  .nav-links a:first-child{padding-left:0}
}
@media(max-width:400px){
  .nav-links a{font-size:12.5px;padding-right:10px}
  .nav-shop{font-size:12px;padding:7px 11px}
}

/* ═══ Nav hierarchy ══════════════════════════════════════════════════════════
   Seven links styled identically read as one flat list, but they are not one
   kind of thing: six are collections and About is a page. And nothing marked the
   current section, so standing on /kitchen-baskets/ looked the same as standing
   anywhere else — the nav gave you no sense of place. */

/* Where you are. The underline is the brand green, drawn inside the link so it
   cannot shift the row, and the label goes to full ink weight. */
.nav-links a[aria-current="page"]{
  color:var(--ink);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--acc)}

/* About is not a collection. A hairline sets it apart from the six and the
   lighter tone stops it competing with them. */
.nav-about{color:var(--ink3);margin-left:9px;padding-left:16px;
  border-left:1px solid var(--hair);border-radius:0 8px 8px 0}
.nav-about:hover{color:var(--ink)}

@media(max-width:900px){
  .nav-about{margin-left:6px;padding-left:15px;border-radius:0}
  /* Green text, not the desktop underline. The underline is drawn inside an
     8px-radius link, which reads as a box rather than a rule once the row wraps.
     This block sits last in the file, so it is the one that applies. */
  .nav-links a[aria-current="page"]{box-shadow:none;color:var(--acc);font-weight:800}
}

/* ═══ Lead paragraphs ════════════════════════════════════════════════════════
   page.html sets .lead at clamp(17px,1.7vw,21px), which is right for the
   single-file catalogue where one lead sits above a grid. On the site the same
   size pushed the homepage intro and the about copy down the page for no gain in
   readability: body copy is 17px, so a lead at 21px was competing with the
   headings rather than supporting them. Scoped here so the catalogue keeps its
   own scale. */
.lead{font-size:clamp(15px,1.25vw,17px);line-height:1.5}
.home .sec .lead{margin-bottom:20px}

/* ═══ Mobile drawer ══════════════════════════════════════════════════════════
   Seven links wrapped across two rows cost 130px of sticky height, about a sixth
   of a phone screen, for navigation most visitors use once. The burger gives that
   back and lets the two kinds of destination be labelled rather than merely
   spaced: Collections, then More.

   `has-drawer` is added by the script in foot(). Without JavaScript the class is
   never set, the burger stays hidden and the links render inline and wrapped as
   before, so the range is reachable either way. */
.nav-burger{display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:auto;border-radius:9px;color:var(--ink2);
  background:none;border:0;cursor:pointer;flex-shrink:0}
.nav-burger svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.nav-burger:hover{color:var(--ink);background:rgba(0,0,0,.045)}

@media(min-width:901px){ .nav-burger,.drawer{display:none !important} }

@media(max-width:900px){
  .has-drawer .nav-burger{display:inline-flex}
  .has-drawer .nav-links{display:none}
  /* the bar goes back to one row once the links are in the drawer */
  .has-drawer .nav{height:var(--nav-h)}
  .has-drawer .nav-in{flex-wrap:nowrap;height:var(--nav-h);padding-top:0}
  .has-drawer .nav-shop{margin-left:6px}
}

.drawer{position:fixed;inset:0;z-index:200;background:rgba(11,11,13,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer[hidden]{display:none}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(310px,84vw);
  background:var(--card);box-shadow:-16px 0 44px rgba(11,11,13,.22);
  padding:16px 20px 28px;overflow-y:auto;display:flex;flex-direction:column;
  animation:drawer-in .18s ease-out}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.drawer-panel{animation:none}}

.drawer-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px}
.drawer-brand{font-weight:800;letter-spacing:-.02em;color:var(--acc);font-size:18px}
.drawer-x{width:40px;height:40px;margin-right:-8px;border:0;background:none;
  color:var(--ink2);cursor:pointer;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center}
.drawer-x svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.drawer-x:hover{color:var(--ink);background:rgba(0,0,0,.045)}

/* The labels are the point: they say which links are the range and which are not,
   which spacing alone never did. */
.drawer-h{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 6px;padding-left:2px}
.drawer-nav{display:flex;flex-direction:column;margin-bottom:22px}
.drawer-nav a{display:flex;align-items:center;min-height:46px;padding:6px 10px;
  margin-inline:-10px;border-radius:10px;font-size:15.5px;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--hair-soft)}
.drawer-nav a:last-child{border-bottom:0}
.drawer-nav a:hover,.drawer-nav a:focus-visible{background:var(--tint)}
.drawer-nav a[aria-current="page"]{color:var(--acc);font-weight:800}
.drawer-more a{font-weight:600;color:var(--ink2)}
.drawer-more{margin-bottom:0}

/* ═══ Cross-sell strip ═══════════════════════════════════════════════════════
   A horizontal rail of medium-to-high value products from the collections that
   belong to the same job. Scrolls with CSS scroll-snap and no script, so every
   card is a real link in the HTML rather than something a crawler has to run
   JavaScript to reach. */
.strip{margin:clamp(30px,4vw,44px) 0;padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--hair)}
.strip-hd{margin-bottom:16px}
.strip-hd h2{font-size:clamp(19px,2vw,24px);margin-bottom:5px}
.strip-hd p{font-size:14.5px;color:var(--ink2);max-width:62ch;line-height:1.5}

.strip-rail{list-style:none;display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:2px 2px 6px}
.strip-rail::-webkit-scrollbar{display:none}
/* full-bleed on a phone so a card is never sliced by the page gutter */
@media(max-width:600px){
  .strip-rail{margin-inline:-16px;padding-inline:16px;scroll-padding-left:16px}
}

.strip-item{flex:0 0 172px;scroll-snap-align:start}
@media(min-width:601px){.strip-item{flex-basis:194px}}
.strip-item a{display:flex;flex-direction:column;height:100%;background:var(--card);
  border:1px solid var(--hair-soft);border-radius:var(--r);padding:14px;
  transition:transform .18s,box-shadow .18s}
.strip-item a:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(11,11,13,.12)}
.strip-img{position:relative;aspect-ratio:1;margin-bottom:11px}
.strip-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%}
.strip-kick{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px}
.strip-name{font-size:13.5px;font-weight:700;line-height:1.32;letter-spacing:-.015em;
  flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.strip-cost{font-size:14.5px;font-weight:800;margin-top:9px}