/* =======================================================================
   DIRA — style.css · "Peacock & Marigold" edition
   Deep peacock green (as in the logo) with an Indian jewel palette:
   marigold gold · peacock teal · terracotta rose · sandalwood ivory.
   Signature: jharokha arch hero, toran bead garland, scalloped dividers,
   hand-drawn mandala grounds. Fonts: Fraunces (display) · Jost + DM Sans.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montenegrin+Gothic+One&display=swap');

:root {
    /* Deep peacock green — PRIMARY brand colour (matches the logo) */
    --green: #104E38;
    --green-2: #051f20;
    --green-deep: #082C20;
    --green-logo: #051f20;
    /* header surface — close to the logo bg */
    --green-soft: #DEEDE3;
    --green-tint: #F0F6F1;
    /* Indian jewel accents: peacock teal · terracotta rose · marigold */
    --navy: #21382D;
    /* heading ink — deep peacock */
    --navy-2: #30523F;
    --navy-deep: #14251C;
    --sky: #3F8578;
    /* peacock-feather teal (was blue) */
    --sky-soft: #DFEEE8;
    --sky-tint: #F1F8F4;
    --blush: #D97F5E;
    /* terracotta rose */
    --blush-soft: #F9E4D6;
    --blush-tint: #FCF3EA;
    --linen: #EFE3CB;
    /* sandalwood */
    --linen-soft: #F8F1E1;
    --ivory: #FDFAF1;
    --white-2: #FFFFFF;
    --gold: #D99A2B;
    /* marigold */
    --gold-2: #EDBE62;
    --gold-3: #F6DFA4;
    --gold-soft: #F9EDCF;
    --gold-deep: #A9741B;
    --rani: #B94B5E;
    /* rani pink — used only in tiny doses */

    --ink: #263129;
    --ink-2: #3B4A40;
    --ink-soft: #5B6A5D;
    --on-dark: #F5EFDF;
    --on-dark-soft: #D6DCCB;

    --serif: "Fraunces", Georgia, serif;
    --sans: "DM Sans", system-ui, sans-serif;
    --util: "Jost", var(--sans);

    --wrap: 1240px;
    --gutter: clamp(1.1rem, 4.5vw, 4rem);
    --sp: clamp(3.4rem, 6vw, 6rem);
    --r: 20px;
    --r-sm: 13px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --sh-sm: 0 10px 24px -16px rgba(8, 44, 32, .32);
    --sh: 0 22px 44px -26px rgba(8, 44, 32, .40);
    --sh-lg: 0 34px 64px -30px rgba(8, 44, 32, .46);
    --header-h: 80px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--util) !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--ivory);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    font-family: var(--util);
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
}

input,
button,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--gold-2);
    color: var(--green-deep);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

body.no-scroll {
    overflow: hidden;
}

svg.i {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* TYPE */
h1,
h2,
h3,
h4 {
    font-family: var(--util);
    font-weight: 700;
    font-variation-settings: "opsz" 90, "SOFT" 30;
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--navy);
}

.d1 {
    font-size: clamp(2.7rem, 5.4vw, 4.8rem);
    line-height: 1;
}

.d2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.d3 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.serif-it {
    font-style: italic;
}

.goldtext {
    background: linear-gradient(96deg, var(--gold-deep), var(--gold-2) 50%, var(--gold-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.greentext {
    color: var(--green);
}

.eyebrow {
    font-family: var(--util);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #8C6108;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
}

.eyebrow--c {
    justify-content: center;
}

.eyebrow--c::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
}

.eyebrow--light {
    color: var(--gold-2);
}

.lede {
    font-size: clamp(1.02rem, 1.2vw, 1.16rem);
    color: var(--ink-2);
}

/* LAYOUT */
.wrap {
    width: 100%;
    /* max-width: var(--wrap); */
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--sp);
    position: relative;
}

.section--tight {
    padding-block: clamp(2.4rem, 4vw, 3.6rem);
}

.head-c {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

.head-c .eyebrow {
    margin-bottom: 1rem;
}

.head-c h2 {
    margin-bottom: .7rem;
}

.head-c p {
    color: var(--ink-2);
    max-width: 56ch;
    margin-inline: auto;
}

/* Distinct light section backgrounds */
.s-ivory {
    background: var(--ivory);
}

.s-white {
    background: linear-gradient(180deg, #FFFFFF, #FBFBF8);
}

.s-linen {
    background: linear-gradient(180deg, var(--linen-soft), var(--linen));
}

.s-sky {
    background: linear-gradient(180deg, var(--sky-tint), var(--sky-soft));
}

.s-blush {
    background: linear-gradient(180deg, var(--blush-tint), var(--blush-soft));
}

.s-green-soft {
    background: linear-gradient(180deg, var(--green-tint), var(--green-soft));
}

/* Rich anchors */
.s-green {
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    color: var(--on-dark);
}

.s-navy {
    background: radial-gradient(120% 130% at 12% 0%, var(--navy-2) 0%, var(--navy) 48%, var(--navy-deep) 100%);
    color: var(--on-dark);
}

.s-green h2,
.s-green h3,
.s-navy h2,
.s-navy h3 {
    color: var(--ivory);
}

.s-green p,
.s-navy p,
.s-green .lede,
.s-navy .lede {
    color: var(--on-dark-soft);
}

.pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cg fill='none' stroke='%23EBD6A2' stroke-opacity='0.08'%3E%3Cpath d='M27 5c7 9 7 15 0 24-7-9-7-15 0-24zM27 25c7 9 7 15 0 24-7-9-7-15 0-24z'/%3E%3C/g%3E%3C/svg%3E");
}

.s-green>.wrap,
.s-navy>.wrap {
    position: relative;
    z-index: 1;
}

/* BUTTONS */
.btn {
    font-family: var(--util);
    font-weight: 600;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    line-height: 1;
    border-radius: 5px;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn:active {
    transform: translateY(1px);
}

.btn--green {
    background: linear-gradient(120deg, var(--green), var(--green-2));
    color: var(--ivory);
    box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85);
}

.btn--green:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95);
}

.btn--gold {
    background: linear-gradient(96deg, #efbf60, #ffc560 55%, #b7801f);
    color: #3a2c08;
    box-shadow: 0 12px 24px -14px rgba(168, 126, 51, .7);
}

.btn--gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transition: left .7s var(--ease);
}

.btn--gold:hover {
    transform: translateY(-3px);
}

.btn--gold:hover::after {
    left: 130%;
}

.btn--navy {
    background: var(--navy);
    color: var(--ivory);
}

.btn--navy:hover {
    background: var(--navy-deep);
    transform: translateY(-3px);
    box-shadow: var(--sh);
}

.btn--ghost {
    border-color: var(--green);
    color: var(--green);
    background: rgba(18, 80, 58, .05);
}

.btn--ghost:hover {
    background: var(--green);
    color: var(--ivory);
    transform: translateY(-3px);
}

.btn--light {
    border-color: rgba(243, 238, 227, .45);
    color: var(--ivory);
    background: rgba(243, 238, 227, .08);
}

.btn--light:hover {
    background: var(--ivory);
    color: var(--green);
    transform: translateY(-3px);
}

.btn--goldline {
    border-color: var(--gold-2);
    color: var(--gold-2);
    background: rgba(223, 189, 119, .08);
}

.btn--goldline:hover {
    background: var(--gold-2);
    color: var(--green-deep);
    transform: translateY(-3px);
}

.btn--block {
    width: 100%;
}

.btn--lg {
    padding: 1.1rem 2.2rem;
    font-size: .8rem;
}

.btn--sm {
    padding: .68rem 1.15rem;
    font-size: .68rem;
}

/* ANNOUNCE — saffron ribbon, high-contrast ink */
.announce {
    background: linear-gradient(96deg, #efbf60, #ffc85b 40%, #dcae54 72%, #efbf60);
    color: #231902;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(74, 50, 4, .25);
}

.announce::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 26%;
    height: 100%;
    transform: skewX(-24deg);
    background: linear-gradient(90deg, transparent, rgba(255, 252, 240, .2), transparent);
    animation: annshine 7s var(--ease) infinite;
}

@keyframes annshine {
    0% {
        left: -40%;
    }

    55%,
    100% {
        left: 130%;
    }
}

.announce__track {
    display: flex;
    gap: 3.5rem;
    white-space: nowrap;
    padding: 3px 0;
    width: max-content;
    animation: marquee 30s linear infinite;
    font-family: var(--util);
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.announce__track span {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-shadow: 0 1px 0 rgba(255, 248, 228, .25);
    font-size: 11px;
}

.announce b {
    color: var(--green-deep);
    font-weight: 600;
}

.announce i {
    color: #6B4A06;
    font-style: normal;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* HEADER — rich dark green, actual logo image, creative nav */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    transition: background .45s var(--ease), box-shadow .45s, border-color .45s;
    border-bottom: 1px solid rgba(237, 190, 98, .12);
    background: var(--green-logo);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-2) 50%, var(--gold) 70%, transparent);
    opacity: .55;
    pointer-events: none;
}

.site-header[data-transparent="true"] {
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    border-color: rgba(235, 214, 162, .1);
}

.site-header.solid {
    background: rgba(9, 42, 31, .97);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .6);
    border-color: rgba(235, 214, 162, .14);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    height: var(--header-h);
}

.brand-logo {
    width: 140px;
    flex-shrink: 0;
}

.brand-logo--footer {
    width: 150px;
}

.btn:hover {
    color: #fff;
}

.nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: 1.4rem;
}

.nav a {
    font-family: var(--util);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-dark);
    padding: .55rem 1rem;
    border-radius: 100px;
    position: relative;
    z-index: 0;
    transition: color .3s var(--ease);
    color: #fff;
}

.nav a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100px;
    z-index: -1;
    background: linear-gradient(120deg, var(--gold), var(--gold-2));
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.nav a:hover,
.nav a:focus-visible {
    color: #3a2c08;
}

.nav a:hover::before,
.nav a:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.header-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-left: auto;
}

.iconbtn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--on-dark);
    border-radius: 50%;
    position: relative;
    transition: background .3s, color .3s;
}

.iconbtn:hover {
    background: rgba(243, 238, 227, .14);
    color: var(--gold-2);
}

.iconbtn svg {
    width: 20px;
    height: 20px;
}

.cart-count {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--gold);
    color: var(--green-deep);
    font-family: var(--util);
    font-size: .6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-cta {
    margin-left: .6rem;
}

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--on-dark);
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.has-mega {
    position: relative;
}

.mega {
    position: fixed;
    left: 0;
    right: 0;
    margin-top: .35rem;
    background: var(--ivory);
    color: var(--ink);
    border-top: 2px solid var(--gold);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .35s var(--ease);
    z-index: 49;
}

.has-mega:hover .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mega-inner {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 2.2rem var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr;
    gap: 2rem;
}

.mega h4 {
    font-family: var(--util);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1rem;
}

.mega li {
    margin-bottom: .55rem;
}

.mega li a {
    color: var(--ink-2);
    font-size: .92rem;
}

.mega li a:hover {
    color: var(--green);
}

.mega__promo {
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    min-height: 190px;
    color: var(--ivory);
    display: flex;
}

.mega__promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega__promo span {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 1.2rem;
    font-family: var(--util);
    font-size: 1.4rem;
    background: linear-gradient(180deg, transparent, rgba(11, 50, 37, .85));
    width: 100%;
    color: #fff;
}

/* HERO — content left, ambient background video right */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #10181F;
    /* base tone while video loads */
    background-image: url(../images/banner-bg.png);
    /* graceful fallback */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* — video layer, blended as background — */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__video-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(255 243 231) 0%, rgb(254 242 230) 30%, rgb(255 243 231 / 54%) 44%, rgba(13, 20, 28, .12) 76%, rgba(13, 20, 28, 0) 100%), linear-gradient(180deg, rgba(13, 20, 28, .18) 0%, transparent 22%, transparent 80%, rgba(13, 20, 28, .28) 100%);
}

.hero__video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% top;
    left: 0px;
}

/* Dark gradient — strong on the left for text, dissolving into the video */
.hero__video-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(255 243 231) 0%, rgb(254 242 230) 30%, rgb(255 243 231 / 54%) 54%, rgba(13, 20, 28, .12) 76%, rgba(13, 20, 28, 0) 100%), linear-gradient(180deg, rgba(13, 20, 28, .18) 0%, transparent 22%, transparent 80%, rgba(13, 20, 28, .28) 100%);
}

/* — layout — */
.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 45rem) 1fr;
    /* text left, video breathes right */
    align-items: center;
    min-height: clamp(30rem, 74vh, 46rem);
    padding-block: clamp(2.6rem, 4.4vw, 4.4rem);
}

.hero__text {
    max-width: 45rem;
    padding: 50px 0;
}

/* — text on dark: color overrides only, everything else preserved — */
.hero__title {
    color: var(--navy);
    margin-bottom: 1.15rem;
    font-family: var(--util);
    font-weight: 700;
    font-size: 60px;
}

.hero__title em {
    font-size: 80px;
    line-height: 90px;
}

.hero__accent {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(96deg, #F2C14E, var(--gold) 45%, #E9A83B 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .06em;
}

.hero__lede {
    font-size: 1.1rem;
    color: rgb(0 0 0 / 88%);
    max-width: 42ch;
    margin-bottom: 1.9rem;
}

.hero__chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--util);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(217, 154, 43, .4);
    border-radius: 100px;
    padding: .5rem 1rem;
    margin-bottom: 1.3rem;
    box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
}

.hero__chip svg {
    width: 14px;
    height: 14px;
    color: var(--blush);
    animation: heartbeat 2.4s ease-in-out infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.22);
    }

    24% {
        transform: scale(1);
    }

    36% {
        transform: scale(1.14);
    }

    48% {
        transform: scale(1);
    }
}

.hero__cta {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 1.7rem;
}

.hero__cta .btn--goldfill {
    color: #3a2c08;
    background: linear-gradient(96deg, #efbf60, #ffc560 55%, #b7801f);
}

.hero__rating {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.hero__stars {
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 2px;
}

.hero__rating small {
    color: rgb(0 0 0 / 88%);
    font-size: .84rem;
}

.hero__rating b {
    color: rgb(0 0 0 / 88%);
}

.hero__trust {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px dashed rgba(255, 255, 255, .3);
    display: none;
}

.hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--util);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.hero__trust svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.section.section--tight.s-green.pattern.scallop-top {
    padding: 40px 0;
}

.stats-sec {
    background: none !important;
}

/* ==========================================================================
   FULL SIZE BANNER SLIDER STRIP (BELOW VALUES STRIP)
   ========================================================================== */
.full-size-banner-slider-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0b2528;
    min-height: 520px;
}

.banner-slider__track-wrapper {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.banner-slider__slides {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.banner-slider__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.03);
}

.banner-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
    transform: scale(1);
}

.banner-slider__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}

.banner-slider__link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
}

.banner-slider__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 37, 40, 0.92) 0%, rgba(11, 37, 40, 0.78) 40%, rgba(11, 37, 40, 0.3) 72%, rgba(11, 37, 40, 0.05) 100%);
    z-index: 1;
}

.banner-slider__content-wrap {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding-block: 60px;
}

.banner-slider__card {
    max-width: 560px;
    color: #fff;
}

.banner-slider__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f1cf85;
    background: rgba(184, 146, 65, 0.25);
    border: 1px solid rgba(184, 146, 65, 0.45);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.banner-slider__title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 14px 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.banner-slider__lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 24px;
}

.banner-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(11, 37, 40, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.banner-slider__arrow:hover {
    background: #b89241;
    border-color: #b89241;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(184, 146, 65, 0.4);
}

.banner-slider__arrow--prev {
    left: 24px;
}

.banner-slider__arrow--next {
    right: 24px;
}

.banner-slider__indicators {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-slider__dots {
    display: flex;
    gap: 14px;
    background: rgba(11, 37, 40, 0.8);
    padding: 8px 20px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner-slider__dot {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    transition: all 0.3s ease;
}

.banner-slider__dot:hover,
.banner-slider__dot.is-active {
    color: #fff;
}

.banner-slider__dot .bar {
    width: 32px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.banner-slider__dot .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #b89241;
    border-radius: 2px;
}

.banner-slider__dot.is-active .fill {
    width: 100%;
    transition: width 5s linear;
}

@media (max-width: 768px) {

    .woocommerce span.onsale,
    .woocommerce-page span.onsale {
        top: 5.7rem !important;
        left: 1rem !important;
        background: #dc3545 !important;
        color: #ffffff !important;
    }

    .full-size-banner-slider-strip,
    .banner-slider__track-wrapper,
    .banner-slider__slides,
    .banner-slider__content-wrap {
        min-height: 420px;
    }

    .banner-slider__arrow {
        width: 38px;
        height: 38px;
    }

    .banner-slider__arrow--prev {
        left: 10px;
    }

    .banner-slider__arrow--next {
        right: 10px;
    }

    .banner-slider__dot .label {
        display: none;
    }
}

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

/* Tablet */
@media (max-width: 991px) {
    .hero-inner {
        grid-template-columns: 1fr;
        min-height: clamp(26rem, 62vh, 38rem);
    }

    .hero__video-el {
        object-position: 62% center;
    }

    .hero__video-shade {
        background:
            linear-gradient(90deg,
                rgba(13, 20, 28, .88) 0%,
                rgba(13, 20, 28, .68) 45%,
                rgba(13, 20, 28, .42) 100%);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .hero-inner {
        min-height: clamp(24rem, 78vh, 34rem);
        padding-block: 2.4rem;
    }

    .hero__video-el {
        object-position: 55% center;
    }

    .hero__video-shade {
        background: linear-gradient(180deg, rgb(255 255 255 / 83%) 0%, rgb(255 255 255 / 69%) 45%, rgb(255 255 255 / 82%) 100%);
    }

    .hero__lede {
        font-size: 1rem;
    }

    .hero__cta .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero__chip svg {
        animation: none;
    }
}

/* scalloped toran edge on the section that follows the hero */
.s-green.scallop-top {
    position: relative;
}

.s-green.scallop-top::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 15px;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% -4px, #FBF2E0 11px, transparent 12px);
    background-size: 30px 15px;
    background-repeat: repeat-x;
    display: none;
}

/* VALUE STRIP */
.values__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 90%;
}

.value {
    display: flex;
    align-items: center;
    gap: .9rem;
    justify-content: center;
}

.value .ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    transition: transform .4s var(--ease);
}

.value:hover .ic {
    transform: translateY(-4px) rotate(-6deg);
}

.value:nth-child(1) .ic {
    background: linear-gradient(135deg, var(--green), var(--green-2));
}

.value:nth-child(2) .ic {
    background: linear-gradient(135deg, var(--blush), #C0472F);
}

.value:nth-child(3) .ic {
    background: linear-gradient(135deg, var(--sky), #4E7EA6);
}

.value:nth-child(4) .ic {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.value .ic svg {
    width: 22px;
    height: 22px;
}

.value b {
    font-family: var(--util);
    font-size: .84rem;
    color: var(--navy) !important;
    display: block;
    letter-spacing: .02em;
}

.value small {
    color: var(--ink-soft) !important;
    font-size: .74rem;
}

.s-green .value b {
    color: var(--ivory);
}

.s-green .value small {
    color: var(--on-dark-soft);
}

/* 10% JOIN band — compact, on green, no separate box */
.joinband {
    text-align: center;
}

.joinband .off {
    font-family: var(--util);
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    color: var(--gold-2);
}

.joinband h2 {
    color: var(--ivory);
    margin: .15rem 0 .5rem;
}

.joinband p {
    color: var(--on-dark-soft);
    max-width: 54ch;
    margin: 0 auto 1.2rem;
    font-size: .98rem;
}

.joinband form {
    display: flex;
    gap: .6rem;
    max-width: 520px;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.joinband input {
    flex: 1;
    min-width: 220px;
    background: rgba(243, 238, 227, .12);
    border: 1px solid rgba(235, 214, 162, .3);
    color: var(--ivory);
    padding: .9rem 1.2rem;
    border-radius: 100px;
}

.joinband input::placeholder {
    color: var(--on-dark-soft);
}

.joinband input:focus {
    outline: none;
    border-color: var(--gold-2);
}

.joinband small {
    display: block;
    margin-top: .8rem;
    color: var(--on-dark-soft);
    font-size: .74rem;
}

/* CATEGORIES — clean equal editorial cards */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

#categories {
    position: relative;
    background-image: url(../images/bg-folk-art.png);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#categories::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 70%);
    /* Opacity change kar sakte ho */
    z-index: 1;
}

#categories>* {
    position: relative;
    z-index: 2;
}


#products {
    position: relative;
    background-image: url(../images/bg-mandala-peach.png);
    background-size: cover;
    background-position: top;
    overflow: hidden;
    background-repeat: no-repeat;
}

#products::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 70%);
    /* Opacity change kar sakte ho */
    z-index: 1;
}

#products>* {
    position: relative;
    z-index: 2;
}

.cat {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    display: block;
    box-shadow: var(--sh);
    aspect-ratio: 3/4;
}

.cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.cat:hover img {
    transform: scale(1.08);
}

.cat__ov {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 40, 29, .06) 0%, rgba(8, 40, 29, 0) 34%, rgba(8, 40, 29, .9) 100%);
    transition: background .4s;
}

.cat:hover .cat__ov {
    background: linear-gradient(180deg, rgba(9, 42, 31, .15) 30%, rgba(9, 42, 31, .88) 100%);
}

.cat__body {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.2rem 1.25rem;
    color: #fff;
    width: 100%;
}

.cat__body .k {
    font-family: var(--util);
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-2);
}

.cat__body h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: .15rem 0 .35rem;
}

.cat__body .go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--util);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-3);
    opacity: 0;
    max-height: 0;
    transform: translateY(6px);
    transition: .4s var(--ease);
}

.cat:hover .cat__body .go {
    opacity: 1;
    max-height: 2rem;
    transform: none;
}

.cat__body .go svg {
    width: 14px;
    height: 14px;
}

/* PRODUCTS */
.prod-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: 2.2rem;
}

.tabs {
    display: inline-flex;
    gap: .35rem;
    background: #fff;
    border: 1px solid var(--linen);
    padding: .32rem;
    border-radius: 100px;
    flex-wrap: wrap;
    box-shadow: var(--sh-sm);
}

.tab {
    font-family: var(--util);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: .58rem 1.15rem;
    border-radius: 100px;
    transition: .35s var(--ease);
}

.tab:hover {
    color: var(--navy);
}

.tab.is-active {
    background: linear-gradient(120deg, var(--green), var(--green-2));
    color: var(--ivory);
    box-shadow: 0 6px 16px -8px rgba(11, 50, 37, .6);
}

.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

.product {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.product:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh-lg);
}

.product:nth-child(4n+1) {
    background: #FBF3EF;
}

/* blush tint */
.product:nth-child(4n+2) {
    background: #F1F6FB;
}

/* sky tint   */
.product:nth-child(4n+3) {
    background: #EDF5F0;
}

/* green tint */
.product:nth-child(4n) {
    background: #FAF3E3;
}

/* gold tint  */
.product.is-hidden {
    display: none;
}

.product__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
}

.product:nth-child(4n+1) .product__media {
    background: var(--blush-soft);
}

.product:nth-child(4n+2) .product__media {
    background: var(--sky-soft);
}

.product:nth-child(4n+3) .product__media {
    background: var(--green-soft);
}

.product:nth-child(4n) .product__media {
    background: var(--gold-soft);
}

.product__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
    transition: transform 1s var(--ease-out), opacity .6s;
}

.product__media img.back {
    opacity: 0;
    transform: scale(1.04);
}

.product:hover .product__media img.front {
    opacity: 0;
}

.product:hover .product__media img.back {
    opacity: 1;
    transform: scale(1);
}

.page-id-44 .badge {
    position: relative;
}

.badge {
    position: absolute;
    top: .8rem;
    left: .8rem;
    z-index: 3;
    font-family: var(--util);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .38rem .65rem;
    border-radius: 100px;
    color: #fff;
    font-weight: 600;
}

.badge--new {
    background: linear-gradient(120deg, var(--green), var(--green-2));
}

.badge--sale {
    background: linear-gradient(120deg, var(--blush), #C0472F);
}

.badge--best {
    background: linear-gradient(120deg, var(--gold), var(--gold-deep));
    color: #3a2c08;
}

.wish {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    box-shadow: var(--sh-sm);
    transition: .3s var(--ease);
}

.wish svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.wish:hover,
.wish.is-active {
    background: linear-gradient(120deg, var(--blush), #C0472F);
    color: #fff;
}

.wish.is-active svg {
    fill: currentColor;
}

.product__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: .75rem;
    display: flex;
    gap: .5rem;
    transform: translateY(120%);
    transition: transform .45s var(--ease);
}

.product:hover .product__actions {
    transform: none;
}

.qadd {
    flex: 1;
    background: #051f20;
    color: var(--ivory);
    font-family: var(--util);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .72rem;
    border-radius: 100px;
    font-weight: 600;
    transition: background .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qadd:hover {
    background: var(--green-deep);
}

.qview {
    width: 44px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .94);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-sm);
}

.qview svg {
    width: 18px;
    height: 18px;
}

.product__info {
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .28rem;
    flex: 1;
}

.product__cat {
    font-family: var(--util);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8C6108;
}

.product__name {
    font-family: var(--util);
    font-size: 20px;
    line-height: 1.3;
    color: var(--navy);
    font-weight: 800;
}

.product__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .3rem;
}

.product__price {
    font-weight: 600;
    color: var(--navy);
}

.product__price del {
    color: var(--ink-soft);
    font-weight: 400;
    font-size: .85em;
    margin-right: .35rem;
}

.stars {
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: 1px;
}

.prod-foot {
    text-align: center;
    margin-top: 2.6rem;
}

/* AUTO-SLIDER */
.slider {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.slider__track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    animation: slide 42s linear infinite;
}

.slider:hover .slider__track {
    animation-play-state: paused;
}

.slide-card {
    width: 270px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--linen);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .4s var(--ease), box-shadow .4s;
}

.slide-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh);
}

.slide-card__media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.slide-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
    transition: transform 1s var(--ease-out);
}

.slide-card:hover .slide-card__media img {
    transform: scale(1.06);
}

.slide-card__b {
    padding: .9rem 1rem 1.1rem;
}

.slide-card__b .product__cat {
    display: block;
}

.slide-card__b h3 {
    font-family: var(--util);
    font-size: 1.2rem;
    color: var(--navy);
    margin: .1rem 0 .35rem;
}

@keyframes slide {
    to {
        transform: translateX(calc(-50% - .6rem));
    }
}

/* FESTIVE BANNER */
.festive .wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: center;
    padding-block: clamp(2.6rem, 4vw, 3.6rem);
}

.festive__img {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--sh-lg);
}

.festive__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}

.festive:hover .festive__img img {
    transform: scale(1.06);
}

.festive__off {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(120deg, var(--gold), var(--gold-deep));
    color: #3a2c08;
    padding: .45rem .95rem;
    border-radius: 100px;
    font-family: var(--util);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}

.festive h2 {
    margin-bottom: .85rem;
}

.festive p {
    margin-bottom: 1.3rem;
    max-width: 44ch;
}

.count {
    display: flex;
    gap: .7rem;
    margin-bottom: 1.5rem;
}

.count div {
    text-align: center;
}

.count .box {
    background: rgba(243, 238, 227, .1);
    border: 1px solid rgba(235, 214, 162, .28);
    border-radius: 12px;
    padding: .65rem .3rem;
    min-width: 60px;
    backdrop-filter: blur(6px);
}

.count b {
    font-family: var(--util);
    font-size: 1.6rem;
    color: var(--gold-2);
    line-height: 1;
}

.count small {
    font-family: var(--util);
    font-size: .54rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
}

/* AUTHOR / STORY (sticky, real photo, rich stat boxes) */
.split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.sticky-media {
    position: sticky;
    top: calc(var(--header-h) + 22px);
}

.author__media {
    position: relative;
}

.author__img {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    aspect-ratio: 5/5;
}

.author__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.author__stamp {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    z-index: 2;
}

.author__stamp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 100px;
}

.author__body {
    padding-top: .4rem;
}

.author__quote {
    font-family: var(--util);
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1.3;
    color: var(--navy);
    margin: 1rem 0 1.2rem;
}

.author__quote em {
    color: var(--green);
    font-style: italic;
}

.author__sign {
    font-family: var(--util);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--green);
}

.author__role {
    font-family: var(--util);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: .15rem;
}

.author__pitch {
    margin-top: 1.4rem;
    display: grid;
    gap: .7rem;
}

.author__pitch li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    color: var(--ink-2);
    font-size: .95rem;
}

.author__pitch .tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.author__pitch .tick svg {
    width: 13px;
    height: 13px;
}

/* stat cards — light, gold-topped, rich accent */
.author__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
    margin-top: 1.9rem;
}

.statbox {
    text-align: center;
    padding: 1.3rem .6rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--linen);
    border-top: 3px solid var(--gold);
    box-shadow: var(--sh-sm);
    transition: transform .45s var(--ease), box-shadow .45s;
}

.statbox:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh);
    border-top-color: var(--green);
}

.statbox b {
    font-family: var(--util);
    font-weight: 600;
    font-size: 2.1rem;
    color: var(--green);
    display: block;
    line-height: 1;
}

.statbox span {
    font-family: var(--util);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* WHY (colourful cards on a very light bg) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.why {
    padding: 1.7rem 1.4rem;
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(22, 35, 63, .05);
    transition: transform .45s var(--ease), box-shadow .45s;
}

.why:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh);
}

.why:nth-child(1) {
    background: var(--green-soft);
}

.why:nth-child(2) {
    background: var(--blush-soft);
}

.why:nth-child(3) {
    background: var(--sky-soft);
}

.why:nth-child(4) {
    background: var(--gold-soft);
}

.why .ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #fff;
    transition: transform .4s var(--ease);
}

.why:hover .ic {
    transform: rotate(-6deg) scale(1.05);
}

.why:nth-child(1) .ic {
    background: linear-gradient(135deg, var(--green), var(--green-2));
}

.why:nth-child(2) .ic {
    background: linear-gradient(135deg, var(--blush), #C0472F);
}

.why:nth-child(3) .ic {
    background: linear-gradient(135deg, var(--sky), #4E7EA6);
}

.why:nth-child(4) .ic {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.why .ic svg {
    width: 25px;
    height: 25px;
}

.why h3 {
    font-size: 1.32rem;
    margin-bottom: .4rem;
    color: var(--navy);
}

.why p {
    color: var(--ink-2);
    font-size: .9rem;
}

.why .no {
    position: absolute;
    top: .9rem;
    right: 1.1rem;
    font-family: var(--util);
    font-style: italic;
    font-size: 2.2rem;
    color: rgba(22, 35, 63, .1);
}

/* PROCESS (sticky) */
.process__steps {
    display: grid;
    gap: 1rem;
}

.pstep {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid var(--linen);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    transition: transform .4s var(--ease), box-shadow .4s;
}

.pstep:hover {
    transform: translateX(6px);
    box-shadow: var(--sh);
}

.pstep__n {
    font-family: var(--util);
    font-style: italic;
    font-size: 1.7rem;
    color: var(--gold-deep);
    line-height: 1;
    width: 44px;
}

.pstep h3 {
    font-size: 1.3rem;
    margin-bottom: .25rem;
}

.pstep p {
    color: var(--ink-soft);
    font-size: .92rem;
}

/* OCCASION */
.occ-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.occ {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 3/4;
    display: block;
    box-shadow: var(--sh);
}

.occ img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.occ:hover img {
    transform: scale(1.08);
}

.occ::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(11, 50, 37, .82));
}

.occ span {
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    z-index: 1;
    color: #fff;
    font-family: var(--util);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.occ b {
    position: absolute;
    top: .8rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
    font-family: var(--util);
    font-style: italic;
    color: var(--gold-2);
    font-size: 1.1rem;
}

/* GOOGLE REVIEWS — feature card + auto-scrolling columns */
.greviews {
    display: grid;
    grid-template-columns: .92fr 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.gfeature {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: radial-gradient(120% 130% at 80% -10%, #113126, #32373a 45%, #113126);
    border: 1px solid rgba(235, 214, 162, .2);
    border-radius: 22px;
    padding: 2rem 1.9rem;
    color: var(--on-dark);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.gfeature .glogo {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-sm);
    margin-bottom: 1.3rem;
}

.gfeature .glogo span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0);
    display: flex;
}

.gfeature .glogo i {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-family: var(--util);
    font-weight: 700;
    font-size: .95rem;
    color: #4285F4;
    font-style: normal;
}

.gfeature h3 {
    color: var(--ivory);
    font-size: 2.1rem;
    margin-bottom: .35rem;
}

.gfeature .gstars {
    color: var(--gold-2);
    letter-spacing: 3px;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.gfeature p {
    color: var(--on-dark-soft);
    font-size: .95rem;
    margin-bottom: 1.6rem;
}

.gfeature .btn {
    width: 100%;
}

.rev-col {
    overflow: hidden;
    height: min(72vh, 600px);
    position: relative;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

.rev-col__track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: vscroll 34s linear infinite;
}

.rev-col--b .rev-col__track {
    animation-duration: 44s;
}

.rev-col:hover .rev-col__track {
    animation-play-state: paused;
}

@keyframes vscroll {
    to {
        transform: translateY(-50%);
    }
}

.grev {
    background: #fff;
    border-radius: var(--r);
    padding: 1.35rem 1.45rem;
    box-shadow: var(--sh);
}

.grev__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .7rem;
}

.grev__ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--util);
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.grev__who b {
    font-family: var(--util);
    font-size: .9rem;
    color: var(--navy);
    display: block;
    line-height: 1.2;
}

.grev__who small {
    color: var(--ink-soft);
    font-size: .72rem;
}

.grev__g {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0);
    flex-shrink: 0;
}

.grev__g span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-family: var(--util);
    font-weight: 700;
    font-size: .62rem;
    color: #4285F4;
}

.grev__stars {
    color: #FBBC05;
    letter-spacing: 1px;
    font-size: .9rem;
    margin-bottom: .55rem;
}

.grev__stars em {
    color: var(--ink-soft);
    font-style: normal;
    font-family: var(--util);
    font-size: .72rem;
    margin-left: .45rem;
}

.grev p {
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.6;
}

.grev__posted {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linen);
    color: var(--ink-soft);
    font-family: var(--util);
    font-size: .74rem;
}

.grev__posted .ck {
    width: 16px;
    height: 16px;
    color: #34A853;
}

/* INSTAGRAM — reels feel */
.ig-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.ig-ava {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 210deg, var(--gold), var(--blush), var(--sky), var(--green-2), var(--gold));
}

.ig-ava div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--green);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--util);
    font-size: 1.4rem;
    border: 2px solid var(--linen);
}

.ig-meta {
    text-align: left;
}

.ig-meta b {
    font-family: var(--util);
    font-size: 1.05rem;
    color: var(--navy);
}

.ig-meta small {
    display: block;
    color: var(--ink-soft);
    font-size: .8rem;
}

.reels-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .7rem;
}

.reel {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9/16;
    border-radius: var(--r);
    display: block;
    box-shadow: var(--sh-sm);
}

.reel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}

.reel:hover img {
    transform: scale(1.09);
}

.reel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 50, 37, .15) 0%, transparent 30%, transparent 55%, rgba(11, 50, 37, .78) 100%);
}

.reel__play {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(12, 53, 39, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.reel__play svg {
    width: 15px;
    height: 15px;
}

.reel__meta {
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    z-index: 2;
    color: #fff;
    font-family: var(--util);
    font-size: .72rem;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.reel__meta i {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

.reel__meta svg {
    width: 14px;
    height: 14px;
}

.reel__tag {
    position: absolute;
    left: .7rem;
    top: .6rem;
    z-index: 2;
    font-family: var(--util);
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(11, 50, 37, .5);
    backdrop-filter: blur(4px);
    padding: .25rem .5rem;
    border-radius: 100px;
}

.ig-cta {
    display: flex;
    gap: .8rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* NEWSLETTER */
.news-card {
    border-radius: calc(var(--r)*1.4);
    padding: clamp(2.2rem, 4vw, 3.4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2), var(--green) 45%, var(--green-deep));
    box-shadow: var(--sh-lg);
}

.news-card::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    top: -120px;
    right: -70px;
    background: radial-gradient(closest-side, rgba(235, 214, 162, .28), transparent);
}

.news-card .off {
    font-family: var(--util);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    color: var(--gold-2);
}

.news-card h2 {
    color: var(--ivory);
    margin: .35rem 0 .6rem;
}

.news-card p {
    color: var(--on-dark-soft);
    max-width: 46ch;
    margin: 0 auto 1.7rem;
}

.news-card form {
    display: flex;
    gap: .7rem;
    max-width: 520px;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.news-card input {
    flex: 1;
    min-width: 230px;
    background: rgba(243, 238, 227, .12);
    border: 1px solid rgba(235, 214, 162, .3);
    color: var(--ivory);
    padding: 1rem 1.25rem;
    border-radius: 100px;
}

.news-card input::placeholder {
    color: var(--on-dark-soft);
}

.news-card input:focus {
    outline: none;
    border-color: var(--gold-2);
}

.news-card small {
    display: block;
    margin-top: .9rem;
    color: var(--on-dark-soft);
    font-size: .76rem;
}

/* FAQ (sticky image left) */
.faq-split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.faq-media {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    aspect-ratio: 4/5;
    position: relative;
}

.faq-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq-media__tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    background: rgba(252, 251, 247, .95);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: var(--sh);
}

.faq-media__tag b {
    font-family: var(--util);
    font-size: 1.2rem;
    color: var(--navy);
    display: block;
}

.faq-media__tag small {
    color: var(--ink-soft);
    font-size: .82rem;
}

.faq {
    margin-bottom: .7rem;
    border: 1px solid var(--linen);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #fff;
    transition: border-color .3s, box-shadow .3s;
}

.faq[open] {
    border-color: var(--gold);
    box-shadow: var(--sh-sm);
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    font-family: var(--util);
    font-size: 1.18rem;
    color: var(--navy);
}

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

.faq__ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--linen);
    position: relative;
    transition: .4s var(--ease);
}

.faq[open] .faq__ic {
    background: linear-gradient(120deg, var(--green), var(--green-2));
    transform: rotate(135deg);
}

.faq__ic::before,
.faq__ic::after {
    content: "";
    position: absolute;
    background: var(--gold-deep);
    border-radius: 2px;
}

.faq[open] .faq__ic::before,
.faq[open] .faq__ic::after {
    background: var(--ivory);
}

.faq__ic::before {
    width: 12px;
    height: 2px;
}

.faq__ic::after {
    width: 2px;
    height: 12px;
}

.faq p {
    padding: 0 1.3rem 1.2rem;
    color: var(--ink-soft);
    font-size: .94rem;
}

.faq-help {
    margin-top: 1.4rem;
    display: flex;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1.1rem 1.3rem;
    background: var(--green-soft);
    border-radius: var(--r-sm);
}

.faq-help b {
    color: var(--navy);
    font-family: var(--util);
    font-size: .9rem;
}

.faq-help span {
    color: var(--ink-soft);
    font-size: .86rem;
}

/* FOOTER */
.footer {
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    color: var(--on-dark-soft);
    position: relative;
}

.footer.pattern::after {
    opacity: .35;
}

.footer .wrap {
    position: relative;
    z-index: 1;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr .7fr 1fr 1fr;
    gap: 2.2rem;
    padding-block: clamp(2.8rem, 5vw, 4.2rem);
    padding-bottom: 30px;
}

.footer-brand .brand-logo {
    margin-bottom: 1.1rem;
}

.footer-brand p {
    font-size: 16px;
    color: #fff;
    max-width: 32ch;
    margin-bottom: 1.3rem;
}

.footer-social {
    display: flex;
    gap: .55rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(235, 214, 162, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-dark-soft);
    transition: .3s var(--ease);
}

.footer-social a:hover {
    background: var(--gold);
    color: #3a2c08;
    border-color: var(--gold);
    transform: translateY(-3px);
}

.footer-social svg {
    width: 17px;
    height: 17px;
}

.footer-col h4 {
    font-family: var(--util, "Jost", sans-serif) !important;
    font-size: .68rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--gold-2, #EBD6A2) !important;
    margin-bottom: 1rem !important;
}

.footer-col li {
    margin-bottom: .62rem;
}

.footer-col a {
    font-size: 16px;
    color: #fff;
}

.footer-col a:hover {
    color: var(--ivory);
}

.footer-pay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    padding: 15px 0;
    border-top: 1px solid rgba(235, 214, 162, .18);
    border-bottom: 1px solid rgba(235, 214, 162, .18);
}

.pillrow {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
}

.pillrow .lbl {
    font-family: var(--util);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
    margin-right: .3rem;
}

.pill {
    border: 1px solid rgba(235, 214, 162, .2);
    border-radius: 6px;
    padding: .32rem .55rem;
    font-family: var(--util);
    font-size: .6rem;
    color: var(--on-dark);
    background: rgba(243, 238, 227, .05);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.4rem;
    font-size: .78rem;
}

.footer-legal {
    display: flex;
    gap: 1.3rem;
    flex-wrap: wrap;
}

.footer-bottom a:hover {
    color: var(--ivory);
}

/* REVEAL / HELPERS */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--green);
    color: var(--ivory);
    padding: .7rem 1rem;
    z-index: 200;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* OVERLAYS */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 50, 37, .5);
    backdrop-filter: blur(3px);
    z-index: 80;
    opacity: 0;
    transition: opacity .4s;
}

.overlay.is-shown {
    opacity: 1;
}

.mobile-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 380px);
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    color: var(--on-dark);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform .5s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.6rem;
    overflow-y: auto;
}

.mobile-menu.is-open {
    transform: none;
}

.mm-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
}

.mobile-nav a {
    display: block;
    font-family: var(--util);
    font-size: 16px;
    color: var(--ivory);
    padding: .65rem 0;
    border-bottom: 1px solid rgba(235, 214, 162, .15);
    text-decoration: none;
}

/* Mobile Nav Accordion */
.mobile-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(235, 214, 162, .15);
}

.mobile-nav__row .mobile-nav__link {
    border-bottom: none;
    flex: 1;
}

.mobile-nav__toggle {
    background: transparent;
    border: none;
    color: var(--gold);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
}

.mobile-nav__toggle:focus-visible {
    outline: 1px solid var(--gold);
}

.mobile-nav__chevron {
    transition: transform .3s var(--ease);
}

.mobile-nav__item.is-open .mobile-nav__chevron {
    transform: rotate(180deg);
}

.mobile-submenu {
    padding: .4rem 0 .6rem .8rem;
    background: rgba(0, 0, 0, .14);
    border-radius: 8px;
    margin: .4rem 0 .6rem;
}

.mobile-submenu__title {
    display: block;
    font-family: var(--util);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: .6rem;
    margin-bottom: .2rem;
    font-weight: 600;
}

.mobile-submenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-submenu__list li {
    margin: 0;
}

.mobile-submenu__list a {
    font-family: var(--sans);
    font-size: 14px;
    color: rgba(245, 237, 220, .85);
    padding: .4rem 0 .4rem .6rem;
    border-bottom: 1px dashed rgba(235, 214, 162, .08);
    transition: color .2s, padding-left .2s;
}

.mobile-submenu__list a:hover {
    color: var(--gold-light);
    padding-left: .85rem;
}

.mobile-submenu__list li:last-child a {
    border-bottom: none;
}

.mm-foot {
    margin-top: auto;
    padding-top: 1.4rem;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    z-index: 95;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 1.5rem var(--gutter);
}

.search-overlay.is-open {
    transform: none;
}

.search-overlay__mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
}

.search-overlay input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--linen);
    font-family: var(--util);
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--navy);
    padding: 1rem 0;
}

.search-overlay input:focus {
    outline: none;
    border-color: var(--gold);
}

.search-suggest {
    margin-top: 1.6rem;
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-suggest span {
    font-family: var(--util);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.search-suggest a {
    font-size: .86rem;
    color: var(--green);
    border: 1px solid var(--linen);
    padding: .4rem .9rem;
    border-radius: 100px;
}

.search-suggest a:hover {
    background: var(--green);
    color: var(--ivory);
}

.cart-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 420px);
    background: var(--ivory);
    z-index: 90;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    display: flex;
    flex-direction: column;
}

.cart-drawer.is-open {
    transform: none;
}

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.3rem 1.5rem;
    background: var(--green);
    color: var(--ivory);
}

.cart-head h3 {
    color: var(--ivory) !important;
    font-size: 1.35rem;
}

.cart-head .iconbtn {
    color: var(--ivory);
}

.cart-head .iconbtn:hover {
    background: rgba(243, 238, 227, .15);
    color: var(--ivory);
}

.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.5rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--linen);
    position: relative;
}

.cart-item img {
    width: 66px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--r-sm);
}

.cart-item h4 {
    font-family: var(--util);
    font-size: 1.1rem;
    color: var(--navy);
}

.cart-item small {
    color: var(--ink-soft);
    font-size: .76rem;
}

.cart-item .pr {
    font-weight: 600;
    margin-top: .3rem;
    color: var(--navy);
}

.cart-x {
    position: absolute;
    top: 1rem;
    right: 0;
    color: var(--ink-soft);
    font-size: 1.1rem;
}

.cart-foot {
    padding: 1.2rem 1.5rem;
    border-top: 1px solid var(--linen);
    background: var(--linen-soft);
}

.cart-note {
    text-align: center;
    font-family: var(--util);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .9rem;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .9rem;
}

.cart-total span {
    font-family: var(--util);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cart-total strong {
    font-family: var(--util);
    font-size: 1.7rem;
    color: var(--navy);
}

.cart-foot .btn {
    margin-bottom: .55rem;
}

.quickview {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s;
}

.quickview.is-open {
    opacity: 1;
    visibility: visible;
}

.qv-panel {
    position: relative;
    background: var(--ivory);
    width: min(900px, 100%);
    max-height: 100%;
    border-radius: var(--r);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: translateY(16px);
    transition: transform .5s var(--ease);
    box-shadow: var(--sh-lg);
}

.quickview.is-open .qv-panel {
    transform: none;
}

.qv-media {
    background: var(--blush-soft);
    height: 570px;
}

.qv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}

.qv-body {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qv-body h3 {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    margin: .4rem 0;
}

.qv-price {
    font-family: var(--util);
    font-size: 1.35rem;
    color: var(--gold-deep);
    margin-bottom: .9rem;
}

.qv-body p {
    color: var(--ink-soft);
    font-size: .92rem;
    margin-bottom: 1.3rem;
}

.qv-sizes {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.3rem;
    flex-wrap: wrap;
}

.qv-sizes button {
    min-width: 50px;
    padding: .52rem;
    border: 1px solid var(--linen);
    border-radius: 8px;
    font-family: var(--util);
    font-size: .72rem;
    transition: .3s;
}

.qv-sizes button.is-active,
.qv-sizes button:hover {
    background: var(--green);
    color: var(--ivory);
    border-color: var(--green);
}

.qv-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-sm);
}

.toast {
    position: fixed;
    bottom: 1.6rem;
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--green);
    color: var(--ivory);
    padding: .95rem 1.45rem;
    border-radius: 100px;
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transition: .4s var(--ease);
}

.toast.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.toast svg {
    width: 18px;
    height: 18px;
    color: var(--gold-2);
}

.toast span {
    font-family: var(--util);
    font-size: .76rem;
    letter-spacing: .05em;
}

.to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 70;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green);
    color: var(--gold-2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .4s var(--ease);
    box-shadow: var(--sh-lg);
}

.to-top.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--gold);
    color: var(--green-deep);
}

.to-top svg {
    width: 20px;
    height: 20px;
}

/* =======================================================================
   PRELOADER — ivory silk welcome with hand-drawn mandala art
   ======================================================================= */
body.is-loading {
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #FEFBF3 0%, #FBF3E1 62%, #F7EBD2 100%);
    transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1s;
}

.preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(46% 42% at 50% 44%, rgba(233, 168, 59, .16), transparent 74%);
}

.preloader.is-done {
    transform: translateY(-101%);
    visibility: hidden;
}

.pre__hem {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 16px;
    background: radial-gradient(circle at 50% -3px, transparent 10px, var(--gold-deep) 10.5px, var(--gold) 12px, transparent 13px);
    background-size: 28px 16px;
    background-repeat: repeat-x;
    opacity: .8;
}

.pre__mandala {
    position: absolute;
    pointer-events: none;
    background-size: cover;
    background-position: center;
}

.pre__mandala svg {
    display: none;
}

.pre__mandala--a {
    top: -14vmin;
    right: -12vmin;
    width: 60vmin;
    height: 44vmin;
    background-image: url("../images/bg-mandala-peach.png");
    opacity: .55;
    -webkit-mask-image: radial-gradient(70% 70% at 62% 34%, #000 30%, transparent 76%);
    mask-image: radial-gradient(70% 70% at 62% 34%, #000 30%, transparent 76%);
}

.pre__mandala--b {
    bottom: -14vmin;
    left: -12vmin;
    width: 56vmin;
    height: 42vmin;
    background-image: url("../images/bg-mandala-gold.png");
    opacity: .6;
    -webkit-mask-image: radial-gradient(72% 72% at 34% 66%, #000 28%, transparent 76%);
    mask-image: radial-gradient(72% 72% at 34% 66%, #000 28%, transparent 76%);
}

.pre__center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.4rem;
}

.pre__ring {
    position: relative;
    width: 152px;
    height: 152px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: scale(.82);
    animation: preIn .9s var(--ease-out) .15s forwards;
}

.pre__ring::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed rgba(169, 116, 27, .35);
    animation: preSpin 26s linear infinite;
}

@keyframes preSpin {
    to {
        transform: rotate(360deg);
    }
}

.pre__ring svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.pre__ring-track {
    stroke: rgba(169, 116, 27, .18);
}

.pre__ring-draw {
    stroke: var(--gold-deep);
    stroke-dasharray: 346;
    stroke-dashoffset: 346;
    animation: ringDraw 1.9s var(--ease-out) .35s forwards;
}

@keyframes ringDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.pre__ring img {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    object-fit: cover;
    border-radius: 50%;
    background: var(--green-logo);
    box-shadow: 0 14px 30px -16px rgba(8, 44, 32, .55), 0 0 0 3px #FFF, 0 0 0 4px rgba(169, 116, 27, .35);
}

.pre__word {
    height: 44px;
    width: auto;
    opacity: 0;
    transform: translateY(14px);
    animation: preIn .9s var(--ease-out) .55s forwards;
    filter: drop-shadow(0 1px 1px rgba(120, 80, 10, .28));
}

.pre__tag {
    margin-top: .95rem;
    font-family: var(--util);
    font-weight: 500;
    font-size: .62rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0;
    animation: tagIn 1.1s var(--ease-out) .85s forwards;
}

@keyframes preIn {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tagIn {
    from {
        opacity: 0;
        letter-spacing: .6em;
    }

    to {
        opacity: .85;
        letter-spacing: .34em;
    }
}

.pre__bar {
    margin-top: 1.5rem;
    width: min(200px, 52vw);
    height: 2px;
    border-radius: 2px;
    background: rgba(169, 116, 27, .18);
    overflow: hidden;
    opacity: 0;
    animation: preIn .6s var(--ease-out) .7s forwards;
}

.pre__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    animation: barFill 1.7s var(--ease) .6s forwards;
}

@keyframes barFill {
    to {
        width: 100%;
    }
}

.preloader.is-quick .pre__ring,
.preloader.is-quick .pre__word,
.preloader.is-quick .pre__tag,
.preloader.is-quick .pre__bar {
    animation-delay: 0s;
    animation-duration: .4s;
}

.preloader.is-quick .pre__ring-draw,
.preloader.is-quick .pre__bar i {
    animation-delay: .05s;
    animation-duration: .5s;
}

@media (prefers-reduced-motion:reduce) {
    .preloader {
        display: none;
    }

    body.is-loading {
        overflow: auto;
    }
}

/* Extra button: filled marigold with soft outline (hero "Shop boys") */
.btn--goldfill {
    background: #fff;
    border-color: var(--gold);
    color: var(--gold-deep);
    box-shadow: 0 12px 24px -16px rgba(169, 116, 27, .65);
}

.btn--goldfill:hover {
    background: linear-gradient(96deg, var(--gold-deep), var(--gold) 55%, var(--gold-2));
    border-color: transparent;
    color: #3A2A05;
    transform: translateY(-3px);
    box-shadow: 0 20px 34px -16px rgba(169, 116, 27, .8);
}

/* Section watermarks from provided Indian artwork (kept quiet) */
#story {
    position: relative;
}

#story::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 56%;
    pointer-events: none;
    opacity: .24;
    background: url("../images/bg-folk-art.png") top/cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

#story>.wrap {
    position: relative;
    z-index: 1;
}



#join {
    position: relative;
    overflow: hidden;
}

/* #join::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 46%;
  aspect-ratio: 16/9;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background: url("../images/bg-mandala-peach.png") center/cover no-repeat;
} */

/* Card & chrome polish */
.product,
.slide-card,
.pstep,
.grev,
.statbox {
    border-radius: var(--r);
}

.mega {
    border-radius: 0 0 22px 22px;
    overflow: hidden;
}

.head-c h2 .greentext {
    color: var(--green);
}

.festive {
    position: relative;
    overflow: hidden;
}

/* =======================================================================
   INDIAN ARTWORK GROUNDS — the provided mandala & folk art, used quietly
   across the page so every section sits on the same crafted canvas.
   ======================================================================= */

#new::before {
    content: "";
    position: absolute;
    bottom: -6%;
    left: -7%;
    width: 38%;
    aspect-ratio: 16/9;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    background: url("../images/bg-mandala-gold.png") left center/cover no-repeat;
    -webkit-mask-image: radial-gradient(74% 74% at 34% 64%, #000 26%, transparent 76%);
    mask-image: radial-gradient(74% 74% at 34% 64%, #000 26%, transparent 76%);
}

#reviews::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28%;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    filter: saturate(1.7) contrast(1.08);
    background: url("../images/bg-mandala-portrait-flip.png") right top/100% auto repeat-y;
    -webkit-mask-image: linear-gradient(270deg, #000 20%, transparent 92%);
    mask-image: linear-gradient(270deg, #000 20%, transparent 92%);
}

#faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 28%;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    filter: saturate(1.7) contrast(1.08);
    background: url("../images/bg-mandala-portrait.png") left top/100% auto repeat-y;
    -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
}

/* .footer::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 38%;
  aspect-ratio: 16/9;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: soft-light;
  background: url("../images/bg-mandala-peach.png") center/cover no-repeat;
} */

#categories>.wrap,
#products>.wrap,
#new>.wrap,
#reviews>.wrap,
#faq>.wrap {
    position: relative;
    z-index: 1;
}

#new .slider {
    position: relative;
    z-index: 1;
}

/* =======================================================================
   DIRA — WOOCOMMERCE STYLE INTEGRATION & OVERRIDES
   ======================================================================= */

/* General WooCommerce Typography & Accents */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
    font-family: var(--util);
    color: var(--navy);
}

.woocommerce .price,
.woocommerce-page .price,
.woocommerce .amount,
.woocommerce-page .amount {
    font-family: var(--util);
    color: var(--gold-deep);
    font-weight: 600;
}

/* Sale Badge */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background: var(--gold);
    color: #3a2c08;
    font-family: var(--util);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    top: 1rem;
    left: 1rem;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
    font-family: var(--util);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
    color: var(--green);
    transition: color 0.3s;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover {
    color: var(--gold-deep);
}

/* Shop Sorting & Result Count */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-family: var(--util);
    font-size: 0.8rem;
    color: var(--ink);
    background: #fff;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    font-family: var(--util);
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-top: 0.6rem;
}

/* Product Grid (Archive & Shop) */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.8rem !important;
    list-style: none;
    padding: 0;
    margin: 2rem 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
}

@media (max-width: 992px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

/* Custom WooCommerce Loop Product Cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--linen) !important;
    box-shadow: var(--sh-sm);
    display: flex !important;
    flex-direction: column;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh-lg);
}

/* Tint coloring for the archive lists to match homepage cards */
.woocommerce ul.products li.product:nth-child(4n+1) {
    background: #FBF3EF !important;
}

.woocommerce ul.products li.product:nth-child(4n+2) {
    background: #F1F6FB !important;
}

.woocommerce ul.products li.product:nth-child(4n+3) {
    background: #EDF5F0 !important;
}

.woocommerce ul.products li.product:nth-child(4n) {
    background: #FAF3E3 !important;
}

/* Image Container */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: 50% 10%;
    margin: 0 !important;
    transition: transform 1s var(--ease-out);
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
}

/* Product Info */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--util);
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
    color: var(--navy) !important;
    margin: 1rem 1.1rem 0.3rem !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    margin: 0 1.1rem 1rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
}

/* Buttons in Loop */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
    margin: 0 1.1rem 1.25rem !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1rem !important;
    text-align: center;
    background: var(--green) !important;
    color: var(--ivory) !important;
    border-radius: 100px !important;
    transition: background 0.3s, transform 0.3s;
    display: block;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover {
    background: var(--green-deep) !important;
    transform: translateY(-2px);
}

/* Single Product Details */
.woocommerce div.product,
.woocommerce-page div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3.5rem !important;
    margin-top: 2rem;
}

@media (max-width: 768px) {

    .woocommerce div.product,
    .woocommerce-page div.product {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce-page div.product .related,
.woocommerce div.product .upsells,
.woocommerce-page div.product .upsells {
    grid-column: 1 / -1 !important;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
    font-family: var(--util);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    color: var(--navy);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.woocommerce div.product .price,
.woocommerce-page div.product .price {
    font-family: var(--util);
    font-size: 1.8rem !important;
    color: var(--gold-deep) !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-product-details__short-description {
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Add to Cart Form details */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
    display: flex !important;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2.2rem;
    flex-wrap: wrap;
}

/* Attributes / Variation dropdowns */
.woocommerce div.product td.label,
.woocommerce-page div.product td.label {
    font-family: var(--util);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
    padding-bottom: 0.8rem;
}

.woocommerce div.product td.value,
.woocommerce-page div.product td.value {
    padding-bottom: 0.8rem;
}

.woocommerce div.product select,
.woocommerce-page div.product select {
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    background: #fff;
    font-family: var(--util);
    color: var(--ink);
    width: 100%;
    max-width: 300px;
}

.woocommerce div.product select:focus,
.woocommerce-page div.product select:focus {
    outline: none;
    border-color: var(--gold);
}

/* Quantity selector */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
    width: 65px;
    height: 48px;
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-family: var(--util);
    font-size: 0.95rem;
}

/* Main single add to cart button */
.woocommerce div.product button.single_add_to_cart_button,
.woocommerce-page div.product button.single_add_to_cart_button {
    height: 48px;
    padding: 0 2.2rem !important;
    background: linear-gradient(120deg, var(--green), var(--green-2)) !important;
    color: var(--ivory) !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    border-radius: 100px !important;
    box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
    transition: all 0.3s !important;
}

.woocommerce div.product button.single_add_to_cart_button:hover,
.woocommerce-page div.product button.single_add_to_cart_button:hover {
    background: var(--green-deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95) !important;
}

/* Product Meta (SKU / Categories) */
.product_meta {
    font-family: var(--util);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    border-top: 1px solid var(--linen);
    padding-top: 1.2rem;
    margin-top: 1.5rem;
}

.product_meta span {
    display: block;
    margin-bottom: 0.4rem;
}

.product_meta a {
    color: var(--green);
    transition: color 0.3s;
}

.product_meta a:hover {
    color: var(--gold-deep);
}

/* Product Tabs */
.woocommerce-tabs {
    margin-block: 4rem 2rem;
    border-top: 1px solid var(--linen);
    padding-top: 3rem;
}

.woocommerce-tabs ul.tabs {
    display: flex !important;
    border-bottom: 1.5px solid var(--linen) !important;
    padding-bottom: 0 !important;
    list-style: none !important;
    margin: 0 0 2rem 0 !important;
    gap: 2.5rem;
}

.woocommerce-tabs ul.tabs::before {
    display: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.8rem 0 !important;
    font-family: var(--util) !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-soft) !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li:hover {
    color: var(--green) !important;
    border-bottom-color: var(--green) !important;
}

.woocommerce-Tabs-panel {
    color: var(--ink-2);
    line-height: 1.7;
    font-size: 0.96rem;
}

.woocommerce-Tabs-panel h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

/* Cart Page */
.woocommerce-cart-form {
    background: #fff;
    border-radius: var(--r);
    padding: 2.2rem;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
}

@media (max-width: 768px) {
    .woocommerce-cart-form {
        padding: 1rem;
        overflow-x: auto;
    }
}

table.shop_table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

table.shop_table th {
    padding: 1rem !important;
    border-bottom: 1.5px solid var(--linen);
    font-family: var(--util);
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--ink-soft);
    letter-spacing: 0.1em;
}

table.shop_table td {
    padding: 1.5rem 1rem !important;
    border-bottom: 1px solid var(--linen-soft);
    vertical-align: middle;
}

table.shop_table td.product-thumbnail img {
    width: 70px;
    height: auto;
    border-radius: var(--r-sm);
    object-fit: cover;
}

table.shop_table td.product-name a {
    font-family: var(--util);
    font-size: 1.15rem;
    color: var(--navy);
    font-weight: 600;
    transition: color 0.3s;
}

table.shop_table td.product-name a:hover {
    color: var(--green);
}

table.shop_table td.product-remove a.remove {
    font-size: 1.5rem !important;
    color: var(--ink-soft) !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    line-height: 1 !important;
}

table.shop_table td.product-remove a.remove:hover {
    color: var(--blush) !important;
}

/* Coupon & Action buttons */
table.shop_table td.actions {
    padding: 1.5rem 1rem !important;
    text-align: right;
}

table.shop_table td.actions .coupon {
    display: inline-flex;
    gap: 0.5rem;
    float: left;
}

@media (max-width: 768px) {
    table.shop_table td.actions .coupon {
        float: none;
        margin-bottom: 1rem;
        display: flex;
    }
}

table.shop_table td.actions input.input-text {
    border: 1.5px solid var(--linen);
    border-radius: 100px;
    padding: 0.6rem 1.25rem;
    font-family: var(--util);
    font-size: 0.8rem;
    width: 180px;
}

table.shop_table td.actions input.input-text:focus {
    outline: none;
    border-color: var(--gold);
}

table.shop_table td.actions .button,
.woocommerce-cart-form button[name="update_cart"] {
    padding: 0.75rem 1.5rem !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    border-radius: 100px !important;
    background: var(--linen-soft) !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--linen) !important;
    transition: all 0.3s !important;
    cursor: pointer;
}

table.shop_table td.actions .button:hover,
.woocommerce-cart-form button[name="update_cart"]:hover {
    background: var(--green) !important;
    color: var(--ivory) !important;
    border-color: var(--green) !important;
}

/* Cart Collaterals */
.cart-collaterals {
    margin-top: 3.5rem;
    display: flex;
    justify-content: flex-end;
}

.cart-collaterals::before,
.cart-collaterals::after {
    display: none !important;
}

.cart_totals {
    width: 460px;
    max-width: 100%;
    background: var(--linen-soft);
    border-radius: var(--r);
    padding: 2.2rem;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
}

.cart_totals h2 {
    font-family: var(--util);
    font-size: 1.6rem;
    color: var(--navy);
    margin-bottom: 1.5rem;
    border-bottom: 1.5px solid var(--linen);
    padding-bottom: 0.8rem;
}

.cart_totals table.shop_table_split {
    width: 100%;
    margin-bottom: 1.5rem;
}

.cart_totals table.shop_table_split th,
.cart_totals table.shop_table_split td {
    padding: 0.8rem 0 !important;
    background: none !important;
    border-bottom: 1px solid rgba(22, 35, 63, 0.08) !important;
}

.cart_totals table.shop_table_split tr.order-total th,
.cart_totals table.shop_table_split tr.order-total td {
    border-bottom: none !important;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy);
}

.wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    padding: 1rem 2rem !important;
    background: linear-gradient(120deg, var(--green), var(--green-2)) !important;
    color: var(--ivory) !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.78rem !important;
    border-radius: 100px !important;
    box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
    transition: all 0.3s !important;
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--green-deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95) !important;
}

/* Checkout Page (classic form only — body also carries .woocommerce-checkout) */
form.woocommerce-checkout {
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 3.5rem !important;
    margin-top: 2rem;
}

form.woocommerce-checkout::before,
form.woocommerce-checkout::after {
    display: none !important;
}

@media (max-width: 992px) {
    form.woocommerce-checkout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

#customer_details {
    background: #fff;
    border-radius: var(--r);
    padding: 2.5rem;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
    display: block !important;
    width: 100% !important;
    float: none !important;
}

#customer_details::before,
#customer_details::after {
    display: none !important;
}

#customer_details .col-1,
#customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 2rem;
}

#customer_details .col-2 {
    margin-bottom: 0;
}

/* Checkout inputs & styling */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    width: 100%;
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    padding: 0.75rem 1.1rem;
    background: #fff;
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--ink);
    transition: border-color 0.3s;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
    outline: none;
    border-color: var(--gold);
}

.woocommerce-checkout label {
    display: block;
    font-family: var(--util);
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

#order_review_heading {
    background: var(--linen-soft);
    border-radius: var(--r) var(--r) 0 0;
    border: 1px solid var(--linen);
    border-bottom: none;
    padding: 2.2rem 2.2rem 0;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

#order_review {
    background: var(--linen-soft);
    border-radius: 0 0 var(--r) var(--r);
    border: 1px solid var(--linen);
    border-top: none;
    padding: 1rem 2.2rem 2.2rem;
    width: 100% !important;
    float: none !important;
}

/* Order review items */
#order_review table.shop_table {
    background: none;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid rgba(22, 35, 63, 0.08) !important;
}

#order_review table.shop_table tr.order-total th,
#order_review table.shop_table tr.order-total td {
    border-bottom: none !important;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy);
}

/* Payment Gateways Panel */
#payment {
    background: none !important;
    padding: 0 !important;
    margin-top: 1.5rem;
}

#payment ul.payment_methods {
    list-style: none;
    padding: 0 0 1.5rem 0 !important;
    margin: 0 0 1.5rem 0 !important;
    border-bottom: 1px solid rgba(22, 35, 63, 0.1) !important;
}

#payment ul.payment_methods li {
    margin-bottom: 1rem;
}

#payment ul.payment_methods li input {
    margin-right: 0.6rem;
}

#payment ul.payment_methods li label {
    display: inline-block;
    font-family: var(--util);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
}

#payment div.payment_box {
    background: var(--linen) !important;
    border-radius: 8px;
    padding: 1rem !important;
    color: var(--ink-2);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0.5rem 0 1.5rem 0 !important;
}

#payment div.payment_box::before {
    display: none !important;
}

/* Place Order Button */
#payment #place_order {
    width: 100% !important;
    padding: 1rem 2rem !important;
    background: linear-gradient(96deg, var(--gold-deep), var(--gold) 55%, var(--gold-2)) !important;
    color: #3a2c08 !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    border-radius: 100px !important;
    box-shadow: 0 12px 24px -14px rgba(168, 126, 51, .7) !important;
    transition: all 0.3s !important;
}

#payment #place_order:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -12px rgba(168, 126, 51, .9) !important;
}

/* My Account Page */
.woocommerce-account .woocommerce {
    display: grid !important;
    gap: 3rem !important;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
    display: none !important;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

.woocommerce-MyAccount-navigation {
    background: #fff;
    border-radius: var(--r);
    padding: 1.5rem;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
    width: 100% !important;
    float: none !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--linen-soft);
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.8rem 1rem;
    font-family: var(--util);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ink-soft);
    transition: all 0.3s;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--green);
    background: var(--green-soft);
    border-radius: 8px;
}

.woocommerce-MyAccount-content {
    background: #fff;
    border-radius: var(--r);
    padding: 2.5rem;
    border: 1px solid var(--linen);
    box-shadow: var(--sh-sm);
    width: 100% !important;
    float: none !important;
}

.woocommerce-MyAccount-content h3 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content p {
    margin-bottom: 1rem;
}

.woocommerce-MyAccount-content a {
    color: var(--green);
    text-decoration: underline;
}

.woocommerce-MyAccount-content a:hover {
    color: var(--gold-deep);
}

/* Form inputs inside account page */
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content select {
    width: 100%;
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    padding: 0.75rem 1.1rem;
    background: #fff;
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--ink);
    margin-bottom: 1rem;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-MyAccount-content select:focus {
    outline: none;
    border-color: var(--gold);
}

/* Buttons in forms */
.woocommerce-MyAccount-content button.button {
    padding: 0.8rem 2rem !important;
    background: var(--green) !important;
    color: var(--ivory) !important;
    font-family: var(--util) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    border-radius: 100px !important;
    box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
    transition: all 0.3s;
}

.woocommerce-MyAccount-content button.button:hover {
    background: var(--green-deep) !important;
    transform: translateY(-2px);
}

/* Notices and Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 1rem 1.5rem !important;
    border-radius: 8px !important;
    font-family: var(--util) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 2rem !important;
    border: none !important;
    border-left: 4px solid !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

.woocommerce-message {
    background: var(--green-soft) !important;
    border-left-color: var(--green) !important;
    color: var(--green-deep) !important;
}

.woocommerce-info {
    background: var(--sky-soft) !important;
    border-left-color: var(--sky) !important;
    color: var(--navy-deep) !important;
}

.woocommerce-error {
    background: var(--blush-soft) !important;
    border-left-color: var(--blush) !important;
    color: #721c24 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.woocommerce-error li {
    margin-left: 1.5rem;
    list-style: disc;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    padding: 0.5rem 1.25rem !important;
    background: var(--green) !important;
    color: var(--ivory) !important;
    font-size: 0.72rem !important;
    border-radius: 100px !important;
    text-transform: uppercase;
    margin-left: 1.5rem !important;
    float: right;
    transition: all 0.3s;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
    background: var(--green-deep) !important;
}

/* Shipping calculator & cart forms */
.shipping-calculator-button {
    color: var(--green);
    font-weight: 600;
}

.shipping-calculator-form input.input-text,
.shipping-calculator-form select {
    border: 1.5px solid var(--linen);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.8rem;
    width: 100%;
}

.shipping-calculator-form button.button {
    padding: 0.5rem 1rem !important;
    font-size: 0.7rem !important;
}

/* Responsive fixes for single product */
@media (max-width: 576px) {

    .woocommerce div.product button.single_add_to_cart_button,
    .woocommerce-page div.product button.single_add_to_cart_button {
        width: 100%;
    }

    .woocommerce div.product form.cart,
    .woocommerce-page div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Dira Journal Card Hover Styles */
.journal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(12, 53, 39, 0.08) !important;
}

.journal-card:hover .journal-card__img img {
    transform: scale(1.05);
}

.journal-card__title a:hover {
    color: var(--gold) !important;
}

.btn-text:hover {
    color: var(--green) !important;
}

.wa-float i.bxl-whatsapp {
    font-size: 40px;
}


/* ============================================================
   DIRA — Shop Page Styles  (v2)
   Scope: everything is nested under .woocommerce-container
   so no other page or component is affected.
   Palette / type pulled from the homepage theme:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels/buttons)
   ============================================================ */

.woocommerce-container {
    --dira-green: #0C3527;
    --dira-green-deep: #07231A;
    --dira-forest: #0F4030;
    --dira-gold: #C9A24B;
    --dira-gold-soft: #E3C98A;
    --dira-ivory: #FBF7EF;
    --dira-sand: #F3EBDD;
    --dira-ink: #26251F;
    --dira-muted: #8A8578;
    --dira-line: rgba(12, 53, 39, .10);
    --dira-radius: 12px;
    --dira-shadow: 0 1px 2px rgba(12, 53, 39, .05), 0 6px 20px rgba(12, 53, 39, .07);
    --dira-shadow-lift: 0 2px 4px rgba(12, 53, 39, .06), 0 18px 40px rgba(12, 53, 39, .14);

    background: var(--dira-ivory);
    color: var(--dira-ink);
    font-family: var(--util);
}

.woocommerce-container .wrap {
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-top: 0 !important;
}

/* ------------------------------------------------------------
   1. HERO BANNER — "Shop"
   Same width as the site container (stays inside .wrap).
   Layered gradients + fine geometric line-work + soft gold
   "blurred orb" glows give it depth without a flat green fill.
   ------------------------------------------------------------ */

.woocommerce-container .page-title {
    position: relative;
    font-family: var(--util) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 56px);
    padding: clamp(44px, 7vw, 72px) 24px;
    border-radius: calc(var(--dira-radius) + 6px);

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--dira-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);

    color: var(--dira-ivory);
    font-family: var(--util);
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: .01em;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

/* gold eyebrow above the title */
.woocommerce-container .page-title::before {
    content: "The Collection";
    font-family: var(--util);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .34em;
    text-indent: .34em;
    /* optically centers tracked-out text */
    text-transform: uppercase;
    color: var(--dira-gold-soft);
    text-shadow: none;
}

/* thin gold rule + ornament under the title */
.woocommerce-container .page-title::after {
    content: "";
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--dira-gold) 25%, var(--dira-gold) 75%, transparent);
    opacity: .85;
}

/* ------------------------------------------------------------
   2. TOOLBAR — result count + sorting
   ------------------------------------------------------------ */

.woocommerce-container .woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-container .woocommerce-result-count {
    float: left;
    margin: 0 0 28px;
    padding-top: 13px;
    font-family: var(--util);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dira-muted);
}

.woocommerce-container .woocommerce-ordering {
    float: right;
    margin: 0 0 28px;
}

.woocommerce-container .woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 44px 8px 20px;
    border: 1px solid var(--dira-line);
    border-radius: 8px;
    background:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A24B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px,
        #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    color: var(--dira-ink);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(12, 53, 39, .04);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.woocommerce-container .woocommerce-ordering select.orderby:hover {
    border-color: rgba(201, 162, 75, .6);
}

.woocommerce-container .woocommerce-ordering select.orderby:focus-visible {
    outline: none;
    border-color: var(--dira-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .25);
}

/* ------------------------------------------------------------
   3. PRODUCT GRID
   ------------------------------------------------------------ */

.woocommerce-container ul.products {
    clear: both;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    margin: 0 0 clamp(48px, 7vw, 80px);
    padding: 0;
    list-style: none;
}

.woocommerce-container ul.products::before,
.woocommerce-container ul.products::after {
    content: none;
    /* kill WooCommerce clearfix pseudo-elements */
}

/* ---- card shell -------------------------------------------- */

.woocommerce-container ul.products li.product {
    position: relative;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* clips the image zoom cleanly */

    background: #fff;
    border: 1px solid var(--dira-line);
    border-radius: var(--dira-radius);
    box-shadow: var(--dira-shadow);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1),
        box-shadow .3s ease,
        border-color .3s ease;
}

.woocommerce-container ul.products li.product:hover,
.woocommerce-container ul.products li.product:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--dira-shadow-lift);
    border-color: rgba(201, 162, 75, .40);
}

/* ---- product link block ------------------------------------ */

.woocommerce-container ul.products li.product .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* ---- image area: edge-to-edge, consistent ratio ------------ */

.woocommerce-container ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    margin: 0;
    background: var(--dira-sand);
    border-radius: 0;
    /* card clips the top corners */
    border-bottom: 1px solid var(--dira-line);
    transform: translateZ(0);
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.woocommerce-container ul.products li.product:hover img {
    transform: scale(1.045);
}

/* subtle gradient scrim at the image base for depth */
.woocommerce-container ul.products li.product .woocommerce-loop-product__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 4 / 5;
    background: linear-gradient(180deg, rgba(12, 53, 39, .04) 0%, transparent 18%, transparent 78%, rgba(12, 53, 39, .07) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ---- sale badge -------------------------------------------- */

.woocommerce-container ul.products li.product .onsale {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    background: var(--dira-green);
    color: var(--dira-gold-soft);
    border: 1px solid rgba(227, 201, 138, .35);
    border-radius: 6px;
    font-family: "Jost", sans-serif;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(12, 53, 39, .25);
}

/* ---- card body --------------------------------------------- */

.woocommerce-container ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 18px 20px 4px;
    font-family: var(--util);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--dira-green);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* keeps every card the same height */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}

.woocommerce-container ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--dira-forest);
}

/* price row — pinned above the button */
.woocommerce-container ul.products li.product .price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: auto 0 0;
    /* pushes price + button to the bottom */
    padding: 10px 0;
    font-size: .98rem;
    color: var(--dira-ink);
}

.woocommerce-container ul.products li.product .price .amount {
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--dira-ink);
}

.woocommerce-container ul.products li.product .price ins {
    text-decoration: none;
}

.woocommerce-container ul.products li.product .price ins .amount {
    color: var(--dira-green);
}

.woocommerce-container ul.products li.product .price del {
    order: 2;
    /* old price sits after the current price, like premium shops */
    font-size: .85rem;
    opacity: .95;
}

.woocommerce-container ul.products li.product .price del .amount {
    font-weight: 400;
    color: var(--dira-muted);
}

/* ---- add-to-cart button ------------------------------------ */

.woocommerce-container ul.products li.product .add_to_cart_button {
    display: block;
    margin: 0 20px 20px;
    padding: 12px 18px;
    background: transparent;
    color: var(--dira-green);
    border: 1px solid rgba(12, 53, 39, .28);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-family: var(--util);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.woocommerce-container ul.products li.product .add_to_cart_button:hover {
    background: var(--dira-green);
    border-color: var(--dira-green);
    color: var(--dira-ivory);
    box-shadow: 0 8px 18px rgba(12, 53, 39, .22);
}

.woocommerce-container ul.products li.product .add_to_cart_button:focus-visible {
    outline: none;
    border-color: var(--dira-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .35);
}

/* "added" / loading states injected by WooCommerce AJAX */
.woocommerce-container ul.products li.product .add_to_cart_button.loading {
    opacity: .6;
    pointer-events: none;
}

.woocommerce-container ul.products li.product .add_to_cart_button.added::after {
    content: " ✓";
}

/* the "View cart" link WooCommerce appends after adding */
.woocommerce-container ul.products li.product .added_to_cart {
    display: block;
    margin: -10px 20px 18px;
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dira-gold);
    text-decoration: none;
}

.woocommerce-container ul.products li.product .added_to_cart:hover {
    color: var(--dira-green);
}

/* ------------------------------------------------------------
   4. NOTICES (messages, errors)
   ------------------------------------------------------------ */

.woocommerce-container .woocommerce-message,
.woocommerce-container .woocommerce-info,
.woocommerce-container .woocommerce-error {
    margin: 0 0 28px;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid var(--dira-line);
    border-left: 3px solid var(--dira-gold);
    border-radius: 10px;
    color: var(--dira-ink);
    font-size: .95rem;
    box-shadow: var(--dira-shadow);
}

.woocommerce-container .woocommerce-error {
    border-left-color: #B4443C;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .woocommerce-container ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .woocommerce-container ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .woocommerce-container .woocommerce-result-count,
    .woocommerce-container .woocommerce-ordering {
        float: none;
    }

    .woocommerce-container .woocommerce-result-count {
        padding-top: 0;
        margin-bottom: 12px;
        text-align: center;
    }

    .woocommerce-container .woocommerce-ordering {
        display: flex;
        justify-content: center;
        margin-bottom: 26px;
    }

    .woocommerce-container .woocommerce-ordering select.orderby {
        width: 100%;
        max-width: 340px;
    }

    .woocommerce-container ul.products {
        gap: 14px;
    }

    .woocommerce-container ul.products li.product .woocommerce-loop-product__title {
        padding: 14px 14px 2px;
        font-size: .95rem;
    }

    .woocommerce-container ul.products li.product .price {
        padding: 6px 14px 12px;
        font-size: .92rem;
    }

    .woocommerce-container ul.products li.product .add_to_cart_button {
        margin: 0 14px 14px;
        padding: 11px 12px;
        font-size: .72rem;
        letter-spacing: .12em;
    }

    .woocommerce-container ul.products li.product .onsale {
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        font-size: .6rem;
    }
}

@media (max-width: 420px) {
    .woocommerce-container ul.products {
        grid-template-columns: 1fr;
    }

    .woocommerce-container ul.products li.product {
        max-width: 360px;
        margin-inline: auto !important;
        width: 100% !important;
    }
}

/* ------------------------------------------------------------
   6. ACCESSIBILITY / MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .woocommerce-container ul.products li.product,
    .woocommerce-container ul.products li.product img,
    .woocommerce-container ul.products li.product .add_to_cart_button {
        transition: none;
    }

    .woocommerce-container ul.products li.product:hover {
        transform: none;
    }

    .woocommerce-container ul.products li.product:hover img {
        transform: none;
    }
}


.woocommerce-shop .woocommerce-container {
    padding-top: 0;
}


/* ============================================================
   DIRA — PRODUCT DETAILS PAGE (final)
   ------------------------------------------------------------
   All rules are scoped under .single-product — the body class
   WordPress adds only on single product pages — so nothing
   here can affect any other page or component.

   Strategy: the theme's generic ".product" card styles were
   bleeding into WooCommerce's markup and breaking the page.
   This stylesheet takes FULL ownership of the product block:
   it turns div.product into one deliberate white panel and
   rebuilds every element inside it with hard overrides, so
   the result is stable no matter what the theme ships.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.single-product .woocommerce-container {
    --g: #0C3527;
    /* deep green   */
    --g-dark: #07231A;
    /* darkest green*/
    --g-soft: #0F4030;
    /* forest       */
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 12px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
}

.single-product .woocommerce-container .wrap {
    max-width: 90%;
    margin-inline: auto;
    padding-block: clamp(28px, 4.5vw, 56px) clamp(48px, 7vw, 88px);
    padding-inline: clamp(16px, 4vw, 32px);
}

.single-product .woocommerce-notices-wrapper:empty {
    display: none;
}

/* ============================================================
   1. THE PRODUCT PANEL
   One clean white panel holds the whole product. This is a
   deliberate design decision AND it overrides the theme's
   tinted ".product" card in a single move.
   ============================================================ */

.single-product div.product {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
    align-items: start;

    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(24px, 4vw, 56px) !important;
    margin: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    float: none !important;
    width: auto !important;
    gap: 30px !important;
}

.single-product div.product::before,
.single-product div.product::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   2. SALE BADGE
   ============================================================ */

.single-product div.product>.onsale {
    position: absolute !important;
    z-index: 5;
    top: calc(clamp(24px, 4vw, 56px) + 14px);
    left: calc(clamp(24px, 4vw, 56px) + 14px);
    right: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    line-height: 1 !important;
    background: var(--g) !important;
    color: var(--gold-soft) !important;
    border: 1px solid rgba(227, 201, 138, .4) !important;
    border-radius: 6px !important;
    font-family: "Jost", sans-serif !important;
    font-size: .66rem !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 14px rgba(12, 53, 39, .3) !important;
}

/* ============================================================
   3. GALLERY  (left column)
   ============================================================ */

.single-product div.product div.images.woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* main image */
.single-product div.product div.images .woocommerce-product-gallery__image {
    background: var(--sand) !important;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.single-product div.product div.images .woocommerce-product-gallery__image a {
    display: block;
}

.single-product div.product div.images .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sand);
}

/* extra gallery images stacked by WooCommerce before the JS
   slider boots — keep them tidy if JS is off */
.single-product div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image+.woocommerce-product-gallery__image {
    margin-top: 12px !important;
}

/* thumbnails (created by the gallery script) */
.single-product div.product div.images .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

.single-product div.product div.images .flex-control-thumbs li {
    float: none !important;
    width: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

.single-product div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    opacity: .45;
    transition: opacity .2s ease, border-color .2s ease;
}

.single-product div.product div.images .flex-control-thumbs li img:hover {
    opacity: .85;
}

.single-product div.product div.images .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--gold) !important;
}

/* zoom / fullscreen trigger */
.single-product div.product div.images .woocommerce-product-gallery__trigger {
    top: 14px !important;
    right: 14px !important;
    z-index: 6;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, .95) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(12, 53, 39, .16) !important;
    transition: transform .2s ease;
}

.single-product div.product div.images .woocommerce-product-gallery__trigger:hover {
    transform: scale(1.07);
}

/* ============================================================
   4. SUMMARY  (right column)
   Clear vertical rhythm: eyebrow → title → price → description
   → buy row → meta. Every block earns its spacing.
   ============================================================ */

.single-product div.product div.summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(0px, 1vw, 8px) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
}

/* --- eyebrow + title ------------------------------------- */

.single-product div.product .product_title {
    order: 1;
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.9rem, 3.3vw, 2.5rem) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    color: var(--g) !important;
    text-align: left !important;
}

.single-product div.product .product_title::before {
    content: "House of DIRA";
    display: block;
    margin-bottom: 14px;
    font-family: var(--util);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
}

/* --- price ------------------------------------------------ */

.single-product div.product .summary p.price {
    order: 2;
    display: flex !important;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 24px !important;
    padding: 0 !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    color: var(--g) !important;
    text-align: left !important;
}

.single-product div.product .summary p.price .amount {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    color: var(--g) !important;
}

.single-product div.product .summary p.price ins {
    text-decoration: none !important;
    background: none !important;
    padding: 0 !important;
}

.single-product div.product .summary p.price del {
    order: 2;
    font-size: 1rem !important;
    opacity: 1 !important;
}

.single-product div.product .summary p.price del .amount {
    font-weight: 400 !important;
    color: var(--muted) !important;
    text-decoration: line-through;
}

/* --- rating stars ----------------------------------------- */

.single-product div.product .summary .woocommerce-product-rating {
    order: 3;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 0.88rem !important;
    color: var(--muted) !important;
}

.single-product div.product .summary .woocommerce-product-rating::before,
.single-product div.product .summary .woocommerce-product-rating::after {
    content: none !important;
    display: none !important;
}

.single-product div.product .summary .woocommerce-product-rating .star-rating {
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
    color: var(--gold) !important;
    letter-spacing: 2px;
    width: 6.4em;
}

.single-product div.product .summary .woocommerce-product-rating a.woocommerce-review-link {
    display: inline-block !important;
    float: none !important;
    white-space: nowrap !important;
    color: var(--muted) !important;
    font-family: var(--util);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1 !important;
    margin: 0 !important;
}

.single-product div.product .summary .woocommerce-product-rating a.woocommerce-review-link .count {
    display: contents;

}

.single-product div.product .summary .woocommerce-product-rating a.woocommerce-review-link:hover {
    color: var(--g) !important;
    text-decoration: underline;
}

/* --- short description ------------------------------------ */

.single-product div.product .woocommerce-product-details__short-description {
    order: 4;
    margin: 0 0 28px !important;
    padding: 20px 0 !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent !important;
}

.nxp-summary .woocommerce-product-details__short-description {
    max-width: 100% !important;
}

.single-product div.product .woocommerce-product-details__short-description p {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    color: var(--body-c) !important;
    max-width: 100%;
    text-align: left !important;
}

.single-product div.product .woocommerce-product-details__short-description p br {
    display: none;
}

.single-product div.product .woocommerce-product-details__short-description ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.single-product div.product .woocommerce-product-details__short-description ul li {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
    line-height: 1.4;
    color: #555;
}

.single-product div.product .woocommerce-product-details__short-description ul li strong {
    display: block;
    width: 175px;
    min-width: 175px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #222;
    text-align: left;
}

/* --- buy row: quantity + add to cart ----------------------- */

.single-product div.product .summary form.cart {
    order: 5;
    display: flex !important;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: 100%;
}

.single-product div.product .summary form.cart::before,
.single-product div.product .summary form.cart::after {
    content: none !important;
    display: none !important;
}

.single-product div.product .summary form.cart div.quantity {
    float: none !important;
    margin: 0 !important;
    display: flex;
    margin-bottom: 10px !important;
}


.single-product div.product .summary form.cart .qty {
    width: 88px !important;
    height: auto !important;
    min-height: 54px;
    padding: 0 8px !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid #CFC7B4 !important;
    border-radius: 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--g) !important;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.single-product div.product .summary form.cart .qty::-webkit-outer-spin-button,
.single-product div.product .summary form.cart .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-product div.product .summary form.cart .qty:hover {
    border-color: var(--gold) !important;
}

.single-product div.product .summary form.cart .qty:focus,
.single-product div.product .summary form.cart .qty:focus-visible {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.single-product div.product .summary form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    max-width: 360px;
    min-height: 54px;
    margin: 0 !important;
    padding: 14px 32px !important;
    background: var(--g) !important;
    color: #FDFBF6 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(12, 53, 39, .22);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.single-product div.product .summary form.cart .single_add_to_cart_button:hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    box-shadow: 0 12px 26px rgba(201, 162, 75, .38);
    transform: translateY(-1px);
}

.single-product div.product .summary form.cart .single_add_to_cart_button:active {
    transform: translateY(0);
}

.single-product div.product .summary form.cart .single_add_to_cart_button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .45);
}

/* --- meta: SKU / categories + assurance strip --------------- */

.single-product div.product .summary .product_meta {
    order: 6;
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 10px;
    margin: 0 !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid var(--line);
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .74rem !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted) !important;
    text-align: left !important;
}

.single-product div.product .summary .product_meta>span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.single-product div.product .summary .product_meta .sku {
    color: var(--ink) !important;
    letter-spacing: .1em;
}

.single-product div.product .summary .product_meta a {
    color: var(--g) !important;
    letter-spacing: .1em;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}

.single-product div.product .summary .product_meta a:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
}

/* assurance strip — mirrors the site's own announce-bar promises */
.single-product div.product .summary .product_meta::after {
    content: "✦  Free shipping in Malaysia on orders above RM250\A✦  100% organic cotton, OEKO-TEX fabrics\A✦  Secure payment — FPX, cards, GrabPay & Touch 'n Go";
    white-space: pre-line;
    flex-basis: 100%;
    margin-top: 16px;
    padding: 15px 18px;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: .84rem;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 2;
    text-transform: none;
    color: var(--g-soft);
}

/* ============================================================
   5. TABS — description / reviews
   Flat underline tab bar over a quiet content area, separated
   from the buy section by a full-width divider.
   ============================================================ */

.single-product div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    width: 100% !important;
    margin: clamp(36px, 5vw, 56px) 0 0 !important;
    padding: clamp(28px, 4vw, 40px) 0 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-product div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 28px;
    margin: 0 0 26px !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block !important;
    padding: 0 2px 14px !important;
    margin: 0 0 -1px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    box-shadow: none !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: color .2s ease, border-color .2s ease;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--g) !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--g) !important;
    border-bottom-color: var(--gold) !important;
}

/* tab panels — flat, readable, no boxes-in-boxes */
.single-product div.product .woocommerce-Tabs-panel {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* hide the duplicate "Description" heading — the active tab
   already labels this content */
.single-product div.product .woocommerce-Tabs-panel--description>h2:first-child {
    display: none;
}

.single-product div.product .woocommerce-Tabs-panel h2 {
    margin: 0 0 14px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.25rem !important;
    color: var(--g) !important;
}

.single-product div.product .woocommerce-Tabs-panel p {
    margin: 0 0 1em !important;
    max-width: 70ch;
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: var(--body-c) !important;
}

.single-product div.product .woocommerce-Tabs-panel p:last-child {
    margin-bottom: 0 !important;
}

/* ============================================================
   6. REVIEWS
   ============================================================ */

.single-product div.product .woocommerce-Reviews-title {
    margin: 0 0 12px !important;
    font-family: var(--util);
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--g) !important;
}

.single-product div.product .woocommerce-Reviews .woocommerce-noreviews {
    margin: 0 0 26px !important;
    padding: 14px 18px !important;
    background: var(--ivory) !important;
    border: 1px dashed #D8CFBB !important;
    border-radius: 10px !important;
    color: var(--muted) !important;
    font-size: .95rem !important;
}

.single-product div.product .comment-reply-title {
    display: block;
    margin: 0 0 18px !important;
    font-family: var(--util);
    font-size: 1.1rem !important;
    color: var(--g) !important;
}

.single-product div.product .comment-form label {
    display: block;
    margin: 0 0 7px !important;
    font-family: "Jost", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

.single-product div.product .comment-form select,
.single-product div.product .comment-form textarea {
    width: 100%;
    max-width: 560px;
    padding: 13px 15px !important;
    background: #fff !important;
    border: 1px solid #CFC7B4 !important;
    border-radius: 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.single-product div.product .comment-form select {
    width: auto;
    min-width: 210px;
    cursor: pointer;
}

.single-product div.product .comment-form select:focus,
.single-product div.product .comment-form textarea:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.single-product div.product .comment-form .comment-form-rating,
.single-product div.product .comment-form .comment-form-comment {
    margin: 0 0 20px !important;
}

.single-product div.product .comment-form input[type="submit"] {
    padding: 14px 36px !important;
    background: var(--g) !important;
    color: #FDFBF6 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: "Jost", sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.single-product div.product .comment-form input[type="submit"]:hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    box-shadow: 0 8px 20px rgba(201, 162, 75, .35);
}

/* ============================================================
   7. RELATED PRODUCTS
   Same premium card language as the shop page; card width is
   controlled so 2 items never stretch awkwardly.
   ============================================================ */

.single-product div.product section.related {
    grid-column: 1 / -1;
    width: 100% !important;
    margin: clamp(36px, 5vw, 56px) 0 0 !important;
    padding: clamp(28px, 4vw, 40px) 0 0 !important;
    border-top: 1px solid var(--line) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.single-product div.product section.related>h2 {
    margin: 0 0 24px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem) !important;
    color: var(--g) !important;
    text-align: left !important;
}

.single-product div.product section.related ul.products {
    clear: both;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: 100%;
}

.single-product div.product section.related ul.products::before,
.single-product div.product section.related ul.products::after {
    content: none !important;
}

.single-product div.product section.related ul.products li.product {
    position: relative;
    float: none !important;
    width: auto !important;
    max-width: 300px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    text-align: left !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.single-product div.product section.related ul.products li.product:hover,
.single-product div.product section.related ul.products li.product:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(201, 162, 75, .45) !important;
}

.single-product div.product section.related ul.products li.product .woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    color: inherit !important;
}

.single-product div.product section.related ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    background: var(--sand) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.single-product div.product section.related ul.products li.product:hover img {
    transform: scale(1.04);
}

.single-product div.product section.related ul.products li.product .woocommerce-loop-product__title {
    margin: 0 !important;
    padding: 16px 18px 2px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    color: var(--g) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-product div.product section.related ul.products li.product .price {
    display: flex !important;
    align-items: baseline;
    justify-content: flex-start;
    gap: 9px;
    margin: auto 0 0 !important;
    padding: 8px 18px 14px !important;
    font-size: .96rem !important;
    text-align: left !important;
    color: var(--ink) !important;
}

.single-product div.product section.related ul.products li.product .price .amount {
    font-weight: 600 !important;
    color: var(--ink) !important;
}

.single-product div.product section.related ul.products li.product .price ins {
    text-decoration: none !important;
}

.single-product div.product section.related ul.products li.product .price del {
    order: 2;
    font-size: .84rem !important;
}

.single-product div.product section.related ul.products li.product .price del .amount {
    font-weight: 400 !important;
    color: var(--muted) !important;
}

.single-product div.product section.related ul.products li.product .add_to_cart_button {
    display: block !important;
    width: auto !important;
    margin: 0 18px 18px !important;
    padding: 11px 16px !important;
    background: transparent !important;
    color: var(--g) !important;
    border: 1px solid #BFC7C0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .76rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.single-product div.product section.related ul.products li.product .add_to_cart_button:hover {
    background: var(--g) !important;
    border-color: var(--g) !important;
    color: #FDFBF6 !important;
}

.single-product div.product section.related ul.products li.product .added_to_cart {
    display: block;
    margin: -8px 18px 16px !important;
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold) !important;
    text-decoration: none !important;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 992px) {
    .single-product div.product {
        grid-template-columns: 1fr;
    }

    .single-product div.product div.images.woocommerce-product-gallery {
        position: static;
        max-width: 560px;
        margin-bottom: 32px !important;
    }
}

@media (max-width: 640px) {
    .single-product div.product {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .single-product div.product>.onsale {
        top: calc(18px + 12px);
        left: calc(18px + 12px);
    }

    .single-product div.product .summary form.cart {
        flex-wrap: wrap;
    }

    .single-product div.product .summary form.cart .single_add_to_cart_button {
        flex: 1 1 100%;
        max-width: none;
    }

    .single-product div.product .woocommerce-tabs ul.tabs {
        gap: 20px;
    }

    .single-product div.product .woocommerce-tabs ul.tabs li a {
        font-size: .72rem !important;
        letter-spacing: .12em !important;
        padding-bottom: 12px !important;
    }

    .single-product div.product section.related ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-product div.product section.related ul.products li.product {
        max-width: none;
    }

    .single-product div.product section.related ul.products li.product .woocommerce-loop-product__title {
        padding: 13px 13px 2px !important;
        font-size: .92rem !important;
    }

    .single-product div.product section.related ul.products li.product .price {
        padding: 6px 13px 10px !important;
        font-size: .9rem !important;
    }

    .single-product div.product section.related ul.products li.product .add_to_cart_button {
        margin: 0 13px 13px !important;
        padding: 10px 10px !important;
        font-size: .7rem !important;
        letter-spacing: .1em !important;
    }
}

@media (max-width: 400px) {
    .single-product div.product section.related ul.products {
        grid-template-columns: 1fr;
    }

    .single-product div.product section.related ul.products li.product {
        max-width: 340px;
        margin-inline: auto !important;
    }
}

/* ============================================================
   9. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .single-product div.product *,
    .single-product div.product *::before,
    .single-product div.product *::after {
        transition: none !important;
    }

    .single-product div.product section.related ul.products li.product:hover,
    .single-product div.product section.related ul.products li.product:hover img,
    .single-product div.product .summary form.cart .single_add_to_cart_button:hover,
    .single-product div.product div.images .woocommerce-product-gallery__trigger:hover {
        transform: none !important;
    }
}

/* ============================================================
   DIRA — HELP PAGE
   ------------------------------------------------------------
   Parent scope: .page-id-28  (as requested — this class
   is added to <body> by WordPress's customizer-support script).

   NOTE: that class is injected by JavaScript and mainly exists
   for logged-in admin sessions, so it may be missing for normal
   visitors. If styles ever don't apply for logged-out users,
   do a find-and-replace of ".page-id-28" with
   ".page-id-28" (the Help page's permanent body class) —
   everything else stays identical.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.page-id-28 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 12px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-id-28 .page-container .wrap {
    margin-inline: auto;
    padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
    padding-inline: clamp(16px, 4vw, 32px);
}

/* smooth anchor jumps from footer links (#shipping, #returns…)
   land below the sticky header instead of underneath it */
.page-id-28 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE HEADER — eyebrow + title + gold rule
   ============================================================ */

.page-id-28 .page-container .entry-header {
    text-align: center;
    margin: 0 0 clamp(36px, 5.5vw, 60px) !important;
}

.page-id-28 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 0 14px !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
}

.page-id-28 .page-container .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
    line-height: 1.1 !important;
    color: var(--g) !important;
}

/* short gold rule under the title */
.page-id-28 .page-container .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 22px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
}

/* ============================================================
   2. LAYOUT — sidebar + content
   (Bootstrap's .row / .col-lg-* handle the columns; we add
   breathing room and alignment.)
   ============================================================ */

.page-id-28 .page-container .entry-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--body-c);
}

.page-id-28 .page-container .entry-content>.row {
    align-items: flex-start;
}

/* ============================================================
   3. SIDEBAR — "Send a Message" card
   Overrides the inline linen background with the theme's own
   surfaces. !important is required to beat inline styles.
   ============================================================ */

.page-id-28 .page-container .col-lg-4>div[style] {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--gold) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(22px, 2.6vw, 32px) !important;
    top: 120px !important;
    /* clears the sticky site header */
}

.page-id-28 .page-container .col-lg-4 h3 {
    margin: 0 0 8px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.35rem !important;
    color: var(--g) !important;
}

.page-id-28 .page-container .col-lg-4 h4 {
    margin: 0 0 14px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    color: var(--g) !important;
}

.page-id-28 .page-container .col-lg-4 .small.text-muted {
    color: var(--muted) !important;
    font-size: .92rem !important;
    line-height: 1.65;
}

/* form labels */
.page-id-28 .page-container #dira-contact-form label {
    display: block !important;
    margin-bottom: 7px !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    position: absolute;
    left: 20px;
    top: 14px;
}

/* inputs + textarea — override inline styles */
.page-id-28 .page-container #dira-contact-form .form-control {
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--ivory) !important;
    border: 1px solid #D8CFBB !important;
    border-radius: 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-id-28 .page-container #dira-contact-form .form-control:hover {
    border-color: var(--gold) !important;
}

.page-id-28 .page-container #dira-contact-form .form-control:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.page-id-28 .page-container #dira-contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical !important;
}

.page-id-28 .page-container #dira-contact-form .mb-3 {
    margin-bottom: 16px !important;
    position: relative;
}

/* submit button */
.page-id-28 .page-container #dira-contact-form button[type="submit"] {
    width: 100%;
    padding: 14px 24px !important;
    background: var(--g) !important;
    color: #FDFBF6 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(12, 53, 39, .2);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-id-28 .page-container #dira-contact-form button[type="submit"]:hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
    transform: translateY(-1px);
}

.page-id-28 .page-container #dira-contact-form button[type="submit"]:active {
    transform: translateY(0);
}

/* divider inside the card */
.page-id-28 .page-container .col-lg-4 hr {
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-block: 24px !important;
    opacity: 1;
}

/* direct-support buttons */
.page-id-28 .page-container .col-lg-4 a.btn {
    display: block !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.page-id-28 .page-container .col-lg-4 a.btn--gold {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    border: 1px solid var(--gold) !important;
    margin-bottom: 12px !important;
}

.page-id-28 .page-container .col-lg-4 a.btn--gold:hover {
    background: var(--gold-soft) !important;
    border-color: var(--gold-soft) !important;
    box-shadow: 0 8px 20px rgba(201, 162, 75, .35);
}

.page-id-28 .page-container .col-lg-4 a.btn--ghost {
    background: transparent !important;
    color: var(--g) !important;
    border: 1px solid #BFC7C0 !important;
}

.page-id-28 .page-container .col-lg-4 a.btn--ghost:hover {
    background: var(--g) !important;
    border-color: var(--g) !important;
    color: #FDFBF6 !important;
}

/* ============================================================
   4. "HOW TO ORDER" FEATURE CARD
   Replaces the inline sky-blue panel with a deep-green
   feature card that matches the brand.
   ============================================================ */

.page-id-28 .page-container .col-lg-8>div[style] {
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    border: 1px solid rgba(227, 201, 138, .25) !important;
    border-radius: 16px !important;
    padding: clamp(24px, 3.2vw, 40px) !important;
    box-shadow: var(--shadow-md) !important;
    color: rgba(251, 247, 239, .88) !important;
    margin-bottom: clamp(36px, 5vw, 52px) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] h3 {
    margin: 0 0 12px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.45rem !important;
    color: #FDFBF6 !important;
}

.page-id-28 .page-container .col-lg-8>div[style] h4 {
    margin: 22px 0 8px !important;
    font-family: "Jost", sans-serif !important;
    font-weight: 500 !important;
    font-size: .78rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--gold-soft) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] p {
    color: rgba(251, 247, 239, .85) !important;
    line-height: 1.75;
}

.page-id-28 .page-container .col-lg-8>div[style] p.small {
    color: rgba(251, 247, 239, .6) !important;
    font-size: .9rem !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol {
    margin: 8px 0 0 !important;
    padding-left: 20px !important;
    color: rgba(251, 247, 239, .85) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol li {
    padding-left: 6px;
    line-height: 2 !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol li::marker {
    color: var(--gold);
    font-weight: 600;
}

.page-id-28 .page-container .col-lg-8>div[style] strong {
    color: #FDFBF6 !important;
}

/* ============================================================
   5. FAQ SECTION
   Numbered Fraunces headings with gold markers, readable body
   copy, and hairline separation between entries.
   ============================================================ */

.page-id-28 .page-container .col-lg-8 h2.d3 {
    margin: 0 0 26px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.5rem, 2.8vw, 1.95rem) !important;
    color: var(--g) !important;
    display: flex;
    align-items: center;
    gap: 18px;
}

.page-id-28 .page-container .col-lg-8 h2.d3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 75, .55), rgba(201, 162, 75, 0));
}

/* each FAQ entry */
.page-id-28 .page-container .col-lg-8>.mb-4 {
    margin: 0 0 18px !important;
    padding: clamp(20px, 2.4vw, 28px) !important;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.page-id-28 .page-container .col-lg-8>.mb-4:hover {
    border-color: rgba(201, 162, 75, .4);
    box-shadow: var(--shadow-md);
}

.page-id-28 .page-container .col-lg-8>.mb-4 h4 {
    margin: 0 0 10px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.15rem !important;
    color: var(--g) !important;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.page-id-28 .page-container .col-lg-8>.mb-4 h4::before {
    content: "✦";
    font-size: .7rem;
    color: var(--gold);
    flex: 0 0 auto;
}

.page-id-28 .page-container .col-lg-8>.mb-4 p {
    margin: 0 0 12px !important;
    color: var(--body-c) !important;
    line-height: 1.75 !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 p:last-child {
    margin-bottom: 0 !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul {
    margin: 6px 0 0 !important;
    padding-left: 22px !important;
    list-style: none !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li {
    position: relative;
    margin-bottom: 8px;
    line-height: 1.7;
    color: var(--body-c);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: .66em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li strong {
    color: var(--ink);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li em {
    color: var(--g-soft);
    font-style: normal;
    font-weight: 500;
}

.page-id-28 .page-container .col-lg-8 strong {
    color: var(--ink);
    font-weight: 600;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    /* sidebar stacks above content — release the sticky */
    .page-id-28 .page-container .col-lg-4>div[style] {
        position: static !important;
    }

    .page-id-28 .page-container .col-lg-8 {
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
    }
}

@media (max-width: 640px) {
    .page-id-28 .page-container .col-lg-8>.mb-4 {
        padding: 18px !important;
    }

    .page-id-28 .page-container .col-lg-8 h2.d3 {
        gap: 12px;
    }
}

/* ============================================================
   7. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .page-id-28 .page-container *,
    .page-id-28 .page-container *::before,
    .page-id-28 .page-container *::after {
        transition: none !important;
    }

    .page-id-28 .page-container #dira-contact-form button[type="submit"]:hover {
        transform: none !important;
    }
}

/* ============================================================
   1. PAGE BANNER — matches the Shop page hero
   Deep-green panel, container width, layered gradients with
   soft gold glows and fine concentric arc line-work.
   ============================================================ */

.page-id-28 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 64px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* eyebrow — uses the real text already in the HTML */
.page-id-28 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    /* optically centers tracked-out text */
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-28 .page-container .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

/* thin gold rule under the title */
.page-id-28 .page-container .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

.page-id-28 .entry-content .col-lg-4.mb-5.mb-lg-0 {
    position: sticky;
    top: 100px;
}

/* ============================================================
   DIRA — JOURNAL PAGE (blog index)
   ------------------------------------------------------------
   Parent scope: .blog — the permanent body class WordPress
   adds on the posts index — combined with .index-container,
   so nothing here affects any other page or component.

   Includes the same banner design as the Shop and Help pages:
   container-width deep-green panel with soft gold glows,
   concentric arc line-work, and a gold rule.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.blog .index-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 14px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
}

.blog .index-container .wrap {
    margin-inline: auto;
}

.blog .index-container {
    padding-top: 0;
    margin-top: 0;

}

/* ============================================================
   1. PAGE BANNER — matches the Shop / Help hero
   ============================================================ */

.blog .index-container .site-main>header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 64px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* eyebrow — uses the real text already in the HTML */
.blog .index-container .site-main>header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    /* optically centers tracked-out text */
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.blog .index-container .page-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.blog .index-container header .text-muted.mx-auto {
    color: #fff !important;
}

/* thin gold rule under the title */
.blog .index-container .page-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   2. ARTICLE LIST — editorial column
   Cards are constrained to a comfortable reading width and
   centered, like a magazine index.
   ============================================================ */

.blog .index-container .site-main>article {
    max-width: 820px;
    margin: 0 auto clamp(22px, 3vw, 30px) !important;
    padding: clamp(24px, 3.2vw, 40px) !important;

    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1),
        box-shadow .28s ease, border-color .28s ease;
}

/* thin gold accent along the left edge, revealed on hover */
.blog .index-container .site-main>article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    opacity: 0;
    transition: opacity .28s ease;
}

.blog .index-container .site-main>article:hover,
.blog .index-container .site-main>article:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(201, 162, 75, .45) !important;
}

.blog .index-container .site-main>article:hover::before,
.blog .index-container .site-main>article:focus-within::before {
    opacity: 1;
}

/* --- article header: date ABOVE title, like an eyebrow ---- */

.blog .index-container .site-main>article .entry-header {
    display: flex;
    flex-direction: column-reverse;
    /* puts the date first visually */
    gap: 10px;
    margin: 0 0 14px !important;
}

.blog .index-container .site-main>article .entry-header small {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 500;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
}

/* small rule after the date */
.blog .index-container .site-main>article .entry-header small::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(201, 162, 75, .45);
}

.blog .index-container .site-main>article .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important;
    line-height: 1.3 !important;
    color: var(--g) !important;
}

.blog .index-container .site-main>article .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .22s ease !important;
}

.blog .index-container .site-main>article .entry-title a:hover {
    color: var(--gold) !important;
}

/* --- excerpt + read-more affordance ------------------------ */

.blog .index-container .site-main>article .entry-content p {
    margin: 0 !important;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--body-c);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* uniform card heights */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Read article" cue (CSS-generated; the title is the link) */
.blog .index-container .site-main>article .entry-content::after {
    content: "Read article  →";
    display: inline-block;
    margin-top: 16px;
    font-family: var(--util);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--g);
    border-bottom: 1px solid rgba(201, 162, 75, .55);
    padding-bottom: 2px;
    transition: color .22s ease, border-color .22s ease, transform .22s ease;
}

.blog .index-container .site-main>article:hover .entry-content::after {
    color: var(--gold);
    border-color: var(--gold);
    transform: translateX(3px);
}

/* ============================================================
   3. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .blog .index-container .site-main>article {
        padding: 20px !important;
    }

    .blog .index-container .site-main>article .entry-content p {
        -webkit-line-clamp: 4;
    }
}

/* ============================================================
   4. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .blog .index-container *,
    .blog .index-container *::before,
    .blog .index-container *::after {
        transition: none !important;
    }

    .blog .index-container .site-main>article:hover {
        transform: none !important;
    }
}

/* ============================================================
   JOURNAL — 2-COLUMN ARTICLE GRID
   (Append after the existing rules; these override the
   single-column layout above.)
   ============================================================ */

/* the list becomes a 2-column grid; the banner spans both */
.blog .index-container .site-main {
    display: block;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    align-items: stretch;
    /* equal card heights per row */
}

.blog .index-container .site-main>header {
    grid-column: 1 / -1;
    /* banner stays full width */
}

/* cards fill their grid cell instead of the centered column */
.blog .index-container .site-main>article {
    max-width: none;
    width: 100%;
    margin: 0 !important;
    /* grid gap handles spacing */
    display: flex;
    flex-direction: column;
}

/* internal structure so every card aligns: header on top,
   excerpt grows, "Read article" pins to the bottom */
.blog .index-container .site-main>article .entry-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog .index-container .site-main>article .entry-content p {
    flex: 0 0 auto;
}

.blog .index-container .site-main>article .entry-content::after {
    margin-top: auto;
    /* pushes the cue to the card base */
    padding-top: 16px;
    align-self: flex-start;
}

/* ---- responsive: 1 column on tablets and phones ---------- */

@media (max-width: 820px) {
    .blog .index-container .site-main {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DIRA — BLOG DETAIL PAGE (single post)
   ------------------------------------------------------------
   Parent scope: .single-post — the permanent body class
   WordPress adds on single blog posts — combined with
   .single-post-container, so nothing here affects any other
   page or component (including the shop / product pages).

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.single-post .single-post-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
}

.single-post .single-post-container .wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
    padding-inline: clamp(16px, 4vw, 32px);
}

/* ============================================================
   1. ARTICLE CARD — the reading surface
   Keeps the 800px inline width; refines everything else.
   ============================================================ */

.single-post .single-post-container .site-main>article {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--gold) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: clamp(28px, 4.5vw, 56px) !important;
    max-width: 100% !important;
}

/* ============================================================
   2. POST HEADER — category · title · meta · hairline
   ============================================================ */

.single-post .single-post-container .entry-header {
    text-align: center;
    margin: 0 0 clamp(28px, 4vw, 40px) !important;
    padding-bottom: clamp(22px, 3vw, 30px);
    border-bottom: 1px solid var(--line);
}

/* category eyebrow — small gold pill link */
.single-post .single-post-container .entry-header .eyebrow {
    display: inline-block;
    margin: 0 0 16px !important;
}

.single-post .single-post-container .entry-header .eyebrow a {
    display: inline-block;
    padding: 7px 16px;
    background: rgba(201, 162, 75, .1);
    border: 1px solid rgba(201, 162, 75, .35);
    border-radius: 999px;
    font-family: var(--util);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-indent: .24em;
    text-transform: uppercase;
    color: var(--g-soft) !important;
    text-decoration: none !important;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.single-post .single-post-container .entry-header .eyebrow a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--g-dark) !important;
}

/* title */
.single-post .single-post-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    color: var(--g) !important;
    max-width: 20em;
    margin-inline: auto !important;
}

/* meta — date only; hides the separator and the empty
   "By" author span the template outputs */
.single-post .single-post-container .entry-meta {
    margin-top: 16px !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 500;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

.single-post .single-post-container .entry-meta span:nth-child(2),
.single-post .single-post-container .entry-meta span:nth-child(3) {
    display: none;
    /* "·" separator + empty "By " */
}

/* ============================================================
   3. POST BODY — comfortable long-form typography
   ============================================================ */

.single-post .single-post-container .entry-content {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--body-c);
}

/* opening (lede) paragraph — slightly larger, deeper tone */
.single-post .single-post-container .entry-content p.lede {
    font-size: 1.14rem;
    line-height: 1.8;
    color: var(--ink);
}

.single-post .single-post-container .entry-content p {
    margin: 0 0 1.1em !important;
}

/* section headings — Fraunces with a small gold mark */
.single-post .single-post-container .entry-content h2,
.single-post .single-post-container .entry-content h3,
.single-post .single-post-container .entry-content h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 2em 0 .7em !important;
    font-family: var(--util);
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--g) !important;
}

.single-post .single-post-container .entry-content h2 {
    font-size: 1.5rem !important;
}

.single-post .single-post-container .entry-content h3 {
    font-size: 1.3rem !important;
}

.single-post .single-post-container .entry-content h4 {
    font-size: 1.15rem !important;
}

.single-post .single-post-container .entry-content h2::before,
.single-post .single-post-container .entry-content h3::before,
.single-post .single-post-container .entry-content h4::before {
    content: "✦";
    font-size: .65em;
    color: var(--gold);
    flex: 0 0 auto;
}

/* lists inside posts — gold dot bullets */
.single-post .single-post-container .entry-content ul,
.single-post .single-post-container .entry-content ol {
    margin: 0 0 1.2em !important;
    padding-left: 24px !important;
}

.single-post .single-post-container .entry-content ul {
    list-style: none !important;
}

.single-post .single-post-container .entry-content ul li {
    position: relative;
    margin-bottom: 8px;
}

.single-post .single-post-container .entry-content ul li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.single-post .single-post-container .entry-content ol li::marker {
    color: var(--gold);
    font-weight: 600;
}

/* emphasis, links, quotes, images inside the body */
.single-post .single-post-container .entry-content strong {
    color: var(--ink);
    font-weight: 600;
}

.single-post .single-post-container .entry-content a {
    color: var(--g);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
    transition: color .2s ease, border-color .2s ease;
}

.single-post .single-post-container .entry-content a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.single-post .single-post-container .entry-content blockquote {
    margin: 1.6em 0 !important;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--gold);
    font-family: var(--util);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--g-soft);
}

.single-post .single-post-container .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.4em 0;
}

/* the template prints an empty footer — collapse its space */
.single-post .single-post-container .entry-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: 0 !important;
}

/* ============================================================
   4. COMMENTS — "Leave a Reply" card
   Matches the article card width and the theme's form styling.
   ============================================================ */

.single-post .single-post-container #respond.comment-respond {
    max-width: 800px;
    margin: clamp(24px, 3.5vw, 36px) auto 0;
    padding: clamp(24px, 3.5vw, 40px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    max-width: 100% !important;
}

.single-post .single-post-container .comment-reply-title {
    display: block;
    margin: 0 0 16px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    color: var(--g) !important;
}

.single-post .single-post-container {
    padding-top: 0;
    margin-top: 0;

}

.single-post .single-post-container .comment-form .logged-in-as {
    margin: 0 0 18px !important;
    font-size: .88rem;
    color: var(--muted);
}

.single-post .single-post-container .comment-form .logged-in-as a {
    color: var(--g);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.single-post .single-post-container .comment-form .logged-in-as a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.single-post .single-post-container .comment-form label {
    display: block;
    margin-bottom: 7px;
    font-family: "Jost", sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.single-post .single-post-container .comment-form .required {
    color: var(--gold);
}

.single-post .single-post-container .comment-form textarea,
.single-post .single-post-container .comment-form input[type="text"],
.single-post .single-post-container .comment-form input[type="email"],
.single-post .single-post-container .comment-form input[type="url"] {
    width: 100%;
    padding: 13px 15px;
    background: var(--ivory);
    border: 1px solid #D8CFBB;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: .95rem;
    color: var(--ink);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.single-post .single-post-container .comment-form textarea {
    resize: vertical;
    min-height: 150px;
}

.single-post .single-post-container .comment-form textarea:hover,
.single-post .single-post-container .comment-form input[type="text"]:hover,
.single-post .single-post-container .comment-form input[type="email"]:hover,
.single-post .single-post-container .comment-form input[type="url"]:hover {
    border-color: var(--gold);
}

.single-post .single-post-container .comment-form textarea:focus,
.single-post .single-post-container .comment-form input[type="text"]:focus,
.single-post .single-post-container .comment-form input[type="email"]:focus,
.single-post .single-post-container .comment-form input[type="url"]:focus {
    outline: none;
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22);
}

.single-post .single-post-container .comment-form .comment-form-comment {
    margin: 0 0 18px !important;
}

.single-post .single-post-container .comment-form .form-submit {
    margin: 0 !important;
}

.single-post .single-post-container .comment-form input[type="submit"] {
    padding: 14px 36px;
    background: var(--g);
    color: #FDFBF6;
    border: 0;
    border-radius: 10px;
    font-family: "Jost", sans-serif;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(12, 53, 39, .18);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.single-post .single-post-container .comment-form input[type="submit"]:hover {
    background: var(--gold);
    color: var(--g-dark);
    box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
    transform: translateY(-1px);
}

.single-post .single-post-container .comment-form input[type="submit"]:active {
    transform: translateY(0);
}

/* existing comment list, if/when comments appear */
.single-post .single-post-container .comment-list {
    max-width: 800px;
    margin: clamp(24px, 3.5vw, 36px) auto 0;
    padding: 0;
    list-style: none;
}

.single-post .single-post-container .comment-list .comment {
    margin-bottom: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .single-post .single-post-container .site-main>article {
        padding: 22px 18px !important;
    }

    .single-post .single-post-container #respond.comment-respond {
        padding: 22px 18px;
    }

    .single-post .single-post-container .entry-content {
        font-size: .98rem;
    }

    .single-post .single-post-container .entry-content p.lede {
        font-size: 1.06rem;
    }
}

/* ============================================================
   6. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .single-post .single-post-container *,
    .single-post .single-post-container *::before,
    .single-post .single-post-container *::after {
        transition: none !important;
    }

    .single-post .single-post-container .comment-form input[type="submit"]:hover {
        transform: none !important;
    }
}

/* ============================================================
   7. WOOCOMMERCE VARIATION RADIO BUTTON SWATCHES
   ============================================================ */

.variations {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.variations td,
.variations th {
    padding: 8px 0;
    vertical-align: middle;
}

.variations th.label {
    width: 100px;
    font-family: var(--util);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
}

.dira-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dira-swatch-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white-2);
    border: 1.5px solid var(--linen);
    border-radius: 24px;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s var(--ease);
}

.dira-swatch-item:hover {
    border-color: var(--gold);
    background: var(--gold-soft);
    transform: translateY(-1px);
}

.dira-swatch-item.is-active {
    border-color: var(--green);
    background: var(--green-tint);
    color: var(--green-deep);
    font-weight: 600;
    box-shadow: 0 4px 12px -3px rgba(16, 78, 56, 0.25);
}

.dira-radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--ink-soft);
    border-radius: 50%;
    outline: none;
    margin: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dira-swatch-item:hover .dira-radio-input {
    border-color: var(--gold-deep);
}

.dira-radio-input:checked {
    border-color: var(--green);
    background-color: var(--green);
    box-shadow: inset 0 0 0 2.5px #ffffff;
}

/* Color Dot Swatches */
.dira-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Sex Icon */
.dira-sex-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Size Swatch specific */
.dira-swatch-size {
    padding: 8px 18px;
    min-width: 54px;
    justify-content: center;
}

/* Out of Stock / Disabled Swatches */
.dira-swatch-item.is-disabled {
    opacity: 0.45;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    background: #f5f5f5;
    border-color: #e0e0e0;
}

/* --- E-Commerce Plus (+) & Minus (-) Quantity Controls --- */
.dira-qty-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFF8F0 !important;
    border: 1.5px solid #E5DCCA !important;
    border-radius: 12px !important;
    padding: 3px !important;
    gap: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    height: 48px !important;
    width: auto !important;
    min-width: 124px !important;
    justify-content: space-between !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    vertical-align: middle !important;
}

.dira-qty-wrapper:focus-within,
.dira-qty-wrapper:hover {
    border-color: var(--gold-deep, #D99A2B) !important;
    box-shadow: 0 3px 10px rgba(217, 154, 43, 0.15) !important;
}

.dira-qty-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2D8C6 !important;
    border-radius: 8px !important;
    color: var(--green, #104E38) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.dira-qty-btn:hover {
    background: var(--green, #104E38) !important;
    color: #FDFAF1 !important;
    border-color: var(--green, #104E38) !important;
    transform: scale(1.05);
}

.dira-qty-btn:active {
    transform: scale(0.94);
}

.quantity .qty,
.dira-qty-wrapper input.qty,
.dira-qty-wrapper .dira-cart-qty-input {
    width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--green, #104E38) !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Cart Drawer Specific Compact Qty Wrapper */
.cart-item-qty {
    height: 34px !important;
    min-width: 98px !important;
    padding: 2px !important;
    border-radius: 8px !important;
}

.cart-item-qty .dira-qty-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
}

.cart-item-qty input.dira-cart-qty-input {
    width: 32px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 0.95rem !important;
}

/* Hide WooCommerce Accessibility Screen Reader Text on Product Cards */
.screen-reader-text,
.woocommerce-loop-product__link+.screen-reader-text,
.add_to_cart_button+.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* ============================================================
   DIRA — OUR STORY PAGE
   ------------------------------------------------------------
   Parent scope: .page-id-27 — the permanent body class
   WordPress gives this page — combined with .page-container,
   so nothing here affects any other page or component.
   (If the page is ever recreated with a new ID, just update
   the number.)

   Includes the same banner design as Shop / Help / Journal:
   container-width deep-green panel with soft gold glows,
   concentric arc line-work, and a gold rule.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.page-id-27 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-27 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-27 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-27 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-27 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-27 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   2. STORY SECTIONS — image + text rows
   ============================================================ */

.page-id-27 .page-container .story-page {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--body-c);
}

/* section eyebrows ("Our Beginnings", "The Atelier") */
.page-id-27 .page-container .story-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px !important;
    font-family: var(--util);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
}

.page-id-27 .page-container .story-page .eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(201, 162, 75, .5);
}

/* section headings */
.page-id-27 .page-container .story-page h2 {
    margin: 0 0 20px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
    line-height: 1.18 !important;
    color: var(--g) !important;
}

/* lede + body paragraphs */
.page-id-27 .page-container .story-page p.lede {
    font-size: 1.13rem;
    line-height: 1.75;
    color: var(--ink);
}

.page-id-27 .page-container .story-page p {
    margin-bottom: 1.1rem;
}

/* ---- images: rounded frame + inner gold keyline ---------- */

.page-id-27 .page-container .story-page .position-relative[style] {
    border-radius: var(--r) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--line);
}

.page-id-27 .page-container .story-page .position-relative[style]::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(227, 201, 138, .45);
    border-radius: calc(var(--r) - 6px);
    pointer-events: none;
}

.page-id-27 .page-container .story-page .position-relative img {
    display: block;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.page-id-27 .page-container .story-page .position-relative:hover img {
    transform: scale(1.03);
}

/* ============================================================
   3. STAT BOXES — 10,000+ · 4.9★ · 100%
   Overrides the inline styles into ivory cards with a gold
   top accent; !important is needed to beat inline CSS.
   ============================================================ */

.page-id-27 .page-container .story-page .statbox {
    background: var(--ivory) !important;
    border: 1px solid var(--line) !important;
    border-top: 2px solid var(--gold) !important;
    border-radius: 12px !important;
    padding: 18px 14px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.page-id-27 .page-container .story-page .statbox:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(201, 162, 75, .5) !important;
    border-top-color: var(--gold) !important;
}

.page-id-27 .page-container .story-page .statbox b {
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
    color: var(--g) !important;
    line-height: 1.2;
    margin-bottom: 4px;
}

.page-id-27 .page-container .story-page .statbox span {
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

/* remove the stray <br> gap between number and label */
.page-id-27 .page-container .story-page .statbox br {
    display: none;
}

/* ============================================================
   4. DIVIDER — ivory hairline with a centered gold ornament
   ============================================================ */

.page-id-27 .page-container .story-page hr {
    position: relative;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-block: clamp(48px, 7vw, 72px) !important;
    overflow: visible;
    opacity: 1;
}

.page-id-27 .page-container .story-page hr::after {
    content: "✦";
    position: absolute;
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 16px;
    background: var(--ivory);
    color: var(--gold);
    font-size: .85rem;
    line-height: 1;
}

/* ============================================================
   5. PHILOSOPHY LIST — ✦ feature items
   ============================================================ */

.page-id-27 .page-container .story-page ul.list-unstyled li {
    margin-bottom: 16px !important;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-id-27 .page-container .story-page ul.list-unstyled li:hover {
    border-color: rgba(201, 162, 75, .45);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* the ✦ marker span inside each item */
.page-id-27 .page-container .story-page ul.list-unstyled li .greentext {
    color: var(--gold) !important;
    font-size: .85rem !important;
    margin-top: .35em;
}

.page-id-27 .page-container .story-page ul.list-unstyled li strong {
    color: var(--g);
    font-weight: 600;
}

.page-id-27 .page-container .story-page ul.list-unstyled li div {
    line-height: 1.65;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    /* Bootstrap stacks the columns; tighten the rhythm */
    .page-id-27 .page-container .story-page h2 {
        font-size: 1.55rem !important;
    }

    .page-id-27 .page-container .story-page p.lede {
        font-size: 1.05rem;
    }

    /* stat boxes: allow wrapping instead of squeezing three-up */
    .page-id-27 .page-container .story-page .author__stats {
        flex-wrap: wrap;
    }

    .page-id-27 .page-container .story-page .statbox {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 130px;
    }
}

/* ============================================================
   7. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .page-id-27 .page-container *,
    .page-id-27 .page-container *::before,
    .page-id-27 .page-container *::after {
        transition: none !important;
    }

    .page-id-27 .page-container .story-page .statbox:hover,
    .page-id-27 .page-container .story-page ul.list-unstyled li:hover,
    .page-id-27 .page-container .story-page .position-relative:hover img {
        transform: none !important;
    }
}

/* ============================================================
   DIRA — MY ACCOUNT PAGE
   ------------------------------------------------------------
   Parent scope: .woocommerce-account — the permanent body
   class WooCommerce adds on every account view (login,
   register, dashboard, orders, addresses, edit account,
   lost password) — combined with .page-container, so nothing
   here affects any other page or component.

   Covers BOTH states:
   · Logged out → Login / Register cards side by side
   · Logged in  → account navigation + content, orders table,
     address boxes, edit-account form

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.woocommerce-account .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



.woocommerce-account .page-container .woocommerce-notices-wrapper:empty {
    display: none;
}

/* notices (login errors, "password sent", etc.) */
.woocommerce-account .page-container .woocommerce-message,
.woocommerce-account .page-container .woocommerce-info,
.woocommerce-account .page-container .woocommerce-error {
    margin: 0 auto 28px !important;
    max-width: 920px;
    padding: 16px 22px !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    list-style: none;
}

.woocommerce-account .page-container .woocommerce-error {
    border-left-color: #B4443C !important;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.woocommerce-account .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(180px, 22vw, 250px);
    margin: 0 0 clamp(40px, 6vw, 60px) !important;
    padding: clamp(40px, 6vw, 64px) 24px !important;
    border-radius: 18px;
    text-align: center;

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
}

.page-id-9.logged-in.woocommerce-account .woocommerce {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
}

.woocommerce-account .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.woocommerce-account .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.woocommerce-account .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   2. LOGIN / REGISTER — two equal cards
   Replaces WooCommerce's float-based col2-set with a grid.
   ============================================================ */

.woocommerce-account .page-container #customer_login.col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
    max-width: 920px;
    margin-inline: auto;
    width: 100%;
}

.woocommerce-account .page-container #customer_login.col2-set::before,
.woocommerce-account .page-container #customer_login.col2-set::after {
    content: none !important;
    /* kill WooCommerce clearfix */
}

.woocommerce-account .page-container #customer_login .col-1,
.woocommerce-account .page-container #customer_login .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(24px, 3.2vw, 40px);
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

/* the Register card gets a quieter, inverted-accent look */
.woocommerce-account .page-container #customer_login .col-2 {
    background: var(--ivory);
    border-top-color: var(--g);
}

/* section headings */
.woocommerce-account .page-container #customer_login h2 {
    margin: 0 0 20px !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    color: var(--g) !important;
    display: flex;
    align-items: center;
    gap: 14px;
}

.woocommerce-account .page-container #customer_login h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 75, .5), rgba(201, 162, 75, 0));
}

/* forms fill the card so buttons align at the bottom */
.woocommerce-account .page-container #customer_login form {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ---- labels + inputs ------------------------------------- */

.woocommerce-account .page-container #customer_login .form-row label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--util);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.woocommerce-account .page-container #customer_login .form-row .required {
    color: var(--gold);
}

.woocommerce-account .page-container #customer_login .input-text {
    width: 100%;
    padding: 13px 15px !important;
    background: var(--ivory) !important;
    border: 1px solid #D8CFBB !important;
    border-radius: 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* register card sits on ivory, so its inputs go white */
.woocommerce-account .page-container #customer_login .col-2 .input-text {
    background: #fff !important;
}

.woocommerce-account .page-container #customer_login .input-text:hover {
    border-color: var(--gold) !important;
}

.woocommerce-account .page-container #customer_login .input-text:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.woocommerce-account .page-container #customer_login .form-row {
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* ---- remember me + submit row ----------------------------- */

.woocommerce-account .page-container #customer_login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px !important;
    font-size: .9rem;
    color: var(--body-c);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-family: "DM Sans", sans-serif;
}

.woocommerce-account .page-container #customer_login input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--g);
    cursor: pointer;
}

/* submit buttons — pinned to the card bottom */
.woocommerce-account .page-container #customer_login button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 14px 24px !important;
    background: var(--g) !important;
    color: #FDFBF6 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(12, 53, 39, .18);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.woocommerce-account .page-container #customer_login button[type="submit"]:hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
    transform: translateY(-1px);
}

.woocommerce-account .page-container #customer_login button[type="submit"]:active {
    transform: translateY(0);
}

.woocommerce-account .page-container #customer_login button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .45);
}

/* keep the submit's wrapping <p> from shrinking oddly */
.woocommerce-account .page-container #customer_login form>p:has(button[type="submit"]) {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

/* ---- lost password + helper texts ------------------------- */

.woocommerce-account .page-container #customer_login .lost_password {
    margin: 14px 0 0 !important;
    text-align: center;
    font-size: .88rem;
}

.woocommerce-account .page-container #customer_login .lost_password a {
    color: var(--g);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}

.woocommerce-account .page-container #customer_login .lost_password a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* register helper + privacy text */
.woocommerce-account .page-container #customer_login .col-2>form>p:not(.form-row) {
    margin: 0 0 14px;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--body-c);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-text p {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(201, 162, 75, .07);
    border: 1px solid rgba(201, 162, 75, .22);
    border-radius: 8px;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--muted);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-link {
    color: var(--g);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-link:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* show/hide password eye that WooCommerce injects */
.woocommerce-account .page-container .show-password-input {
    top: 50% !important;
    transform: translateY(-50%);
    right: 12px;
    color: var(--muted);
}

.woocommerce-account .page-container .password-input {
    display: block;
    position: relative;
    width: 100%;
}

/* ============================================================
   3. LOGGED-IN DASHBOARD — navigation + content
   (Same page after login; standard WooCommerce markup.)
   ============================================================ */

.woocommerce-account .page-container .woocommerce-MyAccount-navigation {
    float: left;
    width: 240px;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li {
    margin: 2px 0;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 16px;
    border-radius: 9px;
    font-family: var(--util);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--body-c);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li a:hover {
    background: var(--ivory);
    color: var(--g);
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--g);
    color: var(--gold-soft);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content {
    float: right;
    width: calc(100% - 272px);
    padding: clamp(24px, 3vw, 36px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    font-size: .98rem;
    line-height: 1.7;
    color: var(--body-c);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content a {
    color: var(--g);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content a.button {
    border-bottom: 0;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content h2,
.woocommerce-account .page-container .woocommerce-MyAccount-content h3 {
    font-family: var(--util);
    font-weight: 500 !important;
    color: var(--g) !important;
}

/* orders table */
.woocommerce-account .page-container .woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-account .page-container .woocommerce-orders-table th {
    padding: 12px 14px !important;
    background: var(--ivory) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: "Jost", sans-serif;
    font-size: .72rem;
    font-weight: 500 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

.woocommerce-account .page-container .woocommerce-orders-table td {
    padding: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
}

.woocommerce-account .page-container .woocommerce-orders-table tr:last-child td {
    border-bottom: 0 !important;
}

/* buttons inside the dashboard (View order, Add address…) */
.woocommerce-account .page-container .woocommerce-MyAccount-content .button {
    display: inline-block;
    padding: 10px 20px !important;
    background: var(--g) !important;
    color: #FDFBF6 !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-family: "Jost", sans-serif !important;
    font-size: .74rem !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content .button:hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
}

/* address boxes */
.woocommerce-account .page-container .woocommerce-Addresses .woocommerce-Address {
    padding: 20px;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* edit-account / address form fields reuse the login styling */
.woocommerce-account .page-container .woocommerce-MyAccount-content .input-text,
.woocommerce-account .page-container .woocommerce-MyAccount-content select {
    width: 100%;
    padding: 12px 14px !important;
    background: var(--ivory) !important;
    border: 1px solid #D8CFBB !important;
    border-radius: 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .page-container .woocommerce-MyAccount-content select:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content label {
    display: block;
    margin-bottom: 6px;
    font-family: "Jost", sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */

@media (max-width: 820px) {
    .woocommerce-account .page-container #customer_login.col2-set {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .woocommerce-account .page-container .woocommerce-MyAccount-navigation,
    .woocommerce-account .page-container .woocommerce-MyAccount-content {
        float: none;
        width: 100%;
    }

    .woocommerce-account .page-container .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }

    .woocommerce-account .page-container .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .woocommerce-account .page-container .woocommerce-MyAccount-navigation li {
        margin: 0;
    }
}

@media (max-width: 640px) {

    .woocommerce-account .page-container #customer_login .col-1,
    .woocommerce-account .page-container #customer_login .col-2 {
        padding: 22px 18px;
    }
}

/* ============================================================
   5. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .woocommerce-account .page-container *,
    .woocommerce-account .page-container *::before,
    .woocommerce-account .page-container *::after {
        transition: none !important;
    }

    .woocommerce-account .page-container #customer_login button[type="submit"]:hover {
        transform: none !important;
    }
}

/* ============================================================
   FAQ Hero
   ============================================================ */
.page-id-334 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-334 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-3 .page-container .entry-header,
.page-id-30 .page-container .entry-header,
.page-id-42 .page-container .entry-header,
.page-id-43 .page-container .entry-header,
.page-id-334 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-3 .page-container .entry-header .eyebrow,
.page-id-30 .page-container .entry-header .eyebrow,
.page-id-42 .page-container .entry-header .eyebrow,
.page-id-43 .page-container .entry-header .eyebrow,
.page-id-334 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-3 .page-container .entry-header .entry-title,
.page-id-30 .page-container .entry-header .entry-title,
.page-id-42 .page-container .entry-header .entry-title,
.page-id-43 .page-container .entry-header .entry-title,
.page-id-334 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-3 .page-container .entry-header .entry-title::after,
.page-id-30 .page-container .entry-header .entry-title::after,
.page-id-42 .page-container .entry-header .entry-title::after,
.page-id-43 .page-container .entry-header .entry-title::after,
.page-id-334 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   Shipping Policy Hero
   ============================================================ */
.page-id-318 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-318 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-318 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-318 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-318 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-318 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   Exchange & Return Policy Hero
   ============================================================ */
.page-id-10 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-10 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-10 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-10 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-10 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-10 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   Contact Us Policy Hero
   ============================================================ */
.page-id-324 .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-324 .page-container [id] {
    scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-324 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-324 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-324 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-324 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
    display: none !important;
}

.wc-block-checkout__create-account label,
.wc-block-checkout__use-address-for-billing label,
.wc-block-checkout__add-note label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    cursor: pointer !important;
    text-transform: none !important;
    font-family: var(--sans) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    color: var(--ink) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
    position: relative !important;
    width: auto !important;
}

.wc-block-components-checkbox label span,
.wc-block-components-checkbox__label span,
.wc-block-components-checkbox__text,
.wc-block-checkout__create-account span,
.wc-block-checkout__use-address-for-billing span,
.wc-block-checkout__add-note span {
    display: inline-block !important;
    text-transform: none !important;
    font-family: var(--sans) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    color: var(--navy) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc-block-checkout__create-account,
.wc-block-checkout__use-address-for-billing,
.wc-block-checkout__add-note {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input.input-checkbox {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    accent-color: var(--gold-deep, #a87e33) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    opacity: 1 !important;
    position: static !important;
    visibility: visible !important;
}

/* ============================================================
   DIRA — OUR STORY STYLES (v2)
   Scoped entirely to .founder-story-page.
   Rich brand-color design: deep-green and gold panels
   alternating with ivory narrative — the homepage's rhythm.
   ============================================================ */

.founder-story-page {
    --fs-g: #0C3527;
    --fs-g-dark: #07231A;
    --fs-g-soft: #0F4030;
    --fs-gold: #C9A24B;
    --fs-gold-soft: #E3C98A;
    --fs-gold-pale: #F0DDB2;
    --fs-ivory: #FBF7EF;
    --fs-cream: #FDFBF6;
    --fs-sand: #F3EBDD;
    --fs-ink: #26251F;
    --fs-body: #55503F;
    --fs-muted: #8A8578;
    --fs-line: #E7E0D2;
    --fs-r: 16px;
    --fs-shadow: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .07);
    --fs-shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .14);

    font-family: var(--util);
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--fs-body);
    -webkit-font-smoothing: antialiased;
}

.founder-story-page p {
    margin: 0 0 1.15em;
}

/* ------------------------------------------------------------
   shared type roles
   ------------------------------------------------------------ */

.founder-story-page .fs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--util);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--fs-gold);
}

.founder-story-page .fs-eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(201, 162, 75, .5);
}

.founder-story-page .fs-eyebrow--center {
    gap: 0;
    text-indent: .3em;
}

.founder-story-page .fs-eyebrow--center::after {
    display: none;
}

.founder-story-page .fs-heading {
    margin: 0 0 18px;
    font-family: var(--util);
    font-weight: 500;
    font-size: clamp(1.55rem, 2.9vw, 2.05rem);
    line-height: 1.2;
    color: var(--fs-g);
}

.founder-story-page .fs-heading--center {
    text-align: center;
}

.founder-story-page .fs-heading--ruled::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin: 16px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--fs-gold) 25%, var(--fs-gold) 75%, transparent);
}

.founder-story-page .fs-lede {
    font-size: 1.14rem;
    line-height: 1.75;
    color: var(--fs-ink);
}

/* gold Fraunces drop cap on the story's first line */
.founder-story-page .fs-dropcap::first-letter {
    float: left;
    font-family: var(--util);
    font-size: 3.4em;
    line-height: .82;
    padding: .06em .12em 0 0;
    color: var(--fs-gold);
}

/* short, emotional one-liners */
.founder-story-page .fs-beat {
    font-family: var(--util);
    font-style: italic;
    font-size: 1.14rem;
    color: var(--fs-g);
}

/* ------------------------------------------------------------
   1. intro
   ------------------------------------------------------------ */

.founder-story-page .fs-intro {
    max-width: 760px;
    margin: 0 auto clamp(48px, 7vw, 76px);
    text-align: center;
}

.founder-story-page .fs-display {
    margin: 0 0 16px;
    font-family: var(--util);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.12;
    color: var(--fs-g);
}

.founder-story-page .fs-sub {
    max-width: 56ch;
    margin: 0 auto 18px;
    font-size: 1.08rem;
    color: var(--fs-body);
}

.founder-story-page .fs-ornament {
    display: inline-block;
    font-size: .85rem;
    color: var(--fs-gold);
}

/* ------------------------------------------------------------
   2 / 7. ivory narrative sections
   ------------------------------------------------------------ */

.founder-story-page .fs-narrative {
    max-width: 90%;
    margin: 0 auto clamp(48px, 7vw, 76px);
}

.founder-story-page .fs-narrative img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    height: 440px;
    border-radius: 20px;
    object-position: top;
}

/* gold accent beside each narrative heading */
.founder-story-page .fs-narrative .fs-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.founder-story-page .fs-narrative .fs-heading::before {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--fs-gold);
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   3. belief — deep-green panel with gold quote
   ------------------------------------------------------------ */

.founder-story-page .fs-belief {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0 0 0;
    padding: clamp(36px, 5.5vw, 64px) clamp(24px, 5vw, 72px);
    border-radius: var(--fs-r) var(--fs-r) 0 0;
    color: rgba(251, 247, 239, .86);

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--fs-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.founder-story-page .fs-belief__heading {
    margin: 0 0 14px;
    font-family: var(--util);
    font-weight: 500;
    font-size: clamp(1.55rem, 2.9vw, 2.05rem);
    line-height: 1.2;
    color: var(--fs-cream);
}

.founder-story-page .fs-belief__intro {
    font-family: var(--util);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--fs-gold-soft);
}

.founder-story-page .fs-belief__quote {
    margin: 0 0 1.3em;
    padding: 0;
    border: 0;
    font-family: var(--util);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1.35;
    color: var(--fs-gold-pale);
    max-width: 100%;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
}

.founder-story-page .fs-belief p:not(.fs-belief__intro) {
    max-width: 84ch;
    margin: auto;
    justify-content: center;
    text-align: center;
    display: flex;
}

/* ------------------------------------------------------------
   4. values — solid gold band (fused to the panel above)
   ------------------------------------------------------------ */

.founder-story-page .fs-values {
    margin: 0 0 clamp(48px, 7vw, 76px);
    padding: clamp(22px, 3vw, 32px) 24px;
    text-align: center;
    border-radius: 0 0 var(--fs-r) var(--fs-r);
    background: linear-gradient(180deg, var(--fs-gold-soft) 0%, var(--fs-gold) 100%);
    box-shadow: var(--fs-shadow);
}

.founder-story-page .fs-values__words {
    margin: 0 0 6px;
    font-family: var(--util);
    font-size: clamp(.92rem, 1.9vw, 1.1rem);
    font-weight: 600;
    letter-spacing: .34em;
    text-indent: .34em;
    text-transform: uppercase;
    color: var(--fs-g-dark);
}

.founder-story-page .fs-values__words span {
    color: rgba(7, 35, 26, .55);
}

.founder-story-page .fs-values__caption {
    margin: 0;
    font-size: .9rem;
    color: rgba(7, 35, 26, .7);
}

/* ------------------------------------------------------------
   5. founder — sand card with inset gold keyline
   ------------------------------------------------------------ */

.founder-story-page .fs-founder {
    position: relative;
    max-width: 840px;
    margin: 0 auto clamp(48px, 7vw, 76px);
    padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4.5vw, 64px);
    text-align: center;
    background: var(--fs-sand);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
    box-shadow: var(--fs-shadow);
}

.founder-story-page .fs-founder::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(201, 162, 75, .45);
    border-radius: calc(var(--fs-r) - 6px);
    pointer-events: none;
}

.founder-story-page .fs-founder p:not(.fs-eyebrow):not(.fs-signature) {
    max-width: 60ch;
    margin-inline: auto;
    text-align: left;
}

.founder-story-page .fs-founder .fs-lede {
    text-align: center !important;
}

.founder-story-page .fs-signature {
    margin: 22px 0 0;
    font-family: var(--util);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--fs-g);
}

.founder-story-page .fs-signature::before {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 0 auto 14px;
    background: rgba(201, 162, 75, .55);
}

/* ------------------------------------------------------------
   6. philosophy — numbered pillars (homepage "01/02/03" motif)
   ------------------------------------------------------------ */

.founder-story-page .fs-block {
    margin: 0 0 clamp(48px, 7vw, 76px);
}

.founder-story-page .fs-block .fs-heading--center {
    margin-bottom: 30px;
}

.founder-story-page .fs-grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

.founder-story-page .fs-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.founder-story-page .fs-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.founder-story-page .fs-pillar {
    position: relative;
    padding: clamp(24px, 3vw, 32px);
    background: #fff;
    border: 1px solid var(--fs-line);
    border-top: 3px solid var(--fs-gold);
    border-radius: var(--fs-r);
    box-shadow: var(--fs-shadow);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.founder-story-page .fs-pillar:hover {
    transform: translateY(-5px);
    box-shadow: var(--fs-shadow-md);
    border-color: rgba(201, 162, 75, .5);
    border-top-color: var(--fs-gold);
}

.founder-story-page .fs-pillar__num {
    display: block;
    margin-bottom: 10px;
    font-family: var(--util);
    font-size: 2rem;
    line-height: 1;
    color: var(--fs-gold);
}

.founder-story-page .fs-pillar__title {
    margin: 0 0 10px;
    font-family: var(--util);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--fs-g);
}

.founder-story-page .fs-pillar p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
}

/* ------------------------------------------------------------
   8. details — deep-green cards with gold titles
   ------------------------------------------------------------ */

.founder-story-page .fs-detail {
    padding: clamp(24px, 3vw, 30px);
    border-radius: var(--fs-r);
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    border: 1px solid rgba(227, 201, 138, .22);
    box-shadow: var(--fs-shadow);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.founder-story-page .fs-detail:hover {
    transform: translateY(-5px);
    box-shadow: var(--fs-shadow-md);
    border-color: rgba(227, 201, 138, .5);
}

.founder-story-page .fs-detail__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--util);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--fs-gold-soft);
}

.founder-story-page .fs-detail__title::before {
    content: "✦";
    font-size: .68rem;
    color: var(--fs-gold);
    flex: 0 0 auto;
}

.founder-story-page .fs-detail p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.7;
    color: rgba(251, 247, 239, .82);
}

/* ------------------------------------------------------------
   9. statement — full green band, banner-style pattern
   ------------------------------------------------------------ */

.founder-story-page .fs-statement {
    position: relative;
    overflow: hidden;
    margin: 0 0 clamp(48px, 7vw, 76px);
    padding: clamp(44px, 6.5vw, 80px) clamp(24px, 4vw, 56px);
    text-align: center;
    border-radius: 18px;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--fs-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.founder-story-page .fs-statement__title {
    margin: 0 0 16px;
    font-family: var(--util);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.22;
    color: var(--fs-cream);
    text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

.founder-story-page .fs-statement p {
    max-width: 60ch;
    margin: 0 auto;
    color: rgba(251, 247, 239, .85);
    font-size: 1.04rem;
}

/* ------------------------------------------------------------
   10. closing
   ------------------------------------------------------------ */

.founder-story-page .fs-closing {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.founder-story-page .fs-thanks {
    margin-top: 8px;
    font-family: var(--util);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--fs-g);
}

.founder-story-page .fs-thanks::before {
    content: "✦";
    display: block;
    margin-bottom: 12px;
    font-style: normal;
    font-size: .8rem;
    color: var(--fs-gold);
}

/* ------------------------------------------------------------
   responsive
   ------------------------------------------------------------ */

@media (max-width: 991px) {
    .founder-story-page .fs-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .founder-story-page .fs-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .founder-story-page {
        font-size: .98rem;
    }

    .founder-story-page .fs-grid--4 {
        grid-template-columns: 1fr;
    }

    .founder-story-page .fs-lede {
        font-size: 1.06rem;
    }

    .founder-story-page .fs-dropcap::first-letter {
        font-size: 3em;
    }

    .founder-story-page .fs-narrative .fs-heading::before {
        width: 22px;
    }
}

/* ------------------------------------------------------------
   motion preferences
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .founder-story-page .fs-pillar,
    .founder-story-page .fs-detail {
        transition: none;
    }

    .founder-story-page .fs-pillar:hover,
    .founder-story-page .fs-detail:hover {
        transform: none;
    }
}

.pattern .products .product .star-rating {
    margin-left: 20px;
    color: #f5c160;
}

/* Inline Header Search Bar */
.header-search-form {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: .4rem;
}

.header-search-input {
    width: 200px;
    height: 38px;
    padding: 0 38px 0 16px;
    font-family: var(--body);
    font-size: .84rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(235, 214, 162, .28);
    border-radius: 100px;
    outline: none;
    box-sizing: border-box;
    transition: width .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.header-search-input::placeholder {
    color: rgba(253, 250, 241, .6);
    font-size: .82rem;
}

.header-search-input:focus {
    width: 235px;
    background: rgba(9, 42, 31, .96);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(217, 154, 43, .28);
}

.header-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: color .25s var(--ease), transform .25s var(--ease);
}

.header-search-btn:hover {
    color: var(--gold-2);
    transform: translateY(-50%) scale(1.1);
}

.header-search-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   DIRA — CART + CHECKOUT (WooCommerce Blocks)
   ------------------------------------------------------------
   Scope: body.woocommerce-cart and body.woocommerce-checkout —
   the permanent body classes on those two pages — so nothing
   here affects any other page or component.

   These pages use the block (React) cart/checkout, so all
   selectors target the wc-block-* component system. The same
   components power both pages, so one file styles both
   consistently: banner, item list, order summary, coupon,
   quantity stepper, form fields, radios, and buttons.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

body.woocommerce-cart .page-container,
body.woocommerce-checkout .page-container {
    --g: #0C3527;
    --g-dark: #07231A;
    --g-soft: #0F4030;
    --gold: #C9A24B;
    --gold-soft: #E3C98A;
    --ivory: #FBF7EF;
    --cream: #FDFBF6;
    --sand: #F3EBDD;
    --ink: #26251F;
    --body-c: #55503F;
    --muted: #8A8578;
    --line: #E7E0D2;
    --r: 14px;
    --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
    --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

    background: var(--ivory);
    color: var(--ink);
    font-family: var(--util);
    -webkit-font-smoothing: antialiased;
}

body.woocommerce-cart .page-container .wrap,
body.woocommerce-checkout .page-container .wrap {

    margin-inline: auto;
    padding-block: clamp(28px, 4.5vw, 56px) clamp(56px, 8vw, 96px);
    padding-inline: clamp(16px, 4vw, 32px);
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

body.woocommerce-cart .page-container .entry-header,
body.woocommerce-checkout .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(170px, 20vw, 230px);
    margin: 0 0 clamp(36px, 5vw, 56px) !important;
    padding: clamp(36px, 5.5vw, 60px) 24px !important;
    border-radius: 18px;
    text-align: center;

    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);

}

body.woocommerce-cart .page-container {
    padding-top: 0;
}

body.woocommerce-cart .page-container .entry-header .eyebrow,
body.woocommerce-checkout .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

body.woocommerce-cart .page-container .entry-title,
body.woocommerce-checkout .page-container .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.9rem, 4.2vw, 2.8rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

body.woocommerce-cart .page-container .entry-title::after,
body.woocommerce-checkout .page-container .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

/* ============================================================
   2. SHARED BLOCK COMPONENTS (cart + checkout)
   ============================================================ */

/* ---- primary buttons: Proceed to checkout / Place order ---- */

body.woocommerce-cart .wc-block-components-button:not(.is-link),
body.woocommerce-checkout .wc-block-components-button:not(.is-link) {
    background: var(--g) !important;
    color: var(--cream) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 15px 24px !important;
    min-height: 52px;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(12, 53, 39, .18) !important;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.woocommerce-cart .wc-block-components-button:not(.is-link):hover,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
    background: var(--gold) !important;
    color: var(--g-dark) !important;
    box-shadow: 0 10px 24px rgba(201, 162, 75, .36) !important;
    transform: translateY(-1px);
}

body.woocommerce-cart .wc-block-components-button:not(.is-link):focus-visible,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .45) !important;
}

/* ---- text inputs (coupon, checkout fields) ----------------- */

body.woocommerce-cart .wc-block-components-text-input input[type="text"],
body.woocommerce-cart .wc-block-components-text-input input[type="email"],
body.woocommerce-cart .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-cart .wc-blocks-components-select .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
    background: #fff !important;
    border: 1px solid #CFC7B4 !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    font-family: "DM Sans", sans-serif !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.woocommerce-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-cart .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

body.woocommerce-cart .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select label {
    color: var(--muted) !important;
    font-family: "DM Sans", sans-serif !important;
}

/* WooCommerce sets margin-top: 0 on the country field in checkout, so it
   touches the name row; match the 12px gap the other fields use. */
body.woocommerce-checkout .wc-block-components-address-form .wc-block-components-country-input {
    margin-top: 12px;
}

/* ---- checkboxes / radios ----------------------------------- */

body.woocommerce-cart .wc-block-components-checkbox input[type="checkbox"],
body.woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"] {
    border: 1px solid #CFC7B4 !important;
    border-radius: 4px !important;
}

body.woocommerce-cart .wc-block-components-checkbox input[type="checkbox"]:checked,
body.woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked {
    background: var(--g) !important;
    border-color: var(--g) !important;
}

body.woocommerce-cart .wc-block-components-checkbox svg,
body.woocommerce-checkout .wc-block-components-checkbox svg {
    fill: var(--gold-soft) !important;
}

body.woocommerce-cart .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control__option {
    color: var(--ink);
}

body.woocommerce-cart .wc-block-components-radio-control__input,
body.woocommerce-checkout .wc-block-components-radio-control__input {
    border-color: #CFC7B4 !important;
}

body.woocommerce-cart .wc-block-components-radio-control__input:checked,
body.woocommerce-checkout .wc-block-components-radio-control__input:checked {
    border-color: var(--g) !important;
    background: #fff !important;
}

body.woocommerce-cart .wc-block-components-radio-control__input:checked::before,
body.woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
    background: var(--g) !important;
}

/* ---- links inside blocks ----------------------------------- */

body.woocommerce-cart .wc-block-components-totals-coupon-link,
body.woocommerce-checkout .wc-block-components-totals-coupon-link,
body.woocommerce-cart .wc-block-cart__sidebar a:not(.wc-block-components-button),
body.woocommerce-checkout .wc-block-checkout__sidebar a:not(.wc-block-components-button) {
    color: var(--g) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(201, 162, 75, .55);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}

body.woocommerce-cart .wc-block-components-totals-coupon-link:hover,
body.woocommerce-checkout .wc-block-components-totals-coupon-link:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
}

/* ============================================================
   3. CART — items panel (left)
   ============================================================ */

body.woocommerce-cart table.wc-block-cart-items {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: clamp(6px, 1.5vw, 14px) clamp(14px, 2.4vw, 26px);
    margin: 0 !important;
}

/* header row */
body.woocommerce-cart .wc-block-cart-items thead {
    border: 0 !important;
}

body.woocommerce-cart .wc-block-cart-items th {
    padding: 16px 8px 12px !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .7rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    text-align: left;
}

/* item rows */
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row {
    padding-block: 18px;
}

body.woocommerce-cart .wc-block-cart-items td {
    border-bottom: 1px solid var(--line) !important;
    padding: 18px 8px !important;
    vertical-align: top;
}

body.woocommerce-cart .wc-block-cart-items tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* product image */
body.woocommerce-cart .wc-block-cart-item__image {
    width: 96px;
}

body.woocommerce-cart .wc-block-cart-item__image img {
    width: 88px !important;
    max-width: 88px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
    background: var(--sand);
    border: 1px solid var(--line);
}

/* product name + meta */
body.woocommerce-cart .wc-block-components-product-name {
    font-family: var(--util);
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    line-height: 1.35;
    color: var(--g) !important;
    text-decoration: none !important;
    transition: color .2s ease;
}

body.woocommerce-cart .wc-block-components-product-name:hover {
    color: var(--gold) !important;
}

body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-details {
    margin-top: 4px;
    font-size: .82rem !important;
    color: var(--muted) !important;
}

/* unit price under the name / line price on the right */
body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
    font-weight: 600;
    color: var(--ink) !important;
}

body.woocommerce-cart .wc-block-cart-item__total {
    text-align: right;
}

/* quantity stepper (− 1 +) */
body.woocommerce-cart .wc-block-components-quantity-selector {
    margin-top: 10px;
    width: 116px;
    background: #fff;
    border: 1px solid #CFC7B4 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector::after {
    display: none !important;
    /* the block's own border overlay */
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    background: transparent !important;
    border: 0 !important;
    font-family: "DM Sans", sans-serif !important;
    font-weight: 600 !important;
    color: var(--g) !important;
    min-height: 40px;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    color: var(--muted) !important;
    font-size: 1.05rem;
    min-width: 32px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    color: var(--g) !important;
    background: var(--ivory);
}

/* remove link */
body.woocommerce-cart .wc-block-cart-item__remove-link {
    margin-top: 8px;
    font-family: "Jost", sans-serif !important;
    font-size: .7rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: #B4443C !important;
    border-color: #B4443C;
}

/* ============================================================
   4. CART — order summary sidebar (right)
   ============================================================ */

body.woocommerce-cart .wc-block-cart__sidebar {
    position: sticky;
    top: 110px;
}

body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: clamp(18px, 2.6vw, 28px);
}

/* "Cart totals" heading */
body.woocommerce-cart .wc-block-cart__totals-title {
    padding: 0 0 14px !important;
    margin: 0 0 4px !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: var(--util);
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--g) !important;
    text-align: left !important;
}

/* totals rows */
body.woocommerce-cart .wc-block-components-totals-wrapper {
    border-top: 0 !important;
    padding: 12px 0 !important;
}

body.woocommerce-cart .wc-block-components-totals-wrapper+.wc-block-components-totals-wrapper {
    border-top: 1px solid var(--line) !important;
}

body.woocommerce-cart .wc-block-components-totals-item {
    font-size: .94rem;
}

body.woocommerce-cart .wc-block-components-totals-item__label {
    font-family: var(--util);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

body.woocommerce-cart .wc-block-components-totals-item__value {
    font-weight: 600;
    color: var(--ink) !important;
}

body.woocommerce-cart .wc-block-components-totals-item__description {
    font-size: .8rem;
    color: var(--muted) !important;
}

/* grand total row */
body.woocommerce-cart .wc-block-components-totals-footer-item {
    padding: 14px 0 4px !important;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--util);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--g) !important;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    color: var(--g) !important;
}

/* coupon panel */
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
    color: var(--g) !important;
    font-weight: 500;
}

body.woocommerce-cart .wc-block-components-totals-coupon__form {
    gap: 10px;
}

/* shipping selector inside totals */
body.woocommerce-cart .wc-block-components-shipping-rates-control__package {
    font-size: .9rem;
}

body.woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-radio-control__label {
    font-size: .9rem;
    color: var(--ink);
}

/* proceed to checkout button fills the card width */
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
    margin: 16px 0 6px !important;
}

body.woocommerce-cart .wc-block-cart__submit-button {
    width: 100%;
    text-align: center;
}

/* accepted payment methods strip */
body.woocommerce-cart .wc-block-cart__payment-method-icons {
    margin-top: 12px;
    opacity: .75;
}

/* ============================================================
   5. EMPTY CART — title, separator, "New in store" grid
   ============================================================ */

body.woocommerce-cart .wc-block-cart__empty-cart__title {
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    color: var(--g) !important;
}

body.woocommerce-cart .wp-block-separator.is-style-dots {
    color: var(--gold) !important;
    margin-block: clamp(24px, 4vw, 40px);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-heading {
    font-family: var(--util);
    font-weight: 500 !important;
    color: var(--g) !important;
    margin-bottom: 40px;
}

/* "New in store" product cards — match the shop cards */
body.woocommerce-cart .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

body.woocommerce-cart .wc-block-grid__product {
    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

body.woocommerce-cart .wc-block-grid__product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(201, 162, 75, .45) !important;
}

body.woocommerce-cart .wc-block-grid__product-link {
    text-decoration: none !important;
}

body.woocommerce-cart .wc-block-grid__product-image {
    margin: 0 !important;
}

body.woocommerce-cart .wc-block-grid__product-image img {
    width: 100%;
    /* aspect-ratio: 4 / 5; */
    object-fit: cover;
    background: var(--sand);
    border-bottom: 1px solid var(--line);
    height: 100%;
    object-fit: cover;
}

body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-image {
    height: 400px;
    width: 100%;
}

body.woocommerce-cart .wc-block-grid__product-title {
    font-family: var(--util);
    font-size: 20px;
    line-height: 1.3;
    color: var(--navy);
    font-weight: 800;
    text-align: start;
    margin: 20px;

}

body.woocommerce-cart .wc-block-grid__product-price {
    padding: 4px 16px 10px !important;
    font-size: .92rem !important;
    font-weight: 600;
    color: var(--ink) !important;
    text-align: left !important;
    /* margin-top: auto !important; */
    margin-left: inherit;
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart {
    padding: 0 16px 16px !important;
    margin: 0 !important;
}

.woocommerce-cart .wc-block-grid__product-rating {
    margin-left: inherit;
    margin-left: 17px;
    margin-top: 0;
    padding-top: 0;
}

.wc-block-grid .wc-block-grid__product .star-rating span {
    font-family: WooCommerce !important;
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: block;
    width: 100%;
    padding: 11px 14px !important;
    background: transparent !important;
    color: var(--g) !important;
    border: 1px solid #BFC7C0 !important;
    border-radius: 8px !important;
    text-align: center;
    text-decoration: none !important;
    font-family: "Jost", "DM Sans", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: var(--g) !important;
    border-color: var(--g) !important;
    color: var(--cream) !important;
}

/* ============================================================
   6. CHECKOUT — form steps + order summary
   (same components; ready for the /checkout/ page)
   ============================================================ */

body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: clamp(18px, 2.6vw, 28px) !important;
    margin-bottom: 18px !important;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    border-top: 3px solid var(--gold);
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    color: var(--g) !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
    color: var(--muted) !important;
    font-size: .88rem;
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
    position: sticky;
    top: 110px;
}

/* order summary rows reuse the cart totals styling */
body.woocommerce-checkout .wc-block-components-totals-item__label {
    font-family: var(--util);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

body.woocommerce-checkout .wc-block-components-totals-item__value {
    font-weight: 600;
    color: var(--ink) !important;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--util);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--g) !important;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    color: var(--g) !important;
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    color: var(--g) !important;
    font-weight: 500;
}

/* place order button fills the column */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    width: 100%;
}

/* payment method boxes */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
    border-color: var(--line) !important;
    border-radius: 10px;
}

/* ============================================================
   7. NOTICES (both pages)
   ============================================================ */

body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notice-banner {
    border-radius: 10px !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-sm);
}

body.woocommerce-cart .wc-block-components-notice-banner.is-info,
body.woocommerce-checkout .wc-block-components-notice-banner.is-info {
    background: #fff !important;
    border-left: 3px solid var(--gold) !important;
    color: var(--ink) !important;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 782px) {

    /* blocks stack the sidebar under the items at this width */
    body.woocommerce-cart .wc-block-cart__sidebar,
    body.woocommerce-checkout .wc-block-checkout__sidebar {
        position: static;
        margin-top: 20px;
    }

    body.woocommerce-cart .wc-block-cart-item__image img {
        width: 72px !important;
    }

    body.woocommerce-cart .wc-block-grid__products {
        gap: 12px;
    }
}

/* ============================================================
   9. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    body.woocommerce-cart .page-container *,
    body.woocommerce-checkout .page-container * {
        transition: none !important;
    }

    body.woocommerce-cart .wc-block-grid__product:hover,
    body.woocommerce-cart .wc-block-components-button:not(.is-link):hover,
    body.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
        transform: none !important;
    }
}

.cart-drawer .cart-item h4 {
    width: 90%;
    display: block;
}

.cart-drawer .cart-x.remove {
    font-size: 20px !important;
    background: red;
    color: #fff ! IMPORTANT;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center !important;
    margin: auto;
    text-align: center;
    border-radius: 110px;
    height: 20px;
    width: 20px;
    /* line-height: 100px; */
    padding-bottom: 3px;

}


.page-id-44 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-44 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-44 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-44 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

.entry-content a {
    font-size: 16px;
}

.nxp-summary .quantity .nxp-qty-btn {
    background: transparent !important;
    border: 0 !important;
}

.woocommerce table.shop_attributes td p {
    font-size: 16px;
    padding: 5px 10px;
    background: #ffffff;
}

.nxp-panel__toggle .nxp-panel__label {
    font-size: 16px;
}

span {
    font-family: var(--util) !important;
}

.single-product .woocommerce-container {
    padding-top: 40px !important;
}


.page-id-534 .page-container {
    padding-top: 0;
}

.page-id-534 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-534 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-534 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-534 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

.page-id-530 .page-container,
.page-id-44 .page-container {
    padding-top: 0;
}

.page-id-530 .page-container .entry-header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(200px, 26vw, 288px);
    margin: 0 0 clamp(40px, 6vw, 72px) !important;
    padding: clamp(44px, 7vw, 72px) 24px !important;
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-530 .page-container .entry-header .eyebrow {
    display: block;
    margin: 0 !important;
    font-family: var(--util);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
}

.page-id-530 .page-container .entry-header .entry-title {
    margin: 0 !important;
    font-family: var(--util);
    font-weight: 500 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    color: var(--ivory) !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-530 .page-container .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
    opacity: .85;
}

.nxp-product__info .woocommerce-product-rating span {
    font-family: WooCommerce !important;
}

.product.type-product .star-rating span {
    font-family: WooCommerce !important;
}



.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background: #dc3545 !important;
    color: #ffffff !important;
    width: max-content;
}

:root {
    --dark-teal: #062f2d;
    --teal: #103b39;
    --cream: #f8f3ea;
    --gold: #c99a45;
    --gold-light: #dfb968;
    --text: #344d4a;
    --white: #ffffff;
}



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

.story-page {
    width: 100%;
    padding: 48px 0 0px;
}

.container {
    width: min(1160px, 90%);
    margin: 0 auto;
}

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

.story-hero {
    position: relative;
    min-height: 325px;

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

    text-align: center;
    padding: 60px 30px;

    overflow: hidden;
    border-radius: 20px;

    background:
        linear-gradient(135deg,
            #163f3d 0%,
            #062d2b 100%);
}

/* Subtle background pattern */
.story-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.16;

    background-image:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 22px,
            rgba(255, 255, 255, 0.08) 23px,
            transparent 24px);

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.hero-content h1 {
    margin: 0;

    color: var(--white);

    font-family: "DM Sans", sans-serif;
    font-size: clamp(48px, 6vw, 66px);
    font-weight: 600;

    line-height: 1.1;
    letter-spacing: -2px;
}

.gold-line {
    width: 54px;
    height: 2px;

    margin: 24px auto;

    background: var(--gold);
}

.hero-content p {
    margin: 0 auto;

    max-width: 720px;

    color: #f5f5f1;

    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}

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



.story-layout {
    align-items: center;
}

.story-title {
    position: sticky;
    top: 30px;
}

.story-title h2 {
    position: relative;

    padding-left: 50px;

    color: var(--dark-teal);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 4vw, 50px);
    line-height: 1.08;
    font-weight: 600;
}

.story-title h2::before {
    content: "";

    position: absolute;
    left: 0;
    top: 17px;

    width: 34px;
    height: 2px;

    background: var(--gold);
}



.story-text p {
    margin-bottom: 25px;

    color: var(--text);

    font-size: 17px;
    line-height: 1.9;
    font-weight: 400;
}

.story-text p:first-child {
    color: var(--dark-teal);

    font-size: 20px;
    font-weight: 500;
}

/* =========================
   FINAL PARAGRAPH
========================== */

.story-text p:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 900px) {

    .story-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .story-title {
        position: static;
    }

    .story-title h2 {
        max-width: 600px;
    }
}

@media (max-width: 600px) {

    .story-page {
        padding: 0 0 60px;
    }

    .container {
        width: 90%;
    }

    .story-hero {
        min-height: 350px;
        padding: 45px 22px;
        border-radius: 15px;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .hero-content p {
        font-size: 14px;
        line-height: 1.65;
    }

    .story-content {
        padding-top: 0;
    }

    .story-title h2 {
        padding-left: 45px;
        font-size: 38px;
    }

    .story-title h2::before {
        width: 30px;
    }

    .story-text p {
        font-size: 16px;
        line-height: 1.8;
    }

    .story-text p:first-child {
        font-size: 18px;
    }
}

#sbi_load .sbi_load_btn,
#sbi_load a {
    font-family: var(--util) !important;
    font-weight: 600 !important;
    font-size: .76rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    padding: .95rem 1.7rem !important;
    line-height: 1 !important;
    border-radius: 5px !important;
    border: 1.5px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s !important;
}

#sbi_load a {
    font-family: var(--util) !important;
    font-weight: 600 !important;
    font-size: .76rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    padding: 13.5px 20px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
    border: 1.5px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: linear-gradient(120deg, var(--green), var(--green-2)) !important;
    color: var(--ivory) !important;
    box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s !important;

}

#sbi_load {
    margin-top: 20px !important;
}

@media (max-width: 767px) {

    .woocommerce-order-received .entry-content .woocommerce-order ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .woocommerce-order-received .entry-content .woocommerce-order ul li {
        float: left;
        margin-right: 2em;
        text-transform: uppercase;
        font-size: .715em;
        line-height: 1;
        border-right: none;
        padding-right: 2em;
        margin-left: 0;
        padding-left: 0;
        list-style-type: none;
        width: 100%;
    }
}