/* Premium storefront header — 2026-11-12 */
:root{--ph-ink:#0f172a;--ph-ink2:#334155;--ph-muted:#64748b;--ph-line:#e8ebf0;--ph-soft:#f6f7f9;--ph-dark:#0b1220;--ph-accent:#ffb800;--ph-wrap:1640px}
.ph-wrap{width:100%;max-width:var(--ph-wrap);margin:0 auto;padding:0 16px}

/* announcement bar */
.ph-top{background:var(--ph-dark);color:#cbd5e1;font-size:13px;position:relative;z-index:1001}
.ph-top-in{display:flex;align-items:center;gap:18px;height:38px}
.ph-top-call{display:inline-flex;align-items:center;gap:8px;color:#fff!important;text-decoration:none!important;white-space:nowrap;font-weight:600}
.ph-top-call i{color:var(--ph-accent);font-size:13px}
.ph-top-call span{color:#94a3b8;font-weight:500}
.ph-top-call b{letter-spacing:.3px}
.ph-ticker{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ph-ticker-track{display:inline-flex;white-space:nowrap;animation:ph-tick 32s linear infinite;font-family:'Hind Siliguri',sans-serif;font-weight:600;color:var(--ph-accent)}
.ph-ticker-track span{padding-right:80px}
.ph-ticker:hover .ph-ticker-track{animation-play-state:paused}
@keyframes ph-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ph-top-perks{display:flex;gap:18px;white-space:nowrap;color:#cbd5e1}
.ph-top-perks i{color:var(--ph-accent);margin-right:6px}
.ph-top-perks a{color:#fff!important;text-decoration:none!important;font-weight:600}
.ph-top-perks a:hover{color:var(--ph-accent)!important}

/* header shell */
.ph-holder{position:relative;z-index:1000}
header.ph{background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--ph-line);width:100%;z-index:1000;transition:box-shadow .25s ease}
header.ph.stuck{position:fixed;top:0;left:0;right:0;box-shadow:0 10px 30px -12px rgba(15,23,42,.18);animation:ph-drop .3s ease}
@keyframes ph-drop{from{transform:translateY(-100%)}to{transform:none}}
.ph-main-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search actions";align-items:center;gap:28px;height:78px;transition:height .25s ease}
header.ph.stuck .ph-main-in{height:66px}
.ph-burger{grid-area:burger;display:none}
.ph-logo{grid-area:logo;display:flex;align-items:center;text-decoration:none!important}
.ph-logo img{height:48px;width:auto;max-width:210px;object-fit:contain;transition:height .25s ease}
header.ph.stuck .ph-logo img{height:42px}

/* search */
.ph-search{grid-area:search;position:relative;display:flex;align-items:center;max-width:640px;width:100%;justify-self:center;margin:0}
.ph-search>i{position:absolute;left:18px;z-index:2;color:#94a3b8;font-size:15px;pointer-events:none}
.ph-search input{width:100%;height:48px;border:1.5px solid var(--ph-line)!important;background:var(--ph-soft)!important;border-radius:999px!important;padding:0 120px 0 46px!important;font-size:14.5px;color:var(--ph-ink);box-shadow:none!important;outline:0;transition:border-color .2s,background .2s,box-shadow .2s}
.ph-search input::placeholder{color:#94a3b8}
.ph-search input:focus{background:#fff!important;border-color:var(--ph-ink)!important;box-shadow:0 0 0 4px rgba(15,23,42,.06)!important}
.ph-search input::-webkit-search-cancel-button{display:none}
.ph-search button{position:absolute!important;left:auto!important;right:5px!important;top:5px!important;bottom:5px!important;width:auto!important;height:auto!important;min-width:0!important;margin:0!important;line-height:1!important;border:0;border-radius:999px;background:var(--ph-ink);color:#fff;font-weight:700;font-size:13.5px;padding:0 22px;cursor:pointer;transition:background .2s,transform .1s}
.ph-search button:hover{background:#000}
.ph-search button:active{transform:scale(.97)}

/* actions */
.ph-actions{grid-area:actions;display:flex;align-items:center;gap:10px}
.ph-hot,.ph-cart{display:flex;align-items:center;gap:10px;text-decoration:none!important;color:var(--ph-ink)!important;padding:6px 14px 6px 6px;border-radius:999px;transition:background .2s}
.ph-hot:hover,.ph-cart:hover{background:var(--ph-soft)}
.ph-ic{position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ph-soft);border:1px solid var(--ph-line);color:var(--ph-ink);font-size:17px;flex:0 0 42px}
.ph-ic i,.ph-ic i::before{margin:0!important;line-height:1;font-size:19px;color:var(--ph-ink)}
.ph-hot .ph-ic i{font-size:15px}
.ph-cart .ph-ic{background:var(--ph-ink);border-color:var(--ph-ink)}
.ph-cart .ph-ic i,.ph-cart .ph-ic i::before{color:#fff}
.ph-hot-t,.ph-cart-t{display:flex;flex-direction:column;line-height:1.15}
.ph-hot-t small,.ph-cart-t small{font-size:11.5px;color:var(--ph-muted);font-weight:500}
.ph-hot-t b,.ph-cart-t b{font-size:14.5px;font-weight:700;color:var(--ph-ink);white-space:nowrap}
.ph .cart-count{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ph-accent)!important;color:#111827!important;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1;font-family:inherit!important}

/* category nav */
.ph-nav{border-top:1px solid var(--ph-line);transition:max-height .3s ease,opacity .25s ease;max-height:120px}
header.ph.stuck.hide-nav .ph-nav{max-height:0;opacity:0;overflow:hidden;border-top-color:transparent}
.ph-menu{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:center;gap:2px 4px;flex-wrap:wrap}
.ph-menu::-webkit-scrollbar{display:none}
.ph-menu>li{position:relative;list-style:none;margin:0}
.ph-menu>li>a{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--ph-ink2)!important;text-decoration:none!important;white-space:nowrap;position:relative;transition:color .2s}
.ph-menu>li>a i{font-size:10px;opacity:.6;transition:transform .2s}
.ph-menu>li>a .fa-home{font-size:13px;opacity:1}
.ph-menu>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:9px;height:2px;border-radius:2px;background:var(--ph-accent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.ph-menu>li>a:hover,.ph-menu>li>a.on{color:var(--ph-ink)!important}
.ph-menu>li>a:hover::after,.ph-menu>li>a.on::after{transform:scaleX(1)}
.ph-menu>li:hover>a i.fa-chevron-down{transform:rotate(180deg)}
.ph-drop{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:220px;background:#fff;border:1px solid var(--ph-line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.22);padding:8px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:20}
.ph-menu>li:hover>.ph-drop,.ph-menu>li:focus-within>.ph-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ph-drop ul{list-style:none;margin:0;padding:0}
.ph-drop li{list-style:none;margin:0}
.ph-drop a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ph-ink2)!important;text-decoration:none!important;white-space:nowrap}
.ph-drop a:hover{background:var(--ph-soft);color:var(--ph-ink)!important}

/* drawer (mobile) */
.ph-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:1990}
.ph-drawer{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:86vw;background:#fff;z-index:1991;transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:20px 0 50px -20px rgba(15,23,42,.35)}
html.ph-open .ph-ov{opacity:1;visibility:visible}
html.ph-open .ph-drawer{transform:none}
html.ph-open,html.ph-open body{overflow:hidden}
.ph-dr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ph-line)}
.ph-dr-head img{height:38px;width:auto;max-width:170px;object-fit:contain}
.ph-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--ph-line);background:#fff;font-size:20px;line-height:1;color:var(--ph-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ph-dr-body{flex:1;overflow-y:auto;padding:10px 12px}
.ph-dr-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;padding:12px 8px 6px}
.ph-dr-menu{list-style:none;margin:0;padding:0}
.ph-dr-menu li{list-style:none;margin:0}
.ph-dr-menu>li>a,.ph-dr-menu summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ph-ink)!important;text-decoration:none!important;cursor:pointer;list-style:none}
.ph-dr-menu summary::-webkit-details-marker{display:none}
.ph-dr-menu>li>a:hover,.ph-dr-menu summary:hover{background:var(--ph-soft)}
.ph-dr-menu summary i{font-size:11px;color:#94a3b8;transition:transform .2s}
.ph-dr-menu details[open] summary i{transform:rotate(180deg)}
.ph-dr-menu details[open] summary{background:var(--ph-soft)}
.ph-dr-menu details ul{list-style:none;margin:4px 0 6px;padding:0 0 0 14px;border-left:2px solid var(--ph-line);margin-left:16px}
.ph-dr-menu details ul a{display:block;padding:9px 12px;font-size:14px;color:var(--ph-ink2)!important;text-decoration:none!important;border-radius:9px}
.ph-dr-menu details ul a:hover{background:var(--ph-soft)}
.ph-dr-foot{padding:14px 16px 18px;border-top:1px solid var(--ph-line);display:grid;gap:8px}
.ph-dr-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none!important}
.ph-dr-btn.call{background:var(--ph-ink);color:#fff!important}
.ph-dr-btn.wa{background:#e8f8ee;color:#128c4a!important}

/* responsive */
@media (max-width:1199px){.ph-hot-t{display:none}.ph-hot{padding-right:6px}.ph-main-in{gap:20px}}
@media (max-width:991px){
  .ph-wrap{padding:0 14px}
  .ph-top-in{height:32px;font-size:12.5px}
  .ph-top-call,.ph-top-perks{display:none}
  .ph-main-in{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"burger logo actions" "search search search";height:auto;gap:10px 10px;padding:10px 0 12px}
  header.ph.stuck .ph-main-in{height:auto;padding:8px 0 10px}
  .ph-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:42px;height:42px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;padding:0;cursor:pointer}
  .ph-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ph-ink)}
  .ph-burger span:nth-child(2){width:12px;margin-right:6px}
  .ph-logo{justify-content:center}
  .ph-logo img{height:38px;max-width:160px}
  header.ph.stuck .ph-logo img{height:34px}
  .ph-search{max-width:none}
  .ph-search input{height:44px;padding-right:96px!important;font-size:14px}
  .ph-search button{padding:0 16px;font-size:13px}
  header.ph.stuck.hide-nav .ph-search{display:none}
  .ph-hot,.ph-cart-t{display:none}
  .ph-cart{padding:0}
  .ph-cart:hover{background:transparent}
  .ph-nav{display:none}
}
@media (max-width:420px){.ph-search input::placeholder{font-size:13px}}