/* ============================================================
   TRYKER · Base — shared across all pages
   ============================================================ */

:root {
  --purple: #6A0DAD;
  --purple-deep: #4D0A82;
  --purple-soft: #7B1FBE;
  --purple-50: #F4ECFB;
  --purple-100: #E9D9F7;
  --pink: #FF69B4;
  --pink-soft: #FFB0DA;
  --ink: #111111;
  --ink-2: #2B2435;
  --muted: #6B6478;
  --bg: #FFFFFF;
  --bg-soft: #FAF7FD;
  --line: #EFE7F6;
  --shadow-sm: 0 2px 8px rgba(106, 13, 173, .08);
  --shadow-md: 0 8px 28px rgba(106, 13, 173, .14);
  --shadow-lg: 0 18px 50px rgba(106, 13, 173, .22);
  --shadow-soft: 0 1px 2px rgba(106, 13, 173, .04), 0 8px 24px rgba(106, 13, 173, .06);
  --shadow-pop: 0 4px 8px rgba(106, 13, 173, .06), 0 16px 40px rgba(106, 13, 173, .10);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* Brand silhouette corners (physical tryker card): big sweep on two diagonal
     corners, near-square on the other two. Used by product cards. */
  --tryker-corner: 34px;
  --tryker-corner-sm: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --brand-gradient: linear-gradient(135deg, #6A0DAD 0%, #FF4FA2 100%);
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit
}

input {
  font-family: inherit
}

a {
  color: inherit;
  text-decoration: none
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 48px
  }
}

/* ============================================================
   BREAKPOINT TOKENS — the only widths used in @media queries:
   480px / 768px / 1024px / 1280px (min-width, mobile-first).
   ============================================================ */

/* Shared vertical product grid contract: 2 → 3 → 4 → 5 columns.
   Pages must not define their own .product-grid--vertical column/gap
   rules — see the definitive block near the legacy rail definitions
   in "PRODUCT GRID & CARDS" below (it wins the cascade there). */

/* ============ DESKTOP HEADER ============ */
.d-header {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.d-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 32px;
}

.d-logo {
  display: block;
  position: relative;
  padding-bottom: 13px
}

.d-logo img {
  width: auto;
  height: 28px;
  display: block
}

.d-tagline-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 12px;
  overflow: hidden;
  white-space: nowrap
}

.d-tagline-text {
  font-size: 10.5px;
  color: var(--purple);
  font-weight: 600
}

.d-tagline-cursor {
  font-size: 12px;
  color: var(--purple);
  opacity: 0.5;
  font-weight: 300;
  margin-left: 1px;
  animation: cursorBlink .65s step-end infinite
}

.d-nav {
  display: flex;
  gap: 24px
}

.d-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  transition: color .2s;
}

.d-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transition: transform .25s;
  transform-origin: center;
}

.d-nav a:hover {
  color: var(--purple)
}

.d-nav a:hover::after {
  transform: scaleX(1)
}

.d-header-cta {
  display: flex;
  align-items: center;
  gap: 14px
}

.d-pill {
  background: linear-gradient(135deg, #FF69B4, #FF8FCB);
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(255, 105, 180, .35);
}

/* ============ MOBILE TOP BAR ============ */
.m-topbar {
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 8px;
}

.m-topbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
}

/* ---- Sub-page slim topbar (back ◂ centered logo ▸ spacer)
       Uses brand purple gradient, white items. Add `box-topbar`
       class to any <header class="m-topbar"> on a sub-page.       */
.m-topbar.box-topbar {
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%) !important;
  color: #fff;
  border-bottom: none;
  padding: 8px 12px !important;
  min-height: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: sticky;
  top: 0;
  z-index: 10;
}

.m-topbar.box-topbar .icon-btn {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: background .2s;
}

.m-topbar.box-topbar .icon-btn:hover {
  background: rgba(255, 255, 255, .26)
}

.m-topbar.box-topbar .icon-btn svg {
  width: 15px;
  height: 15px
}

.m-topbar.box-topbar .brand {
  flex: 1;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.m-topbar.box-topbar .brand-logo {
  height: 16px;
  filter: none
}

/* ============ CUSTOMER PAGE SHELL + APPBAR ============ */
body.tk-customer-page {
  background:
    radial-gradient(circle at 12% -6%, rgba(255, 79, 162, .18), transparent 30%),
    radial-gradient(circle at 92% -4%, rgba(106, 13, 173, .18), transparent 28%),
    linear-gradient(180deg, #fff9fe 0%, #fbf5ff 46%, #fff 100%) !important;
}

.tk-appbar {
  color: #fff !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 104, 188, .26), transparent 32%),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .16), transparent 24%),
    linear-gradient(135deg, #4d0a82 0%, #6a0dad 52%, #8d2bd7 100%) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 14px 34px rgba(54, 12, 84, .22) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.tk-appbar :is(h1, h2, strong) {
  color: #fff !important;
}

.tk-appbar :is(.wl-title-row h1, .trk-head-copy h1, .pf-topbar-title strong, .topbar-copy h1, .rc-head h1, .season-page-hero h1) {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.tk-appbar :is(p, small, em, .eyebrow, .rc-kicker, .rc-head-mark, .wl-subtitle) {
  color: rgba(255, 255, 255, .78) !important;
}

.tk-appbar :is(.wl-subtitle, .trk-head-copy p, .pf-topbar-title small, .topbar-copy .eyebrow, .rc-kicker, .rc-head-mark, .season-page-hero .sub) {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
}

.tk-appbar :is(.wl-icon-btn, .trk-icon-btn, .pf-icon-btn, .rc-back, .back-btn, .nav-icon-btn, .nav-icon-link, .icon-btn) {
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  box-shadow: 0 10px 22px rgba(37, 7, 68, .18) !important;
}

.tk-appbar :is(.wl-icon-btn, .trk-icon-btn, .pf-icon-btn, .rc-back, .back-btn, .nav-icon-btn, .nav-icon-link, .icon-btn):active {
  transform: scale(.96);
}

.tk-appbar :is(.nav-badge-count, .wl-count-badge) {
  background: linear-gradient(135deg, #ff4fa2, #ff7fbd) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(255, 79, 162, .28) !important;
}

.tk-appbar .pf-topbar-badge,
.tk-appbar .trk-mini-action,
.tk-appbar .rc-top-pill {
  color: #fff !important;
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.tk-appbar.sr-bar {
  border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
}

.tk-appbar.sr-bar .sr-input-wrap input {
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 10px 24px rgba(42, 9, 78, .14) !important;
}

.tk-appbar.sr-bar .sr-input-wrap svg {
  color: var(--purple) !important;
}

/* ============ SHARED APP BAR (<tryker-appbar>) ============
   Mobile bar layout. The .tk-appbar class (above) paints the purple
   gradient + white text; these rules lay out back · title · actions.
   On desktop the component renders .d-header instead and this bar hides. */
.tk-appbar-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.tk-appbar-back,
.tk-appbar-action {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15) !important;
  color: #fff;
  position: relative;
  transition: background .2s, transform .15s;
}
.tk-appbar-back:active,
.tk-appbar-action:active { transform: scale(.94); background: rgba(255, 255, 255, .28) !important; }
.tk-appbar-back svg,
.tk-appbar-action svg { width: 17px; height: 17px; }
.tk-appbar-copy { flex: 1 1 auto; min-width: 0; }
.tk-appbar-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
  line-height: 1;
  margin-bottom: 2px;
}
.tk-appbar-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-appbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tk-ab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  border: 1.5px solid #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.tk-ab-count[hidden] { display: none; }
@media (min-width: 1024px) {
  .tk-appbar-bar { display: none; }
  /* The appbar's desktop header has no right-side actions (the bottom-nav's
     desktop pills own the top-right). Left-align logo + nav so they don't get
     pushed under the pills by justify-content:space-between. */
  .tk-ab-desktop .d-header-inner { justify-content: flex-start; gap: 40px; }
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.brand-logo {
  width: auto;
  height: 18px;
}

.brand-tagline-wrap {
  display: flex;
  align-items: center;
  height: 18px;
  overflow: hidden;
  width: min(100%, 280px);
}

.brand-tagline-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  white-space: nowrap
}

.brand-tagline-cursor {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin-left: 1px;
  animation: cursorBlink .65s step-end infinite
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

.m-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.search-bar-icon {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0
}

.search-bar-wrap {
  flex: 1;
  height: 18px;
  overflow: hidden;
  position: relative
}

.search-bar-track {
  position: relative;
  height: 18px
}

.search-bar-track span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 18px;
}

.search-bar-cta {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

@keyframes slideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(-100%);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
    opacity: 1
  }

  to {
    transform: translateY(-100%);
    opacity: 0
  }
}

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1
  }

  to {
    transform: translateY(100%);
    opacity: 0
  }
}

.mic-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  transition: background .2s;
}

.mic-btn:hover {
  background: rgba(255, 255, 255, 0.28)
}

.mic-btn svg {
  width: 14px;
  height: 14px
}

/* ── Pin badge (topbar) ────────────────────────────────────── */
.pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 3px 8px 3px 6px;
  margin-top: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background .2s;
}

.pin-badge:hover {
  background: rgba(255, 255, 255, 0.28)
}

.pin-badge.top-right {
  margin-top: 0;
  align-self: flex-start;
  justify-self: end;
  flex-shrink: 0;
}

.pin-badge.header-pin {
  margin-top: 0;
  background: var(--purple-50);
  border-color: var(--line);
  color: var(--purple);
}

.pin-badge.header-pin:hover {
  background: var(--purple-100)
}

/* pill variant — dot + pin icon + pincode number, all inline */
.pin-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  line-height: 1;
}

.pin-badge-pill:hover {
  background: rgba(255, 255, 255, .30);
  transform: translateY(-1px)
}

.pin-badge-pill:active {
  transform: scale(.96)
}

.pin-badge-pill .pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9CA3AF;
  flex-shrink: 0;
  display: inline-block;
}

.pin-badge-pill .pin-icon {
  width: 11px;
  height: 11px;
  color: currentColor;
  flex-shrink: 0;
}

.pin-badge-pill .pin-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pin-badge-pill.header-pin {
  background: #fff;
  border-color: var(--purple-100);
  color: var(--purple);
  box-shadow: 0 1px 3px rgba(106, 13, 173, .08);
}

.pin-badge-pill.header-pin:hover {
  background: var(--purple-50)
}

.pin-badge-pill[data-mode="try"] .pin-dot {
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
  animation: pinDotPulse 1.8s ease-in-out infinite;
}

.pin-badge-pill[data-mode="buy"] .pin-dot {
  background: #3B82F6
}

@keyframes pinDotPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .55)
  }

  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0)
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* ── Green glassmorphic toast (onboarding step confirmations) ── */
/* ── Premium glassmorphic toast ── */
.glass-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -120%) scale(0.9);
  z-index: 9999;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.75);
  color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
  pointer-events: none;
}

.glass-toast.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.glass-toast.success {
  background: rgba(236, 253, 245, 0.8);
  color: #065f46;
  border-color: rgba(52, 211, 153, 0.3);
}

.glass-toast.error {
  background: rgba(254, 242, 242, 0.8);
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.3);
}

.toast-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
}


.pin-mode-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #374151;
  letter-spacing: .3px;
}

.pin-mode-badge[data-mode="try"] {
  background: #DCFCE7;
  color: #15803D
}

.pin-mode-badge[data-mode="buy"] {
  background: #DBEAFE;
  color: #1D4ED8
}

/* (old pincode popup CSS removed — replaced by popup.js framework) */

/* ── Search modal ─────────────────────────────────────────── */
.search-overlay,
.seller-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 20, .56);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  z-index: 320;
}

.search-overlay.open,
.seller-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.search-modal,
.seller-modal {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 22px 16px 24px;
  transform: translateY(28px);
  transition: transform .28s cubic-bezier(.32, 1.1, .65, 1);
  position: relative;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
  max-height: min(88vh, 900px);
  overflow: auto;
}

.search-overlay.open .search-modal,
.seller-overlay.open .seller-modal {
  transform: translateY(0)
}

.search-close,
.seller-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.search-modal-head,
.seller-modal-head {
  padding-right: 42px
}

.search-kicker,
.seller-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple);
}

.search-modal h3,
.seller-modal h3 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.1;
  font-family: var(--font-serif);
  color: var(--ink);
}

.search-sub,
.seller-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.search-input-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 0 14px;
  margin-bottom: 14px;
}

.search-input-shell svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.search-input-shell input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 16px 0;
  font-size: 15px;
  color: var(--ink);
}

.search-quick-tags {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.search-quick-tags button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.search-results-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 12px;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.search-result-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.search-result-card img {
  width: 100%;
  aspect-ratio: 1/1.15;
  object-fit: cover;
  background: linear-gradient(135deg, var(--fallback-c1, #C77DD9), var(--fallback-c2, #6A0DAD));
}

.search-result-copy {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-copy strong {
  font-size: 13px;
  line-height: 1.35;
}

.search-result-copy span {
  font-size: 12px;
  color: var(--muted);
}

.search-result-copy b {
  font-size: 14px;
  color: var(--purple);
}

.search-empty {
  grid-column: 1/-1;
  padding: 24px 14px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: var(--bg-soft);
}

/* ── Seller modal ─────────────────────────────────────────── */
.seller-form {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.seller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.seller-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6B7280;
  margin-left: 2px;
}

.seller-field input,
.seller-field textarea {
  width: 100%;
  border: 1.5px solid #F3F4F6;
  border-radius: 14px;
  background: #F9FAFB;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: all .25s ease;
  font-family: inherit;
}

.seller-field input:focus,
.seller-field textarea:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(106, 13, 173, .08);
  transform: translateY(-1px);
}


.seller-form-msg {
  min-height: 18px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.seller-form-msg.error {
  color: #DC2626
}

.seller-form-msg.success {
  color: #059669
}

.seller-submit {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
}


.m-coming-strip {
  background: linear-gradient(180deg, var(--purple-deep) 0%, var(--purple) 100%);
  color: #fff;
  padding: 0 20px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.cs-pill {
  background: linear-gradient(135deg, #FF69B4, #FF8FCB);
  color: #fff;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: 0 4px 14px rgba(255, 105, 180, .45);
  white-space: nowrap;
}

.cs-text {
  opacity: .95;
  font-weight: 500
}

/* hide desktop, show mobile by default */
@media (min-width: 1024px) {
  .d-header {
    display: block
  }

  .m-topbar,
  .m-coming-strip {
    display: none
  }

  body {
    background: var(--bg-soft)
  }
}

@media (min-width: 1024px) {
  .d-logo {
    width: 280px;
    flex: 0 0 280px
  }

  .d-tagline-wrap {
    width: 250px
  }

  .d-tagline-text {
    font-size: 9.5px
  }
}

@media (min-width: 768px) {

  .search-overlay,
  .seller-overlay {
    align-items: center;
    padding: 20px;
  }

  .search-modal,
  .seller-modal {
    border-radius: 24px;
    padding: 22px 20px 24px;
    max-height: 88vh;
  }


  .search-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============ BUTTONS ============ */
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 11px 22px;
  font-size: 14px;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(106, 13, 173, .3);
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(106, 13, 173, .4)
}

.btn-primary:active {
  transform: translateY(0) scale(.98)
}

.btn-primary.sm {
  padding: 11px 18px
}

.btn-pink {
  background: linear-gradient(135deg, #FF69B4, #FF3D8A);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(255, 105, 180, .4);
  white-space: nowrap;
  display: inline-block;
  border: none;
}

.btn-pink:hover {
  transform: translateY(-1px)
}

.btn-pink:active {
  transform: scale(.98)
}

.btn-pink.sm {
  padding: 5px 5px;
  font-size: 10px
}

.btn-pink.lg {
  padding: 13px 20px;
  font-size: 15px;
  border-radius: 14px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


.btn-pink.lg svg {
  width: 18px;
  height: 18px
}

.btn-outline {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-weight: 700;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 14px;
  transition: all .2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.btn-outline:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-1px);
}

.btn-outline.active {
  background: #FFE4F1;
  border-color: var(--pink);
  color: var(--pink);
}

.btn-outline.active svg {
  fill: var(--pink);
  stroke: var(--pink)
}

.btn-outline.sm {
  padding: 5px 5px;
  font-size: 10px;
  border-radius: 12px
}

/* ============ UTILITY ============ */
.eyebrow {
  display: inline-block;
  color: var(--purple);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
}

.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #FF69B4, #FF3D8A);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* ============ PRODUCT GRID & CARDS ============ */
/* mobile = horizontal rail (default) */
.product-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 165px;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
}

.product-grid::-webkit-scrollbar {
  display: none
}

/* vertical 2-column variant — used by /category, /season, product-page similar */
.product-grid--vertical {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow: visible;
  scroll-snap-type: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .product-grid {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: 18px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .product-grid--vertical {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
  }

  .product-grid--vertical {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
  }
}

@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(5, 1fr)
  }

  .product-grid--vertical {
    grid-template-columns: repeat(5, 1fr)
  }
}

/* Shared vertical product grid contract (BREAKPOINT TOKENS: 768/1024/1280):
   2 → 3 → 4 → 5 columns, gaps 12/16/20/20. Comes after the legacy
   .product-grid--vertical rules above so these gaps win the cascade
   at equal specificity. Pages must not define their own
   .product-grid--vertical column/gap rules. */
.product-grid--vertical {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px)  { .product-grid--vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .product-grid--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1280px) { .product-grid--vertical { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

.product-card {
  scroll-snap-align: start;
  background: #fff;
  /* Brand silhouette (matches the physical tryker card): top-right + bottom-left
     swept round, the other two near-square. --tryker-corner is the sweep size —
     tune it in one place. Order: top-left top-right bottom-right bottom-left. */
  border-radius: var(--tryker-corner-sm, 6px) var(--tryker-corner, 34px) var(--tryker-corner-sm, 6px) var(--tryker-corner, 34px);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(239, 231, 246, .6);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-top: 15px;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop)
}

.product-image {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fallback-c1, #C77DD9), var(--fallback-c2, #6A0DAD));
}

.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.06)
}

.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .2) 100%);
  pointer-events: none;
}

.heart-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 2;
  transition: transform .2s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.heart-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 14;
  transition: transform .2s var(--ease), fill .2s var(--ease)
}

.heart-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12)
}

.heart-btn.active {
  background: #FFE4F1;
  color: var(--pink)
}

.heart-btn.active svg {
  fill: var(--pink);
  stroke: var(--pink)
}

.heart-btn:active {
  transform: scale(.9)
}

@keyframes heart-pop {
  0% {
    transform: scale(1)
  }

  40% {
    transform: scale(1.3)
  }

  100% {
    transform: scale(1)
  }
}

.heart-btn.icon-pop svg {
  animation: heart-pop .35s var(--ease)
}

.try-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  color: var(--purple);
  font-weight: 700;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 0px 13px 0px 13px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), background .25s var(--ease);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}

.product-card:hover .try-btn {
  opacity: 1;
  transform: translateY(0)
}

.try-btn.in-box {
  background: var(--brand-gradient);
  color: #fff;
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(106, 13, 173, .28);
}

.try-btn svg {
  width: 14px;
  height: 14px
}

@media (hover: none) {
  .product-card .try-btn {
    opacity: 1;
    transform: translateY(0)
  }
}

.product-info {
  padding: 10px 12px 12px
}

.product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 6px;
}

.product-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink)
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.product-rating .star {
  color: #F59E0B
}

@media (min-width: 768px) {
  .product-name {
    font-size: 14px;
    min-height: 38px
  }

  .product-price {
    font-size: 17px
  }

  .product-rating {
    font-size: 12px
  }

  .product-info {
    padding: 14px 16px 18px
  }
}

/* ============ BREADCRUMB ============ */
.breadcrumb {
  padding: 14px 0 4px;
  font-size: 13px;
  color: var(--muted)
}

.breadcrumb .container {
  padding-left: 14px;
  padding-right: 14px
}

.breadcrumb a {
  color: var(--muted);
  transition: color .2s
}

.breadcrumb a:hover {
  color: var(--purple)
}

.bc-sep {
  margin: 0 6px;
  opacity: .5
}

.bc-current {
  color: var(--ink);
  font-weight: 600;
  display: inline-block;
  max-width: 60vw;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width:768px) {
  .breadcrumb {
    padding: 18px 0 6px;
    font-size: 14px
  }

  .breadcrumb .container {
    padding-left: 32px;
    padding-right: 32px
  }

  .bc-current {
    max-width: none
  }
}

@media (min-width:1024px) {
  .breadcrumb .container {
    padding-left: 48px;
    padding-right: 48px
  }
}

/* ============ FOOTER ============ */
.footer {
  background: #0F0421;
  color: #D8D2E5;
  padding: 18px 0 10px;
  margin-top: 12px;
}

.footer .container {
  padding-left: 14px;
  padding-right: 14px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.footer-logo {
  width: auto;
  height: 26px;
  filter: brightness(0) invert(1);
  margin-bottom: 10px
}

.foot-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: #FFB6E0;
  margin: 0 0 8px;
}

.foot-tag em {
  color: #fff;
  font-weight: 600;
  font-style: italic
}

.foot-mini {
  font-size: 12px;
  color: #9990A8;
  margin: 0;
  line-height: 1.45;
  max-width: 320px
}

.footer-col {
  display: none;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: #9990A8;
  margin-bottom: 8px;
  transition: color .2s;
}

.footer-col a:hover {
  color: #FFB6E0
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #2A1F3E;
  font-size: 11px;
  color: #7A7088;
}

.foot-links a {
  color: #9990A8;
  margin: 0 4px;
  transition: color .2s
}

.foot-links a:hover {
  color: #FFB6E0
}

@media (min-width: 768px) {
  .footer {
    padding: 38px 0 18px;
    margin-top: 32px
  }

  .footer .container {
    padding-left: 32px;
    padding-right: 32px
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 24px;
  }

  .footer-col {
    display: block
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px
  }
}

/* ============ MOBILE BOTTOM NAV ============ */
.bottom-nav-spacer {
  height: 90px
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px 4px max(8px, env(safe-area-inset-bottom));
  border-radius: 32px 32px 0 0;
  z-index: 50;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  flex: 1;
  border-radius: var(--radius-pill);
  transition: color .25s var(--ease), background .25s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform .2s var(--ease)
}

.nav-item:hover svg {
  transform: translateY(-1px)
}

.nav-item.active {
  color: var(--purple);
  background: rgba(106, 13, 173, .08)
}

.nav-cta {
  position: relative;
  background: none !important
}

.nav-cta .cta-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: -22px;
  margin-bottom: 2px;
  box-shadow: 0 12px 28px rgba(106, 13, 173, 0.22), 0 0 0 6px #fff;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.nav-cta:hover .cta-circle {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(106, 13, 173, .4), 0 0 0 4px #fff
}

.nav-cta:active .cta-circle {
  transform: scale(.95)
}

.cta-circle svg {
  width: 24px;
  height: 24px
}

.cta-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--purple);
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(106, 13, 173, .18);
}

@media (min-width: 1024px) {
  .bottom-nav {
    display: none
  }

  .bottom-nav-spacer {
    display: none
  }
}

/* ===== Owner-sketch bottom nav (replaces .bottom-nav rendering) =====
   --bn-clearance is the nav's real rendered footprint: .bn-pill height
   (58px) + .bn-wrap's bottom padding (8px + safe-area-inset-bottom).
   Verified via getComputedStyle: .bn-wrap renders at 66px tall on a
   375x812 viewport with no safe-area inset. Single source of truth for
   any page element that needs to clear the nav (spacer, fixed CTAs). */
:root {
  --bn-clearance: calc(66px + env(safe-area-inset-bottom));
}

.bottom-nav-spacer {
  height: var(--bn-clearance)
}

/* Confirm/checkout flow hides the bottom nav entirely (bottom-nav.js adds
   body.bn-off). Collapse the clearance so the fixed Proceed bar settles flush
   at the true bottom instead of floating above a phantom nav's footprint. */
body.bn-off {
  --bn-clearance: env(safe-area-inset-bottom);
}

body.bn-off tryker-bottom-nav,
body.bn-off .bottom-nav-spacer {
  display: none;
}

/* ===== Site-wide mini legal footer (injected by bottom-nav.js) ===== */
.legal-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  padding: 16px 16px calc(var(--bn-clearance) + 8px);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.legal-mini a {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.legal-mini a:hover {
  color: var(--purple);
}

.legal-mini .legal-mini-sep {
  color: var(--line);
  font-size: 12px;
}

@media (min-width: 768px) {
  .legal-mini {
    padding-bottom: 20px;
  }
}

/* ===== Mobile (<1024px): rounded pill + detached Try Box button ===== */
.bn-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px calc(8px + env(safe-area-inset-bottom));
  pointer-events: none;
  will-change: transform;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

/* Scroll-aware hide/show (mobile only — bottom-nav.js toggles this class
   based on scroll direction; never applied while [desktop] is set). The
   pill and the detached Try Box button are both children of .bn-wrap, so
   they always move together as one unit. Transform-only — no layout
   properties are touched, keeping the animation smooth on iOS. */
tryker-bottom-nav:not([desktop]) .bn-wrap.bn-hidden {
  transform: translateY(calc(100% + 16px));
}

.bn-wrap > * {
  pointer-events: auto;
}

/* The PILL holding the 4 nav items */
.bn-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  flex: 1 1 auto;
  max-width: 340px;
  height: 50px;
  padding: 0 8px;
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(106, 13, 173, .28);
}

.bn-item {
  position: relative;
  flex: 1 1 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .82);
  padding: 0;
  border-radius: var(--radius-pill);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--ease);
  overflow: hidden;
}

/* Enclosed pill-in-pill highlight behind the active item */
.bn-item-hl {
  position: absolute;
  inset: 4px 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pink), #FF3D8A);
  box-shadow: 0 4px 12px rgba(255, 61, 138, .45);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}

.bn-item.bn-active {
  color: #fff;
}

.bn-item.bn-active .bn-item-hl {
  opacity: 1;
  transform: scale(1);
}

.bn-icon {
  position: relative;
  width: 21px;
  height: 21px;
  z-index: 1;
  transition: transform .2s var(--ease);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .16));
}

.bn-item:active .bn-icon {
  transform: scale(.88);
}

/* Desktop-only text label — hidden on mobile */
.bn-label {
  display: none;
}

/* Wishlist count badge on its pill item. Kept INSIDE the item box (near the
   icon's top-right) so the item's overflow:hidden (ripple clip) never cuts it
   off — no overhang like the detached Try Box badge. */
.bn-item-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}

.bn-item-badge[hidden] {
  display: none;
}

/* Tap ripple (pill items only — the Try Box button uses scale feedback so it
   can drop overflow:hidden and let its count badge overhang unclipped) */
.bn-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.bn-item.bn-tap::after {
  animation: bn-ripple .55s ease-out;
}

@keyframes bn-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: .7 }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0 }
}

/* Detached, filled/dark Try Box action button — the strongest element */
.bn-trybox {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--purple-deep) 0%, #38065E 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(77, 10, 130, .5);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  /* No overflow clip — the count badge overhangs the top-right corner and must
     not be clipped. Tap feedback comes from the scale(.94) on :active below. */
  overflow: visible;
}

.bn-trybox:active {
  transform: scale(.94);
}

.bn-trybox.bn-active {
  box-shadow: 0 0 0 3px rgba(255, 105, 180, .55), 0 10px 26px rgba(77, 10, 130, .5);
}

.bn-trybox-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

.bn-trybox-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}

.bn-trybox-badge[hidden] {
  display: none;
}

/* "Saree added to box" pop — bottom-nav.js adds .bn-pop to the button and
   .bn-badge-pop to the badge only when the Try Box count goes UP. */
@keyframes bn-trybox-pop {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.3) rotate(-7deg); }
  55%  { transform: scale(.88) rotate(4deg); }
  78%  { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes bn-badge-pop {
  0%   { transform: scale(.3); }
  55%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.bn-trybox.bn-pop .bn-trybox-icon,
.bn-item.bn-pop .bn-icon {
  animation: bn-trybox-pop .45s var(--ease);
}

.bn-trybox-badge.bn-badge-pop,
.bn-item-badge.bn-badge-pop {
  animation: bn-badge-pop .42s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .bn-trybox.bn-pop .bn-trybox-icon,
  .bn-item.bn-pop .bn-icon,
  .bn-trybox-badge.bn-badge-pop,
  .bn-item-badge.bn-badge-pop {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .bn-wrap {
    display: none
  }

  .bottom-nav-spacer {
    display: none
  }
}

/* ===== Desktop mode (>=1024px): compact top-right link row =====
   Same rendered DOM (4-item pill + detached Try Box), restyled to a
   horizontal row of link chips with a visually distinct Try Box button.
   bottom-nav.js sets the [desktop] attribute via matchMedia. */
@media (min-width: 1024px) {
  tryker-bottom-nav[desktop] .bn-wrap {
    display: flex;
    position: fixed;
    top: 0;
    left: auto;
    right: 24px;
    bottom: auto;
    height: auto;
    width: auto;
    gap: 8px;
    padding: 14px 0;
    z-index: 60;
    /* Desktop top-row mode is always static — scroll-aware hide/show is
       mobile-only. Force-reset in case bn-hidden was applied just before
       the breakpoint flipped. */
    transform: none !important;
    transition: none;
  }

  tryker-bottom-nav[desktop] + .bottom-nav-spacer,
  tryker-bottom-nav[desktop] .bottom-nav-spacer {
    display: none;
  }

  tryker-bottom-nav[desktop] .bn-pill {
    flex: 0 0 auto;
    max-width: none;
    height: auto;
    gap: 4px;
    padding: 6px;
    background: #fff;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
  }

  tryker-bottom-nav[desktop] .bn-item {
    flex: 0 0 auto;
    height: auto;
    gap: 6px;
    padding: 8px 14px;
    color: var(--muted);
  }

  tryker-bottom-nav[desktop] .bn-item .bn-item-hl {
    inset: 0;
    opacity: 0;
    background: var(--purple);
    box-shadow: none;
  }

  tryker-bottom-nav[desktop] .bn-item.bn-active {
    color: #fff;
  }

  tryker-bottom-nav[desktop] .bn-item.bn-active .bn-item-hl {
    opacity: 1;
    transform: scale(1);
  }

  tryker-bottom-nav[desktop] .bn-icon {
    width: 18px;
    height: 18px;
    filter: none;
  }

  tryker-bottom-nav[desktop] .bn-label {
    display: inline-block;
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Detached Try Box stays visually distinct — filled/dark chip */
  tryker-bottom-nav[desktop] .bn-trybox {
    width: auto;
    height: auto;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(77, 10, 130, .38);
  }

  tryker-bottom-nav[desktop] .bn-trybox-icon {
    width: 18px;
    height: 18px;
  }

  tryker-bottom-nav[desktop] .bn-item::after {
    display: none;
  }
}

/* ============ FLOATING TRY BOX (DESKTOP) ============ */
.floating-trybox {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  background: linear-gradient(135deg, #FF69B4, #FF3D8A);
  color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(255, 105, 180, .4);
  font-weight: 700;
  font-size: 14px;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.floating-trybox:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(255, 105, 180, .55)
}

.floating-trybox svg {
  width: 22px;
  height: 22px
}

.float-badge {
  background: #fff;
  color: var(--purple);
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  font-size: 12px;
}

/* Legacy desktop FAB retired: the rebuilt <tryker-bottom-nav> now
   renders the detached Try Box action button in the top-right row on
   desktop, so this floating pill is redundant and stays hidden. */
.floating-trybox {
  display: none !important;
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-2);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 100;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 1024px) {
  .toast {
    bottom: 96px
  }
}

/* ============ SHARED FORM FIELD (auth modal + any inline form) ============ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px
}

.field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .4px;
  text-transform: uppercase
}

.field input {
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color .2s;
}

.field input:focus {
  border-color: var(--purple)
}

.field input[readonly] {
  opacity: .55;
  cursor: default
}

.btn-ghost {
  background: none;
  border: 1.5px solid var(--line);
  color: var(--muted);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: border-color .2s, color .2s;
}

.btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple)
}

/* ============ SHARED ANIMATION ============ */
@keyframes pdSlideUp {
  from {
    transform: translateY(110%)
  }

  to {
    transform: translateY(0)
  }
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  transition: background .2s;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .12)
}

.icon-btn svg {
  width: 20px;
  height: 20px
}

@keyframes nudge-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }
}

/* ============ TICKERS (FEATURE & SILAI) ============ */
.feature-ticker {
  background: linear-gradient(90deg, var(--purple-deep) 0%, var(--purple) 50%, var(--purple-deep) 100%);
  overflow: hidden;
  height: 22px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.silai-ticker {
  background: linear-gradient(90deg, #FFB6C1 0%, #E75480 50%, #FFB6C1 100%);
  border-top: none;
  height: 22px;
}

.ticker-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ticker-slide {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s;
}

.ticker-slide svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0
}

.silai-ticker .ticker-slide {
  color: #fff
}

.silai-ticker .ticker-slide svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0.9
}

@keyframes tickerIn {
  from {
    transform: translateX(100%);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes tickerOut {
  from {
    transform: translateX(0);
    opacity: 1
  }

  to {
    transform: translateX(-100%);
    opacity: 0
  }
}