/* ============================================================
   XAIJMARKET - Complete Main Stylesheet
   ============================================================ */

/* ===== THE PALETTE =====================================================
   Taken from the logo itself, not chosen alongside it.

   images/logo.png was sampled pixel by pixel: 69% of its solid colour is
   #1f2bdb and 16% is #ff3131. Those two are now the site's blue and red.

   This matters because the site had been using #006aff - a lighter,
   cyan-leaning blue that is a different colour from the one in the logo. Put
   the header and a button side by side and they read as two brands that
   happen to share a page.

   Everything else here is mixed from those two. The greys are not neutral
   greys: they carry a few percent of the blue, which is why a page of them
   feels like it belongs to the logo rather than sitting next to it.

   Change a colour here and it changes everywhere.                        */

:root {
    /* The two from the logo */
    --brand-blue:      #1f2bdb;
    --brand-red:       #ff3131;

    /* Hover and pressed - the same colours, further into the dark */
    --brand-blue-dark: #1620ad;
    --brand-blue-deep: #121b6d;
    --brand-red-dark:  #d82424;

    /* Backgrounds that are a whisper of the brand rather than grey */
    /* Blue as WORDS and blue as a SURFACE cannot be the same colour once the
       page goes dark. Text on a dark page has to get lighter to be read; a
       button with white on it has to get darker for the white to be read. One
       token could only ever satisfy one of them - which is why "Sign in" and
       the mega-menu headings measured 3.8:1 against a background the same blue
       button was failing from the other side. */
    --brand-blue-ink:  #1f2bdb;
    --chosen-ink:      #0f766e;

    --brand-blue-tint: var(--brand-blue-tint, #f2f2fd);
    --brand-blue-soft: var(--brand-blue-soft, #e0e1fa);
    --brand-red-tint:  var(--brand-red-tint, #fff3f2);
    --brand-red-soft:  var(--brand-red-soft, #fee2e2);

    /* Text and lines, tinted toward the blue */
    --ink:        #14172e;
    --ink-soft:   #3d4266;
    --muted:      #6c728f;
    --faint:      #a8adc4;
    --line:       #e4e6f0;
    --line-soft:  #f0f1f7;

    /* Surfaces */
    --page:       #f6f7fb;
    --surface:    #ffffff;

    /* The three things a shop has to say clearly, and fast */
    --in-stock:   #0f9d6e;
    --used:       #a4620b;
    --warning:    #d97706;

    /* One shadow, used everywhere, so nothing floats at a different height */
    --lift:       0 6px 24px rgba(20, 23, 46, .07);
    --lift-high:  0 14px 40px rgba(20, 23, 46, .15);

    --radius:     14px;
    --radius-sm:  10px;
    --pill:       999px;

    /* ---- The plate a product photograph sits on ----------------------
       Nearly every photograph the shop sells from arrives with a white
       background cut out by the supplier. On a white page that is invisible
       and everything is fine. On a dark page it is a glowing white rectangle,
       and a grid of them is the brightest thing on the screen.

       So the photograph gets a PLATE: a rounded tile in the same colour as the
       photograph's own background, which makes the edge disappear. Dark mode
       keeps the plate light - a dark plate would put the white rectangle back -
       but takes it, and the photograph with it, down together so the pair reads
       as one soft tile rather than a lamp.

       One set of values, used by every photograph on the site, so the card, the
       product page, the basket and the checkout cannot drift apart. */
    --shot-plate: #ffffff;
    --shot-edge:  #e9ebf3;
    --shot-dim:   none;

    /* ---- The four things a strip of colour can mean ------------------
       Good news, a caution, a problem, a note. They were written as literal
       hexes wherever they were needed - a mint strip here, an amber one there -
       which is fine on a white page and four little lamps on a dark one.
       Named here so both modes get a version, and so "good news" looks the
       same on every page that has some. */
    --good-bg:  #d1fae5;  --good-ink: #065f46;  --good-bg-soft: #ecfdf5;
    --warn-bg:  #fef3c7;  --warn-ink: #92400e;  --warn-bg-soft: #fffbeb;
    --bad-bg:   #fee2e2;  --bad-ink:  #991b1b;  --bad-bg-soft:  #fef2f2;
    --info-bg:  #dbeafe;  --info-ink: #1e40af;

    /* Which logo suits the current background. Swapped in dark mode. */
    --logo-src:   url('../images/logo.png');
}

/* ===== DARK ============================================================
   Not an inversion. Inverting a page gives you pure black behind pure white
   and a headache; these are the same hues with the lightness moved, so the
   shop still looks like itself at night.

   The blue lifts a little because #1f2bdb on near-black is too dark to read a
   button label against, and the red comes down because full #ff3131 on black
   glows. The brand is still recognisably the brand.

   Applied by [data-theme="dark"] on <html>, set before the page paints so
   there is no white flash. */
html[data-theme="dark"] {
    --brand-red:       #ff5b5b;
    --brand-blue-dark: #8b95ff;
    /* Darker than by day, so the white sitting on it can be read. */
    --brand-blue:      #4d59f0;
    --brand-blue-deep: #4450e0;
    /* Lighter than by day, because it is the thing being read. */
    --brand-blue-ink:  #9aa3ff;
    --chosen-ink:      #5eead4;
    --brand-blue-tint: #1a1d3a;
    --brand-blue-soft: #262a52;
    --brand-red-tint:  #2c1a20;
    --brand-red-soft:  #3d2028;

    --ink:        #eceefb;
    --ink-soft:   #b9bedd;
    --muted:      #8d93b5;
    --faint:      #7f86ad;
    --line:       #2a2e4d;
    --line-soft:  #21243d;

    --page:       #0d0f1e;
    --surface:    #161930;

    --in-stock:   #34d399;
    --used:       #d99a3f;
    --warning:    #fbbf24;

    --lift:       0 6px 24px rgba(0, 0, 0, .45);
    --lift-high:  0 14px 40px rgba(0, 0, 0, .6);

    /* The plate stays LIGHT at night, because the photographs on it are cut out
       on white and a dark plate simply puts the white rectangle back. What
       changes is how bright it is: pure #fff comes down to #dbdbdb, and the
       same 14% comes off the photograph, so the two still meet invisibly.

       0.86 was chosen by looking at four strengths side by side rather than by
       arithmetic. 0.92 was still bright enough to draw the eye off the prices.
       0.78 looked calm until you reached a WHITE product - the AirPods - which
       stopped being distinguishable from the plate it was sitting on. 0.86 is
       the last step before that happens.

       saturate() puts back the small amount of colour that dimming takes out.
       It does nothing at all to the plate, which is grey and has none.

       The edge goes DARKER rather than lighter here: a pale hairline is
       invisible on a pale plate, and the tile needs a boundary. */
    --shot-plate: #dbdbe0;
    --shot-edge:  rgba(13, 15, 30, .24);
    --shot-dim:   brightness(.86) saturate(1.05);

    /* The same four meanings, inverted: a deep tint of the colour with its own
       light ink on top, rather than the light tint with dark ink. Each pair was
       checked for contrast - a muted strip that cannot be read is no better
       than a bright one. */
    --good-bg:  #123726;  --good-ink: #6ee7b7;  --good-bg-soft: #0f2a1f;
    --warn-bg:  #3a2f12;  --warn-ink: #fcd34d;  --warn-bg-soft: #2c2513;
    --bad-bg:   #3a1c1e;  --bad-ink:  #fca5a5;  --bad-bg-soft:  #2c1719;
    --info-bg:  #17233f;  --info-ink: #93b4fd;

    --logo-src:   url('../images/logo-light.png');
}

/* A floor for form controls, not an override.
   :where() contributes nothing to specificity, so this loses to any page rule
   that styles its own inputs - and applies to the ones nobody ever styled, like
   the quantity box on the product page, which was a white rectangle with black
   digits in the middle of a dark page. */
html[data-theme="dark"] :where(input, textarea, select) {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] :where(input, textarea)::placeholder { color: var(--faint); }

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--line-soft, #f0f1f7);
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

/* ============================================================
   CONTACT BAR
   ============================================================ */
/* The strip above the header.

   It used to be the same blue as the hero two blocks below it, which made the
   top of the page one flat slab of colour with a white header floating in the
   middle of it. This is the brand blue taken darker: still obviously the same
   colour, but it now reads as the edge of the page rather than as part of the
   hero. */
.contact-bar {
    background-color: var(--brand-blue-deep, #121b6d);
    color: rgba(255, 255, 255, .92);
    padding: 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    min-height: 38px;
    flex-wrap: wrap;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Each item is its own hit area with a hover, because three of them are links
   now - the phone dials, WhatsApp opens, the address composes an email. */
.contact-info > a,
.contact-info > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    color: inherit;
    text-decoration: none;
    border-radius: 7px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.contact-info > a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.contact-info i { color: #ffd166; font-size: 13px; }
.contact-info .wa i { color: #4ade80; }

@media (max-width: 780px) {
    .contact-container { justify-content: center; gap: 2px; }
    .contact-info .hide-sm { display: none; }
    .contact-info > a span, .contact-info > span { font-size: 12.5px; }
}

/* ============================================================
   HEADER
   ============================================================ */
/* The header follows the page down, so the search box, the basket and the
   departments are one tap away from the bottom of a long catalogue rather than
   a scroll back to the top.

   The contact bar above it is deliberately NOT pinned. A phone number is
   something somebody goes looking for once; it is not worth a strip of every
   screen, and on a phone the two together would be a third of the window. */
.main-header {
    background-color: var(--surface, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Only the shadow changes here; the sizes are in THE PINNED HEADER, lower
       down, so all of the shrinking is written in one place. */
    transition: box-shadow .2s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;      /* it is an <a> to the homepage now */
}
.logo img {
    height: 44px;
    width: auto;
    display: block;
    transition: transform .18s ease;
}
.logo:hover img { transform: scale(1.03); }

.logo h1 {
    color: var(--ink, #14172e);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.logo span {
    color: #ff3131;
}

.logo i {
    font-size: 32px;
    color: #ff3131;
}

.search-bar {
    flex: 1;
    max-width: 500px;
    margin: 0 30px;
    position: relative;
}

.search-bar input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--line, #e4e6f0);
    border-radius: 30px;
    font-size: 16px;
    background-color: var(--line-soft, #f0f1f7);
    transition: all 0.3s;
}

.search-bar input:focus {
    outline: none;
    border-color: #1f2bdb;
    background-color: var(--surface, #fff);
    box-shadow: 0 0 0 3px rgba(31, 43, 219, 0.1);
}

.search-bar button {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #ff3131;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s;
}

.search-bar button:hover {
    background-color: #d82424;
    transform: scale(1.05);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-actions a {
    color: var(--ink-soft, #3d4266);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    transition: color 0.3s;
    padding: 8px 12px;
    border-radius: 6px;
}

.header-actions a:hover {
    color: #1f2bdb;
    background-color: var(--line-soft, #f0f1f7);
}

.header-actions a.active {
    color: #ff3131;
    background-color: var(--brand-red-tint, #fff3f2);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.main-nav {
    border-top: 1px solid var(--line, #e4e6f0);
    padding: 15px 0;
}

.nav-links {
    display: flex;
    list-style: none;
    justify-content: space-between;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: var(--ink-soft, #3d4266);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:hover {
    background-color: var(--line-soft, #f0f1f7);
    color: #1f2bdb;
}

.nav-links a.active {
    color: #ff3131;
    background-color: var(--brand-red-tint, #fff3f2);
}

/* ============================================================
   THE PINNED HEADER
   ============================================================ */
/* At the top of the page the header is 151px tall - logo, search, basket, then
   a row of departments under them. That is a fifth of a laptop screen, and
   carrying a fifth of the screen down a long catalogue is too much rent for it
   to pay. So once it pins, it gives about a third of that back: a smaller logo,
   a shorter search box, tighter rows. Everything is still there and still in
   the same place; there is just less air around it.

   html.header-stuck is put on by the script at the bottom of includes/header.php
   the moment the header reaches the top of the window.

   Above 900px only. Below that the departments row is already hidden and the
   header is 54px - there is nothing left to save, and shrinking the row that
   holds the basket would take a thumb-sized target below thumb size. */
@media (min-width: 901px) {
    .logo-section,
    .main-nav      { transition: padding .18s ease; }
    .logo img      { transition: transform .18s ease, height .18s ease; }
    .nav-links a   { transition: all .3s, padding .18s ease; }

    html.header-stuck .main-header      { box-shadow: 0 6px 18px rgba(20, 23, 46, .15); }
    html.header-stuck .logo-section     { padding: 7px 0; }
    html.header-stuck .logo img         { height: 34px; }
    /* The text fallback for the logo is left alone. It is already 19px - see
       .logo h1.wordmark - and a rule here beat that one and made it BIGGER
       when the header shrank, which is the opposite of the point. */
    html.header-stuck .search-bar input { padding: 9px 20px; }
    html.header-stuck .search-bar button{ width: 34px; height: 34px; top: 4px; }
    html.header-stuck .main-nav         { padding: 6px 0; }
    html.header-stuck .nav-links a      { padding: 7px 18px; }
}

/* An anchor link - the FAQ on the delivery page, a section of the about page -
   scrolls its target to the very top of the window, which is now under the
   header. This keeps that much clear so the heading you jumped to is the first
   thing you see rather than the thing just above it. */
html { scroll-padding-top: 110px; }

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface, #fff);
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1;
    top: 100%;
    left: 0;
    padding: 10px 0;
    border: 1px solid var(--line, #e4e6f0);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    padding: 12px 20px;
    display: block;
}

.dropdown-content a:hover {
    background-color: var(--line-soft, #f0f1f7);
    color: #1f2bdb;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
/* The figures strip.

   It used to be blue, sitting directly on top of a blue hero, so the two ran
   together into one tall slab and the figures on it were the least readable
   thing on the page. Light, with the blue kept for the icons: the page now
   goes dark strip, white header, light figures, blue hero, and each of those
   is visibly its own band. */
.trust-bar {
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--line, #e4e6f0);
    padding: 16px 0;
    color: var(--ink, #14172e);
}

.trust-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1 1 190px;
    min-width: 0;
}

.trust-icon {
    background: var(--brand-blue-tint, var(--brand-blue-tint, #f2f2fd));
    color: var(--brand-blue-ink, #1f2bdb);
    width: 40px; height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Counted figures earn the accent; the two standing statements stay quiet. */
.trust-item:nth-child(n+3) .trust-icon {
    background: var(--brand-red-tint, var(--brand-red-tint, #fff3f2));
    color: var(--brand-red, #ff3131);
}

.trust-text { min-width: 0; }

.trust-text h3 {
    font-size: 15px;
    color: var(--ink, #14172e);
    margin-bottom: 1px;
    font-weight: 800;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trust-text p {
    font-size: 12.5px;
    color: var(--muted, #6c728f);
    line-height: 1.35;
}

@media (max-width: 860px) {
    .trust-container { justify-content: flex-start; }
    .trust-item { flex: 1 1 44%; }
}
@media (max-width: 460px) {
    .trust-bar { padding: 12px 0; }
    .trust-item { flex: 1 1 100%; }
    .trust-icon { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    background: linear-gradient(135deg, #1f2bdb 0%, #1620ad 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.hero .btn-hero {
    background: #ff3131;
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.hero .btn-hero:hover {
    background: #d82424;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 49, 49, 0.3);
}

/* ============================================================
   CONTAINER & SECTIONS
   ============================================================ */
.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.section-title {
    font-size: 30px;
    color: var(--ink, #14172e);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ff3131;
    display: inline-block;
    font-weight: 800;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.view-all {
    color: #1f2bdb;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.view-all:hover {
    color: #ff3131;
    transform: translateX(5px);
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.category-card {
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #ff3131;
}

.category-card .category-icon {
    font-size: 32px;
    color: #1f2bdb;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.category-card:hover .category-icon {
    transform: scale(1.1);
    color: #ff3131;
}

.category-card h3 {
    font-size: 18px;
    color: var(--ink, #14172e);
    font-weight: 700;
    margin-bottom: 5px;
}

.category-card p {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.product-card {
    background: var(--surface, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    border: 1px solid var(--line, #e4e6f0);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-img {
    height: 200px;
    overflow: hidden;
    background: var(--line-soft, #f0f1f7);
    position: relative;
    cursor: pointer;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    z-index: 2;
}

.badge-stock {
    background: var(--in-stock, #0f9d6e);
}
.badge-sale {
    background: #ff3131;
}
.badge-new {
    background: #1f2bdb;
}

.country-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
}

.country-usa {
    background: #b22234;
}
.country-uk {
    background: #012169;
}
.country-russia {
    background: #0039a6;
}
.country-china {
    background: #de2910;
}
.country-japan {
    background: #bc002d;
}
.country-germany {
    background: #dd0000;
}
.country-south-korea {
    background: #003478;
}

.product-info {
    padding: 20px;
}

.product-category {
    color: #1f2bdb;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.product-title {
    font-size: 18px;
    color: var(--ink, #14172e);
    margin: 8px 0 10px;
    font-weight: 700;
    line-height: 1.4;
    height: 48px;
    overflow: hidden;
}

.product-title a {
    color: var(--ink, #14172e);
    text-decoration: none;
    transition: color 0.3s;
}

.product-title a:hover {
    color: #1f2bdb;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.product-stars {
    color: #f6ad55;
    font-size: 14px;
}

.product-review-count {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.current-price {
    font-size: 22px;
    font-weight: 800;
    color: #ff3131;
}

.original-price {
    font-size: 15px;
    color: var(--faint, #a8adc4);
    text-decoration: line-through;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}

.product-tag {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--brand-blue-tint, #f2f2fd);
    color: #1f2bdb;
}

.product-tag.genuine {
    background: #fff0f0;
    color: #ff3131;
}

.add-to-cart {
    width: 100%;
    background: #ff3131;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.add-to-cart:hover {
    background: #d82424;
}

.add-to-cart:disabled {
    background: var(--muted, #6c728f);
    cursor: not-allowed;
}

/* ============================================================
   WHY CHOOSE SECTION
   ============================================================ */
.why-choose-section {
    background: var(--surface, #fff);
    border-radius: 15px;
    padding: 50px;
    margin: 60px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.why-choose-header {
    text-align: center;
    margin-bottom: 40px;
}

.why-choose-header h2 {
    font-size: 36px;
    color: var(--ink, #14172e);
    font-weight: 800;
    margin-bottom: 15px;
}

.why-choose-header p {
    font-size: 18px;
    color: var(--ink-soft, #3d4266);
    max-width: 700px;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 12px;
    background: var(--line-soft, #f0f1f7);
    border-left: 4px solid #1f2bdb;
    transition: all 0.3s;
}

.benefit-item:hover {
    transform: translateY(-5px);
    background: var(--line-soft, #f0f1f7);
}

.benefit-item:nth-child(odd) {
    border-left-color: #ff3131;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: #1f2bdb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.benefit-item:nth-child(odd) .benefit-icon {
    background: #ff3131;
}

.benefit-content h3 {
    font-size: 20px;
    color: var(--ink, #14172e);
    margin-bottom: 5px;
}

.benefit-content p {
    color: var(--ink-soft, #3d4266);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.review-card {
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--line, #e4e6f0);
    transition: transform 0.3s;
}

.review-card:hover {
    transform: translateY(-5px);
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.review-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    background: linear-gradient(135deg, #1f2bdb, #1620ad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
}

.review-stars {
    color: #f6ad55;
}

.review-text {
    color: var(--ink-soft, #3d4266);
    font-style: italic;
    padding-left: 20px;
    position: relative;
}

.review-text::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 40px;
    color: #ff3131;
    opacity: 0.3;
    font-family: serif;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line, #e4e6f0);
}

.pagination a {
    padding: 8px 16px;
    border: 1px solid var(--line, #e4e6f0);
    border-radius: 8px;
    color: var(--ink-soft, #3d4266);
    text-decoration: none;
    transition: all 0.3s;
}

.pagination a:hover {
    background: var(--line-soft, #f0f1f7);
}

.pagination a.active {
    background: #1f2bdb;
    color: white;
    border-color: #1f2bdb;
}

.pagination-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e4e6f0);
    border-radius: 8px;
    color: var(--ink-soft, #3d4266);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-btn:hover {
    background: var(--line-soft, #f0f1f7);
}

.pagination-btn.active {
    background: #1f2bdb;
    color: white;
    border-color: #1f2bdb;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-delivered {
    background: #d1fae5;
    color: #065f46;
}

.status-shipped {
    background: #dbeafe;
    color: #1e40af;
}

.status-processing {
    background: #fed7aa;
    color: #9a3412;
}

.status-pending {
    background: #fef3c7;
    color: var(--used, #a4620b);
}

.status-cancelled {
    background: var(--brand-red-soft, #fee2e2);
    color: #991b1b;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER
   ============================================================ */
/* One flat blue rectangle with four lists on it is what this was, and on a
   page whose header, hero and trust strip are also blue it was the fourth
   blue block in a row. Three things fix that without changing the colour:
   depth (the blue is deepest at the bottom, so the page has a floor rather
   than a fourth slab), a top edge that belongs to the brand, and columns that
   are not all the same shape. */
footer {
    background: linear-gradient(180deg,
                var(--brand-blue, #1f2bdb) 0%,
                var(--brand-blue-dark, #1620ad) 55%,
                var(--brand-blue-deep, #121b6d) 100%);
    color: rgba(255, 255, 255, .9);
    padding: 58px 0 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

/* The red edge along the top, from the logo. */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg,
                var(--brand-red, #ff3131) 0%,
                #ff8e53 50%,
                var(--brand-red, #ff3131) 100%);
    z-index: 2;
}

/* A very faint disc behind the first column. It never reads as a shape - it
   just stops the corner being perfectly flat. */
footer::after {
    content: '';
    position: absolute;
    left: -140px; top: -110px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 46px;
    display: grid;
    /* The first column carries the address and the social links, so it gets
       more room than the three lists. Equal columns made it wrap awkwardly
       while the link lists sat in a lot of empty space. */
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: 44px;
    position: relative;
    z-index: 1;
}

.footer-column h3 {
    font-size: 15px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 11px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 3px;
    border-radius: 2px;
    background-color: var(--brand-red, #ff3131);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 3px; }

.footer-links a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    padding: 7px 10px 7px 0;
    border-radius: 7px;
    transition: color .18s, padding-left .18s, background .18s;
}

.footer-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    padding-left: 10px;
}

.footer-links a i {
    color: var(--brand-red, #ff3131);
    font-size: 10px;
    transition: transform .18s;
}
.footer-links a:hover i { transform: translateX(2px); }

/* The blurb and the contact lines in the first column. */
.footer-column > p {
    color: rgba(255, 255, 255, .78);
    line-height: 1.7;
    font-size: 14px;
    max-width: 300px;
}

.footer-contact { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.footer-contact a, .footer-contact span {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    font-size: 14px;
    padding: 7px 10px 7px 0;
    border-radius: 7px;
    transition: color .18s, background .18s, padding-left .18s;
    width: fit-content;
}
.footer-contact a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    padding-left: 10px;
}
.footer-contact i {
    color: #ffd166;
    width: 15px;
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 13px;
}
.footer-contact .wa i { color: #4ade80; }

.social-links { display: flex; gap: 10px; margin-top: 20px; }

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 16px;
    transition: background .2s, transform .2s, border-color .2s;
}

.social-links a:hover {
    background-color: var(--brand-red, #ff3131);
    border-color: var(--brand-red, #ff3131);
    transform: translateY(-3px);
}

/* The bottom line sits on its own darker band rather than floating in the
   middle of the blue with a hairline above it. */
.copyright {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
}
.copyright a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.copyright a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 980px) {
    .footer-container { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
    footer { padding-top: 42px; margin-top: 48px; }
    .footer-container { grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
    footer::after { display: none; }
}

/* ============================================================
   AUTH PAGES (Login/Register)
   ============================================================ */
.auth-container {
    max-width: 450px;
    margin: 60px auto;
    padding: 0 20px;
}

.auth-card {
    background: var(--surface, #fff);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.auth-card .logo {
    text-align: center;
    margin-bottom: 30px;
}

.auth-card .logo h1 {
    font-size: 32px;
    color: var(--ink, #14172e);
    font-weight: 800;
}

.auth-card .logo span {
    color: #ff3131;
}

.auth-card .logo p {
    color: var(--muted, #6c728f);
    font-size: 14px;
    margin-top: 5px;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header h2 {
    font-size: 28px;
    color: var(--ink, #14172e);
}

.auth-header p {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink-soft, #3d4266);
    font-size: 14px;
}

.form-group label .required {
    color: #ff3131;
}

/* Radios and tick boxes are excluded on purpose. This rule sets
   width:100% and a 12px padding, which is right for a text box and
   absurd for a radio: it made the "Getting it to you" radio at
   checkout 468 pixels wide, so the dot floated in the middle of the
   row and the words were shoved against the right edge. It had been
   doing the same to the air/sea freight radios for as long as they
   have existed. */
.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--line, #e4e6f0);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1f2bdb;
    box-shadow: 0 0 0 3px rgba(31, 43, 219, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint, #a8adc4);
}

.input-group input {
    width: 100%;
    padding: 14px 15px 14px 45px;
}

.error-message {
    background: var(--brand-red-soft, #fee2e2);
    color: #991b1b;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.success-message {
    background: #d1fae5;
    color: #065f46;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line, #e4e6f0);
}

.auth-footer a {
    color: #1f2bdb;
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    color: #ff3131;
}

.terms {
    font-size: 13px;
    color: var(--muted, #6c728f);
    margin-top: 15px;
    text-align: center;
}

.terms a {
    color: #1f2bdb;
    text-decoration: none;
}

.terms a:hover {
    color: #ff3131;
}

.demo-box {
    margin-top: 20px;
    padding: 15px;
    background: var(--line-soft, #f0f1f7);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--muted, #6c728f);
}

.demo-box code {
    background: var(--line, #e4e6f0);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.profile-sidebar {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: fit-content;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2bdb, #1620ad);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 40px;
    color: white;
    font-weight: 700;
}

.profile-sidebar h3 {
    font-size: 20px;
    color: var(--ink, #14172e);
}

.profile-sidebar p {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

.sidebar-menu {
    list-style: none;
    border-top: 1px solid var(--line, #e4e6f0);
    padding-top: 20px;
    margin-top: 20px;
}

.sidebar-menu li {
    margin-bottom: 8px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color: var(--ink-soft, #3d4266);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s;
}

.sidebar-menu a:hover {
    background: var(--line-soft, #f0f1f7);
    color: #1f2bdb;
}

.sidebar-menu a.active {
    background: var(--brand-red-tint, #fff3f2);
    color: #ff3131;
}

.profile-content {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--line-soft, #f0f1f7);
}

.section-header h2 {
    font-size: 22px;
    color: var(--ink, #14172e);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.info-field {
    margin-bottom: 20px;
}

.info-label {
    font-size: 13px;
    color: var(--muted, #6c728f);
    margin-bottom: 5px;
}

.info-value {
    font-size: 16px;
    color: var(--ink, #14172e);
    font-weight: 500;
}

.logout-btn {
    width: 100%;
    background: var(--brand-red-soft, #fee2e2);
    color: #ff3131;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
}

.logout-btn:hover {
    background: #ff3131;
    color: white;
}

.order-card {
    border: 1px solid var(--line, #e4e6f0);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.order-header {
    background: var(--line-soft, #f0f1f7);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--line, #e4e6f0);
}

.order-header .order-number {
    font-weight: 700;
    color: var(--ink, #14172e);
}

.order-header .order-date {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

.order-items {
    padding: 15px 20px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--line, #e4e6f0);
}

.order-item:last-child {
    border-bottom: none;
}

.order-total {
    padding: 15px 20px;
    background: var(--line-soft, #f0f1f7);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 18px;
    border-top: 1px solid var(--line, #e4e6f0);
    color: #ff3131;
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-container {
    display: flex;
    min-height: 100vh;
}

.admin-main {
    flex: 1;
    padding: 20px;
    margin-left: 280px;
}

.admin-sidebar {
    width: 280px;
    background: var(--ink, #14172e);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 0;
}

.admin-sidebar .logo {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    padding: 20px 0 30px;
    border-bottom: 1px solid var(--ink-soft, #3d4266);
}

.admin-sidebar .logo span {
    color: #ff3131;
}

.admin-sidebar ul {
    list-style: none;
    padding: 20px;
}

.admin-sidebar ul li {
    margin-bottom: 5px;
}

.admin-sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--faint, #a8adc4);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
}

.admin-sidebar ul li a:hover {
    background: var(--ink-soft, #3d4266);
    color: white;
}

.admin-sidebar ul li a.active {
    background: #ff3131;
    color: white;
}

.admin-sidebar ul li a i {
    width: 20px;
}

.top-bar {
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 15px 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-title h1 {
    font-size: 24px;
    color: var(--ink, #14172e);
}

.page-title p {
    font-size: 14px;
    color: var(--muted, #6c728f);
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-profile .info {
    text-align: right;
}

.admin-profile .info h4 {
    font-size: 16px;
    color: var(--ink, #14172e);
}

.admin-profile .info p {
    font-size: 12px;
    color: var(--muted, #6c728f);
}

.admin-profile .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #ff3131;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stat-card .info h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink, #14172e);
}

.stat-card .info p {
    color: var(--muted, #6c728f);
    font-size: 14px;
}

.stat-card .icon {
    width: 55px;
    height: 55px;
    background: var(--brand-red-tint, #fff3f2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ff3131;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.chart-card {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-card h3 {
    font-size: 18px;
    color: var(--ink, #14172e);
    margin-bottom: 20px;
}

.data-table {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}

.data-table .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.data-table .header h3 {
    font-size: 18px;
    color: var(--ink, #14172e);
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */
@media (max-width: 1200px) {
    .container,
    .header-container,
    .footer-container,
    .contact-container {
        padding: 0 15px;
    }
}

@media (max-width: 992px) {
    .logo-section {
        flex-direction: column;
        gap: 18px;
    }

    .search-bar {
        max-width: 100%;
        margin: 18px 0;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .trust-container {
        flex-wrap: wrap;
        gap: 25px;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
    }

    .why-choose-section {
        padding: 40px 30px;
    }

    .profile-container {
        grid-template-columns: 1fr;
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-sidebar {
        transform: translateX(-100%);
    }

    .charts-row {
        grid-template-columns: 1fr;
    }

    .product-detail-container {
        grid-template-columns: 1fr;
    }

    .product-image-section {
        position: static;
    }

    .main-image {
        height: 300px;
    }

    .cart-container,
    .checkout-container {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
    }

    .products-layout {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-links {
        justify-content: center;
    }

    .footer-links a:hover {
        transform: none;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero .btn-hero {
        width: 100%;
        justify-content: center;
    }

    .benefit-item {
        flex-direction: column;
        text-align: center;
    }

    .why-choose-section {
        padding: 30px 20px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .section-title {
        font-size: 26px;
    }

    .product-title {
        font-size: 26px;
    }

    .current-price {
        font-size: 28px;
    }

    .add-to-cart-section {
        flex-direction: column;
    }

    .add-to-cart-btn {
        width: 100%;
    }

    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shipping-option {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .cart-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .item-img {
        margin: 0 auto;
    }

    .quantity-control {
        margin: 0 auto;
    }

    .cart-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .page-header h1 {
        font-size: 32px;
    }

    .order-header {
        flex-direction: column;
        text-align: center;
    }

    .order-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .search-box {
        flex-direction: column;
    }

    .order-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .profile-container {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .top-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .admin-profile {
        flex-direction: column;
    }

    .admin-profile .info {
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .products-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-detail-container {
        padding: 20px;
    }

    .main-image {
        height: 250px;
    }
}

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

    .nav-links a {
        padding: 8px 12px;
        font-size: 15px;
    }

    .trust-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .header-actions {
        gap: 10px;
    }

    .header-actions a {
        padding: 6px 10px;
        font-size: 14px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-actions {
        flex-direction: column;
    }

    .view-details-btn {
        width: 100%;
    }

    .auth-container {
        margin: 30px auto;
    }

    .auth-card {
        padding: 25px;
    }

    .auth-header h2 {
        font-size: 24px;
    }

    .page-header h1 {
        font-size: 28px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .filter-options {
        grid-template-columns: 1fr;
    }

    .shipping-option-detail {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .payment-method {
        flex-wrap: wrap;
    }

    .payment-icon {
        margin-bottom: 5px;
    }

    .modal-content {
        padding: 20px;
    }

    .product-detail-container {
        padding: 15px;
    }

    .main-image {
        height: 200px;
    }
}
/* ============================================================
   HOME BANNER (the rotating panel)
   ============================================================ */
/* Slides are stacked on top of each other and cross-faded, not slid along a
   rail. A rail has to know the width of the viewport, breaks when the window is
   resized mid-transition, and fights the browser on a phone. A cross-fade is
   two opacity values and works everywhere. */
.hero-slider {
    position: relative;
    width: 100%;
    /* Tall enough to be a banner, never taller than the screen it is on -
       a hero the height of the window means the customer scrolls before
       seeing a single product. */
    height: clamp(340px, 46vw, 560px);
    overflow: hidden;
    background: var(--brand-blue-deep, #121b6d);
}

.hs-track { position: absolute; inset: 0; }

.hs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
    text-decoration: none;
    color: inherit;
}
.hs-slide.on { opacity: 1; visibility: visible; }

.hs-media {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* A slow drift, so a still photo does not sit there looking like a
       screenshot. Six seconds of nothing moving reads as a page that has
       stopped loading. */
    animation: hs-drift 14s ease-out forwards;
}
.hs-slide:not(.on) .hs-media { animation: none; }
.hs-plain { background: linear-gradient(135deg, var(--brand-blue, #1f2bdb), var(--brand-blue-deep, #121b6d)); }

@keyframes hs-drift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

.hs-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%);
}
.al-center .hs-scrim { background: rgba(0, 0, 0, 1); }
.al-right  .hs-scrim { background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%); }

.hs-words {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
}
.al-center .hs-words { text-align: center; }
.al-center .hs-words p { margin-left: auto; margin-right: auto; }
.al-right .hs-words { text-align: right; }
.al-right .hs-words p { margin-left: auto; }

.hs-words h2 {
    font-size: clamp(30px, 5.4vw, 62px);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -1.4px;
    max-width: 15ch;
    margin-bottom: 16px;
}
.al-center .hs-words h2 { margin-left: auto; margin-right: auto; }
.al-right  .hs-words h2 { margin-left: auto; }

.hs-words p {
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.5;
    max-width: 44ch;
    margin-bottom: 26px;
    opacity: .93;
}

.tx-light .hs-words { color: #fff; }
.tx-dark  .hs-words { color: #14172e; }

.hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .16s, filter .16s;
}
.tx-light .hs-btn { background: var(--surface, #fff); color: #14172e; }
.tx-dark  .hs-btn { background: #14172e; color: #fff; }
.hs-btn:hover { transform: translateY(-2px); filter: brightness(.94); }

/* Arrows sit inside the picture, and only show up when there is a mouse -
   on a phone you swipe. */
.hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    color: #14172e;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.hero-slider:hover .hs-arrow,
.hs-arrow:focus-visible { opacity: 1; }
.hs-arrow:hover { background: var(--surface, #fff); }
.hs-arrow.prev { left: 18px; }
.hs-arrow.next { right: 18px; }
@media (hover: none) { .hs-arrow { display: none; } }

/* The dots double as a progress bar: the active one fills over the hold time,
   so the banner is visibly about to move rather than jumping without warning. */
.hs-dots {
    position: absolute;
    left: 0; right: 0; bottom: 20px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.hs-dot {
    width: 34px; height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    overflow: hidden;
    transition: background .2s;
}
.hs-dot:hover { background: rgba(255, 255, 255, .62); }
.hs-dot span { display: block; height: 100%; width: 0; background: var(--surface, #fff); border-radius: 999px; }
.hs-dot.on span { width: 100%; }
.hs-dot.on.timing span { transition: width linear var(--hold, 6s); }

@media (max-width: 640px) {
    .hero-slider { height: clamp(320px, 78vw, 420px); }
    .hs-words h2 { max-width: 100%; letter-spacing: -.6px; }
    .hs-words p  { margin-bottom: 20px; }
    .hs-btn { padding: 12px 26px; font-size: 14.5px; }
    .hs-dots { bottom: 14px; }
    .hs-dot { width: 26px; }
}

/* Somebody who has asked their machine to stop moving things gets a banner
   that does not move: no drift, no cross-fade. The script also stops rotating. */
@media (prefers-reduced-motion: reduce) {
    .hs-media { animation: none; }
    .hs-slide { transition: none; }
    .hs-dot.on.timing span { transition: none; }
}

/* ============================================================
   THE MENU PANELS
   ============================================================ */
/* Panels are siblings of the nav, not children of a nav item, so one can be
   the full width of the window while the item that opens it is 90px wide.
   A panel nested inside its <li> has to escape overflow, z-index and the
   stacking context of everything above it, and eventually one of those wins.

   The panels hang off .main-header, which is positioned - see the HEADER
   section, which is the one place that says so. A second copy of that rule
   used to sit here as well; two copies of a rule means two places to change it
   and one of them gets missed. */

.nav-links .caret { font-size: 10px; opacity: .55; transition: transform .18s; }
.nav-links li.has-mega.open > a .caret { transform: rotate(180deg); }
.nav-links li.has-mega.open > a { color: var(--brand-blue-ink, #1f2bdb); background: var(--brand-blue-tint, var(--brand-blue-tint, #f2f2fd)); }

.mega-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 999;
    pointer-events: none;
}

.mega {
    position: absolute;
    left: 0; right: 0; top: 0;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line, #e4e6f0);
    box-shadow: 0 20px 40px rgba(20, 23, 46, .13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .17s ease, transform .17s ease, visibility .17s;
}
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.mega-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 34px;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 0;
}

.mega-col { padding: 0 28px; border-right: 1px solid var(--line-soft, #f0f1f7); }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { padding-right: 0; border-right: 0; }

.mega-label {
    font-size: 12px;
    color: var(--faint, #a8adc4);
    font-weight: 600;
    margin-bottom: 14px;
}

.mega-list { list-style: none; }
.mega-list li { margin-bottom: 1px; }
.mega-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #14172e);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mega-list a:hover, .mega-list a.on {
    background: var(--brand-blue-tint, var(--brand-blue-tint, #f2f2fd));
    color: var(--brand-blue-ink, #1f2bdb);
}
/* The count is the honest bit: it says how many are actually in there, so a
   thin category looks thin instead of looking like everything else. */
.mega-list a span {
    font-size: 12px;
    font-weight: 600;
    color: var(--faint, #a8adc4);
}
.mega-list a:hover span, .mega-list a.on span { color: var(--brand-blue-ink, #1f2bdb); }
.mega-list a.all { color: var(--brand-blue-ink, #1f2bdb); font-size: 14px; }

.mega-none { font-size: 13.5px; color: var(--muted, #6c728f); line-height: 1.6; padding: 0 13px; }

.mega-pick {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 10px;
    border-radius: 11px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.mega-pick:hover { background: var(--line-soft, #f0f1f7); }
.mp-shot {
    width: 62px; height: 62px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--line-soft, #f0f1f7);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mp-shot img { max-width: 84%; max-height: 84%; object-fit: contain; }
.mp-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-name {
    font-size: 13px; line-height: 1.35; color: var(--ink, #14172e);
    /* line-clamp is the standard property; -webkit-line-clamp is what browsers
       have actually shipped for the last decade. Both, so the rule keeps
       working in old browsers and stops being a special case in new ones.
       -webkit-box-orient has no standard twin and stays prefixed. */
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    -webkit-line-clamp: 2; line-clamp: 2;
}
.mp-price { font-size: 15px; font-weight: 800; color: var(--ink, #14172e); }
.mp-stock { font-size: 11.5px; font-weight: 600; color: var(--in-stock, #0f9d6e); }
.mp-stock.out { color: var(--faint, #a8adc4); }

/* Below a tablet there is no hover to open a panel with, and three columns do
   not fit anyway. The nav items stay as plain links to their category. */
@media (max-width: 900px) {
    .mega-wrap { display: none; }
    .nav-links .caret { display: none; }
}

/* ============================================================
   SEARCH SUGGESTIONS
   ============================================================ */
.search-bar { position: relative; }

.sb-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 8px);
    z-index: 1200;
    background: var(--surface, #fff);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(20, 23, 46, .18);
    overflow: hidden;
    display: none;
}
.sb-suggest.open { display: block; }

.sb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--line-soft, #f0f1f7);
}
.sb-row:last-child { border-bottom: 0; }
.sb-row:hover, .sb-row.cursor { background: var(--brand-blue-tint, var(--brand-blue-tint, #f2f2fd)); }
.sb-row img {
    width: 42px; height: 42px; object-fit: contain;
    background: var(--line-soft, #f0f1f7); border-radius: 8px; padding: 3px;
    flex-shrink: 0;
}
.sb-name { font-size: 13.5px; line-height: 1.35; flex: 1; min-width: 0; }
.sb-name b { color: var(--brand-blue-ink, #1f2bdb); font-weight: 800; }
.sb-price { font-size: 14px; font-weight: 800; white-space: nowrap; }
.sb-out { font-size: 11px; color: var(--faint, #a8adc4); display: block; font-weight: 600; }

.sb-foot {
    display: block;
    padding: 11px 14px;
    background: var(--line-soft, #f0f1f7);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-blue-ink, #1f2bdb);
    text-decoration: none;
    text-align: center;
}
.sb-foot:hover { background: var(--brand-blue-soft, var(--brand-blue-soft, #e0e1fa)); }
.sb-empty { padding: 20px 16px; text-align: center; font-size: 13.5px; color: var(--muted, #6c728f); }

/* ============================================================
   THE PHONE
   ============================================================ */
/* What was here stacked the header vertically: logo, then search, then the
   actions wrapped onto two rows, then the nav wrapped onto three. It worked,
   in the sense that nothing overlapped - but the header ate the entire first
   screen, so the first thing a customer on a phone saw was the header and
   nothing else.

   One row instead: menu, logo, search, cart. Everything else moves into a
   drawer. */

.nav-burger {
    display: none;
    width: 42px; height: 42px;
    border: 0; border-radius: 11px;
    background: var(--line-soft, #f0f1f7);
    color: var(--ink, #14172e);
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-burger:hover { background: var(--line, #e4e6f0); }

.nav-veil {
    position: fixed; inset: 0;
    z-index: 1400;
    background: rgba(20, 23, 46, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
html.menu-open .nav-veil { opacity: 1; visibility: visible; }

.nav-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    z-index: 1450;
    background: var(--surface, #fff);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: 0 0 50px rgba(20, 23, 46, .3);
}
html.menu-open .nav-drawer { transform: translateX(0); }
/* Stop the page behind the drawer scrolling under it.

   ON html, NOT ON body - the same trap as overflow-x further down. On body it
   makes body a scrolling box, which un-pins the header: opening the menu
   dropped the header away behind the veil, and closing it lost the reader's
   place on the page. On html the window simply stops scrolling, keeps its
   position, and the header stays exactly where it was. */
html.menu-open { overflow: hidden; }

.nd-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    background: var(--brand-blue, #1f2bdb);
    color: #fff;
    flex-shrink: 0;
}
.nd-title { font-size: 15px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.nd-close {
    border: 0; background: rgba(255,255,255,.16); color: #fff;
    width: 34px; height: 34px; border-radius: 9px;
    font-size: 22px; line-height: 1; cursor: pointer;
}

.nd-links { flex: 1; overflow-y: auto; padding: 10px; }
.nd-links a {
    display: flex; align-items: center; gap: 13px;
    /* 48px tall. A 32px row is a row you miss on a moving minibus. */
    min-height: 48px;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #14172e);
    text-decoration: none;
}
.nd-links a:active { background: var(--brand-blue-tint, var(--brand-blue-tint, #f2f2fd)); }
.nd-links a i { width: 19px; text-align: center; color: var(--brand-blue-ink, #1f2bdb); font-size: 15px; }
.nd-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--faint, #a8adc4); }

.nd-foot {
    border-top: 1px solid var(--line, #e4e6f0);
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    flex-shrink: 0;
}
.nd-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 700;
    text-decoration: none;
    background: var(--brand-blue, #1f2bdb); color: #fff;
}
.nd-btn.quiet { background: var(--line-soft, #f0f1f7); color: var(--ink-soft, #3d4266); }
/* WhatsApp's own green, kept exactly - it is how the button is recognised -
   but with dark ink on it rather than white. White on #25d366 is 2:1, which is
   barely text at all; WhatsApp themselves put dark type on this green. */
.nd-btn.wa { background: #25d366; color: #0b2e1c; }

@media (max-width: 900px) {
    .nav-burger { display: inline-flex; align-items: center; justify-content: center; }

    /* One row. Not a column. */
    .logo-section {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        flex-wrap: nowrap;
    }
    .logo { flex-shrink: 0; }
    .logo img { height: 34px; }

    .search-bar { flex: 1; min-width: 0; margin: 0; max-width: none; }
    .search-bar input { padding: 10px 46px 10px 16px; font-size: 15px; }
    .search-bar button { width: 34px; height: 34px; top: 4px; right: 4px; font-size: 13px; }

    /* Everything except the basket is in the drawer now. */
    .header-actions { width: auto; gap: 0; }
    .header-actions > a:not([href*="cart"]) { display: none; }
    .header-actions .account-menu { display: none; }
    .header-actions a[href*="cart"] { padding: 8px; font-size: 0; }
    .header-actions a[href*="cart"] i { font-size: 19px; }
    .header-actions a[href*="cart"] #cartCount {
        font-size: 11px; font-weight: 800;
        background: var(--brand-red, #ff3131); color: #fff;
        border-radius: 999px; padding: 1px 6px; margin-left: -6px;
        position: relative; top: -8px;
    }

    .main-nav { display: none; }

    /* The footer stays left-aligned. Centring every column looks tidy in a
       mockup and reads badly in practice - a centred list of contact lines
       has no left edge for the eye to run down. */
    .footer-container { grid-template-columns: 1fr; text-align: left; }
    .footer-column h3::after { left: 0; transform: none; }
    .social-links { justify-content: flex-start; }
}

@media (max-width: 640px) {
    /* Tap targets. Anything a thumb has to hit is at least 44px. */
    .btn, .btn-primary, .add-to-cart, .xm-btn, .hs-btn { min-height: 44px; }

    /* Any table that will not fit gets a scroller with a shadow at the edge,
       rather than pushing the whole page sideways - a page that scrolls
       horizontally on a phone feels broken even when nothing is wrong. */
    table { max-width: 100%; }
    .table-scroll, .cmp-scroll { -webkit-overflow-scrolling: touch; }

    .page-header { padding: 34px 0; }
    .page-header h1 { font-size: 27px; }
    .page-header p { font-size: 15px; }

    .section-title, h2.section-title { font-size: 22px !important; }

    /* Grids that were three or four across become two, and the ones that
       cannot be two become one. */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .values-grid, .benefits-grid, .reviews-grid, .mv-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }

    .container, .about-container, .cmp-page { padding-left: 14px; padding-right: 14px; }
}

/* Nothing on the shop may push the page sideways. If something does, it is a
   bug in that thing, and this makes it visible as a squashed element rather
   than as a whole page that slides.

   ON html ONLY, AND NOT ON body. This is the whole reason the header was not
   staying at the top of the screen even though it has said `position: sticky`
   for months.

   overflow-x: hidden on an element also makes it a scrolling box. A sticky
   child sticks to its nearest scrolling ancestor, so with it on body the header
   was sticking to BODY - which never scrolls, because the window does - and it
   slid away with the page. The declaration looked right in the stylesheet and
   did nothing.

   On html the browser hands the clipping to the window instead of making a box,
   so the page still cannot be pushed sideways and sticky works. Measured both
   ways at 1280px and at 390px before this was changed. */
html { overflow-x: hidden; }

/* ============================================================
   THE WORDMARK
   ============================================================ */
/* The shop's name, in the arcade face, wherever it is set as TEXT rather than
   shown as the logo image.
   
   Only the name. Press Start 2P is a pixel face built for eight-character
   arcade high-score tables: every glyph is the same width, there are no real
   lower-case letters, and a paragraph of it is genuinely hard to read. On four
   words it is a logotype; on a sentence it is a wall.
   
   TO TURN IT OFF: change --wordmark-font below back to inherit. That is the
   only edit needed - nothing else references the face. */
:root {
    /* Was 'Press Start 2P' - an 8-bit arcade face. It made the shop's name
       read as a game rather than a shop, and at small sizes it was simply hard
       to read. This is one line: change it and the whole site follows. */
    --wordmark-font: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}

.wordmark {
    font-family: var(--wordmark-font);
    /* The arcade face needed shrinking to .72em because its em box was
       enormous. A normal face does not, and holding it back now would make the
       shop's name the smallest thing in its own heading. */
    font-size: 1em;
    letter-spacing: -.005em;
    line-height: 1.2;
    font-weight: 700;      /* the old face had one weight, so this used to be
                              400 to stop the browser faking a bold */
    text-transform: uppercase;
    display: inline-block;
    vertical-align: baseline;
}

/* In the header, where it is the fallback for a missing logo image. */
.logo h1.wordmark { font-size: 17px; line-height: 1.35; letter-spacing: 0; }
.logo h1.wordmark span { color: var(--brand-red, #ff3131); }

/* In the footer heading, where the column titles are small and spaced. */
.footer-column h3.wordmark {
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.6;
    text-transform: none;   /* the face is upper-case already */
}

/* In the copyright line, at the very bottom, where it must not shout. */
.copyright .wordmark { font-size: .78em; letter-spacing: 0; }

@media (max-width: 640px) {
    /* A monospaced pixel face cannot hyphenate and will not wrap mid-word, so
       on a narrow screen it is the one thing that can push the page sideways.
       Smaller, and allowed to break. */
    .wordmark { font-size: .62em; word-break: break-word; }
    .logo h1.wordmark { font-size: 13px; }
}

/* ---- phone corrections, after everything else so these win ---- */
@media (max-width: 900px) {
    /* The figures strip was stacking one per row and centring itself, which
       ate the whole first screen before the banner. Two across, left-aligned,
       icon beside the words. */
    .trust-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
        justify-content: stretch;
        text-align: left;
    }
    .trust-item {
        flex: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 10px;
        text-align: left;
        min-width: 0;
    }
    .trust-icon { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }
    .trust-text h3 { font-size: 13.5px; }
    .trust-text p  { font-size: 11.5px; }
    .trust-bar { padding: 12px 0; }

    /* The search field had the round red button sitting on top of the text.
       The button is smaller, and the field is padded to clear it. */
    .search-bar input { padding-right: 44px; }

    /* The basket count as a badge on the corner of the bag, not a number
       floating off to the right of it. */
    .header-actions a[href*="cart"] {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: 11px;
    }
    .header-actions a[href*="cart"] #cartCount {
        position: absolute; top: 2px; right: 0;
        margin: 0; padding: 0 5px;
        min-width: 17px; height: 17px; line-height: 17px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .trust-container { grid-template-columns: 1fr; }
    .logo img { height: 28px; }
}

@media (max-width: 900px) {
    /* The logo is a wide wordmark, so at 34px tall it is 150px across and the
       search field gets whatever is left - which was about eight characters.
       Capped, and the search field gets a floor of its own. */
    .logo img { max-width: 108px; object-fit: contain; }
    .search-bar { min-width: 130px; }
}
@media (max-width: 420px) {
    .logo img { max-width: 84px; }
    .search-bar input::placeholder { font-size: 13px; }
}

/* ============================================================
   DARK MODE - the parts that were not tokens
   ============================================================ */
/* Most of the site follows the tokens and needs nothing here. These are the
   places that were written with a literal colour before the tokens existed,
   and would otherwise stay white in the dark. */
html[data-theme="dark"] body { background: var(--page); color: var(--ink); }

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .filter-sidebar,
html[data-theme="dark"] .products-content,
html[data-theme="dark"] .cmp-scroll,
html[data-theme="dark"] .cmp-empty,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .brand-grid,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .map-section,
html[data-theme="dark"] .why-choose-section,
html[data-theme="dark"] .sb-suggest,
html[data-theme="dark"] .mega,
html[data-theme="dark"] .cmp-tray,
html[data-theme="dark"] .trust-bar,
html[data-theme="dark"] .nav-drawer,
html[data-theme="dark"] .account-dropdown {
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] .main-header { border-bottom: 1px solid var(--line); box-shadow: none; }
html[data-theme="dark"] .main-nav { border-top-color: var(--line); }
html[data-theme="dark"] .nav-links a { color: var(--ink-soft); }
html[data-theme="dark"] .nav-links a:hover { background: var(--brand-blue-tint); color: var(--brand-blue); }
html[data-theme="dark"] .header-actions a { color: var(--ink-soft); }
html[data-theme="dark"] .header-actions a:hover { background: var(--line-soft); color: var(--brand-blue); }
html[data-theme="dark"] .search-bar input {
    background: var(--line-soft); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .search-bar input::placeholder { color: var(--faint); }

/* The product card's hover panel is a white rectangle by definition. */
html[data-theme="dark"] .xm-card::before { background: var(--surface); }
html[data-theme="dark"] .xm-name,
html[data-theme="dark"] .xm-price,
html[data-theme="dark"] .mp-name,
html[data-theme="dark"] .mp-price,
html[data-theme="dark"] .xm-act { color: var(--ink); }
/* .mp-shot used to be listed here too, given a DARK background at night - which
   is the bug in miniature: a photograph cut out on white, on a dark tile, is a
   white rectangle with a dark frame. The plate block further down owns this
   now, for every photograph on the site. */
html[data-theme="dark"] .xm-shot .ph { background: var(--line-soft); }

html[data-theme="dark"] .data-table th { background: var(--line-soft); color: var(--muted); }
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] table.cmp th,
html[data-theme="dark"] table.cmp td { border-bottom-color: var(--line); }
html[data-theme="dark"] table.cmp th.rowlabel { background: var(--line-soft); color: var(--ink-soft); }

/* The map's empty provinces need to be visible against a dark card. */
html[data-theme="dark"] .zm-shape.zm-none { fill: #23273f; }
html[data-theme="dark"] .zm-shape { stroke: var(--surface); }
html[data-theme="dark"] .zm-label { fill: var(--ink); stroke: rgba(0,0,0,.55); }

/* ============================================================
   PRODUCT PHOTOGRAPHS, AND THE PLATE THEY SIT ON
   ============================================================
   See --shot-plate at the top of this file for what this is for.

   One block, prefixed with `html` so it beats the copies that grew up inside
   cart.php, checkout.php and product-details.php - each of which had picked its
   own background for the same job, and three of which were DARK, which is what
   left a white rectangle floating on a dark tile.

   This does partly reverse an earlier decision here, which said photographs
   should never be dimmed because "a customer deciding on a phone by its picture
   needs the picture". That was right about the principle and wrong about the
   result: what the customer actually got at night was a wall of white blocks
   too bright to look at, which is not the picture either. Eight per cent is
   below where anybody judges a colour - the saturate() nudge puts back the
   little that dimming takes out - and it is the difference between a grid you
   can read and one you squint at. */

html .xm-shot,
html .main-image,
html .item-img,
html .basket-shot,
html .summary-shot,
html .mp-shot,
html .thumbnail,
html .swatch-img,
html .basket-with-card img {
    background: var(--shot-plate);
    border-radius: var(--radius-sm, 10px);
}

/* A boundary, so the tile is a tile rather than a bright patch that stops. */
html .xm-shot,
html .main-image,
html .item-img,
html .mp-shot { border: 1px solid var(--shot-edge); }

html .xm-shot img,
html .main-image img,
html .item-img img,
html .basket-shot img,
html .summary-shot img,
html .mp-shot img,
html .thumbnail img,
html .swatch-img img,
html .basket-with-card img,
html .cmp-shot { filter: var(--shot-dim); }

/* The colour swatches are the same photograph at 66 pixels, and they were the
   brightest thing left on the product page once the big one was plated - a row
   of little white squares under a soft grey one. */
html .swatch-img { border-radius: 8px; }

/* ---- Brand marks --------------------------------------------------
   The same problem as a product photograph, arriving from the other side.
   A manufacturer's logo is usually a BLACK mark on a transparent background,
   and the strip deliberately greys them at rest so six brand colours do not
   clash. Grey a black mark and it stays black; put that on a near-black panel
   and the row reads as empty.

   Three fixes were rendered side by side against six real logo shapes before
   this one was picked, and the other two each broke two of the six:

     INVERT THE GREYSCALE  turns a black mark white, which is right - and turns
     a WHITE mark black, which makes an already-fine logo disappear. It also
     turns a mark supplied on a white box into a black box.

     FLAT WHITE SILHOUETTE works for anything on a transparent background, and
     turns a mark supplied on a white box into a solid white slab with no mark
     in it at all.

     THE PLATE works for all six, because it does not care what the logo is.
     It is also the answer already used for product photographs, so the shop
     handles every picture the same way at night.

   The plate goes on the IMG rather than on the box around it, which keeps it
   off the brands that have no logo and show their name as text instead - a
   light plate behind light text would be the same disappearing act again. */
html[data-theme="dark"] .brand-face img {
    border: 1px solid var(--shot-edge);
    /* The rounding and the padding are NOT set here. They are on the mark
       itself in index.php, in both modes, so the logo is exactly the same size
       by day and by night - set them again here and the night one would quietly
       be the bigger of the two. All this rule adds is the plate. */
    /* PURE WHITE here, not --shot-plate, and no opacity. Both matter.

       A logo supplied on its own white box renders that box at full white, and
       the plate has to end up the same colour or the box shows through as a
       brighter rectangle with a visible edge - which is the thing a plate
       exists to prevent.

       A CSS filter applies to the element's own background as well as its
       content, so the brightness below dims the plate and the logo's white box
       by the same amount, and they land on the same value. Starting the plate
       at --shot-plate, which is ALREADY the dimmed white, would dim it twice
       and leave the box 30 points brighter.

       opacity would break it the other way: the plate would be composited over
       the dark cell behind it while the logo's white sits on the opaque plate,
       so the two would be softened against different backdrops and differ
       again. The softening comes from the filter instead, where it treats
       both identically. */
    background: #ffffff;
    filter: grayscale(1) contrast(1.15) brightness(.86);
}

/* The product peek, revealed on hover, is product photographs on a tile - so
   it takes the same plate as everywhere else rather than --surface, which is
   dark and puts the white cut-out back. */
html[data-theme="dark"] .brand-peek-tile {
    background: var(--shot-plate);
    border: 1px solid var(--shot-edge);
}
html[data-theme="dark"] .brand-shots img { filter: var(--shot-dim); }

/* The compare table's picture IS the img, with no container to plate, so it
   carries its own. */
html .cmp-shot {
    background: var(--shot-plate);
    border: 1px solid var(--shot-edge);
    border-radius: var(--radius-sm, 10px);
    padding: 6px;
}

/* The checkout's little square and the basket panel's already draw their own
   border on the img. Anything that plates the IMG rather than the box around it
   needs the edge there instead, or the corner shows through. */
html .summary-shot img,
html .basket-shot img {
    background: var(--shot-plate);
    border: 1px solid var(--shot-edge);
}

/* The photo fills its plate rather than floating in the middle of it with a
   different white behind. object-fit keeps the whole product visible. */
html .item-img img { object-fit: contain; padding: 6px; }

/* The thumbnail strip on the product page picks its selected one out with a
   coloured ring, which has to stay stronger than the hairline above. */
html .thumbnail { border: 2px solid var(--line, #e4e6f0); }
html .thumbnail.active { border-color: var(--brand-red, #ff3131); }
html .thumbnail:hover  { border-color: var(--brand-blue-ink, #1f2bdb); }

/* ---- the switch ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); }
/* Only one of the two icons at a time, and CSS decides which - so the button
   is right on the very first paint rather than after a script has run. */
.theme-toggle .moon { display: inline; }
.theme-toggle .sun  { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun  { display: inline; }

/* ============================================================
   THE WORDMARK, LARGER AND ALIVE
   ============================================================ */
.wordmark {
    /* Bigger than the text it sits with, because it is the name of the shop
       and it should win. */
    font-size: .95em;
    letter-spacing: .04em;
    line-height: 1.45;
}

/* No animation. It was a slow roll between the two brand colours; on the page
   it read as movement in the corner of your eye while you were trying to read
   something else, which is the wrong trade for a shop name. The face alone is
   distinctive enough to do the job standing still. */

/* The header's fallback wordmark keeps its two-tone split. */
.logo h1.wordmark { font-size: 19px; }
.logo h1.wordmark span { color: var(--brand-red); }

.footer-column h3.wordmark { font-size: 15px; }
.copyright .wordmark { font-size: .86em; }

@media (max-width: 640px) {
    .wordmark { font-size: .8em; }
    .logo h1.wordmark { font-size: 14px; }
}

/* The drawer's theme button says what pressing it will do, not what is on. */
.nd-btn .t-dark  { display: none; }
html[data-theme="dark"] .nd-btn .t-light { display: none; }
html[data-theme="dark"] .nd-btn .t-dark  { display: inline; }

/* The header's two logos - only one is ever shown.
   
   Written as `.logo img.logo-nite`, not `.logo-nite`. There is an older rule
   `.logo img { display: block }` a thousand lines above this, and an element
   plus a class outranks a class on its own - so a bare `.logo-nite {
   display: none }` lost, and BOTH logos showed at once in light mode. This
   matches its specificity and then wins on order. */
.logo img.logo-dayt,
.logo img.logo-nite { height: 44px; width: auto; }

.logo img.logo-dayt { display: block; }
.logo img.logo-nite { display: none; }

html[data-theme="dark"] .logo img.logo-dayt { display: none; }
html[data-theme="dark"] .logo img.logo-nite { display: block; }

@media (max-width: 900px) {
    .logo img.logo-dayt,
    .logo img.logo-nite { height: 34px; max-width: 108px; object-fit: contain; }
}
@media (max-width: 420px) {
    .logo img.logo-dayt,
    .logo img.logo-nite { max-width: 84px; }
}


/* The blue bands - hero, page headers, the footer, the stats strip - are white
   type on brand blue in BOTH themes. They are the brand, not the page. */
.hero, .page-header, footer, .stats-section, .contact-bar,
.hs-slide, .nd-top, .pay-strip {
    color-scheme: light;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .stats-section { color: #fff; }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .stats-section .stat-item h3,
html[data-theme="dark"] .stats-section .stat-item p { color: #fff; }

/* Buttons keep white type on their brand fill in both themes. */
html[data-theme="dark"] .xm-btn,
html[data-theme="dark"] .hs-btn.dark,
html[data-theme="dark"] .btn-primary { color: #fff; }
/* Except a disabled one, which has no brand fill to sit on - it is grey, and
   white on that grey measures 3.5:1. "Sold out" is the one word on a sold-out
   card the customer most needs to read, so it takes dark ink. The rule above
   is about type on a COLOUR; this is not one. */
html[data-theme="dark"] .xm-btn[disabled] { color: #1b1e33; }
html[data-theme="dark"] .tx-light .hs-btn { background: #fff; color: #14172e; }