/* XLIME GEAR — additive polish.
   Loaded AFTER app.css. Everything here is either a bug fix or a small
   enhancement; nothing redefines the brand palette or the layout system, so
   deleting this file returns the site exactly to its compiled-CSS state. */

/* ------------------------------------------------------------------ header */
/* Fix: the PHP port wraps the header's children in .header-default so the
   mobile search bar can swap places with them. That wrapper became a block
   box inside a flex row, which stacked the logo, nav, search and icons
   vertically and pushed them out of the 72px bar. display:contents removes
   the wrapper from the box tree so its children are direct flex children of
   .inner again — which is what the compiled CSS is written against. */
.header .header-default { display: contents; }
.header .header-default[hidden] { display: none; }

/* At laptop widths three nav labels wrapped onto a second line, which pushed
   the bar to 87px and broke the row's baseline. Let the labels stay whole and
   let the search field give up the space instead. */
.header .nav a { white-space: nowrap; }
.header .store-search { min-width: 0; flex: 0 1 auto; }
.header .store-search .search { min-width: 0; width: 100%; }

/* --------------------------------------------------------- empty catalogue */
/* Product rails render nothing until the catalogue is populated, which left
   five headings sitting above 8px of dead space. The store takes enquiries
   rather than payments, so an unlisted range becomes the enquiry it would
   have led to anyway. */
.rail-empty {
  /* .light-panel repaints its subtree #111, which made the heading black on
     this near-black card. Pin the card's own colours so it reads correctly on
     light and dark panels, in both themes. */
  color: var(--text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lime);
}

.rail-empty-mark {
  font: 800 30px/1 var(--font-barlow), "Arial Narrow", sans-serif;
  letter-spacing: .06em;
  color: var(--lime);
  opacity: .5;
  white-space: nowrap;
}

.rail-empty h3 {
  color: var(--text);
  font: 800 21px/1.05 var(--font-barlow), "Arial Narrow", sans-serif;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.rail-empty p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.rail-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .rail-empty { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .rail-empty-mark { display: none; }
  .rail-empty-actions .btn { flex: 1; }
}

/* ------------------------------------------------------------- micro-polish */
@media (hover: hover) {
  .product-card,
  .cat-card,
  .main-category-card { transition: transform .25s ease, border-color .25s ease; }

  .product-card:hover { transform: translateY(-3px); border-color: var(--lime); }
  .cat-card:hover,
  .main-category-card:hover { transform: translateY(-2px); }
}

/* Keep the lime focus ring visible above sticky/overlapping surfaces. */
:where(a, button, input, select, textarea):focus-visible { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .cat-card,
  .main-category-card { transition: none; }

  .product-card:hover,
  .cat-card:hover,
  .main-category-card:hover { transform: none; }
}

/* ------------------------------------------------------------- brand logo */
/* The lockup ships as two files stacked in one grid cell — a light-on-dark
   variant and a dark-on-light one — with the theme hiding whichever does not
   apply. Everything below is contrast or sizing; the artwork, the palette and
   the surrounding layout are untouched.

   1. `.brand-logo{display:block}` is declared after `.brand-logo-light{
      display:none}` at equal specificity, so it won, and in the DARK theme
      both variants painted at once. The dark-on-light file — solid black "L"
      and "XLIME" — landed on top, on a near-black bar, leaving only the lime
      X readable. That is the whole reason the mark looked washed out.
      Re-assert the switch one level up so exactly one variant ever paints. */
.brand-logo-wrap .brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-wrap .brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-wrap .brand-logo-light { display: block; }

/* 2. The footer and the mega-menu promo stay near-black in BOTH themes, so in
      the light theme the dark-on-light variant vanished into them. Pin those
      two panels to the variant they were drawn for. */
[data-theme="light"] .footer .brand-logo-wrap .brand-logo-dark,
[data-theme="light"] .mega-promo .brand-logo-wrap .brand-logo-dark { display: block; }

[data-theme="light"] .footer .brand-logo-wrap .brand-logo-light,
[data-theme="light"] .mega-promo .brand-logo-wrap .brand-logo-light { display: none; }

/* 3. The lockup is 480x376 but the header reserves a 118x52 box, so
      object-fit:contain drew it at 66x52 and left ~26px of dead space either
      side. Raising only the height grows the mark into room the header had
      already set aside — the box keeps its 118px width, so nothing beside it
      moves — and "XLIME GEAR" reads as text rather than a smudge. The bar is
      72px tall, 62px below 760px, so both caps still clear it. */
.header .brand-logo { height: 62px; }

@media (max-width: 760px) {
  .header .brand-logo { height: 50px; }
}

/* ------------------------------------------------ requested overrides */
/* Applied as supplied. Loaded after app.css, so these win the ties against
   the compiled base rules of the same specificity. */
.hero-contact-static {
    color: #070a08;
    background: #C8FF00;
    border-bottom: 1px solid #ff5c6c;
}

a {
    color: #797669;
    text-decoration: none;
}

.hero-contact-grid span {
    color: #070a08;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.subcat-chip {
    font: 700 9px var(--font-space);
    text-transform: uppercase;
    background: #0000002e;
    border: 1px solid #ffffff42;
    padding: 6px 8px;
    background: #C8FF00;
    color: black;
}

/* ------------------------------------------------- info strips on lime */
/* Both contact strips now sit on the brand lime, so everything drawn on them
   has to be repainted for a light background. They share .hero-contact-grid
   markup — the hero strip under the carousel and the pre-footer support strip
   (.trust) — so one rule set standardises spacing, icons and dividers across
   both, which is what makes them read as the same component.

   Icons are lucide SVGs with stroke="currentColor" fill="none", so setting
   `color` on the chip is enough to recolour them. Previously they inherited
   the lime accent and were invisible against the lime background. */

/* --- icon chips -------------------------------------------------------- */
.hero-contact-static .ico,
.trust .ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #070a08;
  border: 1px solid rgba(0, 0, 0, .28);
  background: rgba(0, 0, 0, .05);
}

.hero-contact-static .ico svg,
.trust .ico svg {
  width: 16px;
  height: 16px;
}

/* --- labels and values -------------------------------------------------- */
/* .trust > a span already exists at (0,1,2), so the value selectors below go
   one level deeper to win rather than resorting to !important. */
.hero-contact-static b,
.trust > a > div > b,
.trust > div > div > b {
  color: #070a08;
  font: 800 10px var(--font-space), system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-contact-static .hero-contact-grid > a > div > span,
.trust > a > div > span,
.trust > div > div > span {
  display: block;
  color: #070a08;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- the pre-footer strip's own lime surface + dividers ----------------- */
/* .trust fakes dividers with a 1px grid gap showing the container through, so
   the container becomes the divider tint and the cells become lime. */
.trust {
  /* The 1px grid gap shows this background through as the divider. The hero
     strip's dividers are rgba(0,0,0,.2) over lime, which resolves to #a0cc00 —
     use that flat value here so both strips draw the same line, instead of a
     translucent black that would fall through to the dark section behind. */
  background: #a0cc00;
  border: 1px solid #a0cc00;
  gap: 1px;
}

.trust > a,
.trust > div {
  background: var(--lime);
  color: #070a08;
  min-height: 84px;
  padding: 0 18px;
  gap: 11px;
  align-items: center;
  border-right: 0;
}

.trust > a:hover {
  background: var(--lime2);
}

/* --- hero strip dividers, matched to the support strip ------------------ */
.hero-contact-static .hero-contact-grid > a,
.hero-contact-static .hero-contact-grid > div {
  border-right-color: rgba(0, 0, 0, .2);
}

.hero-contact-static .hero-contact-grid > a:hover {
  background: rgba(0, 0, 0, .05);
}

@media (max-width: 760px) {
  .trust > a,
  .trust > div {
    min-height: 72px;
    padding: 0 12px;
    gap: 8px;
  }
  .hero-contact-static .ico,
  .trust .ico {
    width: 28px;
    height: 28px;
  }
}

/* ------------------------------------------------------------- footer */
/* The Help column mixes links with plain <span> labels for pages that do not
   exist yet. Spans are inline, so "Delivery Returns Size Guide FAQs" ran
   together on one line at the browser's default 16px. Match .footer a exactly
   so the column stacks like Shop and Sports. */
.footer-grid > div > span {
  display: block;
  font-size: 12px;
  line-height: 18px;
  margin: 8px 0;
  color: #aeb2ab;
}

/* Social icons: lime chip with a near-black glyph, matching the Subscribe
   button. Present in the Next build's globals.css but missing from the
   compiled app.css the PHP site serves. */
.footer .socials a {
  background: var(--lime);
  border: 1px solid var(--lime);
  color: #080a08;
}

.footer .socials a:hover {
  background: var(--lime2);
  border-color: var(--lime2);
  color: #080a08;
}

/* --- light theme: keep the hero strip lime ------------------------------ */
/* [data-theme="light"] .hero-contact-static repaints the strip white at
   (0,2,0), which beat the lime override and left the two strips mismatched in
   light mode — hero white, support lime. Re-assert lime at matching
   specificity so both strips look identical in both themes. */
[data-theme="light"] .hero-contact-static {
  background: var(--lime);
  color: #070a08;
  border-bottom-color: #ff5c6c;
}

[data-theme="light"] .hero-contact-static .ico {
  color: #070a08;
  border-color: rgba(0, 0, 0, .28);
  background: rgba(0, 0, 0, .05);
}

[data-theme="light"] .hero-contact-static .hero-contact-grid > a,
[data-theme="light"] .hero-contact-static .hero-contact-grid > div {
  border-color: rgba(0, 0, 0, .2);
}

[data-theme="light"] .hero-contact-static .hero-contact-grid > a > div > span {
  color: #070a08;
}

/* --- small screens ------------------------------------------------------ */
/* The label/value rules above are more specific than the existing ≤760px
   shrink rules, so restate the smaller sizes here or the text overruns its
   cell on a phone. */
@media (max-width: 760px) {
  .hero-contact-static b,
  .trust > a > div > b,
  .trust > div > div > b {
    font-size: 8px;
    letter-spacing: .03em;
  }

  .hero-contact-static .hero-contact-grid > a > div > span,
  .trust > a > div > span,
  .trust > div > div > span {
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
  }
}

/* ------------------------------------------- admin: sortable media list */
/* Drag-and-drop gallery ordering in the product editor. Built on the existing
   admin tokens so it inherits both themes; nothing here is page-specific. */
/* The editor's gallery/variants pair. Its own class rather than .adm-two,
   which carries a different column ratio for the record-detail pages. */
/* Stacked, not side by side: the variants table carries min-width:760px, so a
   half-width column forced it to scroll horizontally on every screen. Full
   width at the form's own 940px lets the whole row show. minmax(0,…) keeps
   that min-width from blowing the column out. */
.adm-editor-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
  max-width: 940px;
}

.adm-sortable {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.adm-sortable-item {
  display: grid;
  grid-template-columns: auto 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: grab;
}

.adm-sortable-item.is-dragging {
  opacity: .45;
  border-color: var(--lime);
  cursor: grabbing;
}

.adm-sortable-grip {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -2px;
  padding: 0 2px;
  user-select: none;
}

.adm-sortable-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  background: var(--bg2);
  display: block;
}

.adm-sortable-body {
  min-width: 0;
}

.adm-sortable-alt {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

.adm-sortable-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.adm-sortable-actions .btn {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

/* The toast is created on demand by admin.js and toggled with [hidden]. */
.toast[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .adm-sortable-item {
    grid-template-columns: auto 44px minmax(0, 1fr);
  }
  .adm-sortable-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}