/* ==========================================================================
   ZERDI STORE — Apple design language (light)
   Implements the token system, typography ladder, components and motion
   grammar documented in DESIGN.md. Loaded last, so it wins over style.css
   and the admin-generated theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand & accent — one interactive colour, nothing else */
    --ap-blue: #0066cc;
    --ap-blue-focus: #0071e3;
    --ap-blue-on-dark: #2997ff;

    /* Ink */
    --ap-ink: #1d1d1f;
    --ap-body: #1d1d1f;
    --ap-muted: #6e6e73;
    --ap-muted-soft: #86868b;

    /* Surfaces */
    --ap-canvas: #ffffff;
    --ap-parchment: #f5f5f7;
    --ap-pearl: #fafafc;
    --ap-chip: rgba(210, 210, 215, 0.64);

    /* Hairlines */
    --ap-divider-soft: #f0f0f0;
    --ap-hairline: #e0e0e0;
    --ap-hairline-soft: rgba(0, 0, 0, 0.08);

    /* Radii — never mix grammars */
    --ap-r-xs: 5px;
    --ap-r-sm: 8px;
    --ap-r-md: 11px;
    --ap-r-lg: 18px;
    --ap-r-pill: 9999px;

    /* Spacing */
    --ap-xxs: 4px;
    --ap-xs: 8px;
    --ap-sm: 12px;
    --ap-md: 17px;
    --ap-lg: 24px;
    --ap-xl: 32px;
    --ap-xxl: 48px;
    --ap-section: 80px;

    /* Layout */
    --ap-max: 1200px;
    --ap-max-narrow: 980px;
    --ap-nav-h: 44px;
    --ap-subnav-h: 52px;

    /* The single shadow in the system — product imagery resting on a surface */
    --ap-product-shadow: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

    /* Motion */
    --ap-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ap-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Type */
    --ap-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
        "Inter", "Cairo", "Segoe UI", system-ui, sans-serif;
    --ap-font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "Inter", "Cairo", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ap-nav-h) + var(--ap-subnav-h) + 16px);
}

body {
    font-family: var(--ap-font-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--ap-body);
    background-color: var(--ap-canvas) !important;
    background-image: none !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* No decorative gradient atmospherics — the wall disappears, the product speaks. */
body::before,
body::after,
.hero::before,
.hero::after {
    display: none !important;
    content: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ap-font-display);
    color: var(--ap-ink);
    font-weight: 600;
    margin: 0;
}

p, span, li, label, td, th {
    color: var(--ap-body);
}

a {
    color: var(--ap-blue);
    text-decoration: none;
    transition: color 200ms var(--ap-ease);
}

a:hover {
    color: var(--ap-blue-focus);
}

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

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

::selection {
    background: rgba(0, 102, 204, 0.16);
}

/* Focus: 2px solid Action Blue, always visible, never removed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ap-blue-focus);
    outline-offset: 2px;
    border-radius: var(--ap-r-xs);
}

/* Wayfinding: skip straight past the chrome, visible only once focused. */
.ap-skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: 8px;
    z-index: 1100;
    padding: 10px 18px;
    background: var(--ap-canvas);
    color: var(--ap-blue);
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-pill);
    font-size: 14px;
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 240ms var(--ap-spring);
}

.ap-skip-link:focus {
    transform: translateY(0);
    color: var(--ap-blue);
}

/* Content that exists for assistive tech, not for the eye. */
.ap-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;
}

/* --------------------------------------------------------------------------
   3. Type scale
   -------------------------------------------------------------------------- */
.ap-display {
    font-family: var(--ap-font-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.ap-display-lg {
    font-family: var(--ap-font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
}

.ap-display-md {
    font-family: var(--ap-font-text);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.47;
    letter-spacing: -0.374px;
}

.ap-lead {
    font-family: var(--ap-font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0.196px;
}

.ap-tagline {
    font-family: var(--ap-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.ap-body-strong {
    font-family: var(--ap-font-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
}

.ap-caption {
    font-family: var(--ap-font-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: -0.224px;
}

.ap-caption-strong {
    font-family: var(--ap-font-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: -0.224px;
}

.ap-fine {
    font-family: var(--ap-font-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.12px;
}

.ap-legal {
    font-family: var(--ap-font-text);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.08px;
}

.ap-muted {
    color: var(--ap-muted);
}

/* Section heading rhythm */
.section-title {
    font-family: var(--ap-font-display) !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.47 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
    text-align: center;
    margin: 0 0 8px;
}

/* Apple never underlines a section head with a bar. */
.section-title::after {
    display: none !important;
    content: none !important;
}

.section-subtitle {
    font-size: 17px !important;
    line-height: 1.47;
    color: var(--ap-muted) !important;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}

.section-header {
    margin: 0 0 48px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--ap-max);
    margin: 0 auto;
    padding-inline: 20px;
    width: 100%;
}

.container--narrow {
    max-width: var(--ap-max-narrow);
}

/* Full-bleed tile: rectangular, edge to edge. The colour change is the divider. */
.tile {
    position: relative;
    border-radius: 0 !important;
    padding-block: var(--ap-section);
    scroll-margin-top: calc(var(--ap-nav-h) + var(--ap-subnav-h));
}

.tile--canvas { background: var(--ap-canvas); }
.tile--parchment { background: var(--ap-parchment); }

.tile--tight { padding-block: 56px; }

.tile-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}

.tile-eyebrow {
    font-family: var(--ap-font-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ap-muted);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   5. Buttons — the full pill IS the action signal
   -------------------------------------------------------------------------- */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ap-font-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: -0.374px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--ap-r-pill);
    padding: 11px 22px;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 200ms var(--ap-ease), color 200ms var(--ap-ease),
        border-color 200ms var(--ap-ease), transform 120ms var(--ap-ease);
}

.ap-btn:active {
    transform: scale(0.95);
}

.ap-btn--primary {
    background: var(--ap-blue);
    color: #fff;
}

.ap-btn--primary:hover {
    background: var(--ap-blue-focus);
    color: #fff;
}

/* Ghost pill — the second CTA when two appear together */
.ap-btn--ghost {
    background: transparent;
    color: var(--ap-blue);
    border-color: var(--ap-blue);
}

.ap-btn--ghost:hover {
    background: rgba(0, 102, 204, 0.06);
    color: var(--ap-blue-focus);
    border-color: var(--ap-blue-focus);
}

.ap-btn--large {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    padding: 14px 28px;
}

/* Pearl capsule — the quiet secondary on a product card */
.ap-btn--pearl {
    background: var(--ap-pearl);
    color: #333333;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.224px;
    padding: 8px 14px;
    min-height: 36px;
    border-color: var(--ap-divider-soft);
}

.ap-btn--pearl:hover {
    background: #fff;
    color: var(--ap-blue);
    border-color: var(--ap-hairline);
}

.ap-btn--dark {
    background: var(--ap-ink);
    color: #fff;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.224px;
    padding: 8px 15px;
    min-height: 36px;
    border-radius: var(--ap-r-sm);
}

.ap-btn--dark:hover {
    background: #000;
    color: #fff;
}

/* Text link with the arrow that Apple uses for "go deeper" affordances */
.ap-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 17px;
    line-height: 2.41;
    letter-spacing: -0.374px;
    color: var(--ap-blue);
}

.ap-link-arrow svg {
    width: 14px;
    height: 14px;
    transition: transform 240ms var(--ap-spring);
    color: currentColor;
}

/* RTL: the arrow points the reading direction */
[dir="rtl"] .ap-link-arrow svg {
    transform: scaleX(-1);
}

.ap-link-arrow:hover svg {
    transform: translateX(4px);
}

[dir="rtl"] .ap-link-arrow:hover svg {
    transform: scaleX(-1) translateX(4px);
}

.ap-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

/* --------------------------------------------------------------------------
   6. Navigation — 44px global + 52px frosted sub-nav
   -------------------------------------------------------------------------- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--ap-nav-h);
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-hairline-soft) !important;
    transition: background-color 300ms var(--ap-ease), box-shadow 300ms var(--ap-ease);
}

/* Condense on scroll — the material thickens, the page gains a scroll edge */
.main-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.header-container {
    max-width: var(--ap-max);
    margin: 0 auto;
    padding-inline: 20px;
    height: var(--ap-nav-h);
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand-name {
    font-family: var(--ap-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-ink);
    white-space: nowrap;
    order: -1;
}

.brand-name:hover {
    color: var(--ap-ink);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    /* .header-actions used to own this auto margin and sat after the nav;
       it is gone, so the nav has to hold the push itself. */
    margin-inline-start: auto;
}

.nav-link {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.12px;
    color: var(--ap-ink) !important;
    padding: 6px 2px;
    transition: color 200ms var(--ap-ease);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--ap-blue) !important;
}

.nav-link::after {
    display: none !important;
    content: none !important;
}

/* theme.css sets `.main-header .nav-link` at 0-2-0, so the ink/blue split has
   to be re-asserted at the same rank or every item reads as a link. */
.main-header .nav-link {
    color: var(--ap-ink) !important;
}

.main-header .nav-link:hover,
.main-header .nav-link[aria-current="page"] {
    color: var(--ap-blue) !important;
}

/* 44px hit area without inflating the 12px type. */
.main-header .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
}

.brand-name {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Sub-nav: frosted, product name left, primary CTA right */
.subnav {
    position: sticky;
    top: var(--ap-nav-h);
    z-index: 999;
    height: var(--ap-subnav-h);
    background: rgba(245, 245, 247, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-hairline-soft);
}

.subnav-inner {
    max-width: var(--ap-max);
    margin: 0 auto;
    padding-inline: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.subnav-title {
    font-family: var(--ap-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: 0.231px;
    color: var(--ap-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subnav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-inline-start: auto;
}

.subnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--ap-ink);
    white-space: nowrap;
}

.subnav-link:hover {
    color: var(--ap-blue);
}

.subnav .ap-btn {
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.224px;
    padding: 7px 16px;
    min-height: 44px;
}

/* Mobile tray */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    order: 3;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--ap-ink);
    border-radius: 2px;
    transition: transform 300ms var(--ap-spring), opacity 200ms var(--ap-ease);
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    inset: var(--ap-nav-h) 0 auto 0;
    z-index: 998;
    display: block;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-hairline);
    padding: 8px 20px 20px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 300ms var(--ap-spring), opacity 200ms var(--ap-ease),
        visibility 0s linear 300ms;
}

.mobile-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 300ms var(--ap-spring), opacity 200ms var(--ap-ease),
        visibility 0s;
}

/* Scoped to .mobile-nav on purpose: style.css carries a legacy
   `.mobile-nav .mobile-nav-link { color:#fff }` from when the drawer sat on
   the dark header. At (0,2,0) it outranked the plain rule below, so the links
   rendered white on this 94%-white panel and were effectively invisible. */
.mobile-nav .mobile-nav-link {
    color: var(--ap-ink) !important;
}

.mobile-nav-link {
    display: block;
    padding: 12px 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--ap-ink);
    border-bottom: 1px solid var(--ap-divider-soft);
}

.mobile-nav-link:last-child {
    border-bottom: 0;
}

.mobile-nav-link:hover {
    color: var(--ap-blue) !important;
}

/* --------------------------------------------------------------------------
   7. Hero
   The photo hero is intentionally left to style.css: full-bleed background
   image, scrim overlay, and the white pill CTA. This store sells phone
   accessories, so the hero stays a product shot rather than a typographic
   Apple tile. Only the type colours and the CTA are aligned to the palette.
   -------------------------------------------------------------------------- */
.hero-logo {
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}

/* The hero type is fluid rather than stepped. Stepped clamps drift out of
   order at the seams — a 64px title at 768px next to a 40px title at 834px —
   which is exactly the kind of thing a responsive pass exists to prevent. */
.hero-arabic-title,
.hero-title {
    font-size: clamp(34px, 5.6vw, 76px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    max-width: 16ch;
    margin-inline: auto;
}

.hero-title .highlight {
    color: #ffffff !important;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.hero-tagline,
.hero-subtitle {
    font-size: clamp(15px, 1.5vw, 21px) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    max-width: 560px;
    margin-inline: auto;
}

/* The white pill on the photo — kept at the original size so the hero reads
   as the same component it always was. */
.hero-pill-cta {
    font-family: var(--ap-font-text);
    font-weight: 600;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms var(--ap-spring), box-shadow 200ms var(--ap-ease);
}


/* A full-bleed photo hero sized purely by viewport *width* grows taller than
   the window on short laptop viewports, pushing the CTA below the fold. The
   height cap keeps the portrait feel on phones while guaranteeing the pill
   stays visible wherever the fold actually is. */
.hero {
    min-height: min(clamp(560px, calc(100vw * 1.6), 850px), 86svh);
}

.hero-logo {
    width: clamp(190px, 23vw, 360px);
    margin-bottom: 18px;
}

.hero-pill-cta {
    padding: 16px 44px;
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   8. Product grid — store utility cards
   -------------------------------------------------------------------------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--ap-canvas) !important;
    color: var(--ap-body) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg);
    padding: 24px;
    box-shadow: none;
    overflow: hidden;
    animation: none;
    transition: border-color 240ms var(--ap-ease), transform 300ms var(--ap-spring);
}

.product-card:hover {
    border-color: #c8c8cc;
    transform: translateY(-2px);
}

.product-image {
    position: relative;
    background: var(--ap-parchment) !important;
    border-radius: var(--ap-r-sm);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-image::before {
    display: none !important;
    content: none !important;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ap-spring);
}

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

/* Homepage teaser runs a pair, not a wall — the full catalogue lives on
   products.php. Doubled to 0-2-0 so it wins over the `.products-grid` column
   ladder inside every breakpoint without duplicating the rule four times.
   The measure is capped because two cards across a 1160px container would
   otherwise be 568px wide with a 568px square image. */
.products-grid.products-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
    margin-inline: auto;
    gap: 24px;
}

.products-grid--duo .product-image {
    aspect-ratio: 4 / 5;
}

.products-grid--duo .product-card {
    padding: 20px;
}

.product-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* style.css pads .product-info as if it were the card surface, but the
       card already has its own padding — the two stacked and ate 40px of the
       card's content width, squeezing the CTA to 46px on a 320px screen. */
    padding: 0;
    gap: 8px;
    flex: 1;
}

/* Scoped with .product-card so these outrank the equal-specificity !important
   colour rules the admin-generated theme.css writes for these elements. */
.product-card .product-name {
    font-family: var(--ap-font-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
    margin: 0;
}

.product-card:hover .product-name {
    color: var(--ap-ink) !important;
}

.product-card .product-price {
    font-family: var(--ap-font-text) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.24 !important;
    color: var(--ap-muted) !important;
    font-variant-numeric: proportional-nums;
}

.product-card .product-price span {
    color: var(--ap-muted-soft) !important;
    font-size: 14px;
}

.product-btn,
.product-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    font-family: var(--ap-font-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: -0.224px;
    background: var(--ap-pearl) !important;
    color: #333333 !important;
    border: 1px solid var(--ap-divider-soft) !important;
    border-radius: var(--ap-r-md);
    padding: 8px 14px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 200ms var(--ap-ease), color 200ms var(--ap-ease),
        border-color 200ms var(--ap-ease), transform 120ms var(--ap-ease);
}

.product-btn:hover,
.product-btn-primary:hover {
    background: #fff !important;
    color: var(--ap-blue) !important;
    border-color: var(--ap-hairline) !important;
}

.product-btn:active,
.product-btn-primary:active {
    transform: scale(0.95);
}

.product-btn svg {
    width: 15px;
    height: 15px;
    color: currentColor;
}

/* --------------------------------------------------------------------------
   9. Categories
   -------------------------------------------------------------------------- */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    padding: 32px 24px;
    background: var(--ap-canvas);
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-lg);
    text-align: center;
    transition: border-color 240ms var(--ap-ease), transform 300ms var(--ap-spring);
}

.category-card:hover {
    color: inherit;
    border-color: #c8c8cc;
    transform: translateY(-2px);
}

.category-name {
    font-family: var(--ap-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: 0.231px;
    color: var(--ap-ink);
}

/* --------------------------------------------------------------------------
   10. Trust row
   -------------------------------------------------------------------------- */
.features {
    background: var(--ap-canvas) !important;
    border-radius: 0 !important;
    padding-block: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
}

.feature-item {
    text-align: center;
}

.feature-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
}

.features .feature-icon svg {
    width: 26px;
    height: 26px;
    color: var(--ap-muted) !important;
    stroke-width: 1.5;
}

.features .feature-item:hover .feature-icon svg {
    color: var(--ap-blue) !important;
}

.features .feature-title {
    font-family: var(--ap-font-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
    margin-bottom: 6px;
}

.features .feature-desc {
    font-size: 14px !important;
    line-height: 1.43 !important;
    letter-spacing: -0.224px !important;
    color: var(--ap-muted) !important;
    max-width: 26ch;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   11. FAQ — flat rows, hairlines, no card boxes
   -------------------------------------------------------------------------- */
.faq-section,
.faq-list {
    background: transparent !important;
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--ap-hairline);
}

.faq-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ap-hairline) !important;
    border-inline-start: 0 !important;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition: none;
}

.faq-item:hover {
    background: transparent !important;
    transform: none;
}

.faq-item[open] {
    background: transparent !important;
    border-inline-start: 0 !important;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    color: var(--ap-ink) !important;
    transition: color 200ms var(--ap-ease);
}

.faq-question:hover {
    color: var(--ap-blue) !important;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question-text {
    flex: 1;
    font-family: var(--ap-font-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
}

.faq-icon {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--ap-blue) !important;
    border-radius: 50%;
    transition: transform 300ms var(--ap-spring);
}

.faq-icon svg {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.faq-item[open] .faq-icon {
    background: transparent !important;
    color: var(--ap-blue) !important;
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 4px 24px;
    animation: none;
}

.faq-answer p {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--ap-muted);
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   12. Reviews
   -------------------------------------------------------------------------- */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--ap-canvas) !important;
    color: var(--ap-body) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg);
    padding: 28px 24px 24px;
    box-shadow: none;
    transition: border-color 240ms var(--ap-ease);
}

.review-card::before {
    display: none !important;
    content: none !important;
}

.review-card:hover {
    border-color: #c8c8cc;
}

.review-stars {
    display: flex;
    gap: 2px;
}

.review-stars .star {
    font-size: 15px;
    line-height: 1;
    color: var(--ap-hairline) !important;
}

.review-stars .star.filled {
    color: var(--ap-blue) !important;
}

.review-text {
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.47 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
    flex: 1;
    margin: 0;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ap-divider-soft);
}

.review-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-parchment) !important;
    color: var(--ap-ink) !important;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.review-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.29 !important;
    letter-spacing: -0.224px !important;
    color: var(--ap-ink) !important;
}

.review-verified {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--ap-muted) !important;
}

/* --------------------------------------------------------------------------
   13. Store page — page header, search, filters, pagination
   -------------------------------------------------------------------------- */
.page-header {
    background: var(--ap-parchment) !important;
    border-radius: 0 !important;
    padding: 72px 0 64px;
    text-align: center;
}

.page-header::before {
    display: none !important;
    content: none !important;
}

.page-title {
    font-family: var(--ap-font-display) !important;
    font-size: clamp(34px, 4.4vw, 48px) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.28px !important;
    color: var(--ap-ink) !important;
    margin: 0 0 12px;
}

.page-subtitle {
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.19 !important;
    letter-spacing: 0.196px !important;
    color: var(--ap-muted) !important;
    max-width: 46ch;
    margin: 0 auto;
}

.products-section {
    background: var(--ap-canvas) !important;
    padding: 56px 0 var(--ap-section);
}

.products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 0 !important;
    margin-bottom: 24px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
}

/* Search is pill-shaped too — same grammar as the CTA */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 240px;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline-soft) !important;
    border-radius: var(--ap-r-pill);
    padding-inline: 16px 20px;
    height: 44px;
    transition: border-color 200ms var(--ap-ease), box-shadow 200ms var(--ap-ease);
}

.search-box:focus-within {
    border-color: var(--ap-blue-focus);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16);
}

.search-box input {
    flex: 1;
    height: 100%;
    padding-inline: 34px 20px;
    font-family: var(--ap-font-text);
    font-size: 17px;
    letter-spacing: -0.374px;
    color: var(--ap-ink) !important;
    background: transparent !important;
    border: 0 !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.search-box input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-box svg {
    position: absolute;
    inset-inline-start: 16px;
    width: 15px;
    height: 15px;
    color: var(--ap-muted-soft) !important;
    cursor: pointer;
}

.filter-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select {
    font-family: var(--ap-font-text);
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--ap-ink) !important;
    background-color: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-pill);
    padding: 8px 16px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 200ms var(--ap-ease);
}

.filter-select:hover {
    border-color: #c8c8cc;
}

.filter-select:focus {
    border-color: var(--ap-blue-focus) !important;
    outline: none;
}

.products-count {
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ap-muted) !important;
    margin: 0 0 24px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ap-font-text);
    font-size: 15px;
    letter-spacing: -0.224px;
    color: var(--ap-ink) !important;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: 50%;
    transition: background-color 200ms var(--ap-ease), color 200ms var(--ap-ease),
        border-color 200ms var(--ap-ease);
}

.pagination-btn:hover {
    border-color: var(--ap-blue);
    color: var(--ap-blue) !important;
}

.pagination-btn.active {
    background: var(--ap-blue) !important;
    border-color: var(--ap-blue) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   14. Product detail
   -------------------------------------------------------------------------- */
.product-detail {
    background: var(--ap-canvas) !important;
    /* Was `0 0 var(--ap-section)`: the product title sat flush against the
       sticky subnav with no breathing room, while every other section on the
       site got a full section of padding. */
    padding: var(--ap-section) 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
}

/* The gallery holds its place while the buy box scrolls past it. */
.product-detail-gallery {
    position: sticky;
    top: calc(var(--ap-nav-h) + var(--ap-subnav-h) + 24px);
}

.product-detail-buy {
    min-width: 0;
    /* Two children only — the product info block and the order form — so one
       fluid gap gives the column a consistent vertical rhythm instead of
       relying on whatever margins the last child happens to leave. */
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.4vw, 44px);
}

/* Product with no uploaded imagery: drop the empty gallery column instead of
   leaving a 0-height sticky spacer beside the buy box. */
.product-detail-grid--no-gallery {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

.product-detail-info h1 {
    font-family: var(--ap-font-display) !important;
    /* Apple gives a product title real presence. This was capped at 40px,
       which read as body-copy scale next to a 580px photo. */
    font-size: clamp(30px, 3.8vw, 48px) !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: var(--ap-ink) !important;
    margin: 0 0 12px;
}

.product-detail-price {
    font-family: var(--ap-font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0.196px;
    color: var(--ap-ink) !important;
    margin-bottom: 20px;
}

.product-detail-price span {
    font-size: 19px;
    color: var(--ap-muted);
}

.product-detail-desc {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--ap-muted) !important;
    margin-bottom: 8px;
}

/* Gallery */
.product-slider {
    min-width: 0;
}

.slider-container {
    position: relative;
    border-radius: var(--ap-r-lg);
    overflow: hidden;
    background: var(--ap-parchment);
    aspect-ratio: 4 / 5;
}

.slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms var(--ap-ease), visibility 0s linear 420ms;
}

.slider-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transition: opacity 420ms var(--ap-ease), visibility 0s;
}

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

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-chip);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ap-ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 200ms var(--ap-ease), transform 200ms var(--ap-spring);
}

.slider-nav:hover {
    background: rgba(210, 210, 215, 0.86);
}

.slider-nav:active {
    transform: translateY(-50%) scale(0.92);
}

.slider-nav svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.slider-nav.prev { inset-inline-start: 16px; }
.slider-nav.next { inset-inline-end: 16px; }

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ap-hairline);
    cursor: pointer;
    transition: background-color 240ms var(--ap-ease), transform 240ms var(--ap-spring);
}

.slider-dot.active {
    background: var(--ap-ink);
    transform: scale(1.15);
}

/* Option chips — pill grammar, selected state upgrades the border */
.product-options {
    margin: 32px 0 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

.option-label {
    display: block;
    font-family: var(--ap-font-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
    color: var(--ap-ink) !important;
    margin-bottom: 14px;
}

.color-options,
.size-options,
.bundle-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.color-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ap-hairline);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 240ms var(--ap-spring), box-shadow 200ms var(--ap-ease);
}

/* The dot stays 32px so the swatch row keeps its rhythm, but the tappable
   area grows to 44px. A pseudo-element of the button is part of the button for
   hit-testing, so this works without touching the inline `background` colour
   that main.js also writes onto dynamically-built bundle swatches. */
.color-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.color-btn::after {
    display: none !important;
    content: none !important;
}

.color-btn.selected {
    box-shadow: 0 0 0 2px var(--ap-canvas), 0 0 0 4px var(--ap-blue-focus);
    transform: scale(1.04);
}

.size-btn,
.bundle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--ap-font-text);
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--ap-ink) !important;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-pill);
    padding: 12px 18px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 200ms var(--ap-ease), transform 120ms var(--ap-ease);
}

.size-btn:hover,
.bundle-btn:hover {
    border-color: #c8c8cc;
}

.size-btn:active,
.bundle-btn:active {
    transform: scale(0.95);
}

.size-btn.selected,
.bundle-btn.selected {
    border: 2px solid var(--ap-blue-focus) !important;
    background: var(--ap-canvas) !important;
    color: var(--ap-ink) !important;
    padding: 11px 17px;
}

.bundle-price {
    font-size: 12px;
    color: var(--ap-muted);
}

.bundle-btn.selected .bundle-price {
    color: var(--ap-blue);
}

.bundle-items-container > p {
    font-size: 14px;
    color: var(--ap-muted);
}

.piece-item,
.bundle-item {
    background: var(--ap-parchment) !important;
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-md);
    padding: 16px;
    margin-bottom: 12px;
}

.piece-number,
.piece-header {
    color: var(--ap-ink) !important;
}

/* Order form — the buy box */
.order-form-wrapper {
    background: transparent !important;
}

.order-form {
    background: var(--ap-parchment) !important;
    color: var(--ap-body) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-lg);
    padding: 28px;
    box-shadow: none;
}

.order-form h2 {
    font-family: var(--ap-font-display) !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.19 !important;
    letter-spacing: 0.231px !important;
    color: var(--ap-ink) !important;
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.form-group label,
.order-form label {
    display: block;
    font-family: var(--ap-font-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--ap-ink) !important;
    /* Padding grows the click-to-focus target; the trimmed margin keeps the
       visual gap to the field identical. */
    padding-block: 3px;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    font-family: var(--ap-font-text);
    font-size: 17px;
    line-height: 1.24;
    letter-spacing: -0.374px;
    color: var(--ap-ink) !important;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-sm);
    padding: 12px 14px;
    min-height: 44px;
    transition: border-color 200ms var(--ap-ease), box-shadow 200ms var(--ap-ease);
}

/* style.css scopes these controls as `.form-group select, .form-group textarea`,
   which out-ranks the generic block above. Re-assert the Apple field shape at
   the same specificity so every control in the order form matches. */
.order-form .form-group input,
.order-form .form-group select,
.order-form .form-group textarea,
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form select,
.order-form textarea {
    font-family: var(--ap-font-text) !important;
    font-size: 17px !important;
    color: var(--ap-ink) !important;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-sm) !important;
    padding: 12px 14px !important;
    min-height: 44px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ap-blue-focus) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--ap-muted-soft) !important;
    opacity: 1;
}

textarea {
    resize: vertical;
    min-height: 88px;
}

.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: -0.224px;
    color: var(--ap-ink) !important;
    background: var(--ap-canvas);
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-sm);
    padding: 12px 14px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 200ms var(--ap-ease), background-color 200ms var(--ap-ease);
}

.radio-label:has(input:checked) {
    border-color: var(--ap-blue-focus);
    box-shadow: 0 0 0 1px var(--ap-blue-focus);
}

.radio-label input {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--ap-blue);
    margin: 0;
}

.delivery-price-display,
.total-price-display {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--ap-canvas) !important;
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-r-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.total-price-display {
    border-color: var(--ap-hairline);
    background: var(--ap-canvas) !important;
}

/* theme.css paints these panels with `.order-form .delivery-price-display`
   at 0-2-0, so the flat white surface has to be re-asserted at the same rank. */
.order-form .delivery-price-display,
.order-form .total-price-display {
    background: var(--ap-canvas) !important;
    color: var(--ap-ink) !important;
    border: 1px solid var(--ap-hairline) !important;
    border-radius: var(--ap-r-sm);
    padding: 14px 16px;
}

.order-form .delivery-price-display p,
.order-form .total-price-display p {
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-muted) !important;
    margin: 0;
}

.order-form .price {
    font-family: var(--ap-font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.231px;
    color: var(--ap-ink) !important;
}

.submit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-family: var(--ap-font-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: -0.374px;
    color: #fff !important;
    background: var(--ap-blue) !important;
    border: 1px solid var(--ap-blue) !important;
    border-radius: var(--ap-r-pill);
    padding: 12px 22px;
    cursor: pointer;
    transition: background-color 200ms var(--ap-ease), transform 120ms var(--ap-ease);
}

.submit-btn:hover {
    background: var(--ap-blue-focus) !important;
    color: #fff !important;
}

.submit-btn:active {
    transform: scale(0.95);
}

.submit-btn:disabled {
    background: #c8c8cc !important;
    border-color: #c8c8cc !important;
    color: #fff !important;
    cursor: not-allowed;
}

.form-message {
    padding: 12px 16px;
    border-radius: var(--ap-r-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.success-message {
    background: rgba(0, 102, 204, 0.06) !important;
    color: var(--ap-ink) !important;
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: var(--ap-r-lg);
    padding: 28px;
    text-align: center;
}

.success-message h3,
.success-message p,
.order-form .success-message h3,
.order-form .success-message p {
    color: var(--ap-ink) !important;
    font-size: 17px;
    line-height: 1.47;
}

/* Description + image grid */
.product-description,
.related-products,
.product-images-grid {
    background: transparent !important;
    margin-top: 88px;
}

.product-description h2,
.related-products h2,
.product-images-grid h2 {
    font-family: var(--ap-font-display) !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.47 !important;
    letter-spacing: -0.374px !important;
    color: var(--ap-ink) !important;
    text-align: center;
    margin: 0 0 32px;
}

.product-description-content {
    background: transparent !important;
    border: 0 !important;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    color: var(--ap-body);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.374px;
}

.product-description-content p,
.product-description-content li {
    color: var(--ap-body) !important;
    line-height: 1.47;
    margin-bottom: 16px;
}

.images-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.images-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--ap-r-lg);
    background: var(--ap-parchment) !important;
}

/* Floating sticky bar — the running total plus the persistent CTA */
.ap-buybar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(245, 245, 247, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--ap-hairline-soft);
    transform: translateY(100%);
    transition: transform 400ms var(--ap-spring);
}

.ap-buybar.is-visible {
    transform: translateY(0);
}

.ap-buybar-inner {
    max-width: var(--ap-max);
    margin: 0 auto;
    padding: 12px 20px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ap-buybar-price {
    font-family: var(--ap-font-text);
    font-size: 17px;
    letter-spacing: -0.374px;
    color: var(--ap-ink);
    margin-inline-end: auto;
}

.ap-buybar-price span {
    color: var(--ap-muted);
}

.ap-buybar .ap-btn {
    flex: none;
}

/* --------------------------------------------------------------------------
   15. Footer — the one place that goes deliberately dense
   -------------------------------------------------------------------------- */
.main-footer {
    background: var(--ap-parchment) !important;
    color: var(--ap-muted) !important;
    border-top: 1px solid var(--ap-hairline) !important;
    padding: 64px 0 32px;
    font-size: 12px;
}

.footer-container {
    max-width: var(--ap-max);
    margin: 0 auto;
    padding-inline: 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px 32px;
    padding-bottom: 40px;
}

.main-footer .footer-title {
    font-family: var(--ap-font-display) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase;
    color: var(--ap-ink) !important;
    margin-bottom: 12px;
}

.main-footer .footer-title .logo-red {
    color: var(--ap-ink) !important;
    background: none;
}

.main-footer .footer-desc {
    font-size: 12px !important;
    line-height: 1.43 !important;
    color: var(--ap-muted) !important;
    max-width: 34ch;
}

.main-footer .footer-subtitle {
    font-family: var(--ap-font-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.29 !important;
    letter-spacing: -0.12px !important;
    color: var(--ap-ink) !important;
    margin-bottom: 8px;
}

.main-footer .footer-links li {
    line-height: 2.41;
    color: var(--ap-muted) !important;
}

.main-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    min-width: 28px;
    padding-inline: 4px;
    font-size: 12px;
    line-height: 2.41;
    color: var(--ap-ink) !important;
}

.main-footer .footer-links a:hover {
    color: var(--ap-blue) !important;
    text-decoration: underline;
}

.main-footer .footer-bottom {
    border-top: 1px solid var(--ap-hairline);
    padding-top: 20px;
}

.main-footer .footer-bottom p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.12px;
    color: var(--ap-muted-soft) !important;
    margin: 0;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 8px;
}

.footer-legal a {
    font-size: 12px;
    color: var(--ap-muted-soft) !important;
}

.footer-legal a:hover {
    color: var(--ap-blue) !important;
}

/* WhatsApp float — circular control chip over the page */
.whatsapp-float {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 16px;
    z-index: 890;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    /* style.css runs an infinite `whatsapp-float-bounce` that never lets the
       button come to rest — and because a running animation beats a normal
       declaration on the same property, it was also silently killing the
       :hover scale below. A still button that responds on hover is both
       calmer and actually interactive. */
    animation: none;
    transition: transform 240ms var(--ap-spring), background-color 200ms var(--ap-ease);
}

.whatsapp-float:hover {
    transform: translateY(-2px) scale(1.06);
    background: #1eb455;
}

/* The sticky buy bar is full-bleed (inset-inline: 0), so it sits underneath
   this button on the product page at every width — at the old bottom:24px the
   bar simply buried it and swallowed the taps. The buy bar only exists on the
   product page, so the lift is conditional on it being in the DOM. */
body:has(.ap-buybar) .whatsapp-float {
    bottom: 86px;
}

.whatsapp-float:active {
    transform: scale(0.94);
}

.whatsapp-float-icon {
    width: 28px;
    height: 28px;
    color: #fff;
}

.whatsapp-float-pulse {
    display: none;
}

/* --------------------------------------------------------------------------
   16. Motion — response first, then everything else
   -------------------------------------------------------------------------- */
/* The hidden start state is gated behind .ap-js, which the document sets the
   moment apple.js runs. Without JS the content is simply there — a store must
   never depend on an animation to become visible. */
.ap-js .ap-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ap-ease), transform 700ms var(--ap-spring);
}

.ap-js .ap-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Feedback lives on the press, and it is instant. */
.ap-btn:active,
.product-card:active,
.size-btn:active,
.submit-btn:active {
    transform: scale(0.95);
}

@media (hover: hover) {
    .ap-btn:hover,
    .submit-btn:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   17. Responsive — 1068 / 833 / 640 / 480
   -------------------------------------------------------------------------- */
@media (max-width: 1068px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-detail-gallery {
        position: static;
        /* Single column means the gallery inherits the full container width,
           which turned a 4:3 frame into a ~1024x768 crop of a portrait photo.
           Capping the measure keeps the 4:5 frame — the ratio the product
           images are actually shot at — so nothing is cropped. */
        max-width: 560px;
        margin-inline: auto;
        width: 100%;
    }

    .slider-container {
        aspect-ratio: 4 / 5;
    }

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

@media (max-width: 833px) {
    :root {
        --ap-section: 64px;
    }

    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .ap-display {
        font-size: 40px;
    }

    .section-title,
    .product-description h2,
    .related-products h2,
    .product-images-grid h2 {
        font-size: 28px !important;
    }

    /* Categories read better as a 2-up card pair than one stretched banner. */
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .category-card {
        min-height: 0;
        padding: 28px 20px;
    }

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

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

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

    .subnav-links {
        gap: 14px;
    }
}

@media (max-width: 640px) {
    :root {
        --ap-section: 48px;
    }

    body {
        font-size: 17px;
    }

    .page-subtitle {
        font-size: 19px !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .product-card {
        padding: 16px;
        border-radius: var(--ap-r-md);
    }

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

    .order-form {
        padding: 20px;
    }

    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        flex-direction: column;
    }

    .filter-select {
        width: 100%;
    }

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

    .subnav-title {
        font-size: 17px;
    }

    .subnav-links .subnav-link {
        display: none;
    }

    .ap-buybar-inner {
        padding: 10px 16px;
    }

    .ap-buybar .ap-btn {
        flex: 1;
    }

    /* Sits low, near the edge, like every other page. The old rule lifted it
       to 92px unconditionally to clear the sticky buy bar — but that bar only
       exists on the product page, so on the home and store pages the button
       hung 92px up with dead space under it. The lift now lives in the
       `body:has(.ap-buybar)` rule above, which outranks this one. */
    .whatsapp-float {
        inset-inline-end: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 480px) {
    :root {
        --ap-section: 40px;
    }

    .ap-display {
        font-size: 28px;
    }

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

    /* Single column is a phone decision, not a tablet one — a 560px-wide
       review card reads as a stretched banner. */
    .reviews-grid,
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .ap-cta-row .ap-btn {
        width: 100%;
    }

    .page-header {
        padding: 48px 0 40px;
    }

    .tile-head {
        margin-bottom: 40px;
    }
}

/* --------------------------------------------------------------------------
   18. User preferences — reduced feedback, not zero feedback
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ap-js .ap-reveal {
        opacity: 1;
        transform: none;
        transition: opacity 250ms var(--ap-ease);
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 250ms !important;
        transition-property: opacity, background-color, color, border-color !important;
    }

    .ap-btn:active,
    .product-card:active,
    .size-btn:active,
    .submit-btn:active,
    .whatsapp-float:active,
    .slider-nav:active {
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .main-header,
    .subnav,
    .mobile-nav,
    .ap-buybar,
    .slider-nav {
        background: var(--ap-canvas) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .subnav,
    .ap-buybar {
        background: var(--ap-parchment) !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --ap-hairline: #767676;
        --ap-hairline-soft: #767676;
        --ap-muted: #3a3a3c;
    }

    .main-header,
    .subnav,
    .mobile-nav,
    .ap-buybar {
        background: var(--ap-canvas) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .product-card,
    .review-card,
    .order-form,
    .category-card {
        border-width: 1px;
        border-color: #767676;
    }
}

@media print {
    .main-header,
    .subnav,
    .mobile-nav,
    .whatsapp-float,
    .ap-buybar,
    .ap-cta-row {
        display: none !important;
    }
}