@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    --ink: #332e2a;
    --muted: #746b65;
    --cream: #fbf8f2;
    --paper: #fffdf9;
    --rose: #a76661;
    --rose-dark: #86514d;
    --rose-soft: #f4e4df;
    --sage: #87927d;
    --sage-dark: #657060;
    --line: rgba(76, 60, 51, .14);
    --shadow: 0 20px 55px rgba(72, 53, 44, .1);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --script: 'Allura', cursive;
    --sans: 'Outfit', Arial, sans-serif;
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--sans);
    line-height: 1.6;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 9% 22%, rgba(216, 180, 173, .18), transparent 24%),
        radial-gradient(circle at 91% 45%, rgba(150, 161, 139, .14), transparent 25%),
        #fbf8f2;
}

body, button, input, textarea { font-family: var(--sans) }

a { color: inherit; text-decoration: none }
img { max-width: 100% }
.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 }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto }
.product-main { padding: 108px 0 0 }

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: #81766f;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-breadcrumb a:hover { color: var(--rose-dark) }

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr);
    gap: clamp(42px, 6vw, 82px);
    align-items: start;
}

.product-gallery { position: sticky; top: 26px }

.product-gallery-main {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(98, 77, 64, .12);
    border-radius: 34px 34px 100px 34px;
    background: #eee4d8;
    box-shadow: var(--shadow);
}

.product-gallery-main::after {
    content: 'Thoughtfully selected';
    position: absolute;
    right: 22px;
    bottom: 20px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    color: #fff;
    background: rgba(43, 37, 33, .42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-gallery-main img {
    width: 100%;
    height: 610px;
    display: block;
    object-fit: cover;
    transition: opacity .24s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

.product-gallery-main:hover img { transform: scale(1.018) }
.product-gallery-main img.is-changing { opacity: .35 }

.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.gallery-thumb {
    height: 112px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #eadfd5;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.gallery-thumb:hover { transform: translateY(-2px) }
.gallery-thumb.active { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(167,102,97,.1) }
.gallery-thumb:focus-visible { outline: 3px solid rgba(167,102,97,.34); outline-offset: 3px }
.gallery-thumb img { width: 100%; height: 100%; display: block; object-fit: cover }
.gallery-thumb[data-position='top'] img { object-position: top }
.gallery-thumb[data-position='center'] img { object-position: center }
.gallery-thumb[data-position='bottom'] img { object-position: bottom }

.product-details { padding: 8px 0 30px }
.product-kicker { color: var(--rose-dark); font-size: 12px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase }
.product-details h1 { margin: 11px 0 4px; font-family: var(--serif); font-size: clamp(45px, 5.4vw, 72px); font-weight: 600; line-height: .92; letter-spacing: -.02em }
.product-tagline { margin: 3px 0 15px; color: #7f7a74; font-family: var(--script); font-size: 35px; line-height: 1.1 }
.product-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; color: var(--ink); font-family: var(--serif); font-size: 32px; font-weight: 600 }
.product-price small { color: var(--muted); font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
.product-intro { max-width: 610px; margin: 0; color: #645b55; font-size: 15px }

.product-notice {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid rgba(167,102,97,.17);
    border-radius: 16px;
    color: #634b48;
    background: linear-gradient(120deg, rgba(244,228,223,.78), rgba(255,253,249,.82));
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
}

.product-meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 25px }
.product-meta-row span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #6c625d; background: rgba(255,255,255,.45); font-size: 11px }

.product-form { margin-top: 25px }
.choice-group { margin: 0 0 26px; padding: 0; border: 0 }
.choice-legend { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin-bottom: 12px; font-size: 14px; font-weight: 600 }
.choice-legend small { color: #8c817a; font-size: 11px; font-weight: 400 }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px }
.choice-grid.single { grid-template-columns: 1fr }

.choice-card {
    position: relative;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.58);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.choice-card:hover { transform: translateY(-1px); border-color: rgba(167,102,97,.36); background: #fff }
.choice-card:has(input:checked) { border-color: var(--rose); background: #fff9f7; box-shadow: 0 0 0 3px rgba(167,102,97,.09) }
.choice-card:has(input:focus-visible) { outline: 3px solid rgba(167,102,97,.28); outline-offset: 2px }
.choice-card input { position: absolute; opacity: 0; pointer-events: none }
.choice-copy { min-width: 0; display: grid; gap: 1px }
.choice-copy strong { color: #413a36; font-size: 13px; font-weight: 600 }
.choice-copy span { color: #81766f; font-size: 11px }
.swatch { width: 30px; height: 30px; flex: 0 0 30px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(57,47,41,.16) }
.swatch.neutral { background: linear-gradient(135deg,#d8c2a8 0 50%,#f0e8dc 50%) }
.swatch.mono { background: linear-gradient(135deg,#242322 0 50%,#f6f3ec 50%) }
.swatch.pink { background: linear-gradient(135deg,#d997a0 0 50%,#f2c7cd 50%) }
.swatch.green { background: linear-gradient(135deg,#71816b 0 50%,#b9c5ad 50%) }
.swatch.blue { background: linear-gradient(135deg,#768aa3 0 50%,#bdcad9 50%) }

.theme-grid { display: grid; gap: 10px }
.theme-card { min-height: 74px }
.theme-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: #5d514a; font-family: var(--serif); font-size: 21px }
.theme-book { background: #ead8c2 }
.theme-garden { background: #dce5d7 }
.theme-sweet { background: #f2d7dc }
.theme-minimal { background: #e8e4dd }
.theme-surprise { background: #e1d9e8 }

.addon-card { min-height: 78px }
.addon-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(73,61,54,.25);
    border-radius: 7px;
    color: transparent;
    background: #fff;
    font-size: 14px;
}
.choice-card:has(input:checked) .addon-check { color: #fff; border-color: var(--sage-dark); background: var(--sage-dark) }
.addon-price { margin-left: auto; color: var(--rose-dark); font-size: 12px; font-weight: 600 }

.form-error { min-height: 18px; margin: -4px 0 12px; color: #a64040; font-size: 12px }
.cart-action-row { display: flex; align-items: stretch; gap: 11px; margin-top: 6px }
.quantity-field { width: 74px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: center; font-size: 14px }
.add-to-cart {
    min-height: 56px;
    flex: 1;
    padding: 14px 22px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(110deg, var(--rose-dark), #a96d67);
    box-shadow: 0 12px 25px rgba(134,81,77,.22);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .045em;
    transition: transform .2s ease, box-shadow .2s ease;
}
.add-to-cart:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(134,81,77,.28) }
.add-to-cart:focus-visible { outline: 3px solid rgba(134,81,77,.3); outline-offset: 3px }
.add-to-cart[disabled] { cursor: wait; opacity: .72 }
.secure-note { margin: 11px 0 0; color: #8a7f78; text-align: center; font-size: 11px }

.included-section { margin-top: 84px; padding: 72px 0; background: rgba(235,229,218,.55) }
.included-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: center }
.eyebrow { color: var(--rose-dark); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase }
.included-copy h2, .questionnaire-heading h2, .cart-page h1, .checkout-page h1 { margin: 10px 0 15px; font-family: var(--serif); font-size: clamp(38px,5vw,60px); font-weight: 600; line-height: 1 }
.included-copy p { margin: 0; color: var(--muted) }
.included-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px }
.included-item { padding: 22px; border: 1px solid rgba(89,73,63,.11); border-radius: 19px; background: rgba(255,255,255,.62) }
.included-item span { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 50%; color: #fff; background: var(--sage); font-size: 12px }
.included-item strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 600 }

/* Related products */
.related-products {
    position: relative;
    overflow: hidden;
    padding: 82px 0 92px;
    background:
        radial-gradient(circle at 8% 12%, rgba(200,143,137,.12), transparent 27%),
        radial-gradient(circle at 92% 88%, rgba(148,160,143,.11), transparent 25%),
        #fffaf7;
}

.related-heading {
    max-width: 680px;
    margin: 0 auto 38px;
    text-align: center;
}

.related-heading h2 {
    margin: 8px 0 10px;
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 54px);
    font-weight: 600;
    line-height: 1;
}

.related-heading p { margin: 0; color: var(--muted); font-size: 15px }

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

.related-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(200,143,137,.22);
    border-radius: 18px;
    background: linear-gradient(180deg,#fff 0%,#fffdfc 100%);
    box-shadow: 0 12px 35px rgba(66,48,40,.08), 0 2px 8px rgba(66,48,40,.04);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}

.related-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 12px;
    pointer-events: none;
}

.related-card:hover { transform: translateY(-7px); border-color: rgba(200,143,137,.5); box-shadow: 0 24px 55px rgba(66,48,40,.13) }
.related-media { position: relative; display: block; aspect-ratio: 1.16/1; overflow: hidden; background: #f6ebe6 }
.related-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 62%,rgba(54,43,38,.1)); pointer-events: none }
.related-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1) }
.related-card:hover .related-media img { transform: scale(1.045) }
.related-copy { padding: 27px 27px 31px; text-align: center }
.related-copy h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1 }
.related-tag { width: fit-content; margin: auto; padding: 6px 12px; border: 1px solid rgba(200,143,137,.18); border-radius: 999px; color: #665d58; background: #fbf4f1; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase }
.related-copy p { min-height: 45px; margin: 15px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.6 }
.related-price { display: block; margin-bottom: 17px; font-family: var(--serif); font-size: 23px; font-weight: 600 }
.related-link { position: relative; z-index: 3; min-width: 190px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px; color: #fff; background: var(--rose); box-shadow: 0 8px 18px rgba(200,143,137,.18); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease }
.related-link.sage { background: var(--sage-dark); box-shadow: 0 8px 18px rgba(124,136,119,.2) }
.related-link:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(200,143,137,.25) }

/* Personalized questionnaire */
.personalized-page .product-layout { margin-bottom: 82px }
.personalized-page .product-gallery-main, .personalized-page .product-gallery-main img { min-height: 670px; height: 670px }
.questionnaire-shell { margin-top: 0; padding: 82px 0; border-top: 1px solid var(--line); background: rgba(255,253,249,.66) }
.questionnaire-heading { max-width: 720px; margin: 0 auto 42px; text-align: center }
.questionnaire-heading p { color: var(--muted) }
.questionnaire-form { max-width: 930px; margin: auto }
.question-block { margin-bottom: 18px; padding: clamp(22px,4vw,36px); border: 1px solid rgba(86,67,56,.12); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 10px 32px rgba(77,59,48,.045) }
.question-number { color: var(--rose-dark); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase }
.question-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 5px 0 18px }
.question-title-row h3 { margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 600 }
.question-count { color: #8d817a; font-size: 11px; white-space: nowrap }
.question-count.is-ready { color: #577054 }
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px }
.option-chip { position: relative; cursor: pointer }
.option-chip input { position: absolute; opacity: 0; pointer-events: none }
.option-chip span { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #615852; background: #fff; font-size: 12px; transition: .2s ease }
.option-chip:hover span { border-color: rgba(167,102,97,.4); transform: translateY(-1px) }
.option-chip input:checked + span { border-color: var(--rose); color: #714944; background: var(--rose-soft); box-shadow: 0 0 0 2px rgba(167,102,97,.08) }
.option-chip input:focus-visible + span { outline: 3px solid rgba(167,102,97,.27); outline-offset: 2px }
.color-dot { width: 13px; height: 13px; border: 1px solid rgba(47,39,34,.13); border-radius: 50%; background: var(--dot, #ddd) }
.form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
.form-field { display: grid; gap: 8px }
.form-field.full { grid-column: 1/-1 }
.form-field label { font-size: 12px; font-weight: 600 }
.form-field textarea, .checkout-field input, .checkout-field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    outline: none;
}
.form-field textarea { min-height: 118px; padding: 14px; resize: vertical }
.form-field textarea:focus, .checkout-field input:focus, .checkout-field select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(167,102,97,.1) }
.curator-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px }
.curator-card { min-height: 126px; align-items: flex-start }
.curator-card .choice-copy strong { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.15 }
.personalized-submit { max-width: 930px; margin: 24px auto 0; padding: 24px; border-radius: 22px; background: #eee6dc }
.personalized-submit .cart-action-row { max-width: 500px; margin-inline: auto }

/* Cart and checkout */
.utility-main { min-height: 72vh; padding: 116px 0 86px }
.cart-head, .checkout-head { margin-bottom: 32px }
.cart-head p, .checkout-head p { max-width: 650px; color: var(--muted) }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 28px; align-items: start }
.cart-items, .checkout-card, .order-summary { border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.72); box-shadow: 0 14px 38px rgba(75,57,47,.06) }
.cart-item { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 19px; padding: 20px; border-bottom: 1px solid var(--line) }
.cart-item:last-child { border-bottom: 0 }
.cart-item img { width: 120px; height: 130px; border-radius: 17px; object-fit: cover }
.cart-item h2 { margin: 3px 0 4px; font-family: var(--serif); font-size: 25px; font-weight: 400 }
.cart-item-kicker { color: var(--rose-dark); font-size: 10px; letter-spacing: .12em; text-transform: uppercase }
.cart-options { display: grid; gap: 3px; margin: 11px 0; color: #776d66; font-size: 11px }
.cart-options strong { color: #514842; font-weight: 600 }
.cart-remove { padding: 0; border: 0; color: #94615d; background: transparent; cursor: pointer; font-size: 11px; text-decoration: underline }
.cart-item-price { font-family: var(--serif); font-size: 21px; white-space: nowrap }
.summary-card { position: sticky; top: 24px; padding: 25px; border: 1px solid var(--line); border-radius: 25px; background: #eee6dc }
.summary-card h2 { margin: 0 0 20px; font-family: var(--serif); font-size: 27px; font-weight: 400 }
.summary-line { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid rgba(78,63,53,.1); color: #6f655f; font-size: 13px }
.summary-line.total { margin-top: 5px; border: 0; color: var(--ink); font-family: var(--serif); font-size: 23px }
.summary-cta { width: 100%; min-height: 52px; display: grid; place-items: center; margin-top: 17px; border-radius: 13px; color: #fff; background: var(--rose-dark); font-size: 13px; font-weight: 600 }
.summary-cta:hover { background: #754743 }
.summary-cta.is-disabled { pointer-events: none; opacity: .5 }
.empty-cart { padding: 70px 26px; text-align: center }
.empty-cart h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 34px; font-weight: 400 }
.empty-cart p { color: var(--muted) }
.empty-cart a { display: inline-flex; margin-top: 12px; padding: 12px 18px; border-radius: 12px; color: #fff; background: var(--rose-dark); font-size: 12px }

.checkout-card { padding: clamp(23px,4vw,38px) }
.checkout-section { margin-bottom: 32px }
.checkout-section:last-child { margin-bottom: 0 }
.checkout-section h2 { margin: 0 0 16px; font-family: var(--serif); font-size: 28px; font-weight: 400 }
.checkout-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
.checkout-field { display: grid; gap: 7px }
.checkout-field.full { grid-column: 1/-1 }
.checkout-field label { font-size: 11px; font-weight: 600 }
.checkout-field input, .checkout-field select { height: 49px; padding: 0 13px }
.payment-placeholder { padding: 20px; border: 1px dashed rgba(100,77,64,.3); border-radius: 15px; color: #746a64; background: #faf6ef; font-size: 13px }
.prototype-note { margin: 0 0 20px; padding: 15px 18px; border-radius: 14px; color: #665a51; background: #efe9df; font-size: 12px }
.place-order { width: 100%; min-height: 54px; margin-top: 18px; border: 0; border-radius: 13px; color: #fff; background: var(--rose-dark); font-size: 13px; font-weight: 600; cursor: pointer }
.place-order:disabled { cursor: not-allowed; opacity: .58 }
.checkout-summary-items { display: grid; gap: 12px; margin-bottom: 17px }
.checkout-summary-item { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center }
.checkout-summary-item img { width: 50px; height: 56px; border-radius: 9px; object-fit: cover }
.checkout-summary-item strong { display: block; font-size: 12px }
.checkout-summary-item span { color: var(--muted); font-size: 10px }

@media (max-width: 900px) {
    .product-layout, .included-grid, .cart-layout, .checkout-layout { grid-template-columns: 1fr }
    .product-gallery { position: relative; top: auto }
    .product-gallery-main, .product-gallery-main img { min-height: 520px; height: 520px }
    .personalized-page .product-gallery-main, .personalized-page .product-gallery-main img { min-height: 600px; height: 600px }
    .product-details { padding-top: 0 }
    .summary-card { position: relative; top: auto }
    .curator-grid { grid-template-columns: 1fr }
}

@media (max-width: 640px) {
    .container { width: min(100% - 26px, 1180px) }
    .product-main, .utility-main { padding-top: 92px }
    .product-layout { gap: 32px }
    .product-gallery-main, .product-gallery-main img { min-height: 430px; height: 430px }
    .personalized-page .product-gallery-main, .personalized-page .product-gallery-main img { min-height: 500px; height: 500px }
    .product-gallery-main { border-radius: 25px 25px 62px 25px }
    .gallery-thumb { height: 86px }
    .choice-grid, .included-list, .form-fields, .checkout-fields, .related-grid { grid-template-columns: 1fr }
    .form-field.full, .checkout-field.full { grid-column: auto }
    .choice-legend, .question-title-row { align-items: flex-start; flex-direction: column; gap: 4px }
    .included-section, .questionnaire-shell, .related-products { padding: 58px 0 }
    .cart-action-row { flex-direction: column }
    .quantity-field { width: 100%; height: 48px }
    .cart-item { grid-template-columns: 88px minmax(0,1fr); gap: 13px }
    .cart-item img { width: 88px; height: 100px }
    .cart-item-price { grid-column: 2; }
}

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