:root {
    --gold: #b5a064;
    --gold-light: #d4c68a;
    --cream: #f5f0e1;
    --black: #0a0a0a;
    --green: #4e821d;
    --ink-soft: rgba(10,10,10,.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #fffdf7; color: var(--black); font-family: 'DM Sans', sans-serif; line-height: 1.6; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: 'Oswald', sans-serif; font-weight: 700; line-height: .98; }
a { color: inherit; }
.eyebrow { color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }

.shop-hero {
    min-height: min(900px, 96vh);
    padding: 8.5rem clamp(1.25rem, 6vw, 6rem) 3.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .78fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 90%, rgba(78,130,29,.19), transparent 34%),
        linear-gradient(135deg, #070807, #11150f 70%, #101a0b);
    color: var(--cream);
}

.shop-hero::before {
    content: '';
    width: 36rem;
    height: 36rem;
    position: absolute;
    left: -21rem;
    bottom: -23rem;
    border: 1px solid rgba(212,198,138,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 6rem rgba(181,160,100,.035), 0 0 0 12rem rgba(181,160,100,.02);
    pointer-events: none;
}

.shop-hero__copy { max-width: 880px; align-self: center; position: relative; z-index: 1; }
.shop-hero h1 { margin: .9rem 0 1.6rem; font-size: clamp(5rem, 10vw, 9.5rem); letter-spacing: -.025em; }
.shop-hero h1 span { color: var(--gold); }
.shop-hero__copy > p { max-width: 690px; color: rgba(245,240,225,.78); font-size: clamp(1rem, 1.5vw, 1.17rem); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.button {
    min-height: 52px;
    padding: .9rem 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--gold { background: var(--gold); color: var(--black); }
.button--gold:hover, .button--gold:focus-visible { background: var(--gold-light); }
.button--outline { border-color: rgba(245,240,225,.52); color: var(--cream); }
.button--outline:hover, .button--outline:focus-visible { background: var(--cream); color: var(--black); }
.button--dark { background: var(--black); color: var(--cream); }

.shop-hero__note { margin-top: 1.25rem; padding-left: 1rem; border-left: 3px solid var(--gold); font-size: .82rem !important; }
.shop-hero__note strong { color: var(--cream); }

.shop-hero__visual {
    min-width: 0;
    min-height: 590px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(245,240,225,.24);
    box-shadow: 22px 22px 0 rgba(181,160,100,.12);
}
.shop-hero__visual::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(4,6,3,.9)); pointer-events: none; }
.shop-hero__visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 54% center; }
.shop-hero__visual figcaption { position: absolute; z-index: 1; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; color: var(--cream); }
.shop-hero__visual figcaption span, .shop-hero__visual figcaption strong { display: block; }
.shop-hero__visual figcaption span { color: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.shop-hero__visual figcaption strong { margin-top: .25rem; font: 700 clamp(2rem, 4vw, 3.6rem)/1 'Oswald', sans-serif; text-transform: uppercase; }

.shop-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: var(--gold); }
.shop-facts article { min-width: 0; padding: 1.25rem clamp(1rem,3vw,3rem); display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 1rem; border-right: 1px solid rgba(10,10,10,.2); }
.shop-facts article:last-child { border-right: 0; }
.shop-facts article > span { color: rgba(10,10,10,.38); font: 700 2.3rem/1 'Oswald', sans-serif; }
.shop-facts strong, .shop-facts p { display: block; }
.shop-facts strong { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.shop-facts p { margin-top: .12rem; color: rgba(10,10,10,.66); font-size: .82rem; }

.section { padding: clamp(5rem,9vw,8rem) clamp(1.25rem,6vw,6rem); }
.section-inner { width: 100%; max-width: 1200px; margin: auto; }
.parent-guide__grid { display: grid; grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(2.5rem,7vw,7rem); }
.parent-guide__media { min-height: 650px; position: relative; overflow: hidden; background: #152413; box-shadow: 18px 18px 0 rgba(181,160,100,.15); }
.parent-guide__media::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,8,4,.78)); pointer-events: none; }
.parent-guide__media img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center 62%; }
.parent-guide__badge { position: absolute; z-index: 1; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; padding: 1rem; background: rgba(10,10,10,.84); color: var(--cream); }
.parent-guide__badge span, .parent-guide__badge strong { display: block; }
.parent-guide__badge span { color: var(--gold-light); font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.parent-guide__badge strong { margin-top: .2rem; font: 700 2rem/1 'Oswald',sans-serif; text-transform: uppercase; }
.parent-guide__copy h2, .section-heading h2, .support-grid > div:first-child h2 { margin: .65rem 0 1rem; font-size: clamp(3.5rem,7vw,6.2rem); }
.parent-guide__intro { max-width: 650px; color: var(--ink-soft); font-size: 1.03rem; }
.check-list { margin-top: 2rem; display: grid; gap: 0; list-style: none; border-top: 1px solid rgba(10,10,10,.14); }
.check-list li { padding: 1.15rem 0; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 1rem; border-bottom: 1px solid rgba(10,10,10,.14); }
.check-list li > span { color: #756327; font: 700 1rem/1.3 'Oswald',sans-serif; letter-spacing: .08em; }
.check-list h3 { margin-bottom: .3rem; font-size: 1.65rem; }
.check-list p { color: var(--ink-soft); font-size: .92rem; }

.order-section { background: var(--cream); }
.section-heading { margin-bottom: 3rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.section-heading > div { min-width: 0; }
.section-heading p { max-width: 490px; color: var(--ink-soft); }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.step-card { min-height: 330px; padding: clamp(1.4rem,3vw,2rem); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: #fff; border: 1px solid rgba(10,10,10,.1); border-top: 5px solid var(--gold); box-shadow: 0 14px 35px rgba(40,35,20,.07); }
.step-card::after { content: attr(data-step); position: absolute; right: -.2rem; top: -.75rem; color: rgba(10,10,10,.04); font: 700 8rem/1 'Oswald',sans-serif; }
.step-card__icon { width: 52px; height: 52px; margin-bottom: auto; display: grid; place-items: center; border: 1px solid rgba(78,130,29,.35); border-radius: 50%; background: rgba(78,130,29,.08); color: var(--green); }
.step-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.step-card h3 { margin: 2rem 0 .6rem; font-size: 2.3rem; }
.step-card p { color: var(--ink-soft); font-size: .92rem; }

.support-section { background: var(--black); color: var(--cream); }
.support-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: start; gap: clamp(2.5rem,7vw,7rem); }
.support-grid > div:first-child p { max-width: 540px; color: rgba(245,240,225,.7); }
.support-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.support-cards article { min-height: 360px; padding: 1.6rem; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(245,240,225,.17); border-top: 5px solid var(--gold); background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); }
.support-card__label { color: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.support-cards h3 { margin: .65rem 0 1rem; font-size: 2.35rem; }
.support-cards p, .support-cards li { color: rgba(245,240,225,.72); font-size: .9rem; }
.support-cards ul { padding-left: 1.1rem; display: grid; gap: .55rem; }
.support-cards a { width: 100%; margin-top: auto; padding-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(245,240,225,.16); color: var(--gold-light); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.support-cards a:hover, .support-cards a:focus-visible { color: #fff; }

.shop-cta { padding: clamp(4rem,8vw,7rem) clamp(1.25rem,8vw,9rem); display: flex; align-items: center; justify-content: space-between; gap: 3rem; background: var(--gold); }
.shop-cta .eyebrow { color: rgba(10,10,10,.58); }
.shop-cta h2 { margin: .55rem 0 .8rem; font-size: clamp(4rem,9vw,8rem); }
.shop-cta p { max-width: 630px; color: rgba(10,10,10,.66); }
.shop-cta .button { flex: 0 0 auto; }

footer { padding: 3rem 1.25rem 5rem; background: var(--black); color: rgba(245,240,225,.6); text-align: center; }
.mobile-shop { display: none; }

@media (max-width: 1024px) {
    .shop-hero { min-height: auto; padding: 8.5rem 2rem 4rem; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap: 2rem; }
    .shop-hero__visual { min-height: 520px; }
    .section { padding: 5rem 2rem; }
    .parent-guide__grid { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 3rem; }
    .parent-guide__media { min-height: 580px; }
    .section-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
    .support-grid { grid-template-columns: 1fr; }
    .shop-cta { padding: 5rem 2rem; }
}

@media (max-width: 760px) {
    body { padding-bottom: 70px; }
    .shop-hero { padding: 7rem 1.1rem 2.25rem; grid-template-columns: 1fr; }
    .shop-hero h1 { font-size: clamp(3.9rem,18vw,5.8rem); }
    .hero-actions { display: grid; }
    .button { width: 100%; }
    .shop-hero__visual { min-height: 0; aspect-ratio: 4/3; box-shadow: 10px 10px 0 rgba(181,160,100,.12); }
    .shop-hero__visual img { object-position: 54% center; }
    .shop-hero__visual figcaption { right: 1rem; bottom: 1rem; left: 1rem; }
    .shop-facts { grid-template-columns: 1fr; }
    .shop-facts article { padding: 1rem 1.1rem; border-right: 0; border-bottom: 1px solid rgba(10,10,10,.2); }
    .shop-facts article:last-child { border-bottom: 0; }
    .section { padding: 3.75rem 1.1rem; }
    .parent-guide__grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .parent-guide__media { min-height: 520px; box-shadow: 10px 10px 0 rgba(181,160,100,.15); }
    .parent-guide__copy h2, .section-heading h2, .support-grid > div:first-child h2, .shop-cta h2 { font-size: clamp(3rem,15vw,4.5rem); }
    .steps-grid, .support-cards { grid-template-columns: 1fr; }
    .step-card, .support-cards article { min-height: 280px; }
    .shop-cta { padding: 3.75rem 1.1rem; align-items: stretch; flex-direction: column; gap: 1.5rem; }
    .mobile-shop { z-index: 8000; position: fixed; right: .75rem; bottom: .75rem; left: .75rem; min-height: 50px; padding: .85rem 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--gold); border: 1px solid rgba(10,10,10,.25); box-shadow: 0 12px 30px rgba(0,0,0,.3); color: var(--black); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-align: center; text-decoration: none; text-transform: uppercase; }
}

@media (max-width: 430px) {
    .shop-hero__visual { aspect-ratio: 1/1.05; }
    .shop-hero__visual figcaption strong { font-size: 1.9rem; }
    .parent-guide__media { min-height: 460px; }
    .check-list li { grid-template-columns: 38px minmax(0,1fr); gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
