@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Home page - scoped to .home
   Matches the cart / product / footer system.
   ============================================================ */
.home {
    --h-ink: #0F172A;
    --h-ink-2: #1E293B;
    --h-accent: #1504B2;
    --h-accent-hover: #086AC9;
    --h-red: #DC2626;
    --h-green: #16A34A;
    --h-bg: #FFFFFF;
    --h-page: #FAFAFC;
    --h-tint: #F0F9FF;
    --h-border: #E2E8F0;
    --h-muted: #475569;
    --h-dark: #0B1020;

    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--h-ink);
    background: var(--h-page);
    padding-bottom: 56px;
}
.home *, .home *::before, .home *::after { box-sizing: border-box; }

.home .hm-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    margin-top: 22px;
}

/* ---------- Section heads ---------- */
.home .hm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.home .hm-head-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--h-ink);
}
.home .hm-head-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--h-accent);
    text-decoration: none;
    white-space: nowrap;
}
.home .hm-head-link:hover { color: var(--h-accent-hover); text-decoration: underline; }

/* Screen-reader-only page heading (the hero copy lives inside the artwork) */
.home .hm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Hero (full-bleed banner creatives, desktop + mobile files) ----------
   Slides are finished artwork, so nothing is overlaid on them. The track holds
   the creative's own aspect ratio (2172x724 desktop, 1000x1000 mobile) so the
   space is reserved before the image loads and no slide shifts the page. */
.home .hm-hero {
    position: relative;
    width: 100%;
    background: var(--h-bg);
    border-bottom: 1px solid var(--h-border);
    overflow: hidden;
}
.home .hm-hero-track {
    position: relative;
    width: 100%;
    aspect-ratio: 2172 / 724;
    background: var(--h-tint);
}

/* Slides are stacked so the fade transition has nothing to push around */
.home .hm-slide { position: absolute; inset: 0; }

.home .hm-slide-link,
.home .hm-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
.home .hm-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero controls: solid white so they read on light and dark artwork alike */
.home .hm-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--h-border);
    border-radius: 4px;
    color: var(--h-ink);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.home .hm-hero-nav:hover { background: var(--h-tint); color: var(--h-accent); }
.home .hm-hero-prev { left: 16px; }
.home .hm-hero-next { right: 16px; }

/* Dots sit below the artwork: overlaying them risks landing on the brand strip */
.home .hm-hero-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 0;
    background: var(--h-bg);
}
.home .hm-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: width 150ms ease, background-color 150ms ease;
}
.home .hm-dot:hover { background: var(--h-muted); }
.home .hm-dot.is-active { width: 22px; border-radius: 4px; background: var(--h-accent); }

/* ---------- Category tiles ---------- */
.home .hm-tiles {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--h-bg);
    border: 1px solid var(--h-border);
    border-radius: 4px;
    overflow: hidden;
}
.home .hm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px 14px;
    border-left: 1px solid var(--h-border);
    text-decoration: none;
    text-align: center;
    transition: background-color 150ms ease;
}
.home .hm-tile:first-child { border-left: none; }
.home .hm-tile:hover { background: var(--h-tint); }

.home .hm-tile-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
}
.home .hm-tile-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.home .hm-tile-label {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--h-ink);
    line-height: 1.3;
}
.home .hm-tile:hover .hm-tile-label { color: var(--h-accent); }
.home .hm-tile-sub { font-size: 0.7rem; color: var(--h-muted); line-height: 1.3; }

/* ---------- Trust strip ---------- */
.home .hm-trust {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--h-bg);
    border: 1px solid var(--h-border);
    border-radius: 4px;
    overflow: hidden;
}
.home .hm-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 14px;
    border-left: 1px solid var(--h-border);
}
.home .hm-trust-item:first-child { border-left: none; }
.home .hm-trust-item iconify-icon { color: var(--h-accent); flex-shrink: 0; }
.home .hm-trust-item span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.71rem;
    line-height: 1.35;
    color: var(--h-muted);
}
.home .hm-trust-item strong {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--h-ink);
}

/* ---------- Product grids ---------- */
.home .hm-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* ---------- Promo banners ---------- */
.home .hm-promos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.home .hm-promo {
    position: relative;
    display: block;
    min-height: 150px;
    padding: 20px 22px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    background: var(--h-dark);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.home .hm-promo:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }

.home .hm-promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
}
.home .hm-promo-dark { background: var(--h-dark); }
.home .hm-promo-red { background: #7F1D1D; }
.home .hm-promo-blue { background: #10206B; }

.home .hm-promo-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.home .hm-promo-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.home .hm-promo-title {
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}
.home .hm-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--h-ink);
    transition: background-color 150ms ease, color 150ms ease;
}
.home .hm-promo:hover .hm-promo-cta { background: var(--h-red); color: #fff; }

/* ---------- Shop by category ---------- */
.home .hm-catgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.home .hm-catgroup {
    background: var(--h-bg);
    border: 1px solid var(--h-border);
    border-radius: 4px;
    padding: 16px 18px;
}
.home .hm-catgroup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--h-border);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--h-ink);
    text-decoration: none;
}
.home .hm-catgroup-head:hover { color: var(--h-accent); }
.home .hm-catgroup-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--h-muted);
    background: var(--h-page);
    border: 1px solid var(--h-border);
    border-radius: 4px;
    padding: 1px 7px;
}
.home .hm-catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.home .hm-catlist a {
    font-size: 0.82rem;
    color: var(--h-ink-2);
    text-decoration: none;
}
.home .hm-catlist a span { color: var(--h-muted); font-size: 0.75rem; }
.home .hm-catlist a:hover { color: var(--h-accent); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .home .hm-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home .hm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home .hm-tile:nth-child(4n+1) { border-left: none; }
    .home .hm-tile:nth-child(n+5) { border-top: 1px solid var(--h-border); }
}

@media (max-width: 980px) {
    .home .hm-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home .hm-promos { grid-template-columns: minmax(0, 1fr); }
    .home .hm-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home .hm-trust { grid-template-columns: repeat(3, 1fr); }
    .home .hm-trust-item:nth-child(3n+1) { border-left: none; }
    .home .hm-trust-item:nth-child(n+4) { border-top: 1px solid var(--h-border); }
}

/* Mobile: <picture> switches to the square M* creative at this same breakpoint,
   so the track ratio has to switch with it. Arrows give way to swipe + dots. */
@media (max-width: 760px) {
    .home .hm-wrap { padding: 0 14px; }
    .home .hm-hero-track { aspect-ratio: 1 / 1; }
    .home .hm-hero-nav { display: none; }
    .home .hm-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home .hm-tile:nth-child(3n+1) { border-left: none; }
    .home .hm-tile:nth-child(n+4) { border-top: 1px solid var(--h-border); }
    .home .hm-catgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .home .hm-trust { grid-template-columns: 1fr; }
    .home .hm-trust-item { border-left: none; }
    .home .hm-trust-item + .hm-trust-item { border-top: 1px solid var(--h-border); }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .home * { transition: none !important; }
    .home .hm-promo:hover { transform: none; }
}