/* Customer storefront design system. Admin styles remain in styles.css. */
@font-face {
  font-family: "Kantumruy Pro";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/kantumruy-pro-khmer.woff2") format("woff2");
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}

body.store-body {
  --store-muted: #667085;
  --cream: #eef4fa;
  --store-page-bg: #f2f7fc;
  --wine: #336893;
  --rose: #4f87b2;
  --charcoal: #16333f;
  --sand: #e9eef6;
  --shadow: 0 8px 28px rgb(22 63 84 / 6%);
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --store-primary: #336893;
  --store-primary-dark: #2a5477;
  --store-text: #16333f;
  --store-border: #dde7f0;
  --store-border-strong: #cfdcec;
  background:
    radial-gradient(38% 30% at 10% -2%, rgba(96, 160, 214, 0.22), transparent),
    radial-gradient(32% 26% at 88% 2%, rgba(148, 142, 224, 0.18), transparent),
    linear-gradient(160deg, #f6fafd 0%, #eff5fb 38%, #edeff8 66%, #f1f6fc 100%);
  color: var(--charcoal);
  font-family: "Kantumruy Pro", "Inter", "Noto Sans Khmer", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Soft beauty-glow layers behind the page. Both are fixed-position so they sit
   in place behind every scroll position, and they animate only transform, which
   the GPU composites without repainting the page underneath. */
body.store-body::before,
body.store-body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -18%;
  pointer-events: none;
}

body.store-body::before {
  background:
    radial-gradient(34% 30% at 24% 26%, rgba(88, 152, 210, 0.26), transparent 70%),
    radial-gradient(30% 26% at 74% 30%, rgba(120, 184, 235, 0.24), transparent 70%);
  transform: translate3d(-5%, -3%, 0) scale(1);
  animation: storeGlowDriftA 46s ease-in-out infinite alternate;
}

body.store-body::after {
  z-index: -2;
  background:
    radial-gradient(36% 32% at 60% 82%, rgba(138, 128, 224, 0.2), transparent 72%),
    radial-gradient(26% 24% at 20% 76%, rgba(90, 148, 200, 0.18), transparent 70%);
  animation: storeGlowDriftB 62s ease-in-out infinite alternate;
}

@keyframes storeGlowDriftA {
  0% { transform: translate3d(-5%, -3%, 0) scale(1); }
  50% { transform: translate3d(4%, 5%, 0) scale(1.1); }
  100% { transform: translate3d(6%, -4%, 0) scale(0.96); }
}

@keyframes storeGlowDriftB {
  0% { transform: translate3d(4%, 3%, 0) scale(1); }
  50% { transform: translate3d(-5%, -4%, 0) scale(1.12); }
  100% { transform: translate3d(3%, -3%, 0) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  body.store-body::before,
  body.store-body::after { animation: none; opacity: .6; }
}

body.store-body *, body.store-body *::before, body.store-body *::after { box-sizing: border-box; }
body.store-body button, body.store-body input, body.store-body select, body.store-body textarea { font: inherit; }
body.store-body button, body.store-body a, body.store-body input, body.store-body select, body.store-body textarea { -webkit-tap-highlight-color: transparent; }
body.store-body :focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
body.store-body button { touch-action: manipulation; }
body.store-body button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
body.store-body [hidden], body.store-body .hidden { display: none !important; }
body.store-body .skip-link { position: fixed; top: -100px; left: 20px; z-index: 1000; padding: 12px 20px; background: #fff; color: var(--wine); border-radius: 8px; }
body.store-body .skip-link:focus { top: 12px; }
body.store-body .store-announcement { display: flex; justify-content: space-between; gap: 20px; padding: 9px max(24px, calc((100vw - 1240px) / 2)); background: #e3eefa; color: #285b70; font-size: 11px; letter-spacing: .04em; }
body.store-body .page-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 0 0 30px; }
body.store-body .store-hero { display: block; margin: 0; padding: 22px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.store-body .hero-copy { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; animation: none; }
body.store-body .hero-top-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; }
body.store-body .hero-brand-row { flex: 1 1 auto; gap: 10px; }
body.store-body .hero-brand-card { width: 40px; flex: 0 0 40px; }
body.store-body .hero-brand-image { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; object-fit: contain; }
body.store-body .hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 28px; line-height: 1.3; letter-spacing: -.8px; color: #193a49; }
body.store-body .hero-eyebrow, body.store-body #hero-eyebrow { margin: 0 0 1px; font-size: 8px; letter-spacing: .17em; color: #3c89aa; }
body.store-body .hero-utility-actions { display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 10px; width: auto; }
body.store-body .hero-utility-actions .store-action-btn { width: 40px; height: 40px; min-height: 40px; padding: 9px; background: transparent; border: 1px solid #dde7f0; border-radius: 50%; color: #2b627a; box-shadow: none; }
body.store-body .hero-utility-actions .store-action-btn:hover { background: #e8f0f8; border-color: #b4cfe3; transform: none; }
body.store-body .store-action-icon { width: 19px; height: 19px; }
body.store-body .hero-utility-actions .language-switch { position: static; display: flex; gap: 2px; margin: 0 0 0 8px; padding: 3px; border: 1px solid #dde7f0; border-radius: 24px; background: transparent; transform: none; }
body.store-body .language-chip { min-height: 32px; padding: 5px 9px; border: 0; border-radius: 20px; background: transparent; box-shadow: none; color: #337592; font-size: 10px; }
body.store-body .language-chip.active { background: #e3eefa; color: #1f4758; }
body.store-body .hero-text { display: none; }
body.store-body .hero-utility-stack { display: flex; justify-content: flex-end; margin-top: 10px; }
body.store-body .social-links-section { width: auto; margin: 0; padding: 0; border: 0; background: transparent; }
body.store-body .social-links { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
body.store-body .social-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #d5e2ee; border-radius: 50%; background: #f2f7fc; color: #326f91; box-shadow: none; }
body.store-body .social-link:hover { background: #e6f2fb; border-color: #9dc2dc; transform: translateY(-2px); }
body.store-body .social-link svg { width: 15px; height: 15px; }
body.store-body .eyebrow { font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .18em; color: #357996; }
body.store-body .discovery-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 410px; overflow: hidden; border: 1px solid #d8e5f1; border-radius: 20px; background: #e6eff8; }
body.store-body .discovery-copy { position: relative; z-index: 1; padding: 54px 50px 44px; }
body.store-body .discovery-copy h2 { margin: 19px 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(42px, 5vw, 68px); line-height: 1.06; letter-spacing: -2.5px; color: #1d4353; white-space: pre-line; }
body.store-body .discovery-description { max-width: 355px; margin: 0 0 25px; color: #367b99; font-size: 13px; line-height: 1.85; }
body.store-body .primary-btn { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 11px 20px; border: 1px solid var(--wine); border-radius: 8px; background: var(--wine); color: white; font-weight: 600; font-size: 12px; text-decoration: none; box-shadow: none; transition: background .18s, transform .18s; }
body.store-body .primary-btn:hover:enabled, body.store-body a.primary-btn:hover { background: #2a5477; border-color: #2a5477; box-shadow: none; transform: translateY(-1px); }
body.store-body .secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #cde0ee; border-radius: 8px; background: #fff; color: #245266; font-size: 12px; font-weight: 500; box-shadow: none; }
body.store-body .secondary-btn:hover:enabled { background: #eaf2f9; border-color: #a9c8e2; box-shadow: none; transform: none; }
body.store-body .discovery-cta { background: #235064; border-color: #235064; padding: 12px 22px; }
body.store-body .discovery-cta:hover { background: #193a49 !important; border-color: #193a49 !important; }
body.store-body .discovery-cta > span:last-child { margin-left: 16px; font-size: 18px; font-weight: 400; }
body.store-body .discovery-caption { display: block; margin-top: 16px; font-size: 10px; color: #3f91b5; }
body.store-body .discovery-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at 45% 45%, #f3f8fd 0%, #d5e3f1 70%); }
body.store-body .discovery-orbit { position: absolute; width: 330px; height: 330px; border: 1px solid #bcd4e9; border-radius: 50%; }
body.store-body .discovery-orbit::after { content: ""; position: absolute; inset: -30px; border: 1px solid #cbd8ed; border-radius: 50%; }
body.store-body .discovery-visual-label { position: absolute; top: 30px; left: 30px; font-size: 9px; letter-spacing: .22em; color: #3a86a6; }
body.store-body .discovery-visual-note { position: absolute; right: 28px; bottom: 25px; font-family: Georgia, serif; font-size: 18px; font-style: italic; color: #377f9e; }
body.store-body .discovery-products { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 55px 30px; gap: 12px; }
body.store-body .discovery-product { position: relative; display: block; width: 31%; max-width: 155px; aspect-ratio: .74; padding: 14px 8px 10px; border: 1px solid #ffffffb3; border-radius: 80px 80px 12px 12px; background: #f2f7fce8; box-shadow: 0 15px 28px #285b7010; cursor: pointer; transition: transform .2s; }
body.store-body .discovery-product:nth-child(1) { transform: translateY(25px) rotate(-9deg); }
body.store-body .discovery-product:nth-child(2) { transform: translateY(-15px); background: #f1f7fb; z-index: 1; }
body.store-body .discovery-product:nth-child(3) { transform: translateY(30px) rotate(9deg); }
body.store-body .discovery-product:hover { transform: translateY(-20px); }
body.store-body .discovery-product img { display: block; width: 100%; height: 84%; object-fit: contain; mix-blend-mode: multiply; border-radius: 50px 50px 0 0; }
body.store-body .discovery-product small { display: block; overflow: hidden; margin-top: 7px; color: #357996; font-size: 9px; letter-spacing: .06em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
body.store-body .store-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 24px 8px; border-bottom: 1px solid #dde8f2; }
body.store-body .store-benefits > span { display: flex; align-items: center; justify-content: center; gap: 10px; color: #367d9b; font-size: 11px; }
body.store-body .store-benefits b { font-size: 20px; font-weight: 400; color: #3a86a6; }
body.store-body .layout { display: block; margin: 0; }
body.store-body .catalog-section { min-width: 0; padding: 38px 0 0; scroll-margin-top: 20px; animation: none; }
body.store-body .collection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
body.store-body .collection-heading h2 { margin: 7px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; line-height: 1.25; letter-spacing: -.8px; }
body.store-body #product-count-label { margin: 0 0 3px; color: #4094b8; font-size: 11px; }
body.store-body .category-quick-links { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 22px; padding: 2px 2px 6px; scrollbar-width: thin; }
body.store-body .category-chip { flex: 0 0 auto; min-height: 38px; padding: 8px 18px; border: 1px solid #cfe0ee; border-radius: 30px; background: transparent; color: #337591; font-size: 11px; cursor: pointer; }
body.store-body .category-chip.active { border-color: #255468; background: #255468; color: #fff; }
body.store-body .category-chip:hover:not(.active) { border-color: #5aa6ce; background: #eaf1f8; }
body.store-body .catalog-toolbar { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 210px 210px; gap: 12px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.store-body .search-box { display: flex; flex-direction: column; align-items: stretch; gap: 5px; height: auto; min-height: 0; padding: 0; min-width: 0; border: 0; border-radius: 0; background: transparent; }
body.store-body .search-box > strong, body.store-body .filter-combo-trigger > strong { color: #3d8cae; font-size: 10px; font-weight: 500; line-height: 1.4; }
body.store-body .search-box input { width: 100%; min-height: 46px; height: 46px; padding: 12px 16px; border: 1px solid #cfe0ee; border-radius: 8px; background: #fff; color: #1a3b49; box-shadow: none; font-size: 12px; }
body.store-body .search-box input::placeholder { color: #5da7c6; }
body.store-body .filter-combo, body.store-body .filter-combo[open] { position: relative; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
body.store-body .filter-combo-trigger { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; list-style: none; }
body.store-body .filter-combo-trigger::-webkit-details-marker { display: none; }
body.store-body .filter-combo-trigger > em { display: flex; align-items: center; align-self: stretch; width: 100%; min-height: 46px; padding: 11px 32px 11px 14px; border: 1px solid #cfe0ee; border-radius: 8px; background: #fff; color: #2e6983; font-size: 12px; font-style: normal; font-weight: 400; }
body.store-body .filter-combo-trigger i { position: absolute; right: 17px; bottom: 19px; width: 6px; height: 6px; border: solid #4d9ec1; border-width: 0 1px 1px 0; transform: rotate(45deg); }
body.store-body .filter-combo-menu { z-index: 20; top: calc(100% + 8px); min-width: 230px; padding: 14px; border: 1px solid #d5e3f1; border-radius: 12px; background: #fff; box-shadow: 0 15px 40px #193a4818; }
body.store-body .filter-choice { min-height: 38px; border-radius: 5px; font-size: 12px; }
body.store-body input[type="checkbox"], body.store-body input[type="radio"] { accent-color: var(--wine); }
body.store-body .collection-tools { display: flex; justify-content: flex-end; align-items: center; gap: 16px; min-height: 58px; }
body.store-body .sort-control { display: flex; align-items: center; gap: 8px; color: #4093b7; font-size: 11px; }
body.store-body .sort-control select { width: auto; max-width: 180px; min-height: 36px; padding: 5px 25px 5px 7px; border: 0; border-radius: 4px; background-color: transparent; color: #295e75; font-size: 11px; }
body.store-body .text-btn { padding: 8px 0; border: 0; background: transparent; color: var(--wine); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
body.store-body #clear-product-filters { margin-right: auto; }
body.store-body .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
body.store-body .product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dde7f0; border-radius: 12px; background: #fff; box-shadow: none; backdrop-filter: none; animation: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
body.store-body .product-card:hover { border-color: #bdd4e9; box-shadow: 0 8px 24px #1e45560c; transform: translateY(-3px); }
body.store-body .product-card::before, body.store-body .product-visual::after { display: none; }
body.store-body .product-card { content-visibility: visible; contain-intrinsic-size: none; }
body.store-body .product-visual { position: relative; height: auto; min-height: 0; aspect-ratio: 1.08; padding: 28px; border: 0; border-radius: 0; background: #eaf2f9; overflow: hidden; }
body.store-body .product-card:nth-child(4n + 2) .product-visual { background: #edf4fa; }
body.store-body .product-card:nth-child(4n + 3) .product-visual { background: #eaf1f8; }
body.store-body .product-card:nth-child(4n + 4) .product-visual { background: #eaf2f9; }
body.store-body .product-visual img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; mix-blend-mode: multiply; }
body.store-body .product-badge { display: none; }
body.store-body .stock-pill { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; padding: 4px 8px; border: 1px solid #dde7f0; border-radius: 4px; background: #dfeaf6ed; color: #2e6982; font-size: 9px; font-weight: 500; box-shadow: none; }
body.store-body .stock-pill.low-stock { border-color: #dde7f2; background: #e0ecf6ed; color: #275f8c; }
body.store-body .stock-pill.out-stock { border-color: #dce7f2; background: #eef5fa; color: #3d7caf; }
body.store-body .promo-pill { position: absolute; top: 12px; left: 12px; right: auto; bottom: auto; padding: 4px 7px; border: 0; border-radius: 4px; background: #336893; color: #fff; font-size: 9px; }
body.store-body .product-body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 17px; }
body.store-body .product-brand { margin: 0 0 6px; color: #4182b8; font-size: 9px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
body.store-body .product-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
body.store-body .product-title-row h3 { display: -webkit-box; overflow: hidden; min-height: 42px; margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: -.1px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.store-body .price-stack { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 8px; text-align: left; }
body.store-body .price { color: #214c5f; font-size: 15px; font-weight: 650; }
body.store-body .compare-price { color: #64aac8; font-size: 11px; }
body.store-body .product-category { order: 3; margin: 8px 0 16px; color: #51a0c2; font-size: 10px; line-height: 1.5; }
body.store-body .product-description, body.store-body .product-promo-line, body.store-body .promo-percent { display: none !important; }
body.store-body .product-rating { margin: 7px 0 0; font-size: 10px; }
body.store-body .product-card-actions { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 0 0; padding: 0; }
body.store-body .product-card-actions > button { min-width: 0; min-height: 38px; padding: 8px 5px; border-radius: 6px; font-size: 10px; }
body.store-body .primary-btn.add-to-cart { background: var(--wine); color: #fff; box-shadow: none; }
body.store-body .primary-btn.add-to-cart:hover:enabled { background: #2a5477; }
body.store-body .primary-btn.add-to-cart.is-sold-out, body.store-body .primary-btn.add-to-cart.is-sold-out:disabled, body.store-body #product-detail-add:disabled { background: #e9edf3; border-color: #d3dce7; color: #667b88; opacity: 1; box-shadow: none; }
body.store-body .secondary-btn.view-product { border-color: #dce6f1; color: #31708b; }
body.store-body .empty-state { padding: 24px; border: 1px dashed #cde0ee; border-radius: 10px; background: #f0f6fa; color: #3e8daf; font-size: 13px; line-height: 1.8; }
body.store-body .product-grid > .empty-state, body.store-body .catalog-loading { grid-column: 1 / -1; }
body.store-body .catalog-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: #3e8daf; }
body.store-body .loading-dot { width: 8px; height: 8px; border-radius: 50%; background: #57a3c4; animation: modernPulse 1s ease infinite alternate; }
@keyframes modernPulse { to { opacity: .3; } }
body.store-body .store-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 64px; padding: 32px 0 0; border-top: 1px solid #dde8f2; }
body.store-body .store-footer strong { font-family: Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.6px; }
body.store-body .store-footer strong > span { color: #5290c2; }
body.store-body .store-footer p { margin: 5px 0; color: #5ba5c5; font-size: 11px; }
body.store-body .footer-links { display: flex; align-items: flex-start; justify-content: flex-end; gap: 24px; }
body.store-body .footer-links button { min-height: 44px; padding: 0; border: 0; background: transparent; color: #357a98; font-size: 11px; cursor: pointer; }
body.store-body .footer-links button:hover { text-decoration: underline; text-underline-offset: 4px; }
body.store-body .store-footer .footer-note { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid #dde7f0; font-size: 10px; }
body.store-body .floating-cart-btn { display: none !important; }
body.store-body .promo-banner { margin: 22px 0 0; padding: 20px 24px; border: 1px solid #dce6f1; border-radius: 12px; background: #eaf1f8; box-shadow: none; }
body.store-body .promo-banner h2 { margin: 8px 0; font-size: 22px; }
body.store-body .store-drawer { z-index: 200; padding: 0; }
body.store-body .store-drawer-card { display: flex; flex-direction: column; gap: 0; width: min(520px, 100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 16px 0 0 16px; background: #fff; box-shadow: -10px 0 60px #142d3820; overflow: hidden; }
body.store-body .store-drawer-head { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; position: relative; top: auto; margin: 0; padding: 24px; border-bottom: 1px solid #dce8f1; background: #f2f7fb; }
body.store-body .store-drawer-head [data-close-store-panel] { width: auto; min-width: 50px; padding: 8px 12px; font-size: 11px; }
body.store-body .store-drawer-head [data-close-store-panel]::before { display: none; }
body.store-body .store-drawer-head .eyebrow { font-size: 9px; }
body.store-body .store-drawer-head h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
body.store-body .store-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 32px; }
body.store-body.modal-open .bottom-nav { display: none; }
body.store-body .checkout-form > button[type="submit"], body.store-body .cart-panel .summary-list, body.store-body .cart-panel .panel-step-actions { position: static; inset: auto; width: 100%; margin-inline: 0; transform: none; box-shadow: none; }
body.store-body .store-drawer-body .panel, body.store-body .store-drawer-body .info-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
body.store-body .checkout-progress { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid #dde8f1; color: #6baecb; font-size: 11px; }
body.store-body .checkout-progress > [data-checkout-step] { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: transparent; color: #51a0c2; font-size: 11px; }
body.store-body .checkout-progress [data-checkout-step] > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #dce6f1; border-radius: 50%; font-size: 9px; }
body.store-body .checkout-progress [aria-current="step"] { color: var(--wine); font-weight: 600; }
body.store-body .checkout-progress [aria-current="step"] > span:first-child { border-color: var(--wine); background: var(--wine); color: #fff; }
body.store-body .section-head h2 { font-family: inherit; font-size: 17px; font-weight: 600; }
body.store-body .section-head p { color: #509fc1; font-size: 12px; }
body.store-body .checkout-back { margin: -2px 0 15px; }
body.store-body .checkout-form { gap: 17px; }
body.store-body .checkout-form label { gap: 7px; }
body.store-body .checkout-form label > span { color: #337490; font-size: 12px; font-weight: 500; }
body.store-body .checkout-form input, body.store-body .checkout-form textarea, body.store-body .checkout-form select, body.store-body .location-picker-card input { padding: 12px 14px; border: 1px solid #cfe0ee; border-radius: 8px; background: #fff; color: #1c4151; box-shadow: none; font-size: 14px; }
body.store-body .delivery-address-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.store-body .delivery-map-btn { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; width: auto; min-width: max-content; min-height: 44px; gap: 8px; padding: 9px 14px; border-radius: 9px; }
body.store-body .delivery-map-btn .support-action-icon { flex: 0 0 18px; }
body.store-body .delivery-map-label { font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
body.store-body .checkout-form input:focus, body.store-body .checkout-form textarea:focus, body.store-body .checkout-form select:focus { border-color: #78b5cf; outline: 2px solid #dce6f1; outline-offset: 1px; }
body.store-body .delivery-quote-note { padding: 10px 12px; border: 1px solid #dde7f0; border-radius: 8px; background: #f1f7fa; color: #4092b5; font-size: 11px; }
body.store-body .cart-row { padding: 16px 0; border: 0; border-bottom: 1px solid #dfe9f3; border-radius: 0; background: transparent; box-shadow: none; }
body.store-body .cart-item-main strong { font-size: 12px; font-weight: 500; }
body.store-body .cart-item-main p { margin-top: 4px; color: #4f9fc1; font-size: 11px; }
body.store-body .cart-thumb { width: 56px; height: 66px; border: 1px solid #dde7f0; border-radius: 6px; background: #edf4fa; }
body.store-body .cart-controls button { min-width: 32px; min-height: 32px; border: 1px solid #cde0ee; border-radius: 6px; background: #f2f7fb; color: #2f6c87; }
body.store-body .summary-list { margin: 22px 0; padding: 18px; border: 1px solid #dce7f2; border-radius: 10px; background: #f1f7fa; }
body.store-body .summary-row { font-size: 12px; color: #3f91b4; }
body.store-body .cart-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dce6f1; color: #204a5c; font-size: 17px; }
body.store-body .panel-step-actions { display: grid; gap: 10px; }
body.store-body .product-modal-card { width: min(860px, calc(100vw - 48px)); overflow: auto; border: 1px solid #dce7f2; border-radius: 18px; background: #fff; box-shadow: 0 25px 100px #11283230; }
body.store-body .product-detail-visual { background: #eaf1f8; border-radius: 0; }
body.store-body .product-detail-content { padding: 30px; }
body.store-body .product-detail-head h2 { font-family: inherit; font-size: 23px; line-height: 1.4; font-weight: 500; }
body.store-body .product-detail-description { color: #3d8bac; font-size: 13px; line-height: 1.9; white-space: pre-line; }
body.store-body .product-modal-close { width: 36px; height: 36px; min-height: 36px; border: 1px solid #dce6f1; border-radius: 50%; background: #fff; color: #306e88; box-shadow: 0 2px 8px #00000008; }
body.store-body .product-detail-actions > button { min-height: 46px; font-size: 12px; }
body.store-body .location-picker-card { border-radius: 16px; background: #fff; }
html[lang="km"] body.store-body { line-height: 1.75; }
html[lang="km"] body.store-body .discovery-copy h2 { font-family: inherit; font-size: clamp(34px, 4vw, 50px); line-height: 1.5; letter-spacing: 0; }
html[lang="km"] body.store-body .collection-heading h2 { font-family: inherit; line-height: 1.6; font-size: 27px; letter-spacing: 0; }
html[lang="km"] body.store-body .store-drawer-head h2 { font-family: inherit; line-height: 1.5; letter-spacing: 0; }
@media (min-width: 901px) { body.store-body .bottom-nav { display: none; } }
@media (max-width: 1050px) {
  body.store-body .page-shell { width: calc(100% - 40px); }
  body.store-body .discovery-copy { padding: 42px 32px; }
  body.store-body .catalog-toolbar { grid-template-columns: minmax(0, 1fr) 180px 180px; }
  body.store-body .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
}
@media (max-width: 900px) {
  body.store-body .bottom-nav { position: fixed; display: grid; grid-template-columns: repeat(6, 1fr); right: 0; bottom: 0; left: 0; width: 100%; max-width: none; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid #dde7f0; border-radius: 0; background: #fffffff5; box-shadow: 0 -4px 20px #1c3f4e06; backdrop-filter: blur(12px); transform: none; }
  body.store-body .bottom-nav-item { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 45px; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: #52a0c2; font-size: 9px; box-shadow: none; }
  body.store-body .bottom-nav-item svg { width: 18px; height: 18px; }
  body.store-body .bottom-nav-item.active { background: #eaf2f9; color: #26576c; }
  body.store-body .page-shell { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.store-body .store-benefits { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.store-body .discovery-hero { min-height: 360px; }
  body.store-body .discovery-copy h2 { font-size: 50px; }
  body.store-body .discovery-products { gap: 6px; padding-inline: 12px; }
}
@media (max-width: 640px) {
  body.store-body .store-announcement { justify-content: center; padding: 7px 16px; font-size: 10px; }
  body.store-body .store-announcement > span:last-child { display: none; }
  body.store-body .page-shell { width: calc(100% - 32px); }
  body.store-body .store-hero { padding: 18px 0; }
  body.store-body .hero-top-row { gap: 8px; }
  body.store-body .hero-brand-row { gap: 7px; }
  body.store-body .hero-brand-card, body.store-body .hero-brand-image { width: 32px; height: 32px; flex-basis: 32px; }
  body.store-body .hero h1 { font-size: 23px; letter-spacing: -.5px; }
  body.store-body #hero-eyebrow { font-size: 7px; }
  body.store-body .hero-utility-actions { gap: 7px; }
  body.store-body .hero-utility-actions > .store-action-btn { display: none; }
  body.store-body .hero-utility-actions > .store-action-btn:first-child { display: inline-flex; width: 36px; height: 36px; min-height: 36px; }
  body.store-body .hero-utility-actions .language-switch { gap: 0; margin: 0; padding: 2px; }
  body.store-body .language-chip { min-height: 30px; padding: 5px 6px; font-size: 8px; }
  body.store-body .language-chip > span { display: none; }
  body.store-body .discovery-hero { grid-template-columns: 1fr; min-height: 0; border-radius: 14px; }
  body.store-body .discovery-copy { padding: 30px 27px 24px; }
  body.store-body .discovery-copy h2 { margin: 15px 0; font-size: 48px; letter-spacing: -1.8px; }
  body.store-body .discovery-description { max-width: 100%; margin-bottom: 20px; font-size: 12px; line-height: 1.8; }
  body.store-body .discovery-caption { display: none; }
  body.store-body .discovery-visual { min-height: 235px; max-height: 260px; }
  body.store-body .discovery-visual-label { top: 18px; left: 22px; font-size: 8px; }
  body.store-body .discovery-visual-note { right: 20px; bottom: 13px; font-size: 15px; }
  body.store-body .discovery-orbit { width: 220px; height: 220px; }
  body.store-body .discovery-products { width: min(370px, 100%); padding: 35px 25px; gap: 10px; }
  body.store-body .discovery-product { max-width: 110px; padding: 9px 5px; aspect-ratio: .78; border-radius: 60px 60px 8px 8px; }
  body.store-body .discovery-product:nth-child(1) { transform: translateY(12px) rotate(-9deg); }
  body.store-body .discovery-product:nth-child(2) { transform: translateY(-8px); }
  body.store-body .discovery-product:nth-child(3) { transform: translateY(15px) rotate(9deg); }
  body.store-body .discovery-product small { font-size: 8px; }
  body.store-body .store-benefits { gap: 10px 8px; padding: 20px 0; }
  body.store-body .store-benefits > span { justify-content: flex-start; gap: 6px; font-size: 9px; }
  body.store-body .store-benefits b { font-size: 17px; }
  body.store-body .catalog-section { padding-top: 27px; }
  body.store-body .collection-heading { margin-bottom: 17px; }
  body.store-body .collection-heading .eyebrow { font-size: 8px; letter-spacing: .14em; }
  body.store-body .collection-heading h2 { font-size: 27px; }
  body.store-body #product-count-label { flex: 0 0 auto; font-size: 9px; }
  body.store-body .category-quick-links { margin-bottom: 15px; gap: 6px; }
  body.store-body .category-chip { min-height: 36px; padding: 7px 14px; font-size: 10px; }
  body.store-body .catalog-toolbar { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.store-body .search-box { grid-column: 1 / -1; }
  body.store-body .search-box input { font-size: 16px; }
  body.store-body .collection-tools { min-height: 52px; gap: 8px; }
  body.store-body .sort-control { gap: 4px; font-size: 10px; }
  body.store-body .sort-control select { max-width: 165px; font-size: 11px; }
  body.store-body .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  body.store-body .product-card { border-radius: 9px; }
  body.store-body .product-visual { padding: 23px 15px 15px; aspect-ratio: 1; }
  body.store-body .stock-pill { top: 8px; right: 8px; padding: 3px 5px; font-size: 7px; }
  body.store-body .promo-pill { top: 8px; left: 8px; padding: 3px 5px; font-size: 7px; }
  body.store-body .product-body { padding: 12px; }
  body.store-body .product-brand { font-size: 8px; letter-spacing: .08em; }
  body.store-body .product-title-row h3 { min-height: 40px; font-size: 12px; line-height: 1.65; }
  body.store-body .price { font-size: 14px; }
  body.store-body .compare-price { font-size: 9px; }
  body.store-body .product-category { margin: 7px 0 12px; font-size: 8px; }
  body.store-body .product-card-actions { grid-template-columns: 1fr; gap: 6px; }
  body.store-body .product-card-actions > button { min-height: 38px; font-size: 10px; }
  body.store-body .product-card-actions .add-to-cart { grid-row: 1; }
  body.store-body .store-footer { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; padding-top: 24px; }
  body.store-body .footer-links { justify-content: flex-start; gap: 24px; }
  body.store-body .store-footer .footer-note { line-height: 1.8; }
  body.store-body .store-drawer-card { width: 100%; max-height: 100dvh; border-radius: 14px 14px 0 0; }
  body.store-body .store-drawer-head { padding: 19px 20px; }
  body.store-body .store-drawer-body { padding: 18px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
  body.store-body .checkout-form input, body.store-body .checkout-form textarea, body.store-body .checkout-form select { font-size: 16px; }
  body.store-body .checkout-progress { gap: 3px; }
  body.store-body .checkout-progress > [data-checkout-step] { gap: 4px; font-size: 10px; }
  body.store-body .product-modal-card { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  body.store-body .product-detail-content { padding: 22px; }
  body.store-body .product-detail-head h2 { font-size: 20px; }
  body.store-body .product-detail-visual { min-height: 220px; max-height: 300px; }
  html[lang="km"] body.store-body .collection-heading h2 { font-size: 21px; }
  html[lang="km"] body.store-body .discovery-copy h2 { font-size: 36px; }
}
@media (max-width: 360px) {
  body.store-body .page-shell { width: calc(100% - 24px); }
  body.store-body .hero-brand-card { display: none; }
  body.store-body .discovery-copy { padding: 25px 22px; }
  body.store-body .collection-heading h2 { font-size: 24px; }
  body.store-body .product-body { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.store-body *, body.store-body *::before, body.store-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The cart is immediately readable; nested map and product dialogs sit above it. */
body.store-body .store-drawer, body.store-body .store-drawer-card, body.store-body .store-drawer-card > *, body.store-body .store-drawer-body > * { animation: none !important; opacity: 1; }
body.store-body .store-drawer-card { transform: none !important; background: #fff; }
body.store-body .store-drawer-body { display: block; }
body.store-body .store-drawer-body [data-store-panel-group] { margin-top: 0; }
body.store-body .store-drawer-body .section-head { margin: 0 0 18px; padding: 0; }
body.store-body .cart-items { display: grid; gap: 12px; }
body.store-body .cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; border: 1px solid #dde7f1; border-radius: 12px; background: #f2f7fb; }
body.store-body .cart-item-main { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
body.store-body .cart-item-main strong { display: block; color: #193c56; font-size: 13px; line-height: 1.55; }
body.store-body .cart-thumb { width: 64px; height: 76px; background-size: contain; background-repeat: no-repeat; background-color: #edf5fa; }
body.store-body .cart-controls { display: grid; grid-template-columns: 30px 24px 30px; width: auto; gap: 2px; padding: 3px; background: #e9f2fa; border: 1px solid #dce8f2; border-radius: 8px; }
body.store-body .cart-controls button { width: 30px; height: 32px; min-width: 30px; border: 0; box-shadow: none; background: #fff; }
body.store-body .cart-controls span { min-width: 24px; text-align: center; font-size: 12px; color: #146298; }
body.store-body .cart-item-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #e0eaf4; }
body.store-body .cart-item-bottom > strong { color: #086caa; font-size: 14px; }
body.store-body .cart-panel .panel-step-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; width: 100%; }
body.store-body .cart-panel .panel-step-actions > button { width: 100%; justify-self: stretch; }
body.store-body #cart-panel > .section-head h2, body.store-body #checkout-panel-title { display: none; }
body.store-body #checkout-panel-subtitle { color: #28668e; font-size: 14px; font-weight: 600; }
body.store-body .cart-remove { min-height: 32px; padding: 2px 0; color: #657d92; font-size: 11px; }
body.store-body .location-picker-modal { z-index: 300; padding: 20px; }
body.store-body .product-modal { z-index: 250; }
body.store-body .location-picker-card { width: min(900px, 100%); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid #d8e4f1; border-radius: 16px; box-shadow: 0 20px 80px #163f6629; }
body.store-body .location-picker-map-shell { overflow: hidden; border: 1px solid #d8e4f1; border-radius: 12px; }
body.store-body .location-picker-map { height: 340px; min-height: 280px; }
body.store-body .location-picker-marker-dot { background: #0676b6; border-color: #fff; box-shadow: 0 0 0 5px #2baad943; }
body.store-body .location-picker-actions { position: sticky; bottom: -24px; z-index: 1100; display: flex; justify-content: flex-end; padding: 14px 0; background: #fff; border-top: 1px solid #dde8f1; }
body.store-body .location-picker-head h2 { font-size: 23px; }
body.store-body .location-picker-head p, body.store-body .delivery-branches > p { color: #607e95; font-size: 12px; }
body.store-body .delivery-region-note { margin: -7px 0 0; color: #356f96; font-size: 11px; line-height: 1.7; }
body.store-body .delivery-branches { padding-top: 15px; border-top: 1px solid #dde9f2; }
body.store-body .delivery-branches h3 { margin: 0; font-size: 16px; }
body.store-body .delivery-branches select { width: 100%; min-height: 44px; margin: 8px 0; padding: 8px 12px; border: 1px solid #dce8f1; border-radius: 8px; background: #fff; }
body.store-body #delivery-branch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 240px; overflow-y: auto; }
body.store-body .delivery-branch-card { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; border: 1px solid #d7e6f2; border-radius: 8px; background: #eef6fc; color: #215979; text-align: left; cursor: pointer; }
body.store-body .delivery-branch-card strong { font-size: 12px; }
body.store-body .delivery-branch-card span, body.store-body .delivery-branch-card small { font-size: 10px; color: #628098; }
body.store-body .branch-empty { grid-column: 1 / -1; font-size: 12px; color: #738a9a; }
body.store-body .courier-pin span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid white; border-radius: 50%; background: #0873b3; color: #fff; box-shadow: 0 2px 8px #0c588d50; }
body.store-body .thumbnail-slide { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 1px solid #dde8f2; border-radius: 6px; background: #ffffffed; color: #226d9a; font-size: 22px; cursor: pointer; transform: translateY(-50%); }
body.store-body .thumbnail-slide.previous { left: 6px; }
body.store-body .thumbnail-slide.next { right: 6px; }
body.store-body .thumbnail-slide-count { position: absolute; bottom: 8px; right: 9px; padding: 2px 7px; border-radius: 10px; background: #ffffffdf; color: #5f7f95; font-size: 9px; }
body.store-body .product-gallery-play { position: absolute; bottom: 12px; left: 12px; z-index: 4; min-height: 34px; padding: 6px 12px; border: 1px solid #d7e3f0; border-radius: 20px; background: #fffffff5; color: #1677a5; font-size: 10px; cursor: pointer; }
body.store-body .product-video-preview { margin: 16px 0; padding: 12px; border: 1px solid #d7e6f2; border-radius: 10px; background: #eef6fc; }
body.store-body .product-video-preview summary { color: #1177af; font-size: 12px; cursor: pointer; }
body.store-body .product-video-preview video, body.store-body .product-video-preview iframe { display: block; width: 100%; max-height: 360px; aspect-ratio: 16 / 9; margin-top: 12px; border: 0; border-radius: 8px; background: #0d3048; }
@media (max-width: 640px) {
  body.store-body .cart-row { grid-template-columns: 1fr; padding: 14px; }
  body.store-body .cart-controls { justify-self: end; margin-top: -6px; }
  body.store-body .location-picker-modal { padding: 8px; }
  body.store-body .location-picker-card { max-height: calc(100dvh - 16px); padding: 18px; border-radius: 12px; }
  body.store-body .location-picker-map { height: 300px; }
  body.store-body .location-picker-actions { bottom: -18px; }
  body.store-body #delivery-branch-list { grid-template-columns: 1fr; }
}
/* Featured collection and shopping assistant */
body.store-body .discovery-hero { background: linear-gradient(115deg, #e8f2fb 0%, #edf3fa 45%, #d8e2f4 100%); border-color: #d2e1ef; }
body.store-body .discovery-visual-label { z-index: 2; top: 10px; left: 22px; }
body.store-body .discovery-visual { background: linear-gradient(145deg, #e0edf8, #f0f7fc 58%, #cdddf2); }
body.store-body .discovery-visual::before { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid #fff9; border-radius: 50%; box-shadow: 0 0 0 42px #ffffff29, 0 0 0 95px #fff2; }
body.store-body .discovery-products { padding: 34px 38px 24px; min-height: 400px; }
body.store-body .discovery-feature { position: relative; z-index: 1; width: min(430px, 100%); padding: 14px 14px 12px; border: 1px solid #fff; border-radius: 22px; background: #ffffffd9; box-shadow: 0 20px 55px #215d7b20; backdrop-filter: blur(10px); }
body.store-body .discovery-product, body.store-body .discovery-product:nth-child(n), body.store-body .discovery-product:hover { display: flex; width: 100%; max-width: none; aspect-ratio: 1.42; align-items: center; justify-content: center; overflow: hidden; padding: 10px; border: 0; border-radius: 15px; background: radial-gradient(circle at 50% 40%, #fff 0%, #edf3fa 56%, #d1e2f2 100%); box-shadow: none; transform: none; }
body.store-body .discovery-product img { position: relative; z-index: 2; display: block; width: 88%; height: 96%; object-fit: contain; mix-blend-mode: multiply; border-radius: 0; transition: transform .25s ease; }
body.store-body .discovery-product:hover img { transform: scale(1.04); }
body.store-body .discovery-image-glow { position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; background: #eeb8c66b; filter: blur(24px); }
body.store-body .discovery-feature-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 5px 8px; }
body.store-body .discovery-feature-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
body.store-body .discovery-feature-brand { color: #4488a8; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.store-body .discovery-feature-name { overflow: hidden; color: #193b50; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.store-body .discovery-feature-price { color: #2f7797; font-size: 12px; }
body.store-body .discovery-feature-view { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #c2d6ea; border-radius: 8px; background: #e5effa; color: #205772; font-size: 11px; font-weight: 700; cursor: pointer; }
body.store-body .discovery-feature-view:hover { background: #d8e2f4; }
body.store-body .discovery-feature-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 3px; }
body.store-body .discovery-feature-nav button { width: 29px; height: 29px; padding: 0; border: 1px solid #d3e2f0; border-radius: 50%; background: #fff; color: #317c9b; font-size: 19px; line-height: 1; cursor: pointer; }
body.store-body .discovery-feature-nav button:hover { background: #e6f1fa; }
body.store-body .discovery-feature-nav [data-hero-play] { margin-left: 4px; font-size: 10px; }
body.store-body .discovery-feature-count { min-width: 52px; color: #427e99; font-size: 10px; letter-spacing: .08em; text-align: center; }
body.store-body .discovery-feature-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
body.store-body .discovery-feature-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: #a8c9e0; cursor: pointer; }
body.store-body .discovery-feature-dots button[aria-current="true"] { width: 18px; background: #367f9e; }
body.store-body .beauty-chat { position: fixed; right: 20px; bottom: 20px; z-index: 180; color: #193d50; }
body.store-body .beauty-chat-launcher { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 17px; border: 1px solid #2c7598; border-radius: 24px; background: #2e799d; color: #fff; box-shadow: 0 10px 28px #20597745; font-size: 12px; font-weight: 700; cursor: pointer; }
body.store-body .beauty-chat-launcher > span:first-child { font-size: 18px; }
body.store-body .beauty-chat.is-open .beauty-chat-launcher { display: none; }
body.store-body .beauty-chat-panel { display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); height: min(590px, calc(100dvh - 100px)); overflow: hidden; margin-bottom: 10px; border: 1px solid #d0e0ef; border-radius: 18px; background: #fff; box-shadow: 0 22px 70px #123e5860; }
body.store-body .beauty-chat-header { display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 12px 15px; background: linear-gradient(110deg, #276c91, #3b93b5); color: #fff; }
body.store-body .beauty-chat-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 50%; background: #fff3; font-size: 21px; }
body.store-body .beauty-chat-header > div { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.4; }
body.store-body .beauty-chat-header strong { font-size: 13px; }
body.store-body .beauty-chat-header small { color: #e1f3fb; font-size: 10px; }
body.store-body .beauty-chat-close, body.store-body .beauty-chat-reset, body.store-body .beauty-chat-minimize { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 50%; background: #ffffff25; color: #fff; font-size: 22px; cursor: pointer; }
body.store-body .beauty-chat-reset { font-size: 20px; }
body.store-body .beauty-chat-minimize { font-size: 19px; display: none; }
body.store-body .beauty-chat-mini { display: none; }
body.store-body .beauty-chat-close:hover, body.store-body .beauty-chat-reset:hover, body.store-body .beauty-chat-minimize:hover { background: #ffffff40; }
body.store-body .beauty-chat-header { gap: 8px; }
body.store-body .beauty-chat-close, body.store-body .beauty-chat-reset, body.store-body .beauty-chat-minimize { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-basis: 40px; border: 1px solid #ffffff38; line-height: 1; }
body.store-body .beauty-chat-minimize { display: none; }
body.store-body .beauty-chat-header button:focus-visible { outline-color: #fff; outline-offset: 2px; }
body.store-body .beauty-chat-bubble { font-size: 13px; box-shadow: 0 2px 8px #1b536908; }
body.store-body .beauty-chat-product-actions button:disabled { cursor: not-allowed; opacity: 1; background: #e9edf3; border-color: #d3dce7; color: #667b88; }
body.store-body .beauty-chat-messages { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; overflow-y: auto; padding: 16px; background: #f2f7fb; }
body.store-body .beauty-chat-bubble { max-width: 90%; padding: 10px 13px; border: 1px solid #dde7f1; border-radius: 13px 13px 13px 3px; background: #fff; color: #264b5e; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
body.store-body .beauty-chat-bubble.user { align-self: flex-end; border-color: #317e9f; border-radius: 13px 13px 3px 13px; background: #317e9f; color: #fff; }
body.store-body .beauty-chat-bubble.pending { color: #60899c; }
body.store-body .beauty-chat-sources { width: 100%; padding: 12px 13px; border: 1px solid #cfe4f1; border-radius: 13px; background: #fff; color: #264b5e; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
body.store-body .beauty-chat-sources > strong { color: #205c7e; font-size: 12px; }
body.store-body .beauty-chat-sources p { margin: 8px 0 3px; white-space: pre-wrap; }
body.store-body .beauty-chat-source-links { display: flex; flex-wrap: wrap; gap: 6px; }
body.store-body .beauty-chat-source-links a { color: #17658e; text-decoration: underline; text-underline-offset: 2px; }
body.store-body .beauty-chat-search-suggestions { margin-top: 10px; }
body.store-body .beauty-chat-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: #f2f7fb; scrollbar-width: thin; }
body.store-body .beauty-chat-quick button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #cfe0ee; border-radius: 20px; background: #fff; color: #2a6e8d; font-size: 10px; cursor: pointer; }
body.store-body .beauty-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 11px; border-top: 1px solid #dfeaf3; background: #fff; }
body.store-body .beauty-chat-file-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #cfe0ee; border-radius: 10px; background: #f1f7fa; color: #276f90; cursor: pointer; transition: background .15s, border-color .15s; }
body.store-body .beauty-chat-file-btn:hover { background: #e6f1f8; border-color: #9fc3dc; }
body.store-body .beauty-chat-preview { position: relative; display: flex; align-items: center; padding: 8px 12px; background: #eef5fa; border-top: 1px solid #dde7f1; gap: 10px; }
body.store-body .beauty-chat-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #cfe0ee; }
body.store-body .beauty-chat-preview-remove { position: absolute; top: 4px; left: 54px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #16333f; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
body.store-body .beauty-chat-bubble-img { display: block; max-width: 180px; max-height: 180px; border-radius: 8px; margin-bottom: 6px; object-fit: cover; }
body.store-body .beauty-chat-form textarea { flex: 1; min-height: 42px; max-height: 110px; resize: none; overflow-y: auto; padding: 10px; border: 1px solid #cfe0ee; border-radius: 10px; background: #fff; color: #173c50; /* 16px+: iOS Safari auto-zooms into focused inputs with smaller fonts */ font-size: 16px; }
body.store-body .beauty-chat-form button { width: 42px; height: 42px; border: 0; border-radius: 10px; background: #317e9f; color: white; font-size: 22px; cursor: pointer; }
body.store-body .beauty-chat-products { display: grid; width: 100%; gap: 8px; }
body.store-body .beauty-chat-product { display: flex; gap: 10px; padding: 8px; border: 1px solid #dde7f1; border-radius: 10px; background: #fff; }
body.store-body .beauty-chat-product img { width: 65px; height: 76px; object-fit: contain; border-radius: 7px; background: #eef5fa; }
body.store-body .beauty-chat-product > div { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
body.store-body .beauty-chat-product strong { color: #204b60; font-size: 11px; line-height: 1.35; }
body.store-body .beauty-chat-product span { color: #397e9b; font-size: 10px; }
body.store-body .beauty-chat-product-actions { display: flex; gap: 5px; margin-top: auto; }
body.store-body .beauty-chat-product-actions button { padding: 5px 7px; border: 1px solid #c9ddef; border-radius: 6px; background: #e9f2fa; color: #276f90; font-size: 10px; cursor: pointer; }
body.store-body .beauty-chat-product-actions button:last-child { border-color: #317e9f; background: #317e9f; color: #fff; }
body.store-body .beauty-chat-product-actions button:last-child:disabled { border-color: #d3dce7; background: #e9edf3; color: #667b88; }
body.store-body.modal-open .beauty-chat { visibility: hidden; }
@media (max-width: 900px) { body.store-body .beauty-chat { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 640px) {
  body.store-body .discovery-products { min-height: 0; padding: 12px 22px 24px; }
  body.store-body .discovery-feature { max-width: 300px; }
  body.store-body .discovery-feature-bottom { padding: 10px 2px 6px; }
  body.store-body .discovery-feature-name { font-size: 12px; }
  body.store-body .discovery-feature-view { padding: 7px 9px; font-size: 9px; }
  body.store-body .discovery-visual { max-height: none; }
  body.store-body .hero-utility-stack { justify-content: center; margin-top: 8px; }
  body.store-body .beauty-chat-panel {
    position: fixed;
    top: var(--chat-vvtop, 0px);
    right: auto;
    bottom: auto;
    left: var(--chat-vvleft, 0px);
    z-index: 185;
    width: var(--chat-vvw, 100vw);
    height: var(--chat-vvh, 100vh) !important;
    height: var(--chat-vvh, 100dvh) !important;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: beautyChatSheetIn 0.22s ease-out;
  }
  body.store-body .beauty-chat.is-open .beauty-chat-launcher,
  body.store-body .beauty-chat.is-minimized .beauty-chat-launcher { visibility: hidden; }
  body.store-body .beauty-chat.is-minimized .beauty-chat-launcher { display: none; }
  body.store-body .beauty-chat-minimize { display: inline-flex; align-items: center; justify-content: center; }
  body.store-body .beauty-chat-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  body.store-body .beauty-chat-form { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
  body.store-body .beauty-chat-form textarea { min-height: 62px; }
  body.store-body .beauty-chat-panel.is-composing .beauty-chat-quick { display: none; }
  body.store-body .beauty-chat.is-minimized .beauty-chat-mini {
    display: inline-flex;
    position: fixed;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 186;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 16px;
    border: 1px solid #d0e0ef;
    border-radius: 24px;
    background: linear-gradient(110deg, #276c91, #3b93b5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 30px #123e5850;
    animation: beautyChatSheetIn 0.2s ease-out;
  }
  body.store-body .beauty-chat.is-minimized .beauty-chat-mini > span:first-child { font-size: 16px; }
  body.store-body.beauty-chat-fullscreen { overflow: hidden; }
  @keyframes beautyChatSheetIn { from { transform: translateY(3%); opacity: 0; } }
}

/* Soft moving light on visible products, with a quiet static border for reduced motion. */
@property --ksn-edge-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ksnEdgeSweep { to { --ksn-edge-angle: 360deg; } }
body.store-body .product-card, body.store-body .cart-row { position: relative; isolation: isolate; }
body.store-body .product-card::before, body.store-body .cart-row::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ksn-edge-angle), transparent 0 66%, #bfe0f7 76%, #e8f4fd 84%, #7fc4ee 91%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
  animation: ksnEdgeSweep 9s linear infinite paused;
}
body.store-body .product-card.is-visible::before, body.store-body .cart-row::before { animation-play-state: running; }
body.store-body .product-card:hover::before { opacity: 1; }

/* A calm reveal and timer make the featured-product slideshow easy to follow. */
@keyframes ksnHeroReveal { from { opacity: .35; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ksnHeroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.store-body .discovery-product img.feature-enter { animation: ksnHeroReveal .55s ease both; }
body.store-body .discovery-feature-progress { height: 3px; overflow: hidden; margin: 11px 7px 0; border-radius: 4px; background: #dde7f1; }
body.store-body .discovery-feature-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #86bcec, #4d90c6); transform-origin: left; animation: ksnHeroProgress 6s linear infinite paused; }
body.store-body .discovery-feature.is-playing .discovery-feature-progress span { animation-play-state: running; }
body.store-body .discovery-feature:hover .discovery-feature-progress span, body.store-body .discovery-feature:focus-within .discovery-feature-progress span { animation-play-state: paused; }

body.store-body .beauty-chat-media { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 13px; border-bottom: 1px solid #dfeaf3; background: #f2f7fb; }
body.store-body .beauty-chat-media a { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid #dae6f1; border-radius: 16px; background: #fff; color: #277292; font-size: 10px; font-weight: 650; text-decoration: none; }
body.store-body .beauty-chat-media a:hover { border-color: #82bde2; background: #e7f2fb; }
body.store-body .beauty-chat-media.in-message { width: 100%; border: 1px solid #dfeaf3; border-radius: 10px; }
body.store-body .beauty-chat-media[hidden], body.store-body .beauty-chat-preview[hidden] { display: none !important; }
body.store-body .beauty-chat-form .beauty-chat-file-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #cfe0ee; border-radius: 10px; background: #f1f7fa; color: #276f90; font-size: 14px; }
body.store-body .beauty-chat-form .beauty-chat-file-btn:hover { border-color: #9fc3dc; background: #e6f1f8; }
@media (prefers-reduced-motion: reduce) {
  body.store-body .product-card::before, body.store-body .cart-row::before { animation: none !important; background: linear-gradient(135deg, #bfe0f7, #e8f4fd, #7fc4ee); }
  body.store-body .discovery-feature-progress { display: none; }
  body.store-body .beauty-chat-panel, body.store-body .beauty-chat-mini { animation: none !important; }
}

/* The outgoing image stays visible until the next product photo has loaded. */
body.store-body .product-image-fade {
  position: absolute;
  inset: 28px;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
  transition: opacity .38s ease;
}
body.store-body .product-image-fade.is-leaving { opacity: 0; }
body.store-body .product-visual .thumbnail-slide,
body.store-body .product-visual .thumbnail-slide-count { z-index: 4; }
body.store-body .discovery-slide-fade {
  position: absolute;
  inset: 10px;
  z-index: 3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
  transition: opacity .48s ease;
}
body.store-body .discovery-slide-fade.is-leaving { opacity: 0; }
body.store-body .social-caption { display: none; }

/* Phone header and social links. */
@media (max-width: 640px) {
  body.store-body .store-hero { padding: 13px 0 14px; }
  body.store-body .hero-top-row { display: flex; align-items: center; gap: 8px; }
  body.store-body .hero-brand-row { min-width: 0; gap: 9px; }
  body.store-body .hero-brand-card { display: block; width: 42px; height: 42px; flex: 0 0 42px; margin: 0; }
  body.store-body .hero-brand-image { width: 42px; height: 42px; border-radius: 12px; }
  body.store-body .hero-brand-copy { min-width: 0; }
  body.store-body .hero h1 { font-size: clamp(19px, 5.8vw, 24px); line-height: 1.15; white-space: nowrap; }
  body.store-body #hero-eyebrow { font-size: 8px; line-height: 1.2; letter-spacing: .12em; }
  body.store-body .hero-utility-actions { flex: 0 0 auto; gap: 5px; }
  body.store-body .hero-utility-stack { width: 100%; margin-top: 12px; }
  body.store-body .social-links-section { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 0 0; border-top: 1px solid #dfe9f2; }
  body.store-body .social-caption { display: block; flex: 0 0 auto; color: #467990; font-size: 10px; font-weight: 700; white-space: nowrap; }
  body.store-body .social-links { flex: 1; justify-content: flex-end; gap: 4px; min-width: 0; }
  body.store-body .social-link { flex: 0 1 auto; width: auto; min-width: 0; height: 34px; padding: 0 7px; gap: 4px; border-radius: 9px; background: #fff; text-decoration: none; }
  body.store-body .social-link::after { content: attr(aria-label); color: #316e8e; font-size: 9px; font-weight: 600; white-space: nowrap; }
  body.store-body .social-link svg { flex: 0 0 13px; width: 13px; height: 13px; }
  body.store-body .product-image-fade { inset: 23px 15px 15px; }

  body.store-body .store-drawer-head { padding: 15px 20px; }
  body.store-body .store-drawer-head h2 { font-size: 23px; }
  body.store-body .store-drawer-body { padding: 14px 20px calc(32px + env(safe-area-inset-bottom, 0px)); scroll-padding-top: 12px; }
  body.store-body .checkout-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 20px; padding: 0 0 16px; }
  body.store-body .checkout-progress > [aria-hidden="true"] { display: none; }
  body.store-body .checkout-progress > [data-checkout-step] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: 6px 3px; border: 1px solid #dfe9f3; border-radius: 10px; background: #f2f7fb; color: #5483a0; font-size: 10px; line-height: 1.2; text-align: center; }
  body.store-body .checkout-progress > [data-checkout-step][aria-current="step"] { border-color: #82bde2; background: #e6f2fc; color: #235f83; }
  body.store-body .checkout-progress [data-checkout-step] > span:first-child { width: 24px; height: 24px; font-size: 9px; }
  body.store-body .cart-panel .summary-list { margin: 18px 0; }
  body.store-body .cart-panel .panel-step-actions > button,
  body.store-body .checkout-form > button[type="submit"] { min-height: 48px; font-size: 13px; }
  body.store-body .checkout-form { gap: 15px; }
  body.store-body .checkout-form label > span { color: #285f7b; font-weight: 650; }
  body.store-body .delivery-address-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.store-body .delivery-map-btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 44px; flex: auto; gap: 6px; padding: 8px; border-radius: 9px; }
  body.store-body .delivery-map-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
  body.store-body .pay-screen { padding-top: 10px; }
  body.store-body .pay-title { color: #1d4f6d; background: none; font-size: 24px; }
  body.store-body .pay-lead { color: #547487; font-size: 12px; }
  body.store-body .aba-card-wrap { margin: 14px 0 12px; }
  body.store-body .pay-receipt { width: 100%; }
}
@media (max-width: 400px) {
  body.store-body .social-links-section { display: block; }
  body.store-body .social-caption { margin-bottom: 7px; }
  body.store-body .social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.store-body .social-link { justify-content: center; width: 100%; min-height: 36px; padding: 0 7px; }
  body.store-body .social-link::after { font-size: 11px; }
}
@media (max-width: 360px) {
  body.store-body .hero-brand-card { display: block; width: 38px; height: 38px; flex-basis: 38px; }
  body.store-body .hero-brand-image { width: 38px; height: 38px; }
  body.store-body .hero h1 { font-size: 19px; }
}

/* Brand lockup and QR actions. */
body.store-body .hero-brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.store-body .hero-brand-card { width: 50px; height: 50px; flex: 0 0 50px; margin: 0; padding: 3px; border: 1px solid #dde8f2; border-radius: 15px; background: #fff; box-shadow: 0 4px 14px #194f6810; }
body.store-body .hero-brand-image { display: block; width: 100%; height: 100%; border-radius: 11px; object-fit: contain; }
body.store-body .hero-brand-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body.store-body .hero h1 { overflow: hidden; max-width: 100%; font-size: 30px; font-weight: 600; line-height: 1.12; text-overflow: ellipsis; }
body.store-body #hero-eyebrow { margin-bottom: 4px; font-size: 9px; font-weight: 700; line-height: 1.1; }
body.store-body .qr-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 260px); margin-top: 2px; }
body.store-body .qr-action-row .qr-icon-button { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 1px solid #c9ddef; border-radius: 12px; background: #ecf4fa; color: #246c91; cursor: pointer; }
body.store-body .qr-action-row .qr-icon-button:hover:enabled { border-color: #64aede; background: #e6f2fb; }
body.store-body .qr-icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.store-body .qr-action-status { width: min(100%, 260px); margin: 0; color: #3a7695; font-size: 11px; line-height: 1.5; }
body.store-body .qr-action-status:empty { display: none; }
body.store-body .pay-screen .aba-card-wrap { margin-bottom: 8px; }
body.store-body .pay-screen .pay-check-now { margin-top: 2px; }
body.store-body .pay-screen .pay-receipt { margin-top: 20px; }
body.store-body .pay-recovery { max-width: 440px; margin: 0 auto; }
body.store-body .pay-recovery-note { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #f2c8c8; border-radius: 10px; background: #fff6f6; color: #9b3e43; font-size: 12px; line-height: 1.7; }
body.store-body .pay-recovery-actions { display: grid; gap: 10px; margin-top: 20px; }
body.store-body .pay-recovery-actions button { width: 100%; min-height: 46px; }
@media (max-width: 640px) {
  body.store-body .hero-brand-row { gap: 9px; }
  body.store-body .hero-brand-card { width: 46px; height: 46px; flex-basis: 46px; padding: 2px; border-radius: 13px; }
  body.store-body .hero-brand-image { border-radius: 10px; }
  body.store-body .hero h1 { font-size: clamp(20px, 5.7vw, 25px); }
  body.store-body #hero-eyebrow { font-size: 8px; margin-bottom: 3px; }
}
@media (max-width: 360px) {
  body.store-body .hero-brand-card { width: 40px; height: 40px; flex-basis: 40px; }
  body.store-body .hero h1 { font-size: 20px; }
}

/* Keep the shop identity visible at every viewport width while media links scroll away. */
body.store-body .store-hero {
  position: sticky;
  top: 0;
  z-index: 160;
  padding: 10px 14px;
  border: 1px solid #dce6f1;
  border-radius: 0 0 14px 14px;
  background: rgb(250 253 255 / 88%);
  box-shadow: 0 5px 14px #1e49640a;
  backdrop-filter: blur(14px);
}
body.store-body .hero-utility-stack { margin: 10px 0 20px; }
body.store-body .hero-brand-copy { align-items: flex-end; }
body.store-body #hero-eyebrow { margin: 4px 0 0; font-size: 9px; line-height: 1.2; text-align: right; }
@media (max-width: 640px) {
  body.store-body { overflow-x: clip; }
  body.store-body .store-hero { padding: 9px 0 10px; border-width: 0 0 1px; border-radius: 0; }
  body.store-body .hero-utility-stack { width: 100%; margin: 0 0 14px; }
  body.store-body .social-links-section { padding-top: 10px; border-top: 0; }
  body.store-body #hero-eyebrow { margin-top: 3px; font-size: 8px; }
}

/* Keep the four store channels visible without pushing products down the phone screen. */
@media (max-width: 640px) {
  body.store-body .social-links-section { display: flex; padding: 0; }
  body.store-body .social-caption { display: none; }
  body.store-body .social-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 5px; }
  body.store-body .social-link { width: 100%; height: 42px; min-height: 42px; padding: 0 3px; gap: 3px; }
  body.store-body .social-link::after { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  body.store-body .social-link svg { flex: 0 0 13px; width: 13px; height: 13px; }
  body.store-body .product-title-row h3 { min-height: 44px; font-size: 14px; line-height: 1.5; }
  body.store-body .product-brand { font-size: 9px; }
  body.store-body .product-card-actions > button { min-height: 44px; font-size: 11px; }
  body.store-body .category-chip { min-height: 42px; font-size: 11px; }
}
@media (min-width: 641px) {
  body.store-body .product-title-row h3 { font-size: 14px; line-height: 1.5; }
  body.store-body .product-card-actions > button { min-height: 42px; font-size: 11px; }
}

/* Keep the brand and product actions usable on narrow iPhones. */
@media (max-width: 360px) {
  body.store-body .hero-brand-card { display: block; width: 34px; height: 34px; flex: 0 0 34px; padding: 2px; }
  body.store-body .hero-brand-image { width: 30px; height: 30px; }
  body.store-body .hero h1 { font-size: 18px; }
  body.store-body .hero-utility-actions { gap: 3px; }
  body.store-body .hero-utility-actions .language-switch { margin-left: 0; padding: 1px; }
  body.store-body .language-chip { min-height: 28px; padding: 3px 5px; font-size: 9px; }
}
@media (max-width: 340px) {
  body.store-body .product-grid { grid-template-columns: minmax(0, 1fr); }
  body.store-body .product-visual { aspect-ratio: 1.25; }
  body.store-body .product-body { padding: 14px; }
}

/* Soft blush storefront canvas; shopping surfaces keep their dark text. */
body.store-body .store-hero { border-color: #dce6f1; }
body.store-body .hero h1 { color: #29517a; }
body.store-body .hero-eyebrow, body.store-body #hero-eyebrow { color: #4f7ba3; }
body.store-body .hero-utility-actions .store-action-btn,
body.store-body .hero-utility-actions .language-switch { border-color: #d2e1ee; color: #4e7195; }
body.store-body .hero-utility-actions .store-action-icon { color: #4e7195; }
body.store-body .hero-utility-actions .store-action-btn:hover { background: #e8f0f8; border-color: #aac8e0; }
body.store-body .language-chip { color: #4f7ba3; }
body.store-body .language-chip.active { background: #dceafa; color: #29517a; }
body.store-body .social-caption,
body.store-body .collection-heading,
body.store-body .collection-heading h2,
body.store-body .store-footer strong { color: #29517a; }
body.store-body .collection-heading .eyebrow,
body.store-body #product-count-label,
body.store-body .search-box > strong,
body.store-body .filter-combo-trigger > strong,
body.store-body .catalog-loading { color: #4f7ba3; }
body.store-body .store-benefits { border-color: #dce6f1; }
body.store-body .store-benefits > span,
body.store-body .store-benefits b { color: #46739c; }
body.store-body .category-chip { border-color: #bdd2e6; color: #4e7195; }
body.store-body .category-chip.active { border-color: #7fa9cf; background: #dceafa; color: #29517a; }
body.store-body .category-chip:hover:not(.active) { background: #e6eff9; color: #29517a; }
body.store-body #clear-product-filters { color: #4f7ba3; }
body.store-body .sort-control,
body.store-body .sort-control select { color: #4f7ba3; }
body.store-body .sort-control select option { background: #fff; color: #16333f; }
body.store-body .store-footer,
body.store-body .store-footer .footer-note { border-color: #dce6f1; }
body.store-body .store-footer strong > span,
body.store-body .store-footer p,
body.store-body .footer-links button { color: #4e7195; }

/* Use the full phone canvas without squeezing the featured product. */
@media (max-width: 640px) {
  body.store-body .store-announcement { display: none; }
  body.store-body .page-shell { width: 100%; padding-inline: 0; }
  body.store-body .store-hero {
    width: 100%;
    margin-inline: 0;
    padding: 8px 12px;
  }
  body.store-body .hero-brand-card { width: 40px; height: 40px; flex-basis: 40px; }
  body.store-body .hero h1 { font-size: clamp(19px, 5.5vw, 23px); }
  body.store-body .hero-utility-stack { width: auto; margin: 7px 12px 10px; }
  body.store-body .social-link { height: 38px; min-height: 38px; }
  body.store-body .discovery-hero { border-right: 0; border-left: 0; border-radius: 0; }
  body.store-body .store-benefits,
  body.store-body .layout,
  body.store-body .store-footer { margin-inline: 12px; }
  body.store-body .discovery-copy { padding: 19px 20px 16px; }
  body.store-body .discovery-copy h2 { margin: 8px 0; font-size: clamp(37px, 10.4vw, 44px); }
  body.store-body .discovery-description { margin-bottom: 10px; }
  body.store-body .discovery-cta { width: 100%; }
  body.store-body .discovery-visual { min-height: 0; }
  body.store-body .discovery-products { width: 100%; padding: 18px 12px 16px; }
  body.store-body .discovery-feature { width: 100%; max-width: none; padding: 10px; border-radius: 17px; }
  body.store-body .discovery-product,
  body.store-body .discovery-product:nth-child(n) { aspect-ratio: 1.9; }
  body.store-body .discovery-feature-bottom { padding: 9px 4px 5px; }
  body.store-body .discovery-feature-view { min-height: 36px; }
  body.store-body .bottom-nav { bottom: var(--store-vv-bottom, 0px); }
  body.store-body .beauty-chat { right: 14px; bottom: calc(var(--store-vv-bottom, 0px) + var(--store-nav-height, 64px) + 8px); }
  body.store-body .beauty-chat.is-minimized .beauty-chat-mini { bottom: calc(var(--store-vv-bottom, 0px) + var(--store-nav-height, 64px) + 8px); }
  body.store-body .beauty-chat-launcher { width: 52px; min-height: 52px; justify-content: center; padding: 0; border-radius: 50%; }
  body.store-body .beauty-chat-launcher > span:first-child { font-size: 23px; }
  body.store-body .beauty-chat-launcher [data-chat-open] { display: none; }
}

/* iOS home-screen shortcuts may report a viewport that includes the home
   indicator. Keep actions clear of that area even when its safe inset is 0. */
@media (max-width: 900px) {
  body.store-body { --store-bottom-gap: var(--store-vv-bottom, 0px); }
  body.store-body.ios-standalone {
    --store-bottom-gap: max(var(--store-vv-bottom, 0px), env(safe-area-inset-bottom, 0px), 40px);
  }
  body.store-body .bottom-nav { bottom: var(--store-bottom-gap); }
  body.store-body.ios-standalone .bottom-nav {
    padding-bottom: 8px;
  }
  body.store-body.ios-standalone .bottom-nav::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: var(--store-bottom-gap);
    background: #fffffff5;
  }
  body.store-body .beauty-chat {
    bottom: calc(var(--store-bottom-gap) + var(--store-nav-height, 64px) + 8px);
  }
  body.store-body .beauty-chat.is-minimized .beauty-chat-mini {
    bottom: calc(var(--store-bottom-gap) + var(--store-nav-height, 64px) + 8px);
  }
}

@media (max-width: 320px) {
  body.store-body .social-link::after { display: none; }
  body.store-body .social-link svg { width: 17px; height: 17px; flex-basis: 17px; }
}

@media (min-width: 641px) and (max-width: 720px) {
  body.store-body .hero-top-row,
  body.store-body .hero-utility-actions { gap: 6px; }
  body.store-body .hero-brand-row { gap: 8px; }
  body.store-body .hero-brand-card { width: 42px; height: 42px; flex-basis: 42px; }
  body.store-body .hero h1 { font-size: 24px; white-space: nowrap; }
  body.store-body .hero-utility-actions .store-action-btn { width: 34px; height: 34px; min-height: 34px; padding: 7px; }
  body.store-body .hero-utility-actions .language-switch { margin-left: 0; }
  body.store-body .language-chip { min-height: 28px; padding: 4px 6px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  body.store-body .bottom-nav { padding-top: 4px; padding-bottom: 4px; }
  body.store-body .bottom-nav-item { min-height: 38px; gap: 1px; }
  body.store-body .bottom-nav-item svg { width: 16px; height: 16px; }
  body.store-body .bottom-nav-item > span:not(.cart-icon-badge) { font-size: 8px; line-height: 1.1; }
}

/* Static light and opaque surfaces reduce continuous GPU work on phones. */
@media (hover: none), (pointer: coarse) {
  body.store-body::before, body.store-body::after { animation: none; transform: none; }
  body.store-body .product-card::before, body.store-body .cart-row::before {
    animation: none !important;
    background: linear-gradient(135deg, #d7eafb, #f2f8fd, #a9d3ec);
  }
  body.store-body .store-hero, body.store-body .bottom-nav, body.store-body .discovery-feature {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.store-body .store-hero, body.store-body .bottom-nav { background: #f9fcff; }
  body.store-body .discovery-feature { background: #fafdff; }
  body.store-body .discovery-image-glow { filter: none; opacity: .18; }
}

/* Softer surfaces and clearer reading hierarchy across the storefront. */
body.store-body .discovery-feature,
body.store-body .product-card { box-shadow: 0 10px 30px rgb(30 77 104 / 8%); }
body.store-body .social-link { transition: background-color .18s ease, border-color .18s ease; }
body.store-body .beauty-chat-messages { gap: 12px; }
body.store-body .beauty-chat-bubble { line-height: 1.7; overflow-wrap: anywhere; }
body.store-body .beauty-chat-form textarea:focus-visible { outline: 2px solid #438db2; outline-offset: 1px; }
body.store-body .beauty-chat-voice-status { padding: 6px 12px; background: #eef7fc; color: #245b79; font-size: 12px; line-height: 1.5; }
body.store-body .beauty-chat-form .beauty-chat-voice { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; background: #edf5fa; color: #276f90; border: 1px solid #cfe0ee; }
body.store-body .beauty-chat-form .beauty-chat-voice.is-listening { background: #cbeaf8; border-color: #317e9f; color: #164e70; }
body.store-body .beauty-chat-form textarea { min-width: 0; }
@media (max-width: 360px) { body.store-body .beauty-chat-form { gap: 6px; padding-inline: 8px; } }
body.store-body .beauty-chat-launcher { -webkit-touch-callout: none; user-select: none; }
@keyframes ksnPetBody { 0%, 100% { transform: translateY(0); } 30%, 65% { transform: translateY(-2px); } }
@keyframes ksnPetHead { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(5deg); } }
@keyframes ksnPetArm { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-22deg); } 45%, 75% { transform: rotate(12deg); } }
@keyframes ksnPetBlink { 0%, 28%, 37%, 100% { transform: scaleY(1); } 32%, 34% { transform: scaleY(.12); } }
body.store-body .beauty-chat-pet { display: grid; width: 54px; height: 54px; flex: 0 0 54px; margin: -12px; }
body.store-body .beauty-chat-pet svg { width: 100%; height: 100%; overflow: visible; }
body.store-body .beauty-chat-pet svg g { transform-box: fill-box; transform-origin: center; }
body.store-body .beauty-chat-pet .pet-body { animation: ksnPetBody 3s ease-in-out 1; }
body.store-body .beauty-chat-pet .pet-head { transform-origin: center bottom; animation: ksnPetHead 3s ease-in-out 1; }
body.store-body .beauty-chat-pet .pet-arm { transform-origin: left bottom; animation: ksnPetArm 3s ease-in-out 1; }
body.store-body .beauty-chat-pet .pet-eyes { animation: ksnPetBlink 3s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { body.store-body .beauty-chat-pet svg g { animation: none; } }
@media (max-width: 640px) {
  body.store-body .beauty-chat-launcher { position: relative; overflow: visible; }
  body.store-body .beauty-chat-pet { width: 76px; height: 76px; flex: 0 0 76px; }
  body.store-body .beauty-chat-launcher.show-help [data-chat-open] {
    display: block; position: absolute; right: calc(100% + 8px); top: 50%;
    transform: translateY(-50%); padding: 7px 10px; border-radius: 10px;
    background: #fff; color: #245b79; box-shadow: 0 4px 14px #1b536927;
    font-size: 11px; white-space: nowrap; pointer-events: none;
  }
}

/* Keep checkout controls and supporting text easy to scan. */
body.store-body .delivery-region-field select { width: 100%; }
body.store-body .store-drawer-head [data-close-store-panel] { min-height: 44px; border-radius: 10px; }
body.store-body .checkout-form label > span { font-weight: 650; }
body.store-body .cart-row { border-radius: 14px; }
body.store-body .checkout-progress > [data-checkout-step] { line-height: 1.4; }

/* Product detail: one scrolling content area keeps descriptions readable. */
body.store-body .product-modal-card {
  width: min(1100px, calc(100vw - 48px));
  height: min(760px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
body.store-body .product-detail-visual { min-height: 0; background-repeat: no-repeat; background-position: center; background-size: contain !important; }
body.store-body .product-detail-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 36px);
}
body.store-body .product-detail-content > * { flex-shrink: 0; }
body.store-body .product-detail-description {
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 14px 16px;
  color: #365c70;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
body.store-body .product-detail-head { padding-right: 36px; }
body.store-body .product-detail-actions > button { min-height: 48px; border-radius: 10px; }
@media (max-width: 640px) {
  body.store-body .product-modal-card {
    width: calc(100vw - 16px);
    height: min(92dvh, 820px);
    max-height: calc(100dvh - 16px);
    grid-template-rows: minmax(180px, 34dvh) minmax(0, 1fr);
  }
  body.store-body .product-detail-visual { min-height: 180px; max-height: none; }
  body.store-body .product-detail-content { padding: 16px; gap: 12px; }
  body.store-body .product-detail-actions { bottom: -16px; margin: 2px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); backdrop-filter: none; background: #fff; }
}
@media (max-width: 640px) {
  body.store-body .store-benefits > span { font-size: 10px; line-height: 1.5; }
  body.store-body .bottom-nav-item { font-size: 10px; line-height: 1.15; }
  body.store-body .checkout-form label > span { font-size: 13px; }
  body.store-body .discovery-feature-view { min-height: 40px; font-size: 10px; }
}

/* Product reply context stays above the composer, including on small screens. */
body.store-body .beauty-chat-reply { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 10px 12px; border-top: 1px solid #cfe0ee; border-left: 3px solid #317e9f; background: #edf6fb; color: #173c50; }
body.store-body .beauty-chat-reply[hidden] { display: none; }
body.store-body .beauty-chat-reply img { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: #fff; }
body.store-body .beauty-chat-reply > div { flex: 1; min-width: 0; }
body.store-body .beauty-chat-reply small, body.store-body .beauty-chat-reply strong { display: block; }
body.store-body .beauty-chat-reply small { font-size: 11px; color: #39718b; }
body.store-body .beauty-chat-reply strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.store-body .beauty-chat-reply button { flex: 0 0 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #276f90; font-size: 24px; cursor: pointer; }
body.store-body .beauty-chat-product-actions { flex-wrap: wrap; }
body.store-body .beauty-chat-product-actions [data-chat-action="ask"] { border-color: #83b5cc; background: #fff; }
body.store-body .beauty-chat-product-quote { display: block; margin-bottom: 6px; padding: 4px 8px; border-left: 2px solid currentColor; font-size: 11px; opacity: .85; }

/* Per-message actions remain visible and easy to tap on touch devices. */
body.store-body .beauty-chat-response { display: contents; }
body.store-body .beauty-chat-message-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; white-space: normal; }
body.store-body .beauty-chat-message-actions button { min-height: 44px; padding: 6px 12px; border: 1px solid #ccdeea; border-radius: 10px; background: #f1f7fc; color: #285b78; font: inherit; font-size: 12px; cursor: pointer; }
body.store-body .beauty-chat-message-actions button:focus-visible { outline: 2px solid #267ea4; outline-offset: 2px; }
body.store-body .beauty-chat-bubble.user .beauty-chat-message-actions { margin-top: 6px; }
body.store-body .beauty-chat-bubble.user .beauty-chat-message-actions button { background: #ffffff1a; color: #fff; border-color: #ffffff66; }

body.store-body .beauty-chat-user-actions { align-self: flex-end; margin-top: -8px; }
body.store-body .beauty-chat-message-actions button[data-message-action] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 32px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: #597c90; }
body.store-body .beauty-chat-message-actions button[data-message-action]:hover { background: #dcebf580; }
body.store-body .beauty-chat-message-actions button[data-copy-state="copied"] { color: #287b63; }
@media (pointer: coarse) {
  body.store-body .beauty-chat-message-actions button[data-message-action] { width: 44px; height: 44px; }
}

/* Floating pet: the character is the launcher, with no enclosing button fill. */
body.store-body .beauty-chat-launcher {
  --pet-safe-top: env(safe-area-inset-top, 0px);
  --pet-safe-left: env(safe-area-inset-left, 0px);
  --pet-safe-right: env(safe-area-inset-right, 0px);
  --pet-safe-bottom: env(safe-area-inset-bottom, 0px);
  position: fixed; display: grid; place-items: center; width: 80px; height: 80px;
  min-height: 0; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; touch-action: none;
  cursor: grab; transition: none; -webkit-tap-highlight-color: transparent;
}
body.store-body .beauty-chat-launcher.is-dragging { cursor: grabbing; }
body.store-body .beauty-chat-launcher:focus-visible { outline: 2px solid #267ea4; outline-offset: 2px; border-radius: 16px; }
body.store-body .beauty-chat-launcher .beauty-chat-pet { width: 100%; height: 100%; margin: 0; flex: none; }
body.store-body .beauty-chat-launcher [data-chat-open] { display: none; }
body.store-body .beauty-chat-launcher.show-help [data-chat-open] {
  display: block; position: absolute; right: calc(100% + 6px); left: auto; top: 50%;
  transform: translateY(-50%); padding: 7px 10px; border-radius: 10px;
  background: #fff; color: #245b79; box-shadow: 0 4px 14px #1b536927;
  font-size: 11px; white-space: nowrap; pointer-events: none;
}
body.store-body .beauty-chat-launcher[data-pet-edge="left"].show-help [data-chat-open] { left: calc(100% + 6px); right: auto; }
body.store-body .beauty-chat-pet .pet-body,
body.store-body .beauty-chat-pet .pet-head,
body.store-body .beauty-chat-pet .pet-arm,
body.store-body .beauty-chat-pet .pet-eyes { animation: none; }
@keyframes ksnPetHelloArm {
  0%, 100% { transform: rotate(0); }
  15%, 45%, 75% { transform: rotate(-12deg); }
  30%, 60%, 90% { transform: rotate(18deg); }
}
body.store-body .beauty-chat-launcher.is-waving .pet-arm { transform-box: view-box; transform-origin: 51px 54px; animation: ksnPetHelloArm 2.4s ease-in-out 1; }
body.store-body .beauty-chat-launcher.is-waving .pet-head { animation: ksnPetHead 2.4s ease-in-out 1; }
body.store-body .beauty-chat-launcher.is-waving .pet-body { animation: ksnPetBody 2.4s ease-in-out 1; }
body.store-body .beauty-chat-launcher.is-waving .pet-eyes { animation: ksnPetHelloEyes 2.4s ease-in-out 1; }
@media (max-width: 640px) { body.store-body .beauty-chat-launcher { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  body.store-body .beauty-chat-launcher.is-waving .pet-arm,
  body.store-body .beauty-chat-launcher.is-waving .pet-head,
  body.store-body .beauty-chat-launcher.is-waving .pet-body,
  body.store-body .beauty-chat-launcher.is-waving .pet-eyes { animation: none; }
}

/* Two soft blinks during the greeting; eyes stay still between greetings. */
@keyframes ksnPetHelloEyes {
  0%, 18%, 28%, 62%, 72%, 100% { transform: scaleY(1); }
  22%, 24%, 66%, 68% { transform: scaleY(.12); }
}

/* Tiny inline companion stays at the reveal edge without a layout tracking loop. */
body.store-body .beauty-chat-writing-pet { display: inline-block; width: 30px; height: 30px; margin-inline: 3px; vertical-align: middle; pointer-events: none; user-select: none; }
body.store-body .beauty-chat-writing-pet svg { display: block; width: 100%; height: 100%; overflow: visible; animation: ksnWritingPet .6s ease-in-out 4; }
body.store-body .beauty-chat-writing-pet .pet-eyes { transform-box: fill-box; transform-origin: center; animation: ksnPetHelloEyes 1.2s ease-in-out 2; }
body.store-body .beauty-chat-writing-pet .pet-arm { transform-box: view-box; transform-origin: 51px 54px; animation: ksnPetHelloArm 1.2s ease-in-out 2; }
@keyframes ksnWritingPet { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  body.store-body .beauty-chat-writing-pet { display: none; }
  body.store-body .beauty-chat-writing-pet svg, body.store-body .beauty-chat-writing-pet svg g { animation: none; }
}

/* =====================================================================
   Phone/touch polish (2026-11-01)
   Cards: a tap opens details and photos already swipe, so the arrows and the
   second "View Details" button only repeated that on a ~160px card. Chip rows
   keep their sideways scroll without a visible bar.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  .product-card .thumbnail-slide.previous,
  .product-card .thumbnail-slide.next { display: none !important; }
}
.product-card .thumbnail-slide-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 36, 58, 0.55);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 720px) {
  .product-card .view-product { display: none !important; }
  .product-card .add-to-cart {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
  }
  .product-card .product-card-actions { gap: 0; margin-top: 10px; }
}

/* Horizontal chip rows: scroll, but no grey bar under the chips.
   body.store-body keeps these above the site-wide `body.store-body *`
   thin-scrollbar rule in styles.css. */
body.store-body .category-quick-links,
body.store-body .beauty-chat-quick {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.store-body .category-quick-links::-webkit-scrollbar,
body.store-body .beauty-chat-quick::-webkit-scrollbar { display: none; }

/* Chat input: no inner scrollbar while it fits; placeholder on one line. */
body.store-body #beauty-chat-input { scrollbar-width: none; }
body.store-body #beauty-chat-input::-webkit-scrollbar { display: none; }
body.store-body #beauty-chat-input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bag item: name + remove on top, [ - qty + ] stepper and line total below. */
body.store-body .cart-row { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
body.store-body .cart-item-main { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
body.store-body .cart-thumb { width: 64px; height: 64px; border-radius: 10px; }
body.store-body .cart-item-main strong { font-size: 15px; font-weight: 600; color: #15303d; line-height: 1.4; }
body.store-body .cart-item-main p { margin: 4px 0 0; font-size: 13px; color: #5f7786; }
body.store-body .cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8a9daa; cursor: pointer; }
body.store-body .cart-remove:hover { background: #fbeef4; color: #c2457a; }
body.store-body .cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #e3ebf2; }
body.store-body .cart-item-bottom > strong { font-size: 17px; font-weight: 700; color: #15303d; }
body.store-body .cart-controls { display: inline-flex; align-items: center; justify-self: auto; gap: 0; width: auto; margin: 0; padding: 0; border: 1px solid #d3e0ea; border-radius: 999px; background: #fff; }
body.store-body .cart-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #2f6f93; font-size: 22px; font-weight: 500; line-height: 1; box-shadow: none; cursor: pointer; }
body.store-body .cart-controls button:hover:enabled { background: #eef5fa; }
body.store-body .cart-controls button:disabled { color: #b8c9d6; }
body.store-body .cart-controls span { min-width: 32px; text-align: center; font-size: 16px; font-weight: 600; color: #15303d; }

/* Bag item, one row: [photo] [name / price / total] [- qty +]. */
body.store-body .cart-row { gap: 0; }
body.store-body .cart-item-main { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; }
body.store-body .cart-thumb { width: 56px; height: 56px; }
body.store-body .cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.store-body .cart-item-info strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.store-body .cart-item-info p { margin: 0; }
body.store-body .cart-line-total { font-size: 15px; font-weight: 700; color: #15303d; }
body.store-body .cart-item-main .cart-controls { align-self: center; }
body.store-body .cart-controls button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 20px; }
body.store-body .cart-controls span { min-width: 26px; font-size: 15px; }
body.store-body .cart-controls button[title="Remove"], body.store-body .cart-controls button[title="លុប"] { color: #c2457a; }

/* Bag item: [photo] [name] [price] [- qty +] on one line. */
body.store-body .cart-item-main { grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; }
body.store-body .cart-thumb { width: 48px; height: 48px; border-radius: 8px; }
body.store-body .cart-item-info strong { font-size: 14px; }
body.store-body .cart-item-info p { font-size: 12px; }
body.store-body .cart-line-total { white-space: nowrap; text-align: right; }

/* Bag: same columns on every row so price and quantity line up. */
body.store-body .cart-row { align-items: stretch; }
body.store-body .cart-item-main { width: 100%; justify-self: stretch; justify-content: stretch; grid-template-columns: 48px minmax(0, 1fr) 84px 124px; }
body.store-body .cart-item-main .cart-controls { justify-self: end; justify-content: space-between; width: 124px; box-sizing: border-box; }
body.store-body .cart-line-total { justify-self: end; }
@media (min-width: 641px) {
  body.store-body .cart-item-main { grid-template-columns: 56px minmax(0, 1fr) 96px 132px; gap: 16px; }
  body.store-body .cart-thumb { width: 56px; height: 56px; }
  body.store-body .cart-item-main .cart-controls { width: 132px; }
}
@media (max-width: 400px) {
  body.store-body .cart-item-main { grid-template-columns: 44px minmax(0, 1fr) 64px 112px; gap: 8px; }
  body.store-body .cart-thumb { width: 44px; height: 44px; }
  body.store-body .cart-item-main .cart-controls { width: 112px; }
  body.store-body .cart-controls button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
}

/* Checkout: choose Phnom Penh (door) or Province (courier pickup) first. */
body.store-body .delivery-area { display: flex; flex-direction: column; gap: 10px; }
body.store-body .delivery-area-title { font-size: 16px; font-weight: 700; color: #15303d; }
body.store-body .delivery-area-option { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid #dde7f0; border-radius: 14px; background: #fff; color: #15303d; text-align: left; cursor: pointer; }
body.store-body .delivery-area-option[aria-checked="true"] { border: 1.5px solid #2f6f93; background: #f2f8fc; }
body.store-body .delivery-area-dot { flex: 0 0 auto; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #b8c9d6; border-radius: 50%; background: #fff; }
body.store-body .delivery-area-option[aria-checked="true"] .delivery-area-dot { border: 6px solid #2f6f93; }
body.store-body .delivery-area-text { display: flex; flex-direction: column; }
body.store-body .delivery-area-text strong { font-size: 15px; font-weight: 600; }
body.store-body .delivery-area-text small { font-size: 13px; color: #5f7786; }
body.store-body .province-pickup { display: flex; flex-direction: column; gap: 14px; }
body.store-body .province-pickup-note { margin: 0; font-size: 14px; color: #5f7786; }
body.store-body .province-pickup input { min-height: 50px; font-size: 16px; }

/* Map: nearest courier branch (auto-detected from the customer's pin). */
body.store-body .branch-suggest { display: grid; gap: 8px; margin: 0 0 10px; padding: 12px; border: 1px solid #f2c9db; border-radius: 12px; background: #fbeef4; color: #15303d; font-size: 14px; }
body.store-body .branch-suggest p { margin: 0; }
body.store-body .branch-suggest-use { justify-self: start; min-height: 40px; }
body.store-body .delivery-branch-card.is-nearest { border-color: #c2457a; box-shadow: 0 0 0 2px #fbeef4; }
body.store-body .branch-nearest-badge { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #c2457a; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
body.store-body .branch-distance { margin-left: 8px; color: #2f6f93; font-weight: 700; }
.courier-pin.is-nearest span { background: #c2457a !important; color: #fff !important; transform: scale(1.15); }

/* =====================================================================
   UI step 1: foundation (2026-11-05)
   Readable type, one font family for English and Khmer, brand tokens with a
   soft rose accent, 44px tap targets and a calm background. Overrides only:
   remove this block to return to the previous look.
   ===================================================================== */
body.store-body {
  --ui-primary: #2f6f93;
  --ui-primary-strong: #245a78;
  --ui-primary-soft: #e6f0f8;
  --ui-accent: #c2457a;
  --ui-accent-soft: #fbeef4;
  --ui-ink: #15303d;
  --ui-ink-2: #3f5a69;
  --ui-ink-3: #5f7786;
  --ui-line: #dde7f0;
  --ui-surface: #ffffff;
  --ui-page: #f5f8fb;
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 1px 2px rgb(21 48 61 / 5%), 0 8px 24px rgb(21 48 61 / 6%);
  --ui-font: "Kantumruy Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Khmer", Arial, sans-serif;
  --wine: var(--ui-primary);
  --store-primary: var(--ui-primary);
  --store-primary-dark: var(--ui-primary-strong);
  --store-text: var(--ui-ink);
  --store-muted: var(--ui-ink-3);
  background: var(--ui-page);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Calm, still background: no always-moving layers behind the products. */
body.store-body::before,
body.store-body::after { animation: none !important; }
body.store-body::before {
  background: radial-gradient(40% 32% at 8% 0%, rgb(47 111 147 / 9%), transparent 70%),
              radial-gradient(34% 28% at 96% 4%, rgb(194 69 122 / 6%), transparent 70%);
  transform: none;
}
body.store-body::after { background: none; }

/* One font family everywhere; Georgia had no Khmer letters. */
body.store-body h1, body.store-body h2, body.store-body h3,
body.store-body .hero h1, body.store-body .discovery-copy h2,
body.store-body .discovery-visual-note {
  font-family: var(--ui-font);
  color: var(--ui-ink);
}
body.store-body .hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
body.store-body .discovery-copy h2 { font-weight: 700; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.12; letter-spacing: -.02em; }
body.store-body .discovery-description { max-width: 420px; color: var(--ui-ink-2); font-size: 16px; line-height: 1.7; }
body.store-body .discovery-visual-note { font-style: normal; font-weight: 600; font-size: 15px; color: var(--ui-accent); }

/* Readable small text: nothing below 11px, Khmer labels at 12px+. */
body.store-body .store-announcement { font-size: 13px; letter-spacing: 0; }
body.store-body .eyebrow,
body.store-body .hero-eyebrow, body.store-body #hero-eyebrow,
body.store-body .discovery-visual-label,
body.store-body .discovery-feature-brand { font-size: 12px; letter-spacing: .08em; color: var(--ui-accent); }
body.store-body .discovery-caption { font-size: 13px; color: var(--ui-ink-3); }
body.store-body .product-brand { font-size: 11px; letter-spacing: .06em; color: var(--ui-ink-3); }
body.store-body .product-title-row h3 { min-height: 46px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ui-ink); }
body.store-body .product-category { font-size: 12px; color: var(--ui-ink-3); }
body.store-body .price { color: var(--ui-ink); font-size: 17px; font-weight: 700; }
body.store-body .compare-price { color: var(--ui-ink-3); font-size: 13px; text-decoration: line-through; }
body.store-body .compare-price ~ .price,
body.store-body .price-stack:has(.compare-price) .price { color: var(--ui-accent); }
body.store-body .discovery-feature-name { font-size: 16px; }
body.store-body .discovery-feature-price { font-size: 14px; color: var(--ui-ink-2); }

/* Buttons: one clear style, 44px tall, readable label. */
body.store-body .primary-btn,
body.store-body .secondary-btn { min-height: 44px; border-radius: var(--ui-radius-sm); font-size: 14px; font-weight: 600; }
body.store-body .primary-btn { background: var(--ui-primary); border-color: var(--ui-primary); }
body.store-body .primary-btn:hover:enabled,
body.store-body a.primary-btn:hover { background: var(--ui-primary-strong); border-color: var(--ui-primary-strong); }
body.store-body .secondary-btn { border-color: var(--ui-line); color: var(--ui-primary-strong); }
body.store-body .discovery-cta { background: var(--ui-ink); border-color: var(--ui-ink); }
body.store-body .discovery-feature-view { min-height: 40px; font-size: 13px; border-radius: var(--ui-radius-sm); }

/* 44px tap targets for icon buttons, language and social links. */
body.store-body .hero-utility-actions .store-action-btn { width: 44px; height: 44px; min-height: 44px; }
body.store-body .language-chip { min-height: 36px; min-width: 44px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
body.store-body .language-chip.active { background: var(--ui-primary); color: #fff; }
@media (min-width: 641px) {
  body.store-body .social-link { width: 40px; height: 40px; background: var(--ui-surface); border-color: var(--ui-line); }
  body.store-body .social-link svg { width: 18px; height: 18px; }
}
/* Phones: four even pills with the full channel name. */
@media (max-width: 640px) {
  body.store-body .social-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
  body.store-body .social-link { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 0 4px; gap: 4px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); box-shadow: 0 1px 2px rgb(21 48 61 / 5%); }
  body.store-body .social-link::after { overflow: visible; color: var(--ui-ink-2); font-size: 11px; font-weight: 600; text-overflow: clip; letter-spacing: 0; }
  body.store-body .social-link svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--ui-primary); }
}
@media (max-width: 360px) {
  body.store-body .social-link::after { display: none; }
  body.store-body .social-link svg { flex-basis: 18px; width: 18px; height: 18px; }
}

/* "The daily essentials": a small rose pill, never over the product card. */
body.store-body .discovery-visual-label {
  display: inline-flex; align-items: center; gap: 6px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.4;
}
body.store-body .discovery-visual-label::before { content: "✦"; font-size: 11px; }
@media (max-width: 720px) {
  body.store-body .discovery-visual { flex-direction: column; align-items: stretch; }
  body.store-body .discovery-visual-label {
    position: static; align-self: flex-start;
    margin: 4px 0 12px 4px;
  }
}

/* Cards and panels: softer edges, one shadow. */
body.store-body .product-card { border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
body.store-body .discovery-hero { border-color: var(--ui-line); border-radius: 20px; background: linear-gradient(135deg, #eef5fb 0%, #f8eef4 100%); }
body.store-body :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

@media (max-width: 720px) {
  body.store-body { font-size: 15px; }
  body.store-body .product-brand { font-size: 11px; }
  body.store-body .product-title-row h3 { min-height: 42px; font-size: 14px; line-height: 1.5; }
  body.store-body .price { font-size: 16px; }
  body.store-body .compare-price { font-size: 12px; }
  body.store-body .product-category { font-size: 11px; }
  body.store-body .language-chip { font-size: 12px; }
}