/* Base Textures and Resets */
body {
    background-color: #F2EBE1;
    color: #2A251C;
    /* Subtle noise texture for linen/stone feel */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Typography Refinements */
h1, h2, h3, h4, h5, .font-serif {
    font-feature-settings: "liga" 1, "dlig" 1;
}

.text-balance {
    text-wrap: balance;
}

/* SPA Page Transitions */
.page-section {
    display: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-section.active {
    display: block;
    opacity: 1;
}

/* Luxury Scroll Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #F2EBE1; 
}
::-webkit-scrollbar-thumb {
    background: #C2A878; 
}
::-webkit-scrollbar-thumb:hover {
    background: #8A703C; 
}

/* Hide scrollbar for grids but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Image hover zoom */
.img-zoom-container {
    overflow: hidden;
}
.img-zoom-container img {
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom-container:hover img {
    transform: scale(1.05);
}

.trust-strip {
    align-items: center;
    border-top: 1px solid rgba(138, 112, 60, 0.22);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    margin: 2.25rem auto 0;
    max-width: 44rem;
    padding-top: 1.25rem;
}

.trust-strip span {
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    position: relative;
    text-transform: uppercase;
}

.trust-strip span:not(:last-child)::after {
    background: #C2A878;
    border-radius: 999px;
    content: "";
    height: 0.25rem;
    position: absolute;
    right: -0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.25rem;
}

/* --- Hero ----------------------------------------------------------------
   Three stacked layers: the Khambhat landscape, a scrim that grades it into
   the house palette, and the content. The scrim is what makes the backdrop
   safe to swap — any photograph dropped in behind it comes out reading as
   ivory-and-bronze, and the plaque keeps its contrast. */
.hero {
    align-items: center;
    display: flex;
    isolation: isolate;
    justify-content: center;
    min-height: min(86vh, 52rem);
    overflow: hidden;
    position: relative;

    /* `main` carries a fixed pt-24 to clear the fixed header, but the header is
       shorter than that, so the difference showed as a strip of bare body
       colour above the hero. Cancel the padding and re-add it inside: the
       landscape then runs up under the header — which is 95% opaque ivory, so
       it stays legible — and there is no seam left to notice. */
    margin-top: -6rem;
    padding: 9rem 1rem 4rem;
}

/* Overhangs the hero at the bottom on purpose. The scene is wider than it is
   tall, so `cover` pins it by height and object-position has no vertical say —
   the only way to set where the horizon falls is to change the box it fills.
   The overhang drops the waterline back below the headline and takes the town
   skyline out from behind the wordmark; what it pushes past the bottom edge is
   the part already buried under the ivory fade. */
.hero-bg {
    bottom: -5rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.hero-bg img {
    animation: hero-drift 34s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    transform-origin: 58% 70%;   /* holds the sun and the far shore in frame */
    width: 100%;
}

@keyframes hero-drift {
    from { transform: scale(1.04); }
    to   { transform: scale(1.13); }
}

/* Ivory at the top so the fixed header dissolves into the scene, and a warm
   lift through the middle to seat the emblem.

   The bottom lands on #EAE2D3, not the page ivory — that is the exact colour of
   the section the hero hands off to. Fading to ivory left an 8-value step at the
   join, which read as a line across the page. */
.hero-scrim {
    background:
        radial-gradient(44% 40% at 50% 62%, rgba(242, 235, 225, 0.34) 0%, rgba(242, 235, 225, 0.14) 60%, rgba(242, 235, 225, 0) 100%),
        linear-gradient(to bottom,
            rgba(242, 235, 225, 0.52) 0%,
            rgba(242, 235, 225, 0.08) 14%,
            rgba(242, 235, 225, 0) 40%,
            rgba(242, 235, 225, 0) 70%,
            rgba(234, 226, 211, 0.30) 84%,
            rgba(234, 226, 211, 0.78) 95%,
            #EAE2D3 100%),
        radial-gradient(120% 100% at 50% 50%, rgba(42, 37, 28, 0) 38%, rgba(42, 37, 28, 0.20) 100%);
    inset: 0;
    position: absolute;
    z-index: 1;
}

.hero-inner {
    position: relative;
    width: 100%;
    z-index: 2;
}

/* The emblem is cut out now, so it has no card to sit on — separation from the
   sky behind it comes from a cast shadow instead of an edge. */
/* The wordmark is the wider element and has to hold one line, so the container
   is sized for the type and the palm is capped independently. Tying the two
   together wraps "Maison Cambay" on narrow screens. */
/* The 1rem taken off here is added back onto the headline's own bottom margin,
   so "Refined for the World." rides up without shifting anything below it. */
.hero-mark {
    margin: 0 auto 1.25rem;
    max-width: 34rem;
    position: relative;
    text-align: center;
    width: 100%;
}

.hero-mark img {
    display: block;
    filter:
        drop-shadow(0 1px 1px rgba(74, 58, 28, 0.4))
        drop-shadow(0 12px 26px rgba(74, 58, 28, 0.28));
    height: auto;
    margin: 0 auto 1.5rem;
    max-width: clamp(10rem, 19vw, 16.5rem);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.hero-mark:hover img {
    transform: translateY(-6px);
}

.hero-wordmark {
    color: #6E5828;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.1;
    text-indent: 0.16em;   /* balances the trailing letter-space */
    text-transform: uppercase;
}

.hero-tagline {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    letter-spacing: 0.06em;
    margin-top: 0.55rem;
}

@media (max-width: 640px) {
    .hero {
        min-height: 82vh;
        padding: 8.5rem 1rem 3.5rem;   /* 2.5rem + the 6rem cancelled above */
    }

    .hero-mark {
        margin-bottom: 0.75rem;
    }

    .hero-mark img {
        margin-bottom: 1.25rem;
        max-width: 9.5rem;
    }

    /* A tall crop of a wide scene keeps only a narrow strip; bias it off-centre
       so the palms stay in frame instead of a bare stretch of water. */
    .hero-bg img {
        object-position: 18% center;
    }
}

/* Loading Overlay */
#loader {
    transition: opacity 0.55s ease, visibility 0.55s ease;
}
#loader.hidden-loader {
    opacity: 0;
    visibility: hidden;
}

/* Collection Catalog */
.shop-confidence-bar {
    border: 1px solid rgba(138, 112, 60, 0.24);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 2rem;
}

.shop-confidence-bar div {
    background: rgba(234, 226, 211, 0.52);
    padding: 1.15rem;
}

.shop-confidence-bar strong,
.product-trust-grid strong {
    color: #8A703C;
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.shop-confidence-bar span,
.product-trust-grid span {
    color: rgba(42, 37, 28, 0.62);
    display: block;
    font-size: 0.74rem;
    font-weight: 300;
    line-height: 1.7;
}

.catalog-toolbar {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    border-bottom: 1px solid rgba(227, 220, 207, 0.9);
    margin-bottom: 1.75rem;
    padding: 1.5rem 0;
}

.catalog-toolbar-top {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.catalog-result-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.catalog-filter-toggle,
.catalog-sort {
    align-items: center;
    color: #8A703C;
    display: inline-flex;
    font-size: 0.7rem;
    gap: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.catalog-sort-select {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    outline: 0;
    text-transform: uppercase;
}

.catalog-filter-toggle:hover,
.catalog-sort:hover {
    color: #C2A878;
}

.catalog-result-count {
    color: rgba(42, 37, 28, 0.48);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.catalog-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.catalog-filter-row.is-hidden {
    display: none;
}

.catalog-filter-chip {
    background: transparent;
    border: 1px solid rgba(138, 112, 60, 0.32);
    color: #8A703C;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    min-height: 3rem;
    padding: 0 1.15rem;
    text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.catalog-filter-select {
    background: transparent;
    border: 1px solid rgba(138, 112, 60, 0.32);
    color: #8A703C;
    cursor: pointer;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    min-height: 3rem;
    outline: 0;
    padding: 0 1rem;
    text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.catalog-filter-chip:hover,
.catalog-filter-chip.active,
.catalog-filter-select:hover,
.catalog-filter-select:focus {
    background-color: rgba(234, 226, 211, 0.65);
    border-color: rgba(138, 112, 60, 0.65);
    color: #2A251C;
}

.catalog-grid {
    display: grid;
    gap: 3.25rem 1.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.catalog-card {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.catalog-image {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    border: 1px solid rgba(227, 220, 207, 0.8);
    display: block;
    margin-bottom: 1.25rem;
    position: relative;
}

.stock-badge {
    background: rgba(42, 37, 28, 0.84);
    color: #F2EBE1;
    font-size: 0.58rem;
    left: 0.8rem;
    letter-spacing: 0.16em;
    line-height: 1;
    padding: 0.55rem 0.7rem;
    position: absolute;
    text-transform: uppercase;
    top: 0.8rem;
    z-index: 2;
}

.catalog-image img {
    height: 100%;
    object-fit: cover;
    padding: 0;
    width: 100%;
}

.catalog-details {
    display: block;
    text-align: center;
}

.catalog-title {
    color: #8A703C;
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 0.45rem;
    transition: color 0.3s ease;
}

.catalog-card:hover .catalog-title {
    color: #C2A878;
}

.catalog-meta {
    color: rgba(42, 37, 28, 0.55);
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.catalog-alignment {
    align-items: center;
    color: rgba(42, 37, 28, 0.5);
    display: block;
    font-size: 0.72rem;
    margin-bottom: 0.55rem;
}

.catalog-trust,
.mini-trust-line {
    color: #8A703C;
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    margin-bottom: 0.58rem;
    text-transform: uppercase;
}

.mini-trust-line {
    color: rgba(138, 112, 60, 0.82);
    margin-bottom: 0.65rem;
}

.catalog-price {
    color: #2A251C;
    display: block;
    font-size: 0.95rem;
}

.catalog-empty {
    border: 1px solid rgba(138, 112, 60, 0.25);
    color: rgba(42, 37, 28, 0.62);
    font-size: 0.8rem;
    grid-column: 1 / -1;
    letter-spacing: 0.08em;
    padding: 3rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.cart-mobile-count {
    align-items: center;
    background: #8A703C;
    border-radius: 999px;
    color: #F2EBE1;
    display: flex;
    font-size: 0.6rem;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    min-width: 1rem;
    position: absolute;
    right: -0.35rem;
    top: -0.35rem;
}

.cart-drawer {
    background: rgba(42, 37, 28, 0);
    inset: 0;
    pointer-events: none;
    position: fixed;
    transition: background-color 0.35s ease;
    z-index: 60;
}

.cart-drawer.is-open {
    background: rgba(42, 37, 28, 0.38);
    pointer-events: auto;
}

.cart-panel {
    background: #F2EBE1;
    border-left: 1px solid rgba(227, 220, 207, 0.9);
    box-shadow: -24px 0 70px rgba(42, 37, 28, 0.18);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: auto;
    max-width: 28rem;
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    width: min(100%, 28rem);
}

.cart-drawer.is-open .cart-panel {
    transform: translateX(0);
}

.cart-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(227, 220, 207, 0.9);
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.25rem;
}

.cart-eyebrow {
    color: #C2A878;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.cart-title {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
}

.cart-close {
    color: #8A703C;
    font-size: 2rem;
    line-height: 1;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 0;
}

.cart-empty {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    padding: 4rem 0;
    text-align: center;
    text-transform: uppercase;
}

.cart-item {
    border-bottom: 1px solid rgba(227, 220, 207, 0.75);
    display: grid;
    gap: 1rem;
    grid-template-columns: 5.5rem 1fr;
    padding: 1rem 0;
}

.cart-item img {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    object-fit: cover;
    width: 100%;
}

.cart-item h3 {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}

.cart-item p {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.cart-stock {
    color: #8A703C;
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.cart-item strong {
    color: #2A251C;
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.cart-quantity {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.cart-quantity button {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
    height: 1.8rem;
    min-width: 1.8rem;
}

.cart-quantity span {
    color: #2A251C;
    min-width: 1rem;
    text-align: center;
}

.cart-remove {
    font-size: 0.62rem;
    height: 1.8rem;
    letter-spacing: 0.12em;
    padding: 0 0.7rem;
    text-transform: uppercase;
}

.cart-footer {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    padding-top: 1.25rem;
}

.cart-total-row {
    align-items: center;
    color: #2A251C;
    display: flex;
    font-size: 0.8rem;
    justify-content: space-between;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cart-checkout,
.cart-clear {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    min-height: 3.25rem;
    text-transform: uppercase;
    width: 100%;
}

.cart-checkout {
    background: #8A703C;
    border: 1px solid #8A703C;
    color: #F2EBE1;
    margin-bottom: 0.65rem;
}

.cart-trust-note {
    color: rgba(42, 37, 28, 0.58);
    font-size: 0.68rem;
    line-height: 1.6;
    margin-bottom: 0.85rem;
    text-align: center;
}

.cart-clear {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
}

/* Product Trust */
.product-urgency {
    align-items: stretch;
    border: 1px solid rgba(138, 112, 60, 0.28);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -1.5rem 0 2.25rem;
}

.product-urgency span {
    color: #8A703C;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    line-height: 1.6;
    padding: 0.95rem 1rem;
    text-align: center;
    text-transform: uppercase;
}

.product-urgency span:first-child {
    background: rgba(138, 112, 60, 0.1);
    color: #2A251C;
}

.product-trust-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-trust-grid div {
    background: rgba(234, 226, 211, 0.5);
    border: 1px solid rgba(227, 220, 207, 0.88);
    padding: 1rem;
}

/* Checkout */
.checkout-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr);
}

.checkout-form,
.checkout-summary {
    border-top: 1px solid rgba(227, 220, 207, 0.95);
    padding-top: 1.5rem;
}

.checkout-section {
    border-bottom: 1px solid rgba(227, 220, 207, 0.85);
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
}

.checkout-section h3 {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.7rem;
    margin-bottom: 1.25rem;
}

.checkout-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-form label {
    color: #8A703C;
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(138, 112, 60, 0.28);
    color: #2A251C;
    display: block;
    font-size: 0.92rem;
    letter-spacing: 0;
    margin-top: 0.65rem;
    outline: 0;
    padding: 0.75rem 0;
    text-transform: none;
    transition: border-color 0.3s ease;
    width: 100%;
}

.checkout-form textarea {
    resize: vertical;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
    border-color: #C2A878;
}

.checkout-summary {
    background: rgba(234, 226, 211, 0.42);
    border: 1px solid rgba(227, 220, 207, 0.95);
    padding: 1.5rem;
    position: sticky;
    top: 7rem;
}

.checkout-summary-header,
.checkout-total-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.checkout-summary-header {
    border-bottom: 1px solid rgba(227, 220, 207, 0.85);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.checkout-summary-header p,
.checkout-summary-header button,
.checkout-total-row {
    color: #8A703C;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.checkout-summary-header button {
    color: #C2A878;
}

.checkout-items {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    max-height: 24rem;
    overflow-y: auto;
}

.checkout-item {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 4.5rem 1fr;
}

.checkout-item img {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    object-fit: cover;
    width: 100%;
}

.checkout-item h4 {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}

.checkout-item p {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.checkout-item span {
    color: #2A251C;
    font-size: 0.8rem;
}

.checkout-total-row {
    border-top: 1px solid rgba(227, 220, 207, 0.85);
    color: #2A251C;
    padding-top: 1rem;
}

.checkout-trust-list {
    border-top: 1px solid rgba(227, 220, 207, 0.85);
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

.checkout-trust-list p {
    color: rgba(42, 37, 28, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.checkout-message {
    color: rgba(42, 37, 28, 0.68);
    font-size: 0.78rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.checkout-actions {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: 1fr;
}

.checkout-primary {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    min-height: 3.4rem;
    text-transform: uppercase;
}

.checkout-primary {
    background: #8A703C;
    border: 1px solid #8A703C;
    color: #F2EBE1;
}

@media (min-width: 640px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .catalog-toolbar-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .shop-confidence-bar,
    .product-urgency,
    .product-trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-strip span:not(:last-child)::after {
        display: none;
    }

    .catalog-filter-chip {
        flex: 1 1 calc(50% - 0.75rem);
    }

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

    .checkout-summary {
        position: static;
    }
}

/* ==========================================================================
   CONVERSION LAYER
   Added for the commerce enhancement. Every value below is drawn from the
   existing palette (ivory #F2EBE1, light #EAE2D3, stone #E3DCCF, bronze #8A703C,
   gold #C2A878, dark #2A251C), the existing square-corner / hairline-border
   language, and the existing type scale. Nothing here restyles original markup.
   ========================================================================== */

/* --- Utilities ---------------------------------------------------------- */
.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body.no-scroll {
    overflow: hidden;
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 1px solid #C2A878;
    outline-offset: 3px;
}

/* --- Scarcity badge tiers ------------------------------------------------ */
.stock-badge[data-urgency-tier="high-demand"] {
    background: rgba(138, 112, 60, 0.88);
}

.stock-badge[data-urgency-tier="sold-out"] {
    background: rgba(42, 37, 28, 0.55);
}

/* --- Card wishlist ------------------------------------------------------- */
.card-wishlist {
    align-items: center;
    background: rgba(242, 235, 225, 0.9);
    border: 1px solid rgba(227, 220, 207, 0.9);
    color: #8A703C;
    cursor: pointer;
    display: flex;
    height: 2rem;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    transition: opacity 0.35s ease, color 0.3s ease, background-color 0.3s ease;
    width: 2rem;
    z-index: 3;
}

.catalog-card-wrap:hover .card-wishlist,
.featured-card-wrap:hover .card-wishlist,
.card-wishlist:focus-visible,
.card-wishlist.is-active {
    opacity: 1;
}

.card-wishlist.is-active {
    color: #8A703C;
}

@media (hover: none) {
    .card-wishlist { opacity: 1; }
}

/* --- Price meta ---------------------------------------------------------- */
.price-meta {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin: -2.5rem 0 2.25rem;
}

.price-compare {
    color: rgba(42, 37, 28, 0.42);
    font-size: 0.85rem;
    text-decoration: line-through;
}

.price-discount {
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.price-emi {
    color: rgba(42, 37, 28, 0.6);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.catalog-price .price-compare,
.rail-price .price-compare {
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

/* --- Social proof -------------------------------------------------------- */
.social-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-bottom: 2.25rem;
}

.social-proof-item {
    align-items: center;
    color: rgba(138, 112, 60, 0.9);
    display: inline-flex;
    font-size: 0.62rem;
    gap: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.social-proof-item svg {
    flex-shrink: 0;
    opacity: 0.75;
}

/* --- Shared block heading ------------------------------------------------ */
.pdp-block-title {
    align-items: center;
    color: #8A703C;
    display: flex;
    font-size: 0.62rem;
    gap: 0.45rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.9rem;
    text-transform: uppercase;
}

/* --- Offers -------------------------------------------------------------- */
.pdp-offers {
    border: 1px solid rgba(138, 112, 60, 0.22);
    margin-bottom: 2rem;
    padding: 1.15rem 1.25rem;
}

.pdp-offers ul {
    display: grid;
    gap: 0.6rem;
}

.pdp-offers li {
    align-items: flex-start;
    color: rgba(42, 37, 28, 0.72);
    display: flex;
    font-size: 0.76rem;
    font-weight: 300;
    gap: 0.6rem;
    line-height: 1.6;
}

.pdp-offers li svg {
    color: #C2A878;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* --- Quantity + Buy Now -------------------------------------------------- */
.pdp-purchase-row {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 0.9rem;
}

.qty-stepper {
    align-items: center;
    border: 1px solid rgba(138, 112, 60, 0.32);
    display: inline-flex;
    height: 100%;
    min-height: 3.6rem;
}

.qty-button {
    align-items: center;
    color: #8A703C;
    display: flex;
    height: 100%;
    justify-content: center;
    transition: color 0.3s ease;
    width: 2.6rem;
}

.qty-button:hover {
    color: #2A251C;
}

.qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(138, 112, 60, 0.18);
    border-right: 1px solid rgba(138, 112, 60, 0.18);
    color: #2A251C;
    font-family: inherit;
    font-size: 0.85rem;
    height: 100%;
    outline: 0;
    text-align: center;
    width: 3rem;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdp-buynow {
    border: 1px solid #8A703C;
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    min-height: 3.6rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%;
}

.pdp-buynow:hover {
    background: #8A703C;
    color: #F2EBE1;
}

.pdp-soldout {
    border: 1px solid rgba(138, 112, 60, 0.28);
    color: rgba(42, 37, 28, 0.7);
    font-size: 0.76rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 0.9rem;
    padding: 1rem 1.15rem;
}

#add-to-cart-button[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

/* --- Trust badges -------------------------------------------------------- */
.trust-badges {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    display: grid;
    gap: 0.85rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 2.25rem;
    padding-top: 1.5rem;
}

.trust-badges li {
    align-items: center;
    color: rgba(42, 37, 28, 0.68);
    display: flex;
    font-size: 0.64rem;
    gap: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.trust-badges svg {
    color: #8A703C;
    flex-shrink: 0;
    opacity: 0.85;
}

/* --- Payment methods ----------------------------------------------------- */
.pay-block {
    margin-bottom: 2.25rem;
}

.pay-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pay-chip {
    align-items: center;
    border: 1px solid rgba(138, 112, 60, 0.25);
    color: rgba(42, 37, 28, 0.65);
    display: inline-flex;
    height: 2.1rem;
    justify-content: center;
    min-width: 3.2rem;
    padding: 0 0.6rem;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.pay-chip:hover {
    border-color: rgba(138, 112, 60, 0.5);
    color: #2A251C;
}

.pay-chip-text {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Guarantee ----------------------------------------------------------- */
.guarantee-box {
    background: rgba(234, 226, 211, 0.5);
    border: 1px solid rgba(227, 220, 207, 0.88);
    margin-bottom: 2.25rem;
    padding: 1.25rem;
}

.guarantee-box ul {
    display: grid;
    gap: 0.65rem;
}

.guarantee-box li {
    align-items: center;
    color: rgba(42, 37, 28, 0.72);
    display: flex;
    font-size: 0.72rem;
    font-weight: 300;
    gap: 0.6rem;
}

.guarantee-box svg {
    color: #8A703C;
    flex-shrink: 0;
}

/* --- Delivery estimator -------------------------------------------------- */
.delivery-box {
    border: 1px solid rgba(138, 112, 60, 0.22);
    margin-bottom: 2.25rem;
    padding: 1.25rem;
}

.delivery-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.delivery-input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(138, 112, 60, 0.28);
    color: #2A251C;
    font-family: inherit;
    font-size: 0.85rem;
    outline: 0;
    padding: 0.55rem 0;
    transition: border-color 0.3s ease;
    width: 100%;
}

.delivery-input:focus {
    border-color: #C2A878;
}

.delivery-input::placeholder {
    color: rgba(42, 37, 28, 0.35);
}

.delivery-submit {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    padding: 0 1.1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.delivery-submit:hover {
    background: #8A703C;
    color: #F2EBE1;
}

.delivery-result:not(:empty) {
    margin-top: 1.1rem;
}

.delivery-detail {
    display: grid;
    gap: 0.6rem;
}

.delivery-detail div {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.delivery-detail dt {
    color: rgba(42, 37, 28, 0.5);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.delivery-detail dd {
    color: #2A251C;
    font-size: 0.78rem;
    text-align: right;
}

.delivery-error {
    color: rgba(42, 37, 28, 0.62);
    font-size: 0.74rem;
    font-weight: 300;
}

/* --- Highlights ---------------------------------------------------------- */
.highlight-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 2.75rem;
}

.highlight-card {
    align-items: center;
    background: rgba(234, 226, 211, 0.5);
    border: 1px solid rgba(227, 220, 207, 0.88);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    justify-content: center;
    padding: 1.15rem 0.65rem;
    text-align: center;
    transition: background-color 0.4s ease;
}

.highlight-card:hover {
    background: rgba(234, 226, 211, 0.85);
}

.highlight-icon {
    color: #8A703C;
    opacity: 0.85;
}

.highlight-label {
    color: rgba(42, 37, 28, 0.7);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* --- Accordions ---------------------------------------------------------- */
.pdp-accordion {
    border-top: 1px solid #E3DCCF;
}

.pdp-accordion-trigger {
    align-items: center;
    color: #8A703C;
    display: flex;
    font-size: 0.68rem;
    justify-content: space-between;
    letter-spacing: 0.2em;
    padding: 1.5rem 0;
    text-align: left;
    text-transform: uppercase;
    transition: color 0.3s ease;
    width: 100%;
}

.pdp-accordion-trigger:hover {
    color: #C2A878;
}

.pdp-accordion-trigger svg {
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdp-accordion-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.pdp-accordion-panel {
    animation: accordion-in 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 1.75rem;
}

.pdp-accordion-panel p {
    color: rgba(42, 37, 28, 0.7);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.9;
}

@keyframes accordion-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.spec-list {
    display: grid;
    gap: 0.85rem;
}

.spec-list div {
    border-bottom: 1px solid rgba(227, 220, 207, 0.6);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding-bottom: 0.85rem;
}

.spec-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.spec-list dt {
    color: rgba(42, 37, 28, 0.5);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.spec-list dd {
    color: #2A251C;
    font-size: 0.8rem;
    font-weight: 300;
    text-align: right;
}

.faq-list {
    display: grid;
    gap: 1.35rem;
}

.faq-q {
    color: #8A703C !important;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem;
}

.faq-a {
    font-size: 0.8rem !important;
}

/* --- Title actions: wishlist & share ------------------------------------- */
.pdp-title-actions {
    display: flex;
    gap: 0.5rem;
    position: relative;
}

.icon-action {
    align-items: center;
    border: 1px solid rgba(138, 112, 60, 0.28);
    color: #8A703C;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    width: 2.5rem;
}

.icon-action:hover,
.icon-action.is-active {
    background: rgba(234, 226, 211, 0.7);
    border-color: rgba(138, 112, 60, 0.55);
}

.share-menu {
    background: #F2EBE1;
    border: 1px solid rgba(227, 220, 207, 0.95);
    box-shadow: 0 18px 45px rgba(42, 37, 28, 0.12);
    display: grid;
    gap: 0.15rem;
    min-width: 11rem;
    padding: 0.5rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 30;
}

.share-menu a,
.share-menu button {
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    padding: 0.65rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.share-menu a:hover,
.share-menu button:hover {
    background: rgba(234, 226, 211, 0.75);
    color: #2A251C;
}

.share-feedback:empty {
    display: none;
}

.share-feedback {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.75rem 0.2rem;
    text-transform: uppercase;
}

/* --- Gallery ------------------------------------------------------------- */
.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.gallery-thumb {
    background: #F2EBE1;
    border: 1px solid rgba(227, 220, 207, 0.9);
    height: 4rem;
    overflow: hidden;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    width: 4rem;
}

.gallery-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gallery-thumb:hover,
.gallery-thumb.is-active {
    border-color: #8A703C;
}

.gallery-controls {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.gallery-control {
    align-items: center;
    color: #8A703C;
    display: inline-flex;
    font-size: 0.58rem;
    gap: 0.45rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.gallery-control:hover {
    color: #C2A878;
}

/* --- Lightbox ------------------------------------------------------------ */
.pdp-lightbox {
    background: rgba(42, 37, 28, 0.94);
    inset: 0;
    position: fixed;
    z-index: 70;
}

.pdp-lightbox[hidden] {
    display: none;
}

.lightbox-inner {
    align-items: center;
    animation: lightbox-in 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 4rem 1.5rem 5rem;
    position: relative;
}

@keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-figure {
    cursor: zoom-in;
    max-height: 100%;
    overflow: hidden;
}

.lightbox-figure.is-zoomed {
    cursor: zoom-out;
}

.lightbox-figure img {
    max-height: 78vh;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.spin-figure img {
    cursor: grab;
    user-select: none;
}

.lightbox-close,
.lightbox-nav {
    align-items: center;
    border: 1px solid rgba(242, 235, 225, 0.28);
    color: #F2EBE1;
    display: flex;
    height: 2.75rem;
    justify-content: center;
    position: absolute;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: 2.75rem;
    z-index: 2;
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(242, 235, 225, 0.12);
    border-color: rgba(242, 235, 225, 0.6);
}

.lightbox-close {
    right: 1.5rem;
    top: 1.5rem;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-prev svg {
    transform: rotate(90deg);
}

.lightbox-next {
    right: 1.5rem;
}

.lightbox-next svg {
    transform: rotate(-90deg);
}

.lightbox-caption {
    bottom: 2rem;
    color: rgba(242, 235, 225, 0.6);
    font-size: 0.62rem;
    left: 0;
    letter-spacing: 0.2em;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* --- Sticky purchase bars ------------------------------------------------ */
.pdp-sticky-bar,
.pdp-mobile-bar {
    background: rgba(242, 235, 225, 0.97);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 45;
}

.pdp-sticky-bar {
    border-bottom: 1px solid rgba(227, 220, 207, 0.9);
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-100%);
}

.pdp-sticky-bar.is-visible,
.pdp-mobile-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pdp-mobile-bar {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    bottom: 0;
    box-shadow: 0 -14px 40px rgba(42, 37, 28, 0.12);
    left: 0;
    right: 0;
    transform: translateY(100%);
}

.sticky-bar-inner {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 90rem;
    padding: 0.85rem 1.5rem;
}

.sticky-bar-name {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.sticky-bar-price {
    align-items: baseline;
    color: #2A251C;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.5rem 0.75rem;
}

.sticky-bar-stock {
    color: #8A703C;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sticky-bar-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
}

.sticky-bar-primary,
.sticky-bar-secondary {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    min-height: 2.85rem;
    padding: 0 1.6rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.sticky-bar-primary {
    background: #8A703C;
    border: 1px solid #8A703C;
    color: #F2EBE1;
}

.sticky-bar-primary:hover {
    background: transparent;
    color: #8A703C;
}

.sticky-bar-secondary {
    border: 1px solid rgba(138, 112, 60, 0.4);
    color: #8A703C;
}

.sticky-bar-secondary:hover {
    background: rgba(234, 226, 211, 0.8);
}

.sticky-bar-soldout {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --- Full-width product panels ------------------------------------------- */
.pdp-panel {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    margin: 0 auto;
    max-width: 90rem;
    padding: 4rem 1.5rem 0;
}

.pdp-panel:empty {
    display: none;
}

.pdp-panel-head {
    margin-bottom: 2.25rem;
}

.pdp-eyebrow {
    color: #C2A878;
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.pdp-panel-title {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    line-height: 1.15;
}

.pdp-rail {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rail-card {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
    text-align: center;
    width: 100%;
}

.rail-image {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    border: 1px solid rgba(227, 220, 207, 0.8);
    display: block;
    margin-bottom: 1rem;
    position: relative;
}

.rail-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.rail-name {
    color: #8A703C;
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
    transition: color 0.3s ease;
}

.rail-card:hover .rail-name {
    color: #C2A878;
}

.rail-meta {
    color: rgba(42, 37, 28, 0.5);
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.rail-price {
    color: #2A251C;
    display: block;
    font-size: 0.85rem;
}

/* --- Bundle -------------------------------------------------------------- */
.bundle-strip {
    align-items: center;
    background: rgba(234, 226, 211, 0.45);
    border: 1px solid rgba(227, 220, 207, 0.9);
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
}

.bundle-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.bundle-item {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    max-width: 14rem;
}

.bundle-item img {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    border: 1px solid rgba(227, 220, 207, 0.9);
    object-fit: cover;
    width: 3.5rem;
}

.bundle-item span {
    color: rgba(42, 37, 28, 0.7);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

.bundle-plus {
    color: #C2A878;
    font-size: 1.1rem;
}

.bundle-total {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    text-align: right;
}

.bundle-total span {
    color: rgba(42, 37, 28, 0.5);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bundle-total strong {
    color: #2A251C;
    font-size: 1.05rem;
    font-weight: 400;
}

.bundle-button {
    background: #8A703C;
    border: 1px solid #8A703C;
    color: #F2EBE1;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    min-height: 3rem;
    padding: 0 1.75rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.bundle-button:hover {
    background: transparent;
    color: #8A703C;
}

/* --- Reviews ------------------------------------------------------------- */
.reviews-layout {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
}

.review-summary {
    border: 1px solid rgba(227, 220, 207, 0.9);
    height: fit-content;
    padding: 1.75rem;
    text-align: center;
}

.review-score {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 3.25rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.review-stars {
    display: inline-flex;
    gap: 0.15rem;
}

.review-stars .star-on {
    color: #C2A878;
}

.review-stars .star-off {
    color: rgba(138, 112, 60, 0.28);
}

.review-count {
    color: rgba(42, 37, 28, 0.5);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    margin-top: 0.75rem;
    text-transform: uppercase;
}

.review-bars {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.review-bar-row {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 0.75rem minmax(0, 1fr) 1.25rem;
}

.review-bar-label,
.review-bar-count {
    color: rgba(42, 37, 28, 0.45);
    font-size: 0.6rem;
}

.review-bar-track {
    background: rgba(227, 220, 207, 0.9);
    display: block;
    height: 2px;
}

.review-bar-fill {
    background: #C2A878;
    display: block;
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-sort {
    align-items: center;
    color: #8A703C;
    display: inline-flex;
    font-size: 0.62rem;
    gap: 0.5rem;
    letter-spacing: 0.16em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.review-sort-select {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    outline: 0;
    text-transform: uppercase;
}

.review-cards {
    display: grid;
    gap: 1.5rem;
}

.review-card {
    border-top: 1px solid rgba(227, 220, 207, 0.9);
    padding-top: 1.5rem;
}

.review-card-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.review-verified {
    align-items: center;
    color: #8A703C;
    display: inline-flex;
    font-size: 0.56rem;
    gap: 0.35rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.review-title {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.3rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.review-body {
    color: rgba(42, 37, 28, 0.72);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.9;
}

.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.review-photos img {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    border: 1px solid rgba(227, 220, 207, 0.9);
    object-fit: cover;
    width: 4.5rem;
}

.review-meta {
    color: rgba(42, 37, 28, 0.45);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    margin-top: 1rem;
    text-transform: uppercase;
}

.review-empty {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.8;
}

.review-more {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    margin-top: 1.75rem;
    min-height: 3rem;
    padding: 0 1.75rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.review-more:hover {
    background: rgba(234, 226, 211, 0.75);
}

.rating-line {
    align-items: center;
    color: rgba(42, 37, 28, 0.6);
    display: inline-flex;
    font-size: 0.7rem;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.rating-line:hover {
    color: #8A703C;
}

.rating-count {
    color: rgba(42, 37, 28, 0.45);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- Cart extras --------------------------------------------------------- */
.cart-savings-row {
    align-items: center;
    color: #8A703C;
    display: flex;
    font-size: 0.68rem;
    justify-content: space-between;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.cart-progress {
    margin-bottom: 1rem;
}

.cart-progress p {
    align-items: center;
    color: rgba(42, 37, 28, 0.62);
    display: flex;
    font-size: 0.64rem;
    gap: 0.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.cart-progress.is-qualified p {
    color: #8A703C;
}

.cart-progress-track {
    background: rgba(227, 220, 207, 0.9);
    display: block;
    height: 2px;
}

.cart-progress-fill {
    background: #C2A878;
    display: block;
    height: 100%;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-delivery-note {
    align-items: center;
    color: rgba(42, 37, 28, 0.58);
    display: flex;
    font-size: 0.64rem;
    gap: 0.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cart-coupon {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.5rem;
}

.cart-coupon input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(138, 112, 60, 0.28);
    color: #2A251C;
    font-family: inherit;
    font-size: 0.8rem;
    outline: 0;
    padding: 0.5rem 0;
    transition: border-color 0.3s ease;
}

.cart-coupon input:focus {
    border-color: #C2A878;
}

.cart-coupon button {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    padding: 0 1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart-coupon button:hover:not(:disabled) {
    background: #8A703C;
    color: #F2EBE1;
}

.cart-coupon button:disabled {
    opacity: 0.5;
}

.cart-coupon.is-applied {
    align-items: center;
    background: rgba(234, 226, 211, 0.6);
    border: 1px solid rgba(227, 220, 207, 0.9);
    padding: 0.6rem 0.75rem;
}

.cart-coupon.is-applied span {
    align-items: center;
    color: #8A703C;
    display: inline-flex;
    font-size: 0.66rem;
    gap: 0.45rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cart-coupon.is-applied button {
    border: 0;
    color: rgba(42, 37, 28, 0.5);
}

.cart-coupon-message:empty {
    display: none;
}

.cart-coupon-message {
    color: rgba(42, 37, 28, 0.58);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.85rem;
}

.cart-upsell:not(:empty) {
    border-top: 1px solid rgba(227, 220, 207, 0.75);
    padding-top: 1.15rem;
}

.cart-upsell-title {
    color: #C2A878;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.85rem;
    text-transform: uppercase;
}

.cart-upsell-item {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    margin-bottom: 0.85rem;
}

.cart-upsell-item img {
    aspect-ratio: 1 / 1;
    background: #EAE2D3;
    object-fit: cover;
    width: 100%;
}

.cart-upsell-item p {
    color: #8A703C;
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    line-height: 1.2;
}

.cart-upsell-item span {
    color: rgba(42, 37, 28, 0.55);
    font-size: 0.7rem;
}

.cart-upsell-item button {
    border: 1px solid rgba(138, 112, 60, 0.35);
    color: #8A703C;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    min-height: 2rem;
    padding: 0 0.75rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart-upsell-item button:hover {
    background: #8A703C;
    color: #F2EBE1;
}

.cart-trust-row {
    display: grid;
    gap: 0.55rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.9rem;
}

.cart-trust-row li {
    align-items: center;
    color: rgba(42, 37, 28, 0.58);
    display: flex;
    font-size: 0.58rem;
    gap: 0.45rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cart-trust-row svg {
    color: #8A703C;
    flex-shrink: 0;
    opacity: 0.8;
}

/* --- Skeleton loaders ---------------------------------------------------- */
.catalog-skeleton {
    display: block;
    pointer-events: none;
}

.catalog-skeleton .catalog-image,
.skeleton-line {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(234, 226, 211, 0.55) 25%, rgba(227, 220, 207, 0.85) 37%, rgba(234, 226, 211, 0.55) 63%);
    background-size: 400% 100%;
}

.skeleton-line {
    display: block;
    height: 0.85rem;
    margin: 0 auto 0.6rem;
    width: 65%;
}

.skeleton-line.short {
    width: 35%;
}

@keyframes skeleton-pulse {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (min-width: 640px) {
    .pdp-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .reviews-layout {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .pdp-panel {
        padding: 5rem 3rem 0;
    }

    .pdp-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (max-width: 767px) {
    .highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .bundle-total {
        text-align: left;
    }

    .bundle-button {
        width: 100%;
    }

    .lightbox-nav {
        display: none;
    }

    /* Clears the floating purchase bar so the footer stays reachable. */
    #page-product.active {
        padding-bottom: 7rem;
    }
}

@media (max-width: 639px) {
    .trust-badges {
        grid-template-columns: 1fr;
    }

    .pdp-purchase-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sticky-bar-inner {
        gap: 0.85rem;
        padding: 0.7rem 1.1rem;
    }

    .sticky-bar-name {
        font-size: 1rem;
    }

    .sticky-bar-actions {
        gap: 0.45rem;
    }

    .sticky-bar-primary,
    .sticky-bar-secondary {
        padding: 0 0.9rem;
    }

    .pdp-panel {
        padding-top: 3rem;
    }

    .pdp-panel-title {
        font-size: 1.65rem;
    }
}

/* The desktop top bar would collide with the mobile bottom bar; only one shows. */
@media (max-width: 1023px) {
    .pdp-sticky-bar { display: none; }
}

@media (min-width: 1024px) {
    .pdp-mobile-bar { display: none; }
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

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

/* --- `hidden` must win over the display values set by these components ---- */
.product-urgency[hidden],
.share-menu[hidden],
.pdp-accordion-panel[hidden] {
    display: none;
}

/* --- Card wrapper: keeps the wishlist control outside the card button ----- */
.catalog-card-wrap,
.featured-card-wrap {
    position: relative;
}

/* --- Cart drawer: restore the item list as the primary scroll region ------
   The bag, the delivery note and the upsell now share one scroller, so the
   conversion additions in the footer can no longer squeeze the item list. */
.cart-scroll {
    flex: 1;
    min-height: 6rem;   /* never collapses, even on very short viewports */
    overflow-y: auto;
}

.cart-items {
    flex: none;
    overflow: visible;
}

/* Footer trimmed so the scroller keeps as much height as possible. */
.cart-footer .cart-progress {
    margin-bottom: 0.75rem;
}

.cart-footer .cart-trust-note {
    font-size: 0.62rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.cart-trust-row {
    gap: 0.4rem 0.85rem;
    margin-bottom: 0.7rem;
}

.cart-trust-row li {
    font-size: 0.54rem;
}

/* Discount entry stays out of the way until it is asked for. */
.cart-coupon-toggle {
    color: #8A703C;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    width: 100%;
}

.cart-coupon-toggle:hover {
    color: #C2A878;
}

.cart-coupon[hidden] {
    display: none;
}

/* The delivery note reads as part of the bag now that it sits in the scroller. */
.cart-scroll .cart-delivery-note {
    border-top: 1px solid rgba(227, 220, 207, 0.75);
    margin-bottom: 0;
    padding-top: 1rem;
}

/* --- Product photography on ivory ----------------------------------------
   The catalogue is shot on white, so every placement rendered as a hard white
   tile punched into the ivory around it. Each of these surfaces already backs
   its image with #EAE2D3 — the opaque JPEG was simply covering it. Multiplying
   drops the white through to whatever sits behind: the tile keeps its ivory,
   the stones keep their colour, and the soft shadow under each bracelet still
   reads. One rule covers every placement, so the source images stay untouched.

   The lightbox and the 360 viewer are deliberately left out — their backdrops
   are dark, and multiplying there would crush the product to black. */
.catalog-image img,
.cart-item img,
.cart-upsell-item img,
.checkout-item img,
.rail-image img,
.bundle-item img,
.gallery-thumb img,
.product-shot {
    mix-blend-mode: multiply;
}

/* The PDP stage needs its own ivory. `multiply` blends against the backdrop
   inside the nearest isolated group, and the gallery panel's ivory sits on the
   .reveal-up element itself — whose will-change opens an isolation boundary the
   image cannot see past. Painting the colour on a wrapper inside that boundary
   gives the blend something to land on. (The catalogue never hit this: its tile
   colour already sat on a descendant.) */
#prod-gallery-stage {
    background: #EAE2D3;
}

/* ============================================================
   Thank You / Order Confirmed Page
   ============================================================ */

.thankyou-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2.5rem;
}

.thankyou-circle {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: draw-circle 0.7s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}

.thankyou-check {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: draw-check 0.45s cubic-bezier(0.4,0,0.2,1) 0.85s forwards;
}

@keyframes draw-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes draw-check {
    to { stroke-dashoffset: 0; }
}

.thankyou-summary {
    background: #EAE2D3;
    border: 1px solid #E3DCCF;
    padding: 2rem;
    margin-top: 1.5rem;
    text-align: left;
}

.thankyou-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.thankyou-item {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.thankyou-item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
}

.thankyou-item p {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 0.15rem;
    color: #2A251C;
}

.thankyou-item span {
    font-size: 0.72rem;
    color: rgba(42,37,28,0.6);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.2rem;
}

.thankyou-item strong {
    font-size: 0.82rem;
    color: #8A703C;
}

.thankyou-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #E3DCCF;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(42,37,28,0.7);
}

.thankyou-total-row strong {
    font-size: 1rem;
    color: #2A251C;
}

.thankyou-payment-id {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: rgba(42,37,28,0.45);
    letter-spacing: 0.04em;
    text-align: center;
}

/* ============================================================
   Razorpay Error Notice (in cart drawer)
   ============================================================ */

.rzp-error-notice {
    margin: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(164, 68, 47, 0.08);
    border-left: 3px solid #A4442F;
    font-size: 0.78rem;
    color: #A4442F;
    line-height: 1.5;
}