/* =========================================================
   Electrobotics — Arduino Parts Shop
   Design tokens: near-black background, mint-green accent,
   solder-orange CTA, Space Grotesk display / Inter body /
   JetBrains Mono for SKUs & prices.
   ========================================================= */

:root {
  --bg: #0A0B0D;
  --surface: #14161A;
  --surface-2: #1B1E23;
  --border: #262A30;
  --text: #F3F4F1;
  --text-dim: #9AA0A6;
  --accent: #5CE1B8;
  --accent-dark: #2FBE95;
  --accent-2: #FF8A3D;
  --danger: #FF6B6B;
  --radius: 14px;
  --radius-sm: 8px;
  /* Page width: fills wide screens (up to 1680px) but stays fluid below that.
     --container-text caps long-form reading columns so raising the page width
     doesn't stretch prose to an uncomfortable line length. */
  --container: 1680px;
  --container-text: 900px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--text-dim); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.mono { font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-family: var(--font-display);
  font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #06110C; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--accent-2); color: #1A0D00; }
.btn-secondary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10,11,13,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; height: 1.65em; padding-bottom: 10px; }
.logo span { color: var(--accent); }
.main-nav { display: flex; gap: 22px; margin-right: auto; flex-wrap: nowrap; flex-shrink: 0; }
/* white-space:nowrap keeps long labels such as "Über uns" on a single line
   instead of wrapping into two rows inside the header bar. */
.main-nav a { color: var(--text-dim); font-size: 14px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent;
  white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--text); border-color: var(--accent); }
.header-search { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 16px;
  /* Grabs the space between the navigation and the header actions. */
  flex: 1 1 520px; min-width: 260px; max-width: 720px; }
.mobile-search { position: relative; }

/* Search combo box */
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35); max-height: 60vh; overflow-y: auto; }
.search-suggest .suggest-item { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.search-suggest .suggest-item:hover, .search-suggest .suggest-item.active { background: var(--surface-2); }
.search-suggest .suggest-name { display: block; font-size: 14px; font-weight: 600; }
.search-suggest .suggest-snippet { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.search-suggest .suggest-meta { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.search-suggest mark { background: rgba(92,225,184,.22); color: var(--accent); border-radius: 3px; padding: 0 2px; }
.header-search input[name="q"] { padding: 0; border: none; border-radius: 0; background: none; }
.header-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; padding: 0; border-radius: 0; }
.header-search button { background: var(--surface-2); border: 1px solid transparent; border-radius: 999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.header-search button:hover { border-color: var(--accent); color: var(--accent); }
/* The field lights up as soon as it is clicked, and stays lit while it holds
   text, so it is always obvious where the typing goes. */
.header-search, .mobile-search { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.header-search:focus-within, .mobile-search:focus-within,
.header-search.is-filled, .mobile-search.is-filled {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(92,225,184,.16);
  background: var(--surface-2);
}
.header-search:focus-within button, .mobile-search:focus-within button { color: var(--accent); }
.header-search input::placeholder { color: var(--text-dim); }
.header-search:focus-within input::placeholder { opacity: .6; }

/* "nothing found" row inside the suggestion drop-down */
.search-suggest .suggest-empty { display: block; padding: 12px; font-size: 13px; color: var(--text-dim); text-align: center; }
.search-suggest .suggest-empty strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }

/* Info box for an empty result page */
.info-box { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; margin: 8px 0 28px; }
.info-box .info-icon { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.info-box h3 { font-size: 16px; margin: 0 0 4px; }
.info-box p { margin: 0; color: var(--text-dim); font-size: 14px; }
.info-box a { color: var(--accent); }

/* Secondary hint text: help under a form field, notes in table cells, the
   small print beside a value. Used in the admin and on shop pages (the name is
   historical). As a paragraph or block it keeps a little space to what follows;
   inside a line (span, table cell) it only changes size and colour. */
.admin-note { font-size: 13px; line-height: 1.5; color: var(--text-dim); font-weight: 400; }
p.admin-note, div.admin-note { margin: 6px 0 12px; }
span.admin-note { display: inline; }
.admin-note a { color: var(--accent); }
.admin-note a:hover { text-decoration: underline; }
.admin-note strong { color: var(--text); font-weight: 600; }
.field .admin-note { margin: 4px 0 0; font-size: 12px; }

/* Checkbox lists where every option gets its own row. */
.check-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.check-list .check-inline { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; }
.check-list .check-inline input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; }

/* Content written in the WYSIWYG editor (product / course descriptions). */
.rich-content { font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { color: var(--text); margin: 22px 0 8px; line-height: 1.25; }
.rich-content h1 { font-size: 24px; } .rich-content h2 { font-size: 20px; }
.rich-content h3 { font-size: 17px; } .rich-content h4 { font-size: 15px; }
.rich-content p { margin: 0 0 12px; }
.rich-content a { color: var(--accent); text-decoration: underline; }
.rich-content ul, .rich-content ol { margin: 0 0 12px; padding-left: 22px; }
.rich-content li { margin-bottom: 4px; }
.rich-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }
.rich-content iframe, .rich-content video { max-width: 100%; width: 100%; aspect-ratio: 16/9; height: auto;
  border: 0; border-radius: var(--radius-sm); margin: 8px 0; background: var(--surface-2); }
.rich-content blockquote { margin: 12px 0; padding: 8px 16px; border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rich-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; }
.rich-content code { font-family: var(--font-mono); font-size: 13px; }
.rich-content table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.rich-content th, .rich-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.rich-content th { background: var(--surface-2); color: var(--text); }
.rich-content hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* Link to an external map on a course. */
.map-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 14px; }
.map-link:hover { text-decoration: underline; }

/* "Remove" is the same text link for bought and rented lines. */
.remove-link:hover { text-decoration: underline; }

/* Strikethrough base price next to the strategy price on the storefront. */
.price-was { color: var(--text-dim); text-decoration: line-through; font-size: .82em; margin-right: 6px; }
.price-now { color: var(--accent); font-weight: 700; }

/* Pricing preview table: dropped prices green, raised prices amber. */
#price-preview .price-down { color: var(--accent); font-weight: 600; }
#price-preview .price-up { color: #FFC456; font-weight: 600; }
.linkish { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 0 2px; font-size: 12px; }
.linkish:hover:not(:disabled) { color: var(--accent); }
.linkish:disabled { opacity: .3; cursor: default; }

/* Unread badge on a nav label / section heading. */
.nav-alert { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 8px; border-radius: 999px; background: var(--danger, #FF6B6B); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.admin-nav a .nav-alert { margin-left: auto; }

/* A team reply the customer has not seen yet. */
.support-reply.is-new { border-left-color: var(--danger, #FF6B6B); }
.reply-new-tag { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px;
  background: rgba(255,107,107,.16); color: #FF6B6B; font-size: 11px; font-weight: 700; }

/* ---- Product media upload widget (admin) ---- */
.media-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 22px; border: 2px dashed var(--border); border-radius: var(--radius); color: var(--text-dim);
  cursor: pointer; text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.media-drop:hover, .media-drop:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.media-drop.is-drag { border-color: var(--accent); background: rgba(92,225,184,.08); color: var(--accent); }
.media-drop.is-busy { opacity: .6; pointer-events: none; }
.media-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.media-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.media-item.is-first { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.media-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--surface); flex: 0 0 auto; }
.media-path { flex: 1 1 auto; font-size: 13px; color: var(--text); word-break: break-all; }
.media-badge { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(92,225,184,.16); color: var(--accent); font-size: 10px; font-weight: 700; }
.media-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Thumbnail preview grid above the media list. */
.media-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.media-thumbs:empty { display: none; }
.media-thumb-cell { position: relative; width: 72px; height: 72px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.media-thumb-cell img, .media-thumb-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-cell .media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none; }

/* Lightbox picture/video inside the shared modal window. */
.media-lightbox-window { max-width: 90vw; }
.media-lightbox-body { display: flex; align-items: center; justify-content: center; padding: 8px; }
.media-lightbox-body img, .media-lightbox-body video { max-width: 100%; max-height: 80vh; border-radius: var(--radius-sm); }

/* ---- Product detail gallery (storefront) ---- */
.gallery { display: flex; gap: 14px; }
.gallery-strip { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.gallery-thumb { width: 60px; height: 60px; padding: 0; border: 2px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--surface-2); cursor: pointer; }
.gallery-thumb.active { border-color: var(--accent); }
.gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main { position: relative; flex: 1 1 auto; min-width: 0; width: 100%; height: 460px;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
/* Fixed-size container: the image is centred and scaled to fit within both
   the width and the height (its larger dimension bounds the fit). Any area
   the image does not cover is filled with the white container background. */
.gallery-slide { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.gallery-slide.active { display: flex; }
.gallery-slide img, .gallery-slide video { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; }
@media (max-width: 560px) { .gallery-main { height: 340px; } }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff; cursor: pointer; transition: background-color .15s ease; }
.gallery-nav:hover { background: rgba(0,0,0,.75); }
.gallery-nav.prev { left: 10px; } .gallery-nav.next { right: 10px; }
@media (max-width: 560px) {
  .gallery { flex-direction: column-reverse; }
  .gallery-strip { flex-direction: row; flex-wrap: wrap; }
  .gallery-thumb { width: 52px; height: 52px; }
}

/* ---- Seat availability of a course date ---- */
.seat-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.seat-badge.seat-ok   { background: rgba(92,225,184,.14); color: var(--accent); border: 1px solid rgba(92,225,184,.45); }
.seat-badge.seat-low  { background: rgba(255,196,86,.14); color: #FFC456; border: 1px solid rgba(255,196,86,.5); }
.seat-badge.seat-full { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

/* Registration phase of a course */
.phase-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; }
.phase-tag.phase-open   { background: rgba(92,225,184,.14); color: var(--accent); border: 1px solid rgba(92,225,184,.45); }
.phase-tag.phase-closed { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

/* ---- Support conversation on the profile page ---- */
.support-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.support-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.support-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.support-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.support-subject { font-weight: 600; color: var(--text); margin: 0 0 4px; }
.support-body { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.support-reply { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--accent); }
.support-reply-label { display: block; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.support-reply p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; }

/* ---- Modal dialog (contact form) ---- */
/* Everything except the dialog itself is blurred while it is open. */
body.has-modal { overflow: hidden; }
body.has-modal > *:not(.modal-backdrop) { filter: blur(5px); pointer-events: none; }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(8,10,12,.55); overflow-y: auto; }
.modal-window { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.55); margin: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-close { background: none; border: 0; color: var(--text-dim); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px 22px 22px; }
.modal-body .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---- Search results: pages, courses and articles ---- */
.search-group-title { font-size: 15px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .06em; margin: 32px 0 14px; }
.search-group-title:first-of-type { margin-top: 0; }
.search-hits { display: flex; flex-direction: column; gap: 10px; }
.search-hit { display: block; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease; }
.search-hit:hover { border-color: var(--accent); transform: translateY(-2px); }
.search-hit .hit-type { display: inline-block; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); margin-bottom: 6px; }
.search-hit .hit-type.hit-course { color: var(--accent); }
.search-hit .hit-type.hit-article { color: var(--lend); }
.search-hit .hit-title { display: block; font-size: 16px; color: var(--text); font-weight: 600; }
.search-hit .hit-snippet { display: block; font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.search-suggest .suggest-page .suggest-meta { color: var(--text-dim); font-style: italic; }

/* Quantity stepper inside the lending box. */
.lend-qty-field { margin: 12px 0 0; max-width: 170px; }
.lend-qty-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-link { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.cart-link:hover { border-color: var(--accent); color: var(--accent); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--accent-2); color: #1A0D00; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.user-menu { display: flex; gap: 8px; }
.lang-switch { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-right: 2px; }

/* ---------- Mobile menu (hamburger + drawer) ---------- */
.nav-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle .bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .18s ease, opacity .18s ease; }
.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--bg); max-height: calc(100vh - 64px); overflow-y: auto; }
.mobile-menu.open { animation: navSlide .18s ease-out; }
@keyframes navSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mobile-menu-inner { padding: 16px 0 22px; display: flex; flex-direction: column; gap: 16px; }
.mobile-search { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 16px; }
.mobile-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; padding: 0; }
.mobile-search button { background: var(--surface-2); border: none; border-radius: 999px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a { display: flex; align-items: center; gap: 8px; padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); }
.mobile-nav a.active { color: var(--accent); }
.mobile-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 8px; }
.mobile-menu-actions .btn { width: 100%; justify-content: center; text-align: center; }
.cart-badge.inline { position: static; margin-left: 4px; }
body.nav-locked { overflow: hidden; }
.lang-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; color: var(--text-dim); }
.lang-link:hover { color: var(--text); }
.lang-link.active { background: var(--accent); color: #06110C; }

.i18n-tabs { display: flex; gap: 6px; margin: 18px 0 14px; border-bottom: 1px solid var(--border); }
.i18n-tab-btn { background: none; border: none; padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; }
.i18n-tab-btn.active { color: var(--accent); border-color: var(--accent); }
.i18n-tab-panel { padding-top: 4px; }

/* ---------- Checkout: validation, billing toggle, coupon box ---------- */
.req { color: var(--accent-2); font-weight: 600; }
.field-error { display: block; color: var(--danger, #FF6B6B); font-size: 12px; margin-top: 4px; min-height: 0; }
.field-hint { display: block; color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.field input.invalid, .field textarea.invalid { border-color: var(--danger, #FF6B6B); }
.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; font-size: 14px; cursor: pointer; }
.checkbox-row input { width: auto; }
.billing-block { border-left: 2px solid var(--border); padding-left: 16px; margin-bottom: 18px; }
.coupon-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.coupon-box label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input-row input { flex: 1; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); color: var(--accent); }

/* ---------- Scroll-reveal animations (fade/slide/scale in on scroll) ---------- */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity 1s ease, transform 1s ease; }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }
.reveal-left { opacity: 0; transform: translateX(-48px); transition: opacity .9s ease, transform .9s ease; }
.reveal-left.is-visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(48px); transition: opacity .9s ease, transform .9s ease; }
.reveal-right.is-visible { opacity: 1; transform: none; }

/* ---------- Simple fade-in video block (landing page & about page) ---------- */
.video-block { padding: 64px 0 96px; text-align: center; }
.video-block video { display: block; max-width: 820px; width: 100%; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.video-block .video-caption { margin-top: 16px; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; }
.video-block + .section { padding-top: 80px; }
.video-block + .container { padding-top: 80px; }

/* ---------- Phases section (replaces "Shop by category" on the landing page) ---------- */
.phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.phase-card .phase-media { aspect-ratio: 4/3; overflow: hidden; }
.phase-card .phase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.phase-card:hover .phase-media img { transform: scale(1.06); }
.phase-card .phase-body { padding: 28px 26px 32px; }
.phase-card .phase-num { font-family: var(--font-mono); color: var(--accent); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.phase-card h3 { font-size: 24px; margin: 10px 0 12px; }
.phase-card p { font-size: 14px; margin: 0; }

/* ---------- About page ---------- */
.about-hero { text-align: center; padding: 40px 0 20px; }
.about-hero h1 { font-size: clamp(34px, 5vw, 56px); max-width: 780px; margin: 0 auto 18px; }
.about-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 72px 0; max-width: 1400px; margin-inline: auto;
  /* The slide-in (reveal-left/right starts 48px off to the side) must not widen the page. */
  overflow-x: clip; }
.about-block.reverse .about-block-media { order: 2; }
.about-block-media img, .about-block-media video { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.about-block-text .eyebrow { margin-bottom: 18px; }
.about-block-text h2 { font-size: 30px; }
.about-cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 56px 0; text-align: center; }
.about-stats .stat-num { font-family: var(--font-mono); font-size: 40px; font-weight: 700; color: var(--accent); }
.about-stats .stat-label { color: var(--text-dim); font-size: 13px; margin-top: 6px; }

@media (max-width: 900px) {
  .phase-grid { grid-template-columns: 1fr; }
  .about-block, .about-block.reverse { grid-template-columns: 1fr; }
  .about-block.reverse .about-block-media { order: 0; }
  .about-stats { grid-template-columns: 1fr; }
  .video-block video { max-width: 94vw; }
}

.flash { padding: 12px 0; text-align: center; font-size: 14px; font-weight: 500; }
.flash-success { background: rgba(92,225,184,.12); color: var(--accent); }
.flash-error { background: rgba(255,107,107,.12); color: var(--danger); }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 24px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 500px;
  background: radial-gradient(60% 60% at 50% 0%, rgba(92,225,184,.18), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(92,225,184,.1); border: 1px solid rgba(92,225,184,.3); padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(36px, 5.5vw, 64px); }
.hero .lead { font-size: 18px; max-width: 560px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; }

/* ---------- Section headings ---------- */
.section { padding: 64px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 16px 24px; flex-wrap: wrap; }
.section-head h2 { font-size: 30px; }
.section-head p { margin: 0; }

/* ---------- Horizontal product scroller (landing page) ---------- */
.scroller { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 24px; scroll-snap-type: x mandatory; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.scroller .product-card { flex: 0 0 260px; width: 260px; min-width: 260px; max-width: 260px; scroll-snap-align: start; }

/* ---------- Product grid (catalog) ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.product-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.product-card .thumb { aspect-ratio: 1.1/1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: 20px; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card .cat-tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.product-card h3 { font-size: 16px; margin: 0; }
.product-card .desc { font-size: 13px; margin: 0; flex: 1; }
.product-card .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.product-card .price { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); }

/* ---------- Filters (catalog) ---------- */
.catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.filter-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.filter-box h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 12px; }
.filter-box a { display: block; padding: 7px 0; font-size: 14px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.filter-box a:last-child { border-bottom: none; }
.filter-box a:hover, .filter-box a.active { color: var(--accent); }

/* ---------- Product detail ---------- */
/* Two equal columns would each grow past 800px on a 1680px page, which makes
   the description an uncomfortable line length, so this block keeps its own
   ceiling and centres inside the wider container. */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 1320px; margin-inline: auto; }
.product-detail .thumb-lg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; }
.product-detail .price-lg { font-family: var(--font-mono); font-size: 34px; font-weight: 700; margin: 12px 0; }
.stock-badge { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(92,225,184,.12); color: var(--accent); margin-bottom: 16px; }
.stock-badge.low { background: rgba(255,138,61,.12); color: var(--accent-2); }
.qty-selector { display: flex; align-items: center; gap: 10px; margin: 24px 0; }
.qty-selector button { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.qty-selector button:hover { border-color: var(--accent); color: var(--accent); }
.qty-selector input { width: 56px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px; font-family: var(--font-mono); }

/* ---------- Forms ---------- */
.form-card { max-width: 480px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
.form-card.wide { max-width: 760px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text-dim); }

/* Global form-control theming — every text field, select, combo box and
   textarea across the shop (checkout, admin, CMS) uses the same grey the
   checkout fields use, instead of the browser-default white. */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
input[type="datetime-local"], select, textarea {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 90px; }
select { appearance: none; -webkit-appearance: none; }
select option { background: var(--surface-2); color: var(--text); }
/* Tint the checkboxes/radios to match the theme instead of white */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* Hide native number-input spinners on the quantity fields (they already have +/- buttons) */
.qty-selector input[type="number"], .qty-mini input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-selector input[type="number"]::-webkit-outer-spin-button,
.qty-selector input[type="number"]::-webkit-inner-spin-button,
.qty-mini input[type="number"]::-webkit-outer-spin-button,
.qty-mini input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Fields that were filled automatically (e.g. by the customer/product combo). */
.field.autofilled label::after { content: " +"; color: var(--accent); font-weight: 700; }
.field.autofilled input { background: rgba(92, 225, 184, .14); border-color: var(--accent); }
/* Dashboard stat groups */
.stat-group { margin-bottom: 24px; }
.stat-group > h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 0 0 10px; }
.stat-group .stat-grid { margin-bottom: 0; }
/* Order position rows */
.order-pos-row { border: 1px dashed var(--border); border-radius: 8px; padding: 12px 12px 0; margin-bottom: 12px; position: relative; }
.order-pos-row .pos-remove { position: absolute; top: 8px; right: 8px; }
.form-note { font-size: 13px; text-align: center; margin-top: 18px; }
.form-note a { color: var(--accent); font-weight: 500; }
.error-list { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.3); color: var(--danger); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.error-list ul { margin: 0; padding-left: 18px; }
/* Success counterpart of .error-list, used for the confirmation after a form
   post (review saved, stock notification, course booking, profile changes). */
.notice { background: rgba(92,225,184,.1); border: 1px solid rgba(92,225,184,.3); color: var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }

/* ---------- Cart ---------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cart-table td { padding: 16px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-product { display: flex; align-items: center; gap: 14px; }
.cart-product img { width: 60px; height: 60px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px; }
.cart-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: 100px; }
.cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--text-dim); }
.cart-summary .row.total { color: var(--text); font-size: 20px; font-weight: 700; font-family: var(--font-mono); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.qty-mini { display: flex; align-items: center; gap: 6px; }
.qty-mini button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.qty-mini button:hover { border-color: var(--accent); color: var(--accent); }
.qty-mini input { width: auto; min-width: 2.5ch; box-sizing: content-box; padding: 4px 8px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.remove-link { color: var(--danger); font-size: 13px; }
.empty-state { text-align: center; padding: 80px 0; }

/* ---------- Payment method selector ---------- */
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.pay-method { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 10px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 500; background: var(--surface-2); }
.pay-method input { display: none; }
.pay-method.selected, .pay-method:has(input:checked) { border-color: var(--accent); color: var(--accent); background: rgba(92,225,184,.08); }

/* ---------- Order summary blocks ---------- */
.order-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.order-box h3 { font-size: 16px; }
.badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); }
.badge-paid { background: rgba(92,225,184,.15); color: var(--accent); }
.badge-pending { background: rgba(255,138,61,.15); color: var(--accent-2); }
.badge-failed, .badge-cancelled { background: rgba(255,107,107,.15); color: var(--danger); }

/* ---------- Tables (admin/profile) ---------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table th { background: var(--surface-2); text-align: left; font-size: 12px; text-transform: uppercase; color: var(--text-dim); padding: 12px 16px; }
.data-table td { padding: 14px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.data-table tr:hover td { background: rgba(255,255,255,.02); }

/* ---------- Admin layout ---------- */
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; min-height: 60vh; }
/* Grid children default to min-width:auto and would grow to their widest
   content (long tables, button rows) — the cause of the sideways scrolling
   on phones. They may shrink; wide content scrolls inside itself instead. */
.admin-layout > * { min-width: 0; }
.admin-nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: sticky; top: 96px;
  /* Own scroll container: wheel events over the section list scroll the list
     itself and are not chained to the page / main section. */
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.admin-nav::-webkit-scrollbar { width: 8px; }
.admin-nav::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-dim); margin-bottom: 4px; }
.admin-nav a:hover, .admin-nav a.active { background: var(--surface-2); color: var(--accent); }
.admin-nav a span { min-width: 0; }

.admin-nav-toggle { display: none; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: 600 14px var(--font-body); cursor: pointer; text-align: left; }
.admin-nav-toggle-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-toggle-icon { color: var(--accent); font-size: 16px; }
.admin-nav-toggle-chevron { color: var(--text-dim); transition: transform .18s ease; }
.admin-nav-toggle[aria-expanded="true"] .admin-nav-toggle-chevron { transform: rotate(90deg); }
.admin-nav-toggle .nav-new { margin-left: 0; }
.admin-nav-toggle .nav-new { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #06231a; font-size: 11px; font-weight: 700; font-family: var(--font-mono); }

/* ---------- Admin sidebar tree ----------
   Sections with subsections expand in place. The chevron toggles; the label
   itself still navigates, so a section is always reachable in one click and
   its subsections in two. This replaced the row of tabs that used to sit at
   the top of pages like Admin > E-Mails. */
.admin-nav .nav-item { margin-bottom: 2px; }
.admin-nav .nav-item > a { margin-bottom: 0; }
.admin-nav .nav-expand {
  display: block; margin-left: auto; flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .55; font-size: 15px; line-height: 1; padding: 4px 2px 4px 8px;
  transition: transform .18s ease, opacity .18s ease; transform: rotate(0deg);
}
.admin-nav .nav-item > a:hover .nav-expand { opacity: 1; }
.admin-nav .nav-item.open > a .nav-expand { transform: rotate(90deg); opacity: 1; }
.admin-nav .nav-item .nav-alert + .nav-expand { margin-left: 6px; }

.admin-nav .nav-children { display: none; margin: 2px 0 6px; padding-left: 10px;
  border-left: 1px solid var(--border); }
.admin-nav .nav-item.open .nav-children { display: block; }
.admin-nav .nav-children a {
  font-size: 13px; padding: 7px 10px; margin-bottom: 1px; color: var(--text-dim);
  gap: 8px; opacity: .92;
}
.admin-nav .nav-children a::before {
  content: ''; flex: 0 0 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .45;
}
.admin-nav .nav-children a:hover, .admin-nav .nav-children a.active { opacity: 1; }
/* A group whose current page is one of its children (CMS) reads as current
   even though the parent link itself is not the page being shown. */
.admin-nav .nav-item.in-section > a { color: var(--accent); }
.admin-nav .nav-children a.active::before { opacity: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-card .num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--accent); }
.stat-card .label { font-size: 13px; color: var(--text-dim); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 24px; margin-top: 64px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-col a { display: block; color: var(--text-dim); font-size: 14px; padding: 4px 0; }
.footer-col a:hover { color: var(--accent); }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-legal-links a { color: var(--text-dim); font-size: 12px; }
.footer-legal-links a:hover { color: var(--accent); }

.legal-content { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.75; }
.legal-content h2 { font-size: 20px; margin-top: 2em; }
.legal-content h3 { font-size: 16px; margin-top: 1.6em; }
.legal-content p { color: var(--text); margin-bottom: 1.1em; }
.legal-content ul { color: var(--text); padding-left: 22px; margin-bottom: 1.1em; }
.legal-content a { color: var(--accent); }
.legal-content .updated-note { color: var(--text-dim); font-size: 13px; margin-bottom: 32px; }
.profile-sections { display: flex; flex-direction: column; gap: 24px; }
.profile-sections .order-box { margin: 0; }

/* Reusable brand lockup: the word "Electrobotics" + the robot icon on its
   right, wrapped in .brand-lockup so it can be copy-pasted anywhere. */
.brand-lockup { display: inline-flex; align-items: center; gap: 0; }
.brand-lockup .brand-word { color: #fff; white-space: nowrap; }
.brand-lockup .brand-word span { color: var(--accent); }
.brand-lockup .brand-icon { height: 1em; width: auto; display: inline-block; flex: none; margin-left: .4em; }
.logo .brand-lockup .brand-icon,
.brand-lockup.brand-lockup-lg .brand-icon { height: 1.15em; }

/* Inline-SVG icon colours, driven by the scoped .bi-* classes (renamed from
   the SVG's cls-* classes when it's injected). Defaults mirror the artwork:
   solid white shapes (bi-1, bi-3) and white-stroked outlines (bi-2, bi-4).
   Only fill/stroke that the artwork actually sets to a visible colour are
   defined here — the fill of bi-2/bi-4 stays "none" (outline only). */
.brand-icon .bi-1 { fill: #fff; stroke: #fff; stroke-width: 30px; stroke-miterlimit: 10; }
.brand-icon .bi-2 { fill: none; stroke: #fff; stroke-width: 40px; stroke-linecap: round; stroke-miterlimit: 10; }
.brand-icon .bi-3 { fill: #fff; stroke: #fff; stroke-width: 40px; stroke-miterlimit: 10; }
.brand-icon .bi-4 { fill: none; stroke: #fff; stroke-width: 40px; stroke-miterlimit: 10; }
.brand-icon .bi-1, .brand-icon .bi-2, .brand-icon .bi-3, .brand-icon .bi-4 { transition: fill .15s ease, stroke .15s ease; }

/* On hover recolour to cyan ONLY the fill/stroke that are actually set to a
   visible colour; fill:none elements (bi-2, bi-4) keep their transparent fill
   and only their stroke changes. Reverts automatically when the mouse leaves. */
.brand-lockup:hover .brand-icon .bi-1,
.brand-lockup:hover .brand-icon .bi-3,
a:hover .brand-lockup .brand-icon .bi-1,
a:hover .brand-lockup .brand-icon .bi-3 { fill: var(--accent); }
.brand-lockup:hover .brand-icon .bi-1,
.brand-lockup:hover .brand-icon .bi-2,
.brand-lockup:hover .brand-icon .bi-3,
.brand-lockup:hover .brand-icon .bi-4,
a:hover .brand-lockup .brand-icon .bi-1,
a:hover .brand-lockup .brand-icon .bi-2,
a:hover .brand-lockup .brand-icon .bi-3,
a:hover .brand-lockup .brand-icon .bi-4 { stroke: var(--accent); }

/* ---------- Misc ---------- */
.trust-row { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 24px; opacity: .7; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.breadcrumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--accent); }

@media (max-width: 1280px) {
  /* Nav, search, language and account move into the hamburger drawer instead
     of being hidden, so nothing in the header becomes unreachable. The full
     header (nav + search + language + account buttons) needs about 1280px —
     below that it used to push the page sideways (tablets, small laptops). */
  .main-nav, .header-search, .header-actions .lang-switch, .header-actions .user-menu,
  .header-actions > .btn { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu.open { display: block; }
  .header-inner { height: 64px; padding: 0; gap: 12px; flex-wrap: nowrap; }
  .header-actions { margin-left: auto; gap: 8px; }
}

@media (max-width: 900px) {
  .catalog-layout, .product-detail, .cart-layout { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* The sidebar folds into a menu button; opened, it is a normal block (not sticky). */
  .admin-nav-toggle { display: flex; }
  .admin-nav { display: none; position: static; max-height: none; overflow: visible; }
  .admin-nav.is-open { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pay-methods { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .about-block-text h2 { font-size: 24px; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .header-actions { gap: 6px; }
  .lang-switch { padding: 2px; }
  .lang-link { padding: 4px 7px; }
  .user-menu { gap: 4px; }
  .hero-actions, .about-cta-row { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .about-cta-row .btn { width: 100%; }
  .product-grid, .article-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .field-row { grid-template-columns: 1fr; }
  .cart-table thead { display: none; }
  .cart-table td { display: block; width: 100%; }
  .cart-table tr { display: block; border-bottom: 2px solid var(--border); padding: 10px 0; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .stat-grid { grid-template-columns: 1fr; }
  .phase-card .phase-body { padding: 20px; }
  .form-card, .form-card.wide { padding: 24px 20px; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; padding: 18px; background: rgba(6,8,10,.55); backdrop-filter: blur(3px); }
.cookie-banner.is-open { display: flex; justify-content: center; }
.cookie-box { width: 100%; max-width: 880px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.cookie-box h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.cookie-box p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.cookie-box a { color: var(--accent); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-actions .btn { flex: 0 0 auto; }
.cookie-actions .btn-primary { background: var(--accent); color: #06110C; border-color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .cookie-actions { flex-direction: column-reverse; } .cookie-actions .btn { width: 100%; } }

.cookie-cats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cookie-cat { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 10px 14px; }
.cookie-cat > summary { list-style: none; cursor: pointer; }
.cookie-cat > summary::-webkit-details-marker { display: none; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-cat-name { font-weight: 600; }
.cookie-cat-desc { display: block; color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.cookie-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cookie-table th { color: var(--text-dim); font-weight: 600; }
.cookie-table code { font-family: var(--font-mono); font-size: 12px; }
.cookie-empty { font-size: 13px; margin: 10px 0 0; }

/* Toggle switch */
.cookie-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-slider { position: absolute; inset: 0; background: #3a3f46; border-radius: 999px; transition: .2s; }
.cookie-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.cookie-switch input:checked + .cookie-slider { background: var(--accent); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(20px); }
.cookie-switch input:disabled + .cookie-slider { opacity: .6; cursor: not-allowed; }

/* ---------- Admin cookie manager ---------- */
.cookie-admin-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cookie-group-title { font-family: var(--font-display); font-size: 16px; margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
.cookie-group-title .badge { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.cookie-admin-side .field textarea { width: 100%; }
@media (max-width: 900px) { .cookie-admin-cols { grid-template-columns: 1fr; } }

/* Make cookie categories look clickable + show/hide affordance */
.cookie-cat > summary:hover { background: rgba(92,225,184,.05); border-radius: 8px; }
.cookie-cat-toggle { display: block; margin-top: 6px; }
.cookie-show { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cookie-show::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.cookie-cat[open] .cookie-show::before { transform: rotate(90deg); }
.cookie-cat[open] .cookie-show { opacity: .8; }

/* ---------- Admin emails section ---------- */
.email-type-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 6px; }
.email-send-edited { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.email-send-edited h4 { margin: 0 0 10px; font-size: 14px; }
#email-editor { background: #fff; color: #111; border-radius: 0 0 8px 8px; min-height: 220px; }
#email-editor .ql-editor { min-height: 220px; }
.cookie-group-title form { margin-left: 8px; }

/* WYSIWYG raw textareas (before/without TinyMCE): vertical resize */
textarea.wysiwyg { width: 100%; min-height: 240px; resize: vertical; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: var(--font-mono); font-size: 13px; }
.editor-bg-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bg-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.bg-pick input[type="color"] { width: 34px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.email-lang-switch { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; }
/* TinyMCE: let the whole editor be resized vertically */
.tox-tinymce { resize: vertical !important; overflow: hidden; min-height: 300px; }

/* Cookie admin: stacked single-column layout (form first, then categories) */
.cookie-admin-stack { display: flex; flex-direction: column; gap: 20px; }
.cookie-admin-stack .cookie-admin-side { max-width: 640px; }

/* ---------- Order confirmation totals (borderless, aligned) ---------- */
.totals-table { border-collapse: collapse; margin: 20px auto 0; border: none; }
.totals-table td { border: none; padding: 4px 0; font-size: 15px; }
.totals-table .t-label { text-align: right; padding-right: 28px; color: var(--text-dim); white-space: nowrap; }
.totals-table .t-value { text-align: left; white-space: nowrap; }
.totals-table .t-total .t-label,
.totals-table .t-total .t-value { font-weight: 700; color: var(--text); font-size: 17px; padding-top: 10px; }
.order-email-note { margin-top: 18px; color: var(--text-dim); font-size: 14px; }

/* Admin emails: spacing for order-action buttons + log action buttons */
#orders .row-actions form { margin: 3px 6px 3px 0; }
#orders .row-actions .btn-xs { margin: 0; }
#log .row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#log .row-actions .btn-xs,
#notiflog .row-actions .btn-xs { display: inline-flex; align-items: center; justify-content: center; }
a.btn-xs { text-decoration: none; }

/* Make .btn-xs render as a real button (also as <a>), matching ghost style */
.btn-xs { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.btn-xs:hover { border-color: var(--accent); color: var(--accent); }

/* Legal notices: price/delivery/checkout */
.price-note, .delivery-note { font-size: 12.5px; color: var(--text-dim); margin: 4px 0 0; }
.price-note a, .delivery-note a, .checkout-legal-note a { color: var(--accent); }
.price-note-sm { font-size: 11px; color: var(--text-dim); margin: 2px 0 0; }
.checkout-legal-note { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.checkbox-row input { margin-top: 3px; }

/* Cart/checkout VAT hint */
.vat-note { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
.vat-line { font-size: 12.5px; color: var(--text-dim); }
.pay-stripe-methods { font-size: 12px; color: var(--text-dim); }

/* Prominent "create account" checkbox on checkout */
.create-account-box {
  display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 4px;
  padding: 14px 16px; border: 2px solid var(--accent); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: pointer;
}
.create-account-box input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.create-account-box strong { display: block; font-size: 14px; color: var(--text); }
.create-account-desc { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }

/* Payment method 2-column icon grid (Stripe/PayPal panels) */
.pay-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 10px 0 6px; }
.pay-icon-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.pay-icon-item svg { flex: none; border-radius: 3px; }
.pay-grid-note { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 0; }
.checkout-login-hint { font-size: 13px; margin: 0 0 14px; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; }
.checkout-login-hint a { color: var(--accent); font-weight: 600; }
.btn-block:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@media (max-width: 520px){ .pay-icon-grid { grid-template-columns: 1fr; } }

/* Different delivery address group */
.delivery-block { border-left: 2px solid var(--border); padding-left: 14px; margin: 6px 0 10px; }

/* Checkout summary separator line */
.cart-summary .summary-rule { border-top: 1px solid var(--border); height: 0; padding: 0; margin: 8px 0; }


/* ================================================================
   Inventory badges, reviews (heart rating), courses & lending
   ================================================================ */
.stock-badge.out { background: rgba(255,107,107,.14); color: #FF6B6B; border-color: rgba(255,107,107,.4); }

.restock-box { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.restock-box h4 { margin: 0 0 6px; font-size: 15px; }
.restock-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.restock-form .field { margin: 0; min-width: 240px; }

/* Rating: five hearts, outline always visible, filled red up to the value. */
:root { --heart: #FF4D6D; }
.rating-hearts { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.rating-hearts .heart { display: block; overflow: visible; }
.rating-hearts .heart-fill { fill: var(--heart); }
.rating-hearts .heart-outline { fill: none; stroke: var(--heart); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.rating-value { margin-left: 6px; font-weight: 600; font-size: 13px; }
.rating-count { margin-left: 4px; font-size: 12px; color: var(--text-dim); }
.rating-line { margin: 6px 0 10px; }
.rating-line-sm { margin: 0 0 6px; }
.rating-jump { margin-left: 8px; font-size: 12px; color: var(--accent); }

/* Review form: pick 1–5 hearts. Inputs are rendered 5→1 and shown right-to-left,
   so a hovered label plus all following siblings are the hearts up to it. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.heart-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; position: relative; }
.heart-input input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.heart-input label, .field .heart-input label { display: block; cursor: pointer; padding: 2px; margin: 0; border-radius: 8px; line-height: 0; }
.heart-input svg path { fill: transparent; stroke: var(--heart); stroke-width: 1.6; stroke-linejoin: round; transition: fill .12s ease, transform .12s ease; }
.heart-input svg { transition: transform .12s ease; }
.heart-input input:checked ~ label svg path { fill: var(--heart); }
/* While hovering, the hover preview replaces the saved choice. */
.heart-input:hover input:checked ~ label svg path { fill: transparent; }
.heart-input.heart-input:hover label:hover svg path,
.heart-input.heart-input:hover label:hover ~ label svg path { fill: var(--heart); }
.heart-input label:hover svg { transform: scale(1.12); }
.heart-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.reviews-section { margin-top: 56px; }
.review-list { display: grid; gap: 14px; margin-bottom: 24px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.review-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.review-card h4 { margin: 8px 0 4px; font-size: 15px; }
.verified-badge { background: rgba(92,225,184,.16); color: var(--accent); border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.review-photo { max-width: 260px; border-radius: 10px; margin-top: 10px; display: block; }

/* The logged-in customer's own review: highlighted and labelled, so it is
   recognisable among the others — also while it is still being moderated,
   where only its author sees it at all. */
.review-card.own { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.own-badge { background: var(--accent); color: var(--bg); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.status-badge { border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.status-badge.pending { background: rgba(255,193,94,.16); color: #ffc15e; }
.status-badge.rejected { background: rgba(255,107,107,.12); color: var(--danger); }
.review-visibility { margin: 8px 0 0; }
.review-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.review-form.locked fieldset { opacity: .6; }
.review-form.locked .heart-input label { cursor: default; }
.review-locked-note { margin: -4px 0 14px; }

.course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.course-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.course-head h3 { margin: 6px 0 2px; }
.course-sub { color: var(--text-dim); margin: 0; }
.course-price { text-align: right; }
.course-price .price { font-size: 20px; font-weight: 700; display: block; }
.course-price small { display: block; color: var(--text-dim); font-size: 12px; }
.slot-table { margin-top: 14px; }
.booking-form { margin: 10px 0; }


/* ================================================================
   Lendable products — blue marking, calendar picker
   ================================================================ */
:root { --lend: #2F9DFF; --lend-soft: rgba(47,157,255,.16); --lend-line: rgba(47,157,255,.9); }

.lend-tag { display: inline-block; background: var(--lend-soft); color: var(--lend);
  border: 1px solid var(--lend-line); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; }
/* A rental tile keeps the shape of a normal product tile, only the frame is
   painted in the bright lending blue so both kinds are told apart instantly. */
/* A rental tile looks like any other tile until it is hovered — then the
   frame lights up in the bright lending blue. */
.product-card.lendable:hover { border-color: var(--lend); box-shadow: 0 0 0 1px var(--lend), 0 0 26px rgba(47,157,255,.28); }
.product-card.lendable .thumb { box-shadow: inset 0 -3px 0 var(--lend); }
/* The Rental badge sits on its own line, right under the availability badge. */
.product-card .cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-card .cat-row .lend-tag { margin: 0; }
/* Buy + rent side by side when a product offers both. */
.price-row .btn-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* A rental tile keeps the width of every other tile. Its two buttons fit
   because the add label is abbreviated on rental tiles (common.add_short). */
.product-card.lendable .price-row .btn-group { flex-wrap: nowrap; gap: 6px; }
.product-card.lendable .price-row .btn-group > * { white-space: nowrap; padding-inline: 10px; }
/* Virtual "Lending" filter in the catalog sidebar, in the lending blue. */
.filter-box a.cat-lending { color: var(--lend); }
.filter-box a.cat-lending.active, .filter-box a.cat-lending:hover { color: var(--lend); border-color: var(--lend); }
.lend-note { color: var(--lend); font-size: 12px; margin: 0 0 6px; }
.lend-period { color: var(--lend); font-size: 12px; }
.deposit-note { color: var(--text-dim); font-size: 11px; }
.lend-row td { background: rgba(47,157,255,.06); }
.lend-summary-row span:first-child { display: block; }

.btn-lend { background: var(--lend); border-color: var(--lend); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; }
.btn-lend:hover { filter: brightness(1.08); }
.btn-lend[disabled] { opacity: .5; cursor: not-allowed; }
.cal-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.lend-box { margin-top: 18px; padding: 16px; border: 1px solid var(--lend-line);
  border-radius: var(--radius); background: rgba(47,157,255,.07); }
.lend-box h4 { margin: 0 0 6px; font-size: 15px; color: var(--lend); }
.lend-terms { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }

.lend-calendar { margin-top: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; max-width: 340px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { text-align: center; font-size: 11px; color: var(--text-dim); padding-bottom: 4px; }
.cal-day { border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  border-radius: 8px; padding: 7px 0; font-size: 13px; cursor: pointer; }
.cal-day.empty { background: none; cursor: default; }
.cal-day:hover:not(.taken):not(.empty) { border-color: var(--lend); }
.cal-day.taken { background: rgba(255,107,107,.16); color: #FF6B6B; cursor: not-allowed; text-decoration: line-through; }
/* Weekends and days inside the lead time: not bookable, but nothing is wrong
   with them — striped grey instead of the red of an already rented day. */
.cal-day.unavailable { color: var(--text-dim); cursor: not-allowed;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0 4px, rgba(255,255,255,.11) 4px 8px); }
.cal-day.unavailable:hover { border-color: transparent; }
.cal-legend .legend.unavailable { background: repeating-linear-gradient(135deg,
  rgba(255,255,255,.06) 0 3px, rgba(255,255,255,.16) 3px 6px); }
.cal-day.sel { background: var(--lend); color: #fff; }
/* The current day always stays recognisable, selected or not. */
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.cal-day.today.sel { box-shadow: inset 0 0 0 2px #fff; }
.cal-legend .legend.today { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
/* A period that is too short or too long is explained in red. */
.cal-summary.is-error { color: #FF6B6B; }
.cal-day.inrange { background: var(--lend-soft); color: var(--lend); }
.cal-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); margin: 10px 0 6px; flex-wrap: wrap; }
.cal-legend .legend { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-legend .legend.free { background: var(--surface-2); }
.cal-legend .legend.taken { background: rgba(255,107,107,.5); }
.cal-legend .legend.sel { background: var(--lend); }
.cal-summary { font-size: 13px; margin: 6px 0 10px; }

.lend-fields { grid-column: 1 / -1; }
.lend-subfields { margin-top: 10px; }
.row-muted { opacity: .55; }

/* Order history rows open the order details (profile.php → order_details.php). */
.order-history .row-link { cursor: pointer; }
.order-history .row-link a { color: inherit; text-decoration: none; }
.order-history .row-link:hover td { background: rgba(92,225,184,.06); }
.order-history .row-link:hover a { color: var(--accent); }

/* Order details for the customer (order_details.php) */
.back-link { font-size: 14px; margin: 0 0 10px; }
.back-link a { color: var(--text-dim); text-decoration: none; }
.back-link a:hover { color: var(--accent); }
.order-detail { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 20px; align-items: start; }
.order-detail-facts { display: flex; flex-direction: column; gap: 20px; }
.order-detail .order-box { margin: 0; }
.fact-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 12px 0 0; font-size: 14px; align-items: center; }
.fact-list dt { color: var(--text-dim); }
.fact-list dd { margin: 0; }
.order-address { font-style: normal; font-size: 14px; line-height: 1.6; margin-top: 10px; }
.order-comment { font-size: 14px; margin: 10px 0 0; color: var(--text-dim); }
.order-detail .col-num { text-align: right; white-space: nowrap; }
.order-detail-totals { margin: 20px 0 0 auto; }
.badge-new, .badge-accepted, .badge-processing, .badge-shipped { background: rgba(125,160,255,.15); color: #9db4ff; }
.badge-completed { background: rgba(92,225,184,.15); color: var(--accent); }
.badge-rejected, .badge-refunded { background: rgba(255,255,255,.08); color: var(--text-dim); }
.reorder { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.reorder-form { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reorder-form .form-note { text-align: left; margin: 0; flex: 1 1 280px; color: var(--text-dim); }
.reorder-form .btn[disabled] { opacity: .5; cursor: not-allowed; }
.reorder-done { font-size: 15px; margin: 0 0 16px; color: var(--accent); }
.reorder-done a { color: var(--accent); font-weight: 600; margin-left: 8px; }
.reorder-hints { margin: 0 0 20px; }
.reorder-hints > div { flex: 1 1 auto; min-width: 0; }
.hint-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.hint-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--text-dim); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); }
.hint-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.hint-table tr:last-child td { border-bottom: none; }
.hint-table .col-num { text-align: right; padding-right: 18px; }
.hint-table td:last-child { color: var(--text-dim); }
@media (max-width: 900px) {
  .order-detail { grid-template-columns: 1fr; }
}
.order-items-table { width: 100%; border-collapse: collapse; }
.order-items-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.order-items-table td { padding: 16px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
@media (max-width: 640px) {
  /* Product on its own line, the figures labelled underneath. */
  .order-items-table thead, .hint-table thead { display: none; }
  .order-items-table tr, .hint-table tr { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .order-items-table td, .hint-table td { display: block; border: none; padding: 0; }
  .order-items-table td:first-child, .hint-table td:first-child, .hint-table td:last-child { flex: 0 0 100%; }
  .order-items-table .col-num, .hint-table .col-num { text-align: left; padding: 0; font-size: 13px; }
  .order-items-table td[data-label]::before, .hint-table td[data-label]::before {
    content: attr(data-label) ": "; color: var(--text-dim); font-family: var(--font-body, inherit); }
  .order-items-table td:last-child { margin-left: auto; }
  .order-detail-totals { margin-left: auto; margin-right: 0; }
}
.order-history-hint { font-size: 13px; margin: 4px 0 14px; }

/* "New" flag on rows the admin has not seen since the last visit (admin lists). */
.new-flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .02em; vertical-align: middle; white-space: nowrap;
  background: var(--accent); color: #06231a; }
/* Admin lists shown above their add/edit form. */
.data-table.admin-list-top { margin-bottom: 28px; }

/* Order history: item count, "Details" hover preview, per-order "add to cart". */
/* On narrow screens the table keeps its horizontal scrolling (no hover there anyway). */
@media (min-width: 1100px) { .order-history { overflow: visible; } }
@media (min-width: 601px) and (max-width: 1099px) { .order-history { display: block; overflow-x: auto; } }
.order-history thead th:first-child { border-top-left-radius: var(--radius); }
.order-history thead th:last-child { border-top-right-radius: var(--radius); }
.order-history .col-num { text-align: right; }
.order-history .order-reorder { margin: 0; }
.order-history .order-reorder .btn { white-space: nowrap; }
.order-peek { position: relative; white-space: nowrap; }
.order-history .row-link .order-peek > a { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.order-peek-pop {
  display: none; position: absolute; z-index: 30; top: calc(100% - 6px); right: 0; width: max-content; min-width: 360px; max-width: 520px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); cursor: default; white-space: normal;
}
.order-peek:hover .order-peek-pop, .order-peek:focus-within .order-peek-pop { display: block; }
.order-history .row-link:hover .order-peek-pop td { background: transparent; }
.order-peek-pop table { width: 100%; border-collapse: collapse; font-size: 13px; }
.order-peek-pop th { background: none; padding: 4px 6px; font-size: 11px; text-transform: uppercase; color: var(--text-dim); text-align: left; border-bottom: 1px solid var(--border); }
.order-peek-pop td { padding: 5px 6px; border: none; font-size: 13px; }
.order-peek-pop .col-num { text-align: right; white-space: nowrap; }
.order-peek-pop tfoot td { border-top: 1px solid var(--border); font-weight: 600; }
.order-peek-pop .lend-tag { font-size: 10px; }

/* Total quantity under the "Qty" column of the order details. */
.order-items-table tfoot td { border-bottom: none; font-weight: 600; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 640px) {
  .order-items-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; }
  .order-items-table tfoot td:empty { display: none; }
  .order-items-table tfoot td[data-label]::before { content: none; }
  .order-items-table tfoot td:first-child { flex: 1 1 auto; }
  .order-items-table tfoot .col-num { font-size: 15px; }
}
.order-peek-pop td:first-child { min-width: 220px; }

/* Anchored admin forms / order detail: keep the heading clear of the sticky header. */
#order-detail, #product-form, #category-form, #coupon-form, #cookie-form, #customer-form, #course-form { scroll-margin-top: 110px; }

/* Admin sidebar: rows added since the admin last opened that list. Accent
   colour, not the red of the unread support badge — new is not alarming. */
.admin-nav .nav-new { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: auto; border-radius: 999px; background: var(--accent); color: #06231a;
  font-size: 11px; font-weight: 700; line-height: 1; font-family: var(--font-mono); flex: 0 0 auto; }
.admin-nav .nav-item .nav-new + .nav-expand { margin-left: 6px; }
.admin-nav .nav-children a .nav-new { min-width: 16px; height: 16px; font-size: 10px; }

/* Sortable table headers (assets/js/table_sort.js, rule in TABLES.md). */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: '↕'; display: inline-block; margin-left: 6px; font-size: 11px; opacity: .35; transition: opacity .15s ease; }
th.sortable:hover::after, th.sortable:focus-visible::after { opacity: .8; }
th.sortable.sort-asc::after { content: '▲'; opacity: 1; color: var(--accent); font-size: 9px; }
th.sortable.sort-desc::after { content: '▼'; opacity: 1; color: var(--accent); font-size: 9px; }
th.sortable:hover, th.sortable.sort-asc, th.sortable.sort-desc { color: var(--text); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ================================================================
   Admin dashboard charts (admin/index.php, assets/js/admin_charts.js)
   ================================================================ */
.tnum { font-variant-numeric: tabular-nums; }
.dash-charts { margin: 8px 0 36px; }
.dash-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-filter h3 { margin: 0; font-size: 18px; }
.range-switch { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.range-switch a { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.range-switch a:hover { color: var(--text); background: var(--surface-2); }
.range-switch a.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.kpi-label { font-size: 13px; color: var(--text-dim); }
.kpi-value { font-family: var(--font-body); font-size: 30px; font-weight: 700; color: var(--text); margin: 4px 0 6px; letter-spacing: -.01em; }
.kpi-delta { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.kpi-delta.up strong, .kpi-delta.up span[aria-hidden] { color: var(--accent); }
.kpi-delta.down strong, .kpi-delta.down span[aria-hidden] { color: var(--danger); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 12px; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card header h4 { margin: 0; font-size: 15px; }
.chart-card header p { margin: 2px 0 12px; font-size: 12px; color: var(--text-dim); }
.chart-box { width: 100%; min-height: 120px; }
.chart-box svg { display: block; overflow: visible; font-family: var(--font-body); }
.chart-box svg:focus { outline: none; }
.chart-box svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.chart-box .chart-col { transition: opacity .12s ease; }
.chart-box .is-dim { opacity: .45; }
.chart-box .donut-seg { transition: opacity .12s ease; cursor: default; }
.chart-empty { color: var(--text-dim); font-size: 14px; padding: 40px 0; text-align: center; margin: 0; }

.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--text-dim); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .tnum { color: var(--text); font-weight: 600; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.swatch.status-paid { background: #0ca30c; } .swatch.status-pending { background: #fab219; }
.swatch.status-failed { background: #d03b3b; } .swatch.status-refunded { background: #6b7078; }

.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut-wrap.is-stacked { flex-direction: column; align-items: stretch; }
.donut-wrap.is-stacked svg { align-self: center; }
.chart-legend-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.chart-legend-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.chart-legend-list li:hover, .chart-legend-list li.is-active, .chart-legend-list li:focus-visible { background: var(--surface-2); outline: none; }
.chart-legend-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend-list .val { color: var(--text); font-weight: 600; }
.chart-legend-list .share { color: var(--text-dim); min-width: 48px; text-align: right; }

.chart-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.5); min-width: 140px; }
.chart-tip-title { color: var(--text-dim); margin-bottom: 4px; white-space: nowrap; }
.chart-tip-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1.7; }
.chart-tip-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip-label { color: var(--text-dim); }
.chart-tip-key { display: inline-block; flex: 0 0 auto; width: 12px; }
.chart-tip-key.line { height: 2px; border-radius: 1px; }
.chart-tip-key.box { height: 10px; width: 10px; border-radius: 2px; }

.chart-table { margin-top: 8px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: var(--text-dim); padding: 6px 0; width: max-content; }
.chart-table summary:hover { color: var(--accent); }
.chart-table .data-table { margin: 8px 0 6px; }
.dash-overview-title { margin: 8px 0 14px; font-size: 18px; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .kpi-row { grid-template-columns: 1fr; } }

/* ================================================================
   Delivery points (checkout, shipping info, admin > shipping)
   ================================================================ */
.delivery-mode { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 18px 0 14px; }
.delivery-mode legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.delivery-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; cursor: pointer; }
.delivery-option:has(input:checked) { border-color: var(--accent); background: rgba(92,225,184,.06); }
.delivery-option input { margin-top: 3px; accent-color: var(--accent); }
.delivery-option strong { display: block; font-size: 14px; }
.delivery-option-desc { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.delivery-point-block { margin-top: 14px; }
.delivery-point-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.dp-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.dp-name { font-size: 15px; }
.dp-kind { font-size: 11px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 999px; background: rgba(92,225,184,.12); color: var(--accent); }
.dp-cost { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.dp-address, .dp-instructions { margin: 8px 0 0; font-size: 14px; }
.dp-instructions { color: var(--text-dim); }
.delivery-point-card .map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--accent); font-size: 14px; }
.map-consent { margin-top: 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface); min-height: 140px; display: flex; align-items: center; overflow: hidden; }
.map-consent-body { padding: 14px 16px; }
.map-consent-title { margin: 0 0 4px; font-weight: 600; color: var(--text); font-size: 14px; }
.map-consent-text { margin: 0 0 10px; font-size: 13px; }
.map-consent-text a { color: var(--accent); }
.map-consent-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.map-remember { font-size: 13px; color: var(--text-dim); margin: 0; }
.map-consent.is-loaded { border-style: solid; padding: 0; min-height: 0; }
.map-consent iframe { display: block; width: 100%; height: 260px; border: 0; }
.sum-point-note { color: var(--text-dim); font-size: 12px; }
.delivery-point-list { padding-left: 18px; }
.delivery-point-list li { margin-bottom: 12px; }
.delivery-point-list a { color: var(--accent); }
.point-form { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.point-form h4 { margin: 0 0 12px; }
.dp-map-row { grid-template-columns: 1fr 3fr; }
@media (max-width: 600px) { .dp-map-row { grid-template-columns: 1fr; } .dp-cost { margin-left: 0; } }

/* Delivery points: handover times (checkout card, admin form) */
.dp-handover { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 14px; color: var(--text); }
.dp-handover svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.dp-handover-label { color: var(--text-dim); }
.dp-agreement-note { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

fieldset.dp-handover { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 4px 0 16px; color: inherit; }
fieldset.dp-handover legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.dp-windows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.dp-window { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-window select, .dp-window input[type="time"] { width: auto; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; color-scheme: dark; }
.dp-window select:focus, .dp-window input[type="time"]:focus { border-color: var(--accent); }
.dp-window label { margin: 0; }
.dp-window-sep { color: var(--text-dim); }
.dp-window.is-invalid input[type="time"] { border-color: var(--danger); }
.dp-agreement { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; }
.dp-agreement input { margin-top: 3px; }
.dp-handover-preview { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }
.dp-handover-preview strong { color: var(--text); }

/* Action buttons in a table cell may wrap instead of widening the table. */
td.row-actions-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-width: 150px; }

/* Admin tables scroll sideways inside their own box at every width, so a
   table with many columns never widens the page (wrapper added in _nav_close.php). */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin-bottom: 0; }
.table-scroll:has(> .admin-list-top) { margin-bottom: 28px; }
.order-delivery-point { text-align: left; margin: 20px auto 0; max-width: 560px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-2); }
.order-delivery-point p { margin: 4px 0; font-size: 14px; color: var(--text); }