@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #f8f6f1;
    color: #1d1b18;
    font-family: DM Sans, sans-serif
}

a {
    text-decoration: none;
    color: inherit
}

.nav {
    height: 76px;
    padding: 0 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd7cc;
    background: #f8f6f1
}

.brand {
    font: 28px 'Playfair Display', serif
}

.nav nav {
    display: flex;
    gap: 24px;
    font-size: 13px
}

.hero {
    min-height: 600px;
    padding: 90px 10%;
    display: grid;
    grid-template-columns:1.2fr .8fr;
    align-items: center;
    background: radial-gradient(circle at 75% 50%, #dfd3c1, transparent 28%)
}

.hero h1 {
    font: 600 clamp(48px, 7vw, 84px)/.98 'Playfair Display', serif;
    max-width: 800px;
    margin: 18px 0
}

.hero p {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.8;
    color: #6b665e
}

.eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    color: #896b3e;
    font-weight: 600
}

.btn {
    margin-left: 10px;
    display: inline-block;
    background: #1d1b18;
    color: white;
    border: 0;
    padding: 14px 22px;
    margin-top: 12px;
    cursor: pointer
}

.orb {
    width: 280px;
    height: 280px;
    border: 1px solid #a98d61;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 85px;
    color: #a98d61;
    box-shadow: 0 0 0 35px #a98d6110, 0 0 0 70px #a98d6108
}

.section {
    max-width: 1400px;
    margin: auto;
    padding: 80px 7%
}

.section h1, .section h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 500
}

.section h1 {
    font-size: 58px
}

.section h2 {
    font-size: 42px
}

.grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 22px
}

.card {
    background: #fff;
    border: 1px solid #e2dcd2
}

.card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover
}

.card-body {
    padding: 20px
}

.card-body h3 {
    font: 500 23px 'Playfair Display', serif
}

.card-body > span {
    font-size: 11px;
    letter-spacing: .15em;
    color: #896b3e
}

.small {
    padding: 9px 14px;
    font-size: 12px
}

.story {
    padding: 100px 15%;
    text-align: center;
    background: #eee8de
}

.story h2 {
    font: 500 50px 'Playfair Display', serif
}

.story p {
    line-height: 1.9;
    color: #6b665e
}

.detail {
    max-width: 1200px;
    margin: 70px auto;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 70px;
    padding: 0 25px
}

.detail-img {
    width: 100%
}

.detail h1 {
    font: 500 56px 'Playfair Display', serif
}

.price {
    font-size: 25px;
    font-weight: 600
}

.facts {
    display: flex;
    gap: 25px;
    padding: 20px 0;
    border-block: 1px solid #ddd7cc
}

.review {
    border-top: 1px solid #ddd7cc;
    padding: 18px 0
}

.muted {
    color: #777
}

.dob-form {
    display: flex;
    gap: 12px;
    margin: 25px 0 60px
}

.dob-form input {
    padding: 14px;
    border: 1px solid #cfc8bd
}

.result {
    display: grid;
    grid-template-columns:260px 1fr;
    gap: 45px;
    background: #fff;
    padding: 30px;
    border: 1px solid #ddd7cc
}

.result img {
    width: 100%
}

.result h2 {
    font-size: 55px
}

.zodiac-strip {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 15px
}

.zodiac-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover
}

.zodiac-strip b, .zodiac-strip small {
    display: block;
    text-align: center;
    margin-top: 7px
}

.cart-row {
    display: grid;
    grid-template-columns:90px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #ddd7cc
}

.cart-row img {
    width: 90px
}

.summary {
    margin: 30px 0 0 auto;
    max-width: 330px
}

.link-btn {
    border: 0;
    background: none;
    text-decoration: underline
}

.form-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
    background: #fff;
    padding: 30px
}

.form-grid label, .form-card label {
    display: grid;
    gap: 7px;
    font-size: 13px
}

.form-grid input, .form-card input, .form-card textarea, .form-card select {
    padding: 12px;
    border: 1px solid #d0c9be
}

.wide {
    grid-column: 1/-1
}

.error {
    padding: 12px;
    background: #f2e0da
}

.empty {
    padding: 60px;
    background: #fff;
    text-align: center
}

.success-page {
    max-width: 700px;
    margin: 100px auto;
    text-align: center;
    padding: 25px
}

.success-page h1 {
    font: 500 52px 'Playfair Display', serif
}

.order-card {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 15px;
    text-align: left;
    background: #fff;
    padding: 25px;
    margin: 30px 0
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .hero, .detail {
        grid-template-columns:1fr
    }

    .orb {
        display: none
    }

    .zodiac-strip {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 600px) {
    .nav {
        padding: 0 18px
    }

    .nav nav {
        gap: 9px;
        font-size: 11px
    }

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

    .section {
        padding: 55px 20px
    }

    .hero {
        padding: 60px 25px
    }

    .hero h1 {
        font-size: 52px
    }

    .detail {
        margin: 30px auto
    }

    .result {
        grid-template-columns:1fr
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .wide {
        grid-column: auto
    }
}
/* =========================
   ASTROLOGY STORY
========================= */

.astrology-story {
    padding: 110px 7%;
    background: #f7f3ed;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.astrology-story-inner {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.astrology-story h2 {
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 500;
    margin: 20px 0 35px;
    letter-spacing: -2px;
}

.astrology-story p {
    max-width: 720px;
    margin: 18px auto;
    font-size: 17px;
    line-height: 1.8;
    opacity: .72;
}


/* =========================
   COLLECTION HEADING
========================= */

.collection-section {
    padding-top: 110px;
}

.collection-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.collection-heading h2 {
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
    font-weight: 500;
    margin: 15px 0 25px;
    letter-spacing: -2px;
}

.collection-heading p {
    font-size: 17px;
    line-height: 1.7;
    max-width: 650px;
    opacity: .65;
}


/* =========================
   PRODUCT CARD
========================= */

.card {
    overflow: hidden;
}

.card-image {
    overflow: hidden;
}

.card-image img {
    width: 100%;
    display: block;
    transition: transform .6s ease;
}

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

.zodiac-name {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    margin-bottom: 10px;
    opacity: .6;
}

.card-body h3 {
    margin-bottom: 15px;
}


/* =========================
   ZODIAC DESCRIPTION
========================= */

.zodiac-description {
    font-size: 14px;
    line-height: 1.7;
    opacity: .65;
    margin-bottom: 20px;
}


/* =========================
   PLANET / ELEMENT
========================= */

.zodiac-meta {
    display: flex;
    gap: 35px;
    padding: 18px 0;
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.zodiac-meta span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zodiac-meta small {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 9px;
    opacity: .5;
}

.zodiac-meta strong {
    font-size: 13px;
    font-weight: 500;
}


/* =========================
   BRACELET STORY
========================= */

.bracelet-story {
    padding: 20px 0 5px;
}

.bracelet-story .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.bracelet-story p {
    font-size: 13px;
    line-height: 1.65;
    opacity: .62;
}


/* =========================
   CARD FOOTER
========================= */

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
}

.card-footer b {
    font-size: 17px;
}
/* =====================================================
   CHECKOUT PAGE
===================================================== */

.checkout-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 90px 30px;
}

/* Center the checkout heading */
.checkout-page > .eyebrow,
.checkout-page > h1,
.checkout-page > .muted {
    display: block;
    text-align: center;
}

.checkout-page > h1 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.checkout-page > .muted {
    margin-bottom: 45px;
}


/* =====================================================
   CHECKOUT FORM
===================================================== */

.checkout-page .form-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 45px;
    box-sizing: border-box;
}


/* Section headings */

.checkout-page .form-card h2 {
    margin-top: 10px;
    margin-bottom: 28px;
}


/* Labels */

.checkout-page .form-card label {
    display: block;
    margin-bottom: 24px;
}


/* Inputs */

.checkout-page .form-card input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 14px 16px;
}


/* City + State */

.checkout-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 0;
}


/* Optional text */

.checkout-page .optional {
    font-size: 0.75rem;
    color: #888;
    margin-left: 5px;
}


/* Error */

.checkout-page .error {
    margin: 20px 0;
}


/* Button */

.checkout-page .form-card .btn {
    margin-top: 10px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .checkout-page {
        padding: 60px 20px;
    }

    .checkout-page .form-card {
        padding: 30px 22px;
    }

    .checkout-page .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}
.astrology-input {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 30px;
    max-width: 620px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.input-group label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
}

.input-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}

.input-group input:focus {
    border-color: #a1844f;
}

.required {
    color: #a1844f;
}

.optional {
    font-size: 0.7rem;
    color: #999;
    text-transform: none;
    letter-spacing: 0;
}
/* =========================================================
   PREMIUM RESULT MODAL
========================================================= */

.result-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(20, 18, 22, 0.58);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    animation: resultOverlayIn 0.35s ease;
}


/* =========================================================
   MODAL
========================================================= */

.result-modal {
    position: relative;

    width: min(1000px, 95vw);
    max-height: 90vh;

    display: grid;
    grid-template-columns: 45% 55%;

    overflow: hidden;

    background: #fdfbf7;

    box-shadow:
            0 35px 100px rgba(0, 0, 0, 0.35);

    animation: resultModalIn 0.45s
    cubic-bezier(.2, .8, .2, 1);

}


/* =========================================================
   IMAGE
========================================================= */

.result-image {
    position: relative;

    min-height: 600px;

    overflow: hidden;

    background: #e8dfd1;
}

.result-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
            linear-gradient(
                    to bottom,
                    transparent 45%,
                    rgba(0,0,0,0.25)
            );
}

.result-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.8s ease;
}

.result-modal:hover .result-image img {
    transform: scale(1.035);
}


/* =========================================================
   CONTENT
========================================================= */

.result-content {
    padding: 65px 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow-y: auto;
}

.result-content .eyebrow {
    color: #a1844f;

    letter-spacing: .22em;

    font-size: 11px;
}

.result-label {
    margin-top: 28px;

    color: #999;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.result-content h2 {
    margin: 10px 0 25px;

    font-family: Georgia, serif;

    font-size: clamp(3.5rem, 6vw, 5.5rem);

    line-height: .95;

    font-weight: 400;

    color: #17151b;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.result-description {
    color: #666;

    font-size: 1rem;

    line-height: 1.9;

    max-width: 500px;

    margin-bottom: 25px;
}


/* =========================================================
   META
========================================================= */

.result-meta {
    display: flex;

    gap: 0;

    margin: 5px 0 28px;

    border-top: 1px solid #e3ded5;

    border-bottom: 1px solid #e3ded5;

    padding: 18px 0;
}

.result-meta div {
    min-width: 120px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.result-meta div + div {
    border-left: 1px solid #e3ded5;

    padding-left: 25px;
}

.result-meta small {
    color: #999;

    font-size: 9px;

    letter-spacing: .16em;
}

.result-meta strong {
    color: #806638;

    font-size: 14px;

    font-weight: 500;
}


/* =========================================================
   STORY
========================================================= */

.result-story {
    color: #777;

    font-size: .9rem;

    line-height: 1.8;

    margin-bottom: 25px;
}


/* =========================================================
   BUTTON
========================================================= */

.result-btn {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: fit-content;

    min-width: 245px;

    padding: 15px 20px;

    background: #1d1b18;

    color: white;

    font-size: 13px;

    letter-spacing: .03em;

    transition:
            transform .25s ease,
            background .25s ease;
}

.result-btn span {
    margin-left: 25px;

    color: #d7bb7c;

    font-weight: 600;
}

.result-btn:hover {
    background: #302c27;

    transform: translateY(-2px);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.result-close {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 20;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(0,0,0,.12);

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #222;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;

    transition:
            transform .3s ease,
            background .3s ease;
}

.result-close:hover {
    background: #fff;

    transform: rotate(90deg);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes resultOverlayIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes resultModalIn {

    from {
        opacity: 0;

        transform:
                translateY(35px)
                scale(.96);
    }

    to {
        opacity: 1;

        transform:
                translateY(0)
                scale(1);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .result-overlay {
        padding: 20px;
    }

    .result-modal {
        width: min(700px, 94vw);

        grid-template-columns: 1fr;

        max-height: 92vh;

        overflow-y: auto;
    }

    .result-image {
        min-height: 320px;

        height: 320px;
    }

    .result-content {
        padding: 45px;
    }

    .result-content h2 {
        font-size: 4rem;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .result-overlay {
        padding: 12px;
    }

    .result-modal {
        width: 100%;

        max-height: 94vh;

        grid-template-columns: 1fr;

        border-radius: 2px;
    }

    .result-image {
        height: 240px;

        min-height: 240px;
    }

    .result-content {
        padding: 35px 25px 40px;
    }

    .result-content h2 {
        font-size: 3.4rem;
    }

    .result-description {
        font-size: .92rem;

        line-height: 1.75;
    }

    .result-story {
        font-size: .85rem;
    }

    .result-close {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;
    }

    .result-btn {
        width: 100%;

        min-width: 0;
    }

}
/* =====================================================
   CUSTOMER ID
   ===================================================== */

.customer-id {
    color: #999;
    font-size: 12px;
    font-family: monospace;
    white-space: nowrap;
}
/* =====================================================
   FILTER ROW
   ===================================================== */

.filter-row {
    background: #ffffff;
}

.filter-row th {
    padding: 10px 20px;

    border-bottom: 1px solid #e5dfd5;

    background: #ffffff;
}


/* =====================================================
   COLUMN FILTER
   ===================================================== */

.column-filter {
    width: 100%;
    box-sizing: border-box;

    padding: 8px 10px;

    border: 1px solid #ddd7cd;

    background: #faf9f6;

    color: #444;

    font-family: Arial, sans-serif;
    font-size: 11px;

    outline: none;

    transition:
            border-color 0.2s ease,
            background 0.2s ease;
}

.column-filter:focus {
    border-color: #a1844f;
    background: #ffffff;
}

.column-filter::placeholder {
    color: #aaa39a;
}


/* =====================================================
   CUSTOMER ID
   ===================================================== */

.customer-id {
    color: #777168;

    font-family: monospace;

    font-size: 12px;
}