:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #697381;
  --line: #dde4ea;
  --paper: #ffffff;
  --soft: #f5f7f2;
  --green: #1f7a55;
  --green-dark: #14563c;
  --coral: #dc6955;
  --gold: #c9952c;
  --blue: #2f6f9f;
  --shadow: 0 18px 55px rgba(23, 32, 42, 0.12);
}

/* Premium visual layer: editorial retail, restrained and crisp. */
:root {
  --ink: #111820;
  --muted: #64707d;
  --line: #d7dee4;
  --paper: #ffffff;
  --soft: #f3f6f8;
  --green: #174f3d;
  --green-dark: #0f372b;
  --coral: #c95d4f;
  --gold: #b78939;
  --blue: #264f73;
  --charcoal: #111820;
  --shadow: 0 24px 70px rgba(17, 24, 32, 0.12);
  --soft-shadow: 0 18px 46px rgba(17, 24, 32, 0.08);
}

body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 44%, #ffffff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 24, 32, 0.026) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 76%);
}

.site-header {
  min-height: 76px;
  border-bottom: 1px solid rgba(17, 24, 32, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 34px rgba(17, 24, 32, 0.055);
}

.brand {
  gap: 12px;
}

.brand-mark {
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: var(--charcoal);
  box-shadow: 0 12px 24px rgba(17, 24, 32, 0.14);
}

.brand strong {
  font-size: 16px;
  letter-spacing: 0;
}

.brand small {
  color: #8a949f;
  font-size: 11px;
  text-transform: uppercase;
}

.main-nav {
  color: #596672;
  font-size: 14px;
  font-weight: 800;
}

.main-nav a,
.main-nav button {
  position: relative;
}

.main-nav a::after,
.main-nav button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.main-nav a:hover::after,
.main-nav button:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

.account-button,
.logout-button,
.dev-button,
.cart-button,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.quick-collections button,
.filters button {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.account-button,
.logout-button {
  border: 1px solid rgba(17, 24, 32, 0.08);
  background: #f3f6f8;
}

.language-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 32, 0.12);
  border-radius: 999px;
  color: var(--charcoal);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(17, 24, 32, 0.08);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

html body[data-language="en"] .product-card h3,
html body[data-language="en"] .detail-info h1 {
  overflow-wrap: anywhere;
  word-break: normal;
}

html body[data-language="en"] .product-card .product-body p,
html body[data-language="en"] .detail-desc {
  line-height: 1.58;
}

html body[data-language="en"] .add-button,
html body[data-language="en"] .primary-link,
html body[data-language="en"] .secondary-link,
html body[data-language="en"] .checkout,
html body[data-language="en"] .account-button,
html body[data-language="en"] .cart-button {
  white-space: normal;
  line-height: 1.18;
}

html body[data-language="en"] .product-card .add-button {
  min-height: 48px;
}

html body[data-language="en"] .detail-actions {
  align-items: stretch;
}

html body[data-language="en"] .dev-english-card {
  border-color: rgba(14, 165, 233, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.98)),
    #ffffff !important;
}

.account-button:hover,
.logout-button:hover,
.language-button:hover,
.primary-link:hover,
.secondary-link:hover,
.add-button:hover,
.checkout:hover,
.cart-button:hover {
  transform: translateY(-1px);
}

.dev-button,
.cart-button,
.primary-link,
.checkout {
  background: var(--charcoal);
  box-shadow: 0 14px 30px rgba(17, 24, 32, 0.16);
}

.dev-button:hover,
.cart-button:hover,
.primary-link:hover,
.checkout:hover {
  background: var(--green-dark);
}

.secondary-link {
  border-color: rgba(17, 24, 32, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.06);
}

.commerce-hero {
  position: relative;
  min-height: calc(100svh - 76px);
  padding-top: clamp(42px, 7vw, 86px);
  padding-bottom: clamp(26px, 5vw, 54px);
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 44%, rgba(17, 24, 32, 0.08) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
  overflow: hidden;
}

.commerce-hero::after {
  content: "";
  position: absolute;
  right: clamp(18px, 5vw, 64px);
  bottom: 0;
  left: clamp(18px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, rgba(183, 137, 57, 0.5), rgba(17, 24, 32, 0.08), transparent);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy h1,
.hero-copy p:not(.eyebrow) {
  color: #ffffff;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 0.94;
  font-weight: 950;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.86;
}

.hero-actions {
  margin-top: 34px;
}

.featured-product {
  min-height: min(62svh, 560px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: #eef2f5;
  box-shadow: 0 34px 84px rgba(17, 24, 32, 0.18);
}

.featured-product img {
  min-height: min(62svh, 560px);
}

.featured-product::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(17, 24, 32, 0.42));
}

.featured-product div {
  z-index: 1;
  right: 22px;
  bottom: 22px;
  left: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(17, 24, 32, 0.74);
}

.featured-product strong {
  font-size: clamp(23px, 2.2vw, 32px);
}

.catalog-search-band {
  padding-top: clamp(30px, 5vw, 58px);
}

.catalog-search {
  max-width: 1320px;
  margin: 0 auto;
}

.catalog-search input {
  min-height: 64px;
  border-color: rgba(17, 24, 32, 0.09);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--soft-shadow);
}

.store-shell {
  grid-template-columns: 250px minmax(0, 1fr);
  max-width: 1450px;
  margin: 0 auto;
}

.filters {
  border-color: rgba(17, 24, 32, 0.09);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--soft-shadow);
}

.panel-heading span,
.catalog-head h2 {
  color: var(--charcoal);
}

.panel-heading button,
.quick-collections button {
  border: 1px solid rgba(17, 24, 32, 0.08);
  color: #43515f;
  background: #f5f7f9;
}

.quick-collections button.active,
.quick-collections button:hover {
  border-color: var(--charcoal);
  color: #fff;
  background: var(--charcoal);
}

.catalog-head {
  padding-top: 4px;
}

.catalog-head h2 {
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1;
  font-weight: 950;
}

.catalog-head > span {
  padding: 8px 12px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.product-grid {
  gap: clamp(16px, 2vw, 26px);
}

.product-card {
  border-color: rgba(17, 24, 32, 0.09);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(17, 24, 32, 0.04);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(17, 24, 32, 0.14);
}

.product-media {
  background:
    linear-gradient(135deg, rgba(17, 24, 32, 0.04), rgba(183, 137, 57, 0.08)),
    #edf1f3;
}

.product-media img {
  transition: transform 380ms ease;
}

.product-card:hover .product-media img {
  transform: scale(1.035);
}

.badge {
  top: 14px;
  left: 14px;
  color: #fff;
  background: rgba(17, 24, 32, 0.82);
  box-shadow: 0 10px 24px rgba(17, 24, 32, 0.18);
}

.product-body {
  gap: 14px;
  padding: 18px;
}

.product-meta span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-card h3 {
  min-height: 54px;
  color: var(--charcoal);
  font-size: 20px;
  font-weight: 950;
}

.price-row strong {
  color: var(--charcoal);
  font-size: 24px;
}

.price-row span {
  color: var(--green-dark);
}

.add-button {
  min-height: 46px;
  margin: 0 18px 18px;
  background: var(--charcoal);
}

.wishlist-button {
  border: 1px solid rgba(17, 24, 32, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

.wishlist-button.active {
  background: var(--coral);
}

.service-strip {
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  border-color: rgba(17, 24, 32, 0.08);
  background: rgba(17, 24, 32, 0.08);
  box-shadow: var(--soft-shadow);
}

.service-strip article {
  padding: clamp(22px, 3vw, 34px);
}

.service-strip strong {
  color: var(--charcoal);
  font-size: 18px;
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer {
  border-left: 1px solid rgba(17, 24, 32, 0.08);
  box-shadow: -26px 0 70px rgba(17, 24, 32, 0.18);
}

.cart-overlay,
.account-overlay,
.orders-overlay,
.support-chat-overlay {
  background: rgba(17, 24, 32, 0.54);
  backdrop-filter: blur(4px);
}

.cart-head,
.account-panel-head,
.orders-head,
.support-chat-head {
  background: #fbfcfd;
}

.balance-card {
  background:
    linear-gradient(135deg, rgba(183, 137, 57, 0.22), transparent 36%),
    var(--charcoal);
  box-shadow: var(--soft-shadow);
}

.member-card,
.coupon-row,
.member-product,
.order-list-row,
.support-chat-order {
  border-color: rgba(17, 24, 32, 0.09);
  background: rgba(255, 255, 255, 0.96);
}

.detail-page {
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 42%, transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
}

.detail-back-button {
  border-color: rgba(17, 24, 32, 0.1);
  color: var(--charcoal);
  box-shadow: var(--soft-shadow);
}

.detail-media {
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 34px 84px rgba(17, 24, 32, 0.18);
}

.detail-info h1,
.detail-desc,
.detail-rating {
  color: #fff;
}

.detail-info h1 {
  font-weight: 950;
}

.detail-desc,
.detail-rating {
  color: rgba(255, 255, 255, 0.76);
}

.detail-price {
  color: #fff;
}

.detail-block {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.detail-block h2 {
  color: #fff;
}

.highlight-list li {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.spec-list {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.15);
}

.spec-list div {
  background: rgba(255, 255, 255, 0.09);
}

.spec-list dt,
.spec-list dd {
  color: rgba(255, 255, 255, 0.82);
}

.related-section {
  padding-top: 46px;
}

@media (max-width: 1050px) {
  .commerce-hero,
  .detail-page {
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.88) 54%, #f4f7f9 54%, #ffffff 100%);
  }

  .store-shell {
    grid-template-columns: 1fr;
  }

  .filters {
    grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(240px, 1fr);
  }
}

@media (max-width: 900px) {
  .main-nav a,
  .main-nav button {
    background: rgba(17, 24, 32, 0.05);
  }

  .main-nav a::after,
  .main-nav button::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .commerce-hero {
    min-height: auto;
    padding-top: 34px;
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 56%, #f4f7f9 56%, #ffffff 100%);
  }

  .hero-copy h1 {
    font-size: clamp(42px, 15vw, 64px);
  }

  .featured-product,
  .featured-product img {
    min-height: 340px;
  }

  .store-shell,
  .catalog-search-band,
  .related-section {
    padding-right: 14px;
    padding-left: 14px;
  }

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

  .product-card h3 {
    min-height: auto;
  }

  .detail-page {
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 64%, #ffffff 64%);
  }
}

/* Detail page readability correction. */
.detail-info h1,
.detail-desc,
.detail-rating,
.detail-price,
.detail-block h2 {
  color: var(--charcoal);
}

.detail-desc,
.detail-rating {
  color: #4f5b67;
}

.detail-block {
  border-top-color: rgba(17, 24, 32, 0.12);
}

.highlight-list li {
  background: #eef6f1;
  color: var(--green-dark);
}

.spec-list {
  border-color: rgba(17, 24, 32, 0.12);
  background: rgba(17, 24, 32, 0.12);
}

.spec-list div {
  background: #fff;
}

.spec-list dt {
  color: var(--muted);
}

.spec-list dd {
  color: var(--charcoal);
}

/* Final cascade lock for v21 premium UI and motion. */
.product-card {
  isolation: isolate;
  border-color: rgba(17, 24, 32, 0.085) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 248, 0.94)) !important;
  box-shadow: 0 12px 34px rgba(17, 24, 32, 0.06) !important;
  animation: shopFadeUp 380ms var(--premium-ease) both;
  transition:
    transform var(--premium-medium) var(--premium-ease),
    box-shadow var(--premium-medium) var(--premium-ease),
    border-color var(--premium-medium) ease !important;
}

.product-card:hover {
  border-color: rgba(17, 24, 32, 0.16) !important;
  transform: translateY(-7px) !important;
  box-shadow: var(--premium-ring) !important;
}

.product-card:hover .product-media img {
  transform: scale(1.045) !important;
  filter: saturate(1.03) contrast(1.02);
}

.add-button.is-added {
  background: var(--green-dark) !important;
}

.cart-count-pulse {
  animation: cartCountPulse 520ms var(--premium-ease);
}

.cart-drawer {
  width: min(460px, 100vw) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%) !important;
  box-shadow: -24px 0 70px rgba(17, 24, 32, 0.2) !important;
  transition: transform 260ms var(--premium-ease) !important;
}

.cart-item {
  grid-template-columns: 82px 1fr !important;
  gap: 14px !important;
  margin-bottom: 12px;
  padding: 12px !important;
  border: 1px solid rgba(17, 24, 32, 0.08) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.06);
}

.cart-summary {
  gap: 14px !important;
  padding: 20px 24px 22px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff) !important;
  box-shadow: 0 -18px 42px rgba(17, 24, 32, 0.08);
}

.checkout-dialog:not(.open) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
  animation: none !important;
}

.checkout-dialog.open {
  animation: shopFadeUp 240ms var(--premium-ease) both;
}

/* v24 stronger browser chrome clearance: final cascade layer. */
:root {
  --browser-chrome-clearance: max(env(safe-area-inset-top, 0px), 0px);
}

.site-header {
  top: var(--browser-chrome-clearance) !important;
  padding-top: calc(18px + var(--browser-chrome-clearance)) !important;
  min-height: calc(88px + var(--browser-chrome-clearance)) !important;
}

@media (min-width: 900px) {
  .site-header {
    padding-top: calc(58px + var(--browser-chrome-clearance)) !important;
    min-height: calc(126px + var(--browser-chrome-clearance)) !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-top: calc(18px + var(--browser-chrome-clearance)) !important;
    min-height: calc(92px + var(--browser-chrome-clearance)) !important;
  }
}

/* v35 final overlay lock guard. */
body.modal-scroll-locked {
  overscroll-behavior: none !important;
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.dev-drawer,
.checkout-dialog,
.cart-items,
.account-panel-body,
.orders-list,
.orders-detail,
.support-chat-list,
.support-chat-thread,
.support-messages,
.dev-body {
  overscroll-behavior: contain !important;
}

.support-message p {
  white-space: pre-wrap !important;
}

/* v36 final view routing guard. */
[hidden] {
  display: none !important;
}
/* v36 final view routing guard. */
[hidden] {
  display: none !important;
}

/* v36 final view routing guard. */
[hidden] {
  display: none !important;
}

/* v36 view routing guard: hidden views must stay hidden. */
[hidden] {
  display: none !important;
}

/* v35 global overlay scroll lock: panels scroll, product page stays still. */
body.modal-scroll-locked {
  overscroll-behavior: none;
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.dev-drawer,
.checkout-dialog {
  overscroll-behavior: contain;
}

.cart-items,
.account-panel-body,
.orders-list,
.orders-detail,
.support-chat-list,
.support-chat-thread,
.support-messages,
.dev-body,
.checkout-dialog {
  overscroll-behavior: contain;
}

/* v32 support chat activation fix: keep chat above orders and easy to exit. */
.support-chat-overlay {
  z-index: 82 !important;
}

.support-chat-drawer {
  z-index: 83 !important;
  width: min(640px, 100vw) !important;
  background: #f7f9f8 !important;
}

.support-chat-drawer.open {
  transform: translateX(0) !important;
}

.support-chat-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 62px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.94);
}

.support-chat-head button {
  width: 36px !important;
  height: 36px !important;
  font-size: 24px !important;
}

.support-chat-body {
  grid-template-columns: 186px minmax(0, 1fr) !important;
}

.support-chat-thread {
  display: grid;
  grid-template-rows: max-content max-content minmax(0, 1fr) max-content !important;
  min-height: 0;
  overflow: hidden !important;
  padding: 12px !important;
}

.support-messages {
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 720px) {
  .support-chat-drawer {
    width: 100vw !important;
  }

  .support-chat-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }
}

/* v33 reserved support interfaces: product routing and custom stickers. */
.support-message-context {
  display: block;
  color: rgba(100, 112, 125, 0.9);
  font-size: 11px;
  font-weight: 700;
}

.support-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.support-sticker {
  display: block;
  width: 72px;
  max-width: 34vw;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.72);
}

.support-sticker-token {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

/* v34 support chat text: preserve Shift+Enter line breaks after sending. */
.support-message p {
  white-space: pre-wrap !important;
}

/* v26 cart comfort: adding items should not trap the shopper. */
.cart-continue {
  min-height: 48px;
  border: 1px solid rgba(17, 24, 32, 0.14);
  border-radius: 8px;
  color: var(--charcoal);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.cart-continue:hover {
  border-color: rgba(17, 24, 32, 0.28);
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.08);
}

.cart-toast {
  position: fixed;
  right: clamp(16px, 4vw, 42px);
  bottom: clamp(18px, 5vw, 42px);
  z-index: 75;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(17, 24, 32, 0.94);
  box-shadow: 0 20px 48px rgba(17, 24, 32, 0.22);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 180ms var(--premium-ease),
    transform 180ms var(--premium-ease);
}

.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.cart-toast button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--charcoal);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 720px) {
  .cart-toast {
    right: 14px;
    bottom: 14px;
    left: 14px;
    justify-content: space-between;
  }
}

/* v31 compact customer support chat. */
.support-chat-drawer {
  width: min(640px, 100vw) !important;
  grid-template-rows: auto 1fr auto !important;
  background: #f7f9f8 !important;
}

.support-chat-head {
  min-height: 62px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.92);
}

.support-chat-head strong {
  font-size: 18px;
}

.support-chat-head button {
  width: 34px !important;
  height: 34px !important;
  font-size: 22px !important;
}

.support-chat-body {
  grid-template-columns: 186px minmax(0, 1fr) !important;
  background: #f7f9f8;
}

.support-chat-list {
  padding: 10px !important;
  background: #f2f5f4 !important;
}

.support-chat-order {
  gap: 3px !important;
  margin-bottom: 8px !important;
  padding: 10px !important;
  border-color: rgba(17, 24, 32, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

.support-chat-order strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-chat-order span,
.support-chat-order em {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.support-chat-order.active,
.support-chat-order:hover {
  border-color: rgba(17, 24, 32, 0.2) !important;
  background: #fff !important;
}

.support-chat-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 12px !important;
  overflow: hidden !important;
}

.support-chat-order-card {
  gap: 4px !important;
  margin-bottom: 10px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(17, 24, 32, 0.045);
}

.support-chat-order-card > div {
  align-items: baseline !important;
}

.support-chat-order-card strong {
  font-size: 13px;
}

.support-chat-order-card p,
.support-chat-order-card span {
  overflow: hidden;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-context-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 10px;
}

.support-context-strip span {
  flex: 0 1 auto;
  align-self: flex-start;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  color: #154431;
  background: rgba(222, 241, 229, 0.9);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-messages {
  min-height: 0 !important;
  max-height: none !important;
  gap: 8px !important;
  padding: 2px 4px 10px !important;
}

.support-message {
  width: min(68%, 360px) !important;
  gap: 2px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.support-message span {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.support-message p {
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.45;
}

.support-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px !important;
  padding-top: 10px !important;
}

.support-chat-composer textarea {
  min-height: 44px !important;
  max-height: 96px;
  padding: 11px 12px !important;
  resize: vertical;
}

.support-chat-composer .primary-link {
  min-height: 44px;
  padding: 0 16px;
}

.support-chat-drawer .orders-message {
  min-height: 0;
  padding: 0 12px 10px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .support-chat-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .support-chat-list {
    display: flex;
    gap: 8px;
    max-height: none !important;
    overflow-x: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .support-chat-order {
    min-width: 174px;
    margin-bottom: 0 !important;
  }

  .support-message {
    width: min(82%, 360px) !important;
  }
}

/* v22 performance polish: keep micro-interactions, stop list/page replay animations. */
main > section:not(.auth-gate),
.catalog-search-band,
.service-strip,
.related-section,
.product-card {
  animation: none !important;
}

/* v23 browser chrome clearance: keep sticky navigation below overlaying toolbars. */
:root {
  --browser-chrome-clearance: max(env(safe-area-inset-top, 0px), 0px);
}

.site-header {
  top: var(--browser-chrome-clearance) !important;
  padding-top: calc(14px + var(--browser-chrome-clearance)) !important;
}

@media (min-width: 900px) {
  .site-header {
    padding-top: calc(26px + var(--browser-chrome-clearance)) !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-top: calc(12px + var(--browser-chrome-clearance)) !important;
  }
}

/* Final cascade lock for v21 premium UI and motion. */
.product-card {
  isolation: isolate;
  border-color: rgba(17, 24, 32, 0.085) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 248, 0.94)) !important;
  box-shadow: 0 12px 34px rgba(17, 24, 32, 0.06) !important;
  animation: shopFadeUp 380ms var(--premium-ease) both;
  transition:
    transform var(--premium-medium) var(--premium-ease),
    box-shadow var(--premium-medium) var(--premium-ease),
    border-color var(--premium-medium) ease !important;
}

.product-card:hover {
  border-color: rgba(17, 24, 32, 0.16) !important;
  transform: translateY(-7px) !important;
  box-shadow: var(--premium-ring) !important;
}

.product-card:hover .product-media img {
  transform: scale(1.045) !important;
  filter: saturate(1.03) contrast(1.02);
}

.add-button.is-added {
  background: var(--green-dark) !important;
}

.cart-count-pulse {
  animation: cartCountPulse 520ms var(--premium-ease);
}

.cart-drawer {
  width: min(460px, 100vw) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%) !important;
  box-shadow: -24px 0 70px rgba(17, 24, 32, 0.2) !important;
  transition: transform 260ms var(--premium-ease) !important;
}

.cart-item {
  grid-template-columns: 82px 1fr !important;
  gap: 14px !important;
  margin-bottom: 12px;
  padding: 12px !important;
  border: 1px solid rgba(17, 24, 32, 0.08) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.06);
}

.cart-summary {
  gap: 14px !important;
  padding: 20px 24px 22px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff) !important;
  box-shadow: 0 -18px 42px rgba(17, 24, 32, 0.08);
}

/* Emergency detail contrast lock: keep product detail readable on every cache path. */
html body main .detail-page {
  background: #ffffff !important;
}

html body main .detail-page .detail-info,
html body main .detail-page .detail-info h1,
html body main .detail-page .detail-desc,
html body main .detail-page .detail-rating,
html body main .detail-page .detail-price,
html body main .detail-page .detail-block h2,
html body main .detail-page .back-link,
html body main .detail-page .spec-list dt,
html body main .detail-page .spec-list dd {
  color: #111820 !important;
  text-shadow: none !important;
}

html body main .detail-page .detail-desc,
html body main .detail-page .detail-rating {
  color: #4f5b67 !important;
}

html body main .detail-page .detail-block {
  border-top-color: rgba(17, 24, 32, 0.12) !important;
}

html body main .detail-page .highlight-list li {
  background: #eef6f1 !important;
  color: #0f372b !important;
}

html body main .detail-page .spec-list {
  border-color: rgba(17, 24, 32, 0.12) !important;
  background: rgba(17, 24, 32, 0.12) !important;
}

html body main .detail-page .spec-list div {
  background: #ffffff !important;
}

/* Final premium interaction layer: tactile retail polish without visual noise. */
:root {
  --premium-ease: cubic-bezier(.2, .78, .18, 1);
  --premium-fast: 160ms;
  --premium-medium: 280ms;
  --premium-ring: 0 0 0 1px rgba(17, 24, 32, .08), 0 22px 60px rgba(17, 24, 32, .11);
}

@keyframes shopFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cartCountPulse {
  0% {
    transform: scale(1);
  }
  36% {
    transform: scale(1.22);
    box-shadow: 0 0 0 8px rgba(201, 93, 79, .14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wishlistPop {
  0% {
    transform: scale(.88);
  }
  55% {
    transform: scale(1.13);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes addedSheen {
  from {
    transform: translateX(-130%) skewX(-18deg);
  }
  to {
    transform: translateX(180%) skewX(-18deg);
  }
}

main > section:not(.auth-gate),
.catalog-search-band,
.service-strip,
.related-section {
  animation: shopFadeUp 360ms var(--premium-ease) both;
}

.product-card {
  isolation: isolate;
  border-color: rgba(17, 24, 32, .085) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 248, .94)) !important;
  box-shadow: 0 12px 34px rgba(17, 24, 32, .06) !important;
  transition:
    transform var(--premium-medium) var(--premium-ease),
    box-shadow var(--premium-medium) var(--premium-ease),
    border-color var(--premium-medium) ease !important;
  animation: shopFadeUp 380ms var(--premium-ease) both;
}

.product-card:nth-child(2) { animation-delay: 45ms; }
.product-card:nth-child(3) { animation-delay: 90ms; }
.product-card:nth-child(4) { animation-delay: 135ms; }
.product-card:nth-child(n + 5) { animation-delay: 170ms; }

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, rgba(183, 137, 57, .14), transparent 36%, rgba(23, 79, 61, .1));
  transition: opacity var(--premium-medium) ease;
}

.product-card:hover {
  border-color: rgba(17, 24, 32, .16) !important;
  transform: translateY(-7px) !important;
  box-shadow: var(--premium-ring) !important;
}

.product-card:hover::after {
  opacity: 1;
}

.product-media {
  overflow: hidden;
}

.product-media img {
  transform-origin: center;
  transition:
    transform 520ms var(--premium-ease),
    filter 520ms ease !important;
}

.product-card:hover .product-media img {
  transform: scale(1.045) !important;
  filter: saturate(1.03) contrast(1.02);
}

.product-body {
  gap: 13px !important;
}

.product-meta span:first-child,
.eyebrow {
  letter-spacing: .02em;
}

.price-row span {
  position: relative;
  color: var(--green-dark) !important;
}

.price-row span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--premium-medium) var(--premium-ease);
}

.product-card:hover .price-row span::after {
  transform: scaleX(1);
}

.add-button,
.detail-actions .primary-link {
  position: relative;
  overflow: hidden;
}

.add-button::after,
.detail-actions .primary-link::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 34%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
}

.add-button:hover,
.detail-actions .primary-link:hover {
  box-shadow: 0 16px 34px rgba(17, 24, 32, .18);
}

.add-button.is-added {
  background: var(--green-dark) !important;
}

.add-button.is-added::after {
  opacity: 1;
  animation: addedSheen 760ms var(--premium-ease);
}

.wishlist-button,
.detail-actions [data-wishlist] {
  transition:
    transform var(--premium-fast) var(--premium-ease),
    background var(--premium-fast) ease,
    color var(--premium-fast) ease,
    box-shadow var(--premium-fast) ease !important;
}

.wishlist-button:hover,
.detail-actions [data-wishlist]:hover {
  transform: translateY(-1px) scale(1.03);
}

.wishlist-button.active,
.detail-actions [data-wishlist].wishlist-pop {
  animation: wishlistPop 360ms var(--premium-ease);
}

.cart-button strong {
  transform-origin: center;
}

.cart-count-pulse {
  animation: cartCountPulse 520ms var(--premium-ease);
}

.cart-drawer {
  width: min(460px, 100vw) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%) !important;
  box-shadow: -24px 0 70px rgba(17, 24, 32, .2) !important;
  transition: transform 260ms var(--premium-ease) !important;
}

.cart-overlay {
  backdrop-filter: blur(8px);
  background: rgba(17, 24, 32, .48) !important;
}

.cart-head {
  min-height: 86px !important;
  padding: 22px 24px !important;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
}

.cart-head strong {
  margin-top: 3px;
  font-size: 18px;
}

.cart-items {
  padding: 18px 20px !important;
}

.cart-item {
  grid-template-columns: 82px 1fr !important;
  gap: 14px !important;
  margin-bottom: 12px;
  padding: 12px !important;
  border: 1px solid rgba(17, 24, 32, .08) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(17, 24, 32, .06);
  animation: shopFadeUp 260ms var(--premium-ease) both;
}

.cart-item img {
  width: 82px !important;
  height: 82px !important;
  border: 1px solid rgba(17, 24, 32, .06);
  background: #eef3f5;
}

.cart-line strong,
.cart-line > span {
  color: var(--charcoal);
}

.quantity {
  border-color: rgba(17, 24, 32, .1) !important;
  background: #fff;
}

.quantity button {
  transition:
    background var(--premium-fast) ease,
    transform var(--premium-fast) var(--premium-ease);
}

.quantity button:hover {
  background: #e9f0ed;
  transform: scale(1.04);
}

.cart-summary {
  gap: 14px !important;
  padding: 20px 24px 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), #ffffff) !important;
  box-shadow: 0 -18px 42px rgba(17, 24, 32, .08);
}

.cart-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.checkout {
  border-radius: 8px;
}

.checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 55, 43, .22);
}

.checkout-dialog {
  animation: shopFadeUp 240ms var(--premium-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Clear product detail page and restrained motion polish. */
.detail-page {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
}

.detail-media {
  background:
    linear-gradient(135deg, rgba(17, 24, 32, 0.04), rgba(183, 137, 57, 0.08)),
    #edf1f3;
}

.dev-upload-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed rgba(17, 24, 32, 0.2);
  border-radius: 8px;
  background: #f6f8fa;
}

.dev-upload-box button {
  justify-self: start;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--charcoal);
  cursor: pointer;
  font-weight: 900;
}

.dev-upload-box em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.dev-file-input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

@keyframes premiumFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy,
.featured-product,
.catalog-search-band,
.filters,
.catalog,
.detail-media,
.detail-info,
.service-strip article {
  animation: premiumFadeUp 520ms ease both;
}

.featured-product {
  animation-delay: 90ms;
}

.catalog,
.detail-info {
  animation-delay: 120ms;
}

.product-card {
  animation: premiumFadeUp 420ms ease both;
}

.product-card:nth-child(2) {
  animation-delay: 40ms;
}

.product-card:nth-child(3) {
  animation-delay: 80ms;
}

.product-card:nth-child(n + 4) {
  animation-delay: 110ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

.detail-info h1,
.detail-desc,
.detail-rating,
.detail-price,
.detail-block h2 {
  color: var(--charcoal);
}

.detail-desc,
.detail-rating {
  color: #4f5b67;
}

.detail-block {
  border-top-color: rgba(17, 24, 32, 0.12);
}

.highlight-list li {
  background: #eef6f1;
  color: var(--green-dark);
}

.spec-list {
  border-color: rgba(17, 24, 32, 0.12);
  background: rgba(17, 24, 32, 0.12);
}

.spec-list div {
  background: #fff;
}

.spec-list dt {
  color: var(--muted);
}

.spec-list dd {
  color: var(--charcoal);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #fbfcfa;
  font-family:
    Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 14px clamp(18px, 5vw, 64px);
  border-bottom: 1px solid rgba(221, 228, 234, 0.85);
  background: rgba(251, 252, 250, 0.88);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  font-weight: 800;
  overflow: hidden;
  flex: 0 0 auto;
}

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

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 4vw, 34px);
  color: var(--muted);
  font-size: 15px;
}

.main-nav a,
.main-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  white-space: nowrap;
}

.main-nav button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.main-nav a:hover,
.main-nav button:hover,
.main-nav a.active {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.cart-button,
.account-button,
.logout-button,
.dev-button,
.primary-link,
.secondary-link,
.filters button,
.quick-collections button,
.checkout {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.account-button,
.logout-button,
.dev-button {
  min-height: 42px;
  padding: 0 13px;
  color: var(--ink);
  background: #eef2f5;
}

.account-button:hover,
.logout-button:hover,
.dev-button:hover {
  background: #e4ebef;
}

.dev-button {
  color: #fff;
  background: var(--blue);
}

.dev-button:hover {
  background: #25587e;
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  color: #fff;
  background: var(--green);
}

.cart-button strong {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--green-dark);
  background: #fff;
  font-size: 13px;
}

main {
  overflow: hidden;
}

.commerce-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(38px, 7vw, 82px) clamp(18px, 5vw, 64px) 28px;
  background:
    linear-gradient(120deg, rgba(31, 122, 85, 0.13), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f4f7f1 100%);
}

.hero-copy {
  max-width: 650px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.98;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0;
}

.hero-copy p:not(.eyebrow) {
  max-width: 560px;
  color: #4e5c68;
  font-size: 18px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-weight: 700;
}

.primary-link {
  color: #fff;
  background: var(--green);
}

.secondary-link {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}

.featured-product {
  position: relative;
  display: block;
  min-height: 450px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: inherit;
  cursor: pointer;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.featured-product:hover {
  transform: translateY(-2px);
}

.featured-product.is-fading {
  opacity: 0.25;
  transform: translateY(4px);
}

.featured-product img {
  width: 100%;
  height: 100%;
  min-height: 450px;
  object-fit: cover;
  display: block;
}

.featured-product div {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  max-width: 360px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: rgba(23, 32, 42, 0.74);
  backdrop-filter: blur(12px);
}

.featured-product span,
.featured-product small {
  color: rgba(255, 255, 255, 0.78);
}

.featured-product strong {
  font-size: 24px;
}

.store-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  padding: 0 clamp(18px, 5vw, 64px) clamp(22px, 4vw, 46px);
}

.catalog-search-band {
  padding: clamp(22px, 4vw, 42px) clamp(18px, 5vw, 64px) 18px;
}

.catalog-search {
  display: grid;
  gap: 10px;
}

.catalog-search span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.catalog-search input {
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  box-shadow: 0 14px 36px rgba(23, 32, 42, 0.06);
}

.single-product-shell {
  display: block;
}

.single-product-shell .catalog {
  max-width: 960px;
}

.single-product-shell .product-grid {
  grid-template-columns: minmax(0, 1fr);
}

.filters {
  align-self: start;
  position: sticky;
  top: 92px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.filters > * {
  min-width: 0;
}

.panel-heading,
.catalog-head,
.cart-head,
.cart-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.filters .panel-heading {
  grid-column: auto;
}

.panel-heading span {
  font-size: 18px;
  font-weight: 800;
}

.panel-heading button {
  padding: 7px 10px;
  color: var(--green-dark);
  background: #eaf4ee;
}

.field,
fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.field span,
legend {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

input[type="search"],
select,
.price-filter input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.sort-field {
  align-self: start;
}

.sort-field select {
  min-height: 44px;
}

.price-filter div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.price-filter label {
  display: grid;
  gap: 8px;
}

.price-filter label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--green);
}

fieldset label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  color: #34414d;
}

fieldset input {
  accent-color: var(--green);
}

fieldset input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.catalog {
  min-width: 0;
}

.catalog-head {
  align-items: end;
  margin-bottom: 18px;
}

.catalog-head span {
  color: var(--muted);
  font-weight: 700;
}

.quick-collections {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 16px;
}

.quick-collections button {
  min-width: max-content;
  padding: 10px 14px;
  color: #384550;
  background: #eef2f5;
}

.quick-collections button.active,
.quick-collections button:hover {
  color: #fff;
  background: var(--blue);
}

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

.product-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.single-product-card {
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto;
}

.single-product-card .product-media {
  min-height: 360px;
  aspect-ratio: auto;
}

.single-product-card .add-button {
  grid-column: 2;
  margin: 0 18px 18px;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(23, 32, 42, 0.1);
}

.product-link {
  display: grid;
  grid-template-rows: auto 1fr;
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 0.78;
  overflow: hidden;
  background: #edf1f3;
}

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

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--coral);
  font-size: 12px;
  font-weight: 800;
}

.product-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.product-meta,
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-meta span {
  color: var(--muted);
  font-size: 13px;
}

.product-card h3 {
  margin: 0;
  min-height: 50px;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0;
}

.card-spec-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

.card-spec-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.card-spec-list dt,
.card-spec-list dd {
  margin: 0;
}

.card-spec-list dt {
  color: var(--muted);
  font-weight: 800;
}

.card-spec-list dd {
  color: var(--ink);
}

.about-page {
  padding: clamp(46px, 7vw, 88px) clamp(18px, 5vw, 64px);
}

.about-intro {
  max-width: 980px;
  margin: 0 auto clamp(34px, 6vw, 72px);
}

.about-page .about-intro {
  display: none;
}

.about-page h1,
.about-page h2 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
}

.about-page p:not(.eyebrow) {
  max-width: 760px;
  color: #4e5c68;
  font-size: 19px;
  line-height: 1.9;
}

.about-story {
  max-width: 1180px;
  margin: 0 auto;
}

.about-story-stage {
  position: relative;
  display: grid;
  grid-template-areas: "story";
  height: min(760px, calc(100svh - 112px));
  min-height: 560px;
  width: min(1180px, calc(100vw - clamp(36px, 10vw, 128px)));
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 8px;
  background: #dce8ee;
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  isolation: isolate;
  outline: none;
}

.about-story-stage::-webkit-scrollbar {
  display: none;
}

.about-story-visual {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  grid-area: story;
  align-self: start;
  height: 100%;
  overflow: hidden;
  background: #dce8ee;
  pointer-events: none;
}

.about-story-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 760ms ease,
    transform 1200ms ease;
}

.about-story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(120deg, rgba(4, 10, 18, 0.42), rgba(4, 10, 18, 0.2) 46%, rgba(4, 10, 18, 0.54));
}

.about-story-image.active {
  opacity: 1;
  transform: scale(1);
}

.about-story-copy-stack {
  position: relative;
  z-index: 1;
  grid-area: story;
  min-height: 100%;
}

.about-story-section {
  display: grid;
  height: min(760px, calc(100svh - 112px));
  min-height: 560px;
  align-items: center;
  padding: clamp(20px, 5vw, 64px);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.about-story-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  box-sizing: border-box;
  width: min(720px, calc(100% - 32px));
  max-width: 100%;
  max-height: none;
  padding: clamp(10px, 2vw, 18px);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(0, 0, 0, 0.8);
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.about-story-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px -18px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 20%, rgba(5, 15, 28, 0.34), transparent 62%),
    linear-gradient(90deg, rgba(5, 15, 28, 0.42), rgba(5, 15, 28, 0.16) 64%, transparent);
  filter: blur(1px);
}

.about-page .about-story-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.2vw, 46px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.about-page .about-story-copy p {
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.about-story-link {
  justify-self: start;
  min-width: 132px;
  margin-top: 4px;
  padding: 13px 18px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.about-story-section.image-left .about-story-copy,
.about-story-section.image-bottom .about-story-copy {
  justify-self: start;
}

.about-story-section.image-right .about-story-copy,
.about-story-section.image-top .about-story-copy {
  justify-self: end;
}

.about-story-section.image-top {
  align-items: start;
}

.about-story-section.image-bottom {
  align-items: end;
}

.product-body p {
  display: -webkit-box;
  min-height: 48px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price-row strong {
  font-size: 21px;
}

.price-row span {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.rating {
  color: var(--gold);
  font-weight: 800;
}

.add-button {
  min-height: 42px;
  margin: 0 16px 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.add-button:hover {
  background: var(--green-dark);
}

.wishlist-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(23, 32, 42, 0.12);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
}

.wishlist-button.active {
  color: #fff;
  background: var(--coral);
}

.empty-state {
  margin: 24px 0 0;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
}

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 clamp(18px, 5vw, 64px) 60px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.service-strip article {
  display: grid;
  gap: 6px;
  padding: 24px;
  background: #fff;
}

.service-strip span {
  color: var(--muted);
}

.cart-overlay,
.account-overlay,
.orders-overlay,
.support-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(23, 32, 42, 0.45);
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(420px, 100vw);
  height: 100dvh;
  background: #fff;
  box-shadow: -16px 0 40px rgba(23, 32, 42, 0.18);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.cart-drawer.open,
.account-panel.open,
.orders-drawer.open,
.support-chat-drawer.open {
  transform: translateX(0);
}

.cart-head,
.account-panel-head,
.orders-head,
.support-chat-head {
  min-height: 78px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.cart-head span,
.cart-head strong,
.account-panel-head span,
.account-panel-head strong,
.orders-head span,
.orders-head strong,
.support-chat-head span,
.support-chat-head strong {
  display: block;
}

.cart-head span,
.account-panel-head span,
.orders-head span,
.support-chat-head span {
  color: var(--muted);
  font-size: 13px;
}

.cart-head button,
.account-panel-head button,
.orders-head button,
.support-chat-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #f0f3f5;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.account-panel {
  width: min(460px, 100vw);
}

.orders-drawer,
.support-chat-drawer {
  width: min(720px, 100vw);
}

.account-panel-head,
.orders-head,
.support-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-panel-body {
  display: grid;
  gap: 18px;
  overflow: auto;
  padding: 18px;
}

.balance-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
}

.balance-card span {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.balance-card strong {
  font-size: 34px;
}

.member-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.member-card-head,
.coupon-row,
.member-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.member-card-head span,
.coupon-row span,
.member-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.member-section {
  display: grid;
  gap: 8px;
}

.coupon-list,
.member-product-list {
  display: grid;
  gap: 8px;
}

.coupon-row,
.member-product {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.coupon-row > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.coupon-row button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  cursor: pointer;
  font-weight: 800;
}

.coupon-row button:disabled {
  color: var(--muted);
  background: #eef2f5;
  cursor: not-allowed;
}

.coupon-row em {
  color: var(--green-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.member-product {
  justify-content: flex-start;
  color: var(--ink);
  font-weight: 800;
}

.member-product a {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.member-product span {
  min-width: 0;
}

.member-product button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  flex: 0 0 auto;
}

.member-product button:hover {
  color: var(--coral);
  border-color: rgba(221, 104, 86, 0.5);
}

.member-product img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f5;
}

.account-form {
  display: grid;
  gap: 14px;
}

.account-address-block {
  display: grid;
  gap: 12px;
}

.account-phone-bind {
  padding: 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(235, 246, 239, 0.86);
}

.account-phone-bind p {
  margin: -4px 0 0;
  color: #667482;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

.account-phone-bind button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.account-field-title {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

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

.account-form label {
  display: grid;
  gap: 8px;
}

.account-form label span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.account-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.account-message {
  min-height: 22px;
  margin: 0;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
}

.account-message-button {
  position: relative;
  gap: 8px;
}

.account-message-button i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e35d4f;
  box-shadow: 0 0 0 4px rgba(227, 93, 79, 0.16);
}

.orders-body,
.support-chat-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.orders-list,
.support-chat-list {
  overflow: auto;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.order-list-row,
.support-chat-order {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.support-chat-unread {
  position: absolute;
  top: 13px;
  right: 13px;
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e35d4f;
  box-shadow: 0 0 0 3px rgba(227, 93, 79, 0.16);
}

.support-chat-order.has-unread {
  padding-right: 32px;
}

.support-chat-order.has-unread .support-chat-unread {
  display: block;
}

.order-list-row.active,
.order-list-row:hover,
.support-chat-order.active,
.support-chat-order:hover {
  border-color: var(--blue);
}

.order-list-row span,
.support-chat-order span,
.support-chat-order em {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.support-chat-order em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-detail,
.support-chat-thread {
  overflow: auto;
  padding: 18px;
}

.orders-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-weight: 800;
}

.order-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.order-detail-head span,
.order-address {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.order-items {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.order-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
}

.order-item img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f5;
}

.order-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.order-detail-actions {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.support-chat-order-card {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.support-chat-order-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-chat-order-card span,
.support-chat-order-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.support-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 260px;
  max-height: min(48vh, 520px);
  overflow: auto;
  padding: 4px 4px 14px;
}

.support-message {
  display: grid;
  gap: 4px;
  width: min(78%, 460px);
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef2f5;
  color: var(--ink);
}

.support-message.own {
  justify-self: end;
  background: #dff2e8;
}

.support-message.other {
  justify-self: start;
  background: #eef2f5;
}

.support-message span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.support-message p {
  margin: 0;
  font-weight: 800;
}

.support-chat-composer {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.support-chat-composer textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}

.primary-link:disabled,
.secondary-link:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.orders-message {
  min-height: 24px;
  margin: 0;
  padding: 0 18px 14px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.cart-items {
  overflow: auto;
  padding: 14px 18px;
}

.cart-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.cart-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item img {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
}

.cart-item h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quantity {
  display: inline-grid;
  grid-template-columns: 32px 34px 32px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.quantity button {
  height: 32px;
  border: 0;
  background: #f4f6f7;
  cursor: pointer;
}

.quantity span {
  text-align: center;
  font-weight: 800;
}

.remove {
  border: 0;
  color: var(--coral);
  background: transparent;
  cursor: pointer;
}

.cart-summary {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid var(--line);
  background: #fbfcfa;
}

.total-row {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 20px;
}

.checkout {
  min-height: 48px;
  color: #fff;
  background: var(--green);
  font-weight: 800;
}

.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(10 16 22 / 42%);
}

.checkout-dialog {
  position: fixed;
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 5vw, 72px);
  z-index: 91;
  width: min(440px, calc(100vw - 36px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgb(23 38 51 / 24%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.checkout-dialog.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.checkout-dialog-head,
.checkout-confirm-summary,
.checkout-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkout-dialog-head {
  margin-bottom: 18px;
}

.checkout-dialog-head span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-dialog-head strong {
  color: var(--ink);
  font-size: 24px;
}

.checkout-dialog-head button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: #eef2f5;
  color: var(--ink);
  font-size: 26px;
  cursor: pointer;
}

.checkout-address-form {
  display: grid;
  gap: 14px;
}

.checkout-address-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-address-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.checkout-address-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.checkout-address-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-address-card strong {
  color: var(--ink);
  line-height: 1.7;
}

.checkout-address-card .secondary-link {
  width: max-content;
  min-height: 38px;
  padding: 0 14px;
}

.checkout-address-form textarea {
  width: 100%;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.checkout-confirm-summary {
  padding: 14px;
  border-radius: 8px;
  background: #f4f8f6;
  color: var(--muted);
  font-weight: 800;
}

.checkout-confirm-summary strong {
  color: var(--ink);
  font-size: 24px;
}

.checkout-message {
  min-height: 20px;
  margin: 0;
  color: var(--coral);
  font-size: 13px;
  font-weight: 800;
}

.auth-locked .site-header,
.auth-locked main,
.auth-locked .cart-drawer,
.auth-locked .cart-overlay,
.auth-locked .account-panel,
.auth-locked .account-overlay,
.auth-locked .orders-drawer,
.auth-locked .orders-overlay,
.auth-locked .support-chat-drawer,
.auth-locked .support-chat-overlay,
.auth-locked .dev-drawer,
.auth-locked .dev-overlay {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(20px, 4vw, 56px);
  background: #f3f8fc;
  backdrop-filter: blur(14px);
}

.auth-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: min(1120px, 100%);
  height: clamp(640px, calc(100dvh - 56px), 760px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(24px, 5vw, 58px);
  background: #d7e5ef;
  box-shadow: var(--shadow);
}

.auth-visual {
  position: absolute;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  background: #d7e5ef;
}

.auth-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-orientation: from-image;
  transform: none;
}

.auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 22, 36, 0.16), rgba(10, 22, 36, 0.08) 42%, rgba(10, 22, 36, 0.48)),
    linear-gradient(180deg, rgba(10, 22, 36, 0.08), rgba(10, 22, 36, 0.56));
}

.auth-visual-copy {
  position: absolute;
  right: auto;
  bottom: clamp(24px, 4vw, 48px);
  left: clamp(24px, 5vw, 58px);
  z-index: 1;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100% - 560px));
  color: #fff;
}

.auth-visual-copy strong {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.auth-visual-copy span {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}

.auth-card {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(420px, 100%);
  max-height: 100%;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 50px rgba(23, 32, 42, 0.22);
  backdrop-filter: blur(18px);
  overflow-y: auto;
  overflow-x: hidden;
}

.auth-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 999px;
  color: rgba(17, 24, 32, 0.62);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.auth-close-button:hover {
  color: #111820;
  background: #fff;
}

.auth-card.auth-card-hit {
  animation: auth-card-bump 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-eye-toy {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  touch-action: manipulation;
}

.auth-eye-toy__face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(22, 52, 77, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 34% 68%, rgba(242, 136, 156, 0.45) 0 8px, transparent 9px),
    radial-gradient(circle at 66% 68%, rgba(242, 136, 156, 0.38) 0 8px, transparent 9px),
    linear-gradient(145deg, #ffd9e5, #f2a5bd 55%, #bfefff);
  box-shadow: 0 12px 24px rgba(22, 52, 77, 0.16);
  transform-origin: center 70%;
}

.auth-eye-toy__eye {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 44px;
  height: 30px;
  overflow: hidden;
  border: 3px solid #18344d;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.auth-eye-toy__pupil {
  --eye-x: 0px;
  --eye-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #132231;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.26);
  transform: translate(calc(-50% + var(--eye-x)), calc(-50% + var(--eye-y)));
  transition: transform 120ms ease-out;
}

.auth-eye-toy__hand {
  position: absolute;
  top: 18px;
  width: 34px;
  height: 30px;
  border: 2px solid rgba(75, 46, 36, 0.22);
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(145deg, #ffd0aa, #eb9b78);
  box-shadow: 0 6px 12px rgba(22, 52, 77, 0.18);
  opacity: 0;
  transition: opacity 150ms ease, transform 180ms ease;
}

.auth-eye-toy__hand--left {
  left: 6px;
  transform: translate(-16px, 20px) rotate(-34deg);
}

.auth-eye-toy__hand--right {
  right: 6px;
  transform: translate(16px, 20px) rotate(34deg);
}

.auth-eye-toy.covering .auth-eye-toy__hand {
  opacity: 1;
}

.auth-eye-toy.covering .auth-eye-toy__hand--left {
  transform: translate(9px, 5px) rotate(-8deg);
}

.auth-eye-toy.covering .auth-eye-toy__hand--right {
  transform: translate(-9px, 5px) rotate(8deg);
}

.auth-eye-toy.covering .auth-eye-toy__pupil {
  transform: translate(-50%, -50%) scale(0.72);
}

.auth-eye-toy.sleeping .auth-eye-toy__face {
  animation: auth-sleep-breathe 2200ms ease-in-out infinite;
}

.auth-eye-toy.sleeping .auth-eye-toy__eye {
  top: 31px;
  width: 38px;
  height: 5px;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: #18344d;
  box-shadow: none;
  transform: translateX(-50%) rotate(-2deg);
}

.auth-eye-toy.sleeping .auth-eye-toy__pupil {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.auth-eye-toy.sleeping::after {
  content: "Zzz";
  position: absolute;
  top: -14px;
  right: -8px;
  z-index: 4;
  color: #18344d;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
  pointer-events: none;
  animation: auth-sleep-zzz 1800ms ease-in-out infinite;
}

.auth-eye-toy__hit {
  position: absolute;
  inset: 2px;
  border: 3px solid var(--coral);
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}

.auth-eye-toy.hit .auth-eye-toy__face {
  animation: auth-eye-bonk 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-eye-toy.hit .auth-eye-toy__hit {
  animation: auth-hit-ring 460ms ease-out;
}

.auth-eye-toy.hit .auth-eye-toy__hand {
  animation: auth-hand-wiggle 460ms ease-out;
}

@keyframes auth-eye-bonk {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  28% {
    transform: rotate(-8deg) scale(0.9);
  }
  55% {
    transform: rotate(6deg) scale(1.05);
  }
}

@keyframes auth-hit-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.86);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes auth-card-bump {
  0%,
  100% {
    transform: translateX(0);
  }
  24% {
    transform: translateX(-5px);
  }
  48% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
}

@keyframes auth-sleep-breathe {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(2px) rotate(-1deg);
  }
}

@keyframes auth-sleep-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.78);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-8px, -16px) scale(1.08);
  }
}

@keyframes auth-hand-wiggle {
  0%,
  100% {
    filter: none;
  }
  42% {
    filter: drop-shadow(0 0 8px rgba(232, 95, 78, 0.55));
  }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin-bottom: 28px;
  padding-right: 88px;
}

.auth-brand strong,
.auth-brand small {
  display: block;
}

.auth-brand small {
  margin-top: 3px;
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 8px;
  background: #eef2f5;
}

.auth-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.auth-tabs button.active {
  color: #fff;
  background: var(--green);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 8px;
}

.auth-form span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.auth-form input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: end;
}

.auth-form button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.auth-code-row button {
  min-height: 46px;
  padding: 0 10px;
  font-size: 13px;
}

.auth-message {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--coral);
  font-size: 14px;
}

.auth-dev-shortcut {
  width: max-content;
  margin-top: 6px;
  padding: 0;
  border: 0;
  color: var(--blue);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.auth-dev-shortcut:hover {
  color: var(--green-dark);
}

.dev-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(23, 32, 42, 0.45);
}

.dev-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(980px, 100vw);
  height: 100dvh;
  background: #fff;
  box-shadow: -18px 0 48px rgba(23, 32, 42, 0.2);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.dev-drawer.open {
  transform: translateX(0);
}

.dev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.dev-head span,
.dev-head strong {
  display: block;
}

.dev-head span {
  color: var(--muted);
  font-size: 13px;
}

.dev-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #f0f3f5;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.dev-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 0;
}

.dev-tabbed-body {
  grid-template-columns: 180px minmax(0, 1fr);
}

.dev-section-nav {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.dev-section-nav button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #44515d;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.dev-section-nav button.active,
.dev-section-nav button:hover {
  color: #fff;
  background: var(--blue);
}

.dev-workspace {
  min-height: 0;
  overflow: auto;
}

.dev-section {
  min-height: 100%;
}

.dev-section > .dev-site-panel,
.dev-section > .dev-account-panel {
  margin: 0;
  padding: 22px;
  border-bottom: 0;
}

.dev-product-admin {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100%;
}

.dev-list-panel {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.dev-site-panel,
.dev-category-panel,
.dev-account-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.dev-site-panel label,
.dev-account-panel label {
  display: grid;
  gap: 7px;
}

.dev-site-panel label span,
.dev-account-panel label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dev-site-panel input,
.dev-category-panel input,
.dev-account-panel input,
.dev-site-panel textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dev-site-panel textarea {
  resize: vertical;
  line-height: 1.6;
}

.dev-site-preview {
  width: 100%;
  aspect-ratio: 1 / 0.72;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f5;
}

.dev-mini-actions {
  display: flex;
  gap: 8px;
}

.dev-mini-actions button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: #eef2f5;
  cursor: pointer;
  font-weight: 800;
}

.dev-mini-actions button:first-child {
  color: #fff;
  background: var(--blue);
}

.dev-site-message {
  min-height: 20px;
  margin: 0;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}

.dev-about-section-editor {
  display: grid;
  gap: 12px;
}

.dev-about-section-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dev-account-list {
  display: grid;
  gap: 10px;
}

.dev-token-list {
  display: grid;
  gap: 10px;
}

.dev-order-list {
  display: grid;
  gap: 14px;
}

.dev-order-admin-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dev-order-summary-list {
  display: grid;
  gap: 8px;
}

.dev-order-summary {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.dev-order-summary.active,
.dev-order-summary:hover {
  border-color: var(--blue);
  background: #f4f9ff;
}

.dev-order-summary strong,
.dev-order-summary span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-order-summary span,
.dev-order-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dev-account-row,
.dev-token-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dev-account-row strong,
.dev-account-row span,
.dev-token-row strong,
.dev-token-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-account-row strong,
.dev-token-row strong {
  color: var(--ink);
  font-size: 14px;
}

.dev-account-row span,
.dev-token-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dev-token-row > span {
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
}

.token-ready {
  color: var(--green-dark) !important;
  background: #eaf4ee;
}

.token-used {
  color: #7d8790 !important;
  background: #eef2f5;
}

.dev-order-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dev-order-detail-panel {
  min-width: 0;
}

.dev-order-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.dev-order-head span,
.dev-order-items,
.dev-muted {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dev-order-row select,
.dev-order-row input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dev-order-note {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-order-note span,
.dev-order-note strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dev-featured-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.dev-featured-sequence {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-featured-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dev-featured-row span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.dev-featured-row div {
  display: flex;
  gap: 6px;
}

.dev-featured-row button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: #eef2f5;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.dev-product-category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-product-category-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fbfcfa;
  font-size: 13px;
  font-weight: 800;
}

.dev-product-category-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.dev-account-actions {
  display: flex;
  gap: 6px;
}

.dev-account-actions button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: #eef2f5;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.dev-account-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.dev-empty-row {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.dev-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  padding: 6px 7px 6px 9px;
  border-radius: 8px;
  color: var(--blue);
  background: #eef5fa;
  font-size: 13px;
  font-weight: 800;
}

.dev-category-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-category-tag button {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--coral);
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

.dev-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dev-panel-title button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  cursor: pointer;
  font-weight: 800;
}

.dev-product-list {
  display: grid;
  gap: 10px;
}

.dev-product-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.dev-product-row:hover {
  border-color: rgba(47, 111, 159, 0.5);
  box-shadow: 0 10px 22px rgba(23, 32, 42, 0.08);
}

.dev-product-edit {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.dev-product-edit img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f5;
}

.dev-product-edit span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.dev-product-edit strong {
  color: var(--green-dark);
  font-size: 13px;
}

.dev-delete-button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--coral);
  background: #fff0ee;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.dev-delete-button:hover {
  color: #fff;
  background: var(--coral);
}

.dev-form {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 22px;
}

.dev-form label {
  display: grid;
  gap: 8px;
}

.dev-form label span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.dev-form input,
.dev-form textarea,
.dev-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.dev-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.dev-two-columns,
.dev-three-columns {
  display: grid;
  gap: 14px;
}

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

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

.dev-preview {
  width: min(360px, 100%);
  aspect-ratio: 1 / 0.68;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f5;
}

.dev-gallery-list {
  display: grid;
  gap: 10px;
}

.dev-gallery-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.dev-gallery-row {
  display: grid;
  grid-template-columns: 64px minmax(70px, 1fr) minmax(0, 2.4fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-gallery-row img {
  width: 64px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f5;
}

.dev-gallery-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dev-gallery-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.dev-gallery-row button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dev-message {
  min-height: 24px;
  margin: 0;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
}

.detail-page {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
  padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 64px);
  background:
    linear-gradient(120deg, rgba(47, 111, 159, 0.12), transparent 45%),
    #fff;
}

.detail-back-button {
  grid-column: 1 / -1;
  width: max-content;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--green-dark);
  background: #fff;
  box-shadow: 0 10px 26px rgba(23, 32, 42, 0.08);
  font-weight: 800;
}

.detail-media {
  position: sticky;
  top: 96px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: #eef2f5;
  touch-action: pan-y;
}

.detail-gallery-track {
  display: flex;
  transition: transform 280ms ease;
  will-change: transform;
}

.detail-gallery-image {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
}

.detail-gallery-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 28, 38, 0.56);
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
}

.detail-gallery-prev {
  left: 14px;
}

.detail-gallery-next {
  right: 14px;
}

.detail-gallery-dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.detail-gallery-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.detail-gallery-dots button.active {
  width: 26px;
  background: #fff;
}

.detail-info {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.back-link {
  width: max-content;
  color: var(--green-dark);
  font-weight: 800;
}

.detail-info h1 {
  margin-bottom: 0;
  font-size: clamp(36px, 5vw, 64px);
}

.detail-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
}

.detail-rating strong {
  color: var(--gold);
}

.detail-desc {
  margin: 0;
  color: #4e5c68;
  font-size: 18px;
  line-height: 1.8;
}

.detail-price {
  font-size: clamp(30px, 4vw, 44px);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-block {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.detail-block h2 {
  margin-bottom: 14px;
  font-size: 22px;
}

.highlight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.highlight-list li {
  padding: 12px;
  border-radius: 8px;
  background: #eef6f1;
  color: var(--green-dark);
  font-weight: 800;
}

.spec-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.spec-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px;
  background: #fff;
}

.spec-list dt {
  color: var(--muted);
  font-weight: 800;
}

.spec-list dd {
  margin: 0;
}

.related-section {
  padding: 0 clamp(18px, 5vw, 64px) 60px;
}

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

@media (max-width: 1050px) {
  .commerce-hero,
  .store-shell,
  .detail-page {
    grid-template-columns: 1fr;
  }

  .detail-media {
    position: static;
  }

  .filters {
    position: static;
    grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(240px, 1fr);
    align-items: start;
  }

  .panel-heading {
    grid-column: 1 / -1;
  }

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

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

  .dev-body {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .dev-tabbed-body {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .dev-product-admin {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
  }

  .brand {
    flex: 1 1 230px;
  }

  .header-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .main-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-top: 2px;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a,
  .main-nav button {
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: #eef2f5;
  }

  .main-nav a.active {
    color: #fff;
    background: var(--blue);
  }

  .header-actions {
    gap: 8px;
  }

  .account-button,
  .logout-button,
  .dev-button {
    padding: 0 10px;
  }

  .cart-button span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  main {
    width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    width: 100%;
    max-width: 100vw;
    padding: 12px 14px;
    overflow: hidden;
  }

  .brand {
    flex-basis: 100%;
    min-width: 0;
  }

  .brand span:nth-child(2) {
    min-width: 0;
  }

  .header-actions {
    order: 2;
    flex: 1 1 100%;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
  }

  .account-button,
  .logout-button,
  .dev-button,
  .language-button,
  .cart-button {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
  }

  .commerce-hero {
    padding-top: 30px;
  }

  .auth-gate {
    align-items: stretch;
    padding: 0;
  }

  .auth-shell {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    justify-content: center;
    padding: 22px 16px;
  }

  .auth-visual {
    min-height: 100%;
  }

  .auth-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    image-orientation: from-image;
    transform: none;
  }

  .auth-visual-copy {
    right: 16px;
    bottom: 22px;
    left: 16px;
    width: auto;
  }

  .auth-visual-copy strong {
    font-size: clamp(28px, 9vw, 40px);
  }

  .auth-card {
    align-content: center;
    width: min(420px, 100%);
    max-height: calc(100svh - 44px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px;
  }

  .auth-eye-toy {
    top: 14px;
    right: 14px;
    width: 64px;
    height: 64px;
  }

  .auth-eye-toy__face {
    border-radius: 22px;
  }

  .auth-eye-toy__eye {
    top: 14px;
    width: 38px;
    height: 26px;
  }

  .auth-eye-toy__hand {
    top: 16px;
    width: 29px;
    height: 25px;
  }

  .auth-brand {
    min-height: 64px;
    margin-bottom: 22px;
    padding-right: 72px;
  }

  .featured-product,
  .featured-product img {
    min-height: 320px;
  }

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

  .about-page {
    padding: 24px 0;
    overflow-x: hidden;
  }

  .about-intro {
    margin-bottom: 28px;
  }

  .about-page p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.8;
  }

  .about-story {
    max-width: none;
    width: 100%;
    overflow: hidden;
  }

  .about-story-stage {
    height: calc(100svh - 24px);
    min-height: 500px;
    width: 100%;
    max-width: 100vw;
    border-radius: 0;
    scrollbar-gutter: auto;
  }

  .about-story-copy-stack {
    min-height: 100%;
  }

  .about-story-section {
    height: calc(100svh - 24px);
    min-height: 500px;
    justify-items: stretch;
    align-items: end;
    padding: 18px 14px;
    overflow: hidden;
  }

  .about-story-copy {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .about-story-section.image-left .about-story-copy,
  .about-story-section.image-right .about-story-copy,
  .about-story-section.image-top .about-story-copy,
  .about-story-section.image-bottom .about-story-copy {
    justify-self: stretch;
  }

  .about-story-section.image-top,
  .about-story-section.image-bottom {
    align-items: end;
  }

  .about-story-copy::before {
    inset: -10px -12px;
  }

  .about-page .about-story-copy h2 {
    font-size: clamp(22px, 8vw, 34px);
  }

  .about-page .about-story-copy p {
    font-size: 14px;
    line-height: 1.68;
  }

  .account-address-grid {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .service-strip,
  .compact-grid,
  .highlight-list {
    grid-template-columns: 1fr;
  }

  .catalog-head {
    align-items: start;
    flex-direction: column;
  }

  .spec-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dev-body,
  .dev-tabbed-body,
  .dev-product-admin,
  .dev-two-columns,
  .dev-three-columns {
    grid-template-columns: 1fr;
  }

  .dev-section-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dev-section-nav button {
    min-width: max-content;
    text-align: center;
  }

  .dev-list-panel {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dev-product-row {
    grid-template-columns: 1fr;
  }

  .dev-product-edit {
    grid-template-columns: 44px 1fr;
  }

  .dev-product-edit strong {
    grid-column: 2;
  }

  .orders-body,
  .support-chat-body {
    grid-template-columns: 1fr;
  }

  .orders-list,
  .support-chat-list {
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .support-messages {
    max-height: 42vh;
  }

  .support-message {
    width: min(88%, 420px);
  }
}

/* Final premium overrides must sit after responsive rules. */
body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 44%, #ffffff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 24, 32, 0.026) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 76%);
}

.site-header {
  min-height: 76px;
  border-bottom: 1px solid rgba(17, 24, 32, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 34px rgba(17, 24, 32, 0.055);
}

.brand-mark {
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: var(--charcoal);
  box-shadow: 0 12px 24px rgba(17, 24, 32, 0.14);
}

.brand strong {
  font-size: 16px;
}

.brand small {
  color: #8a949f;
  font-size: 11px;
  text-transform: uppercase;
}

.main-nav {
  color: #596672;
  font-size: 14px;
  font-weight: 800;
}

.account-button,
.logout-button,
.dev-button,
.cart-button,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.quick-collections button,
.filters button {
  font-size: 14px;
  font-weight: 900;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.account-button,
.logout-button {
  border: 1px solid rgba(17, 24, 32, 0.08);
  background: #f3f6f8;
}

.dev-button,
.cart-button,
.primary-link,
.checkout {
  background: var(--charcoal);
  box-shadow: 0 14px 30px rgba(17, 24, 32, 0.16);
}

.dev-button:hover,
.cart-button:hover,
.primary-link:hover,
.checkout:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.secondary-link {
  border-color: rgba(17, 24, 32, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.06);
}

.commerce-hero {
  position: relative;
  min-height: calc(100svh - 76px);
  padding-top: clamp(42px, 7vw, 86px);
  padding-bottom: clamp(26px, 5vw, 54px);
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 44%, rgba(17, 24, 32, 0.08) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
}

.commerce-hero::after {
  content: "";
  position: absolute;
  right: clamp(18px, 5vw, 64px);
  bottom: 0;
  left: clamp(18px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, rgba(183, 137, 57, 0.5), rgba(17, 24, 32, 0.08), transparent);
}

.hero-copy h1,
.hero-copy p:not(.eyebrow) {
  color: #ffffff;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 0.94;
  font-weight: 950;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.86;
}

.featured-product {
  min-height: min(62svh, 560px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: #eef2f5;
  box-shadow: 0 34px 84px rgba(17, 24, 32, 0.18);
}

.featured-product img {
  min-height: min(62svh, 560px);
}

.featured-product::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(17, 24, 32, 0.42));
}

.featured-product div {
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(17, 24, 32, 0.74);
}

.catalog-search input,
.filters,
.product-card,
.service-strip,
.member-card,
.coupon-row,
.member-product {
  border-color: rgba(17, 24, 32, 0.09);
  box-shadow: var(--soft-shadow);
}

.catalog-search input,
.filters,
.product-card,
.coupon-row,
.member-product {
  background: rgba(255, 255, 255, 0.96);
}

.store-shell,
.catalog-search {
  max-width: 1450px;
  margin-right: auto;
  margin-left: auto;
}

.catalog-head h2 {
  color: var(--charcoal);
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1;
  font-weight: 950;
}

.catalog-head > span {
  padding: 8px 12px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.quick-collections button {
  border: 1px solid rgba(17, 24, 32, 0.08);
  color: #43515f;
  background: #f5f7f9;
}

.quick-collections button.active,
.quick-collections button:hover {
  border-color: var(--charcoal);
  color: #fff;
  background: var(--charcoal);
}

.product-grid {
  gap: clamp(16px, 2vw, 26px);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(17, 24, 32, 0.14);
}

.product-media {
  background:
    linear-gradient(135deg, rgba(17, 24, 32, 0.04), rgba(183, 137, 57, 0.08)),
    #edf1f3;
}

.product-media img {
  transition: transform 380ms ease;
}

.product-card:hover .product-media img {
  transform: scale(1.035);
}

.badge {
  color: #fff;
  background: rgba(17, 24, 32, 0.82);
  box-shadow: 0 10px 24px rgba(17, 24, 32, 0.18);
}

.product-card h3 {
  color: var(--charcoal);
  font-size: 20px;
  font-weight: 950;
}

.price-row strong {
  color: var(--charcoal);
  font-size: 24px;
}

.add-button {
  min-height: 46px;
  background: var(--charcoal);
}

.service-strip {
  max-width: 1320px;
  border-color: rgba(17, 24, 32, 0.08);
  background: rgba(17, 24, 32, 0.08);
}

.balance-card {
  background:
    linear-gradient(135deg, rgba(183, 137, 57, 0.22), transparent 36%),
    var(--charcoal);
  box-shadow: var(--soft-shadow);
}

.cart-overlay,
.account-overlay,
.orders-overlay,
.support-chat-overlay {
  background: rgba(17, 24, 32, 0.54);
  backdrop-filter: blur(4px);
}

.detail-page {
  background:
    linear-gradient(90deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 42%, transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
}

.detail-info h1,
.detail-desc,
.detail-rating,
.detail-price,
.detail-block h2 {
  color: #fff;
}

.detail-desc,
.detail-rating {
  color: rgba(255, 255, 255, 0.76);
}

.detail-block {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.highlight-list li,
.spec-list div {
  background: rgba(255, 255, 255, 0.09);
}

.highlight-list li,
.spec-list dt,
.spec-list dd {
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 1050px) {
  .commerce-hero,
  .detail-page {
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.88) 54%, #f4f7f9 54%, #ffffff 100%);
  }
}

@media (max-width: 720px) {
  .commerce-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 56%, #f4f7f9 56%, #ffffff 100%);
  }

  .hero-copy h1 {
    font-size: clamp(42px, 15vw, 64px);
  }

  .featured-product,
  .featured-product img {
    min-height: 340px;
  }

  .detail-page {
    background:
      linear-gradient(180deg, rgba(17, 24, 32, 0.96) 0%, rgba(17, 24, 32, 0.9) 64%, #ffffff 64%);
  }
}

/* Detail page readability correction. */
.detail-info h1,
.detail-desc,
.detail-rating,
.detail-price,
.detail-block h2 {
  color: var(--charcoal);
}

.detail-desc,
.detail-rating {
  color: #4f5b67;
}

.detail-block {
  border-top-color: rgba(17, 24, 32, 0.12);
}

.highlight-list li {
  background: #eef6f1;
  color: var(--green-dark);
}

.spec-list {
  border-color: rgba(17, 24, 32, 0.12);
  background: rgba(17, 24, 32, 0.12);
}

.spec-list div {
  background: #fff;
}

.spec-list dt {
  color: var(--muted);
}

.spec-list dd {
  color: var(--charcoal);
}
/* v21 final cascade lock: this layer intentionally sits last. */
.product-card {
  isolation: isolate;
  border-color: rgba(17, 24, 32, 0.085) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 248, 0.94)) !important;
  box-shadow: 0 12px 34px rgba(17, 24, 32, 0.06) !important;
  animation: shopFadeUp 380ms var(--premium-ease) both;
  transition:
    transform var(--premium-medium) var(--premium-ease),
    box-shadow var(--premium-medium) var(--premium-ease),
    border-color var(--premium-medium) ease !important;
}

.product-card:hover {
  border-color: rgba(17, 24, 32, 0.16) !important;
  transform: translateY(-7px) !important;
  box-shadow: var(--premium-ring) !important;
}

.product-card:hover .product-media img {
  transform: scale(1.045) !important;
  filter: saturate(1.03) contrast(1.02);
}

.add-button.is-added {
  background: var(--green-dark) !important;
}

.cart-count-pulse {
  animation: cartCountPulse 520ms var(--premium-ease);
}

.cart-drawer {
  width: min(460px, 100vw) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%) !important;
  box-shadow: -24px 0 70px rgba(17, 24, 32, 0.2) !important;
  transition: transform 260ms var(--premium-ease) !important;
}

.cart-item {
  grid-template-columns: 82px 1fr !important;
  gap: 14px !important;
  margin-bottom: 12px;
  padding: 12px !important;
  border: 1px solid rgba(17, 24, 32, 0.08) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.06);
}

.cart-summary {
  gap: 14px !important;
  padding: 20px 24px 22px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff) !important;
  box-shadow: 0 -18px 42px rgba(17, 24, 32, 0.08);
}
/* checkout visibility guard */
.checkout-dialog:not(.open) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
  animation: none !important;
}

.checkout-dialog.open {
  animation: shopFadeUp 240ms var(--premium-ease) both;
}

/* v25 browser chrome clearance: balanced final cascade layer. */
.site-header {
  top: var(--browser-chrome-clearance) !important;
  padding-top: calc(18px + var(--browser-chrome-clearance)) !important;
  min-height: calc(88px + var(--browser-chrome-clearance)) !important;
}

@media (min-width: 900px) {
  .site-header {
    padding-top: calc(36px + var(--browser-chrome-clearance)) !important;
    min-height: calc(104px + var(--browser-chrome-clearance)) !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-top: calc(18px + var(--browser-chrome-clearance)) !important;
    min-height: calc(92px + var(--browser-chrome-clearance)) !important;
  }
}

/* v35 final overlay lock guard. */
body.modal-scroll-locked {
  overscroll-behavior: none !important;
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.dev-drawer,
.checkout-dialog,
.cart-items,
.account-panel-body,
.orders-list,
.orders-detail,
.support-chat-list,
.support-chat-thread,
.support-messages,
.dev-body {
  overscroll-behavior: contain !important;
}

.support-message p {
  white-space: pre-wrap !important;
}

/* v36 final view routing guard. */
[hidden] {
  display: none !important;
}

/* v37 final about routing guard. */
body.view-about [data-view="products"],
body.view-products [data-view="about"] {
  display: none !important;
}

body.view-about [data-view="about"] {
  display: block !important;
}

body.view-about {
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.view-about main {
  height: calc(100dvh - var(--active-header-height, 104px));
  overflow: hidden !important;
}

body.view-about .about-page {
  box-sizing: border-box;
  height: calc(100dvh - var(--active-header-height, 104px));
  min-height: 0;
  padding-top: 0;
  padding-bottom: 18px;
  overflow: hidden !important;
}

body.view-about .about-story {
  display: grid;
  height: 100%;
  min-height: 0;
}

body.view-about .about-story-stage {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-height: 100%;
}

body.view-about .about-story-section {
  height: 100%;
  min-height: 0;
}

@media (max-width: 720px) {
  body.view-about main,
  body.view-about .about-page {
    height: calc(100dvh - var(--active-header-height, 92px));
  }

  body.view-about .about-page {
    padding: 0;
  }
}

/* v41 commerce trust, checkout clarity, and roomier developer console. */
.detail-trust-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 6px;
}

.detail-trust-item {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 30px rgba(17, 24, 32, 0.06);
}

.detail-trust-item span {
  color: #667482;
  font-size: 12px;
  font-weight: 900;
}

.detail-trust-item strong {
  color: #111820;
  font-size: 14px;
  line-height: 1.45;
}

.detail-conversion-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.detail-conversion-strip span {
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  color: #154431;
  background: rgba(235, 246, 239, 0.9);
  font-size: 12px;
  font-weight: 950;
}

.detail-service-note {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.detail-service-note span {
  color: #667482;
  font-size: 12px;
  font-weight: 900;
}

.detail-service-note strong {
  color: #111820;
  font-size: 13px;
  line-height: 1.45;
}

.cart-benefit-row strong,
.cart-gap-row strong {
  color: var(--green-dark);
  font-size: 13px;
  text-align: right;
}

.support-chat-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.support-chat-head-badge {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--coral);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.support-message-status {
  display: block;
  margin-top: 6px;
  color: rgba(102, 116, 130, 0.82);
  font-size: 11px;
  font-weight: 800;
}

.support-message.own .support-message-status {
  color: rgba(17, 24, 32, 0.52);
  text-align: right;
}

.dev-drawer {
  width: min(1180px, calc(100vw - 28px)) !important;
  margin: 14px 14px 14px 0;
  height: calc(100dvh - 28px) !important;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  background: #f6f8f7 !important;
}

.dev-head {
  min-height: 72px !important;
  padding: 18px 24px !important;
  background: #ffffff;
}

.dev-head strong {
  color: #111820;
  font-size: 22px;
  letter-spacing: 0;
}

.dev-tabbed-body {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  background: #f6f8f7;
}

.dev-section-nav {
  gap: 6px !important;
  padding: 20px 14px !important;
  background: #ffffff !important;
}

.dev-section-nav button {
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
}

.dev-workspace {
  padding: 22px;
}

.dev-section {
  min-height: auto !important;
}

.dev-section > .dev-site-panel,
.dev-section > .dev-account-panel,
.dev-list-panel,
.dev-form,
.dev-category-panel {
  border: 1px solid rgba(17, 24, 32, 0.08) !important;
  border-radius: 8px;
  background: #ffffff !important;
  box-shadow: 0 16px 42px rgba(17, 24, 32, 0.06);
}

.dev-section > .dev-site-panel,
.dev-section > .dev-account-panel {
  padding: 24px !important;
}

.dev-product-admin {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  gap: 18px;
  min-height: auto !important;
}

.dev-list-panel {
  padding: 18px !important;
  border-right: 1px solid rgba(17, 24, 32, 0.08) !important;
}

.dev-form {
  gap: 18px !important;
  max-height: calc(100dvh - 142px);
  padding: 24px !important;
}

.dev-form-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-form input,
.dev-form textarea,
.dev-form select,
.dev-site-panel input,
.dev-category-panel input,
.dev-account-panel input,
.dev-site-panel textarea,
.dev-order-row select,
.dev-order-row input {
  min-height: 46px !important;
  border-color: rgba(17, 24, 32, 0.12) !important;
  background: #ffffff !important;
}

.dev-panel-title {
  margin-bottom: 6px !important;
}

.dev-panel-title strong {
  color: #111820;
  font-size: 17px;
}

.dev-product-list,
.dev-account-list,
.dev-token-list,
.dev-order-list {
  gap: 12px !important;
}

@media (max-width: 920px) {
  .detail-trust-panel,
  .dev-product-admin,
  .dev-two-columns,
  .dev-three-columns,
  .dev-trust-grid {
    grid-template-columns: 1fr !important;
  }

  .dev-drawer {
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0;
    border-radius: 0;
  }

  .dev-tabbed-body {
    grid-template-columns: 1fr !important;
  }

  .dev-section-nav {
    display: flex !important;
    overflow-x: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .dev-section-nav button {
    flex: 0 0 auto;
  }

  .dev-workspace {
    padding: 14px;
  }
}

/* v42 product review flow and detail-page polish. */
.detail-page {
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(26px, 4.6vw, 62px) !important;
  align-items: start;
  background:
    linear-gradient(120deg, rgba(183, 137, 57, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%) !important;
}

.detail-back-button {
  border-color: rgba(17, 24, 32, 0.1) !important;
  color: #111820 !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.detail-media {
  top: calc(var(--active-header-height, 104px) + 18px) !important;
  border: 1px solid rgba(17, 24, 32, 0.08);
  background:
    linear-gradient(135deg, rgba(17, 24, 32, 0.05), rgba(183, 137, 57, 0.12)),
    #edf1f3 !important;
  box-shadow: 0 28px 78px rgba(17, 24, 32, 0.14) !important;
}

.detail-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(17, 24, 32, 0.16));
}

.detail-info {
  max-width: none !important;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 64px rgba(17, 24, 32, 0.09);
}

.detail-info h1 {
  max-width: 12em;
  color: #111820 !important;
  font-size: clamp(34px, 4.9vw, 60px) !important;
  line-height: 1.03;
  letter-spacing: 0;
}

.detail-rating {
  gap: 10px 16px !important;
  align-items: center;
}

.detail-rating span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #f4f7f5;
  color: #596672;
  font-size: 13px;
  font-weight: 900;
}

.detail-purchase-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(183, 137, 57, 0.12), transparent 42%),
    #fbfcfa;
}

.detail-price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.detail-price-row > span,
.detail-review-summary span,
.detail-block-title span {
  color: #667482;
  font-size: 12px;
  font-weight: 950;
}

.detail-price {
  color: #111820 !important;
  line-height: 1;
}

.detail-review-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.detail-review-summary > div {
  display: grid;
  gap: 4px;
  min-width: 96px;
}

.detail-review-summary strong {
  color: var(--gold);
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
}

.detail-review-summary p {
  margin: 0;
  color: #4f5b67;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 800;
}

.detail-block-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.detail-block-title h2 {
  margin: 0 !important;
}

.detail-reviews {
  display: grid;
  gap: 12px;
}

.review-list {
  display: grid;
  gap: 12px;
}

.review-card,
.review-empty {
  padding: 16px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(17, 24, 32, 0.045);
}

.review-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.review-card-head > div {
  display: grid;
  gap: 4px;
}

.review-card strong,
.review-empty strong {
  color: #111820;
  font-size: 15px;
}

.review-card span,
.review-empty p {
  color: #667482;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 800;
}

.review-card p {
  margin: 12px 0 0;
  color: #24303b;
  line-height: 1.75;
  white-space: pre-wrap;
}

.review-stars {
  flex: 0 0 auto;
  color: #c8d0d8;
  font-size: 14px;
  letter-spacing: 0;
}

.review-stars .filled {
  color: var(--gold);
}

.review-empty p {
  margin: 6px 0 0;
}

.review-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.review-filter-bar button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 32, 0.1);
  border-radius: 999px;
  color: #4f5b67;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.review-filter-bar button.active,
.review-filter-bar button:hover {
  color: #fff;
  border-color: #0f1720;
  background: #0f1720;
}

.review-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.review-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  background: #f5f7f8;
}

.review-followups {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.review-followup {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7faf8;
}

.review-followup span {
  color: #2d6f56;
  font-weight: 950;
}

.review-followup p {
  margin-top: 6px;
}

.order-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order-item {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: start !important;
  padding: 10px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #fff;
}

.order-item-review {
  grid-column: 1 / -1;
}

.order-review-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #f7faf8;
}

.order-review-form label {
  display: grid;
  gap: 6px;
  color: #667482;
  font-size: 12px;
  font-weight: 950;
}

.order-review-form select,
.order-review-form textarea {
  width: 100%;
  border: 1px solid rgba(17, 24, 32, 0.12);
  border-radius: 8px;
  color: #111820;
  background: #fff;
  font: inherit;
  font-size: 14px;
}

.order-review-form select {
  min-height: 42px;
  padding: 0 10px;
}

.order-review-form textarea {
  min-height: 82px;
  padding: 10px;
  resize: vertical;
}

.order-review-image-picker {
  display: grid !important;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(17, 24, 32, 0.18);
  border-radius: 8px;
  background: #fbfcfa;
}

.order-review-image-picker input {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.order-review-upload-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.order-reviewed-badge,
.order-review-hint {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin-top: 8px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
}

.order-reviewed-badge {
  color: var(--green-dark);
  background: #e7f4ed;
}

.order-review-hint {
  color: #667482;
  background: #eef2f5;
}

.coupon-row-urgent {
  border-color: rgba(227, 93, 79, 0.28) !important;
  background: #fff8f6 !important;
}

.coupon-row-urgent em {
  color: #d25244;
}

.coupon-row-expired {
  opacity: 0.58;
}

button:disabled {
  cursor: wait;
  opacity: 0.66;
}

@media (max-width: 1050px) {
  .detail-page {
    grid-template-columns: 1fr !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%) !important;
  }

  .detail-media {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 720px) {
  .detail-page {
    padding: 18px 14px 38px !important;
  }

  .detail-info {
    padding: 16px;
  }

  .detail-info h1 {
    font-size: clamp(30px, 11vw, 42px) !important;
  }

  .detail-price-row,
  .review-card-head {
    align-items: start;
    flex-direction: column;
  }

  .detail-review-summary,
  .detail-trust-panel {
    grid-template-columns: 1fr !important;
  }
}

/* 人工运维注释：
   1. 本文件使用后置版本块覆盖旧样式，越靠后的 vXX 块优先级越高。
   2. 商品详情页和评价样式从 v42 product review flow 开始；修 UI 时尽量追加小范围覆盖，不要大面积删除旧样式。
   3. 遮罩、抽屉、账号中心、订单中心都依赖 modal-scroll-locked 与 overscroll-behavior，改动后要测试背景是否会滚动。
   4. 首页/关于页/商品页共用同一套变量和按钮样式，改全局变量前要检查三种页面。 */

/* v43 compact reviews and developer review moderation. */
.detail-reviews {
  gap: 8px !important;
}

.review-list {
  gap: 8px !important;
}

.review-card,
.review-empty {
  padding: 10px 12px !important;
  box-shadow: 0 8px 22px rgba(17, 24, 32, 0.035) !important;
}

.review-card-head {
  align-items: center !important;
  gap: 10px !important;
}

.review-card-head > div {
  gap: 2px !important;
  min-width: 0;
}

.review-card strong,
.review-empty strong {
  font-size: 14px !important;
  line-height: 1.25;
}

.review-card span,
.review-empty p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.review-card p {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.52 !important;
}

.review-stars {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1px;
  white-space: nowrap;
}

.review-stars span {
  display: inline-block;
  line-height: 1;
}

.dev-review-list {
  display: grid;
  gap: 10px;
}

.dev-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(17, 24, 32, 0.045);
}

.dev-review-row > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dev-review-row strong {
  color: #111820;
  font-size: 15px;
}

.dev-review-row span {
  color: #667482;
  font-size: 12px;
  font-weight: 850;
}

.dev-review-row em {
  color: var(--gold);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0;
}

.dev-review-row p {
  margin: 0;
  color: #2c3843;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .review-card-head {
    flex-direction: row !important;
  }

  .review-stars {
    font-size: 13px !important;
  }

  .dev-review-row {
    grid-template-columns: 1fr;
  }
}

/* v44 footer legal links and policy dialog. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px clamp(18px, 5vw, 64px);
  border-top: 1px solid rgba(17, 24, 32, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: #52616f;
}

.site-footer > div {
  display: grid;
  gap: 4px;
}

.site-footer strong {
  color: #111820;
  font-size: 15px;
}

.site-footer span {
  font-size: 13px;
  font-weight: 800;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
}

.footer-records {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  margin: 0;
  color: #7b8793;
}

.footer-records span {
  font-size: 12px;
  font-weight: 800;
}

.site-footer button,
.auth-policy button {
  padding: 0;
  border: 0;
  color: var(--green-dark);
  background: transparent;
  font: inherit;
  font-weight: 950;
  text-decoration: none;
}

.site-footer button:hover,
.auth-policy button:hover {
  color: #111820;
  text-decoration: underline;
}

.auth-policy {
  margin: -2px 0 0;
  color: #667482;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 800;
}

.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: rgba(17, 24, 32, 0.48);
  backdrop-filter: blur(4px);
}

.legal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10021;
  width: min(560px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 26px 76px rgba(17, 24, 32, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48%) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.legal-dialog.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(17, 24, 32, 0.08);
}

.legal-head > div {
  display: grid;
  gap: 4px;
}

.legal-head span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
}

.legal-head strong {
  color: #111820;
  font-size: 24px;
}

.legal-head button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  color: #111820;
  background: #eef2f5;
  font-size: 30px;
  line-height: 1;
}

.legal-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 18px 20px 22px;
  overscroll-behavior: contain;
}

.legal-body p {
  margin: 0;
  color: #3c4955;
  font-size: 15px;
  line-height: 1.78;
  font-weight: 750;
}

body.view-about .site-footer {
  display: none;
}

@media (max-width: 720px) {
  .site-footer {
    align-items: start;
    flex-direction: column;
    padding: 22px 16px 28px;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .legal-head {
    padding: 16px;
  }

  .legal-body {
    padding: 16px;
  }
}

/* v45 subtle sakura accents for navigation and auth gate. */
.site-header {
  position: sticky;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 9% 82%, rgba(245, 177, 190, 0.12), transparent 26%),
    radial-gradient(circle at 92% 78%, rgba(245, 177, 190, 0.1), transparent 22%) !important;
}

.site-header > * {
  position: relative;
  z-index: 2;
}

.site-header::before,
.site-header::after,
.auth-card::before,
.auth-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-header::before {
  left: -28px;
  bottom: -18px;
  z-index: 0;
  width: min(330px, 36vw);
  height: 112px;
  opacity: 0.36;
  background:
    radial-gradient(ellipse at 35px 46px, rgba(248, 174, 190, 0.36) 0 7px, transparent 8px),
    radial-gradient(ellipse at 54px 34px, rgba(248, 174, 190, 0.28) 0 8px, transparent 9px),
    radial-gradient(ellipse at 76px 48px, rgba(248, 174, 190, 0.32) 0 7px, transparent 8px),
    radial-gradient(ellipse at 46px 64px, rgba(248, 174, 190, 0.24) 0 8px, transparent 9px),
    radial-gradient(ellipse at 210px 78px, rgba(248, 174, 190, 0.3) 0 7px, transparent 8px),
    radial-gradient(ellipse at 234px 70px, rgba(248, 174, 190, 0.24) 0 8px, transparent 9px),
    linear-gradient(24deg, transparent 0 42%, rgba(140, 106, 100, 0.22) 43% 45%, transparent 46%),
    linear-gradient(48deg, transparent 0 54%, rgba(140, 106, 100, 0.18) 55% 56%, transparent 57%);
  transform: rotate(-3deg);
}

.site-header::after {
  inset: 0;
  z-index: 1;
  opacity: 0.46;
  background:
    radial-gradient(ellipse 11px 6px at 18% 34%, rgba(245, 149, 170, 0.18), transparent 72%),
    radial-gradient(ellipse 9px 5px at 31% 70%, rgba(245, 149, 170, 0.14), transparent 72%),
    radial-gradient(ellipse 12px 6px at 54% 67%, rgba(245, 149, 170, 0.16), transparent 72%),
    radial-gradient(ellipse 10px 5px at 76% 42%, rgba(245, 149, 170, 0.16), transparent 72%),
    radial-gradient(ellipse 12px 6px at 96% 80%, rgba(245, 149, 170, 0.2), transparent 72%);
}

.auth-shell {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 229, 236, 0.08)),
    #d7e5ef;
}

.auth-card {
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 252, 0.84)),
    rgba(255, 255, 255, 0.84);
}

.auth-card > :not(.auth-eye-toy) {
  position: relative;
  z-index: 2;
}

.auth-card > .auth-eye-toy {
  position: absolute;
  z-index: 3;
}

.auth-card::before {
  top: 12px;
  right: -32px;
  z-index: 0;
  width: 210px;
  height: 190px;
  opacity: 0.34;
  background:
    radial-gradient(ellipse at 76px 54px, rgba(246, 169, 186, 0.28) 0 10px, transparent 11px),
    radial-gradient(ellipse at 104px 72px, rgba(246, 169, 186, 0.2) 0 11px, transparent 12px),
    radial-gradient(ellipse at 92px 98px, rgba(246, 169, 186, 0.22) 0 10px, transparent 11px),
    radial-gradient(ellipse at 132px 116px, rgba(246, 169, 186, 0.18) 0 9px, transparent 10px),
    linear-gradient(126deg, transparent 0 47%, rgba(138, 108, 98, 0.22) 48% 49%, transparent 50%),
    linear-gradient(154deg, transparent 0 58%, rgba(138, 108, 98, 0.18) 59% 60%, transparent 61%);
  transform: rotate(-9deg);
}

.auth-card::after {
  inset: 0;
  z-index: 1;
  opacity: 0.52;
  background:
    radial-gradient(ellipse 12px 7px at 8% 6%, rgba(245, 149, 170, 0.17), transparent 72%),
    radial-gradient(ellipse 10px 6px at 53% 9%, rgba(245, 149, 170, 0.15), transparent 72%),
    radial-gradient(ellipse 10px 6px at 87% 28%, rgba(245, 149, 170, 0.13), transparent 72%),
    radial-gradient(ellipse 9px 5px at 8% 68%, rgba(245, 149, 170, 0.13), transparent 72%),
    radial-gradient(ellipse 12px 7px at 92% 78%, rgba(245, 149, 170, 0.14), transparent 72%),
    radial-gradient(ellipse 14px 8px at 13% 94%, rgba(245, 149, 170, 0.15), transparent 72%);
}

@media (max-width: 720px) {
  .site-header::before {
    width: 190px;
    height: 86px;
    opacity: 0.26;
  }

  .site-header::after {
    opacity: 0.34;
  }

  .auth-card::before {
    right: -74px;
    opacity: 0.26;
    transform: rotate(-12deg) scale(0.86);
  }

  .auth-card::after {
    opacity: 0.4;
  }
}

/* v47 user-provided sakura cutouts tuned to be visible but still quiet. */
.site-header::before {
  left: -18px;
  bottom: -18px;
  z-index: 0;
  width: min(980px, 54vw);
  height: 178px;
  opacity: 0.28;
  background: url("image/sakura-left.png") left bottom / contain no-repeat;
  filter: saturate(0.95);
  transform: none;
}

.site-header::after {
  top: auto;
  right: -20px;
  bottom: -34px;
  left: auto;
  z-index: 1;
  width: min(430px, 28vw);
  height: 198px;
  opacity: 0.2;
  background: url("image/sakura-right.png") right top / contain no-repeat;
  filter: saturate(0.9);
}

.auth-card::before {
  top: -4px;
  right: -34px;
  z-index: 0;
  width: 310px;
  height: 310px;
  opacity: 0.24;
  background: url("image/sakura-right.png") right top / contain no-repeat;
  filter: saturate(0.94);
  transform: none;
}

.auth-card::after {
  right: auto;
  bottom: -22px;
  left: -36px;
  top: auto;
  z-index: 1;
  width: 440px;
  height: 176px;
  opacity: 0.17;
  background: url("image/sakura-left.png") left bottom / contain no-repeat;
  filter: saturate(0.94);
}

@media (max-width: 900px) {
  .site-header::before {
    width: 370px;
    height: 138px;
    opacity: 0.2;
  }

  .site-header::after {
    width: 270px;
    height: 158px;
    opacity: 0.16;
  }
}

@media (max-width: 720px) {
  .site-header::before {
    left: -18px;
    bottom: -10px;
    width: min(330px, 78vw);
    height: 124px;
    opacity: 0.22;
  }

  .site-header::after {
    top: 6px;
    right: -36px;
    bottom: auto;
    width: min(190px, 44vw);
    height: 150px;
    opacity: 0.16;
  }

  .auth-card::before {
    top: 4px;
    right: -42px;
    width: min(220px, 50vw);
    height: min(220px, 50vw);
    opacity: 0.2;
    transform: none;
  }

  .auth-card::after {
    left: -40px;
    bottom: -10px;
    width: min(335px, 82vw);
    height: 126px;
    opacity: 0.16;
  }
}

/* v48 mobile sakura fit: keep both sides visible without crowding compact screens. */
.auth-gate,
.auth-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auth-gate::-webkit-scrollbar,
.auth-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 480px) {
  .auth-tabs {
    grid-template-columns: 1fr;
  }

  .auth-code-row {
    grid-template-columns: 1fr;
  }

  .site-header::before {
    left: -34px;
    bottom: -8px;
    width: 250px;
    height: 106px;
    opacity: 0.2;
  }

  .site-header::after {
    top: 10px;
    right: -70px;
    width: 170px;
    height: 138px;
    opacity: 0.13;
  }

  .auth-card::before {
    top: 8px;
    right: -68px;
    width: 190px;
    height: 190px;
    opacity: 0.16;
  }

  .auth-card::after {
    left: -76px;
    bottom: -8px;
    width: 265px;
    height: 108px;
    opacity: 0.13;
  }
}

@media (max-width: 380px) {
  .site-header::after {
    opacity: 0.1;
  }

  .auth-card::before {
    right: -84px;
    opacity: 0.13;
  }

  .auth-card::after {
    left: -96px;
    opacity: 0.1;
  }
}

/* v53 operations layer: lightweight campaign, product persuasion, support priority and dashboard polish. */
.activity-banner {
  width: min(1180px, calc(100% - 48px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 248, 244, 0.92));
  box-shadow: 0 18px 44px rgba(17, 24, 32, 0.055);
}

.activity-banner div {
  display: grid;
  gap: 5px;
}

.activity-banner span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.activity-banner strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.activity-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}

.activity-banner .secondary-link {
  flex: 0 0 auto;
}

.detail-reason-block {
  background: #fbfcfa;
}

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

.detail-reason-item {
  padding: 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.detail-reason-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.detail-reason-item p {
  margin: 0;
  color: #27333f;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 800;
}

.review-card,
.review-empty {
  padding: 12px 14px;
}

.review-stars {
  display: inline-flex;
  gap: 1px;
}

.support-chat-order small,
.support-chat-priority {
  color: #2d6f56;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.support-chat-order.has-unread {
  border-color: rgba(227, 93, 79, 0.55);
  background: #fff8f6;
}

.dev-section-nav {
  overflow: auto;
}

.dev-inline-switch {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #fff;
}

.dev-inline-switch input {
  width: auto !important;
  min-height: auto !important;
}

.dev-support-board {
  display: grid;
  gap: 10px;
}

.dev-support-summary,
.dev-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.dev-support-summary {
  background: #f1f7f3;
}

.dev-support-summary span,
.dev-support-row span,
.dev-support-row p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}

.dev-support-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.dev-support-row strong,
.dev-order-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dev-support-row p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-support-row.has-unread,
.dev-order-summary.has-unread {
  border-color: rgba(227, 93, 79, 0.45);
  background: #fff8f6;
}

.dev-support-row i,
.dev-order-summary i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #e35d4f;
  box-shadow: 0 0 0 3px rgba(227, 93, 79, 0.15);
}

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

.dev-metric-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.045);
}

.dev-metric-card span,
.dev-metric-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.dev-metric-card strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.dev-system-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dev-system-panel section {
  padding: 16px;
  border: 1px solid rgba(17, 24, 32, 0.08);
  border-radius: 8px;
  background: #fbfcfa;
}

.dev-system-panel ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dev-system-panel li,
.dev-system-panel p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}

@media (max-width: 820px) {
  .activity-banner,
  .dev-support-summary,
  .dev-support-row {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-reason-grid,
  .dev-analytics-grid,
  .dev-system-panel {
    grid-template-columns: 1fr;
  }
}

/* v56 doodle visual system: hand-drawn retail UI without changing data or flows. */
:root {
  --ink: #12151b;
  --muted: #5f6875;
  --line: rgba(18, 21, 27, 0.2);
  --paper: #fffdf6;
  --paper-warm: #fff3d7;
  --soft: #f6f2e8;
  --green: #197257;
  --green-dark: #0f4f3b;
  --coral: #f17464;
  --gold: #d99b26;
  --blue: #3478b7;
  --pink: #ffb9cb;
  --mint: #c7f0df;
  --charcoal: #12151b;
  --doodle-shadow: 6px 7px 0 rgba(18, 21, 27, 0.12);
  --doodle-shadow-strong: 9px 10px 0 rgba(18, 21, 27, 0.16);
  --shadow: 0 22px 58px rgba(18, 21, 27, 0.13);
  --soft-shadow: 0 14px 34px rgba(18, 21, 27, 0.08);
  --doodle-ease: cubic-bezier(0.2, 0.9, 0.22, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 185, 203, 0.28), transparent 24%),
    radial-gradient(circle at 86% 6%, rgba(199, 240, 223, 0.34), transparent 22%),
    linear-gradient(90deg, rgba(18, 21, 27, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 21, 27, 0.035) 1px, transparent 1px),
    #fffdf6;
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

body::before {
  z-index: -2;
  opacity: 0.9;
  background:
    radial-gradient(circle at 7px 7px, rgba(18, 21, 27, 0.12) 1.2px, transparent 1.3px),
    linear-gradient(135deg, transparent 0 38%, rgba(255, 185, 203, 0.28) 38% 41%, transparent 41% 100%);
  background-size: 36px 36px, 260px 260px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.68) 56%, transparent 100%);
}

body::after {
  content: "";
  position: fixed;
  right: clamp(16px, 4vw, 64px);
  bottom: clamp(18px, 5vw, 72px);
  z-index: -1;
  width: 170px;
  height: 130px;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 48%, #12151b 49% 51%, transparent 52%),
    radial-gradient(ellipse at 50% 50%, transparent 48%, #12151b 49% 51%, transparent 52%);
  background-size: 96px 56px, 116px 66px;
  background-position: 0 18px, 42px 46px;
  background-repeat: no-repeat;
  transform: rotate(-9deg);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 84px;
  border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 185, 203, 0.16), transparent 24%, rgba(199, 240, 223, 0.22) 74%, transparent),
    rgba(255, 253, 246, 0.94);
  box-shadow: 0 10px 0 rgba(18, 21, 27, 0.055);
}

.site-header::before {
  content: "";
  position: absolute;
  left: clamp(14px, 3vw, 44px);
  right: clamp(14px, 3vw, 44px);
  bottom: -8px;
  height: 11px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, var(--ink) 0 45%, transparent 47%) 0 0 / 22px 7px repeat-x;
  opacity: 0.22;
}

.brand-mark,
.featured-product,
.product-card,
.filters,
.catalog,
.catalog-search,
.activity-banner,
.service-strip article,
.detail-media,
.detail-info,
.detail-block,
.related-section,
.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.checkout-dialog,
.legal-dialog,
.dev-drawer,
.auth-card,
.about-story article,
.review-card,
.review-empty,
.coupon-row,
.dev-metric-card,
.dev-support-row,
.dev-support-summary {
  border: 2px solid var(--ink);
  border-radius: 18px 14px 20px 13px / 14px 20px 12px 18px;
  background-color: rgba(255, 253, 246, 0.96);
  box-shadow: var(--doodle-shadow);
}

.brand-mark {
  transform: rotate(-2deg);
  background: #fff;
}

.brand strong,
.catalog-head h2,
.hero-copy h1,
.detail-info h1,
.about-intro h1,
.support-chat-head strong,
.orders-head strong,
.cart-head strong,
.account-panel-head strong,
.dev-head strong {
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(255, 185, 203, 0.45);
}

.main-nav a,
.main-nav button,
.account-button,
.logout-button,
.dev-button,
.cart-button,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.quick-collections button,
.filters button,
.support-chat-composer .primary-link,
.coupon-row button,
.dev-section-nav button,
.dev-mini-actions button,
.legal-head button,
.cart-head button,
.orders-head button,
.account-panel-head button,
.support-chat-head button,
.checkout-dialog-head button,
.auth-close-button {
  border: 2px solid var(--ink);
  border-radius: 14px 11px 16px 10px / 12px 15px 10px 14px;
  box-shadow: 4px 5px 0 rgba(18, 21, 27, 0.16);
  transform: rotate(-0.35deg);
  transition:
    transform 180ms var(--doodle-ease),
    box-shadow 180ms var(--doodle-ease),
    background 180ms ease,
    color 180ms ease;
}

.main-nav a,
.main-nav button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.main-nav a.active,
.main-nav a:hover,
.main-nav button:hover,
.quick-collections button.active,
.quick-collections button:hover,
.dev-section-nav button.active,
.dev-section-nav button:hover {
  color: var(--ink);
  background: var(--paper-warm);
}

.main-nav a::after,
.main-nav button::after {
  bottom: 5px;
  left: 12px;
  right: 12px;
  height: 5px;
  border-radius: 999px;
  background: rgba(241, 116, 100, 0.45);
  z-index: -1;
}

.account-button:hover,
.logout-button:hover,
.dev-button:hover,
.cart-button:hover,
.primary-link:hover,
.secondary-link:hover,
.add-button:hover,
.checkout:hover,
.quick-collections button:hover,
.filters button:hover,
.coupon-row button:hover,
.dev-mini-actions button:hover,
.legal-head button:hover,
.cart-head button:hover,
.orders-head button:hover,
.account-panel-head button:hover,
.support-chat-head button:hover,
.checkout-dialog-head button:hover,
.auth-close-button:hover {
  transform: translate(-2px, -2px) rotate(0.6deg);
  box-shadow: 7px 8px 0 rgba(18, 21, 27, 0.14);
}

.dev-button,
.cart-button,
.primary-link,
.checkout,
.add-button,
.support-chat-composer .primary-link,
.dev-mini-actions button:first-child {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 34%),
    var(--ink);
}

.secondary-link,
.account-button,
.logout-button {
  color: var(--ink);
  background: #fff;
}

.commerce-hero {
  min-height: calc(100svh - 84px);
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 185, 203, 0.28), transparent 19%),
    radial-gradient(circle at 86% 22%, rgba(199, 240, 223, 0.32), transparent 23%),
    linear-gradient(115deg, #fffdf6 0 52%, rgba(255, 243, 215, 0.72) 52% 100%);
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}

.commerce-hero::before {
  content: "NEW";
  position: absolute;
  top: clamp(28px, 6vw, 76px);
  left: clamp(18px, 5vw, 70px);
  width: 86px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 46% 54% 43% 57% / 52% 38% 62% 48%;
  color: var(--ink);
  background: var(--pink);
  font-size: 19px;
  font-weight: 1000;
  transform: rotate(-12deg);
  opacity: 0.86;
}

.commerce-hero::after {
  inset: auto clamp(16px, 6vw, 100px) clamp(12px, 4vw, 48px) auto;
  width: 160px;
  height: 92px;
  opacity: 0.38;
  background:
    radial-gradient(ellipse at center, transparent 43%, var(--ink) 45% 48%, transparent 50%) 0 0 / 62px 38px repeat-x;
  transform: rotate(-7deg);
}

.hero-copy {
  color: var(--ink);
}

.hero-copy .eyebrow,
.catalog-head .eyebrow,
.about-intro .eyebrow,
.detail-info .eyebrow {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper-warm);
  box-shadow: 3px 4px 0 rgba(18, 21, 27, 0.12);
  transform: rotate(-1.6deg);
}

.hero-copy h1 {
  color: var(--ink);
  text-shadow: 4px 4px 0 rgba(255, 185, 203, 0.55);
}

.hero-copy p:not(.eyebrow) {
  color: #404856;
  font-weight: 850;
}

.featured-product {
  position: relative;
  overflow: visible;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(199, 240, 223, 0.44)),
    var(--paper);
  transform: rotate(1.2deg);
}

.featured-product::before,
.product-card::before,
.detail-media::before,
.auth-card::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 9%;
  width: 92px;
  height: 24px;
  border: 1px solid rgba(18, 21, 27, 0.14);
  border-radius: 4px;
  background: rgba(255, 243, 215, 0.72);
  transform: rotate(-5deg);
  pointer-events: none;
}

.featured-product.is-fading {
  animation: doodleFlip 420ms var(--doodle-ease);
}

.product-card {
  position: relative;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 253, 246, 0.98)),
    var(--paper);
  transform: rotate(-0.45deg);
  animation: doodleRise 520ms var(--doodle-ease) both;
}

.product-card:nth-child(2n) {
  transform: rotate(0.55deg);
}

.product-card:nth-child(3n) {
  transform: rotate(-0.8deg);
}

.product-card:hover {
  transform: translateY(-8px) rotate(0.7deg);
  box-shadow: var(--doodle-shadow-strong);
}

.product-card::after {
  border-radius: 18px;
  background:
    repeating-linear-gradient(-22deg, transparent 0 16px, rgba(52, 120, 183, 0.08) 17px 19px);
  opacity: 0;
}

.product-card:hover::after {
  opacity: 1;
}

.product-media {
  border-bottom: 2px solid rgba(18, 21, 27, 0.14);
  background:
    radial-gradient(circle at 50% 48%, rgba(199, 240, 223, 0.72), transparent 48%),
    #f2f8f5;
}

.product-media img,
.detail-gallery-image,
.cart-item img,
.order-item img {
  filter: saturate(1.05) contrast(1.02);
}

.badge,
.product-media .badge {
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 10px;
  color: var(--ink);
  background: var(--pink);
  box-shadow: 3px 4px 0 rgba(18, 21, 27, 0.13);
  transform: rotate(-4deg);
}

.wishlist-button {
  border: 2px solid var(--ink);
  color: var(--ink);
  background: #fff;
  box-shadow: 3px 4px 0 rgba(18, 21, 27, 0.15);
}

.wishlist-button.active {
  background: var(--pink);
  transform: rotate(8deg) scale(1.05);
}

.catalog-search-band,
.store-shell,
.service-strip,
.activity-banner,
.related-section,
.about-page {
  animation: doodleRise 540ms var(--doodle-ease) both;
}

.catalog-search input,
.filters input,
.filters select,
.checkout-address-form select,
.checkout-address-form textarea,
.support-chat-composer textarea,
.dev-site-panel input,
.dev-category-panel input,
.dev-account-panel input,
.dev-site-panel textarea,
.auth-card input,
.order-review-form textarea,
.order-review-form select,
.account-panel input,
.account-panel textarea {
  border: 2px solid var(--ink);
  border-radius: 13px 17px 12px 15px / 15px 12px 16px 13px;
  background:
    linear-gradient(transparent 0 calc(100% - 2px), rgba(52, 120, 183, 0.18) calc(100% - 2px)),
    #fff;
  box-shadow: inset 0 -3px 0 rgba(18, 21, 27, 0.035);
}

.catalog-search input:focus,
.filters input:focus,
.filters select:focus,
.checkout-address-form select:focus,
.checkout-address-form textarea:focus,
.support-chat-composer textarea:focus,
.dev-site-panel input:focus,
.dev-category-panel input:focus,
.dev-account-panel input:focus,
.dev-site-panel textarea:focus,
.auth-card input:focus,
.order-review-form textarea:focus,
.order-review-form select:focus {
  outline: 4px solid rgba(255, 185, 203, 0.55);
  outline-offset: 2px;
}

fieldset,
.price-filter,
.detail-reason-item,
.checkout-address-card,
.support-chat-order,
.support-chat-order-card,
.support-message,
.order-list-row,
.order-detail-head,
.order-item,
.account-stat-card,
.recent-row,
.wishlist-row,
.dev-list-item,
.dev-system-panel section,
.dev-inline-switch {
  border: 2px solid rgba(18, 21, 27, 0.72);
  border-radius: 16px 12px 15px 13px / 12px 15px 12px 16px;
  background: rgba(255, 255, 255, 0.82);
}

.cart-overlay,
.account-overlay,
.orders-overlay,
.support-chat-overlay,
.checkout-overlay,
.legal-overlay,
.dev-overlay {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 185, 203, 0.18), transparent 30%),
    rgba(18, 21, 27, 0.38);
  backdrop-filter: blur(5px);
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.dev-drawer {
  background:
    linear-gradient(90deg, rgba(18, 21, 27, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 21, 27, 0.03) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}

.cart-drawer.open,
.account-panel.open,
.orders-drawer.open,
.support-chat-drawer.open,
.dev-drawer.open,
.checkout-dialog.open,
.legal-dialog.open {
  animation: doodlePanelIn 360ms var(--doodle-ease) both;
}

.cart-head,
.account-panel-head,
.orders-head,
.support-chat-head,
.dev-head,
.legal-head,
.checkout-dialog-head {
  border-bottom: 2px dashed rgba(18, 21, 27, 0.28);
}

.cart-summary,
.checkout-confirm-summary,
.coupon-row,
.activity-banner,
.service-strip article,
.detail-reason-item,
.dev-support-summary {
  background:
    linear-gradient(135deg, rgba(199, 240, 223, 0.42), rgba(255, 253, 246, 0.94));
}

.detail-page {
  background:
    radial-gradient(circle at 5% 8%, rgba(255, 185, 203, 0.28), transparent 24%),
    radial-gradient(circle at 96% 32%, rgba(199, 240, 223, 0.34), transparent 22%),
    transparent !important;
}

html body main .detail-page .detail-info,
html body main .detail-page .detail-info h1,
html body main .detail-page .detail-desc,
html body main .detail-page .detail-rating,
html body main .detail-page .detail-price,
html body main .detail-page .detail-block h2,
html body main .detail-page .back-link,
html body main .detail-page .spec-list dt,
html body main .detail-page .spec-list dd {
  color: var(--ink) !important;
}

.detail-media,
.detail-info {
  position: relative;
}

.detail-info {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.96), rgba(255, 243, 215, 0.42)),
    var(--paper);
}

.detail-gallery-button,
.detail-gallery-dots button {
  border: 2px solid var(--ink);
  color: var(--ink);
  background: #fff;
  box-shadow: 3px 4px 0 rgba(18, 21, 27, 0.14);
}

.highlight-list li,
.spec-list div {
  border: 2px solid rgba(18, 21, 27, 0.42);
  border-radius: 16px 12px 16px 10px;
  background: rgba(255, 255, 255, 0.78);
}

.review-stars span {
  color: rgba(18, 21, 27, 0.28);
  text-shadow: none;
}

.review-stars .filled {
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--ink);
}

.review-filter-bar button {
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  box-shadow: 3px 4px 0 rgba(18, 21, 27, 0.12);
}

.review-filter-bar button.active,
.review-filter-bar button:hover {
  color: var(--ink);
  background: var(--mint);
}

.auth-gate {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 185, 203, 0.24), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(199, 240, 223, 0.2), transparent 25%),
    #f8f5ed;
}

.auth-shell {
  border: 3px solid var(--ink);
  border-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
  background: var(--paper);
  box-shadow: var(--doodle-shadow-strong);
}

.auth-visual::after {
  background:
    linear-gradient(90deg, rgba(18, 21, 27, 0.2), rgba(18, 21, 27, 0.08) 40%, rgba(18, 21, 27, 0.42)),
    radial-gradient(circle at 24% 78%, rgba(255, 243, 215, 0.34), transparent 34%);
}

.auth-card {
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(18, 21, 27, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 21, 27, 0.024) 1px, transparent 1px),
    rgba(255, 253, 246, 0.94);
  background-size: 24px 24px;
}

.auth-card::before {
  top: 20px;
  left: auto;
  right: 104px;
  width: 138px;
  background: rgba(255, 185, 203, 0.38);
}

.auth-card::after {
  opacity: 0.32;
}

.auth-tabs,
.auth-card button[type="submit"] {
  border: 2px solid var(--ink);
  border-radius: 16px;
}

.auth-tab.active {
  background: var(--green);
  box-shadow: inset 0 -5px 0 rgba(18, 21, 27, 0.14);
}

.auth-eye-toy__face {
  border: 3px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(18, 21, 27, 0.14);
}

.support-message.from-admin,
.support-message.from-user {
  box-shadow: 4px 5px 0 rgba(18, 21, 27, 0.1);
}

.support-message.from-admin {
  background: var(--mint);
}

.support-message.from-user {
  background: #fff;
}

.support-chat-unread,
.dev-support-row i,
.dev-order-summary i {
  border: 2px solid var(--ink);
  background: var(--coral);
}

.about-page {
  min-height: calc(100svh - var(--active-header-height, 84px));
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 185, 203, 0.2), transparent 26%),
    var(--paper);
}

.about-story article {
  overflow: hidden;
}

.site-footer {
  border-top: 3px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 185, 203, 0.2), transparent 28%, rgba(199, 240, 223, 0.24)),
    var(--paper);
}

.site-footer button {
  position: relative;
  color: var(--ink);
  font-weight: 900;
}

.site-footer button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 185, 203, 0.48);
  transform: scaleX(0.7) rotate(-1deg);
  transform-origin: left;
}

@keyframes doodleRise {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-0.6deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes doodlePanelIn {
  0% {
    opacity: 0;
    transform: translateX(26px) rotate(0.8deg);
  }
  64% {
    opacity: 1;
    transform: translateX(-5px) rotate(-0.4deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes doodleFlip {
  0% {
    opacity: 1;
    transform: rotate(1.2deg) scale(1);
  }
  42% {
    opacity: 0.45;
    transform: rotate(-1.8deg) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: rotate(1.2deg) scale(1);
  }
}

@keyframes doodleWiggle {
  0%,
  100% {
    transform: rotate(-0.35deg);
  }
  45% {
    transform: rotate(1.1deg);
  }
  70% {
    transform: rotate(-0.8deg);
  }
}

.cart-count-pulse,
.wishlist-button.active,
.add-button:active,
.checkout:active,
.primary-link:active {
  animation: doodleWiggle 360ms var(--doodle-ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 900px) {
  .site-header {
    min-height: 74px;
  }

  .commerce-hero {
    min-height: auto;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 185, 203, 0.24), transparent 24%),
      linear-gradient(180deg, #fffdf6, #fff3d7);
  }

  .commerce-hero::before {
    width: 64px;
    height: 42px;
    font-size: 14px;
  }

  .featured-product,
  .product-card,
  .product-card:nth-child(2n),
  .product-card:nth-child(3n) {
    transform: rotate(0deg);
  }

  .cart-drawer,
  .account-panel,
  .orders-drawer,
  .support-chat-drawer,
  .dev-drawer {
    border-radius: 20px 20px 0 0;
  }
}

/* v57 AI curation visual system: stable, clean, no doodle wobble or flash. */
:root {
  --ink: #101722;
  --muted: #687486;
  --line: rgba(16, 23, 34, 0.12);
  --paper: #ffffff;
  --paper-warm: #f7fafc;
  --soft: #f3f7fb;
  --green: #16745d;
  --green-dark: #0e5946;
  --coral: #e66f5f;
  --gold: #bd8a2f;
  --blue: #2563eb;
  --pink: #f6bfd0;
  --mint: #dff7ef;
  --charcoal: #101722;
  --shadow: 0 24px 70px rgba(16, 23, 34, 0.1);
  --soft-shadow: 0 16px 44px rgba(16, 23, 34, 0.07);
  --doodle-shadow: var(--soft-shadow);
  --doodle-shadow-strong: var(--shadow);
  --doodle-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.11), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(22, 116, 93, 0.12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 46%, #f6faf8 100%);
}

body::before {
  z-index: -2;
  opacity: 0.42;
  background:
    linear-gradient(120deg, rgba(37, 99, 235, 0.08), transparent 36%),
    linear-gradient(90deg, rgba(16, 23, 34, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 23, 34, 0.028) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 82%);
}

body::after,
.commerce-hero::before,
.commerce-hero::after,
.featured-product::before,
.product-card::before,
.detail-media::before,
.auth-card::before {
  display: none !important;
}

.site-header {
  min-height: 82px;
  border-bottom: 1px solid rgba(16, 23, 34, 0.09);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(16, 23, 34, 0.055);
  backdrop-filter: blur(18px);
}

.site-header::before {
  display: none;
}

.brand-mark,
.featured-product,
.product-card,
.filters,
.catalog,
.catalog-search,
.activity-banner,
.service-strip article,
.detail-media,
.detail-info,
.detail-block,
.related-section,
.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.checkout-dialog,
.legal-dialog,
.dev-drawer,
.auth-card,
.about-story article,
.review-card,
.review-empty,
.coupon-row,
.dev-metric-card,
.dev-support-row,
.dev-support-summary,
.checkout-address-card,
.support-chat-order,
.support-chat-order-card,
.support-message,
.order-list-row,
.order-detail-head,
.order-item,
.account-stat-card,
.recent-row,
.wishlist-row,
.dev-list-item,
.dev-system-panel section,
.dev-inline-switch,
fieldset,
.price-filter,
.detail-reason-item,
.highlight-list li,
.spec-list div {
  border: 1px solid rgba(16, 23, 34, 0.1) !important;
  border-radius: 18px !important;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: var(--soft-shadow) !important;
  transform: none !important;
}

.product-card,
.product-card:nth-child(2n),
.product-card:nth-child(3n),
.catalog-search-band,
.store-shell,
.service-strip,
.activity-banner,
.related-section,
.about-page,
.featured-product.is-fading,
.cart-count-pulse,
.wishlist-button.active,
.add-button:active,
.checkout:active,
.primary-link:active {
  animation: none !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 58px rgba(16, 23, 34, 0.12) !important;
}

.cart-drawer.open,
.account-panel.open,
.orders-drawer.open,
.support-chat-drawer.open,
.dev-drawer.open,
.checkout-dialog.open,
.legal-dialog.open {
  animation: none !important;
}

.brand-mark {
  border-radius: 16px !important;
  background: #fff;
}

.brand strong,
.catalog-head h2,
.hero-copy h1,
.detail-info h1,
.about-intro h1,
.support-chat-head strong,
.orders-head strong,
.cart-head strong,
.account-panel-head strong,
.dev-head strong {
  text-shadow: none !important;
}

.main-nav a,
.main-nav button,
.account-button,
.logout-button,
.dev-button,
.cart-button,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.quick-collections button,
.filters button,
.support-chat-composer .primary-link,
.coupon-row button,
.dev-section-nav button,
.dev-mini-actions button,
.legal-head button,
.cart-head button,
.orders-head button,
.account-panel-head button,
.support-chat-head button,
.checkout-dialog-head button,
.auth-close-button,
.review-filter-bar button,
.detail-gallery-button,
.detail-gallery-dots button,
.wishlist-button {
  border: 1px solid rgba(16, 23, 34, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    opacity 160ms ease !important;
}

.main-nav a,
.main-nav button {
  min-height: 40px;
  padding: 0 14px;
  color: #425064;
  background: transparent;
}

.main-nav a::after,
.main-nav button::after {
  right: 12px;
  bottom: 2px;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  z-index: 0;
}

.main-nav a.active,
.main-nav a:hover,
.main-nav button:hover {
  color: var(--ink);
  background: rgba(37, 99, 235, 0.07);
}

.account-button,
.logout-button,
.secondary-link,
.quick-collections button,
.filters button,
.coupon-row button,
.review-filter-bar button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
}

.dev-button,
.cart-button,
.primary-link,
.checkout,
.add-button,
.support-chat-composer .primary-link,
.dev-mini-actions button:first-child,
.auth-card button[type="submit"] {
  color: #fff;
  border-color: rgba(16, 23, 34, 0.05) !important;
  background:
    linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #16745d 100%) !important;
  box-shadow: 0 14px 30px rgba(29, 78, 216, 0.18) !important;
}

.account-button:hover,
.logout-button:hover,
.secondary-link:hover,
.quick-collections button:hover,
.filters button:hover,
.coupon-row button:hover,
.review-filter-bar button:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.dev-button:hover,
.cart-button:hover,
.primary-link:hover,
.checkout:hover,
.add-button:hover,
.support-chat-composer .primary-link:hover,
.auth-card button[type="submit"]:hover {
  background:
    linear-gradient(135deg, #101722 0%, #2563eb 54%, #0e5946 100%) !important;
  box-shadow: 0 18px 36px rgba(29, 78, 216, 0.22) !important;
}

.commerce-hero {
  min-height: calc(100svh - 82px);
  border-bottom: 1px solid rgba(16, 23, 34, 0.08);
  background:
    radial-gradient(circle at 70% 24%, rgba(37, 99, 235, 0.14), transparent 25%),
    radial-gradient(circle at 88% 68%, rgba(22, 116, 93, 0.14), transparent 24%),
    linear-gradient(115deg, #f8fbff 0 47%, #ffffff 47% 100%);
  color: var(--ink);
}

.hero-copy .eyebrow,
.catalog-head .eyebrow,
.about-intro .eyebrow,
.detail-info .eyebrow {
  width: max-content;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 999px !important;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: none !important;
  transform: none !important;
}

.hero-copy h1 {
  color: var(--ink);
  text-shadow: none !important;
}

.hero-copy p:not(.eyebrow),
.detail-desc,
.activity-banner p {
  color: #526071;
}

.featured-product,
.product-card,
.detail-info,
.detail-media,
.catalog,
.filters,
.auth-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 255, 0.9)),
    #fff;
}

.product-media {
  border-bottom: 1px solid rgba(16, 23, 34, 0.08);
  background:
    radial-gradient(circle at 50% 45%, rgba(37, 99, 235, 0.08), transparent 48%),
    linear-gradient(180deg, #f7fbff, #eef8f4);
}

.badge,
.product-media .badge {
  border: 1px solid rgba(16, 23, 34, 0.08) !important;
  border-radius: 999px !important;
  color: #0e5946;
  background: rgba(22, 116, 93, 0.1);
  box-shadow: none !important;
  transform: none !important;
}

.wishlist-button {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
}

.wishlist-button.active {
  color: #be123c;
  background: rgba(246, 191, 208, 0.45);
  transform: none !important;
}

.catalog-search input,
.filters input,
.filters select,
.checkout-address-form select,
.checkout-address-form textarea,
.support-chat-composer textarea,
.dev-site-panel input,
.dev-category-panel input,
.dev-account-panel input,
.dev-site-panel textarea,
.auth-card input,
.order-review-form textarea,
.order-review-form select,
.account-panel input,
.account-panel textarea {
  border: 1px solid rgba(16, 23, 34, 0.12) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.catalog-search input:focus,
.filters input:focus,
.filters select:focus,
.checkout-address-form select:focus,
.checkout-address-form textarea:focus,
.support-chat-composer textarea:focus,
.dev-site-panel input:focus,
.dev-category-panel input:focus,
.dev-account-panel input:focus,
.dev-site-panel textarea:focus,
.auth-card input:focus,
.order-review-form textarea:focus,
.order-review-form select:focus {
  outline: 3px solid rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.42) !important;
}

.activity-banner,
.cart-summary,
.checkout-confirm-summary,
.coupon-row,
.service-strip article,
.detail-reason-item,
.dev-support-summary {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(22, 116, 93, 0.08)),
    #fff;
}

.cart-overlay,
.account-overlay,
.orders-overlay,
.support-chat-overlay,
.checkout-overlay,
.legal-overlay,
.dev-overlay {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
}

.cart-drawer,
.account-panel,
.orders-drawer,
.support-chat-drawer,
.dev-drawer {
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.cart-head,
.account-panel-head,
.orders-head,
.support-chat-head,
.dev-head,
.legal-head,
.checkout-dialog-head {
  border-bottom: 1px solid rgba(16, 23, 34, 0.08);
}

.auth-gate {
  background:
    radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.1), transparent 26%),
    radial-gradient(circle at 82% 76%, rgba(22, 116, 93, 0.1), transparent 28%),
    #f8fbff;
}

.auth-shell {
  border: 1px solid rgba(16, 23, 34, 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}

.auth-card {
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.92)),
    #fff;
}

.auth-tabs,
.auth-card button[type="submit"] {
  border: 1px solid rgba(16, 23, 34, 0.1) !important;
  border-radius: 14px !important;
}

.auth-tab.active {
  background: var(--green);
  box-shadow: none;
}

.auth-eye-toy__face {
  border: 1px solid rgba(16, 23, 34, 0.16);
  box-shadow: 0 14px 30px rgba(16, 23, 34, 0.12);
}

.support-message.from-admin {
  background: rgba(22, 116, 93, 0.12);
}

.support-message.from-user {
  background: #fff;
}

.review-filter-bar button.active,
.review-filter-bar button:hover,
.quick-collections button.active,
.quick-collections button:hover,
.dev-section-nav button.active,
.dev-section-nav button:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.22) !important;
}

.site-footer {
  border-top: 1px solid rgba(16, 23, 34, 0.08);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.04), rgba(22, 116, 93, 0.05)),
    #fff;
}

.site-footer button::after {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    min-height: 74px;
  }

  .commerce-hero {
    min-height: auto;
    background:
      radial-gradient(circle at 74% 16%, rgba(37, 99, 235, 0.12), transparent 28%),
      linear-gradient(180deg, #f8fbff, #fff);
  }
}

/* v58 stability pass: remove click wobble and restore about imagery. */
main > section:not(.auth-gate),
.product-card,
.product-card:nth-child(2n),
.product-card:nth-child(3n),
.featured-product,
.catalog-search-band,
.store-shell,
.activity-banner,
.service-strip,
.related-section,
.detail-page,
.detail-media,
.detail-info,
.cart-item,
.order-list-row,
.support-chat-order,
.coupon-row,
.review-card,
.review-empty,
.account-stat-card,
.recent-row,
.wishlist-row {
  animation: none !important;
}

.product-card,
.product-card:hover,
.featured-product,
.featured-product.is-fading,
.cart-button,
.dev-button,
.account-button,
.logout-button,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.quick-collections button,
.filters button,
.coupon-row button,
.review-filter-bar button,
.main-nav a,
.main-nav button {
  transform: none !important;
}

.product-card:hover,
.featured-product:hover {
  box-shadow: 0 18px 48px rgba(16, 23, 34, 0.11) !important;
}

.about-story-stage {
  border: 1px solid rgba(16, 23, 34, 0.1);
  border-radius: 24px;
  background: #101722;
  box-shadow: 0 28px 80px rgba(16, 23, 34, 0.16);
}

.about-story-visual {
  z-index: 0;
  background: #101722;
}

.about-story-image {
  display: block !important;
  opacity: 0;
  background-color: #101722;
  background-position: center;
  background-size: cover;
  transform: none !important;
  transition: opacity 420ms ease !important;
}

.about-story-image.active {
  opacity: 1 !important;
}

.about-story-section,
.about-story article,
body.view-about .about-story-section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.about-story-copy {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(8, 13, 23, 0.28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.about-story-copy::before {
  display: none;
}

.about-story-link,
.primary-link,
.secondary-link,
.add-button,
.checkout,
.cart-button,
.dev-button,
.account-button,
.logout-button,
.quick-collections button,
.filters button,
.coupon-row button,
.review-filter-bar button,
.dev-mini-actions button,
.support-chat-composer .primary-link,
.auth-card button[type="submit"] {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  overflow: hidden;
  font-weight: 950;
}

.primary-link,
.add-button,
.checkout,
.cart-button,
.dev-button,
.support-chat-composer .primary-link,
.auth-card button[type="submit"],
.dev-mini-actions button:first-child {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 34%) padding-box,
    linear-gradient(135deg, #101722 0%, #2563eb 48%, #16a37f 100%) border-box !important;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.secondary-link,
.account-button,
.logout-button,
.quick-collections button,
.filters button,
.coupon-row button,
.review-filter-bar button,
.dev-mini-actions button,
.about-story-link {
  color: #102033 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.76)) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.32), rgba(22, 163, 127, 0.24)) border-box !important;
  box-shadow:
    0 10px 26px rgba(16, 23, 34, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.about-story-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.primary-link::after,
.add-button::after,
.checkout::after,
.cart-button::after,
.dev-button::after,
.secondary-link::after,
.account-button::after,
.logout-button::after,
.quick-collections button::after,
.filters button::after,
.coupon-row button::after,
.review-filter-bar button::after,
.about-story-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.36), transparent 34%);
  opacity: 0.72;
  pointer-events: none;
}

.primary-link:hover,
.add-button:hover,
.checkout:hover,
.cart-button:hover,
.dev-button:hover,
.support-chat-composer .primary-link:hover,
.auth-card button[type="submit"]:hover {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 32%) padding-box,
    linear-gradient(135deg, #0f172a 0%, #1d4ed8 45%, #10936f 100%) border-box !important;
  box-shadow:
    0 16px 34px rgba(37, 99, 235, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.secondary-link:hover,
.account-button:hover,
.logout-button:hover,
.quick-collections button:hover,
.filters button:hover,
.coupon-row button:hover,
.review-filter-bar button:hover,
.about-story-link:hover {
  color: #0f3f75 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.88)) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(22, 163, 127, 0.4)) border-box !important;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.main-nav {
  padding: 5px;
  border: 1px solid rgba(16, 23, 34, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.main-nav a,
.main-nav button {
  min-height: 38px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent;
  box-shadow: none !important;
}

.main-nav a.active,
.main-nav a:hover,
.main-nav button:hover {
  color: #0f3f75;
  background: rgba(37, 99, 235, 0.1);
}

.main-nav a::after,
.main-nav button::after {
  display: none;
}

.product-card {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease !important;
}

.product-card:hover {
  border-color: rgba(37, 99, 235, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92)),
    #fff;
}

/* v61 drawer visibility guard: keep closed panels off-screen after the no-wobble theme overrides. */
.cart-drawer:not(.open),
.account-panel:not(.open),
.orders-drawer:not(.open),
.support-chat-drawer:not(.open),
.dev-drawer:not(.open) {
  pointer-events: none !important;
  transform: translateX(105%) !important;
}

.cart-drawer.open,
.account-panel.open,
.orders-drawer.open,
.support-chat-drawer.open,
.dev-drawer.open {
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

.checkout-dialog:not(.open),
.legal-dialog:not(.open) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.checkout-dialog.open,
.legal-dialog.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* v62 product detail cards: lighter AI-curation panels instead of heavy bordered boxes. */
html body main .detail-page .detail-purchase-panel,
html body main .detail-page .detail-block {
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.9)),
    #fff !important;
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html body main .detail-page .detail-block {
  padding: clamp(22px, 2.5vw, 34px) !important;
}

html body main .detail-page .detail-block h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(24px, 2.7vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html body main .detail-page .detail-block-title {
  align-items: end;
  gap: 18px;
  margin-bottom: 22px;
}

html body main .detail-page .detail-block-title span {
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html body main .detail-page .highlight-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px !important;
  margin-top: 24px !important;
}

html body main .detail-page .highlight-list li {
  position: relative;
  min-height: 64px;
  padding: 18px 20px 18px 52px !important;
  border: 1px solid rgba(20, 184, 166, 0.14) !important;
  border-radius: 18px !important;
  color: #113f36 !important;
  background:
    radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(241, 252, 248, 0.98), rgba(248, 251, 255, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body main .detail-page .highlight-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 36%, #fff 0 22%, transparent 24%),
    linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

html body main .detail-page .detail-reason-block {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.9)),
    #fff !important;
}

html body main .detail-page .detail-reason-grid {
  gap: 16px !important;
}

html body main .detail-page .detail-reason-item {
  position: relative;
  min-height: 132px;
  padding: 22px 24px !important;
  border: 1px solid rgba(37, 99, 235, 0.1) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.86)),
    #fff !important;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow: hidden;
}

html body main .detail-page .detail-reason-item::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.09);
}

html body main .detail-page .detail-reason-item span {
  display: inline-flex !important;
  margin: 0 0 12px !important;
  color: #b7791f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body main .detail-page .detail-reason-item p {
  max-width: 92%;
  color: #1f2937 !important;
  font-size: clamp(16px, 1.45vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
}

html body main .detail-page .spec-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body main .detail-page .spec-list div {
  display: grid !important;
  grid-template-columns: minmax(82px, 0.42fr) 1fr;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 16px 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9)),
    #fff !important;
  box-shadow: none !important;
}

html body main .detail-page .spec-list dt {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body main .detail-page .spec-list dd {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-align: right;
}

html body main .detail-page .detail-trust-panel {
  gap: 12px !important;
}

html body main .detail-page .detail-trust-item,
html body main .detail-page .detail-service-note {
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.86)),
    #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 760px) {
  html body main .detail-page .detail-block {
    border-radius: 20px !important;
    padding: 20px !important;
  }

  html body main .detail-page .detail-reason-grid,
  html body main .detail-page .highlight-list,
  html body main .detail-page .spec-list {
    grid-template-columns: 1fr !important;
  }

  html body main .detail-page .detail-reason-item {
    min-height: auto;
    padding: 18px !important;
  }

  html body main .detail-page .spec-list dd {
    text-align: left;
  }
}

/* v135 store chat and fixed product gallery polish. */
html body.product-detail-page main {
  overflow: visible !important;
}

html body.product-detail-page .detail-page {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.92fr) minmax(430px, 1fr) !important;
  align-items: start !important;
  gap: clamp(34px, 5vw, 72px) !important;
  width: min(1160px, calc(100vw - 64px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(54px, 7vh, 88px) 0 60px !important;
}

html body.product-detail-page .detail-back-button {
  grid-column: 1 / -1;
  width: fit-content;
}

html body.product-detail-page .detail-media {
  position: sticky !important;
  top: calc(var(--active-header-height, 82px) + 72px) !important;
  align-self: start !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1.14 / 1 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #f4f8fb !important;
  box-shadow: 0 34px 70px rgba(15, 23, 42, 0.12) !important;
}

html body.product-detail-page .detail-gallery-track {
  display: flex !important;
  height: 100% !important;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

html body.product-detail-page .detail-gallery-image {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

html body.product-detail-page .detail-media::before,
html body.product-detail-page .detail-media::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 54px;
  z-index: 3;
  pointer-events: none;
}

html body.product-detail-page .detail-media::before {
  left: 0;
  background: linear-gradient(90deg, rgba(244, 248, 251, 0.92), rgba(244, 248, 251, 0));
}

html body.product-detail-page .detail-media::after {
  right: 0;
  background: linear-gradient(270deg, rgba(244, 248, 251, 0.92), rgba(244, 248, 251, 0));
}

html body.product-detail-page .detail-gallery-button,
html body.product-detail-page .detail-gallery-dots,
html body.product-detail-page .detail-media .badge {
  z-index: 5 !important;
}

html body.product-detail-page .detail-info {
  display: grid !important;
  gap: 18px !important;
  padding: 26px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 30px 72px rgba(15, 23, 42, 0.08) !important;
}

html body.product-detail-page .detail-store-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(239, 246, 255, 0.92));
}

html body.product-detail-page .detail-store-card span,
html body.product-detail-page .detail-store-card small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

html body.product-detail-page .detail-store-card strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

html body.product-detail-page .detail-store-card ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body.product-detail-page .detail-store-card li {
  min-width: 58px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
}

@media (max-width: 940px) {
  html body.product-detail-page .detail-page {
    grid-template-columns: 1fr !important;
    width: min(680px, calc(100vw - 28px)) !important;
    padding-top: 28px !important;
  }

  html body.product-detail-page .detail-media {
    position: relative !important;
    top: auto !important;
  }

  html body.product-detail-page .detail-store-card {
    grid-template-columns: 1fr;
  }
}

/* v111 floating pet palette: real radial tray motion, stable icons, and no page scroll while wheeling the menu. */
html body .floating-pet-shell {
  z-index: 1040;
  isolation: isolate;
}

html body .floating-pet-button {
  z-index: 12;
  transition:
    filter 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .floating-pet-shell.is-open .floating-pet-button {
  transform: translate3d(0, 0, 0) scale(1.02);
}

html body .floating-pet-button .auth-eye-toy__face {
  overflow: hidden;
}

html body .floating-pet-button .auth-eye-toy__eye {
  z-index: 3;
}

html body .floating-pet-button .auth-eye-toy__pupil {
  will-change: transform, opacity;
}

html body .floating-pet-menu {
  z-index: 8;
  width: 360px;
  height: 260px;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
  transform: translate(-50%, -50%) scale(0.92);
  transition:
    opacity 160ms ease,
    visibility 0ms linear 230ms,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

html body .floating-pet-shell.is-open .floating-pet-menu {
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

html body .floating-pet-shell.is-closing .floating-pet-menu {
  transform: translate(-50%, -50%) scale(0.9);
}

html body .floating-pet-palette {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 258px;
  height: 86px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 52%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86) 28%, transparent 60%),
    linear-gradient(110deg, rgba(255, 232, 239, 0.96), rgba(255, 255, 255, 0.94) 46%, rgba(255, 210, 226, 0.9));
  border: 1px solid rgba(233, 181, 201, 0.42);
  box-shadow:
    0 18px 38px rgba(96, 61, 82, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  opacity: 0;
  filter: blur(3px);
  clip-path: ellipse(50% 44% at 50% 50%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  will-change: transform, opacity, filter;
  transition:
    opacity 160ms ease,
    filter 180ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

html body .menu-opens-left .floating-pet-palette {
  transform-origin: calc(100% - 28px) 50%;
  transform: translate(calc(-100% + 34px), -50%) rotate(9deg) scaleX(0.08);
}

html body .menu-opens-right .floating-pet-palette {
  transform-origin: 28px 50%;
  transform: translate(-34px, -50%) rotate(-9deg) scaleX(0.08);
}

html body .menu-opens-down .floating-pet-palette {
  margin-top: 36px;
}

html body .menu-opens-up .floating-pet-palette {
  margin-top: -36px;
}

html body .floating-pet-shell.is-open.menu-opens-left .floating-pet-palette {
  opacity: 1;
  filter: blur(0);
  transform: translate(calc(-100% + 34px), -50%) rotate(9deg) scaleX(1);
}

html body .floating-pet-shell.is-open.menu-opens-right .floating-pet-palette {
  opacity: 1;
  filter: blur(0);
  transform: translate(-34px, -50%) rotate(-9deg) scaleX(1);
}

html body .floating-pet-shell.is-closing.menu-opens-left .floating-pet-palette {
  opacity: 0;
  filter: blur(3px);
  transform: translate(calc(-100% + 34px), -50%) rotate(9deg) scaleX(0.08);
}

html body .floating-pet-shell.is-closing.menu-opens-right .floating-pet-palette {
  opacity: 0;
  filter: blur(3px);
  transform: translate(-34px, -50%) rotate(-9deg) scaleX(0.08);
}

html body .floating-pet-menu::before,
html body .floating-pet-menu::after {
  top: 66px;
  bottom: 66px;
  width: 76px;
  z-index: 3;
  filter: blur(0.2px);
}

html body .floating-pet-menu::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 251, 0.46), transparent);
}

html body .floating-pet-menu::after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 251, 0.46), transparent);
}

html body .floating-pet-action {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(233, 181, 201, 0.52);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 242, 247, 0.92));
  color: #18283a;
  box-shadow:
    0 14px 30px rgba(67, 44, 65, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  overflow: hidden;
  will-change: transform, opacity, filter;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

html body .floating-pet-action-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 126, 168, 0.18), transparent 62%);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

html body .floating-pet-action-icon {
  position: relative;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  color: inherit;
}

html body .floating-pet-action-icon svg {
  display: block !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .floating-pet-action-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(190, 74, 116, 0.2);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

html body .floating-pet-shell.is-open .floating-pet-action:hover,
html body .floating-pet-shell.is-open .floating-pet-action:focus-visible {
  color: #9f174d;
  border-color: rgba(225, 119, 158, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 232, 241, 0.98));
  box-shadow:
    0 20px 38px rgba(117, 72, 98, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

html body .floating-pet-shell.is-open .floating-pet-action:hover .floating-pet-action-glow,
html body .floating-pet-shell.is-open .floating-pet-action:focus-visible .floating-pet-action-glow {
  opacity: 1;
  transform: scale(1);
}

html body .floating-pet-shell.is-open .floating-pet-action:hover .floating-pet-action-icon,
html body .floating-pet-shell.is-open .floating-pet-action:focus-visible .floating-pet-action-icon {
  transform: scale(1.08);
}

@media (max-width: 760px) {
  html body .floating-pet-menu {
    width: 290px;
    height: 220px;
  }

  html body .floating-pet-palette {
    width: 214px;
    height: 76px;
  }

  html body .floating-pet-action {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
  }

  html body .floating-pet-action-icon,
  html body .floating-pet-action-icon svg {
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
  }
}

/* v64 sticky filters: keep the product filter panel available while the catalog scrolls. */
html body .store-shell {
  align-items: start !important;
  overflow: visible !important;
}

html body .store-shell .filters {
  position: sticky !important;
  top: max(14px, calc(var(--active-header-height, 82px) + 14px)) !important;
  align-self: start !important;
  max-height: calc(100svh - var(--active-header-height, 82px) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 12;
  scrollbar-gutter: stable;
}

html body .store-shell .filters::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.filters-dock-placeholder {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

html body.view-products .store-shell .filters.is-docked {
  position: fixed !important;
  top: var(--filter-dock-top) !important;
  left: var(--filter-dock-left) !important;
  width: var(--filter-dock-width) !important;
  max-height: var(--filter-dock-max-height) !important;
  overflow-y: auto !important;
  z-index: 38;
}

@media (max-width: 720px) {
  html body .store-shell .filters {
    top: 12px !important;
    max-height: calc(100svh - 24px);
  }
}

/* v65 about page: full-bleed story images with text directly over the image. */
html body.view-about main {
  background: #0f172a;
}

html body.view-about .about-page {
  padding: 0 !important;
}

html body.view-about .about-story {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

html body.view-about .about-story-stage {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0f172a !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.view-about .about-story-visual {
  background: #0f172a !important;
}

html body.view-about .about-story-image {
  background-position: center !important;
  background-size: cover !important;
}

html body.view-about .about-story-image::after {
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(90deg, rgba(4, 10, 18, 0.62) 0%, rgba(4, 10, 18, 0.34) 44%, rgba(4, 10, 18, 0.5) 100%) !important;
}

html body.view-about .about-story-section {
  padding: clamp(36px, 6vw, 96px) !important;
}

html body.view-about .about-story-copy {
  width: min(680px, calc(100vw - 64px)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.view-about .about-story-copy::before {
  display: none !important;
}

html body.view-about .about-page .about-story-copy h2 {
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.72),
    0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

html body.view-about .about-page .about-story-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.72),
    0 1px 1px rgba(0, 0, 0, 0.72) !important;
}

@media (max-width: 720px) {
  html body.view-about .about-story-section {
    padding: 26px 18px !important;
  }

  html body.view-about .about-story-copy {
    width: min(100%, calc(100vw - 36px)) !important;
  }
}

/* v67 unified surface polish: airier AI-curation panels across shopping, account, support and dev UI. */
:root {
  --surface-border: rgba(15, 23, 42, 0.075);
  --surface-border-strong: rgba(37, 99, 235, 0.16);
  --surface-shadow: 0 24px 70px rgba(15, 23, 42, 0.07);
  --surface-shadow-soft: 0 14px 38px rgba(15, 23, 42, 0.045);
  --surface-radius: 28px;
  --surface-radius-sm: 20px;
  --surface-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.9));
  --surface-fill-tint: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 246, 0.9));
}

html body {
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.065), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(20, 184, 166, 0.07), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6faf8 100%) !important;
}

html body .catalog,
html body .filters,
html body .catalog-search,
html body .activity-banner,
html body .service-strip article,
html body .product-card,
html body .detail-page .detail-media,
html body .detail-page .detail-info,
html body .detail-page .detail-block,
html body .detail-page .detail-purchase-panel,
html body .related-section,
html body .review-card,
html body .review-empty,
html body .coupon-row,
html body .cart-drawer,
html body .account-panel,
html body .orders-drawer,
html body .support-chat-drawer,
html body .checkout-dialog,
html body .legal-dialog,
html body .dev-drawer,
html body .auth-card,
html body .cart-item,
html body .order-list-row,
html body .order-detail-head,
html body .order-item,
html body .account-stat-card,
html body .recent-row,
html body .wishlist-row,
html body .dev-metric-card,
html body .dev-support-row,
html body .dev-support-summary,
html body .checkout-address-card,
html body .support-chat-order,
html body .support-chat-order-card,
html body fieldset,
html body .price-filter {
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--surface-radius) !important;
  background: var(--surface-fill), #fff !important;
  box-shadow:
    var(--surface-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transform: none !important;
}

html body .catalog,
html body .filters,
html body .catalog-search,
html body .activity-banner,
html body .related-section,
html body .detail-page .detail-block,
html body .detail-page .detail-purchase-panel {
  padding: clamp(24px, 2.8vw, 38px) !important;
}

html body .filters,
html body .catalog,
html body .product-body,
html body .detail-page .detail-block,
html body .detail-page .detail-info {
  gap: clamp(16px, 2vw, 24px) !important;
}

html body .store-shell {
  gap: clamp(24px, 3vw, 42px) !important;
  padding-inline: clamp(18px, 5vw, 72px) !important;
}

html body .catalog-search-band {
  padding-inline: clamp(18px, 5vw, 72px) !important;
}

html body .product-grid,
html body .detail-page .detail-reason-grid,
html body .detail-page .highlight-list,
html body .detail-page .spec-list,
html body .service-strip {
  gap: clamp(18px, 2.2vw, 28px) !important;
}

html body .product-card {
  overflow: hidden;
  border-radius: 30px !important;
}

html body .product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body .product-media {
  border-bottom: 1px solid rgba(15, 23, 42, 0.055) !important;
  background:
    radial-gradient(circle at 52% 42%, rgba(37, 99, 235, 0.08), transparent 44%),
    linear-gradient(180deg, #f7fbff, #eef8f4) !important;
}

html body .product-body {
  padding: clamp(20px, 2.2vw, 28px) !important;
}

html body .product-card h3 {
  min-height: auto !important;
  color: #0f172a !important;
  font-size: clamp(20px, 1.7vw, 25px) !important;
  line-height: 1.26 !important;
}

html body .product-body p {
  min-height: auto !important;
  color: #5f6c7a !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

html body .price-row strong,
html body .detail-price {
  color: #0f172a !important;
  letter-spacing: 0 !important;
}

html body fieldset,
html body .price-filter {
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 24px !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html body fieldset label {
  min-height: 44px !important;
  gap: 14px !important;
  color: #334155 !important;
  font-weight: 850 !important;
}

html body fieldset input[type="checkbox"] {
  width: 23px !important;
  height: 23px !important;
}

html body .catalog-search input,
html body .filters input,
html body .filters select,
html body .checkout-address-form select,
html body .checkout-address-form textarea,
html body .support-chat-composer textarea,
html body .dev-site-panel input,
html body .dev-category-panel input,
html body .dev-account-panel input,
html body .dev-site-panel textarea,
html body .auth-card input,
html body .order-review-form textarea,
html body .order-review-form select,
html body .account-panel input,
html body .account-panel textarea,
html body .dev-drawer input,
html body .dev-drawer textarea,
html body .dev-drawer select {
  min-height: 52px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.095) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)),
    #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(15, 23, 42, 0.025) !important;
  color: #0f172a !important;
}

html body textarea {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

html body .primary-link,
html body .secondary-link,
html body .add-button,
html body .checkout,
html body .cart-button,
html body .dev-button,
html body .account-button,
html body .logout-button,
html body .quick-collections button,
html body .filters button,
html body .coupon-row button,
html body .review-filter-bar button,
html body .dev-mini-actions button,
html body .support-chat-composer .primary-link,
html body .auth-card button[type="submit"] {
  min-height: 50px !important;
  border-radius: 999px !important;
  padding-inline: clamp(18px, 2.2vw, 28px) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

html body .secondary-link,
html body .account-button,
html body .logout-button,
html body .quick-collections button,
html body .filters button,
html body .coupon-row button,
html body .review-filter-bar button,
html body .dev-mini-actions button {
  border-color: rgba(37, 99, 235, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.88)) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(20, 184, 166, 0.24)) border-box !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.07) !important;
}

html body .activity-banner,
html body .service-strip article,
html body .coupon-row,
html body .detail-page .detail-reason-item,
html body .detail-page .highlight-list li,
html body .detail-page .spec-list div,
html body .detail-page .detail-trust-item,
html body .detail-page .detail-service-note {
  border-radius: 24px !important;
  background: var(--surface-fill-tint), #fff !important;
  box-shadow:
    var(--surface-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body .service-strip article,
html body .coupon-row,
html body .detail-page .detail-reason-item,
html body .detail-page .highlight-list li,
html body .detail-page .spec-list div,
html body .detail-page .detail-trust-item,
html body .detail-page .detail-service-note {
  padding: clamp(20px, 2.2vw, 28px) !important;
}

html body .cart-drawer,
html body .account-panel,
html body .orders-drawer,
html body .support-chat-drawer,
html body .dev-drawer {
  border-radius: 30px 0 0 30px !important;
  box-shadow: -28px 0 80px rgba(15, 23, 42, 0.14) !important;
}

html body .checkout-dialog,
html body .legal-dialog,
html body .auth-card {
  border-radius: 32px !important;
}

html body .cart-head,
html body .account-panel-head,
html body .orders-head,
html body .support-chat-head,
html body .dev-head,
html body .checkout-dialog-head,
html body .legal-head {
  padding: clamp(22px, 2.4vw, 34px) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px);
}

html body .dev-body,
html body .orders-body,
html body .account-panel-body,
html body .cart-items,
html body .support-chat-body,
html body .checkout-dialog-body,
html body .legal-dialog-body {
  gap: clamp(18px, 2vw, 28px) !important;
}

html body .dev-section-nav button {
  min-height: 54px !important;
  border-radius: 18px !important;
  padding-inline: 18px !important;
}

html body .dev-section-nav button.active {
  color: #0f3f75 !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
  background: rgba(37, 99, 235, 0.1) !important;
}

html body .support-message {
  border-radius: 22px !important;
  padding: 16px 18px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045) !important;
}

html body .review-card {
  padding: clamp(18px, 2vw, 24px) !important;
}

html body .review-card p {
  line-height: 1.65 !important;
}

@media (max-width: 760px) {
  html body .catalog,
  html body .filters,
  html body .catalog-search,
  html body .activity-banner,
  html body .related-section,
  html body .detail-page .detail-block,
  html body .detail-page .detail-purchase-panel {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  html body .store-shell {
    gap: 22px !important;
    padding-inline: 14px !important;
  }

  html body .product-grid,
  html body .detail-page .detail-reason-grid,
  html body .detail-page .highlight-list,
  html body .detail-page .spec-list {
    gap: 18px !important;
  }

  html body .product-body {
    padding: 20px !important;
  }

  html body .cart-drawer,
  html body .account-panel,
  html body .orders-drawer,
  html body .support-chat-drawer,
  html body .dev-drawer {
    border-radius: 24px 0 0 24px !important;
  }
}

/* v68 responsive layout pass: adaptive mobile and tablet composition. */
html,
html body {
  max-width: 100%;
  overflow-x: clip !important;
}

html body *,
html body *::before,
html body *::after {
  box-sizing: border-box;
  min-width: 0;
}

html body img,
html body svg,
html body video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1180px) {
  html body .commerce-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: clamp(28px, 5vw, 52px) !important;
    padding: clamp(38px, 6vw, 72px) clamp(20px, 5vw, 56px) !important;
  }

  html body .hero-copy {
    max-width: 760px !important;
  }

  html body .featured-product {
    width: min(760px, 100%) !important;
    justify-self: center !important;
  }

  html body .store-shell {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    padding-inline: clamp(18px, 4vw, 44px) !important;
  }

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

  html body .detail-page {
    grid-template-columns: 1fr !important;
    padding-inline: clamp(18px, 4vw, 44px) !important;
  }

  html body .detail-page .detail-media {
    position: relative !important;
    top: auto !important;
    width: min(760px, 100%) !important;
    justify-self: center !important;
  }
}

@media (max-width: 900px) {
  html body .store-shell {
    grid-template-columns: 1fr !important;
  }

  html body .store-shell .filters {
    position: sticky !important;
    top: 12px !important;
    z-index: 36 !important;
    max-height: calc(100svh - 24px) !important;
    overflow-y: auto !important;
  }

  html body.view-products .store-shell .filters.is-docked {
    top: 12px !important;
    left: clamp(14px, 4vw, 32px) !important;
    width: calc(100vw - clamp(28px, 8vw, 64px)) !important;
    max-height: calc(100svh - 24px) !important;
  }

  html body .catalog-head,
  html body .activity-banner,
  html body .detail-block-title,
  html body .support-chat-order-card > div,
  html body .order-detail-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  html body .orders-body,
  html body .support-chat-body,
  html body .dev-tabbed-body,
  html body .dev-product-admin {
    grid-template-columns: 1fr !important;
  }

  html body .orders-list,
  html body .support-chat-list {
    max-height: 280px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.075) !important;
  }

  html body .dev-section-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body {
    font-size: 15px !important;
  }

  html body main {
    overflow-x: clip !important;
  }

  html body .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 52 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    overflow: visible !important;
  }

  html body .brand {
    min-width: 0 !important;
    gap: 10px !important;
  }

  html body .brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  html body .brand strong {
    max-width: 42vw !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .brand small {
    max-width: 42vw !important;
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body .dev-button,
  html body .account-button,
  html body .logout-button,
  html body .cart-button {
    min-height: 42px !important;
    padding-inline: 12px !important;
    font-size: 13px !important;
  }

  html body .cart-button span:nth-child(2) {
    display: none !important;
  }

  html body .cart-count {
    min-width: 28px !important;
    height: 28px !important;
    padding-inline: 8px !important;
  }

  html body .main-nav {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px !important;
    overflow: visible !important;
  }

  html body .main-nav a,
  html body .main-nav button {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body .commerce-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    min-height: auto !important;
    padding: 30px 14px 24px !important;
  }

  html body .hero-copy h1 {
    font-size: clamp(42px, 14vw, 64px) !important;
    line-height: 0.98 !important;
  }

  html body .hero-copy p:not(.eyebrow) {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  html body .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  html body .hero-actions .primary-link,
  html body .hero-actions .secondary-link {
    width: 100% !important;
    justify-content: center !important;
    padding-inline: 10px !important;
  }

  html body .featured-product {
    min-height: 330px !important;
    border-radius: 28px !important;
  }

  html body .featured-product img {
    min-height: 240px !important;
    object-fit: contain !important;
  }

  html body .catalog-search-band,
  html body .activity-banner,
  html body .store-shell,
  html body .service-strip,
  html body .related-section {
    padding-inline: 14px !important;
  }

  html body .catalog-search form {
    grid-template-columns: 1fr !important;
  }

  html body .catalog-search button {
    width: 100% !important;
  }

  html body .store-shell {
    gap: 22px !important;
    padding-top: 18px !important;
    scroll-margin-top: 184px !important;
  }

  html body .store-shell .filters {
    top: 178px !important;
    max-height: calc(100svh - 190px) !important;
    padding: 18px !important;
  }

  html body.view-products .store-shell .filters.is-docked {
    top: 178px !important;
    left: 14px !important;
    width: calc(100vw - 28px) !important;
    max-height: calc(100svh - 190px) !important;
  }

  html body .panel-heading {
    gap: 12px !important;
  }

  html body .filters fieldset {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
  }

  html body .filters fieldset legend {
    grid-column: 1 / -1 !important;
  }

  html body fieldset label {
    min-height: 40px !important;
  }

  html body .price-filter > div {
    grid-template-columns: 1fr !important;
  }

  html body .catalog,
  html body .activity-banner,
  html body .related-section,
  html body .detail-page .detail-block,
  html body .detail-page .detail-purchase-panel {
    padding: 20px !important;
  }

  html body .catalog-head h2,
  html body .related-section h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  html body .quick-collections {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  html body .quick-collections button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  html body .product-grid,
  html body .compact-grid,
  html body .service-strip,
  html body .detail-page .detail-reason-grid,
  html body .detail-page .highlight-list,
  html body .detail-page .spec-list,
  html body .detail-trust-panel {
    grid-template-columns: 1fr !important;
  }

  html body .product-card {
    width: 100% !important;
    border-radius: 26px !important;
  }

  html body .product-media {
    aspect-ratio: 1 / 0.76 !important;
  }

  html body .single-product-card {
    grid-template-columns: 1fr !important;
  }

  html body .single-product-card .add-button {
    grid-column: auto !important;
    margin: 0 20px 20px !important;
  }

  html body .detail-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 22px 14px 38px !important;
  }

  html body .detail-back-button {
    width: max-content !important;
    max-width: 100% !important;
  }

  html body .detail-page .detail-media,
  html body .detail-page .detail-info {
    width: 100% !important;
    padding: 20px !important;
    border-radius: 26px !important;
  }

  html body .detail-gallery-track,
  html body .detail-gallery-image {
    border-radius: 22px !important;
  }

  html body .detail-page .detail-info h1 {
    font-size: clamp(34px, 11vw, 54px) !important;
    line-height: 1.05 !important;
  }

  html body .detail-conversion-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html body .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body .detail-actions .primary-link,
  html body .detail-actions .secondary-link {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .spec-list div {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  html body .review-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .review-card {
    padding: 16px !important;
  }

  html body .cart-drawer,
  html body .account-panel,
  html body .orders-drawer,
  html body .support-chat-drawer,
  html body .dev-drawer {
    inset: 6px 0 6px auto !important;
    width: min(100vw - 10px, 520px) !important;
    max-width: calc(100vw - 10px) !important;
    border-radius: 24px 0 0 24px !important;
  }

  html body .checkout-dialog,
  html body .legal-dialog {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    max-height: calc(100svh - 22px) !important;
    border-radius: 24px !important;
  }

  html body .cart-head,
  html body .account-panel-head,
  html body .orders-head,
  html body .support-chat-head,
  html body .dev-head,
  html body .checkout-dialog-head,
  html body .legal-head {
    padding: 18px !important;
  }

  html body .orders-body,
  html body .support-chat-body {
    min-height: 0 !important;
  }

  html body .orders-detail,
  html body .support-chat-thread,
  html body .orders-list,
  html body .support-chat-list {
    padding: 14px !important;
  }

  html body .support-messages {
    max-height: 42svh !important;
  }

  html body .support-message {
    width: min(92%, 420px) !important;
  }

  html body .support-chat-composer {
    grid-template-columns: 1fr !important;
  }

  html body .support-chat-composer .primary-link {
    width: 100% !important;
  }

  html body .dev-section-nav {
    grid-template-columns: 1fr !important;
  }

  html body .dev-body {
    padding: 16px !important;
  }

  html body .dev-section {
    padding: 18px !important;
  }

  html body .dev-product-row,
  html body .dev-support-row,
  html body .coupon-row,
  html body .recent-row,
  html body .wishlist-row,
  html body .cart-item,
  html body .order-item {
    grid-template-columns: 1fr !important;
  }

  html body .site-footer {
    display: grid !important;
    gap: 16px !important;
    padding: 26px 16px !important;
  }

  html body .site-footer nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-about .about-story-section {
    padding: 24px 18px !important;
  }

  html body.view-about .about-story-copy {
    width: min(100%, calc(100vw - 36px)) !important;
  }
}

@media (max-width: 460px) {
  html body .site-header {
    grid-template-columns: 1fr !important;
  }

  html body .store-shell {
    scroll-margin-top: 222px !important;
  }

  html body .store-shell .filters {
    top: 214px !important;
    max-height: calc(100svh - 226px) !important;
  }

  html body.view-products .store-shell .filters.is-docked {
    top: 214px !important;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 226px) !important;
  }

  html body .brand strong,
  html body .brand small {
    max-width: calc(100vw - 92px) !important;
  }

  html body .header-actions {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .header-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .main-nav {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  html body .hero-actions,
  html body .quick-collections,
  html body .review-filter-bar,
  html body .site-footer nav {
    grid-template-columns: 1fr !important;
  }

  html body .catalog-search-band,
  html body .activity-banner,
  html body .store-shell,
  html body .service-strip,
  html body .related-section {
    padding-inline: 10px !important;
  }

  html body .catalog,
  html body .filters,
  html body .catalog-search,
  html body .activity-banner,
  html body .related-section,
  html body .detail-page .detail-block,
  html body .detail-page .detail-purchase-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body .cart-drawer,
  html body .account-panel,
  html body .orders-drawer,
  html body .support-chat-drawer,
  html body .dev-drawer {
    inset: 4px 0 4px auto !important;
    width: calc(100vw - 4px) !important;
    max-width: calc(100vw - 4px) !important;
    border-radius: 22px 0 0 22px !important;
  }
}

/* v69 waterfall navigation and mobile product-detail redesign. */
html body .site-header {
  align-items: start !important;
  gap: clamp(14px, 2vw, 28px) !important;
}

html body .main-nav {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 14px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body .main-nav a,
html body .main-nav button {
  position: relative !important;
  min-height: 46px !important;
  padding: 0 clamp(16px, 1.6vw, 24px) !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  border-radius: 18px 22px 18px 26px !important;
  color: #1f2b3a !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.88)) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(20, 184, 166, 0.16)) border-box !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transform: translateY(var(--nav-drop, 0)) !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    background 180ms ease !important;
}

html body .main-nav a:nth-child(1),
html body .main-nav button:nth-child(1) {
  --nav-drop: 2px;
}

html body .main-nav a:nth-child(2),
html body .main-nav button:nth-child(2) {
  --nav-drop: 14px;
}

html body .main-nav a:nth-child(3),
html body .main-nav button:nth-child(3) {
  --nav-drop: 6px;
}

html body .main-nav a:hover,
html body .main-nav button:hover {
  color: #0f3f75 !important;
  box-shadow:
    0 22px 44px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  transform: translateY(calc(var(--nav-drop, 0) - 2px)) !important;
}

html body .main-nav a.active,
html body .main-nav button.active,
html body .main-nav a[aria-current="page"],
html body .main-nav button[aria-current="page"],
html body.product-detail-page .main-nav a:first-child {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #2358cf 0%, #18a8a0 100%) !important;
  box-shadow:
    0 20px 44px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html body .main-nav a::after,
html body .main-nav button::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: -8px !important;
  height: 3px !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, #2563eb, #14b8a6) !important;
  transform: scaleX(0.54) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

html body .main-nav a.active::after,
html body .main-nav button.active::after,
html body .main-nav a[aria-current="page"]::after,
html body .main-nav button[aria-current="page"]::after,
html body.product-detail-page .main-nav a:first-child::after {
  opacity: 0.62 !important;
  transform: scaleX(1) !important;
}

@media (max-width: 1024px) {
  html body .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body .main-nav {
    grid-column: 1 / -1 !important;
    width: min(520px, 100%) !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  html body .main-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 2px 12px !important;
  }

  html body .main-nav a,
  html body .main-nav button {
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 17px 20px 17px 24px !important;
    font-size: 13px !important;
  }

  html body .main-nav a:nth-child(2),
  html body .main-nav button:nth-child(2) {
    --nav-drop: 10px;
  }

  html body .main-nav a::after,
  html body .main-nav button::after {
    left: 14px !important;
    right: 14px !important;
    bottom: -6px !important;
  }

  html body .detail-page {
    gap: 0 !important;
    padding: 0 0 34px !important;
    background:
      radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.07), transparent 32%),
      radial-gradient(circle at 92% 18%, rgba(20, 184, 166, 0.08), transparent 30%),
      linear-gradient(180deg, #f8fbff 0%, #ffffff 38%, #f6fbf9 100%) !important;
  }

  html body .detail-back-button {
    margin: 16px 14px 10px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(37, 99, 235, 0.14) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body .detail-page .detail-media {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .detail-gallery-track {
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(37, 99, 235, 0.12), transparent 43%),
      linear-gradient(180deg, #f1f8ff, #eef8f4) !important;
  }

  html body .detail-gallery-image {
    aspect-ratio: 1 / 0.86 !important;
    padding: 20px 16px 24px !important;
    border-radius: 0 0 34px 34px !important;
    object-fit: contain !important;
  }

  html body .detail-media .badge {
    top: 16px !important;
    left: 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #0f766e !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body .detail-gallery-button {
    width: 38px !important;
    height: 38px !important;
    color: #102033 !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body .detail-page .detail-info {
    width: 100% !important;
    max-width: none !important;
    margin-top: -18px !important;
    padding: 24px 16px 92px !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.98) 26%, rgba(246, 251, 249, 0.96)) !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.06) !important;
  }

  html body .detail-info .eyebrow {
    width: max-content !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(239, 246, 255, 0.86) !important;
    color: #2358cf !important;
  }

  html body .detail-page .detail-info h1 {
    margin-top: 2px !important;
    font-size: clamp(34px, 12vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  html body .detail-rating {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body .detail-rating > * {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border: 1px solid rgba(15, 23, 42, 0.065) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035) !important;
    font-size: 13px !important;
  }

  html body .detail-desc {
    font-size: 16px !important;
    line-height: 1.78 !important;
    color: #536173 !important;
  }

  html body .detail-conversion-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body .detail-conversion-strip span {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid rgba(20, 184, 166, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(236, 253, 245, 0.72) !important;
    color: #0f4d45 !important;
    font-size: 13px !important;
  }

  html body .detail-page .detail-purchase-panel {
    padding: 18px !important;
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(239, 248, 255, 0.82)) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055) !important;
  }

  html body .detail-price-row {
    align-items: end !important;
  }

  html body .detail-price {
    font-size: clamp(34px, 12vw, 48px) !important;
  }

  html body .detail-trust-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body .detail-page .detail-trust-item,
  html body .detail-page .detail-service-note {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  html body .detail-actions {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 34 !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: 1.35fr 0.78fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body .detail-actions .primary-link,
  html body .detail-actions .secondary-link {
    min-height: 44px !important;
    padding-inline: 8px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html body .detail-page .detail-block {
    padding: 24px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .detail-block h2 {
    font-size: 25px !important;
  }

  html body .detail-page .highlight-list li,
  html body .detail-page .detail-reason-item,
  html body .detail-page .spec-list div {
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 246, 0.76)) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
  }

  html body .related-section {
    margin-top: 10px !important;
  }
}

/* v70 frameless navigation and non-sticky mobile filters. */
html body .main-nav {
  align-items: center !important;
  gap: clamp(20px, 3vw, 42px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main-nav a,
html body .main-nav button {
  min-height: 36px !important;
  padding: 0 2px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(15, 23, 42, 0.66) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  transform: none !important;
}

html body .main-nav a:hover,
html body .main-nav button:hover {
  color: #102033 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .main-nav a.active,
html body .main-nav button.active,
html body .main-nav a[aria-current="page"],
html body .main-nav button[aria-current="page"],
html body.product-detail-page .main-nav a:first-child {
  color: #0f3f75 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main-nav a::before,
html body .main-nav button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 1px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background: #14b8a6 !important;
  transform: translateX(-50%) scale(0.6) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

html body .main-nav a::after,
html body .main-nav button::after {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, transparent, #2563eb 18%, #14b8a6 82%, transparent) !important;
  transform: scaleX(0.45) !important;
}

html body .main-nav a.active::before,
html body .main-nav button.active::before,
html body .main-nav a[aria-current="page"]::before,
html body .main-nav button[aria-current="page"]::before,
html body.product-detail-page .main-nav a:first-child::before {
  opacity: 0.95 !important;
  transform: translateX(-50%) scale(1) !important;
}

html body .main-nav a.active::after,
html body .main-nav button.active::after,
html body .main-nav a[aria-current="page"]::after,
html body .main-nav button[aria-current="page"]::after,
html body.product-detail-page .main-nav a:first-child::after {
  opacity: 0.95 !important;
  transform: scaleX(1) !important;
}

@media (max-width: 1024px) {
  html body .main-nav {
    width: min(520px, 100%) !important;
    gap: clamp(18px, 5vw, 44px) !important;
  }
}

@media (max-width: 760px) {
  html body .main-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 2px 0 8px !important;
    align-items: end !important;
  }

  html body .main-nav a,
  html body .main-nav button {
    min-height: 34px !important;
    padding: 0 0 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    transform: none !important;
  }

  html body .store-shell {
    scroll-margin-top: 18px !important;
  }

  html body .store-shell .filters,
  html body.view-products .store-shell .filters.is-docked {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  html body .filters-dock-placeholder {
    display: none !important;
  }
}

@media (max-width: 460px) {
  html body .store-shell {
    scroll-margin-top: 16px !important;
  }

  html body .store-shell .filters,
  html body.view-products .store-shell .filters.is-docked {
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none !important;
  }
}

/* v71 overlay stack guard: keep product filters behind every drawer and modal. */
html body .cart-overlay,
html body .account-overlay,
html body .orders-overlay,
html body .support-chat-overlay,
html body .dev-overlay {
  z-index: 1000 !important;
}

html body .cart-drawer,
html body .account-panel,
html body .orders-drawer,
html body .support-chat-drawer,
html body .dev-drawer {
  z-index: 1001 !important;
}

html body .checkout-overlay {
  z-index: 1010 !important;
}

html body .checkout-dialog {
  z-index: 1011 !important;
}

html body .legal-overlay {
  z-index: 1020 !important;
}

html body .legal-dialog {
  z-index: 1021 !important;
}

/* v74 order page and spacing safety pass. */
html body {
  text-rendering: geometricPrecision;
}

html body button,
html body a,
html body input,
html body select,
html body textarea,
html body strong,
html body span,
html body p,
html body h1,
html body h2,
html body h3,
html body h4,
html body label {
  overflow-wrap: anywhere;
}

html body button,
html body .primary-link,
html body .secondary-link,
html body .add-button,
html body .checkout,
html body .cart-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  line-height: 1.2;
  white-space: normal;
}

html body input,
html body select,
html body textarea {
  line-height: 1.35;
}

html body textarea {
  padding-block: 12px;
}

html body .filters,
html body .detail-block,
html body .detail-purchase-panel,
html body .cart-summary,
html body .account-panel-body > *,
html body .dev-section,
html body .review-card,
html body .order-review-form,
html body .support-chat-order-card {
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.06);
}

html body .filters {
  gap: 18px !important;
  padding: 24px !important;
  border-radius: 28px !important;
}

html body .filters fieldset,
html body .price-filter {
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

html body .filters legend,
html body .field span,
html body .price-filter label span {
  width: max-content;
  max-width: 100%;
  padding: 0 8px;
  background: var(--paper);
  line-height: 1.35;
}

html body fieldset label {
  min-height: 40px;
  line-height: 1.35;
}

html body .orders-page-body {
  background:
    radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.08), transparent 34%),
    radial-gradient(circle at 90% 5%, rgba(20, 184, 166, 0.09), transparent 28%),
    #f7fafc;
}

html body .orders-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
  width: min(1180px, calc(100% - 40px));
  margin: clamp(24px, 5vw, 58px) auto 22px;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 249, 246, 0.86)),
    #fff;
  box-shadow: 0 26px 86px rgba(15, 23, 42, 0.08);
}

html body .orders-page-hero span {
  color: #0f766e;
  font-size: 13px;
  font-weight: 950;
}

html body .orders-page-hero h1 {
  margin: 8px 0 12px;
  color: #0f172a;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
}

html body .orders-page-hero p {
  max-width: 680px;
  margin: 0;
  color: #64748b;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.8;
}

html body .orders-page-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html body .orders-page-stats div {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
}

html body .orders-page-stats strong {
  color: #0f172a;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

html body .orders-page-shell {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 20px;
  width: min(1180px, calc(100% - 40px));
  min-height: 560px;
  margin: 0 auto 18px;
}

html body .orders-page-list,
html body .orders-page-detail {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.06);
}

html body .orders-page-list {
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 14px;
}

html body .orders-page-detail {
  padding: clamp(18px, 2.6vw, 30px);
}

html body .orders-page-row {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
  min-height: auto;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  color: #0f172a;
  background: rgba(248, 250, 252, 0.82);
  box-shadow: none;
  text-align: left;
}

html body .orders-page-row:hover,
html body .orders-page-row.active {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(240, 253, 250, 0.9));
}

html body .orders-page-row span,
html body .orders-page-row em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

html body .orders-page-row strong {
  max-width: 100%;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.28;
}

html body .orders-page-detail-card {
  display: grid;
  gap: 20px;
}

html body .orders-page-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(236, 253, 245, 0.76));
}

html body .orders-page-detail-head div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

html body .orders-page-detail-head span,
html body .orders-page-meta span,
html body .orders-page-context span {
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

html body .orders-page-detail-head strong {
  color: #0f172a;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
}

html body .orders-page-meta,
html body .orders-page-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html body .orders-page-meta span,
html body .orders-page-context span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.9);
}

html body .orders-page-items {
  display: grid;
  gap: 14px;
}

html body .orders-page-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 28px;
  background: #fff;
}

html body .orders-page-item img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: cover;
  background: #eef2f7;
}

html body .orders-page-item-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

html body .orders-page-item-main strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
}

html body .orders-page-item-main span {
  color: #64748b;
  font-weight: 850;
  line-height: 1.45;
}

html body .orders-page-review-slot {
  grid-column: 1 / -1;
  min-width: 0;
}

html body .orders-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

html body .orders-page-empty,
html body .orders-page-placeholder {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 28px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.82);
}

html body .orders-page-empty strong,
html body .orders-page-placeholder strong {
  color: #0f172a;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.2;
}

html body .orders-page-empty .primary-link {
  justify-self: start;
}

html body .orders-page-message {
  width: min(1180px, calc(100% - 40px));
  min-height: 22px;
  margin: 0 auto 40px;
  color: #0f766e;
  font-weight: 900;
}

html body .order-review-form {
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(248, 250, 252, 0.9) !important;
}

html body .order-review-form select,
html body .order-review-form textarea {
  min-height: 46px;
  padding-inline: 14px;
  border-radius: 16px !important;
}

html body .order-review-image-picker {
  align-items: start;
}

html body .order-review-hint,
html body .order-reviewed-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.92);
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

@media (max-width: 900px) {
  html body .orders-page-hero,
  html body .orders-page-shell {
    width: min(100% - 24px, 720px);
  }

  html body .orders-page-hero,
  html body .orders-page-shell {
    grid-template-columns: 1fr;
  }

  html body .orders-page-list {
    position: static;
  }
}

@media (max-width: 560px) {
  html body .orders-page-hero {
    margin-top: 16px;
    padding: 22px;
    border-radius: 28px;
  }

  html body .orders-page-stats,
  html body .orders-page-item {
    grid-template-columns: 1fr;
  }

  html body .orders-page-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.68;
  }

  html body .orders-page-detail-head {
    display: grid;
  }

  html body .orders-page-actions .primary-link,
  html body .orders-page-actions .secondary-link {
    width: 100%;
  }
}

/* v76 main navigation transitions: products, orders and about move as panels instead of reloading. */
html body .shop-view-stage {
  position: relative;
  overflow-x: clip;
  min-height: calc(100dvh - var(--active-header-height, 104px));
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 48%, #f2fbf8 100%);
}

html body .shop-view-panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: calc(100dvh - var(--active-header-height, 104px));
  transform: none;
}

html body.view-transitioning .shop-view-stage {
  overflow: hidden;
}

html body .shop-view-panel.is-entering,
html body .shop-view-panel.is-leaving {
  display: block !important;
  animation-duration: 340ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 0.76, 0.22, 1);
  pointer-events: none;
  will-change: transform, opacity;
}

html body .shop-view-panel.is-entering {
  z-index: 4;
}

html body .shop-view-panel.is-leaving {
  z-index: 2;
}

html body .shop-view-panel.is-entering.from-right {
  animation-name: shopPanelInFromRight;
}

html body .shop-view-panel.is-entering.from-left {
  animation-name: shopPanelInFromLeft;
}

html body .shop-view-panel.is-leaving.to-left {
  animation-name: shopPanelOutToLeft;
  position: absolute;
  inset: 0;
}

html body .shop-view-panel.is-leaving.to-right {
  animation-name: shopPanelOutToRight;
  position: absolute;
  inset: 0;
}

/* v78 product filter visibility: keep desktop filters present and avoid animation opacity stalls. */
@media (min-width: 761px) {
  html body.view-products .store-shell {
    display: grid !important;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(22px, 3vw, 34px) !important;
  }

  html body.view-products .store-shell .filters {
    display: grid !important;
    position: sticky !important;
    top: max(14px, calc(var(--active-header-height, 82px) + 14px)) !important;
    left: auto !important;
    width: auto !important;
    max-height: calc(100svh - var(--active-header-height, 82px) - 28px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
    z-index: 12 !important;
  }

  html body.view-products .store-shell .filters.is-docked {
    position: fixed !important;
    top: var(--filter-dock-top) !important;
    left: var(--filter-dock-left) !important;
    width: var(--filter-dock-width) !important;
    max-height: var(--filter-dock-max-height) !important;
    z-index: 38 !important;
  }

  html body.view-products .filters-dock-placeholder {
    display: block !important;
  }
}

@media (max-width: 760px) {
  html body.view-products .store-shell .filters,
  html body.view-products .store-shell .filters.is-docked {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    z-index: auto !important;
  }

  html body.view-products .filters-dock-placeholder {
    display: none !important;
  }
}

/* v81 desktop commerce toolbar: sticky header, search row, dropdown filter row. */
html body .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html body .catalog-tools {
  position: relative;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(1320px, calc(100% - clamp(28px, 7vw, 128px)));
  margin: clamp(22px, 4vw, 42px) auto 18px;
}

html body .catalog-tools .catalog-search-band {
  padding: 0 !important;
}

html body .catalog-tools .catalog-search {
  display: grid;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .catalog-tools .catalog-search span {
  width: max-content;
  max-width: 100%;
  padding: 0 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

html body .catalog-tools .catalog-search input {
  min-height: 58px;
  border-radius: 22px !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 249, 0.9)) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07) !important;
}

html body .catalog-tools .filters {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 12px !important;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-gutter: auto;
}

html body .catalog-tools .filter-menu {
  position: relative;
  min-width: min(220px, 100%);
}

html body .catalog-tools .filter-menu summary,
html body .catalog-tools .filter-reset-button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border: 1px solid rgba(15, 23, 42, 0.78);
  border-radius: 0;
  color: #ffffff;
  background: #101312;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

html body .catalog-tools .filter-menu summary::-webkit-details-marker {
  display: none;
}

html body .catalog-tools .filter-menu summary::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid currentColor;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transition: transform 180ms ease;
}

html body .catalog-tools .filter-menu[open] summary::after {
  transform: rotate(180deg);
}

html body .catalog-tools .filter-menu > fieldset,
html body .catalog-tools .filter-menu > .field {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 80;
  min-width: min(320px, 86vw);
  padding: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16) !important;
}

html body .catalog-tools .filter-menu > fieldset {
  gap: 8px !important;
}

html body .catalog-tools .filter-menu > fieldset legend {
  margin-bottom: 4px;
}

html body .catalog-tools .filter-menu > fieldset label {
  min-height: 38px !important;
  height: 38px !important;
  line-height: 1.2 !important;
}

html body .catalog-tools .filter-menu > .price-filter {
  min-width: min(390px, 88vw);
}

html body .catalog-tools .filter-menu label {
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
}

html body .catalog-tools .filter-menu input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

html body .catalog-tools .filter-reset-button {
  width: auto;
  min-width: 116px;
  justify-content: center;
  color: #101312;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.18);
}

html body.view-products .store-shell,
html body .store-shell {
  display: block !important;
  grid-template-columns: none !important;
  width: min(1320px, calc(100% - clamp(28px, 7vw, 128px)));
  margin: 0 auto;
  padding: 0 0 clamp(22px, 4vw, 46px) !important;
}

html body .store-shell .catalog {
  width: 100%;
}

@media (max-width: 760px) {
  html body .site-header {
    position: sticky !important;
  }

  html body .catalog-tools {
    width: min(100% - 24px, 680px);
    margin-top: 16px;
  }

  html body .catalog-tools .filters {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
  }

  html body .catalog-tools .filter-menu {
    min-width: 142px;
  }

  html body .catalog-tools .filter-menu summary,
  html body .catalog-tools .filter-reset-button {
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px;
  }

  html body .catalog-tools .filter-reset-button {
    width: auto;
    min-width: 96px;
    flex: 0 0 auto;
  }

  html body .store-shell {
    width: min(100% - 24px, 680px);
  }
}

html body .orders-view {
  position: relative;
  padding: clamp(24px, 4vw, 58px) 0 clamp(42px, 6vw, 80px);
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 45%, rgba(240, 253, 249, 0.98) 100%),
    #f8fbff;
  overflow: hidden;
}

html body .orders-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 24%, rgba(37, 99, 235, 0.08), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(20, 184, 166, 0.1), transparent 30%);
}

html body.view-orders .products-view,
html body.view-orders .about-page {
  pointer-events: none;
}

html body .orders-view .orders-page-hero,
html body .orders-view .orders-page-shell {
  margin-top: 0;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html body.view-orders .site-footer,
html body.view-about .site-footer {
  display: none;
}

@keyframes shopPanelInFromRight {
  from {
    opacity: 0.72;
    transform: translate3d(7vw, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shopPanelInFromLeft {
  from {
    opacity: 0.72;
    transform: translate3d(-7vw, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shopPanelOutToLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0.38;
    transform: translate3d(-5vw, 0, 0);
  }
}

@keyframes shopPanelOutToRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0.38;
    transform: translate3d(5vw, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .shop-view-panel.is-entering,
  html body .shop-view-panel.is-leaving {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  html body .orders-view {
    padding: 18px 0 34px;
  }

  html body .shop-view-panel.is-entering,
  html body .shop-view-panel.is-leaving {
    animation-duration: 260ms;
  }
}

/* v87: 编程风格视觉层。只覆盖表现层，不改动商品、订单、账号等数据结构。 */
:root {
  --console-ink: #0b1117;
  --console-muted: #5b6677;
  --console-line: rgba(15, 23, 42, 0.14);
  --console-panel: rgba(255, 255, 255, 0.92);
  --console-panel-strong: rgba(255, 255, 255, 0.98);
  --console-cyan: #0ea5e9;
  --console-teal: #10b981;
  --console-blue: #2563eb;
  --console-glow: rgba(14, 165, 233, 0.18);
  --console-radius: 12px;
}

html body {
  color: var(--console-ink);
  background:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6fbff 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

html body .site-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)),
    rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

html body .site-header::before {
  opacity: 0.34 !important;
}

html body .brand-mark,
html body .brand-mark img,
html body .auth-avatar,
html body .auth-avatar img,
html body .product-media,
html body .product-media img,
html body .line-item img,
html body .orders-page-item img,
html body .order-line img {
  border-radius: 10px !important;
}

html body .main-nav {
  gap: clamp(14px, 2.4vw, 34px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main-nav a {
  position: relative;
  min-height: 38px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .main-nav a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--console-blue), var(--console-teal));
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
}

html body .main-nav a.active,
html body .main-nav a:hover {
  color: #0f172a !important;
}

html body .main-nav a.active::after,
html body .main-nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

html body .main-nav a.active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--console-teal);
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.55);
}

html body button,
html body .primary-link,
html body .secondary-link,
html body .add-button,
html body .checkout,
html body .cart-continue,
html body .support-chat-composer .primary-link,
html body .account-button,
html body .logout-button,
html body .dev-button,
html body .cart-button,
html body .about-story-link,
html body .coupon-claim-button,
html body .review-submit,
html body .review-delete-button {
  border-radius: var(--console-radius) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    color 160ms ease !important;
}

html body .primary-link,
html body .add-button,
html body .checkout,
html body .dev-button,
html body .cart-button,
html body .support-chat-composer .primary-link,
html body .review-submit {
  color: #ffffff !important;
  border: 1px solid rgba(14, 165, 233, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.95) 48%, rgba(13, 148, 136, 0.94)),
    #0f172a !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html body .secondary-link,
html body .account-button,
html body .logout-button,
html body .cart-continue,
html body .filter-reset-button,
html body .coupon-claim-button,
html body .review-delete-button {
  color: #0f172a !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  background: rgba(248, 251, 255, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

html body .primary-link:hover,
html body .secondary-link:hover,
html body .add-button:hover,
html body .checkout:hover,
html body .cart-continue:hover,
html body .dev-button:hover,
html body .cart-button:hover,
html body .account-button:hover,
html body .logout-button:hover,
html body .support-chat-composer .primary-link:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(14, 165, 233, 0.48) !important;
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.16), 0 0 0 4px var(--console-glow) !important;
}

html body .primary-link:active,
html body .secondary-link:active,
html body .add-button:active,
html body .checkout:active,
html body .cart-button:active,
html body .account-button:active,
html body .logout-button:active,
html body .dev-button:active {
  transform: translateY(0) scale(0.99) !important;
}

html body .cart-button strong,
html body [data-cart-count] {
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1) !important;
}

html body .catalog-tools {
  position: sticky !important;
  top: calc(var(--active-header-height, 104px) + 12px) !important;
  z-index: 70 !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.9)),
    rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.1) !important;
}

html body .catalog-tools .catalog-search-band {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .catalog-tools .catalog-search {
  grid-template-columns: auto 1fr !important;
  min-height: 56px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .catalog-tools .catalog-search span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f766e !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .catalog-tools .catalog-search span::before {
  content: ">";
  color: var(--console-blue);
}

html body .catalog-tools .catalog-search input {
  min-height: 42px !important;
  color: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .catalog-tools .filters {
  gap: 10px !important;
  padding: 0 !important;
}

html body .catalog-tools .filter-menu summary,
html body .catalog-tools .filter-reset-button {
  min-height: 48px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  color: #e2e8f0 !important;
  background:
    linear-gradient(135deg, #0b1117 0%, #111827 100%),
    #0b1117 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(15, 23, 42, 0.1) !important;
}

html body .catalog-tools .filter-reset-button {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

html body .catalog-tools .filter-menu[open] summary {
  border-color: rgba(14, 165, 233, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body .catalog-tools .filter-menu > fieldset,
html body .catalog-tools .filter-menu > .field {
  border-radius: 12px !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  background:
    linear-gradient(rgba(14, 165, 233, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.035) 1px, transparent 1px),
    rgba(255, 255, 255, 0.98) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.14) !important;
}

html body .catalog-tools .filter-menu input[type="checkbox"] {
  accent-color: var(--console-teal);
}

html body .quick-collections button,
html body .product-card,
html body .activity-banner,
html body .service-strip article,
html body .orders-page-hero,
html body .orders-page-shell,
html body .orders-page-card,
html body .orders-page-detail,
html body .detail-page,
html body .detail-info-card,
html body .detail-section,
html body .product-reviews,
html body .review-card,
html body .cart-drawer,
html body .auth-card,
html body .dev-drawer,
html body .support-chat-drawer,
html body .account-panel,
html body .legal-modal,
html body .checkout-panel {
  border-radius: 14px !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08) !important;
}

html body .product-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.94)),
    #ffffff !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

html body .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.12), transparent),
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 180% 100%, 100% 34px;
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 180ms ease, transform 360ms ease;
}

html body .product-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(14, 165, 233, 0.28) !important;
  box-shadow: 0 24px 62px rgba(15, 23, 42, 0.12), 0 0 0 4px rgba(14, 165, 233, 0.08) !important;
}

html body .product-card:hover::before {
  opacity: 1;
  transform: translateX(0);
}

html body .badge,
html body .eyebrow,
html body .product-meta span,
html body .orders-page-card span,
html body .orders-page-hero span,
html body .detail-meta span,
html body .coupon-chip,
html body .status-pill {
  border-radius: 8px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body input,
html body select,
html body textarea {
  border-radius: 10px !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus,
html body button:focus-visible,
html body a:focus-visible {
  outline: none !important;
  border-color: rgba(14, 165, 233, 0.78) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16) !important;
}

html body .shop-view-panel.is-entering {
  animation-duration: 300ms !important;
}

html body .shop-view-panel.is-leaving {
  animation-duration: 240ms !important;
}

html body .product-card,
html body .activity-banner,
html body .service-strip article {
  animation: consoleFadeUp 360ms ease both;
}

@keyframes consoleFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 760px) {
  html body .catalog-tools {
    position: static !important;
    top: auto !important;
    border-radius: 12px !important;
  }

  html body .catalog-tools .catalog-search {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  html body .catalog-tools .filters {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none;
  }

  html body .catalog-tools .filters::-webkit-scrollbar {
    display: none;
  }

  html body .catalog-tools .filter-menu {
    min-width: 124px !important;
  }

  html body .catalog-tools .filter-menu > fieldset,
  html body .catalog-tools .filter-menu > .field {
    position: fixed !important;
    top: auto !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 16px !important;
    min-width: 0 !important;
    max-height: min(62vh, 520px);
    overflow: auto;
    z-index: 140 !important;
  }

  html body .main-nav a {
    min-height: 34px !important;
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* v88: 桌面搜索筛选悬停兜底 + 开发者工作台重排。 */
html body .catalog-tools-placeholder {
  display: block;
  width: min(1320px, calc(100% - clamp(28px, 7vw, 128px)));
  margin: clamp(18px, 4vw, 44px) auto 0;
}

html body .catalog-tools.is-docked {
  position: fixed !important;
  left: var(--filter-dock-left, 24px) !important;
  top: var(--filter-dock-top, 116px) !important;
  width: var(--filter-dock-width, min(1320px, calc(100vw - 48px))) !important;
  margin: 0 !important;
  z-index: 180 !important;
  transform: translate3d(0, 0, 0);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(14, 165, 233, 0.12) !important;
}

html body .catalog-tools:hover,
html body .catalog-tools:focus-within,
html body .catalog-tools.is-docked {
  border-color: rgba(14, 165, 233, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.94)),
    rgba(255, 255, 255, 0.96) !important;
}

html body .catalog-tools .catalog-search:hover,
html body .catalog-tools .catalog-search:focus-within {
  border-color: rgba(14, 165, 233, 0.48) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body .catalog-tools .filter-menu summary:hover,
html body .catalog-tools .filter-reset-button:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.66) !important;
}

html body .dev-overlay {
  background:
    linear-gradient(90deg, rgba(8, 13, 20, 0.26), rgba(8, 13, 20, 0.14)),
    rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body .dev-drawer {
  --dev-sidebar: clamp(190px, 18vw, 260px);
  width: min(1440px, calc(100vw - 28px)) !important;
  max-width: none !important;
  height: min(920px, calc(100vh - 28px)) !important;
  inset: 14px 14px auto auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  background:
    linear-gradient(rgba(14, 165, 233, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.97)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  box-shadow: 0 28px 96px rgba(15, 23, 42, 0.2) !important;
  overflow: hidden !important;
}

html body .dev-head {
  min-height: 88px !important;
  padding: 22px 28px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.92) 56%, rgba(13, 148, 136, 0.9)),
    #0f172a !important;
  color: #ffffff !important;
}

html body .dev-head span {
  color: rgba(226, 232, 240, 0.78) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .dev-head strong {
  color: #ffffff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
}

html body .dev-head [data-close-dev] {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html body .dev-tabbed-body {
  display: grid !important;
  grid-template-columns: var(--dev-sidebar) minmax(0, 1fr) !important;
  gap: 0 !important;
  height: calc(100% - 88px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body .dev-section-nav {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 20px 14px !important;
  overflow: auto !important;
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: rgba(248, 251, 255, 0.78) !important;
}

html body .dev-section-nav button {
  justify-content: flex-start !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  color: #334155 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .dev-section-nav button:hover {
  color: #0f172a !important;
  border-color: rgba(14, 165, 233, 0.24) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

html body .dev-section-nav button.active {
  color: #e0f2fe !important;
  border-color: rgba(14, 165, 233, 0.44) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.92) 58%, rgba(13, 148, 136, 0.92)),
    #0f172a !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.16) !important;
}

html body .dev-workspace {
  min-width: 0;
  height: 100%;
  overflow: auto;
  padding: clamp(18px, 2.4vw, 34px) !important;
}

html body .dev-section {
  min-width: 0;
}

html body .dev-product-admin {
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

html body .dev-list-panel,
html body .dev-form,
html body .dev-site-panel,
html body .dev-account-panel,
html body .dev-order-admin,
html body .dev-support-admin,
html body .dev-analytics-panel,
html body .dev-coupon-admin {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.94)),
    #ffffff !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

html body .dev-list-panel {
  position: sticky !important;
  top: 0 !important;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding: 16px !important;
}

html body .dev-form {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
}

html body .dev-form-heading {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  background:
    linear-gradient(rgba(14, 165, 233, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(240, 253, 250, 0.9)) !important;
  background-size: 24px 24px, auto !important;
}

html body .dev-form-heading span {
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .dev-form-heading strong {
  font-size: clamp(24px, 2vw, 34px);
  color: #0f172a;
}

html body .dev-form-heading p {
  margin: 0;
  color: #64748b;
  font-weight: 800;
}

html body .dev-form > label {
  grid-column: span 6;
  min-width: 0;
}

html body .dev-form > label:has(textarea),
html body .dev-form > label:has(.dev-upload-box),
html body .dev-form > .dev-form-card,
html body .dev-form > .dev-two-columns,
html body .dev-form > .dev-three-columns,
html body .dev-form > .dev-preview,
html body .dev-form > .dev-gallery-list,
html body .dev-form > .dev-actions,
html body .dev-form > .dev-message {
  grid-column: 1 / -1;
}

html body .dev-form label,
html body .dev-site-panel label,
html body .dev-account-panel label {
  display: grid !important;
  gap: 8px !important;
  align-content: start;
}

html body .dev-form label > span,
html body .dev-site-panel label > span,
html body .dev-account-panel label > span {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .dev-form input,
html body .dev-form textarea,
html body .dev-form select,
html body .dev-site-panel input,
html body .dev-site-panel textarea,
html body .dev-site-panel select {
  min-height: 48px !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body .dev-form textarea,
html body .dev-site-panel textarea {
  min-height: 112px !important;
  resize: vertical;
}

html body .dev-two-columns,
html body .dev-three-columns {
  display: grid !important;
  gap: 14px !important;
}

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

html body .dev-three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .dev-form-card,
html body .dev-category-panel {
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: rgba(248, 251, 255, 0.72) !important;
  box-shadow: none !important;
  padding: 16px !important;
}

html body .dev-panel-title {
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

html body .dev-panel-title strong {
  color: #0f172a !important;
  font-size: 18px !important;
}

html body .dev-panel-title button,
html body .dev-mini-actions button,
html body .dev-actions button,
html body .dev-featured-picker button,
html body .dev-upload-box button,
html body .dev-product-list button,
html body .dev-category-list button {
  border-radius: 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html body .dev-product-list,
html body .dev-category-list {
  display: grid !important;
  gap: 10px !important;
}

html body .dev-product-list button,
html body .dev-category-list button {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

html body .dev-product-list button:hover,
html body .dev-category-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.34) !important;
  background: rgba(240, 249, 255, 0.92) !important;
}

html body .dev-upload-box {
  border-radius: 12px !important;
  border: 1px dashed rgba(14, 165, 233, 0.42) !important;
  background:
    linear-gradient(rgba(14, 165, 233, 0.04) 1px, transparent 1px),
    rgba(248, 251, 255, 0.82) !important;
  background-size: 24px 24px, auto !important;
}

html body .dev-preview,
html body .dev-site-preview {
  max-height: 260px;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  object-fit: contain;
  background: rgba(248, 251, 255, 0.84) !important;
}

@media (max-width: 980px) {
  html body .dev-tabbed-body {
    grid-template-columns: 1fr !important;
  }

  html body .dev-section-nav {
    flex-direction: row !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  }

  html body .dev-section-nav button {
    flex: 0 0 auto;
  }

  html body .dev-workspace {
    height: calc(100vh - 190px);
  }

  html body .dev-product-admin {
    grid-template-columns: 1fr !important;
  }

  html body .dev-list-panel {
    position: static !important;
    max-height: none;
  }
}

@media (max-width: 760px) {
  html body .catalog-tools-placeholder {
    display: none !important;
  }

  html body .catalog-tools.is-docked {
    position: static !important;
    width: min(100% - 24px, 680px) !important;
    margin: 16px auto 0 !important;
  }

  html body .dev-drawer {
    width: 100vw !important;
    height: 100vh !important;
    inset: 0 !important;
    border-radius: 0 !important;
  }

  html body .dev-head {
    min-height: 78px !important;
    padding: 16px !important;
  }

  html body .dev-workspace {
    padding: 14px !important;
  }

  html body .dev-form {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  html body .dev-form > label,
  html body .dev-form > .dev-two-columns,
  html body .dev-form > .dev-three-columns,
  html body .dev-form > .dev-form-card {
    grid-column: 1 / -1 !important;
  }

  html body .dev-two-columns,
  html body .dev-three-columns {
    grid-template-columns: 1fr !important;
  }
}

/* v90: low-key motion polish and maintenance-friendly animation tokens */
html body {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 180ms;
  --motion-normal: 420ms;
}

html body .motion-ready {
  opacity: 0.01;
  transform: translateY(12px);
  transition:
    opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
  transition-delay: calc(var(--motion-index, 0) * 34ms);
}

html body .motion-ready.motion-visible {
  opacity: 1;
  transform: translateY(0);
}

html body .product-card.motion-visible,
html body .activity-banner.motion-visible,
html body .featured-product.motion-visible {
  will-change: transform;
}

html body .product-card::after,
html body .orders-page-card::after,
html body .detail-section::after,
html body .dev-form-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 8%, rgba(59, 130, 246, 0.09), transparent 28%);
  transform: translateX(-38%);
  transition:
    opacity 180ms ease,
    transform 520ms var(--motion-ease);
}

html body .product-card,
html body .orders-page-card,
html body .detail-section,
html body .dev-form-heading {
  position: relative;
  overflow: hidden;
}

html body .product-card:hover::after,
html body .orders-page-card:hover::after,
html body .detail-section:hover::after,
html body .dev-form-heading:hover::after {
  opacity: 1;
  transform: translateX(64%);
}

html body .product-card:hover .price-row span {
  transform: translateX(2px);
}

html body .price-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform var(--motion-fast) ease;
}

html body .price-row span::after {
  content: ">";
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

html body .product-card:hover .price-row span::after {
  opacity: 1;
  transform: translateX(0);
}

html body .main-nav a.active::after {
  animation: navPulse 2.4s ease-in-out infinite;
}

html body .catalog-search:focus-within {
  border-color: rgba(37, 99, 235, 0.38) !important;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.1) !important;
}

html body .catalog-search:focus-within span::after {
  content: "_";
  margin-left: 6px;
  color: #2563eb;
  animation: terminalCaret 1s steps(2, jump-none) infinite;
}

html body .filter-menu[open] fieldset {
  animation: filterMenuIn 180ms var(--motion-ease);
  transform-origin: top left;
}

html body .featured-product:not(.is-fading) img {
  animation: featureDrift 7s ease-in-out infinite;
}

html body .dev-drawer.open .dev-section-nav button {
  animation: devNavEnter 320ms var(--motion-ease) both;
  animation-delay: calc(var(--motion-index, 0) * 22ms);
}

html body .dev-section-nav button:nth-child(1) { --motion-index: 0; }
html body .dev-section-nav button:nth-child(2) { --motion-index: 1; }
html body .dev-section-nav button:nth-child(3) { --motion-index: 2; }
html body .dev-section-nav button:nth-child(4) { --motion-index: 3; }
html body .dev-section-nav button:nth-child(5) { --motion-index: 4; }
html body .dev-section-nav button:nth-child(6) { --motion-index: 5; }
html body .dev-section-nav button:nth-child(7) { --motion-index: 6; }
html body .dev-section-nav button:nth-child(8) { --motion-index: 7; }
html body .dev-section-nav button:nth-child(9) { --motion-index: 8; }

html body .add-button:active,
html body .primary-action:active,
html body .cart-button:active,
html body .dev-actions button:active {
  transform: translateY(1px) scale(0.992);
}

@keyframes navPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.34);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(20, 184, 166, 0);
  }
}

@keyframes terminalCaret {
  0%,
  46% {
    opacity: 1;
  }
  47%,
  100% {
    opacity: 0;
  }
}

@keyframes filterMenuIn {
  from {
    opacity: 0.01;
    transform: translateY(-4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes featureDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes devNavEnter {
  from {
    opacity: 0.01;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .motion-ready,
  html body .motion-ready.motion-visible,
  html body .featured-product:not(.is-fading) img,
  html body .main-nav a.active::after,
  html body .filter-menu[open] fieldset,
  html body .dev-drawer.open .dev-section-nav button {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* v91: 吸附时把顶部导航、搜索和筛选融合成一整块白色工具面板。 */
html body.filter-tools-docked .site-header {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

html body .catalog-tools.is-docked {
  left: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  top: var(--filter-dock-top, var(--active-header-height, 104px)) !important;
  gap: 12px !important;
  padding: 14px clamp(28px, 7vw, 128px) 16px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.22) !important;
  border-radius: 0 0 18px 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.96)),
    rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body .catalog-tools.is-docked::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.98);
}

html body .catalog-tools.is-docked .catalog-search,
html body .catalog-tools.is-docked .filters {
  width: min(1320px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html body .catalog-tools.is-docked .catalog-search {
  border-color: rgba(14, 165, 233, 0.22) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html body .catalog-tools.is-docked .filters {
  gap: 10px !important;
}

html body .catalog-tools.is-docked .filter-menu summary,
html body .catalog-tools.is-docked .filter-reset-button {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 760px) {
  html body.filter-tools-docked .site-header {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
  }

  html body .catalog-tools.is-docked {
    position: static !important;
    width: min(100% - 24px, 680px) !important;
    max-width: min(100% - 24px, 680px) !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
  }
}

/* v92: 收藏/取消收藏心形序列，透明贴片播放，避免 SVG 拼接闪跳。 */
html body [data-wishlist] {
  position: relative;
  overflow: visible !important;
}

html body .wishlist-button {
  display: inline-grid !important;
  place-items: center;
  transform-origin: center;
}

html body .wishlist-button.active {
  color: #be123c !important;
  background: rgba(255, 241, 245, 0.92) !important;
  box-shadow:
    0 12px 26px rgba(190, 18, 60, 0.14),
    inset 0 0 0 1px rgba(244, 63, 94, 0.22) !important;
}

html body [data-wishlist].wishlist-love,
html body [data-wishlist].wishlist-break {
  animation: wishlistButtonTap 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body [data-wishlist].wishlist-love {
  color: #be123c !important;
}

html body [data-wishlist].wishlist-break {
  color: #64748b !important;
}

html body .wishlist-motion {
  position: fixed;
  z-index: 20;
  width: 92px;
  height: 92px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transform-origin: center;
  filter: drop-shadow(0 18px 26px rgba(190, 18, 60, 0.18));
  animation: wishlistMotionLayer 1080ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html body .detail-actions [data-wishlist] .wishlist-motion {
  width: 118px;
  height: 118px;
}

html body .wishlist-motion-large {
  width: 118px;
  height: 118px;
}

html body .wishlist-motion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes wishlistButtonTap {
  0% {
    transform: translateY(0) scale(1);
  }
  44% {
    transform: translateY(-1px) scale(0.92);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes wishlistMotionLayer {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.54);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body [data-wishlist].wishlist-love,
  html body [data-wishlist].wishlist-break,
  html body .wishlist-motion {
    animation: none !important;
  }

  html body .wishlist-motion {
    display: none !important;
  }
}

/* v93: 搜索筛选进入吸附态时顶点一致，避免和导航融合瞬间上跳。 */
@media (min-width: 761px) {
  html body .catalog-tools {
    top: calc(var(--active-header-height, 104px) - 1px) !important;
    transition:
      border-radius 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      background 160ms ease !important;
  }

  html body .catalog-tools.is-docked {
    transition:
      border-radius 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      background 160ms ease !important;
  }
}

/* v94: 搜索筛选普通态和吸附态统一为无外框、无阴影、融入白底的样式。 */
@media (min-width: 761px) {
  html body:not(.view-transitioning) .shop-view-stage {
    overflow: visible !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked {
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 7%, rgba(255, 255, 255, 0.98) 93%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 255, 0.94)) !important;
    box-shadow: none !important;
  }

  html body .catalog-tools {
    padding: 0 !important;
  }

  html body .catalog-tools.is-docked {
    padding: 14px clamp(28px, 7vw, 128px) 16px !important;
  }

  html body .catalog-tools::before,
  html body .catalog-tools.is-docked::before {
    display: none !important;
  }

  html body.filter-tools-docked .site-header {
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools.is-docked .catalog-search {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within {
    box-shadow: none !important;
  }

  html body .catalog-tools .filter-menu summary,
  html body .catalog-tools .filter-reset-button,
  html body .catalog-tools.is-docked .filter-menu summary,
  html body .catalog-tools.is-docked .filter-reset-button {
    box-shadow: none !important;
  }
}

/* v95: 搜索筛选用同一块 sticky 工具条自然吸附，避免 fixed 切换造成拼接瞬移。 */
@media (min-width: 761px) {
  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked {
    position: sticky !important;
    top: calc(var(--active-header-height, 104px) - 1px) !important;
    left: auto !important;
    width: 100vw !important;
    max-width: none !important;
    margin: clamp(22px, 4vw, 42px) calc(50% - 50vw) 18px !important;
    padding: 14px clamp(28px, 7vw, 128px) 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 6%, rgba(255, 255, 255, 0.98) 94%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96)) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  html body .catalog-tools-placeholder {
    display: none !important;
  }

  html body .catalog-tools .catalog-search-band,
  html body .catalog-tools .filters,
  html body .catalog-tools.is-docked .catalog-search-band,
  html body .catalog-tools.is-docked .filters {
    width: min(1320px, 100%) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body .catalog-tools .catalog-search-band,
  html body .catalog-tools.is-docked .catalog-search-band {
    padding: 0 !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within {
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search input,
  html body .catalog-tools.is-docked .catalog-search input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.filter-tools-docked .site-header {
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
  }
}

/* v95: 收藏按钮回到商品图右上角，状态和点击反馈都使用心形序列素材。 */
html body .product-card .wishlist-button {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 8 !important;
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 16px !important;
  color: transparent !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html body .product-card .wishlist-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(244, 63, 94, 0.24) !important;
  background: rgba(255, 247, 250, 0.94) !important;
}

html body .product-card .wishlist-button::before,
html body .product-card .wishlist-icon {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: url("image/heart-break-60frame.svg") center / contain no-repeat;
}

html body .product-card .wishlist-icon {
  pointer-events: none;
}

html body .product-card .wishlist-button.active::before,
html body .product-card .wishlist-button.active .wishlist-icon {
  background-image: url("image/heart-kiss-60frame.svg");
}

html body .product-card .wishlist-button::before {
  display: none;
}

html body .product-card .wishlist-button.wishlist-love .wishlist-icon,
html body .product-card .wishlist-button.wishlist-break .wishlist-icon {
  transform-origin: center;
  animation: wishlistButtonTap 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* v97: 收藏动画固定在按钮内部播放，连续点击会中断旧帧并进入新帧，按钮尺寸不变。 */
html body .product-card .wishlist-button {
  box-sizing: border-box !important;
  overflow: hidden !important;
  clip-path: inset(0 round 16px) !important;
  contain: layout paint !important;
  isolation: isolate !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

html body .product-card .wishlist-button:hover,
html body .product-card .wishlist-button:active,
html body .product-card .wishlist-button:focus-visible {
  transform: none !important;
}

html body .product-card .wishlist-button::before {
  display: none !important;
}

html body .product-card .wishlist-icon {
  position: relative;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  overflow: visible !important;
  contain: layout paint !important;
  flex: 0 0 22px !important;
  border-radius: 8px !important;
  background: none !important;
  transform-origin: center !important;
}

html body .product-card .wishlist-icon::before {
  content: "♡" !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #94a3b8 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body .product-card .wishlist-button.active .wishlist-icon {
  background: url("image/heart-kiss-60frame.svg") center / contain no-repeat !important;
}

html body .product-card .wishlist-button.active .wishlist-icon::before,
html body .product-card .wishlist-button.wishlist-love .wishlist-icon::before,
html body .product-card .wishlist-button.wishlist-break .wishlist-icon::before {
  display: none !important;
}

html body .product-card .wishlist-frame,
html body .product-card .wishlist-icon img {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  transform: none !important;
  overflow: visible !important;
}

html body .product-card .wishlist-button.wishlist-love,
html body .product-card .wishlist-button.wishlist-break,
html body .product-card .wishlist-button.wishlist-pop,
html body .product-card .wishlist-button.active {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  transform: none !important;
}

html body .product-card .wishlist-button.wishlist-love .wishlist-icon,
html body .product-card .wishlist-button.wishlist-break .wishlist-icon {
  animation: wishlistIconTap 420ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

html body .wishlist-motion {
  display: none !important;
}

@keyframes wishlistIconTap {
  0% {
    opacity: 0.9;
    transform: scale(0.82);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
  68% {
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* v100: desktop catalog shows five products per row while preserving responsive layouts. */
@media (min-width: 1180px) {
  html body.view-products .product-grid,
  html body .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.15vw, 18px) !important;
  }

  html body .product-card .product-media {
    min-height: 0 !important;
    aspect-ratio: 1 / 0.76 !important;
  }

  html body .product-card h3 {
    font-size: clamp(19px, 1.15vw, 23px) !important;
    line-height: 1.16 !important;
  }

  html body .product-card .product-body {
    gap: 10px !important;
    padding: 15px !important;
  }

  html body .product-card .product-body p {
    display: -webkit-box;
    min-height: 3.2em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body .product-card .add-button {
    min-height: 46px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  html body.view-products .product-grid,
  html body .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body.view-products .product-grid,
  html body .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  html body.view-products .product-grid,
  html body .product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v99: desktop magnetic toolbar compresses the header after docking. */
@media (min-width: 761px) {
  html body .site-header {
    min-height: 112px;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    transition:
      min-height 180ms ease,
      padding 180ms ease,
      border-color 180ms ease,
      background 180ms ease !important;
  }

  html body .site-header .brand-mark {
    width: 54px !important;
    height: 54px !important;
    transition: width 180ms ease, height 180ms ease !important;
  }

  html body .site-header .brand strong,
  html body .site-header .brand small,
  html body .main-nav a,
  html body .header-actions > button {
    transition:
      min-height 180ms ease,
      padding 180ms ease,
      font-size 180ms ease,
      line-height 180ms ease,
      opacity 180ms ease !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked {
    gap: 8px !important;
    padding: 10px clamp(28px, 7vw, 128px) 12px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 6%, rgba(255, 255, 255, 0.98) 94%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 252, 255, 0.94)) !important;
    transition:
      top 180ms ease,
      padding 180ms ease,
      gap 180ms ease,
      background 180ms ease !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within {
    min-height: 48px !important;
    transition: min-height 180ms ease, opacity 180ms ease !important;
  }

  html body .catalog-tools .catalog-search input,
  html body .catalog-tools.is-docked .catalog-search input {
    min-height: 34px !important;
    font-size: 15px !important;
  }

  html body .catalog-tools .filters,
  html body .catalog-tools.is-docked .filters {
    gap: 8px !important;
    transition: gap 180ms ease !important;
  }

  html body .catalog-tools .filter-menu,
  html body .catalog-tools.is-docked .filter-menu {
    min-width: clamp(150px, 15vw, 210px) !important;
  }

  html body .catalog-tools .filter-menu summary,
  html body .catalog-tools .filter-reset-button,
  html body .catalog-tools.is-docked .filter-menu summary,
  html body .catalog-tools.is-docked .filter-reset-button {
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    transition:
      min-height 180ms ease,
      padding 180ms ease,
      font-size 180ms ease,
      border-color 160ms ease,
      background 160ms ease !important;
  }

  html body.filter-tools-docked {
    --active-header-height: 78px;
  }

  html body.filter-tools-docked .site-header {
    min-height: 78px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96)),
      #ffffff !important;
  }

  html body.filter-tools-docked .site-header .brand-mark {
    width: 42px !important;
    height: 42px !important;
  }

  html body.filter-tools-docked .site-header .brand strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html body.filter-tools-docked .site-header .brand small {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  html body.filter-tools-docked .main-nav a {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }

  html body.filter-tools-docked .header-actions > button {
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
  }

  html body.filter-tools-docked .cart-button strong,
  html body.filter-tools-docked [data-cart-count] {
    min-width: 24px !important;
    height: 24px !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: 77px !important;
    gap: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 7px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search {
    min-height: 34px !important;
    opacity: 0.92;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search span {
    font-size: 12px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search input {
    min-height: 28px !important;
    font-size: 14px !important;
  }

  html body.filter-tools-docked .catalog-tools .filter-menu summary,
  html body.filter-tools-docked .catalog-tools .filter-reset-button,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-menu summary,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-reset-button {
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  html body.filter-tools-docked .catalog-tools .filter-menu summary::after {
    border-top-width: 6px !important;
    border-right-width: 6px !important;
    border-left-width: 6px !important;
  }
}

/* v101: restore a visible search slot and make the docked header slimmer. */
@media (min-width: 761px) {
  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within {
    display: grid !important;
    grid-template-columns: auto minmax(280px, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 255, 0.86)),
      rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 -1px 0 rgba(14, 165, 233, 0.12) !important;
  }

  html body .catalog-tools .catalog-search input,
  html body .catalog-tools.is-docked .catalog-search input {
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  html body .catalog-tools .catalog-search input::placeholder {
    color: rgba(100, 116, 139, 0.72) !important;
    opacity: 1 !important;
  }

  html body .catalog-tools .catalog-search span {
    white-space: nowrap !important;
  }

  html body.filter-tools-docked {
    --active-header-height: 64px;
  }

  html body.filter-tools-docked .site-header {
    min-height: 64px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  html body.filter-tools-docked .site-header .brand {
    gap: 9px !important;
  }

  html body.filter-tools-docked .site-header .brand-mark {
    width: 36px !important;
    height: 36px !important;
  }

  html body.filter-tools-docked .site-header .brand strong {
    font-size: 16px !important;
  }

  html body.filter-tools-docked .site-header .brand small {
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
  }

  html body.filter-tools-docked .main-nav a {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }

  html body.filter-tools-docked .header-actions > button {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  html body.filter-tools-docked .cart-button strong,
  html body.filter-tools-docked [data-cart-count] {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: 63px !important;
    gap: 3px !important;
    padding-top: 3px !important;
    padding-bottom: 5px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search,
  html body.filter-tools-docked .catalog-tools .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools .catalog-search:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:focus-within {
    min-height: 30px !important;
    padding: 0 14px !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search input {
    min-height: 24px !important;
    font-size: 13px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search span {
    font-size: 11px !important;
  }

  html body.filter-tools-docked .catalog-tools .filter-menu summary,
  html body.filter-tools-docked .catalog-tools .filter-reset-button,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-menu summary,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-reset-button {
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* v102: stable docked header/search layout, no height animation jitter. */
@media (min-width: 761px) {
  html body .catalog-tools .catalog-search,
  html body .catalog-tools.is-docked .catalog-search {
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.filter-tools-docked {
    --active-header-height: 56px;
  }

  html body.filter-tools-docked .site-header {
    display: grid !important;
    grid-template-columns: minmax(220px, auto) minmax(260px, 1fr) minmax(280px, auto) !important;
    align-items: center !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    gap: clamp(12px, 1.8vw, 24px) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    overflow: hidden !important;
    transition:
      background 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease !important;
  }

  html body.filter-tools-docked .brand,
  html body.filter-tools-docked .main-nav,
  html body.filter-tools-docked .header-actions {
    align-items: center !important;
    align-self: center !important;
  }

  html body.filter-tools-docked .brand {
    gap: 8px !important;
    min-height: 40px !important;
  }

  html body.filter-tools-docked .brand-mark {
    width: 34px !important;
    height: 34px !important;
  }

  html body.filter-tools-docked .brand strong {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .brand small {
    display: none !important;
  }

  html body.filter-tools-docked .main-nav {
    justify-content: center !important;
    gap: clamp(10px, 1.5vw, 24px) !important;
  }

  html body.filter-tools-docked .main-nav a,
  html body.filter-tools-docked .main-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transform: none !important;
    --nav-drop: 0px !important;
    transition:
      color 120ms ease,
      background 120ms ease,
      border-color 120ms ease !important;
  }

  html body.filter-tools-docked .main-nav a::after {
    bottom: 0 !important;
  }

  html body.filter-tools-docked .main-nav a.active::before {
    bottom: -5px !important;
  }

  html body.filter-tools-docked .header-actions {
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html body.filter-tools-docked .header-actions > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .cart-button strong,
  html body.filter-tools-docked [data-cart-count] {
    min-width: 21px !important;
    height: 21px !important;
    line-height: 21px !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: 55px !important;
    display: grid !important;
    grid-template-rows: 30px 30px !important;
    gap: 4px !important;
    padding-top: 5px !important;
    padding-bottom: 6px !important;
    z-index: 880 !important;
    transition: background 120ms ease !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search-band,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search-band {
    display: block !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search,
  html body.filter-tools-docked .catalog-tools .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools .catalog-search:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:focus-within {
    display: grid !important;
    grid-template-columns: auto minmax(360px, 1fr) !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.05) !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search span {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search input {
    display: block !important;
    min-height: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    line-height: 24px !important;
  }

  html body.filter-tools-docked .catalog-tools .filters,
  html body.filter-tools-docked .catalog-tools.is-docked .filters {
    align-items: center !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  html body.filter-tools-docked .catalog-tools .filter-menu summary,
  html body.filter-tools-docked .catalog-tools .filter-reset-button,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-menu summary,
  html body.filter-tools-docked .catalog-tools.is-docked .filter-reset-button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
}

/* v103: smooth magnetic header and toolbar. Keep layout dimensions stable and animate only paint/GPU-friendly properties. */
@media (min-width: 761px) {
  html body {
    --normal-header-height: 88px;
    --docked-header-height: 52px;
    --catalog-docked-height: 64px;
    --catalog-dock-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html body .site-header {
    display: grid !important;
    grid-template-columns: minmax(220px, auto) minmax(260px, 1fr) minmax(280px, auto) !important;
    align-items: center !important;
    min-height: var(--normal-header-height) !important;
    height: var(--normal-header-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    contain: layout paint style !important;
    transition:
      height 220ms var(--catalog-dock-ease),
      min-height 220ms var(--catalog-dock-ease),
      background 160ms ease,
      border-color 160ms ease !important;
  }

  html body .site-header .brand,
  html body .site-header .main-nav,
  html body .site-header .header-actions {
    align-self: center !important;
    align-items: center !important;
    transform: translate3d(0, 0, 0);
    transition: transform 220ms var(--catalog-dock-ease), opacity 160ms ease !important;
  }

  html body .site-header .brand-mark,
  html body .site-header .brand strong,
  html body .site-header .brand small,
  html body .site-header .main-nav a,
  html body .site-header .header-actions > button {
    transition:
      width 220ms var(--catalog-dock-ease),
      height 220ms var(--catalog-dock-ease),
      min-height 220ms var(--catalog-dock-ease),
      padding 220ms var(--catalog-dock-ease),
      font-size 160ms ease,
      opacity 160ms ease,
      color 160ms ease,
      background 160ms ease,
      border-color 160ms ease !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked {
    top: calc(var(--normal-header-height) - 1px) !important;
    z-index: 880 !important;
    display: grid !important;
    grid-template-rows: 38px 40px !important;
    gap: 6px !important;
    padding: 8px clamp(28px, 7vw, 128px) 10px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.985) 5%, rgba(255, 255, 255, 0.985) 95%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.94)) !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform;
    transition:
      transform 220ms var(--catalog-dock-ease),
      background 160ms ease !important;
  }

  html body .catalog-tools .catalog-search-band,
  html body .catalog-tools.is-docked .catalog-search-band {
    display: block !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within {
    display: grid !important;
    grid-template-columns: auto minmax(320px, 1fr) !important;
    align-items: center !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search input,
  html body .catalog-tools.is-docked .catalog-search input {
    display: block !important;
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
  }

  html body .catalog-tools .filters,
  html body .catalog-tools.is-docked .filters {
    align-items: center !important;
    height: 40px !important;
    min-height: 40px !important;
    gap: 8px !important;
  }

  html body .catalog-tools .filter-menu summary,
  html body .catalog-tools .filter-reset-button,
  html body .catalog-tools.is-docked .filter-menu summary,
  html body .catalog-tools.is-docked .filter-reset-button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked {
    --active-header-height: var(--docked-header-height);
  }

  html body.filter-tools-docked .site-header {
    min-height: var(--docked-header-height) !important;
    height: var(--docked-header-height) !important;
  }

  html body.filter-tools-docked .site-header .brand-mark {
    width: 32px !important;
    height: 32px !important;
  }

  html body.filter-tools-docked .site-header .brand strong {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .site-header .brand small {
    opacity: 0 !important;
  }

  html body.filter-tools-docked .site-header .main-nav a,
  html body.filter-tools-docked .site-header .main-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body.filter-tools-docked .site-header .main-nav a.active::before {
    bottom: -4px !important;
  }

  html body.filter-tools-docked .site-header .header-actions > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: calc(var(--normal-header-height) - 1px) !important;
    grid-template-rows: 30px 30px !important;
    gap: 4px !important;
    padding-top: 5px !important;
    padding-bottom: 6px !important;
    transform: translate3d(0, calc((var(--normal-header-height) - var(--docked-header-height)) * -1), 0) !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search-band,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search-band {
    height: 30px !important;
    min-height: 30px !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search,
  html body.filter-tools-docked .catalog-tools .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools .catalog-search:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search:focus-within {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search input {
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    font-size: 13px !important;
  }

  html body.filter-tools-docked .catalog-tools .filters,
  html body.filter-tools-docked .catalog-tools.is-docked .filters {
    height: 30px !important;
    min-height: 30px !important;
  }

  html body .product-card,
  html body .activity-banner,
  html body .service-strip article {
    animation: none !important;
  }
}

/* v110 floating pet: draggable assistant with a soft pink wheel menu and icon-only shortcuts. */
html body .floating-pet-shell {
  --pet-x: calc(100vw - 86px);
  --pet-y: 12px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 910;
  width: 64px;
  height: 64px;
  transform: translate3d(var(--pet-x), var(--pet-y), 0);
  transform-origin: center;
  opacity: 1;
  pointer-events: auto;
  will-change: transform;
  transition:
    transform 300ms cubic-bezier(0.2, 0.95, 0.18, 1),
    opacity 150ms ease,
    filter 180ms ease;
}

html body.auth-locked .floating-pet-shell,
html body .floating-pet-shell.is-auth-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(2px);
}

html body .floating-pet-shell.is-dragging {
  transition: opacity 150ms ease, filter 180ms ease;
}

html body .floating-pet-button {
  position: relative;
  z-index: 3;
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 16px 30px rgba(18, 31, 44, 0.15));
}

html body .floating-pet-shell.is-free .floating-pet-button {
  cursor: grab;
}

html body .floating-pet-shell.is-dragging .floating-pet-button {
  cursor: grabbing;
  filter: drop-shadow(0 20px 38px rgba(18, 31, 44, 0.22));
}

html body .floating-pet-button .auth-eye-toy__face {
  border-radius: 24px;
  box-shadow: none;
}

html body .floating-pet-button .auth-eye-toy__eye {
  top: 15px;
  width: 40px;
  height: 28px;
  overflow: hidden;
}

html body .floating-pet-button .auth-eye-toy__pupil {
  --eye-x: 0px;
  --eye-y: 0px;
  transform: translate(calc(-50% + var(--eye-x)), calc(-50% + var(--eye-y)));
  transition: opacity 140ms ease, transform 110ms linear;
}

html body .floating-pet-eye-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #193349;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  transform: scale(0.74);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

html body .floating-pet-shell.is-eye-label .auth-eye-toy__pupil {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.38);
}

html body .floating-pet-shell.is-eye-label .floating-pet-eye-label {
  opacity: 1;
  transform: scale(1);
}

html body .floating-pet-button .auth-eye-toy__hand {
  display: none;
}

html body .floating-pet-menu {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 286px;
  height: 212px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.98);
  transition:
    opacity 180ms ease,
    visibility 0ms linear 220ms,
    transform 220ms cubic-bezier(0.2, 0.95, 0.2, 1);
}

html body .floating-pet-shell.is-open .floating-pet-menu,
html body .floating-pet-shell.is-closing .floating-pet-menu {
  visibility: visible;
}

html body .floating-pet-shell.is-open .floating-pet-menu {
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0ms;
}

html body .floating-pet-shell.is-closing .floating-pet-menu {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
}

html body .floating-pet-palette {
  position: absolute;
  inset: 42px 18px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 55%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78) 30%, transparent 64%),
    linear-gradient(115deg, rgba(255, 236, 242, 0.94), rgba(255, 255, 255, 0.9) 46%, rgba(255, 217, 229, 0.9));
  border: 1px solid rgba(234, 175, 194, 0.4);
  box-shadow: 0 22px 42px rgba(91, 54, 78, 0.16);
  opacity: 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  transform: scaleX(0.18) rotate(-8deg);
  transform-origin: left center;
  transition:
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.2, 1, 0.16, 1);
}

html body .menu-opens-left .floating-pet-palette {
  transform-origin: right center;
  transform: scaleX(0.18) rotate(8deg);
}

html body .floating-pet-shell.is-open .floating-pet-palette {
  opacity: 1;
  transform: scaleX(1) rotate(-8deg);
}

html body .floating-pet-shell.menu-opens-left.is-open .floating-pet-palette {
  transform: scaleX(1) rotate(8deg);
}

html body .floating-pet-shell.is-closing .floating-pet-palette {
  opacity: 0;
  transform: scaleX(0.18) rotate(-8deg);
}

html body .floating-pet-shell.menu-opens-left.is-closing .floating-pet-palette {
  transform: scaleX(0.18) rotate(8deg);
}

html body .floating-pet-menu::before,
html body .floating-pet-menu::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  z-index: 2;
  width: 54px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

html body .floating-pet-menu::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), transparent);
}

html body .floating-pet-menu::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.82), transparent);
}

html body .floating-pet-shell.is-open .floating-pet-menu::before,
html body .floating-pet-shell.is-open .floating-pet-menu::after {
  opacity: 1;
}

html body .floating-pet-action {
  --pet-action-x: 0px;
  --pet-action-y: 0px;
  --pet-action-scale: 0.74;
  --pet-action-opacity: 0;
  --pet-action-blur: 0px;
  --pet-action-z: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--pet-action-z);
  margin: -24px 0 0 -24px;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(238, 179, 200, 0.48);
  border-radius: 999px;
  color: #162536;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(54, 37, 53, 0.12);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
  transform: translate3d(0, 0, 0) scale(0.62);
  transition:
    transform 240ms cubic-bezier(0.2, 0.95, 0.2, 1),
    opacity 170ms ease,
    filter 170ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
  transition-delay: calc(var(--pet-action-index, 0) * 18ms);
}

html body .floating-pet-action-icon,
html body .floating-pet-action svg {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

html body .floating-pet-action svg * {
  pointer-events: none;
}

html body .floating-pet-action svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .floating-pet-shell.is-open .floating-pet-action {
  opacity: var(--pet-action-opacity);
  pointer-events: auto;
  filter: blur(var(--pet-action-blur));
  transform:
    translate3d(var(--pet-action-x), var(--pet-action-y), 0)
    scale(var(--pet-action-scale));
}

html body .floating-pet-shell.is-closing .floating-pet-action {
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
  transform: translate3d(0, 0, 0) scale(0.62);
  transition-delay: 0ms;
}

html body .floating-pet-shell.is-open .floating-pet-action:hover,
html body .floating-pet-shell.is-open .floating-pet-action:focus-visible {
  border-color: rgba(221, 134, 166, 0.7);
  background: #fff;
  box-shadow: 0 18px 34px rgba(54, 37, 53, 0.18);
  transform:
    translate3d(var(--pet-action-x), var(--pet-action-y), 0)
    scale(calc(var(--pet-action-scale) + 0.16));
}

html body .floating-pet-action.is-hidden {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  html body .floating-pet-shell {
    width: 56px;
    height: 56px;
  }

  html body .floating-pet-button {
    width: 56px;
    height: 56px;
    border-radius: 21px;
  }

  html body .floating-pet-button .auth-eye-toy__face {
    border-radius: 21px;
  }

  html body .floating-pet-button .auth-eye-toy__eye {
    top: 13px;
    width: 36px;
    height: 25px;
  }

  html body .floating-pet-eye-label {
    font-size: 9px;
  }

  html body .floating-pet-menu {
    width: 244px;
    height: 184px;
  }

  html body .floating-pet-palette {
    inset: 38px 14px;
  }

  html body .floating-pet-action {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
  }

  html body .floating-pet-action-icon,
  html body .floating-pet-action svg {
    width: 22px;
    height: 22px;
  }
}

/* v114 final polish: stable pet palette and seamless magnetic catalog tools. */
@media (min-width: 761px) {
  html body {
    --normal-header-height: 82px;
    --docked-header-height: 48px;
    --catalog-dock-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --active-header-height: var(--normal-header-height);
  }

  html body .site-header {
    display: grid !important;
    grid-template-columns: minmax(220px, auto) minmax(280px, 1fr) minmax(280px, auto) !important;
    align-items: center !important;
    height: var(--normal-header-height) !important;
    min-height: var(--normal-header-height) !important;
    max-height: var(--normal-header-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.96)),
      #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
    contain: none !important;
    transition:
      height 260ms var(--catalog-dock-ease),
      min-height 260ms var(--catalog-dock-ease),
      max-height 260ms var(--catalog-dock-ease),
      background 180ms ease !important;
  }

  html body .site-header .brand,
  html body .site-header .main-nav,
  html body .site-header .header-actions {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html body .site-header .brand-mark {
    width: 48px !important;
    height: 48px !important;
    transition: width 260ms var(--catalog-dock-ease), height 260ms var(--catalog-dock-ease) !important;
  }

  html body .main-nav {
    justify-content: center !important;
    gap: clamp(28px, 4vw, 58px) !important;
  }

  html body .main-nav a,
  html body .main-nav button {
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body .main-nav a::after {
    bottom: 4px !important;
  }

  html body .main-nav a.active::before {
    bottom: 0 !important;
  }

  html body .header-actions {
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  html body .header-actions > button {
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked {
    --active-header-height: var(--docked-header-height);
  }

  html body.filter-tools-docked .site-header {
    height: var(--docked-header-height) !important;
    min-height: var(--docked-header-height) !important;
    max-height: var(--docked-header-height) !important;
  }

  html body.filter-tools-docked .site-header .brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  html body.filter-tools-docked .site-header .brand strong {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html body.filter-tools-docked .site-header .brand small {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
  }

  html body.filter-tools-docked .main-nav a,
  html body.filter-tools-docked .main-nav button {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }

  html body.filter-tools-docked .main-nav a::after {
    bottom: 3px !important;
  }

  html body.filter-tools-docked .main-nav a.active::before {
    bottom: -1px !important;
  }

  html body.filter-tools-docked .header-actions > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  html body.filter-tools-docked .cart-button strong,
  html body.filter-tools-docked [data-cart-count] {
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked {
    position: sticky !important;
    top: calc(var(--normal-header-height) - 1px) !important;
    z-index: 890 !important;
    display: grid !important;
    grid-template-rows: 34px 38px !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px clamp(28px, 6.5vw, 128px) 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.99) 5%, rgba(255, 255, 255, 0.99) 95%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.9)) !important;
    box-shadow: none !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: top, padding, grid-template-rows;
    transition:
      top 260ms var(--catalog-dock-ease),
      padding 260ms var(--catalog-dock-ease),
      grid-template-rows 260ms var(--catalog-dock-ease),
      gap 260ms var(--catalog-dock-ease),
      background 180ms ease !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: calc(var(--docked-header-height) - 1px) !important;
    grid-template-rows: 28px 30px !important;
    gap: 3px !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
  }

  html body .catalog-tools .catalog-search-band,
  html body .catalog-tools.is-docked .catalog-search-band,
  html body.filter-tools-docked .catalog-tools .catalog-search-band,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search-band {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within {
    display: grid !important;
    grid-template-columns: auto minmax(260px, 1fr) !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 14px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search span {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #0f766e !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .catalog-tools .catalog-search input,
  html body .catalog-tools.is-docked .catalog-search input,
  html body.filter-tools-docked .catalog-tools .catalog-search input {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  html body.filter-tools-docked .catalog-tools .catalog-search span,
  html body.filter-tools-docked .catalog-tools .catalog-search input {
    font-size: 12px !important;
  }

  html body .catalog-tools .filters,
  html body .catalog-tools.is-docked .filters,
  html body.filter-tools-docked .catalog-tools .filters,
  html body.filter-tools-docked .catalog-tools.is-docked .filters {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .filter-menu {
    min-width: clamp(140px, 15vw, 220px) !important;
  }

  html body .catalog-tools .filter-menu summary,
  html body .catalog-tools .filter-reset-button,
  html body .catalog-tools.is-docked .filter-menu summary,
  html body .catalog-tools.is-docked .filter-reset-button,
  html body.filter-tools-docked .catalog-tools .filter-menu summary,
  html body.filter-tools-docked .catalog-tools .filter-reset-button {
    height: 100% !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      background 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      transform 160ms ease !important;
  }

  html body.filter-tools-docked .catalog-tools .filter-menu summary,
  html body.filter-tools-docked .catalog-tools .filter-reset-button {
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}

html body .floating-pet-shell {
  z-index: 980 !important;
}

html body .floating-pet-shell.is-open {
  z-index: 1200 !important;
}

html body .floating-pet-menu {
  pointer-events: none !important;
}

html body .floating-pet-shell.is-open .floating-pet-menu {
  pointer-events: auto !important;
}

html body .floating-pet-palette {
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72) 34%, transparent 67%),
    linear-gradient(112deg, rgba(255, 228, 238, 0.98), rgba(255, 247, 251, 0.94) 48%, rgba(255, 204, 224, 0.95)) !important;
}

html body .floating-pet-action {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(236, 169, 196, 0.58) !important;
}

html body .floating-pet-action-icon {
  display: grid !important;
  place-items: center !important;
  color: inherit !important;
}

html body .floating-pet-action-fallback {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  color: inherit;
  font-size: 17px;
  font-weight: 950;
  pointer-events: none;
}

html body .floating-pet-action-icon:empty + .floating-pet-action-fallback {
  display: grid;
}

/* v115 pet palette correction: menu geometry now radiates from the pet center, not from an offset card. */
html body .floating-pet-menu,
html body .floating-pet-shell.is-open .floating-pet-menu,
html body .floating-pet-shell.is-closing .floating-pet-menu {
  top: 50% !important;
  left: 50% !important;
  width: 320px !important;
  height: 236px !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
  transform-origin: 50% 50% !important;
}

html body .floating-pet-shell.is-open .floating-pet-menu {
  transform: translate(-50%, -50%) scale(1) !important;
}

html body .floating-pet-shell.is-closing .floating-pet-menu {
  transform: translate(-50%, -50%) scale(0.96) !important;
}

html body .floating-pet-palette,
html body .floating-pet-shell.menu-opens-left .floating-pet-palette,
html body .floating-pet-shell.menu-opens-right .floating-pet-palette {
  top: 50% !important;
  bottom: auto !important;
  width: 232px !important;
  height: 104px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 28%, transparent 62%),
    linear-gradient(90deg, rgba(255, 220, 235, 0.96), rgba(255, 245, 250, 0.86) 46%, rgba(255, 196, 221, 0.56)) !important;
  border-color: rgba(238, 172, 198, 0.34) !important;
  box-shadow: none !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%) !important;
}

html body .floating-pet-shell.menu-opens-right .floating-pet-palette {
  left: 50% !important;
  right: auto !important;
  transform-origin: left center !important;
  transform: translate(0, -50%) scaleX(0.08) !important;
}

html body .floating-pet-shell.menu-opens-left .floating-pet-palette {
  right: 50% !important;
  left: auto !important;
  transform-origin: right center !important;
  transform: translate(0, -50%) scaleX(0.08) !important;
  background:
    radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 28%, transparent 62%),
    linear-gradient(270deg, rgba(255, 220, 235, 0.96), rgba(255, 245, 250, 0.86) 46%, rgba(255, 196, 221, 0.56)) !important;
  mask-image: linear-gradient(270deg, #000 0%, #000 72%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 72%, transparent 100%) !important;
}

html body .floating-pet-shell.is-open.menu-opens-right .floating-pet-palette {
  transform: translate(0, -50%) scaleX(1) !important;
}

html body .floating-pet-shell.is-open.menu-opens-left .floating-pet-palette {
  transform: translate(0, -50%) scaleX(1) !important;
}

html body .floating-pet-shell.is-closing.menu-opens-right .floating-pet-palette {
  transform: translate(0, -50%) scaleX(0.08) !important;
}

html body .floating-pet-shell.is-closing.menu-opens-left .floating-pet-palette {
  transform: translate(0, -50%) scaleX(0.08) !important;
}

html body .floating-pet-menu::before,
html body .floating-pet-menu::after {
  top: 42px !important;
  bottom: 42px !important;
  width: 42px !important;
  opacity: 0 !important;
}

html body .floating-pet-shell.is-open .floating-pet-menu::before,
html body .floating-pet-shell.is-open .floating-pet-menu::after {
  opacity: 0.72 !important;
}

@media (max-width: 760px) {
  html body .floating-pet-menu,
  html body .floating-pet-shell.is-open .floating-pet-menu,
  html body .floating-pet-shell.is-closing .floating-pet-menu {
    width: 272px !important;
    height: 206px !important;
  }

  html body .floating-pet-palette,
  html body .floating-pet-shell.menu-opens-left .floating-pet-palette,
  html body .floating-pet-shell.menu-opens-right .floating-pet-palette {
    width: 196px !important;
    height: 90px !important;
  }
}

/* v116 pet menu lock: action icons always expand from the pet center and never inherit stale card offsets. */
html body .floating-pet-shell .floating-pet-action {
  top: 50% !important;
  left: 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) scale(0.62) !important;
  filter: blur(3px) !important;
}

html body .floating-pet-shell.is-open .floating-pet-action {
  opacity: var(--pet-action-opacity) !important;
  pointer-events: auto !important;
  transform:
    translate3d(var(--pet-action-x), var(--pet-action-y), 0)
    scale(var(--pet-action-scale)) !important;
  filter: blur(var(--pet-action-blur)) !important;
}

html body .floating-pet-shell.is-open .floating-pet-action:hover,
html body .floating-pet-shell.is-open .floating-pet-action:focus-visible {
  transform:
    translate3d(var(--pet-action-x), var(--pet-action-y), 0)
    scale(calc(var(--pet-action-scale) + 0.14)) !important;
}

html body .floating-pet-shell.is-closing .floating-pet-action,
html body .floating-pet-shell .floating-pet-action.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v117 header pet slot: reserve a calm resting place so the pet never covers the cart. */
@media (min-width: 761px) {
  html body .site-header .header-actions {
    padding-right: 86px !important;
  }

  html body.filter-tools-docked .site-header .header-actions {
    padding-right: 86px !important;
  }
}

/* v120 pet palette: quicker orbital menu response while keeping the soft open/close feel. */
html body .floating-pet-shell.is-open .floating-pet-action {
  transition:
    transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease,
    filter 120ms ease,
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
  transition-delay: 0ms !important;
}

/* v121 magnetic dock: touching the header only docks; continued scrolling gradually compresses it. */
@media (min-width: 761px) {
  html body {
    --normal-header-height: 82px;
    --docked-header-height: 48px;
    --filter-compress-offset: 0px;
    --active-header-height: var(--normal-header-height);
  }

  html body.filter-tools-docked {
    --active-header-height: calc(var(--normal-header-height) - var(--filter-compress-offset, 0px)) !important;
  }

  html body.filter-tools-compressed {
    --active-header-height: var(--docked-header-height) !important;
    --filter-compress-offset: calc(var(--normal-header-height) - var(--docked-header-height));
  }

  html body.filter-tools-docked .site-header {
    height: var(--active-header-height) !important;
    min-height: var(--active-header-height) !important;
    max-height: var(--active-header-height) !important;
    transform: translateZ(0) !important;
    transition:
      height 140ms linear,
      min-height 140ms linear,
      max-height 140ms linear,
      background 120ms ease !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .site-header .brand-mark {
    width: 48px !important;
    height: 48px !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .site-header .brand strong {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .site-header .brand small {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .main-nav a,
  html body.filter-tools-docked:not(.filter-tools-compressed) .main-nav button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 15px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .main-nav a::after {
    bottom: 4px !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .main-nav a.active::before {
    bottom: 0 !important;
  }

  html body.filter-tools-docked:not(.filter-tools-compressed) .header-actions > button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
  }

  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked {
    top: calc(var(--active-header-height) - 1px) !important;
    display: grid !important;
    grid-template-rows: 34px 38px !important;
    gap: 5px !important;
    padding: 8px clamp(28px, 6.5vw, 128px) 9px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.99) 5%, rgba(255, 255, 255, 0.99) 95%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.9)) !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      top 140ms linear,
      padding 140ms linear,
      grid-template-rows 140ms linear,
      gap 140ms linear !important;
  }

  html body.filter-tools-compressed .catalog-tools,
  html body.filter-tools-compressed .catalog-tools:hover,
  html body.filter-tools-compressed .catalog-tools:focus-within,
  html body.filter-tools-compressed .catalog-tools.is-docked {
    grid-template-rows: 28px 30px !important;
    gap: 3px !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
  }

  html body .catalog-tools .catalog-search-band,
  html body .catalog-tools.is-docked .catalog-search-band,
  html body.filter-tools-docked .catalog-tools .catalog-search-band,
  html body.filter-tools-docked .catalog-tools.is-docked .catalog-search-band,
  html body.filter-tools-compressed .catalog-tools .catalog-search-band,
  html body.filter-tools-compressed .catalog-tools.is-docked .catalog-search-band {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body .catalog-tools .catalog-search,
  html body .catalog-tools .catalog-search:hover,
  html body .catalog-tools .catalog-search:focus-within,
  html body .catalog-tools.is-docked .catalog-search,
  html body .catalog-tools.is-docked .catalog-search:hover,
  html body .catalog-tools.is-docked .catalog-search:focus-within,
  html body.filter-tools-docked .catalog-tools .catalog-search,
  html body.filter-tools-docked .catalog-tools .catalog-search:hover,
  html body.filter-tools-docked .catalog-tools .catalog-search:focus-within {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: auto minmax(260px, 1fr) !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 14px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .catalog-tools .catalog-search input,
  html body.filter-tools-docked .catalog-tools .catalog-search input,
  html body.filter-tools-compressed .catalog-tools .catalog-search input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    color: #0f172a !important;
  }

  html body.filter-tools-compressed .site-header .brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  html body.filter-tools-compressed .site-header .brand strong {
    font-size: 13px !important;
  }

  html body.filter-tools-compressed .site-header .brand small {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
  }

  html body.filter-tools-compressed .main-nav a,
  html body.filter-tools-compressed .main-nav button {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.filter-tools-compressed .header-actions > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* v121 pet menu cleanup: keep only orbiting icons, no pink oval or white edge plate. */
html body .floating-pet-palette,
html body .floating-pet-shell.menu-opens-left .floating-pet-palette,
html body .floating-pet-shell.menu-opens-right .floating-pet-palette {
  display: none !important;
  opacity: 0 !important;
}

html body .floating-pet-menu::before,
html body .floating-pet-menu::after,
html body .floating-pet-shell.is-open .floating-pet-menu::before,
html body .floating-pet-shell.is-open .floating-pet-menu::after {
  display: none !important;
  opacity: 0 !important;
}

/* v200 goal UI: homepage search navigation, collapsible filters, result page, and pet states. */
html body {
  --goal-header-height: 82px;
  --goal-blue: #0058b8;
  --goal-cyan: #05a7d8;
}

@media (min-width: 761px) {
  html body .site-header {
    grid-template-columns: minmax(186px, 250px) minmax(360px, 1fr) minmax(254px, auto) !important;
    gap: 18px !important;
    height: var(--goal-header-height) !important;
    min-height: var(--goal-header-height) !important;
    max-height: var(--goal-header-height) !important;
    padding: 0 clamp(24px, 4vw, 62px) !important;
    overflow: visible !important;
  }
}

html body .nav-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 40px;
  align-items: center;
  gap: 6px;
  width: min(100%, 820px);
  height: 46px;
  justify-self: center;
  padding: 4px 6px 4px 18px;
  border: 2px solid var(--goal-blue);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 88, 184, 0.12);
}

html body .nav-search input {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 800;
}

html body .nav-search input:focus {
  box-shadow: none !important;
}

html body .nav-search-submit,
html body .nav-filter-toggle {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  cursor: pointer;
}

html body .nav-search-submit {
  border: 0 !important;
  color: #fff !important;
  background: var(--goal-blue) !important;
  box-shadow: none !important;
  font-size: 22px !important;
}

html body .nav-filter-toggle {
  border: 1px solid rgba(0, 88, 184, 0.28) !important;
  color: var(--goal-blue) !important;
  background: #eef7ff !important;
  box-shadow: none !important;
}

html body .nav-filter-toggle span {
  width: 0;
  height: 0;
  border-top: 9px solid currentColor;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transition: transform 180ms ease;
}

html body .nav-filter-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

html body .catalog-tools,
html body .catalog-tools.is-docked,
html body .catalog-tools:hover,
html body .catalog-tools:focus-within {
  position: fixed !important;
  top: var(--active-header-height, var(--goal-header-height)) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 870 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px clamp(24px, 5vw, 76px) 16px !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 88, 184, 0.14) !important;
  border-bottom: 1px solid rgba(0, 88, 184, 0.14) !important;
  border-radius: 0 !important;
  background: rgba(248, 252, 255, 0.98) !important;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1) !important;
  transform: none !important;
}

html body .catalog-tools[hidden] {
  display: none !important;
}

/* Final header fit override: this must stay after all compact-nav rules. */
@media (min-width: 761px) {
  html body .site-header {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked,
  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked,
  html body.filter-tools-compressed .catalog-tools,
  html body.filter-tools-compressed .catalog-tools.is-docked {
    top: 68px !important;
  }
}

/* Final wishlist state lock: unselected product hearts must stay neutral and removable. */
html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) {
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) .wishlist-icon {
  background: none !important;
}

html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) .wishlist-icon::before {
  content: "♡" !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #94a3b8 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) .wishlist-frame,
html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) .wishlist-icon img,
html body .product-card .wishlist-button:not(.active):not(.wishlist-love):not(.wishlist-break) .wishlist-icon svg {
  display: none !important;
}

html body .product-card .wishlist-button.active .wishlist-icon {
  background: url("image/heart-kiss-60frame.svg") center / contain no-repeat !important;
}

html body .product-card .wishlist-button.active .wishlist-icon::before {
  display: none !important;
}

/* Brand hover mega navigation: large Apple-like panel with the site's light visual language. */
html body .brand-mega-nav[hidden] {
  display: none !important;
}

html body .brand-mega-nav {
  position: fixed !important;
  top: 68px !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 895 !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background:
    linear-gradient(135deg, rgba(247, 251, 255, 0.98), rgba(255, 255, 255, 0.96) 42%, rgba(242, 250, 250, 0.98)) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16) !important;
  backdrop-filter: saturate(180%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-12px) scaleY(0.985) !important;
  transform-origin: top center !important;
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

html body .brand-mega-nav.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scaleY(1) !important;
}

html body .brand-mega-nav.is-closing {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px) scaleY(0.99) !important;
}

html body .brand-mega-inner {
  display: grid !important;
  grid-template-columns: minmax(170px, 0.9fr) minmax(128px, 0.65fr) minmax(128px, 0.65fr) minmax(260px, 1.15fr) minmax(150px, 0.75fr) !important;
  align-items: start !important;
  gap: clamp(22px, 3vw, 54px) !important;
  width: min(1380px, calc(100% - clamp(44px, 8vw, 140px))) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 54px) 0 clamp(34px, 4.5vw, 64px) !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity 170ms ease 40ms,
    transform 230ms cubic-bezier(0.16, 1, 0.3, 1) 40ms !important;
}

html body .brand-mega-nav.is-open .brand-mega-inner {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

html body .brand-mega-nav.is-closing .brand-mega-inner {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition-duration: 120ms, 150ms !important;
  transition-delay: 0ms, 0ms !important;
}

html body .brand-mega-intro,
html body .brand-mega-column {
  min-width: 0 !important;
  align-self: start !important;
  justify-self: stretch !important;
  justify-items: start !important;
  align-content: start !important;
  opacity: 0 !important;
  transform: translateY(-5px) !important;
  transition:
    opacity 190ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .brand-mega-nav.is-open .brand-mega-intro,
html body .brand-mega-nav.is-open .brand-mega-column {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

html body .brand-mega-nav.is-open .brand-mega-intro {
  transition-delay: 55ms !important;
}

html body .brand-mega-nav.is-open .brand-mega-column:nth-child(2) {
  transition-delay: 80ms !important;
}

html body .brand-mega-nav.is-open .brand-mega-column:nth-child(3) {
  transition-delay: 105ms !important;
}

html body .brand-mega-nav.is-open .brand-mega-column:nth-child(4) {
  transition-delay: 130ms !important;
}

html body .brand-mega-nav.is-open .brand-mega-column:nth-child(5) {
  transition-delay: 155ms !important;
}

html body .brand-mega-kicker {
  display: inline-flex !important;
  width: max-content !important;
  margin-bottom: 14px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  color: #065fbc !important;
  background: rgba(0, 102, 204, 0.1) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body .brand-mega-intro strong {
  display: block !important;
  margin-bottom: 12px !important;
  color: #101828 !important;
  font-size: clamp(31px, 4vw, 56px) !important;
  line-height: 0.96 !important;
}

html body .brand-mega-intro p,
html body .brand-mega-column p,
html body .brand-mega-empty {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

html body .brand-mega-column h2 {
  margin: 0 0 14px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html body .brand-mega-link {
  position: relative !important;
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #101828 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-decoration: none !important;
  font: inherit !important;
  cursor: pointer !important;
}

html body .brand-mega-link::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 2px !important;
  left: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #06c !important;
  opacity: 0 !important;
  transform: scaleX(0.2) !important;
  transform-origin: left center !important;
  transition: opacity 160ms ease, transform 180ms ease !important;
}

html body .brand-mega-link:hover::after,
html body .brand-mega-link:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

html body .brand-mega-link span {
  justify-self: start !important;
  text-align: left !important;
  color: inherit !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

html body .brand-mega-link small {
  justify-self: start !important;
  text-align: left !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body .brand-mega-column:last-child .brand-mega-link {
  justify-items: start !important;
  text-align: left !important;
}

html body .brand-mega-products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

html body .brand-mega-product {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  color: #101828 !important;
  background: rgba(255, 255, 255, 0.64) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

html body .brand-mega-product:hover,
html body .brand-mega-product:focus-visible {
  border-color: rgba(0, 102, 204, 0.28) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
}

html body .brand-mega-product-image {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #eef5f8 !important;
}

html body .brand-mega-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body .brand-mega-product-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body .brand-mega-product-copy strong {
  overflow: hidden !important;
  color: #101828 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .brand-mega-product-copy small {
  overflow: hidden !important;
  color: #667085 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.brand-mega-nav-open main,
html body.brand-mega-nav-open footer,
html body.brand-mega-nav-closing main,
html body.brand-mega-nav-closing footer,
html body.brand-mega-nav-open .catalog-tools,
html body.brand-mega-nav-open .product-detail-loader,
html body.brand-mega-nav-open .cart-drawer,
html body.brand-mega-nav-open .legal-dialog,
html body.brand-mega-nav-open .account-drawer,
html body.brand-mega-nav-open .orders-drawer,
html body.brand-mega-nav-open .support-chat-panel,
html body.brand-mega-nav-open .dev-panel {
  transition: filter 220ms ease, opacity 220ms ease !important;
}

html body.brand-mega-nav-open main,
html body.brand-mega-nav-open footer,
html body.brand-mega-nav-open .catalog-tools,
html body.brand-mega-nav-open .product-detail-loader,
html body.brand-mega-nav-open .cart-drawer,
html body.brand-mega-nav-open .legal-dialog,
html body.brand-mega-nav-open .account-drawer,
html body.brand-mega-nav-open .orders-drawer,
html body.brand-mega-nav-open .support-chat-panel,
html body.brand-mega-nav-open .dev-panel {
  visibility: hidden !important;
  filter: none !important;
  opacity: 0 !important;
}

html body.brand-mega-nav-open::after,
html body.brand-mega-nav-closing::after {
  content: "" !important;
  position: fixed !important;
  top: 68px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 892 !important;
  pointer-events: none !important;
  background: #f7fbff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.brand-mega-nav-open::after {
  animation: brandMegaScrimIn 180ms ease both !important;
}

html body.brand-mega-nav-closing::after {
  animation: brandMegaScrimOut 220ms ease both !important;
}

@keyframes brandMegaScrimIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes brandMegaScrimOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

html body.brand-mega-nav-open main,
html body.brand-mega-nav-open footer,
html body.brand-mega-nav-closing main,
html body.brand-mega-nav-closing footer {
  pointer-events: none !important;
}

@media (max-width: 1120px) {
  html body .brand-mega-inner {
    grid-template-columns: minmax(160px, 0.9fr) repeat(3, minmax(125px, 1fr)) !important;
  }

  html body .brand-mega-column--wide {
    grid-column: span 2 !important;
  }
}

@media (max-width: 760px) {
  html body .brand-mega-nav {
    display: none !important;
  }

  html body.brand-mega-nav-open main,
  html body.brand-mega-nav-open footer {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .brand-mega-nav,
  html body .brand-mega-inner,
  html body .brand-mega-intro,
  html body .brand-mega-column,
  html body.brand-mega-nav-open main,
  html body.brand-mega-nav-open footer,
  html body.brand-mega-nav-closing main,
  html body.brand-mega-nav-closing footer {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Shopping Explore: guided product discovery queue. */
html body .shopping-explore-entry {
  max-width: 1450px;
  margin: clamp(28px, 4vw, 54px) auto clamp(26px, 3vw, 42px);
  padding: 0 clamp(16px, 4vw, 44px);
}

html body .shopping-explore-open {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.25fr);
  align-items: stretch;
  width: 100%;
  min-height: 190px;
  padding: 0;
  border: 1px solid rgba(74, 112, 155, 0.35);
  border-radius: 4px;
  color: #f4f8ff;
  text-align: left;
  background:
    linear-gradient(105deg, rgba(91, 62, 139, 0.88) 0%, rgba(64, 111, 154, 0.82) 45%, rgba(18, 31, 45, 0.92) 100%),
    #16283a;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}

html body .shopping-explore-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 54%);
  opacity: 0.85;
  pointer-events: none;
}

html body .shopping-explore-open::after {
  content: "›";
  position: absolute;
  right: clamp(20px, 4vw, 54px);
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  color: #16283a;
  background: rgba(255, 255, 255, 0.92);
  font-size: 42px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 180ms ease, background 180ms ease;
}

html body .shopping-explore-open:hover::after,
html body .shopping-explore-open:focus-visible::after {
  background: #ffffff;
  transform: translate(6px, -50%);
}

html body .shopping-explore-entry-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(28px, 4vw, 46px);
}

html body .shopping-explore-entry-copy small {
  width: max-content;
  padding: 5px 10px;
  border-radius: 3px;
  color: #10233a;
  background: #72b8ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

html body .shopping-explore-entry-copy strong {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  font-weight: 950;
}

html body .shopping-explore-entry-copy em {
  max-width: 620px;
  color: rgba(244, 248, 255, 0.82);
  font-size: clamp(16px, 1.6vw, 22px);
  font-style: normal;
  line-height: 1.45;
}

html body .shopping-explore-entry-visual {
  position: relative;
  min-height: 190px;
  opacity: 0.92;
}

html body [data-shopping-explore-preview] {
  position: absolute;
  inset: 0 92px 0 0;
  display: block;
}

html body [data-shopping-explore-preview] img {
  position: absolute;
  top: 22px;
  right: calc(var(--explore-preview-index) * 112px);
  width: min(29vw, 250px);
  height: 145px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  transform: rotate(calc((var(--explore-preview-index) - 1.5) * -2deg));
}

html body .shopping-explore-overlay[hidden] {
  display: none !important;
}

html body .shopping-explore-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  color: #e8f2ff;
}

html body .shopping-explore-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(53, 92, 137, 0.34), transparent 34%),
    rgba(3, 8, 14, 0.88);
  backdrop-filter: blur(14px) saturate(0.92);
}

html body .shopping-explore-interface {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1540px, 94vw);
  min-height: min(820px, 86vh);
  border: 1px solid rgba(148, 178, 213, 0.18);
  background:
    linear-gradient(180deg, rgba(19, 33, 48, 0.98), rgba(7, 13, 21, 0.98)),
    #09111d;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.62);
}

html body .shopping-explore-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 18px clamp(22px, 3vw, 40px);
  border-bottom: 1px solid rgba(148, 178, 213, 0.14);
  background: rgba(19, 28, 39, 0.82);
}

html body .shopping-explore-topline > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html body .shopping-explore-topline span {
  color: #ffffff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
}

html body .shopping-explore-topline button {
  border: 0;
  color: #6bb6ff;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

html body .shopping-explore-topline p {
  margin: 0;
  color: rgba(232, 242, 255, 0.76);
  font-weight: 800;
}

html body .shopping-explore-close {
  display: grid !important;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  font-size: 32px !important;
  line-height: 1;
}

html body .shopping-explore-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 0;
  padding: clamp(24px, 4vw, 54px);
}

html body .shopping-explore-card {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(360px, 1.62fr) minmax(320px, 0.72fr);
  width: 100%;
  min-height: min(560px, 62vh);
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
}

html body .shopping-explore-media {
  display: block;
  min-height: 100%;
  background: #05080d;
}

html body .shopping-explore-media img {
  width: 100%;
  height: 100%;
  min-height: min(560px, 62vh);
  object-fit: cover;
}

html body .shopping-explore-info {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(24px, 3vw, 38px);
  background: linear-gradient(180deg, #33516b 0%, #1a2b3f 100%);
}

html body .shopping-explore-product-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

html body .shopping-explore-product-head img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.18);
}

html body .shopping-explore-product-head span {
  display: block;
  margin-bottom: 6px;
  color: #9ed0ff;
  font-weight: 900;
}

html body .shopping-explore-product-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.1;
}

html body .shopping-explore-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

html body .shopping-explore-price-row strong {
  padding: 8px 14px;
  color: #d9ff62;
  background: rgba(0, 0, 0, 0.24);
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1;
}

html body .shopping-explore-price-row span,
html body .shopping-explore-tags span {
  padding: 7px 10px;
  color: #d9e9f9;
  background: rgba(9, 17, 29, 0.38);
  font-weight: 900;
}

html body .shopping-explore-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

html body .shopping-explore-info p {
  margin: 0;
  color: rgba(232, 242, 255, 0.84);
  font-size: 17px;
  line-height: 1.62;
}

html body .shopping-explore-info ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .shopping-explore-info li {
  padding: 7px 10px;
  color: rgba(232, 242, 255, 0.9);
  background: rgba(255, 255, 255, 0.09);
  font-weight: 800;
}

html body .shopping-explore-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

html body .shopping-explore-add,
html body .shopping-explore-detail,
html body .shopping-explore-favorite {
  display: grid;
  place-items: center;
  min-height: 54px;
  border: 0;
  border-radius: 3px;
  color: #ffffff;
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

html body .shopping-explore-add {
  background: #73bf4d;
}

html body .shopping-explore-add:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html body .shopping-explore-detail {
  background: #3a9bf4;
}

html body .shopping-explore-favorite {
  grid-column: span 2;
  color: #cfe5ff;
  background: rgba(9, 17, 29, 0.46);
}

html body .shopping-explore-favorite.active {
  color: #ffffff;
  background: rgba(255, 118, 151, 0.72);
}

html body .shopping-explore-arrow {
  display: grid;
  place-items: center;
  width: clamp(58px, 6vw, 92px);
  height: clamp(58px, 6vw, 92px);
  border: 0;
  border-radius: 999px;
  color: #0b1420;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  font-size: clamp(54px, 6vw, 88px);
  line-height: 0.8;
  cursor: pointer;
}

html body .shopping-explore-arrow:hover,
html body .shopping-explore-arrow:focus-visible {
  background: #ffffff;
  transform: scale(1.04);
}

html body .shopping-explore-progress {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

html body .shopping-explore-progress button {
  width: 28px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
}

html body .shopping-explore-progress button.active {
  width: 46px;
  background: #ffffff;
}

html body .shopping-explore-count {
  grid-column: 2;
  justify-self: center;
  color: rgba(232, 242, 255, 0.72);
  font-weight: 850;
}

html body .shopping-explore-empty {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 24px 30px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 900;
}

@media (max-width: 980px) {
  html body .shopping-explore-open {
    grid-template-columns: 1fr;
  }

  html body .shopping-explore-entry-visual {
    min-height: 140px;
  }

  html body .shopping-explore-card {
    grid-template-columns: 1fr;
  }

  html body .shopping-explore-media img {
    min-height: 320px;
  }

  html body .shopping-explore-stage {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  html body .shopping-explore-arrow {
    position: absolute;
    z-index: 2;
    top: 42%;
  }

  html body .shopping-explore-arrow.is-prev {
    left: 18px;
  }

  html body .shopping-explore-arrow.is-next {
    right: 18px;
  }

  html body .shopping-explore-card,
  html body .shopping-explore-progress,
  html body .shopping-explore-count {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  html body .shopping-explore-overlay {
    padding: 0;
  }

  html body .shopping-explore-interface {
    width: 100vw;
    min-height: 100vh;
  }

  html body .shopping-explore-topline {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html body .shopping-explore-topline p {
    display: none;
  }

  html body .shopping-explore-actions {
    grid-template-columns: 1fr;
  }

  html body .shopping-explore-favorite {
    grid-column: auto;
  }
}

/* Shopping Explore light theme: keep the queue immersive, but match the shop's airy site style. */
html body .shopping-explore-open {
  color: #101827 !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 248, 255, 0.96) 48%, rgba(248, 252, 255, 0.98) 100%) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1) !important;
}

html body .shopping-explore-open::before {
  background:
    linear-gradient(90deg, rgba(10, 102, 216, 0.08), transparent 58%),
    linear-gradient(135deg, rgba(23, 179, 160, 0.06), transparent 44%) !important;
}

html body .shopping-explore-open::after {
  color: #ffffff !important;
  background: #101827 !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

html body .shopping-explore-entry-copy small {
  color: #0a66d8 !important;
  background: rgba(10, 102, 216, 0.1) !important;
}

html body .shopping-explore-entry-copy em {
  color: #5c6b7a !important;
}

html body [data-shopping-explore-preview] img {
  background: #f3f7fb !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
}

html body .shopping-explore-backdrop {
  background:
    linear-gradient(120deg, rgba(244, 249, 255, 0.94), rgba(250, 253, 255, 0.9)),
    rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body .shopping-explore-interface {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.98)),
    #f8fcff !important;
  box-shadow: 0 34px 120px rgba(15, 23, 42, 0.18) !important;
}

html body .shopping-explore-topline {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

html body .shopping-explore-topline span {
  color: #101827 !important;
}

html body .shopping-explore-topline p {
  color: #5c6b7a !important;
}

html body .shopping-explore-close {
  color: #101827 !important;
  background: rgba(15, 23, 42, 0.08) !important;
}

html body .shopping-explore-card {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14) !important;
}

html body .shopping-explore-media {
  background: linear-gradient(135deg, #eef5fb, #ffffff) !important;
}

html body .shopping-explore-info {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.98)),
    #ffffff !important;
}

html body .shopping-explore-product-head span {
  color: #0a66d8 !important;
}

html body .shopping-explore-product-head h2,
html body .shopping-explore-price-row strong {
  color: #101827 !important;
}

html body .shopping-explore-price-row strong {
  background: rgba(15, 23, 42, 0.06) !important;
}

html body .shopping-explore-price-row span,
html body .shopping-explore-tags span,
html body .shopping-explore-info li {
  color: #2f4154 !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

html body .shopping-explore-info p {
  color: #4f6072 !important;
}

html body .shopping-explore-add {
  background: linear-gradient(135deg, #2f7ef7, #16a394) !important;
}

html body .shopping-explore-detail {
  background: #101827 !important;
}

html body .shopping-explore-favorite {
  color: #101827 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html body .shopping-explore-favorite.active {
  color: #ffffff !important;
  background: #ff7697 !important;
}

html body .shopping-explore-arrow {
  color: #ffffff !important;
  background: #101827 !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18) !important;
}

html body .shopping-explore-progress button {
  background: rgba(15, 23, 42, 0.18) !important;
}

html body .shopping-explore-progress button.active {
  background: #0a66d8 !important;
}

html body .shopping-explore-count {
  color: #5c6b7a !important;
}

/* Shopping Explore adaptive layout and setup flow. */
html body .shopping-explore-interface {
  width: min(1480px, 94vw) !important;
  min-height: min(760px, 84vh) !important;
}

html body .shopping-explore-topline {
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}

html body .shopping-explore-exit {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 4px;
  color: #101827 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-weight: 900 !important;
}

html body .shopping-explore-stage {
  grid-template-columns: 64px minmax(0, 1fr) 64px !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
  padding: clamp(20px, 3vw, 42px) !important;
}

html body .shopping-explore-card {
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px) !important;
  min-height: min(600px, 64vh) !important;
  max-height: min(660px, 70vh) !important;
  overflow: hidden !important;
}

html body .shopping-explore-media {
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
  padding: clamp(18px, 3vw, 42px) !important;
  overflow: hidden !important;
}

html body .shopping-explore-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: min(560px, 62vh) !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body .shopping-explore-info {
  min-width: 0 !important;
  overflow: auto !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
}

html body .shopping-explore-product-head {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body .shopping-explore-product-head img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  background: #f4f7fb !important;
}

html body .shopping-explore-product-head h2 {
  max-width: 100% !important;
  font-size: clamp(24px, 2vw, 31px) !important;
  line-height: 1.08 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html body .shopping-explore-info p {
  font-size: 15px !important;
  line-height: 1.52 !important;
}

html body .shopping-explore-info li {
  font-size: 13px !important;
}

html body .shopping-explore-price-row strong {
  font-size: clamp(24px, 2vw, 34px) !important;
}

html body .shopping-explore-add,
html body .shopping-explore-detail {
  min-height: 56px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body .shopping-explore-arrow {
  width: 60px !important;
  height: 60px !important;
  font-size: 54px !important;
}

html body .shopping-explore-count {
  display: none !important;
}

html body .shopping-explore-setup,
html body .shopping-explore-finish {
  grid-column: 1 / -1;
  justify-self: center;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  width: min(980px, 100%);
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.98));
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

html body .shopping-explore-setup {
  grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.22fr);
  align-items: stretch;
  width: min(1120px, 100%);
  min-height: min(610px, 70vh);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
}

html body .shopping-explore-setup-copy,
html body .shopping-explore-finish {
  text-align: left;
}

html body .shopping-explore-setup-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: clamp(30px, 5vw, 58px);
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, #0f2b4d 0%, #0f766e 100%);
}

html body .shopping-explore-setup-copy::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border: 42px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  pointer-events: none;
}

html body .shopping-explore-setup-copy span,
html body .shopping-explore-finish > span {
  display: inline-flex;
  width: max-content;
  padding: 6px 10px;
  border-radius: 4px;
  color: #0a66d8;
  background: rgba(10, 102, 216, 0.1);
  font-weight: 950;
}

html body .shopping-explore-setup-copy span {
  color: #d9f99d;
  background: rgba(217, 249, 157, 0.14);
}

html body .shopping-explore-setup-copy h2,
html body .shopping-explore-finish h2 {
  margin: 0;
  color: #101827;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.03;
  letter-spacing: 0;
}

html body .shopping-explore-setup-copy h2 {
  color: #ffffff;
  font-size: clamp(42px, 5.2vw, 76px);
}

html body .shopping-explore-setup-copy p,
html body .shopping-explore-finish p,
html body .shopping-explore-finish small {
  margin: 0;
  max-width: 760px;
  color: #5c6b7a;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  font-weight: 800;
}

html body .shopping-explore-setup-copy p {
  color: rgba(255, 255, 255, 0.78);
}

html body .shopping-explore-setup-metrics {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 4px 12px;
  width: min(260px, 100%);
  margin-top: 8px;
}

html body .shopping-explore-setup-metrics strong {
  color: #ffffff;
  font-size: 34px;
  line-height: 0.9;
}

html body .shopping-explore-setup-metrics small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

html body .shopping-explore-setup-preview {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  max-width: 320px;
}

html body .shopping-explore-mini-product {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}

html body .shopping-explore-mini-product img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

html body .shopping-explore-mini-product strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .shopping-explore-setup-form {
  display: grid;
  align-content: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 54px);
}

html body .shopping-explore-setup-form fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.9);
}

html body .shopping-explore-setup-form legend {
  color: #101827;
  font-size: 16px;
  font-weight: 950;
}

html body .shopping-explore-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

html body .shopping-explore-choice-grid label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 13px;
  color: #26384c;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 900;
  cursor: pointer;
}

html body .shopping-explore-choice-grid label:has(input:checked),
html body .shopping-explore-choice-grid label.active {
  border-color: rgba(10, 102, 216, 0.5);
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #0f766e);
  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.18);
}

html body .shopping-explore-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html body .shopping-explore-setup-actions,
html body .shopping-explore-finish > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

html body .shopping-explore-start,
html body .shopping-explore-more,
html body .shopping-explore-change,
html body .shopping-explore-exit-action {
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

html body .shopping-explore-start,
html body .shopping-explore-more {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #0f766e);
}

html body .shopping-explore-change {
  color: #ffffff;
  background: #101827;
}

html body .shopping-explore-exit-action {
  color: #101827;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

@media (max-width: 980px) {
  html body .shopping-explore-setup {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  html body .shopping-explore-card {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 400px) !important;
  }
}

@media (max-width: 980px) {
  html body .shopping-explore-topline {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body .shopping-explore-topline p,
  html body .shopping-explore-exit {
    display: none !important;
  }

  html body .shopping-explore-stage {
    grid-template-columns: 1fr !important;
  }

  html body .shopping-explore-card {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  html body .shopping-explore-media img {
    min-height: 260px !important;
  }
}

/* v20260612 nav pet slot: reserve a real desktop header bay for the pet. */
@media (min-width: 761px) {
  html body {
    --header-pet-slot: clamp(82px, 7.5vw, 110px);
  }

  html body .site-header {
    grid-template-columns:
      minmax(168px, 240px)
      minmax(260px, 1fr)
      max-content
      var(--header-pet-slot) !important;
    column-gap: clamp(10px, 1.4vw, 22px) !important;
    padding-left: clamp(34px, 5vw, 70px) !important;
    padding-right: clamp(12px, 2.4vw, 34px) !important;
    overflow: visible !important;
  }

  html body .site-header .brand {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html body .site-header .nav-search {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    min-width: 240px !important;
  }

  html body .site-header .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 0.8vw, 14px) !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  html body.filter-tools-docked .site-header .header-actions,
  html body.filter-tools-compressed .site-header .header-actions {
    padding-right: 0 !important;
  }

  html body .floating-pet-shell.is-nav-anchored {
    z-index: 1260 !important;
  }

  html body .floating-pet-shell.is-nav-anchored .floating-pet-bubble {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  html body {
    --header-pet-slot: 78px;
  }

  html body .site-header {
    grid-template-columns:
      minmax(138px, 186px)
      minmax(210px, 1fr)
      max-content
      var(--header-pet-slot) !important;
    column-gap: 8px !important;
  }

  html body .site-header .nav-search {
    max-width: 460px !important;
    min-width: 210px !important;
  }

  html body .site-header .header-actions > button,
  html body .site-header .cart-button {
    min-width: 0 !important;
    padding-inline: 12px !important;
  }

  html body .site-header .cart-button span:nth-child(2) {
    display: none !important;
  }
}

/* Final header fit: give the desktop nav enough height for the anchored pet. */
@media (min-width: 761px) {
  html body .site-header {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked,
  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked,
  html body.filter-tools-compressed .catalog-tools,
  html body.filter-tools-compressed .catalog-tools.is-docked {
    top: 68px !important;
  }
}

html body .filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html body .filter-panel-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

html body .filter-panel-head button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  font-size: 22px !important;
}

html body .catalog-tools .filters,
html body .catalog-tools.is-docked .filters,
html body.filter-tools-docked .catalog-tools .filters,
html body.filter-tools-compressed .catalog-tools .filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .catalog-tools .filter-menu {
  min-width: min(190px, 100%) !important;
}

html body .catalog-tools .filter-menu summary,
html body .catalog-tools .filter-reset-button,
html body.filter-tools-docked .catalog-tools .filter-menu summary,
html body.filter-tools-docked .catalog-tools .filter-reset-button,
html body.filter-tools-compressed .catalog-tools .filter-menu summary,
html body.filter-tools-compressed .catalog-tools .filter-reset-button {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

html body.view-home .catalog-tools:not(.is-open) {
  display: none !important;
}

html body.view-products .activity-banner,
html body.view-products .service-strip,
html body.view-products .quick-collections {
  display: none !important;
}

html body.view-products .products-view {
  min-height: calc(100svh - var(--goal-header-height));
  padding-top: clamp(22px, 4vw, 42px);
}

html body.view-products .store-shell,
html body.view-products .store-shell .catalog {
  width: min(1320px, calc(100% - clamp(28px, 7vw, 128px))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-products .catalog-head {
  padding: 0 0 18px !important;
}

html body.view-products .product-grid {
  align-items: stretch;
}

html body .home-view {
  display: block;
}

html body .home-recommendations {
  width: min(1320px, calc(100% - clamp(28px, 7vw, 128px)));
  margin: clamp(28px, 5vw, 64px) auto clamp(40px, 7vw, 88px);
}

html body .home-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .search-loading-layer {
  position: fixed;
  inset: var(--active-header-height, var(--goal-header-height)) 0 0;
  z-index: 840;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  color: #0f172a;
  background: rgba(248, 252, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body .search-loading-layer[hidden] {
  display: none !important;
}

html body .search-loading-layer span {
  width: 58px;
  height: 58px;
  border: 4px solid rgba(0, 88, 184, 0.16);
  border-top-color: var(--goal-blue);
  border-radius: 50%;
  animation: goalSearchSpin 760ms linear infinite;
}

html body .search-loading-layer strong {
  font-size: 16px;
  font-weight: 950;
}

html body .nav-search {
  position: relative;
}

html body .nav-search-clear {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 0;
  border-radius: 50%;
  color: #475569;
  background: rgba(15, 23, 42, 0.07);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

html body .nav-search-clear:hover,
html body .nav-search-clear:focus-visible {
  color: #0f172a;
  background: rgba(14, 165, 233, 0.14);
}

/* Product detail loading state: show a clear waiting indicator before detail data renders. */
html body.product-detail-page .detail-page.detail-loading-state {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(260px, 40vh, 460px) !important;
  margin: clamp(22px, 5vw, 64px) auto clamp(18px, 4vw, 44px) !important;
  padding: clamp(28px, 5vw, 58px) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.94)),
    #ffffff !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08) !important;
}

html body.product-detail-page .product-detail-loader {
  display: grid;
  justify-items: center;
  gap: 16px;
  color: #526174;
  font-weight: 950;
}

html body.product-detail-page .product-detail-loader span {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(10, 102, 216, 0.14);
  border-top-color: #0a66d8;
  border-radius: 999px;
  animation: productDetailSpin 820ms linear infinite;
}

html body.product-detail-page .product-detail-loader strong {
  font-size: 14px;
}

@keyframes productDetailSpin {
  to {
    transform: rotate(360deg);
  }
}

html body .nav-search-clear[hidden] {
  display: none !important;
}

html body .product-card .stock-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  font-size: 12px;
  font-weight: 900;
}

html body .product-card.is-low-stock .stock-badge {
  color: #92400e;
  background: rgba(254, 243, 199, 0.94);
}

html body .product-card.is-sold-out {
  opacity: 0.72;
}

html body .product-card.is-sold-out .product-media img {
  filter: grayscale(0.45);
}

html body .product-card .add-button:disabled {
  cursor: not-allowed;
  color: #64748b !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
}

html body .cart-toast.is-error {
  color: #7f1d1d;
  background: #fff1f2;
  border-color: rgba(225, 29, 72, 0.25);
}

@keyframes goalSearchSpin {
  to {
    transform: rotate(360deg);
  }
}

html body .site-footer nav {
  align-items: center;
}

html body .site-footer nav a {
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}

html body .floating-pet-shell {
  z-index: 1300 !important;
}

html body .floating-pet-shell.is-open {
  z-index: 1450 !important;
}

html body .floating-pet-bubble {
  position: absolute;
  right: calc(100% + 8px);
  left: auto;
  top: 8px;
  bottom: auto;
  max-width: 150px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 88, 184, 0.18);
  border-radius: 12px 12px 2px 12px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity 160ms ease, transform 180ms ease;
}

html body .floating-pet-shell.menu-opens-right .floating-pet-bubble {
  right: auto;
  left: calc(100% + 8px);
  border-radius: 12px 12px 12px 2px;
}

html body .floating-pet-shell.menu-opens-left .floating-pet-bubble {
  right: calc(100% + 8px);
  left: auto;
  border-radius: 12px 12px 2px 12px;
}

html body .floating-pet-shell.is-speaking .floating-pet-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-bubble {
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  max-width: 138px;
  text-align: center;
  border-radius: 12px 12px 12px 12px;
  transform: translate(-50%, 6px) scale(0.96);
}

html body .floating-pet-shell.is-nav-anchored.is-open.is-speaking .floating-pet-bubble {
  transform: translate(-50%, 0) scale(1);
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-closing .floating-pet-menu {
  top: 50% !important;
  left: 50% !important;
  width: min(460px, calc(100vw - 112px)) !important;
  height: 168px !important;
  cursor: grab;
  overflow: hidden !important;
  touch-action: pan-x;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu:active {
  cursor: grabbing;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::before,
html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::after {
  display: none !important;
}

html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu::before,
html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu::after {
  opacity: 1 !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::before {
  left: 0 !important;
  background: linear-gradient(90deg, rgba(248, 252, 255, 0.96), rgba(248, 252, 255, 0.72) 42%, transparent) !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::after {
  right: 0 !important;
  background: linear-gradient(270deg, rgba(248, 252, 255, 0.96), rgba(248, 252, 255, 0.72) 42%, transparent) !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-action {
  border-color: rgba(0, 88, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 12px 28px rgba(0, 88, 184, 0.13) !important;
}

html body .floating-pet-shell.is-free {
  animation: petDropIn 420ms cubic-bezier(0.2, 0.95, 0.18, 1) both;
}

/* v131 account center: full-page settings-style surface with store-native visual language. */
html body .account-overlay {
  background: rgba(10, 18, 30, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html body .account-panel {
  inset: clamp(18px, 3vw, 38px) !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 88, 184, 0.18) !important;
  border-radius: 22px !important;
  background: #f7fbff !important;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28) !important;
  transform: translateY(18px) scale(0.985) !important;
  overflow: hidden !important;
}

html body .account-panel.open {
  transform: translateY(0) scale(1) !important;
}

html body .account-settings-shell {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  height: 100%;
  min-height: min(780px, calc(100svh - clamp(36px, 6vw, 76px)));
}

html body .account-settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 18px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 18% 0%, rgba(51, 160, 192, 0.32), transparent 34%),
    linear-gradient(180deg, #18253a, #0f172a 72%);
}

html body .account-window-dots {
  display: flex;
  gap: 8px;
  padding: 0 4px 6px;
}

html body .account-window-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff6b6b;
}

html body .account-window-dots span:nth-child(2) {
  background: #ffd166;
}

html body .account-window-dots span:nth-child(3) {
  background: #5fd38d;
}

html body .account-back-button,
html body .account-settings-nav button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

html body .account-back-button {
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.74);
}

html body .account-identity-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

html body .account-identity-card span,
html body .account-settings-head span {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

html body .account-identity-card strong {
  font-size: 22px;
  color: #fff;
}

html body .account-identity-card small {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 800;
}

html body .account-settings-nav {
  display: grid;
  gap: 6px;
}

html body .account-settings-nav button {
  padding: 0 14px;
}

html body .account-settings-nav button:hover,
html body .account-settings-nav button.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

html body .account-settings-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    linear-gradient(120deg, rgba(236, 247, 255, 0.72), transparent 36%),
    #f8fbff;
}

html body .account-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px clamp(28px, 5vw, 72px) 18px;
}

html body .account-settings-head span {
  color: #5b6b80;
}

html body .account-settings-head h2 {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 0;
}

html body .account-settings-head button {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

html body .account-panel-body {
  display: block !important;
  min-height: 0 !important;
  padding: 0 clamp(28px, 5vw, 72px) 48px !important;
  overflow: auto !important;
}

html body .account-section-page {
  display: grid;
  gap: 18px;
}

html body .account-section-page[hidden] {
  display: none !important;
}

html body .account-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

html body .account-overview-grid button,
html body .member-card,
html body .account-form,
html body .account-orders-list,
html body .account-orders-detail {
  border: 1px solid rgba(0, 88, 184, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
}

html body .account-overview-grid button {
  min-height: 104px;
  padding: 18px;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

html body .account-overview-grid button strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

html body .account-overview-grid button span {
  color: #64748b;
  font-weight: 800;
}

html body .account-orders-layout {
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 16px;
  min-height: 480px;
}

html body .account-orders-list,
html body .account-orders-detail {
  padding: 14px !important;
}

html body .account-order-row {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

html body .account-order-row.active,
html body .account-order-row:hover {
  border-color: rgba(0, 88, 184, 0.16);
  background: #eef7ff;
}

html body .account-order-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 950;
}

html body .account-order-status.is-done {
  color: #047857;
  background: #d1fae5;
}

html body .account-order-status.is-shipping {
  color: #0f766e;
  background: #ccfbf1;
}

html body .account-order-status.is-muted {
  color: #64748b;
  background: #e2e8f0;
}

html body .account-order-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

html body .account-order-detail-head span,
html body .account-order-address,
html body .account-order-items span {
  color: #64748b;
  font-weight: 800;
}

html body .account-order-items {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

html body .account-order-items article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
}

html body .account-order-items img {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}

html body .account-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html body .member-section {
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
}

html body .member-section summary {
  cursor: pointer;
  font-weight: 950;
}

/* v132 account center polish: cleaner settings layout and non-overlapping controls. */
html body .account-window-dots {
  display: none !important;
}

html body .account-settings-sidebar {
  padding-top: 30px !important;
}

html body .account-back-button {
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
}

html body .account-settings-main {
  background:
    radial-gradient(circle at 88% 2%, rgba(14, 165, 233, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(241, 248, 255, 0.95), rgba(248, 251, 255, 0.98) 46%, #ffffff) !important;
}

html body .account-settings-head {
  position: sticky;
  top: 0;
  z-index: 8;
  align-items: flex-start;
  padding-top: 28px !important;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(248, 251, 255, 0.74) 78%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body .account-settings-head button {
  position: relative;
  z-index: 12;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1) !important;
  cursor: pointer !important;
}

html body .account-settings-head button:hover {
  transform: translateY(-1px);
  background: #ffffff !important;
}

html body .account-panel-body {
  max-width: 1020px;
  width: 100%;
}

html body .balance-card {
  min-height: 112px !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(90deg, #101820, #0f172a 62%, #17324a) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18) !important;
}

html body .balance-card span {
  color: rgba(255, 255, 255, 0.7) !important;
}

html body .balance-card strong {
  color: #ffffff !important;
  font-size: clamp(30px, 4vw, 42px) !important;
}

html body .account-overview-grid button {
  display: grid;
  align-content: center;
  min-height: 92px !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

html body .account-overview-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.28) !important;
  box-shadow: 0 18px 42px rgba(14, 165, 233, 0.11) !important;
}

html body .account-section-page[data-account-page="profile"] .account-form,
html body .account-section-page[data-account-page="wallet"] .account-form {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .account-section-page[data-account-page="profile"] .account-address-block,
html body .account-section-page[data-account-page="wallet"] .account-wallet-form label,
html body .account-section-page[data-account-page="wallet"] .account-message-button {
  grid-column: 1 / -1;
  padding: 18px !important;
  border: 1px solid rgba(0, 88, 184, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
}

html body .account-phone-bind {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(240, 249, 255, 0.94)),
    #ffffff !important;
}

html body .account-field-title,
html body .member-card-head strong {
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

html body .account-address-block p,
html body .member-card-head span {
  margin: 0 0 14px;
  color: #64748b;
  font-weight: 800;
  line-height: 1.7;
}

html body .account-address-grid,
html body .account-section-page[data-account-page="profile"] .dev-two-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .account-section-page[data-account-page="profile"] .dev-two-columns {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .account-form label {
  display: grid !important;
  gap: 8px !important;
  color: #334155;
  font-weight: 900;
}

html body .account-form label > span {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body .account-form input,
html body .account-form select,
html body .account-form textarea {
  width: 100%;
  min-height: 48px !important;
  padding: 11px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body .account-form textarea {
  min-height: 88px !important;
  resize: vertical;
}

html body .account-section-page[data-account-page="profile"] .primary-link,
html body .account-section-page[data-account-page="wallet"] .secondary-link[type="submit"] {
  grid-column: 1 / -1;
  min-height: 50px !important;
  border-radius: 12px !important;
}

html body .account-wallet-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(280px, 1fr);
  gap: 14px;
}

html body .account-wallet-card,
html body .account-support-card {
  border: 1px solid rgba(0, 88, 184, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
}

html body .account-wallet-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(120deg, #0f172a, #1e3a8a 58%, #0f766e) !important;
}

html body .account-wallet-card span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

html body .account-wallet-card strong {
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
}

html body .account-section-page[data-account-page="wallet"] .account-wallet-form {
  padding: 0 !important;
}

html body .account-section-page[data-account-page="wallet"] .account-wallet-form label {
  padding: 20px !important;
}

html body .account-support-card {
  display: grid;
  gap: 14px;
  padding: 18px !important;
}

html body .account-support-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 0 !important;
}

html body .account-support-head .account-message-button {
  width: auto !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

html body .account-support-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  min-height: 430px;
}

html body .account-support-list,
html body .account-support-detail {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.86);
}

html body .account-support-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding: 10px;
}

html body .account-support-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #0f172a;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

html body .account-support-row:hover,
html body .account-support-row.active {
  border-color: rgba(14, 165, 233, 0.28);
  background: #eef7ff;
}

html body .account-support-row strong,
html body .account-support-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .account-support-row span,
html body .account-support-row small,
html body .account-support-row em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

html body .account-support-detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
}

html body .account-support-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

html body .account-support-detail-head span {
  color: #64748b;
  font-weight: 900;
}

html body .account-support-detail-head strong {
  color: #0f172a;
}

html body .account-support-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html body .account-support-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 950;
}

html body .account-support-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 4px;
}

html body .account-support-message-bubble {
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: min(520px, 82%);
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html body .account-support-message-bubble.own {
  justify-self: end;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #0f766e);
}

html body .account-support-message-bubble span,
html body .account-support-message-bubble small {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.78;
}

html body .account-support-message-bubble p {
  margin: 0;
  line-height: 1.55;
  font-weight: 800;
}

html body .account-support-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

html body .account-support-composer textarea {
  width: 100%;
  min-height: 48px;
  max-height: 130px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  resize: vertical;
}

html body .account-support-composer button {
  min-width: 88px;
  min-height: 48px !important;
  border-radius: 12px !important;
}

html body .account-support-message:not(:empty) {
  padding: 10px 12px;
  border-radius: 12px;
  color: #b45309;
  background: #fef3c7;
  font-weight: 900;
}

html body .account-support-card-send {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 12px;
  background: rgba(240, 249, 255, 0.82);
}

html body .account-support-card-send select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
}

html body .account-chat-product-card,
html body .account-chat-order-card {
  display: grid;
  gap: 8px;
  min-width: min(320px, 72vw);
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  text-decoration: none;
}

html body .account-chat-product-card {
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
}

html body .account-chat-product-card img,
html body .account-chat-order-items img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  background: #eef2f7;
}

html body .account-chat-product-card span,
html body .account-chat-product-card small,
html body .account-chat-order-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

html body .account-chat-product-card strong,
html body .account-chat-order-card strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .account-chat-order-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

html body .account-chat-order-card em {
  color: #0f172a;
  font-style: normal;
  font-weight: 950;
}

html body .account-chat-order-items {
  display: grid;
  gap: 7px;
}

html body .account-chat-order-items span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
}

html body .account-support-message-bubble.own .account-chat-product-card,
html body .account-support-message-bubble.own .account-chat-order-card {
  background: rgba(255, 255, 255, 0.96);
}

html body .account-orders-layout {
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) !important;
}

html body .member-card {
  padding: 18px !important;
}

html body .account-message:not(:empty) {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #075985;
  background: #e0f2fe;
  font-weight: 900;
}

@media (max-width: 820px) {
  html body .account-panel {
    inset: 0 !important;
    border-radius: 0 !important;
  }

  html body .account-settings-shell,
  html body .account-orders-layout,
  html body .account-overview-grid {
    grid-template-columns: 1fr;
  }

  html body .account-settings-sidebar {
    padding: 18px;
  }

  html body .account-address-grid,
  html body .account-section-page[data-account-page="profile"] .dev-two-columns,
  html body .account-wallet-grid,
  html body .account-support-layout {
    grid-template-columns: 1fr !important;
  }
}

@keyframes petDropIn {
  0% {
    filter: drop-shadow(0 2px 0 rgba(0, 88, 184, 0.2));
  }
  45% {
    filter: drop-shadow(0 22px 26px rgba(0, 88, 184, 0.18));
  }
  100% {
    filter: none;
  }
}

@media (max-width: 900px) {
  html body .site-header {
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  html body .brand small,
  html body .logout-button {
    display: none !important;
  }

  html body .nav-search {
    grid-template-columns: minmax(0, 1fr) 38px 36px;
    height: 42px;
    padding-left: 10px;
  }

  html body .header-actions {
    gap: 6px !important;
  }

  html body .header-actions > button {
    padding: 0 10px !important;
  }
}

@media (max-width: 760px) {
  html body {
    --goal-header-height: 126px;
  }

  html body .site-header {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "search search";
    height: auto !important;
    min-height: var(--goal-header-height) !important;
    max-height: none !important;
    padding: 10px 12px 12px !important;
  }

  html body .brand {
    grid-area: brand;
  }

  html body .nav-search {
    grid-area: search;
    width: 100%;
    justify-self: stretch;
  }

  html body .header-actions {
    grid-area: actions;
    padding-right: 62px !important;
  }

  html body .catalog-tools,
  html body .catalog-tools.is-docked {
    position: fixed !important;
    top: var(--active-header-height, var(--goal-header-height)) !important;
    padding: 10px 12px 14px !important;
  }

  html body .home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body .floating-pet-bubble {
    right: auto;
    left: calc(100% + 6px);
    max-width: 118px;
  }
}

/* v136 account surface guard: the full-page account center must never inherit drawer slide transforms. */
html body .account-panel,
html body .account-panel.open {
  translate: 0 0 !important;
}

html body .account-panel.open {
  transform: none !important;
  opacity: 1 !important;
}

/* v137 account center scroll guard: keep the shell fixed, let every account page scroll inside the main area. */
html body .account-panel {
  display: block !important;
  overflow: hidden !important;
}

html body .account-settings-shell {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body .account-settings-main {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body .account-panel-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: max(56px, env(safe-area-inset-bottom)) !important;
}

/* v144 account center click guard: keep account navigation above decorative layers. */
html body.account-center-open .support-entry-float {
  pointer-events: none !important;
}

html body.account-center-open .floating-pet-shell {
  pointer-events: auto !important;
}

html body .account-panel.open .account-settings-shell,
html body .account-panel.open .account-settings-sidebar,
html body .account-panel.open .account-settings-main,
html body .account-panel.open .account-panel-body {
  position: relative;
  z-index: 1;
}

html body .account-panel.open .account-settings-nav,
html body .account-panel.open .account-overview-grid {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
}

html body .account-panel.open [data-account-section],
html body .account-panel.open [data-close-account] {
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer !important;
}

/* v145 account center state fix: closed account panels must not remain visible after layout overrides. */
html body .account-panel:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(105%) !important;
}

html body .account-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body .account-overlay[hidden] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  html body .account-panel {
    overflow-y: auto !important;
  }

  html body .account-settings-shell,
  html body .account-settings-main {
    height: auto !important;
    overflow: visible !important;
  }

  html body .account-panel-body {
    overflow: visible !important;
  }
}

/* v138 independent support page: store-native messenger surface and fixed service entry. */
html body .support-entry-float {
  position: fixed;
  right: clamp(28px, 3vw, 48px);
  bottom: clamp(82px, 10vh, 128px);
  z-index: 1180;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(0, 88, 184, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(0, 88, 184, 0.18);
  text-decoration: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

html body.support-page-body .support-entry-float {
  display: none !important;
}

html body .support-entry-float:hover {
  transform: translateY(-3px);
  background: rgba(250, 253, 255, 0.98);
  box-shadow: 0 22px 52px rgba(0, 88, 184, 0.24);
}

html body .support-entry-bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 25px;
  border: 2px solid #102033;
  border-radius: 13px;
  color: #102033;
}

html body .support-entry-bubble::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: -6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #102033;
  border-bottom: 2px solid #102033;
  border-bottom-right-radius: 8px;
  background: inherit;
  transform: rotate(32deg);
}

html body .support-entry-bubble i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

html body.support-page-body {
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 88, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 88, 184, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #f8fbff 0%, #eef7fb 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

html body .support-page-main {
  min-height: calc(100vh - var(--header-height, 88px));
  padding: clamp(20px, 3vw, 34px);
}

html body .support-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  width: min(1680px, calc(100vw - clamp(32px, 6vw, 88px)));
  height: min(790px, calc(100vh - 136px));
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0, 88, 184, 0.16);
  border-radius: 22px;
  background: rgba(248, 252, 255, 0.92);
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.2);
}

html body .support-room-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(160deg, rgba(0, 133, 151, 0.22), transparent 26%),
    linear-gradient(180deg, #f5f8fb 0%, #eef3f7 100%);
}

html body .support-room-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
}

html body .support-room-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #7a8798;
}

html body .support-room-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172033;
  font: inherit;
  font-weight: 800;
}

html body .support-room-tools button,
html body .support-chat-actions .support-icon-link {
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 88, 184, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #12223a;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
}

html body .support-room-owner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

html body .support-room-owner strong,
html body .support-room-owner small,
html body .support-room-copy strong,
html body .support-room-copy small,
html body .support-room-meta small,
html body .support-room-meta em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .support-room-owner strong,
html body .support-room-copy strong {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

html body .support-room-owner small,
html body .support-room-copy small,
html body .support-room-meta {
  color: #7a8798;
  font-size: 12px;
  font-weight: 800;
}

html body .support-room-items {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

html body .support-room-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 66px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

html body .support-room-item:hover,
html body .support-room-item.active {
  background: rgba(255, 255, 255, 0.8);
}

html body .support-room-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0b1c35, #008d96);
  font-weight: 950;
}

html body .support-room-copy {
  min-width: 0;
}

html body .support-room-meta {
  min-width: 0;
  text-align: right;
}

html body .support-room-meta em {
  margin-top: 6px;
  font-style: normal;
}

html body .support-list-empty,
html body .support-status {
  color: #657386;
  font-size: 13px;
  font-weight: 800;
}

html body .support-chat-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  background: #f6f8fa;
}

html body .support-chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.92);
}

html body .support-chat-title span {
  color: #6c788a;
  font-size: 12px;
  font-weight: 900;
}

html body .support-chat-title h1 {
  margin: 4px 0 0;
  color: #111827;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
}

html body .support-chat-actions {
  display: flex;
  gap: 10px;
}

html body .support-chat-actions .support-icon-link {
  width: 38px;
  height: 38px;
}

html body .support-chat-messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding: 26px clamp(22px, 4vw, 58px);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

html body .support-empty-thread {
  align-self: center;
  display: grid;
  place-items: center;
  gap: 10px;
  max-width: 380px;
  margin: auto;
  color: #657386;
  text-align: center;
  font-weight: 800;
}

html body .support-empty-thread > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 42px;
  border: 2px solid #12223a;
  border-radius: 20px;
  color: #12223a;
  font-size: 22px;
  line-height: 1;
}

html body .support-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 620px);
  gap: 10px;
  align-items: start;
  max-width: 78%;
}

html body .support-message.own {
  align-self: flex-end;
  grid-template-columns: minmax(0, 720px) 38px;
}

html body .support-message.own .support-message-avatar {
  grid-column: 2;
}

html body .support-message.own .support-message-stack {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
}

html body .support-message-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #12223a, #0a8f96);
  font-weight: 950;
}

html body .support-message-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

html body .support-message-stack > small {
  color: #8a96a8;
  font-size: 12px;
  font-weight: 800;
}

html body .support-message p {
  max-width: 100%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 4px 14px 14px 14px;
  color: #162033;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  font-weight: 800;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

html body .support-message.own p {
  border-radius: 14px 4px 14px 14px;
  color: #082616;
  background: #9eea78;
}

html body .support-message-card {
  display: flex;
  gap: 12px;
  min-width: min(330px, 75vw);
  max-width: 420px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #172033;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

html body .support-message.own .support-message-card {
  background: rgba(237, 255, 228, 0.94);
}

html body .support-message-card img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  background: #eef4f6;
}

html body .support-message-card span,
html body .support-message-card small,
html body .support-message-card strong,
html body .support-message-card em {
  display: block;
  min-width: 0;
}

html body .support-message-card small,
html body .support-message-card em {
  color: #657386;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

html body .support-message-card strong {
  margin: 4px 0;
  font-size: 15px;
  font-weight: 950;
}

html body .support-order-card {
  flex-direction: column;
}

html body .support-order-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

html body .support-card-sender,
html body .support-composer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.95);
}

html body .support-card-sender {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 24px;
}

html body .support-card-sender select,
html body .support-composer textarea {
  border: 1px solid rgba(0, 88, 184, 0.14);
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-weight: 800;
}

html body .support-card-sender select {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
}

html body .support-composer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: end;
  padding: 14px 22px;
}

html body .support-composer-tools {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 44px;
  color: #12223a;
  font-size: 23px;
  font-weight: 900;
}

html body .support-order-picker-toggle {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(0, 88, 184, 0.16);
  border-radius: 12px;
  color: #12223a;
  background: #fff;
  font-weight: 950;
  cursor: pointer;
}

html body .support-composer textarea {
  min-height: 44px;
  max-height: 128px;
  padding: 12px 14px;
  resize: none;
  outline: 0;
}

html body .support-composer .primary-link {
  width: 96px;
  min-height: 44px;
  padding-inline: 0;
  border: 0;
  cursor: pointer;
}

html body .support-order-picker {
  position: absolute;
  right: 126px;
  bottom: 82px;
  z-index: 4;
  width: min(390px, calc(100vw - 42px));
  max-height: min(420px, 54vh);
  overflow: hidden;
  border: 1px solid rgba(0, 88, 184, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
}

html body .support-order-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

html body .support-order-picker-head strong {
  font-size: 15px;
  font-weight: 950;
}

html body .support-order-picker-head button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #eef4f8;
  cursor: pointer;
}

html body .support-order-picker-list {
  display: flex;
  max-height: 348px;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}

html body .support-order-picker-list button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  background: #f8fbff;
  text-align: left;
  cursor: pointer;
}

html body .support-order-picker-list img,
html body .support-order-picker-list button > span:first-child {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: #eaf2f7;
}

html body .support-order-picker-list strong,
html body .support-order-picker-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .support-order-picker-list strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

html body .support-order-picker-list small {
  margin-top: 4px;
  color: #657386;
  font-size: 12px;
  font-weight: 800;
}

html body .support-order-picker-list em {
  color: #007d85;
  font-style: normal;
  font-weight: 950;
}

html body .floating-pet-shell.menu-opens-right .floating-pet-bubble {
  right: calc(100% + 10px) !important;
  left: auto !important;
  border-radius: 12px 12px 2px 12px !important;
}

html body .floating-pet-shell.menu-opens-left .floating-pet-bubble {
  right: auto !important;
  left: calc(100% + 10px) !important;
  border-radius: 12px 12px 12px 2px !important;
}

html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-bubble {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(100% + 10px) !important;
  max-width: 126px !important;
  text-align: left !important;
  border-radius: 12px 12px 12px 2px !important;
  transform: translateY(-50%) scale(0.96) !important;
}

html body .floating-pet-shell.is-nav-anchored.is-open.is-speaking .floating-pet-bubble {
  transform: translateY(-50%) scale(1) !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-closing .floating-pet-menu {
  background: transparent !important;
  box-shadow: none !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::before,
html body .floating-pet-shell.is-nav-anchored .floating-pet-menu::after,
html body .floating-pet-shell.is-nav-anchored .floating-pet-palette {
  display: none !important;
}

@media (max-width: 760px) {
  html body .support-page-main {
    padding: 12px;
  }

  html body .support-workspace {
    grid-template-columns: 1fr;
    height: calc(100vh - 116px);
    min-height: 0;
    width: 100%;
  }

  html body .support-room-list {
    max-height: 252px;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }

  html body .support-chat-stage {
    min-height: 0;
  }

  html body .support-chat-messages {
    padding: 18px 14px;
  }

  html body .support-message,
  html body .support-message.own {
    max-width: 94%;
  }

  html body .support-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html body .support-composer-tools {
    display: none;
  }

  html body .support-order-picker-toggle {
    grid-column: 1 / 2;
  }

  html body .support-composer textarea {
    grid-column: 1 / 2;
  }

  html body .support-composer .primary-link {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  html body .support-order-picker {
    right: 14px;
    bottom: 96px;
  }
}

/* Support page final layout overrides */
html body.support-page-body .support-workspace {
  grid-template-columns: minmax(260px, 348px) minmax(0, 1fr);
  height: min(820px, calc(100vh - 132px));
  border-radius: 20px;
  background: rgba(248, 252, 255, 0.96);
  box-shadow: 0 28px 72px rgba(16, 34, 58, 0.16);
}

html body.support-page-body .support-room-list {
  gap: 14px;
  background:
    linear-gradient(165deg, rgba(0, 141, 150, 0.14), transparent 34%),
    #eef6fa;
}

html body.support-page-body .support-room-owner {
  display: none;
}

html body.support-page-body .support-list-empty {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

html body.support-page-body .support-list-empty strong,
html body.support-page-body .support-list-empty span {
  display: block;
}

html body.support-page-body .support-room-item {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 76px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.54);
}

html body.support-page-body .support-room-item:hover,
html body.support-page-body .support-room-item.active {
  border-color: rgba(0, 88, 184, 0.14);
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 34, 58, 0.08);
}

html body.support-page-body .support-room-meta {
  grid-column: 2;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  text-align: left;
}

html body.support-page-body .support-chat-stage {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f7f9fb;
}

html body.support-page-body .support-chat-title {
  min-height: 86px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
}

html body.support-page-body .support-chat-actions .support-icon-link {
  width: auto;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
}

html body.support-page-body .support-order-head-button span {
  font-size: 12px;
}

html body.support-page-body .support-chat-messages {
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 141, 150, 0.05), transparent 34%),
    #f7f9fb;
  scrollbar-width: thin;
}

html body.support-page-body .support-message {
  grid-template-columns: 36px minmax(0, 620px);
  max-width: min(78%, 760px);
}

html body.support-page-body .support-message.own {
  grid-template-columns: minmax(0, 720px) 36px;
}

html body.support-page-body .support-message p {
  border-radius: 5px 16px 16px 16px;
  font-size: 15px;
}

html body.support-page-body .support-message.own p {
  border-radius: 16px 5px 16px 16px;
  background: linear-gradient(135deg, #c9f6b5, #a3eb7a);
}

html body.support-page-body .support-card-sender {
  display: none;
}

html body.support-page-body .support-composer {
  grid-template-columns: 112px minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: stretch;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -12px 34px rgba(16, 34, 58, 0.05);
}

html body.support-page-body .support-order-picker-toggle {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 76px;
  padding: 0 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #eef8fb);
}

html body.support-page-body .support-order-picker-toggle small,
html body.support-page-body .support-order-picker-toggle span {
  display: block;
  line-height: 1.2;
}

html body.support-page-body .support-order-picker-toggle small {
  color: #6e7e92;
  font-size: 12px;
}

html body.support-page-body .support-order-picker-toggle:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

html body.support-page-body .support-composer textarea {
  min-height: 76px;
  max-height: 168px;
  padding: 16px 18px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

html body.support-page-body .support-composer textarea:focus {
  border-color: rgba(0, 132, 145, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 132, 145, 0.1);
}

html body.support-page-body .support-composer .primary-link {
  width: 92px;
  min-height: 76px;
  border-radius: 16px;
}

html body.support-page-body .support-order-picker {
  right: 122px;
  bottom: 112px;
  width: min(520px, calc(100vw - 380px));
  max-height: min(480px, 58vh);
  border-radius: 20px;
}

html body.support-page-body .support-order-picker-head span {
  display: grid;
  gap: 4px;
}

html body.support-page-body .support-order-picker-head small,
html body.support-page-body .support-order-picker-empty span {
  color: #708094;
  font-size: 12px;
  font-weight: 800;
}

html body.support-page-body .support-order-picker-list {
  max-height: 390px;
}

html body.support-page-body .support-order-picker-list button {
  grid-template-columns: 58px minmax(0, 1fr) 52px;
  min-height: 78px;
  background: #fff;
}

html body.support-page-body .support-order-picker-list img,
html body.support-page-body .support-order-picker-list button > span:first-child {
  width: 58px;
  height: 58px;
}

html body.support-page-body .support-order-picker-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  color: #172033;
  text-align: center;
}

@media (max-width: 760px) {
  html body.support-page-body .support-workspace {
    grid-template-columns: 1fr;
    height: calc(100vh - 116px);
    width: 100%;
  }

  html body.support-page-body .support-composer {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  html body.support-page-body .support-order-picker-toggle {
    grid-column: 1 / -1;
    min-height: 46px;
  }

  html body.support-page-body .support-composer textarea {
    grid-column: 1;
    min-height: 66px;
  }

  html body.support-page-body .support-composer .primary-link {
    grid-column: 2;
    grid-row: 2;
    width: 76px;
    min-height: 66px;
  }

  html body.support-page-body .support-order-picker {
    right: 12px;
    bottom: 146px;
    width: calc(100vw - 24px);
  }
}

/* Support chat polish v142 */
html body.support-page-body .support-chat-messages {
  gap: 14px !important;
  padding: 28px clamp(22px, 4vw, 62px) 30px !important;
  background:
    radial-gradient(circle at 54% 10%, rgba(0, 141, 150, 0.055), transparent 34%),
    linear-gradient(180deg, #f9fbfd 0%, #f5f8fb 100%) !important;
}

html body.support-page-body .support-message,
html body.support-page-body .support-message.own,
html body.support-page-body .support-message.other {
  width: auto !important;
  max-width: min(76%, 680px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.support-page-body .support-message {
  display: grid !important;
  grid-template-columns: 32px minmax(0, max-content) !important;
  gap: 9px !important;
  align-items: end !important;
  align-self: flex-start !important;
}

html body.support-page-body .support-message.own {
  grid-template-columns: minmax(0, max-content) 32px !important;
  align-self: flex-end !important;
}

html body.support-page-body .support-message.own .support-message-avatar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html body.support-page-body .support-message.own .support-message-stack {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: flex-end !important;
}

html body.support-page-body .support-message-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  box-shadow: 0 10px 20px rgba(0, 86, 128, 0.16) !important;
}

html body.support-page-body .support-message-stack {
  display: flex !important;
  max-width: min(520px, 100%) !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 5px !important;
}

html body.support-page-body .support-message-stack > small {
  padding: 0 4px !important;
  color: #8a96a8 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html body.support-page-body .support-message-stack > p {
  width: fit-content !important;
  max-width: min(500px, 100%) !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 18px 18px 18px 6px !important;
  color: #162033 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.065) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.48 !important;
}

html body.support-page-body .support-message.own .support-message-stack > p {
  border-color: transparent !important;
  border-radius: 18px 18px 6px 18px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1e4da8 0%, #067e94 100%) !important;
  box-shadow: 0 12px 26px rgba(0, 88, 184, 0.18) !important;
}

html body.support-page-body .support-message-card {
  width: min(360px, 74vw) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 11px !important;
  border: 1px solid rgba(0, 88, 184, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
}

html body.support-page-body .support-message.own .support-message-card {
  background: #f7fcff !important;
}

html body.support-page-body .support-message-card img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
}

html body.support-page-body .support-message-card small,
html body.support-page-body .support-message-card em {
  color: #708094 !important;
  font-size: 11px !important;
}

html body.support-page-body .support-message-card strong {
  color: #162033 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

html body.support-page-body .support-order-card div {
  display: grid !important;
  gap: 8px !important;
}

html body.support-page-body .support-order-card p {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 13px !important;
  color: #172033 !important;
  background: #f8fbfd !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

html body.support-page-body .support-order-card p img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

html body.support-page-body .support-composer {
  grid-template-columns: 116px minmax(360px, 1fr) 86px !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 13px 16px !important;
}

html body.support-page-body .support-order-picker-toggle {
  min-height: 64px !important;
  border-radius: 15px !important;
  background: #fff !important;
}

html body.support-page-body .support-composer textarea {
  min-height: 64px !important;
  max-height: 156px !important;
  padding: 14px 16px !important;
}

html body.support-page-body .support-composer .primary-link {
  width: 86px !important;
  min-height: 64px !important;
  border-radius: 15px !important;
}

html body.support-page-body .support-order-picker[hidden] {
  display: none !important;
}

html body.support-page-body .support-order-picker {
  position: fixed !important;
  left: clamp(340px, 30vw, 520px) !important;
  right: clamp(28px, 4vw, 64px) !important;
  bottom: 98px !important;
  z-index: 180 !important;
  width: auto !important;
  max-height: min(500px, 58vh) !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 28px 70px rgba(16, 34, 58, 0.22) !important;
}

html body.support-page-body .support-order-picker-list button {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

html body.support-page-body .support-order-picker-list button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 132, 145, 0.34) !important;
  box-shadow: 0 12px 28px rgba(0, 88, 184, 0.12) !important;
}

@media (max-width: 760px) {
  html body.support-page-body .support-message,
  html body.support-page-body .support-message.own,
  html body.support-page-body .support-message.other {
    max-width: 92% !important;
  }

  html body.support-page-body .support-composer {
    grid-template-columns: 1fr 72px !important;
  }

  html body.support-page-body .support-order-picker-toggle {
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
  }

  html body.support-page-body .support-order-picker {
    left: 12px !important;
    right: 12px !important;
    bottom: 132px !important;
  }
}

/* Floating pet speech and menu feel v142 */
html body .floating-pet-bubble {
  top: auto !important;
  bottom: 8px !important;
  display: inline-block !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 118px)) !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(0, 88, 184, 0.14) !important;
  border-radius: 18px !important;
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 44px rgba(16, 34, 58, 0.13) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  white-space: normal !important;
  word-break: break-word !important;
  transform: translateY(8px) scale(0.97) !important;
}

html body .floating-pet-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: 15px !important;
  width: 14px !important;
  height: 14px !important;
  border-right: 1px solid rgba(0, 88, 184, 0.14) !important;
  border-bottom: 1px solid rgba(0, 88, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  transform: rotate(-45deg) !important;
}

html body .floating-pet-shell.menu-opens-right .floating-pet-bubble {
  right: auto !important;
  left: calc(100% + 14px) !important;
  border-radius: 18px 18px 18px 6px !important;
  transform-origin: left bottom !important;
}

html body .floating-pet-shell.menu-opens-right .floating-pet-bubble::after {
  left: -7px !important;
  right: auto !important;
  transform: rotate(135deg) !important;
}

html body .floating-pet-shell.menu-opens-left .floating-pet-bubble {
  right: calc(100% + 14px) !important;
  left: auto !important;
  border-radius: 18px 18px 6px 18px !important;
  transform-origin: right bottom !important;
}

html body .floating-pet-shell.menu-opens-left .floating-pet-bubble::after {
  right: -7px !important;
  left: auto !important;
  transform: rotate(-45deg) !important;
}

html body .floating-pet-shell.is-speaking .floating-pet-bubble {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

html body .floating-pet-shell.is-open .floating-pet-bubble {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.94) !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-closing .floating-pet-menu {
  cursor: grab !important;
  touch-action: none !important;
}

html body .floating-pet-shell.is-nav-anchored.is-menu-dragging .floating-pet-menu {
  cursor: grabbing !important;
}

html body .floating-pet-shell.is-menu-dragging .floating-pet-action {
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

@media (max-width: 760px) {
  html body .floating-pet-bubble {
    max-width: min(280px, calc(100vw - 94px)) !important;
    padding: 10px 13px !important;
    font-size: 13px !important;
  }
}

/* Final support composer state fix v143 */
html body.support-page-body .support-composer {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) 86px !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

html body.support-page-body .support-composer:not(:has(.support-order-picker-toggle:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr) 86px !important;
}

html body.support-page-body .support-composer:not(:has(.support-order-picker-toggle:not([hidden]))) textarea {
  grid-column: 1 !important;
}

html body.support-page-body .support-composer:not(:has(.support-order-picker-toggle:not([hidden]))) .primary-link {
  grid-column: 2 !important;
}

html body.support-page-body .support-composer textarea {
  width: 100% !important;
  min-width: 0 !important;
  resize: none !important;
}

html body.support-page-body .support-composer .primary-link {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  padding-inline: 0 !important;
}

@media (max-width: 760px) {
  html body.support-page-body .support-composer,
  html body.support-page-body .support-composer:not(:has(.support-order-picker-toggle:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }

  html body.support-page-body .support-composer .support-order-picker-toggle {
    grid-column: 1 / -1 !important;
  }

  html body.support-page-body .support-composer .primary-link {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* Apple-inspired compact navigation, while keeping the large search bar. */
html body .site-header {
  min-height: 58px !important;
  height: 58px !important;
  max-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 240px) minmax(420px, 760px) minmax(300px, auto) !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
  padding: 0 clamp(18px, 4vw, 72px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

html body .site-header::before,
html body .site-header::after {
  display: none !important;
}

html body .brand {
  min-height: 44px !important;
  padding: 0 !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .brand-mark,
html body .brand-mark img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body .brand strong {
  color: #1d1d1f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body .brand small {
  color: #6e6e73 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body .nav-search {
  width: min(100%, 720px) !important;
  height: 42px !important;
  grid-template-columns: minmax(0, 1fr) 34px 34px !important;
  gap: 4px !important;
  padding: 3px 4px 3px 16px !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body .nav-search:focus-within {
  border-color: #86868b !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12) !important;
}

html body .nav-search input {
  color: #1d1d1f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body .nav-search-submit,
html body .nav-filter-toggle,
html body .nav-search-clear {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #1d1d1f !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .nav-search-submit:hover,
html body .nav-filter-toggle:hover,
html body .nav-search-clear:hover,
html body .nav-search-submit:focus-visible,
html body .nav-filter-toggle:focus-visible,
html body .nav-search-clear:focus-visible {
  background: rgba(0, 0, 0, 0.06) !important;
}

html body .nav-search-submit span {
  font-size: 22px !important;
  transform: translateY(-1px);
}

html body .nav-filter-toggle span {
  border-top-width: 6px !important;
  border-right-width: 5px !important;
  border-left-width: 5px !important;
}

html body .header-actions {
  justify-content: end !important;
  gap: 4px !important;
}

html body .header-actions > button,
html body .cart-button,
html body .dev-button,
html body .language-button,
html body .account-button,
html body .logout-button {
  position: relative !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #1d1d1f !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

html body .header-actions > button:hover,
html body .header-actions > button:focus-visible {
  color: #000 !important;
  background: transparent !important;
  transform: none !important;
}

html body .site-header .header-actions > button,
html body .site-header .header-actions > button:focus,
html body .site-header .header-actions > button:focus-visible,
html body .site-header .header-actions > button:active {
  outline: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .header-actions > button::after {
  content: "" !important;
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  bottom: -2px !important;
  left: 10px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #0a66d8 !important;
  opacity: 0 !important;
  transform: scaleX(0.34) !important;
  transform-origin: center !important;
  transition:
    opacity 160ms ease,
    transform 180ms ease !important;
}

html body .brand::after {
  display: none !important;
  content: none !important;
}

html body .header-actions > button:hover::after,
html body .header-actions > button:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

html body .nav-search-submit:hover,
html body .nav-filter-toggle:hover,
html body .nav-search-clear:hover,
html body .nav-search-submit:focus-visible,
html body .nav-filter-toggle:focus-visible,
html body .nav-search-clear:focus-visible {
  color: #0a66d8 !important;
  background: transparent !important;
}

html body .dev-button {
  color: #06c !important;
}

html body .cart-button {
  gap: 6px !important;
}

html body .cart-button strong,
html body [data-cart-count] {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #1d1d1f !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

html body .dev-product-language-toggle {
  justify-self: end;
  align-self: start;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 999px !important;
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

html body .dev-form-heading {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

html body .dev-form-heading-copy {
  display: grid;
  gap: 6px;
}

html body .dev-category-tag {
  display: grid !important;
  grid-template-columns: minmax(72px, 1fr) minmax(120px, 1.4fr) auto auto;
  align-items: center !important;
  gap: 8px !important;
}

html body .dev-category-tag input[data-category-english-input] {
  min-height: 34px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
}

@media (max-width: 980px) {
  html body .site-header {
    grid-template-columns: minmax(150px, auto) minmax(260px, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  html body .brand small,
  html body .logout-button,
  html body .cart-button span:nth-child(2) {
    display: none !important;
  }

  html body .nav-search {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  html body .site-header {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "search search" !important;
    padding: 8px 12px 10px !important;
  }

  html body .brand {
    grid-area: brand;
  }

  html body .header-actions {
    grid-area: actions;
  }

  html body .nav-search {
    grid-area: search;
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Final pet interaction fix: keep the nav pet inside the header and avoid menu click shields. */
html body .floating-pet-shell.is-nav-anchored {
  width: 52px !important;
  height: 52px !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-button {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-button .auth-eye-toy__face {
  border-radius: 18px !important;
}

html body .floating-pet-shell.is-nav-anchored .floating-pet-button .auth-eye-toy__eye {
  top: 12px !important;
  width: 34px !important;
  height: 24px !important;
}

html body .floating-pet-shell.is-open .floating-pet-menu,
html body .floating-pet-shell.is-nav-anchored.is-open .floating-pet-menu {
  pointer-events: none !important;
}

html body .floating-pet-shell.is-open .floating-pet-action {
  pointer-events: auto !important;
}

html body .floating-pet-palette,
html body .floating-pet-menu::before,
html body .floating-pet-menu::after {
  pointer-events: none !important;
}

/* Final filter bar fix: dock directly under the header and remove the side close icon. */
html body .catalog-tools,
html body .catalog-tools:hover,
html body .catalog-tools:focus-within,
html body .catalog-tools.is-docked,
html body.filter-tools-docked .catalog-tools,
html body.filter-tools-docked .catalog-tools:hover,
html body.filter-tools-docked .catalog-tools:focus-within,
html body.filter-tools-docked .catalog-tools.is-docked,
html body.filter-tools-compressed .catalog-tools,
html body.filter-tools-compressed .catalog-tools.is-docked {
  position: fixed !important;
  top: 58px !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 890 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px clamp(24px, 5vw, 76px) 14px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
  background: rgba(248, 252, 255, 0.98) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}

html body .filter-panel-head {
  justify-content: flex-start !important;
}

html body .filter-panel-head button,
html body [data-close-filters] {
  display: none !important;
}

html body .catalog-tools[hidden] {
  display: none !important;
}

/* Final header fit override: this must stay after all compact-nav rules. */
@media (min-width: 761px) {
  html body .site-header {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  html body .catalog-tools,
  html body .catalog-tools:hover,
  html body .catalog-tools:focus-within,
  html body .catalog-tools.is-docked,
  html body.filter-tools-docked .catalog-tools,
  html body.filter-tools-docked .catalog-tools:hover,
  html body.filter-tools-docked .catalog-tools:focus-within,
  html body.filter-tools-docked .catalog-tools.is-docked,
  html body.filter-tools-compressed .catalog-tools,
  html body.filter-tools-compressed .catalog-tools.is-docked {
    top: 68px !important;
  }
}