/* ═══════════════════════════════════════════════════════════════════════════
   KEYURA LUXE — theme
   Upload to: public_html/luxe/luxe.css

   Monochrome and typography-led. Deliberately the opposite of the Keyura green
   and the Shubbushrii gold: no colour at all, so the photography carries the
   page.

   NOTE ON THE TOKEN BLOCK BELOW
   Shared components that this folder reuses — _cart_drawer.php, _ai_agent.php,
   _kc_enquiry.php — are written against Keyura's variable names (--gold,
   --green, --dark …). Rather than fork those files, the same names are
   redefined here with Luxe values, so a shared drawer rendered inside /luxe/
   comes out monochrome on its own without any change to its source.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Luxe's own scale */
  --ink:#0b0b0b; --ink-2:#1a1a1a; --ink-3:#2e2e2e;
  --paper:#ffffff; --paper-2:#f6f4f1; --paper-3:#edeae5;
  --line:#e3e0db; --line-dark:#2c2c2c;
  --muted:#8a8680;
  --gut:40px; --max:1440px; --hdr-h:78px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Keyura's names, remapped — see note above */
  --gold:#0b0b0b; --gold-d:#000000; --gold-light:#2e2e2e; --gold-b:#1a1a1a;
  --green:#0b0b0b; --green-mid:#2e2e2e;
  --dark:#0b0b0b; --cream:#ffffff; --border:#e3e0db;
  --txt:#0b0b0b; --txt-l:#8a8680; --text:#0b0b0b; --text-light:#8a8680;
  --font-serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  --font-sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-weight:300;font-size:15px;line-height:1.7;
  letter-spacing:.01em;background:var(--paper);color:var(--ink);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;letter-spacing:-.005em}

.lx-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lx-eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.lx-eyebrow.on-dark{color:rgba(255,255,255,.6)}

/* ── Buttons: hairline box, slow fill. No radius, no shadow. ─────────────── */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 38px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;position:relative;overflow:hidden;font-family:var(--font-sans);
  transition:color .5s var(--ease)}
.lx-btn::after{content:'';position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:0}
.lx-btn:hover:not(:disabled){color:var(--ink)}
.lx-btn:hover:not(:disabled)::after{transform:scaleX(1);transform-origin:left}
.lx-btn > span{position:relative;z-index:1}
.lx-btn:disabled{background:#d8d5d0;border-color:#d8d5d0;color:#fff;cursor:not-allowed}
.lx-btn:disabled::after{display:none}
.lx-btn-ghost{background:transparent;color:var(--ink)}
.lx-btn-ghost::after{background:var(--ink)}
.lx-btn-ghost:hover{color:var(--paper)}
.lx-btn-light{border-color:rgba(255,255,255,.55);background:transparent;color:#fff}
.lx-btn-light::after{background:#fff}
.lx-btn-light:hover{color:var(--ink)}
.lx-btn-block{width:100%}

.lx-ulink{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  position:relative;padding-bottom:5px;display:inline-block}
.lx-ulink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)}
.lx-ulink:hover::after{transform:scaleX(0);transform-origin:right}

/* ── Header ───────────────────────────────────────────────────────────────── */
.lx-ann{background:var(--ink);color:rgba(255,255,255,.78);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:11px 20px;
  position:relative;z-index:70}
.lx-ann b{color:#fff;font-weight:500}

.lx-hdr{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);transition:background .45s var(--ease),border-color .45s var(--ease)}
/* Over a hero the bar must float on the image without pushing it down, and it
   must still stick once the image has scrolled past. position:fixed does the
   first and breaks the second — a fixed bar returning to flow re-anchors at the
   top of the document and disappears. Sticky plus a negative margin does both:
   the header overlays the hero by its own height, then sticks normally. */
.lx-hdr.lx-hero-mode{margin-bottom:calc(var(--hdr-h) * -1)}
.lx-hdr-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:var(--hdr-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.lx-nav{display:flex;gap:28px}
.lx-nav a,.lx-act a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;opacity:.85;transition:opacity .3s;white-space:nowrap}
.lx-nav a:hover,.lx-act a:hover{opacity:1}
.lx-act{display:flex;gap:22px;justify-content:flex-end;align-items:center}
.lx-mark{font-family:var(--font-serif);font-size:19px;letter-spacing:.3em;
  text-transform:uppercase;white-space:nowrap;padding-left:.3em;text-align:center;
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.lx-mark i{font-style:normal;font-weight:500}
/* ── The mark ───────────────────────────────────────────────────────────────
   Logo beside the wordmark, not above it: the header is 70px tall and a stacked
   lockup would not fit without shrinking the type past legibility. The two
   images sit on top of each other and cross-fade, because over the hero the
   header is transparent with white type and a black logo would disappear. */
.lx-mark-logo{position:relative;flex:none;width:36px;height:36px;display:block}
.lx-mark-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .3s var(--ease)}
.lx-logo-l{opacity:0}
.lx-hdr.lx-over .lx-logo-d{opacity:0}
.lx-hdr.lx-over .lx-logo-l{opacity:1}
.lx-mark-word{display:inline-block}
.lx-cart{position:relative;display:inline-flex;align-items:center}
.lx-cart-n{position:absolute;top:-7px;right:-11px;background:var(--ink);color:#fff;
  font-size:9px;min-width:16px;height:16px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-weight:500;padding:0 4px;letter-spacing:0}
.lx-burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:inherit}

/* Transparent over a hero, solid once past it. Neither changes `position`. */
.lx-hdr.lx-over{background:transparent;border-bottom-color:transparent;color:#fff}
.lx-hdr.lx-over .lx-cart-n{background:#fff;color:var(--ink)}
.lx-hdr.lx-solid{background:var(--paper);color:var(--ink);border-bottom-color:var(--line)}

/* Mobile drawer */
.lx-dr-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9990;opacity:0;
  pointer-events:none;transition:opacity .35s var(--ease)}
.lx-dr-ov.open{opacity:1;pointer-events:auto}
.lx-dr{position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);background:var(--paper);
  z-index:9991;transform:translateX(100%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto}
.lx-dr.open{transform:none}
.lx-dr-top{display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--gut);border-bottom:1px solid var(--line)}
.lx-dr-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.lx-dr a{display:block;padding:16px var(--gut);border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lx-hero{position:relative;min-height:clamp(560px,92svh,940px);display:flex;align-items:flex-end;
  background:var(--ink);color:#fff;overflow:hidden}
.lx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lx-hero-ph{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 50% 38%,#242424 0%,#111 48%,#070707 100%)}
.lx-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 32%,transparent 50%,rgba(0,0,0,.74) 100%)}
.lx-hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;
  padding:0 var(--gut) clamp(54px,9vh,100px)}
.lx-hero h1{font-size:clamp(40px,7vw,92px);line-height:1.02;margin:16px 0 20px;max-width:15ch}
.lx-hero h1 em{font-style:italic}
.lx-hero p{max-width:44ch;color:rgba(255,255,255,.72);font-size:15px;margin:0 0 32px}
.lx-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.lx-hero.lx-hero-bare{min-height:clamp(400px,58svh,620px)}
.lx-minbar{background:var(--ink);color:rgba(255,255,255,.82);border-top:1px solid #1e1e1e;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:14px 20px}
.lx-minbar b{color:#fff;font-weight:500}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.lx-sec{padding:clamp(66px,10vw,136px) 0}
.lx-sec-head{text-align:center;max-width:620px;margin:0 auto clamp(38px,6vw,72px)}
.lx-sec-head h2{font-size:clamp(28px,4.2vw,48px);line-height:1.12;margin:14px 0 16px}
.lx-sec-head p{color:var(--muted);margin:0}

.lx-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lx-tcard{position:relative;aspect-ratio:3/4;background:var(--paper-2);overflow:hidden;display:block}
.lx-tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.lx-tcard:hover img{transform:scale(1.045)}
.lx-tcard-lab{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 28px;z-index:2;
  background:linear-gradient(transparent 0%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.8) 100%);color:#fff}
.lx-tcard-lab h3{font-size:23px;margin:0 0 5px}
.lx-tcard-lab span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}

.lx-band{background:var(--ink);color:#fff;text-align:center;padding:clamp(70px,10vw,130px) 0}
.lx-band blockquote{font-family:var(--font-serif);font-size:clamp(23px,3.4vw,38px);
  line-height:1.3;margin:18px auto 22px;max-width:22ch;font-style:italic}
.lx-band cite{font-style:normal;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ── Product grid ─────────────────────────────────────────────────────────── */
.lx-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,46px) clamp(18px,2.4vw,34px)}
.lx-grid.lx-4{grid-template-columns:repeat(4,1fr)}
.lx-pcard{display:block;position:relative}
.lx-pcard-art{aspect-ratio:1;background:var(--paper-2);overflow:hidden;position:relative;margin-bottom:16px}
.lx-pcard-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.lx-pcard:hover .lx-pcard-art img{transform:scale(1.055)}
.lx-pcard-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#c9c4bc;font-family:var(--font-serif);font-size:30px;letter-spacing:.2em}
.lx-tag{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 10px;z-index:2}
.lx-wish{position:absolute;top:10px;right:10px;width:34px;height:34px;background:rgba(255,255,255,.92);
  border:0;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;
  z-index:3;transition:transform .25s var(--ease)}
.lx-wish:hover{transform:scale(1.12)}
.lx-pcard h3{font-family:var(--font-sans);font-size:14px;font-weight:400;margin:0 0 5px;letter-spacing:0}
.lx-pcard .lx-meta{font-size:12.5px;color:var(--muted);margin:0 0 9px}
.lx-pcard .lx-price{font-size:14px;font-weight:400}
.lx-pcard .lx-price s{color:var(--muted);margin-left:9px;font-size:12.5px}
.lx-pcard .lx-off{color:var(--muted);margin-left:7px;font-size:11.5px}
.lx-plink{position:absolute;inset:0;z-index:1}
.lx-plink-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ── Category page ────────────────────────────────────────────────────────── */
.lx-crumb{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:26px 0}
.lx-crumb a:hover{color:var(--ink)}
.lx-cat-head{max-width:580px;padding-bottom:42px}
.lx-cat-head h1{font-size:clamp(32px,4.6vw,54px);line-height:1.1;margin:0 0 16px}
.lx-cat-head p{color:var(--ink-3);margin:0}
.lx-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:44px}
.lx-chips{display:flex;gap:9px;flex-wrap:wrap}
.lx-chip{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;
  border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink-3);
  font-family:var(--font-sans);transition:border-color .3s,color .3s;white-space:nowrap}
.lx-chip:hover,.lx-chip.on{border-color:var(--ink);color:var(--ink)}
.lx-count{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lx-count select{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--line);background:transparent;
  padding:8px 12px;cursor:pointer;color:var(--ink)}
.lx-empty{text-align:center;padding:90px 20px;color:var(--muted)}
.lx-empty h3{font-size:30px;color:var(--ink);margin-bottom:10px}
.lx-pagi{display:flex;gap:8px;justify-content:center;padding:clamp(50px,7vw,86px) 0 0}
.lx-pagi a{padding:11px 17px;border:1px solid var(--line);font-size:11px;letter-spacing:.12em;
  transition:border-color .3s}
.lx-pagi a:hover,.lx-pagi a.on{border-color:var(--ink)}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.lx-ftr{background:var(--ink);color:rgba(255,255,255,.62);
  padding:clamp(58px,8vw,92px) 0 32px;font-size:13px;margin-top:0}
.lx-ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.lx-ftr h4{font-family:var(--font-sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:#fff;margin:0 0 18px}
.lx-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.lx-ftr a:hover{color:#fff}
.lx-ftr .lx-mark{color:#fff;font-size:17px;margin-bottom:14px;padding:0;text-align:left;display:block}
/* In the footer there is room to stack, so the mark reads as a crest. */
.lx-ftr-logo{display:block;width:62px;height:62px;object-fit:contain;margin:0 0 16px;opacity:.95}
.lx-ftr-bot{border-top:1px solid #1f1f1f;padding-top:24px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.42)}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.lx-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:#fff;padding:14px 26px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;z-index:9998;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lx-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  :root{--gut:24px}
  .lx-grid,.lx-grid.lx-4{grid-template-columns:repeat(2,1fr)}
  .lx-ftr-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:760px){
  .lx-nav,.lx-act a:not(.lx-cart){display:none}
  .lx-burger{display:block}
  :root{--hdr-h:62px}
  .lx-hdr-in{grid-template-columns:auto 1fr auto}
  .lx-mark{font-size:15px;letter-spacing:.24em;gap:9px}
  .lx-mark-logo{width:29px;height:29px}
  .lx-trio{grid-template-columns:1fr}
  .lx-tcard{aspect-ratio:16/10}
}
@media(max-width:520px){
  .lx-grid,.lx-grid.lx-4{gap:26px 14px}
  .lx-hero h1{font-size:38px}
  .lx-btn{padding:15px 24px;font-size:10px}
  .lx-hero-cta{flex-direction:column;align-items:stretch}
  .lx-ftr-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED PAGES WEARING THE LUXE SKIN
   cart.php, checkout.php and the product page are Keyura markup. Most of their
   colour already comes from the variables remapped at the top of this file, so
   it turns monochrome on its own. What is left below is the handful of places
   those files hard-code a colour or a width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Line them up with the Luxe gutters instead of sitting narrow under a wide header */
.page-wrap{max-width:1240px!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.bc-in{max-width:1240px!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.bc{background:transparent!important;border-bottom:1px solid var(--line)!important}

/* Cards: hairlines, no rounding, no shadow */
.cart-card,.summary-card,.empty-cart{border-radius:0!important;border-color:var(--line)!important;box-shadow:none!important}
.cart-head{background:transparent!important;border-bottom:1px solid var(--line)!important;
  letter-spacing:.2em!important;color:var(--muted)!important}
.cart-row{border-bottom:1px solid var(--line)!important}
.cart-prod img,.cart-prod-ph{border-radius:0!important}
.page-heading,.sum-title{font-family:var(--font-serif)!important;font-weight:400!important}

/* Remove control — was near-invisible grey on white */
.rm-btn{color:var(--muted)!important}
.rm-btn:hover{color:var(--ink)!important;background:var(--paper-2)!important}
.qty-wrap{border-radius:0!important;border-color:var(--line)!important}
.qty-btn:hover{color:var(--ink)!important}

/* Buttons */
.checkout-btn,.shop-now-btn,.coupon-btn{border-radius:0!important;letter-spacing:.22em!important}
.checkout-btn{background:var(--ink)!important;color:#fff!important}
.checkout-btn:hover{background:#000!important;color:#fff!important;transform:none!important;box-shadow:none!important}
.coupon-inp,.coupon-btn{border-radius:0!important}
.coupon-inp:focus{border-color:var(--ink)!important}
.trust-item{border-radius:0!important;background:transparent!important;border-color:var(--line)!important}

/* The remaining hard-coded colours: amber stock warnings, green shipping notes,
   the red enquiry block. Drained to ink, kept legible. */
.qty-stock-msg{background:var(--paper-2)!important;border-color:var(--line)!important;color:var(--ink-3)!important}
.qty-btn.at-limit{background:var(--paper-3)!important;color:var(--ink-3)!important}
.qty-wrap.at-limit{border-color:var(--ink-3)!important;box-shadow:none!important}
.ship-note{color:var(--ink-3)!important}
.ship-note i{color:var(--ink)!important}
.kc-enq-mini,.kc-enq-btn{border-radius:0!important;background:var(--ink)!important;color:#fff!important;
  border-color:var(--ink)!important;letter-spacing:.14em!important}
.kc-enq-block{border-radius:0!important;background:var(--paper-2)!important;
  border-color:var(--line)!important;color:var(--ink-3)!important}
.cart-prod-price{color:var(--muted)!important}

/* ═══ Header v2 — 15 Oct 2026 ═══════════════════════════════════════════════
   Owner asked for a clean, maison-style header (reference: vancleefarpels.com):
   one thin line on top, Menu left, mark centred, line icons right, every
   category inside the menu. These rules override the v1 header above. */
.lx-ann{font-size:9.5px;letter-spacing:.24em;padding:10px 16px;color:rgba(255,255,255,.72)}
.lx-ann-sep{margin:0 .9em;opacity:.5}
.lx-ann-short{display:none}
.lx-hdr-in{grid-template-columns:1fr auto 1fr}
.lx-left{display:flex;align-items:center}
.lx-menu{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0;cursor:pointer;
  color:inherit;font:inherit;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.9;transition:opacity .3s}
.lx-menu:hover{opacity:1}
.lx-nav,.lx-burger{display:none!important}
.lx-act{gap:20px}
.lx-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;opacity:.88;transition:opacity .3s}
.lx-ico:hover{opacity:1}
.lx-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.lx-cart-n{top:-6px;right:-8px}
/* The menu opens from the LEFT, under the Menu button that opened it. */
.lx-dr{left:0;right:auto;transform:translateX(-100%);width:min(88vw,400px)}
.lx-dr.open{transform:none}
.lx-dr a{font-size:11.5px;letter-spacing:.22em;padding:17px var(--gut)}
.lx-dr-foot{margin-top:auto;border-top:1px solid var(--line)}
.lx-dr-foot a{color:var(--muted);font-size:10.5px;border-bottom:0;padding:13px var(--gut)}
/* Hero text must clear the floating header, or "The Collection" slides under
   the Menu button on a short phone screen (owner's screenshot, 15 Oct). */
.lx-hero-in{padding-top:calc(var(--hdr-h) + 36px)}
@media(max-width:760px){
  .lx-ann{font-size:8.5px;letter-spacing:.18em;padding:9px 12px}
  .lx-ann-long{display:none}.lx-ann-short{display:inline}
  .lx-hdr-in{grid-template-columns:1fr auto 1fr;gap:10px}
  .lx-menu span{display:none}
  .lx-act{gap:14px}
  .lx-act a.lx-ico{display:inline-flex}
  .lx-act a.lx-ico:not(.lx-cart):not(.lx-ico-search){display:none}
}
/* Comfortable tap target for the menu on phones (was 20px wide). */
.lx-menu{min-height:40px;min-width:40px}