/* =====================================================================
   DAAK — MOBILE APP LAYER
   Linked (with media="(max-width: 767.98px)") from partials/app-head.php,
   AFTER style.css, so on phones every storefront page behaves like a
   native shopping app: compact top bar + back button, one bottom tab
   bar, bottom-sheet modals, sticky action bars, list-style menus, swipe
   rails, native-feeling touch feedback and page transitions.

   Nothing here loads on tablets/desktop. Colours come from the theme
   variables, so it follows the dark-mode toggle automatically.
   `html[data-page]` is set by partials/app-head.php on every page; it is
   only used to win specificity over the older responsive rules.
   ===================================================================== */

:root{
  --app-tab-h:62px;
  --app-safe-b:env(safe-area-inset-bottom,0px);
  --app-safe-t:env(safe-area-inset-top,0px);
  --app-ease:cubic-bezier(.22,.9,.3,1);
}

/* ---------- 1. Base: feel like an app, not a web page -------------- */
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; touch-action:manipulation; scroll-behavior:auto; }
html[data-page] body{
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--app-tab-h) + var(--app-safe-b) + 10px) !important;
  font-size:15px;
}
html[data-page] main{ min-height:60vh; }
html[data-page] .container{ padding-left:14px; padding-right:14px; }
a,button,[role="button"],.product-card,.dk-tile,.promo-strip-v2-card{ -webkit-touch-callout:none; }
input,select,textarea{ font-size:16px !important; }          /* stops iOS zoom-on-focus */
html[data-page] .daak-breadcrumb{ display:none !important; } /* the app bar's back button replaces it */

/* installed (standalone) mode: no text-selection chrome, like a native app */
html.is-app body{ -webkit-user-select:none; user-select:none; }
html.is-app input,html.is-app textarea,html.is-app .copyable{ -webkit-user-select:text; user-select:text; }

/* ---------- 2. Announcement strip: slim -------------------------------- */
.daak-announcement-inner{ padding:7px 12px !important; font-size:.76rem !important; gap:8px !important; }
.daak-announcement-inner > span{ line-height:1.35; }
.daak-qr-install-card{ display:none !important; }             /* "scan to install" makes no sense on the phone itself */

/* ---------- 3. Top app bar ------------------------------------------------ */
html[data-page] .daak-modern-header{
  position:sticky !important; top:0; z-index:1045;
  background:var(--app-bar-bg, var(--daak-surface)) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--daak-line) !important; box-shadow:none !important;
  padding-top:var(--app-safe-t);
  transition:transform .3s var(--app-ease);
  view-transition-name:app-bar;
}
html[data-page] .daak-modern-header.hdr-hidden{ transform:translateY(-101%); }
html[data-page] .daak-nav-shell{ padding-left:12px !important; padding-right:12px !important; }
html[data-page] .daak-nav-main{ min-height:54px !important; gap:6px !important; padding:0 !important; }
html[data-page] .daak-brand img,html[data-page] .brand-logo-img{ height:30px !important; width:auto; }

/* right-hand actions: only theme toggle + cart (+ menu) survive on a phone */
html[data-page] .daak-nav-actions{ gap:2px !important; margin-left:auto; }
html[data-page] .daak-nav-actions .daak-sell-link,
html[data-page] .daak-nav-actions .daak-action,
html[data-page] .daak-nav-actions .daak-login-btn,
html[data-page] .daak-nav-actions .daak-account{ display:none !important; }
html[data-page] .daak-theme-toggle{ height:40px; min-width:40px; }
html[data-page] .daak-cart-btn{ height:40px !important; padding:0 8px !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
html[data-page] .daak-cart-btn span:not(#cartCount){ display:none !important; }   /* icon + badge only */
html[data-page] .daak-menu-btn{ width:40px !important; height:40px !important; border:0 !important; background:transparent !important; }

/* inner pages: back arrow + title instead of the logo */
html:not([data-page="index"]) .daak-brand{ display:none !important; }
html:not([data-page="index"]) .daak-back-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; margin-left:-8px; border-radius:50%;
  color:var(--ink); font-size:1.25rem; text-decoration:none; flex:none;
}
html:not([data-page="index"]) .daak-back-btn:active{ background:var(--cream-2); }
html:not([data-page="index"]) .daak-app-title{
  display:block; font-weight:700; font-size:1.02rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;
}
html:not([data-page="index"]):not([data-page="shop"]) .daak-search-row,
html:not([data-page="index"]):not([data-page="shop"]) .daak-cat-chips{ display:none !important; }

/* search + delivery location (home & shop) */
html[data-page] .daak-search-row{ display:flex !important; flex-direction:column; align-items:stretch !important; justify-content:flex-start !important; gap:8px; padding:0 0 10px !important; width:100%; }
html[data-page] .daak-location-pill{
  display:flex !important; order:-1; height:auto !important; min-height:0; padding:2px 2px 0 !important; margin:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important; font-size:.78rem; gap:6px; align-items:center; justify-content:flex-start;
}
html[data-page] .daak-location-pill strong{ font-weight:700; }
html[data-page] .daak-search-box{ height:44px !important; border-radius:14px !important; width:100%; max-width:none; margin:0 !important; }
html[data-page] .daak-search-box button{ width:34px; height:34px; border-radius:11px; }

/* category chips */
html[data-page="index"] .daak-cat-chips,
html[data-page="shop"] .daak-cat-chips{
  display:flex !important; gap:8px; overflow-x:auto; padding:0 0 11px; margin:0 -12px; padding-left:12px; padding-right:12px;
  scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding:0 12px;
}
.daak-cat-chips::-webkit-scrollbar{ display:none; }
.daak-cat-chips .chip{
  flex:0 0 auto; scroll-snap-align:start; padding:7px 14px; border-radius:999px; font-size:.78rem; font-weight:650;
  background:var(--cream-2); color:var(--ink); text-decoration:none; border:1px solid transparent; white-space:nowrap;
}
.daak-cat-chips .chip.active{ background:var(--ink-grad); color:#fff; }
.daak-cat-chips .chip:active{ transform:scale(.96); }

/* hamburger "More" menu: drops down as a clean list */
html[data-page] #daakMobileMenu{ position:absolute; left:0; right:0; top:100%; background:var(--daak-surface); border-bottom:1px solid var(--daak-line); box-shadow:0 18px 30px rgba(21,12,43,.16); max-height:70vh; overflow:auto; }
html[data-page] .daak-mobile-menu{ display:block !important; padding:6px 12px 12px !important; }
html[data-page] .daak-mobile-menu a{ display:flex !important; align-items:center; gap:10px; min-height:50px !important; padding:0 6px !important; border:0 !important; border-bottom:1px solid var(--daak-line) !important; border-radius:0 !important; background:transparent !important; font-weight:600; color:var(--ink); }
html[data-page] .daak-mobile-menu a:last-child{ border-bottom:0 !important; }
.daak-mobile-install{ color:var(--teal) !important; }

/* ---------- 4. Bottom tab bar (the only one) ------------------------------- */
.mobile-bottom-nav{ display:none !important; }                 /* legacy JS-injected bar */
html[data-page] .daak-mobile-bottom-nav{
  display:grid !important; grid-template-columns:repeat(5,1fr);
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  height:calc(var(--app-tab-h) + var(--app-safe-b)); padding:6px 4px calc(var(--app-safe-b) + 2px);
  background:var(--daak-surface) !important; backdrop-filter:none !important;
  border-top:1px solid var(--daak-line) !important; box-shadow:0 -8px 26px rgba(21,12,43,.07) !important;
  view-transition-name:app-tabs;
}
html[data-page] .daak-bottom-item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-soft) !important; font-size:.64rem !important; font-weight:700; letter-spacing:.01em; text-decoration:none !important; line-height:1;
}
html[data-page] .daak-bottom-item i{ font-size:1.32rem; line-height:1; transition:transform .25s var(--app-ease); }
html[data-page] .daak-bottom-item.active{ color:var(--teal) !important; }
html[data-page] .daak-bottom-item.active i{ transform:translateY(-1px) scale(1.06); }
html[data-page] .daak-bottom-item.active::before{
  content:""; position:absolute; top:-7px; left:50%; width:26px; height:3px; margin-left:-13px; border-radius:0 0 4px 4px; background:var(--accent-grad);
}
html[data-page] .daak-bottom-item:active i{ transform:scale(.86); }
html[data-page] .daak-bottom-item b{
  position:absolute; top:1px; left:50%; margin-left:6px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--coral); color:#fff; font-size:.6rem; line-height:17px; text-align:center; box-shadow:0 0 0 2px var(--daak-surface);
}

/* screens that own the bottom edge with an action bar instead of the tab bar */
html[data-page="product"] .daak-mobile-bottom-nav,
html[data-page="checkout"] .daak-mobile-bottom-nav{ display:none !important; }
html[data-page="product"] body,
html[data-page="checkout"] body{ padding-bottom:calc(84px + var(--app-safe-b)) !important; }
html[data-page="cart"] body{ padding-bottom:calc(var(--app-tab-h) + 74px + var(--app-safe-b)) !important; }
html[data-page="product"] .daak-support-fab,
html[data-page="checkout"] .daak-support-fab,
html[data-page="cart"] .daak-support-fab{ display:none !important; }
html[data-page] .daak-support-fab{ bottom:calc(var(--app-tab-h) + var(--app-safe-b) + 14px) !important; right:14px !important; }

/* ---------- 5. Sticky action bars (cart total, product buy box) -------------- */
.app-cta-bar{
  position:fixed; left:0; right:0; z-index:1090; display:flex !important; align-items:center; gap:14px;
  padding:10px 14px calc(10px + var(--app-safe-b)); background:var(--daak-surface);
  border-top:1px solid var(--daak-line); box-shadow:0 -10px 28px rgba(21,12,43,.10);
}
.app-cta-bar.above-tabs{ bottom:calc(var(--app-tab-h) + var(--app-safe-b)); padding-bottom:10px; }
.app-cta-bar .cta-total{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.app-cta-bar .cta-total small{ font-size:.68rem; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.app-cta-bar .cta-total strong{ font-size:1.2rem; }
.app-cta-bar .btn-marigold{ flex:1; margin:0 !important; text-align:center; }

html[data-page="product"] .pdp-actions{
  position:fixed !important; left:0; right:0; bottom:0; z-index:1090; margin:0 !important; flex-wrap:nowrap !important; gap:10px !important;
  padding:10px 14px calc(10px + var(--app-safe-b)); background:var(--daak-surface);
  border-top:1px solid var(--daak-line); box-shadow:0 -10px 28px rgba(21,12,43,.10);
}
html[data-page="product"] .pdp-actions .btn-ink,
html[data-page="product"] .pdp-actions .btn-marigold{ min-width:0 !important; flex:1 1 0 !important; padding-left:8px; padding-right:8px; white-space:nowrap; }
html[data-page="product"] .pdp-actions .icon-btn{ flex:0 0 50px; width:50px; height:50px; }
.cart-place-order{ display:none !important; }

/* ---------- 6. Buttons & touch feedback ---------------------------------------- */
html[data-page] .btn-marigold,html[data-page] .btn-ink,html[data-page] .btn-outline-ink,
html[data-page] .btn-primary-site,html[data-page] .btn-site-submit{ min-height:48px; border-radius:14px !important; font-size:.95rem; }
html[data-page] .btn-marigold:active,html[data-page] .btn-ink:active,html[data-page] .btn-outline-ink:active,
html[data-page] .add-cart-btn:active,html[data-page] .icon-btn:active,html[data-page] .qty-stepper button:active{ transform:scale(.96) !important; filter:brightness(.96); }
html[data-page] .qty-stepper button{ min-width:40px; min-height:40px; }
@media (hover:none){
  .product-card:hover,.dk-tile:hover,.promo-strip-v2-card:hover,.category-card:hover,.value-deal-tile:hover{ transform:none !important; box-shadow:var(--shadow-1); }
  .btn-marigold:hover,.btn-ink:hover,.btn-outline-ink:hover{ transform:none !important; }
}

/* ---------- 7. Content rhythm ---------------------------------------------------- */
html[data-page] .section-pad{ padding-top:14px !important; padding-bottom:14px !important; }
html[data-page] .section-head{ margin-bottom:10px !important; }
html[data-page] .section-head h2,html[data-page] .band-header h2{ font-size:1.12rem !important; }
html[data-page] .dk-band{ padding:16px 14px 18px !important; margin-bottom:16px !important; border-radius:20px !important; }
html[data-page] h1.font-display,html[data-page] .page-title{ font-size:1.35rem !important; }

/* product grid: tight 2-up cards with a single add button */
html[data-page] #shopGrid,html[data-page] .row.g-3{ --bs-gutter-x:10px; --bs-gutter-y:10px; }
html[data-page] .product-card{ border-radius:16px !important; }
html[data-page] .product-card .buy-now-btn{ display:none !important; }
html[data-page] .product-card .add-cart-btn{ width:100%; min-height:40px; font-size:.82rem; border-radius:12px !important; }

/* ---------- 8. Shop ------------------------------------------------------------------ */
html[data-page="shop"] .sort-bar{ padding:10px 12px !important; border-radius:14px !important; margin-bottom:10px !important; gap:8px !important; }
html[data-page="shop"] .btn-outline-ink.d-lg-none{ width:100%; margin-bottom:10px !important; justify-content:center; min-height:44px; }

/* ---------- 9. Product page ------------------------------------------------------------ */
html[data-page="product"] #pdpRoot{ margin-left:-14px; margin-right:-14px; --bs-gutter-x:0; }
html[data-page="product"] #pdpRoot > [class*="col-"]{ padding-left:0; padding-right:0; }
html[data-page="product"] .gallery-main{ border-radius:0 !important; border-left:0; border-right:0; }
html[data-page="product"] .gallery-thumbs{ display:flex; overflow-x:auto; gap:8px; padding:10px 14px 4px; scrollbar-width:none; }
html[data-page="product"] .gallery-thumbs::-webkit-scrollbar{ display:none; }
html[data-page="product"] #pdpRoot > .col-lg-6:last-child{ padding:14px 14px 0; }
html[data-page="product"] .pdp-title{ font-size:1.3rem !important; line-height:1.3; }
html[data-page="product"] .stamp-badge{ transform:none !important; }

/* ---------- 10. Cart ------------------------------------------------------------------------- */
html[data-page="cart"] .summary-box{ border-radius:18px !important; padding:14px !important; }
html[data-page="cart"] .cart-line-item{ display:grid !important; grid-template-columns:78px 1fr auto; gap:12px; align-items:start; padding:12px 0 !important; }
html[data-page="cart"] .cart-line-item > img{ width:78px !important; height:78px !important; border-radius:12px; object-fit:cover; }

/* ---------- 11. Account = a native "profile" hub; sub-pages are drill-down screens ---- */
html[data-page] .customer-account-page{ padding-top:6px !important; }
html[data-page] .customer-account-shell{ display:block !important; }
html:not([data-page="account"]) .customer-account-sidebar{ display:none !important; }   /* sub-pages: use the back button */
html[data-page="account"] .customer-account-sidebar{ margin-bottom:14px; border-radius:20px !important; padding:0 !important; overflow:hidden; }
html[data-page="account"] .customer-mini-profile{ padding:18px 16px !important; }
html[data-page="account"] .customer-account-nav{ display:block !important; padding:4px 0 !important; overflow:visible !important; }
html[data-page="account"] .customer-account-nav a{
  display:flex !important; align-items:center; gap:14px; min-height:54px; margin:0 !important; padding:0 16px !important; width:100%;
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--daak-line) !important; border-radius:0 !important;
  font-size:.92rem !important; font-weight:600; color:var(--ink) !important;
}
html[data-page="account"] .customer-account-nav a:last-child{ border-bottom:0 !important; }
html[data-page="account"] .customer-account-nav a i{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--cream-2); color:var(--teal); font-size:1rem; flex:none;
}
html[data-page="account"] .customer-account-nav a.active{ background:var(--cream-2) !important; }
html[data-page="account"] .customer-account-nav a > span{ flex:1; }
html[data-page="account"] .customer-account-nav a b{ margin-left:auto; }
html[data-page="account"] .customer-account-nav a::after{ content:"\F285"; font-family:"bootstrap-icons"; font-size:.8rem; color:var(--ink-soft); flex:none; }
html[data-page="account"] .customer-account-nav a:active{ background:var(--cream-2) !important; }
html[data-page="account"] .customer-account-nav .logout-link,html[data-page="account"] .customer-account-sidebar form button{ min-height:52px; }

/* ---------- 12. Sign-in / register: full-screen form, no floating card ------------------- */
html[data-page="login"] .auth-card,html[data-page="register"] .auth-card,
html[data-page="login"] .auth-shell,html[data-page="register"] .auth-shell{ box-shadow:none !important; border-radius:0 !important; border:0 !important; background:transparent !important; }

/* ---------- 13. Bottom sheets: modals slide up from the bottom ---------------------------- */
html[data-page] .modal-dialog{
  position:fixed; left:0; right:0; bottom:0; margin:0 !important; width:100%; max-width:none !important; min-height:0 !important;
  display:flex; align-items:flex-end;
}
html[data-page] .modal.fade .modal-dialog{ transform:translateY(100%) !important; transition:transform .34s var(--app-ease) !important; }
html[data-page] .modal.show .modal-dialog{ transform:none !important; }
html[data-page] .modal-content{
  border-radius:24px 24px 0 0 !important; width:100%; max-height:90vh; overflow:auto; padding-bottom:var(--app-safe-b);
  background:var(--daak-surface); border:0 !important;
}
html[data-page] .modal-content::before{
  content:""; display:block; width:40px; height:4px; border-radius:4px; background:var(--daak-line); margin:8px auto 0; position:sticky; top:0; z-index:2;
}
html[data-page] .offcanvas-bottom{ border-radius:24px 24px 0 0 !important; padding-bottom:var(--app-safe-b); background:var(--daak-surface); }
html[data-page] .offcanvas-bottom::before{ content:""; display:block; width:40px; height:4px; border-radius:4px; background:var(--daak-line); margin:8px auto 0; }

/* ---------- 14. Toasts, footer ------------------------------------------------------------- */
html[data-page] .toast-custom{ bottom:calc(var(--app-tab-h) + var(--app-safe-b) + 14px) !important; left:14px !important; right:14px !important; transform:none; border-radius:14px; }

/* the mega-footer becomes a slim "help & policies" block */
html[data-page] .dk-mega-footer{ padding:18px 0 8px !important; margin-top:8px; }
html[data-page] .dk-mega-footer .row > div:nth-child(1),
html[data-page] .dk-mega-footer .row > div:nth-child(2),
html[data-page] .dk-mega-footer .row > div:nth-child(5),
html[data-page] .dk-mega-footer .row > div:nth-child(6){ display:none !important; }
html[data-page] .dk-mega-footer .footer-expand-row,html[data-page] .dk-mega-footer .fb-links{ display:none !important; }

/* ---------- 15. Page transitions ------------------------------------------------------------ */
@view-transition{ navigation:auto; }
::view-transition-group(app-bar),::view-transition-group(app-tabs){ animation:none; }
::view-transition-old(root){ animation:.16s ease-in both app-vt-out; }
::view-transition-new(root){ animation:.28s var(--app-ease) both app-vt-in; }
@keyframes app-vt-in{ from{ opacity:0; transform:translateX(20px); } }
@keyframes app-vt-out{ to{ opacity:0; transform:translateX(-12px); } }
@supports not (view-transition-name:none){
  html[data-page] main{ animation:app-enter .3s var(--app-ease) both; }
  @keyframes app-enter{ from{ opacity:0; transform:translateY(10px); } }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
  html[data-page] *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- 16. Pull-to-refresh indicator (installed app only, see app-shell.js) ---------- */
.daak-ptr{
  position:fixed; top:calc(var(--app-safe-t) + 8px); left:50%; z-index:1200; width:40px; height:40px; margin-left:-20px; border-radius:50%;
  display:grid; place-items:center; background:var(--daak-surface); color:var(--teal); box-shadow:0 6px 20px rgba(21,12,43,.22);
  opacity:0; transform:translateY(-60px); pointer-events:none;
}
.daak-ptr.spin i{ animation:app-spin .7s linear infinite; }
@keyframes app-spin{ to{ transform:rotate(360deg); } }

/* ---------- 17. Dark-mode touch-ups for the pieces above ---------------------------------- */
html[data-theme="dark"] .daak-bottom-item b{ box-shadow:0 0 0 2px #1A1330; }
html[data-theme="dark"] .app-cta-bar,html[data-theme="dark"][data-page="product"] .pdp-actions{ box-shadow:0 -10px 28px rgba(0,0,0,.5); }
html[data-theme="dark"][data-page] .modal-content{ background:#1A1330 !important; }
html[data-theme="dark"][data-page] #daakMobileMenu{ box-shadow:0 18px 30px rgba(0,0,0,.55); }

/* ---------- 18. Screen-specific polish ---------------------------------------------------- */
html[data-page="cart"] h1.font-display{ display:none; }                 /* app bar already says "My Cart" */
html[data-page="cart"] main .container{ padding-top:2px; }

/* footer only belongs on content pages (Home, About, Support, policies) — never on app screens */
html[data-page="shop"] .dk-mega-footer,html[data-page="product"] .dk-mega-footer,html[data-page="cart"] .dk-mega-footer,
html[data-page="checkout"] .dk-mega-footer,html[data-page="orders"] .dk-mega-footer,html[data-page="wishlist"] .dk-mega-footer,
html[data-page="compare"] .dk-mega-footer,html[data-page="login"] .dk-mega-footer,html[data-page="register"] .dk-mega-footer,
html[data-page="forgot-password"] .dk-mega-footer,html[data-page="reset-password"] .dk-mega-footer,
html[data-page^="account"] .dk-mega-footer{ display:none !important; }

/* order filters: one swipeable row instead of wrapping onto 2–3 lines */
html[data-page="orders"] div:has(> button[data-f]){ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; gap:8px !important; margin:0 -14px 12px !important; padding:2px 14px; scrollbar-width:none; }
html[data-page="orders"] div:has(> button[data-f])::-webkit-scrollbar{ display:none; }
html[data-page="orders"] button[data-f]{ flex:0 0 auto; white-space:nowrap; }

/* sign-in / register: start under the app bar instead of floating in the middle */
html[data-page="login"] .auth-split,html[data-page="register"] .auth-split{ min-height:0 !important; display:block !important; }
html[data-page="login"] .auth-form-panel,html[data-page="register"] .auth-form-panel{ padding:14px 6px 26px !important; min-height:0 !important; align-items:flex-start !important; }
html[data-page="login"] .auth-visual-panel,html[data-page="register"] .auth-visual-panel{ display:none !important; }

/* the floating support bubble covered primary buttons (e.g. "Sign In") — keep it on Home only;
   Support stays one tap away in the ☰ menu and Account → Help */
html[data-page]:not([data-page="index"]) .daak-support-fab{ display:none !important; }

/* sheets must sit above the tab bar / action bars (z-index 1090–1100) */
html[data-page] .modal{ z-index:1200 !important; }
html[data-page] .modal-backdrop{ z-index:1190 !important; }
html[data-page] .offcanvas{ z-index:1210 !important; }
html[data-page] .offcanvas-backdrop{ z-index:1205 !important; }

/* home: hero sits right under the search/chips instead of floating 45px below */
html[data-page="index"] .section-pad.pb-0{ padding-top:8px !important; }
html[data-page="index"] .banner-grid{ padding-top:4px !important; }