/* Adviyat — app layer. Phones and tablets (html.app: width ≤ 1024, or a touch screen ≤ 1366) get a native-app
   shell: compact top bar with search, bottom tab bar, bottom sheets for product / cart / payment, a focused
   checkout with a sticky action bar. Desktop keeps the store's own layout. Colours come from the store's :root. */
:root{--ad-top:56px;--ad-tab:60px;--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);--ad-mut:#5d7469;}

/* ── every mode: touch polish + visible focus ── */
html{-webkit-text-size-adjust:100%;}
button,a,.pm,.card-img,.cat-pill{-webkit-tap-highlight-color:transparent;}
button:focus-visible,.pm:focus-visible,a:focus-visible,.cat-pill:focus-visible{outline:2px solid var(--grn);outline-offset:2px;}
@media (hover:none){
 .card:hover{transform:none;box-shadow:none;}.card:hover .card-img img{transform:none;}
 .btn-primary:hover,.btn-amber:hover,.admin-fab:hover{transform:none;box-shadow:none;}
}
.ad-how{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.ad-how{grid-template-columns:1fr 1fr!important;gap:12px!important;}}
.nav .ad-mo{display:inline-flex;align-items:center;gap:6px;}
.succ-ic svg{width:46px;height:46px;}
.ad-copy{border:1px solid var(--line);background:var(--off);color:var(--grndk);font:600 .74rem Inter,sans-serif;padding:6px 12px;border-radius:100px;margin-left:10px;vertical-align:middle;}
.succ-id{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;}
.ad-succ-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.ad-succ-acts .btn-primary{margin:0!important;}
.ad-btn2{background:#fff;color:var(--grndk);border:1.5px solid var(--faint);padding:13px 22px;border-radius:100px;font-size:.94rem;font-weight:600;}
@keyframes adUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes adFade{from{opacity:0}to{opacity:1}}
@keyframes adPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.succ-ic{animation:adPop .5s cubic-bezier(.2,.8,.2,1) both;}

/* ── generic sheet (categories, my orders, install help) ── */
.ad-sheet-ov{position:fixed;inset:0;z-index:1600;background:rgba(16,38,31,.5);display:none;animation:adFade .2s;}
.ad-sheet-ov.on{display:block;}
.ad-sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:min(80vh,720px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:20px;box-shadow:var(--sh-lg);padding:20px 20px 22px;}
.ad-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.ad-sheet-h h3{font-family:'Figtree',sans-serif;font-size:1.15rem;font-weight:700;color:var(--grndk);}
.ad-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font-size:.95rem;flex:none;}
.ad-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ad-cat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--off);text-align:left;color:var(--ink);min-height:96px;}
.ad-cat i{font-style:normal;font-size:1.5rem;line-height:1;}
.ad-cat b{font-size:.84rem;font-weight:600;line-height:1.25;}
.ad-cat span{font-size:.7rem;color:var(--ad-mut);font-variant-numeric:tabular-nums;}
.ad-cat.on{border-color:var(--grn);background:var(--grnlt);}
.ad-ord{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;}
.ad-ord .o{font-family:'Figtree',sans-serif;font-weight:700;color:var(--grndk);}
.ad-ord .d{font-size:.74rem;color:var(--ad-mut);font-variant-numeric:tabular-nums;}
.ad-ord .a{font-family:'Figtree',sans-serif;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.ad-ord .i{grid-column:1/-1;font-size:.78rem;color:var(--body);line-height:1.4;}
.ad-ord .act{grid-column:1/-1;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px;}
.ad-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:100px;}
.ad-pill.paid{background:var(--ok-bg);color:var(--grndk);}
.ad-pill.wait{background:var(--amber-bg);color:#92400e;}
.ad-pill.no{background:var(--red-bg);color:#991b1b;}
.ad-chk{border:1.5px solid var(--faint);background:#fff;color:var(--grndk);font-weight:600;font-size:.76rem;padding:7px 12px;border-radius:100px;}
.ad-empty{text-align:center;color:var(--ad-mut);padding:28px 8px;font-size:.88rem;}
.ad-help ol{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--body);}
.ad-help .ad-share{display:inline-flex;vertical-align:-4px;}

/* ── install banner + offline notice ── */
.ad-install{position:fixed;left:12px;right:12px;bottom:calc(var(--ad-tab) + var(--sa-b) + 10px);z-index:780;display:none;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 10px 10px 12px;box-shadow:var(--sh-md);animation:adFade .25s;}
.ad-install.on{display:flex;}
.ad-install img{width:40px;height:40px;border-radius:10px;flex:none;}
.ad-install .tx{flex:1;min-width:0;font-size:.8rem;line-height:1.35;color:var(--body);}
.ad-install .tx b{display:block;color:var(--ink);font-size:.86rem;}
.ad-install .go{background:var(--grn);color:#fff;border:0;border-radius:100px;padding:9px 14px;font-weight:700;font-size:.8rem;flex:none;}
.ad-install .no{background:none;border:0;color:var(--ad-mut);width:32px;height:32px;font-size:.9rem;flex:none;}
.ad-off{position:fixed;left:0;right:0;top:0;z-index:2100;display:none;justify-content:center;padding:calc(var(--sa-t) + 6px) 12px 6px;background:#92400e;color:#fff;font-size:.78rem;font-weight:600;text-align:center;}
.ad-off.on{display:flex;}

/* ── tab bar + checkout bar exist only in app mode ── */
.ad-tabs,.ad-cobar{display:none;}

/* ═════════════ APP MODE (phones + tablets) ═════════════ */
.app body{padding-bottom:calc(var(--ad-tab) + var(--sa-b));overscroll-behavior-y:none;}
.app.ad-co body{padding-bottom:0;}
.app .admin-fab{display:none;}

/* top bar */
.app .nav{height:calc(var(--ad-top) + var(--sa-t));padding:var(--sa-t) 12px 0;gap:10px;}
.app .nav-right,.app .hamb{display:none!important;}
.app .brand{gap:8px;}
.app .brand-mark{width:34px;height:34px;border-radius:10px;font-size:1.05rem;}
.app .brand-name{font-size:1.06rem;}
.app .nav-search{display:block!important;flex:1;max-width:none;}
.app .nav-search input{font-size:16px;height:40px;padding:8px 14px 8px 36px;}
.app .nav-search .si{left:13px;font-size:.85rem;}
@media (max-width:420px){.app .brand-name{display:none;}}

/* category chips */
.app .catbar{top:calc(var(--ad-top) + var(--sa-t));background:rgba(245,250,248,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.app .catbar-in{padding:8px 12px;gap:8px;scroll-snap-type:x proximity;}
.app .cat-pill{padding:8px 14px;margin:0;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:.82rem;color:var(--body);scroll-snap-align:start;}
.app .cat-pill.on{background:var(--grndk);border-color:var(--grndk);color:#fff;}
.app .cat-pill.on .n{color:rgba(255,255,255,.75);}

/* hero + trust */
.app .hero{padding:22px 16px 24px;}
.app .hero-in{gap:22px;}
.app .hero-pill{font-size:.7rem;margin-bottom:12px;padding:5px 12px;}
.app .hero h1{font-size:clamp(1.75rem,6.4vw,2.5rem);margin-bottom:10px;}
.app .hero p{font-size:.95rem;margin-bottom:16px;}
.app .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.app .hero-cta button{justify-content:center;padding:12px 14px;font-size:.9rem;}
.app .hero-feat{grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;max-width:none;}
.app .hf{padding:9px 10px;}
.app .trust{padding:10px 0;}
.app .trust-in{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 16px;gap:18px;}
.app .trust-in::-webkit-scrollbar{display:none;}
.app .trust-it{white-space:nowrap;}
@media (max-width:640px){.app .hero-visual{display:none;}}
@media (min-width:641px){.app .hero-in{grid-template-columns:1.15fr .85fr;}.app .hero-visual{max-width:none;}}

/* catalogue */
.app .wrap{padding:18px 12px 28px;}
.app .sec-head{margin-bottom:14px;align-items:center;}
.app .sec-head h2{font-size:1.25rem;}
.app .sort select{font-size:16px;padding:8px 12px;}
.app .grid{grid-template-columns:1fr 1fr;gap:10px;}
@media (min-width:600px){.app .grid{grid-template-columns:repeat(3,1fr);gap:12px;}}
@media (min-width:860px){.app .grid{grid-template-columns:repeat(4,1fr);}}
.app .card{border-radius:14px;}
.app .card:active{transform:scale(.985);}
.app .card-bd{padding:10px;}
.app .card-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.app .btn-add{min-height:36px;padding:7px 13px;}
.app .qty-step button{width:34px;height:36px;}
.app #how{padding:32px 16px!important;}
.app #how h2{font-size:1.35rem!important;}
.app #how p{margin-bottom:22px!important;}
.app .ft{padding:30px 16px 22px;margin-top:20px;}
.app .ft-grid{gap:22px;margin-bottom:22px;}
.app .toast{bottom:calc(var(--ad-tab) + var(--sa-b) + 12px);max-width:calc(100% - 32px);border-radius:14px;white-space:normal;text-align:center;justify-content:center;}
.app.ad-co .toast{bottom:calc(var(--sa-b) + 110px);}

/* bottom tab bar */
.app .ad-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:800;height:calc(var(--ad-tab) + var(--sa-b));padding:0 4px var(--sa-b);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);}
.app.ad-co .ad-tabs{display:none;}
.ad-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--ad-mut);font:600 .66rem Inter,sans-serif;letter-spacing:.01em;-webkit-user-select:none;user-select:none;}
.ad-tab .ic{width:54px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.ad-tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ad-tab[aria-current="page"]{color:var(--grndk);}
.ad-tab[aria-current="page"] .ic{background:var(--grnlt);}
.ad-tab:active .ic{background:var(--paper);}
.ad-badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--amber);color:#fff;font-size:.62rem;font-weight:700;display:none;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.ad-badge.show{display:flex;}

/* product sheet */
.app .ov{padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
.app .ov.on{align-items:flex-end;}
.app .modal{position:relative;max-width:none;margin:0;border-radius:22px 22px 0 0;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;animation:adUp .3s cubic-bezier(.2,.8,.2,1);}
.app .modal::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(16,38,31,.18);z-index:4;}
.app .modal-img{aspect-ratio:auto;height:min(44vh,380px);background:#fff;}
.app .modal-img img{object-fit:contain;}
.app .modal-x{top:14px;right:14px;width:38px;height:38px;}
.app .modal-bd{padding:16px 16px 0;}
.app .modal-bd h2{font-size:1.3rem;}
.app .modal-desc{font-size:.9rem;margin-bottom:12px;}
.app .modal-pr{margin-bottom:6px;}
.app [id^="macts-"]{position:sticky;bottom:0;background:#fff;padding:12px 0 calc(14px + var(--sa-b));margin-top:4px;}
.app .btn-buy{min-height:50px;}
@media (min-width:641px){
 .app .ov.on{align-items:center;padding:24px;}
 .app .modal{max-width:720px;border-radius:22px;max-height:90dvh;animation:adFade .2s;}
 .app .modal::before{display:none;}
 .app .modal-grid{grid-template-columns:1fr 1fr;}
 .app .modal-img{height:auto;aspect-ratio:1;}
 .app .modal-bd{padding:22px 22px 0;}
}

/* cart: bottom sheet on phones, side drawer on tablets */
.app .drawer-f{padding:12px 16px calc(12px + var(--sa-b));}
.app .ci-qty button{width:34px;height:34px;}
.app .btn-checkout{min-height:52px;}
@media (max-width:640px){
 .app .drawer{top:auto;left:0;right:0;width:100%;height:min(88dvh,760px);border-radius:22px 22px 0 0;transform:translateY(105%);}
 .app .drawer.on{transform:none;}
 .app .drawer-h{position:relative;background:#fff;border-bottom:1px solid var(--line);padding:22px 16px 12px;border-radius:22px 22px 0 0;}
 .app .drawer-h::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(16,38,31,.18);}
 .app .drawer-h h3{color:var(--grndk);}
 .app .drawer-x{background:var(--paper);color:var(--ink);width:34px;height:34px;}
 .app .ad-sheet{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:86dvh;border-radius:22px 22px 0 0;padding:26px 16px calc(18px + var(--sa-b));animation:adUp .28s cubic-bezier(.2,.8,.2,1);}
 .app .ad-sheet::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(16,38,31,.18);}
 .app .ad-cats{grid-template-columns:1fr 1fr;}
}

/* checkout: own top bar, collapsible summary, sticky action bar */
.app.ad-co .nav{display:none;}
.app.ad-co .ad-cobar{display:flex;position:sticky;top:0;z-index:700;height:calc(var(--ad-top) + var(--sa-t));padding:var(--sa-t) 10px 0 4px;align-items:center;gap:4px;background:#fff;border-bottom:1px solid var(--line);}
.ad-cobar .bk{width:44px;height:44px;border:0;background:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;}
.ad-cobar .bk svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ad-cobar .t{flex:1;min-width:0;}
.ad-cobar .t b{display:block;font-family:'Figtree',sans-serif;font-size:1.02rem;line-height:1.2;color:var(--ink);}
.ad-cobar .t span{font-size:.74rem;color:var(--ad-mut);}
.ad-cobar .lk{font-size:.7rem;font-weight:700;color:var(--grndk);background:var(--grnlt);padding:5px 10px;border-radius:100px;white-space:nowrap;}
.app .co-back,.app .co-wrap>h2{display:none!important;}
.app .co-wrap{padding:12px 12px 18px;}
.app .co-steps{margin-bottom:12px;}
.app .co-sn{width:26px;height:26px;font-size:.74rem;}
.app .co-grid{display:flex;flex-direction:column;align-items:stretch;gap:12px;}
.app .osum{position:static;order:-1;padding:12px 16px;border-radius:14px;}
.app .osum h4{display:flex;justify-content:space-between;align-items:center;margin:0;cursor:pointer;font-size:.92rem;}
.app .osum h4::after{content:"";width:9px;height:9px;border-right:2px solid var(--ad-mut);border-bottom:2px solid var(--ad-mut);transform:rotate(45deg);margin:-4px 4px 0 10px;transition:transform .2s;}
.app .osum.ad-open h4::after{transform:rotate(-135deg);margin-top:4px;}
.app .osum:not(.ad-open) .osum-it,.app .osum:not(.ad-open) .osum-row{display:none;}
.app .osum.ad-open h4{margin-bottom:8px;}
.app .osum-tot{padding-top:8px;margin-top:8px;}
.app .co-card{padding:18px 16px 0;border-radius:14px;}
.app .co-card h3{font-size:1.02rem;margin-bottom:14px;padding-bottom:10px;}
.app .fg input,.app .fg select,.app .fdx-f input,.app .fdx-f select,.app .adm-search{font-size:16px;min-height:48px;}
.app .fg label{font-size:.78rem;}
.app .pm{min-height:64px;padding:12px 14px;}
.app .pm:active{background:var(--paper);}
.app .pay-note{padding-bottom:16px;}
.app .ad-cta{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;background:#fff;margin:14px -16px 0;padding:12px 16px calc(12px + var(--sa-b));border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(16,38,31,.06);border-radius:0 0 14px 14px;}
.app .ad-cta .btn-next{margin-top:0;min-height:50px;font-size:1rem;width:auto;}
.app .ad-cta>.btn-next:last-child{flex:1;}
.ad-cta-sum{display:none;}
.app .ad-cta-sum{display:flex;flex-basis:100%;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--ad-mut);}
.app .ad-cta-sum b{font-family:'Figtree',sans-serif;font-size:1.1rem;color:var(--grndk);font-variant-numeric:tabular-nums;}
.app #costep3 #review>div{border-radius:12px;}
@media (max-width:640px){.app .fg-row{grid-template-columns:1fr;gap:0;}}
@media (min-width:641px){.app .pm-grid{grid-template-columns:1fr 1fr;}.app .co-wrap{max-width:760px;}}

/* payment (Flowdexx sheet): bottom sheet on phones, centred card on tablets */
.app .fdx-ov{align-items:flex-end;padding:0;}
.app .fdx-card{position:relative;max-width:none;margin:0;border-radius:24px 24px 0 0;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;animation:adUp .3s cubic-bezier(.2,.8,.2,1);}
.app .fdx-card::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,255,255,.4);}
.app .fdx-top{padding:24px 18px 16px;}
.app .fdx-x{width:40px;height:40px;}
.app .fdx-body{padding:18px;}
.app .fdx-btn{min-height:50px;font-size:1rem;}
.app .fdx-alt button{min-height:48px;}
.app .fdx-foot{padding:10px 18px calc(12px + var(--sa-b));}
@media (min-width:641px){
 .app .fdx-ov{align-items:center;padding:24px;}
 .app .fdx-card{max-width:460px;border-radius:22px;animation:adFade .2s;}
 .app .fdx-card::before{display:none;}
}

/* order completion */
.app #success{min-height:calc(100dvh - var(--ad-top) - var(--ad-tab));}
.app .succ{margin:28px auto 24px;padding:0 16px;}
.app .succ h2{font-size:1.45rem;}
.app .succ-steps{padding:16px;}
.app .ad-succ-acts{display:grid;grid-template-columns:1fr 1fr;}
.app .ad-succ-acts button{justify-content:center;min-height:50px;white-space:nowrap;font-size:.9rem;padding:12px 10px;}

/* store admin on a phone */
.app .adm-nav{padding:var(--sa-t) 14px 0;height:calc(60px + var(--sa-t));}
.app .adm-wrap{padding:16px 12px;}
.app .adm-tabs{width:100%;overflow-x:auto;}
.app .adm-tab{flex:1;white-space:nowrap;padding:9px 12px;}
.app .adm-login{margin:24px auto;padding:24px 18px;}
.app .adm-stats{gap:10px;}
@media (max-width:640px){.app .adm-stats{grid-template-columns:1fr 1fr;}.app .adm-search{min-width:0;width:100%;}}
.app .ad-install{display:none;}
.app .ad-install.on{display:flex;}
@media (min-width:641px){.app .ad-install{left:auto;right:16px;width:380px;}}

@media (prefers-reduced-motion:reduce){
 .succ-ic,.app .modal,.app .fdx-card,.app .ad-sheet,.ad-sheet-ov,.ad-install{animation:none!important;}
 .app .drawer{transition:none;}
}