/* ── Unified Header CSS ── */
/* Include after :root variables */

header{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:0 48px;height:72px;background:rgba(97,36,60,.96);backdrop-filter:blur(20px);border-bottom:1px solid rgba(201,169,110,.08);transition:transform .35s ease,background .4s var(--T),box-shadow .4s var(--T)}
header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.15)}
header.hdr-hidden{transform:translateY(-100%)}
.logo-img img{height:38px;width:auto;display:block}
nav{display:flex;gap:32px;align-items:center}
nav a{font-size:11px;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;transition:color .3s}
nav a:hover{color:var(--gold);text-decoration:none}
nav a.active{color:#fff}
.hdr-right{display:flex;align-items:center;gap:14px}
.lang-sw{display:flex;gap:4px}
.lang-sw a{font-size:10px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;padding:5px 8px;border:1px solid transparent;border-radius:4px;transition:all .3s}
.lang-sw a:hover{color:rgba(255,255,255,.6)}
.lang-sw a.active{color:var(--gold);border-color:rgba(201,169,110,.3)}
.btn-cta{font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:10px 24px;text-decoration:none;border-radius:8px;transition:all .3s}
.btn-cta:hover{background:var(--gold-lt)}
.hdr-icon{display:flex;align-items:center;color:rgba(255,255,255,.85);text-decoration:none;position:relative;background:none;border:none;padding:0;cursor:pointer}
.hdr-icon svg{width:20px;height:20px;stroke:rgba(255,255,255,.8);fill:none;stroke-width:1.5;transition:all .2s}
.hdr-icon:hover svg{stroke:var(--gold)}
.hdr-badge{position:absolute;top:-5px;right:-7px;background:var(--gold);color:var(--ink);min-width:15px;height:15px;border-radius:8px;font-size:9px;font-weight:400;display:flex;justify-content:center;align-items:center;padding:0 3px}

/* ── Favorite Heart Animation ── */
@keyframes heartPop{0%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(.95)}45%{transform:scale(1.1)}60%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes heartRing{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}
.heart-anim{animation:heartPop .5s ease}
.heart-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none;animation:heartRing .6s ease forwards}

/* ── Profile Dropdown ── */
.hdr-profile{position:relative}
.hdr-profile-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.hdr-profile-btn svg{width:20px;height:20px;stroke:rgba(255,255,255,.8);fill:none;stroke-width:1.5;transition:all .2s}
.hdr-profile-btn:hover svg{stroke:var(--gold)}
.hdr-profile-drop{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #e8e6e3;border-radius:12px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s;z-index:600;overflow:hidden}
.hdr-profile.open .hdr-profile-drop{opacity:1;visibility:visible;transform:translateY(0)}
.hdr-profile-name{padding:14px 18px;font-size:13px;font-weight:400;color:#2B2A29;border-bottom:1px solid #e8e6e3;letter-spacing:.02em}
.hdr-profile-link{display:block;padding:11px 18px;font-size:13px;font-weight:300;color:#8a8078;text-decoration:none;transition:all .2s;border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.hdr-profile-link:hover{background:#f9f7f3;color:#2B2A29}
.hdr-profile-logout{border-top:1px solid #e8e6e3;color:#d04848}
.hdr-profile-logout:hover{background:rgba(208,72,72,.05);color:#d04848}

/* ── Mini-Cart Dropdown ── */
.hdr-cart{position:relative}
.hdr-cart-drop{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #e8e6e3;border-radius:12px;width:280px;box-shadow:0 8px 32px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s;z-index:600;overflow:hidden}
.hdr-cart:hover .hdr-cart-drop{opacity:1;visibility:visible;transform:translateY(0)}
.hdr-cart-loading{padding:24px;text-align:center;font-size:12px;color:#8a8078}
.hdr-cart-empty{padding:28px 18px;text-align:center;font-size:13px;color:#8a8078;font-weight:300}
.hdr-cart-list{max-height:240px;overflow-y:auto;padding:6px 0}
.hdr-cart-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(0,0,0,.04)}
.hdr-cart-item:last-child{border-bottom:none}
.hdr-cart-item img{width:40px;height:40px;object-fit:cover;border-radius:8px;background:#f5f3ef;flex-shrink:0}
.hdr-cart-item-info{flex:1;min-width:0}
.hdr-cart-item-name{font-size:12px;font-weight:400;color:#2B2A29;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.hdr-cart-item-meta{font-size:10px;color:#8a8078;margin-top:1px}
.hdr-cart-item-qty{font-size:11px;color:var(--gold);font-weight:400;flex-shrink:0;margin-left:4px}
.hdr-cart-footer{padding:10px 14px;border-top:1px solid #e8e6e3;display:flex;flex-direction:column;gap:8px}
.hdr-cart-total{font-size:11px;color:#8a8078;text-align:center;letter-spacing:.05em}
.hdr-cart-btn{display:block;text-align:center;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#61243C;padding:10px 16px;border-radius:8px;text-decoration:none;transition:background .2s}
.hdr-cart-btn:hover{background:#7d2e4e}

/* ── Badge Bounce Animation ── */
@keyframes badgeBounce{0%{transform:scale(1)}20%{transform:scale(1.4)}40%{transform:scale(.9)}60%{transform:scale(1.15)}80%{transform:scale(.97)}100%{transform:scale(1)}}
.hdr-badge.bounce{animation:badgeBounce .5s ease}

/* ── Header Search ── */
.hdr-search-btn{background:none;border:none;cursor:pointer;padding:0}
.hdr-search-overlay{position:fixed;inset:0;z-index:510;background:rgba(20,18,17,.6);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:all .35s var(--T);display:flex;align-items:flex-start;justify-content:center;padding-top:80px}
.hdr-search-overlay.open{opacity:1;visibility:visible}
.hdr-search-box{width:100%;max-width:600px;margin:0 24px;transform:translateY(-20px);opacity:0;transition:all .4s var(--T) .1s}
.hdr-search-overlay.open .hdr-search-box{transform:translateY(0);opacity:1}
.hdr-search-inner{position:relative;display:flex;align-items:center}
.hdr-search-icon{position:absolute;left:20px;width:20px;height:20px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.8;pointer-events:none}
.hdr-search-inner input{width:100%;padding:18px 52px 18px 52px;border:1px solid rgba(201,169,110,.3);border-radius:16px;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:300;color:#fff;background:rgba(43,42,41,.9);backdrop-filter:blur(16px);outline:none;transition:border-color .3s,box-shadow .3s}
.hdr-search-inner input::placeholder{color:rgba(255,255,255,.5)}
.hdr-search-inner input:focus{border-color:var(--gold);box-shadow:0 4px 32px rgba(201,169,110,.15)}
.hdr-search-close{position:absolute;right:12px;background:none;border:none;color:rgba(255,255,255,.4);font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}
.hdr-search-close:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.hdr-search-results{margin-top:8px;background:rgba(43,42,41,.95);backdrop-filter:blur(16px);border:1px solid rgba(201,169,110,.15);border-radius:16px;max-height:420px;overflow-y:auto;display:none;box-shadow:0 12px 48px rgba(0,0,0,.3)}
.hdr-search-results.open{display:block}
.hsr-item{display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;color:#fff;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04)}
.hsr-item:last-child{border-bottom:none}
.hsr-item:hover{background:rgba(201,169,110,.08)}
.hsr-item img{width:52px;height:52px;object-fit:cover;border-radius:10px;background:rgba(255,255,255,.05);flex-shrink:0}
.hsr-info{flex:1;min-width:0}
.hsr-name{font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.hsr-meta{font-size:11px;color:var(--gold-lt);margin-top:2px}
.hsr-empty{padding:32px 18px;text-align:center;font-size:13px;color:rgba(255,255,255,.4)}
.hsr-item .hsr-arrow{margin-left:auto;width:16px;height:16px;stroke:rgba(255,255,255,.2);fill:none;stroke-width:1.5;flex-shrink:0;transition:all .2s}
.hsr-item:hover .hsr-arrow{stroke:var(--gold);transform:translateX(2px)}


/* ── Skeleton Loading ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0ece4 25%,#f9f7f3 50%,#f0ece4 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:8px}
.skeleton-card{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.skeleton-img{aspect-ratio:1;background:linear-gradient(90deg,#f0ece4 25%,#f9f7f3 50%,#f0ece4 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skeleton-text{height:12px;margin:12px 16px 8px;border-radius:6px}
.skeleton-text-sm{height:10px;margin:0 16px 14px;width:60%;border-radius:6px}

/* ── Lazy Load ── */
.prod-card-img img,.cat-card-img img,.cat-img img{opacity:0;transition:opacity .4s ease}
.prod-card-img img.loaded,.cat-card-img img.loaded,.cat-img img.loaded,.prod-card-img img.error,.cat-card-img img.error,.cat-img img.error{opacity:1}

/* ── Toast Notifications ── */
.toast-container{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{padding:14px 28px;background:rgba(43,42,41,.92);backdrop-filter:blur(12px);color:#fff;font-size:13px;font-weight:300;letter-spacing:.03em;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.2);pointer-events:auto;opacity:0;transform:translateY(16px);transition:all .35s cubic-bezier(.22,1,.36,1)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-left:3px solid #C9A96E}
.toast.error{border-left:3px solid #dc2626}

/* ── Mobile Menu (slide-up sheet) ── */
.burger{display:none}

/* Dark overlay behind sheet */
.mob-overlay{position:fixed;inset:0;z-index:540;background:rgba(20,18,17,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.mob-overlay.open{opacity:1;visibility:visible}

/* Sheet container */
.mob-menu{position:fixed;bottom:0;left:0;right:0;z-index:550;background:rgba(28,27,26,.98);backdrop-filter:blur(32px);border-radius:24px 24px 0 0;max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:12px 24px 28px;transform:translateY(100%);visibility:hidden;transition:transform .45s cubic-bezier(.32,1.2,.54,1),visibility .45s ease}
.mob-menu.open{transform:translateY(0);visibility:visible}

/* Handle bar */
.mob-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 auto 20px;flex-shrink:0}
.mob-close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:rgba(255,255,255,.4);font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;line-height:1}
.mob-close-btn:hover{color:var(--gold);background:rgba(255,255,255,.06)}

/* User greeting */
.mob-greeting{display:flex;align-items:center;gap:10px;padding:0 4px 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px}
.mob-greeting svg{width:20px;height:20px;color:var(--gold);flex-shrink:0}
.mob-greeting span{font-size:14px;font-weight:400;color:var(--gold);letter-spacing:.06em}

/* Nav wrapper */
.mob-nav{display:flex;flex-direction:column}

/* Menu items with icons */
.mob-item{display:flex;align-items:center;gap:14px;padding:15px 4px;text-decoration:none;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s,background .2s;border-radius:0;font-size:15px;font-weight:300;letter-spacing:.02em}
.mob-item:last-child{border-bottom:none}
.mob-item svg{width:20px;height:20px;flex-shrink:0;color:rgba(255,255,255,.4);transition:color .2s}
.mob-item:hover,.mob-item:active{color:#fff;background:rgba(201,169,110,.06)}
.mob-item:hover svg,.mob-item:active svg{color:var(--gold)}

/* Cart badge in menu */
.mob-badge{margin-left:auto;background:var(--gold);color:var(--ink);min-width:20px;height:20px;border-radius:10px;font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* Divider before auth action */
.mob-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 0}

/* Auth items */
.mob-item-auth{color:rgba(255,255,255,.3);border-bottom:none;justify-content:center}
.mob-item-auth svg{color:rgba(255,255,255,.2)}
.mob-item-auth:hover{color:rgba(255,255,255,.5)}
.mob-item-login{color:var(--gold);border-bottom:none;justify-content:center}
.mob-item-login svg{color:var(--gold)}
.mob-item-login:hover{color:#fff}

/* Language pills */
.mob-lang{display:flex;gap:8px;justify-content:center;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.mob-lang-pill{font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;padding:8px 18px;border:1px solid rgba(255,255,255,.08);border-radius:20px;transition:all .25s}
.mob-lang-pill:hover{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.15)}
.mob-lang-pill.active{color:var(--gold);border-color:rgba(201,169,110,.4);background:rgba(201,169,110,.08)}

/* ── Scroll Top ── */
.scroll-top{position:fixed;bottom:32px;right:32px;z-index:400;width:44px;height:44px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.scroll-top.show{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(201,169,110,.2)}
.scroll-top svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2}
.scroll-top:hover svg{stroke:var(--gold)}

/* ── Footer (simple) ── */
.site-footer{background:var(--ink);padding:28px 0}
.site-footer::before{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,.15),transparent);margin-bottom:28px}
.foot-inner{max-width:1288px;margin:0 auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between}
.foot-copy{font-size:11px;color:rgba(255,255,255,.3)}
.foot-link{font-size:10px;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);text-decoration:none}

/* ── Floating Contact (matches index.php) ── */
@keyframes floatPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.float-wrap{position:fixed;bottom:36px;left:36px;z-index:450}
.float-main{width:56px;height:56px;border-radius:50%;background:#61243C;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:2;transition:all .4s;box-shadow:0 4px 20px rgba(97,36,60,.4)}
.float-main::before,.float-main::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(97,36,60,.5);animation:floatPulse 2.5s ease-out infinite;pointer-events:none}
.float-main::after{animation-delay:1.25s}
.float-main:hover{background:#7d2e4e;transform:scale(1.05)}
.float-main svg{width:24px;height:24px;stroke:#fff;position:absolute;transition:opacity .3s,transform .3s}
.float-main .fm-close{opacity:0;transform:rotate(-90deg)}
.float-wrap.open .float-main .fm-chat{opacity:0;transform:rotate(90deg)}
.float-wrap.open .float-main .fm-close{opacity:1;transform:rotate(0)}
.float-wrap.open .float-main{background:#2B2A29;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.float-wrap.open .float-main::before,.float-wrap.open .float-main::after{animation:none;opacity:0}
.float-wrap.open .float-main svg{stroke:#C9A96E}
.float-items{position:absolute;bottom:68px;left:0;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .35s}
.float-wrap.open .float-items{opacity:1;visibility:visible;transform:translateY(0)}
.float-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .35s;box-shadow:0 3px 14px rgba(0,0,0,.2);position:relative}
.float-btn:hover{transform:scale(1.12)}
.float-btn svg{width:20px;height:20px}
.float-btn.tg{background:#2AABEE}
.float-btn.wa{background:#25D366}
.float-btn.ph{background:#C9A96E}
.float-btn.ph svg{stroke:#2B2A29}
.float-label{position:absolute;left:calc(100% + 12px);background:#fff;color:#2B2A29;font-size:11px;font-weight:400;letter-spacing:.06em;padding:6px 14px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,.08);opacity:0;transform:translateX(-8px);transition:all .25s;pointer-events:none}
.float-btn:hover .float-label{opacity:1;transform:translateX(0)}

/* ── Responsive ── */
@media(max-width:767px){
  header{padding:0 20px;height:64px}
  nav{display:none}
  .burger{display:flex!important}
  .hdr-right>.lang-sw{display:none}
  .btn-cta{display:none}
  .hdr-profile{display:none}
  .hdr-cart-drop{display:none}
  .logo-img img{height:34px}
  .foot-inner{flex-direction:column;gap:8px;text-align:center;padding:0 16px}
  .scroll-top{bottom:20px;right:16px;width:40px;height:40px}
  .float-wrap{bottom:24px;left:16px}
  .float-main{width:50px;height:50px}
  .float-btn{width:42px;height:42px}
  .float-label{display:none}
  .hdr-search-overlay{padding-top:72px}
  .hdr-search-box{margin:0 16px}
  .hdr-search-inner input{font-size:14px;padding:16px 48px 16px 48px}
  .hdr-search-results{max-height:calc(100vh - 180px)}
}