:root{
    --ivory:#fbf9f6;
    --maroon:#4a0f13;
    --noir:#1a1210;
    --gold:#b08d4f;
    --blush:#e8d9d3;
    --line:rgba(74,15,19,.16);
    --ease:cubic-bezier(.22,1,.36,1)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--ivory);
    color:var(--noir);
    font:300 16px/1.7 Archivo,sans-serif
}

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

button,
input,
textarea,
select{
    font:inherit
}

button{
    cursor:pointer
}


/* =========================================================
   ANNOUNCEMENT BAR
   Header itself is controlled ONLY by header.css
   ========================================================= */

.announcement{
    height:30px;
    background:var(--noir);
    color:var(--gold);
    display:grid;
    place-items:center;
    font:10px "Space Mono";
    letter-spacing:.14em
}


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

.hero{
    min-height:100vh;
    padding:190px 5vw 70px;
    display:grid;
    align-items:end;
    background:#eee3dd url('/assets/hero/husnara-ivory.JPG') center/cover no-repeat;
    position:relative
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(26,18,16,.55),
        transparent 65%
    )
}

.hero-copy{
    position:relative;
    color:white;
    max-width:760px
}

.eyebrow{
    font:10px "Space Mono";
    letter-spacing:.15em;
    text-transform:uppercase
}

.hero h1,
.page-hero h1{
    font:300 clamp(70px,10vw,150px)/.82 Fraunces;
    margin:20px 0;
    letter-spacing:-.06em
}

.hero p{
    max-width:520px;
    font-size:18px
}

.primary,
.secondary{
    display:inline-block;
    border:1px solid var(--maroon);
    padding:15px 24px;
    background:var(--maroon);
    color:white;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px
}

.secondary{
    background:transparent;
    color:var(--maroon)
}


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

.section{
    padding:120px 5vw
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:45px
}

.section h2,
.content h2,
.cart-drawer h2,
.checkout h2{
    font:300 clamp(42px,6vw,82px)/1 Fraunces;
    color:var(--maroon);
    margin:0
}


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

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px 14px
}

.product-image{
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#e8ddd7
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s var(--ease)
}

.product-image .hover{
    position:absolute;
    inset:0;
    opacity:0
}

.product-card:hover .hover{
    opacity:1
}

.product-card{
    position:relative
}

.product-card h3{
    font:400 21px Fraunces;
    margin:8px 0 0
}

.product-card p{
    margin:2px 0
}

.product-wish{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border:0;
    background:rgba(251,249,246,.85);
    border-radius:50%;
    display:grid;
    place-items:center;
    padding:0;
    transition:.2s;
    z-index:2
}

.product-wish svg{
    width:16px;
    height:16px;
    stroke:#4a0f13;
    fill:none;
    transition:.2s
}

.product-wish.wished svg{
    fill:#e00
}

.product-wish:hover svg{
    fill:#e00
}


/* =========================================================
   WISHLIST
   ========================================================= */

.wish-header-count{
    position:absolute;
    top:-7px;
    right:-9px;
    min-width:17px;
    height:17px;
    border-radius:50%;
    background:#a98245;
    color:#fff;
    font:700 8px/17px Arial,sans-serif;
    text-align:center;
    padding:0 3px;
    display:none
}

.wish-drawer{
    position:fixed;
    z-index:200;
    right:0;
    top:0;
    width:min(440px,100%);
    height:100%;
    padding:35px;
    background:var(--ivory);
    transform:translateX(100%);
    transition:.4s;
    overflow-y:auto
}

.wish-drawer.open{
    transform:none
}

.wish-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:#0007;
    z-index:199
}

.wish-backdrop.open{
    display:block
}

.wish-drawer-close{
    float:right;
    border:0;
    background:none;
    font-size:30px;
    cursor:pointer
}

.wish-drawer h2{
    font:300 32px/1 Fraunces;
    color:var(--maroon);
    margin:0 0 25px;
    clear:both
}

.wish-row{
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:12px;
    margin:20px 0;
    align-items:center
}

.wish-row img{
    width:70px;
    height:90px;
    object-fit:cover
}

.wish-row b{
    display:block;
    margin-bottom:4px
}

.wish-row p{
    margin:0;
    font-size:14px
}

.wish-remove{
    border:0;
    background:none;
    font-size:22px;
    cursor:pointer;
    color:#999;
    line-height:1
}


/* =========================================================
   ATELIER
   ========================================================= */

.atelier{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--maroon);
    color:white
}

.atelier img{
    width:100%;
    height:720px;
    object-fit:cover
}

.atelier div{
    padding:9vw;
    align-self:center
}

.atelier h2{
    color:white
}


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

.page-hero{
    padding:220px 5vw 90px;
    background:var(--blush);
    color:var(--maroon)
}

.page-hero p{
    max-width:650px
}


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

.content{
    max-width:1100px;
    margin:auto;
    padding:100px 5vw
}

.content p{
    font-size:18px
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}

.filters input,
.filters select,
.field,
input,
textarea,
select{
    border:1px solid var(--line);
    background:white;
    padding:12px;
    width:100%
}

.filters input{
    width:240px
}

.filters select{
    width:auto
}


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

.product-detail{
    padding:190px 5vw 100px;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:6vw
}

.gallery-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.gallery-grid img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover
}

.product-info{
    position:sticky;
    top:40px;
    align-self:start
}

.product-info h1{
    font:300 64px/.95 Fraunces;
    color:var(--maroon)
}

.price{
    font-size:22px
}

.sizes{
    display:flex;
    gap:8px;
    margin:20px 0
}

.sizes label input{
    position:absolute;
    opacity:0
}

.sizes span{
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border:1px solid var(--line)
}

.sizes input:checked+span{
    background:var(--maroon);
    color:white
}

.accordion{
    border-top:1px solid var(--line);
    padding:18px 0
}


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

.footer{
    background:var(--noir);
    color:#d9cbc3;
    padding:80px 5vw 25px
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:60px
}

.footer a{
    display:block
}

.footer h3{
    color:var(--gold);
    font:10px "Space Mono";
    text-transform:uppercase
}

.footer-logo{
    width:110px;
    filter:brightness(0) invert(1)
}

.newsletter{
    margin:60px 0;
    display:flex;
    gap:10px;
    align-items:center
}

.newsletter input{
    max-width:340px
}

.newsletter button{
    padding:12px
}

.footer-bottom{
    border-top:1px solid #ffffff20;
    padding-top:20px;
    display:flex;
    justify-content:space-between
}

.footer-bottom a{
    display:inline
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:20;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#25d366;
    color:white
}


/* =========================================================
   FLASH
   ========================================================= */

.flash{
    position:fixed;
    z-index:60;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    background:var(--maroon);
    color:white;
    padding:14px 22px
}


/* =========================================================
   CART DRAWER
   ========================================================= */

.drawer-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:#0007;
    z-index:49
}

.cart-drawer{
    position:fixed;
    z-index:50;
    right:0;
    top:0;
    width:min(440px,100%);
    height:100%;
    padding:35px;
    background:var(--ivory);
    transform:translateX(100%);
    transition:.4s
}

.cart-drawer.open{
    transform:none
}

.drawer-backdrop.open{
    display:block
}

.drawer-close{
    float:right;
    border:0;
    background:none;
    font-size:30px
}

.cart-row{
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:12px;
    margin:20px 0
}

.cart-row img{
    width:70px;
    height:90px;
    object-fit:cover
}

.cart-total{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding:20px 0
}


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

.checkout{
    border:0;
    padding:35px;
    width:min(570px,94vw)
}

.checkout::backdrop{
    background:#0008
}

.checkout label{
    display:block;
    margin:12px 0
}


/* =========================================================
   CONTACT
   ========================================================= */

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


/* =========================================================
   MOSAIC
   ========================================================= */

.mosaic{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}

.mosaic img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty{
    padding:80px;
    text-align:center;
    border:1px solid var(--line)
}


/* =========================================================
   RESPONSIVE
   IMPORTANT:
   Header/mobile header is NOT controlled here.
   header.css is the only header stylesheet.
   ========================================================= */

@media(max-width:800px){

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

    .product-detail,
    .atelier{
        grid-template-columns:1fr
    }

    .product-info{
        position:static
    }

    .gallery-grid{
        gap:5px
    }

    .footer-grid{
        grid-template-columns:1fr 1fr
    }

    .newsletter{
        display:block
    }

    .mosaic{
        grid-template-columns:1fr 1fr
    }
}


@media(max-width:500px){

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

    .section{
        padding:80px 20px
    }

    .product-detail{
        padding:150px 20px 70px
    }

    .page-hero{
        padding:170px 20px 70px
    }

    .product-info h1{
        font-size:48px
    }

    .footer-grid{
        grid-template-columns:1fr
    }

    .footer-bottom{
        display:block
    }
}

/* =========================================================
   HUSNARA CHECKOUT — page-scoped markup; Stripe itself loads only here
   ========================================================= */
.husnara-checkout-page{max-width:1320px;margin:0 auto;padding:150px 5vw 110px}.husnara-checkout-page__heading{margin-bottom:54px}.husnara-checkout-page__heading h1{margin:14px 0 9px;color:var(--maroon);font:300 clamp(55px,7vw,94px)/.9 Fraunces}.husnara-checkout-page__heading p{margin:0;color:#705d56}.husnara-checkout-page__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.72fr);gap:clamp(45px,8vw,125px);align-items:start}.husnara-checkout-form{min-width:0}.husnara-checkout-section{padding:0 0 39px;margin:0 0 39px;border-bottom:1px solid var(--line)}.husnara-checkout-section__heading{display:flex;align-items:baseline;gap:16px;margin-bottom:27px}.husnara-checkout-section__heading>span{color:#a98245;font:11px Space Mono,monospace;letter-spacing:.08em}.husnara-checkout-section h2,.husnara-order-summary h2{margin:0;color:var(--maroon);font:300 clamp(29px,3.2vw,43px)/1 Fraunces}.husnara-checkout-field{margin:0 0 19px}.husnara-checkout-field label{display:block;margin-bottom:8px;color:#5f4b45;font:400 10px Space Mono,monospace;letter-spacing:.1em;text-transform:uppercase}.husnara-checkout-field input,.husnara-checkout-field select{height:54px;width:100%;border:1px solid #d7c9c1;border-radius:0;background:#fffdf9;color:var(--noir);padding:0 15px;font:400 15px Archivo,sans-serif;transition:border-color .2s,box-shadow .2s;appearance:none}.husnara-checkout-field select{background-image:linear-gradient(45deg,transparent 50%,var(--maroon) 50%),linear-gradient(135deg,var(--maroon) 50%,transparent 50%);background-position:calc(100% - 18px) 23px,calc(100% - 13px) 23px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}.husnara-checkout-field input:focus,.husnara-checkout-field select:focus{outline:0;border-color:var(--maroon);box-shadow:0 0 0 1px var(--maroon)}.husnara-checkout-field [aria-invalid=true]{border-color:#9b2730}.husnara-checkout-form__split{display:grid;grid-template-columns:1.4fr .8fr;gap:14px}.husnara-checkout-error{min-height:18px;margin:5px 0 0;color:#9b2730;font-size:12px;line-height:1.45}.husnara-checkout-payment{min-height:84px;padding:17px;border:1px solid #d7c9c1;background:#fffdf9}.husnara-checkout-payment__hint{margin:0;color:#705d56;font-size:13px}.husnara-checkout-error--payment{margin-top:10px}.husnara-checkout-pay{display:grid;place-items:center;width:100%;min-height:58px;border:1px solid var(--maroon);border-radius:0;background:var(--maroon);color:#fff;font:400 11px Space Mono,monospace;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,opacity .2s}.husnara-checkout-pay:hover:not(:disabled),.husnara-checkout-pay:focus-visible:not(:disabled){background:#fffdf9;color:var(--maroon);outline:0}.husnara-checkout-pay:disabled{cursor:wait;opacity:.68}.husnara-checkout-security{margin:14px 0 0;color:#705d56;font-size:12px;text-align:center}.husnara-order-summary{position:sticky;top:42px;border-top:2px solid var(--maroon);padding-top:22px}.husnara-order-summary__heading{margin-bottom:28px}.husnara-order-summary__heading .eyebrow{color:#a98245}.husnara-order-summary__heading h2{margin-top:10px}.husnara-order-summary__items{border-top:1px solid var(--line)}.husnara-order-summary__item{display:grid;grid-template-columns:85px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}.husnara-order-summary__item img{display:block;width:85px;height:112px;object-fit:cover;background:#e8d9d3}.husnara-order-summary__item h3{margin:2px 0 5px;color:var(--maroon);font:400 19px/1.12 Fraunces}.husnara-order-summary__item p{margin:0 0 12px;color:#705d56;font-size:12px}.husnara-order-summary__item strong{font:400 12px Space Mono,monospace}.husnara-order-summary__totals{margin:23px 0 0}.husnara-order-summary__totals>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;color:#5f4b45;font-size:14px}.husnara-order-summary__totals dt,.husnara-order-summary__totals dd{margin:0}.husnara-order-summary__total{margin-top:12px;padding-top:18px!important;border-top:1px solid var(--maroon);color:var(--maroon)!important;font:400 12px Space Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.husnara-order-summary__total dd{font-size:16px}
@media(max-width:800px){.husnara-checkout-page{padding:122px 22px 75px}.husnara-checkout-page__heading{margin-bottom:37px}.husnara-checkout-page__grid{grid-template-columns:1fr;gap:53px}.husnara-order-summary{position:static;order:2}.husnara-checkout-section{padding-bottom:32px;margin-bottom:32px}.husnara-checkout-pay{min-height:56px}.husnara-checkout-payment{padding:14px}.whatsapp{bottom:max(18px,env(safe-area-inset-bottom))}}
@media(max-width:430px){.husnara-checkout-page{padding-left:17px;padding-right:17px}.husnara-checkout-form__split{grid-template-columns:1fr;gap:0}.husnara-checkout-page__heading h1{font-size:54px}.husnara-order-summary__item{grid-template-columns:72px 1fr}.husnara-order-summary__item img{width:72px;height:96px}}
@media(max-width:430px){.husnara-checkout-form__split.husnara-checkout-phone-row{grid-template-columns:minmax(0,1fr) 118px;gap:8px}}