/* Militaria Relics — modern frontend stylesheet (Field direction).
   Legacy style.css has been fully retired; this file is the sole stylesheet. */
@layer tokens, base, layout, components, utilities;

@import "../fonts/stylesheet.css";

@layer tokens {
  :root {
    /* color */
    --paper: #f2eee6;
    --surface: #ffffff;
    --surface-alt: #efe9df;
    --ink: #211f1a;
    --muted: #726d63;
    --line: #e0dacd;
    --accent: #6d6d91;
    --accent-deep: #3f3f63;
    --on-accent: #efeef6;
    --danger: #b3261e;

    /* typography */
    --font-body: "AvenirRoman", system-ui, sans-serif;
    --font-body-bold: "AvenirHeavy", var(--font-body);
    --font-display: "Oswald", "AvenirHeavy", sans-serif;
    --h1: clamp(1.4rem, 1.05rem + 1.6vw, 1.9rem);
    --h2: clamp(1.2rem, 1rem + 1vw, 1.5rem);

    /* space (4px scale) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* radius / shadow */
    --r-sm: 4px; --r-md: 8px;
    --shadow-card: 0 2px 0 var(--accent), 0 8px 20px rgba(63, 63, 99, .08);
    --shadow-card-h: 0 2px 0 var(--accent-deep), 0 16px 32px rgba(63, 63, 99, .16);

    /* layout */
    --container: 1180px;
    --sidebar-w: 236px;
    --bp-sidebar: 900px;
  }
}

@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/oswald-400.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/oswald-600.woff2") format("woff2");
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    font-size: 16px;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--accent-deep); }

  /* heading margin reset — neutralizes legacy layout hacks like
     `h1 { margin-top: -36px }` that overlapped content during migration */
  h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); line-height: 1.2; }
  h1, h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--accent-deep); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .u-display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    line-height: 1.1;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}

@layer layout {
  /* Neutralize the legacy fixed 988px #container NOW (app.css layers beat the
     legacy layer) so the new shell is fluid and mobile-safe before Task 5
     deletes the legacy Layout group. Without this, #container's width:988px
     forces horizontal overflow at 390px. */
  #container { width: 100%; max-width: none; margin: 0; }

  .shell { width: 100%; max-width: var(--container); margin: 0 auto; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-7); min-width: 0; }

  @media (min-width: 900px) {
    .shell {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      align-items: start;
      gap: var(--sp-5);
      padding: 0 var(--sp-5);
    }
    .main { padding: var(--sp-5) 0 var(--sp-8); }
  }
}

@layer components {
  /* ---- top utility bar ---- */
  .topbar { background: var(--accent-deep); color: var(--on-accent); }
  .topbar__inner {
    max-width: var(--container); margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .topbar__toggle {
    display: inline-grid; gap: 4px; width: 30px; padding: 6px 4px;
    background: none; border: 0; cursor: pointer;
  }
  .topbar__toggle span { height: 2px; background: var(--on-accent); border-radius: 2px; }
  .topbar__brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--on-accent); }
  .topbar__mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 2px solid #b9b7d6; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  }
  .topbar__name { font-size: 15px; letter-spacing: .12em; }
  .topbar__search {
    display: flex; align-items: center; gap: var(--sp-2);
    background: #514f74; border-radius: var(--r-sm); padding: 6px 10px;
    flex: 1 1 100%; order: 9; margin-top: var(--sp-2); margin-left: auto;
  }
  /* higher specificity than the generic `input[type=text]` forms rule (Increment 5)
     so the search field stays a flush transparent field on the dark pill —
     resets its padding/margin/border/bg (the leaked margin-bottom was adding space under the box) */
  .topbar__search input[type=text] {
    flex: 1; min-width: 0; padding: 0; margin: 0;
    background: none; border: 0; color: var(--on-accent); font: inherit;
  }
  .topbar__search input::placeholder { color: #c9c7de; }
  .topbar__search button { background: none; border: 0; color: #c9c7de; cursor: pointer; font-size: 16px; }
  .topbar__util { display: none; }
  .topbar__util a { color: #cfcde0; font-size: 13px; }
  .topbar__util a:hover { color: #fff; }
  .topbar__cart {
    background: var(--accent); color: #fff !important; padding: 6px 12px; border-radius: var(--r-sm);
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
  }
  .topbar__cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px;
    background: #fff; color: var(--accent-deep); border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0;
  }
  .topbar__strap {
    background: var(--accent); color: var(--on-accent); text-align: center;
    letter-spacing: .3em; font-size: 10px; padding: 5px;
  }

  /* ---- search autocomplete (shopper topbar) ---- */
  .topbar__search { position: relative; }
  .ac-menu {
    position: absolute; z-index: 200; margin: 6px 0 0; padding: 4px;
    list-style: none; max-height: 70vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
  }
  .ac-menu--shop { top: 100%; right: 0; width: 340px; max-width: 92vw; }
  .ac-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2); border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
  }
  .ac-item--active { background: var(--surface-alt); }
  .ac-menu--shop .ac-thumb {
    width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover;
    border-radius: var(--r-sm); background: #eceae3;
  }
  .ac-menu--shop .ac-name {
    flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .ac-menu--shop .ac-price {
    flex: 0 0 auto; font-family: var(--font-display); font-weight: 600;
    color: var(--accent-deep); font-size: 13px; white-space: nowrap;
  }

  /* ---- empty state (no search results) ---- */
  .empty-state { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--muted); }
  .empty-state p { margin: 0 0 var(--sp-2); font-size: 16px; }
  .empty-state__hint { font-size: 13px; }

  @media (min-width: 720px) {
    /* logo stays left; margin-left:auto pushes the search + account/cart group to the right */
    .topbar__search { flex: 0 1 auto; order: 0; margin-top: 0; min-width: 220px; margin-left: auto; }
    .topbar__util { display: flex; align-items: center; gap: var(--sp-4); }
    .topbar__brand { margin-right: var(--sp-4); }
  }

  /* admin-only "Beheer" — standout vertical side tab reading bottom-to-top (-90°),
     fixed to the right edge below the header with spacing.
     writing-mode + rotate(180deg) = predictable box position + bottom-to-top text. */
  .topbar__admin {
    position: fixed; z-index: 200; top: 130px; right: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    background: var(--accent); color: #fff !important;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em;
    font-size: 13px; text-align: center; padding: 22px 13px; text-decoration: none;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;   /* rounds the inner (left) edge after the 180° flip */
    box-shadow: 0 0 16px rgba(24, 20, 30, .35);
  }
  .topbar__admin:hover { background: var(--accent-deep); color: #fff !important; }

  @media (min-width: 900px) {
    .topbar__toggle { display: none; }              /* categories become the sidebar */
  }

  /* ---- footer ---- */
  .site-footer { display: block; background: var(--accent-deep); color: var(--on-accent); margin-top: var(--sp-7); }
  .site-footer__inner {
    max-width: var(--container); margin: 0 auto; padding: var(--sp-5) var(--sp-4);
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between;
  }
  .site-footer__links { display: flex; gap: var(--sp-4); }
  .site-footer__links a { color: #cfcde0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
  .site-footer__links a:hover { color: #fff; }
  .site-footer__copy { color: #a9a7c0; font-size: 12px; margin: 0; }

  /* ---- breadcrumb (shell renders #breadcrumb into .main) ---- */
  /* overrides legacy `#breadcrumb { margin-top:-50px; font-family:TrajanRegular }`
     that assumed the old fixed layout and overlapped the new strapline. */
  #breadcrumb {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .1em; font-size: 11px; color: var(--muted);
  }
  #breadcrumb a { color: var(--muted); font-size: inherit; padding-right: .4em; }
  #breadcrumb a:hover { color: var(--accent-deep); text-decoration: none; }
  #breadcrumb a.parent { color: var(--accent-deep); font-size: inherit; }
}

@layer components {
  .catnav__head { display: flex; align-items: center; justify-content: space-between;
    background: var(--accent-deep); color: var(--on-accent); padding: var(--sp-3) var(--sp-4); }
  .catnav__title { font-size: 14px; letter-spacing: .14em; }
  .catnav__close { display: inline; background: none; border: 0; color: #cfcde0; font-size: 18px; cursor: pointer; }
  .catnav__userswitch { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }

  /* the recursive generate_menu() tree */
  .catnav__list ul { list-style: none; margin: 0; padding: 0; }
  .catnav__list > ul > li { border-bottom: 1px solid var(--line); }
  .catnav__list li { position: relative; }
  .catnav__list a {
    display: block; padding: 10px 4.4em 10px var(--sp-4);
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
    font-size: 13px; color: #3b382f;
  }
  .catnav__list li.current > a { color: var(--accent-deep); box-shadow: inset 3px 0 0 var(--accent); background: #e7e2d6; }
  .catnav__list a:hover { background: #e7e0d2; }
  /* .arrow + .i_cnt are siblings emitted AFTER the block <a> (and a parent's
     count comes after its children <ul>); pin them onto the category's own row. */
  .catnav__list .i_cnt { position: absolute; top: 10px; right: var(--sp-4);
    color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; pointer-events: none; }
  .catnav__list .arrow {
    position: absolute; top: 0; right: 2.2em; width: 2.2em; height: 38px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto; cursor: pointer;
  }
  .catnav__list .arrow::after { content: "▸"; color: var(--accent); font-size: 10px; }
  .catnav__list li.is-open > .arrow::after,
  .catnav__list li.current > .arrow::after { content: "▾"; }
  /* sub-categories: collapsed unless open/current (accordion) */
  .catnav__list ul.children { background: #e9e3d7; display: none; }
  .catnav__list li.is-open > ul.children,
  .catnav__list li.current > ul.children { display: block; }
  .catnav__list ul.children a { padding-left: var(--sp-6); text-transform: none;
    font-family: var(--font-body); font-size: 12.5px; color: #54503f; }

  /* ----- desktop rail ----- */
  @media (min-width: 900px) {
    /* full-height sidebar: no internal scroll — it pushes the footer down and the
       page scrolls (the app-shell body.items variant below gives it its own scroll) */
    .catnav { position: sticky; top: var(--sp-4); align-self: start;
      background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-md); }
    .catnav__head, .catnav__close { display: none; }
  }

  /* ----- mobile drawer ----- */
  @media (max-width: 899px) {
    .catnav {
      position: fixed; inset: 0 22% 0 0; z-index: 60; background: var(--surface-alt);
      transform: translateX(-100%); visibility: hidden;
      transition: transform .25s ease, visibility .25s; overflow: auto;
      box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
    }
    body.nav-open .catnav { transform: translateX(0); visibility: visible; }
    .nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(24, 20, 30, .55); border: 0; }
    .nav-scrim[hidden] { display: none; }
  }
}

@layer components {
  /* ---- product grid (initial page + AJAX rows unified) ---- */
  #items, #featured, #auctions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-4);
    margin: 0 0 var(--sp-6);
    padding: 0;
    float: none; width: auto;                 /* override legacy float:left;width:100% */
  }
  .row { display: contents; }                 /* AJAX row wrapper: its .items join the grid */
  .divider { display: none; }                 /* legacy float-clear separators no longer needed */
  /* section headers live inside the grid containers — span the full row (typography in Task 2) */
  #featured > h1, #auctions > h1 { grid-column: 1 / -1; }

  /* ---- card ---- */
  .item {
    position: relative;
    margin: 0; width: auto; min-height: 0; float: none;   /* override legacy 155px/240px/float */
    background: var(--surface);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-h); }
  /* keyboard focus indicator: the named image link inside the card is focusable
     (the .item_cover overlay is aria-hidden/tabindex=-1); outline on .item is
     not clipped by the grid ancestor */
  .item:focus-within { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

  /* whole card is one click target (legacy .item_cover was display:none) */
  .item_cover {
    display: block; position: absolute; inset: 0; z-index: 2;
    width: auto; height: auto;
  }
  .item_cover img { display: none; }          /* it carried a spacer gif */

  .item_img {
    width: auto; height: auto; border: 0; box-shadow: none;   /* override legacy 153px+border */
    aspect-ratio: 1; background: #eceae3; overflow: hidden;
  }
  .item_img img { width: 100%; height: 100%; object-fit: cover; }

  .item_info { padding: var(--sp-2) var(--sp-3) var(--sp-3); min-height: 0; }
  .item_name {
    font-size: 12.5px; line-height: 1.35; margin: 0 0 var(--sp-2); color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
  }

  /* ---- price ---- */
  .price_info { position: static; width: auto; }             /* override legacy absolute */
  .price_info p { margin: 0; line-height: 1.3; }
  .price_info p strong { font-weight: 400; color: var(--muted); font-size: 11px; }
  .item_price {
    float: none; font-family: var(--font-display); font-weight: 600;
    font-size: 16px; color: var(--accent-deep);
  }
  .item_price.sale { color: var(--muted); text-decoration: line-through; font-size: 12px; }

  /* ---- ribbon (text label, top-left) ---- */
  .ribbon {
    position: absolute; top: var(--sp-2); left: 0; right: auto; z-index: 3;
    width: auto; height: auto; background: var(--accent-deep); color: #fff;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
    font-size: 9.5px; line-height: 1; padding: 4px 9px;
  }
  .ribbon.featured::after   { content: "Featured"; }
  .ribbon.sale::after,    .ribbon.sale_xl::after    { content: "Sale"; }
  .ribbon.sold::after,    .ribbon.sold_xl::after    { content: "Sold"; }
  .ribbon.auction::after, .ribbon.auction_xl::after { content: "Auction"; }
  .ribbon.new::after,     .ribbon.new_xl::after     { content: "New"; }
  .ribbon.sale, .ribbon.sale_xl { background: #8a5a2b; }
  .ribbon.sold, .ribbon.sold_xl { background: #6b6b6b; }
}

@layer components {
  /* page title (category name) */
  #items_body > h2 {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
    color: var(--accent-deep); margin: 0 0 var(--sp-4);
  }
  #items_body > h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-top: var(--sp-2); }

  /* section headers live INSIDE the grid containers — span the full row */
  #featured > h1, #auctions > h1 {
    grid-column: 1 / -1;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; font-size: 1.2rem; color: var(--accent-deep);
    margin: var(--sp-4) 0 0;
  }

  /* category intro text */
  #intro_text {
    margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--line); color: var(--ink);
  }
}

@layer components {
  .item { opacity: 1; transition: transform .2s ease, box-shadow .2s ease, opacity .3s ease; }
  .item--enter { opacity: 0; }
}

@layer components {
  /* ================= single item / product detail ================= */
  #single_item { position: relative; }
  #single_item .col.left { float: none; width: auto; }          /* kill legacy 455px float */

  /* top: main image (left) + purchase panel (right), stacked on mobile */
  #to_cart {
    float: none; width: auto; margin: 0 0 var(--sp-5);
    display: grid; gap: var(--sp-5); align-items: start;
  }
  @media (min-width: 700px) {
    #to_cart { grid-template-columns: minmax(0, 300px) 1fr; }
  }

  /* main preview image (click opens PhotoSwipe full-res) */
  #to_cart > .item_img {
    float: none; width: auto; height: auto; border: 0; overflow: hidden;
    background: var(--surface-alt); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
  }
  #to_cart > .item_img a { display: block; }
  #to_cart > .item_img img { width: 100%; height: auto; display: block; }

  /* related-image thumbnail strip */
  #item_imgs {
    float: none; width: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: 0 0 var(--sp-6);
  }
  #item_imgs .item_img {
    float: none; width: 72px; height: 72px; margin: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-alt);
  }
  #item_imgs .item_img a, #item_imgs .item_img img { display: block; width: 100%; height: 100%; }
  #item_imgs img { object-fit: cover; }

  /* description: full width below, readable prose */
  #single_item .item_description {
    margin: 0; max-width: 90ch; color: var(--ink); line-height: 1.6;
  }
  #single_item .item_description ul { list-style: square; padding-left: 1.3em; }
}

@layer components {
  /* ---- purchase panel ---- */
  #to_cart #item_info { float: none; margin: 0; position: relative; }
  #item_info_wrapper, #to_cart #item_info .item_info {
    margin: 0; min-height: 0; background: none; box-shadow: none; padding: 0;
    text-align: left; font-size: inherit;
  }
  #single_item .item_name {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
    font-weight: 600; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); color: var(--accent-deep);
    line-height: 1.2; margin: 0 0 var(--sp-2);
    /* the product title shows in full — reset the shop-card 2-line clamp/min-height
       that leaks from the unscoped .item_name rule (was clipping descenders) */
    display: block; overflow: visible; -webkit-line-clamp: none; min-height: 0;
  }
  #single_item .item_code {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em;
    font-size: 11px; color: var(--muted); margin: 0 0 var(--sp-4);
  }
  #to_cart .price_info { position: static; width: auto; margin: 0 0 var(--sp-4); }
  #to_cart .price_info p { margin: 0 0 var(--sp-1); padding: 0; }
  #to_cart .price_info p strong { font-weight: 400; color: var(--muted); font-size: 12px; }
  #single_item .item_price {
    float: none; font-family: var(--font-display); font-weight: 600;
    font-size: 22px; color: var(--accent-deep);
  }
  #single_item .item_price.sale { color: var(--muted); text-decoration: line-through; font-size: 15px; }

  /* ---- buttons (shared component) ---- */
  .btn {
    display: inline-block; font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: 13px; color: #fff; background: var(--accent-deep);
    border: 0; border-radius: var(--r-sm); padding: 10px 18px; cursor: pointer;
    text-align: center; text-decoration: none; transition: background .15s ease;
    /* override legacy @group Forms `input[type=submit],a.btn { height:25px; box-shadow:inset…; position:relative }`
       and its `line-height:25px` — set line-height explicitly so .btn stays self-contained
       once @group Forms is retired in a later increment (else buttons silently shrink) */
    height: auto; box-shadow: none; position: static; line-height: 1.5;
  }
  .btn:hover { background: var(--accent); color: #fff; }
  .btn a, .btn:visited { color: #fff; }
  a.to_cart.btn { background: var(--accent); }
  a.to_cart.btn:hover { background: var(--accent-deep); }
  #to_cart .btns { position: static; text-align: left; margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  #to_cart .btns p { flex: 1 1 100%; margin: 0 0 var(--sp-1); color: var(--muted); font-size: 13px; }
  #pop_edit { position: absolute; top: -45px; right: 0; z-index: 10 }

  /* ---- auction bid form ---- */
  #single_item .auction {
    background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 0;
    box-shadow: none;   /* override legacy `.item_info .auction { box-shadow: inset … }` */
  }
  #single_item .auction p { margin: 0 0 var(--sp-2); }
  #single_item .auction p.by_you { color: var(--accent-deep); font-weight: 600; }
  #single_item .auction p.sub { font-style: italic; font-size: 90%; color: var(--muted); }
  #single_item .auction span.bid_history { float: none; color: var(--muted); font-size: 90%; }
  #single_item .auction input[type=text], #single_item .auction #new_bid {
    width: 110px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
    font: inherit; margin-right: var(--sp-2);
  }
  #single_item .auction input[type=submit] {
    float: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
    font-size: 13px; color: #fff; background: var(--accent-deep); border: 0; border-radius: var(--r-sm);
    padding: 9px 16px; cursor: pointer;
    height: auto; box-shadow: none;   /* override legacy @group Forms input[type=submit] height:25px + inset shadow */
  }
  #single_item .auction input[type=submit]:hover { background: var(--accent); }

  /* ---- big (_xl) ribbon on the detail image + missing featured_xl label ---- */
  .ribbon.featured_xl::after { content: "Featured"; }
  /* status tag: an in-flow label above the item name (single.php nests it in
     #item_info before the name), not an absolute overlay that covers the name */
  #item_info > .ribbon {
    position: static; display: inline-block; width: auto; height: auto;
    background: var(--accent-deep); color: #fff; margin: 0 0 var(--sp-2);
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
    font-size: 11px; padding: 4px 11px;
  }
  #item_info > .ribbon.sold_xl { background: #6b6b6b; }
  #item_info > .ribbon.sale_xl { background: #8a5a2b; }
}

@layer components {
  /* ================= cart ================= */
  #cart_wrapper {
    position: fixed; top: 84px; right: var(--sp-4); z-index: 70;
    max-width: min(560px, 94vw); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 12px 40px rgba(24, 20, 30, .35);
  }
  .cart_list {
    float: none; width: auto; background: var(--surface); border: 0;
    padding: var(--sp-4); margin: 0 0 var(--sp-4); overflow-x: auto;   /* wide table scrolls internally on mobile, not the page */
  }
  .cart_list.view { margin-bottom: 0; }   /* standalone cart (modal/checkout) — matches legacy */
  .cart_list h3 {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; font-size: 1.05rem; color: var(--accent-deep); margin: 0 0 var(--sp-3); padding: 0;
  }
  .cart_list table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .cart_list thead td {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
    font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 6px;
  }
  .cart_list tbody td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .cart_list tr.alt { background: var(--surface-alt); }
  /* unscoped .price replaces the deleted legacy `.price{text-align:right}` exactly
     (covers th.price on invoice templates too, not just td.price) */
  .price { text-align: right; }
  td.price, th.price { white-space: nowrap; }
  .cart_list tr.sub_tot td, .cart_list tr.cart_costs td { border-bottom: 0; color: var(--muted); }
  .cart_list tr.cart_tot td { border-top: 2px solid var(--line); border-bottom: 0; padding-top: 10px; }
  .cart_list tr.cart_tot strong { font-family: var(--font-display); font-size: 15px; color: var(--accent-deep); }
  .cart_list tr:has(hr) td { padding: 0; border: 0; }
  .cart_list hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-2) 0; }

  /* remove button: replace the legacy remove.png sprite with an inline-SVG "×"
     background — the control is <input type=submit>, and pseudo-elements
     (::after) do NOT render on <input>, so the glyph must be a background image */
  .cart_list input[name=remove] {
    width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: none; cursor: pointer; font-size: 0; color: transparent;
    background: var(--surface) center / 11px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23726d63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .cart_list input[name=remove]:hover {
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%233f3f63' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .cart_list .buttons {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end;
    padding: var(--sp-3) 0 0; text-align: right;
  }
  a.empty.btn { background: var(--muted); }
  a.empty.btn:hover { background: var(--accent-deep); }
}

@layer components {
  /* ================= checkout ================= */
  /* step progress indicator */
  #steps {
    float: none; width: auto; display: flex; gap: 2px; list-style: none;
    margin: 0 0 var(--sp-6); padding: 0;
  }
  #steps .step {
    float: none; width: auto; flex: 1 1 0; min-width: 0; height: auto; position: relative;
    background: var(--surface-alt); background-image: none;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    font-size: 11px; line-height: 1.2; text-align: center; color: var(--muted);
    padding: 10px var(--sp-3);
  }
  #steps .step a { color: inherit; display: block; }
  #steps .step.current { background: var(--accent-deep); background-image: none; color: #fff; }
  #steps .arrow { display: none; }   /* flat flex steps replace the arrow overlaps */

  /* two-column checkout layout */
  .checkout.col2 { float: none; width: auto; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-5); }
  @media (min-width: 760px) { .checkout.col2 { grid-template-columns: 1fr 1.6fr; } }
  .checkout.col2 .col { float: none; width: auto; margin: 0; }
  .checkout.col2 .col:first-child { width: auto; }
  .checkout h3 {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; font-size: 1.05rem; color: var(--accent-deep); margin: 0 0 var(--sp-3);
  }
  .col .cart_list { float: none; width: auto; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4); }

  /* checkout action buttons (reuse .btn; just placement — override legacy `.btn.continue{float:right}`) */
  .btn.continue, .btn.back { float: none; margin-top: var(--sp-2); }
  .btn.continue, .btn.back { display: inline-flex; align-items: center; gap: 6px; }
  .btn__chevron { width: 15px; height: 15px; flex: 0 0 auto; }
  /* step 1: Continue sits under the cart, aligned to the right */
  .checkout__next { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
  /* step 2: Back on the left, Proceed on the right */
  .checkout__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
  .checkout__actions .btn { margin-top: 0; }

  /* soften the shipping fieldset: flat thin line instead of the default 2px groove */
  #shipping_costs { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4); margin: var(--sp-4) 0 0; }
  #shipping_costs h4 { margin: 0 0 var(--sp-2); }
  #shipping_costs h4 + h4, #shipping_costs p + h4 { margin-top: var(--sp-3); }

  /* "Edit profile" is a quiet text link, not a dominant button */
  .edit-profile-link {
    display: inline-block; margin-top: var(--sp-2); color: var(--accent);
    font-size: 14px; text-decoration: underline; text-underline-offset: 2px;
  }
  .edit-profile-link:hover { color: var(--accent-deep); }

  /* required-field markers (kept semantics, Field colors) */
  li.required { border: 1px solid #b3261e; color: #b3261e; font-weight: 600; padding: .2em .5em; border-radius: var(--r-sm); margin: .3em 0; }
  .required *, .req_mssg { color: #b3261e !important; }

  /* notice / confirmation panel */
  .notice { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); }
  .notice h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); margin: 0 0 var(--sp-3); }
  .notice h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--accent-deep); font-size: 1rem; margin: 0 0 var(--sp-2); }
  .to_psp { list-style: none; padding: 0; }
  .to_psp li { display: inline; margin-left: var(--sp-4); }
}

@layer components {
  /* ================= forms ================= */
  /* neutralize legacy `form ul/li{width:100%;float:left}` + `#content form li,form li{padding-left:0}` */
  form ul, form li { float: none; width: auto; }
  #content form li, form li { padding-left: 0; background-image: none; list-style: none; }

  /* fields */
  label {
    float: none; display: block; width: auto; color: var(--ink);
    font-size: 13px; margin: 0 0 var(--sp-1); text-transform: none;
  }
  input[type=text], input[type=password], input[type=email], select, textarea {
    width: 100%; max-width: 420px; padding: 9px 12px; margin: 0 0 var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); font: inherit;
  }
  input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
  select:focus, textarea:focus { border-color: var(--accent); outline: none; }
  textarea { min-height: 120px; }

  /* bare submit buttons (login/register/contact/subscribe/profile/place-bid use
     form_submit() with NO .btn class — they got styling only from legacy @group
     Forms, so style input[type=submit] here to match .btn before style.css is deleted) */
  input[type=submit] {
    display: inline-block; font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: 13px; color: #fff; background: var(--accent-deep);
    border: 0; border-radius: var(--r-sm); padding: 10px 18px; cursor: pointer;
    line-height: 1.5; height: auto; box-shadow: none; width: auto; margin: 0;
  }
  input[type=submit]:hover { background: var(--accent); }

  /* validation states */
  input.required { outline: none; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
  input.required.remind { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
  .btn.not_active, .btn.not_active:hover { background: #d7d7d7; color: #fff; cursor: default; }

  /* login / contact layout (override legacy fixed px floats) */
  #login { width: auto; height: auto; padding-top: var(--sp-4); max-width: 340px; margin: 0 auto; }
  #login h2 { text-align: center; margin: 0 0 var(--sp-4); font-family: var(--font-display); text-transform: uppercase; color: var(--accent-deep); }
  #login_form { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); position: static; }
  #login_form form { float: none; width: auto; position: static; }
  #login_form label, #login_form input { float: none; clear: none; width: 100%; margin: 0 0 var(--sp-3); display: block; }
  #login_form input[type=submit] { width: auto; margin-top: var(--sp-2); }
  #contact_form { padding: 0; position: relative; }
  #contact_form input[type=text], #contact_form textarea { width: 100%; max-width: 420px; float: none; }
  #contact_form .combi_row { width: auto; float: none; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  #contact_form .combi_row input, #contact_form .combi_row input:first-child { float: none; width: auto; flex: 1 1 120px; }
  #contact_form .combi_row input#postcode { flex: 0 1 90px; }
  #contact_form input#city { flex: 1 1 auto; }

  /* message toast — matches the site's card language (accent bar + soft lift) */
  #message {
    position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 5000;
    width: min(460px, 92vw); margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-card-h);
    padding: var(--sp-6) var(--sp-7);
    text-align: left; color: var(--ink); font-size: 1rem; line-height: 1.6;
    animation: messageIn .25s ease-out both;
  }
  #message .close {
    position: absolute; top: 8px; right: 8px; float: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: transparent; color: var(--muted); font-size: 17px; line-height: 1;
    text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease;
  }
  #message .close:hover { background: var(--surface-alt); color: var(--accent-deep); }
  @keyframes messageIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { #message { animation: none; } }
  .close { float: none; color: var(--muted); cursor: pointer; }
  .close:hover { color: var(--accent-deep); text-decoration: none; }
  /* "Close" / "Continue shopping" is a .btn on a dark bg: keep readable white
     text instead of the muted .close colour, in both rest and hover states. */
  a.close.btn, a.close.btn:visited, a.close.btn:hover { color: #fff; }
  .error { color: var(--danger); font-size: 14px; }
}

@layer components {
  /* generic 2-col layout (profile.php: details + subscription-form side by side;
     overrides legacy `.col2 .col { width:47.2%; float:left }`) */
  .col2 { width: auto; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-5); }
  @media (min-width: 640px) { .col2 { grid-template-columns: 1fr 1fr; } }
  .col2 .col { float: none; width: auto; margin: 0; display: block; }

  /* ================= profile / account ================= */
  #user_details { margin: 0 0 var(--sp-5); }
  #user_details li { line-height: 1.6; padding-left: 0; list-style: none; }
  #user_details label { display: none; width: auto; }   /* profile uses inline value rows, label hidden (legacy parity) */
  #user_details .gray { color: var(--muted); font-style: italic; }
  #user_details .pw { float: none; width: auto; padding: var(--sp-4) 0 var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-3); }
  #user_details input[type=text], #user_details input[type=password], #user_details select {
    float: none; margin: 0 0 var(--sp-3); min-width: 0; width: 100%; max-width: 320px;
  }
  #interests ul.children { display: none; }
  .error { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); }
  .error span { clear: both; display: block; width: 100%; font-style: italic; color: var(--danger); }

  /* order history tables */
  .history table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-6); font-size: 13px; }
  .history table th {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
    font-size: 10px; color: var(--muted); font-weight: 600; text-align: left;
    line-height: 2; border-bottom: 1px solid var(--line);
  }
  .history table td { vertical-align: top; padding: 8px 6px; font-family: var(--font-body); border-bottom: 1px solid var(--line); }
  .history table tr:nth-child(even) { background: var(--surface-alt); }
  .history table tr:nth-child(odd) { background: var(--surface); }
  .history table.auctions .new_bid input[type=text] { width: 70px; margin-right: var(--sp-2); float: none; }
  .history table.auctions .name { max-width: 200px; }
}

@layer utilities {
  .clear { clear: both; }
  .hide { display: none !important; }
  .click { cursor: pointer; }
}

@layer components {
  /* ================= disclaimer age-gate ================= */
  .disclaimer #page-header { position: relative; height: auto; background: var(--accent-deep); }
  .disclaimer #page-header_bg { position: static; height: auto; width: 100%; background: var(--accent-deep); box-shadow: none; }
  .disclaimer #logo { position: relative; z-index: 2; display: block; width: auto; height: auto; box-shadow: none; margin: 0 auto; padding: var(--sp-4) 0; text-align: center; }
  /* MR_logo.png carries dark "Militaria Relics" text meant for a light ground, so
     give it a white card to stay legible on the deep-accent header band */
  .disclaimer #logo img { float: none; display: inline-block; width: 180px; height: auto; background: #fff; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
  #front_bg { height: auto; background: none; border: 0; text-align: center; position: relative; padding: var(--sp-6) var(--sp-4); }
  #front_center_img { position: relative; width: min(420px, 90vw); height: auto; aspect-ratio: 567 / 389; background: url(../img/front_center.jpg) center/cover no-repeat; margin: 0 auto; top: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }
  /* #credo is a <span> nested inside the hero image div — overlay the strapline
     across the bottom of the image, with a scrim so it stays readable */
  .disclaimer #credo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-4) var(--sp-2) var(--sp-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
  .disclaimer h1 { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); margin: var(--sp-4) 0 var(--sp-2); }
  .disclaimer nav { width: auto; height: auto; margin: 0 auto var(--sp-5); display: flex; gap: var(--sp-3); justify-content: center; position: static; }
  .disclaimer nav .btn, .disclaimer nav .btn.right {
    float: none; display: inline-block; min-width: 120px; background: var(--accent-deep); color: #fff;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
    line-height: 1.2; padding: 12px 18px; border-radius: var(--r-sm); text-align: center; box-shadow: none;
  }
  .disclaimer nav .btn:hover, .disclaimer nav .btn.right:hover { background: var(--accent); }
  .disclaimer #content { width: auto; max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; font-family: var(--font-body); position: static; }
  .disclaimer #consent { max-width: 640px; margin: 0 auto var(--sp-4); text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--ink, #32334d); }
  .disclaimer #consent label { cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); }
  .disclaimer footer, .disclaimer #footer_spacer { display: none; }

  /* ================= CI profiler (dev-only debug panel) ================= */
  #prof_wrap { position: absolute; top: 100px; box-shadow: 0 0 30px rgba(0,0,0,.3); background: var(--surface); }
  #profiler_btn { position: absolute; top: 0; right: 40px; height: 32px; line-height: 32px; z-index: 999; cursor: pointer; }
}

@layer components {
  /* ================= app-shell (category listing, desktop) =================
     body.items on ≥900px: header + sidebar + footer stay on screen; the product
     grid scrolls inside its own panel (.main__scroll) with a bottom fade + a
     scroll-to-top button. Off this scope the fade/button never show and the page
     scrolls normally (mobile + all other layouts). */
  .main__scroll { min-width: 0; }
  .main__fade, .main__toptop { display: none; }

  @media (min-width: 900px) {
    body.items { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    body.items #container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.items .shell { flex: 1 1 auto; min-height: 0; align-items: stretch; }

    /* sidebar fills the column and scrolls on its own — never reaches the footer */
    body.items .catnav { position: static; max-height: none; height: 100%; overflow: auto; }

    /* main becomes a fixed-height frame with an inner scroll panel */
    body.items .main { position: relative; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
    body.items .main__scroll { height: 100%; overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); }

    body.items .site-footer { flex: 0 0 auto; margin-top: 0; }

    /* bottom fade — hints "more items below"; fades out at the end of the list */
    body.items .main__fade {
      display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 4;
      pointer-events: none; background: linear-gradient(to bottom, transparent, var(--paper));
      opacity: 1; transition: opacity .2s ease;
    }
    body.items .main.is-bottom .main__fade { opacity: 0; }

    /* scroll-to-top button (appears once you've scrolled the panel) */
    body.items .main__toptop {
      display: grid; place-items: center; position: absolute; right: var(--sp-5); bottom: var(--sp-5);
      width: 42px; height: 42px; z-index: 5; border: 0; border-radius: 50%; cursor: pointer;
      background: var(--accent-deep); color: #fff; font-size: 20px; line-height: 1;
      box-shadow: 0 4px 14px rgba(24, 20, 30, .35);
      opacity: 0; pointer-events: none; transition: opacity .2s ease, background .15s ease;
    }
    body.items .main.is-scrolled .main__toptop { opacity: 1; pointer-events: auto; }
    body.items .main__toptop:hover { background: var(--accent); }
  }
}

@layer layout {
  /* classic sticky footer: on any page that has a footer, fill at least the
     viewport height so short content (e.g. contact) still pins the footer to the
     bottom instead of floating mid-screen. (Popups/iframes have no footer → skipped.)
     The body.items ≥900px app-shell is a stricter version layered on top of this. */
  body:has(> .site-footer) { min-height: 100vh; display: flex; flex-direction: column; }
  body:has(> .site-footer) > #container { flex: 1 0 auto; }
  body:has(> .site-footer) > .site-footer { flex: 0 0 auto; }
}