:root {
  --font-main: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'Playfair Display', serif;
  /* Premium Micro-Animations */
  --transition-ui: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-dur: 350ms;
  --motion-dur-fast: 200ms;
  --motion-ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* smooth spring-like feel */
  --glass-blur: 20px;
  --glass-alpha: 0.82;
  --bottom-stack-gap: 2px;

  --topbar-h: 44px;
  --bottomnav-h: 76px;
  /* Extra offset when both bottom nav + bottom action bar are visible */
  --bottomstack-offset: 0px;
  
  --bg: #f8fafc;
  --card: #ffffff;
  --card2: rgba(255, 255, 255, 0.65);
  --card-elevated: #ffffff;
  --text: #0f172a;
  --text-secondary: #475569;
  --muted: #64748b;
  --border: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.04);
  --primary: #2563eb;
  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --primary2: #3b82f6; /* Fallback for gradient */
  --primary-hover: #1d4ed8;
  --surface-glass: rgba(255, 255, 255, 0.75);
  --surface-glass-2: rgba(255, 255, 255, 0.66);
  --topbg: rgba(248, 250, 252, 0.75);
  --surface-pattern: none;
  --surface-pattern-size: 260px;
  --surface-pattern-opacity: 0.045;

  /* Advanced Layered Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.08);

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --hover: rgba(0, 0, 0, 0.04);
  --radius2: 20px;
}

/* FINAL LAST-LAYER: visible desktop storefront redesign v2. */
@media (min-width: 1024px) {
  body {
    --desk-radius: 16px;
    --desk-radius-lg: 22px;
    --desk-line: rgba(15, 23, 42, .075);
    --desk-text: #111827;
    --desk-muted: #8b94a3;
    --desk-soft: #f6f7f9;
    --desk-shadow: 0 18px 52px rgba(15, 23, 42, .06);
    background: #fafafa !important;
  }

  .siteHeaderBanner,
  html[data-theme-preset] .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    height: 72px !important;
    padding: 10px 18px !important;
    gap: 16px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .075) !important;
  }

  .desktopLogo {
    min-width: 150px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
  }

  .desktopLogoImg {
    max-width: 150px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  .desktopCatalogBtn {
    height: 48px !important;
    min-width: 126px !important;
    border: 0 !important;
    border-radius: var(--desk-radius) !important;
    background: color-mix(in srgb, var(--primary) 12%, #fff) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
  }

  .desktopCatalogBtn:hover,
  .desktopCatalogBtn.isOpen {
    background: var(--primary) !important;
    color: #fff !important;
  }

  .desktopSearchBox {
    height: 48px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius) !important;
    background: #f7f8fa !important;
    box-shadow: none !important;
  }

  .desktopSearchBox:focus-within {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--desk-line)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
  }

  .desktopSearchBox input,
  #desktopSearchInput {
    font-size: 15px !important;
    color: var(--desk-text) !important;
  }

  .desktopIconAction,
  .desktopNavAction {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: var(--desk-radius) !important;
    background: transparent !important;
    color: #111827 !important;
  }

  .desktopIconAction:hover,
  .desktopNavAction:hover {
    background: var(--desk-soft) !important;
  }

  .desktopBenefits {
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    margin: 22px auto 26px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .desktopBenefit {
    min-height: 78px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  .desktopBenefitIcon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    color: var(--primary) !important;
  }

  #viewCatalog {
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 72px) + 36px) !important;
  }

  #viewCatalog > .grid,
  #grid.grid,
  html[data-theme-preset] #grid.grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .pCard {
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055) !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
  }

  .pCard:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--desk-line)) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .11) !important;
  }

  .pMedia {
    border-radius: 0 !important;
    background: #f3f4f6 !important;
  }

  .pMedia::after {
    display: none !important;
  }

  .pImg {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    background: #f3f4f6 !important;
  }

  .pBody {
    padding: 16px 16px 18px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
  }

  .pTitle {
    min-height: 42px !important;
    color: var(--desk-text) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: -.018em !important;
  }

  .pPrice {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  .nowPrice {
    color: var(--desk-text) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
  }

  .oldPrice {
    color: #9ca3af !important;
    font-size: 14px !important;
  }

  .favBtn {
    top: 12px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .favBtn.favOn {
    background: var(--primary) !important;
    color: #fff !important;
  }

  .discCorner,
  .pSold {
    top: 12px !important;
    left: 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  .pSold {
    background: rgba(17, 24, 39, .82) !important;
    color: #fff !important;
  }

  .desktopCatalogMenu,
  .desktopSearchPanel {
    border: 1px solid var(--desk-line) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16) !important;
  }

  #accountOverlay.accountSheet,
  .accountDeskAside,
  .accountDeskMain > .section,
  .accountPromosPanel,
  .favoritesHero,
  .accountViewHero,
  .cartHero,
  .cartItemSection,
  .cartDesktopSummary {
    border-radius: 22px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1350px) {
  #viewCatalog > .grid,
  #grid.grid,
  html[data-theme-preset] #grid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Desktop template: Tilda — final override layer. */
@media (min-width:1024px){html[data-desktop-template="tilda"]{--desktop-shell:min(1520px,calc(100vw - 80px));--desktop-header-h:58px}html[data-desktop-template="tilda"] body{background:#fff!important;font-family:Arial,Helvetica,sans-serif!important}html[data-desktop-template="tilda"] .desktopStoreHeader{top:0!important;width:100%!important;height:58px!important;padding:0 48px!important;border:0!important;border-bottom:1px solid #eee!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;grid-template-columns:210px 110px minmax(260px,520px) auto auto auto!important}html[data-desktop-template="tilda"] .desktopLogo{font-size:17px!important;letter-spacing:.08em!important;text-transform:uppercase}html[data-desktop-template="tilda"] .desktopLogo:before,html[data-desktop-template="tilda"] .desktopCatalogIcon{display:none!important}html[data-desktop-template="tilda"] .desktopCatalogBtn{border:0!important;background:transparent!important;color:#111!important;font-weight:700!important}html[data-desktop-template="tilda"] .desktopSearchBox{height:38px!important;border:0!important;border-bottom:1px solid #d8d8d8!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}html[data-desktop-template="tilda"] main.view,html[data-desktop-template="tilda"] .view{padding-top:26px!important}html[data-desktop-template="tilda"] .desktopBenefits{display:none!important}html[data-desktop-template="tilda"] .promoCarousel{width:100vw!important;max-height:680px!important;margin-left:calc(50% - 50vw)!important;border:0!important;border-radius:0!important;box-shadow:none!important}html[data-desktop-template="tilda"] .promoSlide{min-height:calc(100vh - 58px)!important}html[data-desktop-template="tilda"] .promoSlideOverlay{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04))!important}html[data-desktop-template="tilda"] .promoSlideBody{max-width:720px!important;padding-left:max(64px,calc((100vw - 1520px)/2))!important}html[data-desktop-template="tilda"] .promoTitle{font-family:'Playfair Display',serif!important;font-size:clamp(48px,6vw,96px)!important;font-weight:500!important;line-height:.98!important}html[data-desktop-template="tilda"] .promoText{font-size:18px!important;letter-spacing:.03em!important}html[data-desktop-template="tilda"] .promoBtn{border-radius:0!important;background:#fff!important;color:#111!important;text-transform:uppercase;letter-spacing:.12em;font-size:12px!important}html[data-desktop-template="tilda"] .categoryMenu{margin:42px 0!important}html[data-desktop-template="tilda"] .categoryMenuTitle{text-align:center!important;text-transform:uppercase;letter-spacing:.14em;font-size:13px!important}html[data-desktop-template="tilda"] .pCard,html[data-desktop-template="tilda"] .card{border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}html[data-desktop-template="tilda"] .pMedia{border-radius:0!important;aspect-ratio:3/4!important;background:#f3f1ef!important}html[data-desktop-template="tilda"] .pBody{padding:14px 0 24px!important}html[data-desktop-template="tilda"] .pTitle{font-size:14px!important;font-weight:500!important;letter-spacing:.01em!important}html[data-desktop-template="tilda"] .pPrice{font-size:14px!important;font-weight:700!important}html[data-desktop-template="tilda"] .grid{gap:42px 22px!important}html[data-desktop-template="tilda"] .section{border-radius:0!important;box-shadow:none!important}}


/* Desktop template: Tilda — an original TapTools editorial fashion layout. */
@media (min-width:1024px){html[data-desktop-template="tilda"]{--desktop-shell:min(1520px,calc(100vw - 80px));--desktop-header-h:58px}html[data-desktop-template="tilda"] body{background:#fff!important;font-family:Arial,Helvetica,sans-serif!important}html[data-desktop-template="tilda"] .desktopStoreHeader{top:0;width:100%;height:58px;padding:0 48px;border:0!important;border-bottom:1px solid #eee!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;grid-template-columns:210px 110px minmax(260px,520px) auto auto auto}html[data-desktop-template="tilda"] .desktopLogo{font-size:17px;letter-spacing:.08em;text-transform:uppercase}html[data-desktop-template="tilda"] .desktopLogo:before{display:none}html[data-desktop-template="tilda"] .desktopCatalogBtn{border:0!important;background:transparent!important;color:#111!important;font-weight:700}html[data-desktop-template="tilda"] .desktopCatalogIcon{display:none}html[data-desktop-template="tilda"] .desktopSearchBox{height:38px;border:0!important;border-bottom:1px solid #d8d8d8!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}html[data-desktop-template="tilda"] main.view,html[data-desktop-template="tilda"] .view{padding-top:26px!important}html[data-desktop-template="tilda"] .desktopBenefits{display:none!important}html[data-desktop-template="tilda"] .promoCarousel{width:100vw;max-height:680px;margin-left:calc(50% - 50vw);border:0!important;border-radius:0!important;box-shadow:none!important}html[data-desktop-template="tilda"] .promoSlide{min-height:calc(100vh - 58px)!important}html[data-desktop-template="tilda"] .promoSlideOverlay{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04))!important}html[data-desktop-template="tilda"] .promoSlideBody{max-width:720px;padding-left:max(64px,calc((100vw - 1520px)/2))!important}html[data-desktop-template="tilda"] .promoTitle{font-family:'Playfair Display',serif;font-size:clamp(48px,6vw,96px)!important;font-weight:500!important;line-height:.98!important}html[data-desktop-template="tilda"] .promoText{font-size:18px!important;letter-spacing:.03em}html[data-desktop-template="tilda"] .promoBtn{border-radius:0!important;background:#fff!important;color:#111!important;text-transform:uppercase;letter-spacing:.12em;font-size:12px!important}html[data-desktop-template="tilda"] .categoryMenu{margin:42px 0!important}html[data-desktop-template="tilda"] .categoryMenuTitle{text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:13px!important}html[data-desktop-template="tilda"] .pCard,html[data-desktop-template="tilda"] .card{border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}html[data-desktop-template="tilda"] .pMedia{border-radius:0!important;aspect-ratio:3/4!important;background:#f3f1ef!important}html[data-desktop-template="tilda"] .pBody{padding:14px 0 24px!important}html[data-desktop-template="tilda"] .pTitle{font-size:14px!important;font-weight:500!important;letter-spacing:.01em}html[data-desktop-template="tilda"] .pPrice{font-size:14px!important;font-weight:700!important}html[data-desktop-template="tilda"] .grid{gap:42px 22px!important}html[data-desktop-template="tilda"] .section{border-radius:0!important;box-shadow:none!important}}

/* FINAL OVERRIDE: technical brief storefront polish v1.
   This layer intentionally sits at the very end to normalize older desktop experiments. */
@media (min-width: 1024px) {
  :root {
    --desktop-card-radius: 18px;
    --desktop-control-radius: 12px;
    --desktop-border-soft: rgba(15, 23, 42, .08);
    --desktop-panel: rgba(255, 255, 255, .96);
    --desktop-muted: #8b94a3;
    --desktop-shadow-soft: 0 18px 54px rgba(15, 23, 42, .055);
    --desktop-shadow-hover: 0 22px 68px rgba(15, 23, 42, .09);
  }

  body {
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .96), transparent 34%),
      linear-gradient(180deg, #fbfbfc 0%, #f7f8fa 52%, #ffffff 100%) !important;
  }

  .siteHeaderBanner,
  html[data-theme-preset] .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    min-height: 70px !important;
    padding: 10px 18px !important;
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .075) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .desktopLogo,
  .desktopLogoImageWrap,
  .desktopLogoImage,
  .desktopCatalogButton,
  .desktopSearchWrap,
  .desktopSearchInput,
  .desktopIconBtn,
  .desktopUserBtn,
  .btn,
  .btnPrimary,
  .btnSoft,
  .btnGhost,
  input,
  textarea,
  select,
  .fInput {
    border-radius: var(--desktop-control-radius) !important;
  }

  .desktopCatalogButton,
  .btnPrimary,
  #btnCheckout,
  #submitOrder,
  .promoWalletApply {
    box-shadow: none !important;
  }

  .desktopSearchWrap {
    border: 1px solid var(--desktop-border-soft) !important;
    background: #f7f8fa !important;
  }

  #accountOverlay.accountSheet {
    width: 560px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16) !important;
  }

  #accountOverlay .accountProfileCard,
  #accountOverlay .webTelegramLoginPanel {
    grid-column: 1 / -1 !important;
    border-radius: var(--desktop-card-radius) !important;
  }

  #accountOverlay .accountSheetResults {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #accountOverlay .searchResultItem {
    border-radius: var(--desktop-card-radius) !important;
  }

  #accountOverlay #recentlyViewedContainer {
    grid-column: 1 / -1 !important;
    margin-top: 12px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--desktop-border-soft) !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="promos"] #viewPromos,
  body[data-view="cart"] #viewCart {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: min(1440px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 72px) + 44px) !important;
  }

  .accountDeskShell {
    grid-template-columns: 292px minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;
  }

  .accountDeskAside {
    top: calc(var(--desktop-header-h, 72px) + 44px) !important;
    padding: 18px !important;
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: var(--desktop-panel) !important;
    box-shadow: var(--desktop-shadow-soft) !important;
  }

  .accountDeskProfile,
  .accountDeskLogin,
  .accountDeskRecent,
  .accountDeskRecentEmpty,
  .accountDeskRecentItem {
    border-radius: var(--desktop-card-radius) !important;
  }

  .accountDeskNavItem {
    padding: 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--desktop-card-radius) !important;
    background: transparent !important;
  }

  .accountDeskNavItem:hover {
    background: #f7f8fa !important;
    border-color: var(--desktop-border-soft) !important;
  }

  .accountDeskNavItem.active {
    border-color: color-mix(in srgb, var(--primary) 14%, transparent) !important;
    background: color-mix(in srgb, var(--primary) 9%, #fff) !important;
  }

  .accountDeskNavIcon {
    border-radius: 14px !important;
    color: #111827 !important;
    background: #fff !important;
  }

  .accountDeskNavItem.active .accountDeskNavIcon {
    color: var(--primary) !important;
  }

  .accountDeskMain {
    gap: 18px !important;
  }

  .accountDeskMain > .section,
  .accountPromosPanel,
  .favoritesHero,
  .accountViewHero,
  .cartHero,
  .cartItemSection,
  .cartDesktopSummary,
  .orderSummaryCard,
  .orderItemCard,
  .orderCustomerCard {
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: var(--desktop-panel) !important;
    box-shadow: var(--desktop-shadow-soft) !important;
  }

  .accountDeskMain > .section:first-child,
  .accountDeskMain > .favoritesHero,
  .accountDeskMain > .accountViewHero,
  .cartHero {
    min-height: auto !important;
    padding: 24px 28px !important;
    background: linear-gradient(135deg, #fff, #f8fafc) !important;
  }

  .accountDeskMain .h1,
  .cartHero .h1,
  #viewCart .h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
  }

  .accountDeskMain .p,
  .accountDeskMain .smallMuted,
  #viewCart .p,
  #viewCart .smallMuted {
    color: var(--desktop-muted) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid],
  body[data-view="notifications"] .accountDeskMain .orderNotif,
  body[data-view="notifications"] .accountDeskMain > .section:not(:first-child):not(:last-child) {
    min-height: 118px !important;
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(120px, .3fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    border-radius: var(--desktop-card-radius) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid]:hover,
  body[data-view="notifications"] .accountDeskMain .orderNotif:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--desktop-shadow-hover) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] > div:first-child,
  body[data-view="notifications"] .accountDeskMain .orderNotif > div:first-child {
    display: grid !important;
    gap: 6px !important;
    grid-column: auto !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .h1,
  body[data-view="notifications"] .accountDeskMain .orderNotif .h1 {
    font-size: 20px !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .smallMuted,
  body[data-view="notifications"] .accountDeskMain .orderNotif .smallMuted {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumbRow,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumbRow {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumb,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumb {
    width: 54px !important;
    height: 68px !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .p:last-child,
  body[data-view="notifications"] .accountDeskMain .orderNotif .p:last-child {
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: #f4f5f7 !important;
    color: #111827 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .statusPillFixed,
  .pillCount,
  .cDiscBadge,
  .promoWalletTop strong {
    border-radius: 10px !important;
  }

  .accountPromosGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .accountPromosPanel {
    padding: 26px !important;
  }

  .accountPromosPanel .promoWalletCard {
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  .accountPromosPanel .promoWalletCard::before {
    display: none !important;
  }

  .accountPromosPanel .promoWalletTop strong {
    background: color-mix(in srgb, var(--primary) 12%, #fff) !important;
    color: var(--primary) !important;
  }

  .accountDeskRecent {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--desktop-border-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .accountDeskRecentTitle {
    margin-bottom: 10px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  .accountDeskRecentList {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .accountDeskRecentItem {
    overflow: hidden !important;
    border: 1px solid var(--desktop-border-soft) !important;
    background: #fff !important;
  }

  .accountDeskRecentItem img {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
  }

  .cartDesktopShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .cartDesktopItems {
    display: grid !important;
    gap: 14px !important;
  }

  .cartItemSection {
    margin: 0 !important;
    padding: 18px !important;
  }

  .cItem {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .cImg,
  .cImgWrap {
    width: 104px !important;
    height: 132px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  .cTitle {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
  }

  .cRow {
    align-items: center !important;
    gap: 16px !important;
  }

  .ibQtySelector {
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: 14px !important;
    background: #f7f8fa !important;
  }

  .ibQtyBtn {
    border-radius: 10px !important;
  }

  .cartDesktopSummary {
    position: sticky !important;
    top: calc(var(--desktop-header-h, 72px) + 44px) !important;
    margin: 0 !important;
    padding: 22px !important;
  }

  .promoTrigger {
    color: var(--primary) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent) !important;
  }

  .promoChoiceCard,
  .promoRow,
  #promoAppliedRow .promoRow {
    border-radius: 14px !important;
  }

  .cartTotalNow {
    font-size: 30px !important;
    letter-spacing: -.045em !important;
  }

  #checkoutModal {
    background: rgba(15, 23, 42, .28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #checkoutModal .modalContent,
  #checkoutModal .checkoutModalContent,
  #checkoutModal .checkoutSheet,
  #checkoutModal .checkoutPageCard {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .14) !important;
  }

  .checkoutChoice,
  .deliveryChoice,
  .paymentChoice,
  .checkoutMethod,
  [data-delivery-method],
  [data-payment-method] {
    border-radius: 14px !important;
  }
}

@media (max-width: 1023px) {
  #accountOverlay .searchResultItem,
  .promoWalletCard,
  .cartItemSection,
  .cartDesktopSummary,
  .orderSummaryCard,
  .orderItemCard {
    border-radius: 20px !important;
  }
}

/* FINAL ABSOLUTE: storefront UX redesign from technical brief v1. */
@media (min-width: 1024px) {
  body {
    --ui-radius-xl: 24px;
    --ui-radius-lg: 20px;
    --ui-radius-md: 14px;
    --ui-border: rgba(15, 23, 42, .08);
    --ui-muted: #8b94a3;
    --ui-soft: #f6f7f9;
    --ui-shadow: 0 18px 54px rgba(15, 23, 42, .055);
    --ui-shadow-pop: 0 28px 80px rgba(15, 23, 42, .12);
    background: linear-gradient(180deg, #fbfbfc 0%, #f7f8fa 55%, #ffffff 100%) !important;
  }

  .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    width: min(1520px, calc(100vw - 48px)) !important;
    max-width: min(1520px, calc(100vw - 48px)) !important;
    height: 72px !important;
    top: 16px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 18px 58px rgba(15,23,42,.075) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .desktopCatalogButton,
  .btnPrimary,
  .btnSoft,
  .btnGhost,
  .webTelegramLoginButton,
  .promoWalletApply,
  #btnCheckout,
  #submitOrder {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: none !important;
  }

  .desktopSearchWrap,
  .desktopSearchInput,
  .fInput,
  input,
  textarea,
  select {
    border-radius: var(--ui-radius-md) !important;
  }

  #accountOverlay.accountSheet {
    width: 560px !important;
    border-radius: var(--ui-radius-xl) !important;
  }

  #accountOverlay .accountSheetResults {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #accountOverlay .accountProfileCard,
  #accountOverlay .webTelegramLoginPanel {
    grid-column: 1 / -1 !important;
    border-radius: var(--ui-radius-lg) !important;
  }

  #accountOverlay .searchResultItem,
  .accountDeskNavItem {
    border-radius: var(--ui-radius-lg) !important;
  }

  #accountOverlay #recentlyViewedContainer {
    grid-column: 1 / -1 !important;
    margin-top: 12px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--ui-border) !important;
  }

  #accountOverlay #recentlyViewedContainer .srTitle {
    padding: 0 0 12px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="promos"] #viewPromos,
  body[data-view="cart"] #viewCart {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: min(1440px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 72px) + 42px) !important;
  }

  .accountDeskShell {
    grid-template-columns: 292px minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .accountDeskAside {
    top: calc(var(--desktop-header-h, 72px) + 42px) !important;
    padding: 18px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xl) !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .accountDeskProfile,
  .accountDeskLogin {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: linear-gradient(135deg, #fff, #f7f8fa) !important;
  }

  .accountDeskNavItem {
    padding: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .accountDeskNavItem.active {
    border-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
  }

  .accountDeskNavIcon {
    border-radius: 16px !important;
    color: #111827 !important;
  }

  .accountDeskNavItem.active .accountDeskNavIcon {
    color: var(--primary) !important;
    background: #fff !important;
  }

  .accountDeskRecent {
    margin-top: 2px !important;
  }

  .accountDeskRecentItem,
  .accountDeskRecentEmpty {
    border-radius: var(--ui-radius-md) !important;
  }

  .accountDeskMain {
    gap: 18px !important;
  }

  .accountDeskMain > .section,
  .accountPromosPanel,
  .cartHero,
  .cartItemSection,
  .cartDesktopSummary,
  .checkoutPanel,
  .checkoutSummaryPanel {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xl) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .accountDeskMain > .section:first-child,
  .accountDeskMain > .favoritesHero,
  .accountDeskMain > .accountViewHero,
  .cartHero {
    min-height: auto !important;
    padding: 24px 28px !important;
    background: rgba(255,255,255,.96) !important;
  }

  .accountDeskMain .h1,
  .cartHero .h1,
  #viewCart .h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
  }

  .accountDeskMain .p,
  .accountDeskMain .smallMuted,
  #viewCart .p,
  #viewCart .smallMuted {
    color: var(--ui-muted) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid],
  body[data-view="notifications"] .accountDeskMain .orderNotif,
  body[data-view="notifications"] .accountDeskMain > .section:not(:first-child):not(:last-child) {
    min-height: 112px !important;
    padding: 18px 20px !important;
    border-radius: var(--ui-radius-lg) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.045) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid]:hover,
  body[data-view="notifications"] .accountDeskMain .orderNotif:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.075) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .h1,
  body[data-view="notifications"] .accountDeskMain .orderNotif .h1 {
    font-size: 20px !important;
    letter-spacing: -.025em !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .smallMuted,
  body[data-view="notifications"] .accountDeskMain .orderNotif .smallMuted {
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumb,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumb {
    width: 54px !important;
    height: 68px !important;
    border-radius: 12px !important;
  }

  .statusPillFixed,
  .pillCount,
  .cDiscBadge,
  .promoWalletTop strong {
    border-radius: 10px !important;
  }

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

  .accountPromosPanel {
    padding: 26px !important;
  }

  .accountPromosPanel .promoWalletCard {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.045) !important;
  }

  .accountPromosPanel .promoWalletTop strong {
    background: color-mix(in srgb, var(--primary) 12%, #fff) !important;
    color: var(--primary) !important;
  }

  .cartDesktopShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .cartDesktopItems {
    display: grid !important;
    gap: 14px !important;
  }

  .cartItemSection {
    margin: 0 !important;
    padding: 18px !important;
  }

  .cItem {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .cImg,
  .cImgWrap {
    width: 104px !important;
    height: 132px !important;
    border-radius: var(--ui-radius-md) !important;
    object-fit: cover !important;
  }

  .cTitle {
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  .cRow {
    align-items: center !important;
    gap: 16px !important;
  }

  .ibQtySelector {
    border-radius: 14px !important;
    background: var(--ui-soft) !important;
    border: 1px solid var(--ui-border) !important;
  }

  .ibQtyBtn {
    border-radius: 10px !important;
  }

  .cartDesktopSummary {
    position: sticky !important;
    top: calc(var(--desktop-header-h, 72px) + 42px) !important;
    margin: 0 !important;
    padding: 22px !important;
  }

  .promoTrigger {
    color: var(--primary) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent) !important;
  }

  .promoChoiceCard,
  .promoRow,
  #promoAppliedRow .promoRow {
    border-radius: var(--ui-radius-md) !important;
  }

  .cartTotalNow {
    font-size: 30px !important;
    letter-spacing: -.045em !important;
  }

  #checkoutModal {
    background: rgba(15,23,42,.28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #checkoutModal .modalContent,
  #checkoutModal .checkoutModalContent,
  #checkoutModal .checkoutSheet {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    border-radius: var(--ui-radius-xl) !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-pop) !important;
  }

  .checkoutChoice,
  .deliveryChoice,
  .paymentChoice,
  .checkoutMethod,
  [data-delivery-method],
  [data-payment-method] {
    border-radius: var(--ui-radius-md) !important;
  }
}

@media (max-width: 1023px) {
  #accountOverlay .searchResultItem,
  .promoWalletCard,
  .cartItemSection,
  .cartDesktopSummary,
  .orderSummaryCard,
  .orderItemCard {
    border-radius: 20px !important;
  }
}

/* Desktop storefront clean v2.
   A separate light ecommerce look for browser storefronts. Telegram/mobile keep
   their own theme below 1024px. */
@media (min-width: 1024px) {
  body {
    --desktop-shell: min(1440px, calc(100vw - 72px));
    --desktop-header-h: 70px;
    background:
      radial-gradient(circle at 18% -10%, rgba(15, 23, 42, .035), transparent 360px),
      linear-gradient(180deg, #fafafa 0%, #f6f7f9 48%, #fff 100%) !important;
    color: #101318 !important;
  }

  body::after {
    display: none !important;
  }

  .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    height: var(--desktop-header-h) !important;
    padding: 0 22px !important;
    grid-template-columns: 156px 120px minmax(360px, 1fr) 48px 48px 48px !important;
    gap: 16px !important;
    border: 1px solid rgba(15, 23, 42, .065) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .08) !important;
  }

  .desktopLogo {
    height: 46px !important;
    padding: 0 !important;
  }

  .desktopLogoImg {
    max-width: 152px !important;
    max-height: 42px !important;
  }

  .desktopCatalogBtn {
    height: 46px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--primary) 18%, #fff) !important;
    color: color-mix(in srgb, var(--primary) 72%, #111827) !important;
    box-shadow: none !important;
    font-weight: 850 !important;
  }

  .desktopCatalogBtn:hover,
  .desktopCatalogBtn.isOpen {
    background: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 23%, transparent) !important;
  }

  .desktopSearchBox {
    height: 46px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, .07) !important;
    background: rgba(248, 250, 252, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  }

  .desktopSearchBox:focus-within {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--primary) 32%, rgba(15, 23, 42, .08)) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
  }

  .desktopIconAction {
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #151a24 !important;
    box-shadow: none !important;
  }

  .desktopIconAction:hover {
    background: rgba(15, 23, 42, .055) !important;
  }

  main.view,
  .view {
    padding-top: 30px !important;
  }

  body[data-view="catalog"] .view,
  body:not([data-view]) .view,
  #viewCatalog {
    width: var(--desktop-shell) !important;
    max-width: var(--desktop-shell) !important;
  }

  .desktopBenefits {
    margin: 6px 0 34px !important;
    gap: 16px !important;
  }

  .desktopBenefit {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .045) !important;
  }

  .desktopBenefitIcon {
    width: 42px !important;
    height: 42px !important;
    background: color-mix(in srgb, var(--primary) 8%, #fff) !important;
    color: var(--primary) !important;
  }

  .desktopBenefit b {
    font-size: 14px !important;
    letter-spacing: -.015em !important;
  }

  .desktopBenefit small {
    font-size: 12.5px !important;
  }

  .grid,
  html[data-theme-preset="market_classic"] .grid {
    gap: 32px 26px !important;
  }

  .card,
  html[data-theme-preset="market_classic"] .card {
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, .06) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  .card:hover,
  html[data-theme-preset="market_classic"] .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(15, 23, 42, .11) !important;
  }

  .card .pic,
  .productImg {
    border-radius: 0 !important;
    background: #f1f2f4 !important;
  }

  .card .body {
    padding: 15px 16px 18px !important;
  }

  .card .title,
  .productTitle {
    font-weight: 850 !important;
    letter-spacing: -.018em !important;
  }

  .price,
  .productPrice {
    color: #111827 !important;
    font-weight: 900 !important;
  }

  .oldPrice {
    color: #9ca3af !important;
  }

  .discountBadge,
  .stockBadge,
  .badgeSale {
    border-radius: 999px !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
  }

  .desktopCatalogMenu,
  .desktopSearchPanel {
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .14) !important;
  }

  .desktopSearchProduct,
  .desktopCatalogLink {
    border-radius: 18px !important;
  }
}

/* FINAL: desktop account/ecommerce workspace v3. Keep this at the end. */
@media (min-width: 1024px) {
  #accountBackdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #accountOverlay.accountSheet {
    left: auto !important;
    right: max(36px, calc((100vw - var(--desktop-shell, 1440px)) / 2)) !important;
    top: calc(var(--desktop-header-h, 70px) + 28px) !important;
    bottom: auto !important;
    width: 430px !important;
    max-width: calc(100vw - 72px) !important;
    max-height: min(760px, calc(100vh - var(--desktop-header-h, 70px) - 58px)) !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .94) !important;
    background-image: none !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .16) !important;
    transform: translateY(-10px) scale(.98) !important;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  #accountOverlay.accountSheet.active {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
  }

  #accountOverlay .sheetHandle,
  #accountOverlay .sheetPatternOverlay {
    display: none !important;
  }

  #accountOverlay .searchHeader {
    padding: 2px 2px 14px !important;
    border-bottom: 0 !important;
  }

  #accountOverlay .accSheetTitle {
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
  }

  #accountOverlay .sheetCloseButton {
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .055) !important;
    box-shadow: none !important;
  }

  #accountOverlay .accountSheetResults {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: auto !important;
  }

  #accountOverlay .accountProfileCard,
  #accountOverlay .webTelegramLoginPanel {
    margin: 0 0 8px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%), #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045) !important;
  }

  #accountOverlay .accountProfileAvatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  #accountOverlay .accountProfileName {
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  #accountOverlay .accountProfileMeta,
  #accountOverlay .srPrice {
    color: #8a93a3 !important;
    opacity: 1 !important;
  }

  #accountOverlay .accountProfileLogout {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  }

  #accountOverlay .accountProfileLogout span {
    display: none !important;
  }

  #accountOverlay .searchResultItem {
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .16s ease, transform .16s ease !important;
  }

  #accountOverlay .searchResultItem:hover {
    transform: translateX(2px);
    background: rgba(15, 23, 42, .045) !important;
  }

  #accountOverlay .srImg {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background: #f2f4f7 !important;
    color: #151a24 !important;
  }

  #accountOverlay .srTitle {
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
    color: #111827 !important;
  }

  #accountOverlay .srPrice {
    margin-top: 2px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
  }

  #accountOverlay .searchResultItem::after {
    content: "→";
    color: #a3adbb;
    font-size: 18px;
    font-weight: 800;
  }

  #accountOverlay .badgeCount {
    position: static !important;
    justify-self: end !important;
  }

  .promoWalletBackdrop {
    align-items: center !important;
    background: rgba(15, 23, 42, .18) !important;
  }

  .promoWalletSheet {
    width: min(760px, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(760px, calc(100vh - 96px)) !important;
    padding: 24px !important;
    border: 0 !important;
    border-radius: 32px !important;
    background: rgba(255, 255, 255, .96) !important;
    background-image: none !important;
    box-shadow: 0 34px 96px rgba(15, 23, 42, .18) !important;
  }

  .promoWalletSheet .sheetHandle {
    display: none !important;
  }

  .promoWalletHead {
    padding: 0 0 18px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  }

  .promoWalletHead .LuxeTitle {
    font-size: 28px !important;
    letter-spacing: -.045em !important;
  }

  .promoWalletList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 2px 2px !important;
  }

  .promoWalletCard {
    border: 0 !important;
    border-radius: 24px !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045) !important;
  }

  .promoWalletCard::before {
    display: none !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites {
    width: min(1180px, calc(100vw - 112px)) !important;
    max-width: min(1180px, calc(100vw - 112px)) !important;
    padding-top: calc(var(--desktop-header-h, 70px) + 34px) !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child,
  body[data-view="notifications"] #viewNotifications > .section:first-child,
  body[data-view="favorites"] #viewFavorites > .favoritesHero {
    padding: 0 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1,
  body[data-view="notifications"] #viewNotifications > .section:first-child .h1,
  body[data-view="favorites"] #viewFavorites .favoritesHero .h1 {
    font-size: 38px !important;
    letter-spacing: -.055em !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] {
    min-height: 132px !important;
    padding: 22px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr) 110px !important;
    align-items: center !important;
    gap: 18px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 18px 56px rgba(15, 23, 42, .065) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumbRow {
    grid-column: auto !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumb {
    width: 54px !important;
    height: 68px !important;
    border-radius: 14px !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .p:last-child {
    position: static !important;
    justify-self: end !important;
    color: #111827 !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .055) !important;
  }

  body[data-view="orders"] .orderSummaryCard,
  body[data-view="orders"] .orderItemCard,
  body[data-view="notifications"] #viewNotifications .orderNotif,
  body[data-view="notifications"] #viewNotifications > .section:not(:first-child):not(:last-child) {
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 18px 56px rgba(15, 23, 42, .065) !important;
  }

  body[data-view="orders"] .orderItemCard {
    padding: 18px !important;
  }

  body[data-view="orders"] .orderItemRow {
    grid-template-columns: 82px minmax(0, 1fr) auto !important;
  }

  body[data-view="orders"] .orderThumb {
    width: 82px !important;
    height: 104px !important;
    border-radius: 18px !important;
    border: 0 !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty {
    margin-top: 46px !important;
    border: 0 !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .08) !important;
  }
}

/* Desktop account/ecommerce workspace v3.
   Account, orders, favorites, notifications and promocodes become a desktop
   commerce interface instead of stretched mobile sheets/pages. */
@media (min-width: 1024px) {
  #accountBackdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #accountOverlay.accountSheet {
    left: auto !important;
    right: max(36px, calc((100vw - var(--desktop-shell, 1440px)) / 2)) !important;
    top: calc(var(--desktop-header-h, 70px) + 28px) !important;
    bottom: auto !important;
    width: 430px !important;
    max-width: calc(100vw - 72px) !important;
    max-height: min(760px, calc(100vh - var(--desktop-header-h, 70px) - 58px)) !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .94) !important;
    background-image: none !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .16) !important;
    transform: translateY(-10px) scale(.98) !important;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  #accountOverlay.accountSheet.active {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
  }

  #accountOverlay .sheetHandle,
  #accountOverlay .sheetPatternOverlay {
    display: none !important;
  }

  #accountOverlay .searchHeader {
    padding: 2px 2px 14px !important;
    border-bottom: 0 !important;
  }

  #accountOverlay .accSheetTitle {
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
  }

  #accountOverlay .sheetCloseButton {
    top: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .055) !important;
    box-shadow: none !important;
  }

  #accountOverlay .accountSheetResults {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: auto !important;
  }

  #accountOverlay .accountProfileCard {
    margin: 0 0 8px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%),
      #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045) !important;
  }

  #accountOverlay .accountProfileAvatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  #accountOverlay .accountProfileName {
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  #accountOverlay .accountProfileMeta {
    color: #7b8494 !important;
    font-size: 13px !important;
  }

  #accountOverlay .accountProfileLogout {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  }

  #accountOverlay .accountProfileLogout span {
    display: none !important;
  }

  #accountOverlay .webTelegramLoginPanel {
    margin: 0 0 10px !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045) !important;
  }

  #accountOverlay .searchResultItem {
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .16s ease, transform .16s ease !important;
  }

  #accountOverlay .searchResultItem:hover {
    transform: translateX(2px);
    background: rgba(15, 23, 42, .045) !important;
  }

  #accountOverlay .srImg {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background: #f2f4f7 !important;
    color: #151a24 !important;
  }

  #accountOverlay .srTitle {
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
    color: #111827 !important;
  }

  #accountOverlay .srPrice {
    margin-top: 2px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    color: #8a93a3 !important;
    opacity: 1 !important;
  }

  #accountOverlay .searchResultItem::after {
    content: "→";
    color: #a3adbb;
    font-size: 18px;
    font-weight: 800;
  }

  #accountOverlay .badgeCount {
    position: static !important;
    justify-self: end !important;
  }

  #accountOverlay #recentlyViewedContainer {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(15, 23, 42, .06) !important;
  }

  #accountOverlay #recentlyViewedContainer > .srTitle {
    padding: 0 4px !important;
    margin: 0 0 12px !important;
    font-size: 15px !important;
  }

  #accountOverlay .recentViewedSlider {
    padding: 0 4px 8px !important;
    gap: 12px !important;
  }

  .promoWalletBackdrop {
    align-items: center !important;
    background: rgba(15, 23, 42, .18) !important;
  }

  .promoWalletSheet {
    width: min(760px, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: min(760px, calc(100vh - 96px)) !important;
    padding: 24px !important;
    border: 0 !important;
    border-radius: 32px !important;
    background: rgba(255, 255, 255, .96) !important;
    background-image: none !important;
    box-shadow: 0 34px 96px rgba(15, 23, 42, .18) !important;
  }

  .promoWalletSheet .sheetHandle {
    display: none !important;
  }

  .promoWalletHead {
    padding: 0 0 18px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  }

  .promoWalletHead .LuxeTitle {
    font-size: 28px !important;
    letter-spacing: -.045em !important;
  }

  .promoWalletList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 2px 2px !important;
  }

  .promoWalletCard {
    border: 0 !important;
    border-radius: 24px !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045) !important;
  }

  .promoWalletCard::before {
    display: none !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites {
    width: min(1180px, calc(100vw - 112px)) !important;
    max-width: min(1180px, calc(100vw - 112px)) !important;
    padding-top: calc(var(--desktop-header-h, 70px) + 34px) !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child,
  body[data-view="notifications"] #viewNotifications > .section:first-child,
  body[data-view="favorites"] #viewFavorites > .favoritesHero {
    padding: 0 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1,
  body[data-view="notifications"] #viewNotifications > .section:first-child .h1,
  body[data-view="favorites"] #viewFavorites .favoritesHero .h1 {
    font-size: 38px !important;
    letter-spacing: -.055em !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] {
    min-height: 132px !important;
    padding: 22px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr) 110px !important;
    align-items: center !important;
    gap: 18px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 18px 56px rgba(15, 23, 42, .065) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumbRow {
    grid-column: auto !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumb {
    width: 54px !important;
    height: 68px !important;
    border-radius: 14px !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .p:last-child {
    position: static !important;
    justify-self: end !important;
    color: #111827 !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .055) !important;
  }

  body[data-view="orders"] .orderSummaryCard,
  body[data-view="orders"] .orderItemCard,
  body[data-view="notifications"] #viewNotifications .orderNotif,
  body[data-view="notifications"] #viewNotifications > .section:not(:first-child):not(:last-child) {
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 18px 56px rgba(15, 23, 42, .065) !important;
  }

  body[data-view="orders"] .orderItemCard {
    padding: 18px !important;
  }

  body[data-view="orders"] .orderItemRow {
    grid-template-columns: 82px minmax(0, 1fr) auto !important;
  }

  body[data-view="orders"] .orderThumb {
    width: 82px !important;
    height: 104px !important;
    border-radius: 18px !important;
    border: 0 !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty {
    margin-top: 46px !important;
    border: 0 !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .08) !important;
  }
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --card-elevated: #334155;
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: #94a3b8;
  --border: rgba(248, 250, 252, 0.12);
  --border-light: rgba(248, 250, 252, 0.06);
  --surface-glass: rgba(15, 23, 42, 0.75);
  --surface-glass-2: rgba(12, 16, 26, 0.58);
  --topbg: rgba(15, 23, 42, 0.75);
  --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  --hover: rgba(255, 255, 255, 0.06);
  --surface-pattern-opacity: 0.065;
}

* {
  box-sizing: border-box;
}

html[data-internal-back="off"] button.backBtn { display:none!important; }

html,
body,
.view {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
  min-height: 100%;
  position: relative;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: var(--font-main);
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-pattern, none);
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 320px auto;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.3s ease;
  width: 100%;
  overflow-x: hidden !important;
}

.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modalCard {
  width: 90% !important;
  max-width: 420px !important;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  margin: auto;
}

.modalCard::before,
.section::before,
.searchBox::before,
.bottomBar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--surface-pattern);
  background-repeat: repeat;
  background-size: var(--surface-pattern-size);
  opacity: var(--surface-pattern-opacity);
  mix-blend-mode: multiply;
}

.modalCard > *,
.section > *,
.searchBox > *,
.bottomBar > * {
  position: relative;
  z-index: 1;
}

.modalTop {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.modalTop .h1 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.ibQtySelector, .stepper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--surface-hover);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  height: 38px;
  width: fit-content;
}

.cRow {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 10px;
}

:root[data-motion="off"] body {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

body.appPreload {
  opacity: 0;
  transform: translateY(6px);
}

body.appReady {
  opacity: 1;
  transform: none;
}

body.noScroll {
  overflow: hidden;
}

:root[data-motion="off"] body {
  transition: none;
}

:root[data-motion="off"] * {
  transition: none !important;
  animation: none !important;
}

.hidden {
  display: none !important;
}

/* Top */
.top {
  position: relative !important;
  z-index: 1000 !important;
  min-height: var(--topbar-h, 44px) !important;
  background-color: var(--bg) !important;
  background-image: var(--bg-pattern) !important;
  padding: 0 12px;
  display: flex !important;
  flex-direction: column;
  transition:
    height 0.22s var(--anim-ease),
    min-height 0.22s var(--anim-ease),
    padding 0.22s var(--anim-ease),
    margin 0.22s var(--anim-ease),
    opacity 0.22s var(--anim-ease),
    transform 0.22s var(--anim-ease);
}

.top.isHidden {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  transform: translateY(-120%);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  overflow: hidden;
}

.topMini {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topRow {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 10px);
}

.brand {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.topActions {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 10px);
  min-width: 0;
  overflow: visible;
  flex-shrink: 0;
}

.topActions::-webkit-scrollbar {
  display: none;
}

.iconBtn {
  border: 0.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 8px);
  position: relative;
  flex: 0 0 auto;
}

.iconBtn:active {
  transform: translateY(1px) scale(0.99);
}

.iconBtn .icon {
  width: clamp(18px, 5vw, 22px);
  height: clamp(18px, 5vw, 22px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Active top button (current view) */
.iconBtn.isActive {
  background: rgba(56, 99, 248, 0.10);
  border-color: rgba(56, 99, 248, 0.22);
}

/* Favorites button active state (heart filled red) */
.iconBtn.isFavOn {
  color: #e11d48;
  background: rgba(225, 29, 72, 0.06);
  border-color: rgba(225, 29, 72, 0.22);
}

.iconBtn.isFavOn .icon {
  fill: currentColor;
}

.badgeCount {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent-red, #ff4d4d);
  color: white;
  font-size: 10px;
  font-weight: 900;
  width: auto;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255, 77, 77, 0.4);
  z-index: 10;
  pointer-events: none;
  line-height: 1;
}


/* Bell wiggle for unread notifications */
.iconBtn.wiggle .icon {
  animation: bellWiggle 1.2s ease-in-out infinite;
}

@keyframes bellWiggle {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-10deg);
  }

  20% {
    transform: rotate(10deg);
  }

  30% {
    transform: rotate(-8deg);
  }

  40% {
    transform: rotate(8deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes badgePop {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.22);
  }

  70% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

.badgeCount.badgePop {
  animation: badgePop .28s ease-out;
}

/* Swipe navigation animations (OS-like nudge) */
main.view.swipeBack {
  animation: swipeBack 260ms ease;
}

main.view.swipeForward {
  animation: swipeForward 260ms ease;
}

@keyframes swipeBack {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(38px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes swipeForward {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-38px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Search */
.searchRow {
  margin-top: 10px;
}

.searchRow.hasInlineTitle {
  justify-content: flex-start;
  gap: 10px;
}

.catalogTopTitle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.catalogLeadHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
}

.catalogLeadHeader .backBtn {
  flex: 0 0 auto;
}

.catalogLeadHeader .catalogTopTitle {
  font-size: 18px;
}

.searchRow.hasInlineTitle .filterBtnTop {
  margin-left: auto;
}

.searchRow.isBackOnly {
  margin-top: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.searchRow.isBackOnly .backBtn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}

.searchBox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card2);
  box-shadow: 0 10px 28px rgba(10, 25, 60, 0.06);
  position: relative;
  overflow: hidden;
}

.searchIcon {
  color: var(--muted);
  font-weight: 900;
}

.searchInput {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}

.clearBtn {
  border: 0;
  cursor: pointer;
  background: #eef2ff;
  color: var(--primary);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-weight: 1000;
}

/* Chips */
/* chips removed from the main header (marketplace-style UI) */

/* Main */
.view {
  padding: 12px;
  padding-top: 0;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 60px); 
}

/* Bottom navigation */
.bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100vw;
  height: var(--bottomnav-h);
  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 0.5px solid var(--border);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}

.navBtn {
  color: var(--muted);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: color 0.15s ease;
  flex: 1;
  position: relative;
}

.navBtn.isActive {
  color: var(--primary);
}

.navBtn .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
}

.navLabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.aiAdminPage {
  padding: calc(env(safe-area-inset-top) + 10px) 14px calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 24px);
}

.aiAdminHero {
  margin: 18px 0 14px;
  padding: 18px 0 4px;
}

.aiAdminKicker {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aiAdminHero h1 {
  margin: 6px 0 8px;
  font-size: 28px;
  line-height: 1.05;
}

.aiAdminHero p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.aiAdminToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%), var(--card);
  padding: 12px;
}

.aiAdminToolbar b {
  display: block;
  font-size: 15px;
}

.aiAdminToolbar span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.aiAdminNotice {
  margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--text);
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.aiAdminNotice.isSuccess {
  border-color: color-mix(in srgb, #16a34a 42%, var(--border));
  background: #ecfdf3;
  color: #14532d;
}

.aiAdminNotice.isWarn {
  border-color: color-mix(in srgb, #d97706 42%, var(--border));
  background: #fff7db;
  color: #664800;
}

.aiAdminNotice.isError {
  border-color: color-mix(in srgb, #b42318 42%, var(--border));
  background: #fef3f2;
  color: #b42318;
}

.aiAdminFloatingNotice {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 14px;
  right: 14px;
  z-index: 9999;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--text);
  padding: 12px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  transform: translateY(0);
  animation: aiAdminNoticeIn .18s ease-out both;
}

.aiAdminFloatingNotice.isSuccess {
  border-color: color-mix(in srgb, #16a34a 42%, var(--border));
  background: #ecfdf3;
  color: #14532d;
}

.aiAdminFloatingNotice.isWarn {
  border-color: color-mix(in srgb, #d97706 42%, var(--border));
  background: #fff7db;
  color: #664800;
}

.aiAdminFloatingNotice.isError {
  border-color: color-mix(in srgb, #b42318 42%, var(--border));
  background: #fef3f2;
  color: #b42318;
}

@keyframes aiAdminNoticeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aiAdminDraftBox {
  display: grid;
  gap: 12px;
}

.aiAdminStepCard {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  padding: 13px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .055);
}

.aiAdminStepHead {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.aiAdminStepHead > span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--accent-fg, #fff);
  font-weight: 950;
}

.aiAdminStepHead b {
  display: block;
  font-size: 16px;
}

.aiAdminStepHead p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiAdminProductsPanel {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .06);
}

.aiAdminProductsHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.aiAdminProductsHead b {
  font-size: 17px;
}

.aiAdminProductsHead span,
.aiAdminEmptyProducts {
  color: var(--muted);
  font-size: 13px;
}

.aiAdminProductsList {
  display: grid;
  gap: 9px;
}

.aiAdminProductRow {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  padding: 8px;
}

.aiAdminProductThumb {
  width: 58px;
  height: 72px;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.aiAdminProductThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aiAdminProductThumb span {
  display: none;
  height: 100%;
  place-items: center;
  padding: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

.aiAdminProductThumb.isEmpty img {
  display: none;
}

.aiAdminProductThumb.isEmpty span {
  display: grid;
}

.aiAdminProductInfo {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.aiAdminProductInfo b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

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

.aiAdminProductInfo em {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.aiAdminProductInfo em.isDraft {
  background: #fff7db;
  color: #664800;
}

.aiAdminProductInfo em.isPublished {
  background: #dcfce7;
  color: #166534;
}

.aiAdminPublishBtn {
  min-width: 104px;
  justify-content: center;
}

.aiAdminLabel {
  font-size: 13px;
  font-weight: 850;
  color: var(--text);
}

.aiAdminTextarea {
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  padding: 14px;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
  outline: none;
}

.aiAdminTextarea:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.aiAdminVoiceRow {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  padding: 10px;
}

.aiAdminVoiceBtn {
  white-space: nowrap;
}

.aiAdminVoiceBtn.isRecording {
  background: #b42318;
  color: #fff;
  border-color: #b42318;
}

.aiAdminVoiceStatus {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiAdminVoiceStatus.isError {
  color: #b42318;
  font-weight: 800;
}

.aiAdminPhotoDrop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
  padding: 12px;
  cursor: pointer;
  overflow: hidden;
}

.aiAdminPhotoInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.aiAdminPhotoIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--accent-fg, #fff);
  font-size: 26px;
  font-weight: 700;
  flex: 0 0 auto;
}

.aiAdminPhotoTitle {
  font-weight: 900;
  margin-bottom: 3px;
}

.aiAdminPhotoText {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.aiAdminPhotoText.isError {
  color: #b42318;
  font-weight: 800;
}

.aiAdminPhotoPreviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.aiAdminPhotoPreview {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.aiAdminPhotoPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aiAdminPhotoPreview > span {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  background: color-mix(in srgb, var(--text) 6%, var(--card));
}

.aiAdminPhotoPreview.isBroken img {
  display: none;
}

.aiAdminPhotoPreview.isBroken > span {
  display: grid;
}

.aiAdminPhotoPreview button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.aiAdminMainBtn {
  width: 100%;
  justify-content: center;
}

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

.aiAdminImproveGrid {
  grid-template-columns: 1fr;
}

.aiAdminDraftActions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.aiAdminDraftActionTitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.aiAdminImageQueryLabel {
  display: grid;
  gap: 6px;
}

.aiAdminImageQueryLabel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.aiAdminImageQueryLabel input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.aiAdminImageQueryLabel input:focus {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.aiAdminDraftSaveBox {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.aiAdminDraftSaveBox p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiAdminPhotoshootBox p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiAdminPhotoshootResult {
  display: grid;
  gap: 10px;
}

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

.aiAdminPhotoshootPick {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 6px;
  overflow: hidden;
  text-align: left;
}

.aiAdminPhotoshootPick img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  border-radius: 11px;
  background: #fff;
}

.aiAdminPhotoshootPick span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.aiAdminButtonLoading {
  opacity: .78;
  pointer-events: none;
}

.aiAdminDraftResult {
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 52%),
    var(--card);
  padding: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .08);
}

.aiAdminDraftStatus,
.aiAdminDraftError {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.aiAdminDraftError {
  color: #b42318;
  font-weight: 800;
}

.aiAdminDraftHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.aiAdminDraftKicker {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aiAdminDraftHead h2 {
  margin: 4px 0 0;
  font-size: 21px;
  line-height: 1.12;
}

.aiAdminConfidence {
  min-width: 52px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--text);
  padding: 7px 9px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

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

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

.aiAdminDraftEditGrid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.aiAdminDraftEditGrid label:first-child {
  grid-column: 1 / -1;
}

.aiAdminDraftEditGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.aiAdminDraftEditGrid input,
.aiAdminDraftTextarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, #fff);
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.aiAdminDraftEditGrid em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.aiAdminDraftEditGrid em input {
  width: auto;
  margin: 0;
  accent-color: var(--primary);
}

.aiAdminDraftTextarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.4;
}

.aiAdminDraftEditGrid input:focus,
.aiAdminDraftTextarea:focus {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.aiAdminDraftField {
  min-width: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  padding: 10px;
}

.aiAdminDraftField span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.aiAdminDraftField b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.25;
}

.aiAdminDraftSection {
  margin-top: 14px;
}

.aiAdminDraftSectionTitle {
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}

.aiAdminDraftSection p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.aiAdminAttrList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aiAdminAttrList span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 7px 10px;
  font-size: 12px;
}

.aiAdminAttrCheckList {
  display: grid;
  gap: 7px;
}

.aiAdminAttrCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.aiAdminAttrCheck input {
  margin-top: 2px;
  accent-color: var(--primary);
}

.aiAdminAttrCheck span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.aiAdminDraftWarn,
.aiAdminDraftQuestions {
  margin-top: 12px;
  border-radius: 14px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.aiAdminDraftWarn {
  background: #fff7db;
  color: #664800;
}

.aiAdminDraftQuestions {
  display: grid;
  gap: 5px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text);
}

.aiAdminImageSearchResult {
  display: grid;
  gap: 10px;
}

.aiAdminImageSearchHead {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.aiAdminImageSearchQuery {
  margin-top: -4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.aiAdminImageSearchGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aiAdminImagePick {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  padding: 5px;
  text-align: left;
  overflow: hidden;
}

.aiAdminImagePick img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: #fff;
}

.aiAdminImagePick span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  height: 24px;
  overflow: hidden;
}

/* === Mobile bottom nav (Clean & Classic) === */
@media (max-width: 420px) {
  .bottomNav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
  }

  .aiAdminVoiceRow {
    grid-template-columns: 1fr;
  }

  .aiAdminVoiceBtn {
    width: 100%;
    justify-content: center;
  }

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

  .aiAdminToolbar {
    grid-template-columns: 1fr;
  }

  .aiAdminProductRow {
    grid-template-columns: 52px minmax(0, 1fr);
  }

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

  .aiAdminPublishBtn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Skeleton loading */
:root {
  --sk-bg: rgba(0, 0, 0, .04);
  --sk-shine: rgba(255, 255, 255, .3);
}

[data-theme="dark"] {
  --sk-bg: rgba(255, 255, 255, .06);
  --sk-shine: rgba(255, 255, 255, .08);
}

@keyframes sk-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sk-bg);
  border-radius: 12px;
}

.skeleton:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation: sk-shimmer 1.5s infinite;
}

/* Search box inside drawer */
.searchBoxInDrawer {
  width: 100%;
}

.searchBoxInDrawer .searchInput {
  width: 100%;
}

/* Drawer scrolling (Telegram iOS) */
.drawerBody {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Catalog grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Related Products Horizontal Slider */
.relatedGrid {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 0 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.relatedGrid::-webkit-scrollbar {
  display: none;
}

.relatedGrid .pCard {
  flex: 0 0 165px;
  scroll-snap-align: start;
}

.relatedGrid .pTitle {
  font-size: 13px;
  line-height: 1.25;
  height: 2.5em;
  /* Ensure uniform title height */
  overflow: hidden;
}

.relatedGrid .pPrice {
  font-size: 14px;
}

.relatedGrid .pSub {
  font-size: 11px;
}

.relatedGrid .pImg {
  height: auto;
  aspect-ratio: 3/4;
}

.pCard {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 100%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 84%, white);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease), border-color var(--motion-dur-fast) ease;
}

.pCard:active {
  transform: translateY(1px) scale(0.985);
}

.pCard:hover {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.11), 0 8px 20px rgba(15, 23, 42, 0.06);
}

.pCardOff {
  opacity: .62;
}

.pMedia {
  position: relative;
  overflow: hidden;
}

.pMedia::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.12) 100%);
  pointer-events: none;
}

.pImg {
  width: 100%;
  aspect-ratio: 3/4;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, white) 0%, color-mix(in srgb, var(--bg) 92%, black 2%) 100%);
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 420ms var(--motion-ease), filter 240ms ease;
}

.pCard:hover .pImg {
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.02);
}

.pOverlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

/* Favorite heart (catalog cards) */
.favBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 20, 20, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 120ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.favBtn:active {
  transform: scale(0.96);
}

.favIcon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5; /* Slightly thinner for boutique feel */
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  transition: all 0.2s ease;
}

/* Hide solid heart by default */
.favIcon.heartSolid {
  display: none !important;
}

.favBtn.favOn .favIcon.heartOutline {
  display: none !important;
}

.favBtn.favOn .favIcon.heartSolid {
  display: block !important;
  fill: currentColor;
  stroke: currentColor;
}

.favBtn.favPop {
  animation: favPop 220ms ease;
}

@keyframes favPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.pPriceChip {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(10, 25, 60, 0.10);
  font-weight: 1000;
  letter-spacing: .2px;
  color: var(--text);
}

.pQuick {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(10, 25, 60, 0.10);
  font-weight: 1000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease;
  color: var(--text);
}

.pQuick:active {
  transform: translateY(1px) scale(0.98);
}

.pCorner {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: none;
}

.pCorner .rating {
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(10, 25, 60, 0.10);
}

.pSold {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.72);
  color: #fff;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pBody {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 84px;
}

.pTitle {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 37px;
  letter-spacing: -0.01em;
}

.pSub {
  display: none;
}

.pPrice {
  font-weight: 1000;
  font-size: 17px;
  line-height: 1.06;
  color: var(--text);
  letter-spacing: -.02em;
}

.pMeta {
  display: none;
}

.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
}

.star {
  color: #f4b400;
}

/* ---- Reviews ---- */
.revItem {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.revHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.revHeadLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.revAuthor {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.revDate {
  font-size: 12px;
  color: var(--muted);
}

.revText {
  margin-top: 6px;
}

.revReply {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card2);
  position: relative;
  margin-left: 18px;
}

.revReply::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-bottom-left-radius: 10px;
}

.revReplyT.ibPriceSub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.revReplyTitle {
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}

/* Reviews pagination */
.revMore {
  display: flex;
  justify-content: center;
  margin: 12px 0 4px;
}

.revStars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: 0;
}

.revStar {
  font-size: 14px;
  line-height: 1;
}

.revStar.on {
  color: #f4b400;
}

.revStar.off {
  color: #c9cde3;
}

.revNoRating {
  font-size: 12px;
  color: var(--muted);
}

.revPending {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff7e0;
  color: #7b5a00;
  font-weight: 900;
}

.revRejected {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffecec;
  color: #8a1f1f;
  font-weight: 900;
}

.revForm {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.revRow {
  display: flex;
  align-items: center;
}

.revAnon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a2442;
  font-weight: 800;
}

.revAnon input {
  width: 18px;
  height: 18px;
}

.revStarsPicker {
  display: flex;
  gap: 6px;
  user-select: none;
}

/* Segmented tabs (Отзывы / Вопросы) */
.segTabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 12px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  position: relative;
  overflow: hidden;
}

.segBtn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
}

.segBtn.segOn {
  color: var(--text);
}

/* Q&A */
.qaItem {
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin-top: 10px;
  color: var(--text);
}

.qaMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.qaAuthor {
  font-weight: 900;
  color: var(--text2, var(--text));
}

.qaDate {
  margin-left: auto;
}

.qaText {
  margin-top: 6px;
}

.qaAnswers {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.qaAnswer {
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card2);
  margin-top: 8px;
}

.qaAnswerAdmin {
  background: var(--hover);
}

.qaActions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.qaActions .btn {
  min-width: 140px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: var(--shadow1);
}

.qaReplyForm {
  margin-top: 10px;
}

.qaPending {
  font-size: 12px;
  color: #aa7a00;
  background: rgba(255, 200, 0, 0.14);
  border: 1px solid rgba(255, 200, 0, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}

.qaRejected {
  font-size: 12px;
  color: #8a1f1f;
  background: rgba(255, 0, 0, 0.10);
  border: 1px solid rgba(255, 0, 0, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
}

.revStarBtn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.revPickStar {
  font-size: 18px;
  line-height: 1;
}

.revPickStar.on {
  color: #f4b400;
}

.revPickStar.off {
  color: #c9cde3;
}

.revTextarea {
  width: 100%;
  margin-top: 12px;
  min-height: 140px;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 15px;
  outline: none;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}

.revTextarea:focus {
  box-shadow: 0 0 0 3px rgba(69, 110, 255, 0.12);
}

.revActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.revActions .btn {
  min-width: 140px;
}

.smallMuted {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.pBtnRow {
  display: flex;
  gap: 8px;
}

.btn {
  border: 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  user-select: none;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}


.btnSecondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(10, 25, 60, 0.08);
}

.btnSecondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10, 25, 60, 0.10);
}

.btnSecondary:active {
  transform: translateY(0px) scale(0.99);
}

.btnSecondary.isLoading {
  opacity: 0.6;
}

.loadMoreStatus {
  margin: 14px 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.btnPrimary {
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: var(--accent-fg, #fff);
  box-shadow: var(--shadow2);
}

.btnSoft {
  background: var(--card2);
  color: var(--text);
}

.btnGhost {
  background: var(--hover);
  color: var(--primary);
}

/* Product page */
.page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sticky header inside product page */
.pTopBar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: -12px -12px 0 -12px;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, backdrop-filter .18s ease;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, backdrop-filter .18s ease;
}

.pTopBar.isHidden {
  transform: translateY(-120%);
}

.pTopBar.isSolid {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}

.pTopTitle {
  flex: 1;
  min-width: 0;
  font-weight: 1000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  opacity: .96;
}

.pTopRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.favBtnTop {
  position: relative;
  top: auto;
  right: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.favBtnTop.favOn {
  color: #ff3b30;
  background: var(--card);
  border-color: var(--border);
}

.backBtn {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 1000;
  cursor: pointer;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}

.h1 {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  color: var(--text);
}

.p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}


.specList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.specRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.specK {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.specV {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}


.gallery {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.gWrap {
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.gImg {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  scroll-snap-align: start;
  background: var(--bg);
}

.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px;
  background: var(--surface-glass);
  border-top: 1px solid var(--border);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}

.dotOn {
  background: var(--primary);
}

.galleryThumbs {
  display: none;
}

.desktopProductMain {
  display: contents;
}

/* Gallery nav arrows (overlay) */
.gNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  z-index: 5;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gNav:active {
  transform: translateY(-50%) scale(0.98);
}

.gNav.gNavAutoHidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.gPrev {
  left: 10px;
}

.gNext {
  right: 10px;
}

.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 6px;
  position: relative;
}

.hscrollWrap {
  position: relative;
}

.hscrollWrap::before,
.hscrollWrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 5;
}

.hscrollWrap::before {
  left: 0;
  background: linear-gradient(to right, var(--card), rgba(255, 255, 255, 0));
  border-radius: 14px 0 0 14px;
}

.hscrollWrap::after {
  right: 0;
  background: linear-gradient(to left, var(--card), rgba(255, 255, 255, 0));
  border-radius: 0 14px 14px 0;
}

.hscrollWrap.fadeL::before {
  opacity: 1;
}

.hscrollWrap.fadeR::after {
  opacity: 1;
}

.swatches::-webkit-scrollbar {
  display: none;
}

.swatches {
  scrollbar-width: none;
}

.sw {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 1000;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
}

.swOn {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

/* Color thumbnails (instead of text pills) */
.swThumb {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 86px;
  flex: 0 0 auto;
  color: var(--text);
}

.swThumb:active {
  transform: translateY(1px);
}

.swThumbOn {
  border-color: #cdd9ff;
  background: #eef2ff;
}

.swThumbImg {
  width: 100%;
  /* Telegram WebView on some devices may not support aspect-ratio reliably.
     Use an explicit height to keep all color thumbs одинаковыми. */
  height: 70px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg);
  display: block;
}

.swThumbLbl {
  font-weight: 1000;
  font-size: 12px;
  color: var(--text);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sizes {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 6px;
  position: relative;
}

.sizes::-webkit-scrollbar {
  display: none;
}

.sizes {
  scrollbar-width: none;
}

.sizes button {
  position: relative;
  overflow: visible;
}

.sz {
  min-width: 44px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 10px;
  font-weight: 1000;
  cursor: pointer;
  position: relative;
  color: var(--text);
}

.szOff {
  opacity: .45;
  cursor: not-allowed;
}

.szOn {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

/* Stock badge on size pills */
.szStockBadge {
  position: absolute;
  /* держим бейдж ВНУТРИ пилюли, чтобы он не обрезался контейнером со скроллом */
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 8px;
  pointer-events: none;
  line-height: 1;
  background: #d0021b;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* Section highlight when product has stock variants */
.sectionStock>.h1 {
  color: #d0021b;
}

/* Drawer */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 32, 0.34);
  z-index: 40;
  backdrop-filter: blur(2px);
}

.drawer {
  color: var(--text);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 85vh;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--motion-dur) var(--motion-ease);
  transform: translateY(100%);
  will-change: transform;
}

.drawer.isOpen {
  transform: translateY(0);
}

.drawerHandle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.drawerHeader {
  padding: 8px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drawerTitle {
  font-weight: 1000;
  font-size: 16px;
}

.drawerBody {
  padding: 12px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.drawerFooter {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  background: var(--card);
}

.drawerFooter .btn {
  flex: 1;
  height: 50px;
  border-radius: 14px;
  font-weight: 700;
}

.btnResults {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.drawer input,
.drawer select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.drawer input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.fBlock {
  margin-bottom: 14px;
}

.fTitle {
  font-weight: 1000;
  margin-bottom: 8px;
}

.fCheck {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  font-weight: 700;
}

.fCheck input {
  width: 18px;
  height: 18px;
}

.fRow {
  display: flex;
  gap: 10px;
}

.fInput {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  font-weight: 900;
  color: var(--text);
}

.fSelect {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  font-weight: 900;
}

.fGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fTag {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 1000;
  font-size: 12px;
  cursor: pointer;
}

.fTagOn {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.toggle input {
  display: none;
}

.toggleUi {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #e8ecf6;
  position: relative;
  border: 1px solid var(--border);
}

.toggleUi::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, background .14s ease;
}

.toggle input:checked+.toggleUi {
  background: #dbe4ff;
  border-color: #cdd9ff;
}

.toggle input:checked+.toggleUi::after {
  transform: translateX(20px);
}

.toggleText {
  font-weight: 900;
  color: #1a2442;
}

/* Cart */
.cItem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cImgWrap {
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
}

.cImg {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  background: #edf0f7;
  border: 1px solid var(--border);
}

.cDiscBadge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  font-weight: 1000;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(239, 68, 68, .22);
}

.cMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bbPriceMain {
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.bbPriceSub {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 11px;
  margin-top: -2px;
}

.cTitle {
  font-weight: 1000;
  font-size: 14px;
}

.cSub {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

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

/* Thumbnails row (notifications / orders list) */
.thumbRow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%);
}

.thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius, 16px);
  object-fit: cover;
  background: #edf0f7;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

/* Notifications: status history */
.pillCount {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: var(--radius, 14px);
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(10, 25, 60, 0.06);
}

.hist {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: none;
}

.hist.histOpen {
  display: block;
}

.histRow {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.histRow:last-child {
  border-bottom: 0;
}

.histDt {
  flex: 0 0 auto;
  width: 140px;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.histSt {
  flex: 1 1 auto;
  font-weight: 1000;
  font-size: 12px;
  color: #1a2442;
}

.histReason {
  margin-top: 4px;
  font-weight: 900;
  color: var(--muted);
}

/* Price in cart: keep layout stable on small screens */
.cPrice {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  font-weight: 900;
  font-size: clamp(14px, 4.2vw, 20px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cPrice span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cartTotal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cartTotalOld {
  text-decoration: line-through;
  opacity: .55;
  font-weight: 900;
  font-size: 14px;
}

.cartTotalNow {
  font-weight: 1000;
  font-size: 22px;
}

.stepper {
  flex: none;
  /* Prevent shrinking */
}

.promoTrigger {
  display: inline-block;
  font-size: 13px;
  color: var(--primary);
  border-bottom: 1px dashed var(--primary);
  cursor: pointer;
  padding-bottom: 2px;
  margin-bottom: 10px;
  transition: opacity 0.2s ease;
}

.promoTrigger:active {
  opacity: 0.6;
}

.promoBlock {
  background: var(--surface-hover);
  padding: 12px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.promoAvailableSelect{display:block;width:100%;margin-bottom:2px;background:var(--surface);border-color:color-mix(in srgb,var(--primary) 28%,var(--border));font-weight:700}
.promoWalletIcon{display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.1);color:#059669;border-radius:50%}.promoWalletBackdrop{position:fixed;inset:0;z-index:100050;background:rgba(15,23,42,.48);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;touch-action:none}.promoWalletBackdrop.hidden{display:none}.promoWalletSheet{width:min(680px,100%);height:min(88vh,760px);max-height:88vh;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(15,23,42,.18)}.promoWalletHead{display:flex;flex:0 0 auto;justify-content:space-between;align-items:flex-start;gap:14px;padding:8px 4px 16px}.promoWalletHead p{margin:5px 0 0;color:var(--muted);font-size:13px}.promoWalletList{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:2px 2px 12px}.promoWalletCard{flex:0 0 auto;padding:16px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--surface-hover));box-shadow:0 6px 18px rgba(15,23,42,.04)}.promoWalletTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.promoWalletTop>div{display:flex;flex-direction:column;gap:4px}.promoWalletTop span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--muted)}.promoWalletTop b{font-size:21px;letter-spacing:.035em}.promoWalletTop strong{padding:7px 10px;border-radius:10px;background:#dcfce7;color:#166534;font-size:17px}.promoWalletCondition{display:flex;flex-direction:column;gap:5px;padding:13px 0;color:var(--muted);font-size:12px;line-height:1.4}.promoWalletCondition span:before{content:'✓';color:#059669;font-weight:900;margin-right:7px}.promoWalletApply{width:100%;border-radius:12px}.promoWalletLoading,.promoWalletEmpty{padding:34px 20px;text-align:center;color:var(--muted)}.promoWalletEmpty{display:flex;flex-direction:column;gap:7px}.promoWalletEmpty b{color:var(--text);font-size:16px}
.webTelegramLoginPanel{margin:0 14px 14px;padding:16px;border:1px solid color-mix(in srgb,var(--accent,#0f766e) 22%,var(--border,#e5e7eb));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#0f766e) 7%,var(--surface,#fff)),var(--surface,#fff));box-shadow:0 12px 30px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:12px}.webTelegramLoginPanel.hidden{display:none}.webTelegramLoginTitle{font-size:17px;font-weight:900;color:var(--text,#0f172a)}.webTelegramLoginHint{margin-top:4px;font-size:13px;line-height:1.35;color:var(--muted,#64748b)}.webTelegramLoginWidget{min-height:42px;display:flex;align-items:center}.webTelegramLoginWidget iframe{max-width:100%}.webTelegramLoginButton{width:100%;border:0;border-radius:14px;padding:12px 14px;background:#2aabee;color:#fff;font-weight:850;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 22px rgba(42,171,238,.28);cursor:pointer}.webTelegramLoginButton span{font-size:17px;transform:rotate(-20deg)}.webTelegramLoginButton:disabled{opacity:.72;cursor:wait}.webTelegramLoginError{font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--accent,#0f766e) 75%,#0f172a);background:color-mix(in srgb,var(--accent,#0f766e) 8%,#fff);border:1px solid color-mix(in srgb,var(--accent,#0f766e) 18%,transparent);border-radius:12px;padding:9px 10px}.webTelegramLoginError.hidden{display:none}.webTelegramProfilePill{display:flex;align-items:center;gap:10px}.webTelegramProfilePill img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--surface-hover,#f1f5f9)}.webTelegramProfileAvatarFallback{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent,#0f766e);color:#fff;font-weight:900}
.accountAvatar{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--primary,#0f766e) 14%,var(--card,#fff));box-shadow:0 8px 18px rgba(15,23,42,.12);border:1px solid color-mix(in srgb,var(--primary,#0f766e) 18%,var(--border,#e5e7eb))}
.accountAvatar.hidden{display:none!important}
.accountAvatar img,.accountProfileAvatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.accountAvatarFallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:var(--primary,#0f766e);color:var(--btn-text,#fff);font-size:15px;font-weight:900;line-height:1}
.hasAccountAvatar>svg{display:none!important}
.navBtn.hasAccountAvatar .accountAvatar{margin:0 auto 2px;width:30px;height:30px}
.desktopIconAction.hasAccountAvatar{padding:0}
.desktopIconAction.hasAccountAvatar .accountAvatar{width:40px;height:40px}
.accountProfileCard{margin:0 14px 14px;padding:14px;border:1px solid var(--border,#e5e7eb);border-radius:20px;background:var(--card,#fff);box-shadow:0 14px 34px rgba(15,23,42,.08);display:flex;align-items:center;gap:12px}
.accountProfileCard.hidden{display:none!important}
.accountProfileAvatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary,#0f766e) 18%,var(--border,#e5e7eb));box-shadow:0 10px 24px rgba(15,23,42,.12)}
.accountProfileAvatar .accountAvatarFallback{font-size:21px}
.accountProfileBody{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:4px}
.accountProfileName{font-size:18px;font-weight:900;color:var(--text,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accountProfileMeta{font-size:12px;line-height:1.35;color:var(--muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accountProfileLogout{flex:0 0 auto;padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:var(--surface,#fff);color:var(--text,#0f172a);font-size:13px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.accountProfileLogout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.accountProfileLogout:active{transform:scale(.985);opacity:.82}
.accountLogoutButton{width:calc(100% - 28px);margin:8px 14px 14px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--primary,#0f766e) 16%,var(--border,#e5e7eb));border-radius:16px;background:var(--card,#fff);color:var(--text,#0f172a);font-size:15px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.accountLogoutButton svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.accountLogoutButton:active{transform:scale(.985);opacity:.82}
.accountLogoutButton.hidden,.accountExtraEntry{display:none!important}
.webTelegramLoginPanel{border-radius:22px;background:var(--card,#fff);border-color:var(--border,#e5e7eb);box-shadow:0 12px 30px rgba(15,23,42,.07)}
.webTelegramLoginButton{border-radius:16px;min-height:46px}
.promoChoiceHead{font-size:12px;font-weight:850;color:var(--muted);margin-bottom:8px}.promoChoiceList{display:flex;flex-direction:column;gap:8px}.promoChoiceCard{appearance:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:12px 13px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:13px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}.promoChoiceCard:active,.promoChoiceCard.isApplying{transform:scale(.985);opacity:.72}.promoChoiceCode{font-size:15px;font-weight:950;letter-spacing:.035em}.promoChoiceCard strong{grid-column:2;grid-row:1;color:#047857;font-size:15px}.promoChoiceCard small{grid-column:1/2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.promoChoiceCard i{grid-column:2;grid-row:2;color:var(--primary);font-size:11px;font-style:normal;font-weight:850}.promoManualDivider{display:flex;align-items:center;gap:9px;margin:13px 0 10px;color:var(--muted);font-size:10px}.promoManualDivider:before,.promoManualDivider:after{content:'';height:1px;background:var(--border);flex:1}

/* Promo wallet follows the active storefront theme and uses a stable sheet header. */
.promoWalletBackdrop{background:color-mix(in srgb,#0f172a 46%,transparent)}
.promoWalletSheet{background-color:var(--bg)!important;background-image:var(--bg-pattern,none)!important;color:var(--text);border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-xl,28px) var(--radius-xl,28px) 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.22)}
.promoWalletSheet>.sheetHandle{flex:0 0 auto;margin:0 auto 12px;background:var(--muted);opacity:.35}
.promoWalletHead{align-items:flex-start;padding:2px 0 15px;border-bottom:1px solid var(--border);margin-bottom:12px}
.promoWalletHeading{flex:1;min-width:0;padding-top:2px}
.promoWalletHead .LuxeTitle{color:var(--text);font-family:var(--font-main);font-size:clamp(21px,6vw,27px);font-weight:850;line-height:1.15;letter-spacing:-.025em}
.promoWalletHead p{padding-right:4px;color:var(--muted);line-height:1.35}
.promoWalletHead .promoWalletClose{position:static!important;inset:auto!important;flex:0 0 38px;width:38px!important;height:38px!important;margin:0!important;background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-sm)!important}
.promoWalletHead .promoWalletClose svg{width:19px;height:19px;opacity:.82}
.promoWalletList{padding:0 1px calc(8px + env(safe-area-inset-bottom))}
.promoWalletCard{position:relative;overflow:hidden;background:var(--card);border-color:var(--border);border-radius:var(--radius-lg,20px);box-shadow:var(--shadow-sm)}
.promoWalletCard:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--primary)}
.promoWalletTop span{color:var(--muted)}
.promoWalletTop strong{background:color-mix(in srgb,var(--primary) 13%,var(--card));color:var(--primary)}
.promoWalletApply{background:var(--btn-bg,var(--primary-gradient,var(--primary)));color:var(--btn-text,#fff);border-color:transparent}

.stepper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  max-width: none;
}

.stepBtn,
.iconMini {
  width: clamp(28px, 9vw, 34px);
  height: clamp(28px, 9vw, 34px);
  border-radius: clamp(10px, 3vw, 12px);
}

@media (max-width: 380px) {
  .cRow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 8px;
  }

  .cRow {
    gap: 4px;
  }

  .stepper {
    gap: 4px;
    max-width: 150px;
  }

  .stepVal {
    min-width: 16px;
  }
}

.stepBtn {
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  border-radius: 12px;
  width: 34px;
  height: 34px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.stepBtn:active {
  transform: translateY(1px) scale(0.98);
}

.stepVal {
  min-width: 18px;
  text-align: center;
  font-weight: 1000;
}

.iconMini {
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  border-radius: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: transform .12s ease, background .12s ease;
}

.iconMini:active {
  transform: translateY(1px) scale(0.98);
}

.iconMini:active {
  transform: translateY(1px) scale(0.98);
}

.cDel {
  background: var(--hover);
}

/* Bottom Bar (Add to Cart) - Redesigned to be classic fixed-edge */
.bottomBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  /* below bottomNav but above content */

  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 0.5px solid var(--border);

  /* classic full-width, non-floating */
  padding: 12px 16px env(safe-area-inset-bottom);
  margin-bottom: var(--bottomstack-offset, 0px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  overflow: hidden;
}

.bottomBar.isHidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.bbBtn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bbBtn:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

/* Inline Buy Bar (Subtle UX Upgrade) */
.buyBarInline {
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 360px) {
  .buyBarInline {
    padding: 12px 10px;
  }
}

.ibRow {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.searchRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 100% !important; /* Let parent .top control height */
  padding: 0 12px !important;
}

.vHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.backCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.1s ease;
  flex-shrink: 0;
  color: #1a1a2e; /* dark arrow, always visible on white background */
  padding: 0;
}

.backCircle:active {
  transform: scale(0.92);
}

.backCircle svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.brandText {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}

.brandText.hidden {
  display: none !important;
}

.searchBoxTop {
  flex: 1 !important;
}

.backBtnTop {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important; /* Circle style for premium feel */
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  font-size: 18px !important;
}

.backBtnTop.hidden {
  display: none !important;
}

@media (max-width: 360px) {
  .ibRow {
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .ibRow {
    gap: 4px;
    /* Extreme compact gap */
  }
}

.section.inCartSection {
  background: var(--surface-secondary);
  border-color: var(--primary-light);
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


.ibPrice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  /* Allow it to take available space and shrink if necessary */
}

.ibPriceMain {
  font-weight: 900;
  font-size: clamp(14px, 4.5vw, 22px);
  /* Slightly smaller min for safety */
  color: var(--text);
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}

.ibPriceSub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.ibBtn {
  flex: 1;
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--primary-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  transition: transform 0.1s ease, filter 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


.ibQtyBtn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.1s ease;
}

.ibQtyBtn svg {
  display: block;
}


.ibQtyBtn:active {
  transform: scale(0.92);
  background: var(--surface-hover);
}

.ibQtyBtn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ibQtyVal {
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ibBtnPay {
  min-width: 76px;
  height: 36px;
  font-size: 12px;
  border-radius: 9px;
  padding: 0 10px;
  flex: 0 1 auto;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.ibBtn:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

.ibBtnOff {
  background: var(--muted);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- checkout modal --- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, .85);
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.hidden {
  display: none;
}

.modalCard {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  margin-top: 20px;
  margin-bottom: 40px;
}



.checkRow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text);
}

.checkRow input {
  margin-top: 3px;
}

.checkoutStepTitle {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.checkoutStepTitleSub {
  margin-top: 2px;
}

.checkoutChoices {
  display: grid;
  gap: 10px;
}

.checkoutChoiceWrap {
  display: grid;
  gap: 0;
  border-radius: 18px;
}

.checkoutChoiceWrap.isOpen {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.checkoutChoiceWrap.isOpen .checkoutChoice {
  border-color: transparent;
  border-radius: 17px 17px 12px 12px;
  box-shadow: none;
  background: transparent;
}

.checkoutChoice {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}

.checkoutChoice.isActive {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.checkoutChoiceIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 900;
  font-size: 14px;
}

.checkoutChoiceText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.checkoutChoiceTitle {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.checkoutChoiceHint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.checkoutChoicePrice {
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

.checkoutChoiceMark {
  color: var(--text);
  font-weight: 900;
  text-align: right;
}

.checkoutHint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.checkoutFields {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.checkoutFields.checkoutChoiceDetails {
  margin-top: 0;
  padding: 0 12px 14px;
  animation: checkoutAccordionIn 180ms ease both;
}

.checkoutFields.hidden {
  display: none;
}

@keyframes checkoutAccordionIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checkoutSummary {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.035);
  color: var(--text);
  line-height: 1.35;
}

.checkoutSummaryRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}

.checkoutSummaryRow + .checkoutSummaryRow {
  margin-top: 7px;
}

.checkoutSummaryRow b {
  color: var(--text);
  white-space: nowrap;
}

.checkoutSummaryTotal {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 900;
  font-size: 16px;
}

.checkoutSummaryNote {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.paymentResultCard {
  padding: 22px;
}

.paymentResultIcon {
  width: 64px;
  height: 64px;
  margin: 2px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #fff;
  font-size: 36px;
  font-weight: 1000;
  box-shadow: 0 16px 38px rgba(34, 197, 94, 0.24);
}

.checkoutFormError {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.checkoutFormError.hidden {
  display: none;
}

.fieldError {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.cdekCitySuggest {
  display: grid;
  gap: 8px;
  margin-top: -4px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, white);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

.cdekCitySuggest.hidden {
  display: none;
}

.cdekCityOption {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  text-align: left;
  font: inherit;
}

.cdekCityOption:active {
  transform: scale(0.99);
}

.cdekCityOptionTitle {
  font-weight: 900;
  font-size: 15px;
}

.cdekCityOptionMeta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

@supports not (background: color-mix(in srgb, white, black)) {
  .checkoutChoice.isActive {
    background: var(--card);
  }
  .cdekCitySuggest {
    background: var(--card);
  }
}

.cdekWidgetSection {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 2px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.cdekWidgetSection.hidden {
  display: none;
}

.cdekWidgetHost {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: clamp(320px, 55vh, 560px);
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,250,252,.95));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.cdekLeafletMap,
.cdekWidgetHost .leaflet-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

.cdekWidgetHost .leaflet-control-attribution {
  margin: 0 5px 4px 0;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(30, 41, 59, 0.58);
  font-size: 9px;
  line-height: 1.25;
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.cdekWidgetHost .leaflet-control-attribution a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 640px) {
  .cdekWidgetHost {
    height: min(58vh, 430px);
    border-radius: 14px;
  }
}

.cdekWidgetHost.isLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  padding: 18px;
}

.cdekWidgetNote {
  margin-top: -2px;
}

/* Compact price inputs */
.fRow {
  gap: 8px;
}

.fInput {
  min-width: 0;
  width: 100%;
  padding: 10px 10px;
}

.fRow .fInput {
  flex: 1;
}

/* Orders/notifications status pills */
.statusPillFixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 6px 10px;
  border-radius: var(--radius, 999px);
  border: 1px solid var(--border);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--surface-glass);
  color: var(--text);
}

.statusPillFixed.st_shipped {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
  color: #166534;
}

.statusPillFixed.st_picking {
  background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .25);
  color: #1e3a8a;
}

.statusPillFixed.st_confirmed {
  background: rgba(99, 102, 241, .10);
  border-color: rgba(99, 102, 241, .25);
  color: #c7d2fe;
}

.statusPillFixed.st_paid {
  background: rgba(245, 158, 11, .10);
  border-color: rgba(245, 158, 11, .25);
  color: #fbbf24;
}

.statusPillFixed.st_cancelled {
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .25);
  color: #fecaca;
}

.statusPillFixed.st_new {
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .35);
  color: #e2e8f0;
}

.revReplyWrap {
  margin-top: 10px;
}

.revReplyToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
}

.revReplyToggle:active {
  transform: translateY(1px);
}


/* ---- Helpfulness votes ---- */
.voteRow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.voteRight {
  justify-content: flex-end;
}

.voteCirc {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 1000;
  line-height: 1;
  user-select: none;
}

.voteCirc:active {
  transform: translateY(1px);
}

.voteNum {
  font-size: 13px;
  color: var(--muted);
}

.voteUp {
  border-color: rgba(34, 197, 94, 0.35);
  color: rgba(22, 101, 52, 0.9);
}

.voteDown {
  border-color: rgba(239, 68, 68, 0.35);
  color: rgba(127, 29, 29, 0.9);
}

.voteCirc.on.voteUp {
  background: rgba(34, 197, 94, 0.10);
}

.voteCirc.on.voteDown {
  background: rgba(239, 68, 68, 0.10);
}


/* Categories tree in drawer */
.catTree {
  margin-top: 8px;
  max-height: 40vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.catNode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.catNode:last-child {
  border-bottom: none;
}

.catNode:hover {
  background: var(--hover);
}

.catNode .chev {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--muted);
  flex: 0 0 18px;
}

.catNode .name {
  flex: 1;
}

.catNode .count {
  font-size: 12px;
  color: var(--muted);
}

.catNode.sel {
  background: var(--hover);
}

.catIndent {
  margin-left: 18px;
}

.bcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  margin: 0 0 6px 0;
}

.bcrumbs span {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

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

.bcrumbs a:hover {
  text-decoration: underline;
}

.catalogCrumbs {
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.catalogCrumbs .bcrumbs {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

.promoCarousel {
  position: relative;
  margin: 10px 0 14px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.siteHeaderBanner {
  width: 100vw;
  margin: 10px calc(50% - 50vw) 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.siteHeaderBannerFrame {
  position: relative;
  overflow: hidden;
  min-height: clamp(104px, 20vw, 180px);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.9)),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, #fff), #f8fafc 65%);
  border: 0;
  box-shadow: none;
}

.siteHeaderBannerFrame.hasFallback {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(14px, 3vw, 22px);
  gap: 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.95), rgba(255,255,255,0.78) 36%, rgba(255,255,255,0.4) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #f8fafc 72%);
}

.siteHeaderBanner::before {
  display: none;
}

.siteHeaderBanner > * {
  position: static;
  z-index: auto;
}

.siteHeaderBannerImg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}

.siteHeaderBannerFallback {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.siteHeaderBannerLogo {
  width: clamp(54px, 12vw, 84px);
  height: clamp(54px, 12vw, 84px);
  border-radius: 22px;
  flex: 0 0 auto;
  background:
    center / 72% no-repeat url('/static/taptools-logo.jpg'),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border: 0;
  box-shadow: none;
}

.siteHeaderBannerCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.siteHeaderBannerTitle {
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.siteHeaderBannerText {
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

html[data-theme-preset="market_classic"] .siteHeaderBanner {
  margin: 12px calc(50% - 50vw) 14px !important;
}

html[data-theme-preset="market_classic"] .siteHeaderBannerFrame {
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 0 !important;
}

html[data-theme-preset="market_classic"] .siteHeaderBannerFrame.hasFallback {
  padding: 18px 16px !important;
}

.categoryMenu {
  width: 100vw;
  margin: 10px calc(50% - 50vw) 16px;
  padding: 14px 16px 14px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.34) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(160%);
}

.categoryMenuHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.categoryMenuTitle {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.categoryMenuRail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.categoryMenuRail::-webkit-scrollbar {
  display: none;
}

.categoryMenuCard {
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.categoryMenuCard:hover .categoryMenuMedia {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.categoryMenuMedia {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, white);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, white) 0%, color-mix(in srgb, var(--bg) 92%, black 2%) 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease);
}

.categoryMenuImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.categoryMenuPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--primary) 58%, var(--text));
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,0) 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--primary) 4%, var(--bg)));
}

.categoryMenuLabel {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
  text-align: left;
  color: var(--text);
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-theme-preset="classic"] .categoryMenu,
body[data-theme-preset="classic"] .categoryMenu,
html:not([data-theme-preset]) .categoryMenu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.46) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.40) !important;
  border-bottom: 1px solid rgba(15, 22, 40, 0.08) !important;
  box-shadow: none !important;
}

html[data-theme-preset="classic"] .categoryMenuTitle,
body[data-theme-preset="classic"] .categoryMenuTitle,
html:not([data-theme-preset]) .categoryMenuTitle {
  color: var(--text) !important;
}

html[data-theme-preset="classic"] .categoryMenuMedia,
body[data-theme-preset="classic"] .categoryMenuMedia,
html:not([data-theme-preset]) .categoryMenuMedia {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%) !important;
  border-color: rgba(15, 22, 40, 0.08) !important;
}

.promoViewport {
  position: relative;
  height: 184px;
}

.promoSlide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 82%, white);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}

.promoSlide.isActive {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.promoSlideBg {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg) 88%, white);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.promoSlideOverlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.68) 0%, rgba(15, 23, 42, 0.38) 42%, rgba(15, 23, 42, 0.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}

.promoSlideBody {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 184px;
  padding: 18px;
  padding-right: 22%;
  color: #fff;
  overflow: hidden;
}

.promoTitle {
  max-width: 100%;
  font-size: 26px;
  font-weight: 1000;
  line-height: 1.02;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.promoText {
  max-width: 100%;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  overflow-wrap: anywhere;
}

.promoBtn {
  margin-top: 14px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  flex: 0 0 auto;
}

.promoDots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.promoDot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, width 160ms ease;
}

.promoDot.isActive {
  width: 22px;
  background: var(--primary);
}



/* Discount price display */
.oldPrice {
  text-decoration: line-through;
  opacity: .55;
  font-weight: 800;
  margin-right: 8px;
  font-size: 13px;
  color: var(--muted);
  opacity: 1;
}

.nowPrice {
  font-weight: 1000;
  color: inherit;
}

.discBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 48, .18);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.1;
}

.oldPrice+.nowPrice {
  color: #ef4444;
}

.discBadge {
  border-color: #ef4444;
  color: #ef4444;
}

.discCorner {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(239, 68, 68, .25);
}

@media (max-width: 420px) {
  .grid {
    gap: 12px;
  }

  .promoViewport,
  .promoSlideBody {
    height: 168px;
  }

  .promoSlideBody {
    padding-right: 18%;
  }

  .promoTitle {
    font-size: 22px;
    max-width: 13ch;
  }

  .promoText {
    font-size: 12px;
    max-width: 22ch;
  }

  .pBody {
    min-height: 112px;
  }
}

/* Quick Chips (Category ribbon) */
.quickChips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scrollbar-width: none;
}

.quickChips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.chip.isActive {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Visual color swatches in Filters */
.fGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.colorCircle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  transition: border-color 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorCircleInner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.colorItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.colorItemLabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.colorItem.isActive .colorCircle {
  border-color: var(--primary);
}

/* iOS-style toggle */
.fCheck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}

.toggle {
  position: relative;
  width: 50px;
  height: 28px;
  background: var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff; /* Static white for the knob is fine usually, but let's make it theme-aware if needed */
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

input:checked+.toggle {
  background: #22c55e;
}

input:checked+.toggle:after {
  transform: translateX(22px);
}

.fCheck input {
  display: none;
}



/* --- In-app popup (browser fallback) --- */
.uiPopupOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.uiPopupOverlay.hidden {
  display: none;
}

.uiPopupCard {
  width: min(420px, 100%);
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  padding: 14px;
  color: var(--text);
}

.uiPopupTitle {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}

.uiPopupText {
  white-space: pre-line;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.35;
}

.uiPopupBtns {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* --- Orders: item row with thumbnail + prices --- */
.orderItemRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orderThumb {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}

.orderInfo {
  min-width: 0;
  flex: 1 1 auto;
}

.orderTitle {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orderSub {
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orderPrices {
  text-align: right;
  flex: 0 0 auto;
  min-width: 90px;
}

.orderOld {
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: 12px;
}

.orderNow {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.05;
}

.orderDisc {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.25);
  color: rgba(255, 0, 0, 0.75);
  font-weight: 900;
  font-size: 12px;
}

.orderLine {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.55);
}

.orderLineOld {
  text-decoration: line-through;
  margin-right: 6px;
  color: rgba(0, 0, 0, 0.32);
}

.orderLineNow {
  color: rgba(0, 0, 0, 0.72);
}


/* Inline notices (inside page, no popups) */
.inlineNotice {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 235, 205, .55);
  color: #111827;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-line;
}

.inlineNotice.hidden {
  display: none;
}


.pLoader {
  padding: 14px 16px;
  text-align: center;
  opacity: .7;
  font-size: 14px
}


.brandLogo {
  width: clamp(36px, 10vw, 44px);
  height: clamp(36px, 10vw, 44px);
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: var(--text);
  flex: 0 0 auto;
  user-select: none;
}

.brandText {
  display: block;
}

/* When logo is removed, keep the title compact but visible */
#shopTitle {
  max-width: 44vw;
}

/* Project logo in storefront header (keeps existing JS title updates, but shows image). */
#shopTitle {
  width: min(56vw, 300px);
  height: 36px;
  max-width: min(56vw, 300px);
  background: center / contain no-repeat url('/static/taptools-logo.jpg');
  color: transparent !important;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0 !important;
}



/* Stock badge on color swatches */
.swThumb {
  position: relative;
}

.swStockBadge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
  background: #d0021b;
  font-weight: 1000;
  color: #fff;
  pointer-events: none;
}

.stockParen {
  font-weight: 900;
  color: #d0021b;
  font-size: 12px;
}


/* === Active filters bar (chips) === */
#shopTitle {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activeFiltersBar {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 12;
  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  margin: 0;
  border-bottom: 0.5px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.activeFiltersBarInner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  overflow: hidden;
}

.activeChips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  padding: 4px 0;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.activeChips::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.afChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-hover);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  white-space: nowrap;
  animation: chipIn 0.2s ease-out;
}

@keyframes chipIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.afChipText {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afChipX {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: background 0.1s;
}

.afChipX:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.9);
}

.afClearBtn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.afClearBtn:active {
  opacity: 1;
}

[data-theme="dark"] .afChipX:active {
  background: rgba(255, 255, 255, 0.1);
}


/* ===== Filters drawer scrolling (v15.4) ===== */
.drawer {
  background: var(--card);
  color: var(--text);
}

.drawerInner {
  display: flex;
  flex-direction: column;
  height: min(92vh, 720px);
  max-height: 92vh;
}

.drawerHeader {
  flex: 0 0 auto;
}

.drawerFooter {
  flex: 0 0 auto;
}

.drawerBody {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}


/* Inputs placeholders */
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}


/* ===== Dark theme component overrides (v15.5) ===== */
body[data-theme="dark"] .toggleText {
  color: var(--text) !important;
}

body[data-theme="dark"] .toggleUi {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--border) !important;
}

body[data-theme="dark"] .toggle input:checked+.toggleUi {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

body[data-theme="dark"] .cImg {
  background: rgba(255, 255, 255, .06) !important;
}

body[data-theme="dark"] .cSub {
  color: var(--muted) !important;
}

body[data-theme="dark"] .btnGhost,
body[data-theme="dark"] .btnLight {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body[data-theme="dark"] .btnWhite {
  background: rgba(255, 255, 255, .10) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

body[data-theme="dark"] .panel,
body[data-theme="dark"] .card,
body[data-theme="dark"] .box {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body[data-theme="dark"] .divider {
  border-color: var(--border) !important;
}


/* ===== Theme presets (v27) =====
   Use: <body data-theme-preset="classic"> etc.
   Note: preset variables are applied on <body> and reinforced for html[data-theme="dark"].
*/
:root {
  --motion-dur: 260ms;
  --motion-dur-fast: 180ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --glass-blur: 14px;
  --glass-alpha: 0.86;
  --bottom-stack-gap: 2px;

  --accent_default: #ff8a6a;
}

html[data-theme-preset="classic"],
html[data-theme="dark"] html[data-theme-preset="classic"] {
  --bg: #f6f7fb;
  --card: #ffffff;
  --card2: #f0f3fb;
  --text: #0f1628;
  --text2: rgba(15, 22, 40, .75);
  --muted: rgba(15, 22, 40, .55);
  --border: rgba(15, 22, 40, .12);
  --shadow: 0 12px 30px rgba(18, 32, 70, .12);
  --accent_default: #ff8a6a;
}

html[data-theme-preset="graphite_grad"],
html[data-theme="dark"] html[data-theme-preset="graphite_grad"] {
  --bg: linear-gradient(180deg, #0a0b0d 0%, #111318 55%, #0b0c10 100%);
  --card: rgba(16, 18, 22, .92);
  --card2: rgba(22, 24, 30, .92);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .72);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 18px 40px rgba(0, 0, 0, .52);
  --accent_default: #8b5cf6;
}

html[data-theme-preset="neon_night"],
html[data-theme="dark"] html[data-theme-preset="neon_night"] {
  --bg: radial-gradient(1200px 700px at 20% 10%, rgba(120, 90, 255, .18) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #070a14 0%, #0b0f1a 60%, #060912 100%);
  --card: linear-gradient(180deg, rgba(18, 22, 38, .92) 0%, rgba(12, 15, 26, .92) 100%);
  --card2: rgba(18, 22, 38, .78);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(120, 90, 255, .25);
  --shadow: 0 18px 46px rgba(0, 0, 0, .60);
  --accent_default: #38bdf8;
}

html[data-theme-preset="cyber_lime"],
html[data-theme="dark"] html[data-theme-preset="cyber_lime"] {
  --bg: linear-gradient(180deg, #070a09 0%, #0c1210 55%, #050807 100%);
  --card: rgba(12, 18, 15, .92);
  --card2: rgba(18, 28, 22, .88);
  --text: rgba(244, 255, 249, .92);
  --text2: rgba(244, 255, 249, .74);
  --muted: rgba(244, 255, 249, .56);
  --border: rgba(34, 197, 94, .22);
  --shadow: 0 18px 44px rgba(0, 0, 0, .60);
  --accent_default: #22c55e;
}

html[data-theme-preset="rose_neon"],
html[data-theme="dark"] html[data-theme-preset="rose_neon"] {
  --bg: radial-gradient(1000px 600px at 70% 10%, rgba(255, 0, 153, .16) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #09040b 0%, #120714 60%, #070309 100%);
  --card: linear-gradient(180deg, rgba(22, 10, 26, .92) 0%, rgba(14, 6, 18, .92) 100%);
  --card2: rgba(26, 12, 32, .78);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(255, 0, 153, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #ff4da6;
}

html[data-theme-preset="gold_lux"],
html[data-theme="dark"] html[data-theme-preset="gold_lux"] {
  --bg: linear-gradient(180deg, #070606 0%, #0e0a07 55%, #060506 100%);
  --card: linear-gradient(180deg, rgba(26, 18, 10, .92) 0%, rgba(14, 10, 8, .92) 100%);
  --card2: rgba(32, 22, 12, .82);
  --text: rgba(255, 251, 240, .92);
  --text2: rgba(255, 251, 240, .74);
  --muted: rgba(255, 251, 240, .56);
  --border: rgba(212, 175, 55, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #d4af37;
}

html[data-theme-preset="emerald_dark"],
html[data-theme="dark"] html[data-theme-preset="emerald_dark"] {
  --bg: radial-gradient(900px 600px at 30% 10%, rgba(16, 185, 129, .14) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #040b08 0%, #071410 55%, #030806 100%);
  --card: linear-gradient(180deg, rgba(10, 24, 18, .92) 0%, rgba(6, 14, 11, .92) 100%);
  --card2: rgba(12, 30, 22, .78);
  --text: rgba(244, 255, 252, .92);
  --text2: rgba(244, 255, 252, .74);
  --muted: rgba(244, 255, 252, .56);
  --border: rgba(16, 185, 129, .20);
  --shadow: 0 18px 44px rgba(0, 0, 0, .60);
  --accent_default: #10b981;
}

html[data-theme-preset="midnight_purple"],
html[data-theme="dark"] html[data-theme-preset="midnight_purple"] {
  --bg: radial-gradient(1100px 650px at 20% 10%, rgba(124, 92, 255, .16) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #070612 0%, #0c0b18 60%, #060511 100%);
  --card: linear-gradient(180deg, rgba(20, 18, 38, .92) 0%, rgba(12, 10, 24, .92) 100%);
  --card2: rgba(24, 22, 46, .78);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(124, 92, 255, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #7c5cff;
}

html[data-theme-preset="ocean_glow"],
html[data-theme="dark"] html[data-theme-preset="ocean_glow"] {
  --bg: radial-gradient(1100px 650px at 70% 10%, rgba(34, 211, 238, .16) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #040a12 0%, #071424 60%, #03070f 100%);
  --card: linear-gradient(180deg, rgba(12, 24, 46, .92) 0%, rgba(6, 14, 28, .92) 100%);
  --card2: rgba(14, 32, 54, .78);
  --text: rgba(244, 252, 255, .92);
  --text2: rgba(244, 252, 255, .74);
  --muted: rgba(244, 252, 255, .56);
  --border: rgba(34, 211, 238, .20);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #22d3ee;
}

html[data-theme-preset="red_alert"],
html[data-theme="dark"] html[data-theme-preset="red_alert"] {
  --bg: radial-gradient(1000px 650px at 30% 10%, rgba(239, 68, 68, .18) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #0a0506 0%, #120607 60%, #070304 100%);
  --card: linear-gradient(180deg, rgba(28, 10, 12, .92) 0%, rgba(16, 6, 7, .92) 100%);
  --card2: rgba(34, 12, 14, .78);
  --text: rgba(255, 248, 248, .92);
  --text2: rgba(255, 248, 248, .74);
  --muted: rgba(255, 248, 248, .56);
  --border: rgba(239, 68, 68, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #ef4444;
}

html[data-theme-preset="peach_soft"],
html[data-theme="dark"] html[data-theme-preset="peach_soft"] {
  --bg: linear-gradient(180deg, #fff5f0 0%, #fff1ea 55%, #fff7f3 100%);
  --card: linear-gradient(180deg, #ffffff 0%, #fff6f2 100%);
  --card2: #ffe9df;
  --text: #1b1310;
  --text2: rgba(27, 19, 16, .74);
  --muted: rgba(27, 19, 16, .52);
  --border: rgba(27, 19, 16, .12);
  --shadow: 0 12px 30px rgba(90, 40, 20, .10);
  --accent_default: #fb7185;
}

html[data-theme-preset="mint_glass"],
html[data-theme="dark"] html[data-theme-preset="mint_glass"] {
  --bg: linear-gradient(180deg, #eefbf6 0%, #e9faf3 55%, #f6fffb 100%);
  --card: rgba(255, 255, 255, .70);
  --card2: rgba(255, 255, 255, .52);
  --text: #0b1f18;
  --text2: rgba(11, 31, 24, .74);
  --muted: rgba(11, 31, 24, .52);
  --border: rgba(11, 31, 24, .10);
  --shadow: 0 12px 30px rgba(0, 40, 24, .10);
  --accent_default: #10b981;
}

html[data-theme-preset="steel_blue"],
html[data-theme="dark"] html[data-theme-preset="steel_blue"] {
  --bg: linear-gradient(180deg, #eef3fb 0%, #e8effa 55%, #f4f7ff 100%);
  --card: linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
  --card2: #e4ecff;
  --text: #0f1628;
  --text2: rgba(15, 22, 40, .74);
  --muted: rgba(15, 22, 40, .52);
  --border: rgba(15, 22, 40, .12);
  --shadow: 0 12px 30px rgba(18, 32, 70, .12);
  --accent_default: #3b82f6;
}

html[data-theme-preset="orange_energy"],
html[data-theme="dark"] html[data-theme-preset="orange_energy"] {
  --bg: radial-gradient(1000px 650px at 70% 10%, rgba(249, 115, 22, .20) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #070506 0%, #120a06 60%, #070404 100%);
  --card: linear-gradient(180deg, rgba(30, 16, 10, .92) 0%, rgba(16, 9, 6, .92) 100%);
  --card2: rgba(38, 20, 12, .78);
  --text: rgba(255, 252, 248, .92);
  --text2: rgba(255, 252, 248, .74);
  --muted: rgba(255, 252, 248, .56);
  --border: rgba(249, 115, 22, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #f97316;
}

html[data-theme-preset="mono_ink"],
html[data-theme="dark"] html[data-theme-preset="mono_ink"] {
  --bg: linear-gradient(180deg, #06070a 0%, #0b0d12 55%, #05060a 100%);
  --card: rgba(16, 18, 24, .92);
  --card2: rgba(22, 24, 34, .82);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(255, 255, 255, .10);
  --shadow: 0 18px 46px rgba(0, 0, 0, .64);
  --accent_default: #a3a3a3;
}

html[data-theme-preset="violet_candy"],
html[data-theme="dark"] html[data-theme-preset="violet_candy"] {
  --bg: radial-gradient(1100px 650px at 30% 10%, rgba(168, 85, 247, .18) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #070313 0%, #100520 60%, #060211 100%);
  --card: linear-gradient(180deg, rgba(24, 10, 46, .92) 0%, rgba(12, 5, 24, .92) 100%);
  --card2: rgba(30, 12, 58, .78);
  --text: rgba(255, 255, 255, .92);
  --text2: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .56);
  --border: rgba(168, 85, 247, .22);
  --shadow: 0 18px 46px rgba(0, 0, 0, .62);
  --accent_default: #a855f7;
}

/* Dark theme: plain buttons (e.g. "Показать ещё") */
:root[data-theme="dark"] .btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow1);
}

:root[data-theme="dark"] .btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .btn:active {
  background: rgba(255, 255, 255, 0.12);
}





/* ===== Preset overrides removed (v27)
   Presets are now defined with selectors that work in both light and dark modes.
*/

   Applies to all dark presets (data-theme="dark")
   ================================ */

:root[data-theme="dark"] {
  --surface-glass: rgba(12, 16, 26, 0.72);
  --surface-glass-2: rgba(12, 16, 26, 0.58);

  --on-card: rgba(255, 255, 255, .90);
  --placeholder: rgba(255, 255, 255, .48);
}

/* Dark theme button accessibility overrides */
:root[data-theme="dark"] .ibQtyBtn,
:root[data-theme="dark"] .stepBtn,
:root[data-theme="dark"] .iconMini {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .ibQtyBtn:active,
:root[data-theme="dark"] .stepBtn:active,
:root[data-theme="dark"] .iconMini:active {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Top icon buttons: make icons readable in dark themes */
:root[data-theme="dark"] .iconBtn {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--text);
  box-shadow: var(--shadow2);
}

:root[data-theme="dark"] .iconBtn.isActive {
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

/* Search: avoid light input on dark background + readable placeholder */
:root[data-theme="dark"] .searchBox {
  background: color-mix(in srgb, var(--card) 78%, transparent);
  box-shadow: var(--shadow2);
}

:root[data-theme="dark"] .searchInput {
  color: var(--text);
}

:root[data-theme="dark"] .searchInput::placeholder {
  color: var(--placeholder);
}

:root[data-theme="dark"] .clearBtn {
  background: color-mix(in srgb, var(--card2) 70%, transparent);
  color: var(--primary);
}

/* Product cards: title + meta */
:root[data-theme="dark"] .pTitle,
:root[data-theme="dark"] .pTitle .pTitle {
  color: var(--text);
}

:root[data-theme="dark"] .pMeta,
:root[data-theme="dark"] .pSub,
:root[data-theme="dark"] .pSmall {
  color: var(--text2);
}

/* Rating pill near star */
:root[data-theme="dark"] .rating {
  color: var(--text);
}

:root[data-theme="dark"] .pCorner .rating {
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border-color: var(--border);
}

/* Reviews/Q&A: label "Анонимно" and other text */
:root[data-theme="dark"] .revAnon {
  color: var(--text2);
}

:root[data-theme="dark"] .qaItem,
:root[data-theme="dark"] .qaBox,
:root[data-theme="dark"] .reviewsBox {
  color: var(--on-card);
}

/* Notifications / orders: override hardcoded light-mode blacks */
:root[data-theme="dark"] .uiPopupText,
:root[data-theme="dark"] .orderSub,
:root[data-theme="dark"] .orderOld,
:root[data-theme="dark"] .orderNow,
:root[data-theme="dark"] .orderLineOld,
:root[data-theme="dark"] .orderLineNow {
  color: var(--text2) !important;
}

/* Any common UI muted text */
:root[data-theme="dark"] .muted {
  color: var(--muted);
}


/* ============================================================
   DARK THEMES — CONTRAST PATCH (v31)
   Fix: "black on black" for product titles/prices, ratings, and notification statuses.
   Applies only when theme is classified as dark via data-theme-mode="dark".
   ============================================================ */



  /* v32: ensure non-discount price text is readable in dark themes */
  :root[data-theme-mode="dark"] .pPrice .nowPrice {
    color: var(--text) !important;
  }

  :root[data-theme-mode="dark"] .pPrice .oldPrice {
    color: var(--muted) !important;
  }

  :root[data-theme-mode="dark"] .pPrice .stockParen {
    color: var(--text2) !important;
  }


  /* Top search row (header) */
  .searchRow {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px 14px !important;
  }

  .searchBoxTop {
    flex: 1;
    min-width: 0;
  }

  .filterBtnTop {
    display: none !important;
  }

  .backBtnTop {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
  }

  /* Inline filters panel (non-floating)  // Update layout padding (V15: Ultra-Slim Unified Header)
  try {
    document.documentElement.style.setProperty("--topbar-h", "54px");
  } catch (_e) { }
  .drawer.drawerInline {
    position: sticky;
    top: calc(var(--topbar-h, 56px));
    left: 0;
    right: 0;
    margin: 0;
    z-index: 11;
    border-radius: 0;
    box-shadow: none;
  }

  .drawer.drawerInline.hidden {
    display: none !important;
  }

  .drawer.drawerInline .drawerHeader {
    position: sticky;
    top: 0;
    background: inherit;
    border-radius: 0;
  }

  .drawer.drawerInline .drawerBody {
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }


  /* v41: top header title should show section name (not shop name) and align right */
  #shopTitle {
    flex: 1;
    min-width: 0;
    text-align: right;
    padding-right: 10px;
  }



  .bottomNav.isHidden {
    transform: translateY(calc(100% + 60px));
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
  }

  .pCard:active {
    transform: scale(0.99);
  }


  /* === Mobile bottom nav tighten === */
  @media (max-width: 420px) {
    .bottomNav {
      left: 8px;
      right: 8px;
      bottom: 8px;
      padding: 8px 8px;
      padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
      border-radius: 20px;
      gap: 6px;
    }

    .navBtn {
      padding: 6px 4px;
      gap: 3px;
      border-radius: 14px;
    }

    .navBtn .icon {
      width: 20px;
      height: 20px;
    }

    .navLabel {
      font-size: 10px;
      letter-spacing: -0.2px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bottomNav .badgeCount {
      top: 2px;
      left: 50%;
      right: auto;
      margin-left: 8px;
      min-width: 16px;
      height: 16px;
      font-size: 10px;
      padding: 0 4px;
    }
  }


  /* ===== Skeleton loading (app-like) ===== */
  :root {
    --sk-bg: rgba(0, 0, 0, .06);
    --sk-shine: rgba(255, 255, 255, .35);
  }

  [data-theme="dark"],
  .themeDark {
    --sk-bg: rgba(255, 255, 255, .07);
    --sk-shine: rgba(255, 255, 255, .12);
  }

  @keyframes skShimmer {
    0% {
      transform: translateX(-120%);
    }

    100% {
      transform: translateX(120%);
    }
  }

  .skeleton {
    position: relative;
    overflow: hidden;
    background: var(--sk-bg);
    border-radius: 18px;
  }

  .skeleton:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, var(--sk-shine) 50%, transparent 100%);
    transform: translateX(-120%);
    animation: skShimmer 1.25s linear infinite;
    pointer-events: none;
  }

  .pCard.isSkeleton {
    border: 1px solid rgba(0, 0, 0, .06);
  }

  [data-theme="dark"] .pCard.isSkeleton,
  .themeDark .pCard.isSkeleton {
    border: 1px solid rgba(255, 255, 255, .08);
  }

  .pCard.isSkeleton .pMedia {
    background: transparent !important;
  }

  .pCard.isSkeleton .pImg {
    display: none !important;
  }

  .pCard.isSkeleton .pBadge,
  .pCard.isSkeleton .pFav {
    display: none !important;
  }

  .pCard.isSkeleton .pBody {
    padding: 14px 14px 16px;
  }

  .pCard.isSkeleton .sk-line {
    height: 14px;
    margin: 10px 0;
    border-radius: 10px;
  }

  .pCard.isSkeleton .sk-line.sm {
    height: 12px;
    width: 70%;
  }

  .pCard.isSkeleton .sk-line.md {
    height: 14px;
    width: 85%;
  }

  .pCard.isSkeleton .sk-line.lg {
    height: 18px;
    width: 60%;
  }

  .pCard.isSkeleton .sk-line.xs {
    height: 11px;
    width: 50%;
    opacity: .85;
  }


  /* ===== Press feedback ===== */
  .pressable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }

  .pressable.isPressed {
    transform: scale(.985);
  }

  .pressable {
    transition: transform var(--motion-dur-fast, 120ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1));
  }

  /* ===== Hide topHeader for plain views (CSS guarantee — no JS race) ===== */
  html body[data-view="cart"] #topHeader,
  html body[data-view="orders"] #topHeader,
  html body[data-view="favorites"] #topHeader,
  html body[data-view="notifications"] #topHeader,
  html body[data-view="product"] #topHeader,
  .top.hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== Plain-view header (back + title, always in DOM) ===== */
  .plainHeader {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    padding: calc(env(safe-area-inset-top) + 8px) 14px 8px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }

  .plainBackBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.12s ease;
  }
  .plainBackBtn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
  }
  .plainBackBtn:active { transform: scale(0.92); }

  .plainTitle {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Show plainHeader on plain views */
  body[data-view="cart"] .plainHeader,
  body[data-view="orders"] .plainHeader,
  body[data-view="favorites"] .plainHeader,
  body[data-view="notifications"] .plainHeader {
    display: flex !important;
  }

  /* ===== App-like spacing for non-catalog views ===== */
  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="cart"] #viewCart {
    padding: calc(env(safe-area-inset-top) + 8px) 5px calc(140px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body[data-view="orders"] #viewOrders .section,
  body[data-view="notifications"] #viewNotifications .section,
  body[data-view="favorites"] #viewFavorites .section,
  body[data-view="cart"] #viewCart .section {
    margin: 0;
  }

  body[data-view="cart"] #viewCart .section {
    padding-left: 9px;
    padding-right: 9px;
  }

  body[data-view="cart"] #viewCart .promoBlock {
    padding-left: 9px;
    padding-right: 9px;
  }

  /* ===== Like button pop (product header) ===== */
  .likeBtn.likePop {
    animation: likePop 220ms var(--motion-ease);
  }

  @keyframes likePop {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.10);
    }

    100% {
      transform: scale(1);
    }
  }

  /* ===== Top panel rounded ===== */
  .top {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    border-radius: 22px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(calc(var(--glass-blur) + 4px)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) !important;
  }

  /* keep safe-area top inside padding, but don't double-add side safe-area */
  .top {
    padding: calc(4px + env(safe-area-inset-top)) 12px 4px 12px !important;
  }

  /* ===== Bottom nav spacing =====
   NOTE: Do NOT add asymmetric margins between buttons.
   If a centered gap is ever needed, implement it with a dedicated spacer element.
*/

  /* ===== Active nav pill ===== */
  .navPill {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 44px;
    /* will be overridden by JS */
    border-radius: var(--radius, 16px);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    transition: transform var(--motion-dur) var(--motion-ease), width var(--motion-dur) var(--motion-ease), height var(--motion-dur) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
    pointer-events: none;
    opacity: 0;
  }

  [data-theme="dark"] .navPill,
  .themeDark .navPill {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .40);
  }

  .bottomNav {
    position: fixed;
  }

  .bottomNav .navBtn.isActive .icon {
    transform: translateY(-1px);
  }

  .bottomNav .navBtn .icon {
    transition: transform var(--motion-dur-fast) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
  }

  /* ===== Heart pop ===== */
  .pFav.favPop,
  .likeBtn.favPop {
    animation: favPop 220ms var(--motion-ease);
  }

  @keyframes favPop {
    0% {
      transform: scale(1);
    }

    55% {
      transform: scale(1.14);
    }

    100% {
      transform: scale(1);
    }
  }

  /* ===== Empty state ===== */
  .emptyState {
    padding: 18px 14px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface-glass);
    box-shadow: var(--shadow);
    backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  }

  .emptyState .t {
    font-weight: 1000;
    font-size: 16px;
    margin: 0 0 6px 0;
  }

  .emptyState .s {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }


  /* ===== WOW polish: view transitions + segmented pill ===== */
  .view>section {
    will-change: opacity, transform;
  }

  .viewFxOut {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
  }

  .viewFxIn {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease);
  }

  .segTabs {
    position: relative;
    overflow: hidden;
  }

  .segTabs .segBtn {
    position: relative;
    z-index: 2;
  }

  .segPill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: none;
    /* cleaner, no "dirty" shadows */
    transition: transform var(--motion-dur) var(--motion-ease), width var(--motion-dur) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
    pointer-events: none;
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {

    .viewFxOut,
    .viewFxIn,
    .segPill,
    .navPill {
      transition: none !important;
    }
  }

  .navBtn.isActive .navLabel {
    font-weight: 700;
  }


  /* Pull-to-refresh: Hidden by default */
  #pullRefresh {
    display: none !important;
    position: fixed !important;
    left: 50% !important;
    top: calc(env(safe-area-inset-top) + 6px) !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 140ms ease;
  }

  #pullRefresh.isPulling,
  #pullRefresh.isRefreshing {
    display: flex !important;
    opacity: 1 !important;
  }

  #pullRefresh .ptrBubble {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-md);
  }

  html[data-theme-mode="dark"] #pullRefresh .ptrBubble,
  body[data-theme-mode="dark"] #pullRefresh .ptrBubble {
    background: rgba(18, 18, 18, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  }

  #pullRefresh .ptrArrow {
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
    transition: transform 140ms ease;
  }

  #pullRefresh .ptrSpin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-top-color: rgba(0, 0, 0, 0.55);
    display: none;
    animation: ptrSpin 0.8s linear infinite;
  }

  #pullRefresh .ptrText {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.85;
  }

  #pullRefresh.isArmed .ptrArrow {
    transform: rotate(180deg);
  }

  #pullRefresh.isRefreshing .ptrArrow {
    display: none;
  }

  #pullRefresh.isRefreshing .ptrSpin {
    display: block;
  }

  @keyframes ptrSpin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }


  /* Immersive product mode: hide UI chrome after tapping the gallery */
  body.isImmersive .segTabs,
  body.isImmersive .bottomBar {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }

  body.isImmersive .bottomNav {
    opacity: 0;
    transform: translateY(28px);
    pointer-events: none;
  }

  body.isImmersive .pTopBar {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
  }


  /* --- Premium UI additions --- */
  .pTopBar {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .pTopBar.isSolid {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
  }

  [data-theme="dark"] .pTopBar.isSolid {
    backdrop-filter: blur(10px);
  }


  .heartFlash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0;
    animation: heartFlashPop 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  [data-theme="dark"] .heartFlash {
    background: rgba(255, 255, 255, .06);
  }

  .heartFlash svg {
    width: 44px;
    height: 44px;
  }

  @keyframes heartFlashPop {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6);
    }

    20% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.0);
    }

    70% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.02);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.08);
    }
  }

  .gWrap img.isZooming {
    transition: none !important;
    will-change: transform;
  }


  /* ===== PATCHED9: unified full-width chrome (top + bottom), keep inner corners only ===== */
  .top {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 0 18px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    padding: calc(4px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 4px calc(12px + env(safe-area-inset-left)) !important;
  }

  .bottomNav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: none !important;
  }

  /* Remove small-screen "floating pill" override: keep full-width bottom sheet style */
  @media (max-width: 420px) {
    .bottomNav {
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      border-radius: 18px 18px 0 0 !important;
      padding: 10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)) !important;
      gap: 8px !important;
    }
  }

  /* Floating "Add to cart" bar should stay rounded on all sides, smaller than bottom nav */
  .bottomBar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 10px) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 10px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)) !important;
  }

  /* Make bottomBar feel smaller than nav */
  .bottomBar .bbBtn {
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }


  /* ---- UI polish: disable ugly tap highlights / focus boxes on segmented buttons ---- */
  .segBtn,
  .segTabs button {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
  }

  .segBtn:focus,
  .segTabs button:focus {
    outline: none;
  }

  .segBtn:focus-visible,
  .segTabs button:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* ---- Immersive photo mode hides gallery nav arrows (user will swipe) ---- */
  body.isImmersive .gNav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(6px) scale(0.98);
  }



  /* ============================================================
   NEW PRESETS (v2) — more distinct looks
   ============================================================ */

  /* Light: Paper Cream — warm, editorial, “printed catalog” */
  html[data-theme-preset="paper_cream"],
  html[data-theme="dark"] html[data-theme-preset="paper_cream"] {
    --bg: linear-gradient(180deg, #fffaf0 0%, #fff3df 55%, #fffaf2 100%);
    --card: linear-gradient(180deg, #ffffff 0%, #fff6e8 100%);
    --card2: #ffe9c8;
    --text: #1c140c;
    --text2: rgba(28, 20, 12, .74);
    --muted: rgba(28, 20, 12, .52);
    --border: rgba(28, 20, 12, .12);
    --shadow: 0 12px 30px rgba(90, 60, 10, .10);
    --accent_default: #c2410c;
    /* terracotta */
    --glass-blur: 10px;
    --surface-glass: rgba(255, 255, 255, .72);
  }

  /* Light: Ice Blue — clean, airy, “tech showroom” */
  html[data-theme-preset="ice_blue"],
  html[data-theme="dark"] html[data-theme-preset="ice_blue"] {
    --bg: radial-gradient(1200px 800px at 20% 10%, rgba(56, 189, 248, .28), transparent 55%),
      linear-gradient(180deg, #f6fbff 0%, #eef7ff 60%, #f9fdff 100%);
    --card: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
    --card2: #dff3ff;
    --text: #0b1a2a;
    --text2: rgba(11, 26, 42, .74);
    --muted: rgba(11, 26, 42, .52);
    --border: rgba(11, 26, 42, .12);
    --shadow: 0 12px 30px rgba(10, 40, 80, .10);
    --accent_default: #0284c7;
    /* sky */
    --glass-blur: 12px;
    --surface-glass: rgba(255, 255, 255, .70);
  }

  /* Dark: AMOLED Pure — true black, high contrast */
  html[data-theme-preset="amoled_pure"],
  html[data-theme="dark"] html[data-theme-preset="amoled_pure"] {
    --bg: #000000;
    --card: linear-gradient(180deg, #0a0a0a 0%, #070707 100%);
    --card2: #0d0d0d;
    --text: rgba(255, 255, 255, .94);
    --text2: rgba(255, 255, 255, .76);
    --muted: rgba(255, 255, 255, .58);
    --border: rgba(255, 255, 255, .12);
    --shadow: 0 18px 46px rgba(0, 0, 0, .72);
    --accent_default: #22d3ee;
    /* cyan */
    --glass-blur: 14px;
    --surface-glass: rgba(20, 20, 20, .72);
    --navIconColor: rgba(255, 255, 255, .96);
    --navLabelColor: rgba(255, 255, 255, .82);
  }

  /* Dark: Sunset Violet — cinematic gradient, neon accent */
  html[data-theme-preset="sunset_violet"],
  html[data-theme="dark"] html[data-theme-preset="sunset_violet"] {
    --bg: radial-gradient(1200px 900px at 15% 10%, rgba(249, 115, 22, .22), transparent 55%),
      radial-gradient(900px 700px at 85% 25%, rgba(168, 85, 247, .22), transparent 55%),
      linear-gradient(180deg, #0a0a12 0%, #070716 55%, #09091b 100%);
    --card: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .03) 100%);
    --card2: rgba(255, 255, 255, .05);
    --text: rgba(255, 255, 255, .94);
    --text2: rgba(255, 255, 255, .76);
    --muted: rgba(255, 255, 255, .58);
    --border: rgba(255, 255, 255, .14);
    --shadow: 0 18px 46px rgba(0, 0, 0, .70);
    --accent_default: #fb7185;
    /* rose */
    --glass-blur: 16px;
    --surface-glass: rgba(18, 12, 26, .72);
    --navIconColor: rgba(255, 255, 255, .96);
    --navLabelColor: rgba(255, 255, 255, .82);
  }


/* ============================================================
   FINAL STABILITY OVERRIDES (Absolute Global Priority)
   ============================================================ */

html, 
body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bottomNav {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 1000 !important;
}

.modal.hidden {
  display: none !important;
}

/* Order Summary Styles (V18) */
.orderSummaryPriceBlock {
  background: var(--card2);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
}
.osRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
}
.osDiscount {
  color: var(--accent) !important;
  font-weight: 500;
}
.osTotal {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}




/* === NUCLEAR SYNC ENGINE (V31_FINAL) === */

/* BASE DARK LAYER */
html[data-theme="dark"], html[data-theme-preset^="pattern_"] {
  --text: #ffffff !important;
  --text-secondary: rgba(255, 255, 255, 0.92) !important;
  --muted: rgba(255, 255, 255, 0.75) !important;
  --border: rgba(255, 255, 255, 0.3) !important;
}

/* 1. Doodle Night (Telegram Navy) */
html[data-theme-preset="pattern_doodle"] {
  --bg: #0e1621;
  --bg-pattern: radial-gradient(circle, #ffffff 1px, transparent 1px);
  --bg-pattern-size: 30px 30px;
  --card: #17212b;
  --radius: 14px;
}

/* 2. Cyber Grid (BLACK & SHARP) */
html[data-theme-preset="pattern_grid"] {
  --bg: #000000;
  --bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 38px, #00d2ff 38px, #00d2ff 40px), repeating-linear-gradient(90deg, transparent, transparent 38px, #00d2ff 38px, #00d2ff 40px);
  --bg-pattern-size: 40px 40px;
  --card: #000000;
  --text: #00d2ff;
  --radius: 0px !important;
  --border: #00d2ff !important;
}

/* 5. Glass Galaxy (ULTRA ROUNDED GLASS) */
html[data-theme-preset="pattern_glass"] {
  --bg: #010409;
  --bg-pattern: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.2) 1px, transparent 0);
  --bg-pattern-size: 50px 50px;
  --card: rgba(15, 23, 42, 0.4);
  --radius: 50px !important;
  --glass-blur: 30px;
  --border: rgba(255,255,255,0.4) !important;
}

/* ENFORCER */
html[data-theme-preset^="pattern_"] {
  background-color: var(--bg) !important;
  background-image: var(--bg-pattern) !important;
  background-size: var(--bg-pattern-size, auto) !important;
}

html[data-theme-preset^="pattern_"] body {
  background: transparent !important;
}

html[data-theme-preset^="pattern_"] .pCard,
html[data-theme-preset^="pattern_"] .section,
html[data-theme-preset^="pattern_"] .searchBox,
html[data-theme-preset^="pattern_"] .segTabs,
html[data-theme-preset^="pattern_"] .segBtn,
html[data-theme-preset^="pattern_"] .qaItem,
html[data-theme-preset^="pattern_"] .btn,
html[data-theme-preset^="pattern_"] .btnMain,
html[data-theme-preset^="pattern_"] .btnPrimary,
html[data-theme-preset^="pattern_"] .btnSoft,
html[data-theme-preset^="pattern_"] .btnSecondary,
html[data-theme-preset^="pattern_"] .modalCard {
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.7) !important;
}

html[data-theme-preset^="pattern_"] .top {
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

html[data-theme-preset^="pattern_"] .bottomNav {
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}


/* === MARKETPLACE PERSONAS (V33 ARCHITECTURE) === */

/* 1. LUXURY MINIMALIST (Strict Fashion) */
html[data-theme-preset="market_luxury"] {
  --bg: #ffffff;
  --bg-pattern: none;
  --card: #ffffff;
  --text: #000000;
  --text-secondary: #444444;
  --muted: #888888;
  --border: #000000;
  --accent: #000000;
  --radius: 4px !important;
  --btn-bg: #000000;
  --btn-text: #ffffff;
}

/* 2. STREET / FLASH (Neon Youth) */
html[data-theme-preset="market_street"] {
  --bg: #000000;
  --bg-pattern: radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.15), transparent 70%), 
                radial-gradient(circle at 0% 0%, rgba(0, 255, 255, 0.1), transparent 50%);
  --card: #111111;
  --text: #ffffff;
  --text-secondary: rgba(255,255,255,0.8);
  --border: #333333;
  --accent: #ff00ff;
  --radius: 8px !important;
  --btn-bg: linear-gradient(135deg, #ff00ff, #00d2ff);
  --btn-text: #ffffff;
  --shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

/* 3. CLASSIC CLEAN (Premium Neutral) */
html[data-theme-preset="market_minimal"] {
  --bg: #f5f5f7;
  --bg-pattern: none;
  --card: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #86868b;
  --border: rgba(0,0,0,0.08);
  --accent: #0071e3;
  --radius: 12px !important;
  --btn-bg: #0071e3;
  --btn-text: #ffffff;
}

/* 4. URBAN INDUSTRIAL (Industrial Dark) */
html[data-theme-preset="market_urban"] {
  --bg: #121212;
  --bg-pattern-gradient: repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 0, transparent 50%);
  --bg-pattern-size: 10px 10px;
  --card: #1e1e1e;
  --text: #ffffff;
  --border: #f80;
  --accent: #f80;
  --radius: 6px !important;
  --btn-bg: #f80;
  --btn-text: #000;
}

/* PERSONA ENFORCER V34 (Background Layering) */
html[data-theme-preset^="market_"] {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme-preset^="market_"] body {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  font-family: var(--font-main) !important;
  --radius: 24px; /* Force uniform premium radius */
}

/* Refined Floating Bottom Nav (V32.1 Slim) - Applied to ALL themes */
html[data-theme-preset^="market_"] .bottomNav,
html[data-theme-preset="classic"] .bottomNav,
html:not([data-theme-preset]) .bottomNav {
  position: fixed !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important; /* Lowered slightly */
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 !important;
  height: 56px !important; /* Slimmer profile */
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
  z-index: 1000 !important;
  padding: 0 4px !important; /* Slightly tighter for 6 buttons */
}

/* 4-button layout (v33.0) */
html[data-theme-preset^="market_"] .navBtn,
html[data-theme-preset="classic"] .navBtn {
  min-width: 0 !important;
  padding: 0 8px !important;
  flex: 1 !important;
}

html[data-theme-preset^="market_"] .navLabel,
html[data-theme-preset="classic"] .navLabel {
  font-size: 11px !important;
  letter-spacing: -0.1px !important;
}

/* Ghost Header (V32.8) - Absolute Transparency */
html[data-theme-preset^="market_"] .top,
html[data-theme-preset="classic"] .top,
html:not([data-theme-preset]) .top {
  height: 56px !important; 
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Badges Refinement */
html[data-theme-preset^="market_"] .badgeCount {
  min-width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
  padding: 0 3px !important;
  top: -2px !important;
  right: -4px !important;
  border: 1px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Redesigned Active Indicator (Capsule) */
html[data-theme-preset^="market_"] .navBtn.isActive {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

html[data-theme-preset^="market_"] .pCard,
html[data-theme-preset^="market_"] .modalCard,
html[data-theme-preset^="market_"] .section {
  border-radius: var(--radius) !important;
}

/* Classic Shop: clean mobile fashion storefront, close to native shop apps. */
html[data-theme-preset="market_classic"] {
  --bg: #ffffff;
  --bg-pattern: none;
  --card: #ffffff;
  --card2: #f6f7f9;
  --card-elevated: #ffffff;
  --text: #111111;
  --text-secondary: #34363b;
  --text2: #34363b;
  --muted: #858b96;
  --border: #eceef2;
  --border-light: #f4f5f7;
  --accent_default: #f0144f;
  --accent: #f0144f;
  --accent-fg: #ffffff;
  --primary: #111111;
  --primary2: #111111;
  --primary-gradient: linear-gradient(180deg, #181818 0%, #050505 100%);
  --surface-glass: rgba(255, 255, 255, 0.94);
  --surface-glass-2: rgba(255, 255, 255, 0.88);
  --topbg: rgba(255, 255, 255, 0.94);
  --hover: rgba(17, 17, 17, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 8px 22px rgba(17, 17, 17, 0.07);
  --shadow-xl: 0 18px 44px rgba(17, 17, 17, 0.09);
  --shadow-premium: 0 18px 44px rgba(17, 17, 17, 0.08);
  --radius: 2px !important;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --glass-blur: 16px;
}

html[data-theme-preset="market_classic"] body {
  background: #ffffff !important;
  color: var(--text) !important;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --bottomnav-h: 72px;
}

html[data-theme-preset="market_classic"] .top {
  height: 62px !important;
  padding: calc(10px + env(safe-area-inset-top)) 18px 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--border-light) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme-preset="market_classic"] .brandText,
html[data-theme-preset="market_classic"] .sectionTitle,
html[data-theme-preset="market_classic"] .drawerTitle,
html[data-theme-preset="market_classic"] .h1,
html[data-theme-preset="market_classic"] .LuxeTitle {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: 0 !important;
}

html[data-theme-preset="market_classic"] .brandText {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}

html[data-theme-preset="market_classic"] .view {
  background: #ffffff !important;
}

html[data-theme-preset="market_classic"] #viewCatalog {
  padding: 12px 16px calc(var(--bottomnav-h) + 34px) !important;
}

html[data-theme-preset="market_classic"] .promoCarousel {
  margin: 0 0 18px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 0 !important;
  background: #f7f3f0 !important;
}

html[data-theme-preset="market_classic"] .categoryMenu {
  margin: 0 calc(50% - 50vw) 12px !important;
}

html[data-theme-preset="market_classic"] .promoSlide {
  min-height: 214px !important;
  border-radius: 2px !important;
}

html[data-theme-preset="market_classic"] .promoSlideOverlay {
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.04) 100%) !important;
}

html[data-theme-preset="market_classic"] .promoTitle {
  color: #111 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  max-width: 58% !important;
}

html[data-theme-preset="market_classic"] .promoText {
  color: #4b4f58 !important;
  font-size: 13px !important;
  max-width: 54% !important;
}

html[data-theme-preset="market_classic"] .promoBtn,
html[data-theme-preset="market_classic"] .btnPrimary,
html[data-theme-preset="market_classic"] .btnMain,
html[data-theme-preset="market_classic"] .bbBtn {
  background: linear-gradient(180deg, #191919 0%, #050505 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16) !important;
  font-weight: 800 !important;
}

html[data-theme-preset="market_classic"] .promoDot.isActive,
html[data-theme-preset="market_classic"] .dotOn {
  background: var(--accent) !important;
}

html[data-theme-preset="market_classic"] .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 10px !important;
}

html[data-theme-preset="market_classic"] .pCard {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-theme-preset="market_classic"] .pCard:active {
  transform: translateY(1px) !important;
}

html[data-theme-preset="market_classic"] .pMedia {
  background: #f3f4f6 !important;
  border-radius: 0 !important;
  aspect-ratio: 0.82 !important;
}

html[data-theme-preset="market_classic"] .pImg {
  object-fit: cover !important;
}

html[data-theme-preset="market_classic"] .pBody {
  padding: 10px 10px 12px !important;
}

html[data-theme-preset="market_classic"] .pTitle {
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  min-height: 34px !important;
}

html[data-theme-preset="market_classic"] .pPrice,
html[data-theme-preset="market_classic"] .nowPrice {
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html[data-theme-preset="market_classic"] .oldPrice {
  color: #9aa0aa !important;
}

html[data-theme-preset="market_classic"] .discCorner,
html[data-theme-preset="market_classic"] .badgeCount {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-theme-preset="market_classic"] .favBtn,
html[data-theme-preset="market_classic"] .iconBtn,
html[data-theme-preset="market_classic"] .backBtn,
html[data-theme-preset="market_classic"] .likeBtn {
  background: rgba(255, 255, 255, 0.90) !important;
  color: #111111 !important;
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.08) !important;
  border-radius: 999px !important;
}

html[data-theme-preset="market_classic"] .favOn,
html[data-theme-preset="market_classic"] .favOn svg {
  color: var(--accent) !important;
  fill: var(--accent) !important;
}

html[data-theme-preset="market_classic"] .section,
html[data-theme-preset="market_classic"] .modalCard,
html[data-theme-preset="market_classic"] .drawer,
html[data-theme-preset="market_classic"] .accountSheet,
html[data-theme-preset="market_classic"] .searchSheet,
html[data-theme-preset="market_classic"] .qaItem,
html[data-theme-preset="market_classic"] .reviewsBox {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .searchBox,
html[data-theme-preset="market_classic"] .fInput,
html[data-theme-preset="market_classic"] .fSelect,
html[data-theme-preset="market_classic"] .overlaySearchBox {
  background: #f5f6f8 !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .segTabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .segBtn,
html[data-theme-preset="market_classic"] .fTag,
html[data-theme-preset="market_classic"] .sz {
  border-radius: 2px !important;
  border-color: var(--border) !important;
  background: #ffffff !important;
  color: #30343a !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .segBtn.isActive,
html[data-theme-preset="market_classic"] .fTagOn,
html[data-theme-preset="market_classic"] .szOn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: #fff7fa !important;
}

html[data-theme-preset="market_classic"] .bottomNav {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 72px !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -10px 24px rgba(17, 17, 17, 0.05) !important;
}

html[data-theme-preset="market_classic"] .navPill {
  display: none !important;
}

html[data-theme-preset="market_classic"] .navBtn {
  background: transparent !important;
  color: #1f2329 !important;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .navBtn.isActive {
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_classic"] .navBtn.isActive .icon {
  color: var(--accent) !important;
}

html[data-theme-preset="market_classic"] .navLabel {
  font-size: 10px !important;
  font-weight: 700 !important;
}

html[data-theme-preset="market_classic"] .gallery,
html[data-theme-preset="market_classic"] .gImg {
  border-radius: 2px !important;
}

html[data-theme-preset="market_classic"] .bottomBar {
  left: 12px !important;
  right: 12px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 32px rgba(17,17,17,.12) !important;
}

html[data-theme-preset="market_classic"] .pCard,
html[data-theme-preset="market_classic"] .section,
html[data-theme-preset="market_classic"] .modalCard,
html[data-theme-preset="market_classic"] .drawer,
html[data-theme-preset="market_classic"] .accountSheet,
html[data-theme-preset="market_classic"] .searchSheet,
html[data-theme-preset="market_classic"] .uiPopupCard,
html[data-theme-preset="market_classic"] .qaItem,
html[data-theme-preset="market_classic"] .qaBox,
html[data-theme-preset="market_classic"] .reviewsBox,
html[data-theme-preset="market_classic"] .reviewItem,
html[data-theme-preset="market_classic"] .questionItem,
html[data-theme-preset="market_classic"] .gallery,
html[data-theme-preset="market_classic"] .gImg,
html[data-theme-preset="market_classic"] .pImg,
html[data-theme-preset="market_classic"] .pMedia,
html[data-theme-preset="market_classic"] .thumb,
html[data-theme-preset="market_classic"] .orderThumb,
html[data-theme-preset="market_classic"] .srImg,
html[data-theme-preset="market_classic"] .swThumb,
html[data-theme-preset="market_classic"] .swatch,
html[data-theme-preset="market_classic"] .sz,
html[data-theme-preset="market_classic"] .sizeBtn,
html[data-theme-preset="market_classic"] .colorBtn,
html[data-theme-preset="market_classic"] .discBadge,
html[data-theme-preset="market_classic"] .discCorner,
html[data-theme-preset="market_classic"] .pSold,
html[data-theme-preset="market_classic"] .statusPillFixed,
html[data-theme-preset="market_classic"] .pillCount,
html[data-theme-preset="market_classic"] .badgeCount,
html[data-theme-preset="market_classic"] .navBtn,
html[data-theme-preset="market_classic"] .ibQtyBtn,
html[data-theme-preset="market_classic"] .stepBtn,
html[data-theme-preset="market_classic"] .iconMini,
html[data-theme-preset="market_classic"] input,
html[data-theme-preset="market_classic"] textarea,
html[data-theme-preset="market_classic"] select {
  border-radius: 2px !important;
}

html[data-theme-preset="market_classic"] body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
html[data-theme-preset="market_classic"] body *::before,
html[data-theme-preset="market_classic"] body *::after {
  border-radius: 2px !important;
}

@media (max-width: 360px) {
  html[data-theme-preset="market_classic"] #viewCatalog {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[data-theme-preset="market_classic"] .grid {
    gap: 12px 8px !important;
  }

  html[data-theme-preset="market_classic"] .promoTitle {
    font-size: 24px !important;
  }
}

/* SEARCH OVERLAY (V34.0) */
#searchOverlay {
  z-index: 3000 !important;
}

#searchOverlay.hidden {
  display: none !important;
}

.searchSheet {
  max-height: 75vh !important;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}

.searchSheet.searchSheetIdle {
  max-height: 86vh !important;
}

.searchSheetHeader {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 0 0 14px !important;
  position: relative !important;
  z-index: 1 !important;
}

.searchSheetSub {
  opacity: 0.62;
  font-size: 14px;
  line-height: 1.35;
  padding-right: 40px;
}

.searchSheetInputRow {
  position: relative;
  z-index: 1;
  padding-bottom: 10px;
}

.overlaySearchBox {
  flex: 1 !important;
  background: var(--bg-soft) !important;
  min-height: 48px !important;
  border-radius: 18px !important;
}

.closeSearchBtn {
  display: none !important;
}

.searchResults {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth iOS momentum scroll */
  padding: 8px 16px env(safe-area-inset-bottom) !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.searchSheetResults {
  position: relative;
  z-index: 1;
  padding-top: 6px !important;
}

.accountSheetResults {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.recentViewedSlider {
  padding-bottom: 8px !important;
}

.recentViewedSlider .pCard {
  flex: 0 0 144px;
}

.recentViewedSlider .pTitle {
  min-height: 34px;
  height: auto;
}

.recentViewedSlider .favBtn {
  width: 34px;
  height: 34px;
}

.accountLegalLinkWrap {
  padding: 0 16px 14px;
}

.accountLegalLink {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

.accountLegalLink:active {
  transform: translateY(1px);
}

.accountLegalModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 4100;
  background: rgba(8, 11, 18, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.accountLegalModal {
  width: min(520px, 100%);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.accountLegalModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.accountLegalModalTitle {
  font-size: 16px;
  font-weight: 800;
}

.accountLegalModalClose {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.accountLegalModalBody {
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

body.lockScroll {
  overflow: hidden !important;
  touch-action: auto !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  overscroll-behavior: none !important;
}

.searchOverlay {
  position: fixed !important;
  inset: auto 0 0 0 !important;
}

@keyframes fadeInOverlay {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.searchResults {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  min-height: 0 !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.searchResultItem {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  animation: fadeInUp 0.4s ease-out both;
  cursor: pointer !important;
}

.searchResultItem:last-child {
  border-bottom: none !important;
}

.srImg {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  background: var(--bg-soft) !important;
}

.srBody {
  flex: 1 !important;
  min-width: 0 !important;
}

.srTitle {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.srPrice {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

html[data-theme-preset="market_street"] .bottomNav,
html[data-theme-preset="market_urban"] .bottomNav {
  background: rgba(26, 26, 26, 0.76) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-preset="market_street"] .top,
html[data-theme-preset="market_urban"] .top {
  background: transparent !important;
}

/* Tactile Feedback (Spring Buttons) */
html[data-theme-preset^="market_"] .btn,
html[data-theme-preset^="market_"] .pCard,
html[data-theme-preset^="market_"] .navBtn {
  transition: var(--transition-ui) !important;
}

html[data-theme-preset^="market_"] .btn:active,
html[data-theme-preset^="market_"] .pCard:active,
html[data-theme-preset^="market_"] .navBtn:active {
  transform: scale(0.96) !important;
}

/* Universal Pattern Layer */
html[data-theme-preset^="market_"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: 400px;
  opacity: 0.05;
  pointer-events: none;
}

/* Theme-Specific Patterns */
html[data-theme-preset="market_minimal"] body::before,
html[data-theme-preset="market_luxury"] body::before {
  background-image: url('style_pattern.png');
  opacity: 0.04;
}

html[data-theme-preset="market_urban"] body::before,
html[data-theme-preset="market_street"] body::before {
  background-image: url('tech_pattern.png');
  opacity: 0.08; /* Slightly more visible on dark */
  background-size: 320px;
}

/* Mixed Backgrounds (Urban/Street gradients) */
html[data-theme-preset="market_urban"] body {
  background-image: var(--bg-pattern-gradient) !important;
  background-size: var(--bg-pattern-size, auto) !important;
}

/* Persona Elements Override */
html[data-theme-preset^="market_"] .pCard,
html[data-theme-preset^="market_"] .section,
html[data-theme-preset^="market_"] .searchBox,
html[data-theme-preset^="market_"] .segTabs,
html[data-theme-preset^="market_"] .segBtn,
html[data-theme-preset^="market_"] .qaItem,
html[data-theme-preset^="market_"] .modalCard {
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important; /* Start clean */
}

html[data-theme-preset^="market_"] .top {
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

html[data-theme-preset^="market_"] .bottomNav {
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

/* Special Button Stylings per Persona */
html[data-theme-preset^="market_"] .btn,
html[data-theme-preset^="market_"] .btnMain,
html[data-theme-preset^="market_"] .btnPrimary,
html[data-theme-preset^="market_"] .btnSoft,
html[data-theme-preset^="market_"] .btnSecondary {
  border-radius: var(--radius) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: none !important;
  box-shadow: var(--shadow, none) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

html[data-theme-preset="market_minimal"] .btnMain {
  border-radius: 50px !important; /* Pill style */
  text-transform: none;
}

/* 5. AURELIA LUXE (Elite Boutique Architecture) */
html[data-theme-preset="market_luxe"] {
  --bg: #fcfbf7;
  --bg-pattern: radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.05), transparent 50%);
  --card: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #555555;
  --muted: #949494;
  --border: rgba(0,0,0,0.12);
  --accent: #d4af37; /* Boutique Gold */
  --radius: 2px !important; /* Sharp elegant corners */
  --font-main: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'Playfair Display', serif;
  /* Premium Micro-Animations */
  --transition-ui: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fadeInUp {
  animation: fadeInUp 0.6s var(--anim-ease) both;
}

html[data-theme-preset="market_luxe"] {
  --bg: #fcfbf7;
  --bg-pattern: radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.05), transparent 50%);
  --card: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #555555;
  --muted: #949494;
  --border: rgba(0,0,0,0.12);
  --accent: #d4af37; /* Boutique Gold */
  --radius: 2px !important; /* Sharp elegant corners */
  --shadow-luxe: 0 12px 40px rgba(0,0,0,0.04);
}

/* Global Reset for Luxe */
html[data-theme-preset="market_luxe"] body {
  font-family: var(--font-main) !important;
  font-size: 14px;
  letter-spacing: 0.01em;
  background-color: var(--bg) !important;
}

/* Typography Overhaul */
html[data-theme-preset="market_luxe"] .LuxeTitle,
html[data-theme-preset="market_luxe"] .brandText,
html[data-theme-preset="market_luxe"] .sectionTitle,
html[data-theme-preset="market_luxe"] .drawerTitle,
html[data-theme-preset="market_luxe"] .modalTitle {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 24px !important; /* More prominent for favorites/cart */
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Header & Navigation (Glassmorphism) */
html[data-theme-preset="market_luxe"] .top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme-preset="market_luxe"] .backBtn,
html[data-theme-preset="market_luxe"] .filterBtnTop,
html[data-theme-preset="market_luxe"] .iconBtn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  padding: 8px !important;
  z-index: 20 !important;
}

html[data-theme-preset="market_luxe"] .backBtn {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html[data-theme-preset="market_luxe"] .brandText {
  max-width: 70vw !important; /* Allow more space for "Избранное" */
  margin: 0 auto !important;
}

html[data-theme-preset="market_luxe"] .bottomNav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  border-top: 0.5px solid var(--border) !important;
  height: calc(56px + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

html[data-theme-preset="market_luxe"] .navPill,
html[data-theme-preset="market_luxe"] .badgeCount,
html[data-theme-preset="market_luxe"] .statusPillFixed,
html[data-theme-preset="market_luxe"] .pillCount,
html[data-theme-preset="market_luxe"] .thumb,
html[data-theme-preset="market_luxe"] .orderThumb {
  border-radius: var(--radius) !important;
}

/* Product Card - The Boutique Look */
html[data-theme-preset="market_luxe"] .pCard {
  background: #fff !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-luxe) !important;
  padding: 0 !important; /* Image spans full width */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme-preset="market_luxe"] .pCard:active {
  transform: scale(0.985);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

html[data-theme-preset="market_luxe"] .pMedia {
  border-radius: 0 !important;
  border-bottom: 0.5px solid var(--border) !important;
}

html[data-theme-preset="market_luxe"] .pBody {
  padding: 12px 10px !important;
  text-align: center;
}

html[data-theme-preset="market_luxe"] .LuxePrice {
  margin-top: 6px;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

html[data-theme-preset="market_luxe"] .LuxeNow {
  color: var(--text) !important;
}

html[data-theme-preset="market_luxe"] .LuxeOld {
  font-weight: 400 !important;
  opacity: 0.4;
  font-size: 12px !important;
  margin-right: 6px;
}

html[data-theme-preset="market_luxe"] .LuxeSub {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  margin-top: 4px;
}

/* Boutique Buttons */
html[data-theme-preset="market_luxe"] .btn,
html[data-theme-preset="market_luxe"] .btnMain,
html[data-theme-preset="market_luxe"] .btnPrimary,
html[data-theme-preset="market_luxe"] .btnSoft,
html[data-theme-preset="market_luxe"] .btnSecondary,
html[data-theme-preset="market_luxe"] .bbBtn {
  background: var(--btn-bg) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 11px !important;
  border: none !important;
  padding: 14px 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

html[data-theme-preset="market_luxe"] .btnSoft {
  background: rgba(var(--btn-bg-rgb, 200, 160, 100), 0.1) !important;
  color: var(--text) !important;
}

/* Refined Iconography */
html[data-theme-preset="market_luxe"] .favBtn {
  background: rgba(255,255,255,0.95) !important;
  border: 0.5px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  color: #1a1a1a !important;
}

html[data-theme-preset="market_luxe"] .favOn {
  color: #d4af37 !important; /* Gold favorite */
}

/* No need for separate heart toggles here as they are now global */

/* Modal & Action Bar Glass */
html[data-theme-preset="market_luxe"] .bottomBar {
  background: rgba(252, 251, 247, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 0.5px solid var(--border) !important;
}

html[data-theme-preset="market_luxe"] .uiPopupCard {
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.1) !important;
}

/* 6. BOTANIC GARDEN (Greenhaus Aesthetic) */
html[data-theme-preset="market_botanic"] {
  --bg: #f4f9f1;
  --bg-pattern: radial-gradient(circle at 10% 10%, rgba(143, 182, 143, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(143, 182, 143, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(212, 230, 203, 0.1) 0%, transparent 60%);
  --bg-pattern-size: 100% 100%;
  --card: #ffffff;
  --text: #2d3a2d;
  --text-secondary: #4a5d4a;
  --muted: #8ca38c;
  --border: rgba(45, 58, 45, 0.08);
  --accent: #8fb68f;
  --radius: 28px !important; /* Soft pebble aesthetic */
  --btn-bg: #8fb68f;
  --btn-text: #ffffff;
  --font-title: 'Playfair Display', serif; /* Keep elegant serif for titles */
  --font-main: 'Inter', sans-serif; /* Clean airy main text */
  --shadow-botanic: 0 10px 30px rgba(45, 58, 45, 0.04);
}

html[data-theme-preset="market_botanic"] {
  background-color: var(--bg) !important;
}

html[data-theme-preset="market_botanic"] body {
  background-color: transparent !important;
  background-attachment: fixed;
  position: relative;
}

/* Subtle seamless doodle pattern overlay */
html[data-theme-preset="market_botanic"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('botanic_pattern.png');
  background-repeat: repeat;
  background-size: 380px;
  opacity: 0.07; /* Very subtle texture */
  pointer-events: none;
}

html[data-theme-preset="market_botanic"] .top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_botanic"] .bottomNav {
  background: rgba(244, 249, 241, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--border) !important;
  margin: 0 auto !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: calc(600px - 20px) !important;
  border-radius: 28px !important;
  bottom: 10px !important;
  height: 64px !important;
}

html[data-theme-preset="market_botanic"] .navPill {
  background: var(--accent) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(143, 182, 143, 0.3) !important;
}

html[data-theme-preset="market_botanic"] .pCard {
  border: none !important;
  box-shadow: var(--shadow-botanic) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: var(--card) !important;
}

html[data-theme-preset="market_botanic"] .btnMain,
html[data-theme-preset="market_botanic"] .btnPrimary {
  background: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 28px !important;
  box-shadow: 0 6px 20px rgba(143, 182, 143, 0.2) !important;
}

html[data-theme-preset="market_botanic"] .btnSoft {
  background: #e2efda !important;
  color: #4a5d4a !important;
  border: none !important;
  border-radius: 30px !important;
}

html[data-theme-preset="market_botanic"] .searchBox {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
}

html[data-theme-preset="market_botanic"] .badgeCount {
  background: #ff6b6b !important;
  border: 2px solid var(--bg) !important;
}


/* Global Badge Visibility Fix (V34.6) */
.badgeCount.hidden, 
[data-theme-preset] .badgeCount.hidden,
#bottomNav .badgeCount.hidden {
  display: none !important;
}

/* Absolute closure for overlays */
#accountOverlay.hidden, 
.searchOverlay.hidden {
  display: none !important;
}

#searchOverlay:not(.hidden) {
  display: flex !important;
}

/* Account Bottom Sheet */
.sheetBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sheetBackdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.accountSheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-height: 75vh !important;
  background-color: var(--bg) !important;
  background-image: var(--bg-pattern) !important;
  border-top-left-radius: 32px !important;
  border-top-right-radius: 32px !important;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25) !important;
  z-index: 3000 !important;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) !important;
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  display: flex !important;
  flex-direction: column !important;
  visibility: hidden;
  overscroll-behavior: contain !important;
}

.accountSheet.active {
  transform: translateY(0);
  visibility: visible;
}

.sheetHandle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: -12px auto 20px;
  opacity: 0.5;
  z-index: 1;
  position: relative;
}

/* Account Sheet Seamless Pattern Overlay */
.sheetPatternOverlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent !important;
  overflow: hidden;
}

.accountSheet .sheetPatternOverlay {
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.sheetPatternOverlay::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; right: -50%; bottom: -50%;
  background-repeat: repeat;
  background-position: center;
  transform: rotate(-45deg);
  pointer-events: none;
  opacity: 0.05;
}

html[data-theme-preset="market_minimal"] .sheetPatternOverlay::before,
html[data-theme-preset="market_luxury"] .sheetPatternOverlay::before {
  background-image: url('style_pattern.png');
  background-size: 500px;
  opacity: 0.04;
}

html[data-theme-preset="market_urban"] .sheetPatternOverlay::before,
html[data-theme-preset="market_street"] .sheetPatternOverlay::before {
  background-image: url('tech_pattern.png');
  background-size: 400px;
  opacity: 0.08;
}

/* Admin preview: keep account/search panels inside the phone screen */
html.adminPreview body.lockScroll,
body.adminPreview.lockScroll {
  overflow: hidden !important;
  position: static !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
}

html.adminPreview .sheetBackdrop,
html.adminPreview #searchBackdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.adminPreview .sheetBackdrop.active,
html.adminPreview #searchBackdrop.active {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.adminPreview .accountSheet,
html.adminPreview .searchOverlay {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  bottom: 12px !important;
  top: auto !important;
  max-height: min(75vh, calc(100% - 104px)) !important;
  height: auto !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
}

html.adminPreview .accountSheet {
  padding: 18px 16px 18px !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;
}

html.adminPreview .searchOverlay {
  inset: auto 12px 12px 12px !important;
}

html.adminPreview .searchSheet {
  max-height: min(75vh, calc(100% - 104px)) !important;
  height: auto !important;
  border-radius: 28px !important;
  padding: 18px 16px 18px !important;
}

html.adminPreview .searchSheet.searchSheetIdle {
  max-height: min(86vh, calc(100% - 72px)) !important;
}

html.adminPreview .accountSheetResults,
html.adminPreview .searchResults {
  padding-bottom: 8px !important;
}

html[data-theme-preset="market_botanic"] .sheetPatternOverlay::before {
  background-image: url('botanic_pattern.png');
  background-size: 480px;
  opacity: 0.07;
}

html[data-theme-preset="market_bakery"] .sheetPatternOverlay::before {
  background-image: url('cakes_pattern.png');
  background-size: 350px;
  opacity: 0.15;
}

html[data-theme-preset="market_kids"] .sheetPatternOverlay::before {
  background-image: url('toys_pattern.png');
  background-size: 320px;
  opacity: 0.15;
}

html[data-theme-preset="market_urban"] .accountSheet {
  background-image: var(--bg-pattern-gradient) !important;
  background-size: var(--bg-pattern-size, auto) !important;
}

/* Responsive Account Sheet Title */
.accSheetTitle {
  font-size: 26px;
  margin-bottom: 4px;
  padding-right: 40px;
}
@media (max-width: 380px) {
  .accSheetTitle {
    font-size: 22px;
  }
}
@media (max-width: 340px) {
  .accSheetTitle {
    font-size: 20px;
  }
}

#accountOverlay.hidden {
  display: none !important;
}

#accountOverlay:not(.hidden) {
  display: flex !important;
}

.sheetCloseButton {
  position: absolute !important;
  top: 0 !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  z-index: 10 !important;
  transition: transform 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.sheetCloseButton:active {
  transform: scale(0.9) !important;
}

.sheetCloseButton svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

/* ==========================================================================
   MARKET PERSONA: BAKERY / SWEETS (market_bakery)
   ========================================================================== */
html[data-theme-preset="market_bakery"] {
  --bg: #FDF9FB;
  --bg-card: #ffffff;
  --text: #2c1a25;
  --text-muted: #8c7381;
  --border: #f0e6eb;
  --radius-btn: 14px;
  --radius-card: 20px;
  --shadow-sm: 0 4px 12px rgba(180,140,160,0.08);
  --shadow-md: 0 8px 24px rgba(180,140,160,0.12);
  --primary: #d85c88;
  --primary-fg: #fff;
  --accent: #d85c88;
  --accent_default: #d85c88;
  --font-family: 'Manrope', -apple-system, sans-serif;
  --header-bg: rgba(253, 249, 251, 0.85);
  --header-border: transparent;
}

html[data-theme-preset="market_bakery"] body {
  background-color: transparent !important;
  background-attachment: fixed;
  position: relative;
}

html[data-theme-preset="market_bakery"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('cakes_pattern.png');
  background-repeat: repeat;
  background-size: 250px;
  opacity: 0.15; 
  pointer-events: none;
}

html[data-theme-preset="market_bakery"] .top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_bakery"] .pCard {
  border: none !important;
  box-shadow: 0 4px 12px rgba(180,140,160,0.12) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background: var(--card) !important;
}

html[data-theme-preset="market_bakery"][data-theme="dark"] .pCard {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html[data-theme-preset="market_bakery"] .btnMain,
html[data-theme-preset="market_bakery"] .btnPrimary {
  background: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}

html[data-theme-preset="market_bakery"] .bottomNav {
  border-radius: 24px !important;
  margin: 0 auto !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  bottom: 10px !important;
  max-width: calc(600px - 20px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}


/* ==========================================================================
   MARKET PERSONA: KIDS & TOYS (market_kids)
   ========================================================================== */
html[data-theme-preset="market_kids"] {
  --bg: #fff8ed;
  --bg-card: #ffffff;
  --text: #3d2613;
  --text-muted: #8a6d4d;
  --muted: #8a6d4d;
  --border: rgba(232, 179, 82, 0.28);
  --radius-btn: 22px;
  --radius-card: 22px;
  --radius-lg: 22px;
  --shadow-sm: 0 10px 24px rgba(245, 166, 35, 0.08);
  --shadow-md: 0 18px 40px rgba(245, 166, 35, 0.12);
  --primary: #ec9d22;
  --primary-fg: #ffffff;
  --accent: #ec9d22;
  --accent_default: #ec9d22;
  --font-family: 'Manrope', 'Inter', sans-serif;
  --header-bg: rgba(255, 248, 237, 0.88);
  --header-border: transparent;
}

html[data-theme-preset="market_kids"] body {
  background-color: transparent !important;
  background-attachment: fixed;
  position: relative;
}

html[data-theme-preset="market_kids"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('toys_pattern.png');
  background-repeat: repeat;
  background-size: 240px;
  opacity: 0.08; 
  pointer-events: none;
}

html[data-theme-preset="market_kids"] .top {
  background: linear-gradient(180deg, rgba(255, 248, 237, 0.92) 0%, rgba(255, 248, 237, 0.72) 100%) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(232, 179, 82, 0.18) !important;
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.08) !important;
}

html[data-theme-preset="market_kids"] .catalogHeader {
  background:
    radial-gradient(circle at top left, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 240, 0.92) 100%) !important;
  border-color: rgba(232, 179, 82, 0.22) !important;
  box-shadow: 0 18px 42px rgba(245, 166, 35, 0.10) !important;
}

html[data-theme-preset="market_kids"] .promoSlide {
  border-color: rgba(232, 179, 82, 0.24) !important;
  box-shadow: 0 18px 42px rgba(245, 166, 35, 0.14) !important;
}

html[data-theme-preset="market_kids"] .promoSlideOverlay {
  background:
    linear-gradient(90deg, rgba(97, 58, 5, 0.68) 0%, rgba(120, 70, 7, 0.36) 42%, rgba(120, 70, 7, 0.06) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

html[data-theme-preset="market_kids"] .promoBtn {
  color: #8b4d00;
}

html[data-theme-preset="market_kids"] .catalogEyebrow {
  color: #c97d10 !important;
}

html[data-theme-preset="market_kids"] .catalogMeta {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(232, 179, 82, 0.24) !important;
}

html[data-theme-preset="market_kids"] .pCard {
  border: 1px solid rgba(232, 179, 82, 0.22) !important;
  box-shadow: 0 14px 34px rgba(245, 166, 35, 0.10), 0 4px 12px rgba(245, 166, 35, 0.05) !important;
  border-radius: 22px !important;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 251, 240, 0.9) 100%),
    var(--card) !important;
}

html[data-theme-preset="market_kids"] .pCard:hover {
  box-shadow: 0 18px 42px rgba(245, 166, 35, 0.16), 0 8px 18px rgba(245, 166, 35, 0.07) !important;
}

html[data-theme-preset="market_kids"] .favBtn {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(232, 179, 82, 0.18) !important;
  color: #9f5c00 !important;
}

html[data-theme-preset="market_kids"] .discCorner {
  background: linear-gradient(135deg, #ff7b54 0%, #ef5f3c 100%) !important;
}

html[data-theme-preset="market_kids"][data-theme="dark"] .pCard {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html[data-theme-preset="market_kids"] .btnMain,
html[data-theme-preset="market_kids"] .btnPrimary {
  background: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.24) !important;
}

html[data-theme-preset="market_kids"] .bottomNav {
  background: rgba(255, 252, 245, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  border-radius: 24px !important;
  margin: 0 auto !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  bottom: 10px !important;
  max-width: calc(600px - 20px) !important;
  box-shadow: 0 12px 30px rgba(245, 166, 35, 0.14) !important;
  border: 1px solid rgba(232, 179, 82, 0.22) !important;
}

html[data-theme-preset="market_kids"] .navPill,
html[data-theme-preset="market_kids"] .badgeCount {
  background: linear-gradient(135deg, #ffb43b 0%, #ec9d22 100%) !important;
  box-shadow: 0 8px 18px rgba(245, 166, 35, 0.22) !important;
}

/* ==========================================================================
   STORE THEME REFRESH: UNIFIED NAV + DISTINCT MARKET PERSONAS
   ========================================================================== */
html[data-theme-preset^="market_"],
html[data-theme-preset="classic"],
html:not([data-theme-preset]) {
  --store-nav-width: min(calc(100vw - 24px), 584px);
  --store-nav-height: 60px;
  --store-nav-radius: 30px;
  --store-nav-bottom: calc(12px + env(safe-area-inset-bottom));
  --store-nav-bg: rgba(255, 255, 255, 0.84);
  --store-nav-border: rgba(255, 255, 255, 0.48);
  --store-nav-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
  --store-nav-active-bg: var(--accent, var(--primary));
  --store-nav-active-text: #ffffff;
  --store-nav-active-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
  --store-card-bg: rgba(255, 255, 255, 0.94);
  --store-card-border: var(--border);
  --store-card-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  --store-soft-surface: rgba(255, 255, 255, 0.74);
  --store-soft-border: rgba(255, 255, 255, 0.36);
  --store-promo-overlay:
    linear-gradient(90deg, rgba(15, 23, 42, 0.74) 0%, rgba(15, 23, 42, 0.34) 52%, rgba(15, 23, 42, 0.06) 100%);
}

html[data-theme-preset^="market_"] .bottomNav,
html[data-theme-preset="classic"] .bottomNav,
html:not([data-theme-preset]) .bottomNav {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: var(--store-nav-width) !important;
  max-width: var(--store-nav-width) !important;
  margin: 0 !important;
  bottom: var(--store-nav-bottom) !important;
  height: var(--store-nav-height) !important;
  padding: 4px !important;
  gap: 4px !important;
  justify-content: space-between !important;
  border-radius: var(--store-nav-radius) !important;
  background: var(--store-nav-bg) !important;
  border: 1px solid var(--store-nav-border) !important;
  box-shadow: var(--store-nav-shadow) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}

html[data-theme-preset^="market_"] .bottomNav.isHidden,
html[data-theme-preset="classic"] .bottomNav.isHidden,
html:not([data-theme-preset]) .bottomNav.isHidden {
  transform: translateX(-50%) translateY(calc(100% + 60px)) !important;
}

html[data-theme-preset^="market_"] .navBtn,
html[data-theme-preset="classic"] .navBtn,
html:not([data-theme-preset]) .navBtn {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 8px !important;
  border-radius: calc(var(--store-nav-radius) - 6px) !important;
  justify-content: center !important;
  gap: 3px !important;
  color: color-mix(in srgb, var(--text) 58%, transparent) !important;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

html[data-theme-preset^="market_"] .navBtn.isActive,
html[data-theme-preset="classic"] .navBtn.isActive,
html:not([data-theme-preset]) .navBtn.isActive {
  background: var(--store-nav-active-bg) !important;
  color: var(--store-nav-active-text) !important;
  box-shadow: var(--store-nav-active-shadow) !important;
}

html[data-theme-preset^="market_"] .navBtn .icon,
html[data-theme-preset="classic"] .navBtn .icon,
html:not([data-theme-preset]) .navBtn .icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}

html[data-theme-preset^="market_"] .navLabel,
html[data-theme-preset="classic"] .navLabel,
html:not([data-theme-preset]) .navLabel {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

html[data-theme-preset^="market_"] .badgeCount,
html[data-theme-preset="classic"] .badgeCount,
html:not([data-theme-preset]) .badgeCount {
  border-width: 2px !important;
}

html[data-theme-preset^="market_"] .pCard,
html[data-theme-preset^="market_"] .section,
html[data-theme-preset^="market_"] .modalCard,
html[data-theme-preset^="market_"] .searchBox,
html[data-theme-preset^="market_"] .segTabs,
html[data-theme-preset^="market_"] .segBtn,
html[data-theme-preset^="market_"] .qaItem,
html[data-theme-preset^="market_"] .catalogCrumbs {
  background: var(--store-card-bg) !important;
  border-color: var(--store-card-border) !important;
  box-shadow: var(--store-card-shadow) !important;
}

html[data-theme-preset^="market_"] .promoSlide {
  border-color: var(--store-soft-border) !important;
  box-shadow: var(--store-card-shadow) !important;
}

html[data-theme-preset^="market_"] .promoSlideOverlay {
  background: var(--store-promo-overlay) !important;
}

html[data-theme-preset^="market_"] .promoBtn {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme-preset="market_luxury"] {
  --bg: #f6f2eb;
  --card: #fffdf9;
  --text: #171411;
  --text-secondary: #5c534b;
  --muted: #8d8379;
  --border: rgba(31, 24, 19, 0.12);
  --accent: #111111;
  --btn-bg: #171411;
  --btn-text: #ffffff;
  --radius: 18px !important;
  --font-main: 'Manrope', 'Inter', sans-serif;
  --store-nav-bg: rgba(255, 252, 247, 0.82);
  --store-nav-border: rgba(64, 48, 32, 0.10);
  --store-nav-active-bg: #171411;
  --store-nav-shadow: 0 16px 36px rgba(44, 28, 14, 0.14);
  --store-card-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(248, 242, 235, 0.94));
  --store-card-border: rgba(37, 25, 16, 0.10);
  --store-card-shadow: 0 16px 38px rgba(70, 46, 26, 0.08);
  --store-soft-border: rgba(255, 245, 231, 0.76);
  --surface-pattern: url('style_pattern.png');
  --surface-pattern-size: 420px;
  --surface-pattern-opacity: 0.032;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(23, 20, 17, 0.78) 0%, rgba(23, 20, 17, 0.38) 52%, rgba(23, 20, 17, 0.08) 100%);
}

html[data-theme-preset="market_luxury"] body {
  background:
    radial-gradient(circle at top right, rgba(196, 170, 137, 0.18), transparent 34%),
    linear-gradient(180deg, #fbf7f1 0%, #f3ede4 100%) !important;
}

html[data-theme-preset="market_luxury"] body::before {
  background-image: url('style_pattern.png') !important;
  background-size: 440px !important;
  opacity: 0.05 !important;
}

html[data-theme-preset="market_street"] {
  --bg: #06070b;
  --card: #10131a;
  --text: #f4f7fb;
  --text-secondary: rgba(244, 247, 251, 0.76);
  --border: rgba(114, 146, 255, 0.18);
  --accent: #6d7cff;
  --btn-bg: linear-gradient(135deg, #6d7cff 0%, #17d6ff 100%);
  --btn-text: #03131d;
  --radius: 24px !important;
  --store-nav-bg: rgba(10, 14, 24, 0.78);
  --store-nav-border: rgba(122, 149, 255, 0.16);
  --store-nav-active-bg: linear-gradient(135deg, #6d7cff 0%, #17d6ff 100%);
  --store-nav-active-text: #061018;
  --store-nav-active-shadow: 0 10px 24px rgba(23, 214, 255, 0.24);
  --store-nav-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
  --store-card-bg: linear-gradient(180deg, rgba(16, 19, 26, 0.94), rgba(10, 12, 19, 0.96));
  --store-card-border: rgba(124, 154, 255, 0.14);
  --store-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --store-soft-border: rgba(125, 179, 255, 0.18);
  --surface-pattern: url('tech_pattern.png');
  --surface-pattern-size: 300px;
  --surface-pattern-opacity: 0.055;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(5, 10, 18, 0.84) 0%, rgba(5, 10, 18, 0.42) 48%, rgba(5, 10, 18, 0.10) 100%);
}

html[data-theme-preset="market_street"] body {
  background:
    radial-gradient(circle at 12% 16%, rgba(109, 124, 255, 0.24), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(23, 214, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #090b12 0%, #05070c 100%) !important;
}

html[data-theme-preset="market_street"] body::before {
  background-image: url('tech_pattern.png') !important;
  background-size: 300px !important;
  opacity: 0.10 !important;
}

html[data-theme-preset="market_minimal"] {
  --bg: #f3f5f7;
  --card: #ffffff;
  --text: #111827;
  --text-secondary: #5d6673;
  --border: rgba(17, 24, 39, 0.08);
  --accent: #2f6fed;
  --btn-bg: linear-gradient(135deg, #2f6fed 0%, #6aa6ff 100%);
  --btn-text: #ffffff;
  --radius: 26px !important;
  --store-nav-bg: rgba(250, 252, 255, 0.84);
  --store-nav-border: rgba(180, 191, 211, 0.34);
  --store-nav-active-bg: linear-gradient(135deg, #2f6fed 0%, #5f8ff4 100%);
  --store-nav-shadow: 0 16px 32px rgba(100, 116, 139, 0.16);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.96));
  --store-card-border: rgba(203, 213, 225, 0.66);
  --store-card-shadow: 0 14px 34px rgba(148, 163, 184, 0.14);
  --surface-pattern:
    linear-gradient(rgba(120, 135, 160, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 135, 160, 0.10) 1px, transparent 1px);
  --surface-pattern-size: 24px 24px;
  --surface-pattern-opacity: 0.28;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(17, 24, 39, 0.70) 0%, rgba(17, 24, 39, 0.26) 55%, rgba(17, 24, 39, 0.04) 100%);
}

html[data-theme-preset="market_minimal"] body {
  background:
    radial-gradient(circle at top left, rgba(82, 126, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%) !important;
}

html[data-theme-preset="market_minimal"] body::before {
  background-image:
    linear-gradient(rgba(120, 135, 160, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 135, 160, 0.08) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  opacity: 0.30 !important;
}

html[data-theme-preset="market_urban"] {
  --bg: #111214;
  --card: #191b1f;
  --text: #f5f3ee;
  --text-secondary: rgba(245, 243, 238, 0.78);
  --border: rgba(247, 132, 42, 0.18);
  --accent: #f7842a;
  --btn-bg: linear-gradient(135deg, #f7842a 0%, #ffb347 100%);
  --btn-text: #16110d;
  --radius: 22px !important;
  --store-nav-bg: rgba(24, 25, 28, 0.82);
  --store-nav-border: rgba(247, 132, 42, 0.16);
  --store-nav-active-bg: linear-gradient(135deg, #f7842a 0%, #ffb347 100%);
  --store-nav-active-text: #1f140a;
  --store-nav-active-shadow: 0 12px 26px rgba(247, 132, 42, 0.24);
  --store-nav-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  --store-card-bg: linear-gradient(180deg, rgba(31, 33, 37, 0.98), rgba(20, 21, 24, 0.98));
  --store-card-border: rgba(247, 132, 42, 0.14);
  --store-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.30);
  --surface-pattern: url('tech_pattern.png');
  --surface-pattern-size: 280px;
  --surface-pattern-opacity: 0.045;
}

html[data-theme-preset="market_urban"] body {
  background:
    radial-gradient(circle at top right, rgba(247, 132, 42, 0.12), transparent 28%),
    linear-gradient(180deg, #191a1d 0%, #101113 100%) !important;
}

html[data-theme-preset="market_urban"] body::before {
  background-image: url('tech_pattern.png') !important;
  background-size: 280px !important;
  opacity: 0.07 !important;
}

html[data-theme-preset="market_luxe"] {
  --store-nav-bg: rgba(255, 251, 243, 0.84);
  --store-nav-border: rgba(164, 132, 71, 0.16);
  --store-nav-active-bg: linear-gradient(135deg, #c6a45d 0%, #e8cf98 100%);
  --store-nav-active-text: #3d2d11;
  --store-nav-active-shadow: 0 12px 24px rgba(198, 164, 93, 0.18);
  --store-nav-shadow: 0 18px 40px rgba(66, 48, 21, 0.12);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 253, 0.96), rgba(249, 243, 229, 0.94));
  --store-card-border: rgba(194, 166, 109, 0.16);
  --store-card-shadow: 0 18px 42px rgba(70, 46, 20, 0.08);
  --surface-pattern: url('style_pattern.png');
  --surface-pattern-size: 400px;
  --surface-pattern-opacity: 0.03;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(58, 43, 20, 0.74) 0%, rgba(58, 43, 20, 0.34) 52%, rgba(58, 43, 20, 0.08) 100%);
}

html[data-theme-preset="market_luxe"] body {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.14), transparent 32%),
    linear-gradient(180deg, #fdfaf3 0%, #f4efe3 100%) !important;
}

html[data-theme-preset="market_luxe"] body::before {
  background-image: url('style_pattern.png') !important;
  background-size: 420px !important;
  opacity: 0.05 !important;
}

html[data-theme-preset="market_botanic"] {
  --store-nav-bg: rgba(245, 250, 242, 0.86);
  --store-nav-border: rgba(113, 146, 111, 0.16);
  --store-nav-active-bg: linear-gradient(135deg, #72926f 0%, #96be90 100%);
  --store-nav-active-shadow: 0 12px 24px rgba(114, 146, 111, 0.18);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 237, 0.96));
  --store-card-border: rgba(121, 155, 118, 0.14);
  --store-card-shadow: 0 18px 42px rgba(70, 95, 68, 0.10);
  --surface-pattern: url('botanic_pattern.png');
  --surface-pattern-size: 360px;
  --surface-pattern-opacity: 0.05;
}

html[data-theme-preset="market_botanic"] body {
  background:
    radial-gradient(circle at top left, rgba(146, 184, 140, 0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(189, 216, 177, 0.18), transparent 30%),
    linear-gradient(180deg, #f8fcf5 0%, #edf5e8 100%) !important;
}

html[data-theme-preset="market_botanic"] body::before {
  background-image: url('botanic_pattern.png') !important;
  background-size: 360px !important;
  opacity: 0.07 !important;
}

html[data-theme-preset="market_bakery"] {
  --store-nav-bg: rgba(255, 248, 251, 0.88);
  --store-nav-border: rgba(211, 122, 154, 0.16);
  --store-nav-active-bg: linear-gradient(135deg, #d85c88 0%, #f29b72 100%);
  --store-nav-active-shadow: 0 12px 24px rgba(216, 92, 136, 0.18);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 243, 247, 0.96));
  --store-card-border: rgba(227, 185, 199, 0.50);
  --store-card-shadow: 0 18px 40px rgba(201, 135, 160, 0.14);
  --surface-pattern: url('cakes_pattern.png');
  --surface-pattern-size: 250px;
  --surface-pattern-opacity: 0.06;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(93, 42, 61, 0.66) 0%, rgba(93, 42, 61, 0.30) 52%, rgba(93, 42, 61, 0.04) 100%);
}

html[data-theme-preset="market_bakery"] body {
  background:
    radial-gradient(circle at top right, rgba(255, 206, 214, 0.24), transparent 26%),
    linear-gradient(180deg, #fffafc 0%, #fdf2f5 100%) !important;
}

html[data-theme-preset="market_bakery"] body::before {
  background-image: url('cakes_pattern.png') !important;
  background-size: 260px !important;
  opacity: 0.12 !important;
}

html[data-theme-preset="market_kids"] {
  --bg: #fff7ec;
  --store-nav-bg: rgba(255, 251, 243, 0.90);
  --store-nav-border: rgba(235, 165, 74, 0.20);
  --store-nav-active-bg: linear-gradient(135deg, #f8a53f 0%, #ffca63 100%);
  --store-nav-active-text: #6f4100;
  --store-nav-active-shadow: 0 12px 24px rgba(245, 166, 35, 0.22);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 232, 0.94));
  --store-card-border: rgba(232, 179, 82, 0.22);
  --store-card-shadow: 0 18px 42px rgba(245, 166, 35, 0.12);
  --surface-pattern: url('toys_pattern.png');
  --surface-pattern-size: 220px;
  --surface-pattern-opacity: 0.05;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(116, 66, 8, 0.68) 0%, rgba(116, 66, 8, 0.32) 48%, rgba(116, 66, 8, 0.04) 100%);
}

html[data-theme-preset="market_kids"] body {
  background:
    radial-gradient(circle at top left, rgba(255, 211, 126, 0.24), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 175, 111, 0.18), transparent 30%),
    linear-gradient(180deg, #fffaf1 0%, #fff2dc 100%) !important;
}

html[data-theme-preset="market_kids"] body::before {
  background-image: url('toys_pattern.png') !important;
  background-size: 240px !important;
  opacity: 0.08 !important;
}

/* ==========================================================================
   MARKET PERSONA: QUIET TEXTILE (market_textile)
   ========================================================================== */
html[data-theme-preset="market_textile"] {
  --bg: #f7f3ee;
  --card: #fffdf9;
  --text: #17131d;
  --text-secondary: #675f70;
  --muted: #8a8190;
  --border: rgba(60, 48, 74, 0.14);
  --accent: #7a6a9f;
  --btn-bg: linear-gradient(135deg, #7a6a9f 0%, #aa8f9e 100%);
  --btn-text: #ffffff;
  --radius: 2px !important;
  --radius-lg: 2px !important;
  --radius-xl: 2px !important;
  --store-nav-bg: rgba(255, 253, 249, 0.88);
  --store-nav-border: rgba(60, 48, 74, 0.12);
  --store-nav-active-bg: linear-gradient(135deg, #7a6a9f 0%, #b0909e 100%);
  --store-nav-active-text: #ffffff;
  --store-nav-active-shadow: 0 12px 24px rgba(122, 106, 159, 0.18);
  --store-card-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(249, 244, 238, 0.96));
  --store-card-border: rgba(60, 48, 74, 0.14);
  --store-card-shadow: 0 18px 42px rgba(60, 48, 74, 0.10);
  --surface-pattern: url('pajama_pattern.svg');
  --surface-pattern-size: 300px;
  --surface-pattern-opacity: 0.055;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(31, 24, 42, 0.64) 0%, rgba(31, 24, 42, 0.28) 52%, rgba(31, 24, 42, 0.04) 100%);
}

html[data-theme-preset="market_textile"] body {
  background:
    radial-gradient(circle at top left, rgba(122, 106, 159, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(176, 144, 158, 0.14), transparent 32%),
    linear-gradient(180deg, #fbf7f2 0%, #f1ebe4 100%) !important;
}

html[data-theme-preset="market_textile"] body::before {
  background-image: url('pajama_pattern.svg') !important;
  background-size: 300px !important;
  opacity: 0.10 !important;
}

html[data-theme-preset="market_textile"] .pCard,
html[data-theme-preset="market_textile"] .section,
html[data-theme-preset="market_textile"] .modalCard,
html[data-theme-preset="market_textile"] .searchBox,
html[data-theme-preset="market_textile"] .searchInput,
html[data-theme-preset="market_textile"] .clearBtn,
html[data-theme-preset="market_textile"] .segTabs,
html[data-theme-preset="market_textile"] .segBtn,
html[data-theme-preset="market_textile"] .btn,
html[data-theme-preset="market_textile"] .btnMain,
html[data-theme-preset="market_textile"] .btnPrimary,
html[data-theme-preset="market_textile"] .btnSoft,
html[data-theme-preset="market_textile"] .btnSecondary,
html[data-theme-preset="market_textile"] .bbBtn,
html[data-theme-preset="market_textile"] .bottomBar,
html[data-theme-preset="market_textile"] .promoSlide,
html[data-theme-preset="market_textile"] .catalogHeader,
html[data-theme-preset="market_textile"] .accountSheet,
html[data-theme-preset="market_textile"] .searchSheet,
html[data-theme-preset="market_textile"] .uiPopupCard,
html[data-theme-preset="market_textile"] .qaItem,
html[data-theme-preset="market_textile"] .qaBox,
html[data-theme-preset="market_textile"] .reviewsBox,
html[data-theme-preset="market_textile"] .reviewItem,
html[data-theme-preset="market_textile"] .questionItem,
html[data-theme-preset="market_textile"] .gallery,
html[data-theme-preset="market_textile"] .gImg,
html[data-theme-preset="market_textile"] .pImg,
html[data-theme-preset="market_textile"] .pMedia,
html[data-theme-preset="market_textile"] .thumb,
html[data-theme-preset="market_textile"] .orderThumb,
html[data-theme-preset="market_textile"] .srImg,
html[data-theme-preset="market_textile"] .recentViewedSlider .pCard,
html[data-theme-preset="market_textile"] .swThumb,
html[data-theme-preset="market_textile"] .swatch,
html[data-theme-preset="market_textile"] .sz,
html[data-theme-preset="market_textile"] .sizeBtn,
html[data-theme-preset="market_textile"] .colorBtn,
html[data-theme-preset="market_textile"] .discBadge,
html[data-theme-preset="market_textile"] .discCorner,
html[data-theme-preset="market_textile"] .pSold,
html[data-theme-preset="market_textile"] .statusPillFixed,
html[data-theme-preset="market_textile"] .pillCount,
html[data-theme-preset="market_textile"] .badgeCount,
html[data-theme-preset="market_textile"] .navPill,
html[data-theme-preset="market_textile"] .navBtn,
html[data-theme-preset="market_textile"] .ibQtyBtn,
html[data-theme-preset="market_textile"] .stepBtn,
html[data-theme-preset="market_textile"] .iconMini {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .section::before,
html[data-theme-preset="market_textile"] .searchBox::before,
html[data-theme-preset="market_textile"] .bottomBar::before,
html[data-theme-preset="market_textile"] .modalCard::before,
html[data-theme-preset="market_textile"] .pMedia::before {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] input,
html[data-theme-preset="market_textile"] textarea,
html[data-theme-preset="market_textile"] select {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .pCard {
  border: 1px solid rgba(60, 48, 74, 0.14) !important;
  background: var(--store-card-bg) !important;
  box-shadow: var(--store-card-shadow) !important;
}

html[data-theme-preset="market_textile"] .pMedia {
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(60, 48, 74, 0.10) !important;
}

html[data-theme-preset="market_textile"] .favBtn,
html[data-theme-preset="market_textile"] .thumb,
html[data-theme-preset="market_textile"] .orderThumb,
html[data-theme-preset="market_textile"] .badgeCount,
html[data-theme-preset="market_textile"] .pillCount,
html[data-theme-preset="market_textile"] .dot,
html[data-theme-preset="market_textile"] .gNav {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .bottomNav {
  background: rgba(255, 253, 249, 0.90) !important;
  border: 1px solid rgba(60, 48, 74, 0.12) !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 38px rgba(60, 48, 74, 0.12) !important;
}

html[data-theme-preset="market_textile"] .navBtn.isActive {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .sheetPatternOverlay::before {
  background-image: url('pajama_pattern.svg') !important;
  background-size: 300px !important;
  opacity: 0.10 !important;
}

html[data-theme-preset="market_textile"] body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
html[data-theme-preset="market_textile"] body *::before,
html[data-theme-preset="market_textile"] body *::after {
  border-radius: 2px !important;
}

/* ==========================================================================
   MARKET PERSONA: RUNWAY MUSE (market_runway)
   ========================================================================== */
html[data-theme-preset="market_runway"] {
  --bg: #fff8fb;
  --card: #ffffff;
  --card2: #fff3f7;
  --text: #18151a;
  --text-secondary: #5d5460;
  --muted: #948899;
  --border: rgba(255, 47, 109, 0.10);
  --accent: #ff2f6d;
  --primary: #ff2f6d;
  --primary-contrast: #ffffff;
  --btn-bg: linear-gradient(135deg, #111111 0%, #2b2228 100%);
  --btn-text: #ffffff;
  --radius: 24px !important;
  --radius-lg: 28px !important;
  --radius-xl: 32px !important;
  --store-nav-bg: rgba(255, 255, 255, 0.92);
  --store-nav-border: rgba(255, 47, 109, 0.10);
  --store-nav-active-bg: rgba(255, 47, 109, 0.10);
  --store-nav-active-text: #ff2f6d;
  --store-nav-active-shadow: 0 10px 22px rgba(255, 47, 109, 0.12);
  --store-nav-shadow: 0 18px 42px rgba(44, 24, 34, 0.10);
  --store-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 251, 0.97));
  --store-card-border: rgba(255, 47, 109, 0.08);
  --store-card-shadow: 0 18px 40px rgba(44, 24, 34, 0.08);
  --store-soft-surface: rgba(255, 255, 255, 0.82);
  --store-soft-border: rgba(255, 47, 109, 0.08);
  --surface-pattern-opacity: 0;
  --store-promo-overlay:
    linear-gradient(90deg, rgba(22, 18, 22, 0.74) 0%, rgba(22, 18, 22, 0.28) 52%, rgba(22, 18, 22, 0.02) 100%);
}

html[data-theme-preset="market_runway"] body {
  background:
    radial-gradient(circle at top left, rgba(255, 206, 221, 0.42), transparent 26%),
    radial-gradient(circle at top right, rgba(255, 244, 248, 0.92), transparent 24%),
    linear-gradient(180deg, #fffdfd 0%, #fff5f8 100%) !important;
}

html[data-theme-preset="market_runway"] body::before {
  opacity: 0 !important;
}

html[data-theme-preset="market_runway"] .top {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-top: calc(10px + env(safe-area-inset-top)) !important;
}

html[data-theme-preset="market_runway"] .brandText,
html[data-theme-preset="market_runway"] .sectionTitle,
html[data-theme-preset="market_runway"] .drawerTitle,
html[data-theme-preset="market_runway"] .h1,
html[data-theme-preset="market_runway"] .LuxeTitle {
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.03em !important;
}

html[data-theme-preset="market_runway"] .section,
html[data-theme-preset="market_runway"] .modalCard,
html[data-theme-preset="market_runway"] .drawer,
html[data-theme-preset="market_runway"] .accountSheet,
html[data-theme-preset="market_runway"] .searchSheet,
html[data-theme-preset="market_runway"] .uiPopupCard,
html[data-theme-preset="market_runway"] .qaItem,
html[data-theme-preset="market_runway"] .qaBox,
html[data-theme-preset="market_runway"] .reviewsBox,
html[data-theme-preset="market_runway"] .reviewItem,
html[data-theme-preset="market_runway"] .questionItem,
html[data-theme-preset="market_runway"] .plainHeader,
html[data-theme-preset="market_runway"] .emptyState,
html[data-theme-preset="market_runway"] .orderNotif,
html[data-theme-preset="market_runway"] .cartTotal {
  background: var(--store-card-bg) !important;
  border: 1px solid var(--store-card-border) !important;
  box-shadow: var(--store-card-shadow) !important;
}

html[data-theme-preset="market_runway"] .searchBox,
html[data-theme-preset="market_runway"] .overlaySearchBox,
html[data-theme-preset="market_runway"] .fInput,
html[data-theme-preset="market_runway"] .fSelect,
html[data-theme-preset="market_runway"] input,
html[data-theme-preset="market_runway"] textarea,
html[data-theme-preset="market_runway"] select {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 47, 109, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 20px rgba(44, 24, 34, 0.04) !important;
  border-radius: 18px !important;
}

html[data-theme-preset="market_runway"] .searchBox {
  min-height: 54px !important;
}

html[data-theme-preset="market_runway"] .segTabs,
html[data-theme-preset="market_runway"] .segPill,
html[data-theme-preset="market_runway"] .segBtn,
html[data-theme-preset="market_runway"] .fTag,
html[data-theme-preset="market_runway"] .sz,
html[data-theme-preset="market_runway"] .sizeBtn,
html[data-theme-preset="market_runway"] .colorBtn {
  border-radius: 999px !important;
}

html[data-theme-preset="market_runway"] .segBtn.isActive,
html[data-theme-preset="market_runway"] .fTagOn,
html[data-theme-preset="market_runway"] .szOn {
  background: rgba(255, 47, 109, 0.10) !important;
  border-color: rgba(255, 47, 109, 0.20) !important;
  color: #ff2f6d !important;
  box-shadow: 0 8px 18px rgba(255, 47, 109, 0.10) !important;
}

html[data-theme-preset="market_runway"] .promoSlide {
  border-radius: 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 47, 109, 0.08) !important;
  box-shadow: 0 24px 48px rgba(44, 24, 34, 0.10) !important;
}

html[data-theme-preset="market_runway"] .promoTitle {
  font-size: clamp(28px, 6vw, 42px) !important;
  line-height: 0.94 !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

html[data-theme-preset="market_runway"] .promoBtn,
html[data-theme-preset="market_runway"] .btnPrimary,
html[data-theme-preset="market_runway"] .btnMain,
html[data-theme-preset="market_runway"] .bbBtn {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.18) !important;
}

html[data-theme-preset="market_runway"] .btnSoft,
html[data-theme-preset="market_runway"] .btnSecondary {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #251f26 !important;
  border: 1px solid rgba(255, 47, 109, 0.10) !important;
}

html[data-theme-preset="market_runway"] .pCard {
  background: #ffffff !important;
  border: 1px solid rgba(255, 47, 109, 0.08) !important;
  box-shadow: 0 20px 38px rgba(44, 24, 34, 0.07) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

html[data-theme-preset="market_runway"] .pMedia,
html[data-theme-preset="market_runway"] .gallery,
html[data-theme-preset="market_runway"] .gImg,
html[data-theme-preset="market_runway"] .pImg,
html[data-theme-preset="market_runway"] .cImgWrap,
html[data-theme-preset="market_runway"] .cImg,
html[data-theme-preset="market_runway"] .thumb,
html[data-theme-preset="market_runway"] .orderThumb,
html[data-theme-preset="market_runway"] .srImg {
  border-radius: 22px !important;
}

html[data-theme-preset="market_runway"] .pMedia {
  background: linear-gradient(180deg, #fff7fa 0%, #fff 100%) !important;
}

html[data-theme-preset="market_runway"] .pBody {
  padding: 12px 12px 14px !important;
}

html[data-theme-preset="market_runway"] .pTitle {
  font-size: 15px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  color: #201922 !important;
}

html[data-theme-preset="market_runway"] .pPrice,
html[data-theme-preset="market_runway"] .nowPrice,
html[data-theme-preset="market_runway"] .priceBlock {
  color: #171216 !important;
  font-weight: 900 !important;
}

html[data-theme-preset="market_runway"] .oldPrice {
  color: #a79aa7 !important;
}

html[data-theme-preset="market_runway"] .discCorner,
html[data-theme-preset="market_runway"] .discBadge,
html[data-theme-preset="market_runway"] .badgeCount {
  background: linear-gradient(135deg, #ff2f6d 0%, #ff4f87 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(255, 47, 109, 0.16) !important;
}

html[data-theme-preset="market_runway"] .favBtn,
html[data-theme-preset="market_runway"] .iconBtn,
html[data-theme-preset="market_runway"] .backBtn,
html[data-theme-preset="market_runway"] .likeBtn,
html[data-theme-preset="market_runway"] .gNav {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 47, 109, 0.08) !important;
  box-shadow: 0 10px 20px rgba(44, 24, 34, 0.08) !important;
}

html[data-theme-preset="market_runway"] .favOn,
html[data-theme-preset="market_runway"] .favOn svg {
  color: #ff2f6d !important;
  stroke: #ff2f6d !important;
}

html[data-theme-preset="market_runway"] .bottomNav {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 47, 109, 0.08) !important;
  box-shadow: 0 18px 40px rgba(44, 24, 34, 0.10) !important;
}

html[data-theme-preset="market_runway"] .navBtn {
  color: #6f6271 !important;
}

html[data-theme-preset="market_runway"] .navBtn.isActive {
  background: rgba(255, 47, 109, 0.10) !important;
  color: #ff2f6d !important;
  box-shadow: 0 10px 22px rgba(255, 47, 109, 0.12) !important;
}

html[data-theme-preset="market_runway"] .navBtn .icon,
html[data-theme-preset="market_runway"] .navBtn .icon *,
html[data-theme-preset="market_runway"] .navBtn .navLabel {
  color: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme-preset="market_runway"] .catalogHeader {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-inline: 2px !important;
}

html[data-theme-preset="market_runway"] .recentViewedSlider .pCard,
html[data-theme-preset="market_runway"] .accountCard,
html[data-theme-preset="market_runway"] .favItem,
html[data-theme-preset="market_runway"] .cartItem {
  background: #ffffff !important;
  border: 1px solid rgba(255, 47, 109, 0.08) !important;
  box-shadow: 0 14px 32px rgba(44, 24, 34, 0.06) !important;
}

html[data-theme-preset="market_runway"] .dot,
html[data-theme-preset="market_runway"] .navPill,
html[data-theme-preset="market_runway"] .pillCount,
html[data-theme-preset="market_runway"] .statusPillFixed {
  border-radius: 999px !important;
}

html[data-theme-preset="market_runway"] .dotOn,
html[data-theme-preset="market_runway"] .promoDot.isActive {
  background: #ff2f6d !important;
}

html[data-theme-preset="market_luxury"] .pTitle,
html[data-theme-preset="market_luxe"] .pTitle {
  letter-spacing: -0.02em !important;
}

html[data-theme-preset="market_street"] .pTitle,
html[data-theme-preset="market_urban"] .pTitle {
  color: #f6f7fb !important;
}

html[data-theme-preset="market_street"] .favBtn,
html[data-theme-preset="market_urban"] .favBtn {
  background: rgba(12, 16, 24, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

html[data-theme-preset="market_minimal"] .btnMain,
html[data-theme-preset="market_minimal"] .btnPrimary,
html[data-theme-preset="market_botanic"] .btnMain,
html[data-theme-preset="market_botanic"] .btnPrimary,
html[data-theme-preset="market_bakery"] .btnMain,
html[data-theme-preset="market_bakery"] .btnPrimary,
html[data-theme-preset="market_kids"] .btnMain,
html[data-theme-preset="market_kids"] .btnPrimary {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Final sharp-corner enforcement for square storefront themes. Keep this last. */
html[data-theme-preset="market_textile"],
html[data-theme-preset="market_classic"],
html[data-theme-preset="market_runway"],
body[data-theme-preset="market_textile"],
body[data-theme-preset="market_classic"],
body[data-theme-preset="market_runway"] {
  --radius: 2px !important;
  --radius-lg: 2px !important;
  --radius-xl: 2px !important;
  --radius-full: 2px !important;
  --radius2: 2px !important;
  --store-nav-radius: 2px !important;
}

html[data-theme-preset="market_textile"] body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
html[data-theme-preset="market_textile"] body *::before,
html[data-theme-preset="market_textile"] body *::after,
html[data-theme-preset="market_classic"] body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
html[data-theme-preset="market_classic"] body *::before,
html[data-theme-preset="market_classic"] body *::after,
html[data-theme-preset="market_runway"] body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
html[data-theme-preset="market_runway"] body *::before,
html[data-theme-preset="market_runway"] body *::after,
body[data-theme-preset="market_textile"] *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
body[data-theme-preset="market_textile"] *::before,
body[data-theme-preset="market_textile"] *::after,
body[data-theme-preset="market_classic"] *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
body[data-theme-preset="market_classic"] *::before,
body[data-theme-preset="market_classic"] *::after,
body[data-theme-preset="market_runway"] *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon),
body[data-theme-preset="market_runway"] *::before,
body[data-theme-preset="market_runway"] *::after {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .bottomNav,
html[data-theme-preset="market_textile"] .bottomBar,
html[data-theme-preset="market_textile"] .navBtn.isActive,
html[data-theme-preset="market_textile"] .favBtn,
html[data-theme-preset="market_textile"] .likeBtn,
html[data-theme-preset="market_textile"] .iconBtn,
html[data-theme-preset="market_textile"] .backBtn,
html[data-theme-preset="market_textile"] .segPill,
html[data-theme-preset="market_textile"] .navPill,
html[data-theme-preset="market_textile"] .dot,
html[data-theme-preset="market_textile"] .badgeCount,
html[data-theme-preset="market_textile"] .pillCount,
html[data-theme-preset="market_classic"] .bottomNav,
html[data-theme-preset="market_classic"] .bottomBar,
html[data-theme-preset="market_classic"] .navBtn.isActive,
html[data-theme-preset="market_classic"] .favBtn,
html[data-theme-preset="market_classic"] .likeBtn,
html[data-theme-preset="market_classic"] .iconBtn,
html[data-theme-preset="market_classic"] .backBtn,
html[data-theme-preset="market_classic"] .segPill,
html[data-theme-preset="market_classic"] .navPill,
html[data-theme-preset="market_classic"] .dot,
html[data-theme-preset="market_classic"] .badgeCount,
html[data-theme-preset="market_classic"] .pillCount,
body[data-theme-preset="market_textile"] .bottomNav,
body[data-theme-preset="market_textile"] .bottomBar,
body[data-theme-preset="market_textile"] .navBtn.isActive,
body[data-theme-preset="market_textile"] .favBtn,
body[data-theme-preset="market_textile"] .likeBtn,
body[data-theme-preset="market_textile"] .iconBtn,
body[data-theme-preset="market_textile"] .backBtn,
body[data-theme-preset="market_textile"] .segPill,
body[data-theme-preset="market_textile"] .navPill,
body[data-theme-preset="market_textile"] .dot,
body[data-theme-preset="market_textile"] .badgeCount,
body[data-theme-preset="market_textile"] .pillCount,
body[data-theme-preset="market_classic"] .bottomNav,
body[data-theme-preset="market_classic"] .bottomBar,
body[data-theme-preset="market_classic"] .navBtn.isActive,
body[data-theme-preset="market_classic"] .favBtn,
body[data-theme-preset="market_classic"] .likeBtn,
body[data-theme-preset="market_classic"] .iconBtn,
body[data-theme-preset="market_classic"] .backBtn,
body[data-theme-preset="market_classic"] .segPill,
body[data-theme-preset="market_classic"] .navPill,
body[data-theme-preset="market_classic"] .dot,
body[data-theme-preset="market_classic"] .badgeCount,
body[data-theme-preset="market_classic"] .pillCount,
html[data-theme-preset="market_runway"] .bottomNav,
html[data-theme-preset="market_runway"] .bottomBar,
html[data-theme-preset="market_runway"] .navBtn.isActive,
html[data-theme-preset="market_runway"] .favBtn,
html[data-theme-preset="market_runway"] .likeBtn,
html[data-theme-preset="market_runway"] .iconBtn,
html[data-theme-preset="market_runway"] .backBtn,
html[data-theme-preset="market_runway"] .segPill,
html[data-theme-preset="market_runway"] .navPill,
html[data-theme-preset="market_runway"] .dot,
html[data-theme-preset="market_runway"] .badgeCount,
html[data-theme-preset="market_runway"] .pillCount,
body[data-theme-preset="market_runway"] .bottomNav,
body[data-theme-preset="market_runway"] .bottomBar,
body[data-theme-preset="market_runway"] .navBtn.isActive,
body[data-theme-preset="market_runway"] .favBtn,
body[data-theme-preset="market_runway"] .likeBtn,
body[data-theme-preset="market_runway"] .iconBtn,
body[data-theme-preset="market_runway"] .backBtn,
body[data-theme-preset="market_runway"] .segPill,
body[data-theme-preset="market_runway"] .navPill,
body[data-theme-preset="market_runway"] .dot,
body[data-theme-preset="market_runway"] .badgeCount,
body[data-theme-preset="market_runway"] .pillCount {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .section,
html[data-theme-preset="market_textile"] .plainHeader,
html[data-theme-preset="market_textile"] .orderNotif,
html[data-theme-preset="market_textile"] .emptyState,
html[data-theme-preset="market_textile"] .cartTotal,
html[data-theme-preset="market_textile"] .promoRow,
html[data-theme-preset="market_textile"] .cImgWrap,
html[data-theme-preset="market_textile"] .cImg,
html[data-theme-preset="market_classic"] .section,
html[data-theme-preset="market_classic"] .plainHeader,
html[data-theme-preset="market_classic"] .orderNotif,
html[data-theme-preset="market_classic"] .emptyState,
html[data-theme-preset="market_classic"] .cartTotal,
html[data-theme-preset="market_classic"] .promoRow,
html[data-theme-preset="market_classic"] .cImgWrap,
html[data-theme-preset="market_classic"] .cImg,
body[data-theme-preset="market_textile"] .section,
body[data-theme-preset="market_textile"] .plainHeader,
body[data-theme-preset="market_textile"] .orderNotif,
body[data-theme-preset="market_textile"] .emptyState,
body[data-theme-preset="market_textile"] .cartTotal,
body[data-theme-preset="market_textile"] .promoRow,
body[data-theme-preset="market_textile"] .cImgWrap,
body[data-theme-preset="market_textile"] .cImg,
body[data-theme-preset="market_classic"] .section,
body[data-theme-preset="market_classic"] .plainHeader,
body[data-theme-preset="market_classic"] .orderNotif,
body[data-theme-preset="market_classic"] .emptyState,
body[data-theme-preset="market_classic"] .cartTotal,
body[data-theme-preset="market_classic"] .promoRow,
body[data-theme-preset="market_classic"] .cImgWrap,
body[data-theme-preset="market_classic"] .cImg,
html[data-theme-preset="market_runway"] .section,
html[data-theme-preset="market_runway"] .plainHeader,
html[data-theme-preset="market_runway"] .orderNotif,
html[data-theme-preset="market_runway"] .emptyState,
html[data-theme-preset="market_runway"] .cartTotal,
html[data-theme-preset="market_runway"] .promoRow,
html[data-theme-preset="market_runway"] .cImgWrap,
html[data-theme-preset="market_runway"] .cImg,
body[data-theme-preset="market_runway"] .section,
body[data-theme-preset="market_runway"] .plainHeader,
body[data-theme-preset="market_runway"] .orderNotif,
body[data-theme-preset="market_runway"] .emptyState,
body[data-theme-preset="market_runway"] .cartTotal,
body[data-theme-preset="market_runway"] .promoRow,
body[data-theme-preset="market_runway"] .cImgWrap,
body[data-theme-preset="market_runway"] .cImg {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .navBtn,
html[data-theme-preset="market_classic"] .navBtn,
html[data-theme-preset="market_runway"] .navBtn,
body[data-theme-preset="market_textile"] .navBtn,
body[data-theme-preset="market_classic"] .navBtn,
body[data-theme-preset="market_runway"] .navBtn {
  color: #737373 !important;
}

html[data-theme-preset="market_textile"] .navBtn .navLabel,
html[data-theme-preset="market_classic"] .navBtn .navLabel,
html[data-theme-preset="market_runway"] .navBtn .navLabel,
body[data-theme-preset="market_textile"] .navBtn .navLabel,
body[data-theme-preset="market_classic"] .navBtn .navLabel,
body[data-theme-preset="market_runway"] .navBtn .navLabel {
  color: currentColor !important;
}

html[data-theme-preset="market_textile"] .navBtn .icon,
html[data-theme-preset="market_textile"] .navBtn .icon *,
html[data-theme-preset="market_classic"] .navBtn .icon,
html[data-theme-preset="market_classic"] .navBtn .icon *,
html[data-theme-preset="market_runway"] .navBtn .icon,
html[data-theme-preset="market_runway"] .navBtn .icon *,
body[data-theme-preset="market_textile"] .navBtn .icon,
body[data-theme-preset="market_textile"] .navBtn .icon *,
body[data-theme-preset="market_classic"] .navBtn .icon,
body[data-theme-preset="market_classic"] .navBtn .icon *,
body[data-theme-preset="market_runway"] .navBtn .icon,
body[data-theme-preset="market_runway"] .navBtn .icon * {
  color: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme-preset="market_textile"] .navBtn.isActive,
html[data-theme-preset="market_classic"] .navBtn.isActive,
html[data-theme-preset="market_runway"] .navBtn.isActive,
body[data-theme-preset="market_textile"] .navBtn.isActive,
body[data-theme-preset="market_classic"] .navBtn.isActive,
body[data-theme-preset="market_runway"] .navBtn.isActive {
  color: var(--store-nav-active-text, #ffffff) !important;
}

html[data-theme-preset="market_textile"] .navBtn.isActive .navLabel,
html[data-theme-preset="market_textile"] .navBtn.isActive .icon,
html[data-theme-preset="market_textile"] .navBtn.isActive .icon *,
html[data-theme-preset="market_classic"] .navBtn.isActive .navLabel,
html[data-theme-preset="market_classic"] .navBtn.isActive .icon,
html[data-theme-preset="market_classic"] .navBtn.isActive .icon *,
body[data-theme-preset="market_textile"] .navBtn.isActive .navLabel,
body[data-theme-preset="market_textile"] .navBtn.isActive .icon,
body[data-theme-preset="market_textile"] .navBtn.isActive .icon *,
body[data-theme-preset="market_classic"] .navBtn.isActive .navLabel,
body[data-theme-preset="market_classic"] .navBtn.isActive .icon,
body[data-theme-preset="market_classic"] .navBtn.isActive .icon *,
html[data-theme-preset="market_runway"] .navBtn.isActive .navLabel,
html[data-theme-preset="market_runway"] .navBtn.isActive .icon,
html[data-theme-preset="market_runway"] .navBtn.isActive .icon *,
body[data-theme-preset="market_runway"] .navBtn.isActive .navLabel,
body[data-theme-preset="market_runway"] .navBtn.isActive .icon,
body[data-theme-preset="market_runway"] .navBtn.isActive .icon * {
  color: var(--store-nav-active-text, #ffffff) !important;
  stroke: var(--store-nav-active-text, #ffffff) !important;
}

/* Final action styling for square storefront themes. */
html[data-theme-preset="market_textile"],
html[data-theme-preset="market_classic"],
html[data-theme-preset="market_runway"],
body[data-theme-preset="market_textile"],
body[data-theme-preset="market_classic"],
body[data-theme-preset="market_runway"] {
  --store-action-red: #ff0a2f;
  --store-action-red-dark: #e50024;
  --store-action-red-shadow: rgba(255, 10, 47, 0.22);
}

html[data-theme-preset="market_textile"] .ibBtn:not(.ibBtnOff),
html[data-theme-preset="market_textile"] .ibBtnPay,
html[data-theme-preset="market_textile"] #btnCheckout,
html[data-theme-preset="market_classic"] .ibBtn:not(.ibBtnOff),
html[data-theme-preset="market_classic"] .ibBtnPay,
html[data-theme-preset="market_classic"] #btnCheckout,
body[data-theme-preset="market_textile"] .ibBtn:not(.ibBtnOff),
body[data-theme-preset="market_textile"] .ibBtnPay,
body[data-theme-preset="market_textile"] #btnCheckout,
body[data-theme-preset="market_classic"] .ibBtn:not(.ibBtnOff),
body[data-theme-preset="market_classic"] .ibBtnPay,
body[data-theme-preset="market_classic"] #btnCheckout {
  background: linear-gradient(180deg, var(--store-action-red) 0%, var(--store-action-red-dark) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--store-action-red) !important;
  box-shadow: 0 10px 22px var(--store-action-red-shadow) !important;
}

html[data-theme-preset="market_textile"] .ibBtn:not(.ibBtnOff) *,
html[data-theme-preset="market_textile"] .ibBtnPay *,
html[data-theme-preset="market_textile"] #btnCheckout *,
html[data-theme-preset="market_classic"] .ibBtn:not(.ibBtnOff) *,
html[data-theme-preset="market_classic"] .ibBtnPay *,
html[data-theme-preset="market_classic"] #btnCheckout *,
body[data-theme-preset="market_textile"] .ibBtn:not(.ibBtnOff) *,
body[data-theme-preset="market_textile"] .ibBtnPay *,
body[data-theme-preset="market_textile"] #btnCheckout *,
body[data-theme-preset="market_classic"] .ibBtn:not(.ibBtnOff) *,
body[data-theme-preset="market_classic"] .ibBtnPay *,
body[data-theme-preset="market_classic"] #btnCheckout * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

html[data-theme-preset="market_textile"] .favBtn,
html[data-theme-preset="market_textile"] .favBtnTop,
html[data-theme-preset="market_classic"] .favBtn,
html[data-theme-preset="market_classic"] .favBtnTop,
body[data-theme-preset="market_textile"] .favBtn,
body[data-theme-preset="market_textile"] .favBtnTop,
body[data-theme-preset="market_classic"] .favBtn,
body[data-theme-preset="market_classic"] .favBtnTop {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

html[data-theme-preset="market_textile"] .favBtn.favOn,
html[data-theme-preset="market_textile"] .favBtnTop.favOn,
html[data-theme-preset="market_classic"] .favBtn.favOn,
html[data-theme-preset="market_classic"] .favBtnTop.favOn,
body[data-theme-preset="market_textile"] .favBtn.favOn,
body[data-theme-preset="market_textile"] .favBtnTop.favOn,
body[data-theme-preset="market_classic"] .favBtn.favOn,
body[data-theme-preset="market_classic"] .favBtnTop.favOn {
  color: var(--store-action-red) !important;
  filter: drop-shadow(0 2px 4px rgba(255, 10, 47, 0.28));
}

html[data-theme-preset="market_textile"] .favBtn .favIcon,
html[data-theme-preset="market_classic"] .favBtn .favIcon,
body[data-theme-preset="market_textile"] .favBtn .favIcon,
body[data-theme-preset="market_classic"] .favBtn .favIcon {
  stroke-width: 2.2 !important;
}

html[data-theme-preset="market_textile"] .ibQtyBtn .trashIcon,
html[data-theme-preset="market_classic"] .ibQtyBtn .trashIcon,
body[data-theme-preset="market_textile"] .ibQtyBtn .trashIcon,
body[data-theme-preset="market_classic"] .ibQtyBtn .trashIcon {
  color: var(--store-action-red) !important;
  stroke: var(--store-action-red) !important;
}

html[data-theme-preset="market_textile"] .bottomNav .badgeCount,
html[data-theme-preset="market_classic"] .bottomNav .badgeCount,
body[data-theme-preset="market_textile"] .bottomNav .badgeCount,
body[data-theme-preset="market_classic"] .bottomNav .badgeCount {
  top: 4px !important;
  right: 8px !important;
  transform: none !important;
  box-shadow: 0 4px 10px rgba(255, 10, 47, 0.20) !important;
}

html[data-theme-preset="market_textile"] #btnCart .badgeCount,
html[data-theme-preset="market_classic"] #btnCart .badgeCount,
html[data-theme-preset="market_runway"] #btnCart .badgeCount,
body[data-theme-preset="market_textile"] #btnCart .badgeCount,
body[data-theme-preset="market_classic"] #btnCart .badgeCount,
body[data-theme-preset="market_runway"] #btnCart .badgeCount {
  top: 7px !important;
  right: 4px !important;
  min-width: 22px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 6px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3f3f46 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  letter-spacing: -0.02em !important;
}

html[data-theme-preset="market_textile"] #btnCart.isActive .badgeCount,
html[data-theme-preset="market_classic"] #btnCart.isActive .badgeCount,
html[data-theme-preset="market_runway"] #btnCart.isActive .badgeCount,
body[data-theme-preset="market_textile"] #btnCart.isActive .badgeCount,
body[data-theme-preset="market_classic"] #btnCart.isActive .badgeCount,
body[data-theme-preset="market_runway"] #btnCart.isActive .badgeCount {
  background: transparent !important;
  color: var(--store-nav-active-text, #ffffff) !important;
  box-shadow: none !important;
  border: 0 !important;
}

html[data-theme-preset="market_textile"] #btnCart .badgeCount.hidden,
html[data-theme-preset="market_classic"] #btnCart .badgeCount.hidden,
html[data-theme-preset="market_runway"] #btnCart .badgeCount.hidden,
body[data-theme-preset="market_textile"] #btnCart .badgeCount.hidden,
body[data-theme-preset="market_classic"] #btnCart .badgeCount.hidden,
body[data-theme-preset="market_runway"] #btnCart .badgeCount.hidden {
  display: none !important;
}

html[data-theme-preset="market_textile"] .segTabs,
html[data-theme-preset="market_classic"] .segTabs,
body[data-theme-preset="market_textile"] .segTabs,
body[data-theme-preset="market_classic"] .segTabs {
  box-shadow: none !important;
}

html[data-theme-preset="market_textile"] .segPill,
html[data-theme-preset="market_classic"] .segPill,
body[data-theme-preset="market_textile"] .segPill,
body[data-theme-preset="market_classic"] .segPill {
  display: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_textile"] .segBtn,
html[data-theme-preset="market_classic"] .segBtn,
body[data-theme-preset="market_textile"] .segBtn,
body[data-theme-preset="market_classic"] .segBtn {
  box-shadow: none !important;
}

html[data-theme-preset="market_textile"] .segBtn.segOn,
html[data-theme-preset="market_textile"] .segBtn.isActive,
html[data-theme-preset="market_classic"] .segBtn.segOn,
html[data-theme-preset="market_classic"] .segBtn.isActive,
body[data-theme-preset="market_textile"] .segBtn.segOn,
body[data-theme-preset="market_textile"] .segBtn.isActive,
body[data-theme-preset="market_classic"] .segBtn.segOn,
body[data-theme-preset="market_classic"] .segBtn.isActive {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme-preset="market_textile"] .viewFxOut *,
html[data-theme-preset="market_textile"] .viewFxIn *,
html[data-theme-preset="market_classic"] .viewFxOut *,
html[data-theme-preset="market_classic"] .viewFxIn *,
html[data-theme-preset="market_runway"] .viewFxOut *,
html[data-theme-preset="market_runway"] .viewFxIn *,
body[data-theme-preset="market_textile"] .viewFxOut *,
body[data-theme-preset="market_textile"] .viewFxIn *,
body[data-theme-preset="market_classic"] .viewFxOut *,
body[data-theme-preset="market_classic"] .viewFxIn *,
body[data-theme-preset="market_runway"] .viewFxOut *,
body[data-theme-preset="market_runway"] .viewFxIn * {
  border-radius: 2px !important;
}

html[data-theme-preset="market_textile"] .viewFxOut button,
html[data-theme-preset="market_textile"] .viewFxIn button,
html[data-theme-preset="market_classic"] .viewFxOut button,
html[data-theme-preset="market_classic"] .viewFxIn button,
html[data-theme-preset="market_runway"] .viewFxOut button,
html[data-theme-preset="market_runway"] .viewFxIn button,
body[data-theme-preset="market_textile"] .viewFxOut button,
body[data-theme-preset="market_textile"] .viewFxIn button,
body[data-theme-preset="market_classic"] .viewFxOut button,
body[data-theme-preset="market_classic"] .viewFxIn button,
body[data-theme-preset="market_runway"] .viewFxOut button,
body[data-theme-preset="market_runway"] .viewFxIn button {
  transition-property: opacity, transform, background-color, color, box-shadow !important;
}

/* Checkout is a full storefront page, not a narrow modal. */
#checkoutModal.checkoutPageModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#checkoutModal.checkoutPageModal.hidden { display: none !important; }

#checkoutModal .checkoutPageCard {
  width: 100% !important;
  max-width: 960px !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: calc(8px + env(safe-area-inset-top)) clamp(8px, 2.6vw, 24px) calc(28px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

#checkoutModal .checkoutPageCard::before { display: none !important; }

#checkoutModal .checkoutPageHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 42px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 0 8px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

#checkoutModal .checkoutPageBack {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius,14px) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

#checkoutModal .checkoutPageTitle {
  min-width: 0;
  text-align: center;
  font-size: clamp(18px,5vw,24px);
  line-height: 1.15;
}

#checkoutModal .checkoutPageHeaderSpacer { width: 40px; height: 40px; }
#checkoutModal .checkoutPageIntro { margin: 4px 2px 18px; color: var(--muted); text-align: center; }

#checkoutModal .checkoutPageSection {
  margin: 0 0 14px;
  padding: clamp(13px,3.2vw,22px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg,20px);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

#checkoutModal .checkoutStepTitle { font-size: clamp(16px,4.2vw,19px); }
#checkoutModal .checkoutChoice { background: var(--card); }
#checkoutModal .checkoutFields.checkoutChoiceDetails { padding-left: 0; padding-right: 0; }
#checkoutModal .checkoutPageActions { display: grid; gap: 10px; padding: 4px 0 12px; }
#checkoutModal .checkoutPageActions .btn { min-height: 48px; }
#checkoutModal .checkoutPageFootnote { text-align: center; line-height: 1.4; padding-top: 2px; }
#checkoutModal .cdekWidgetHost { width: 100%; min-height: min(560px,62vh); }

/* Checkout 2026: a readable three-step form with a persistent order summary. */
#checkoutModal {
  --checkout-accent: var(--accent, var(--primary, #16a34a));
  --checkout-surface: var(--card, #fff);
  --checkout-soft: color-mix(in srgb, var(--checkout-accent) 7%, var(--checkout-surface));
  --checkout-radius: 20px;
  --checkout-control-radius: 13px;
}
#checkoutModal .checkoutPageLayout { display: grid; gap: 16px; }
#checkoutModal .checkoutPageMain { display: grid; gap: 14px; min-width: 0; }
#checkoutModal .checkoutPageHeader > div { min-width: 0; }
#checkoutModal .checkoutPageHeader .checkoutPageIntro { margin: 5px 0 0; text-align: left; }
#checkoutModal .checkoutSectionHeading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
#checkoutModal .checkoutSectionHeading .checkoutStepTitle { margin: 1px 0 0; }
#checkoutModal .checkoutSectionHeading .checkoutHint { margin-top: 3px; }
#checkoutModal .checkoutStepNumber {
  width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--checkout-accent); background: var(--checkout-soft); font-weight: 900;
}
#checkoutModal .checkoutContactGrid { display: grid; gap: 10px; }
#checkoutModal .checkoutField { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
#checkoutModal .checkoutField > span { padding-left: 2px; }
#checkoutModal .checkoutField i { color: #ef4444; font-style: normal; }
#checkoutModal .checkoutField small { font: inherit; }
#checkoutModal .checkoutChoiceWrap { min-width: 0; }
#checkoutModal .checkoutOrderColumn { display: grid; align-content: start; gap: 14px; min-width: 0; }
#checkoutModal .checkoutOrderCard,
#checkoutModal .checkoutGuarantee {
  border: 1px solid var(--border); border-radius: var(--checkout-radius); background: var(--checkout-surface);
}
#checkoutModal .checkoutOrderCard { padding: 18px; }
#checkoutModal .checkoutOrderHead { margin-bottom: 14px; }
#checkoutModal .checkoutOrderHead > div { display: grid; gap: 3px; }
#checkoutModal .checkoutOrderHead b { font-size: 18px; }
#checkoutModal .checkoutOrderHead span { color: var(--muted); font-size: 13px; }
#checkoutModal .checkoutOrderItems { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
#checkoutModal .checkoutOrderItem { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: 12px; align-items: center; }
#checkoutModal .checkoutOrderItem img { width: 62px; height: 72px; display: block; object-fit: cover; border-radius: calc(var(--checkout-control-radius) - 4px); background: var(--card2); }
#checkoutModal .checkoutOrderItemInfo { min-width: 0; display: grid; gap: 3px; }
#checkoutModal .checkoutOrderItemInfo b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.25; }
#checkoutModal .checkoutOrderItemInfo span,
#checkoutModal .checkoutOrderItemInfo small { color: var(--muted); font-size: 12px; }
#checkoutModal .checkoutOrderItem > strong { align-self: end; white-space: nowrap; font-size: 13px; }
#checkoutModal .checkoutSummary { margin: 0; padding: 16px 0; border: 0; border-radius: 0; background: transparent; }
#checkoutModal .checkoutSummaryDiscount,
#checkoutModal .checkoutSummaryDiscount b { color: #16a34a; }
#checkoutModal .checkoutSummaryTotal { font-size: 20px; }
#checkoutModal .checkoutPromoStatus {
  display: flex; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 12px;
  border: 1px solid color-mix(in srgb, #16a34a 25%, var(--border)); border-radius: var(--checkout-control-radius);
  color: #16803a; background: color-mix(in srgb, #16a34a 8%, var(--checkout-surface)); font-size: 13px;
}
#checkoutModal .checkoutPromoStatus.hidden { display: none; }
#checkoutModal .checkoutConsent { margin-top: 12px; text-align: center; line-height: 1.4; }
#checkoutModal .checkoutGuarantee { display: flex; gap: 12px; align-items: center; padding: 16px; }
#checkoutModal .checkoutGuarantee > span { color: #e59b19; font-size: 24px; }
#checkoutModal .checkoutGuarantee > div { display: grid; gap: 3px; }
#checkoutModal .checkoutGuarantee b { font-size: 13px; }
#checkoutModal .checkoutGuarantee small { color: var(--muted); line-height: 1.35; }
#checkoutModal .checkoutSafetyNote { margin-top: 14px; color: var(--muted); font-size: 12px; }

@media (min-width: 680px) {
  #checkoutModal .checkoutContactGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #checkoutModal .checkoutFieldWide { grid-column: 1 / -1; }
}

@media (min-width: 720px) {
  #checkoutModal .checkoutPageCard { padding-left: 28px !important; padding-right: 28px !important; }
  #checkoutModal .checkoutChoices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #checkoutModal .checkoutChoiceWrap.isOpen { grid-column: 1 / -1; }
  #checkoutModal .checkoutChoiceWrap.isOpen .checkoutFields { width: 100%; }
  #checkoutModal .checkoutPageActions { grid-template-columns: minmax(220px,1fr) minmax(180px,.55fr); }
  #checkoutModal .checkoutPageFootnote { grid-column: 1 / -1; }
}

/* Theme bridge: checkout uses the same visual language as catalog cards. */
#checkoutModal.checkoutPageModal {
  isolation: isolate;
  background-color: var(--bg) !important;
  background-image: var(--bg-pattern, none) !important;
  background-size: var(--bg-pattern-size, auto) !important;
}

#checkoutModal.checkoutPageModal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--surface-pattern, none);
  background-repeat: repeat;
  background-size: var(--surface-pattern-size, 280px);
  opacity: var(--surface-pattern-opacity, 0);
}

#checkoutModal .checkoutPageCard { background: transparent !important; }

#checkoutModal .checkoutPageHeader {
  background: var(--store-nav-bg, color-mix(in srgb,var(--bg) 90%,transparent)) !important;
  border-color: var(--store-nav-border, var(--border)) !important;
  border-radius: var(--radius-lg,20px) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-shadow: var(--store-nav-shadow, var(--shadow-sm)) !important;
}

#checkoutModal .checkoutPageSection {
  background: var(--store-card-bg, var(--card)) !important;
  border-color: var(--store-card-border, var(--border)) !important;
  box-shadow: var(--store-card-shadow, var(--shadow-sm)) !important;
}

#checkoutModal .checkoutChoice,
#checkoutModal .checkoutSummary,
#checkoutModal .cdekCitySuggest,
#checkoutModal .cdekWidgetHost {
  background: var(--store-soft-surface, var(--card)) !important;
  border-color: var(--store-soft-border, var(--border)) !important;
}

#checkoutModal .checkoutChoiceWrap.isOpen {
  background: color-mix(in srgb,var(--accent) 8%,var(--card)) !important;
  border-color: color-mix(in srgb,var(--accent) 44%,var(--border)) !important;
}

#checkoutModal .checkoutChoice.isActive {
  background: color-mix(in srgb,var(--accent) 12%,var(--store-soft-surface,var(--card))) !important;
  border-color: var(--accent) !important;
}

#checkoutModal .checkoutChoiceIcon {
  background: color-mix(in srgb,var(--accent) 12%,transparent) !important;
  color: var(--accent) !important;
}

html[data-theme-preset="market_runway"] #checkoutModal.checkoutPageModal {
  background:
    radial-gradient(circle at top left,rgba(255,206,221,.42),transparent 26%),
    radial-gradient(circle at top right,rgba(255,244,248,.92),transparent 24%),
    linear-gradient(180deg,#fffdfd 0%,#fff5f8 100%) !important;
}

html[data-theme-preset="market_textile"] #checkoutModal.checkoutPageModal {
  background:
    radial-gradient(circle at top left,rgba(122,106,159,.12),transparent 28%),
    radial-gradient(circle at bottom right,rgba(176,144,158,.14),transparent 32%),
    linear-gradient(180deg,#fbf7f2 0%,#f1ebe4 100%) !important;
}

html[data-theme-preset="market_bakery"] #checkoutModal.checkoutPageModal {
  background:
    radial-gradient(circle at top right,rgba(255,206,214,.24),transparent 26%),
    linear-gradient(180deg,#fffafc 0%,#fdf2f5 100%) !important;
}

html[data-theme-preset="market_kids"] #checkoutModal.checkoutPageModal {
  background:
    radial-gradient(circle at top left,rgba(255,211,126,.24),transparent 28%),
    radial-gradient(circle at bottom right,rgba(255,175,111,.18),transparent 30%),
    linear-gradient(180deg,#fffaf1 0%,#fff2dc 100%) !important;
}

html[data-theme-preset="market_classic"] #checkoutModal.checkoutPageModal {
  background:#fff !important;
}

html[data-theme-preset="market_classic"] #checkoutModal .checkoutPageHeader,
html[data-theme-preset="market_classic"] #checkoutModal .checkoutPageSection {
  border-radius:2px !important;
  box-shadow:none !important;
}

/* Clear, theme-aware selection states and action hierarchy. */
#checkoutModal .checkoutChoiceWrap.isOpen {
  position: relative;
  background: var(--store-card-bg,var(--card)) !important;
  border-color: color-mix(in srgb,var(--text) 12%,var(--border)) !important;
  box-shadow: var(--store-card-shadow,var(--shadow-sm)) !important;
}

#checkoutModal .checkoutChoiceWrap.isOpen::before {
  display: none;
}

#checkoutModal .checkoutChoice.isActive {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#checkoutModal .checkoutChoice.isActive .checkoutChoiceIcon {
  background: color-mix(in srgb,var(--text) 6%,var(--card)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb,var(--text) 10%,var(--border)) !important;
  box-shadow: none !important;
}

#checkoutModal .checkoutChoiceMark {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb,var(--muted) 32%,var(--border));
  border-radius: 999px;
  color: transparent;
  font-size: 13px;
}

#checkoutModal .checkoutChoice.isActive .checkoutChoiceMark {
  color: var(--text);
  border-color: color-mix(in srgb,var(--text) 18%,var(--border));
  background: color-mix(in srgb,var(--text) 5%,var(--card)) !important;
  box-shadow: none;
}

#checkoutModal .checkoutPageActions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding-top: 8px !important;
}

#checkoutModal #submitOrder {
  min-height: 58px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -.015em;
}

#checkoutModal #cancelCheckout {
  width: auto !important;
  min-height: 36px !important;
  align-self: center !important;
  padding: 7px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

#checkoutModal .checkoutPageTitle { grid-column: 2; }
html[data-internal-back="off"] #checkoutModal .checkoutPageBack { display:none !important; }

/* Native sharing choices for a product: chat, Telegram Story or direct link. */
.productShareSheetOverlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(15,23,42,.28);backdrop-filter:blur(8px);opacity:0;transition:opacity .18s ease;}
.productShareSheetOverlay.isOpen{opacity:1;}.productShareSheet{width:min(520px,100%);padding:10px 12px calc(14px + env(safe-area-inset-bottom));border:1px solid var(--store-card-border,var(--border));border-radius:24px;background:var(--store-card-bg,var(--card));box-shadow:0 24px 70px rgba(15,23,42,.22);transform:translateY(20px);transition:transform .2s ease;}
.productShareSheetOverlay.isOpen .productShareSheet{transform:translateY(0);}.productShareSheetHandle{width:38px;height:4px;margin:2px auto 12px;border-radius:999px;background:color-mix(in srgb,var(--muted) 30%,transparent);}.productShareSheetHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 13px;}.productShareSheetHead>div{display:flex;flex-direction:column;gap:3px;}.productShareSheetHead b{font-size:18px;}.productShareSheetHead span{font-size:13px;color:var(--muted);}.productShareSheetClose{width:34px;height:34px;border:0;border-radius:12px;background:var(--store-soft-surface,#f4f6f8);color:var(--text);font-size:24px;line-height:1;}
.productShareAction{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;padding:12px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);background:transparent;color:var(--text);text-align:left;}.productShareAction:active{background:var(--store-soft-surface,#f4f6f8);}.productShareActionIcon{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:var(--store-soft-surface,#f4f6f8);color:var(--text);font-size:22px;font-weight:500;}.productShareAction>span:last-child{display:flex;flex-direction:column;gap:3px;}.productShareAction b{font-size:15px;}.productShareAction small{font-size:12px;color:var(--muted);}

.desktopStoreHeader,
.desktopBenefits {
  display: none;
}

@media (min-width:720px) {
  #checkoutModal .checkoutPageActions { display:flex !important; }
  #checkoutModal .checkoutPageFootnote { grid-column:auto; }
}

/* === Desktop storefront mode =================================================
   The Telegram Mini App remains mobile-first. When the same storefront is opened
   from a desktop browser, switch to a classic ecommerce layout instead of
   stretching the mobile app UI across the monitor.
============================================================================ */
@media (min-width: 1024px) {
  :root {
    --desktop-modern-bg: #f6f7fb;
    --desktop-modern-card: rgba(255,255,255,.96);
    --desktop-modern-line: rgba(15,23,42,.08);
    --desktop-modern-soft: rgba(15,23,42,.045);
  }

  body[data-view="orders"],
  body[data-view="favorites"],
  body[data-view="notifications"],
  body[data-view="cart"] {
    background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 34%),
      linear-gradient(180deg, #fff 0%, var(--desktop-modern-bg) 36%, #fff 100%) !important;
  }

  body[data-view="orders"] .plainHeader,
  body[data-view="favorites"] .plainHeader,
  body[data-view="notifications"] .plainHeader {
    display: none !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites {
    width: min(1280px, calc(100vw - 96px)) !important;
    max-width: min(1280px, calc(100vw - 96px)) !important;
    margin: 0 auto !important;
    padding: calc(var(--desktop-header-h, 78px) + 34px) 0 86px !important;
    gap: 18px !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child,
  body[data-view="notifications"] #viewNotifications > .section:first-child,
  body[data-view="favorites"] #viewFavorites > .favoritesHero {
    padding: 28px 32px !important;
    border: 1px solid var(--desktop-modern-line) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, var(--desktop-modern-card), color-mix(in srgb, var(--primary) 5%, #fff)) !important;
    box-shadow: 0 22px 70px rgba(15,23,42,.075) !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1,
  body[data-view="notifications"] #viewNotifications > .section:first-child .h1,
  body[data-view="favorites"] #viewFavorites .favoritesHero .h1 {
    font-size: 34px !important;
    letter-spacing: -.04em !important;
    margin: 0 !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1:after {
    content: "История покупок, статусы и состав заказов";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="notifications"] #viewNotifications > .section:first-child .h1:after {
    content: "Важные изменения по заказам и сообщения магазина";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="favorites"] #viewFavorites .favoritesHero .h1:after {
    content: "Товары, которые хочется не потерять";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid],
  body[data-view="notifications"] #viewNotifications .orderNotif,
  body[data-view="notifications"] #viewNotifications > .section:not(:first-child):not(:last-child) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 28px;
    min-height: 154px;
    padding: 24px 28px !important;
    border: 1px solid var(--desktop-modern-line) !important;
    border-radius: 24px !important;
    background: var(--desktop-modern-card) !important;
    box-shadow: 0 18px 54px rgba(15,23,42,.06) !important;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid]:hover,
  body[data-view="notifications"] #viewNotifications .orderNotif:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--desktop-modern-line)) !important;
    box-shadow: 0 26px 72px rgba(15,23,42,.10) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] > div:first-child,
  body[data-view="notifications"] #viewNotifications .orderNotif > div:first-child {
    display: contents !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .h1,
  body[data-view="notifications"] #viewNotifications .orderNotif .h1 {
    font-size: 22px !important;
    letter-spacing: -.025em !important;
    margin: 0 !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .smallMuted,
  body[data-view="notifications"] #viewNotifications .orderNotif .smallMuted {
    justify-self: end;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    padding-top: 3px;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .p,
  body[data-view="notifications"] #viewNotifications .orderNotif .p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 650;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumbRow,
  body[data-view="notifications"] #viewNotifications .orderNotif .thumbRow {
    grid-column: 1 / -1;
    margin-top: 2px;
    gap: 10px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumb,
  body[data-view="notifications"] #viewNotifications .orderNotif .thumb {
    width: 68px;
    height: 86px;
    border-radius: 16px;
    border: 0;
    box-shadow: 0 10px 24px rgba(15,23,42,.09);
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .statusPillFixed,
  body[data-view="notifications"] #viewNotifications .orderNotif .statusPillFixed {
    min-width: 0;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .p:last-child {
    position: absolute;
    right: 28px;
    bottom: 22px;
    color: var(--primary) !important;
    font-weight: 900;
  }

  body[data-view="orders"] #viewOrders > .section:last-child,
  body[data-view="notifications"] #viewNotifications > .section:last-child,
  body[data-view="favorites"] #viewFavorites .favoritesActions {
    display: none !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesGrid,
  body[data-view="favorites"] #viewFavorites #gridFav {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 24px !important;
  }

  body[data-view="favorites"] #viewFavorites .card {
    border-radius: 24px !important;
    border: 1px solid var(--desktop-modern-line) !important;
    background: var(--desktop-modern-card) !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.055) !important;
    overflow: hidden;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty {
    max-width: 680px;
    margin: 76px auto 0 !important;
    padding: 56px 48px !important;
    border: 1px solid var(--desktop-modern-line) !important;
    border-radius: 32px !important;
    background: var(--desktop-modern-card) !important;
    box-shadow: 0 24px 80px rgba(15,23,42,.08) !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty:before {
    content: "♡";
    display: flex;
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
    font-size: 42px;
    line-height: 1;
  }

  body[data-view="notifications"] #viewNotifications .pillCount {
    width: auto;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 9%, #fff);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  }

  body[data-view="notifications"] #viewNotifications .hist {
    grid-column: 1 / -1;
    border-radius: 18px;
    background: var(--desktop-modern-soft);
  }

  :root {
    --desktop-shell: min(1420px, calc(100vw - 56px));
    --desktop-header-h: 68px;
    --bottomnav-h: 0px;
  }

  html,
  body,
  .view {
    overflow-x: visible !important;
    max-width: none !important;
  }

  body {
    min-height: 100vh;
    padding-top: calc(var(--desktop-header-h) + 52px);
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 5%, transparent) 0, transparent 340px),
      linear-gradient(180deg, #fbfbfc 0%, color-mix(in srgb, var(--bg) 92%, white) 100%) !important;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.42), transparent 60%);
    opacity: .45;
    z-index: -1;
  }

  .top {
    display: none !important;
  }

  .brand,
  .brandText {
    text-align: left !important;
    font-size: 24px !important;
    letter-spacing: -.04em !important;
    justify-self: start;
  }

  .top .searchRow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .top .backBtn,
  .top .catalogTopTitle,
  .top .filterBtnTop {
    display: none !important;
  }

  .bottomNav {
    display: none !important;
  }

  .bottomNav .navPill {
    display: none !important;
  }

  .bottomNav .navBtn {
    flex: 0 0 auto !important;
    min-width: auto;
    height: 42px;
    padding: 0 14px !important;
    flex-direction: row !important;
    gap: 8px !important;
    border-radius: 999px !important;
    color: color-mix(in srgb, var(--text) 78%, var(--muted)) !important;
    background: transparent !important;
    font-size: 14px;
  }

  .bottomNav .navBtn:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent) !important;
    color: var(--text) !important;
  }

  .bottomNav .navBtn.isActive {
    background: var(--text) !important;
    color: var(--bg) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14) !important;
  }

  .bottomNav .navBtn .icon {
    width: 19px !important;
    height: 19px !important;
  }

  .bottomNav .navLabel {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .bottomNav .badgeCount {
    top: -5px !important;
    right: -2px !important;
  }

  main.view,
  .view {
    width: var(--desktop-shell) !important;
    max-width: var(--desktop-shell) !important;
    margin: 0 auto !important;
    padding: 34px 0 80px !important;
  }

  .desktopStoreHeader {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: var(--desktop-shell);
    height: var(--desktop-header-h);
    margin: 0;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 150px 118px minmax(340px, 1fr) auto auto auto;
    gap: 14px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 50px rgba(15,23,42,.055);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
  }

  .desktopStoreHeader.isHydrated {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .desktopLogo {
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -.045em;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .desktopLogo::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 999px;
    vertical-align: -3px;
    background: var(--primary);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, #fff 72%, transparent);
  }

  .desktopLogo.hasImage::before {
    display: none;
  }

  .desktopLogoImg {
    max-width: 138px;
    max-height: 38px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .desktopLogo.hasImage .desktopLogoText {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .desktopCatalogBtn {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 7px;
    background: var(--primary);
    color: var(--accent-fg, #fff);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
    cursor: pointer;
  }

  .desktopCatalogBtn.isOpen {
    filter: saturate(1.05);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 28%, transparent);
  }

  .desktopCatalogIcon {
    font-size: 14px;
    line-height: 1;
  }

  .desktopCatalogMenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 168px;
    z-index: 1250;
    width: min(680px, calc(100vw - 80px));
    max-height: min(620px, calc(100vh - var(--desktop-header-h) - 58px));
    overflow: auto;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 28px 86px rgba(15,23,42,.16);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .desktopCatalogMenu.hidden {
    display: none !important;
  }

  .desktopCatalogMenuHead {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }

  .desktopCatalogAll {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: var(--accent-fg, #fff);
    font-weight: 900;
    cursor: pointer;
  }

  .desktopCatalogStock {
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
  }

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

  .desktopCatalogNode {
    min-width: 0;
  }

  .desktopCatalogChildren {
    margin-left: calc(14px + var(--cat-depth) * 8px);
    padding-left: 11px;
    border-left: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  }

  .desktopCatalogLink {
    min-height: 38px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: calc(760 - min(var(--cat-depth), 3) * 70);
  }

  .desktopCatalogLink:hover {
    background: color-mix(in srgb, var(--primary) 7%, #fff);
    color: var(--text);
  }

  .desktopCatalogLink span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktopCatalogLink small {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .desktopCatalogEmpty {
    padding: 24px;
    text-align: center;
    color: var(--muted);
  }

  .desktopSearchBox {
    height: 42px;
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 8px;
    background: #f7f8fa;
    overflow: hidden;
  }

  .desktopSearchBox input {
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 14px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
  }

  .desktopSearchIcon {
    color: var(--muted);
    font-size: 17px;
    text-align: center;
  }

  .desktopSearchPanel {
    position: absolute;
    top: calc(100% + 10px);
    left: 282px;
    right: 92px;
    z-index: 1260;
    max-height: min(680px, calc(100vh - var(--desktop-header-h) - 58px));
    overflow: auto;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 30px 90px rgba(15,23,42,.18);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .desktopSearchPanel.hidden {
    display: none !important;
  }

  .desktopSearchSuggests {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    overflow-x: auto;
  }

  .desktopSearchLens {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text);
    font-size: 28px;
    font-weight: 800;
  }

  .desktopSearchPill,
  .desktopSearchChip {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 7%, #f6f7f9);
    color: var(--text);
    font-size: 14px;
    font-weight: 760;
    cursor: pointer;
    white-space: nowrap;
  }

  .desktopSearchPill::first-letter {
    color: var(--primary);
  }

  .desktopSearchResultsBox {
    padding: 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--text) 4%, #fff);
  }

  .desktopSearchSectionTitle {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 18px;
    font-weight: 950;
  }

  .desktopSearchProducts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .desktopSearchProduct {
    appearance: none;
    min-width: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
    cursor: pointer;
  }

  .desktopSearchProduct:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(15,23,42,.12);
  }

  .desktopSearchProductImg {
    display: block;
    aspect-ratio: 3 / 4;
    background: color-mix(in srgb, var(--text) 5%, #fff);
  }

  .desktopSearchProductImg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .desktopSearchProductBody {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
  }

  .desktopSearchProductBody b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.22;
  }

  .desktopSearchProductBody small {
    color: var(--muted);
    font-weight: 760;
  }

  .desktopSearchProductBody strong {
    margin-top: auto;
    color: var(--text);
    font-size: 18px;
    font-weight: 950;
  }

  .desktopSearchAll {
    width: 100%;
    min-height: 58px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 16px;
    background: #fff;
    color: var(--primary);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
  }

  .desktopSearchAll b {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-fg, #fff);
    font-size: 14px;
  }

  .desktopSearchCategories {
    margin-top: 18px;
  }

  .desktopSearchChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .desktopSearchEmpty,
  .desktopSearchIdle {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--text) 4%, #fff);
    color: var(--muted);
    font-size: 15px;
  }

  .desktopSearchIdle b,
  .desktopSearchIdle span {
    display: block;
  }

  .desktopSearchIdle b {
    color: var(--text);
    font-size: 18px;
  }

  .desktopNavAction {
    height: 42px;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text) 76%, var(--muted));
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    white-space: nowrap;
  }

  .desktopIconAction {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    position: relative;
  }

  .desktopIconAction svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .desktopNavAction:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }

  .desktopCartAction {
    position: relative;
  }

  .desktopCartBadge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-fg, #fff);
    font-size: 10px;
    font-weight: 900;
  }

  .desktopCartBadge.hidden {
    display: none;
  }

  #viewCatalog {
    width: min(1480px, calc(100vw - 64px)) !important;
    max-width: min(1480px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    padding: 14px 0 64px !important;
  }

  body[data-view="catalog"] main.view,
  body[data-view="catalog"] .view {
    width: 100% !important;
    max-width: 100% !important;
  }

  .siteHeaderBanner,
  html[data-theme-preset] .siteHeaderBanner {
    padding: 0 !important;
    margin: 0 0 26px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .07) !important;
    background: #fff !important;
  }

  .siteHeaderBannerFrame {
    height: clamp(260px, 31vw, 460px) !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--primary) 4%, #fff));
  }

  .siteHeaderBannerImg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
  }

  #viewCart,
  #viewOrders,
  #viewFavorites,
  #viewNotifications,
  #viewAiAdmin {
    max-width: 1040px;
    margin: 0 auto;
  }

  body[data-view="cart"] #viewCart,
  body[data-view="favorites"] #viewFavorites {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    padding-top: 18px !important;
    gap: 18px !important;
  }

  body[data-view="cart"] .plainHeader,
  body[data-view="favorites"] .plainHeader {
    display: none !important;
  }

  #viewCart .cartHero,
  #viewFavorites .favoritesHero {
    padding: 22px 26px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 16px 48px rgba(15,23,42,.055) !important;
  }

  #viewCart .cartHero .h1,
  #viewFavorites .favoritesHero .h1 {
    font-size: 28px !important;
    margin: 0 !important;
  }

  #viewCart .cartDesktopShell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
  }

  #viewCart .cartDesktopItems {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  #viewCart .cartItemSection {
    padding: 18px 20px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.045) !important;
  }

  #viewCart .cItem {
    align-items: center;
    gap: 18px;
  }

  #viewCart .cImgWrap {
    width: 96px;
    height: 120px;
  }

  #viewCart .cImg {
    border-radius: 14px;
    border: 0;
  }

  #viewCart .cMain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: center;
  }

  #viewCart .cTitle {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
  }

  #viewCart .cSub {
    grid-column: 1;
    color: var(--muted);
    font-weight: 750;
  }

  #viewCart .cRow {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  #viewCart .cPrice {
    min-width: 100px;
    align-items: flex-end;
    font-size: 18px;
  }

  #viewCart .cartDesktopSummary {
    position: sticky;
    top: calc(var(--desktop-header-h) + 34px);
    padding: 24px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 22px 70px rgba(15,23,42,.10) !important;
  }

  #viewCart .promoBlock {
    padding: 0 !important;
    margin-bottom: 20px;
  }

  #viewCart .promoTrigger {
    color: var(--primary) !important;
    text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  }

  #viewCart .cartTotalNow {
    font-size: 30px;
    letter-spacing: -.04em;
  }

  #viewCart #btnCheckout {
    min-height: 52px;
    border-radius: 16px !important;
    font-size: 16px;
    font-weight: 950;
  }

  #viewCart #backCat,
  #viewCart #goOrders {
    min-height: 46px;
    border-radius: 14px !important;
  }

  #viewFavorites .favoritesGrid,
  #viewFavorites #gridFav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  #viewFavorites .favoritesActions {
    display: none !important;
  }

  #viewFavorites .favoritesEmpty {
    max-width: 560px;
    margin: 80px auto 0 !important;
    padding: 44px 38px !important;
    text-align: center;
    border-radius: 24px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 22px 70px rgba(15,23,42,.08) !important;
  }

  #viewFavorites .favoritesEmpty .h1 {
    font-size: 30px;
  }

  #viewFavorites .favoritesEmpty .p {
    max-width: 420px;
    margin: 8px auto 20px;
    font-size: 15px;
  }

  #accountBackdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #accountOverlay.accountSheet {
    left: auto !important;
    right: max(28px, calc((100vw - var(--desktop-shell)) / 2)) !important;
    top: calc(var(--desktop-header-h) + 26px) !important;
    bottom: auto !important;
    width: 360px !important;
    max-width: calc(100vw - 56px) !important;
    max-height: min(720px, calc(100vh - var(--desktop-header-h) - 48px)) !important;
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    background-image: none !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.16) !important;
    transform: translateY(-8px) scale(.98) !important;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  #accountOverlay.accountSheet.active {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
  }

  #accountOverlay .sheetHandle,
  #accountOverlay .sheetPatternOverlay {
    display: none !important;
  }

  #accountOverlay .searchHeader {
    padding: 0 0 12px !important;
  }

  #accountOverlay .accSheetTitle {
    font-size: 22px !important;
    letter-spacing: -.03em;
  }

  #accountOverlay .sheetCloseButton {
    top: 0 !important;
    right: 0 !important;
  }

  #accountOverlay .accountSheetResults {
    padding: 8px 0 0 !important;
    overflow: auto !important;
  }

  #accountOverlay .searchResultItem {
    border-radius: 14px !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
  }

  #accountOverlay .searchResultItem:hover {
    background: color-mix(in srgb, var(--primary) 7%, #fff) !important;
    border-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  }

  .catalogLeadHeader {
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .categoryMenu,
  html[data-theme-preset="market_classic"] .categoryMenu {
    margin: 0 0 28px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .categoryMenuRail {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px !important;
    overflow: visible !important;
  }

  .categoryMenuCard {
    min-width: 0 !important;
  }

  .promoCarousel {
    max-height: 360px;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .07) !important;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  }

  .promoSlide {
    min-height: 330px !important;
  }

  .desktopBenefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 34px;
  }

  .desktopBenefit {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 10px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 24px rgba(15,23,42,.035);
  }

  .desktopBenefitIcon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, white);
    color: var(--primary);
  }

  .desktopBenefit span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .desktopBenefit b {
    font-size: 13px;
    font-weight: 850;
    color: var(--text);
  }

  .desktopBenefit small {
    color: var(--muted);
    font-size: 12px;
  }

  .activeFiltersBar {
    max-width: 100%;
    margin: 0 0 20px !important;
    border-radius: 18px !important;
  }

  .grid,
  html[data-theme-preset="market_classic"] .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 28px 24px !important;
    align-items: start;
  }

  .pCard,
  html[data-theme-preset="market_classic"] .pCard {
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045) !important;
    background: #fff !important;
  }

  .pMedia,
  html[data-theme-preset="market_classic"] .pMedia {
    aspect-ratio: 3 / 4.1 !important;
  }

  @media (min-width: 1640px) {
    #viewCatalog {
      width: min(1640px, calc(100vw - 72px)) !important;
      max-width: min(1640px, calc(100vw - 72px)) !important;
    }

    .grid,
    html[data-theme-preset="market_classic"] .grid {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 1180px) {
    .grid,
    html[data-theme-preset="market_classic"] .grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

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

  .pCard:hover,
  html[data-theme-preset="market_classic"] .pCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .10) !important;
  }

  .pBody {
    padding: 14px 14px 16px !important;
  }

  .pTitle {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .pPrice {
    font-size: 16px !important;
  }

  .favBtn {
    opacity: .92;
  }

  .section {
    border-radius: 12px !important;
    padding: 22px !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .05) !important;
  }

  .plainHeader {
    border-radius: 26px !important;
    margin-bottom: 22px !important;
  }

  body[data-view="product"] main.view,
  body[data-view="product"] .view {
    width: min(1280px, calc(100vw - 64px)) !important;
    max-width: min(1280px, calc(100vw - 64px)) !important;
  }

  #viewProduct .page {
    display: block;
  }

  #viewProduct .pTopBar {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #viewProduct .desktopProductMain {
    display: grid;
    grid-template-columns: minmax(420px, .86fr) minmax(430px, 1fr);
    grid-template-areas:
      "gallery info"
      "gallery desc"
      "gallery specs"
      "gallery variant";
    gap: 22px 34px;
    align-items: start;
    margin-top: 22px;
    margin-bottom: 28px;
  }

  #viewProduct #galleryBox {
    grid-area: gallery;
    position: sticky;
    top: calc(var(--desktop-header-h) + 34px);
    min-width: 0;
  }

  #viewProduct .desktopProductInfo {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px 28px;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 14px;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .055);
  }

  #viewProduct .gallery {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #viewProduct .gWrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 72%, #fff);
    scroll-behavior: smooth;
  }

  #viewProduct .gWrap::-webkit-scrollbar {
    display: none;
  }

  #viewProduct .gImg {
    height: min(760px, calc(100vh - var(--desktop-header-h) - 112px));
    min-height: 520px;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: color-mix(in srgb, var(--bg) 70%, #fff) !important;
  }

  #viewProduct .dots {
    display: none !important;
  }

  #viewProduct .galleryThumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 2px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #viewProduct .galleryThumbs::-webkit-scrollbar {
    display: none;
  }

  #viewProduct .galleryThumb {
    width: 74px;
    height: 92px;
    flex: 0 0 74px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 78%, #fff);
    overflow: hidden;
    cursor: pointer;
    opacity: .72;
    scroll-snap-align: start;
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  #viewProduct .galleryThumb:hover,
  #viewProduct .galleryThumb.isActive {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px var(--primary);
  }

  #viewProduct .galleryThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  #viewProduct .gallery .gNav {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    #viewProduct .gallery .gNav:not(.hidden) {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    #viewProduct .gallery:hover .gNav:not(.hidden),
    #viewProduct .gallery:focus-within .gNav:not(.hidden) {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }

  #viewProduct #descSection {
    grid-area: desc;
  }

  #viewProduct #specsSection {
    grid-area: specs;
  }

  #viewProduct #relatedSection {
    margin-top: 0;
  }

  #viewProduct #feedbackBox {
    max-width: 760px;
    margin-top: 28px;
    padding: 22px 24px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, .055) !important;
  }

  #viewProduct #feedbackBox .segTabs {
    width: 100%;
    max-width: 420px;
    margin: 0 0 18px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--bg) 78%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent) !important;
  }

  #viewProduct #feedbackBox .segBtn {
    min-height: 40px;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #viewProduct #feedbackBox .segBtn.segOn,
  #viewProduct #feedbackBox .segBtn.isActive {
    background: #fff !important;
    color: var(--text) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
  }

  #viewProduct #reviewsBox .p,
  #viewProduct #questionsBox .p {
    color: var(--muted);
    font-size: 14px;
  }

  #viewProduct #variantDescBox:empty {
    display: none !important;
  }

  #viewProduct #variantDescBox:not(:empty) {
    grid-area: variant;
  }

  #viewProduct .section {
    margin-bottom: 18px;
    overflow: visible !important;
  }

  #viewProduct #descSection,
  #viewProduct #specsSection {
    margin-bottom: 0;
  }

  #viewProduct .desktopProductInfo > .section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #viewProduct .desktopProductInfo > .section + .section {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  }

  #viewProduct .section .h1 {
    font-size: 22px;
    line-height: 1.12;
  }

  #viewProduct .priceBlock {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
  }

  #viewProduct .nowPrice {
    font-size: 30px;
    font-weight: 950;
  }

  #viewProduct .oldPrice {
    font-size: 17px;
  }

  #viewProduct .swatches,
  #viewProduct .sizes {
    flex-wrap: wrap;
    overflow: visible;
  }

  #viewProduct .buyBarInline {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #viewProduct .buyBarInline .ibPriceMain {
    display: none;
  }

  #viewProduct .buyBarInline .ibPriceSub {
    font-size: 13px;
    color: var(--muted);
  }

  #viewProduct .ibBtn {
    min-width: 180px;
  }

  #viewProduct .specList {
    gap: 0;
  }

  #viewProduct .specRow {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }

  #viewProduct .specRow:last-child {
    border-bottom: 0;
  }

  #viewProduct .specV {
    max-width: 58%;
    overflow-wrap: anywhere;
  }

  #viewProduct .relatedGrid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px 14px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #viewProduct .relatedGrid::-webkit-scrollbar {
    display: none;
  }

  #viewProduct .relatedGrid .pCard {
    flex: 0 0 230px !important;
    min-width: 230px !important;
    scroll-snap-align: start;
  }

  #viewProduct .relatedGrid .pImg {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  #checkoutModal .checkoutPage,
  #checkoutModal .checkoutPanel,
  #checkoutModal .checkoutContent {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1280px) {
  .grid,
  html[data-theme-preset="market_classic"] .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Desktop account pages: separate modern storefront layer.
   This intentionally affects only wide browser storefronts, not Telegram/mobile. */
@media (min-width: 1024px) {
  body[data-view="orders"],
  body[data-view="favorites"],
  body[data-view="notifications"] {
    --desktop-page-bg: #f6f7fb;
    --desktop-page-card: rgba(255,255,255,.96);
    --desktop-page-line: rgba(15,23,42,.08);
    --desktop-page-shadow: 0 20px 64px rgba(15,23,42,.07);
    background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 32%),
      linear-gradient(180deg, #fff 0%, var(--desktop-page-bg) 38%, #fff 100%) !important;
  }

  body[data-view="orders"] .plainHeader,
  body[data-view="favorites"] .plainHeader,
  body[data-view="notifications"] .plainHeader {
    display: none !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="notifications"] #viewNotifications {
    width: min(1280px, calc(100vw - 96px)) !important;
    max-width: min(1280px, calc(100vw - 96px)) !important;
    margin: 0 auto !important;
    padding: calc(var(--desktop-header-h, 78px) + 32px) 0 88px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child,
  body[data-view="notifications"] #viewNotifications > .section:first-child,
  body[data-view="favorites"] #viewFavorites > .favoritesHero {
    padding: 30px 34px !important;
    border: 1px solid var(--desktop-page-line) !important;
    border-radius: 30px !important;
    background: linear-gradient(135deg, var(--desktop-page-card), color-mix(in srgb, var(--primary) 5%, #fff)) !important;
    box-shadow: var(--desktop-page-shadow) !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1,
  body[data-view="notifications"] #viewNotifications > .section:first-child .h1,
  body[data-view="favorites"] #viewFavorites .favoritesHero .h1 {
    margin: 0 !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }

  body[data-view="orders"] #viewOrders > .section:first-child .h1:after {
    content: "История покупок, статусы и состав заказов";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="notifications"] #viewNotifications > .section:first-child .h1:after {
    content: "Важные изменения по заказам и сообщения магазина";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="favorites"] #viewFavorites .favoritesHero .h1:after {
    content: "Товары, которые хочется не потерять";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid],
  body[data-view="notifications"] #viewNotifications .orderNotif {
    position: relative !important;
    min-height: 152px !important;
    padding: 24px 28px !important;
    border: 1px solid var(--desktop-page-line) !important;
    border-radius: 26px !important;
    background: var(--desktop-page-card) !important;
    box-shadow: 0 16px 48px rgba(15,23,42,.055) !important;
    overflow: hidden !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid]:hover,
  body[data-view="notifications"] #viewNotifications .orderNotif:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--desktop-page-line)) !important;
    box-shadow: 0 26px 72px rgba(15,23,42,.10) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] > div:first-child,
  body[data-view="notifications"] #viewNotifications .orderNotif > div:first-child {
    align-items: flex-start !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .h1,
  body[data-view="notifications"] #viewNotifications .orderNotif .h1 {
    font-size: 22px !important;
    letter-spacing: -.025em !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .smallMuted,
  body[data-view="notifications"] #viewNotifications .orderNotif .smallMuted {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumbRow,
  body[data-view="notifications"] #viewNotifications .orderNotif .thumbRow {
    gap: 10px !important;
    margin-top: 16px !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .thumb,
  body[data-view="notifications"] #viewNotifications .orderNotif .thumb {
    width: 70px !important;
    height: 88px !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.09) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .statusPillFixed,
  body[data-view="notifications"] #viewNotifications .orderNotif .statusPillFixed {
    min-width: 0 !important;
    border-radius: 999px !important;
    padding: 8px 13px !important;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  }

  body[data-view="orders"] #viewOrders > .section[data-oid] .p:last-child {
    position: absolute !important;
    right: 28px !important;
    bottom: 22px !important;
    color: var(--primary) !important;
    font-weight: 900 !important;
  }

  body[data-view="orders"] #viewOrders > .section:last-child,
  body[data-view="notifications"] #viewNotifications > .section:last-child,
  body[data-view="favorites"] #viewFavorites .favoritesActions {
    display: none !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesGrid,
  body[data-view="favorites"] #viewFavorites #gridFav {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 24px !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty {
    max-width: 680px !important;
    margin: 76px auto 0 !important;
    padding: 56px 48px !important;
    text-align: center !important;
    border: 1px solid var(--desktop-page-line) !important;
    border-radius: 32px !important;
    background: var(--desktop-page-card) !important;
    box-shadow: 0 24px 80px rgba(15,23,42,.08) !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty:before {
    content: "♡";
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
    font-size: 44px;
    line-height: 1;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty .h1 {
    font-size: 32px !important;
  }

  body[data-view="favorites"] #viewFavorites .favoritesEmpty .p {
    max-width: 430px;
    margin: 10px auto 22px !important;
    font-size: 15px !important;
  }
}

/* Desktop storefront clean v2 — final cascade layer.
   The desktop storefront should feel like a separate light ecommerce site,
   not like a stretched Telegram mini app. */
@media (min-width: 1024px) {
  body {
    --desktop-shell: min(1440px, calc(100vw - 72px));
    --desktop-header-h: 70px;
    background:
      radial-gradient(circle at 18% -10%, rgba(15, 23, 42, .035), transparent 360px),
      linear-gradient(180deg, #fafafa 0%, #f6f7f9 48%, #fff 100%) !important;
    color: #101318 !important;
  }

  body::after {
    display: none !important;
  }

  .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    height: var(--desktop-header-h) !important;
    padding: 0 22px !important;
    grid-template-columns: 156px 120px minmax(360px, 1fr) 48px 48px 48px !important;
    gap: 16px !important;
    border: 1px solid rgba(15, 23, 42, .065) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .08) !important;
  }

  .desktopLogo {
    height: 46px !important;
    padding: 0 !important;
  }

  .desktopLogoImg {
    max-width: 152px !important;
    max-height: 42px !important;
  }

  .desktopCatalogBtn {
    height: 46px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--primary) 18%, #fff) !important;
    color: color-mix(in srgb, var(--primary) 72%, #111827) !important;
    box-shadow: none !important;
    font-weight: 850 !important;
  }

  .desktopCatalogBtn:hover,
  .desktopCatalogBtn.isOpen {
    background: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 23%, transparent) !important;
  }

  .desktopSearchBox {
    height: 46px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, .07) !important;
    background: rgba(248, 250, 252, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  }

  .desktopSearchBox:focus-within {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--primary) 32%, rgba(15, 23, 42, .08)) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
  }

  .desktopIconAction {
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #151a24 !important;
    box-shadow: none !important;
  }

  .desktopIconAction:hover {
    background: rgba(15, 23, 42, .055) !important;
  }

  main.view,
  .view {
    padding-top: 30px !important;
  }

  #viewCatalog {
    width: var(--desktop-shell) !important;
    max-width: var(--desktop-shell) !important;
  }

  .desktopBenefits {
    margin: 6px 0 34px !important;
    gap: 16px !important;
  }

  .desktopBenefit {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .045) !important;
  }

  .desktopBenefitIcon {
    width: 42px !important;
    height: 42px !important;
    background: color-mix(in srgb, var(--primary) 8%, #fff) !important;
    color: var(--primary) !important;
  }

  .desktopBenefit b {
    font-size: 14px !important;
    letter-spacing: -.015em !important;
  }

  .desktopBenefit small {
    font-size: 12.5px !important;
  }

  .grid,
  html[data-theme-preset="market_classic"] .grid {
    gap: 32px 26px !important;
  }

  .card,
  html[data-theme-preset="market_classic"] .card {
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, .06) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  .card:hover,
  html[data-theme-preset="market_classic"] .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(15, 23, 42, .11) !important;
  }

  .card .pic,
  .productImg {
    border-radius: 0 !important;
    background: #f1f2f4 !important;
  }

  .card .body {
    padding: 15px 16px 18px !important;
  }

  .card .title,
  .productTitle {
    font-weight: 850 !important;
    letter-spacing: -.018em !important;
  }

  .price,
  .productPrice {
    color: #111827 !important;
    font-weight: 900 !important;
  }

  .oldPrice {
    color: #9ca3af !important;
  }

  .discountBadge,
  .stockBadge,
  .badgeSale {
    border-radius: 999px !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
  }

  .desktopCatalogMenu,
  .desktopSearchPanel {
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .14) !important;
  }

  .desktopSearchProduct,
  .desktopCatalogLink {
    border-radius: 18px !important;
  }
}

/* FINAL ABSOLUTE: desktop account/ecommerce workspace v3. */
@media (min-width: 1024px) {
  #accountBackdrop { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #accountOverlay.accountSheet { left: auto !important; right: max(36px, calc((100vw - var(--desktop-shell, 1440px)) / 2)) !important; top: calc(var(--desktop-header-h, 70px) + 28px) !important; bottom: auto !important; width: 430px !important; max-width: calc(100vw - 72px) !important; max-height: min(760px, calc(100vh - var(--desktop-header-h, 70px) - 58px)) !important; padding: 18px !important; border: 0 !important; border-radius: 30px !important; background: rgba(255,255,255,.94) !important; background-image: none !important; box-shadow: 0 32px 90px rgba(15,23,42,.16) !important; transform: translateY(-10px) scale(.98) !important; opacity: 0; transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important; }
  #accountOverlay.accountSheet.active { transform: translateY(0) scale(1) !important; opacity: 1; }
  #accountOverlay .sheetHandle, #accountOverlay .sheetPatternOverlay { display: none !important; }
  #accountOverlay .searchHeader { padding: 2px 2px 14px !important; border-bottom: 0 !important; }
  #accountOverlay .accSheetTitle { font-size: 24px !important; line-height: 1.05 !important; letter-spacing: -.04em !important; }
  #accountOverlay .sheetCloseButton { top: 0 !important; right: 0 !important; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 14px !important; background: rgba(15,23,42,.055) !important; box-shadow: none !important; }
  #accountOverlay .accountSheetResults { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 0 !important; overflow: auto !important; }
  #accountOverlay .accountProfileCard, #accountOverlay .webTelegramLoginPanel { margin: 0 0 8px !important; padding: 16px !important; border: 0 !important; border-radius: 24px !important; background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%), #f7f8fa !important; box-shadow: inset 0 0 0 1px rgba(15,23,42,.045) !important; }
  #accountOverlay .accountProfileAvatar { width: 54px !important; height: 54px !important; border-radius: 18px !important; }
  #accountOverlay .accountProfileName { font-size: 17px !important; font-weight: 900 !important; letter-spacing: -.02em !important; }
  #accountOverlay .accountProfileMeta, #accountOverlay .srPrice { color: #8a93a3 !important; opacity: 1 !important; }
  #accountOverlay .accountProfileLogout { width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; color: #111827 !important; box-shadow: 0 10px 24px rgba(15,23,42,.08) !important; }
  #accountOverlay .accountProfileLogout span { display: none !important; }
  #accountOverlay .searchResultItem { min-height: 74px !important; margin: 0 !important; padding: 12px 14px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; border: 0 !important; border-radius: 22px !important; background: transparent !important; box-shadow: none !important; transition: background .16s ease, transform .16s ease !important; }
  #accountOverlay .searchResultItem:hover { transform: translateX(2px); background: rgba(15,23,42,.045) !important; }
  #accountOverlay .srImg { width: 48px !important; height: 48px !important; border-radius: 18px !important; background: #f2f4f7 !important; color: #151a24 !important; }
  #accountOverlay .srTitle { font-size: 15px !important; font-weight: 900 !important; letter-spacing: -.015em !important; color: #111827 !important; }
  #accountOverlay .srPrice { margin-top: 2px !important; font-size: 12.5px !important; font-weight: 650 !important; }
  #accountOverlay .searchResultItem::after { content: "→"; color: #a3adbb; font-size: 18px; font-weight: 800; }
  #accountOverlay .badgeCount { position: static !important; justify-self: end !important; }
  .promoWalletBackdrop { align-items: center !important; background: rgba(15,23,42,.18) !important; }
  .promoWalletSheet { width: min(760px, calc(100vw - 96px)) !important; height: auto !important; max-height: min(760px, calc(100vh - 96px)) !important; padding: 24px !important; border: 0 !important; border-radius: 32px !important; background: rgba(255,255,255,.96) !important; background-image: none !important; box-shadow: 0 34px 96px rgba(15,23,42,.18) !important; }
  .promoWalletSheet .sheetHandle { display: none !important; }
  .promoWalletHead { padding: 0 0 18px !important; margin: 0 0 18px !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; }
  .promoWalletHead .LuxeTitle { font-size: 28px !important; letter-spacing: -.045em !important; }
  .promoWalletList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; padding: 0 2px 2px !important; }
  .promoWalletCard { border: 0 !important; border-radius: 24px !important; background: #f7f8fa !important; box-shadow: inset 0 0 0 1px rgba(15,23,42,.045) !important; }
  .promoWalletCard::before { display: none !important; }
  body[data-view="orders"] #viewOrders, body[data-view="notifications"] #viewNotifications, body[data-view="favorites"] #viewFavorites { width: min(1180px, calc(100vw - 112px)) !important; max-width: min(1180px, calc(100vw - 112px)) !important; padding-top: calc(var(--desktop-header-h, 70px) + 34px) !important; }
  body[data-view="orders"] #viewOrders > .section:first-child, body[data-view="notifications"] #viewNotifications > .section:first-child, body[data-view="favorites"] #viewFavorites > .favoritesHero { padding: 0 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body[data-view="orders"] #viewOrders > .section:first-child .h1, body[data-view="notifications"] #viewNotifications > .section:first-child .h1, body[data-view="favorites"] #viewFavorites .favoritesHero .h1 { font-size: 38px !important; letter-spacing: -.055em !important; }
  body[data-view="orders"] #viewOrders > .section[data-oid] { min-height: 132px !important; padding: 22px 24px !important; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr) 110px !important; align-items: center !important; gap: 18px !important; border: 0 !important; border-radius: 28px !important; background: rgba(255,255,255,.82) !important; box-shadow: 0 18px 56px rgba(15,23,42,.065) !important; }
  body[data-view="orders"] #viewOrders > .section[data-oid] > div:first-child { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  body[data-view="orders"] #viewOrders > .section[data-oid] .thumbRow { grid-column: auto !important; grid-row: 1 !important; margin: 0 !important; justify-self: center !important; }
  body[data-view="orders"] #viewOrders > .section[data-oid] .thumb { width: 54px !important; height: 68px !important; border-radius: 14px !important; }
  body[data-view="orders"] #viewOrders > .section[data-oid] .p:last-child { position: static !important; justify-self: end !important; color: #111827 !important; padding: 10px 15px !important; border-radius: 999px !important; background: rgba(15,23,42,.055) !important; }
  body[data-view="orders"] .orderSummaryCard, body[data-view="orders"] .orderItemCard, body[data-view="notifications"] #viewNotifications .orderNotif, body[data-view="notifications"] #viewNotifications > .section:not(:first-child):not(:last-child) { border: 0 !important; border-radius: 28px !important; background: rgba(255,255,255,.84) !important; box-shadow: 0 18px 56px rgba(15,23,42,.065) !important; }
  body[data-view="orders"] .orderItemCard { padding: 18px !important; }
  body[data-view="orders"] .orderItemRow { grid-template-columns: 82px minmax(0, 1fr) auto !important; }
  body[data-view="orders"] .orderThumb { width: 82px !important; height: 104px !important; border-radius: 18px !important; border: 0 !important; }
  body[data-view="favorites"] #viewFavorites .favoritesEmpty { margin-top: 46px !important; border: 0 !important; border-radius: 34px !important; background: rgba(255,255,255,.84) !important; box-shadow: 0 26px 80px rgba(15,23,42,.08) !important; }
}

/* FINAL ABSOLUTE: desktop floating account menu tiles v1. */
@media (min-width: 1024px) {
  #accountOverlay.accountSheet {
    width: 462px !important;
    max-width: calc(100vw - 72px) !important;
    right: max(36px, calc((100vw - var(--desktop-shell, 1440px)) / 2)) !important;
    top: calc(var(--desktop-header-h, 70px) + 28px) !important;
    bottom: auto !important;
    padding: 20px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.96) !important;
    background-image: none !important;
    box-shadow: 0 32px 90px rgba(15,23,42,.16) !important;
  }

  #accountOverlay .accountSheetResults {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow: auto !important;
  }

  #accountOverlay .webTelegramLoginPanel,
  #accountOverlay .accountProfileCard,
  #accountOverlay .accountLegalLinkWrap,
  #accountOverlay #recentlyViewedContainer {
    grid-column: 1 / -1 !important;
  }

  #accountOverlay .searchResultItem {
    position: relative !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #f6f7f9 !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.045) !important;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
  }

  #accountOverlay .searchResultItem:hover {
    transform: translateY(-2px) !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.10) !important;
  }

  #accountOverlay .searchResultItem::after {
    content: "→" !important;
    position: absolute !important;
    right: 16px !important;
    top: 18px !important;
    color: #a3adbb !important;
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  #accountOverlay .srImg {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
    flex: 0 0 auto !important;
  }

  #accountOverlay .srBody {
    width: 100% !important;
  }

  #accountOverlay .srTitle {
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #111827 !important;
    letter-spacing: -.02em !important;
  }

  #accountOverlay .srPrice {
    margin-top: 5px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    color: #8a93a3 !important;
    opacity: 1 !important;
  }

  #accountOverlay .badgeCount {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    justify-self: auto !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites {
    width: var(--page-max, 640px) !important;
    max-width: var(--page-max, 640px) !important;
  }
}

/* FINAL ABSOLUTE: desktop account workspace v1. */
@media (min-width: 1024px) {
  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="promos"] #viewPromos {
    width: min(1280px, calc(100vw - 112px)) !important;
    max-width: min(1280px, calc(100vw - 112px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 70px) + 34px) !important;
  }

  .accountDeskShell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .accountDeskAside {
    position: sticky;
    top: calc(var(--desktop-header-h, 70px) + 34px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 28px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 18px 52px rgba(15,23,42,.06);
  }

  .accountDeskAsideTitle {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.04em;
    color: #111827;
  }

  .accountDeskProfile,
  .accountDeskLogin {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 22px;
    background: #f7f8fa;
    color: #111827;
    text-align: left;
  }

  .accountDeskLogin {
    cursor: pointer;
    font: inherit;
  }

  .accountDeskProfile img,
  .accountDeskAvatar,
  .accountDeskProfile .accountAvatarFallback {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    object-fit: cover;
    background: #fff;
  }

  .accountDeskAvatar,
  .accountDeskProfile .accountAvatarFallback {
    display: grid;
    place-items: center;
    font-weight: 900;
  }

  .accountDeskProfile b,
  .accountDeskLogin b {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .accountDeskProfile span,
  .accountDeskLogin span,
  .accountDeskTip span,
  .accountDeskNavItem em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    font-style: normal;
    color: #8a93a3;
  }

  .accountDeskNav {
    display: grid;
    gap: 8px;
  }

  .accountDeskNavItem {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: transparent;
    color: #111827;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }

  .accountDeskNavItem:hover,
  .accountDeskNavItem.active {
    background: #f4f5f7;
    border-color: rgba(15,23,42,.06);
  }

  .accountDeskNavIcon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
    font-size: 18px;
    font-weight: 900;
  }

  .accountDeskNavItem b {
    display: block;
    font-size: 14px;
    font-weight: 900;
  }

  .accountDeskMain {
    min-width: 0;
    display: grid;
    gap: 18px;
  }

  .accountDeskMain > .section,
  .accountPromosPanel {
    margin: 0 !important;
    border: 1px solid rgba(15,23,42,.07) !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 52px rgba(15,23,42,.055) !important;
  }

  .accountDeskMain > .section:first-child,
  .accountDeskMain > .favoritesHero,
  .accountDeskMain > .accountViewHero {
    padding: 22px 24px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #fff, #f8fafc) !important;
  }

  .accountDeskMain .h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    letter-spacing: -.045em !important;
    margin: 0 !important;
  }

  .accountDeskMain .p,
  .accountDeskMain .smallMuted {
    color: #8a93a3 !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid],
  body[data-view="notifications"] .accountDeskMain .orderNotif,
  body[data-view="notifications"] .accountDeskMain > .section:not(:first-child):not(:last-child) {
    min-height: auto !important;
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.045) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] > div:first-child,
  body[data-view="notifications"] .accountDeskMain .orderNotif > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    grid-column: 1 / -1;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumbRow,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumbRow {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumb,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumb {
    width: 58px !important;
    height: 72px !important;
    border-radius: 10px !important;
    border: 0 !important;
    object-fit: cover !important;
  }

  .accountDeskMain .statusPillFixed {
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .p:last-child {
    justify-self: start !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #f4f5f7 !important;
    color: #111827 !important;
    font-weight: 800 !important;
  }

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

  .accountPromosPanel .promoWalletCard {
    border-radius: 24px !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.055) !important;
  }

  .accountPromosPanel .promoWalletCard::before {
    display: none !important;
  }

  .accountDeskMain .favoritesGrid,
  .accountDeskMain #gridFav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .accountDeskMain .card {
    border-radius: 24px !important;
  }

  .accountDeskRecent {
    padding-top: 14px;
    border-top: 1px solid rgba(15,23,42,.07);
  }

  .accountDeskRecentTitle {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    color: #111827;
    letter-spacing: -.02em;
  }

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

  .accountDeskRecentItem {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #f6f7f9;
    color: #111827;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
  }

  .accountDeskRecentItem:hover {
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
  }

  .accountDeskRecentItem img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #eef0f3;
  }

  .accountDeskRecentItem span {
    display: block;
    padding: 8px 9px 10px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .accountDeskRecentEmpty {
    padding: 14px;
    border-radius: 20px;
    background: #f6f7f9;
    color: #8a93a3;
    font-size: 12px;
    line-height: 1.35;
  }
}

/* FINAL LAST-LAYER: TZ storefront/account desktop normalization. */
@media (min-width: 1024px) {
  body {
    --desktop-card-radius: 18px;
    --desktop-control-radius: 12px;
    --desktop-border-soft: rgba(15, 23, 42, .08);
    --desktop-panel: rgba(255, 255, 255, .96);
    --desktop-muted: #8b94a3;
    --desktop-shadow-soft: 0 18px 54px rgba(15, 23, 42, .055);
    --desktop-shadow-hover: 0 22px 68px rgba(15, 23, 42, .09);
    background: linear-gradient(180deg, #fbfbfc 0%, #f7f8fa 54%, #fff 100%) !important;
  }

  .siteHeaderBanner,
  html[data-theme-preset] .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    min-height: 70px !important;
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .075) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .desktopLogo,
  .desktopLogoImageWrap,
  .desktopLogoImage,
  .desktopCatalogButton,
  .desktopSearchWrap,
  .desktopSearchInput,
  .desktopIconBtn,
  .desktopUserBtn,
  .btn,
  .btnPrimary,
  .btnSoft,
  .btnGhost,
  input,
  textarea,
  select,
  .fInput {
    border-radius: var(--desktop-control-radius) !important;
  }

  #accountOverlay.accountSheet {
    width: 560px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16) !important;
  }

  #accountOverlay .accountSheetResults {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #accountOverlay .accountProfileCard,
  #accountOverlay .webTelegramLoginPanel,
  #accountOverlay #recentlyViewedContainer {
    grid-column: 1 / -1 !important;
  }

  #accountOverlay .accountProfileCard,
  #accountOverlay .webTelegramLoginPanel,
  #accountOverlay .searchResultItem {
    border-radius: var(--desktop-card-radius) !important;
  }

  #accountOverlay #recentlyViewedContainer {
    margin-top: 12px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--desktop-border-soft) !important;
  }

  body[data-view="orders"] #viewOrders,
  body[data-view="notifications"] #viewNotifications,
  body[data-view="favorites"] #viewFavorites,
  body[data-view="promos"] #viewPromos,
  body[data-view="cart"] #viewCart {
    width: min(1440px, calc(100vw - 64px)) !important;
    max-width: min(1440px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 72px) + 44px) !important;
  }

  .accountDeskShell {
    grid-template-columns: 292px minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;
  }

  .accountDeskAside {
    top: calc(var(--desktop-header-h, 72px) + 44px) !important;
    padding: 18px !important;
    border: 1px solid var(--desktop-border-soft) !important;
    border-radius: var(--desktop-card-radius) !important;
    background: var(--desktop-panel) !important;
    box-shadow: var(--desktop-shadow-soft) !important;
  }

  .accountDeskProfile,
  .accountDeskLogin,
  .accountDeskRecent,
  .accountDeskRecentEmpty,
  .accountDeskRecentItem,
  .accountDeskNavItem,
  .accountDeskMain > .section,
  .accountPromosPanel,
  .favoritesHero,
  .accountViewHero,
  .cartHero,
  .cartItemSection,
  .cartDesktopSummary,
  .orderSummaryCard,
  .orderItemCard,
  .orderCustomerCard,
  .promoWalletCard {
    border-radius: var(--desktop-card-radius) !important;
  }

  .accountDeskNavItem {
    padding: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .accountDeskNavItem:hover {
    background: #f7f8fa !important;
    border-color: var(--desktop-border-soft) !important;
  }

  .accountDeskNavItem.active {
    border-color: color-mix(in srgb, var(--primary) 14%, transparent) !important;
    background: color-mix(in srgb, var(--primary) 9%, #fff) !important;
  }

  .accountDeskNavIcon {
    border-radius: 14px !important;
    color: #111827 !important;
    background: #fff !important;
  }

  .accountDeskNavItem.active .accountDeskNavIcon {
    color: var(--primary) !important;
  }

  .accountDeskMain > .section,
  .accountPromosPanel,
  .favoritesHero,
  .accountViewHero,
  .cartHero,
  .cartItemSection,
  .cartDesktopSummary,
  .orderSummaryCard,
  .orderItemCard,
  .orderCustomerCard {
    border: 1px solid var(--desktop-border-soft) !important;
    background: var(--desktop-panel) !important;
    box-shadow: var(--desktop-shadow-soft) !important;
  }

  .accountDeskMain > .section:first-child,
  .accountDeskMain > .favoritesHero,
  .accountDeskMain > .accountViewHero,
  .cartHero {
    min-height: auto !important;
    padding: 24px 28px !important;
    background: linear-gradient(135deg, #fff, #f8fafc) !important;
  }

  .accountDeskMain .h1,
  .cartHero .h1,
  #viewCart .h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid],
  body[data-view="notifications"] .accountDeskMain .orderNotif,
  body[data-view="notifications"] .accountDeskMain > .section:not(:first-child):not(:last-child) {
    min-height: 118px !important;
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(120px, .3fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumbRow,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumbRow {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .thumb,
  body[data-view="notifications"] .accountDeskMain .orderNotif .thumb {
    width: 54px !important;
    height: 68px !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  body[data-view="orders"] .accountDeskMain > .section[data-oid] .p:last-child,
  body[data-view="notifications"] .accountDeskMain .orderNotif .p:last-child {
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: #f4f5f7 !important;
    color: #111827 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .accountPromosGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .accountPromosPanel {
    padding: 26px !important;
  }

  .accountPromosPanel .promoWalletCard {
    border: 1px solid var(--desktop-border-soft) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  .accountDeskRecent {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--desktop-border-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .accountDeskRecentList {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .cartDesktopShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .cartDesktopItems {
    display: grid !important;
    gap: 14px !important;
  }

  .cartDesktopSummary {
    position: sticky !important;
    top: calc(var(--desktop-header-h, 72px) + 44px) !important;
    margin: 0 !important;
    padding: 22px !important;
  }
}

/* FINAL TRUE-END: visible desktop storefront redesign v2. */
@media (min-width: 1024px) {
  body {
    --desk-radius: 16px;
    --desk-radius-lg: 22px;
    --desk-line: rgba(15, 23, 42, .075);
    --desk-text: #111827;
    --desk-muted: #8b94a3;
    --desk-soft: #f6f7f9;
    background: #fafafa !important;
  }

  .siteHeaderBanner,
  html[data-theme-preset] .siteHeaderBanner {
    display: none !important;
  }

  .desktopStoreHeader {
    top: 18px !important;
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    height: 72px !important;
    padding: 10px 18px !important;
    gap: 16px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 58px rgba(15, 23, 42, .075) !important;
  }

  .desktopLogo {
    min-width: 150px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
  }

  .desktopLogoImg {
    max-width: 150px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  .desktopCatalogBtn {
    height: 48px !important;
    min-width: 126px !important;
    border: 0 !important;
    border-radius: var(--desk-radius) !important;
    background: color-mix(in srgb, var(--primary) 12%, #fff) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
  }

  .desktopCatalogBtn:hover,
  .desktopCatalogBtn.isOpen {
    background: var(--primary) !important;
    color: #fff !important;
  }

  .desktopSearchBox {
    height: 48px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius) !important;
    background: #f7f8fa !important;
    box-shadow: none !important;
  }

  .desktopSearchBox:focus-within {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--desk-line)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
  }

  .desktopSearchBox input,
  #desktopSearchInput {
    font-size: 15px !important;
    color: var(--desk-text) !important;
  }

  .desktopIconAction,
  .desktopNavAction {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: var(--desk-radius) !important;
    background: transparent !important;
    color: #111827 !important;
  }

  .desktopIconAction:hover,
  .desktopNavAction:hover {
    background: var(--desk-soft) !important;
  }

  .desktopBenefits {
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    margin: 22px auto 26px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .desktopBenefit {
    min-height: 78px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
  }

  .desktopBenefitIcon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    color: var(--primary) !important;
  }

  #viewCatalog {
    width: min(1500px, calc(100vw - 52px)) !important;
    max-width: min(1500px, calc(100vw - 52px)) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--desktop-header-h, 72px) + 36px) !important;
  }

  #viewCatalog > .grid,
  #grid.grid,
  html[data-theme-preset] #grid.grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .pCard {
    border: 1px solid var(--desk-line) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055) !important;
    overflow: hidden !important;
  }

  .pCard:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--desk-line)) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .11) !important;
  }

  .pMedia {
    border-radius: 0 !important;
    background: #f3f4f6 !important;
  }

  .pMedia::after {
    display: none !important;
  }

  .pImg {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    background: #f3f4f6 !important;
  }

  .pBody {
    padding: 16px 16px 18px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
  }

  .pTitle {
    min-height: 42px !important;
    color: var(--desk-text) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: -.018em !important;
  }

  .nowPrice {
    color: var(--desk-text) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
  }

  .oldPrice {
    color: #9ca3af !important;
    font-size: 14px !important;
  }

  .favBtn {
    top: 12px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .favBtn.favOn {
    background: var(--primary) !important;
    color: #fff !important;
  }

  .discCorner,
  .pSold {
    top: 12px !important;
    left: 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  .pSold {
    background: rgba(17, 24, 39, .82) !important;
    color: #fff !important;
  }

  .desktopCatalogMenu,
  .desktopSearchPanel {
    border: 1px solid var(--desk-line) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1350px) {
  #viewCatalog > .grid,
  #grid.grid,
  html[data-theme-preset] #grid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tilda template wins over the shared desktop redesign above. */
@media (min-width:1024px){html[data-desktop-template="tilda"] .desktopStoreHeader{top:0!important;width:100%!important;height:58px!important;padding:0 48px!important;border:0!important;border-bottom:1px solid #eee!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;grid-template-columns:210px 110px minmax(260px,520px) auto auto auto!important}html[data-desktop-template="tilda"] .desktopLogo:before,html[data-desktop-template="tilda"] .desktopCatalogIcon{display:none!important}html[data-desktop-template="tilda"] .desktopCatalogBtn{border:0!important;background:transparent!important;color:#111!important}html[data-desktop-template="tilda"] .desktopBenefits{display:none!important}html[data-desktop-template="tilda"] .promoCarousel{width:100vw!important;margin-left:calc(50% - 50vw)!important;border:0!important;border-radius:0!important;box-shadow:none!important}html[data-desktop-template="tilda"] .promoSlide{min-height:calc(100vh - 58px)!important}html[data-desktop-template="tilda"] .pCard{border:0!important;border-radius:0!important;box-shadow:none!important}html[data-desktop-template="tilda"] .pMedia{border-radius:0!important}html[data-desktop-template="tilda"] .pBody{padding:14px 0 24px!important}}

/* Full Tilda design system: palette, sharp geometry, flat product and checkout UI. */
@media (min-width:1024px){html[data-desktop-template="tilda"]{--bg:var(--desktop-template-background,#fff)!important;--card:var(--desktop-template-background,#fff)!important;--card2:var(--desktop-template-background,#fff)!important;--text:var(--desktop-template-text,#111)!important;--muted:color-mix(in srgb,var(--desktop-template-text,#111) 58%,var(--desktop-template-background,#fff))!important;--primary:var(--desktop-template-accent,#000)!important;--primary2:var(--desktop-template-accent,#000)!important;--border:var(--desktop-template-line,#d8d8d8)!important}html[data-desktop-template="tilda"] body,html[data-desktop-template="tilda"] .desktopStoreHeader,html[data-desktop-template="tilda"] .desktopCatalogMenu,html[data-desktop-template="tilda"] .desktopSearchPanel{background:var(--desktop-template-background,#fff)!important;color:var(--desktop-template-text,#111)!important}html[data-desktop-template="tilda"] :is(.section,.box,.card,.pCard,.pMedia,.categoryMenu,.categoryMenuCard,.categoryMenuMedia,.promoCarousel,.promoSlide,.btn,.btnPrimary,.btnSoft,.btnGhost,.fInput,.searchBox,.desktopSearchBox,.desktopCatalogMenu,.desktopSearchPanel,.desktopProductInfo,.gallery,.swatch,.sizeBtn,.optionBtn,.qtyBtn,.checkoutChoice,.checkoutSummary,.checkoutPageSection,.checkoutPageCard,.modalContent,.sheet,.accountSheet,.productShareSheet){border-radius:0!important;box-shadow:none!important}html[data-desktop-template="tilda"] :is(button,.btn,.btnPrimary,.btnSoft,.promoBtn,#submitOrder){text-transform:uppercase;letter-spacing:.08em}html[data-desktop-template="tilda"] :is(.btnPrimary,#submitOrder,.promoBtn){background:var(--desktop-template-accent,#000)!important;color:var(--desktop-template-background,#fff)!important;border-color:var(--desktop-template-accent,#000)!important}html[data-desktop-template="tilda"] :is(.fInput,input,textarea,select,.checkoutChoice){border-color:var(--desktop-template-line,#d8d8d8)!important;background:var(--desktop-template-background,#fff)!important;color:var(--desktop-template-text,#111)!important}html[data-desktop-template="tilda"] #viewProduct .desktopProductMain{grid-template-columns:minmax(480px,1.08fr) minmax(380px,.92fr);gap:70px;margin-top:70px!important}html[data-desktop-template="tilda"] #viewProduct .desktopProductInfo{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}html[data-desktop-template="tilda"] #viewProduct .section .h1{font-size:26px!important;font-weight:700!important;letter-spacing:-.025em}html[data-desktop-template="tilda"] #viewProduct .gallery,html[data-desktop-template="tilda"] #viewProduct .gSlide img{border-radius:0!important;background:#f3f1ef!important}html[data-desktop-template="tilda"] #viewProduct .desktopProductInfo>.section+ .section{border-top:1px solid var(--desktop-template-line,#d8d8d8)!important}html[data-desktop-template="tilda"] #checkoutModal.checkoutPageModal{display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:46px 20px!important;background:color-mix(in srgb,var(--desktop-template-text,#111) 82%,transparent)!important}html[data-desktop-template="tilda"] #checkoutModal.checkoutPageModal.hidden{display:none!important}html[data-desktop-template="tilda"] #checkoutModal .checkoutPageCard{width:min(1056px,calc(100vw - 40px))!important;max-width:1056px!important;min-height:0!important;margin:0 auto!important;padding:54px 72px 72px!important;border:0!important;border-radius:0!important;background:var(--desktop-template-background,#fff)!important;box-shadow:none!important}html[data-desktop-template="tilda"] #checkoutModal .checkoutPageHeader{position:static!important;background:transparent!important;border-bottom:1px solid var(--desktop-template-line,#d8d8d8)!important}html[data-desktop-template="tilda"] #checkoutModal .checkoutPageTitle{font-size:34px!important;text-align:left!important}html[data-desktop-template="tilda"] #checkoutModal .checkoutPageSection{padding:22px 0!important;border:0!important;border-bottom:1px solid var(--desktop-template-line,#d8d8d8)!important;background:transparent!important}html[data-desktop-template="tilda"] #checkoutModal :is(.fInput,input,textarea,select){min-height:58px!important;border:1px solid var(--desktop-template-text,#111)!important;border-radius:0!important}html[data-desktop-template="tilda"] #checkoutModal #submitOrder{min-height:64px!important;border-radius:0!important;font-size:16px!important}html[data-desktop-template="tilda"] .productShareSheetOverlay{background:color-mix(in srgb,var(--desktop-template-text,#111) 82%,transparent)!important}html[data-desktop-template="tilda"] .productShareSheet{border-radius:0!important;background:var(--desktop-template-background,#fff)!important}}