/* ========================================
   BASE
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f7f5f0;
    color: #222222;
}

img {
    max-width: 100%;
    height: auto;
}

/*
 * The `hidden` attribute only gets `display: none` from the browser's
 * default stylesheet, so ANY author rule setting `display` beats it.
 * The quick-view modal, its arrows and its dots are all toggled via
 * `el.hidden` and all carry a display of their own, so without this
 * they can never actually hide. !important is what makes the attribute
 * authoritative regardless of what a component sets.
 */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
}

.container {
    width: min(1200px, 92%);
    margin-inline: auto;
}

.site-main {
    min-height: 60vh;
}



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

.hero-section {
    padding: 96px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 64px;
}

.hero-content {
    min-width: 0;
}

.hero-eyebrow {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-title {
    margin: 0 0 24px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
}

.hero-description {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.7;
}

.hero-description p:first-child {
    margin-top: 0;
}

.hero-button {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 24px;
    background: #222222;
    color: #ffffff;
    text-decoration: none;
}

.hero-visual {
    overflow: hidden;
}

.hero-image {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.hero-placeholder {
    min-height: 520px;
    display: grid;
    place-items: center;
    background: #e8e2d8;
    font-size: 20px;
}


/* ========================================
   WOOCOMMERCE GENERAL
======================================== */

.woocommerce .woocommerce-breadcrumb {
    margin-bottom: 30px;
    color: #777;
    font-size: 13px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: 0;
}


/* ========================================
   SINGLE PRODUCT PAGE
======================================== */

body.single-product {
    overflow-x: clip;
}

.single-product .site-main {
    padding: 64px 0 80px;
    overflow-x: clip;
}

.single-product .site-main > .container {
    width: min(1180px, 92%);
    max-width: 100%;
    margin-inline: auto;
    overflow-x: clip;
}


/* Main product layout */

.single-product div.product {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
    max-width: 100%;
    min-width: 0;
}

.single-product div.product > * {
    min-width: 0;
    max-width: 100%;
}


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

.single-product div.product .woocommerce-product-gallery {
    position: relative;

    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
    overflow: hidden;
}

.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__wrapper {
    margin: 0;
}

.single-product .flex-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    border-radius: 4px;
}

/* ---------- Product gallery ----------
 *
 * A square showcase card with a row of four thumbnails under it.
 *
 * The photographs do not share one ratio - the cover shot is 3:2
 * while the three boxes are near square - so every image is scaled to
 * fill the card and cropped to fit. Every slide is then the same
 * shape and fully covered, with no mat around the picture.
 *
 * Images are taken out of flow so the figure's 1:1 ratio is not
 * stretched by a landscape or portrait file. Flexslider's 800%
 * wrapper stays clipped to this card, so it cannot scroll the page.
 */

.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__image {
    position: relative;

    aspect-ratio: 1 / 1;
    height: auto !important;

    overflow: hidden;

    border: 1px solid #e7dccb;
    border-radius: 4px;

    background: var(--latte);
}

.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__image > a,
.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    /*
     * Fill the card; overflow is cropped rather than letterboxed.
     *
     * Anchored to the top, not the centre. A tall photograph - the
     * bouquets run about 0.6 - loses a third of its height to a square
     * crop, and centring that takes the bite out of both ends, cutting
     * the blooms off the top. Anchoring the top keeps the subject and
     * trims the stems instead. Wide images are unaffected: they are
     * cropped left and right, where this makes no difference.
     */
    object-fit: cover !important;
    object-position: center top;
}


/* ---------- Thumbnail row ---------- */

/*
 * 12px below the showcase, and the same 12px between thumbnails.
 */
.single-product .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;

    margin: 12px 0 0;
    padding: 0;

    list-style: none;
}

/*
 * `flex: 1 1 0` makes the four share the row exactly, so the run of
 * thumbnails is precisely as wide as the card above it whatever the
 * container width. WooCommerce floats these and fixes them at 25%,
 * which would overflow once gaps are added, so both are overridden.
 */
.single-product.woocommerce
div.product
div.images
.flex-control-thumbs li {
    width: auto !important;
    float: none !important;
    flex: 1 1 0;
    margin: 0 !important;
    min-width: 0;
}

.single-product.woocommerce
div.product
div.images
.flex-control-thumbs li img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    /* Matches the showcase above, so thumbnails preview the same crop. */
    object-fit: cover;
    object-position: center top;

    border: 1px solid #ddd6cc;
    border-radius: 4px;

    background: var(--latte);

    opacity: 0.75;
    cursor: pointer;

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

.single-product.woocommerce
div.product
div.images
.flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--mocha);
}

/* The active photo carries a heavier border than the rest. */
.single-product.woocommerce
div.product
div.images
.flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--espresso);

    /* A second inset ring reads as a 2px border without shifting size. */
    box-shadow: inset 0 0 0 1px var(--espresso);
}


.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img,
.single-product
div.product
.woocommerce-product-gallery
.woocommerce-product-gallery__image > a {
    -webkit-user-drag: none;
    user-select: none;
}


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

.single-product div.product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 10px 0 0;
}

.single-product .product_title {
    max-width: 540px;
    margin: 0 0 18px;
    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.single-product .price {
    margin: 0 0 24px;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 500;
}

.single-product .woocommerce-product-details__short-description {
    max-width: 520px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.7;
}

.single-product .woocommerce-product-details__short-description p {
    margin-top: 0;
}


/* ========================================
   VARIATIONS
======================================== */

.single-product form.variations_form {
    max-width: 520px;
}

.single-product table.variations {
    width: 100%;
    margin: 0 0 18px;
    border: 0;
}

.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
    display: block;
    width: 100%;
}

.single-product table.variations th {
    padding: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
}

.single-product table.variations td {
    padding: 0;
}

.single-product table.variations select {
    appearance: none;
    width: 100%;
    min-height: 50px;
    padding: 0 48px 0 16px;
    border: 1px solid #cfc8bd;
    border-radius: 0;
    background:
        linear-gradient(
            45deg,
            transparent 50%,
            #222222 50%
        )
        calc(100% - 18px) 21px / 6px 6px
        no-repeat,
        linear-gradient(
            135deg,
            #222222 50%,
            transparent 50%
        )
        calc(100% - 12px) 21px / 6px 6px
        no-repeat,
        #ffffff;
    font-size: 15px;
    cursor: pointer;
}

.single-product .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    text-decoration: none;
}


/* ========================================
   SELECTED VARIATION
======================================== */

.single-product .single_variation_wrap {
    margin-top: 0px;
    margin-bottom: 5px;
}

.single-product .woocommerce-variation-price {
    margin-bottom: 12px;
}

.single-product .woocommerce-variation-price .price {
    margin: 0;
    font-size: 22px;
}


/* ========================================
   QUANTITY + ADD TO CART
======================================== */

.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.single-product .product-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.single-product .product-buttons-group {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.single-product .product-buttons-group > * {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
}

.single-product .single_add_to_cart_button,
.single-product .whatsapp-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    height: 50px;
    min-height: 50px;
    padding: 0 28px;

    border: 0;
    border-radius: 999px;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.single-product .single_add_to_cart_button {
    background: var(--espresso) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(61, 47, 34, 0.18);
}

.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61, 47, 34, 0.24);
    color: #ffffff !important;
}

.single-product .whatsapp-order-button {
    background: linear-gradient(135deg, #25D366 0%, #1fb957 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
}

.single-product .whatsapp-order-button:hover,
.single-product .whatsapp-order-button:focus-visible {
    opacity: 0.93;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.36);
    color: #ffffff;
}

.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
    background: #aaaaaa !important;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.single-product .whatsapp-order-button svg,
.single-product .single_add_to_cart_button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.single-product .quantity {
    margin: 0 !important;
}

.single-product .quantity input.qty {
    width: 68px;
    height: 50px;
    padding: 8px;
    border: 1px solid #cfc8bd;
    background: #ffffff;
    text-align: center;
    font-size: 15px;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.single-product .quantity input.qty:focus {
    outline: none;
    border-color: var(--espresso);
    box-shadow: 0 0 0 3px rgba(61, 47, 34, 0.12);
}


@media (max-width: 768px) {

    .single-product form.cart,
    .single-product .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;
    }

    .single-product .product-buttons-group {
        flex-direction: row;
    }

    .single-product .quantity,
    .single-product .quantity input.qty {
        width: 100%;
    }

    .single-product .single_add_to_cart_button,
    .single-product .whatsapp-order-button {
        width: 100%;
        height: 52px;
        min-height: 52px;
        font-size: 14px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {

    .single-product .product-buttons-group {
        flex-direction: column;
        gap: 10px;
    }

    .single-product .product-buttons-group > * {
        flex: 1 1 100%;
    }

    .single-product .single_add_to_cart_button,
    .single-product .whatsapp-order-button {
        height: 54px;
        min-height: 54px;
        font-size: 14px;
    }
}


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

.product-benefits {
    max-width: 520px;
    display: grid;
    gap: 14px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #ddd6cc;
}

.product-benefit {
    display: grid;
    gap: 5px;
}

.product-benefit strong {
    font-size: 15px;
}

.product-benefit span {
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
}


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

.single-product .product_meta {
    max-width: 520px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #ddd6cc;
    color: #666666;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.single-product .product_meta a {
    color: #222222;
}


/* ========================================
   WOOCOMMERCE TABS
======================================== */

.single-product .woocommerce-tabs {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #ddd6cc;
}

.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 34px;
    margin: 0 0 36px !important;
    padding: 0 !important;
    border: 0 !important;
}

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

.single-product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

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

.single-product .woocommerce-tabs ul.tabs li a {
    padding: 0 0 8px !important;
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #111111;
    border-bottom: 1px solid #111111;
}

.single-product .woocommerce-Tabs-panel {
    max-width: 1000px;
}

.single-product .woocommerce-Tabs-panel h2 {
    margin-top: 0;
    font-size: 32px;
}

.single-product
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.single-product
.woocommerce-product-attributes th,
.single-product
.woocommerce-product-attributes td {
    padding: 16px;
    border-bottom: 1px solid #e3ddd4;
    text-align: left;
}

.single-product
.woocommerce-product-attributes th {
    width: 180px;
}


/* ========================================
   RELATED PRODUCTS
======================================== */

.single-product .related.products {
    grid-column: 1 / -1;
    margin-top: 70px;
}

.single-product .related.products > h2 {
    margin-bottom: 30px;
    font-size: 34px;
}

.single-product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 100%;
}

.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
    display: none;
}

.single-product .related.products ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}


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

.woocommerce-shop .site-main,
.tax-product_cat .site-main {
    padding: 70px 0 90px;
}

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 24px;
    margin: 40px 0 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0;
    margin-bottom: 8px;
    font-size: 20px;
}

.woocommerce ul.products li.product .price {
    margin-bottom: 14px;
    font-size: 16px;
}

.woocommerce ul.products li.product .button {
    padding: 12px 18px;
    background: var(--espresso);
    color: #ffffff;
}


/* ========================================
   CART / CHECKOUT BASE
======================================== */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
    padding: 70px 0 90px;
}

.woocommerce table.shop_table {
    border-radius: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order {
    background: var(--espresso) !important;
    color: #ffffff !important;
    border-radius: 999px;
}


/* ========================================
   RESPONSIVE — TABLET
======================================== */

@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-section {
        padding: 64px 0;
    }

    .hero-image {
        height: 420px;
    }

    .single-product div.product {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .single-product .product_title {
        font-size: 42px;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ========================================
   RESPONSIVE — MOBILE
======================================== */

@media (max-width: 760px) {

    .hero-section {
        padding: 48px 0;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-image {
        height: 320px;
    }

    .single-product .site-main {
        padding: 40px 0 70px;
    }

    .single-product div.product {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .single-product div.product .summary {
        padding-top: 0;
    }

    .single-product .product_title {
        font-size: 40px;
    }

    .single-product .woocommerce-tabs {
        margin-top: 50px;
        padding-top: 30px;
    }

    .single-product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
        gap: 18px;
    }

    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .single-product .related.products ul.products {
        grid-template-columns: 1fr;
    }

    .single-product .woocommerce-product-attributes th {
        width: auto;
    }
}


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

.woocommerce-shop .site-main > .container,
.tax-product_cat .site-main > .container {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.woocommerce-shop .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
    margin-bottom: 40px;
}

.woocommerce-shop .woocommerce-products-header__title,
.tax-product_cat .woocommerce-products-header__title {
    margin: 0 0 12px;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.shop-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 40px;
}

.shop-page-header .page-title {
    margin: 0;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.shop-page-subtitle {
    margin: 0;
    color: var(--crema);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
}

.woocommerce .woocommerce-result-count {
    margin: 0 0 24px;
    color: #6a6a6a;
    font-size: 14px;
}

.woocommerce .woocommerce-ordering {
    margin: 0 0 30px;
}

.woocommerce .woocommerce-ordering select {
    min-height: 46px;
    padding: 0 40px 0 14px;
    border: 1px solid #d5cec4;
    background: #ffffff;
    font-size: 14px;
}

/* Product cards */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 26px;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0 0 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 21px;
    line-height: 1.3;
}

.woocommerce ul.products li.product .price {
    margin: 0 0 16px;
    font-size: 16px;
}

.woocommerce ul.products li.product .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;

    background: var(--espresso);
    color: #ffffff;

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.woocommerce ul.products li.product .button:hover {
    opacity: 0.82;
}

/* Mobile */

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

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

    .woocommerce-shop .woocommerce-products-header__title,
    .tax-product_cat .woocommerce-products-header__title,
    .shop-page-header .page-title {
        font-size: 40px;
    }
}

/* ========================================
   SHOP CATEGORY GRID
======================================== */

.shop-category-section {
    margin-bottom: 64px;
}

.shop-category-header {
    margin-bottom: 28px;
}

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

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.shop-category-header h2 {
    margin: 0;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
}

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.shop-category-card {
    display: block;

    background: #ffffff;
    color: #222222;

    text-decoration: none;

    overflow: hidden;
}

.shop-category-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.shop-category-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.shop-category-image.is-placeholder {
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        linear-gradient(
            180deg,
            var(--latte) 0%,
            var(--tan) 100%
        );
}

.shop-category-image.is-placeholder span {
    color: var(--espresso);
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.category-subcategory-section {
    margin-bottom: 48px;
}

.category-products-heading {
    margin-top: 8px;
}

.shop-category-content {
    padding: 18px 18px 20px;
}

.shop-category-content h3 {
    margin: 0 0 6px;

    font-size: 21px;
    line-height: 1.2;
}

.shop-category-content span {
    color: #666666;

    font-size: 13px;
}

.shop-category-card:hover .shop-category-image img {
    transform: scale(1.03);
}

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

@media (max-width: 600px) {
    .shop-category-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   SHOP LAYOUT WITH SIDEBAR
======================================== */

.shop-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.shop-sidebar {
    min-width: 0;
}

.shop-content {
    min-width: 0;
}

.shop-widget {
    padding: 0 0 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid #ddd6cc;
}

.shop-widget-title {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
/* ========================================
   SHOP FILTER SIDEBAR
======================================== */

.shop-sidebar {
    padding-top: 6px;
}

.shop-sidebar h2,
.shop-sidebar h3,
.shop-widget-title {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.2;
}

.shop-sidebar .wp-block-heading {
    margin-top: 0;
}

.shop-sidebar .wp-block-woocommerce-active-filters,
.shop-sidebar .wp-block-woocommerce-filter-wrapper,
.shop-sidebar .wc-block-components-filter-wrapper {
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ddd6cc;
}

/* Filter headings */

.shop-sidebar
.wc-block-components-filter-reset-button,
.shop-sidebar
.wc-block-active-filters__clear-all {
    font-size: 12px;
}

/* Checkbox filters */

.shop-sidebar
.wc-block-checkbox-list {
    display: grid;
    gap: 10px;
}

.shop-sidebar
.wc-block-checkbox-list__checkbox {
    margin: 0;
}

.shop-sidebar
.wc-block-components-checkbox {
    font-size: 15px;
}

/* Price filter */

.shop-sidebar
.wc-block-price-filter {
    margin-top: 8px;
}

.shop-sidebar
.wc-block-price-filter__range-input-wrapper {
    margin: 18px 0;
}

.shop-sidebar
.wc-block-price-filter__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.shop-sidebar
.wc-block-price-filter__amount {
    width: 100%;
    min-height: 44px;

    padding: 8px 10px;

    border: 1px solid #cfc8bd;
    background: #fff;

    font-size: 14px;
}

/* Active filters */

.shop-sidebar
.wc-block-active-filters__list {
    display: grid;
    gap: 8px;
}

.shop-sidebar
.wc-block-active-filters__list-item {
    padding: 8px 10px;

    background: #ffffff;
    border: 1px solid #d8d1c7;

    font-size: 13px;
}

/* Shop layout refinement */

.shop-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 54px;
}

.shop-content {
    width: 100%;
}

/* Mobile */

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd6cc;
    }
}
/* ========================================
   FLOWER STORE HOMEPAGE
======================================== */

.home-store {
    background: #f7f5f0;
}

/* HERO */

.flower-hero {
    padding: 72px 0 90px;
}

.flower-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.flower-hero-content {
    max-width: 560px;
}

.flower-hero-title {
    margin: 0 0 24px;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.flower-hero-description {
    max-width: 500px;
    font-size: 18px;
    line-height: 1.7;
}

.flower-hero-description p {
    margin: 0;
}

.flower-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    background: #222;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.button-primary:hover {
    opacity: 0.82;
}

.button-text,
.section-link {
    color: #222;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.flower-hero-visual {
    overflow: hidden;
}

.flower-hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.flower-hero-placeholder {
    min-height: 620px;
    display: grid;
    place-items: center;
    background: #e8e2d8;
}

/* SHARED SECTION HEADINGS */

.section-heading {
    margin-bottom: 36px;
}

.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
}

.section-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.section-heading h2,
.feature-story-content h2,
.brand-story-inner h2 {
    margin: 0;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

/* HOME CATEGORIES */

.home-categories {
    padding: 90px 0;
    background: #fff;
}

/* PRODUCT SECTIONS */

.home-products-section {
    padding: 90px 0;
}

.home-products-alt {
    background: #fff;
}

.home-products .woocommerce {
    width: 100%;
}

.home-products ul.products {
    margin-top: 0;
}

/* FEATURE STORY */

.home-feature-story {
    padding: 100px 0;
    background: #eee8df;
}

.feature-story-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: center;
}

.feature-story-image {
    overflow: hidden;
}

.feature-story-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.feature-story-content {
    max-width: 520px;
}

.feature-story-content p:not(.section-eyebrow) {
    margin: 24px 0 30px;
    font-size: 17px;
    line-height: 1.75;
}

/* BRAND STORY */

.home-brand-story {
    padding: 100px 0;
}

.brand-story-inner {
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
}

.brand-story-inner > p:not(.section-eyebrow) {
    max-width: 700px;
    margin: 24px auto 0;
    font-size: 17px;
    line-height: 1.75;
}

.brand-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 46px;
    text-align: left;
}

.brand-value {
    padding: 26px;
    background: #fff;
    border: 1px solid #e1dbd2;
}

.brand-value strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}

.brand-value span {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* TABLET */

@media (max-width: 900px) {

    .flower-hero-grid,
    .feature-story-grid {
        grid-template-columns: 1fr;
    }

    .flower-hero-grid {
        gap: 42px;
    }

    .flower-hero-content {
        max-width: 680px;
    }

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

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* MOBILE */

@media (max-width: 600px) {

    .flower-hero {
        padding: 48px 0 60px;
    }

    .flower-hero-title {
        font-size: 46px;
    }

    .flower-hero-description {
        font-size: 16px;
    }

    .flower-hero-image {
        aspect-ratio: 1 / 1.15;
    }

    .home-categories,
    .home-products-section,
    .home-feature-story,
    .home-brand-story {
        padding: 64px 0;
    }

    .brand-values {
        grid-template-columns: 1fr;
    }

    .feature-story-grid {
        gap: 36px;
    }

    .feature-story-photo {
        aspect-ratio: 1 / 1.1;
    }
}
/* ========================================
   HOMEPAGE FULL-WIDTH SLIDER
======================================== */

.home-slider {
    position: relative;
    overflow: hidden;
    background: #eee8df;
}

.home-slider-track {
    position: relative;
    min-height: 560px;
}

.home-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.32s ease,
        visibility 0.32s ease;
}

.home-slide.is-active {
    position: relative;

    opacity: 1;
    visibility: visible;
}

.home-slide-media {
    position: absolute;
    inset: 0;
}

.home-slide-image,
.home-slide-placeholder {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}

.home-slide-placeholder {
    background-size: cover;
    background-position: center;
}

.slide-roses {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.05)
        ),
        #8d5c57;
}

.slide-seasonal {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.05)
        ),
        #b6a487;
}

.home-slide::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.28) 45%,
            rgba(0, 0, 0, 0.04) 75%
        );

    pointer-events: none;
}

.home-slide-overlay {
    position: relative;
    z-index: 2;

    min-height: 560px;

    display: flex;
    align-items: center;
}

.home-slide-content {
    max-width: 620px;
    color: #ffffff;
}

.home-slide-content .section-eyebrow {
    color: #ffffff;
}

.home-slide-content h1,
.home-slide-content h2 {
    margin: 0 0 22px;

    font-size: clamp(52px, 6vw, 84px);
    line-height: 0.98;

    letter-spacing: -0.04em;
}

.home-slide-content p:not(.section-eyebrow) {
    max-width: 540px;

    margin: 0 0 30px;

    font-size: 18px;
    line-height: 1.7;
}

.home-slider-dots {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    display: flex;
    gap: 10px;
}

.home-slider-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border: 1px solid #ffffff;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}

.home-slider-dot.is-active {
    background: #ffffff;
}

@media (max-width: 800px) {

    .home-slider-track,
    .home-slide-image,
    .home-slide-placeholder,
    .home-slide-overlay {
        min-height: 470px;
        height: 470px;
    }

    .home-slide-content {
        max-width: 520px;
    }

    .home-slide-content h1,
    .home-slide-content h2 {
        font-size: 50px;
    }
}

@media (max-width: 600px) {

    .home-slider-track,
    .home-slide-image,
    .home-slide-placeholder,
    .home-slide-overlay {
        min-height: 420px;
        height: 420px;
    }

    .home-slide-content {
        padding-inline: 24px;
    }

    .home-slide-content h1,
    .home-slide-content h2 {
        font-size: 42px;
    }

    .home-slide-content p:not(.section-eyebrow) {
        font-size: 16px;
    }
}
/* ========================================
   STANDARD PAGES
======================================== */

.page .site-main {
    padding: 70px 0 90px;
}

.page-header {
    margin-bottom: 36px;
}

.page-title {
    margin: 0;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.page-content {
    width: 100%;
}
/* ==========================================================
   ROASTERY THEME LAYER
   Warm coffee-house palette: roasted browns, cream, crema
   gold and a muted tea-leaf green. Loaded last so it tunes
   the sections above rather than replacing them.
   ========================================================== */

:root {
    /* Surfaces */
    --cream: #faf6ef;
    --latte: #f1e8da;
    --parchment: #ffffff;

    /* Roast */
    --espresso: #2f2219;
    --coffee: #5b3f2c;
    --mocha: #8a6a4f;

    /* Accents */
    --crema: #c1913f;
    --crema-soft: #e0c48a;
    --tea-leaf: #6d7f5b;

    /*
     * Wine red lifted straight from the RAUNAK wordmark. The logo's
     * dominant inks sample at #360017 / #45001a, so the footer sits
     * between them.
     */
    --logo-red: #3d0019;

    /* Editorial mosaic: solid blocks and the teal accent */
    --tan: #dcc6a6;
    --tan-deep: #cfb491;
    --teal: #2f6f6b;

    /* Type */
    --ink: #2a211a;
    --ink-muted: #7a6a5c;

    --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-body: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;

    --radius: 14px;
    --radius-lg: 22px;
}

body {
    background: var(--cream);
    color: var(--ink);
}

h1,
h2,
h3,
.page-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.section-eyebrow {
    color: var(--crema);
}

.section-link,
.button-text {
    color: var(--coffee);
    text-decoration-color: var(--crema-soft);
}

.section-link:hover {
    color: var(--espresso);
}


/* ---------- Buttons ---------- */

.button-primary {
    border-radius: 999px;
    padding: 0 32px;
    background: var(--espresso);
    font-family: var(--font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.button-primary:hover {
    opacity: 1;
    background: var(--coffee);
    transform: translateY(-2px);
}



/* ==========================================================
   HERO SLIDER
   Headline only, set over a soft diffused pool of shade so
   it stays readable on every photograph.
   ========================================================== */

/*
 * The front page is a static Page, so body.page matches and
 * `.page .site-main { padding: 70px 0 90px }` applies to it. That
 * top padding pushed the hero away from the header. The homepage
 * lays out its own section spacing, so it opts out of both.
 *
 * Scoped with .page so it outranks that rule rather than relying
 * on source order.
 */
.page .site-main.home-store {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.home-slider {
    display: block;
    margin-top: 0;
    background: var(--latte);
}

.home-slider-track {
    margin: 0;
}

/*
 * Darker at the very top and bottom, lighter through the middle.
 * The top band seats the hero against the header instead of the
 * two pale areas bleeding into each other.
 */
.home-slide::after {
    background:
        linear-gradient(
            180deg,
            rgba(28, 19, 13, 0.55) 0%,
            rgba(28, 19, 13, 0.22) 18%,
            rgba(28, 19, 13, 0.16) 55%,
            rgba(28, 19, 13, 0.42) 100%
        );
}

.home-slide-overlay {
    justify-content: center;
}

.home-slide-content {
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    padding-inline: 16px;
    text-align: center;
}

/*
 * The diffused pool: a blurred radial wash that sits behind the
 * words only, so the photograph stays bright everywhere else.
 */
.home-slide-content::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: -48% -12%;

    /*
     * Deep enough to hold white type over the palest photograph.
     * The baby banner measures ~200 average luminance behind the
     * headline, so the pool has to pull that down past ~110 before
     * the text reads. It stays soft-edged and fades out well before
     * the frame, so the picture keeps its brightness everywhere else.
     */
    background:
        radial-gradient(
            ellipse at center,
            rgba(28, 19, 13, 0.74) 0%,
            rgba(28, 19, 13, 0.6) 34%,
            rgba(28, 19, 13, 0.3) 58%,
            rgba(28, 19, 13, 0.08) 74%,
            rgba(28, 19, 13, 0) 86%
        );

    filter: blur(22px);
    pointer-events: none;
}

.home-slide-content .home-slide-title {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(38px, 6.2vw, 86px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.022em;

    color: #ffffff;

    /* Keeps the line breaks even rather than leaving a short last line. */
    text-wrap: balance;

    /*
     * Tight shadow for edge definition, wide one for lift. Both are
     * heavier than they look because the pale banners give the letter
     * shapes almost nothing to sit against.
     */
    text-shadow:
        0 1px 3px rgba(28, 19, 13, 0.72),
        0 2px 14px rgba(28, 19, 13, 0.5),
        0 10px 44px rgba(28, 19, 13, 0.45);
}

.home-slider-dots {
    bottom: 32px;
    gap: 12px;
}

.home-slider-dot {
    width: 9px;
    height: 9px;
    border-color: rgba(250, 246, 239, 0.8);
    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.home-slider-dot.is-active {
    width: 30px;
    border-radius: 999px;
    border-color: var(--crema);
    background: var(--crema);
}


/* ==========================================================
   CATEGORY MOSAIC
   An uneven editorial grid: category photographs and copy
   blocks share one composition. Photos carry a small label;
   the writing lives in its own off-white cards.
   ========================================================== */

.home-categories {
    padding: 96px 0;
    background: var(--cream);
}

/*
 * Twelve columns so the rows can divide differently: halves on the
 * top row, a quarter/quarter/half middle, and clean thirds at the
 * bottom. Row heights step down as the eye travels the grid.
 */
.category-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 244px 244px 290px;
    grid-auto-rows: 244px;
    gap: 18px;
}

/*
 * Composed placement. Everything is addressed explicitly, so a
 * sixth category (or more) simply auto-flows onto a new row
 * underneath without disturbing the arrangement above.
 */

/* Tall lead tile, spanning both of the first two rows */
.mosaic-cat-1 {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
}

/* Row 1 — takes the full half beside the lead tile */
.mosaic-cat-2 {
    grid-column: 7 / span 6;
    grid-row: 1;
}

/* Row 2 — a photo and the copy block share the half */
.mosaic-cat-3 {
    grid-column: 7 / span 3;
    grid-row: 2;
}

.mosaic-note {
    grid-column: 10 / span 3;
    grid-row: 2;
}

/* Row 3 — three equal blocks */
.mosaic-cat-4 {
    grid-column: 1 / span 4;
    grid-row: 3;
}

.mosaic-cat-5 {
    grid-column: 5 / span 4;
    grid-row: 3;
}

.mosaic-contact {
    grid-column: 9 / span 4;
    grid-row: 3;
}


/* ---------- Photo tiles ---------- */

.mosaic-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--latte);
    text-decoration: none;
    transition: box-shadow 0.35s ease;
}

.mosaic-tile:hover {
    box-shadow: 0 16px 32px rgba(47, 34, 25, 0.16);
}

/*
 * Taken out of flow so the photograph never influences row height.
 * Rows are then free to grow for the copy cards without the images
 * stretching to match.
 */
.mosaic-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mosaic-tile:hover .mosaic-photo {
    transform: scale(1.04);
}

/* Just enough shade under the label to hold it on any photo. */
.mosaic-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background:
        linear-gradient(
            180deg,
            rgba(28, 19, 13, 0) 0%,
            rgba(28, 19, 13, 0.62) 100%
        );
    pointer-events: none;
}

.mosaic-tile-label {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 18px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Underline that draws itself in on hover. */
.mosaic-tile-label::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 7px;
    background: var(--teal);
    transition: width 0.35s ease;
}

.mosaic-tile:hover .mosaic-tile-label::after,
.mosaic-tile:focus-visible .mosaic-tile-label::after {
    width: 34px;
}

/* The lead tile is twice the size, so it can carry a larger label. */
/* The two top-row tiles are large enough to carry a display-size label. */
.mosaic-cat-1 .mosaic-tile-label,
.mosaic-cat-2 .mosaic-tile-label {
    left: 28px;
    bottom: 26px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}


/* ---------- Copy cards ---------- */

.mosaic-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    border: 1px solid #e7dccb;
    border-radius: 10px;
    background: var(--parchment);
    color: var(--ink);
    text-decoration: none;
}


.mosaic-note-title,
.mosaic-contact-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.mosaic-note p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* ---------- Solid block ---------- */

.mosaic-contact {
    border-color: transparent;
    background: var(--tan);
    transition: background 0.3s ease;
}

.mosaic-contact:hover {
    background: var(--tan-deep);
}

.mosaic-contact-title {
    color: var(--espresso);
}

.mosaic-contact-hint {
    max-width: 22ch;
    color: var(--coffee);
    font-size: 13px;
    line-height: 1.6;
}


/* ---------- Reflow ----------
 * Below the composed layout the explicit placement is dropped and
 * the blocks stack in source order, which already reads correctly:
 * title, categories, then the copy blocks.
 */

@media (max-width: 1000px) {

    .category-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Drop the composed row heights; every row is equal here. */
        grid-template-rows: none;
        grid-auto-rows: 220px;
    }

    .category-mosaic > * {
        grid-column: auto;
        grid-row: auto;
    }

    .mosaic-cat-1,
    .mosaic-cat-2,
    .mosaic-note {
        grid-column: 1 / span 2;
    }

    .mosaic-cat-1 .mosaic-tile-label,
    .mosaic-cat-2 .mosaic-tile-label {
        font-size: 26px;
    }
}

@media (max-width: 600px) {

    .home-categories {
        padding: 64px 0;
    }

    .category-mosaic {
        /* Photos hold 178px; copy cards may take more if they need it. */
        grid-auto-rows: minmax(178px, auto);
        gap: 12px;
    }

    .mosaic-card {
        padding: 22px;
    }

    .mosaic-note-title,
    .mosaic-contact-title {
        font-size: 21px;
    }

    /* The copy cards need room to breathe more than the photos do. */
    .mosaic-note,
    .mosaic-contact {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }

    .mosaic-cat-1 .mosaic-tile-label,
    .mosaic-cat-2 .mosaic-tile-label {
        font-size: 22px;
        left: 20px;
        bottom: 20px;
    }
}


/* ==========================================================
   REMAINING HOME SECTIONS
   ========================================================== */

.home-products-section {
    background: var(--cream);
}

.home-products-alt {
    background: var(--parchment);
}

.home-feature-story {
    background: var(--latte);
}

.feature-story-image {
    border-radius: var(--radius-lg);
}

.feature-story-photo {
    border-radius: var(--radius-lg);
}

/*
 * Sits directly under the cream category section now that the
 * product and feature-story sections are gone, so it takes the
 * warmer tone to keep the two bands apart.
 */
.home-brand-story {
    background: var(--latte);
}

.brand-value {
    border: 1px solid #e3d8c7;
    border-radius: var(--radius);
    background: var(--parchment);
}

.brand-value strong {
    font-family: var(--font-display);
    color: var(--espresso);
}

.brand-value span {
    color: var(--ink-muted);
}


/* ==========================================================
   SHOP PAGE CATEGORY CARDS
   ========================================================== */

.shop-category-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.shop-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(47, 34, 25, 0.16);
}

.shop-category-eyebrow {
    color: var(--crema);
}


/* ==========================================================
   NARROW SCREENS
   ========================================================== */

@media (max-width: 600px) {

    .home-slider-dots {
        bottom: 20px;
    }
}


/* ==========================================================
   OUR PROMISE CARDS
   ========================================================== */

.home-brand-story {
    padding: 104px 0;
}

.brand-story-inner > p:not(.section-eyebrow) {
    color: var(--ink-muted);
}

.brand-values {
    gap: 22px;
    margin-top: 54px;
}

.brand-value {
    position: relative;
    overflow: hidden;

    padding: 36px 30px 32px;

    border: 1px solid #e7dccb;
    border-radius: 16px;

    /*
     * Warm top-light gradient: near-white at the top corner falling
     * to latte, so the cards read as lit from above rather than flat.
     */
    background:
        linear-gradient(
            162deg,
            #fffdfa 0%,
            var(--cream) 52%,
            #f2e7d7 100%
        );

    box-shadow: 0 1px 2px rgba(47, 34, 25, 0.05);

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

/* Accent rule across the top edge, teal falling into crema gold. */
.brand-value::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--teal) 0%,
            var(--tea-leaf) 42%,
            var(--crema) 100%
        );
}

/* Soft glow in the corner, kept well under the text. */
.brand-value::after {
    content: "";

    position: absolute;
    z-index: 0;
    right: -60px;
    bottom: -70px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(193, 145, 63, 0.16) 0%,
            rgba(193, 145, 63, 0) 70%
        );

    pointer-events: none;
}

.brand-value:hover {
    transform: translateY(-6px);
    border-color: var(--crema-soft);
    box-shadow: 0 18px 34px rgba(47, 34, 25, 0.15);
}

.brand-value strong {
    position: relative;
    z-index: 1;

    margin-bottom: 12px;

    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: -0.015em;

    color: var(--espresso);
}

.brand-value span {
    position: relative;
    z-index: 1;

    color: var(--ink-muted);
    font-size: 14.5px;
    line-height: 1.72;
}

@media (max-width: 600px) {

    .home-brand-story {
        padding: 64px 0;
    }

    .brand-value {
        padding: 28px 24px 26px;
    }
}


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

.site-footer {
    background: var(--logo-red);
    color: rgba(250, 246, 239, 0.8);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 44px;
    padding: 52px 0 42px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--cream);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.footer-tagline {
    max-width: 34ch;
    margin: 0 0 20px;
}

.footer-heading {
    margin: 0 0 15px;

    color: var(--crema-soft);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ---------- Social ---------- */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-social a {
    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    border: 1px solid rgba(250, 246, 239, 0.22);
    border-radius: 50%;

    color: var(--cream);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

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

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


/* ---------- Link columns ---------- */

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li + li {
    margin-top: 9px;
}

.footer-links a {
    color: rgba(250, 246, 239, 0.78);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-links a:hover {
    color: var(--crema-soft);
}


/* ---------- Contact ---------- */

.footer-address {
    font-style: normal;
}

/* Plain stacked lines — no labels, no dividers. */
.footer-contact-row {
    display: block;
    margin: 0 0 7px;

    color: rgba(250, 246, 239, 0.78);
    text-decoration: none;
}

a.footer-contact-row {
    transition: color 0.25s ease;
}

a.footer-contact-row:hover {
    color: var(--crema-soft);
}

.footer-contact-row.is-email {
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0;
    word-break: break-all;
}


/* ---------- Bottom bar ---------- */

/* Same ground as the rest of the footer; only the rule separates it. */
.footer-bottom {
    border-top: 1px solid rgba(250, 246, 239, 0.14);
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 17px 0;
}

.footer-bottom-inner p {
    margin: 0;
    font-size: 13px;
    color: rgba(250, 246, 239, 0.55);
}


/* ---------- Reflow ---------- */

@media (max-width: 1000px) {

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
        padding: 44px 0 36px;
    }

    /* The brand blurb and the contact block both want the full width. */
    .footer-brand,
    .footer-contact {
        grid-column: 1 / span 2;
    }
}

@media (max-width: 600px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 38px 0 32px;
    }

    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* ==========================================================
   FLOATING WHATSAPP BUTTON
   ========================================================== */

body.nav-open .whatsapp-float,
body.shop-drawer-open .whatsapp-float {
    visibility: hidden;
    pointer-events: none;
}

.whatsapp-float {
    position: fixed;
    z-index: 200;
    right: 22px;
    bottom: 22px;

    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #35d267 0%,
            #1fab53 100%
        );

    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(31, 171, 83, 0.42),
        0 2px 6px rgba(28, 19, 13, 0.18);

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

.whatsapp-float svg {
    width: 30px;
    height: 30px;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 12px 26px rgba(31, 171, 83, 0.5),
        0 3px 8px rgba(28, 19, 13, 0.22);
}

@media (max-width: 600px) {

    .whatsapp-float {
        right: 16px;
        bottom: 16px;

        width: 50px;
        height: 50px;
    }

    .whatsapp-float svg {
        width: 27px;
        height: 27px;
    }
}


/* ==========================================================
   HERO HEIGHT — HEADER + HERO = 98VH
   Leaves a sliver of the next section showing at the fold, so
   it reads as ending rather than filling the screen.
   ========================================================== */

/*
 * Only above 1100px. Below that the header stacks into a taller
 * column, so the subtraction no longer holds and the fixed heights
 * further down take over.
 */
@media (min-width: 1101px) {

    .home-slider-track,
    .home-slide-image,
    .home-slide-placeholder,
    .home-slide-overlay {
        /* max() keeps the hero usable on short laptop screens. */
        height: max(440px, calc(98vh - var(--header-h)));
        min-height: max(440px, calc(98vh - var(--header-h)));
    }
}


/* ==========================================================
   SITE HEADER — SINGLE SOURCE OF TRUTH

   header.php is shared by every template via get_header(), so
   everything that styles the bar lives here and nowhere else.
   Change the header once, and it changes on every page.

   Markup it targets:
     header.site-header.store-header
       └ div.container.store-header-inner
           ├ a.site-logo > img.site-logo-image
           ├ nav.site-navigation > ul.primary-menu
           └ div.store-header-actions  (account, cart)
   ========================================================== */

:root {
    /*
     * Bar height plus its 1px bottom border. The homepage hero
     * subtracts this to land header + hero on exactly 98vh, so
     * if the height below changes, change this with it.
     */
    --header-h: 81px;
}

.site-header {
    background: var(--cream);
    border-bottom: 1px solid #e3d8c7;
}

/*
 * The inner row. Deliberately one rule: an earlier version also
 * styled `.site-header .container`, which outranked this on
 * specificity and silently killed the grid layout declared here.
 */
.store-header-inner {
    min-height: 80px;

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

    gap: 32px;
}


/* ---------- Logo ---------- */

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;

    line-height: 0;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * Locked to one height on every page.
 *
 * Scoped under .site-header and given a max-height as well, so no
 * plugin stylesheet can grow it: WooCommerce and the block library
 * both ship broad `img` rules, and store pages load extra sheets
 * that ordinary pages do not. The height is fixed rather than
 * inherited so the bar is the same on the landing page and
 * everywhere else.
 */
.site-header .site-logo-image {
    display: block;

    width: auto;
    height: 62px;
    max-height: 62px;

    /* Beat `img { max-width: 100% }` if the bar ever gets narrow. */
    max-width: none;

    object-fit: contain;
}


/* ---------- Navigation ---------- */

.site-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.primary-menu li {
    margin: 0;
}

.primary-menu a {
    position: relative;

    display: inline-block;

    padding: 34px 0 31px;

    color: var(--espresso);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;

    text-transform: uppercase;
    text-decoration: none;
}

/* Rule that wipes in under the current and hovered item. */
.primary-menu a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;

    height: 2px;

    background: var(--espresso);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.2s ease;
}

.primary-menu a:hover::after,
.primary-menu .current-menu-item > a::after {
    transform: scaleX(1);
}


/* ---------- Account + cart ---------- */

.store-header-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    white-space: nowrap;
}

.header-account-link,
.header-cart-link {
    color: var(--espresso);

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;

    text-transform: uppercase;
    text-decoration: none;
}

.header-account-link:hover,
.header-cart-link:hover {
    color: var(--coffee);
}

.header-account-link.is-named {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    letter-spacing: 0.02em;
}

.header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    margin-left: 4px;
    padding: 0 5px;

    border-radius: 999px;

    background: var(--crema);
    color: var(--espresso);

    font-size: 11px;

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

.header-cart-link.is-updated .header-cart-count {
    background: var(--espresso);
    color: var(--crema);
    transform: scale(1.2);
}

.single-product .single_add_to_cart_button.is-added {
    background: #2e8540 !important;
    box-shadow: 0 4px 14px rgba(46, 133, 64, 0.28);
}


/* ---------- Reflow ---------- */

@media (max-width: 1100px) {

    .store-header-inner {
        padding-block: 20px;
    }

    .primary-menu {
        flex-wrap: wrap;
        gap: 18px 24px;
    }

    /* The tall padding is what made room for the underline. */
    .primary-menu a {
        padding: 8px 0;
    }

    .primary-menu a::after {
        bottom: 0;
    }
}

@media (max-width: 760px) {

    .store-header-inner {
        min-height: 70px;
        padding-block: 12px;
    }
}

@media (max-width: 650px) {

    .primary-menu {
        gap: 14px 18px;
    }

    .primary-menu a {
        font-size: 11px;
    }

    .store-header-actions {
        gap: 12px;
    }
}

@media (max-width: 600px) {

    /* Must match the specificity of the desktop rule to win. */
    .site-header .site-logo-image {
        height: 50px;
        max-height: 50px;
    }
}


/* ==========================================================
   COLLAPSIBLE SHOP FILTERS
   ========================================================== */

.shop-filter-group {
    border-bottom: 1px solid #e7dccb;
}

.shop-filter-group:last-child {
    border-bottom: 0;
}

/*
 * The heading keeps its document role; the button inside it does
 * the work, so it gets the padding and the full-width hit area.
 */
.shop-sidebar .shop-filter-heading {
    margin: 0 !important;
}

.shop-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    padding: 15px 2px;

    border: 0;
    background: none;

    color: var(--espresso);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;

    cursor: pointer;

    transition: color 0.2s ease;
}

.shop-filter-toggle:hover {
    color: var(--teal);
}

.shop-filter-chevron {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    color: var(--mocha);

    transition: transform 0.3s ease;
}

.shop-filter-group.is-open .shop-filter-chevron {
    transform: rotate(180deg);
    color: var(--teal);
}


/*
 * Animate open and closed without needing a measured height:
 * the panel is a grid whose single row goes from 0fr to 1fr.
 */
.shop-filter-panel {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows 0.3s ease;
}

.shop-filter-group.is-open .shop-filter-panel {
    grid-template-rows: 1fr;
}

.shop-filter-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.shop-filter-group.is-open .shop-filter-panel-inner {
    padding-bottom: 18px;
}


/* Nothing collapses without the script, so leave it all open. */
@media (prefers-reduced-motion: reduce) {

    .shop-filter-panel {
        transition: none;
    }
}


/* ==========================================================
   SHOP FILTER DRAWER

   The filters slide in over the grid instead of holding a
   column, so the products get the full width. Overrides the
   two-column .shop-layout defined earlier in this file.
   ========================================================== */

.shop-layout {
    display: block;
}


/* ---------- Trigger ---------- */

.shop-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 26px;
    padding: 11px 22px 11px 18px;

    border: 1px solid #e3d8c7;
    border-radius: 999px;

    background: var(--parchment);
    color: var(--espresso);

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.shop-filter-trigger svg {
    width: 18px;
    height: 18px;
    color: var(--teal);
}

.shop-filter-trigger:hover {
    border-color: var(--teal);
    background: #ffffff;
    transform: translateY(-1px);
}


/* ---------- Drawer shell ---------- */

/*
 * Kept in the document at all times so it can animate. `visibility`
 * rather than `display` means it still transitions, while staying
 * unreachable by keyboard and screen readers when closed.
 */
.shop-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    isolation: isolate;

    visibility: hidden;
    pointer-events: none;

    transition: visibility 0s linear 0.34s;
}

.shop-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.shop-drawer-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(28, 19, 13, 0.68);
    backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity 0.34s ease;
}

.shop-drawer.is-open .shop-drawer-backdrop {
    opacity: 1;
}


/* ---------- Panel ---------- */

.shop-drawer .shop-sidebar {
    position: absolute;
    top: 0;
    left: 0;

    width: min(400px, 88vw);
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 0;

    background: var(--cream);
    box-shadow: 0 0 50px rgba(28, 19, 13, 0.35);

    transform: translateX(-100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-drawer.is-open .shop-sidebar {
    transform: translateX(0);
}

.shop-drawer-head {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 20px 22px;

    border-bottom: 1px solid #e3d8c7;
}

.shop-drawer-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--espresso);
}

.shop-drawer-close {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--espresso);

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.25s ease;
}

.shop-drawer-close:hover {
    background: var(--latte);
}

.shop-drawer-body {
    flex: 1;
    overflow-y: auto;

    padding: 22px;
}

/* The inline mobile treatment does not apply inside a drawer. */
.shop-drawer .shop-sidebar {
    border-bottom: 0;
}


@media (max-width: 600px) {

    .shop-drawer .shop-sidebar {
        width: 100%;
    }
}

/* Body scroll lock while the filter drawer is open. */
body.shop-drawer-open {
    overflow: hidden;
}


/* ==========================================================
   SHOP LISTING UI

   Shorter product cards, artwork shown whole, and one toolbar
   row holding the result count and the Filters & Sort button.
   Appended last so it settles the earlier card rules.
   ========================================================== */

/* ---------- Toolbar ---------- */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid #e7dccb;
}

/* WooCommerce floats the count; inside a flex row that is unhelpful. */
.shop-toolbar .woocommerce-result-count {
    float: none !important;
    margin: 0 !important;

    color: var(--ink-muted);
    font-size: 13px;
}

/* The trigger sits at the right end of the row, not above the grid. */
.shop-toolbar .shop-filter-trigger {
    margin: 0 0 0 auto;
    padding: 9px 18px 9px 15px;
    font-size: 11px;
}

.shop-toolbar .shop-filter-trigger svg {
    width: 16px;
    height: 16px;
}


/* ---------- Product cards ---------- */

.woocommerce ul.products {
    gap: 30px 22px;
}

/*
 * The photograph fills its square frame.
 *
 * Containing it left a band of tinted ground above and below every
 * portrait shot, so the grid read as a row of letterboxed pictures
 * rather than a row of products. Filling crops the long edges instead,
 * anchored to the top so a bouquet keeps its blooms and loses only
 * stem. The tint stays as the ground a transparent PNG sits on.
 */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    object-position: center top;

    margin: 0 0 12px;

    border-radius: 4px;
    background: var(--latte);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 4px;
    padding: 0;

    font-size: 16px;
    line-height: 1.35;
}

.woocommerce ul.products li.product .price {
    margin: 0 0 10px;
    font-size: 14px;
}

.woocommerce ul.products li.product .button {
    padding: 9px 16px;
    font-size: 11px;
}


/* ---------- Loop card image slider ----------
 *
 * Same left/right slide as the product page, on every grid of cards
 * (shop, categories, related, search). No arrows: swipe or drag.
 */

.woocommerce ul.products li.product .rlr-loop-gallery {
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--latte);
    touch-action: pan-y;
    cursor: grab;
}

.woocommerce ul.products li.product .rlr-loop-gallery.is-dragging {
    cursor: grabbing;
}

.woocommerce ul.products li.product .rlr-loop-gallery__viewport {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product .rlr-loop-gallery__track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.woocommerce ul.products li.product .rlr-loop-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.woocommerce ul.products li.product .rlr-loop-gallery img,
.woocommerce ul.products li.product a .rlr-loop-gallery img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    background: var(--latte);
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}


/* ---------- Sorting, inside the drawer ---------- */

.shop-drawer-sort {
    margin-bottom: 22px;
    padding-bottom: 20px;

    border-bottom: 1px solid #e7dccb;
}

.shop-drawer-sort-title {
    margin: 0 0 10px;

    color: var(--espresso);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* WooCommerce floats this form to the right of the grid by default. */
.shop-drawer-sort .woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
    width: 100%;
}

.shop-drawer-sort .woocommerce-ordering select {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;

    border: 1px solid #e3d8c7;
    border-radius: 8px;

    background: var(--parchment);
    color: var(--ink);

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;
}

.shop-drawer-cats {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7dccb;
}

.shop-drawer-cat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-drawer-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 44px;
    padding: 8px 2px;

    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.shop-drawer-cat-list a:hover,
.shop-drawer-cat-list a.is-current {
    color: var(--espresso);
}

.shop-drawer-cat-list a.is-current {
    color: var(--teal);
}

.shop-drawer-cat-count {
    min-width: 28px;
    padding: 2px 8px;

    border-radius: 999px;

    background: var(--latte);
    color: var(--mocha);

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.shop-drawer-cat-list a.is-current .shop-drawer-cat-count {
    background: var(--teal);
    color: #fff;
}


@media (max-width: 600px) {

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
    }

    .shop-toolbar {
        margin-bottom: 18px;
    }
}


/* ==========================================================
   SKIP LINK, WORDMARK, STICKY HEADER
   ========================================================== */

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 400;

    padding: 10px 16px;

    background: var(--espresso);
    color: #fff;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

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

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;

    background: rgba(250, 246, 239, 0.96);
    backdrop-filter: blur(12px);
}

.site-logo-wordmark {
    color: var(--espresso);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}


/* ---------- Desktop dropdowns ---------- */

.primary-menu .menu-item-has-children {
    position: relative;
}

.primary-menu .sub-menu {
    position: absolute;
    top: calc(100% - 10px);
    left: 50%;
    z-index: 20;

    display: grid;
    gap: 2px;

    min-width: 220px;
    margin: 0;
    padding: 12px 0;

    list-style: none;

    border: 1px solid #e3d8c7;
    border-radius: 12px;

    background: #fff;
    box-shadow: 0 16px 32px rgba(47, 34, 25, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);

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

.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.primary-menu .sub-menu a {
    display: block;
    padding: 10px 18px;

    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.primary-menu .sub-menu a::after {
    display: none;
}

.primary-menu .sub-menu a:hover {
    color: var(--coffee);
    background: var(--cream);
}


/* ---------- Hamburger — same chip as Filters & Sort ---------- */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;

    border: 1px solid #e3d8c7;
    border-radius: 999px;

    background: var(--parchment);
    color: var(--teal);

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.menu-toggle svg {
    width: 18px;
    height: 18px;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
    border-color: var(--teal);
    background: #ffffff;
}


/* ---------- Mobile drawer — same shell as shop filters ---------- */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 10000;
    isolation: isolate;

    visibility: hidden;
    pointer-events: none;

    transition: visibility 0s linear 0.34s;
}

.mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(28, 19, 13, 0.68);
    backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity 0.34s ease;
}

.mobile-nav.is-open .mobile-nav-backdrop {
    opacity: 1;
}

.mobile-nav-panel {
    position: absolute;
    top: 0;
    left: 0;

    width: min(400px, 88vw);
    height: 100%;

    display: flex;
    flex-direction: column;

    background: var(--cream);
    box-shadow: 0 0 50px rgba(28, 19, 13, 0.35);

    transform: translateX(-100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.is-open .mobile-nav-panel {
    transform: translateX(0);
}

.mobile-nav-head {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 20px 22px;

    border-bottom: 1px solid #e3d8c7;
}

.mobile-nav-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--espresso);
}

.mobile-nav-close {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--espresso);

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.25s ease;
}

.mobile-nav-close:hover {
    background: var(--latte);
}

.mobile-nav-body {
    flex: 1;
    overflow-y: auto;

    display: flex;
    flex-direction: column;

    padding: 22px;
}

.mobile-nav-links {
    flex: 1;
}

.mobile-nav .mobile-menu,
.mobile-nav .mobile-menu-sub {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav .mobile-menu-item {
    margin: 0;
}

.mobile-nav .mobile-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    border-bottom: 1px solid #e7dccb;
}

.mobile-nav .mobile-menu-link {
    flex: 1;
    min-width: 0;

    display: block;
    padding: 14px 4px;

    color: var(--espresso);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-decoration: none;
    text-transform: none;
}

.mobile-nav .mobile-menu-link::after {
    display: none;
}

.mobile-nav .mobile-menu-caret {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--mocha);

    cursor: pointer;
}

.mobile-nav .mobile-menu-caret svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.mobile-nav .mobile-menu-item.is-open > .mobile-menu-row .mobile-menu-caret {
    background: var(--latte);
    color: var(--teal);
}

.mobile-nav .mobile-menu-item.is-open > .mobile-menu-row .mobile-menu-caret svg {
    transform: rotate(180deg);
}

.mobile-nav .mobile-menu-sub {
    display: none;
    padding: 6px 0 10px 12px;
    background: rgba(241, 232, 218, 0.45);
}

.mobile-nav .mobile-menu-item.is-open > .mobile-menu-sub {
    display: block;
}

.mobile-nav .mobile-menu-sub .mobile-menu-row {
    min-height: 44px;
    border-bottom-color: rgba(227, 216, 199, 0.7);
}

.mobile-nav .mobile-menu-sub .mobile-menu-link {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
}

.mobile-nav .mobile-menu-sub .mobile-menu-sub {
    padding-left: 14px;
    background: transparent;
}

.mobile-nav .mobile-menu-sub .mobile-menu-sub .mobile-menu-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
}

.mobile-nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e7dccb;
}

.mobile-nav-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 10px 14px;

    border: 1px solid #e3d8c7;
    border-radius: 999px;

    background: var(--parchment);
    color: var(--espresso);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.mobile-nav-actions a:hover {
    border-color: var(--teal);
    background: #ffffff;
}

.mobile-nav-actions .header-cart-count {
    background: var(--crema);
    color: var(--espresso);
}

@media (max-width: 1100px) {

    .site-navigation,
    .store-header-actions {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 3;
        justify-self: end;
    }

    .store-header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        min-height: 72px;
        gap: 0;
        padding-block: 10px;
    }

    .site-header .site-logo {
        grid-column: 2;
        justify-self: center;
    }
}

@media (max-width: 600px) {

    .mobile-nav-panel {
        width: 100%;
    }
}

body.nav-open {
    overflow: hidden;
}


/* ==========================================================
   ABOUT + CONTACT PAGES
   ========================================================== */

.content-hero {
    padding: 72px 0 36px;
    background:
        linear-gradient(
            180deg,
            var(--latte) 0%,
            var(--cream) 100%
        );
}

.content-hero-inner {
    max-width: 720px;
}

.content-hero-lead {
    max-width: 58ch;
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.7;
}

.about-story,
.contact-section {
    padding: 36px 0 80px;
}

.about-story-grid,
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
}

.about-story-copy h2,
.contact-details h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 40px);
}

.about-story-copy p,
.contact-details p {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.75;
}

.about-story-panel {
    padding: 36px 32px;
    border-radius: 18px;
    background: var(--tan);
}

.about-story-panel blockquote {
    margin: 0;
    color: var(--espresso);
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.35;
}

.about-values {
    padding: 0 0 80px;
}

.about-cta {
    padding: 0 0 90px;
}

.about-cta-inner {
    padding: 42px 36px;
    border-radius: 22px;
    background: var(--espresso);
    color: var(--cream);
    text-align: center;
}

.about-cta-inner h2 {
    margin: 0 0 10px;
    color: #fff;
}

.about-cta-inner p {
    margin: 0 0 24px;
    color: rgba(250, 246, 239, 0.75);
}

.about-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.about-cta .section-link {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    color: var(--crema-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-details {
    padding-top: 8px;
}

.contact-detail-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.contact-detail-list li {
    display: grid;
    gap: 4px;
    margin: 0 0 18px;
}

.contact-detail-list span {
    color: var(--crema);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-detail-list a {
    color: var(--espresso);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

.contact-detail-list a:hover {
    color: var(--coffee);
}

.contact-form-card {
    padding: 28px;
    border: 1px solid #e7dccb;
    border-radius: 18px;
    background: #fff;
}

.contact-form {
    display: grid;
    gap: 16px;
}

.contact-form label {
    display: grid;
    gap: 8px;
}

.contact-form label span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--espresso);
}

.contact-form label em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-muted);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;

    border: 1px solid #e3d8c7;
    border-radius: 10px;

    background: var(--cream);
    color: var(--ink);
    font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.contact-form .button-primary {
    justify-self: start;
    border: 0;
    cursor: pointer;
}

.contact-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.contact-notice.is-success {
    background: #e8f6ec;
    color: #1b5b32;
}

.contact-notice.is-error {
    background: #fdecea;
    color: #8a2218;
}

@media (max-width: 800px) {

    .about-story-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .content-hero {
        padding: 48px 0 24px;
    }

    .about-story-panel blockquote {
        font-size: 22px;
    }

    .contact-form-card,
    .about-cta-inner {
        padding: 22px;
    }
}


/* ==========================================================
   PRICE + CART / CHECKOUT POLISH
   ========================================================== */

.woocommerce-Price-amount,
.woocommerce .price {
    font-variant-numeric: tabular-nums;
}

.woocommerce-Price-currencySymbol {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    padding: 48px 0 80px;
}

.woocommerce table.shop_table {
    width: 100%;
    background: #fff;
    border: 1px solid #e7dccb;
}

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce-checkout {
    margin-top: 28px;
}

.woocommerce-cart-form,
.woocommerce-checkout .col2-set {
    overflow-x: auto;
}

@media (max-width: 768px) {

    .single-product .woocommerce-tabs ul.tabs {
        gap: 14px 20px;
    }

    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .page-title,
    .woocommerce-products-header__title {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {

    .container {
        width: min(1200px, 94%);
    }

    .home-slide-content h1,
    .home-slide-content h2,
    .home-slide-title {
        font-size: 32px;
    }

    .whatsapp-float {
        right: 12px;
        bottom: 12px;
    }
}


/* ==========================================================
   ACCOUNT AUTH — NAME + EMAIL, OTP, WELCOME
   ========================================================== */

.woocommerce-account:not(.logged-in) .site-main {
    padding: 36px 0 90px;
    background:
        linear-gradient(
            180deg,
            var(--latte) 0%,
            var(--cream) 42%,
            var(--cream) 100%
        );
}

.woocommerce-account:not(.logged-in) .page-header {
    display: none;
}

.woocommerce-account:not(.logged-in) .page-content {
    margin: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: none;
}

.woocommerce-account:not(.logged-in) .site-main > .container {
    width: min(1080px, 92%);
}

.account-auth {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: stretch;
    padding: 12px 0 20px;
}

.account-auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 36px;
    border-radius: 24px;
    background:
        linear-gradient(
            165deg,
            #3d2a1c 0%,
            var(--espresso) 55%,
            #1c120d 100%
        );
    color: var(--cream);
}

.account-auth-panel .section-eyebrow {
    color: var(--crema-soft);
}

.account-auth-panel h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
}

.account-auth-panel > p {
    margin: 0 0 22px;
    color: rgba(250, 246, 239, 0.78);
    font-size: 16px;
    line-height: 1.7;
}

.account-auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.account-auth-points li {
    position: relative;
    padding-left: 22px;
    color: var(--crema-soft);
    font-size: 14px;
}

.account-auth-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crema);
}

.account-auth-card {
    width: 100%;
    padding: 36px 34px 32px;
    border: 1px solid #e7dccb;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(47, 34, 25, 0.08);
}

.account-auth-title {
    margin: 0 0 8px;
    font-size: clamp(34px, 5vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.account-auth-lead {
    margin: 0 0 26px;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.6;
}

.account-auth-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.account-auth-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-auth-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--latte);
    color: var(--coffee);
}

.account-auth-steps li.is-current,
.account-auth-steps li.is-done {
    color: var(--espresso);
}

.account-auth-steps li.is-current span {
    background: var(--espresso);
    color: #fff;
}

.account-auth-steps li.is-done span {
    background: var(--tea-leaf);
    color: #fff;
}

.account-auth-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.account-auth-notice.is-success {
    background: #e8f6ec;
    color: #1b5b32;
}

.account-auth-notice.is-error {
    background: #fdecea;
    color: #8a2218;
}

.account-auth-form {
    display: grid;
    gap: 16px;
}

.account-auth-form.is-busy {
    opacity: 0.7;
    pointer-events: none;
}

.account-auth-form label {
    display: grid;
    gap: 8px;
}

.account-auth-form label span {
    color: var(--espresso);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.account-auth-form input[type="text"],
.account-auth-form input[type="email"] {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #e3d8c7;
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
    font: inherit;
}

.account-auth-form input:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.account-auth-submit {
    width: 100%;
    border: 0;
    cursor: pointer;
    justify-content: center;
}

.account-auth-hint {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.5;
}

.account-otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.account-otp-digit {
    width: 100%;
    min-height: 58px;
    padding: 0;
    border: 1px solid #e3d8c7;
    border-radius: 12px;
    background: var(--cream);
    color: var(--espresso);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.account-otp-digit:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
    background: #fff;
}

.account-auth-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.account-auth-text-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--coffee);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.account-auth-success {
    text-align: center;
}

.account-auth-check {
    display: inline-flex;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    color: var(--tea-leaf);
}

.account-auth-check svg {
    width: 100%;
    height: 100%;
}

.account-auth-success h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.account-auth-success p {
    margin: 0 0 24px;
    color: var(--ink-muted);
}

.account-auth-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.account-auth-success-actions .section-link {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
}

@media (max-width: 860px) {

    .account-auth {
        grid-template-columns: 1fr;
    }

    .account-auth-panel {
        padding: 28px 24px;
    }
}

@media (max-width: 600px) {

    .account-auth-card {
        padding: 26px 20px 24px;
        border-radius: 18px;
    }

    .account-auth-steps {
        gap: 6px;
    }

    .account-auth-steps li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        letter-spacing: 0.04em;
        font-size: 11px;
    }

    .account-otp-digit {
        min-height: 50px;
        font-size: 20px;
    }
}


/* ==========================================================
   LOGGED-IN ACCOUNT
   ========================================================== */

.woocommerce-account.logged-in .page-header {
    display: none;
}

.woocommerce-account.logged-in .site-main {
    padding: 28px 0 72px;
    overflow-x: clip;
}

.woocommerce-account.logged-in .site-main > .container {
    width: min(1180px, 94%);
}

.woocommerce-account.logged-in .woocommerce,
.woocommerce-account.logged-in .page-content,
.woocommerce-account.logged-in article {
    max-width: none;
    width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account.logged-in .account-nav,
.woocommerce-account.logged-in .account-shell-content {
    float: none !important;
    width: 100% !important;
}

.account-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.account-nav {
    padding: 18px 16px 16px;
    border: 1px solid #e7dccb;
    border-radius: 20px;
    background: #fff;
}

.account-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--cream);
    color: var(--espresso);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.account-nav a:hover {
    background: var(--latte);
}

.account-nav li.is-active a,
.account-nav a[aria-current="page"] {
    background: var(--espresso);
    color: #fff;
}

.account-nav-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.account-nav-icon svg {
    width: 100%;
    height: 100%;
}

.account-nav-label {
    min-width: 0;
    line-height: 1.2;
}

.account-nav .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--coffee);
}

.account-nav .woocommerce-MyAccount-navigation-link--customer-logout.is-active a,
.account-nav .woocommerce-MyAccount-navigation-link--customer-logout a[aria-current="page"] {
    background: #fdecea;
    color: #8a2218;
}

.account-shell-content {
    min-width: 0;
    padding: 22px 18px 24px;
    border: 1px solid #e7dccb;
    border-radius: 20px;
    background: #fff;
}

.account-panel-head,
.account-dashboard-hero {
    margin: 0 0 22px;
}

.account-dashboard-hero {
    padding: 22px 20px;
    border-radius: 18px;
    background:
        linear-gradient(
            160deg,
            #3d2a1c 0%,
            var(--espresso) 60%,
            #1c120d 100%
        );
    color: var(--cream);
}

.account-dashboard-hero .section-eyebrow {
    color: var(--crema-soft);
}

.account-dashboard-hero h1 {
    color: #fff;
}

.account-dashboard-hero p {
    color: rgba(250, 246, 239, 0.78);
}

.account-verified-pill {
    display: inline-flex;
    margin-top: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(224, 196, 138, 0.18);
    color: var(--crema-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-panel-head h1,
.account-dashboard-hero h1,
.account-shell-content > .account-panel > .account-panel-head h1,
.account-shell-content h1 {
    margin: 0 0 8px;
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.15;
}

.account-shell-content h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.account-panel-head p,
.account-dashboard-hero p {
    margin: 0;
    line-height: 1.6;
}

.account-panel-head p {
    color: var(--ink-muted);
}

.account-dashboard-grid,
.account-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.account-dash-card,
.account-address-card {
    display: grid;
    gap: 8px;
    padding: 18px 16px;
    border: 1px solid #efe6d8;
    border-radius: 16px;
    background: var(--cream);
    color: inherit;
    text-decoration: none;
}

.account-dash-card:hover,
.account-address-card:hover {
    border-color: var(--crema);
    background: #fff;
}

.account-dash-card strong,
.account-address-card h2 {
    margin: 0;
    font-size: 17px;
}

.account-dash-card span,
.account-address-card address {
    color: var(--ink-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.55;
}

.account-dash-card em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: var(--coffee);
}

.account-address-card header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.account-address-card header a {
    flex: 0 0 auto;
    color: var(--coffee);
    font-size: 13px;
    font-weight: 700;
}

.account-form,
.account-form .woocommerce-address-fields__field-wrapper {
    display: grid;
    gap: 14px;
}

.account-form-row.is-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.account-form label,
.woocommerce-account .form-row,
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last,
.woocommerce-account .form-row-wide {
    display: grid;
    float: none !important;
    width: 100% !important;
    gap: 8px;
    margin: 0 0 4px !important;
}

.woocommerce-account .clear {
    display: none;
}

.account-form label span,
.woocommerce-account .form-row label {
    font-size: 13px;
    font-weight: 700;
    color: var(--espresso);
}

.account-form input,
.woocommerce-account .form-row input,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #e3d8c7;
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
    font: inherit;
    box-sizing: border-box;
}

.account-form input:focus,
.woocommerce-account .form-row input:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
    outline: 2px solid var(--crema);
    outline-offset: 1px;
    background: #fff;
}

.account-form-actions {
    margin: 8px 0 0;
}

.account-form-actions .button-primary,
.woocommerce-account .account-form .button,
.woocommerce-account .account-form-actions .button-primary {
    width: 100%;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.account-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 22px 18px;
    border: 1px dashed #e3d8c7;
    border-radius: 16px;
    background: var(--cream);
}

.account-empty strong {
    font-size: 18px;
}

.account-empty p {
    margin: 0;
    color: var(--ink-muted);
}

.account-empty .button-primary {
    width: 100%;
    justify-content: center;
}

.account-back-link {
    color: var(--coffee);
    font-size: 13px;
    font-weight: 700;
}

.woocommerce-account table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}

.woocommerce-account .woocommerce-orders-table thead {
    display: none;
}

.woocommerce-account .woocommerce-orders-table tbody,
.woocommerce-account .woocommerce-orders-table tr,
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
    display: block;
    width: 100%;
}

.woocommerce-account .woocommerce-orders-table tr {
    margin: 0 0 12px;
    padding: 14px 14px 6px;
    border: 1px solid #efe6d8;
    border-radius: 14px;
    background: var(--cream);
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    text-align: right;
}

.woocommerce-account .woocommerce-orders-table th::before,
.woocommerce-account .woocommerce-orders-table td::before {
    content: attr(data-title);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.woocommerce-account .woocommerce-orders-table a.button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .account-empty .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--espresso);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info {
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background: var(--latte);
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
    display: none;
}

@media (min-width: 640px) {

    .account-nav-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-dashboard-grid,
    .account-address-grid,
    .account-form-row.is-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-form-actions .button-primary,
    .account-empty .button-primary {
        width: auto;
    }
}

@media (min-width: 980px) {

    .woocommerce-account.logged-in .site-main {
        padding: 40px 0 90px;
    }

    .account-shell {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 24px;
    }

    .account-nav {
        position: sticky;
        top: 96px;
        padding: 22px 16px;
    }

    .account-nav-list {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 6px;
    }

    .account-nav li,
    .account-nav a {
        width: 100%;
    }

    .account-nav a {
        background: var(--cream);
        min-height: 46px;
        padding: 11px 14px;
        font-size: 14px;
    }

    .account-nav a:hover {
        background: var(--latte);
    }

    .account-nav li.is-active a,
    .account-nav a[aria-current="page"] {
        background: var(--espresso);
        color: #fff;
    }

    .account-shell-content {
        padding: 28px 28px 32px;
    }

    .account-dashboard-hero {
        padding: 28px 26px;
    }

    .woocommerce-account .woocommerce-orders-table thead {
        display: table-header-group;
    }

    .woocommerce-account .woocommerce-orders-table tbody {
        display: table-row-group;
    }

    .woocommerce-account .woocommerce-orders-table tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .woocommerce-account .woocommerce-orders-table th,
    .woocommerce-account .woocommerce-orders-table td {
        display: table-cell;
        width: auto;
        padding: 14px 12px;
        text-align: left;
        border-bottom: 1px solid #efe6d8;
    }

    .woocommerce-account .woocommerce-orders-table th::before,
    .woocommerce-account .woocommerce-orders-table td::before {
        content: none;
    }

    .woocommerce-account table.shop_table {
        border: 1px solid #efe6d8;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
    }
}

@media (max-width: 420px) {

    .woocommerce-account.logged-in .site-main > .container {
        width: min(1200px, 96%);
    }

    .account-nav,
    .account-shell-content {
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 16px;
    }

    .account-nav a {
        font-size: 12px;
        padding: 10px;
    }
}


/* ==========================================================
   INNER PAGES — shared type and chrome
   Homepage keeps its own slider treatment.
   ========================================================== */

.site-header,
.site-navigation,
.store-header-actions,
.mobile-navigation,
.shop-drawer,
.button-primary,
.section-link,
.button-text {
    font-family: var(--font-body);
}

body:not(.home) {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink);
}

body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) .page-title,
body:not(.home) .product_title,
body:not(.home) .woocommerce-loop-product__title,
body:not(.home) .woocommerce-products-header__title,
body:not(.home) .shop-page-header .page-title,
body:not(.home) .entry-title {
    font-family: var(--font-display);
    font-weight: 700;
}

body:not(.home) p,
body:not(.home) li,
body:not(.home) label,
body:not(.home) td,
body:not(.home) th,
body:not(.home) .woocommerce,
body:not(.home) .woocommerce button,
body:not(.home) .woocommerce input,
body:not(.home) .woocommerce select,
body:not(.home) .woocommerce textarea,
body:not(.home) .woocommerce a.button,
body:not(.home) .select2-container,
body:not(.home) .page-content,
body:not(.home) .content-hero-lead {
    font-family: var(--font-body);
}

body:not(.home) .page-header .page-title,
body:not(.home) .woocommerce-cart h1,
body:not(.home) .woocommerce-checkout h1,
body:not(.home) .woocommerce-checkout .woocommerce-billing-fields h3,
body:not(.home) .woocommerce-checkout .woocommerce-additional-fields h3,
body:not(.home) .woocommerce-checkout #order_review_heading,
body:not(.home) .related.products > h2,
body:not(.home) .upsells.products > h2 {
    font-family: var(--font-display);
    color: var(--espresso);
}

body:not(.home) .woocommerce-breadcrumb,
body:not(.home) .woocommerce-breadcrumb a {
    margin: 0 0 22px;
    color: var(--crema);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:not(.home) .woocommerce a.button,
body:not(.home) .woocommerce button.button,
body:not(.home) .woocommerce input.button,
body:not(.home) .woocommerce #place_order,
body:not(.home) .woocommerce .checkout-button,
body:not(.home) .woocommerce .single_add_to_cart_button,
body:not(.home) .woocommerce-Button,
body:not(.home) .woocommerce-button,
body:not(.home) .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body:not(.home) .woocommerce-checkout #payment #place_order {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--espresso) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none !important;
}

body:not(.home) .woocommerce a.button:hover,
body:not(.home) .woocommerce button.button:hover,
body:not(.home) .woocommerce input.button:hover,
body:not(.home) .woocommerce #place_order:hover,
body:not(.home) .woocommerce .checkout-button:hover,
body:not(.home) .woocommerce .single_add_to_cart_button:hover,
body:not(.home) .woocommerce-checkout #payment #place_order:hover {
    background: var(--coffee) !important;
    color: #fff !important;
}

body:not(.home) .woocommerce a.button.alt,
body:not(.home) .woocommerce button.button.alt,
body:not(.home) .woocommerce input.button.alt {
    background: var(--espresso) !important;
    color: #fff !important;
}

body:not(.home) .woocommerce input.input-text,
body:not(.home) .woocommerce textarea,
body:not(.home) .woocommerce select,
body:not(.home) .woocommerce .input-text,
body:not(.home) .woocommerce .qty,
body:not(.home) .woocommerce-checkout .form-row input.input-text,
body:not(.home) .woocommerce-checkout .form-row textarea,
body:not(.home) .woocommerce-checkout .form-row select,
body:not(.home) .select2-container--default .select2-selection--single {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #e3d8c7 !important;
    border-radius: 12px !important;
    background: var(--cream) !important;
    color: var(--ink);
    font-family: var(--font-body);
    box-shadow: none !important;
}

body:not(.home) table.shop_table {
    background: #fff;
    border: 1px solid #e7dccb;
    border-radius: 16px;
    overflow: hidden;
}

body:not(.home) table.shop_table th {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

body:not(.home) .woocommerce-Price-amount,
body:not(.home) .woocommerce .price {
    font-family: var(--font-display);
    color: var(--espresso);
}

body:not(.home) .woocommerce-error,
body:not(.home) .woocommerce-info,
body:not(.home) .woocommerce-message {
    border: 0;
    border-radius: 14px;
    background: var(--latte);
    color: var(--espresso);
    font-family: var(--font-body);
}

body:not(.home) .woocommerce nav.woocommerce-pagination ul {
    border: 0;
}

body:not(.home) .woocommerce nav.woocommerce-pagination ul li {
    border: 0;
    margin: 0 4px;
}

body:not(.home) .woocommerce nav.woocommerce-pagination ul li a,
body:not(.home) .woocommerce nav.woocommerce-pagination ul li span {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid #e3d8c7;
    border-radius: 999px;
    background: #fff;
    color: var(--espresso);
    font-family: var(--font-body);
    font-weight: 700;
}

body:not(.home) .woocommerce nav.woocommerce-pagination ul li span.current,
body:not(.home) .woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--espresso);
    border-color: var(--espresso);
    color: #fff;
}

body:not(.home) .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

body:not(.home) .woocommerce-tabs ul.tabs li.active a {
    color: var(--espresso);
}

body:not(.home) .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    color: var(--espresso);
}

/* =========================================================
   INFINITE SCROLL — Shop / Product Category
========================================================= */

.woocommerce nav.woocommerce-pagination {
    display: none;
}

.shop-infinite-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin-top: 56px;
    padding: 24px 16px;
}

.shop-infinite-scroll__sentinel {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 1px;
    width: 100%;
    pointer-events: none;
}

.shop-infinite-scroll__loader {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--latte);
    color: var(--espresso);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shop-infinite-scroll__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(110, 75, 48, 0.2);
    border-top-color: var(--espresso);
    border-radius: 50%;
    animation: shop-infinite-spin 0.8s linear infinite;
}

@keyframes shop-infinite-spin {
    to { transform: rotate(360deg); }
}

.shop-infinite-scroll__end {
    margin: 0;
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

.shop-infinite-scroll__retry {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    min-width: 180px;
    border: 1px solid var(--espresso);
    border-radius: 999px;
    background: transparent;
    color: var(--espresso);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.shop-infinite-scroll__retry:hover,
.shop-infinite-scroll__retry:focus-visible {
    background: var(--espresso);
    color: #fff;
    outline: none;
}

.shop-infinite-scroll__retry:active {
    transform: translateY(1px);
}

.shop-infinite-scroll noscript nav.woocommerce-pagination {
    display: block;
}

@media (max-width: 600px) {
    .shop-infinite-scroll {
        margin-top: 40px;
        padding: 16px 8px;
        min-height: 80px;
    }
    .shop-infinite-scroll__loader {
        padding: 12px 22px;
        font-size: 14px;
    }
    .shop-infinite-scroll__spinner {
        width: 18px;
        height: 18px;
    }
}