/* ============================================================
   SoBotz — shared design system
   Teal/cyan + dark, "engineering catalog" technical aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- surfaces (cool near-black) ---- */
  --bg:        #090d0f;
  --bg-1:      #0e1417;
  --bg-2:      #131c20;
  --bg-3:      #18242a;
  --raise:     #1d2c33;

  /* ---- lines ---- */
  --line:        rgba(120,210,214,0.10);
  --line-soft:   rgba(255,255,255,0.06);
  --line-strong: rgba(120,210,214,0.22);

  /* ---- text ---- */
  --text:      #e9f3f4;
  --text-dim:  #9db0b4;
  /* was #5f7177 — measured 3.82:1 on --bg, 3.64:1 on --bg-1, 3.39:1 on --bg-2
     and 3.11:1 on --bg-3, so it failed AA on every surface it was used on.
     That was not a decorative token: it carries breadcrumbs, form labels,
     shop_table headers, product meta, variation labels, filter headings, post
     and event dates, the struck-through was-price and the homepage trust strip
     ("N20 stall @6V"). This value clears them at 5.98 / 5.69 / 5.30 / 4.86:1. */
  --text-faint:#7e9296;
  --text-read: #dbe6e7;   /* long-form body copy (descriptions, reviews, tabs) — matches site body tone */

  /* ---- teal / cyan brand ---- */
  --teal:        #19c6c9;
  --teal-bright: #38ecef;
  --teal-deep:   #0c9499;
  --teal-ink:    #052e30;
  --teal-glow:   rgba(25,198,201,0.18);
  --glass:       rgba(9,13,15,0.86);  /* sticky header backdrop */

  /* ---- secondary accent (sale / rating only) ---- */
  --amber:     #f0a93d;

  /* ---- semantic ----
     Split fill/text the same way teal is split, and for the same reason. These
     three were the only tokens the light theme never re-declared, so "in stock",
     "out of stock", star ratings, password-strength feedback and the cancelled /
     postponed event banners inherited their dark values and landed at 1.68–2.79:1
     on a pale page. The FILL values below are correct on both themes (they only
     ever carry dark ink — the sale badge, the onsale pill, the error icon), so
     they stay; light mode overrides the -text pair instead. */
  --ok:        #44d3a5;
  --danger:    #ff6b5e;
  --ok-text:     var(--ok);
  --danger-text: var(--danger);
  --amber-text:  var(--amber);

  /* ---- type ---- */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- filled teal buttons ----
     Their own tokens because the two themes ink them differently: dark mode
     puts near-black on a bright teal (8.66:1), light mode puts white on a deep
     teal (5.78:1). Every filled-teal control reads --btn-ink rather than
     repeating a literal, so the pair moves together — that is what keeps the
     cart badge, the active chip, the language toggle and the add-to-cart button
     the same colour as each other in both themes. */
  --btn-fill:       var(--teal);
  --btn-fill-hover: var(--teal-bright);
  --btn-ink:        #04181a;
  --btn-edge:       transparent;

  /* Teal used as TEXT — eyebrows, prices, card categories, active nav, links.
     In dark mode this IS --teal; the token exists because light mode cannot
     use the same value for text that it uses for fills (see below). Every
     `color:` that wants teal reads this, never --teal itself. Borders,
     backgrounds and glyphs on permanently dark tiles keep --teal. */
  --teal-text:      var(--teal);

  /* ---- icons drawn in pseudo-elements ----
     The theme's real icons (search, cart, account, social, play) are inline
     SVGs at a 1.7–2.2 stroke. Everything that could only be reached from CSS
     used to borrow a Unicode glyph instead — ▾ ◉ ✓ ✕ i ! — which came from
     whatever font happened to render it, at whatever weight that font drew.
     These are the same icons as masks, so they inherit currentColor and match
     the drawn set. Usage: content:''; a width/height; background:currentColor;
     and mask:var(--i-name) center/contain no-repeat. */
  --i-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.3 4 12.1'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --i-info:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11.2v5.3'/%3E%3Cpath d='M12 7.4h.01'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6.2'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");

  /* ---- spacing / radius ---- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --maxw: 1520px;   /* overridden per-site from Customizer */
}

/* ============================================================
   LIGHT THEME — activated by <html data-theme="light">
   (set early by an inline script in the header; toggled in the header)
   Only the design tokens change; every component reads these vars.
   ============================================================ */
html[data-theme="light"]{
  --bg:        #eef2f3;
  --bg-1:      #ffffff;
  --bg-2:      #e7eded;
  --bg-3:      #dde6e6;
  --raise:     #ffffff;

  --line:        rgba(12,148,153,0.16);
  --line-soft:   rgba(12,30,35,0.10);
  --line-strong: rgba(12,148,153,0.30);

  --text:      #0c1b1e;
  --text-dim:  #3c4f54;
  /* was #6a7e83 — 4.26:1 on white and 3.78:1 on the page background, which
     failed on every 12px label (breadcrumbs, footer legal links, captions) */
  --text-faint:#5a6d72;
  --text-read: #2c3b41;

  /* ONE teal in light mode. This used to be #0a9499 for fills while text used a
     separate, darker #067176 — which meant a teal button and the teal price
     beside it were visibly different colours, and the button carried near-black
     ink at only 4.96:1 (the same control measures 8.66:1 in dark mode, so the
     light button read muddy and noticeably darker). Collapsing both to #067176
     and flipping the ink to white lifts the primary button to 5.78:1 and finally
     makes the "one accent" rule literally true here. */
  --teal:        #067176;
  --teal-bright: #07a7ac;
  --teal-deep:   #05585c;   /* edge companion — must stay darker than --teal now */
  --teal-ink:    #d7eeee;
  --teal-glow:   rgba(6,113,118,0.20);
  --glass:       rgba(255,255,255,0.82);

  /* Filled buttons ARE the palette teal now, with white ink rather than the
     near-black used in dark mode. White on #067176 measures 5.78:1, and the
     button's own edge against the page is 5.13:1 so it stays a defined shape
     without a border. Hover goes darker, not lighter — lightening toward
     --teal-bright would drop white ink to 2.94:1. */
  --btn-fill:       var(--teal);
  --btn-fill-hover: #05585c;   /* white ink 8.21:1 */
  --btn-ink:        #ffffff;
  --btn-edge:       transparent;
  /* Same value as --teal now. The token stays because dark mode still needs the
     distinction (fills there are #19c6c9 with near-black ink) and because every
     `color:` in the codebase already reads --teal-text; pointing it at --teal is
     what makes the two agree in light mode instead of drifting apart. */
  --teal-text:      var(--teal);

  /* The three tokens light mode never had. Fills stay as declared in :root —
     only text and border uses switch to these. Measured on the page / on a
     white card: ok 4.55 / 5.13, danger 4.95 / 5.58, amber 4.86 / 5.48. */
  --ok-text:     #0d7d59;
  --danger-text: #c0342a;
  --amber-text:  #8a6206;
}
/* fix: keep near-black on teal buttons readable; darken card hover shadow for light */
html[data-theme="light"] .card:hover,
html[data-theme="light"] .vcard:hover,
html[data-theme="light"] .ecard:hover{ box-shadow:0 18px 38px -22px rgba(12,40,45,.35); }
html[data-theme="light"] .toast{ box-shadow:0 20px 50px -20px rgba(12,40,45,.4); }
/* explicit light-mode card surfaces. Belt-and-suspenders: on some setups a
   WooCommerce wrapper shadows the --bg-1 cascade on loop items, leaving cards
   dark in light mode. Literal values at high specificity guarantee the flip. */
html[data-theme="light"] .card,
html[data-theme="light"] li.product.card,
html[data-theme="light"] .vcard,
html[data-theme="light"] .bcard,
html[data-theme="light"] .ecard,
html[data-theme="light"] .feat-card{ background:#ffffff; }
html[data-theme="light"] .card-media,
html[data-theme="light"] .vthumb,
html[data-theme="light"] .bcard-media,
html[data-theme="light"] .ecard-media{ background:#e7eded; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--teal); color:var(--btn-ink); }
/* the text cursor is a browser default that belongs to no design system */
input,textarea,select,[contenteditable]{ caret-color:var(--teal); }

/* ---------- focus ----------
   The system's focus is the teal ring. Several fields used to set
   `outline:none` and replace it with a border-colour change, which is not a
   focus indicator at all for anyone navigating by keyboard — the suppressions
   are gone and this draws the real thing. :focus-visible, so a mouse click on
   a button does not paint a ring; the outline follows each element's own
   border-radius, so chips stay pills and cards stay cards. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
/* fields already sit inside a bordered box, so the ring reads better tight to
   it, and the teal glow reinforces the same state the border change signals */
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline-offset:1px;
  box-shadow:0 0 0 4px var(--teal-glow);
}

/* scrollbar — teal thumb so it's clearly visible on both themes */
html{ scrollbar-color:var(--teal-deep) var(--bg-1); }
*::-webkit-scrollbar{ height:11px; width:11px; }
*::-webkit-scrollbar-thumb{ background:var(--teal-deep); border-radius:20px; border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--teal); }
*::-webkit-scrollbar-track{ background:var(--bg-1); }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.spread{ display:flex; align-items:center; justify-content:space-between; }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal-text);
  font-weight:500;
}
.muted{ color:var(--text-dim); }
.faint{ color:var(--text-faint); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-0.01em; }
.display{ font-size:clamp(40px,6vw,76px); font-weight:700; letter-spacing:-0.03em; line-height:0.98; }
/* Section headings carry the section on their own now that the label above them
   is gone, so they take a step up in size. */
.h-sec{ font-size:clamp(28px,3.2vw,42px); font-weight:600; letter-spacing:-0.022em; }

/* Section header: the heading, and whatever sits opposite it (a "see all" link).
   The small label above the heading is optional and usually absent — it prints
   only when someone writes one that says something the heading does not. */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.sec-head .ttl{ display:flex; flex-direction:column; gap:10px; }
/* with no label the column is a single heading; drop the leading it was holding */
.sec-head .ttl:not(:has(.eyebrow)){ gap:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.04em;
  padding:12px 20px; border-radius:var(--r-sm);
  border:1px solid transparent; background:var(--bg-3); color:var(--text);
  transition:.18s ease;
}
.btn:hover{ background:var(--raise); }
.btn-primary{ background:var(--btn-fill); color:var(--btn-ink); border-color:var(--btn-edge); font-weight:600; }
.btn-primary:hover{ background:var(--btn-fill-hover); color:var(--btn-ink); box-shadow:0 0 0 4px var(--teal-glow); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-text); background:var(--teal-ink); }
.btn-sm{ padding:9px 14px; font-size:12px; }
.btn-lg{ padding:16px 30px; font-size:15.5px; border-radius:12px; }
.btn-block{ width:100%; justify-content:center; }

/* chips / pills */
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line-strong);
  color:var(--text-dim); background:var(--bg-1); transition:.16s ease; white-space:nowrap;
}
.chip:hover{ color:var(--teal-text); border-color:var(--teal); }
.chip.active{ background:var(--teal); color:var(--btn-ink); border-color:var(--teal); font-weight:600; }

/* badges */
.badge{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  padding:4px 8px; border-radius:4px; text-transform:uppercase; line-height:1;
}
.badge-sale{ background:var(--amber); color:#2a1a00; }
.badge-sold{ background:var(--bg-3); color:var(--text-dim); border:1px solid var(--line-strong); }
.badge-new { background:var(--teal-ink); color:var(--teal-text); border:1px solid var(--teal-deep); }

/* ---------- product card ---------- */
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; transition:.2s ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -20px rgba(0,0,0,.7); }
.card-media{
  position:relative; aspect-ratio:4/3; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card-badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2; }
.card-cat{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-text); }
.card-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-title{ font-family:var(--display); font-weight:500; font-size:16px; line-height:1.2; color:var(--text); }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; }
.price{ font-family:var(--mono); font-weight:600; font-size:16px; color:var(--text); }
.price .was{ color:var(--text-faint); text-decoration:line-through; font-weight:400; font-size:13px; margin-right:7px; }
.price .now{ color:var(--teal-text); }
.stars{ color:var(--amber-text); font-size:12px; letter-spacing:1px; }

.add-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:40px; height:40px; border-radius:var(--r-sm); flex:0 0 auto;
  background:var(--bg-3); border:1px solid var(--line-strong); color:var(--text);
  transition:.16s ease;
}
.add-btn:hover{ background:var(--teal); color:var(--btn-ink); border-color:var(--teal); }
.add-btn svg{ width:18px; height:18px; }

/* image placeholder fallback (striped) */
.ph{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 10px, var(--bg-1) 10px 20px);
  display:flex; align-items:center; justify-content:center;
}
.ph span{ font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:.1em; }

/* ---------- header (shared base) ---------- */
.topbar{
  background:var(--bg-1); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--text-dim);
}
/* the social links were 12px text with no padding — a 17px-tall tap target on
   a phone. The padding buys height inside the 38px bar without moving anything. */
.topbar .links a{ display:inline-flex; align-items:center; padding:5px 2px; }
.topbar a:hover{ color:var(--teal-text); }
.tb-short{ display:none; }

.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px;
  background:var(--teal); color:var(--btn-ink); border-radius:100px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* icon button */
.ico{
  position:relative; width:42px; height:42px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); background:var(--bg-1); color:var(--text); transition:.16s ease;
}
.ico:hover{ border-color:var(--teal); color:var(--teal-text); }
.ico svg{ width:19px; height:19px; }

/* dark / light toggle (matches .ico footprint) */
.hdr-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{
  width:42px; height:42px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); background:var(--bg-1); color:var(--text); transition:.16s ease;
}
.theme-toggle:hover{ border-color:var(--teal); color:var(--teal-text); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .i-sun{ display:none; }
html[data-theme="light"] .theme-toggle .i-sun{ display:block; }
html[data-theme="light"] .theme-toggle .i-moon{ display:none; }

/* EN | LT segmented switch (rendered from Polylang/WPML when active) */
.langseg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:100px; overflow:hidden; }
.langseg button, .langseg a{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em;
  padding:5px 11px; background:transparent; color:var(--text-dim); border:none; line-height:1.4; transition:.14s ease;
}
.langseg button:hover, .langseg a:hover{ color:var(--teal-text); }
.langseg button.on, .langseg a.on{ background:var(--teal); color:var(--btn-ink); }

/* ---------- footer ---------- */
.foot{ background:var(--bg-1); border-top:1px solid var(--line-soft); margin-top:64px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-top:52px; padding-bottom:40px; }
/* grid items must be allowed to shrink — the newsletter e-mail input's default
   minimum width was blowing the 2-column phone grid out past the screen edge */
.foot-grid > div{ min-width:0; }
.foot form input[type="email"]{ min-width:0; }
.foot h5{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0 0 16px; font-weight:500; }
.foot a{ color:var(--text-dim); display:block; padding:5px 0; font-size:14px; }
.foot a:hover{ color:var(--teal-text); }
/* social icons: the generic .foot a rule above turned them into padded blocks,
   which pushed the logo glyphs off-centre — restore the flex centring */
.foot a.ico{ display:flex; align-items:center; justify-content:center; padding:0; }
.foot-bar{ border-top:1px solid var(--line-soft); padding:20px 0; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.legal-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.legal-links a{ display:inline; padding:0; font-size:12px; font-family:var(--mono); color:var(--text-faint); }
.legal-links a:hover{ color:var(--teal-text); }
.legal-links i{ font-style:normal; opacity:.5; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
  background:var(--bg-3); border:1px solid var(--teal-deep); color:var(--text);
  padding:13px 20px; border-radius:var(--r-sm); font-family:var(--mono); font-size:13px;
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:.25s ease; z-index:200;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }

/* ---------- utility ---------- */
.grid-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:1100px){ .grid-products{ grid-template-columns:repeat(3,1fr); } .foot-grid{ grid-template-columns:1fr 1fr; gap:32px 30px; padding-top:44px; padding-bottom:36px; } }
@media(max-width:720px){ .grid-products{ grid-template-columns:repeat(2,1fr); } .wrap{ padding:0 22px; } .foot{ margin-top:48px; } .foot-grid{ gap:32px 26px; padding-top:40px; padding-bottom:32px; } .foot-bar .wrap{ padding-left:26px; padding-right:26px; } }

.hidden{ display:none !important; }

/* ============================================================
   SITE CHROME — shared header (Direction A) + footer
   ============================================================ */
.topbar .wrap{ height:38px; }
.topbar .links{ display:flex; gap:20px; align-items:center; }
.topbar .flag{ font-family:var(--mono); }
.topbar .links .sep{ color:var(--text-faint); }

.hdr{ position:sticky; top:0; z-index:100; background:var(--glass); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); transition:.2s ease; }
.hdr-main{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; height:78px; transition:.2s ease; }
.hdr.condensed .hdr-main{ height:62px; }
.logo img{ height:30px; width:auto; }
/* theme-aware logo: both files are in the markup, CSS shows the right one so
   the sun/moon toggle swaps them instantly with no reload */
.logo-img--light{ display:none; }
html[data-theme="light"] .logo-img--dark{ display:none; }
html[data-theme="light"] .logo-img--light{ display:block; }
.foot .logo-img{ height:30px; width:auto; }
/* text wordmark used until a logo image is uploaded (Customize → Site Identity) */
.logo-word{ display:inline-flex; align-items:baseline; font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:.02em; color:var(--text); line-height:1; }
.logo-word .teal{ color:var(--teal-text); }

.search{ position:relative; width:100%; justify-self:center; }
.search input{
  width:100%; height:46px; padding:0 16px 0 44px; border-radius:var(--r-sm);
  background:var(--bg-1); border:1px solid var(--line-soft); color:var(--text);
  font-family:var(--body); font-size:14px; transition:.16s ease;
}
.search input::placeholder{ color:var(--text-faint); }
.search input:focus{ border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-glow); background:var(--bg); }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-faint); }
.search kbd{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--text-faint); border:1px solid var(--line); border-radius:4px; padding:2px 6px; }

.hdr-actions{ display:flex; align-items:center; gap:10px; }

.catnav{ border-top:1px solid var(--line-soft); }
.catnav .wrap{ display:flex; align-items:center; gap:14px; height:50px; overflow:visible; }
/* pull the first/last nav link's padding outside the container so the TEXT
   lines up with the logo on the left and the cart icon on the right */
.catnav-cats{ margin-left:-14px; }
.catnav-extra > *:last-child{ margin-right:-14px; }
.catnav-extra > *:last-child.nav-drop > a{ padding-right:14px; }
/* category links scroll if there are many; the learn/Events links stay pinned right */
.catnav-cats{ display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.catnav-cats::-webkit-scrollbar{ display:none; }
.catnav-extra{ display:flex; align-items:center; gap:4px; flex:0 0 auto; padding-left:14px; border-left:1px solid var(--line-soft); }
.catnav a{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--text-dim); padding:8px 14px; border-radius:var(--r-sm); white-space:nowrap; transition:.14s; position:relative; }
.catnav a:hover{ color:var(--teal-text); background:var(--bg-1); }
.catnav a.strong{ color:var(--text); }
.catnav a.active{ color:var(--teal-text); background:var(--teal-ink); }
.catnav .new::after{ content:''; position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }
.catnav .sep{ width:1px; height:20px; background:var(--line-soft); margin:0 8px; }

/* dropdown submenus — nest items under a parent in Appearance → Menus and the
   parent grows a themed dropdown (hover on desktop, tap on touch screens). */
.catnav li, .catnav .menu-item-has-children{ position:relative; list-style:none; }
.catnav .nav-drop{ display:inline-flex; }
/* caret; !important so it wins over the .new dot if both ever land on one link */
.catnav .menu-item-has-children > a::after{
  content:'' !important; position:static !important; box-shadow:none !important; border-radius:0 !important;
  display:inline-block; width:11px; height:11px; margin-left:6px; opacity:.7;
  vertical-align:-1px; flex:0 0 auto;
  background:currentColor !important;
  -webkit-mask:var(--i-caret) center/contain no-repeat;
          mask:var(--i-caret) center/contain no-repeat;
}
.catnav .menu-item-has-children.open > a::after,
.catnav .menu-item-has-children:hover > a::after{ opacity:1; color:var(--teal-text); }
.catnav .sub-menu{
  position:absolute; left:0; top:calc(100% + 6px); min-width:190px; z-index:180;
  display:none; flex-direction:column; gap:2px; padding:6px; margin:0;
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
}
/* invisible bridge across the 6px gap: without it the pointer "leaves" the
   parent on the way down and the dropdown vanishes before you can click it */
.catnav .nav-drop::after,
.catnav .menu-item-has-children::after{ content:''; position:absolute; left:0; right:0; top:100%; height:10px; }
@media(hover:hover){
  .catnav li:hover > .sub-menu, .catnav li:focus-within > .sub-menu,
  .catnav .menu-item-has-children:hover > .sub-menu,
  .catnav .menu-item-has-children:focus-within > .sub-menu{ display:flex; }
}
.catnav li.open > .sub-menu,
.catnav .menu-item-has-children.open > .sub-menu{ display:flex; }
.catnav .sub-menu a{ display:block; padding:9px 12px; border-radius:6px; font-size:13px; white-space:nowrap; }
.catnav .sub-menu a:hover{ background:var(--bg-3); }
/* right-pinned group: open the dropdown leftwards so it stays on screen */
.catnav-extra .sub-menu{ left:auto; right:0; }
/* a scrollable strip would clip its dropdowns — switch off scrolling when a
   dropdown parent is present (rare: categories + nested items on the left) */
.catnav-cats:has(.menu-item-has-children){ overflow:visible; }
@media(max-width:720px){
  /* on phones the dropdown opens as a full-width sheet under the bar */
  .catnav .sub-menu{ position:fixed; left:12px; right:12px; min-width:0; }
}

/* per-device nav visibility — set from Customizer → SoBotz — Navigation, and
   also usable as "CSS Classes" on custom menu items (Appearance → Menus →
   Screen Options → tick "CSS Classes"). */
@media(max-width:720px){ .catnav .nav-hide-mobile, .catnav li.nav-hide-mobile{ display:none !important; } }
@media(max-width:1100px){ .catnav .nav-hide-tablet, .catnav li.nav-hide-tablet{ display:none !important; } }

@media(max-width:560px){
  .hdr-main{ grid-template-columns:1fr auto; grid-template-areas:"logo actions" "search search"; column-gap:14px; row-gap:12px; height:auto; padding-top:12px; padding-bottom:12px; }
  .hdr.condensed .hdr-main{ height:auto; }
  .logo{ grid-area:logo; }
  .hdr-actions{ grid-area:actions; }
  .search{ grid-area:search; max-width:none; width:100%; justify-self:stretch; }
  .search kbd{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 22px; padding-top:40px; padding-bottom:30px; }
  .foot-bar .wrap{ padding-left:24px; padding-right:24px; }
  /* declutter the top bar on phones: the EN|LT switch + socials were crowding the
     ship text and breaking it mid-phrase. Hide the ship line, keep the controls
     clean on one right-aligned row. (Ship info still shows on tablet/desktop.) */
  .topbar{ font-size:11px; }
  /* the header chrome hugged the screen edges on phones — give the logo / actions
     and the top + category bars a touch more side margin so nothing is flush. */
  .hdr .wrap, .topbar .wrap, .catnav .wrap{ padding-left:24px; padding-right:24px; }
  .topbar .wrap{ height:auto; padding-top:8px; padding-bottom:8px; }
  .topbar .spread{ gap:14px; justify-content:flex-end; }
  .topbar .links{ gap:16px; align-items:center; }
  .tb-full, .tb-short{ display:none; }
}

/* phones: compact category bar that fits All Parts / Lessons / Builds / Events
   on one line instead of scrolling sideways */
@media(max-width:720px){
  .catnav .wrap{ overflow:visible; height:auto; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; justify-content:center; gap:2px; }
  .catnav-cats, .catnav-extra{ overflow:visible; border:0; padding:0; flex:0 0 auto; gap:2px; }
  .catnav-cats{ min-width:0; }
  /* the pinned group itself must wrap too — with 5+ links it was wider than
     the screen and pushed the page sideways */
  .catnav-cats, .catnav-extra{ flex-wrap:wrap; justify-content:center; max-width:100%; }
  .catnav .wrap, .catnav ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 2px; }
  .catnav a{ padding:7px 10px; font-size:12px; }
  .catnav a.nav-cat,
  .catnav .sep{ display:none; }
  .catnav .new::after{ top:3px; right:3px; }
}

/* page hero band (shared, used by Shop/Lessons/Builds) */
.page-hero{ border-bottom:1px solid var(--line-soft); background:radial-gradient(900px 280px at 12% -20%, var(--teal-glow), transparent 70%); }
.page-hero .wrap{ padding:48px 28px 40px; }
.page-hero h1{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4.4vw,52px); letter-spacing:-0.03em; line-height:1.0; margin-top:14px; }
.page-hero--slim .wrap{ padding:22px 28px; }
.page-hero p{ color:var(--text-dim); font-size:16px; max-width:56ch; margin:16px 0 0; line-height:1.6; }
.crumbs{ font-family:var(--mono); font-size:12px; color:var(--text-faint); letter-spacing:.04em; }
.crumbs a:hover{ color:var(--teal-text); }
/* phones: slim the page hero so products/content appear sooner. On the SHOP the
   breadcrumb already says "Home / Shop", so the big title band is trimmed hard. */
@media(max-width:720px){
  .page-hero .wrap{ padding:16px 18px 14px; }
  .page-hero p{ display:none !important; }
  .page-hero h1{ font-size:clamp(23px,6.5vw,30px); margin-top:6px; }
  .page-hero--slim .wrap{ padding:12px 18px; }
}