/* Lubtec.
   One stylesheet for the public site and the admin, no framework, the same arrangement as
   Binga's, from which most of the structure here was carried. The design fits in a file
   and there is nothing to keep updated but this.

   The logo's navy carries the brand. The accent is safety amber, the colour of the labels
   and hazard tape the customers work among, chosen over the old site's #1500FF blue,
   which fought the logo. Amber is a background colour here, never a text colour on
   white: it cannot carry small type, so text on it is navy and links are their own blue. */

:root {
    --ink: #18202f;
    --ink-soft: #4a5466;
    --navy: #012060;
    --navy-deep: #00143d;
    --accent: #f2b417;
    --accent-strong: #dba000;
    /* Text set on the amber: buttons, the cart count. */
    --on-accent: #0d1a3a;
    /* The amber dark enough to read on white, for the kicker and other small marks. */
    --accent-ink: #8a6100;
    --link: #1747b8;
    --paper: #ffffff;
    --paper-tint: #f2f4f8;
    --line: #dce2eb;
    --ok-tint: #e8f5ec;
    --ok-ink: #1e6b3a;
    --danger: #b3372f;
    --danger-tint: #fbeaea;
    --radius: 8px;
    --radius-lg: 14px;
    --shadow: 0 10px 30px rgba(1, 32, 96, 0.10);
    --shadow-soft: 0 2px 8px rgba(1, 32, 96, 0.06);

    /* The accent at a whisper: focus rings on inputs, the glow behind the hero, the halo
       on a hovered card. Alpha rather than a paler amber so it sits on either theme. */
    --accent-tint: rgba(242, 180, 23, 0.20);

    /* Product photos are cut-outs on white and stay on white in both themes; a dark tile
       behind them would show every photo's white box. */
    --photo-ground: #ffffff;

    --paper-glass: rgba(255, 255, 255, 0.86);

    /* Headings and ghost buttons read this rather than --navy directly, so the admin's
       dark mode can lighten headings while the bars keep their navy; Binga's seam. */
    --heading: var(--navy);

    --admin-bar: var(--navy);
    --side-active-bg: #e4ebf7;
    --side-active-ink: var(--navy);

    color-scheme: light;
}

/* Night mode, public site and admin alike: each layout's inline script sets data-theme
   on <html> from the saved choice or the machine's preference, and theme.js flips it.
   Only the tokens change here. The navy bands keep their navy: they are the brand. */
[data-theme="dark"] {
    --ink: #e5eaf2;
    --ink-soft: #a0abbd;
    --paper: #171d27;
    --paper-tint: #0f141c;
    --line: #2a3443;
    --ok-tint: #17301f;
    --ok-ink: #8fd3a3;
    --danger: #ea8078;
    --danger-tint: #3a1f1d;
    --accent-ink: #f5c84b;
    --link: #9db8ff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.30);
    --paper-glass: rgba(23, 29, 39, 0.86);
    --heading: #dde6f5;
    --admin-bar: #0a1328;
    --side-active-bg: #1a2a47;
    --side-active-ink: #cddcf7;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

/* Keyboard focus, one look everywhere: an amber ring drawn outside the element. Inputs get
   a softer ring of their own in the form rules. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3 {
    font-family: "Oswald", "Open Sans", system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--heading);
    margin: 0 0 14px;
    letter-spacing: 0.005em;
    text-wrap: balance;
}

h1 { font-size: clamp(30px, 4.6vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 19px; font-weight: 500; }

p { margin: 0 0 14px; }
img { max-width: 100%; display: block; }
a { color: var(--link); }

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* For a label a screen reader needs and a sighted visitor does not: the search box's, the
   quantity boxes' in the cart. Off screen rather than display:none, which hides it from
   the screen reader too. */
.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;
}

/* ---- header ------------------------------------------------------------------------ */

/* Frosted rather than solid, as on Binga: the page shows faintly through as it scrolls
   under the header. The solid fallback covers a browser without backdrop-filter. */
.site-head {
    background: var(--paper);
    background: var(--paper-glass);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 30;
    background: var(--navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus { top: 16px; }

.head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 80px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }

/* The logo is a JPEG on white with the name inside the artwork, so it is the masthead:
   tall enough for "LUBTEC cc" to read, sized by height so its own proportions stand. */
.brand-logo { height: 48px; width: auto; }

/* Not ours to recolour, and a white JPEG on a dark header is a white box anyway, so in
   night mode it sits on a deliberate white chip, the answer Binga gives its logo. */
[data-theme="dark"] .brand-logo {
    background: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    box-sizing: content-box;
}

/* The order, the theme toggle and, on a phone, the burger. Placed after the nav by CSS
   order on a desk so the reading order there is logo, pages, then tools. */
.head-tools { display: flex; align-items: center; gap: 10px; order: 3; }

.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 140ms ease;
}

.site-nav a:hover { color: var(--link); }

/* The amber rule under a link grows out from the left on hover and stays under the page
   the visitor is on. */
.site-nav a { position: relative; padding: 6px 0; }

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a.active::after { transform: scaleX(1); }

.site-nav a.active { color: var(--heading); }

/* Sign in / My account, set apart from the pages by a rule: it is about the visitor, not
   the business. */
.site-nav .nav-account { padding-left: 22px; border-left: 1px solid var(--line); }
.site-nav .nav-account::after { left: 22px; }

/* The order in the header: an icon, the word, and the count on an amber disc once there
   is anything in it. A link, not a dropdown, because the cart page is where the
   quantities are changed anyway. */
.head-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.head-cart:hover, .head-cart.active { border-color: var(--heading); }
.head-cart svg { width: 20px; height: 20px; }

.head-cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12.5px;
    font-weight: 700;
}

/* The burger: a checkbox the label toggles, pure CSS. Hidden on desktop. */
.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (max-width: 960px) {
    .nav-burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        cursor: pointer;
    }

    .nav-burger span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: var(--heading);
        border-radius: 2px;
    }

    .brand-logo { height: 38px; }
    .head-row { min-height: 68px; }
    .head-tools { gap: 6px; margin-left: auto; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px 20px;
        gap: 4px;
        box-shadow: var(--shadow);
        margin-left: 0;
    }

    .site-nav a { padding: 10px 12px; border-radius: 6px; }
    .site-nav a::after { display: none; }
    .site-nav a.active { background: var(--paper-tint); }
    .site-nav .nav-account { border-left: none; padding-left: 12px; border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 14px; }
    .nav-toggle:checked ~ .site-nav { display: flex; }
}

/* On the narrowest phones the word goes and the icon and count carry it. */
@media (max-width: 420px) {
    .head-cart-label { display: none; }
    .head-cart { padding: 8px 10px; }
    .brand-logo { height: 32px; }
}

/* ---- buttons ----------------------------------------------------------------------- */

/* Squared off, as Binga's are: this is a catalogue of control gear, not a consumer app. */
.btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    font: 600 15px "Open Sans", system-ui, sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
                transform 140ms ease, box-shadow 140ms ease;
}

/* The amber button, navy text on it, lifting a pixel on hover: the one thing on any page
   asking to be pressed. */
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px rgba(219, 160, 0, 0.28); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(219, 160, 0, 0.32); }
.btn-primary:active { transform: none; box-shadow: 0 3px 8px rgba(219, 160, 0, 0.28); }

.btn-ghost { background: transparent; color: var(--heading); border-color: var(--heading); }
.btn-ghost:hover { background: var(--heading); color: var(--paper); }

/* A ghost button on a navy band, where the heading colour would vanish. */
.page-head .btn-ghost, .cta-band .btn-ghost, .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.page-head .btn-ghost:hover, .cta-band .btn-ghost:hover, .btn-on-dark:hover { background: #fff; color: var(--navy); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { color: var(--danger); border-color: var(--danger); background: transparent; }

.btn-small { padding: 7px 16px; font-size: 14px; }

/* Two or more buttons in a row, wrapping cleanly on a phone. */
.btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .btn-row .btn { flex: 1 1 100%; }
}

/* ---- hero -------------------------------------------------------------------------- */

.hero {
    background:
        radial-gradient(60% 80% at 100% 0%, var(--accent-tint), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(1, 32, 96, 0.08), transparent 60%),
        linear-gradient(180deg, var(--paper-tint), var(--paper));
    overflow: clip;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.hero-copy { animation: rise 520ms ease-out both; }
.hero-photo, .hero-tiles { animation: rise 520ms 140ms ease-out both; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 60px;
}

/* Nothing beside the copy: it takes a readable width rather than half the page. */
.hero-grid.hero-solo { grid-template-columns: minmax(0, 760px); }

.kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 10px;
}

.lead { font-size: 18px; color: var(--ink-soft); }
.hero .lead { font-size: 18.5px; max-width: 54ch; }

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.hero-photo { position: relative; }

/* The photo on a tinted panel offset down and to the right, Binga's print trick. */
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent), var(--navy));
    opacity: 0.18;
}

.hero-photo img {
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* Four featured products, two by two, each on its white tile: the catalogue itself as
   the picture. Contained, never cropped, for the reason on .card-photo-contain. */
.hero-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    position: relative;
}

.hero-tile {
    background: var(--photo-ground);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 18px;
}

.hero-tile:nth-child(2) { transform: translateY(18px); }
.hero-tile:nth-child(4) { transform: translateY(18px); }

.hero-tile img { max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 44px; }
    .hero-photo::before { inset: 14px -10px -14px 14px; }
    .hero-tiles { max-width: 460px; }
}

/* ---- search ------------------------------------------------------------------------- */

/* The catalogue search: a wide box and its button as one control. */
.search-form {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-top: 22px;
}

.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
}

.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}

.search-form .btn { flex: 0 0 auto; }

/* On the navy page head the box needs no border to stand out, only to stay white. */
.page-search input[type="search"] { border-color: transparent; }

/* ---- sections ---------------------------------------------------------------------- */

.band { padding: 60px 0; }
.band-tint { background: var(--paper-tint); }
.section-lead { color: var(--ink-soft); max-width: 62ch; margin-bottom: 28px; font-size: 17px; }
.after-note { color: var(--ink-soft); max-width: 62ch; margin-top: 24px; }

/* A short amber rule under each section heading on the list pages. Not under the prose
   pages' headings, which are running text. */
.band > .wrap:not(.prose) > h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
    margin-top: 12px;
}

.band > .wrap:not(.prose) > h2 { margin-bottom: 22px; }

/* The navy heading band on the inner pages, with an amber glow off the top right. */
.page-head {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding: 52px 0 44px;
    position: relative;
    overflow: hidden;
}

.page-head::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -160px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 180, 23, 0.30), transparent 68%);
    pointer-events: none;
}

.page-head .wrap { position: relative; z-index: 1; }
.page-head h1, .page-head .crumb a { color: #fff; }
.page-head h1 { margin-bottom: 0; }
.page-head .lead { color: #c9d4e6; margin: 14px 0 0; max-width: 64ch; }
.page-head .btn-row, .page-head p:has(> .btn) { margin-top: 24px; }
.crumb { font-size: 14px; color: #c9d4e6; margin-bottom: 8px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---- cards (sections and products) --------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) { .card-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .card-grid, .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
/* Two across stays down to a phone for products: the cards are mostly photo, and one per
   row turns a section of thirty into a long scroll of white squares. */
@media (max-width: 420px) { .card-grid { grid-template-columns: 1fr; } .card-grid-4 { gap: 12px; } }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--accent); }

.card-photo { overflow: hidden; }
.card-photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 400ms ease; }
.card:hover .card-photo img { transform: scale(1.04); }

/* The catalogue's photos are cut-outs of control gear on white, many of them tall and
   narrow, and a crop would cut the part number off the front of a relay. So the whole
   photo, inside a white square, with room around it. */
.card-photo-contain {
    background: var(--photo-ground);
    border-bottom: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 16px;
}

.card-photo-contain img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: 100%; }

/* Stands in for a missing photo at exactly the photo's size, so the card keeps its
   neighbours' shape. A tinted square with the name, not a stock image pretending. */
.card-photo-empty {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: grid;
    place-items: center;
    background: var(--paper-tint);
    border-bottom: 1px solid var(--line);
    color: var(--heading);
    font: 600 18px "Oswald", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.45;
}

.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 6px; font-size: 18px; }
.card-body p { color: var(--ink-soft); font-size: 14.5px; flex: 1; }

/* The section cards' summaries are a line or two; the product cards' can be longer, and
   four lines is plenty before the card turns into the product page. */
.product-card .card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-brand {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 4px;
}

.card-price { font-size: 14.5px; color: var(--ink-soft); }
.card-price strong { color: var(--heading); font-size: 16px; }
.unit { color: var(--ink-soft); font-size: 13px; margin-left: 4px; }

.card-options {
    align-self: flex-start;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper-tint);
    border-radius: 999px;
    padding: 2px 10px;
}

.card-more { color: var(--link); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.card-more::after { content: "\2192"; display: inline-block; transition: transform 180ms ease; }
.card:hover .card-more::after, .service-card:hover .card-more::after { transform: translateX(4px); }

@media (max-width: 420px) {
    .product-card .card-body { padding: 12px; }
    .product-card .card-body h3 { font-size: 16px; }
    .product-card .card-body p { display: none; }
}

/* ---- section strip ------------------------------------------------------------------ */

/* The other sections, across the top of a section page. Scrolls sideways on a phone, the
   one place that is right: it is a row of tabs, not a table with actions in it. */
.section-strip {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.section-strip .wrap {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-top: 10px;
    padding-bottom: 10px;
}

.section-strip a {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.section-strip a:hover { background: var(--paper-tint); }
.section-strip a.active { background: var(--navy); color: #fff; }

.section-intro { margin-bottom: 28px; }

/* ---- product page ------------------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: start;
}

.product-photo {
    background: var(--photo-ground);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: grid;
    place-items: center;
    min-height: 320px;
}

.product-photo img { max-height: 560px; width: auto; object-fit: contain; }

@media (min-width: 861px) { .product-photo { position: sticky; top: 104px; } }
@media (max-width: 860px) {
    .product-grid { grid-template-columns: 1fr; gap: 28px; }
    .product-photo { min-height: 0; }
    .product-photo img { max-height: 340px; }
}

/* Brand and code as a pair of labelled facts above everything else. */
.product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0 0 18px;
}

.product-facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.product-facts dd { margin: 0; font-weight: 600; }

/* The order box: price, the option list, quantity and the button, in one bordered panel
   so it reads as the thing to do on the page. */
.order-box {
    background: var(--paper-tint);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    margin-bottom: 20px;
}

.order-box label:first-of-type { margin-top: 0; }
.order-price { margin: 0 0 12px; }
.order-price strong { font: 600 24px "Oswald", sans-serif; color: var(--heading); margin-right: 6px; }
.order-price .unit { margin-left: 0; display: block; }

.order-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.order-row > div { width: 120px; }
.order-row .btn { margin-top: 0; flex: 1; min-width: 180px; }

.datasheet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.datasheet a { font-weight: 600; }
.datasheet a::before { content: "\2193  "; }

.prose { max-width: 70ch; }
.prose p, .prose li { color: var(--ink-soft); }
.prose h2 { margin-top: 30px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--ink); }

/* ---- services ----------------------------------------------------------------------- */

.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

@media (max-width: 420px) { .service-cards { grid-template-columns: 1fr; } }

.service-card {
    display: block;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 20px 22px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service-card h3 { margin-bottom: 6px; }
.service-card p { color: var(--ink-soft); margin-bottom: 10px; }

/* The Services page: one block per service, the photo beside the words where there is
   one. scroll-margin keeps a block's heading clear of the sticky header when a link
   lands on its anchor. */
.service-blocks { display: grid; gap: 48px; }

.service-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    scroll-margin-top: 110px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}

.service-block:last-child { border-bottom: none; padding-bottom: 0; }
.service-block:has(.service-photo) { grid-template-columns: minmax(0, 360px) 1fr; align-items: start; }
.service-photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); width: 100%; }

@media (max-width: 760px) { .service-block:has(.service-photo) { grid-template-columns: 1fr; } }

/* ---- CTA band ---------------------------------------------------------------------- */

.cta-band {
    background:
        radial-gradient(70% 140% at 50% 130%, rgba(242, 180, 23, 0.30), transparent 62%),
        linear-gradient(180deg, var(--navy), var(--navy-deep));
    color: #c9d4e6;
    padding: 68px 0;
    text-align: center;
}

.cta-band h2 { color: #fff; }
.cta-band p { max-width: 56ch; margin: 0 auto 16px; font-size: 17px; }
.cta-band p:last-child { margin-top: 24px; margin-bottom: 0; }

/* Admin-typed text whose line breaks are meant: an address typed over three lines shows
   over three lines. */
.keep-lines { white-space: pre-line; }

/* ---- contact ----------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
    background: var(--paper-tint);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    display: grid;
    gap: 18px;
}

.contact-row { display: flex; gap: 14px; align-items: flex-start; }

.contact-row svg {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--heading);
    box-shadow: var(--shadow-soft);
}

/* The emergency numbers get the amber, the one row on the page that is about something
   having gone wrong. */
.contact-row-urgent svg { background: var(--accent); color: var(--on-accent); }

.contact-row-body { min-width: 0; }
.contact-row-body p { margin: 0; }
.contact-row-body a { display: block; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-row-body a:hover { text-decoration: underline; }
.contact-row-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.contact-row-note { display: block; color: var(--ink-soft); font-size: 14px; }

.contact-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 32px 32px;
    box-shadow: var(--shadow-soft);
}

.contact-form h2 { margin-bottom: 4px; }

@media (max-width: 540px) {
    .contact-card { padding: 20px; }
    .contact-form { padding: 22px 20px 24px; }
}

/* ---- forms ------------------------------------------------------------------------- */

form label {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
    margin: 16px 0 6px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form input[type="number"],
form input[type="url"],
form input:not([type]),
form select,
form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}

form button[type="submit"] { margin-top: 20px; }

/* Long option lists are typed one per line with order codes in them; a fixed-width face
   keeps the codes lined up and easy to check. */
textarea.mono { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; font-size: 14px; }

.field-error { color: var(--danger); font-size: 14px; }
.field-error ul { margin: 0; padding-left: 18px; }
.field-hint { color: var(--ink-soft); font-size: 13.5px; margin: 6px 0 0; }

.check-line {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 500 !important;
}

.check-line input { width: auto !important; }

.notice-ok {
    background: var(--ok-tint);
    color: var(--ok-ink);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.notice-ok p { margin: 0; }
.notice-ok p + p { margin-top: 6px; }
.notice-ok a { color: inherit; font-weight: 700; margin-left: 6px; }
.notice-big { padding: 20px 24px; font-size: 16.5px; }

.notice-bad {
    background: var(--danger-tint);
    color: var(--danger);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.notice-bad p { margin: 0; }

/* A row of two fields side by side (name and company, password and its repeat). */
.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (max-width: 540px) { .field-pair { grid-template-columns: 1fr; } }

/* The honeypot. Moved out of sight rather than display:none, which some bots check. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- the stacked table (cart and order lines) ---------------------------------------- */

/* ChatBill's phone pattern for multi-column tables, carried across under the same class
   names. On a desk it is a grid. On a phone the header goes and each row becomes a card:
   the stack-title cell owns the first line, stack-meta cells form a soft line under it,
   the money (stack-amt) is pushed right, and the stack-actions strip runs along the
   bottom. Nothing scrolls sideways and every button stays reachable. */
.stack-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.stack-table th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 10px 12px;
    border-bottom: 2px solid var(--line);
}

.stack-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.stack-table .num { text-align: right; white-space: nowrap; }
.stack-table .stack-title a { font-weight: 600; text-decoration: none; }
.stack-table .stack-title a:hover { text-decoration: underline; }

/* Hidden while the table is a grid, where the column heading says it; shown on a phone. */
.stack-label { display: none; }

.line-option { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.line-code { display: block; font-size: 13px; color: var(--ink-soft); }

.qty-input { width: 84px !important; text-align: right; padding: 8px 10px !important; }

.action-pills {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.pill {
    font: 600 13px "Open Sans", system-ui, sans-serif;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.pill-danger { color: var(--danger); border-color: var(--danger-tint); background: var(--danger-tint); }
.pill-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* The form's buttons sit in the table, not in a form's own flow. */
.stack-table button[type="submit"] { margin-top: 0; }

@media (max-width: 767px) {
    .stack-table thead { display: none; }
    .stack-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }
    .stack-table td { display: block; border-bottom: none; padding: 0; white-space: normal; }
    .stack-table .num { text-align: left; }
    .stack-table .stack-title { flex: 1 1 100%; order: -2; }
    .stack-table .stack-meta { order: -1; font-size: 13.5px; color: var(--ink-soft); }
    .stack-table .stack-label { display: inline; }
    .stack-table .stack-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .stack-table .stack-actions { flex: 1 1 100%; }
    .stack-table .action-pills { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- cart, checkout and totals ------------------------------------------------------- */

.cart-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.cart-foot .btn { margin-top: 0; }

/* The sums: label on the left, figure on the right, the grand total ruled off above. */
.totals {
    margin: 0;
    min-width: 280px;
    margin-left: auto;
}

.totals > div { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals-grand { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 8px !important; }
.totals-grand dt, .totals-grand dd { color: var(--heading); font-weight: 700; font-size: 17px; }
.totals-note dd { font-weight: 400; color: var(--ink-soft); font-style: italic; text-align: right; }

@media (max-width: 540px) { .totals { min-width: 0; width: 100%; } }

.cart-send { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-send .field-hint { max-width: 70ch; }

.checkout-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 44px;
    align-items: start;
}

.checkout-form h2 { font-size: 22px; margin: 28px 0 0; }
.checkout-form h2:first-of-type { margin-top: 0; }

.checkout-summary {
    background: var(--paper-tint);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}

@media (min-width: 901px) { .checkout-summary { position: sticky; top: 104px; } }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } .checkout-summary { order: -1; } }

.summary-lines { list-style: none; padding: 0; margin: 0 0 14px; }

.summary-lines li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}

.summary-qty { color: var(--ink-soft); white-space: nowrap; }
.summary-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- account ----------------------------------------------------------------------- */

/* The sign-in and register forms: one narrow panel, centred. */
.account-panel {
    max-width: 580px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 32px 32px;
    box-shadow: var(--shadow-soft);
}

.account-panel h2 { margin-bottom: 6px; }
.account-panel .btn { margin-top: 20px; }
.account-panel .field-hint a { font-weight: 600; }

@media (max-width: 540px) { .account-panel { padding: 22px 20px 24px; } }

.account-switch {
    text-align: center;
    color: var(--ink-soft);
    margin: 20px 0 0;
    font-size: 15px;
}

.account-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 36px;
    align-items: start;
}

.account-side { margin: 0; max-width: none; }
.account-side .btn-row { margin-top: 12px; }
.account-side .btn { margin-top: 0; }

@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } }

/* An order as a card in the customer's list: reference and status on top, the date and
   size under it, the figure on the right. */
.order-list { display: grid; gap: 12px; }

.order-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.order-card:hover { border-color: var(--heading); box-shadow: var(--shadow-soft); }
.order-card-ref { font: 600 18px "Oswald", sans-serif; color: var(--heading); }
.order-card .status-pill { justify-self: end; }
.order-card-meta { color: var(--ink-soft); font-size: 14px; }
.order-card-amt { justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }

.order-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--ink-soft);
}

.order-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px 32px;
    margin: 28px 0 18px;
}

.order-facts h3 { font-size: 16px; margin-bottom: 6px; }
.order-facts p { color: var(--ink-soft); }

/* Where an order has got to: a pill per status, in colours that say "waiting", "moving",
   "done" and "stopped" without having to read the word. */
.status-pill {
    display: inline-block;
    font: 700 12px "Open Sans", system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

.status-received { background: var(--accent); color: var(--on-accent); }
.status-confirmed { background: #dbe6fb; color: #173f8f; }
.status-dispatched { background: #d9f0f2; color: #145c63; }
.status-completed { background: var(--ok-tint); color: var(--ok-ink); }
.status-cancelled { background: var(--paper-tint); color: var(--ink-soft); text-decoration: line-through; }

[data-theme="dark"] .status-confirmed { background: #1c2f55; color: #b9cdf6; }
[data-theme="dark"] .status-dispatched { background: #163a3e; color: #a6dde2; }

.link-button-ink { color: var(--link) !important; font-weight: 600; }

/* ---- footer ------------------------------------------------------------------------ */

.site-foot {
    background: var(--navy-deep);
    color: #b8c4d8;
    margin-top: 40px;
    font-size: 15px;
    border-top: 4px solid var(--accent);
}

.cta-band + .site-foot, main:has(> .cta-band:last-child) + .site-foot { margin-top: 0; }

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
    padding-top: 50px;
    padding-bottom: 28px;
}

.foot-name { color: #fff; font: 600 22px "Oswald", sans-serif; margin-bottom: 6px; }
.foot-tag { margin: 0; max-width: 42ch; }
.foot-head { color: #fff; font-weight: 700; margin-bottom: 10px; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.site-foot a { color: #dfe7f4; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }

.foot-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
    padding-bottom: 20px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.foot-legal p { margin: 0; }
.foot-sep { opacity: 0.4; margin: 0 6px; }
.foot-admin { color: #8d9cb6 !important; }
.foot-admin:hover { color: #dfe7f4 !important; }

.built-by { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.built-by img { height: 30px; width: auto; display: block; }

@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---- motion ------------------------------------------------------------------------ */

/* Everything that moves is decoration. Anyone who has asked their machine for less of it
   gets the same page standing still. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- admin ------------------------------------------------------------------------- */

body.admin { background: var(--paper-tint); font-family: system-ui, sans-serif; }
body.admin h1, body.admin h2, body.admin h3 { font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
body.admin h1 { font-size: clamp(26px, 3.4vw, 34px); }
body.admin h2 { font-size: 20px; }
body.admin .btn { font-family: system-ui, sans-serif; }

.admin-head { background: var(--admin-bar); }
.admin-head .head-row { min-height: 60px; }

.admin-brand {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
}

.admin-brand span { color: var(--accent); }

.admin-head-tools { display: flex; align-items: center; gap: 18px; }
.admin-head-link { color: #dfe7f4; text-decoration: none; font-size: 15px; }
.admin-head-link:hover { color: #fff; }

.inline-form { display: inline; }

.link-button {
    background: none;
    border: none;
    color: #dfe7f4;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
}

/* The theme toggle, in the admin bar's inks; the public header's version below repaints
   it for a paper background. Which glyph shows says what a click does. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: transparent;
    color: #dfe7f4;
    cursor: pointer;
}

.theme-toggle:hover, .theme-toggle:focus-visible { border-color: #fff; color: #fff; }
.theme-toggle-icon { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.site-head .theme-toggle { border-color: var(--line); color: var(--ink-soft); }
.site-head .theme-toggle:hover, .site-head .theme-toggle:focus-visible { border-color: var(--heading); color: var(--heading); }

/* ---- admin side menu ---- */

.admin-shell { padding-top: 24px; padding-bottom: 60px; }
.admin-shell:has(> .admin-side) { display: flex; align-items: flex-start; gap: 28px; }
.admin-shell:has(> .admin-side) > .admin-main { flex: 1 1 auto; min-width: 0; }
.admin-main { padding: 0; }

.admin-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 220px;
    position: sticky;
    top: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow);
}

.admin-side a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
}

.admin-side a:hover { background: var(--paper-tint); color: var(--side-active-ink); }
.admin-side a.active { background: var(--side-active-bg); color: var(--side-active-ink); }

/* The groups (orders, catalogue, pages, settings) set apart by a rule and a little air. */
.admin-side-rule { margin-top: 6px; padding-top: 13px !important; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px !important; }

/* New orders, counted on the Orders entry. */
.side-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
}

@media (max-width: 900px) {
    .admin-shell:has(> .admin-side) { display: block; }
    .admin-side {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 20px;
    }
    .admin-side a { padding: 7px 12px; font-size: 14px; }
    .admin-side-rule { margin-top: 0; padding-top: 7px !important; border-top: none; border-radius: 6px !important; }
}

.admin-lead { color: var(--ink-soft); }
.admin-narrow { max-width: 420px; }

/* ---- dashboard tiles ---- */

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    margin-top: 12px;
    margin-bottom: 28px;
}

@media (max-width: 1100px) { .admin-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .admin-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .admin-tiles { grid-template-columns: 1fr; } }

.admin-group {
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin: 0;
}

.admin-tile {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 22px;
    text-decoration: none;
    color: var(--ink);
    min-height: 118px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.admin-tile:hover { box-shadow: var(--shadow); border-color: var(--side-active-ink); }
.admin-tile strong { display: block; font-size: 30px; line-height: 1.1; color: var(--heading); margin-bottom: 6px; }
.admin-tile span { font-weight: 600; }
.admin-tile small { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 500; margin-top: 2px; }

/* New orders waiting: the one tile that should catch the eye. */
.admin-tile-alert { border-color: var(--accent); border-width: 2px; background: linear-gradient(180deg, var(--accent-tint), var(--paper) 70%); }

.admin-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-title-row h1 { margin-bottom: 0; }

.admin-list { display: grid; gap: 10px; }
.admin-recent { margin: -12px 0 28px; }

.admin-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 18px;
    flex-wrap: wrap;
}

/* A whole row that is a link (an order, a customer). */
.admin-item-link { color: var(--ink); text-decoration: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.admin-item-link:hover { border-color: var(--side-active-ink); box-shadow: var(--shadow-soft); }

.admin-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

/* Product photos in the list, contained on white like everywhere else. */
.admin-thumb-contain { object-fit: contain; background: var(--photo-ground); border: 1px solid var(--line); padding: 2px; }

.admin-item-body { flex: 1; min-width: 200px; }
.admin-item-title { font-weight: 600; margin: 0; }
.admin-item-meta { color: var(--ink-soft); font-size: 13.5px; margin: 2px 0 0; }
.admin-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-item .status-pill { margin-left: 8px; }

.tag-hidden {
    background: var(--danger-tint);
    color: var(--danger);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
}

.tag-note {
    background: var(--paper-tint);
    color: var(--ink-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
}

/* The filter strip above a list: section and search on the products, search on the
   customers. Wraps onto two lines on a phone. */
.admin-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

.admin-filter select, .admin-filter input[type="search"] {
    padding: 9px 12px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
}

.admin-filter select { width: auto; }
.admin-filter input[type="search"] { flex: 1; min-width: 200px; }
.admin-filter button[type="submit"] { margin-top: 0; }

/* The order statuses as tabs, each with its count. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.admin-tabs a {
    padding: 7px 12px;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.admin-tabs a span { color: var(--ink-soft); font-weight: 500; margin-left: 4px; }
.admin-tabs a.active { background: var(--side-active-bg); border-color: var(--side-active-ink); color: var(--side-active-ink); }

/* An order or a customer: the lines on the left, the people and the controls on the right. */
.admin-order-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.admin-order-grid .stack-table { background: var(--paper); border-radius: var(--radius); }
.admin-order-side { display: grid; gap: 16px; }
.admin-order-side .admin-confirm { max-width: none; }
.admin-order-side h2 { margin-bottom: 8px; }
.admin-status-form label:first-of-type { margin-top: 4px; }

@media (max-width: 1000px) { .admin-order-grid { grid-template-columns: 1fr; } }

.admin-form { max-width: 680px; }
.admin-form-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.admin-form-note { margin-top: 20px; }
.admin-form-actions .btn { margin-top: 0; }

/* The product form's options, boxed as their own small group because they work together. */
.admin-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 18px 18px;
    margin: 22px 0 0;
    background: var(--paper);
}

.admin-fieldset legend { font-weight: 700; padding: 0 6px; }

.admin-current-photo { margin: 8px 0 12px; }
.admin-current-photo img { max-width: 240px; max-height: 200px; border-radius: 8px; margin-bottom: 8px; background: var(--photo-ground); }

.admin-confirm {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    max-width: 580px;
}