/*
Theme Name: Atlas & Sole
Theme URI: https://atlas-sole.example
Author: Atlas & Sole
Description: Custom storefront theme for Atlas & Sole, the Brooklyn-based
  shoes and apparel store. Classic theme — pairs with the wasp-atlas-store
  data plugin (CPT + variant helpers + data shortcodes).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: atlas-sole
*/

/* =====================================================================
 * 1. Tokens
 * ================================================================== */

:root {
    --atlas-bg:#fafaf9;
    --atlas-fg:#0c0a09;
    --atlas-ink:#18181b;
    --atlas-muted:#6b7280;
    --atlas-line:#e5e7eb;
    --atlas-soft:#f4f4f5;
    --atlas-card:#ffffff;
    --atlas-accent:#dc2626;
    --atlas-accent-soft:#fee2e2;
    --atlas-success:#34d399;
    --atlas-warm:#fef3c7;

    --atlas-radius-sm:8px;
    --atlas-radius:14px;
    --atlas-radius-lg:18px;
    --atlas-shadow-sm:0 2px 18px rgba(0,0,0,.06);
    --atlas-shadow:0 12px 28px rgba(0,0,0,.08);
    --atlas-shadow-lg:0 30px 60px rgba(0,0,0,.4);

    --atlas-promo-h:34px;
}

/* =====================================================================
 * 2. Resets / globals
 * ================================================================== */

html, body { margin:0; padding:0; }
body {
    background:var(--atlas-bg);
    color:var(--atlas-fg);
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
}
* { box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--atlas-ink); }
button { font-family:inherit; }

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

.atlas-container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* =====================================================================
 * 3. Promo bar (above the fixed header)
 * ================================================================== */

.atlas-promobar {
    background:#0c0a09; color:#fff;
    font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase;
    padding:.55rem 0;
    position:relative; z-index:60;
    height:var(--atlas-promo-h);
    display:flex; align-items:center;
    transition:transform .25s ease;
}
.atlas-promobar__track {
    display:flex; gap:2.5rem; justify-content:center; align-items:center;
    width:100%; font-weight:600; color:rgba(255,255,255,.85);
    white-space:nowrap;
}
.atlas-promobar__track > span:nth-child(odd):not(:first-child) { color:rgba(255,255,255,.4); }
@media (max-width:760px) {
    .atlas-promobar__track { gap:1rem; font-size:.6rem; letter-spacing:.5px; padding:0 1rem; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; }
}
body.atlas-scrolled .atlas-promobar { transform:translateY(-100%); }

/* =====================================================================
 * 4. Site header
 * ================================================================== */

.atlas-header {
    position:fixed; top:var(--atlas-promo-h); left:0; right:0; z-index:50;
    background:transparent;
    transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, top .25s ease, padding .25s ease;
}
.atlas-header__inner {
    max-width:none; padding:1.1rem 2.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.atlas-brand {
    font-size:1.25rem; font-weight:900; letter-spacing:-.5px;
    color:#fff; text-decoration:none;
}
.atlas-nav {
    list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; align-items:center;
}
.atlas-nav__link {
    color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.2px;
    position:relative; padding:.25rem 0;
}
.atlas-nav__link::after {
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background:currentColor;
    transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.atlas-nav__link:hover::after { transform:scaleX(1); }
.atlas-cart-toggle {
    background:none; border:none; cursor:pointer; color:inherit;
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    padding:.4rem .5rem; transition:transform .15s ease;
}
.atlas-cart-toggle:hover { transform:translateY(-1px); }
.atlas-cart-badge {
    position:absolute; top:-2px; right:-2px;
    background:var(--atlas-accent); color:#fff;
    font-size:.65rem; font-weight:700;
    width:18px; height:18px; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease;
}
.atlas-cart-badge.is-active { opacity:1; transform:scale(1); }

/* Header - state: not scrolled (transparent over hero on home) */
body.home:not(.atlas-scrolled) .atlas-header { background:transparent; }
body.home:not(.atlas-scrolled) .atlas-brand,
body.home:not(.atlas-scrolled) .atlas-nav__link,
body.home:not(.atlas-scrolled) .atlas-cart-toggle { color:#fff; }

/* Header - state: scrolled (frosted on home) */
body.home.atlas-scrolled .atlas-header {
    background:rgba(250,250,249,.92);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:var(--atlas-shadow-sm);
    border-bottom:1px solid rgba(0,0,0,.06);
    top:0;
}
body.home.atlas-scrolled .atlas-header__inner { padding:.7rem 2.5rem; }
body.home.atlas-scrolled .atlas-brand,
body.home.atlas-scrolled .atlas-nav__link,
body.home.atlas-scrolled .atlas-cart-toggle { color:var(--atlas-ink); }

/* Header - non-home pages (always opaque) */
body:not(.home) .atlas-header {
    background:rgba(250,250,249,.92);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(0,0,0,.06);
}
body:not(.home) .atlas-brand,
body:not(.home) .atlas-nav__link,
body:not(.home) .atlas-cart-toggle { color:var(--atlas-ink); }

/* Page content needs top padding for non-home (header is fixed) */
body:not(.home) .atlas-main { padding-top:calc(var(--atlas-promo-h) + 64px); }
body.home .atlas-main { padding-top:0; }

/* =====================================================================
 * 5. Hero
 * ================================================================== */

.atlas-hero {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    color:#fff; overflow:hidden; background:#0c0a09;
    padding:8rem 2.5rem 5rem;
    margin-top:0;
}
.atlas-hero__bg {
    position:absolute; inset:0; z-index:0;
    background:url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=2400&q=80') center/cover no-repeat;
    filter:saturate(1.05) brightness(.78); transform:scale(1.04);
}
.atlas-hero__veil {
    position:absolute; inset:0; z-index:1;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(220,38,38,.18), transparent 55%),
        linear-gradient(115deg, rgba(12,10,9,.85) 0%, rgba(12,10,9,.55) 45%, rgba(12,10,9,.25) 100%);
}
.atlas-hero__inner { position:relative; z-index:2; width:100%; max-width:1240px; }
.atlas-hero__eyebrow {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.4rem .9rem; margin:0 0 1.5rem;
    background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18); border-radius:9999px;
    font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:2px;
}
.atlas-hero__eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--atlas-success); box-shadow:0 0 0 4px rgba(52,211,153,.25); }
.atlas-hero__title {
    font-size:clamp(2.6rem, 7vw, 6rem); font-weight:900;
    letter-spacing:-2px; line-height:.95; margin:0 0 1.5rem;
    color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.atlas-hero__title em { font-style:normal; color:#fca5a5; }
.atlas-hero__lead {
    font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.55;
    max-width:38ch; margin:0 0 2.2rem; color:rgba(255,255,255,.86);
}
.atlas-hero__ctas { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.atlas-hero__stats { display:flex; gap:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
.atlas-hero__stat strong { display:block; font-size:clamp(1.4rem,2.2vw,2rem); font-weight:800; color:#fff; letter-spacing:-.5px; }
.atlas-hero__stat span { font-size:.78rem; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.65); }
.atlas-hero__scroll { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:2; font-size:.7rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.65); display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.atlas-hero__scroll::after { content:""; width:1px; height:36px; background:linear-gradient(180deg,rgba(255,255,255,.7),transparent); animation:atlas-scroll 2.4s ease-in-out infinite; }
@keyframes atlas-scroll { 0% { opacity:0; transform:translateY(-12px); } 50% { opacity:1; } 100% { opacity:0; transform:translateY(0); } }

/* =====================================================================
 * 6. Buttons
 * ================================================================== */

.atlas-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:16px 32px; border-radius:9999px;
    font-weight:700; font-size:1rem; letter-spacing:.2px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.atlas-btn--primary { background:var(--atlas-fg); color:#fff; }
.atlas-btn--primary:hover { transform:translateY(-2px); }
.atlas-btn--ghost { background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); }
.atlas-btn--ghost:hover { background:rgba(255,255,255,.14); }
.atlas-hero .atlas-btn--primary { background:#fff; color:var(--atlas-fg); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.atlas-hero .atlas-btn--primary:hover { box-shadow:0 16px 36px rgba(0,0,0,.35); }

/* =====================================================================
 * 7. Marquee strip
 * ================================================================== */

.atlas-marquee { background:#0c0a09; color:#fff; padding:1.1rem 1.5rem; overflow:hidden; border-bottom:1px solid #27272a; }
.atlas-marquee__row { display:flex; gap:3rem; justify-content:center; align-items:center; font-size:.78rem; text-transform:uppercase; letter-spacing:3px; color:rgba(255,255,255,.7); }
.atlas-marquee__row span::before { content:"✺"; margin-right:.6rem; color:var(--atlas-accent); }
@media (max-width:720px) { .atlas-marquee__row { gap:1.2rem; font-size:.6rem; letter-spacing:1px; flex-wrap:wrap; } }

/* =====================================================================
 * 8. Section headings
 * ================================================================== */

.atlas-section-h { font-size:clamp(1.6rem,3vw,2.5rem); font-weight:800; text-align:center; margin:4.5rem 0 .5rem; letter-spacing:-.8px; color:var(--atlas-ink); }
.atlas-section-sub { text-align:center; color:var(--atlas-muted); max-width:42ch; margin:0 auto 2.5rem; font-size:1.05rem; line-height:1.55; padding:0 1.5rem; }

/* =====================================================================
 * 9. "Why Atlas" three-up
 * ================================================================== */

.atlas-promise { max-width:1240px; margin:5rem auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.atlas-promise__card { padding:2rem; border-radius:var(--atlas-radius-lg); background:#fff; border:1px solid var(--atlas-line); }
.atlas-promise__card svg { width:32px; height:32px; color:var(--atlas-accent); margin-bottom:1rem; }
.atlas-promise__card h3 { margin:0 0 .5rem; font-size:1.15rem; font-weight:700; }
.atlas-promise__card p { margin:0; color:var(--atlas-muted); line-height:1.6; font-size:.95rem; }
@media (max-width:820px) { .atlas-promise { grid-template-columns:1fr; } }

/* =====================================================================
 * 10. Product cards (grid + tile)
 * ================================================================== */

.atlas-grid { display:grid; grid-template-columns:repeat(var(--atlas-cols,4),1fr); gap:1.5rem; max-width:1280px; margin:0 auto 4rem; padding:0 1.5rem; }
@media (max-width:900px) { .atlas-grid { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px) { .atlas-grid { grid-template-columns:1fr !important; } }

.atlas-card { background:var(--atlas-card); border:1px solid var(--atlas-line); border-radius:var(--atlas-radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.atlas-card:hover { transform:translateY(-4px); box-shadow:var(--atlas-shadow); }
.atlas-card__link { color:inherit; text-decoration:none; display:block; }
.atlas-card__media { position:relative; aspect-ratio:1/1; background:var(--atlas-soft); overflow:hidden; }
.atlas-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease, transform .5s ease; }
.atlas-card__img--hover { opacity:0; }
.atlas-card:hover .atlas-card__img--primary { opacity:0; }
.atlas-card:hover .atlas-card__img--hover   { opacity:1; }
.atlas-card:hover .atlas-card__img { transform:scale(1.04); }
.atlas-card__sale { position:absolute; top:12px; left:12px; padding:4px 10px; background:var(--atlas-accent); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:1px; border-radius:9999px; z-index:2; }
.atlas-card__body { padding:1rem 1.1rem 1.25rem; }
.atlas-card__cat { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--atlas-muted); margin:0 0 .35rem; }
.atlas-card__title { font-size:1rem; font-weight:600; margin:0 0 .5rem; line-height:1.3; color:var(--atlas-ink); }
.atlas-card__price { margin:0 0 .55rem; font-size:1rem; font-weight:600; }
.atlas-card__price-was { color:var(--atlas-muted); text-decoration:line-through; margin-right:.5rem; font-weight:400; }
.atlas-card__price-now { color:var(--atlas-fg); }
.atlas-card__colors { display:flex; gap:.4rem; align-items:center; margin-top:.4rem; }
.atlas-card__dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.1); display:inline-block; }
.atlas-card__more { font-size:.7rem; color:var(--atlas-muted); margin-left:.4rem; }

/* =====================================================================
 * 11. Category tiles
 * ================================================================== */

.atlas-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1280px; margin:0 auto 4rem; padding:0 1.5rem; }
@media (max-width:760px) { .atlas-cats { grid-template-columns:1fr; } }
.atlas-cat { position:relative; display:flex; align-items:flex-end; padding:1.5rem; aspect-ratio:4/3; border-radius:var(--atlas-radius); background-size:cover; background-position:center; color:#fff; text-decoration:none; overflow:hidden; transition:transform .25s ease; }
.atlas-cat:hover { transform:translateY(-3px); }
.atlas-cat::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%); }
.atlas-cat__label { position:relative; z-index:2; font-size:1.5rem; font-weight:700; letter-spacing:-.5px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.atlas-cat__label::after { content:" →"; opacity:0; margin-left:.4rem; transition:opacity .2s ease, transform .2s ease; display:inline-block; }
.atlas-cat:hover .atlas-cat__label::after { opacity:1; transform:translateX(4px); }

/* =====================================================================
 * 12. Banner / empty states
 * ================================================================== */

.atlas-banner { max-width:1280px; margin:0 auto 4rem; padding:1.25rem 1.5rem; border-radius:var(--atlas-radius); background:linear-gradient(135deg,#fef3c7,#fde68a); color:#78350f; text-align:center; font-weight:600; box-shadow:0 8px 22px rgba(120,53,15,.08); }
.atlas-empty { text-align:center; color:var(--atlas-muted); padding:3rem; }

/* =====================================================================
 * 13. PDP — Product Detail Page
 * ================================================================== */

.atlas-pdp { max-width:1320px; margin:1rem auto 5rem; padding:0 1.5rem; }
.atlas-pdp__crumbs {
    display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
    font-size:.8rem; color:var(--atlas-muted); margin:1.5rem 0;
}
.atlas-pdp__crumbs a { color:var(--atlas-muted); text-decoration:none; }
.atlas-pdp__crumbs a:hover { color:var(--atlas-ink); }
.atlas-pdp__crumbs-current { color:var(--atlas-ink); font-weight:600; }

.atlas-pdp__layout { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:start; }
@media (max-width:960px) { .atlas-pdp__layout { grid-template-columns:1fr; gap:2rem; } }

.atlas-pdp__gallery { position:sticky; top:120px; }
.atlas-pdp__main-img { position:relative; aspect-ratio:1/1; background:var(--atlas-soft); border-radius:var(--atlas-radius-lg); overflow:hidden; }
.atlas-pdp__main-img img { width:100%; height:100%; object-fit:cover; transition:opacity .25s ease; }
.atlas-pdp__sale-tag { position:absolute; top:18px; left:18px; padding:6px 14px; background:var(--atlas-accent); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:1.5px; border-radius:9999px; }
.atlas-pdp__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:.85rem; }
.atlas-pdp__thumb {
    background:var(--atlas-soft); border:2px solid transparent; border-radius:10px;
    cursor:pointer; padding:0; aspect-ratio:1/1; overflow:hidden;
    transition:border-color .2s ease;
}
.atlas-pdp__thumb:hover { border-color:rgba(0,0,0,.2); }
.atlas-pdp__thumb.is-active { border-color:var(--atlas-ink); }
.atlas-pdp__thumb img { width:100%; height:100%; object-fit:cover; }

.atlas-pdp__buybox { padding-top:.5rem; }
.atlas-pdp__cat { font-size:.78rem; text-transform:uppercase; letter-spacing:2px; color:var(--atlas-muted); margin:0 0 .6rem; font-weight:600; }
.atlas-pdp__title { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; letter-spacing:-1px; line-height:1.1; margin:0 0 .85rem; color:var(--atlas-ink); }
.atlas-pdp__rating { display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; font-size:.85rem; color:var(--atlas-muted); }
.atlas-pdp__stars { position:relative; display:inline-block; width:90px; height:18px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'><g fill='%23e5e7eb'><polygon points='9,1 11.4,6.6 17.5,7.3 13,11.5 14.3,17.5 9,14.6 3.7,17.5 5,11.5 0.5,7.3 6.6,6.6'/><polygon points='27,1 29.4,6.6 35.5,7.3 31,11.5 32.3,17.5 27,14.6 21.7,17.5 23,11.5 18.5,7.3 24.6,6.6'/><polygon points='45,1 47.4,6.6 53.5,7.3 49,11.5 50.3,17.5 45,14.6 39.7,17.5 41,11.5 36.5,7.3 42.6,6.6'/><polygon points='63,1 65.4,6.6 71.5,7.3 67,11.5 68.3,17.5 63,14.6 57.7,17.5 59,11.5 54.5,7.3 60.6,6.6'/><polygon points='81,1 83.4,6.6 89.5,7.3 85,11.5 86.3,17.5 81,14.6 75.7,17.5 77,11.5 72.5,7.3 78.6,6.6'/></g></svg>"); }
.atlas-pdp__stars-fill { position:absolute; left:0; top:0; height:100%; overflow:hidden; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'><g fill='%23f59e0b'><polygon points='9,1 11.4,6.6 17.5,7.3 13,11.5 14.3,17.5 9,14.6 3.7,17.5 5,11.5 0.5,7.3 6.6,6.6'/><polygon points='27,1 29.4,6.6 35.5,7.3 31,11.5 32.3,17.5 27,14.6 21.7,17.5 23,11.5 18.5,7.3 24.6,6.6'/><polygon points='45,1 47.4,6.6 53.5,7.3 49,11.5 50.3,17.5 45,14.6 39.7,17.5 41,11.5 36.5,7.3 42.6,6.6'/><polygon points='63,1 65.4,6.6 71.5,7.3 67,11.5 68.3,17.5 63,14.6 57.7,17.5 59,11.5 54.5,7.3 60.6,6.6'/><polygon points='81,1 83.4,6.6 89.5,7.3 85,11.5 86.3,17.5 81,14.6 75.7,17.5 77,11.5 72.5,7.3 78.6,6.6'/></g></svg>"); }

.atlas-pdp__price { font-size:1.35rem; font-weight:800; margin:0 0 1.2rem; display:flex; gap:.75rem; align-items:baseline; flex-wrap:wrap; }
.atlas-pdp__price-was { color:var(--atlas-muted); text-decoration:line-through; font-weight:500; }
.atlas-pdp__price-now { color:var(--atlas-ink); }
.atlas-pdp__price-savings { font-size:.8rem; padding:3px 9px; background:var(--atlas-accent-soft); color:#991b1b; border-radius:9999px; font-weight:700; letter-spacing:.5px; }
.atlas-pdp__lead { color:#374151; line-height:1.6; margin:0 0 1.8rem; }

.atlas-pdp__option { margin:0 0 1.4rem; }
.atlas-pdp__option-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.75rem; }
.atlas-pdp__option-label { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--atlas-ink); }
.atlas-pdp__option-value { font-size:.85rem; color:var(--atlas-muted); }
.atlas-pdp__size-guide { background:none; border:none; cursor:pointer; font-size:.8rem; color:var(--atlas-muted); text-decoration:underline; padding:0; }
.atlas-pdp__size-guide:hover { color:var(--atlas-ink); }

.atlas-pdp__swatches { display:flex; gap:.6rem; flex-wrap:wrap; }
.atlas-pdp__swatch {
    width:42px; height:42px; padding:3px; border-radius:50%;
    background:none; border:2px solid transparent; cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
}
.atlas-pdp__swatch-dot {
    display:block; width:100%; height:100%;
    background:var(--swatch); border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.atlas-pdp__swatch:hover { transform:scale(1.05); }
.atlas-pdp__swatch.is-selected { border-color:var(--atlas-ink); }

.atlas-pdp__sizes { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; }
@media (max-width:520px) { .atlas-pdp__sizes { grid-template-columns:repeat(4,1fr); } }
.atlas-pdp__size {
    padding:.85rem .25rem; background:#fff; border:1px solid var(--atlas-line);
    font-weight:600; font-size:.9rem; cursor:pointer; border-radius:var(--atlas-radius-sm);
    transition:border-color .15s ease, background .15s ease, color .15s ease;
    position:relative; min-height:46px;
}
.atlas-pdp__size:hover:not(.is-soldout) { border-color:var(--atlas-ink); }
.atlas-pdp__size.is-selected { background:var(--atlas-ink); color:#fff; border-color:var(--atlas-ink); }
.atlas-pdp__size.is-soldout {
    color:#9ca3af; cursor:not-allowed; background:#fafafa;
    text-decoration:line-through; text-decoration-thickness:1.5px;
}

.atlas-pdp__buy-row { display:flex; gap:.75rem; margin:1.5rem 0 .5rem; }
.atlas-pdp__add { flex:1; padding:18px 28px; font-size:1rem; }
.atlas-pdp__wish {
    width:60px; background:#fff; border:1px solid var(--atlas-line); border-radius:9999px;
    cursor:pointer; color:var(--atlas-ink); display:flex; align-items:center; justify-content:center;
    transition:all .15s ease;
}
.atlas-pdp__wish:hover { border-color:var(--atlas-ink); transform:translateY(-1px); }
.atlas-pdp__wish.is-active { background:var(--atlas-accent-soft); color:var(--atlas-accent); border-color:#fecaca; }
.atlas-pdp__wish.is-active svg { fill:currentColor; }

.atlas-pdp__perks { list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:.4rem; font-size:.88rem; color:#374151; }

.atlas-pdp__accordion { margin-top:2rem; border-top:1px solid var(--atlas-line); }
.atlas-pdp__accordion details { border-bottom:1px solid var(--atlas-line); }
.atlas-pdp__accordion summary {
    list-style:none; cursor:pointer; padding:1.2rem 0;
    font-weight:700; font-size:.95rem; display:flex; justify-content:space-between; align-items:center;
    color:var(--atlas-ink);
}
.atlas-pdp__accordion summary::-webkit-details-marker { display:none; }
.atlas-pdp__accordion summary::after { content:"+"; font-size:1.4rem; font-weight:300; transition:transform .2s ease; }
.atlas-pdp__accordion details[open] summary::after { content:"−"; }
.atlas-pdp__accordion details > div { padding:0 0 1.2rem; color:#374151; line-height:1.65; font-size:.95rem; }
.atlas-pdp__accordion details > div ul { padding-left:1.2rem; margin:.5rem 0; }
.atlas-pdp__accordion details > div li { margin-bottom:.4rem; }
.atlas-pdp__sku { font-size:.78rem; color:var(--atlas-muted); padding:1.2rem 0 .4rem; margin:0; }
.atlas-pdp__related { margin-top:5rem; }

/* =====================================================================
 * 14. Cart drawer
 * ================================================================== */

.atlas-cart {
    position:fixed; inset:0; z-index:1000;
    pointer-events:none; visibility:hidden; transition:visibility 0s .3s;
}
.atlas-cart[aria-hidden="false"] { visibility:visible; pointer-events:auto; transition:visibility 0s; }
.atlas-cart__overlay {
    position:absolute; inset:0;
    background:rgba(12,10,9,.5); backdrop-filter:blur(4px);
    opacity:0; transition:opacity .25s ease;
}
.atlas-cart[aria-hidden="false"] .atlas-cart__overlay { opacity:1; }
.atlas-cart__panel {
    position:absolute; top:0; right:0; bottom:0;
    width:100%; max-width:440px;
    background:#fff; display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-12px 0 40px rgba(0,0,0,.15);
}
.atlas-cart[aria-hidden="false"] .atlas-cart__panel { transform:translateX(0); }
.atlas-cart__head { padding:1.5rem 1.5rem 1rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--atlas-line); }
.atlas-cart__head h2 { margin:0; font-size:1.2rem; font-weight:800; letter-spacing:-.5px; }
.atlas-cart__close { background:none; border:none; cursor:pointer; padding:.4rem; color:var(--atlas-ink); }
.atlas-cart__items { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.atlas-cart__empty { text-align:center; color:var(--atlas-muted); padding:3rem 1rem; font-size:.95rem; }
.atlas-cart-item { display:grid; grid-template-columns:80px 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--atlas-line); }
.atlas-cart-item:last-child { border-bottom:none; }
.atlas-cart-item__media { aspect-ratio:1/1; background:var(--atlas-soft); border-radius:10px; overflow:hidden; }
.atlas-cart-item__media img { width:100%; height:100%; object-fit:cover; }
.atlas-cart-item__info { display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.atlas-cart-item__name { font-weight:600; font-size:.9rem; margin:0; line-height:1.3; }
.atlas-cart-item__opts { font-size:.78rem; color:var(--atlas-muted); margin:.2rem 0 .4rem; }
.atlas-cart-item__row { display:flex; justify-content:space-between; align-items:center; }
.atlas-cart-item__price { font-weight:700; font-size:.92rem; }
.atlas-cart-item__qty { display:inline-flex; align-items:center; border:1px solid var(--atlas-line); border-radius:9999px; }
.atlas-cart-item__qty button { background:none; border:none; cursor:pointer; padding:.2rem .55rem; font-weight:600; color:var(--atlas-ink); }
.atlas-cart-item__qty button:hover { color:var(--atlas-accent); }
.atlas-cart-item__qty span { padding:0 .4rem; font-size:.85rem; min-width:18px; text-align:center; }
.atlas-cart-item__remove { background:none; border:none; cursor:pointer; font-size:.75rem; color:var(--atlas-muted); padding:.4rem 0; text-align:left; }
.atlas-cart-item__remove:hover { color:var(--atlas-accent); }

.atlas-cart__foot { border-top:1px solid var(--atlas-line); padding:1.2rem 1.5rem 1.5rem; }
.atlas-cart__row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; font-size:1rem; }
.atlas-cart__row strong { font-size:1.2rem; font-weight:800; }
.atlas-cart__shipping { font-size:.78rem; color:var(--atlas-muted); margin:0 0 1rem; }
.atlas-cart__checkout { width:100%; }
.atlas-cart__viewcart { display:block; text-align:center; margin-top:.7rem; font-size:.85rem; color:var(--atlas-ink); text-decoration:underline; }

/* =====================================================================
 * 15. Toast
 * ================================================================== */

.atlas-toast {
    position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%);
    background:#0c0a09; color:#fff; padding:.85rem 1.4rem; border-radius:9999px;
    font-size:.85rem; font-weight:600; letter-spacing:.3px; z-index:1100;
    box-shadow:var(--atlas-shadow-lg);
    transition:transform .3s cubic-bezier(.2,.9,.4,1);
    pointer-events:none;
}
.atlas-toast.is-shown { transform:translateX(-50%) translateY(0); }
.atlas-toast::before { content:"✓"; color:var(--atlas-success); margin-right:.5rem; font-weight:700; }

/* =====================================================================
 * 16. Footer
 * ================================================================== */

.atlas-footer { background:#0c0a09; color:#a3a3a3; margin-top:6rem; }

.atlas-footer__hero {
    background:linear-gradient(135deg,#18181b 0%,#27272a 60%,#0c0a09 100%);
    padding:5rem 1.5rem; text-align:center; border-bottom:1px solid #27272a;
}
.atlas-footer__hero-inner { max-width:580px; margin:0 auto; }
.atlas-footer__hero h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; letter-spacing:-1.5px; color:#fff; margin:0 0 1rem; }
.atlas-footer__hero p { color:rgba(255,255,255,.65); font-size:1rem; line-height:1.6; margin:0 0 2rem; }

.atlas-newsletter {
    display:flex; gap:.5rem; max-width:480px; margin:0 auto;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:9999px;
    padding:.4rem; position:relative;
}
.atlas-newsletter input {
    flex:1; background:none; border:none; outline:none; padding:.65rem 1rem;
    color:#fff; font-size:.95rem;
}
.atlas-newsletter input::placeholder { color:rgba(255,255,255,.4); }
.atlas-newsletter button {
    background:#fff; color:#0c0a09; border:none; padding:.7rem 1.5rem;
    border-radius:9999px; font-weight:700; cursor:pointer;
    transition:transform .15s ease;
}
.atlas-newsletter button:hover { transform:translateX(2px); }
.atlas-newsletter__sent {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(12,10,9,.94); border-radius:9999px; color:var(--atlas-success); font-weight:700;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.atlas-newsletter.is-sent .atlas-newsletter__sent { opacity:1; }
@media (max-width:480px) {
    .atlas-newsletter { flex-direction:column; border-radius:18px; padding:.5rem; }
    .atlas-newsletter button { padding:.85rem; }
}

.atlas-footer__cols {
    max-width:1280px; margin:0 auto; padding:4rem 2rem 3rem;
    display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:3rem;
}
@media (max-width:980px) {
    .atlas-footer__cols { grid-template-columns:1fr 1fr; gap:2.5rem; }
    .atlas-footer__brand { grid-column:1 / -1; }
}
.atlas-footer__brand .atlas-footer__logo { font-size:1.5rem; font-weight:900; color:#fff; letter-spacing:-1px; margin:0 0 .8rem; }
.atlas-footer__brand .atlas-footer__tagline { color:rgba(255,255,255,.6); line-height:1.6; max-width:32ch; font-size:.95rem; margin:0 0 1.5rem; }
.atlas-footer__social { display:flex; gap:.5rem; padding:0; list-style:none; margin:0; }
.atlas-footer__social a {
    width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); color:#fff; text-decoration:none;
    transition:background .15s ease, transform .15s ease;
}
.atlas-footer__social a:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }

.atlas-footer__heading { font-size:.78rem; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:#fff; margin:0 0 1.2rem; }
.atlas-footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.atlas-footer__col a { color:rgba(255,255,255,.55); text-decoration:none; font-size:.92rem; transition:color .15s ease; }
.atlas-footer__col a:hover { color:#fff; }
.atlas-footer__contact { font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.55); margin:0 0 1.2rem; }
.atlas-footer__contact strong { color:#fff; font-weight:700; display:block; margin-bottom:.2rem; }
.atlas-footer__hours { color:rgba(255,255,255,.4); font-size:.8rem; }
.atlas-footer__contact a { color:rgba(255,255,255,.7); }

.atlas-footer__strip {
    max-width:1280px; margin:0 auto; padding:1.5rem 2rem;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    border-top:1px solid #27272a;
}
.atlas-footer__pay { display:flex; gap:.6rem; padding:0; margin:0; list-style:none; flex-wrap:wrap; }
.atlas-footer__pay li {
    font-size:.7rem; text-transform:uppercase; letter-spacing:1px;
    padding:.4rem .8rem; border:1px solid #27272a; border-radius:6px;
    color:rgba(255,255,255,.55); font-weight:600;
}
.atlas-footer__locale { font-size:.85rem; color:rgba(255,255,255,.55); }

.atlas-footer__bottom {
    max-width:1280px; margin:0 auto; padding:1.4rem 2rem 2rem;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem;
    border-top:1px solid #27272a;
    font-size:.78rem; color:rgba(255,255,255,.4);
}
.atlas-footer__bottom a { color:rgba(255,255,255,.55); text-decoration:none; }
.atlas-footer__bottom a:hover { color:#fff; }

/* =====================================================================
 * 17. Generic page (about / contact / etc.)
 * ================================================================== */

.atlas-page { max-width:760px; margin:3rem auto; padding:0 1.5rem; }
.atlas-page__title { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-1px; margin:0 0 1.5rem; color:var(--atlas-ink); }
.atlas-page__content { font-size:1.05rem; line-height:1.75; color:#374151; }
.atlas-page__content h2 { font-size:1.5rem; font-weight:700; margin:2rem 0 1rem; color:var(--atlas-ink); }
.atlas-page__content p { margin:0 0 1rem; }
.atlas-page__content ul { padding-left:1.2rem; }
.atlas-page__content li { margin-bottom:.4rem; }

/* =====================================================================
 * 18. Archive page (shop / category)
 * ================================================================== */

.atlas-archive { max-width:1320px; margin:0 auto 3rem; padding:0 1.5rem; }
.atlas-archive__head { text-align:center; padding:3rem 0 2rem; }
.atlas-archive__title { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-1px; margin:0 0 .6rem; }
.atlas-archive__sub { color:var(--atlas-muted); margin:0; }