:root {
    --navy: #092f4d;
    --navy-dark: #061d30;
    --blue: #0c5d91;
    --white: #ffffff;
    --text: #13202b;
    --muted: #5e6b76;
    --footer: #eaf0f4;
    --highlight: #ffd166;
    --shadow: 0 20px 55px rgba(5, 26, 46, 0.22);
    --radius: 24px;

    /* Nav-bar link text size — tweak this one value to resize every nav button. */
    --nav-font-size: 0.95rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-width: 320px;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
    background: #ffffff;
}

body.is-rtl {
    text-align: right;
}

/* Navigation layout */
.site-nav {
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 1000;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    align-items: center;
    gap: 4px;

    padding: 5px;
    visibility: hidden;
    opacity: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: none;

    transition: opacity 180ms ease;
}

.site-nav.is-webgl-glass {
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

/* Used only when the WebGL library cannot load or initialise. */
.site-nav.is-glass-fallback {
    visibility: visible;
    opacity: 1;
    background: rgba(5, 28, 47, 0.72);
    border-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.site-nav > canvas {
    pointer-events: none;
}

/* Round logo button at the left of the nav — links home (index.html).
   36px keeps the nav pill the same height as before (so the WebGL nav's
   geometry / refraction zone is unchanged). Placed in the centre grid track
   so it sits between the two pairs of nav links. */
.nav-logo {
    display: grid;
    place-items: center;
    align-self: center;
    grid-column: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    transition: transform 200ms ease;
}

.nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nav-logo:hover,
.nav-logo:focus-visible {
    transform: scale(1.06);
    outline: none;
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--white);

    min-height: 36px;
    padding: 0 6px;
    border-radius: 999px;

    font-size: var(--nav-font-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
            transform 200ms ease,
            background 200ms ease,
            color 200ms ease;
}

.site-nav.uses-adaptive-labels.is-over-light-content .nav-button {
    color: rgba(10, 26, 38, 0.88);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.48);
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button[aria-current="page"] {
    transform: none;
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

.shopping-bag-icon {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 999;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid transparent;
    border-radius: 50%;

    background: transparent;
    box-shadow: none;

    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 180ms ease;
}

.shopping-bag-icon.is-webgl-glass {
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

.shopping-bag-icon.is-glass-fallback {
    visibility: visible;
    opacity: 1;
    background: rgba(5, 28, 47, 0.78);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 24px rgba(5, 26, 46, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.shopping-bag-icon img {
    width: 24px;
    height: 24px;
}

.shopping-bag-icon > canvas {
    pointer-events: none;
}

/* Hero section */
.hero {
    min-height: 100vh; /* makes hero cover the full first screen */
    min-height: 100svh; /* better mobile support */

    display: grid;
    place-items: center;
    text-align: center;

    padding: 120px clamp(20px, 9vw, 140px) 80px;
    color: var(--white);

    background:
            linear-gradient(
                    180deg,
                    rgba(4, 25, 44, 0.48),
                    rgba(9, 47, 77, 0.2) 52%,
                    rgba(4, 25, 44, 0.38)
            ),
            url("../images/hero-airplane.jpeg") center / cover no-repeat;

    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 180px; /* this keeps the fade effect */
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
    );

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;

    max-width: min(900px, 92vw);
    animation: heroReveal 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}

.hero h1 {
    font-size: clamp(3.6rem, 10vw, 8.2rem);
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 20px;

    color: transparent;
    background: linear-gradient(90deg, #18c7d2 0%, #249fe8 52%, #5a72ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 10px 24px rgba(3, 15, 26, 0.58));
}

body.is-rtl .hero-content {
    text-align: center;
}

body.is-rtl .hero h1,
body.is-rtl .section-title,
body.is-rtl .nav-button {
    letter-spacing: 0;
}

body.is-rtl .hero h1 {
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2.6vw, 2.15rem);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    text-shadow: 0 8px 24px rgba(3, 15, 26, 0.66);
    animation: heroSubtitleReveal 800ms ease-out 420ms both;
}

/* Buttons */
.btn {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 24px;

    border: none;
    border-radius: 10px;

    background: var(--white);
    color: var(--navy);

    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

    transition:
            transform 220ms ease,
            box-shadow 220ms ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    z-index: -1;

    width: 55%;
    height: 100%;

    background: linear-gradient(
            90deg,
            transparent,
            rgba(12, 93, 145, 0.18),
            transparent
    );

    transform: skewX(-20deg);
    transition: left 480ms ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    outline: none;
}

.btn:hover::before,
.btn:focus-visible::before {
    left: 125%;
}

/* Main sections */
.section {
    scroll-margin-top: 82px;
    padding: clamp(58px, 8vw, 96px) clamp(20px, 7vw, 110px);
}

.section-title {
    text-align: center;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 36px;
    letter-spacing: -0.04em;
}

.section-title::after {
    content: "";
    display: block;

    width: 120px;
    height: 5px;

    margin: 12px auto 0;
    border-radius: 999px;
    background: var(--text);
}

/* About section */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: clamp(34px, 7vw, 88px);

    max-width: 1180px;
    margin: 0 auto;
}

.about-text {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    text-align: center;
}

.about-visual {
    min-height: 360px;
    border-radius: 20px;
    background: url("../images/about-us.jpeg") center center / cover no-repeat;
    box-shadow: var(--shadow);
}

.about-visual::after {
    left: 20%;
    right: 20%;
    bottom: 110px;

    height: 92px;
    border-radius: 12px 12px 26px 26px;

    background: rgba(7, 22, 35, 0.86);
    box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.06);
}


/* Contact section (replaces the old Goals section) */
.contact {
    padding-top: 30px;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
}

.contact-details {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}

.contact-details p {
    margin: 10px 0;
}

.contact-details a {
    color: var(--blue);
    text-decoration: none;
    word-break: break-word;
}

.contact-details a:hover {
    text-decoration: underline;
}

body.is-rtl .about-text {
    text-align: right;
}

/* Contact page (about.html): fill the viewport so the footer sits at the bottom
   of the screen and the contact details stay centered in the space above it.
   Flexbox + min-height keep this adaptive to any screen size. The fixed nav and
   shopping-bag are out of flow, so only main + footer are laid out here. */
body.about-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.about-page main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* top clears the fixed nav; bottom keeps a gap above the footer */
    padding: 108px 20px 48px;
    /* background lives on main so it fills the whole area between the nav and
       the footer, not just the centered section's box */
    background: linear-gradient(180deg, #ffffff, #f6fbff);
}

body.about-page .footer {
    flex-shrink: 0;
}

/* main now handles nav clearance, vertical centering, and the background, so
   the section no longer needs its own vertical padding or gradient here. */
body.about-page main > .section:first-child {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

/* Footer */
.footer {
    scroll-margin-top: 82px;
    padding: 30px clamp(20px, 5vw, 70px) 24px;
    background: var(--footer);
    color: var(--text);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 34px 120px;
    align-items: flex-start;
    margin-bottom: 36px;
}

.footer-box {
    padding: 12px 16px;
    border-radius: 14px;

    transition:
            background 250ms ease,
            box-shadow 250ms ease,
            transform 250ms ease;
}

.footer-box h3 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.footer-box p {
    color: var(--text);
    font-size: 0.95rem;
}

.phone-number {
    direction: ltr;
    unicode-bidi: isolate;
}

.language-switch {
    border: 0;
    background: transparent;
    color: var(--blue);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.language-switch:hover,
.language-switch:focus-visible {
    color: var(--navy-dark);
    outline: none;
}

.language-switch:focus-visible {
    box-shadow: 0 0 0 3px rgba(12, 93, 145, 0.2);
    border-radius: 4px;
}

.footer-box.highlight {
    background: rgba(255, 209, 102, 0.55);
    box-shadow:
            0 0 0 4px rgba(255, 209, 102, 0.28),
            0 12px 30px rgba(9, 47, 77, 0.12);

    transform: translateY(-3px);
    animation: pulseHighlight 1.2s ease-in-out 2;
}

.copyright {
    color: var(--muted);
    font-size: 0.92rem;
}

/* Footer highlight animation */
@keyframes pulseHighlight {
    0%,
    100% {
        box-shadow:
                0 0 0 4px rgba(255, 209, 102, 0.28),
                0 12px 30px rgba(9, 47, 77, 0.12);
    }

    50% {
        box-shadow:
                0 0 0 10px rgba(255, 209, 102, 0.14),
                0 18px 36px rgba(9, 47, 77, 0.2);
    }
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.98);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroSubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media (max-width: 780px) {
    .hero {
        min-height: 650px;
        padding: 118px 18px 64px;
        background:
                linear-gradient(
                        180deg,
                        rgba(4, 25, 44, 0.6),
                        rgba(9, 47, 77, 0.18) 46%,
                        rgba(4, 25, 44, 0.46)
                ),
                url("../images/hero-airplane.jpeg") 6% center / cover no-repeat;
    }

    .hero-subtitle {
        font-size: 1.16rem;
    }

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

    .about-visual {
        min-height: 280px;
    }

    .footer-content {
        gap: 18px 40px;
    }
}

@media (max-width: 600px) {
    .site-nav {
        /* logo on the left (spanning both rows) + 2x2 button grid */
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        border-radius: 24px;
    }

    .nav-logo {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-right: 2px;
    }

    .nav-button {
        min-height: 34px;
        white-space: normal;
    }

    .shopping-bag-icon {
        top: 116px;
        right: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   Storefront (catalog pages: parts.html, sims.html)
   Content elements use a CSS backdrop-filter "frosted glass".
   It is intentionally lighter than the navigation bar's WebGL
   liquid glass so the nav stands out above the content.
   ============================================================ */
.shop-page {
    --shop-blue: #1f8fd6;
    --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 20px 50px rgba(7, 36, 59, 0.12);

    min-height: 100vh;
    color: #102b3d;
    background:
            radial-gradient(circle at 12% 12%, rgba(32, 195, 216, 0.18), transparent 26rem),
            radial-gradient(circle at 88% 18%, rgba(88, 117, 255, 0.16), transparent 30rem),
            linear-gradient(160deg, #e9f7fa 0%, #f4f8ff 45%, #eef6fb 100%);
    /* Note: no `background-attachment: fixed` — combining it with the
       backdrop-filter glass surfaces triggers a Chromium bug that samples
       the backdrop at the wrong offset (refracted content appears shifted). */
}

.shop-page .shopping-bag-icon {
    cursor: pointer;
}

/* Shared frosted-glass surface.
   Deliberately NO backdrop-filter here: with ~50 cards on a catalog page the
   browser would isolate + blur ~50 backdrops every scroll frame, which tanks
   FPS. Cards/toolbar are in-flow over a flat gradient, so the blur is
   invisible anyway. Blur is added back only on surfaces content actually
   scrolls beneath (the pinned .filter-panel below; the product-page gallery
   controls have their own rules). */
.glass-surface {
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Shell / layout.
   Full-bleed (no centered max-width / auto margins): the WebGL nav samples its
   backdrop relative to the page origin, and a large left margin makes the
   refracted background appear displaced by that same distance. A full-width
   shell with a small fixed side padding keeps the content pinned to the left,
   so the nav refraction stays aligned and the grid can add columns as the
   screen widens. */
.catalog-shell {
    width: 100%;
    padding: 108px 16px 80px;
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px;
    margin-bottom: 22px;
    border-radius: 22px;
}

.search-field {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(8, 67, 103, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.6);
}

.search-field svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 11px;
    fill: none;
    stroke: #0a7192;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.search-field input,
.sort-field select,
.filter-field select,
.range-filter input {
    border: 0;
    outline: 0;
    background: transparent;
    color: #102b3d;
    font: inherit;
}

.search-field input {
    width: 100%;
    font-size: 1rem;
}

.search-field input::placeholder {
    color: rgba(16, 43, 61, 0.45);
}

.sort-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 230px;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(8, 67, 103, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.6);
}

.sort-field span {
    color: rgba(16, 43, 61, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.sort-field select {
    width: 100%;
    font-weight: 700;
    cursor: pointer;
}

.search-field:focus-within,
.sort-field:focus-within,
.filter-field select:focus-visible,
.range-filter label:focus-within {
    box-shadow: 0 0 0 3px rgba(21, 173, 203, 0.18);
}

/* On desktop the filter panel is pinned, so the layout is a single results
   column with the panel's 250px + 22px gap reserved as padding. */
.catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    padding-left: 272px;
}

/* Filter panel.
   NEVER position:sticky — sticky inside `.catalog-shell` desyncs from the
   WebGL nav's raster of the shell (the baked copy scrolls into the nav and
   refracts as a ghost). Instead, catalog.js pins the panel on desktop by
   making it a `position: fixed` DIRECT child of <body> (like the nav/bag):
   constant rect => raster always matches reality, and it never enters the
   nav's sampling region. On mobile it returns to the normal flow. */
.filter-panel {
    padding: 22px;
    border-radius: 24px;
    /* The one catalog surface content really scrolls beneath (pinned on
       desktop), so it keeps the true frosted-glass blur. */
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

.filter-panel--pinned {
    position: fixed;
    top: 204px;
    left: 16px;
    z-index: 900;
    width: 250px;
    margin: 0; /* margins on direct root children shift the nav's raster */
    max-height: calc(100vh - 224px);
    overflow-y: auto;
}

/* Pin the panel from the very first paint on desktop, with the SAME geometry
   as .filter-panel--pinned. catalog.js only adds that class (and starts the
   scroll-follow) once it runs; without this rule the panel would paint at its
   full-width in-flow size during the loading stage and then snap to the
   sidebar — the "filters take up the whole screen" flash. Fixed positioning is
   viewport-relative, so it holds even while the panel is still a child of
   .catalog-layout (before the script re-parents it to <body>). The raster
   desync that re-parenting avoids only happens on scroll, and the script
   re-parents synchronously before any scroll, so scroll=0 here is safe. The
   breakpoint matches the script's matchMedia("(min-width: 901px)"). */
@media (min-width: 901px) {
    .filter-panel {
        position: fixed;
        top: 204px;
        left: 16px;
        z-index: 900;
        width: 250px;
        max-height: calc(100vh - 224px);
        overflow-y: auto;
    }
}

.filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.filter-heading h2 {
    font-size: 1.12rem;
    line-height: 1;
}

.filter-heading button {
    border: 0;
    background: transparent;
    color: #087a9e;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.filter-heading button:hover,
.filter-heading button:focus-visible {
    color: #061d30;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

.filter-field {
    display: block;
    margin-top: 15px;
}

.filter-field > span,
.range-filter legend {
    display: block;
    margin-bottom: 7px;
    color: rgba(16, 43, 61, 0.62);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.filter-field select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(8, 67, 103, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    cursor: pointer;
}

.range-filter {
    margin-top: 18px;
    border: 0;
}

.range-filter > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.range-filter > div > span {
    color: rgba(16, 43, 61, 0.35);
    text-align: center;
}

.range-filter label {
    display: block;
    padding: 5px 10px;
    border: 1px solid rgba(8, 67, 103, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}

.range-filter label span {
    display: block;
    color: rgba(16, 43, 61, 0.42);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.range-filter input {
    width: 100%;
    font-size: 0.85rem;
    -moz-appearance: textfield;
}

.range-filter input::-webkit-outer-spin-button,
.range-filter input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Results */
.catalog-results {
    min-width: 0;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    min-height: 30px;
    padding: 0 4px 12px;
}

.results-meta p {
    font-size: 0.9rem;
    font-weight: 900;
}

.results-meta span {
    color: rgba(16, 43, 61, 0.5);
    font-size: 0.76rem;
}

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

.product-card {
    display: block;
    overflow: hidden;
    border-radius: 22px;
    color: inherit;
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.product-card[hidden] {
    display: none;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 55px rgba(7, 36, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.product-visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 200px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(210, 228, 238, 0.5);
    overflow: hidden;
}

.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.condition-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 43, 61, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.condition-badge--new {
    background: rgba(22, 128, 61, 0.85);
}

.condition-badge--refurbished {
    background: rgba(180, 120, 20, 0.88);
}

.image-placeholder {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: rgba(16, 43, 61, 0.4);
    text-align: center;
}

.image-placeholder svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.image-placeholder b {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-card__body {
    padding: 18px;
}

.product-card__body h3 {
    margin-bottom: 6px;
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.product-price {
    color: var(--shop-blue);
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.load-more {
    display: block;
    margin: 26px auto 0;
    padding: 12px 34px;
    border: 0;
    border-radius: 999px;
    color: inherit;
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.load-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(7, 36, 59, 0.18);
}

.load-more[hidden] {
    display: none;
}

/* Empty state */
.empty-state {
    padding: 60px 30px;
    border-radius: 22px;
    text-align: center;
}

.empty-state[hidden] {
    display: none;
}

.empty-state h2 {
    margin-bottom: 4px;
    font-size: 1.2rem;
}

.empty-state p {
    color: rgba(16, 43, 61, 0.6);
}

/* Footer */
.shop-footer {
    padding: 26px clamp(20px, 5vw, 70px);
    color: rgba(16, 43, 61, 0.55);
    text-align: center;
    font-size: 0.78rem;
}

/* Accessibility helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Cart count badge (on the shopping-bag icon) */
.cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--shop-blue, #1f8fd6);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(7, 36, 59, 0.4);
    pointer-events: none;
}

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

/* "Added to cart" toast */
.shop-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(9, 34, 54, 0.92);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 12px 30px rgba(7, 36, 59, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.shop-toast[hidden] {
    display: none;
}

/* ===== Product detail page =====
   Content is visually centered, but the direct child of the LiquidGlass root
   (<body>) — `.product-detail` — stays FULL-WIDTH (margin 0). The WebGL nav
   rasterizes each root child by its own position, so a centered/margined direct
   child shifts the refraction by that margin. Centering is done on the inner
   wrapper instead: the library bakes the centered content into the full-width
   child's raster at the right spot, so it looks centered AND the refraction
   stays aligned. */
.product-detail {
    width: 100%;
    padding: 108px 24px 80px;
    color: #102b3d;
}

.product-detail__inner {
    max-width: 1160px;
    margin: 0 auto;
}

.product-detail__top {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 440px);
    justify-content: center;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    margin-bottom: 26px;
}

/* Gallery */
/* Container for the image card + the thumbnail strip below it. The explicit
   minmax(0,1fr) column stops the non-wrapping strip's huge max-content width
   from expanding the column — the strip scrolls within the gallery width. */
.product-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* The main image is the card now (rounded/clipped/glass), so the strip below it
   isn't caught by the clip. */
.gallery-stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(210, 228, 238, 0.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.gallery-slide {
    display: none;
}

.gallery-slide.is-active {
    display: block;
}

img.gallery-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom-center control bar: [‹] [count] [›] — used for placeholder-only items. */
.gallery-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* Arrows pinned to the left/right edges of the image, for the thumbnail-strip
   layout. The overlay itself is click-through; only the arrows catch clicks. */
.gallery-controls--edge {
    top: 0;
    bottom: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    pointer-events: none;
}

.gallery-controls--edge .gallery-arrow {
    pointer-events: auto;
}

/* Arrows + dots pill share one height and a frosted-glass look like the nav. */
.gallery-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(12, 30, 46, 0.28);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 20px rgba(7, 36, 59, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: background 150ms ease;
}

.gallery-arrow:hover {
    background: rgba(12, 30, 46, 0.42);
}

/* Thumbnail strip — the position indicator for multi-image galleries. Scrolls
   horizontally for large sets; the active thumb is highlighted and auto-centred,
   and the track fades at the right edge to signpost that more photos scroll in. */
.gallery-striptrack {
    position: relative;
}

.gallery-striptrack::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 44px;
    pointer-events: none;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(to right, rgba(238, 246, 251, 0), rgba(238, 246, 251, 0.9));
}

.gallery-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 58px;
    padding: 0;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(210, 228, 238, 0.5);
    line-height: 0;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb:hover {
    opacity: 0.9;
}

.gallery-thumb.is-active {
    opacity: 1;
    border-color: var(--shop-blue, #1f8fd6);
}

.gallery-thumb:focus-visible {
    outline: 2px solid var(--shop-blue, #1f8fd6);
    outline-offset: 2px;
}

/* Expand-to-fullscreen affordance, top-right of the image. */
.gallery-expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(12, 30, 46, 0.32);
    color: #fff;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 6px 18px rgba(7, 36, 59, 0.32);
    transition: background 0.15s ease, transform 0.12s ease;
}

.gallery-expand svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-expand:hover {
    background: rgba(12, 30, 46, 0.5);
}

.gallery-expand:active {
    transform: scale(0.94);
}

.gallery-expand:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The main photo itself opens the viewer. */
.gallery-stage img.gallery-slide {
    cursor: zoom-in;
}

/* Fullscreen image viewer (lightbox). Sits above everything, including the
   WebGL nav (z-index 1000), and shows the photo uncropped. */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(6, 18, 30, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Base state is visible; the entry animation fades in on mount without any
       rAF/class juggling (which stalls when the tab isn't painting). */
    animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}

.gallery-lightbox__img {
    max-width: min(100%, 1400px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox__close,
.gallery-lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.15s ease;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.gallery-lightbox__close:focus-visible,
.gallery-lightbox__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gallery-lightbox__close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
}

.gallery-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
}

.gallery-lightbox__prev {
    left: 20px;
}

.gallery-lightbox__next {
    right: 20px;
}

.gallery-lightbox__count {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(12, 30, 46, 0.5);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Compact "current / total" pill used instead of dots when a gallery has many
   images (see product.js). Same frosted-glass pill as .gallery-dots, so it sits
   between the arrows identically but never grows past the image. */
.gallery-count {
    display: grid;
    place-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(12, 30, 46, 0.28);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 20px rgba(7, 36, 59, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Info column */
.product-info h1 {
    margin-bottom: 4px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.product-info__brand {
    margin-bottom: 18px;
    color: rgba(16, 43, 61, 0.6);
    font-size: 1rem;
}

.product-info__price {
    margin-bottom: 16px;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.product-info__meta {
    margin-bottom: 4px;
    color: rgba(16, 43, 61, 0.7);
    font-size: 0.95rem;
}

.product-info__stock {
    margin: 8px 0 22px;
    color: rgba(16, 43, 61, 0.7);
    font-size: 0.95rem;
}

.add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--shop-blue, #1f8fd6);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 143, 214, 0.3);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.add-to-cart:hover {
    background: #1a7fbe;
    transform: translateY(-1px);
}

.add-to-cart:active {
    transform: translateY(0);
}

.add-to-cart[disabled] {
    background: rgba(16, 43, 61, 0.25);
    box-shadow: none;
    cursor: not-allowed;
}

/* Details box */
.product-details {
    padding: 22px 24px;
    border-radius: 20px;
}

.product-details h2 {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 800;
}

.product-details__text {
    margin-bottom: 14px;
    color: rgba(16, 43, 61, 0.8);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-line;
}

.product-details ul {
    display: grid;
    gap: 6px;
    padding-left: 20px;
    list-style: disc;
}

.product-details li {
    color: rgba(16, 43, 61, 0.8);
}

/* Not-found state */
.detail-not-found {
    max-width: 520px;
    margin-top: 30px;
    padding: 40px;
    border-radius: 22px;
}

.detail-not-found h1 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.detail-not-found p {
    margin-bottom: 20px;
    color: rgba(16, 43, 61, 0.7);
}

.detail-back {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--shop-blue, #1f8fd6);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
}

/* ===== Cart page ===== */
.cart-page {
    width: 100%;
    padding: 108px 24px 80px;
    color: #102b3d;
}

.cart-page__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.cart-title {
    margin-bottom: 20px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.cart-items {
    display: grid;
    gap: 14px;
}

.cart-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 16px;
    padding: 14px;
    border-radius: 18px;
}

.cart-item__visual {
    flex: 0 0 auto;
    position: relative; /* anchor for the absolutely-filled thumbnail */
    display: grid;
    place-items: center;
    width: 84px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden; /* clip the thumbnail to the rounded box */
    background: rgba(210, 228, 238, 0.5);
    color: rgba(16, 43, 61, 0.4);
}

/* Fill the fixed 84x64 box regardless of the image's aspect ratio. Absolute +
   inset:0 makes height:100% resolve reliably (a grid item's % height does not,
   because the row is content-sized), so tall/wide photos crop instead of
   stretching past the box. */
.cart-item__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item__visual svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-item__info {
    flex: 1 1 180px;
    min-width: 0;
}

.cart-item__info h3 {
    font-size: 1rem;
    line-height: 1.3;
}

.cart-item__info h3 a {
    color: inherit;
    text-decoration: none;
}

.cart-item__info h3 a:hover {
    text-decoration: underline;
}

.cart-item__brand,
.cart-item__price {
    color: rgba(16, 43, 61, 0.6);
    font-size: 0.85rem;
}

.cart-item__qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.cart-item__qty button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(8, 67, 103, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: #102b3d;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.cart-item__qty button:hover {
    background: #fff;
}

.cart-item__qty [data-qty] {
    min-width: 20px;
    text-align: center;
    font-weight: 800;
}

.cart-item__line {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: right;
    font-weight: 900;
    color: var(--shop-blue, #1f8fd6);
}

.cart-item__remove {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(16, 43, 61, 0.5);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.cart-item__remove:hover {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

/* Not sticky — same WebGL-raster desync as .filter-panel. */
.cart-summary {
    padding: 22px;
    border-radius: 20px;
}

.cart-summary h2 {
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: 0.9rem;
}

.cart-summary__total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(8, 67, 103, 0.14);
    font-size: 1.15rem;
    font-weight: 900;
}

.checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin-top: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--shop-blue, #1f8fd6);
    color: #fff;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 143, 214, 0.3);
    transition: background 150ms ease;
}

.checkout-btn:hover {
    background: #1a7fbe;
}

.cart-summary__note {
    margin-top: 10px;
    color: rgba(16, 43, 61, 0.5);
    font-size: 0.75rem;
    text-align: center;
}

.cart-empty {
    max-width: 480px;
    margin: 0 auto;
    padding: 44px;
    border-radius: 22px;
    text-align: center;
}

.cart-empty h1 {
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.cart-empty p {
    margin-bottom: 20px;
    color: rgba(16, 43, 61, 0.65);
}

.cart-empty__links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cart-empty__links a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--shop-blue, #1f8fd6);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Checkout / quote-request page (checkout.html) */
.checkout-title {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
}

.checkout-intro {
    max-width: 720px;
    margin-bottom: 24px;
    color: rgba(16, 43, 61, 0.7);
    line-height: 1.6;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    gap: 24px;
}

.checkout-equip,
.checkout-form {
    padding: 22px;
    border-radius: 20px;
}

.checkout-equip h2,
.checkout-form h2 {
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.checkout-equip__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-equip__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.checkout-equip__info {
    min-width: 0;
}

.checkout-equip__name {
    font-weight: 700;
    line-height: 1.3;
}

.checkout-equip__meta {
    margin-top: 2px;
    color: rgba(16, 43, 61, 0.6);
    font-size: 0.85rem;
}

.checkout-field {
    display: block;
    margin-bottom: 14px;
}

.checkout-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(16, 43, 61, 0.7);
}

.checkout-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(8, 67, 103, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #102b3d;
    font: inherit;
}

.checkout-field input:focus {
    outline: none;
    border-color: var(--shop-blue, #1f8fd6);
    box-shadow: 0 0 0 3px rgba(31, 143, 214, 0.18);
}

/* ============================================================
   Skeleton loaders
   Placeholder shapes shown while a page's data is fetched, so the
   layout is visible immediately and the swap to real content
   causes no reflow jump. Skeletons reuse the real component
   classes (.product-card, .product-visual, .gallery-stage,
   .cart-item, .checkout-field …) so they inherit the same sizes
   and responsive rules for free. The render functions in
   catalog.js / product.js / cart-page.js / checkout.js overwrite
   their container, which removes the skeleton markup with it — no
   explicit teardown needed.
   ============================================================ */
.skeleton {
    position: relative;
    overflow: hidden;
    /* Wins over the component's own background (defined earlier), so any
       element tagged .skeleton reads as a neutral placeholder. */
    background: rgba(16, 43, 61, 0.08);
}

/* Light sweep across the placeholder. Gated to no-preference for
   reduced-motion: without the animation the pseudo-element sits off-screen
   left, leaving a plain static block. */
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent
    );
}

@media (prefers-reduced-motion: no-preference) {
    .skeleton::after {
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Stack of placeholder lines (widths set inline per line). */
.skeleton-lines {
    display: grid;
    gap: 10px;
    align-content: start;
}

.skeleton-text {
    display: block;
    height: 12px;
    border-radius: 6px;
}

.skeleton-text--lg {
    height: 18px;
    border-radius: 7px;
}

.skeleton-text--xl {
    height: 30px;
    border-radius: 9px;
}

/* Form-input placeholder (matches .checkout-field input). */
.skeleton-input {
    display: block;
    height: 46px;
    border-radius: 12px;
}

/* Button placeholder (matches .add-to-cart / .checkout-btn). */
.skeleton-pill {
    display: block;
    height: 46px;
    border-radius: 999px;
}

/* Placeholder cards must not react to hover like real product cards. */
.skeleton-card {
    pointer-events: none;
}

/* Storefront responsive */
@media (max-width: 900px) {
    .catalog-layout {
        padding-left: 0;
    }

    .filter-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
    }
}

@media (max-width: 820px) {
    .product-detail__top {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 560px) {
    .catalog-shell,
    .product-detail,
    .cart-page {
        padding-top: 138px;
    }

    /* mobile nav wraps to two rows, so it needs more top clearance */
    body.about-page main {
        padding-top: 138px;
    }

    .catalog-toolbar {
        grid-template-columns: 1fr;
    }

    .sort-field {
        min-width: 0;
    }

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

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

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

    .gallery-lightbox {
        animation: none;
    }

    /* Close a pre-existing gap: the hero entrances were never reduced-motion gated. */
    .hero-content,
    .hero-subtitle {
        animation: none;
    }
}