/* ===== Digi Treat · base.css =====
   Shared: design tokens, header, footer, buttons, forms, toasts.
   Brand colour: change --primary / --primary-2 / --neon to re-skin the whole site. */
:root{
  --bg:#FBF4EB; --surface:#FDF6EF; --soft:#FBE6D2; --text:#302722; --muted:#76675D; --border:#EAD6C3;
  --primary:#DB5015; --primary-2:#EE7041; --neon:#DB5015; --danger:#d93a3a; --ok:#2f9e63; --warn:#d98a0b;
  --grad:#DB5015;
  --glow:none;
  --shadow:0 2px 10px rgba(80,45,25,.08); --header-bg:#FBF4EB;
  --sb-thumb:#e8cdb8; --sb-thumb-hover:#d9a98a; --sb-track:#FBF4EB;
  --radius:16px; --header-h:68px; --font:'Poppins','Hind Siliguri',system-ui,-apple-system,'Segoe UI',sans-serif;
}
[data-theme="dark"]{
  --bg:#17110e; --surface:#211915; --soft:#2a201a; --text:#f4ebe4; --muted:#b5a698; --border:#3a2d25;
  --shadow:0 2px 10px rgba(0,0,0,.4); --header-bg:#17110e;
  --sb-thumb:#4a392f; --sb-thumb-hover:#6b523f; --sb-track:#17110e;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;transition:background .25s,color .25s}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:6px}
.container{width:min(1440px,100% - 48px);margin-inline:auto}
.muted{color:var(--muted)} .center{text-align:center} .right{text-align:right}
[hidden]{display:none!important}
.big-title{font-size:clamp(26px,3.4vw,40px);font-weight:800;margin-bottom:.2em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border)}
.header-inner{width:min(1360px,100% - 32px);margin-inline:auto;height:var(--header-h);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:inherit}
.brand-logo{height:38px;width:auto;border-radius:8px}
.brand-name{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(219,80,21,.35))}
.header-center{display:flex;align-items:center;justify-content:center;gap:26px;min-width:0}
.main-nav{position:relative;display:flex;gap:6px;padding-bottom:2px}
.main-nav a{padding:8px 14px;color:var(--muted);font-weight:600;font-size:15px;transition:color .2s;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--text)}
.nav-indicator{position:absolute;left:0;bottom:-2px;height:3px;width:0;border-radius:3px;background:var(--grad);box-shadow:0 0 12px var(--neon);transition:transform .35s cubic-bezier(.65,.05,.2,1),width .35s cubic-bezier(.65,.05,.2,1)}
.search{display:flex;align-items:center;width:min(380px,100%);background:var(--soft);border:1px solid var(--border);border-radius:999px;padding:3px 4px 3px 16px;transition:border-color .2s,box-shadow .2s}
/* search box: no focus ring, no inner square */
.search:focus-within{border-color:var(--border);box-shadow:none}
.search input,.search input:hover,.search input:focus,.search input:focus-visible{flex:1;min-width:0;margin:0;padding:8px 0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;color:var(--text);font:inherit;font-size:14px}
.search button{border:0;background:var(--grad);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.icon-btn.is-hov{border-color:var(--primary-2);box-shadow:0 0 0 4px rgba(219,80,21,.14);transform:translateY(-1px)}
.badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 12px rgba(219,80,21,.7)}
.cart-btn.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.22) rotate(-6deg)}60%{transform:scale(.94)}}
.menu-btn{display:none}
.i-moon{display:none}[data-theme="dark"] .i-sun{display:none}[data-theme="dark"] .i-moon{display:block}
@media (max-width:1000px){
  .header-inner{grid-template-columns:auto 1fr;gap:12px}
  .header-actions{justify-content:flex-end}
  .menu-btn{display:inline-grid}
  .header-center{position:absolute;left:0;right:0;top:var(--header-h);flex-direction:column;align-items:stretch;gap:12px;padding:14px 20px 18px;background:var(--surface);border-bottom:1px solid var(--border);display:none}
  .header-center.open{display:flex}
  .main-nav{overflow-x:auto}.search{width:100%}
}
@media (max-width:520px){.brand-name{font-size:18px}.brand-logo{height:32px}.header-actions .btn-sm{padding:8px 11px;font-size:12px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:11px 20px;font:600 15px/1 var(--font);cursor:pointer;color:#fff;background:var(--surface);transition:transform .2s,box-shadow .25s,background .2s,border-color .2s;text-decoration:none;white-space:nowrap}
.btn.is-hov{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);color:#fff}
.btn-primary:hover{box-shadow:var(--glow)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary-2);color:var(--primary);box-shadow:0 0 0 4px rgba(219,80,21,.12)}
.btn-light{background:var(--surface);color:#3a2a20}
.btn-light:hover{box-shadow:0 0 28px rgba(255,255,255,.55)}
.btn-danger{background:transparent;border-color:rgba(229,51,79,.4);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
.btn-block{width:100%}
.linklike{background:none;border:0;color:var(--primary);font:600 14px var(--font);cursor:pointer;padding:0}
.linklike:hover{text-decoration:underline}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
label small{font-weight:500;opacity:.8}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:500 15px var(--font);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;outline:0;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--primary-2);box-shadow:0 0 0 4px rgba(219,80,21,.16)}
textarea{resize:vertical;line-height:1.5}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0;accent-color:var(--primary)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.stepper button{width:40px;height:42px;border:0;background:transparent;color:var(--text);font-size:20px;cursor:pointer}
.stepper button:hover{background:var(--soft);color:var(--primary)}
.stepper input{width:52px;margin:0;border:0;border-radius:0;text-align:center;padding:10px 0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}

/* ---------- Flash + toast ---------- */
.flash{width:min(1000px,100% - 40px);margin:16px auto 0;padding:13px 44px 13px 18px;border-radius:12px;font-weight:600;font-size:14px;position:relative;border:1px solid}
.flash button{position:absolute;right:12px;top:8px;border:0;background:none;color:inherit;font-size:22px;cursor:pointer}
.flash-success{background:rgba(18,165,107,.1);border-color:rgba(18,165,107,.4);color:var(--ok)}
.flash-error{background:rgba(229,51,79,.1);border-color:rgba(229,51,79,.4);color:var(--danger)}
.flash.in-admin{width:auto;margin:14px 28px 0}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:220px;max-width:340px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 14px 40px -10px rgba(0,0,0,.45);border-left:4px solid var(--neon);animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.err{border-left-color:var(--danger)}
.toast.out{opacity:0;transform:translateY(8px);transition:.3s}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.fly-img{position:fixed;z-index:300;border-radius:14px;object-fit:cover;pointer-events:none;box-shadow:0 0 30px rgba(219,80,21,.8);transition:transform .75s cubic-bezier(.55,.05,.45,1),opacity .75s,width .75s,height .75s,left .75s,top .75s}

/* ---------- Status chips ---------- */
.status{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;text-transform:capitalize;background:var(--soft);color:var(--muted)}
.s-paid{background:rgba(18,165,107,.13);color:var(--ok)}
.s-delivered{background:rgba(219,80,21,.13);color:var(--primary)}
.s-pending{background:rgba(230,154,11,.15);color:var(--warn)}
.s-cancelled{background:rgba(229,51,79,.13);color:var(--danger)}
.kv{margin:0}.kv>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--border)}
.kv dt{color:var(--muted);font-size:14px}.kv dd{margin:0;font-weight:600;text-align:right;word-break:break-all}

/* ---------- Footer ---------- */
.site-footer{margin-top:90px;background:linear-gradient(180deg,var(--soft),var(--bg));border-top:1px solid var(--border)}
.footer-top{width:min(1280px,100% - 40px);margin:0 auto;padding:54px 0 34px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.footer-brand p{color:var(--muted);max-width:380px;margin:14px 0}
.footer-col h4{font-size:14px;margin-bottom:14px}
.footer-col a{display:block;color:var(--muted);font-size:14px;padding:4px 0;transition:color .2s,transform .2s;word-break:break-word}
.footer-col a:hover{color:var(--primary);transform:translateX(4px)}
.pay-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:800;color:#fff}
.chip.bkash{background:#e2136e}.chip.nagad{background:#ec7a1c}.chip.rocket{background:#3a2a20}
.footer-bottom{width:min(1280px,100% - 40px);margin:0 auto;padding:20px 0 30px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- custom scrollbars (every scroll area) ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-track{background:var(--sb-track)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:3px solid transparent;background-clip:padding-box;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- custom dropdown (replaces the browser select) ---------- */
.dt-select{position:relative;margin-top:6px}
.dt-select-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:500 15px var(--font);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.dt-select-btn:hover,.dt-select.open .dt-select-btn{border-color:var(--primary-2)}
.dt-select-btn:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.dt-select-btn svg{flex:none;color:var(--muted);transition:transform .25s}
.dt-select.open .dt-select-btn svg{transform:rotate(180deg);color:var(--primary)}
.dt-select-menu{display:none;position:absolute;z-index:90;left:0;right:0;top:calc(100% + 6px);max-height:270px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 50px -18px rgba(0,0,0,.5)}
.dt-select.open .dt-select-menu{display:block;animation:selIn .16s ease-out}
@keyframes selIn{from{opacity:0;transform:translateY(-6px)}}
.dt-opt{padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text);transition:background .15s}
.dt-opt:hover{background:var(--soft);color:var(--primary)}
.dt-opt.sel{font-weight:700;color:var(--primary);background:var(--soft)}
.dt-group{padding:10px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ---------- custom checkbox + number input ---------- */
input[type=checkbox]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:none;width:20px;height:20px;border:2px solid var(--border);border-radius:6px;background:var(--surface);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
input[type=checkbox]:hover{border-color:var(--primary-2)}
input[type=checkbox]::after{content:'';width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .15s}
input[type=checkbox]:checked{background:var(--grad);border-color:transparent;box-shadow:0 0 10px rgba(219,80,21,.5)}
input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.check{display:flex;align-items:center;gap:10px;cursor:pointer}

.variant{display:inline-block;font-style:normal;font-size:12px;font-weight:700;color:var(--primary);background:var(--soft);padding:2px 9px;border-radius:999px;margin-left:6px}

/* ---------- announcement bar ---------- */
.announce{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 16px;background:linear-gradient(90deg,#3a2a20,#DB5015 55%,#EE7041);color:#fff;font-size:13px;font-weight:600;text-align:center}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- cookie + notification banner ---------- */
.consent{position:fixed;z-index:150;left:50%;bottom:20px;width:min(860px,100% - 28px);display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:0 30px 70px -20px rgba(60,20,140,.45),0 0 0 1px rgba(219,80,21,.18);transform:translate(-50%,140%);opacity:0;transition:transform .6s cubic-bezier(.22,1.2,.36,1),opacity .4s}
.consent.show{transform:translate(-50%,0);opacity:1}
.consent.bye{transform:translate(-50%,140%);opacity:0;transition:transform .4s,opacity .3s}
.consent-icon{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--glow)}
.consent-text{flex:1;min-width:0}.consent-text b{display:block;margin-bottom:2px}.consent-text p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.consent-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:720px){.consent{flex-wrap:wrap;bottom:12px;padding:16px}.consent-actions{width:100%}.consent-actions .btn{flex:1}.consent-icon{display:none}}

/* ---------- notification bell ---------- */
.bell-wrap{position:relative}
.notif-panel{position:absolute;right:-60px;top:calc(100% + 12px);width:min(380px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 70px -20px rgba(40,10,100,.5);overflow:hidden;z-index:80;animation:selIn .2s ease-out}
.notif-panel[hidden]{display:none}
.np-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.np-list{list-style:none;margin:0;padding:6px;max-height:380px;overflow-y:auto}
.np-item a{display:flex;gap:12px;padding:12px;border-radius:14px;color:var(--text);transition:background .2s}
.np-item a:hover{background:var(--soft)}
.np-body{display:flex;flex-direction:column;gap:2px;min-width:0}.np-body b{font-size:14px;line-height:1.3}.np-body span{color:var(--muted);font-size:13px;line-height:1.4}.np-body small{color:var(--muted);font-size:11px;opacity:.8}
.n-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--border)}
.np-item.unread .n-dot,.inbox li.unread .n-dot{background:var(--primary-2);box-shadow:0 0 10px var(--primary-2)}
.np-item.unread a{background:rgba(219,80,21,.07)}
.np-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:14px}
.np-all{display:block;text-align:center;padding:13px;border-top:1px solid var(--border);font-weight:700;font-size:14px}
.np-all:hover{background:var(--soft)}
@media (max-width:520px){.notif-panel{position:fixed;left:12px;right:12px;top:calc(var(--header-h) + 8px);width:auto}}

/* ---------- toggle switch ---------- */
.switch{position:relative;flex:none;width:48px;height:28px}
.switch input{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2;border:0;box-shadow:none}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--border);transition:background .25s,box-shadow .25s}
.switch i::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.switch input:checked + i{background:var(--grad);box-shadow:0 0 14px rgba(219,80,21,.55)}
.switch input:checked + i::after{transform:translateX(20px)}
.switch input:focus-visible + i{outline:2px solid var(--neon);outline-offset:2px}

/* ================= BIGGER LAYOUT (header untouched) ================= */
.big-title{font-size:clamp(30px,3.8vw,46px)}
.site-footer{margin-top:120px}
.footer-top{width:min(1440px,100% - 48px);padding:90px 0 56px;gap:56px}
.footer-brand p{font-size:16px;max-width:460px;line-height:1.75}
.footer-brand .brand-name{font-size:28px}
.footer-col h4{font-size:17px;margin-bottom:20px}
.footer-col a{font-size:16px;padding:7px 0}
.footer-bottom{width:min(1440px,100% - 48px);padding:30px 0 44px;font-size:14px}
.chip{padding:8px 16px;font-size:13px;border-radius:10px}
.chip.upay{background:#1a73e8}.chip.mcash{background:#00a651}.chip.qr{background:#0f766e}.chip.bank{background:#0b6b3a}.chip.cellfin{background:#d3202e}

/* ================= BUTTON + HOVER ANIMATIONS ================= */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s,background .25s,border-color .25s,color .25s}
.btn.is-hov{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:translateY(0) scale(.95);transition-duration:.1s}
.btn-primary:hover{box-shadow:0 14px 34px -8px rgba(219,80,21,.75),0 0 0 1px rgba(255,255,255,.2) inset}
.btn .arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.btn:hover .arrow{transform:translateX(7px)}
.icon-btn svg{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.icon-btn:hover svg{transform:rotate(-10deg) scale(1.15)}
.icon-btn:active{transform:scale(.9)}
.brand{transition:transform .3s}.brand:hover{transform:scale(1.04)}
.main-nav a{transition:color .2s,transform .25s}.main-nav a.is-hov{transform:translateY(-2px)}
.footer-col a:hover{letter-spacing:.2px}
.linklike{transition:letter-spacing .2s}.linklike:hover{letter-spacing:.3px}
a.p-name,.cat-item,.pill,.acc-link,.adm-link{will-change:transform}

/* ================= page progress bar, back to top ================= */
.page-progress{position:fixed;z-index:300;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#DB5015,#EE7041,#fff);box-shadow:0 0 12px var(--neon);opacity:0}
.page-progress.run{opacity:1;width:82%;transition:width 8s cubic-bezier(.1,.7,.2,1)}
.page-progress.done{opacity:0;width:100%;transition:width .2s,opacity .5s .2s}
.to-top{position:fixed;z-index:140;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--glow);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.4)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}.to-top.is-hov{transform:translateY(-4px) scale(1.08)}
.consent ~ .to-top{bottom:130px}

/* ================= scroll reveal ================= */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ================= search suggestions ================= */
.search{position:relative}
.search-pop{position:absolute;left:0;right:0;top:calc(100% + 10px);min-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 60px -20px rgba(40,10,100,.5);padding:8px;z-index:90;animation:selIn .18s ease-out}
.search-pop[hidden]{display:none}
.search-pop a{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;color:var(--text);transition:background .2s,transform .2s}
.search-pop a:hover{background:var(--soft);transform:translateX(4px)}
.search-pop img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--soft)}
.search-pop b{display:block;font-size:14px;line-height:1.3}.search-pop small{color:var(--muted);font-size:12px}.search-pop em{font-style:normal;font-weight:800;font-size:14px;color:var(--primary)}
.search-pop .sp-all{display:block;text-align:center;font-weight:700;color:var(--primary);padding:12px}
.sp-empty{padding:18px;text-align:center;color:var(--muted);font-size:14px}

/* ================= stars + rating ================= */
.stars-pick{display:inline-flex;gap:4px}
.star{border:0;background:none;padding:3px;color:var(--border);cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1.6),color .15s,filter .2s}
.star svg{display:block}
.star.hov,.star.on{color:#f5b301;filter:drop-shadow(0 0 8px rgba(245,179,1,.55))}
.star:hover{transform:scale(1.28) rotate(-8deg)}
.stars-pick.big .star svg{width:44px;height:44px}
.footer-rate{width:min(1440px,100% - 48px);margin:0 auto;padding:34px 40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-radius:26px;background:var(--surface);border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(219,80,21,.45)}
.site-footer{padding-top:0}.footer-rate+.footer-top{margin-top:-24px;padding-top:56px}
.fr-text b{display:block;font-size:22px}.fr-text span{color:var(--muted);font-size:15px}
.fr-avg{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:14px}.fr-avg b{font-size:34px;color:var(--text);font-weight:800}
.rate-modal{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:20px;background:rgba(10,5,25,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.rate-modal[hidden]{display:none}.rate-modal.open{opacity:1}
.rm-card{position:relative;width:min(480px,100%);padding:38px 34px 30px;border-radius:28px;background:var(--surface);border:1px solid var(--border);text-align:center;box-shadow:0 40px 90px -30px rgba(219,80,21,.7);transform:translateY(30px) scale(.94);transition:transform .45s cubic-bezier(.2,1.1,.3,1.1)}
.rate-modal.open .rm-card{transform:none}
.rm-card h3{font-size:24px;margin-bottom:6px}.rm-card p{color:var(--muted);margin-bottom:14px}
.rm-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:transform .25s,background .2s}.rm-close:hover{transform:rotate(90deg);background:var(--danger);color:#fff}
.rm-emoji{display:inline-block;margin-bottom:10px;padding:5px 18px;border-radius:999px;background:var(--soft);color:var(--primary);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.rm-card textarea{margin:14px 0 18px}
.rm-actions{display:flex;gap:10px;flex-wrap:wrap}.rm-actions .btn{flex:1}
@media (max-width:760px){.footer-rate{padding:24px;transform:translateY(-30%)}.search-pop{min-width:0}}
/* footer rating card sits on the footer's top edge */
.footer-rate{transform:none;margin:-64px auto 0;position:relative;z-index:2}
.footer-rate+.footer-top{margin-top:0;padding-top:70px}

/* ---------- phones ---------- */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important}
  .notif-panel{position:fixed!important;left:10px!important;right:10px!important;top:calc(var(--header-h,64px) + 6px)!important;width:auto!important;max-height:72vh;overflow-y:auto;z-index:300}
  .bell-wrap{position:static}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .container{padding-inline:14px}
  .btn,.icon-btn{min-height:42px}
  input,select,textarea{font-size:16px}
  .pd-layout{grid-template-columns:1fr}
  .offer{padding:22px 16px}
}

.foot-logos{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.foot-logos img{width:72px;height:40px;object-fit:contain;padding:5px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--border);box-sizing:border-box}
.socials{display:flex;gap:10px;margin-top:14px}.socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);color:var(--text);transition:.25s}.socials a.is-hov{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-3px)}

.icon-btn:hover,.btn-outline:hover{box-shadow:none}

.foot-logos{display:grid;gap:12px;max-width:300px;margin-top:16px}.foot-logos img{width:100%;height:84px;object-fit:contain;padding:8px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-sizing:border-box}

/* toasts */
#toasts{position:fixed;top:84px;right:18px;z-index:1000;display:grid;gap:10px;width:min(380px,calc(100vw - 24px));pointer-events:none}
.toast2{position:relative;display:flex;align-items:center;gap:12px;padding:14px 40px 17px 14px;border-radius:14px;background:var(--surface,#fff);color:var(--text,#2b1f18);border:1px solid var(--border,#f0e0d2);box-shadow:0 14px 40px -14px rgba(20,8,50,.45);overflow:hidden;pointer-events:auto;opacity:0;transform:translateX(120%);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.toast2.show{opacity:1;transform:none}.toast2.hide{opacity:0;transform:translateX(120%)}
.t-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:800;color:#fff;background:#16a34a}.t-err .t-ico{background:#e5365b}.t-info .t-ico{background:#DB5015}
.t-msg{font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}.t-x{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--muted,#7a6a5f);font-size:20px;line-height:1;cursor:pointer}
.t-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#16a34a;transform-origin:left;animation:tbar linear forwards}.t-err .t-bar{background:#e5365b}.t-info .t-bar{background:#DB5015}.toast2.paused .t-bar{animation-play-state:paused}
@keyframes tbar{to{transform:scaleX(0)}}
@media (max-width:560px){#toasts{top:70px;right:12px;left:12px;width:auto}}

.announce{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 44px 9px 16px;background:linear-gradient(90deg,#4c1d95,#EE7041);color:#fff;font-size:14px;font-weight:600;text-align:center;position:relative}.announce a{color:#fff;text-decoration:underline}.announce button{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.track{display:flex;list-style:none;margin:0;padding:12px 18px 4px;gap:0}.track li{flex:1;position:relative;text-align:center;font-size:12.5px;color:var(--muted);padding-top:20px}.track li::before{content:'';position:absolute;top:2px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--border);z-index:1}.track li::after{content:'';position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--border)}.track li:first-child::after{display:none}
.track li.done{color:var(--text);font-weight:600}.track li.done::before,.track li.done::after{background:#16a34a}.track li.now::before{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.25)}.track.bad li:nth-child(2)::before{background:#e5365b}.track.bad li:nth-child(2){color:#e5365b;font-weight:600}

/* ---------- information ad popup ---------- */
.pad-overlay{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:rgba(14,6,30,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.pad-overlay.show{opacity:1}
.pad-box{position:relative;max-width:min(92vw,560px);border-radius:18px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden;transform:scale(.94);transition:transform .25s;touch-action:manipulation}
.pad-overlay.show .pad-box{transform:scale(1)}
.pad-box img,.pad-box a{display:block}
.pad-box img{max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;-webkit-user-drag:none;user-select:none}
.pad-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(20,10,40,.72);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .15s,transform .15s}
.pad-x:hover{background:#DB5015;transform:scale(1.08)}
.pad-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
.pad-bar i{display:block;height:100%;width:100%;background:#EE7041;transform-origin:left;transform:scaleX(0)}
.pad-bar i.run{animation:padRun 4s linear forwards}
.pad-box.hold .pad-bar i{animation-play-state:paused}
@keyframes padRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pad-overlay,.pad-box{transition:none}}

/* ---------- confirm popup (replaces the browser's default yes/no box) ---------- */
.cf-overlay{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background:rgba(14,6,30,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.cf-overlay.show{opacity:1}
.cf-card{width:min(400px,100%);padding:26px 24px 22px;border-radius:22px;background:var(--surface,#fff);color:var(--text,#2b1f18);border:1px solid var(--border,#f0e0d2);box-shadow:0 30px 80px -20px rgba(40,10,100,.55);text-align:center;transform:translateY(14px) scale(.96);transition:transform .2s}
.cf-overlay.show .cf-card{transform:none}
.cf-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center}
.cf-ico.danger{background:rgba(229,57,53,.12);color:#e53935}.cf-ico.warn{background:rgba(219,80,21,.12);color:#DB5015}
.cf-card h3{margin:0 0 6px;font-size:19px}.cf-card p{margin:0;color:var(--text,#2b1f18);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.cf-card small{display:block;margin-top:6px;color:var(--muted,#6b6585);font-size:13px}
.cf-actions{display:flex;gap:10px;margin-top:20px}.cf-actions .btn{flex:1;justify-content:center;min-height:46px}
html.cf-lock{overflow:hidden}
@media (max-width:520px){.cf-overlay{place-items:end center;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.cf-card{border-radius:22px}}
@media (prefers-reduced-motion:reduce){.cf-overlay,.cf-card{transition:none}}
.card-note{margin:0;padding:18px 20px;color:var(--muted);font-size:14px;line-height:1.6}
.card .card-note{padding:18px 20px}
.cf-actions .btn-danger{background:var(--danger,#e5334f);border-color:transparent;color:#fff}.cf-actions .btn-danger:hover{filter:brightness(.92)}

/* ======================================================================
   MOBILE HARDENING: every page must fit any phone (320px and up)
   ====================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}
.pd-layout>*,.co-layout>*,.acc-layout>*,.two-col>*,.shop-area>*,.products-page>*,.contact-grid>*,.doc-layout>*,.auth-card>*{min-width:0}
.pd-info,.pd-title>div,.pd-title h1,.doc-body,.tk-msg p,.p-name,.line-items b{overflow-wrap:anywhere}
.menu-theme{display:none}.login-short{display:none}
@media (max-width:760px){
  input,select,textarea{font-size:16px}
  .container{width:calc(100% - 32px)}
  .btn{min-height:44px}.btn-sm{min-height:38px}
  .to-top{right:14px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .toast-wrap{left:12px;right:12px;width:auto}
}
@media (max-width:1000px){.menu-theme{display:inline-flex;justify-content:center}}
@media (max-width:420px){
  .header-inner{width:calc(100% - 24px);gap:8px}
  .header-actions{gap:6px}.icon-btn{width:38px;height:38px;border-radius:11px}
  #themeToggle{display:none}
  .brand-name{font-size:16px}.header-actions .btn-sm{padding:8px 12px}
  .login-long{display:none}.login-short{display:inline}
  .badge{top:-6px;right:-6px}
}
/* notification / cookie sheet: bottom sheet on phones, above the home-bar */
@media (max-width:720px){
  .consent{left:0;right:0;bottom:0;width:100%;transform:translate(0,110%);border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-bottom:0}
  .consent.show{transform:none}.consent.bye{transform:translate(0,110%)}
  .consent-actions{flex-direction:column}.consent-actions .btn{width:100%;min-height:46px}
  body:has(.consent) .to-top{opacity:0;pointer-events:none}
}

/* ---------- custom tooltip (tooltip.js) ---------- */
.dt-tip{position:fixed;z-index:9999;max-width:min(260px,calc(100vw - 16px));padding:7px 12px;border-radius:10px;background:#2b1f18;color:#fff;font:600 12.5px/1.35 var(--font);letter-spacing:.01em;text-align:center;pointer-events:none;opacity:0;transform:translateY(4px) scale(.96);transition:opacity .14s ease,transform .14s ease;box-shadow:0 12px 28px -10px rgba(40,10,100,.55),0 0 0 1px rgba(219,80,21,.28);overflow-wrap:anywhere}
.dt-tip.below{transform:translateY(-4px) scale(.96)}
.dt-tip.on{opacity:1;transform:none}
.dt-tip i{position:absolute;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#2b1f18;transform:rotate(45deg);border-radius:2px;box-shadow:1px 1px 0 rgba(219,80,21,.28)}
.dt-tip.below i{bottom:auto;top:-5px;box-shadow:-1px -1px 0 rgba(219,80,21,.28)}
[data-theme="dark"] .dt-tip{background:#2b1f18;box-shadow:0 14px 30px -10px rgba(0,0,0,.8),0 0 0 1px rgba(219,80,21,.35)}
[data-theme="dark"] .dt-tip i{background:#2b1f18}
@media (prefers-reduced-motion:reduce){.dt-tip{transition:none}}

/* iPhone "add to Home Screen" guide */
.ios-guide{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px;background:rgba(20,10,40,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.ios-guide.show{opacity:1}
.ios-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface,#fff);color:var(--text,#1a1033);border:1px solid var(--border);border-radius:22px;padding:24px 20px 20px;box-shadow:0 24px 60px rgba(219,80,21,.35);transform:translateY(14px);transition:transform .25s}
.ios-guide.show .ios-card{transform:none}
.ios-card h3{margin:0 34px 6px 0;font-size:19px}
.ios-sub{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5}
.ios-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.ios-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.ios-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:14px}
.ios-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff}
.ios-steps div{min-width:0}.ios-steps b{display:block;font-size:15px}.ios-steps small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
.ios-note{margin:0 0 14px;color:var(--muted);font-size:12.5px}
.ios-ok{width:100%}


/* ===== v22 · phone polish (all pages) ===== */
html{-webkit-tap-highlight-color:transparent}
body{overflow-x:clip}
img,video,iframe{max-width:100%}
@media (max-width:760px){
  .container{width:min(1440px,100% - 28px)}
  input,select,textarea{font-size:16px}
  .btn{min-height:44px}.btn-sm{min-height:38px}
  h1,h2,h3{overflow-wrap:anywhere}
  .big-title{font-size:clamp(24px,7vw,30px)}
  table{max-width:100%}
}

/* ===== v24 · dropdown lists (select): one clean look with our own arrow ===== */
select:not([multiple]):not([size]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2571a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;text-overflow:ellipsis}
select:not([multiple]):not([size]):hover{border-color:var(--primary-2)}
select::-ms-expand{display:none}


/* ===== v29 · footer: short About text under the Shop links ===== */
.foot-about{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:13.5px;line-height:1.65}
.foot-about b{display:block;margin-bottom:6px;color:var(--text);font-size:14px}
.foot-about p{margin:0 0 8px}
.footer-col .foot-more{display:inline-block;padding:0;font-size:13.5px;font-weight:700;color:var(--primary)}


/* ===== v30 · footer: the Contact column (with the About text) gets the most room ===== */
@media (min-width:861px){.footer-top{grid-template-columns:1.3fr .8fr .9fr 1.9fr}}
@media (max-width:860px){.footer-col:last-child{grid-column:1/-1}}
.foot-about{max-width:46ch}

/* password eye */
.pw-wrap{position:relative;display:block;width:100%}.pw-wrap>input{width:100%;padding-right:46px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.pw-eye:hover{color:var(--primary)}.pw-eye:focus-visible{outline:2px solid var(--primary)}