/* Self-hosted so the critical path holds 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 */

  /* black replaces the accent colour entirely; -d is the hover, which has to go
     lighter rather than darker */
  --acc:#0B0B0D;
  --acc-d:#33333A;
  --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 VANTA 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:820px;margin-inline:auto;color:#fff}
/* hairlines either side of the eyebrow, as on the Excel Hardware hero */
/* .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)}
/* 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(40px,7.2vw,86px);line-height:1.04;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)}
.sec-hd p{font-size:15px;font-weight:600;color:var(--ink3)}

/* 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{display:block;cursor:pointer;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{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.tile-img img{max-width:84%;max-height:84%;width:auto;height:auto;object-fit:contain}
.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(--ink);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(--ink);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(--ink);border-color:var(--ink);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)}
.item-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative}
.item-img img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.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(--ink);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(--ink)}
.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(--ink);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(--ink);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(--ink);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{background:var(--bg);border-radius:16px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:22px}
.pv-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.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(--ink)}
.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}
.btn-excel{border-color:var(--hair);color:var(--ink)}
.btn-excel:hover{border-color:var(--ink);background:var(--tint)}
.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(--ink);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}
}

/* ═══ Generated pages (category + product) ═══════════════════════════════════
   Shared by the 184 pages build/generate.py writes. They reuse the homepage's
   tokens, nav and footer, so only the layouts below are new. */

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:18px 0 4px;font-size:13px;font-weight:600;color:var(--ink3)}
.crumbs a{color:var(--ink3)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs i{font-style:normal;color:var(--hair);user-select:none}
.crumbs [aria-current]{color:var(--ink)}

/* ── product detail ── */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);padding:14px 0 clamp(48px,6vw,76px);align-items:start}
.pd-media{background:var(--card);border-radius:var(--r);padding:22px;
  border:1px solid var(--hair-soft)}
.pd-hero{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.pd-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pd-thumbs img{width:66px;height:66px;object-fit:contain;background:var(--tint);
  border-radius:var(--r-sm);padding:5px}
.pd-info .kicker{font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.pd-info h1{font-size:clamp(25px,3.1vw,35px);margin-bottom:14px}
.pd-price{font-size:26px;font-weight:800;margin-bottom:6px}
.pd-meta{font-size:14.5px;color:var(--ink2);margin-bottom:22px}
.pd-buy{display:inline-flex;align-items:center;justify-content:center;
  background:var(--shopee);color:#fff;font-weight:700;font-size:15.5px;
  padding:14px 30px;border-radius:999px;transition:filter .15s}
.pd-buy:hover{filter:brightness(.93)}
.pd-note{font-size:13px;color:var(--ink3);margin-top:13px;max-width:44ch}

.pd-spec,.pd-rel{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:26px}
.pd-spec h2,.pd-rel h2{font-size:19px;margin-bottom:15px}
.pd-spec table{border-collapse:collapse;width:auto;max-width:100%;margin:10px 0;font-size:14.5px}
.pd-spec td,.pd-spec th{border:1px solid var(--hair);padding:7px 13px;text-align:left}
.pd-spec th{background:var(--tint);font-weight:700}
.pd-spec p,.pd-spec li{color:var(--ink2);font-size:15px;margin-bottom:7px}
.pd-spec ul{padding-left:20px}
.pd-spec h3,.pd-spec h4{font-size:16px;margin:18px 0 7px}
.pd-spec img{max-width:min(100%,420px);height:auto;border-radius:var(--r-sm);margin:10px 0}

.pd-rel ul{list-style:none;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.pd-rel a{display:block;background:var(--card);border-radius:var(--r-sm);
  padding:12px;border:1px solid var(--hair-soft);transition:transform .18s,box-shadow .18s}
.pd-rel a:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,11,13,.11)}
.pd-rel img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:9px}
.pd-rel span{display:block;font-size:13px;font-weight:600;line-height:1.35}
.pd-all{margin-top:16px;font-weight:700;font-size:14.5px}
.pd-all a:hover{text-decoration:underline}

@media(max-width:760px){
  .pd{grid-template-columns:1fr}
  .pd-buy{width:100%}
}

/* ── category listing ── */
.cat{padding:14px 0 clamp(48px,6vw,76px)}
.cat-head{padding:10px 0 26px;border-bottom:1px solid var(--hair);margin-bottom:26px}
.cat-head h1{font-size:clamp(30px,4.4vw,46px)}
.cat-blurb{font-size:17.5px;color:var(--ink2);margin-top:11px;max-width:62ch}
.cat-count{font-size:14px;font-weight:700;color:var(--ink3);margin-top:13px}
.cat-subs{font-size:14px;color:var(--ink2);margin-top:9px;line-height:1.7;max-width:74ch}

.cat-grid{list-style:none;display:grid;gap:clamp(13px,1.7vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media(max-width:600px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.cat-item a{display:flex;flex-direction:column;height:100%;background:var(--card);
  border-radius:var(--r);padding:16px;border:1px solid var(--hair-soft);
  transition:transform .18s,box-shadow .18s}
.cat-item a:hover{transform:translateY(-5px);box-shadow:0 12px 34px rgba(11,11,13,.12)}
.cat-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.cat-img img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.cat-kick{font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.cat-name{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.02em;flex:1}
.cat-cost{font-size:15px;font-weight:800;margin-top:11px}

.cat-other{margin-top:clamp(40px,5vw,62px);border-top:1px solid var(--hair);padding-top:24px}
.cat-other h2{font-size:17px;margin-bottom:13px}
.cat-other ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.cat-other a{display:inline-block;background:var(--card);border:1px solid var(--hair);
  border-radius:999px;padding:9px 17px;font-size:14px;font-weight:600;transition:.15s}
.cat-other a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-other .num{color:var(--ink3);font-weight:500}
.cat-other a:hover .num{color:rgba(255,255,255,.7)}