/* ============================================================
   Tera Computer — design system
   A faceted, crystalline visual language built from the brand
   mark's diamond tiles: angular corner facets, layered blues,
   a single warm accent reserved for price/status.
   ============================================================ */

:root {
    /* ---- surfaces ---- */
    --ink: #0b1220;
    --navy-900: #0e1730;
    --navy-800: #131e3d;
    --navy-700: #1a2850;
    --paper: #f4f7fd;
    --white: #ffffff;

    /* ---- brand blue family ---- */
    --blue-700: #1230c4;
    --blue-600: #1c3fd6;
    --blue-500: #2f5fe0;
    --blue-300: #7ba0ff;
    --ice: #dbe6ff;
    --ice-soft: #eef3ff;

    /* ---- warm accent (used sparingly: price, status) ---- */
    --amber: #ff8a34;
    --amber-deep: #e06a1c;

    /* ---- text ---- */
    --slate: #56607a;
    --slate-on-dark: #9aa8cc;
    --line: #dbe3f5;
    --line-soft: #e8edfa;
    --line-on-dark: #263461;

    /* --white is reserved for text and icons sitting on a dark field
       (the navbar, the hero, the footer, a filled blue button). It stays
       white in every theme. Panel and card backgrounds use --surface,
       which is what actually flips when the theme changes. Keeping these
       two apart is the whole reason dark mode is a token swap rather
       than a second stylesheet. */
    --surface: #ffffff;
    --surface-sunken: #f9fbff;

    --radius: 6px;
    --radius-sm: 3px;

    /* Noto Kufi/Sans Arabic cover both Arabic and Kurdish Sorani (which
       uses the Perso-Arabic script, including its extra letters like
       ڕ ڵ ھ ۆ ێ). They only ship Arabic-range glyphs, so Latin text --
       prices, model numbers, the occasional English brand name -- falls
       through to Unbounded/Inter/IBM Plex Mono automatically; both
       scripts can share one stack safely. */
    --font-display: 'Unbounded', 'Noto Kufi Arabic', sans-serif;
    --font-body: 'Inter', 'Noto Sans Arabic', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Noto Sans Arabic', monospace;

    --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04);
    --shadow-lift: 0 20px 40px -18px rgba(18, 48, 196, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* A flex or grid item defaults to a minimum width equal to its content's
   natural size, and for an <img> that means its real pixel dimensions --
   not the CSS width it's been given. `max-width: 100%` above only caps
   the rendered size; it does nothing to stop a large product photo from
   forcing the card (and everything sharing its grid track) wider than
   the screen. This is the actual cause of the sideways-scrolling,
   squeezed-looking layout on narrow phones: on desktop there's enough
   room that nobody notices a card wanting to be 500px wide, but on a
   360px screen that same card drags the whole row, and the whole page,
   out past the viewport edge.
   `min-width: 0` on each of these breaks that chain at its source. */
.product-image,
.product-card,
.detail-image,
.related-img,
.viewed-item,
.viewed-item .vi-img,
.quickview-image,
.catalog-main,
.detail-body { min-width: 0; }

:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Navbar ---------- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 18, 32, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-on-dark);
}

.nav-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white);
    flex-shrink: 0;
}

.brand-logo,
.brand-mark {
    height: 32px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.brand-word {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    color: var(--white);
}

.brand-word-light { color: var(--blue-300); font-weight: 500; }

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--slate-on-dark);
    padding: 6px 0;
    transition: color 0.15s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--blue-300);
    transition: right 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    right: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    margin: 0 auto;
    /* Always white: this sits on the navbar, which stays dark navy in
       both themes. --surface flips with the theme and would go
       invisible against the dark bar in dark mode. */
    background: var(--white);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy-900);
    color: var(--white);
    padding: 76px 28px 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: center;
    gap: 32px;
    padding-bottom: 56px;
}

.hero-copy { max-width: 560px; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--blue-300);
    margin: 0 0 20px;
}

.hero-tag .tag-dot {
    width: 7px;
    height: 7px;
    background: var(--blue-300);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 4.4vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    color: var(--white);
}

.hero-sub {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--slate-on-dark);
    max-width: 520px;
    margin: 0 0 32px;
}

.search-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 0 20px;
}

#product-search {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 14px 18px;
    border: 1.5px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05);
    color: var(--white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#product-search::placeholder { color: #6c7aa0; }

#product-search:focus {
    border-color: var(--blue-300);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(123, 160, 255, 0.18);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.hero-btn-primary {
    background: var(--blue-500);
    color: var(--white);
}

.hero-btn-primary:hover { background: var(--blue-600); transform: translateY(-1px); }

.hero-btn-ghost {
    background: transparent;
    color: var(--white);
    border: 1.5px solid var(--line-on-dark);
}

.hero-btn-ghost:hover { border-color: var(--blue-300); color: var(--blue-300); }

/* ---- hero illustration: faceted diamond cluster ---- */

.hero-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    /* The glow behind the artwork is wider than this box on narrow
       screens. .hero above already clips it visually, but without its
       own overflow:hidden this box's un-clipped content can still
       inflate its container's scrollWidth and trigger horizontal
       scroll on some mobile browsers. */
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(47, 95, 224, 0.55), rgba(47, 95, 224, 0) 70%);
    filter: blur(40px);
    pointer-events: none;
}

.hero-art svg {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: auto;
}

.facet-float-a { animation: facetFloatA 7s ease-in-out infinite; transform-origin: center; }
.facet-float-b { animation: facetFloatB 8.5s ease-in-out infinite; transform-origin: center; }
.facet-float-c { animation: facetFloatA 6s ease-in-out infinite; animation-delay: -2s; transform-origin: center; }

@keyframes facetFloatA {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes facetFloatB {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(8px) rotate(3deg); }
}

/* ---------- Brand ticker ---------- */

.brand-ticker {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line-on-dark);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.brand-ticker[hidden] { display: none; }

.brand-ticker-track {
    display: flex;
    width: max-content;
    gap: 48px;
    padding: 20px 0;
    animation: tickerScroll 32s linear infinite;
}

.brand-ticker-item {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--slate-on-dark);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Catalog / filters ---------- */

.catalog {
    max-width: 1220px;
    margin: 0 auto;
    padding: 56px 28px 110px;
}

/* ---------- Catalog layout ---------- */

.catalog {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 28px 110px;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 224px 1fr;
    gap: 40px;
    align-items: start;
}

/* ---- Topbar (heading + meta + mobile filter toggle) ---- */

.catalog-topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.catalog-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.catalog-topbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    /* Three controls (result count, filter button, grid/list toggle)
       fit on one line on anything wider than a phone. Below that they
       wrapped invisibly off the edge of the screen instead of onto a
       second line, because nothing here could shrink or break --
       flex-wrap alone fixes it, and it's a no-op at any width wide
       enough that wrapping was never needed. */
}

.results-meta {
    font-size: 0.82rem;
    color: var(--slate);
    margin: 0;
    white-space: nowrap;
}

.mobile-filter-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.mobile-filter-toggle:hover { border-color: var(--blue-500); color: var(--blue-700); }
.mobile-filter-toggle[aria-expanded="true"] { border-color: var(--blue-500); color: var(--blue-700); background: var(--ice-soft); }

/* ---- Sidebar ---- */

.catalog-sidebar {
    position: sticky;
    top: 72px;        /* below the navbar */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.catalog-sidebar::-webkit-scrollbar { width: 4px; }
.catalog-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.sidebar-block {
    padding: 18px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.sidebar-block:last-child { border-bottom: none; }

.sidebar-block--sub { padding-top: 14px; }

.sidebar-section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--slate);
    margin-bottom: 10px;
}

.sidebar-section-label--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.clear-filters-btn {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--blue-600);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.clear-filters-btn:hover { color: var(--blue-700); text-decoration: underline; }

/* ---- Category list (vertical) ---- */

.cat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.cat-item:hover {
    background: var(--ice-soft);
    color: var(--blue-700);
}

.cat-item.active {
    background: var(--blue-700);
    color: var(--white);
    font-weight: 600;
}

.cat-item.active .count-badge {
    background: rgba(255,255,255,0.18);
    color: var(--white);
}

.count-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    background: var(--ice-soft);
    color: var(--slate);
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

/* Sub-items sit slightly indented */
.cat-list--sub .cat-item {
    font-size: 0.82rem;
    padding: 6px 10px 6px 14px;
    color: var(--slate);
}

.cat-list--sub .cat-item:hover { color: var(--blue-700); }

.cat-list--sub .cat-item.active {
    background: var(--blue-500);
    color: var(--white);
}

/* ---- Sort select ---- */

.sort-select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356607a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease;
}

.sort-select:hover,
.sort-select:focus {
    border-color: var(--blue-500);
    outline: none;
}

/* ---------- Products grid ---------- */


.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.loading-state,
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 70px 20px;
    color: var(--slate);
    font-size: 0.92rem;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
}

.product-card {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.product-card:hover {
    border-color: var(--blue-500);
    box-shadow: var(--shadow-lift);
}

.product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ice-soft);
    border-bottom: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.product-image::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 26px; height: 26px;
    background: linear-gradient(135deg, var(--blue-300), var(--blue-600));
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
}

.product-card.is-sold-out .product-image img {
    opacity: 0.4;
    filter: grayscale(60%);
}

.sold-out-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--ink);
    color: var(--white);
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.product-card.is-sold-out .product-name,
.product-card.is-sold-out .product-price {
    color: var(--slate);
}

.product-info {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.product-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.35;
}

.product-category {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--blue-600);
}

.product-subcategory {
    font-size: 0.78rem;
    color: var(--slate);
    margin-bottom: 4px;
}

.product-description {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--slate);
    margin-bottom: 6px;
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.product-spec {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    background: var(--ice-soft);
    color: var(--blue-700);
    padding: 3px 9px;
    border-radius: 3px;
}

.product-price {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--amber-deep);
    margin-top: auto;
    padding-top: 6px;
}

.product-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.product-button {
    flex: 1;
    width: 100%;
    padding: 11px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--blue-700);
    color: var(--white);
    border: 1.5px solid var(--blue-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.product-button:hover {
    background: var(--blue-600);
}

.product-button-ghost {
    background: var(--surface);
    color: var(--blue-700);
}

.product-button-ghost:hover {
    background: var(--blue-700);
    color: var(--white);
}

.product-button.is-disabled {
    background: var(--paper);
    color: var(--slate);
    border-color: var(--line);
    cursor: not-allowed;
}

.product-button.is-disabled:hover {
    background: var(--paper);
    color: var(--slate);
}


/* ---------- Footer ---------- */

.site-footer {
    background: var(--navy-900);
    color: var(--white);
    padding: 60px 28px 32px;
}

.footer-inner {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
}

.footer-col-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-300);
    margin: 0 0 16px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--white);
    margin-bottom: 14px;
}

.footer-brand img { height: 30px; width: auto; }

.footer-note {
    color: var(--slate-on-dark);
    font-size: 0.9rem;
    max-width: 320px;
    margin: 0 0 14px;
    line-height: 1.6;
}

.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: var(--slate-on-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.footer-link-list a:hover { color: var(--white); }

.footer-link-list svg { flex-shrink: 0; margin-top: 3px; color: var(--blue-300); }

.footer-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--white);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.footer-directions:hover { border-color: var(--blue-300); background: rgba(255,255,255,0.1); }

.social-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.social-badge {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.social-badge:hover {
    transform: translateY(-2px);
    border-color: var(--blue-300);
    background: rgba(255,255,255,0.1);
}

.social-badge img { width: 20px; height: 20px; }

.footer-bottom {
    max-width: 1220px;
    margin: 44px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-legal {
    font-size: 0.78rem;
    color: #6a7aa3;
    margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; padding-bottom: 40px; }
    .hero-art { order: -1; min-height: 220px; }
    .hero-art svg { max-width: 260px; }
    .hero-copy { max-width: none; }
    .footer-inner { grid-template-columns: 1fr 1fr; }

    /* Collapse sidebar into a slide-down panel on tablet/mobile */
    .catalog-layout { grid-template-columns: 1fr; gap: 0; }

    .mobile-filter-toggle { display: flex; }

    .catalog-sidebar {
        position: static;
        max-height: 0;
        overflow: hidden;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--line);
        margin: 0 0 24px;
        transition: max-height 0.3s ease;
    }

    .catalog-sidebar.is-open {
        max-height: 80vh;
        overflow-y: auto;
        border: 1.5px solid var(--line);
        border-radius: var(--radius-sm);
        margin-bottom: 24px;
    }
}

/* Hidden by default (desktop); the media query below turns it into a
   column of rows, and it only actually becomes visible once the
   dropdown itself opens (`.navbar.nav-open .nav-links`). Declared
   before the media query on purpose -- a plain rule placed after a
   media-query rule wins regardless of viewport, which silently
   defeated this at every width the first time around. */
.nav-links-extra { display: none; }

@media (max-width: 760px) {
    /* Five icon buttons (theme, saved, compare, cart, hamburger) never
       fit next to the wordmark on a narrow phone -- the row overflowed
       and pushed the hamburger itself off-screen, which meant the menu
       could not be opened at all below about 400px. Only cart and the
       hamburger stay in the bar; theme/saved/compare move into rows
       inside the dropdown, reusing the same classes so the existing
       click handlers (which already do querySelectorAll) just work. */
    .nav-inner { padding: 12px 16px; gap: 10px; }

    .nav-tools { gap: 4px; }
    .nav-tools .theme-toggle,
    .nav-tools .saved-toggle,
    .nav-tools .saved-link,
    .nav-tools .compare-nav-btn { display: none; }

    .nav-links-extra { display: flex; flex-direction: column; }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-900);
        border-bottom: 1px solid var(--line-on-dark);
        flex-direction: column;
        gap: 0;
        padding: 8px 28px;
        display: none;
    }

    .nav-links a {
        padding: 12px 0;
        border-bottom: 1px solid var(--line-on-dark);
    }

    .navbar.nav-open .nav-links { display: flex; }

    .nav-toggle { display: flex; }

    .hero { padding: 56px 20px 0; }

    .catalog { padding: 40px 20px 80px; }

    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

.nav-drawer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-on-dark);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.nav-drawer-row svg { flex-shrink: 0; }

.nav-drawer-row .count-pip {
    position: static;
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .product-card { opacity: 1; transform: none; }
}

/* ---------- Paginator ---------- */

.paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 32px 0 0;
    /* always visible — not part of the card reveal animation */
    opacity: 1 !important;
    transform: none !important;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--blue-500);
    color: var(--blue-700);
}

.page-btn.active {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: var(--white);
    font-weight: 600;
    cursor: default;
}

.page-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.page-btn-nav {
    font-weight: 600;
    padding: 0 18px;
}

.page-ellipsis {
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 40px;
    user-select: none;
}

@media (max-width: 480px) {
    .page-btn-nav { padding: 0 12px; }
    .page-btn { min-width: 36px; height: 36px; font-size: 0.82rem; }
}

/* ---------- Cart toggle (navbar) ---------- */

.cart-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
    color: var(--white);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.cart-toggle:hover {
    border-color: var(--blue-300);
    background: rgba(255,255,255,0.06);
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--amber);
    color: var(--ink);
    border-radius: 999px;
}

.cart-count[hidden] {
    display: none;
}

/* ---------- Cart drawer ---------- */

#cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 90;
}

#cart-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

#cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: min(420px, 100vw);
    height: 100vh;
    background: var(--surface);
    box-shadow: -20px 0 40px rgba(11,18,32,0.15);
    z-index: 95;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

#cart-drawer.is-open { right: 0; }

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.cart-drawer-header h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

#cart-drawer-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
    padding: 4px;
}

#cart-drawer-close:hover { color: var(--ink); }

#cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 22px;
}

.cart-empty {
    color: var(--slate);
    font-size: 0.92rem;
    padding: 40px 0;
    text-align: center;
}

.cart-line {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cart-line-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--ice-soft);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    padding: 6px;
}

.cart-line-info { flex: 1; min-width: 0; }

.cart-line-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-line-price {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--amber-deep);
    margin-bottom: 8px;
}

.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--ink);
}

.qty-btn:hover { border-color: var(--blue-500); color: var(--blue-700); }

.qty-value {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    min-width: 18px;
    text-align: center;
}

.cart-line-remove {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 0.78rem;
    color: var(--slate);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.cart-line-remove:hover { color: var(--ink); }

.cart-drawer-footer {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--line);
}

.cart-drawer-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.cart-drawer-total-value {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--amber-deep);
}

.cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px;
    background: var(--blue-700);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cart-checkout-btn:hover { background: var(--blue-600); }

@media (max-width: 480px) {
    #cart-drawer { right: -100vw; }
}


/* ============================================================
   PART 2 — Dark theme, and the components added in this pass.
   Everything below extends the faceted language established
   above: 26px corner cuts, mono for anything numeric, and the
   amber accent held back for price and status only.
   ============================================================ */


/* ---------- Dark theme ----------
   A token swap, not a second stylesheet. Only surfaces, lines and
   text flip; the navbar, hero and footer were already dark navy in
   the light theme and stay put, which is what keeps the brand
   recognisable across both. The blues lift a step because mid-blue
   on near-black loses too much contrast. */

[data-theme="dark"] {
    --ink: #e8eeff;
    --paper: #070b16;
    --surface: #101a31;
    --surface-sunken: #0b1324;

    --ice-soft: #16213c;
    --ice: #1d2b4d;

    --line: #26365f;
    --line-soft: #1b2743;

    --slate: #93a2c6;
    --navy-900: #050810;

    --blue-700: #6d90ff;
    --blue-600: #7fa0ff;
    --blue-500: #93b1ff;
    --blue-300: #b3c8ff;

    --amber: #ffab5e;
    --amber-deep: #ffb672;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 20px 40px -18px rgba(0, 0, 0, 0.75);

    color-scheme: dark;
}

/* The select's chevron is baked into a data-URI, so its stroke colour
   can't inherit. It needs its own light-stroked copy. */
[data-theme="dark"] .sort-select {
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393a2c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}

/* Product shots are overwhelmingly cut out on white. On a dark card
   they'd otherwise sit in a glowing white box. */
[data-theme="dark"] .product-image,
[data-theme="dark"] .detail-image,
[data-theme="dark"] .quickview-image {
    background: #f2f5fc;
}

[data-theme="dark"] .social-badge img,
[data-theme="dark"] .footer-brand img { filter: none; }


/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .product-card { opacity: 1 !important; transform: none !important; }
}


/* ---------- Scroll progress + back to top ---------- */

#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    z-index: 60;
    background: linear-gradient(90deg, var(--blue-500), var(--amber));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

#back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 45;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--blue-700);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { border-color: var(--blue-500); color: var(--blue-600); }

/* Lifted clear of the compare tray when it's up. */
body.compare-open #back-to-top { bottom: 92px; }


/* ---------- Navbar additions ---------- */

.navbar { transition: padding 0.2s ease, box-shadow 0.2s ease; }
.navbar.is-stuck { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9); }
.navbar.is-stuck .nav-inner { padding-top: 9px; padding-bottom: 9px; }

.nav-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.icon-btn {
    position: relative;
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--white);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-on-dark); }

.icon-btn .count-pip {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    background: var(--amber);
    color: #241203;
    border-radius: 9px;
}

/* The heart fills in once something is saved, so the nav reflects state
   without needing the number to be read. */
.icon-btn.has-items svg { fill: currentColor; }

.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }


/* ---------- Toasts ---------- */

#toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 120;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6);
    font-size: 0.88rem;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.toast.is-in { opacity: 1; transform: translateY(0); }
.toast-msg { flex: 1; line-height: 1.4; }

.toast-action {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 0;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--amber);
    cursor: pointer;
    border-bottom: 1.5px solid currentColor;
}

.toast--success { background: #10331f; color: #d8f5e3; }
.toast--success .toast-action { color: #7ee2a8; }
.toast--error { background: #3a1116; color: #ffdde1; }
.toast--error .toast-action { color: #ff9aa6; }

body.compare-open #toast-host { bottom: 96px; }


/* ---------- Skeleton loading ----------
   Cards keep their real footprint while loading, so the grid doesn't
   jump when results land. */

.skeleton-card {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.skeleton-card .sk-img { aspect-ratio: 4 / 3; }
.skeleton-card .sk-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 11px; border-radius: 3px; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-line.tall { height: 20px; width: 35%; margin-top: 6px; }

.sk-img, .sk-line {
    background: linear-gradient(90deg, var(--ice-soft) 25%, var(--line-soft) 37%, var(--ice-soft) 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.4s ease infinite;
}

@keyframes sk-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}


/* ---------- Catalog toolbar additions ---------- */

.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.view-toggle {
    display: inline-flex;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}

.view-toggle button {
    width: 34px; height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--slate);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle button + button { border-left: 1.5px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--blue-700); color: var(--white); }

/* Active filters, shown as removable chips so it's always obvious why
   the result count is what it is. */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 11px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--ice-soft);
    color: var(--blue-700);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
}

.filter-chip button {
    display: grid;
    place-items: center;
    width: 16px; height: 16px;
    background: var(--blue-700);
    color: var(--white);
    border: none;
    border-radius: 2px;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.filter-chip button:hover { background: var(--amber-deep); }

.filter-chip--reset {
    background: transparent;
    color: var(--slate);
    cursor: pointer;
    padding: 5px 11px;
    font-family: var(--font-body);
}

.filter-chip--reset:hover { color: var(--blue-700); border-color: var(--blue-500); }


/* ---------- Price range + stock switch (sidebar) ---------- */

.price-fields {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-fields input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
}

.price-fields input:focus { outline: none; border-color: var(--blue-500); }
.price-fields span { color: var(--slate); font-size: 0.8rem; }

.price-hint {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--slate);
}

.price-apply {
    width: 100%;
    margin-top: 9px;
    padding: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--ice-soft);
    color: var(--blue-700);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.price-apply:hover { border-color: var(--blue-500); background: var(--ice); }

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
    cursor: pointer;
}

.switch {
    position: relative;
    flex-shrink: 0;
    width: 38px; height: 21px;
    background: var(--line);
    border-radius: 11px;
    transition: background 0.18s ease;
}

.switch::after {
    content: '';
    position: absolute;
    top: 2.5px; left: 2.5px;
    width: 16px; height: 16px;
    background: var(--surface);
    border-radius: 50%;
    transition: transform 0.18s ease;
}

.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row input:checked + .switch { background: var(--blue-700); }
.switch-row input:checked + .switch::after { transform: translateX(17px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--blue-500); outline-offset: 2px; }


/* ---------- Product card additions ---------- */

.product-card:hover { transform: translateY(-3px); }
.product-card.is-visible:hover { transform: translateY(-3px); }

/* Corner controls: save + compare. Hidden until hover on pointer
   devices, always present on touch where there is no hover. */
.card-tools {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.product-card:hover .card-tools,
.product-card:focus-within .card-tools { opacity: 1; transform: translateX(0); }

@media (hover: none) {
    .card-tools { opacity: 1; transform: none; }
}

.card-tool {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--slate);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.card-tool:hover { color: var(--blue-700); border-color: var(--blue-500); }
.card-tool.is-active { color: var(--amber-deep); border-color: var(--amber); }
.card-tool.is-active svg { fill: currentColor; }
.card-tool.compare-tool.is-active { color: var(--blue-700); border-color: var(--blue-500); background: var(--ice-soft); }
.card-tool.compare-tool.is-active svg { fill: none; }

/* Badge stack, top-right, above the facet cut. */
.card-badges {
    position: absolute;
    top: 10px; right: 34px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.card-badge {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--ink);
    color: var(--paper);
}

.card-badge--save { background: var(--amber); color: #2a1503; }
.card-badge--low  { background: #fff0e0; color: var(--amber-deep); border: 1px solid #ffd9b0; }
.card-badge--new  { background: var(--blue-700); color: var(--white); }

[data-theme="dark"] .card-badge--low { background: #3a260f; color: #ffc98a; border-color: #5a3d17; }

/* Quick view sits over the image, centred, revealed on hover. */
.quickview-trigger {
    position: absolute;
    left: 50%; bottom: 12px;
    z-index: 2;
    transform: translate(-50%, 8px);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(11, 18, 32, 0.9);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(4px);
}

.product-card:hover .quickview-trigger,
.product-card:focus-within .quickview-trigger { opacity: 1; transform: translate(-50%, 0); }

@media (hover: none) { .quickview-trigger { display: none; } }

.price-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    padding-top: 6px;
    flex-wrap: wrap;
}

.product-price { margin-top: 0; padding-top: 0; }

.price-was {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--slate);
    text-decoration: line-through;
}

/* Stock is shown as a short bar rather than a bare number: "2 left"
   reads as urgency far faster than "qty: 2". */
.stock-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--slate);
}

.stock-bar {
    flex: 1;
    max-width: 78px;
    height: 4px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
}

.stock-bar i {
    display: block;
    height: 100%;
    background: var(--blue-500);
    border-radius: 2px;
}

.stock-line.is-low { color: var(--amber-deep); font-weight: 600; }
.stock-line.is-low .stock-bar i { background: var(--amber); }


/* ---------- List view ---------- */

.products-grid.is-list { grid-template-columns: 1fr; gap: 14px; }

.products-grid.is-list .product-card {
    flex-direction: row;
    align-items: stretch;
    clip-path: none;
}

.products-grid.is-list .product-image {
    width: 210px;
    flex-shrink: 0;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1.5px solid var(--line);
    clip-path: none;
}

.products-grid.is-list .product-image::after { display: none; }
.products-grid.is-list .product-description { -webkit-line-clamp: 2; }
.products-grid.is-list .product-actions { max-width: 340px; }
.products-grid.is-list .quickview-trigger { bottom: 10px; }

@media (max-width: 640px) {
    .products-grid.is-list .product-card { flex-direction: column; }
    .products-grid.is-list .product-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        border-right: none;
        border-bottom: 1.5px solid var(--line);
    }
}


/* ---------- Modal shell (quick view + compare) ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 9, 18, 0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal-panel {
    position: relative;
    width: min(880px, 100%);
    max-height: min(86vh, 760px);
    overflow: auto;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
    transform: translateY(14px) scale(0.985);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.modal-backdrop.is-open .modal-panel { transform: translateY(0) scale(1); }

.modal-close {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 3;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1;
    background: var(--surface);
    color: var(--slate);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.modal-close:hover { color: var(--ink); border-color: var(--blue-500); }

body.modal-open { overflow: hidden; }


/* ---------- Quick view ---------- */

.quickview-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
}

.quickview-image {
    background: var(--ice-soft);
    border-right: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    padding: 24px;
}

.quickview-image img { max-height: 280px; object-fit: contain; }

.quickview-info { padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 8px; }

.quickview-info h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 0;
}

.quickview-meta { font-size: 0.78rem; color: var(--blue-600); font-weight: 600; }
.quickview-desc { font-size: 0.9rem; line-height: 1.6; color: var(--slate); margin: 4px 0; }

.quickview-price {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--amber-deep);
}

.quickview-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.quickview-actions .product-button { flex: 1 1 140px; }

@media (max-width: 680px) {
    .quickview-body { grid-template-columns: 1fr; }
    .quickview-image { border-right: none; border-bottom: 1.5px solid var(--line); }
    .quickview-image img { max-height: 200px; }
}


/* ---------- Compare tray + table ---------- */

.compare-tray {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    background: var(--ink);
    color: var(--paper);
    border-top: 1.5px solid var(--blue-700);
    transform: translateY(105%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.compare-tray.is-open { transform: translateY(0); }

.compare-tray-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.compare-slots { display: flex; gap: 8px; flex: 1; overflow-x: auto; }

.compare-slot {
    position: relative;
    flex-shrink: 0;
    width: 52px; height: 52px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.compare-slot img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.compare-slot.is-empty {
    border-style: dashed;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.22);
}

.compare-slot-remove {
    position: absolute;
    top: 1px; right: 1px;
    width: 16px; height: 16px;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    line-height: 1;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.compare-tray-label { font-size: 0.85rem; white-space: nowrap; }
.compare-tray-label b { font-family: var(--font-mono); }
.compare-tray-actions { display: flex; gap: 8px; flex-shrink: 0; }

.compare-tray-btn {
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--blue-500);
    color: #061029;
    border: 1.5px solid var(--blue-500);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.compare-tray-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.compare-tray-btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.28);
}

/* The compare table is horizontally scrollable rather than wrapping:
   columns have to stay aligned to be readable at all. */
.compare-table-wrap { overflow-x: auto; padding: 28px; }

.compare-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.compare-table th,
.compare-table td {
    padding: 11px 13px;
    text-align: left;
    border-bottom: 1.5px solid var(--line-soft);
    vertical-align: top;
}

.compare-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    border-bottom: 1.5px solid var(--line);
}

.compare-table tbody th {
    width: 118px;
    font-weight: 600;
    color: var(--slate);
    font-size: 0.78rem;
}

.compare-table img { width: 72px; height: 62px; object-fit: contain; margin-bottom: 8px; }
.compare-col-name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; line-height: 1.3; }
.compare-price { font-family: var(--font-mono); font-weight: 600; color: var(--amber-deep); font-size: 1rem; }

/* The cheapest column and the best-stocked column get flagged, which is
   the actual question people open a compare table to answer. */
.compare-best {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--blue-700);
    color: var(--white);
    vertical-align: middle;
}

.compare-specs { margin: 0; padding-left: 16px; color: var(--slate); line-height: 1.55; }

@media (max-width: 720px) {
    .compare-tray-inner { padding: 10px 16px; gap: 10px; }
    .compare-tray-label { display: none; }
}


/* ---------- Recently viewed rail ---------- */

.viewed-rail { max-width: 1220px; margin: 0 auto; padding: 0 28px 64px; }

.viewed-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.viewed-rail-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.viewed-clear {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--slate);
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}

.viewed-clear:hover { color: var(--blue-700); }

.viewed-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}

.viewed-item {
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.viewed-item:hover { border-color: var(--blue-500); }

.viewed-item .vi-img {
    aspect-ratio: 4 / 3;
    background: var(--ice-soft);
    display: grid;
    place-items: center;
}

[data-theme="dark"] .viewed-item .vi-img { background: #f2f5fc; }
.viewed-item .vi-img img { max-height: 100%; object-fit: contain; padding: 12px; }
.viewed-item .vi-body { padding: 11px 13px 13px; }

.viewed-item .vi-name {
    font-size: 0.83rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.viewed-item .vi-price {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--amber-deep);
    margin-top: 5px;
}


/* ---------- Empty + error states ---------- */

.state-block {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-sunken);
}

.state-block svg { color: var(--line); margin-bottom: 14px; }

.state-block h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    margin: 0 0 6px;
}

.state-block p { margin: 0 auto 18px; max-width: 42ch; color: var(--slate); font-size: 0.9rem; line-height: 1.6; }

.state-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.state-btn {
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--blue-700);
    color: var(--white);
    border: 1.5px solid var(--blue-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
}

.state-btn--ghost { background: transparent; color: var(--blue-700); }
.state-btn--ghost:hover { background: var(--ice-soft); }


/* ---------- Product description clamp ---------- */

.product-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- Search field polish ---------- */

.search-wrap { position: relative; }

.search-wrap::before {
    content: '';
    position: absolute;
    left: 16px; top: 50%;
    width: 15px; height: 15px;
    transform: translateY(-50%);
    background: currentColor;
    color: var(--slate-on-dark);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#product-search { padding-left: 42px; }

.search-clear {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    display: none;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border: none;
    border-radius: 3px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.search-wrap.has-value .search-clear { display: grid; }


/* `hidden` is only a default-stylesheet `display:none`, so any component
   rule that sets display wins over it. These components all set one. */
.count-pip[hidden],
.filter-chips[hidden],
.viewed-rail[hidden],
.related-section[hidden] { display: none !important; }


/* Some buttons in the card/compare actions are anchors (Details, restock
   enquiry) and some are real buttons. Anchors need the link underline
   removed and the flex centring that a <button> gets for free. */
a.product-button,
a.state-btn,
a.detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}


/* ============================================================
   RTL support (Arabic, Kurdish Sorani)
   ============================================================
   Sets `dir="rtl"` on <html>, which the browser's own UA stylesheet
   already uses to flip `direction` and, in turn, the visual order of
   every plain flex/block flow automatically -- that covers the navbar,
   card layouts, form fields, the checkout stepper, and most of the
   site for free. What's left here is everything that used a PHYSICAL
   left/right rather than a logical one: absolutely positioned badges
   and buttons, one slide-out drawer, a few explicit text-align rules,
   and the icons that only make sense pointing one way.

   Deliberately NOT mirrored: the faceted corner-cut accents
   (clip-path) used across cards, panels and the tray. They're a
   brand mark, not a wayfinding cue, and are kept identical in every
   language for a consistent, recognizable UI chrome -- the same
   reason a logo doesn't flip.
   ============================================================ */

[dir="rtl"] .cat-item,
[dir="rtl"] .nav-drawer-row,
[dir="rtl"] .compare-table th,
[dir="rtl"] .compare-table td,
[dir="rtl"] .confirm-keep {
    text-align: right;
}

[dir="rtl"] .compare-table tbody th { text-align: right; }

/* Card corner controls and badges swap sides so they still sit at the
   image's leading corner (which is now the right in RTL) rather than
   trailing behind the reading direction. */
[dir="rtl"] .card-tools { left: auto; right: 10px; }
[dir="rtl"] .card-badges { right: auto; left: 34px; }
[dir="rtl"] .sold-out-badge,
[dir="rtl"] .detail-image .sold-out-badge { left: auto; right: 12px; }
[dir="rtl"] .detail-image .sold-out-badge { right: 16px; }
[dir="rtl"] .detail-save-badge { right: auto; left: 14px; }
[dir="rtl"] .zoom-btn { right: auto; left: 14px; }
[dir="rtl"] #back-to-top { right: auto; left: 22px; }

/* The cart drawer slides in from the edge nearest where "forward"
   actions live; in a right-to-left layout that's the left edge, not
   the right. */
[dir="rtl"] #cart-drawer {
    right: auto;
    left: -420px;
    box-shadow: 20px 0 40px rgba(11,18,32,0.15);
}
[dir="rtl"] #cart-drawer.is-open { left: 0; }

/* Search field icon and clear button. */
[dir="rtl"] .search-wrap::before { left: auto; right: 16px; }
[dir="rtl"] #product-search { padding-left: 16px; padding-right: 42px; }
[dir="rtl"] .search-clear { right: auto; left: 10px; }

/* Radio button inside the pickup/delivery choice card. */
[dir="rtl"] .fulfilment-option { padding: 14px 44px 14px 16px; }
[dir="rtl"] .fulfilment-option input { left: auto; right: 16px; }

/* The order-tracking timeline's connecting rail runs from each dot to
   the next; the dots themselves relocate to the right automatically
   (via flex + direction:rtl), so the line has to follow. */
[dir="rtl"] .track-progress li:not(:last-child)::before { left: auto; right: 12px; }

/* Pagination and breadcrumb arrows are plain glyphs, not auto-mirrored
   icons, and their meaning (back / forward) is already flipped at the
   string level in the Arabic and Kurdish dictionaries -- ← and →
   simply need to render as typed rather than being flipped a second
   time by anything upstream. No rule needed here; left as a note so a
   future icon-based replacement remembers to flip too. */

/* Chart-like bars (stock level, scroll progress) fill from the
   trailing edge in RTL, matching how the equivalent LTR bar fills
   from its own leading edge. */
[dir="rtl"] #scroll-progress { transform-origin: 100% 50%; }

/* The "back to catalog" chevron is a literal left-pointing arrow glyph,
   not an auto-mirrored icon font; flip it so it points the way "back"
   actually reads in a right-to-left layout. */
[dir="rtl"] .back-link svg { transform: scaleX(-1); }

/* Toast action button's underline-on-hover affordance and the compare
   tray's horizontally-scrolling slot list both inherit `direction`
   from <html> and need no explicit rule -- flagged here only so a
   reviewer checking "did RTL toasts/compare get handled" finds an
   answer instead of silence. */


/* ---------- Language switcher ---------- */

/* Desktop/nav-tools version: a plain icon-btn with a fully transparent
   native <select> stretched over it, so clicking anywhere on the globe
   opens the browser's own picker -- native, accessible, and zero
   custom popover/click-outside logic to get wrong. */
.lang-switch { position: relative; }

.lang-switch .lang-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    cursor: pointer;
    appearance: none;
}

/* Drawer version: a visible, styled select sitting at the end of the
   row, matching the count-pip's placement on the other drawer rows. */
.lang-select-inline {
    margin-left: auto;
    padding: 5px 10px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border: 1.5px solid var(--line-on-dark);
    border-radius: var(--radius-sm);
}

.lang-select-inline option { color: var(--ink); }

[dir="rtl"] .lang-select-inline { margin-left: 0; margin-right: auto; }