/* =========================================================
   GOLD COMPANY
   GLOBAL DESIGN SYSTEM
========================================================= */

:root {
    --cream: #fbfbf8;
    --cream-deep: #f3f3ee;

    --white: #ffffff;

    --blush: #6f8068;
    --blush-light: #f2f2ed;
    --blush-dark: #52604d;

    --brown: #2d302b;
    --brown-soft: #5d6259;

    --gold: #6f8068;

    --text: #2d302b;
    --muted: #747970;

    --border: #dedfd8;

    --danger: #9b4646;

    --shadow-soft:
        0 14px 40px rgba(52, 41, 36, 0.08);

    --shadow-card:
        0 8px 25px rgba(52, 41, 36, 0.07);

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 22px;

    --content-width: 1180px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        var(--cream);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    line-height: 1.65;
}


a {
    color:
        var(--text);

    text-decoration:
        none;

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}


a:hover {
    color:
        var(--blush-dark);
}


img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
    margin-top: 0;

    color:
        var(--brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        400;
}


h1 {
    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        24px;
}


h2 {
    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    line-height:
        1.15;

    margin-bottom:
        20px;
}


h3 {
    font-size:
        23px;

    margin-bottom:
        14px;
}


p {
    margin-top:
        0;

    margin-bottom:
        16px;
}


/* =========================================================
   GLOBAL HEADER
========================================================= */

header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        color-mix(in srgb, var(--cream) 92%, transparent);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(
            52,
            41,
            36,
            0.08
        );
}


header nav {
    width:
        min(
            calc(100% - 48px),
            var(--content-width)
        );

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


header nav a {
    font-size:
        13px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


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

main {
    width:
        min(
            calc(100% - 48px),
            var(--content-width)
        );

    min-height:
        calc(100vh - 200px);

    margin:
        0 auto;

    padding:
        90px 0 120px;
}


main > section:first-child {
    margin-top:
        0;
}


section {
    margin-bottom:
        64px;
}


/* =========================================================
   DIVIDERS
========================================================= */

hr {
    border:
        0;

    border-top:
        1px solid
        var(--border);

    margin:
        55px 0;
}


/* =========================================================
   PRODUCT / CONTENT CARDS
========================================================= */

article {
    padding:
        30px;

    margin-bottom:
        24px;

    background:
        rgba(
            255,
            253,
            251,
            0.65
        );

    border:
        1px solid
        rgba(
            52,
            41,
            36,
            0.08
        );

    border-radius:
        var(--radius-medium);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


article:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-card);
}


/* =========================================================
   BUTTONS
========================================================= */

button,
input[type="submit"] {
    border:
        1px solid
        var(--brown);

    border-radius:
        0;

    background:
        var(--brown);

    color:
        var(--white);

    padding:
        13px 22px;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


button:hover,
input[type="submit"]:hover {
    background:
        var(--blush-dark);

    border-color:
        var(--blush-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   TEXT LINKS THAT ACT LIKE ACTIONS
========================================================= */

main a {
    font-weight:
        500;
}


article > a,
section > a {
    display:
        inline-block;

    padding-bottom:
        3px;

    border-bottom:
        1px solid
        var(--brown);
}


/* =========================================================
   FORMS
========================================================= */

form {
    max-width:
        680px;
}


label {
    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--brown-soft);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-small);

    background:
        rgba(
            255,
            253,
            251,
            0.8
        );

    color:
        var(--text);

    font:
        inherit;

    outline:
        none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--blush-dark);

    box-shadow:
        0 0 0 3px
        rgba(
            175,
            133,
            138,
            0.12
        );
}


textarea {
    resize:
        vertical;
}


input[type="radio"] {
    margin-right:
        8px;
}


/* =========================================================
   TABLES
========================================================= */

table {
    width:
        100%;

    border-collapse:
        collapse;

    background:
        var(--white);

    border:
        1px solid
        var(--border) !important;

    box-shadow:
        var(--shadow-card);
}


thead {
    background:
        var(--brown);

    color:
        var(--white);
}


th {
    padding:
        15px 16px;

    border:
        0 !important;

    text-align:
        left;

    font-size:
        11px;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


td {
    padding:
        16px;

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--border) !important;

    vertical-align:
        middle;
}


tbody tr:last-child td {
    border-bottom:
        0 !important;
}


tbody tr:hover {
    background:
        var(--cream);
}


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

footer {
    padding:
        50px 24px;

    background:
        var(--brown);

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    text-align:
        center;
}


footer p {
    margin:
        0;

    font-size:
        12px;

    letter-spacing:
        0.05em;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background:
        var(--blush);

    color:
        var(--brown);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
    max-width: 850px
) {

    header nav {
        width:
            calc(100% - 32px);

        min-height:
            68px;

        gap:
            15px;

        overflow-x:
            auto;
    }


    header nav a {
        font-size:
            11px;
    }


    header nav a:first-child {
        font-size:
            16px;
    }


    main {
        width:
            calc(100% - 32px);

        padding:
            60px 0 80px;
    }


    h1 {
        letter-spacing:
            -1px;
    }


    table {
        display:
            block;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }


    article {
        padding:
            22px;
    }

}

/* =========================================================
   HOME PAGE
========================================================= */

.home-page {
    margin-top: -55px;
}


/* HERO */

.home-hero {
    min-height: 660px;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

    gap: 60px;

    margin-bottom: 100px;
}


.home-hero-copy {
    max-width: 720px;
}


.eyebrow {
    margin-bottom: 24px;

    color: var(--blush-dark);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.home-hero h1 {
    max-width: 760px;

    font-size:
        clamp(
            58px,
            7vw,
            96px
        );

    letter-spacing: -0.045em;
}


.hero-description {
    max-width: 570px;

    margin-top: 28px;

    color: var(--brown-soft);

    font-size: 17px;
    line-height: 1.8;
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 38px;
}


/* BUTTON LINKS */

.button-primary,
.button-secondary {
    display: inline-flex !important;

    min-height: 48px;

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

    padding: 0 26px !important;

    border: 1px solid var(--brown) !important;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.button-primary {
    background: var(--brown);

    color: var(--white) !important;
}


.button-primary:hover {
    background: var(--blush-dark);

    border-color: var(--blush-dark) !important;
}


.button-secondary {
    background: transparent;

    color: var(--brown);
}


.button-secondary:hover {
    background: var(--cream-deep);
}


/* HERO VISUAL */

.home-hero-visual {
    position: relative;

    min-height: 500px;

    display: flex;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 44%,
            color-mix(in srgb, var(--site-accent, var(--blush)) 4%, #ffffff) 0%,
            #f1f2ed 45%,
            #e8e9e3 100%
        );

    border-radius: 48% 48% 4% 4%;
}


.hero-emblem {
    position: relative;

    z-index: 3;

    width: 245px;
    height: 245px;

    display: flex;

    flex-direction: column;

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

    border: 1px solid
        rgba(52, 41, 36, 0.36);

    border-radius: 50%;

    background:
        rgba(
            255,
            253,
            251,
            0.2
        );

    backdrop-filter: blur(4px);
}


.hero-emblem-small {
    margin-bottom: 14px;

    font-size: 9px;

    letter-spacing: 0.3em;
}


.hero-emblem-main {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 50px;

    line-height: 0.9;
}


.hero-emblem-placeholder {
    max-width: 170px;

    color: var(--brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: center;
}


.hero-emblem-divider {
    margin: 7px 0;

    color: var(--gold);

    font-family: Georgia, serif;

    font-size: 21px;
}


.jewelry-orbit {
    position: absolute;

    border:
        1px solid
        rgba(
            52,
            41,
            36,
            0.18
        );

    border-radius: 50%;
}


.orbit-one {
    width: 375px;
    height: 375px;
}


.orbit-two {
    width: 470px;
    height: 470px;

    transform: rotate(18deg);

    border-style: dashed;
}


/* INFORMATION STRIP */

.home-strip {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-bottom: 140px;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}


.home-strip > div {
    padding: 35px 32px;

    border-right:
        1px solid
        var(--border);
}


.home-strip > div:last-child {
    border-right: 0;
}


.home-strip span {
    display: block;

    margin-bottom: 22px;

    color: var(--blush-dark);

    font-family: Georgia, serif;
}


.home-strip strong {
    display: block;

    margin-bottom: 9px;

    color: var(--brown);

    font-family: Georgia, serif;

    font-size: 19px;

    font-weight: 400;
}


.home-strip p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* COLLECTION */

.home-collection {
    margin-bottom: 150px;
}


.section-heading {
    max-width: 720px;

    margin-bottom: 55px;
}


.section-heading h2 {
    font-size:
        clamp(
            40px,
            5vw,
            66px
        );

    letter-spacing: -0.03em;
}


.collection-grid {
    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    grid-template-rows:
        repeat(2, 260px);

    gap: 18px;
}


.collection-card {
    position: relative;

    display: flex !important;

    flex-direction: column;

    justify-content: space-between;

    padding: 35px !important;

    overflow: hidden;

    border: 0 !important;

    background: #f2f2ed;

    color: var(--brown);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.collection-card-large {
    grid-row: 1 / 3;

    background:
        var(--brown);

    color: var(--white);
}


.collection-card:hover {
    transform: translateY(-4px);

    background: color-mix(in srgb, var(--site-accent, var(--blush)) 7%, #f4f4ef);
}


.collection-card-large:hover {
    background: #232621;
}


.collection-card p {
    margin-bottom: 8px;

    color: inherit;

    opacity: 0.65;

    font-size: 11px;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.collection-card h3 {
    margin-bottom: 20px;

    color: inherit;

    font-size: 34px;
}


.collection-number {
    font-family: Georgia, serif;

    font-size: 13px;

    opacity: 0.6;
}


.collection-link {
    font-size: 12px;

    letter-spacing: 0.04em;
}


/* BRAND STATEMENT */

.home-statement {
    display: grid;

    grid-template-columns:
        0.32fr 0.68fr;

    gap: 80px;

    padding:
        100px 80px;

    margin-bottom: 140px;

    background:
        var(--cream-deep);
}


.statement-label {
    padding-top: 9px;

    color: var(--blush-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.statement-content {
    max-width: 720px;
}


.statement-content h2 {
    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    letter-spacing: -0.03em;
}


.statement-content p {
    max-width: 590px;

    margin:
        30px 0;

    color: var(--brown-soft);

    font-size: 16px;

    line-height: 1.8;
}


.text-link {
    border-bottom:
        1px solid
        var(--brown) !important;

    font-size: 12px;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* FINAL CTA */

.home-final {
    padding: 100px 30px;

    text-align: center;
}


.home-final h2 {
    margin-bottom: 35px;

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );
}


/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .home-hero {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 45px;
    }


    .home-hero-visual {
        min-height: 430px;
    }


    .home-strip {
        grid-template-columns: 1fr;
    }


    .home-strip > div {
        border-right: 0;

        border-bottom:
            1px solid
            var(--border);
    }


    .home-strip > div:last-child {
        border-bottom: 0;
    }


    .collection-grid {
        display: flex;

        flex-direction: column;
    }


    .collection-card {
        min-height: 270px;
    }


    .collection-card-large {
        min-height: 410px;
    }


    .home-statement {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            65px 35px;
    }

}

/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

.product-detail-page {
    width: min(1280px, calc(100% - 48px));

    margin: 0 auto;

    padding: 42px 0 100px;
}


.product-detail-back {
    margin-bottom: 28px;
}


.product-detail-back a {
    color: #746b67;

    font-size: 12px;

    text-decoration: none;

    letter-spacing: 0.04em;
}


.product-detail-back a:hover {
    color: #222;
}


/* =========================================================
   PRODUCT HERO
========================================================= */

.product-detail-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);

    gap: 70px;

    align-items: start;
}


.product-detail-image {
    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f3f0ed;
}


.product-detail-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.product-detail-no-image {
    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #8c827d;
}


.product-detail-no-image span {
    font-size: 10px;

    letter-spacing: 0.18em;
}


.product-detail-no-image p {
    margin-top: 12px;

    font-size: 13px;
}


.product-detail-info {
    position: sticky;

    top: 110px;

    padding-top: 22px;
}


.product-detail-category {
    margin-bottom: 16px;

    color: #8a817b;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.product-detail-info h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(36px, 4vw, 58px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.03em;
}


.product-detail-sku {
    margin-top: 14px;

    color: #9a918b;

    font-size: 11px;

    letter-spacing: 0.08em;
}


.product-detail-price {
    margin-top: 32px;

    font-size: 20px;

    font-weight: 500;
}


.product-detail-stock {
    display: inline-block;

    margin-top: 14px;

    padding: 7px 11px;

    background: #f0ece9;

    color: #6f5d60;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.product-detail-soldout {
    display: inline-block;

    margin-top: 14px;

    color: #9c5555;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.product-detail-description {
    margin-top: 34px;

    color: #59514d;

    font-size: 14px;

    line-height: 1.9;

    white-space: pre-line;
}


.product-detail-meta {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 38px;

    padding: 22px 0;

    border-top: 1px solid #ddd6d1;

    border-bottom: 1px solid #ddd6d1;
}


.product-detail-meta div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.product-detail-meta span {
    color: #9a918b;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.product-detail-meta strong {
    font-size: 11px;

    font-weight: 500;
}


.product-detail-note {
    margin-top: 18px;

    color: #978d87;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   AVAILABLE PIECES
========================================================= */

.product-pieces-section {
    margin-top: 100px;
}


.product-section-heading {
    max-width: 640px;

    margin-bottom: 34px;
}


.product-section-heading > span {
    color: #9a918b;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.product-section-heading h2 {
    margin: 9px 0 10px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    font-weight: 400;
}


.product-section-heading p {
    margin: 0;

    color: #766d68;

    font-size: 13px;

    line-height: 1.7;
}


.product-piece-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.product-piece-card {
    padding: 24px;

    background: #fff;

    border: 1px solid #e2dcd8;
}


.product-piece-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 20px;

    border-bottom: 1px solid #eee9e6;
}


.product-piece-purity {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;
}


.product-piece-color {
    margin-left: 7px;

    color: #8b817c;

    font-size: 10px;

    text-transform: uppercase;
}


.product-piece-available {
    color: #778273;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.product-piece-details {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    padding: 24px 0;
}


.product-piece-details div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.product-piece-details span {
    color: #9a918b;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.product-piece-details strong {
    font-size: 12px;

    font-weight: 500;
}


.product-piece-bottom {
    padding-top: 20px;

    border-top: 1px solid #eee9e6;
}


.product-piece-price {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 16px;
}


.product-piece-price span {
    color: #928983;

    font-size: 9px;

    text-transform: uppercase;
}


.product-piece-price strong {
    font-size: 17px;

    font-weight: 500;
}


.product-add-cart-button {
    width: 100%;

    min-height: 46px;

    border: 0;

    background: #2f2a27;

    color: #fff;

    cursor: pointer;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.product-add-cart-button:hover {
    background: #6f5d60;
}


.product-add-cart-button:active {
    transform: translateY(1px);
}


/* =========================================================
   SOLD OUT
========================================================= */

.product-soldout-state {
    padding: 70px 30px;

    text-align: center;

    background: #f5f2f0;
}


.product-soldout-state > span {
    color: #9a918b;

    font-size: 9px;

    letter-spacing: 0.14em;
}


.product-soldout-state h3 {
    margin: 12px 0 8px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 26px;

    font-weight: 400;
}


.product-soldout-state p {
    color: #817772;

    font-size: 12px;
}


.product-back-shop-button {
    display: inline-flex;

    margin-top: 18px;

    padding: 13px 22px;

    background: #2f2a27;

    color: white;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .product-detail-hero {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .product-detail-info {
        position: static;

        padding-top: 0;
    }


    .product-piece-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .product-detail-page {
        width: min(
            100% - 28px,
            1280px
        );

        padding-top: 25px;
    }


    .product-detail-meta {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .product-piece-grid {
        grid-template-columns: 1fr;
    }


    .product-pieces-section {
        margin-top: 65px;
    }

}

/* =========================================================
   GLOBAL STOREFRONT HEADER
========================================================= */

.site-header {
    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #eee9e6;

    position: relative;

    z-index: 100;
}


.site-nav {
    width: min(
        1400px,
        calc(100% - 60px)
    );

    min-height: 76px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(180px, 1fr);

    align-items: center;

    gap: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.site-brand {
    display: flex;

    align-items: center;

    justify-content: flex-start;
}


.site-brand a {
    display: inline-flex;

    align-items: center;

    color: #222;

    text-decoration: none;
}


.site-brand-text {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.site-brand-logo {
    display: block;

    width: auto;

    max-width: 180px;

    height: 38px;

    object-fit: contain;
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.site-main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;
}


.site-main-nav a {
    color: #49413d;

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition: opacity 0.2s ease;
}


.site-main-nav a:hover {
    opacity: 0.55;
}


/* =========================================================
   ACTIONS
========================================================= */

.site-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 19px;
}


.site-actions a {
    color: #2f2926;

    text-decoration: none;
}


.site-icon-link,
.site-cart-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 36px;
}


.site-icon {
    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   CART BADGE
========================================================= */

.cart-count-badge {
    position: absolute;

    top: 1px;

    right: -5px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 16px;

    height: 16px;

    padding: 0 4px;

    border-radius: 999px;

    background: #b34d4d;

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   ADMIN / LOGOUT
========================================================= */

.site-admin-link,
.site-logout-link {
    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.site-logout-link {
    color: #8c827d !important;
}


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

.site-footer {
    padding: 40px 24px;

    text-align: center;

    border-top: 1px solid #eee9e6;

    color: #8b817c;

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width: 760px) {

    .site-nav {
        width: calc(100% - 28px);

        min-height: 68px;

        grid-template-columns:
            1fr auto;

        gap: 16px;
    }


    .site-main-nav {
        display: none;
    }


    .site-brand-logo {
        max-width: 145px;

        height: 32px;
    }


    .site-actions {
        gap: 12px;
    }


    .site-admin-link,
    .site-logout-link {
        display: none;
    }

}

/* =========================================================
   STOREFRONT HEADER V2
========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background: #fff;

    border-bottom: 1px solid #eee9e6;
}


.site-nav {
    width: min(
        1500px,
        calc(100% - 60px)
    );

    min-height: 72px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 38px;
}


/* =========================================================
   BRAND
========================================================= */

.site-brand {
    flex: 0 0 auto;
}


.site-brand a {
    display: flex;

    align-items: center;

    text-decoration: none;

    color: #221d1b;
}


.site-brand-text {
    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.11em;

    white-space: nowrap;
}


.site-brand-logo {
    width: auto;

    max-width: 170px;

    height: 36px;

    object-fit: contain;
}


/* =========================================================
   NAV
========================================================= */

.store-nav {
    display: flex;

    align-items: stretch;

    align-self: stretch;

    gap: 30px;

    flex: 1;

    min-width: 0;
}


.store-nav-item {
    display: flex;

    align-items: center;

    position: static;
}


.store-nav-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    color: #3e3733;

    text-decoration: none;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    white-space: nowrap;

    cursor: pointer;
}


.store-nav-link:hover {
    color: #8d7477;
}



.nav-chevron {
    font-size: 8px;

    opacity: 0.65;

    transition: transform 0.2s ease;
}


.mega-menu-parent:hover .nav-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu {
    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #fff;

    border-top: 1px solid #eee9e6;

    border-bottom: 1px solid #e7e0dc;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-5px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}


.mega-menu-parent:hover > .mega-menu,
.mega-menu-parent:focus-within > .mega-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.mega-menu-inner {
    width: min(
        1500px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    padding: 34px 0;
}


/* =========================================================
   CATEGORY MEGA MENU
========================================================= */

.category-mega-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 420px);

    gap: 60px;

    min-height: 310px;
}


.category-mega-content {
    display: grid;

    grid-template-columns:
        220px 1fr;

    gap: 80px;
}


.category-mega-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.mega-menu-label {
    margin-bottom: 5px;

    color: #817772;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.category-mega-column a {
    color: #4a413d;

    font-size: 13px;

    text-decoration: none;
}


.category-mega-column a:hover {
    color: #9a7479;
}


.mega-menu-all-link {
    font-weight: 700;
}


.category-mega-image {
    position: relative;

    display: block;

    height: 310px;

    overflow: hidden;

    color: #fff;

    text-decoration: none;
}


.category-mega-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}


.category-mega-image:hover img {
    transform: scale(1.025);
}


.category-mega-image-text {
    position: absolute;

    left: 24px;

    bottom: 22px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    text-shadow:
        0 1px 10px rgba(0, 0, 0, 0.32);
}


.category-mega-image-text strong {
    font-size: 16px;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.category-mega-image-text span {
    font-size: 11px;

    text-decoration: underline;
}


/* =========================================================
   SHOP MEGA MENU
========================================================= */

.mega-shop-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}


.mega-shop-heading > span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.mega-shop-heading a {
    color: #6f6460;

    font-size: 10px;

    text-decoration: none;
}


.mega-shop-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 16px;
}


.mega-shop-card {
    color: #332c29;

    text-decoration: none;

    min-width: 0;
}


.mega-shop-image {
    aspect-ratio: 1 / 1;

    overflow: hidden;

    margin-bottom: 10px;

    background: #f2eeeb;
}


.mega-shop-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.mega-shop-card:hover img {
    transform: scale(1.035);
}


.mega-shop-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #9b918c;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.mega-shop-card > span {
    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   MORE
========================================================= */

.more-menu-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 20px;
}


.more-menu-category {
    color: #3d3531;

    text-decoration: none;
}


.more-menu-image {
    aspect-ratio: 4 / 3;

    margin-bottom: 10px;

    overflow: hidden;

    background: #f2efed;
}


.more-menu-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.more-menu-category strong {
    display: block;

    font-size: 12px;
}


.more-menu-category > span {
    display: block;

    margin-top: 4px;

    color: #938984;

    font-size: 9px;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.site-actions {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-left: auto;
}


.site-icon-link,
.site-cart-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 42px;

    color: #2e2926;
}


.site-icon {
    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

@media (max-width: 1000px) {

    .store-nav {
        gap: 18px;
    }


    .store-nav-link {
        font-size: 11px;
    }

}


@media (max-width: 820px) {

    .site-nav {
        width: calc(100% - 28px);

        min-height: 66px;

        gap: 15px;
    }


    .store-nav {
        display: none;
    }


    .site-actions {
        margin-left: auto;
    }

}

/* =========================================================
   STOREFRONT SEARCH
========================================================= */

.site-search-button {
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.site-search-panel {
    width: 100%;

    background: #fff;

    border-top: 1px solid #eee9e6;

    border-bottom: 1px solid #ded7d3;
}


.site-search-inner {
    width: min(
        1500px,
        calc(100% - 60px)
    );

    margin: 0 auto;

    padding: 22px 0;
}


.site-search-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap: 16px;
}


.site-search-input-wrap {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

    border-bottom: 1px solid #bdb4af;
}


.site-search-input-icon {
    flex: 0 0 auto;

    width: 20px;

    height: 20px;

    fill: none;

    stroke: #615854;

    stroke-width: 1.4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.site-search-input-wrap input {
    width: 100%;

    min-height: 48px;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: #2e2825;

    font-family: inherit;

    font-size: 16px;
}


.site-search-input-wrap input::placeholder {
    color: #aaa19c;
}


.site-search-submit {
    min-height: 42px;

    padding: 0 22px;

    border: 1px solid #2f2926;

    background: #2f2926;

    color: #fff;

    cursor: pointer;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.site-search-close {
    width: 42px;

    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #625955;

    cursor: pointer;

    font-size: 27px;

    font-weight: 300;

    line-height: 1;
}


@media (max-width: 700px) {

    .site-search-inner {
        width: calc(100% - 28px);
    }


    .site-search-form {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .site-search-submit {
        display: none;
    }

}

/* =========================================================
   SHOP PAGE
========================================================= */

main:has(.shop-page-header) {
    padding-top: 0;
}

.shop-page-header {
    width: min(
        1500px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    padding: 38px 0 28px;
}


.shop-page-eyebrow {
    margin: 0 0 8px;

    color: #948984;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.16em;
}


.shop-page-header h1 {
    margin: 0;

    color: #292320;

    font-size: clamp(
        32px,
        4vw,
        52px
    );

    font-weight: 400;
}


.shop-page-header > div > p:last-child {
    margin: 10px 0 0;

    color: #817773;

    font-size: 12px;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.shop-products-section {
    width: min(
        1500px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    padding: 0 0 80px;
}


.shop-product-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 42px 22px;
}


.shop-product-card {
    min-width: 0;
}


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

.shop-product-image-link {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f3f0ee;
}


.shop-product-image {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        opacity 0.4s ease,
        transform 0.55s ease;
}


/* MAIN */

.shop-product-image-main {
    z-index: 1;

    opacity: 1;
}


/* LIFESTYLE */

.shop-product-image-hover {
    z-index: 2;

    opacity: 0;
}


/* =========================================================
   HOVER IMAGE SWAP
========================================================= */

.shop-product-image-link.has-hover-image:hover
.shop-product-image-main {
    opacity: 0;
}


.shop-product-image-link.has-hover-image:hover
.shop-product-image-hover {
    opacity: 1;

    transform: scale(1.02);
}


/* If only one image exists */

.shop-product-image-link:not(.has-hover-image):hover
.shop-product-image-main {
    transform: scale(1.02);
}


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

.shop-product-image-empty {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #a19691;
}


.shop-product-image-empty span {
    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.1em;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.shop-product-info {
    padding-top: 13px;
}


.shop-product-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 7px;

    color: #958985;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.shop-product-name {
    display: inline-block;

    color: #322b28;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;
}


.shop-product-name:hover {
    color: #80676b;
}


.shop-product-price {
    margin-top: 5px;

    color: #49403c;

    font-size: 11px;
}


/* =========================================================
   EMPTY SHOP
========================================================= */

.shop-empty-state {
    padding: 100px 20px;

    text-align: center;

    border-top: 1px solid #eee8e4;
}


.shop-empty-state h2 {
    margin: 0 0 10px;

    font-size: 24px;

    font-weight: 400;
}


.shop-empty-state p {
    margin: 0 0 22px;

    color: #8d817c;

    font-size: 12px;
}


.shop-empty-link {
    color: #342d29;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* =========================================================
   SHOP RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .shop-product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .shop-page-header,
    .shop-products-section {
        width: calc(100% - 36px);
    }


    .shop-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px 14px;
    }

}


@media (max-width: 480px) {

    .shop-page-header {
        padding-top: 28px;
    }


    .shop-product-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 3px;
    }

}

/* =========================================================
   PRODUCT DETAIL V2
========================================================= */

.product-detail-page-v2 {
    width: min(
        1440px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    padding: 28px 0 90px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.product-breadcrumb {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 26px;

    color: #9b918c;

    font-size: 9px;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.product-breadcrumb a {
    color: #7c716c;

    text-decoration: none;
}


.product-breadcrumb a:hover {
    color: #352e2b;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.product-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.75fr);

    gap: clamp(
        45px,
        7vw,
        110px
    );

    align-items: start;
}


/* =========================================================
   GALLERY
========================================================= */

.product-gallery {
    min-width: 0;
}


.product-gallery-main {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f3f0ee;
}


.product-gallery-main img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 1;

    transition:
        opacity 0.12s ease;
}


.product-gallery-main img.changing {
    opacity: 0;
}


.product-gallery-empty {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #aaa09a;
}


.product-gallery-empty span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.product-gallery-empty p {
    margin: 7px 0 0;

    font-size: 11px;
}


/* THUMBNAILS */

.product-gallery-thumbnails {
    display: flex;

    gap: 10px;

    margin-top: 12px;
}


.product-gallery-thumbnail {
    width: 76px;

    height: 92px;

    padding: 0;

    overflow: hidden;

    background: #f3f0ee;

    border: 1px solid transparent;

    cursor: pointer;

    opacity: 0.68;
}


.product-gallery-thumbnail img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.product-gallery-thumbnail:hover {
    opacity: 1;
}


.product-gallery-thumbnail.active {
    opacity: 1;

    border-color: #625653;
}


/* =========================================================
   INFORMATION
========================================================= */

.product-detail-info-v2 {
    position: sticky;

    top: 105px;

    padding-top: 12px;
}


.product-detail-collection {
    margin-bottom: 13px;

    color: #8f827d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.product-detail-info-v2 h1 {
    margin: 0;

    color: #27211f;

    font-size: clamp(
        31px,
        3.2vw,
        48px
    );

    font-weight: 400;

    line-height: 1.08;
}


.product-detail-code {
    margin-top: 9px;

    color: #aaa09b;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.product-detail-price-v2 {
    margin-top: 26px;

    color: #322b28;

    font-size: 18px;

    font-weight: 500;
}


/* STOCK */

.product-stock-indicator {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 15px;

    color: #617463;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.product-stock-indicator span {
    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #749078;
}


.product-soldout-indicator {
    margin-top: 15px;

    color: #9b6969;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* DESCRIPTION */

.product-description-v2 {
    margin-top: 30px;

    padding-top: 26px;

    border-top: 1px solid #e8e1dd;

    color: #6e6460;

    font-size: 12px;

    line-height: 1.8;

    white-space: pre-line;
}


/* BASIC DETAILS */

.product-basic-details {
    margin-top: 28px;

    border-top: 1px solid #e8e1dd;
}


.product-basic-details > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 13px 0;

    border-bottom: 1px solid #eee9e6;
}


.product-basic-details span {
    color: #9a908b;

    font-size: 9px;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.product-basic-details strong {
    color: #4a403c;

    font-size: 10px;

    font-weight: 600;
}


.product-detail-note-v2 {
    margin-top: 19px;

    color: #9a908b;

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================================
   AVAILABLE PIECES
========================================================= */

.product-pieces-v2 {
    margin-top: 100px;

    padding-top: 55px;

    border-top: 1px solid #e4ddda;
}


.product-pieces-heading-v2 {
    max-width: 580px;

    margin-bottom: 35px;
}


.product-pieces-heading-v2 > span {
    color: #938782;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.product-pieces-heading-v2 h2 {
    margin: 7px 0;

    color: #2e2724;

    font-size: 31px;

    font-weight: 400;
}


.product-pieces-heading-v2 p {
    margin: 0;

    color: #887d78;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   PIECE ROW
========================================================= */

.product-piece-list-v2 {
    border-top: 1px solid #ded7d3;
}


.product-piece-v2 {
    display: grid;

    grid-template-columns:
        minmax(200px, 0.7fr)
        minmax(200px, 1fr)
        minmax(300px, 0.8fr);

    gap: 30px;

    align-items: center;

    padding: 24px 8px;

    border-bottom: 1px solid #e7e0dc;
}


.product-piece-summary {
    display: flex;

    align-items: center;

    gap: 17px;
}


.product-piece-purity-v2 {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    border: 1px solid #d8ceca;

    border-radius: 50%;

    color: #6f5d60;

    font-size: 11px;

    font-weight: 700;
}


.product-piece-summary strong {
    display: block;

    color: #3c3430;

    font-size: 12px;
}


.product-piece-summary span {
    display: block;

    margin-top: 4px;

    color: #a09691;

    font-size: 8px;

    letter-spacing: 0.06em;
}


/* SPECIFICATIONS */

.product-piece-specifications {
    display: flex;

    gap: 45px;
}


.product-piece-specifications span,
.product-piece-purchase span {
    display: block;

    margin-bottom: 5px;

    color: #9d928d;

    font-size: 8px;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.product-piece-specifications strong {
    color: #514743;

    font-size: 10px;

    font-weight: 600;
}


/* PURCHASE */

.product-piece-purchase {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 30px;
}


.product-piece-purchase strong {
    color: #342c29;

    font-size: 13px;

    font-weight: 600;
}


.product-add-cart-v2 {
    min-width: 140px;

    height: 43px;

    padding: 0 22px;

    border: 1px solid #302a27;

    background: #302a27;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.product-add-cart-v2:hover {
    background: #fff;

    color: #302a27;
}


/* =========================================================
   SOLD OUT
========================================================= */

.product-soldout-v2 {
    padding: 70px 20px;

    background: #f7f4f2;

    text-align: center;
}


.product-soldout-v2 > span {
    color: #9d8f8b;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.product-soldout-v2 h3 {
    margin: 10px 0;

    font-size: 22px;

    font-weight: 400;
}


.product-soldout-v2 p {
    color: #8c817c;

    font-size: 11px;
}


.product-soldout-v2 a {
    display: inline-block;

    margin-top: 15px;

    color: #403734;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .product-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.85fr);

        gap: 40px;
    }


    .product-piece-v2 {
        grid-template-columns:
            1fr 1fr;
    }


    .product-piece-purchase {
        grid-column: 1 / -1;

        justify-content: space-between;
    }

}


@media (max-width: 700px) {

    .product-detail-page-v2 {
        width: calc(100% - 32px);

        padding-top: 20px;
    }


    .product-detail-layout {
        grid-template-columns: 1fr;
    }


    .product-detail-info-v2 {
        position: static;

        padding-top: 0;
    }


    .product-pieces-v2 {
        margin-top: 65px;
    }


    .product-piece-v2 {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 24px 0;
    }


    .product-piece-purchase {
        grid-column: auto;

        justify-content: space-between;
    }

}


@media (max-width: 450px) {

    .product-gallery-thumbnails {
        gap: 7px;
    }


    .product-gallery-thumbnail {
        width: 62px;

        height: 76px;
    }


    .product-piece-specifications {
        gap: 25px;
    }


    .product-piece-purchase {
        align-items: stretch;

        flex-direction: column;
    }


    .product-add-cart-v2 {
        width: 100%;
    }

}

/* =========================================================
   PRODUCT PURCHASE PAGE
========================================================= */

.product-buy-page {
    width: min(
        1500px,
        calc(100% - 60px)
    );

    margin: 0 auto;

    padding: 22px 0 85px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.product-buy-breadcrumb {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color: #a09691;

    font-size: 8px;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.product-buy-breadcrumb a {
    color: #817672;

    text-decoration: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.product-buy-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(390px, 0.65fr);

    gap: 48px;

    align-items: start;
}


/* =========================================================
   GALLERY
========================================================= */

.product-buy-main-image {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f4f1ef;
}


.product-buy-main-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity 0.12s ease;
}


.product-buy-no-image {
    color: #9d928d;

    text-align: center;
}


.product-buy-no-image span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.product-buy-no-image p {
    font-size: 11px;
}


/* THUMBNAILS */

.product-buy-thumbnails {
    display: flex;

    gap: 9px;

    margin-top: 10px;
}


.product-buy-thumbnail {
    width: 72px;

    height: 72px;

    padding: 0;

    overflow: hidden;

    background: #f2efed;

    border: 1px solid transparent;

    opacity: 0.65;

    cursor: pointer;
}


.product-buy-thumbnail img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.product-buy-thumbnail.active {
    opacity: 1;

    border-color: #514744;
}


/* =========================================================
   PURCHASE PANEL
========================================================= */

.product-buy-panel {
    position: sticky;

    top: 98px;

    padding: 10px 0 0;
}


.product-buy-category {
    margin-bottom: 9px;

    color: #978b86;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.product-buy-panel h1 {
    margin: 0;

    color: #251f1c;

    font-size: clamp(
        30px,
        3vw,
        44px
    );

    font-weight: 400;

    line-height: 1.08;
}


.product-buy-price {
    margin-top: 11px;

    color: #302926;

    font-size: 18px;

    font-weight: 500;
}


/* =========================================================
   STOCK
========================================================= */

.product-buy-stock {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: #657668;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.product-buy-stock > span {
    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #728b76;
}


.product-buy-soldout {
    margin-top: 13px;

    color: #9b6969;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   BUY FORM
========================================================= */

.product-buy-form {
    margin-top: 28px;
}


.product-size-section {
    margin-bottom: 22px;
}


.product-size-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;
}


.product-size-heading > span {
    color: #3d3531;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.product-size-heading small {
    color: #918681;

    font-size: 9px;
}


.product-size-options {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.product-size-options input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.product-size-options label {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 48px;

    height: 43px;

    padding: 0 13px;

    border: 1px solid #d9d1cd;

    background: #fff;

    color: #443b37;

    cursor: pointer;

    font-size: 11px;
}


.product-size-options label:hover {
    border-color: #6d625d;
}


.product-size-options input:checked + label {
    border-color: #302926;

    background: #302926;

    color: #fff;
}


.product-buy-error {
    margin: 0 0 12px;

    color: #a85050;

    font-size: 10px;
}


.product-buy-cart-button {
    width: 100%;

    height: 52px;

    border: 1px solid #27211f;

    background: #27211f;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

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


.product-buy-cart-button:hover {
    background: #fff;

    color: #27211f;
}


/* =========================================================
   SIMPLE PRODUCT ATTRIBUTES
========================================================= */

.product-buy-benefits {
    display: flex;

    gap: 35px;

    margin-top: 25px;

    padding: 18px 0;

    border-bottom: 1px solid #e5dedb;
}


.product-buy-benefits div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.product-buy-benefits span {
    color: #9c918c;

    font-size: 7px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.product-buy-benefits strong {
    color: #4b423e;

    font-size: 9px;

    font-weight: 600;
}


/* =========================================================
   DETAILS
========================================================= */

.product-buy-details {
    border-bottom: 1px solid #e5dedb;
}


.product-buy-details summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 0;

    list-style: none;

    cursor: pointer;

    color: #37302c;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;
}


.product-buy-details summary::-webkit-details-marker {
    display: none;
}


.product-details-symbol {
    font-size: 17px;

    font-weight: 300;
}


.product-buy-description {
    padding: 0 0 20px;

    color: #716762;

    font-size: 11px;

    line-height: 1.75;

    white-space: pre-line;
}


.product-buy-detail-list {
    padding: 0 0 18px;
}


.product-buy-detail-list > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 7px 0;
}


.product-buy-detail-list span {
    color: #9b908b;

    font-size: 8px;

    text-transform: uppercase;
}


.product-buy-detail-list strong {
    color: #514743;

    font-size: 9px;

    font-weight: 600;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .product-buy-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.8fr);

        gap: 30px;
    }

}


@media (max-width: 700px) {

    .product-buy-page {
        width: calc(100% - 28px);
    }


    .product-buy-layout {
        grid-template-columns: 1fr;
    }


    .product-buy-panel {
        position: static;
    }

}

/* =========================================================
   PRODUCT DETAIL - RIGHT PANEL TEXT POLISH
========================================================= */

/* Category */
.product-buy-category {
    font-size: 11px;
}


/* Price */
.product-buy-price {
    font-size: 20px;
}


/* In Stock */
.product-buy-stock {
    font-size: 10.5px;
}


/* Size heading */
.product-size-heading > span {
    font-size: 13px;
}

.product-size-heading small {
    font-size: 11px;
}


/* Size button */
.product-size-options label {
    font-size: 13px;
}


/* Add To Cart */
.product-buy-cart-button {
    font-size: 12px;
}


/* Material / Color label */
.product-buy-benefits span {
    font-size: 9.5px;
}


/* Material / Color value */
.product-buy-benefits strong {
    font-size: 12px;
}


/* Details & Description / Product Information */
.product-buy-details summary {
    font-size: 13.5px;
}


/* Description text */
.product-buy-description {
    font-size: 13.5px;
}


/* Product Information labels */
.product-buy-detail-list span {
    font-size: 10px;
}


/* Product Information values */
.product-buy-detail-list strong {
    font-size: 11.5px;
}

.product-buy-breadcrumb {
    font-size: 11px;
    font-weight: 600;
    gap: 10px;
}

/* =========================================================
   PRODUCT PAGE - TOP SPACING TIGHTEN
========================================================= */

.product-buy-page {
    padding-top: 1px;
}


.product-buy-breadcrumb {
    margin-bottom: 10px;
}


.product-buy-layout {
    margin-top: 0;
}

/* =========================================================
   STOREFRONT HEADER - BLEND WITH PAGE
========================================================= */

.site-header {
    background: color-mix(in srgb, var(--cream) 84%, transparent);

    border-bottom:
        1px solid rgba(52, 41, 36, 0.07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   PRODUCT PAGE - REDUCE TOP GAP
========================================================= */

main:has(.product-buy-page) {
    padding-top: 22px;
}


.product-buy-page {
    padding-top: 0;
}


.product-buy-breadcrumb {
    margin-top: 0;
    margin-bottom: 10px;
}

/* =========================================================
   STOREFRONT CART
========================================================= */

main:has(.store-cart-page) {
    padding-top: 34px;
}


.store-cart-page {
    width: min(
        1320px,
        calc(100% - 60px)
    );

    margin: 0 auto;

    padding: 0 0 90px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.store-cart-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 20px 0 28px;

    border-bottom: 1px solid
        rgba(65, 51, 45, 0.14);
}


.store-cart-eyebrow {
    margin-bottom: 7px;

    color: #91837d;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.store-cart-header h1 {
    margin: 0;

    color: #281f1b;

    font-size: 42px;

    font-weight: 400;

    line-height: 1;
}


.store-cart-count {
    color: #7f736e;

    font-size: 12px;
}


/* =========================================================
   LAYOUT
========================================================= */

.store-cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(340px, 0.65fr);

    gap: 70px;

    padding-top: 34px;

    align-items: start;
}


/* =========================================================
   CART ITEM
========================================================= */

.store-cart-item {
    display: grid;

    grid-template-columns: 170px 1fr;

    gap: 25px;

    padding: 0 0 28px;

    margin-bottom: 28px;

    border-bottom: 1px solid
        rgba(65, 51, 45, 0.12);
}


.store-cart-image {
    display: block;

    width: 170px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #eee8e4;

    text-decoration: none;
}


.store-cart-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}


.store-cart-image:hover img {
    transform: scale(1.02);
}


.store-cart-image-empty {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #978983;

    font-family: Georgia, serif;

    font-size: 13px;

    letter-spacing: 0.12em;
}


/* =========================================================
   ITEM INFORMATION
========================================================= */

.store-cart-item-info {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.store-cart-item-top {
    display: flex;

    justify-content: space-between;

    gap: 30px;
}


.store-cart-item-category {
    margin-bottom: 7px;

    color: #978983;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.store-cart-item-name {
    color: #2b231f;

    font-family: Georgia, serif;

    font-size: 23px;

    line-height: 1.2;

    text-decoration: none;
}


.store-cart-item-price {
    flex-shrink: 0;

    color: #352c28;

    font-size: 14px;

    font-weight: 500;
}


/* OPTIONS */

.store-cart-item-options {
    display: flex;

    flex-wrap: wrap;

    gap: 0;

    margin-top: 17px;

    color: #6f645f;

    font-size: 11px;
}


.store-cart-item-options span {
    display: flex;

    align-items: center;
}


.store-cart-item-options span:not(:last-child)::after {
    content: "·";

    margin: 0 9px;

    color: #b6aaa4;
}


/* REMOVE */

.store-cart-remove-form {
    margin-top: auto;

    padding-top: 22px;
}


.store-cart-remove {
    padding: 0;

    border: 0;

    border-bottom: 1px solid #796d67;

    background: transparent;

    color: #796d67;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;

    line-height: 1.5;
}


.store-cart-remove:hover {
    color: #251e1b;

    border-color: #251e1b;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.store-cart-summary {
    position: sticky;

    top: 105px;

    padding: 28px;

    background: rgba(
        255,
        255,
        255,
        0.38
    );

    border: 1px solid
        rgba(65, 51, 45, 0.12);
}


.store-cart-summary h2 {
    margin: 0 0 27px;

    color: #2c231f;

    font-family: Georgia, serif;

    font-size: 24px;

    font-weight: 400;
}


.store-cart-summary-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    padding: 9px 0;

    color: #665b56;

    font-size: 11px;
}


.store-cart-summary-row strong {
    color: #352d29;

    font-weight: 500;

    text-align: right;
}


.store-cart-summary-muted {
    color: #918680 !important;

    font-size: 10px;
}


/* TOTAL */

.store-cart-summary-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 17px;

    padding-top: 20px;

    border-top: 1px solid
        rgba(65, 51, 45, 0.16);

    color: #2b231f;
}


.store-cart-summary-total span {
    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;
}


.store-cart-summary-total strong {
    font-size: 16px;

    font-weight: 600;
}


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

.store-cart-checkout-button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 52px;

    margin-top: 27px;

    background: #29211e;

    border: 1px solid #29211e;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-decoration: none;

    text-transform: uppercase;

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


.store-cart-checkout-button:hover {
    background: transparent;

    color: #29211e;
}


.store-cart-continue {
    display: block;

    margin-top: 16px;

    color: #615651;

    font-size: 11px;

    text-align: center;

    text-decoration: underline;

    text-underline-offset: 4px;
}


.store-cart-note {
    margin-top: 25px;

    color: #9a8f89;

    font-size: 9px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   EMPTY CART
========================================================= */

.store-cart-empty {
    padding: 110px 20px 130px;

    text-align: center;
}


.store-cart-empty-title {
    color: #2b231f;

    font-family: Georgia, serif;

    font-size: 30px;
}


.store-cart-empty p {
    margin: 13px 0 28px;

    color: #81756f;

    font-size: 12px;
}


.store-cart-shop-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 210px;

    height: 49px;

    background: #29211e;

    border: 1px solid #29211e;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-decoration: none;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .store-cart-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .store-cart-summary {
        position: static;
    }

}


@media (max-width: 600px) {

    .store-cart-page {
        width: calc(100% - 28px);
    }


    .store-cart-header h1 {
        font-size: 34px;
    }


    .store-cart-item {
        grid-template-columns: 115px 1fr;

        gap: 16px;
    }


    .store-cart-image {
        width: 115px;
    }


    .store-cart-item-top {
        display: block;
    }


    .store-cart-item-price {
        margin-top: 9px;
    }


    .store-cart-summary {
        padding: 22px;
    }

}

/* =========================================================
   CART ITEM - SPACING / CARD POLISH
========================================================= */

.store-cart-item {
    grid-template-columns: 160px minmax(0, 1fr);

    gap: 26px;

    padding: 18px 20px 20px;

    margin-bottom: 24px;

    border: 1px solid
        rgba(65, 51, 45, 0.11);

    border-radius: 14px;

    background: rgba(
        255,
        255,
        255,
        0.45
    );

    overflow: hidden;
}


/* PRODUCT IMAGE */

.store-cart-image {
    width: 160px;

    aspect-ratio: 1 / 1;

    border-radius: 10px;

    overflow: hidden;

    background: #eee8e4;
}


.store-cart-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* PRODUCT INFORMATION */

.store-cart-item-info {
    padding: 3px 0 2px;
}


/* NAME / PRICE ROW */

.store-cart-item-top {
    gap: 40px;
}


.store-cart-item-price {
    padding-right: 2px;

    white-space: nowrap;
}


/* OPTIONS */

.store-cart-item-options {
    margin-top: 20px;
}


/* REMOVE */

.store-cart-remove-form {
    padding-top: 26px;
}

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

main:has(.checkout-page) {
    padding-top: 24px;
}


.checkout-page {
    width: min(
        1320px,
        calc(100% - 64px)
    );

    margin: 0 auto;

    padding-bottom: 100px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.checkout-heading {
    margin-bottom: 26px;
}


.checkout-back {
    display: inline-block;

    color: #82756f;

    font-size: 10px;

    text-decoration: none;
}


.checkout-back:hover {
    color: #2d2521;
}


.checkout-heading h1 {
    margin: 9px 0 0;

    color: #291f1b;

    font-family: Georgia, serif;

    font-size: 36px;

    font-weight: 400;

    line-height: 1.1;
}


/* =========================================================
   ERROR
========================================================= */

.checkout-error {
    max-width: 650px;

    margin-bottom: 20px;

    padding: 12px 14px;

    border: 1px solid #d8b2ad;

    background: #fbf3f2;

    color: #8d4540;

    font-size: 11px;
}


/* =========================================================
   MAIN TWO COLUMN LAYOUT
========================================================= */

.checkout-layout {
    display: grid;

    grid-template-columns:
        minmax(520px, 650px)
        minmax(390px, 430px);

    justify-content: space-between;

    gap: 70px;

    align-items: start;
}


.checkout-form-side {
    width: 100%;

    min-width: 0;
}


/* =========================================================
   LEFT SECTIONS
========================================================= */

.checkout-section {
    margin-bottom: 27px;

    padding-bottom: 27px;

    border-bottom:
        1px solid rgba(63, 48, 42, 0.12);
}


.checkout-section h2 {
    margin: 0 0 16px;

    color: #302622;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.2;
}


.checkout-section h2 > span {
    margin-left: 5px;

    color: #a0948e;

    font-size: 9px;

    font-weight: 400;

    text-transform: uppercase;
}


/* =========================================================
   FORM GRID
========================================================= */

.checkout-fields {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 12px;
}


.checkout-field {
    min-width: 0;
}


.checkout-field-full {
    grid-column: 1 / -1;
}


/* =========================================================
   LABELS
========================================================= */

.checkout-field label {
    display: block;

    margin-bottom: 6px;

    color: #655954;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


.checkout-field label span {
    color: #a15b54;
}


/* =========================================================
   INPUTS
========================================================= */

.checkout-field input,
.checkout-notes-section textarea {
    box-sizing: border-box;

    width: 100%;

    border: 1px solid #d9d0cc;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.55);

    color: #312925;

    font-family: inherit;

    font-size: 12px;

    outline: none;

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


.checkout-field input {
    height: 45px;

    padding: 0 14px;
}


.checkout-notes-section textarea {
    min-height: 82px;

    padding: 12px 14px;

    line-height: 1.5;

    resize: vertical;
}


.checkout-field input:focus,
.checkout-notes-section textarea:focus {
    border-color: #776862;

    background: #fff;
}


.checkout-field input::placeholder,
.checkout-notes-section textarea::placeholder {
    color: #aaa09b;
}


.checkout-save-address {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    color: #655954;
    font-size: 11px;
    cursor: pointer;
}


.checkout-save-address input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #776862;
}


/* =========================================================
   ACCOUNT SECURITY FORMS
========================================================= */

.account-auth-page {
    display: flex;
    justify-content: center;
    padding: 70px 24px 100px;
}


.account-auth-card {
    box-sizing: border-box;
    width: min(100%, 520px);
    padding: 38px;
    border: 1px solid rgba(63, 48, 42, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
}


.account-auth-card h1 {
    margin: 8px 0 14px;
    color: #302622;
    font-family: Georgia, serif;
    font-size: clamp(30px, 5vw, 43px);
    font-weight: 400;
}


.account-auth-card > p {
    color: #6d615c;
    line-height: 1.7;
}


.account-auth-eyebrow {
    color: #9d6e73;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.account-auth-form {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}


.account-auth-form label {
    margin-top: 5px;
    color: #655954;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.account-auth-form input {
    box-sizing: border-box;
    width: 100%;
    height: 47px;
    padding: 0 14px;
    border: 1px solid #d9d0cc;
    border-radius: 7px;
    background: #fff;
    color: #312925;
    font: inherit;
}


.account-auth-form button,
.account-auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 12px;
    padding: 0 20px;
    border: 1px solid #302622;
    background: #302622;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}


.account-auth-back {
    display: inline-block;
    margin-top: 25px;
    color: #655954;
    font-size: 12px;
}


.account-auth-success,
.account-auth-notice,
.account-auth-error {
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 12px;
}


.account-auth-success {
    background: #e9f2eb;
    color: #34543d;
}


.account-auth-notice {
    background: #f4eee5;
    color: #6c553b;
}


.account-auth-error {
    background: #f8e9e7;
    color: #8a3e38;
}


.account-auth-help {
    margin-top: 14px;
    font-size: 12px;
}


/* =========================================================
   COUNTRY / REGION
========================================================= */

.checkout-country {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 3px;

    min-height: 45px;

    box-sizing: border-box;

    margin-bottom: 12px;

    padding: 7px 14px;

    border: 1px solid #d9d0cc;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.55);
}


.checkout-country span {
    color: #938781;

    font-size: 8px;

    line-height: 1;
}


.checkout-country strong {
    color: #352c28;

    font-size: 11px;

    font-weight: 500;
}


/* =========================================================
   SHIPPING / PAYMENT
========================================================= */

.checkout-shipping-option,
.checkout-payment-note {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 15px 16px;

    border: 1px solid #d3c8c3;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.42);
}


.checkout-shipping-option > div,
.checkout-payment-note > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.checkout-shipping-option strong,
.checkout-payment-note strong {
    color: #382f2a;

    font-size: 11px;

    font-weight: 600;
}


.checkout-shipping-option span,
.checkout-payment-note span {
    color: #8c817c;

    font-size: 9px;

    line-height: 1.5;
}


.checkout-free {
    flex-shrink: 0;

    color: #647967 !important;

    font-size: 10px !important;

    letter-spacing: 0.04em;
}


/* =========================================================
   ORDER NOTES
========================================================= */

.checkout-notes-section {
    margin-bottom: 22px;
}


/* =========================================================
   PLACE ORDER
========================================================= */

.checkout-place-order {
    width: 100%;

    height: 51px;

    border: 1px solid #29211e;

    background: #29211e;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.checkout-place-order:hover {
    background: transparent;

    color: #29211e;
}


.checkout-submit-note {
    margin: 11px 0 0;

    color: #998d87;

    font-size: 8.5px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   RIGHT - ORDER SUMMARY
========================================================= */

.checkout-summary {
    position: sticky;

    top: 95px;

    box-sizing: border-box;

    width: 100%;

    padding: 30px 28px;

    border:
        1px solid rgba(63, 48, 42, 0.12);

    background:
        rgba(255, 255, 255, 0.4);
}


.checkout-summary > h2 {
    margin: 0 0 26px;

    color: #302622;

    font-family: Georgia, serif;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.1;
}


/* =========================================================
   SUMMARY PRODUCT ITEM
========================================================= */

.checkout-summary-item {
    display: grid;

    grid-template-columns:
        68px
        minmax(0, 1fr)
        auto;

    gap: 14px;

    align-items: center;

    margin-bottom: 18px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(63, 48, 42, 0.1);
}


.checkout-summary-image {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    overflow: hidden;

    border-radius: 8px;

    background: #eee8e4;
}


.checkout-summary-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.checkout-summary-image span {
    color: #8f817b;

    font-family: Georgia, serif;

    font-size: 12px;
}


.checkout-summary-product {
    min-width: 0;
}


.checkout-summary-product > strong {
    display: block;

    margin-bottom: 7px;

    overflow: hidden;

    color: #302722;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.checkout-summary-product > div {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    color: #8a7d77;

    font-size: 8px;

    line-height: 1.4;
}


.checkout-summary-product
> div
span:not(:last-child)::after {
    content: "·";

    margin-left: 5px;
}


.checkout-summary-price {
    align-self: center;

    color: #3b312d;

    font-size: 10px;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   SUMMARY CALCULATION
========================================================= */

.checkout-summary-calculation {
    padding: 8px 0 18px;

    border-bottom:
        1px solid rgba(63, 48, 42, 0.13);
}


.checkout-summary-calculation > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 6px 0;

    color: #695e59;

    font-size: 10px;
}


.checkout-summary-calculation strong {
    color: #3d332f;

    font-weight: 500;
}


.checkout-summary-free {
    color: #647967 !important;

    font-weight: 600 !important;
}


/* =========================================================
   SUMMARY TOTAL
========================================================= */

.checkout-summary-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 21px;

    color: #302722;
}


.checkout-summary-total > span {
    font-size: 13px;

    font-weight: 600;
}


.checkout-summary-total > div {
    display: flex;

    align-items: baseline;

    gap: 7px;
}


.checkout-summary-total small {
    color: #958983;

    font-size: 8px;
}


.checkout-summary-total strong {
    color: #302722;

    font-size: 19px;

    font-weight: 700;
}


/* =========================================================
   SUMMARY FOOTNOTE
========================================================= */

.checkout-summary-security {
    margin-top: 25px;

    padding-top: 17px;

    border-top:
        1px solid rgba(63, 48, 42, 0.1);

    color: #968a84;

    font-size: 8.5px;

    line-height: 1.55;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1150px) {

    .checkout-page {
        width: calc(100% - 48px);
    }


    .checkout-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 400px);

        gap: 45px;
    }

}


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

@media (max-width: 850px) {

    main:has(.checkout-page) {
        padding-top: 20px;
    }


    .checkout-page {
        width: calc(100% - 36px);
    }


    .checkout-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .checkout-summary {
        position: static;

        order: -1;
    }

}


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

@media (max-width: 560px) {

    .checkout-page {
        width: calc(100% - 28px);

        padding-bottom: 60px;
    }


    .checkout-heading h1 {
        font-size: 32px;
    }


    .checkout-fields {
        grid-template-columns: 1fr;
    }


    .checkout-field {
        grid-column: 1 / -1;
    }


    .checkout-summary {
        padding: 22px 18px;
    }


    .checkout-summary-item {
        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap: 12px;
    }


    .checkout-summary-image {
        width: 60px;

        height: 60px;
    }


    .checkout-summary-price {
        grid-column: 2;

        margin-top: -4px;
    }

}

/* =========================================================
   CHECKOUT - TEXT SIZE SCALE UP
========================================================= */

/* Back to cart */
.checkout-back {
    font-size: 14px;
}


/* Checkout title */
.checkout-heading h1 {
    font-size: 42px;
}


/* Contact / Delivery / Shipping / Payment */
.checkout-section h2 {
    font-size: 22px;
}


/* Optional */
.checkout-section h2 > span {
    font-size: 12px;
}


/* Field labels */
.checkout-field label {
    font-size: 13px;
}


/* Input text */
.checkout-field input,
.checkout-notes-section textarea {
    font-size: 15px;
}


/* Country / Region */
.checkout-country span {
    font-size: 11px;
}

.checkout-country strong {
    font-size: 14px;
}


/* Shipping / Payment title */
.checkout-shipping-option strong,
.checkout-payment-note strong {
    font-size: 14px;
}


/* Shipping / Payment description */
.checkout-shipping-option span,
.checkout-payment-note span {
    font-size: 12px;
}


/* FREE */
.checkout-free {
    font-size: 13px !important;
}


/* Place Order */
.checkout-place-order {
    font-size: 14px;
}


/* Text underneath Place Order */
.checkout-submit-note {
    font-size: 11px;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

/* Order Summary */
.checkout-summary > h2 {
    font-size: 29px;
}


/* Product name */
.checkout-summary-product > strong {
    font-size: 14px;
}


/* 18K Gold / Yellow Gold / Size */
.checkout-summary-product > div {
    font-size: 11px;
}


/* Product price */
.checkout-summary-price {
    font-size: 13px;
}


/* Subtotal / Delivery */
.checkout-summary-calculation > div {
    font-size: 13px;
}


/* Total */
.checkout-summary-total > span {
    font-size: 15px;
}


/* PHP */
.checkout-summary-total small {
    font-size: 11px;
}


/* Total price */
.checkout-summary-total strong {
    font-size: 24px;
}


/* Complimentary delivery note */
.checkout-summary-security {
    font-size: 11px;
}

/* =========================================================
   ORDER SUCCESS
========================================================= */

main:has(.order-success-page) {
    padding-top: 34px;
}


.order-success-page {
    width: min(
        1240px,
        calc(100% - 60px)
    );

    margin: 0 auto;

    padding-bottom: 100px;
}


/* =========================================================
   HERO
========================================================= */

.order-success-hero {
    max-width: 720px;

    margin: 0 auto 52px;

    text-align: center;
}


.order-success-check {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin: 0 auto 18px;

    border: 1px solid #766b66;

    border-radius: 50%;

    color: #5f7062;

    font-size: 21px;
}


.order-success-eyebrow {
    margin-bottom: 9px;

    color: #857872;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.order-success-hero h1 {
    margin: 0;

    color: #291f1b;

    font-family: Georgia, serif;

    font-size: 42px;

    font-weight: 400;

    line-height: 1.1;
}


.order-success-hero > p {
    max-width: 570px;

    margin: 17px auto 0;

    color: #776b65;

    font-size: 14px;

    line-height: 1.65;
}


.order-success-number {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    color: #91847e;

    font-size: 12px;
}


.order-success-number strong {
    color: #352c28;

    font-size: 13px;
}


/* =========================================================
   LAYOUT
========================================================= */

.order-success-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.62fr);

    gap: 60px;

    align-items: start;
}


/* =========================================================
   LEFT SECTIONS
========================================================= */

.order-success-section {
    margin-bottom: 30px;

    padding: 28px;

    border:
        1px solid rgba(63, 48, 42, 0.12);

    background:
        rgba(255, 255, 255, 0.35);
}


.order-success-section > h2,
.order-success-section-heading h2 {
    margin: 0;

    color: #302622;

    font-family: Georgia, serif;

    font-size: 23px;

    font-weight: 400;
}


.order-success-section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.order-success-section-heading > span {
    color: #91847e;

    font-size: 11px;
}


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

.order-success-item {
    display: grid;

    grid-template-columns:
        78px
        minmax(0, 1fr)
        auto;

    gap: 18px;

    align-items: center;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(63, 48, 42, 0.1);
}


.order-success-item:first-child {
    padding-top: 0;
}


.order-success-item-image {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 78px;

    height: 78px;

    overflow: hidden;

    border-radius: 8px;

    background: #eee8e4;
}


.order-success-item-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.order-success-item-image span {
    color: #8f817b;

    font-family: Georgia, serif;

    font-size: 13px;
}


.order-success-item-info > strong {
    display: block;

    margin-bottom: 7px;

    color: #302722;

    font-size: 15px;

    font-weight: 600;
}


.order-success-item-options {
    display: flex;

    flex-wrap: wrap;

    color: #897d77;

    font-size: 11px;
}


.order-success-item-options
span:not(:last-child)::after {
    content: "·";

    margin: 0 8px;
}


.order-success-item-price {
    color: #403632;

    font-size: 13px;

    white-space: nowrap;
}


/* =========================================================
   TOTALS
========================================================= */

.order-success-totals {
    margin-top: 20px;
}


.order-success-totals > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 6px 0;

    color: #695e59;

    font-size: 13px;
}


.order-success-totals strong {
    color: #3d332f;

    font-weight: 500;
}


.order-success-free {
    color: #647967 !important;
}


.order-success-grand-total {
    margin-top: 12px;

    padding-top: 18px !important;

    border-top:
        1px solid rgba(63, 48, 42, 0.14);

    color: #302722 !important;

    font-size: 15px !important;
}


.order-success-grand-total strong {
    font-size: 18px;
}


/* =========================================================
   DELIVERY INFORMATION
========================================================= */

.order-success-info-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px 35px;

    margin-top: 25px;
}


.order-success-info-grid > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.order-success-info-grid span {
    color: #948781;

    font-size: 10px;

    text-transform: uppercase;
}


.order-success-info-grid strong {
    color: #423834;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.5;
}


.order-success-address {
    grid-column: 1 / -1;
}


/* =========================================================
   RIGHT SIDEBAR
========================================================= */

.order-success-sidebar {
    position: sticky;

    top: 95px;
}


.order-success-status-card,
.order-success-card {
    margin-bottom: 16px;

    padding: 24px;

    border:
        1px solid rgba(63, 48, 42, 0.12);

    background:
        rgba(255, 255, 255, 0.38);
}


.order-success-status-label {
    color: #968983;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.order-success-status-value {
    margin-top: 8px;

    color: #312824;

    font-family: Georgia, serif;

    font-size: 25px;

    text-transform: capitalize;
}


.order-success-status-card > p {
    margin: 12px 0 0;

    color: #887c76;

    font-size: 11px;

    line-height: 1.55;
}


/* CARDS */

.order-success-card h3 {
    margin: 0 0 18px;

    color: #302622;

    font-family: Georgia, serif;

    font-size: 19px;

    font-weight: 400;
}


.order-success-card-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    padding: 6px 0;

    color: #837670;

    font-size: 11px;
}


.order-success-card-row strong {
    color: #423834;

    font-weight: 600;

    text-align: right;
}


.order-success-payment-note {
    margin: 17px 0 0;

    padding-top: 15px;

    border-top:
        1px solid rgba(63, 48, 42, 0.1);

    color: #8d817b;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   BUTTONS
========================================================= */

.order-success-actions {
    margin-top: 20px;
}


.order-success-primary-button,
.order-success-secondary-button {
    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    width: 100%;

    height: 48px;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.07em;
}


.order-success-primary-button {
    border: 1px solid #29211e;

    background: #29211e;

    color: #fff;
}


.order-success-secondary-button {
    margin-top: 18px;

    border: 1px solid #bcb1ac;

    background: transparent;

    color: #392f2b;
}


.order-success-shop-link {
    display: block;

    margin-top: 17px;

    color: #665a55;

    font-size: 12px;

    text-align: center;

    text-decoration: underline;

    text-underline-offset: 4px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .order-success-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .order-success-sidebar {
        position: static;
    }

}


@media (max-width: 560px) {

    .order-success-page {
        width: calc(100% - 28px);
    }


    .order-success-hero h1 {
        font-size: 34px;
    }


    .order-success-section {
        padding: 20px;
    }


    .order-success-item {
        grid-template-columns:
            65px
            minmax(0, 1fr);
    }


    .order-success-item-image {
        width: 65px;

        height: 65px;
    }


    .order-success-item-price {
        grid-column: 2;
    }


    .order-success-info-grid {
        grid-template-columns: 1fr;
    }


    .order-success-address {
        grid-column: auto;
    }

}

/* =========================================================
   ORDER SUCCESS - ORDER MANAGEMENT
========================================================= */

.order-success-edit-delivery {
    margin-top: 28px;

    padding-top: 22px;

    border-top:
        1px solid rgba(63, 48, 42, 0.12);
}


.order-success-edit-delivery summary {
    cursor: pointer;

    color: #3c322d;

    font-size: 13px;

    font-weight: 600;
}


.order-success-edit-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 22px;
}


.order-success-edit-grid label {
    color: #776a64;

    font-size: 11px;
}


.order-success-edit-grid input {
    box-sizing: border-box;

    width: 100%;

    height: 43px;

    margin-top: 6px;

    padding: 0 12px;

    border: 1px solid #d6ccc7;

    border-radius: 6px;

    background: rgba(
        255,
        255,
        255,
        0.55
    );

    color: #302722;

    font: inherit;

    outline: none;
}


.order-success-edit-grid input:focus {
    border-color: #776862;

    background: #fff;
}


.order-success-edit-full {
    grid-column: 1 / -1;
}


.order-success-save-delivery {
    height: 46px;

    margin-top: 18px;

    padding: 0 24px;

    border: 1px solid #29211e;

    background: #29211e;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* MANAGE */

.order-success-manage-card > p {
    margin: 0 0 18px;

    color: #887c76;

    font-size: 11px;

    line-height: 1.6;
}


.order-success-cancel-button {
    width: 100%;

    height: 44px;

    border: 1px solid #a47770;

    background: transparent;

    color: #8b514b;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;
}


.order-success-cancel-button:hover {
    background: #8b514b;

    color: #fff;
}


/* CONTACT */

.order-success-contact-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 6px 0;

    font-size: 11px;
}


.order-success-contact-row span {
    color: #91847e;
}


.order-success-contact-row a {
    color: #423834;

    text-align: right;

    text-decoration: none;
}


@media (max-width: 560px) {

    .order-success-edit-grid {
        grid-template-columns: 1fr;
    }


    .order-success-edit-full {
        grid-column: auto;
    }

}

/* =========================================================
   ORDER SUCCESS - RIGHT SIDEBAR TEXT SIZE
========================================================= */

.order-success-status-label {
    font-size: 13px;
}

.order-success-status-value {
    font-size: 29px;
}

.order-success-status-card > p {
    font-size: 14px;
}

.order-success-card h3 {
    font-size: 23px;
}

.order-success-card-row {
    font-size: 14px;
}

.order-success-payment-note {
    font-size: 13px;
}

.order-success-contact-row {
    font-size: 14px;
}

.order-success-manage-card > p {
    font-size: 13px;
}

.order-success-cancel-button {
    font-size: 13px;
}

.order-success-primary-button,
.order-success-secondary-button {
    font-size: 13px;
}

.order-success-shop-link {
    font-size: 14px;
}

/* =========================================================
   MY ORDERS
========================================================= */

main:has(.my-orders-page) {
    padding-top: 34px;
}


.my-orders-page {
    width: min(
        1120px,
        calc(100% - 60px)
    );

    margin: 0 auto;

    padding-bottom: 100px;
}


/* =========================================================
   HEADER
========================================================= */

.my-orders-header {
    margin-bottom: 38px;
}


.my-orders-eyebrow {
    margin-bottom: 8px;

    color: #91837d;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.my-orders-header h1 {
    margin: 0;

    color: #291f1b;

    font-family: Georgia, serif;

    font-size: 42px;

    font-weight: 400;
}


.my-orders-header p {
    margin: 13px 0 0;

    color: #7d706a;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   LIST
========================================================= */

.my-orders-list {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


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

.my-order-card {
    padding: 27px 30px;

    border:
        1px solid rgba(63, 48, 42, 0.12);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.38);
}


/* TOP */

.my-order-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(63, 48, 42, 0.1);
}


.my-order-label {
    margin-bottom: 5px;

    color: #988b85;

    font-size: 10px;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.my-order-number {
    color: #302622;

    font-family: Georgia, serif;

    font-size: 22px;

    text-decoration: none;
}


.my-order-number:hover {
    text-decoration: underline;

    text-underline-offset: 4px;
}


/* =========================================================
   STATUS
========================================================= */

.my-order-status {
    padding: 7px 11px;

    border-radius: 20px;

    background: #eee9e6;

    color: #675c57;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.my-order-status.status-pending {
    background: #f1eae1;

    color: #876e4e;
}


.my-order-status.status-confirmed,
.my-order-status.status-processing {
    background: #e8eee8;

    color: #5c725f;
}


.my-order-status.status-shipped {
    background: #e8edf0;

    color: #536b79;
}


.my-order-status.status-completed {
    background: #e5eee8;

    color: #4e7059;
}


.my-order-status.status-cancelled,
.my-order-status.status-expired {
    background: #eee7e6;

    color: #885d57;
}


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

.my-order-meta {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 30px;

    padding: 22px 0;
}


.my-order-meta > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.my-order-meta span {
    color: #988b85;

    font-size: 10px;

    text-transform: uppercase;
}


.my-order-meta strong {
    color: #403632;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   PRODUCTS
========================================================= */

.my-order-products {
    padding: 18px 0;

    border-top:
        1px solid rgba(63, 48, 42, 0.09);
}


.my-order-product {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 13px;
}


.my-order-product:last-child {
    margin-bottom: 0;
}


.my-order-product-image {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 62px;

    height: 62px;

    overflow: hidden;

    border-radius: 8px;

    background: #eee8e4;
}


.my-order-product-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.my-order-product-image span {
    color: #93857f;

    font-family: Georgia, serif;

    font-size: 11px;
}


.my-order-product-info > strong {
    display: block;

    margin-bottom: 6px;

    color: #342b27;

    font-size: 14px;

    font-weight: 600;
}


.my-order-product-info > div {
    display: flex;

    flex-wrap: wrap;

    color: #8c7f79;

    font-size: 11px;
}


.my-order-product-info
span:not(:last-child)::after {
    content: "·";

    margin: 0 7px;
}


.my-order-more-items {
    margin-top: 12px;

    color: #8e817b;

    font-size: 11px;
}


/* =========================================================
   BOTTOM
========================================================= */

.my-order-card-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding-top: 20px;

    border-top:
        1px solid rgba(63, 48, 42, 0.1);
}


.my-order-payment-method {
    color: #8b7e78;

    font-size: 11px;
}


.my-order-view-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 130px;

    height: 42px;

    padding: 0 20px;

    border: 1px solid #332925;

    background: transparent;

    color: #332925;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-decoration: none;

    text-transform: uppercase;
}


.my-order-view-button:hover {
    background: #332925;

    color: #fff;
}


/* =========================================================
   EMPTY
========================================================= */

.my-orders-empty {
    padding: 100px 20px;

    text-align: center;
}


.my-orders-empty h2 {
    margin: 0;

    color: #302622;

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: 400;
}


.my-orders-empty p {
    margin: 14px 0 27px;

    color: #83766f;

    font-size: 13px;
}


.my-orders-shop-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    height: 48px;

    border: 1px solid #29211e;

    background: #29211e;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-decoration: none;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .my-orders-page {
        width: calc(100% - 28px);
    }


    .my-orders-header h1 {
        font-size: 34px;
    }


    .my-order-card {
        padding: 22px 18px;
    }


    .my-order-meta {
        grid-template-columns:
            1fr 1fr;

        gap: 20px;
    }

}


@media (max-width: 460px) {

    .my-order-card-top {
        flex-direction: column;
    }


    .my-order-meta {
        grid-template-columns: 1fr;
    }


    .my-order-card-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .my-order-view-button {
        width: 100%;

        box-sizing: border-box;
    }

}

/* =========================================================
   HOMEPAGE COLLECTION IMAGES
========================================================= */

.collection-card {
    position: relative;
    overflow: hidden;
}


.collection-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


.collection-card-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        rgba(36, 27, 23, 0.18),
        rgba(36, 27, 23, 0.52)
    );

    z-index: 1;
}


.collection-card.has-image > .collection-number,
.collection-card.has-image > div:not(.collection-card-overlay) {
    position: relative;

    z-index: 2;
}


.collection-card.has-image .collection-number,
.collection-card.has-image p,
.collection-card.has-image h3,
.collection-card.has-image .collection-link {
    color: #ffffff;
}

/* =========================================================
   HOMEPAGE BRAND STATEMENT - EDITORIAL
========================================================= */

.home-statement.home-statement-editorial {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    padding: 0;

    min-height: 560px;

    overflow: hidden;

    background: #f4f4f0;
}


/* IMAGE */

.statement-image {
    position: relative;

    min-width: 0;

    min-height: 560px;

    overflow: hidden;

    background: #e9eae5;
}


.statement-image img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    object-position: center;
}


.statement-image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

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

    background: #e9eae5;

    color: #777d74;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .18em;
}


/* CONTENT */

.statement-content.statement-content-editorial {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding: 64px 46px;
}


.statement-content-editorial .statement-label {
    margin-bottom: 36px;

    color: var(--site-accent, var(--blush));

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.statement-content-editorial h2 {
    max-width: 680px;

    margin: 0 0 22px;

    color: #2d302b;

    font-family: Georgia, serif;

    font-size: clamp(
        42px,
        4vw,
        66px
    );

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -.035em;
}


.statement-content-editorial > p {
    max-width: 620px;

    margin: 0 0 26px;

    color: #5d6259;

    font-size: 15px;

    line-height: 1.85;
}


.statement-content-editorial .text-link {
    margin-top: 4px;
}


/* TABLET */

@media (max-width: 1000px) {

    .home-statement.home-statement-editorial {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        min-height: 500px;
    }


    .statement-image {
        min-height: 500px;
    }


    .statement-content.statement-content-editorial {
        padding: 54px 46px;
    }


    .statement-content-editorial h2 {
        font-size: 44px;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .home-statement.home-statement-editorial {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .statement-image {
        min-height: 420px;
    }


    .statement-content.statement-content-editorial {
        padding: 48px 28px 54px;
    }


    .statement-content-editorial .statement-label {
        margin-bottom: 25px;
    }


    .statement-content-editorial h2 {
        font-size: 38px;

        line-height: 1.1;
    }

}

/* BRAND STATEMENT - TIGHTER CONTENT SPACING */

.home-statement.home-statement-editorial
.statement-content.statement-content-editorial {
    width: auto;
    max-width: none;

    margin: 0;

    padding:
        64px
        44px
        64px
        5px;
}


/* =========================================================
   PET FOOD STOREFRONT - NEUTRAL COLOR DISTRIBUTION
   Keep large surfaces white/neutral. Use Website Accent Color
   only for small highlights, hover states and labels.
========================================================= */

body {
    background: #fbfbf8;
}

.home-page {
    color: #2d302b;
}

.home-hero,
.home-collection,
.home-final {
    background: transparent;
}

.home-hero-visual:not(.has-image) {
    background:
        radial-gradient(
            circle at 50% 44%,
            color-mix(in srgb, var(--site-accent, var(--blush)) 4%, #ffffff) 0%,
            #f1f2ed 45%,
            #e8e9e3 100%
        );
}

.eyebrow,
.home-strip span,
.statement-label,
.statement-content-editorial .statement-label {
    color: var(--site-accent, var(--blush));
}

.collection-card:not(.collection-card-large):not(.has-image) {
    background: #f2f2ed;
    border: 1px solid #e5e6df !important;
}

.collection-card:not(.collection-card-large):not(.has-image):hover {
    background: #f7f7f3;
    border-color: color-mix(in srgb, var(--site-accent, var(--blush)) 38%, #dfe1da) !important;
}

.collection-card-large:not(.has-image) {
    background: #2d302b;
}

.collection-card-large:not(.has-image):hover {
    background: #232621;
}

.home-statement.home-statement-editorial {
    background: #f4f4f0;
}

.statement-image,
.statement-image-placeholder {
    background: #e9eae5;
}

.statement-image-placeholder {
    color: #777d74;
}

.statement-content-editorial h2 {
    color: #2d302b;
}

.statement-content-editorial > p {
    color: #5d6259;
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--site-accent, var(--blush));
    border-color: var(--site-accent, var(--blush)) !important;
}

.text-link:hover,
.collection-link:hover {
    color: var(--site-accent, var(--blush));
}

::selection {
    background: color-mix(in srgb, var(--site-accent, var(--blush)) 25%, #ffffff);
    color: #2d302b;
}