/* ============================================================
   MODULE 17 - App Shell  (Android TWA / installed-app view ONLY)
   Every rule is scoped under html.sh-app, which is added ONLY when
   the site is running inside the installed app (standalone display
   mode) or with ?app_view=true. Desktop + mobile-web keep the
   existing layout untouched.
   Design language: SHEIN (clean feed, persistent bottom nav,
   header that gets out of the way on scroll).
   ============================================================ */

html.sh-app { --sh-appnav-h: 58px; }
/* no pinch-zoom / double-tap-zoom in the app (scroll still works). The
   fullscreen image gallery re-enables its own pinch via touch-action:none. */
html.sh-app, html.sh-app body { touch-action: pan-x pan-y; }

/* ---- declutter the heavy web header inside the app ---- */
html.sh-app .sh-marquee { display: none; }        /* promo ticker strip */
html.sh-app .sh-nav { display: none; }            /* mega category bar -> bottom nav */
html.sh-app .sh-logo__tag { display: none; }      /* "Since 2005…" tagline */
html.sh-app .sh-logo__name { font-size: 17px; }
html.sh-app .sh-burger { display: none; }         /* categories now live in the Categories tab */
html.sh-app .sh-account { display: none; }        /* account now lives in the Me tab */
html.sh-app #sh-filter-fab { display: none !important; } /* Filter removed in the app */
/* top-right cart icon (kept in the app) + a bump when an item flies in */
html.sh-app .sh-cart-ic { animation: none; }
.sh-cart-bump { animation: sh-cart-bump .35s ease; }
@keyframes sh-cart-bump { 30% { transform: scale(1.32); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
/* product image flying into the cart on Add to Cart */
.sh-fly { position: fixed; z-index: 4000; object-fit: cover; border-radius: 12px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(11, 27, 61, .32); }
/* clearer search affordance: the submit button is a magnifier icon in the app */
html.sh-app #sh-search button[type="submit"] { display: flex; align-items: center; justify-content: center; padding: 0 15px; }

/* ---- App start-up splash (animated icon + sound) ---- */
html.sh-app .sh-splash {
  position: fixed; inset: 0; z-index: 3000; background: var(--sh-navy, #0f1b3d);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .5s ease;
}
html.sh-app .sh-splash.hide { opacity: 0; }
html.sh-app .sh-splash__box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(.7); opacity: 0;
  transition: transform .6s cubic-bezier(.2, .9, .3, 1.25), opacity .5s ease;
}
html.sh-app .sh-splash.show .sh-splash__box { transform: scale(1); opacity: 1; }
html.sh-app .sh-splash__icon { width: 96px; height: 96px; animation: sh-splash-pulse 1.4s ease-in-out infinite; }
html.sh-app .sh-splash__word { color: #fff; font-family: var(--sh-font); font-weight: 800; font-size: 26px; letter-spacing: 1px; }
html.sh-app .sh-splash__word span { color: var(--sh-gold, #e8b53d); }
@keyframes sh-splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* ---- Categories page (opened from the Categories tab) ---- */
html.sh-app .sh-catpage { padding: 6px 6px 22px; }
html.sh-app .sh-catpage__title { font-size: 20px; font-weight: 800; color: var(--sh-navy); margin: 12px 6px 16px; }
html.sh-app .sh-catpage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 6px; }
html.sh-app .sh-catcircle { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 2px; -webkit-tap-highlight-color: transparent; }
html.sh-app .sh-catcircle__ic {
  width: 78px; height: 78px; border-radius: 50%; background: var(--sh-bg-soft);
  border: 1px solid var(--sh-line); display: flex; align-items: center; justify-content: center;
  font-size: 36px; box-shadow: var(--sh-shadow-sm); transition: transform .12s ease;
}
html.sh-app .sh-catcircle:active .sh-catcircle__ic { transform: scale(.94); }
html.sh-app .sh-catcircle__nm { font-size: 14.5px; font-weight: 600; color: var(--sh-ink); text-align: center; line-height: 1.25; }

/* Sticky, self-hiding top header. Slides up when the buyer scrolls
   down into the feed, slides back the instant they scroll up. */
html.sh-app #site-header {
  position: sticky; top: 0; z-index: 60;
  transition: transform .28s ease;
  will-change: transform;
}
html.sh-app.sh-hdr-hidden #site-header { transform: translateY(-100%); }

/* ---- persistent bottom navigation ---- */
.sh-appnav { display: none; }                     /* hidden unless .sh-app */
html.sh-app .sh-appnav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  height: calc(var(--sh-appnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sh-bg);
  border-top: 1px solid var(--sh-line);
  box-shadow: 0 -4px 18px rgba(15, 27, 61, .08);
}
html.sh-app .sh-appnav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 6px 0;
  border: 0; background: none; cursor: pointer;
  color: var(--sh-muted); font-family: var(--sh-font);
  font-size: 10.5px; line-height: 1; position: relative;
  -webkit-tap-highlight-color: transparent;
}
html.sh-app .sh-appnav__item svg { width: 23px; height: 23px; display: block; }
html.sh-app .sh-appnav__item.is-active { color: var(--sh-navy); font-weight: 600; }
html.sh-app .sh-appnav__item:active { transform: translateY(1px); }
html.sh-app .sh-appnav__badge {
  position: absolute; top: 3px; right: calc(50% - 22px);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: var(--sh-red); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
html.sh-app .sh-appnav__badge.is-zero { display: none; }

/* keep page content clear of the fixed bottom nav */
html.sh-app body { padding-bottom: calc(var(--sh-appnav-h) + env(safe-area-inset-bottom, 0px)); }

/* ---- "Me" account menu: the header dropdown, relocated into a bottom sheet ---- */
.sh-appacct { display: none; }
html.sh-app .sh-appacct { display: block; position: fixed; inset: 0; z-index: 2100; visibility: hidden; }
html.sh-app .sh-appacct.open { visibility: visible; }
html.sh-app .sh-appacct__scrim { position: absolute; inset: 0; background: rgba(8, 14, 25, .5); opacity: 0; transition: opacity .25s ease; }
html.sh-app .sh-appacct.open .sh-appacct__scrim { opacity: 1; }
html.sh-app .sh-appacct__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--sh-bg);
  border-radius: 18px 18px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 82vh; overflow-y: auto; transform: translateY(100%); transition: transform .28s ease;
  box-shadow: 0 -10px 34px rgba(11, 37, 69, .25);
}
html.sh-app .sh-appacct.open .sh-appacct__panel { transform: translateY(0); }
html.sh-app .sh-appacct__grip { width: 38px; height: 4px; border-radius: 3px; background: var(--sh-line); margin: 4px auto 8px; }
/* force the relocated header dropdown to render as a full-width list */
html.sh-app .sh-appacct__panel .sh-acct-menu {
  display: block !important; position: static !important; inset: auto !important;
  width: 100%; min-width: 0; max-width: none; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; transform: none !important;
  opacity: 1 !important; visibility: visible !important;
}
html.sh-app .sh-appacct__panel .sh-acct-menu__hi { font-size: 16px; padding: 6px 8px 12px; }
html.sh-app .sh-appacct__panel .sh-acct-menu__item {
  padding: 15px 10px; font-size: 15px; border-bottom: 1px solid var(--sh-line);
}
html.sh-app .sh-appacct__panel .sh-acct-menu__item:last-child { border-bottom: 0; }

/* ---- lift the existing floating widgets above the bottom nav ---- */
html.sh-app #sh-filter-fab,
html.sh-app .sh-chat-fab { bottom: calc(var(--sh-appnav-h) + 14px); }

/* ---- screens that own the bottom bar: hide nav + non-essential FABs ----
   (Product detail + Checkout get their own sticky action bars in the next
   phases; the SHEIN/Shopee pattern hides the global nav + Filter there.) */
html.sh-app.sh-hidenav .sh-appnav { display: none; }
html.sh-app.sh-hidenav body { padding-bottom: 0; }
html.sh-app.sh-route-product #sh-filter-fab,
html.sh-app.sh-route-checkout #sh-filter-fab,
html.sh-app.sh-route-product .sh-chat-fab,
html.sh-app.sh-route-checkout .sh-chat-fab { display: none !important; }


/* ============================================================
   PHASE 2 - Product detail (Shopee-style)
   Sticky bottom action bar (Chat / Store / Add / Buy) + slide-up
   variant selector sheet. The in-page CTA + variant rows are moved
   into the sheet by detail.js, so all existing logic is preserved.
   ============================================================ */

/* in-page Add/Buy row replaced by the sticky bar */
html.sh-app .sh-pdp__cta { display: none; }

/* compact "Select options" tap-row that opens the sheet */
.sh-pdp__varsum { display: none; }
html.sh-app .sh-pdp__varsum {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--sh-bg-soft); border: 1px solid var(--sh-line);
  border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  font-size: 14px; font-family: var(--sh-font); color: var(--sh-ink); cursor: pointer;
}
html.sh-app .sh-pdp__varsum .lab { color: var(--sh-muted); }
html.sh-app .sh-pdp__varsum .val { font-weight: 600; text-align: right; }

/* room for the sticky bar (the bottom nav is already hidden on PDP) */
html.sh-app.sh-route-product body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

/* immersive PDP (Shopee-style): hide the global header + breadcrumb, show a
   floating Back (left) + Share (right) over the product image. */
html.sh-app.sh-route-product #site-header { display: none; }
html.sh-app .sh-pdp__crumb { display: none; }
html.sh-app .sh-pdp-nav {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 0; right: 0; z-index: 62;
  display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none;
}
html.sh-app .sh-pdp-nav__btn {
  pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--sh-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 27, 61, .22);
}
html.sh-app .sh-pdp-nav__btn:active { transform: scale(.94); }
html.sh-app .sh-pdp-nav__right { display: flex; gap: 10px; pointer-events: none; }

/* fullscreen image gallery: pinch-zoom + horizontal swipe, no buttons */
html.sh-app .sh-gallery {
  position: fixed; inset: 0; z-index: 5000; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none; /* the gallery owns all gestures */
}
html.sh-app .sh-gallery__img { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; will-change: transform; }
html.sh-app .sh-gallery__count {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .55); padding: 5px 14px; border-radius: 20px;
}

/* sticky bottom action bar */
.sh-appbar { display: none; }
html.sh-app .sh-appbar {
  display: flex; align-items: stretch; gap: 8px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--sh-bg); border-top: 1px solid var(--sh-line);
  box-shadow: 0 -4px 18px rgba(15, 27, 61, .10);
}
html.sh-app .sh-appbar__icon {
  flex: 0 0 auto; min-width: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; cursor: pointer; font-size: 18px;
  color: var(--sh-ink); font-family: var(--sh-font);
}
html.sh-app .sh-appbar__icon span { font-size: 10px; color: var(--sh-muted); }
html.sh-app .sh-appbar__add,
html.sh-app .sh-appbar__buy {
  flex: 1; border: 0; border-radius: 24px; cursor: pointer;
  font-weight: 700; font-size: 15px; font-family: var(--sh-font); color: #fff;
}
html.sh-app .sh-appbar__add { background: var(--sh-navy); }
html.sh-app .sh-appbar__buy { background: var(--sh-gold); color: #3a2a00; }
html.sh-app .sh-appbar__add:disabled,
html.sh-app .sh-appbar__buy:disabled { opacity: .5; }

/* slide-up variant sheet */
.sh-sheet { display: none; }
html.sh-app .sh-sheet { display: block; position: fixed; inset: 0; z-index: 2000; visibility: hidden; }
html.sh-app .sh-sheet.open { visibility: visible; }
html.sh-app .sh-sheet__scrim {
  position: absolute; inset: 0; background: rgba(8, 14, 25, .5);
  opacity: 0; transition: opacity .25s ease;
}
html.sh-app .sh-sheet.open .sh-sheet__scrim { opacity: 1; }
html.sh-app .sh-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--sh-bg);
  border-radius: 18px 18px 0 0; max-height: 82vh; overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .28s ease;
  box-shadow: 0 -10px 34px rgba(11, 37, 69, .25);
}
html.sh-app .sh-sheet.open .sh-sheet__panel { transform: translateY(0); }
html.sh-app .sh-sheet__x {
  position: absolute; top: 12px; right: 12px; border: 0; background: none;
  font-size: 18px; color: var(--sh-muted); cursor: pointer; z-index: 2;
}
html.sh-app .sh-sheet__head { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 12px; }
html.sh-app .sh-sheet__thumb {
  width: 112px; height: 132px; flex: 0 0 112px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--sh-line); background: var(--sh-bg-soft); margin-top: -44px;
  cursor: zoom-in; position: relative;
}
/* auto-fit so the full product (incl. the face) is shown, never cropped */
html.sh-app .sh-sheet__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.sh-app .sh-sheet__thumb::after {
  content: "⛶ Tap to zoom"; position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 9.5px; text-align: center; color: #fff; background: rgba(11, 27, 61, .6); padding: 2px 0;
}
/* selected variant: a clear gold ring that reads the same in light AND dark mode
   (so it never looks like every option is "selected") */
html.sh-app .sh-sheet .sh-opt.sel { box-shadow: 0 0 0 2px var(--sh-gold); border-color: var(--sh-gold); }
html.sh-app .sh-sheet__price { font-size: 21px; font-weight: 800; color: var(--sh-red); }
html.sh-app .sh-sheet__sel { font-size: 12.5px; color: var(--sh-muted); margin-top: 3px; }
html.sh-app .sh-sheet__confirm {
  width: 100%; border: 0; border-radius: 24px; background: var(--sh-gold); color: #3a2a00;
  font-weight: 800; font-size: 16px; padding: 14px; margin-top: 6px; cursor: pointer;
  font-family: var(--sh-font);
}
html.sh-app .sh-sheet__confirm:disabled { opacity: .55; }
/* relocated variant + qty rows sit cleanly inside the sheet */
html.sh-app .sh-sheet .sh-pdp__var { margin: 6px 0 14px; }
html.sh-app .sh-sheet .sh-pdp__qty { display: flex; align-items: center; gap: 14px; margin: 4px 0; }


/* ============================================================
   PHASE 3 - Checkout (Shopee-style)
   Grouped section cards + a sticky full-width Place Order bar
   showing the net total. The in-card pay button is hidden; the
   sticky bar drives the SAME placement logic.
   ============================================================ */

/* single-column grouped cards */
html.sh-app .sh-co__grid { display: block; }
html.sh-app .sh-co__card {
  border: 1px solid var(--sh-line); border-radius: 14px;
  margin-bottom: 12px; box-shadow: var(--sh-shadow-sm);
}
/* the in-summary pay button is replaced by the sticky bar */
html.sh-app .sh-co__place { display: none; }

/* room for the sticky bar (bottom nav already hidden on checkout) */
html.sh-app.sh-route-checkout body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* sticky Place Order bar */
.sh-cobar { display: none; }
html.sh-app .sh-cobar {
  display: flex; align-items: center; gap: 12px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--sh-bg); border-top: 1px solid var(--sh-line);
  box-shadow: 0 -4px 18px rgba(15, 27, 61, .10);
}
html.sh-app .sh-cobar__tot { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
html.sh-app .sh-cobar__tot span { font-size: 11px; color: var(--sh-muted); }
html.sh-app .sh-cobar__tot b { font-size: 19px; color: var(--sh-red); font-weight: 800; }
html.sh-app .sh-cobar__btn {
  flex: 1; border: 0; border-radius: 24px; background: var(--sh-gold); color: #3a2a00;
  font-weight: 800; font-size: 16px; padding: 14px; cursor: pointer; font-family: var(--sh-font);
}
html.sh-app .sh-cobar__btn:disabled { opacity: .5; }