/* ── RASAMI Beauty – Global Stylesheet – Mobile First ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gd:#1a3a2a;--gm:#2d5a3d;--gs:#4a7c5f;--gmt:#c8ddd1;
  --iv:#f8f4ec;--ivw:#f0ead8;--ivd:#e0d8c4;
  --gold:#b8965a;--goldl:#d4b07a;
  --td:#1a1a18;--tm:#3a3a36;--tmu:#7a7a72;
  --white:#ffffff;--danger:#c0392b;--success:#1a7a4a;
  --wa:#25D366;--wa-dark:#128C7E;
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Jost',sans-serif;background:var(--iv);color:var(--td);min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:'Jost',sans-serif;cursor:pointer}
img{max-width:100%;display:block}

/* ── NAV ── */
nav{background:var(--gd);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:200}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo-img{height:42px;width:42px;object-fit:cover;display:block;border-radius:50%;border:2px solid rgba(184,150,90,.4)}
.nav-logo-text{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:300;color:var(--iv);letter-spacing:2px;text-transform:uppercase}
.nav-logo-text em{color:var(--goldl);font-style:italic}
.nav-links{display:none;gap:1.25rem;align-items:center}
.nav-links.mob-open{display:flex;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:var(--gd);padding:1.5rem;gap:1rem;z-index:250;border-top:1px solid rgba(255,255,255,.1)}
.nl{color:rgba(248,244,236,.8);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:300;cursor:pointer;transition:color .2s;text-decoration:none;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.08);width:100%;display:block}
.nl:last-child{border-bottom:none}
.nl:hover,.nl.active{color:var(--goldl)}
.nav-right{display:flex;gap:.5rem;align-items:center}
.insta-nav-btn{color:rgba(248,244,236,.8);transition:color .2s;display:flex;align-items:center;padding:6px}
.insta-nav-btn:hover{color:var(--goldl)}
.cart-btn{background:var(--gold);color:var(--gd);padding:7px 14px;border:none;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;transition:background .2s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cart-btn:hover{background:var(--goldl)}
.cart-count{background:var(--gd);color:var(--goldl);width:18px;height:18px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:600}
.mob-btn{background:none;border:none;color:var(--iv);font-size:22px;padding:4px;display:flex;align-items:center}

/* ── BUTTONS ── */
.btn-gold{background:var(--gold);color:var(--gd);padding:12px 28px;border:none;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;transition:background .2s;cursor:pointer;display:inline-block;text-align:center;width:100%}
.btn-gold:hover{background:var(--goldl)}
.btn-ghost{background:transparent;color:var(--iv);padding:12px 28px;border:1px solid rgba(248,244,236,.4);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:300;transition:border-color .2s;cursor:pointer;display:inline-block;text-align:center;width:100%}
.btn-ghost:hover{border-color:var(--iv)}
.btn-green{background:var(--gd);color:var(--iv);padding:11px 24px;border:none;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;transition:background .2s;cursor:pointer;display:inline-block;text-align:center}
.btn-green:hover{background:var(--gs)}

/* ── PAGE BANNER ── */
.page-banner{background:linear-gradient(135deg,var(--gd) 0%,var(--gm) 60%,var(--gs) 100%);padding:2.5rem 1.25rem;text-align:center;position:relative;overflow:hidden}
.page-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(184,150,90,.12) 0%,transparent 50%)}
.page-banner-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--goldl);margin-bottom:.6rem;position:relative}
.page-banner h1{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,6vw,3rem);font-weight:300;color:var(--iv);position:relative;margin-bottom:.5rem;line-height:1.15}
.page-banner p{color:var(--gmt);font-size:13px;font-weight:300;max-width:480px;margin:0 auto;line-height:1.9;position:relative}

/* ── SEC HEAD ── */
.sec-head{text-align:center;margin-bottom:2rem}
.sec-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:300;color:var(--gd);margin-bottom:.4rem}
.sec-head p{font-size:11px;color:var(--tmu);letter-spacing:1.5px;text-transform:uppercase;font-weight:300}

/* ── FEATURES ── */
.features{padding:2.5rem 1.25rem;background:var(--gd)}
.feat-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;text-align:center}
.fi{font-size:20px;margin-bottom:.5rem}
.feat-title{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:400;color:var(--goldl);margin-bottom:2px}
.feat-desc{font-size:10px;color:var(--gmt);font-weight:300;line-height:1.6}

/* ── FOOTER ── */
.site-footer{background:var(--td);color:var(--tmu);padding:2.5rem 1.25rem 1.5rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto 2rem}
.footer-brand{grid-column:1/-1}
.logo-f{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--iv);letter-spacing:3px;text-transform:uppercase}
.logo-f em{color:var(--goldl);font-style:italic}
.footer-brand p{font-size:12px;line-height:1.9;margin-top:.75rem;font-weight:300;color:#9aaa9a}
.footer-socials{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.soc-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:11px;letter-spacing:1px;font-family:'Jost',sans-serif;transition:all .2s;cursor:pointer;border:none;text-decoration:none}
.ig-btn{background:rgba(225,48,108,.15);border:1px solid rgba(225,48,108,.3);color:#e1306c}
.ig-btn:hover{background:rgba(225,48,108,.25)}
.wa-btn{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.25);color:var(--wa)}
.wa-btn:hover{background:rgba(37,211,102,.22)}
.footer-col h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--goldl);margin-bottom:.75rem;font-weight:400}
.footer-col a,.footer-col span,.footer-col button{display:block;font-size:12px;color:#9aaa9a;margin-bottom:.4rem;transition:color .2s;padding:0;background:none;border:none;text-align:left;font-family:'Jost',sans-serif}
.footer-col a:hover,.footer-col button:hover{color:var(--iv)}
.wa-footer-btn{display:flex;align-items:center;gap:8px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.25)!important;padding:8px 12px;margin-top:.5rem;color:var(--wa)!important;font-size:11px;letter-spacing:1px;transition:background .2s;cursor:pointer;font-family:'Jost',sans-serif;width:auto!important}
.wa-footer-btn:hover{background:rgba(37,211,102,.22)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem;text-align:center;font-size:10px;letter-spacing:1px;color:#666;max-width:1100px;margin:0 auto}
.footer-bottom span{color:var(--gold)}

/* ── PRODUCT DETAIL MODAL ── */
.product-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;align-items:flex-end;justify-content:center;padding:0}
.product-modal-bg.open{display:flex}
.product-modal{background:var(--iv);width:100%;max-height:92vh;overflow-y:auto;position:relative;border-radius:16px 16px 0 0}
.pm-x{position:sticky;top:0;left:100%;float:right;background:var(--gd);border:none;color:var(--iv);width:36px;height:36px;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:10;margin:8px 8px 0 0;border-radius:50%;flex-shrink:0}
.pm-inner{display:flex;flex-direction:column}
.pm-img-wrap{width:100%;height:280px;background:var(--ivw);flex-shrink:0;overflow:hidden}
.pm-info{padding:1.25rem}
.pm-cat{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--tmu);margin-bottom:4px}
.pm-badge{display:inline-block;background:var(--gd);color:var(--iv);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;margin-bottom:.5rem}
.pm-badge.new{background:var(--gold);color:var(--gd)}
.pm-name{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;color:var(--gd);line-height:1.2;margin-bottom:.4rem}
.pm-price{font-size:1.2rem;font-weight:500;color:var(--gold);margin-bottom:.75rem}
.pm-key-ing{font-size:12px;color:var(--gm);background:var(--ivw);padding:.6rem .9rem;border-left:3px solid var(--gold);margin-bottom:.75rem;line-height:1.6}
.pm-divider{height:1px;background:var(--ivd);margin:.75rem 0}
.pm-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gd);font-weight:500;margin:.75rem 0 .35rem}
.pm-text{font-size:13px;color:var(--tm);line-height:1.85;font-weight:300}
.pm-small{font-size:11px;color:var(--tmu)}
.pm-caution{color:var(--danger);font-size:11px}
.pm-list{padding-left:1.25rem;margin:.25rem 0}
.pm-list li{font-size:13px;color:var(--tm);line-height:1.85;margin-bottom:.2rem;font-weight:300}
.pm-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ivd)}
.pm-add-btn{width:100%;background:var(--gd);color:var(--iv);border:none;padding:14px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;transition:background .2s}
.pm-add-btn:hover{background:var(--gs)}
.pm-close-btn{width:100%;background:transparent;color:var(--tmu);border:1px solid var(--ivd);padding:12px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:300}

/* ── CART DRAWER ── */
.cart-drawer{position:fixed;right:0;top:60px;bottom:0;width:100%;max-width:380px;background:var(--iv);border-left:1px solid var(--ivd);z-index:300;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease}
.cart-drawer.open{transform:translateX(0)}
.drawer-head{padding:1rem 1.25rem;border-bottom:1px solid var(--ivd);display:flex;justify-content:space-between;align-items:center;background:var(--gd);flex-shrink:0}
.drawer-head h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--iv);letter-spacing:2px}
.close-x{background:none;border:none;color:rgba(248,244,236,.7);font-size:18px;line-height:1;cursor:pointer;padding:4px}
.close-x:hover{color:var(--iv)}
.cart-items{flex:1;overflow-y:auto;padding:.75rem 1rem;-webkit-overflow-scrolling:touch}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--tmu);font-size:12px;font-weight:300;line-height:2}
.ci{display:flex;gap:10px;padding:.75rem 0;border-bottom:1px solid var(--ivd);align-items:flex-start}
.ci-img{width:48px;height:48px;flex-shrink:0;background:var(--ivw);overflow:hidden}
.ci-info{flex:1;min-width:0}
.ci-name{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:400;color:var(--td);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-price{font-size:12px;color:var(--gold);font-weight:500}
.ci-qty{display:flex;align-items:center;gap:6px;margin-top:5px}
.qb{background:var(--ivw);border:1px solid var(--ivd);width:24px;height:24px;font-size:14px;color:var(--td);display:flex;align-items:center;justify-content:center;cursor:pointer}
.qv{font-size:12px;min-width:18px;text-align:center}
.ci-rm{background:none;border:none;color:var(--tmu);font-size:14px;padding:4px;cursor:pointer;flex-shrink:0}
.cart-foot{padding:1rem;border-top:1px solid var(--ivd);background:var(--white);flex-shrink:0}
.cart-total-row{display:flex;justify-content:space-between;margin-bottom:.75rem;align-items:baseline}
.cart-total-row span:first-child{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--tmu)}
.cart-total-row span:last-child{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--gd)}
.checkout-btn{width:100%;background:var(--gd);color:var(--iv);border:none;padding:13px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;transition:background .2s;margin-bottom:8px;cursor:pointer}
.checkout-btn:hover{background:var(--gs)}
.secure-note{font-size:10px;color:var(--tmu);text-align:center;letter-spacing:.5px}

/* ── CHECKOUT MODAL ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(26,58,42,.55);z-index:400;align-items:flex-end;justify-content:center;padding:0}
.modal-bg.open{display:flex}
.modal{background:var(--iv);width:100%;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;-webkit-overflow-scrolling:touch}
.modal-head{background:var(--gd);padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;border-radius:16px 16px 0 0}
.modal-head h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--iv);letter-spacing:2px}
.modal-body{padding:1.25rem}
.form-lbl{display:block;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--tmu);margin-bottom:5px;font-weight:400}
.form-inp{width:100%;padding:12px;border:1px solid var(--ivd);background:var(--white);font-family:'Jost',sans-serif;font-size:14px;color:var(--td);outline:none;transition:border-color .2s;margin-bottom:.9rem;-webkit-appearance:none;border-radius:0}
.form-inp:focus{border-color:var(--gs)}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.order-sum{background:var(--ivw);padding:1rem;margin-bottom:1.25rem;border:1px solid var(--ivd)}
.os-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--tmu);margin-bottom:.6rem}
.os-line{display:flex;justify-content:space-between;font-size:12px;color:var(--tm);margin-bottom:3px}
.os-total{display:flex;justify-content:space-between;font-weight:500;margin-top:8px;padding-top:8px;border-top:1px solid var(--ivd);color:var(--gd);font-size:13px}
.pay-btn{width:100%;background:var(--gold);color:var(--gd);border:none;padding:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;transition:background .2s;margin-bottom:8px;cursor:pointer}
.pay-btn:hover{background:var(--goldl)}
.pay-note{font-size:10px;color:var(--tmu);text-align:center}
.success-view{display:none;padding:2.5rem 1.5rem;text-align:center}
.success-view.show{display:block}
.suc-icon{font-size:48px;margin-bottom:1rem}
.success-view h2{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--gd);margin-bottom:.75rem}
.success-view p{font-size:12px;color:var(--tmu);line-height:1.9;font-weight:300;margin-bottom:.5rem}
.email-box{background:var(--ivw);border:1px solid var(--ivd);padding:1rem;margin:.75rem 0;text-align:left}
.eb-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--goldl);margin-bottom:.4rem}
.email-box p{font-size:11px;color:var(--tm);line-height:1.7}

/* ── WHATSAPP WIDGET ── */
.wa-widget{position:fixed;bottom:1.5rem;right:1.25rem;z-index:500;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.wa-popup{background:var(--white);border:1px solid var(--ivd);border-radius:12px 12px 0 12px;padding:1.1rem;max-width:min(280px,calc(100vw - 2.5rem));box-shadow:0 8px 32px rgba(0,0,0,.15);display:none;animation:fadeUp .25s ease;position:relative}
.wa-popup.open{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wa-popup-head{display:flex;align-items:center;gap:10px;margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--ivd)}
.wa-avatar{width:40px;height:40px;background:var(--wa);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.wa-agent{font-size:13px;font-weight:500;color:var(--td)}
.wa-status{font-size:10px;color:var(--success)}
.wa-msg{background:var(--ivw);border-radius:0 8px 8px 8px;padding:.65rem .9rem;font-size:12px;color:var(--tm);line-height:1.7;margin-bottom:.75rem}
.wa-msg strong{color:var(--gd)}
.wa-start{width:100%;background:var(--wa);color:var(--white);border:none;padding:10px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;border-radius:6px;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.wa-start:hover{background:var(--wa-dark)}
.wa-fab{width:52px;height:52px;background:var(--wa);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.5);transition:transform .2s;cursor:pointer;position:relative}
.wa-fab:hover{transform:scale(1.08)}
.wa-notif{position:absolute;top:-3px;right:-3px;width:18px;height:18px;background:var(--danger);border-radius:50%;color:var(--white);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)}
.wa-close-popup{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--tmu);font-size:15px;cursor:pointer;padding:2px}

/* ── TOAST ── */
.toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gd);color:var(--iv);padding:10px 20px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;z-index:999;transition:transform .3s;white-space:nowrap;pointer-events:none;border-radius:2px}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── TABLET (600px+) ── */
@media(min-width:600px){
  nav{padding:0 1.5rem;height:64px}
  .cart-drawer{top:64px}
  .btn-gold,.btn-ghost{width:auto}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .footer-brand{grid-column:auto}
  .feat-grid{grid-template-columns:repeat(5,1fr)}
  .pm-inner{flex-direction:row}
  .pm-img-wrap{width:45%;height:auto;min-height:380px;flex-shrink:0}
  .pm-info{flex:1;padding:1.5rem;overflow-y:auto;max-height:80vh}
  .product-modal{border-radius:12px;max-width:820px;max-height:85vh}
  .product-modal-bg{align-items:center;padding:1.5rem}
  .modal-bg{align-items:center;padding:1rem}
  .modal{border-radius:8px;max-width:500px;max-height:90vh}
  .modal-head{border-radius:8px 8px 0 0}
  nav .nav-links{display:flex;flex-direction:row;position:static;padding:0;border:none;background:transparent;gap:1.25rem}
  .nl{border-bottom:none;padding:0;width:auto;font-size:11px}
  .mob-btn{display:none}
}

/* ── DESKTOP (900px+) ── */
@media(min-width:900px){
  nav{padding:0 2.5rem}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}
}