/* ═══════════════════════════════════════════════════════════════════════════
 * Tiger Art — se_android.css
 * Two concerns,
one file:
 *   A) DARK MODE for every breakpoint/theme,
driven by  html[data-theme]
 *      (light | dark | auto). "auto" + no attribute follow the OS setting.
 *   B) AMAZON-APP look for the android + fold storefront bands,
scoped by
 *      html[data-bp="android"] / html[data-bp="fold"] (set by index.php).
 *
 * The live page (index.php) and the shared renderer drive colour from CSS
 * custom properties: --site-header / --site-footer / --site-bg / --bg / --ink.
 * Dark mode simply remaps those,
scoped by
 *      html[data-bp="iphone"] / html[data-bp="fold"] (set by index.php).
 *
 * The live page (index.php) and the shared renderer drive colour from CSS
 * custom properties: --site-header / --site-footer / --site-bg / --bg / --ink.
 * Dark mode simply remaps those,
so it works without touching widget data.
 * Loaded AFTER index.php's inline :root block,
so these overrides win.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Amazon-ish surface tokens (light defaults) ──────────────────────────── */
:root{
  --amz-bg:#eaeded;          /* app content backdrop            */
  --amz-card:#ffffff;        /* product / section card          */
  --amz-line:#e3e6e6;        /* hairline borders                */
  --amz-ink:#0f1111;         /* primary text                    */
  --amz-link:#007185;        /* "see all" link teal             */
  --amz-bar:#181881;         /* top app bar (tiger blue)        */
  --amz-bar-2:#113dae;       /* app-bar sub-row                 */
  --amz-accent:#c96442;      /* tiger orange (search / CTAs)    */
  --amz-shadow:0 1px 3px rgba(15,17,17,.13),0 1px 2px rgba(15,17,17,.10);
}

/* ── A) DARK MODE ─────────────────────────────────────────────────────────── */
/* Explicit choice wins everywhere. */
html[data-theme="dark"]{
  --site-bg:#0f1111;
  --site-header:#0b0b14;
  --site-footer:#0a0a0b;
  --bg:#0f1111;
  --ink:#e7e7e7;
  --amz-bg:#0f1111;
  --amz-card:#1b1f22;
  --amz-line:#2a2f33;
  --amz-ink:#e7e7e7;
  --amz-link:#36c2d6;
  --amz-bar:#0b0b14;
  --amz-bar-2:#15173a;
  --amz-shadow:0 1px 3px rgba(0,0,0,.55);
  color-scheme:dark;
}
/* "auto" (or no attribute) defers to the operating system. */
/* The page body + editor stage follow the remapped tokens. */
html[data-theme="dark"] body,
html[data-theme="dark"] .stage{ background:var(--site-bg); color:var(--ink); }/* ── B) AMAZON-APP BANDS (android + fold) ─────────────────────────────────── */
/* One scope block reused for both bands. */
html[data-bp="android"],
/* ── B) AMAZON-APP BANDS (android + fold) ─────────────────────────────────── */
/* One scope block reused for both bands. */
html[data-bp="iphone"],
html[data-bp="fold"]{ background:var(--amz-bg); }/* Content backdrop = Amazon light-grey (or dark surface). */
html[data-bp="android"] .row[data-slot="content"],
/* Content backdrop = Amazon light-grey (or dark surface). */
html[data-bp="iphone"] .row[data-slot="content"],
html[data-bp="fold"]    .row[data-slot="content"]{ background:var(--amz-bg); }/* Sticky app bar with a soft drop shadow under it. */
html[data-bp="android"] .row[data-slot="header"],
/* Sticky app bar with a soft drop shadow under it. */
html[data-bp="iphone"] .row[data-slot="header"],
html[data-bp="fold"]    .row[data-slot="header"]{
  position:sticky; top:0; z-index:40;
  background:var(--amz-bar);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}/* Every stacked widget in the band reads as a card: rounded + hairline + lift.
   We deliberately set only frame + shadow (NOT background) so hero/video and
   image widgets keep their own media; section/list widgets sit on --amz-card. */
html[data-bp="android"] .row[data-slot="content"] > .widgets > .hw,
/* Every stacked widget in the band reads as a card: rounded + hairline + lift.
   We deliberately set only frame + shadow (NOT background) so hero/video and
   image widgets keep their own media; section/list widgets sit on --amz-card. */
html[data-bp="iphone"] .row[data-slot="content"] > .widgets > .hw,
html[data-bp="fold"]    .row[data-slot="content"] > .widgets > .hw,
html[data-bp="android"] .row[data-slot="content"] > .widgets > .w,
html[data-bp="iphone"] .row[data-slot="content"] > .widgets > .w,
html[data-bp="fold"]    .row[data-slot="content"] > .widgets > .w{
  border-radius:12px !important;
  box-shadow:var(--amz-shadow);
  border:1px solid var(--amz-line) !important;
  overflow:hidden;
}/* Media tiles inside the band get gently rounded corners. */
html[data-bp="android"] .row[data-slot="content"] img,
/* Media tiles inside the band get gently rounded corners. */
html[data-bp="iphone"] .row[data-slot="content"] img,
html[data-bp="fold"]    .row[data-slot="content"] img,
html[data-bp="android"] .row[data-slot="content"] video,
html[data-bp="iphone"] .row[data-slot="content"] video,
html[data-bp="fold"]    .row[data-slot="content"] video{ border-radius:8px; }/* Search field → Amazon pill with an orange action button. The widget renders
   an <input> plus a button; round both and warm the button. Defensive: if the
   markup differs these simply don't match and nothing breaks. */
html[data-bp="android"] .row[data-slot="header"] input,
/* Search field → Amazon pill with an orange action button. The widget renders
   an <input> plus a button; round both and warm the button. Defensive: if the
   markup differs these simply don't match and nothing breaks. */
html[data-bp="iphone"] .row[data-slot="header"] input,
html[data-bp="fold"]    .row[data-slot="header"] input{
  border-radius:22px !important; background:#fff !important; color:#0f1111 !important;
  border:1px solid transparent !important;
}html[data-bp="android"] .row[data-slot="header"] button,
html[data-bp="iphone"] .row[data-slot="header"] button,
html[data-bp="fold"]    .row[data-slot="header"] button{ border-radius:0 22px 22px 0 !important; }/* Department chips → a single horizontally-scrolling row (Amazon dept strip).
   The categories widget lays items out with flex-wrap; we unwrap + scroll. */
html[data-bp="android"] .row[data-slot="header"] .w *,
/* Department chips → a single horizontally-scrolling row (Amazon dept strip).
   The categories widget lays items out with flex-wrap; we unwrap + scroll. */
html[data-bp="iphone"] .row[data-slot="header"] .w *,
html[data-bp="fold"]    .row[data-slot="header"] .w *{ white-space:nowrap; }html[data-bp="android"] .row[data-slot="header"] .w,
html[data-bp="iphone"] .row[data-slot="header"] .w,
html[data-bp="fold"]    .row[data-slot="header"] .w{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; border:none !important; background:transparent !important;
}html[data-bp="android"] .row[data-slot="header"] .w::-webkit-scrollbar,
html[data-bp="iphone"] .row[data-slot="header"] .w::-webkit-scrollbar,
html[data-bp="fold"]    .row[data-slot="header"] .w::-webkit-scrollbar{ display:none; }/* Reserve room so the last card clears the bottom tab bar. */
html[data-bp="android"] .row[data-slot="content"],
/* Reserve room so the last card clears the bottom tab bar. */
html[data-bp="iphone"] .row[data-slot="content"],
html[data-bp="fold"]    .row[data-slot="content"]{ padding-bottom:64px; }

/* ── Bottom tab bar (app navigation) — markup injected by ta-theme.js ─────── */
.ta-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:56px; padding-bottom:env(safe-area-inset-bottom,0);
  background:var(--amz-card); border-top:1px solid var(--amz-line);
  box-shadow:0 -2px 8px rgba(0,0,0,.12);
  font-family:'Inter','Arial',sans-serif;
}html[data-bp="android"] .ta-tabbar,
html[data-bp="iphone"] .ta-tabbar,
html[data-bp="fold"] .ta-tabbar{ display:flex; }
.ta-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:var(--amz-ink); font-size:11px; font-weight:600;
  opacity:.78; transition:opacity .15s;
}
.ta-tabbar a:hover, .ta-tabbar a:focus-visible{ opacity:1; }
.ta-tabbar a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
.ta-tabbar a[data-on="1"]{ opacity:1; color:var(--amz-accent); }

/* ── Floating theme toggle (all pages) ────────────────────────────────────── */
.ta-theme-btn{
  position:fixed; right:14px; bottom:14px; z-index:90;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--amz-line);
  background:var(--amz-card); color:var(--amz-ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .15s; font-size:0;
}
.ta-theme-btn:hover{ transform:scale(1.06); }
.ta-theme-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }/* Lift the toggle above the tab bar on the app bands. */
html[data-bp="android"] .ta-theme-btn,
/* Lift the toggle above the tab bar on the app bands. */
html[data-bp="iphone"] .ta-theme-btn,
html[data-bp="fold"] .ta-theme-btn{ bottom:70px; }

@media (prefers-reduced-motion:reduce){
  .ta-theme-btn, .ta-tabbar a{ transition:none; }
}/* ═══════════════════════════════════════════════════════════════════════════
 * ANDROID APP SHELL — phone breakpoint only (html[data-bp="android"]).
 * The fold breakpoint is intentionally left with the simpler band styling.
 * Markup (app bar,
/* ═══════════════════════════════════════════════════════════════════════════
 * ANDROID APP SHELL — phone breakpoint only (html[data-bp="iphone"]).
 * The fold breakpoint is intentionally left with the simpler band styling.
 * Markup (app bar,
drawer,
scrim) is injected by ta-theme.js.
 * The android header reserves its top 64px (see se_android.sql) so the fixed
 * 56px app bar never covers the search field.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* On the phone the theme control lives in the drawer,
not the floating button. */
html[data-bp="android"] .ta-theme-btn,
html[data-bp="iphone"] .ta-theme-btn{ display:none; }

/* ── Material top app bar ──────────────────────────────────────────────────── */
.ta-appbar{ display:none; }html[data-bp="android"] .ta-appbar,
html[data-bp="iphone"] .ta-appbar{
  display:flex; position:fixed; top:0; left:0; right:0; z-index:60;
  align-items:center; gap:4px; height:56px; padding:0 4px;
  padding-top:env(safe-area-inset-top,0);
  background:var(--amz-bar); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.30);
}
.ta-appbar .ta-brand{
  flex:1; min-width:0; color:#fff; letter-spacing:.3px;
  font:700 19px/1 'Poppins','Inter',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ta-iconbtn{
  width:44px; height:44px; border:0; background:transparent; color:#fff;
  cursor:pointer; display:grid; place-items:center; border-radius:50%;
}
.ta-iconbtn:active{ background:rgba(255,255,255,.18); }
.ta-iconbtn svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; }

/* hamburger → X */
.ta-burger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s, opacity .2s; }
.ta-burger span + span{ margin-top:5px; }
html.ta-drawer-open .ta-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
html.ta-drawer-open .ta-burger span:nth-child(2){ opacity:0; }
html.ta-drawer-open .ta-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Navigation drawer + scrim ─────────────────────────────────────────────── */
.ta-scrim{ display:none; }html[data-bp="android"] .ta-scrim,
html[data-bp="iphone"] .ta-scrim{
  display:block; position:fixed; inset:0; z-index:84; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
html.ta-drawer-open .ta-scrim{ opacity:1; visibility:visible; }

.ta-drawer{ display:none; }html[data-bp="android"] .ta-drawer,
html[data-bp="iphone"] .ta-drawer{
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:86;
  width:84%; max-width:330px; background:var(--amz-card); color:var(--amz-ink);
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
  box-shadow:2px 0 18px rgba(0,0,0,.35); overflow-y:auto;
}
html.ta-drawer-open .ta-drawer{ transform:none; }

.ta-drawer-head{ background:var(--amz-bar); color:#fff; padding:22px 18px;
  padding-top:calc(22px + env(safe-area-inset-top,0)); }
.ta-drawer-head b{ display:block; font:700 20px/1.2 'Poppins','Inter',sans-serif; }
.ta-drawer-head small{ display:block; margin-top:3px; opacity:.82; font-size:12px; }

.ta-sec{ padding:6px 0; border-bottom:1px solid var(--amz-line); }
.ta-sec:last-child{ border-bottom:0; }
.ta-sec h4{ margin:0; padding:11px 18px 5px; opacity:.5; color:var(--amz-ink);
  font:700 11px/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.ta-drawer a, .ta-drawer button.ta-row{
  display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box;
  padding:12px 18px; text-decoration:none; color:var(--amz-ink); text-align:left;
  background:none; border:0; cursor:pointer; font:500 15px/1.2 'Inter',sans-serif;
}
.ta-drawer a:active, .ta-drawer button.ta-row:active{ background:rgba(127,127,127,.12); }
.ta-drawer a.ta-cat{ font-weight:400; padding-left:52px; }
.ta-drawer svg{ width:22px; height:22px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.8; }
.ta-row .ta-row-val{ margin-left:auto; opacity:.6; font-size:13px; text-transform:capitalize; }

@media (prefers-reduced-motion:reduce){
  .ta-drawer, .ta-scrim, .ta-burger span{ transition:none; }
}