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

/* Reference artboard: 715 × 1600. Desktop dimensions scale with the artboard. */

:root {
    --u: calc(min(100vw, 1600px) / 715);
    --cream: #f8f0e6;
    --ink: #233e36;
    --green: #195b4b;
    --pink: #c86f85;
    --muted: #6f7168;
    --line: #e8dbce;
    --serif: Georgia, 'Times New Roman', serif;
    --script: 'Allura', 'Brush Script MT', cursive;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}

body {
    margin: 0 auto;
    max-width: 1600px;
    background: var(--cream);
    color: var(--ink);
    font: calc(9 * var(--u))/1.55 'DM Sans', Arial, sans-serif;
}

.homepage-flow {
    position: relative;
}

.upper-home-flow {
    position: relative;
    background-color: var(--cream);
    background-image: url('/images/optimized/upper-flow-desktop.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.upper-home-flow::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, #fffaf359 20%, #fffaf3ad 50%, #fffaf359 80%, transparent 100%);
}

.upper-home-flow>section {
    z-index: 1;
}

.upper-home-flow .section-heading h2,
.upper-home-flow .why h2 {
    color: var(--green);
    text-shadow: 0 1px 2px #fffaf3b3;
}

.upper-home-flow .section-heading>p,
.upper-home-flow .why-main>p {
    color: #536157;
}

.upper-home-flow .text-link {
    color: var(--green);
    font-weight: 500;
    transition: color .28s ease, transform .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .upper-home-flow .text-link:hover {
        color: #a3876d;
        transform: translateX(2px);
    }
}

button,
input {
    font: inherit;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
    color: inherit;
    border: 0;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 4px;
}

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

svg {
    display: block;
    width: 1em;
    height: 1em;
}

h1,
h2,
h3,
p,
figure,
blockquote {
    margin: 0;
}

h1,
h2 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.08;
}

h2 {
    font-size: calc(21 * var(--u));
    letter-spacing: calc(-.5 * var(--u));
}

.container {
    width: 90.2%;
    margin: 0 auto;
}

.header {
    position: absolute;
    z-index: 5;
    width: 100%;
    max-width: 1600px;
}

.nav {
    width: 83.2%;
    height: calc(55 * var(--u));
    display: flex;
    align-items: flex-start;
    padding-top: calc(7 * var(--u));
    gap: calc(20 * var(--u));
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    font: calc(14 * var(--u))/1 var(--serif);
    letter-spacing: calc(.4 * var(--u));
}

.brand-lotus {
    display: block;
    color: #b38376;
    font-size: calc(25 * var(--u));
    height: calc(19 * var(--u));
}

.brand-lotus svg {
    width: 1em;
    height: .75em;
    stroke-width: .8;
}

.brand small {
    font: italic calc(4.3 * var(--u))/1.9 var(--serif);
    letter-spacing: 0;
}

.nav nav {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: calc(25 * var(--u));
    padding: calc(8 * var(--u)) calc(21 * var(--u)) 0 calc(40 * var(--u));
    font-size: calc(7 * var(--u));
}

.nav nav a:hover,
.footer-links a:hover {
    color: var(--pink);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    padding-top: calc(3 * var(--u));
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    padding: calc(3 * var(--u));
    font-size: calc(13 * var(--u));
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: calc(7 * var(--u));
    border-radius: 50px;
    padding: calc(8 * var(--u)) calc(14 * var(--u));
    font-size: calc(7.5 * var(--u));
    line-height: 1.5;
    font-weight: 500;
    transition: transform .2s, background .2s;
    white-space: nowrap;
}

.button:hover {
    transform: translateY(-2px);
}

.button svg {
    font-size: 1.45em;
}

.green {
    background: var(--green);
    color: #fff;
}

.pink {
    background: var(--pink);
    color: #fff;
}

.ivory {
    background: #fbf5e9;
    color: var(--ink);
}

.small {
    padding: calc(4 * var(--u)) calc(10 * var(--u));
    font-size: calc(6.5 * var(--u));
}

.menu-toggle {
    display: none;
    background: none;
}

.hero {
    height: calc(348 * var(--u));
    position: relative;
    overflow: hidden;
    background: #eee5d7;
}

.hero-art-1 {
    position: absolute;
    inset: 0;
    background: url('/images/optimized/hero-background.webp') center / 100% 100% no-repeat;
}

.hero-art-2 {
    position: absolute;
    inset: 0;
    background: url('/images/optimized/slider-2.webp') center / 100% 100% no-repeat;
}

.hero-art-3 {
    position: absolute;
    inset: 0;
    background: url('/images/optimized/slider-3.webp') center / 100% 100% no-repeat;
}

.hero-inner {
    width: 78.2%;
    position: relative;
    padding-top: calc(75 * var(--u));
}

.hero-copy {
    width: 49%;
}

.eyebrow {
    font-size: calc(7 * var(--u));
    color: #8c8274;
    margin-bottom: calc(6 * var(--u));
}

.hero-title {
    font-size: calc(32 * var(--u));
    line-height: 1.035;
    letter-spacing: calc(-.8 * var(--u));
}

.hero-title em {
    display: inline-block;
    color: #a47c61;
    font: calc(46 * var(--u))/1.08 var(--script);
    letter-spacing: 0;
    margin-top: calc(1 * var(--u));
}

.hero-copy>p:not(.eyebrow) {
    font-size: calc(9 * var(--u));
    margin-top: calc(8 * var(--u));
    line-height: 1.6;
    color: #2e3932;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: calc(13 * var(--u));
    margin-top: calc(16 * var(--u));
}

.hero-buttons .button {
    padding: calc(7 * var(--u)) calc(14 * var(--u));
}

.play-icon {
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    font-size: calc(6 * var(--u));
    padding-left: 1px;
}

.hero-pagination {
    display: flex;
    gap: calc(17 * var(--u));
    position: absolute;
    top: calc(314 * var(--u));
    left: 0;
    font-size: calc(7 * var(--u));
    color: #686d60;
}

.hero-pagination a {
    padding-bottom: calc(4 * var(--u));
}

.hero-pagination .current {
    border-bottom: 1px solid #b79d82;
}

.handwritten {
    font: calc(19 * var(--u))/.9 var(--script);
    color: #ac8f76;
}

.handwritten span {
    display: block;
    text-align: center;
    font: calc(15 * var(--u))/1.3 var(--serif);
    color: #b67e7c;
    margin-top: calc(4 * var(--u));
}

.hero-quote {
    position: absolute;
    top: calc(85 * var(--u));
    right: calc(60 * var(--u));
    font-size: calc(18 * var(--u));
    color: #eee4c9;
}

.hero-scroll {
    position: absolute;
    bottom: calc(16 * var(--u));
    right: calc(17 * var(--u));
    border: 1px solid #f5efdf;
    color: white;
    background: #357153;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    border-radius: 50%;
    text-align: center;
}

.section-heading {
    position: relative;
    text-align: center;
}

.section-heading>p,
.why-main>p {
    color: var(--muted);
    margin-top: calc(5 * var(--u));
    font-size: calc(8.5 * var(--u));
}

.text-link {
    position: absolute;
    right: 0;
    bottom: 0;
    background: none;
    padding: calc(3 * var(--u)) 0;
    font-size: calc(7 * var(--u));
    color: #676b61;
}

.categories {
    position: relative;
    width: 100%;
    min-height: calc(226 * var(--u));
    padding-top: calc(21 * var(--u));
}

.categories .section-heading {
    width: 88%;
    margin: auto;
}

.category-grid {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(14 * var(--u));
    margin: calc(20 * var(--u)) auto 0;
}

.category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdf9dc;
    border: 1px solid #a67e5352;
    border-radius: calc(50 * var(--u)) calc(50 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u));
    padding: calc(17 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u));
    min-width: 0;
    box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) #46372812;
    backdrop-filter: blur(2px);
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.category:before {
    content: '✦';
    position: absolute;
    top: calc(-5 * var(--u));
    color: #c7a995;
    font-size: calc(7 * var(--u));
}

.category.active {
    background: #fffdf9f2;
    border-color: #b781808c;
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #4637281c;
}

.category-prev,
.category-next {
    display: none;
}

.category img {
    height: calc(70 * var(--u));
    width: calc(70 * var(--u));
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .28s ease;
}

.category>span {
    font: calc(10 * var(--u))/1.2 var(--serif);
    margin: calc(8 * var(--u)) 0 calc(6 * var(--u));
    white-space: nowrap;
    color: #1d493d;
    transition: color .28s ease;
}

.category b {
    font-size: calc(9 * var(--u));
    font-weight: 400;
    border: 1px solid #b8957199;
    border-radius: 50%;
    height: calc(14 * var(--u));
    width: calc(14 * var(--u));
    line-height: calc(12 * var(--u));
    color: #a3876d;
    background: #fffaf380;
    transition: background-color .28s ease, border-color .28s ease, color .28s ease, transform .28s ease;
}

.category:focus-visible {
    outline: 2px solid #b78180;
    outline-offset: 3px;
    border-color: #b78180a8;
    background: #fffdf9f2;
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #4637281c;
}

.category.active b,
.category:focus-visible b {
    border-color: var(--green);
    background: var(--green);
    color: #fffaf3;
}

@media (hover: hover) and (pointer: fine) {
    .category:hover {
        background: #fffdf9f2;
        border-color: #b781808c;
        box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #4637281c;
        transform: translateY(-3px);
    }

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

    .category:hover b {
        border-color: var(--green);
        background: var(--green);
        color: #fffaf3;
        transform: translateX(2px);
    }

    .category:hover>span {
        color: var(--green);
    }
}

.featured {
    position: relative;
    width: 100%;
    min-height: calc(238 * var(--u));
    padding: calc(4 * var(--u)) 0 calc(24 * var(--u));
    /* Shared upper-flow artwork supplies this section's decorative background. */
    background: transparent;
}

.featured .section-heading {
    width: 83.3%;
    margin: 0 auto calc(16 * var(--u));
}

.product-grid {
    width: 83.3%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(17 * var(--u));
}

.product {
    overflow: hidden;
    border: 1px solid #e2d4c7;
    border-radius: calc(11 * var(--u));
    background: #fffaf3dc;
    box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) #57463012;
}

.product>img {
    width: 100%;
    aspect-ratio: 135 / 110;
    object-fit: cover;
}

.product-info {
    position: relative;
    padding: calc(7 * var(--u)) calc(23 * var(--u)) calc(7 * var(--u)) calc(8 * var(--u));
}

.product h3 {
    font-size: calc(8.5 * var(--u));
    font-weight: 400;
}

.product-info p {
    font-size: calc(8 * var(--u));
    font-weight: 600;
}

.favorite {
    position: absolute;
    right: calc(5 * var(--u));
    top: calc(5 * var(--u));
    font-size: calc(12 * var(--u));
}

.favorite[aria-pressed=true] {
    color: var(--pink);
}

.favorite[aria-pressed=true] svg {
    fill: currentColor;
}

.circle {
    flex-shrink: 0;
    background: transparent;
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    border: 1px solid #d6c2ae;
    border-radius: 50%;
    font-size: calc(12 * var(--u));
    color: #8a7b6b;
    display: grid;
    place-items: center;
    padding: 0;
}

.circle:hover {
    background: #eee1d3;
}

.product-prev,
.product-next {
    position: absolute;
    top: calc(122 * var(--u));
}

.product-prev {
    left: calc(22 * var(--u));
}

.product-next {
    right: calc(22 * var(--u));
}

.filter-status {
    width: 83.3%;
    margin: 0 auto 15px;
    color: var(--muted);
}

.empty-state {
    padding: 35px;
    text-align: center;
}

.empty-state .button {
    margin-top: 15px;
}

.why {
    min-height: calc(165 * var(--u));
    background: transparent;
    padding-top: calc(13 * var(--u));
}

.why-inner {
    width: 89%;
    position: relative;
}

.why-main {
    width: 57%;
    text-align: center;
}

.values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: calc(18 * var(--u));
    gap: calc(15 * var(--u));
}

.values>div {
    min-width: 0;
    padding: calc(3 * var(--u)) calc(2 * var(--u));
    background: #fffaf34d;
    border: 1px solid #fff9f08c;
    border-radius: calc(8 * var(--u));
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.values>div>span {
    display: grid;
    place-items: center;
    background: #fffaf3bb;
    color: #bf8587;
    width: calc(43 * var(--u));
    height: calc(43 * var(--u));
    border-radius: 50%;
    font-size: calc(17 * var(--u));
    margin: 0 auto calc(6 * var(--u));
    border: 1px solid #d9bfaa8c;
    box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) #775e3c1c;
}

.values p {
    font-size: calc(8 * var(--u));
    line-height: 1.5;
    color: var(--muted);
}

.values strong {
    font-weight: 500;
    color: var(--ink);
    letter-spacing: .01em;
}

@media (hover: hover) and (pointer: fine) {
    .values>div:hover {
        transform: translateY(-3px);
        background: #fffaf35c;
        border-color: #e8dbcea6;
        box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) #775e3c12;
    }
}

.why blockquote {
    position: absolute;
    left: 64%;
    top: calc(22 * var(--u));
    font: calc(22 * var(--u))/.92 var(--script);
    color: #907058;
    text-shadow: 0 1px 3px #fffaf3b3;
}

.why blockquote span {
    display: block;
    text-align: center;
    color: #b78180;
    font: calc(17 * var(--u))/1.5 var(--serif);
}

.festival {
    position: relative;
    overflow: hidden;
    height: calc(183 * var(--u));
    color: #fff7e6;
    background: #6b6b46;
}

.festival-art {
    position: absolute;
    inset: 0;
    background: url('/images/festival-background.jpg') center / 100% 100% no-repeat;
}

.festival-inner {
    width: 78.2%;
    position: relative;
    padding-top: calc(23 * var(--u));
}

.festival p:not(.handwritten) {
    font-size: calc(8.5 * var(--u));
}

.festival h2 {
    font-size: calc(27 * var(--u));
    line-height: 1;
    margin: calc(7 * var(--u)) 0 calc(4 * var(--u));
}

.festival .button {
    margin-top: calc(11 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
}

.festival-quote {
    position: absolute;
    z-index: 1;
    top: calc(39 * var(--u));
    right: calc(55 * var(--u));
    text-align: center;
    font-size: calc(18 * var(--u));
    color: #655a43;
}

.festival-quote span {
    color: #625d46;
}

.testimonials {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: clamp(45px, calc(22 * var(--u)), 68px) 0 clamp(72px, 6vw, 105px);
    background: radial-gradient(ellipse at 48% 0%, #fffaf3 0%, #fcf7ef 54%, #f7ede2 100%);
}

.testimonials .section-heading h2 {
    color: var(--green);
}

.testimonials .section-heading > p {
    margin-top: clamp(7px, calc(5 * var(--u)), 12px);
    color: #526158;
}

.testimonial-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .48fr) minmax(170px, .55fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(20px, 2.5vw, 45px);
    width: min(92%, 1300px);
    min-height: 0;
    margin: clamp(29px, calc(18 * var(--u)), 46px) auto 0;
}

.testimonial-layout>.handwritten {
    position: static;
    grid-column: 2;
    justify-self: center;
    max-width: 230px;
    text-align: center;
    color: #96775f;
    font-size: clamp(30px, calc(18 * var(--u)), 43px);
    opacity: .78;
}

.review-wrap {
    position: relative;
    grid-column: 3;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-bottom: 48px;
}

.review {
    background: rgba(255, 252, 247, .94);
    border: 1px solid #d9c8b4;
    border-radius: clamp(20px, calc(14 * var(--u)), 29px);
    padding: clamp(25px, calc(16 * var(--u)), 38px) clamp(27px, calc(19 * var(--u)), 46px);
    box-shadow: 0 10px 28px #624a3121;
}

.review blockquote {
    max-width: 58ch;
    font-size: clamp(14px, calc(8 * var(--u)), 18px);
    color: #34463d;
    line-height: 1.7;
    text-align: left;
}

.review figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: clamp(19px, calc(12 * var(--u)), 27px);
    font-size: clamp(13px, calc(7.5 * var(--u)), 17px);
    color: var(--green);
    line-height: 1.35;
}

.review .stars {
    color: #bf7385;
    font-size: clamp(16px, calc(10 * var(--u)), 21px);
    letter-spacing: .08em;
    line-height: 1;
}

.review small {
    display: block;
    text-align: left;
    color: #687269;
    font-size: clamp(11px, calc(6 * var(--u)), 13px);
    margin-top: 2px;
}

.review-prev,
.review-next {
    position: absolute;
    top: auto;
    bottom: 0;
    width: 38px;
    height: 38px;
    border-color: #ccb18f;
    background: #fffcf7;
    color: var(--green);
    font-size: 20px;
    box-shadow: 0 3px 10px #624a3121;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.review-prev {
    left: calc(50% - 105px);
}

.review-next {
    right: calc(50% - 105px);
}

@media (hover: hover) and (pointer: fine) {
    .review-prev:hover,
    .review-next:hover {
        transform: translateY(-2px);
        border-color: var(--green);
        background: var(--green);
        color: #fffcf7;
        box-shadow: 0 5px 13px #384b3c2b;
    }

    .review-pagination .slide-dot:hover:after {
        background: #a76777;
    }
}

.contact {
    position: relative;
    min-height: clamp(210px, 16vw, 260px);
    padding: clamp(25px, 2.2vw, 36px) 0 clamp(30px, 2.8vw, 45px);
    text-align: center;
    color: #fff8e9;
    background: radial-gradient(ellipse at 72% 12%, #667b62 0%, #52664e 49%, #3e5141 100%);
}

.lower-home-flow {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.lower-flow-lotus {
    position: absolute;
    z-index: 1;
    top: clamp(6px, 1.1vw, 22px);
    left: clamp(0px, 1vw, 18px);
    width: clamp(360px, 30vw, 500px);
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.contact h2 {
    color: #fffaf0;
    font-size: clamp(29px, 2.25vw, 39px);
    letter-spacing: -.018em;
    line-height: 1.14;
}

.contact>.container {
    width: min(88%, 980px);
    margin: 0 auto;
    transform: translateX(clamp(28px, 5vw, 76px));
}

.contact-eyebrow {
    margin: 0 0 clamp(8px, .8vw, 13px) !important;
    color: #e7cc9b !important;
    font-size: clamp(10px, .72vw, 12px) !important;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact p:not(.handwritten) {
    color: #fff8e9d9;
    font-size: clamp(13px, .95vw, 16px);
    margin: clamp(9px, .8vw, 13px) 0 clamp(15px, 1.3vw, 20px);
}

.contact .button {
    min-height: 43px;
    padding: 10px clamp(21px, 1.8vw, 29px);
    border: 1px solid #d7b77d;
    background: #fff8ea;
    color: var(--green);
    box-shadow: 0 7px 18px #20372536;
    font-size: clamp(12px, .9vw, 15px);
}

.contact .button:focus-visible {
    outline-color: #fff8ea;
}

@media (hover: hover) and (pointer: fine) {
    .contact .button:hover {
        border-color: #f0d39c;
        background: #fffdf7;
        box-shadow: 0 9px 21px #2037254a;
    }
}

.contact-quote {
    position: absolute;
    right: clamp(32px, 5.5vw, 88px);
    bottom: clamp(14px, 1.8vw, 28px);
    top: auto;
    max-width: 180px;
    color: #e7e5d0;
    font-size: clamp(25px, 1.7vw, 33px);
    line-height: 1.03;
    opacity: .68;
    text-align: center;
}

footer {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: calc(126 * var(--u));
    padding-top: clamp(27px, 2.4vw, 42px);
    background: linear-gradient(180deg, #fff9ef 0%, #f8f0e6 58%, #f6eddf 100%);
    border-top: 1px solid #d8c39d88;
}

footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: clamp(48px, 5vw, 76px);
    height: 1px;
    background: #ac8961;
    transform: translateX(-50%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.15fr .9fr .92fr 1.28fr;
    gap: clamp(24px, 2.1vw, 38px);
    width: min(90.2%, 1440px);
    margin: 0 auto;
    padding: 0 0 clamp(24px, 2.2vw, 38px);
}

.footer-grid>.brand {
    align-self: center;
    justify-self: start;
    font-size: calc(15 * var(--u));
}

/* No footer brand-lotus markup exists; the decorative mark is only used in the dialog. */

.footer-grid h3 {
    color: var(--green);
    font-family: var(--serif);
    font-size: clamp(16px, 1.12vw, 19px);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: clamp(8px, .7vw, 12px);
}

.footer-grid p,
.footer-links {
    font-size: clamp(12px, .78vw, 14px);
    color: #657064;
    line-height: 1.55;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 18px;
    max-width: 190px;
}

.footer-links a {
    width: fit-content;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.footer-links a:hover {
    color: #a76777;
    text-decoration-color: currentColor;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-link {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid #d7c3a4;
    border-radius: 50%;
    background: #fffaf2cc;
    color: #476052;
    font-size: 17px;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .social-link:hover {
        transform: translateY(-1px);
        border-color: #b58d63;
        background: #fffdf7;
        color: var(--green);
        box-shadow: 0 4px 10px #6a513015;
    }
}

#newsletter {
    display: flex;
    min-height: 46px;
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid #d8c5a7;
    border-radius: 999px;
    background: #fffdf8e0;
    padding: 0;
    box-shadow: inset 0 1px 0 #ffffff99;
}

#newsletter input {
    min-width: 0;
    width: 100%;
    background: none;
    border: 0;
    padding: 10px 14px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

#newsletter input::placeholder {
    color: #7c7c70;
    opacity: 1;
}

#newsletter button {
    border-radius: 50%;
    align-self: center;
    margin-right: 3px;
    background: #876b51;
    color: white;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    #newsletter button:hover {
        transform: translateY(-1px);
        background: var(--green);
        box-shadow: 0 3px 9px #4332222e;
    }
}

.newsletter-status {
    min-height: 1.55em;
    margin: 8px 0 0 !important;
    color: #617060 !important;
    font-size: clamp(11px, .72vw, 13px) !important;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: min(90.2%, 1440px);
    margin: 0 auto;
    padding: clamp(15px, 1.3vw, 21px) 0 clamp(18px, 1.7vw, 28px);
    border-top: 1px solid #dbc8ab;
    font-size: clamp(11px, .7vw, 13px);
    color: #6f776c;
}

.search-bar {
    position: relative;
    padding: 16px 22px;
    background: var(--cream);
    border-radius: 15px;
    box-shadow: 0 10px 30px #223e3520;
    font-size: 14px;
}

.search-bar>div {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.search-bar input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.search-bar .button {
    font-size: 13px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

[hidden] {
    display: none !important;
}

dialog {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--cream);
    color: var(--ink);
    width: min(460px, 90%);
    padding: 38px;
    text-align: center;
    font-size: 14px;
}

dialog::backdrop {
    background: #17382eb0;
}

dialog h2 {
    font-size: 32px;
    margin: 15px 0;
}

dialog p {
    margin-bottom: 24px;
    color: var(--muted);
}

dialog .button {
    font-size: 13px;
}

dialog .brand-lotus {
    height: auto;
}

dialog .brand-lotus svg {
    margin: auto;
}

.dialog-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
}

.toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green);
    color: white;
    padding: 12px 22px;
    border-radius: 30px;
    z-index: 20;
    display: none;
    font-size: 12px;
    text-align: center;
    max-width: 90%;
    width: max-content;
}


/* Mobile is reflowed, rather than shrinking the desktop lettering. */

@media (max-width: 640px) {
     :root {
        --u: 1px;
    }
    body {
        font-size: 13px;
    }
    .nav {
        width: 89%;
        min-height: 73px;
        height: auto;
        padding-top: 12px;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .brand {
        font-size: 20px;
    }
    .brand-lotus {
        font-size: 31px;
        height: 23px;
    }
    .brand small {
        font-size: 6px;
    }
    .nav-actions {
        margin-left: auto;
        padding: 0;
    }
    .nav-actions .small {
        display: none;
    }
    .icon-button {
        font-size: 21px;
        padding: 7px;
    }
    .menu-toggle {
        display: block;
        font-size: 24px;
        order: 3;
        padding: 4px;
    }
    .nav nav {
        display: none;
        order: 4;
        width: 100%;
        flex-basis: 100%;
        background: #fcf5eb;
        border: 1px solid var(--line);
        padding: 10px 18px;
        border-radius: 12px;
        font-size: 13px;
        box-shadow: 0 12px 20px #223e3520;
    }
    .nav nav.open {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .nav nav a {
        padding: 11px 0;
    }
    .hero {
        height: 710px;
    }
    .hero-art {
        background-size: auto 430px;
        background-position: 66% bottom;
        background-color: #f4ecdf;
    }
    .hero-art:before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(#f4ecdf 38%, #f4ecdf00 58%);
    }
    .hero-inner {
        width: 85%;
        padding-top: 103px;
    }
    .hero-copy {
        width: 100%;
    }
    .eyebrow {
        font-size: 9px;
        margin-bottom: 10px;
    }
    .hero-title {
        font-size: 38px;
        line-height: 1.03;
    }
    .hero-title br:nth-of-type(2) {
        display: none;
    }
    .hero-title em {
        font-size: 49px;
    }
    .hero-copy>p:not(.eyebrow) {
        font-size: 12px;
        max-width: 315px;
        margin-top: 10px;
    }
    .desktop-break {
        display: none;
    }
    .hero-buttons {
        gap: 10px;
        margin-top: 19px;
    }
    .hero-buttons .button {
        font-size: 10px;
        padding: 10px 14px;
    }
    .hero-quote {
        top: 411px;
        right: 24px;
        font-size: 20px;
    }
    .hero-pagination {
        top: 671px;
        color: #f9f2e5;
        font-size: 10px;
    }
    .hero-scroll {
        width: 24px;
        height: 24px;
        line-height: 21px;
    }
    h2 {
        font-size: 28px;
    }
    .section-heading>p,
    .why-main>p {
        font-size: 11px;
        max-width: 300px;
        margin: 8px auto 0;
    }
    .text-link {
        position: static;
        display: block;
        margin: 9px auto 0;
        font-size: 10px;
    }
    .categories {
        padding: 27px 0 24px;
        background-size: auto 260px;
    }
    .category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 17px 9px;
        margin-top: 22px;
        width: 92%;
    }
    .category {
        padding: 15px 3px 10px;
        border-radius: 50px 50px 24px 24px;
    }
    .category img {
        height: 66px;
        width: 64px;
    }
    .category>span {
        font-size: 11px;
    }
    .category b {
        width: 20px;
        height: 20px;
        line-height: 18px;
        font-size: 11px;
    }
    .featured {
        padding: 8px 0 28px;
    }
    .featured .section-heading {
        width: 91%;
        margin-bottom: 20px;
    }
    .product-grid {
        width: 89%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px 13px;
    }
    .product {
        border-radius: 12px;
    }
    .product-info {
        padding: 10px 27px 10px 9px;
    }
    .product h3 {
        font-size: 11px;
    }
    .product-info p {
        font-size: 10px;
        margin-top: 3px;
    }
    .favorite {
        font-size: 14px;
        right: 3px;
        top: 7px;
        padding: 4px;
    }
    .product-prev,
    .product-next {
        display: none;
    }
    .festival {
        height: 300px;
    }
    .festival-art {
        background-size: auto 100%;
        background-position: 57% center;
    }
    .festival-art:before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #243a28aa, transparent 85%);
    }
    .festival-inner {
        width: 87%;
        padding-top: 43px;
    }
    .festival p:not(.handwritten) {
        font-size: 11px;
        max-width: 210px;
    }
    .festival h2 {
        font-size: 34px;
        margin: 12px 0;
    }
    .festival .button {
        font-size: 10px;
        padding: 10px 13px;
        margin-top: 18px;
    }
    .festival-quote {
        display: none;
    }
    .testimonials {
        padding: 37px 0 54px;
    }
    .testimonial-layout {
        display: block;
        width: 100%;
        margin-top: 25px;
    }
    .testimonial-layout>.handwritten {
        display: none;
    }
    .review-wrap {
        width: calc(100% - 32px);
        max-width: 510px;
        margin: 0 auto;
        padding-bottom: 48px;
    }
    .review {
        padding: 24px 23px;
        border-radius: 21px;
    }
    .review blockquote {
        font-size: 14px;
    }
    .review figcaption {
        gap: 5px;
        margin-top: 19px;
        font-size: 13px;
    }
    .review small {
        font-size: 11px;
    }
    .circle {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    .contact {
        min-height: 0;
        height: auto;
        padding: 27px 18px 25px;
    }
    .contact h2 {
        font-size: clamp(26px, 7vw, 31px);
        max-width: 300px;
        margin: auto;
    }
    .contact p:not(.handwritten) {
        font-size: 12px;
        margin: 8px 0 14px;
    }
    .contact .button {
        font-size: 11px;
        padding: 10px 18px;
    }
    .contact>.container {
        width: min(100%, 420px);
        transform: translateX(8px);
    }
    .contact-eyebrow {
        margin-bottom: 8px !important;
        font-size: 10px !important;
    }
    .contact-quote {
        display: none;
    }
    .lower-flow-lotus {
        top: auto;
        bottom: clamp(62px, 18vw, 88px);
        left: -38px;
        width: clamp(175px, 47vw, 230px);
    }
    .lower-home-flow {
        overflow-x: clip;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
        padding: 0 0 26px;
    }
    .footer-grid>.brand {
        font-size: 20px;
    }
    .footer-grid h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .footer-grid p,
    .footer-links {
        font-size: 12px;
    }
    .footer-links {
        max-width: none;
        gap: 5px 12px;
    }
    .social-link {
        font-size: 17px;
    }
    #newsletter {
        margin-top: 12px;
    }
    #newsletter input {
        font-size: 16px;
        padding: 10px 14px;
    }
    #newsletter button {
        width: 42px;
        height: 42px;
    }
    .footer-newsletter {
        grid-column: 1 / -1;
        width: min(100%, 460px);
        justify-self: center;
    }
    .footer-bottom {
        font-size: 8px;
        gap: 15px;
        padding: 15px 0;
    }
}

@media (max-width: 360px) {
    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hero-inner {
        width: 88%;
    }
    .hero-title {
        font-size: 35px;
    }
    .hero-title em {
        font-size: 44px;
    }
    .hero-buttons {
        gap: 7px;
    }
    .hero-buttons .button {
        padding: 10px 11px;
        font-size: 9px;
    }
    .product h3 {
        font-size: 10px;
    }
    .review {
        padding: 19px 15px;
    }
}

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


/* Preserve the supplied deity photography; the cleaned plate fills only the scenery. */

.hero-art:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 3%, #f7eddebb 12%, #f7eddecc 37%, transparent 58%);
}

.hero-original {
    position: absolute;
    left: calc(320 * var(--u));
    top: calc(38 * var(--u));
    right: 0;
    bottom: 0;
    mask-image: linear-gradient(90deg, transparent, black 25%);
}

.hero-quote {
    visibility: hidden;
}

.festival-original {
    position: absolute;
    inset: 0 0 0 calc(300 * var(--u));
    background: url('/images/festival-original.jpg') center / 100% 100% no-repeat;
    mask-image: linear-gradient(90deg, transparent, black 18%);
}

.festival-quote {
    visibility: hidden;
}

@media(max-width:640px) {
    .hero-original {
        left: 0;
        top: 320px;
        bottom: 0;
        background-size: auto 100%;
        background-position: 64% bottom;
        mask-image: linear-gradient(180deg, transparent, black 17%);
    }
    .hero-art:after {
        display: none;
    }
    .hero-quote {
        display: none;
    }
    .festival-original {
        left: 0;
        background-size: auto 100%;
        background-position: 25% center;
        opacity: .95;
    }
    .festival-inner {
        background: linear-gradient(90deg, #273a2880, transparent);
        margin-left: 0;
        padding-left: 6.5%;
        width: 100%;
        height: 100%;
    }
}


/* Final optical adjustments after comparison with the supplied reference. */

.category img {
    mix-blend-mode: darken;
    filter: brightness(1.055) contrast(1.025);
}

.hero-original {
    mask-image: linear-gradient(90deg, transparent, black 25%), linear-gradient(180deg, transparent, black 8%);
    mask-composite: intersect;
}

.hero-art:after {
    background: linear-gradient(90deg, transparent 3%, #f7eddef0 12%, #f7eddee8 38%, transparent 58%);
}

.hero-buttons {
    margin-top: calc(13 * var(--u));
}

.hero-copy>p:not(.eyebrow) {
    margin-top: calc(6 * var(--u));
}

.brand-image {
    width: calc(88 * var(--u));
    height: calc(41 * var(--u));
    object-fit: contain;
    mix-blend-mode: darken;
}

.footer-grid .brand-image {
    width: clamp(150px, 12vw, 205px);
    height: auto;
}

@media(max-width:640px) {
    .category img {
        filter: brightness(1.055) contrast(1.025);
    }
    .hero-original {
        mask-image: linear-gradient(180deg, transparent, black 17%);
        mask-composite: add;
    }
    .hero-copy>p:not(.eyebrow) {
        margin-top: 12px;
    }
    .hero-buttons {
        margin-top: 19px;
    }
    .hero-title em {
        margin-left: 7px;
    }
    .brand-image {
        width: 126px;
        height: 48px;
    }
    .footer-grid .brand-image {
        width: 132px;
        height: auto;
    }
}

.brand-image {
    filter: brightness(1.12) contrast(1.06);
}

@media(min-width:641px) {
    .footer-grid p {
        font-size: calc(6 * var(--u));
    }
    .footer-grid {
        padding-bottom: calc(13 * var(--u));
    }
}


/* Full-width artwork, independently centered content containers. */

body {
    width: 100%;
    max-width: none;
}

.header {
    max-width: none;
}

.container {
    max-width: 1440px;
}

.nav {
    max-width: 1332px;
}

.hero-inner,
.festival-inner {
    max-width: 1252px;
}

.categories,
.featured,
.testimonials {
    max-width: none;
}

.categories .section-heading {
    max-width: 1408px;
}

.category-grid {
    max-width: 1440px;
}

.featured .section-heading,
.product-grid,
.filter-status {
    max-width: 1333px;
}

.why-inner {
    max-width: 1424px;
}

.testimonial-layout {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.category img {
    mix-blend-mode: normal;
    filter: none;
    background: transparent;
}

@media(min-width:1601px) {
    .hero {
        height: calc(100vw * 348 / 715);
    }
    .hero-original {
        left: 44.7552%;
        top: calc(100vw * 38 / 715);
    }
    .hero-inner {
        padding-top: calc(100vw * 75 / 715);
    }
    .hero-pagination {
        top: calc(100vw * 314 / 715);
    }
    .festival {
        height: calc(100vw * 183 / 715);
    }
    .festival-original {
        left: 41.958%;
    }
    .festival-inner {
        padding-top: calc(100vw * 23 / 715);
    }
    .product-prev {
        left: max(22px, calc(50% - 751px));
    }
    .product-next {
        right: max(22px, calc(50% - 751px));
    }
}


/* Banner and testimonial carousels. Each slide can be replaced independently. */

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}

.hero-slide.is-active,
.review.is-active {
    animation: reveal-slide .4s ease-out;
}

@keyframes reveal-slide {
    from {
        opacity: .3;
    }
    to {
        opacity: 1;
    }
}

.hero>.hero-pagination {
    z-index: 2;
    top: auto;
    bottom: calc(16 * var(--u));
    left: max(10.9%, calc(50% - 626px));
    align-items: center;
}

.hero-pagination button {
    background: transparent;
    padding: 6px 2px;
    font-size: inherit;
    border-bottom: 1px solid transparent;
}

.hero-pagination .current {
    border-bottom-color: #b79d82;
}

.slider-pause {
    line-height: 1;
}

.hero-prev,
.hero-next {
    position: absolute;
    z-index: 2;
    top: 50%;
    background: #fbf5e966;
    color: var(--green);
}

.hero-prev {
    left: calc(15 * var(--u));
}

.hero-next {
    right: calc(15 * var(--u));
}

.hero-slides,
.review-slides {
    touch-action: pan-y;
}

.review-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}

.review-pagination .slide-dot {
    display: grid;
    place-items: center;
    background: none;
    width: 24px;
    height: 24px;
    padding: 0;
}

.review-pagination .slide-dot:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cdb7aa;
    transition: background-color .2s ease, width .2s ease, height .2s ease;
}

.review-pagination .current:after {
    background: #b87080;
    width: 9px;
    height: 9px;
}

@media(max-width:640px) {
    .hero>.hero-pagination {
        left: 7.5%;
        bottom: 16px;
        top: auto;
        padding: 2px 9px;
        border-radius: 18px;
        background: #264b3b66;
    }
    .hero-prev,
    .hero-next {
        display: none;
    }
    .hero-pagination button {
        min-width: 26px;
        min-height: 28px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-slide.is-active,
    .review.is-active {
        animation: none;
    }
}

/* Decorative flowers sit over section artwork and underneath all readable content. */

main > .hero,
main > .homepage-flow > .upper-home-flow > section,
main > .homepage-flow > section {
    position: relative;
    isolation: isolate;
}

.flower-particle-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.hero-slides,
.hero-slide {
    z-index: auto;
}

.hero-slide.is-active {
    animation: none;
}

.hero-slide.is-active .hero-inner {
    animation: reveal-slide .4s ease-out;
}

.hero-inner,
.festival-inner {
    position: relative;
    z-index: 2;
}

.hero-scroll {
    z-index: 2;
}

.categories>.section-heading,
.category-grid,
.featured>.section-heading,
.product-grid,
.filter-status,
.empty-state,
.why-inner,
.testimonials>.section-heading,
.testimonial-layout,
.contact>.container {
    position: relative;
    z-index: 2;
}

.product-prev,
.product-next,
.festival-quote,
.contact-quote {
    z-index: 2;
}

@media(prefers-reduced-motion:reduce) {
    .flower-particle-layer {
        display: none;
    }
    .hero-slide.is-active .hero-inner {
        animation: none;
    }
}

/* Hero banner-only slides and their cross-fade are isolated from the page layout. */
.hero-slide--banner .hero-art {
    background-size: cover;
    background-position: center;
}

.hero-slide {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.02);
    transition: opacity 1.4s ease, transform 1.4s ease, visibility 0s linear 1.4s;
}

.hero-slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 1.4s ease, transform 1.4s ease, visibility 0s linear 0s;
}

.hero-slide.is-active .hero-inner {
    animation: none;
}

@media (max-width: 640px) {
    .hero-slide--banner .hero-art {
        background-size: cover;
        background-position: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide.is-active {
        transform: none;
        transition: opacity .01s linear, visibility 0s linear .01s;
    }
    .hero-slide.is-active {
        transition: opacity .01s linear, visibility 0s linear 0s;
    }
}


/* Responsive refinements: keep composition readable across tablets and compact phones. */

@media (min-width: 641px) and (max-width: 960px) {
     :root {
        --u: calc(100vw / 715);
    }
    .nav {
        width: 91%;
        gap: 12px;
    }
    .nav nav {
        padding-left: 16px;
        padding-right: 8px;
        gap: 14px;
    }
    .hero {
        height: 500px;
    }
    .hero-inner {
        width: 86%;
        padding-top: 95px;
    }
    .hero-original {
        left: 38%;
        top: 50px;
    }
    .hero-quote {
        right: 4%;
    }
    .category-grid {
        width: 94%;
        gap: 9px;
    }
    .product-grid,
    .featured .section-heading {
        width: 90%;
    }
    .why-main {
        width: 67%;
    }
    .why blockquote {
        left: 72%;
    }
    .testimonial-layout>.handwritten {
        font-size: clamp(29px, 4vw, 37px);
        max-width: 180px;
        justify-self: end;
        margin-right: 7%;
    }
    .testimonial-layout {
        grid-template-columns: minmax(0, 1fr);
        width: min(88%, 700px);
        gap: 12px;
    }
    .testimonial-layout>.handwritten,
    .testimonial-layout>.review-wrap {
        grid-column: 1;
    }
    .testimonial-layout>.review-wrap {
        width: min(100%, 560px);
        justify-self: end;
    }
    .contact-quote {
        right: 5%;
    }
    .footer-grid {
        width: 90.2%;
        grid-template-columns: 1.08fr .92fr;
        gap: 18px;
    }
    .lower-flow-lotus {
        top: 18px;
        left: 0;
        width: clamp(320px, 42vw, 420px);
    }
}

@media (max-width: 640px) {
    .header {
        position: absolute;
    }
    .header.menu-is-open {
        min-height: 100vh;
        background: linear-gradient(180deg, #fffaf4f7 0 125px, transparent 230px);
    }
    .nav {
        position: relative;
        z-index: 2;
    }
    .menu-toggle {
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 50%;
        line-height: 1;
    }
    .nav nav.open {
        margin-top: -4px;
        padding: 7px 18px;
    }
    .nav nav a+a {
        border-top: 1px solid var(--line);
    }
    .search-bar {
        width: calc(100% - 28px);
        margin: 0 auto;
        border-radius: 12px;
        padding: 12px;
        z-index: 6;
    }
    .search-bar>div {
        gap: 7px;
    }
    .search-bar input {
        font-size: 16px;
        padding: 10px;
    }
    .search-bar .button {
        padding: 10px 13px;
    }
    .hero-copy {
        text-shadow: 0 1px 0 #fff8;
    }
    .hero-buttons {
        flex-wrap: wrap;
    }
    .hero-buttons .button {
        min-height: 40px;
    }
    .category {
        min-height: 139px;
        justify-content: space-between;
    }
    .category>span {
        min-height: 27px;
        display: grid;
        place-items: center;
    }
    .product>img {
        aspect-ratio: 1 / .85;
    }
    .product-info {
        min-height: 61px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .footer-grid>.brand {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

@media (max-width: 430px) {
    .nav {
        width: calc(100% - 28px);
        gap: 7px;
    }
    .brand-image {
        width: 112px;
        height: 44px;
    }
    .menu-toggle {
        order: 2;
        margin-left: auto;
    }
    .nav-actions {
        margin-left: 0;
    }
    .hero {
        height: 670px;
    }
    .hero-inner {
        width: calc(100% - 42px);
        padding-top: 94px;
    }
    .hero-title {
        font-size: clamp(33px, 10vw, 38px);
    }
    .hero-title em {
        font-size: clamp(43px, 13vw, 49px);
    }
    .hero-copy>p:not(.eyebrow) {
        max-width: 285px;
    }
    .hero-original {
        top: 300px;
        background-position: 60% bottom;
    }
    .hero-quote {
        display: none;
    }
    .hero>.hero-pagination {
        bottom: 12px;
    }
    .categories {
        padding-top: 31px;
    }
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 32px);
        gap: 12px;
    }
    .category {
        min-height: 160px;
        padding-top: 14px;
    }
    .category img {
        width: 78px;
        height: 76px;
    }
    .product-grid {
        width: calc(100% - 32px);
        gap: 13px 10px;
    }
    .product-info {
        padding-left: 8px;
        padding-right: 24px;
    }
    .festival {
        height: 320px;
    }
    .festival-inner {
        padding-top: 48px;
    }
    .contact {
        padding-left: 18px;
        padding-right: 18px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 22px 12px;
    }
    .footer-bottom {
        line-height: 1.5;
    }
}

@media (max-width: 340px) {
    .brand-image {
        width: 99px;
    }
    .hero-buttons .button {
        width: 100%;
    }
    .product-grid {
        grid-template-columns: 1fr;
        max-width: 265px;
    }
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .festival h2 {
        font-size: 30px;
    }
}

/* Featured products use native horizontal scrolling; card visuals remain unchanged. */
.product-grid {
    --product-gap: calc(17 * var(--u));
    display: flex;
    grid-template-columns: none;
    gap: var(--product-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.product-grid::-webkit-scrollbar {
    display: none;
}

.product-grid .product {
    flex: 0 0 calc((100% - calc(3 * var(--product-gap))) / 4);
    scroll-snap-align: start;
}

.product-prev:disabled,
.product-next:disabled {
    cursor: default;
    opacity: .35;
}

.product-prev:disabled:hover,
.product-next:disabled:hover {
    background: transparent;
}

@media (min-width: 641px) and (max-width: 960px) {
    .product-grid .product {
        flex-basis: calc((100% - calc(2 * var(--product-gap))) / 3);
    }
}

@media (max-width: 640px) {
    .product-grid {
        --product-gap: 13px;
    }
    .product-grid .product {
        flex-basis: calc((100% - var(--product-gap)) / 2);
    }
}

@media (max-width: 340px) {
    .product-grid .product {
        flex-basis: 100%;
    }
}

/* Sticky header layer: stays above the hero and preserves its original dimensions. */
.header {
    position: sticky;
    top: 0;
    z-index: 20;
    max-width: none;
    background: #f8f0e6ed;
    border-bottom: 1px solid #e8dbceaa;
    box-shadow: 0 2px 12px #223e3510;
    backdrop-filter: blur(10px);
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.header .search-bar {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.hero {
    margin-top: calc(-48 * var(--u));
}

main > .hero,
main > .homepage-flow > .upper-home-flow > section,
main > .homepage-flow > .lower-home-flow > section,
main > .homepage-flow > section {
    scroll-margin-top: calc(58 * var(--u));
}

@media (max-width: 640px) {
    .header {
        position: sticky;
        overflow: visible;
    }
    .header.menu-is-open {
        min-height: 0;
        background: #f8f0e6ed;
    }
    .nav nav.open {
        position: absolute;
        z-index: 2;
        top: calc(100% - 4px);
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
    }
    .header .search-bar {
        top: 73px;
    }
    .hero {
        margin-top: -73px;
    }
    main > .hero,
    main > .homepage-flow > .upper-home-flow > section,
    main > .homepage-flow > .lower-home-flow > section,
    main > .homepage-flow > section {
        scroll-margin-top: 84px;
    }
}

/* Quiet viewport control, positioned below the sticky header and above page content. */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #d6c2ae;
    border-radius: 50%;
    background: #fbf5e9;
    color: var(--green);
    box-shadow: 0 5px 16px #523d261f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

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

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

.back-to-top:hover {
    background: #f3e5d5;
}

@media (max-width: 640px) {
    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 767px) {
    .upper-home-flow {
        background-image: none;
        background-color: var(--cream);
    }

    .upper-home-flow::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top.is-visible {
        transition: none;
    }
}

/* Keep the logo, desktop links, and header actions on one aligned row. */
@media (min-width: 641px) {
    .header .nav {
        height: calc(48 * var(--u));
        align-items: center;
        padding-top: 0;
    }
    .header .nav nav,
    .header .nav-actions {
        padding-top: 0;
    }
}

/* Keep the WhatsApp mark crisp and aligned with its label. */
.nav-actions .button.small svg {
    flex-shrink: 0;
    font-size: 1.25em;
    stroke-width: 2;
}

.mobile-whatsapp {
    display: none;
}

.product-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: calc(3 * var(--u));
    margin-top: calc(4 * var(--u));
    padding: 0;
    background: transparent;
    color: var(--green);
    font-size: calc(6.5 * var(--u));
    font-weight: 500;
}

.product-whatsapp svg,
.festival-whatsapp svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.festival-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
}

.festival-actions .button {
    margin-top: calc(11 * var(--u));
}

@media (max-width: 640px) {
    .nav nav.open .mobile-whatsapp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 8px;
        padding: 10px 13px;
        border: 0;
        border-radius: 24px;
        background: var(--green);
        color: #fff;
        font-size: 11px;
        font-weight: 500;
    }
    .mobile-whatsapp svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }
    .product-whatsapp {
        gap: 4px;
        margin-top: 4px;
        font-size: 10px;
    }
    .festival-actions {
        gap: 8px;
    }
    .festival-actions .button {
        margin-top: 18px;
    }
}

/* Featured Collection and Why Manjulyam polish. The shared artwork stays on upper-home-flow. */
.featured {
    min-height: 0;
    padding: calc(20 * var(--u)) 0 calc(34 * var(--u));
}

.featured .section-heading {
    margin-bottom: calc(20 * var(--u));
}

.featured .section-heading h2,
.why h2 {
    color: var(--green);
}

.featured .section-heading > p {
    margin-top: calc(7 * var(--u));
}

.product-grid {
    --product-gap: calc(14 * var(--u));
    padding: 3px 2px calc(10 * var(--u));
}

.product-grid .product {
    flex-basis: calc((100% - 3 * var(--product-gap)) / 4);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #d9c8b4;
    border-radius: calc(10 * var(--u));
    background: rgba(255, 252, 247, .94);
    box-shadow: 0 calc(3 * var(--u)) calc(11 * var(--u)) #59452e1a;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / .85;
    object-fit: contain;
    object-position: center;
    background: #f6eee3;
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
}

.product h3 {
    padding-right: calc(20 * var(--u));
    color: var(--green);
    font-size: calc(8 * var(--u));
    font-weight: 600;
    line-height: 1.3;
}

.product-info p {
    margin-top: calc(3 * var(--u));
    color: var(--ink);
    font-size: calc(7.5 * var(--u));
    font-weight: 700;
}

.product .favorite {
    top: calc(7 * var(--u));
    right: calc(7 * var(--u));
    display: grid;
    place-items: center;
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
    padding: calc(3 * var(--u));
    border: 1px solid #e4d6c5;
    border-radius: 50%;
    background: #fffcf7;
    color: var(--green);
    box-shadow: 0 2px 5px #59452e14;
}

.product .favorite svg {
    width: 100%;
    height: 100%;
}

.product .favorite[aria-pressed=true] {
    color: var(--pink);
}

.product .product-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    gap: .55em;
    min-height: calc(20 * var(--u));
    margin-top: auto;
    padding: calc(4 * var(--u)) calc(6 * var(--u));
    border: 1px solid #164b3f;
    border-radius: 999px;
    background: var(--green);
    color: #fffaf3;
    font-size: calc(7 * var(--u));
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.product .product-whatsapp svg {
    width: 1.2em;
    height: 1.2em;
}

.featured .circle {
    border-color: #c9ad88;
    background: #fffcf7ed;
    color: var(--green);
    box-shadow: 0 3px 10px #59452e1a;
}

.featured .circle:disabled {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .product-grid .product:hover {
        transform: translateY(-3px);
        border-color: #bda381;
        box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) #59452e2b;
    }

    .product .product-whatsapp:hover {
        background: #124a3d;
        box-shadow: 0 3px 8px #164b3f33;
    }

    .featured .circle:not(:disabled):hover {
        background: #f5e9d9;
    }
}

.why {
    min-height: 0;
    padding: clamp(28px, calc(13 * var(--u)), 44px) 0 clamp(40px, calc(20 * var(--u)), 64px);
}

.why-inner {
    width: 83.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.why-main {
    width: 100%;
    text-align: center;
}

.why-main > p {
    margin-top: calc(7 * var(--u));
}

.values {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(12 * var(--u));
    margin: clamp(26px, calc(15 * var(--u)), 42px) 0 0;
}

.values > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(5 * var(--u)) calc(3 * var(--u));
    background: transparent;
    border-color: transparent;
}

.values > div > span {
    width: clamp(56px, calc(37 * var(--u)), 76px);
    height: clamp(56px, calc(37 * var(--u)), 76px);
    border: 1px solid #cbaa91;
    background: #fffcf7ed;
    color: #b8797e;
    box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) #67462e26;
}

.values p {
    color: #5d665e;
    line-height: 1.45;
}

.values strong {
    color: var(--green);
    font-weight: 600;
}

.why blockquote {
    position: static;
    width: auto;
    margin: clamp(25px, calc(13 * var(--u)), 42px) auto 0;
    color: #907058;
    text-align: center;
    font-size: clamp(30px, calc(14 * var(--u)), 44px);
    line-height: .95;
}

@media (min-width: 641px) and (max-width: 960px) {
    .product-grid .product {
        flex-basis: calc((100% - 2 * var(--product-gap)) / 3);
    }
}

@media (max-width: 640px) {
    .featured {
        padding: 27px 0 35px;
    }

    .featured .section-heading {
        margin-bottom: 20px;
    }

    .product-grid {
        --product-gap: 13px;
    }

    .product-grid .product {
        flex-basis: calc((100% - var(--product-gap)) / 2);
        border-radius: 12px;
    }

    .product-info {
        padding: 10px 9px 11px;
    }

    .product h3 {
        padding-right: 22px;
        font-size: 11px;
    }

    .product-info p {
        font-size: 11px;
    }

    .product .favorite {
        top: 7px;
        right: 7px;
        width: 23px;
        height: 23px;
        padding: 4px;
    }

    .product .product-whatsapp {
        min-height: 34px;
        margin-top: 10px;
        padding: 7px 9px;
        font-size: 11px;
    }

    .why {
        padding: 26px 0 30px;
    }

    .why-inner {
        width: calc(100% - 32px);
    }

    .values {
        width: min(100%, 360px);
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: 12px;
        row-gap: 20px;
        margin: 20px auto 0;
        padding: 0 4px;
    }

    .values > div {
        min-width: 0;
        min-height: 102px;
        padding: 0;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    .values > div > span {
        flex: 0 0 53px;
        width: 53px;
        height: 53px;
        margin: 0 auto 8px;
    }

    .values p {
        width: 100%;
        min-height: 31px;
        margin: 0;
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
    }

    .why blockquote {
        width: auto;
        margin: 26px auto 0;
        font-size: 29px;
    }
}

@media (max-width: 340px) {
    .product-grid {
        max-width: none;
    }

    .product-grid .product {
        flex-basis: calc((100% - var(--product-gap)) / 2);
    }

    .product h3 {
        font-size: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .product-grid .product,
    .product .product-whatsapp {
        transition: none;
    }
}

@media (max-width: 640px) {
    .review-wrap .review-prev,
    .review-wrap .review-next {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .hero-slide--banner .hero-art-2 {
        background-image: url('/images/optimized/slider-2-mobile.webp');
        background-position: center;
    }

    .hero-slide--banner .hero-art-3 {
        background-image: url('/images/optimized/slider-3-mobile.webp');
        background-position: center;
    }
}

/* Narrow mobile needs a little extra crown clearance below the shared Hero fade. */
@media (max-width: 400px) {
    .hero-slide--banner .hero-art-3 {
        background-position: center calc(50% + 80px);
    }
}

/* Ease Slider 1 from the approved mobile composition into the tablet layout. */
@media (min-width: 641px) and (max-width: 767px) {
    .hero {
        height: clamp(500px, calc(804px - 39.5vw), 550px);
    }
}

/* Let the narrow footer grid tracks shrink before its contents wrap. */
@media (max-width: 360px) {
    .footer-grid > * {
        min-width: 0;
    }

    .footer-newsletter,
    #newsletter {
        width: 100%;
        max-width: 100%;
    }

    .social-links {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .category-carousel,
    .product-carousel {
        position: relative;
        width: 100%;
        margin-top: 22px;
    }

    .category-grid,
    .product-grid {
        width: calc(100% - 72px);
        margin: 0 auto;
        padding: 3px 0 8px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-y;
    }

    .category-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .category-grid::-webkit-scrollbar,
    .product-grid::-webkit-scrollbar {
        display: none;
    }

    .category-grid .category {
        flex: 0 0 clamp(140px, 48%, 220px);
        min-height: 160px;
        scroll-snap-align: start;
    }

    .category-grid .category > span {
        min-height: 27px;
        margin-inline: 4px;
        white-space: normal;
        text-align: center;
    }

    .carousel-arrow {
        display: grid;
        position: absolute;
        z-index: 2;
        top: 50%;
        width: 30px;
        height: 30px;
        border-color: #c9ad88;
        background: #fffcf7ed;
        color: var(--green);
        box-shadow: 0 3px 10px #59452e1a;
        font-size: 16px;
        transform: translateY(-50%);
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }

    .carousel-arrow:disabled {
        cursor: default;
        opacity: .35;
        box-shadow: none;
    }

    .carousel-arrow:disabled:hover {
        background: #fffcf7ed;
    }

    @media (hover: hover) and (pointer: fine) {
        .carousel-arrow:not(:disabled):hover {
            background: #f5e9d9;
        }
    }
}

@media (max-width: 340px) {
    .values {
        column-gap: 8px;
        row-gap: 18px;
        padding: 0;
    }

    .values > div {
        min-height: 98px;
    }
}