@import url("./styles.vars.generated.css");

/* Лёгкий глобальный спиннер used in place of text 'Загрузка' */
.ui-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgb(0 0 0 / 12%);
  border-top-color: rgb(0 0 0 / 50%);
  animation: ui-spin 0.9s linear infinite;
  vertical-align: middle;
}

.ui-spinner.light {
  border: 2px solid rgb(255 255 255 / 14%);
  border-top-color: rgb(255 255 255 / 90%);
}
.ui-spinner.small { width: 14px; height: 14px; border-width: 1.6px; }
.ui-spinner.medium { width: 22px; height: 22px; border-width: 2.2px; }
.ui-spinner-wrapper { display: inline-flex; align-items: center; gap:8px; }

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* App logo placement */
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.app-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  display: inline-block;
}

.app-logo .brand-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* Clickable logo link styles */
.app-logo-link { display:inline-block; border-radius:8px; overflow:hidden; }
.app-logo-link:focus { outline: 3px solid rgb(34 150 243 / 18%); outline-offset: 2px; }
.app-logo-link img { transition: transform .12s ease; }
.app-logo-link:hover img { transform: scale(1.04); }

@media (min-width: 1024px) {
  .app-logo img { width: 56px; height: 56px; }
}


/* iOS 2025 Inspired Light/Dark Design System */

/* Weather widget styles - перенесено из JS в CSS */
.weather-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: .95;
  user-select: none;
}

.weather-summary-initialized .weather-summary { 
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
}

.weather-summary-pad { 
  position: relative;
  pointer-events: none;
  background: transparent;
  padding: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-summary-emoji { 
  font-size: 42px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.weather-summary-temp-overlay { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  color: rgb(255 255 255);
  background: #000000d6;
  border-radius: 3px;
  padding: 1px;
  border: 1px solid rgb(255 255 255);
}

/* ========================================
   WEATHER WIDGET V2 - Clean positioning
   ======================================== */

#weather-widget-v2 {
  position: fixed;
  z-index: 2147483647;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, Arial, sans-serif;
  user-select: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  
  /* Desktop positioning */
  right: 20px;
  bottom: 20px;
  width: 320px;
  
  /* Visual styling */
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 6%));
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 10px 30px rgb(11 20 30 / 28%);
  color: #071428;
  overflow: hidden;
  box-sizing: border-box;
}

#weather-widget-v2.dark {
  background: linear-gradient(180deg, rgb(10 10 10 / 52%), rgb(10 10 10 / 36%));
  border: 1px solid rgb(255 255 255 / 6%);
  color: #f5f7fb;
  box-shadow: 0 12px 40px rgb(0 0 0 / 60%);
}

#weather-widget-v2 *, #weather-widget-v2 *::before, #weather-widget-v2 *::after {
  box-sizing: border-box;
}

/* Layout */
#weather-widget-v2 .top { display: flex; align-items: center; gap: 12px; }
#weather-widget-v2 .top > div { min-width: 0; }

#weather-widget-v2 .icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  flex: 0 0 72px;
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#weather-widget-v2.dark .icon { background: rgb(255 255 255 / 4%); }
#weather-widget-v2 .icon svg { width: 46px; height: 46px; opacity: 0.95; }
#weather-widget-v2 .icon .weather-icon-emoji { font-size: 46px; line-height: 1; }

#weather-widget-v2 .temp { font-size: 44px; font-weight: 700; line-height: 1; color: inherit; }
#weather-widget-v2 .location { font-size: 13px; opacity: 0.9; margin-top: 2px; color: inherit; }
#weather-widget-v2 .desc { font-size: 14px; margin-top: 8px; opacity: 0.92; }

#weather-widget-v2 .meta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-flow: column wrap;
  margin-top: 8px;
}

#weather-widget-v2 .meta .meta-item {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}

#weather-widget-v2 .meta .meta-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#weather-widget-v2 .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
}

#weather-widget-v2 .controls {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 2px;
  justify-content: flex-end;
}

#weather-widget-v2 .controls .close-btn,
#weather-widget-v2 .controls .theme-btn,
#weather-widget-v2 .controls .city-btn,
#weather-widget-v2 .controls .expand-btn,
#weather-widget-v2 .controls .seedling-btn,
#weather-widget-v2 .controls .calendar-btn {
  width: 40px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgb(0 0 0 / 6%);
  font-size: 14px;
  border: none;
  outline: none;
  color: inherit;
  transition: background 0.18s, transform 0.12s, box-shadow 0.12s;
  backdrop-filter: blur(6px);
}

#weather-widget-v2 .controls .city-btn { font-size: 16px; }
#weather-widget-v2 .controls .expand-btn { padding-top: 2px; }

#weather-widget-v2 .controls .close-btn:hover,
#weather-widget-v2 .controls .theme-btn:hover,
#weather-widget-v2 .controls .city-btn:hover,
#weather-widget-v2 .controls .expand-btn:hover,
#weather-widget-v2 .controls .seedling-btn:hover,
#weather-widget-v2 .controls .calendar-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: rgb(0 0 0 / 10%);
}

#weather-widget-v2.dark .controls .close-btn,
#weather-widget-v2.dark .controls .theme-btn,
#weather-widget-v2.dark .controls .city-btn,
#weather-widget-v2.dark .controls .expand-btn,
#weather-widget-v2.dark .controls .calendar-btn {
  background: rgb(255 255 255 / 4%);
}

#weather-widget-v2 .controls svg { width: 18px; height: 18px; display: block; }
#weather-widget-v2 .controls div:focus-visible { outline: 2px solid rgb(100 150 255 / 18%); outline-offset: 2px; border-radius: 10px; }

#weather-widget-v2 .expand-btn svg { transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
#weather-widget-v2 .expand-btn.expanded svg { transform: rotate(180deg); }

#weather-widget-v2 .forecast {
  margin-top: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(255 255 255 / 2%), transparent);
  padding: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#weather-widget-v2 .forecast .f-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  margin: 6px 0;
  background: transparent;
}

#weather-widget-v2 .forecast .f-day + .f-day { border-top: 0; }
#weather-widget-v2 .f-day .date { min-width: 80px; font-size: 13px; opacity: 0.9; }
#weather-widget-v2 .f-day .vals { display: flex; gap: 10px; align-items: center; }

/* Mobile/Tablet - responsive для уменьшенного окна браузера */
@media (max-width: 768px) {
  #weather-widget-v2 {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 12px;
    border-radius: 12px;
  }
  
  #weather-widget-v2 .temp { font-size: 40px; }
  #weather-widget-v2 .forecast { max-height: 48vh; }
  #weather-widget-v2 .f-day { padding: 8px; }
}

/* Реальные мобильные устройства - iOS/Android смартфоны */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
  #weather-widget-v2 {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;

    /* Для Telegram WebApp */
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
  
  #weather-widget-v2 .top {
    gap: 10px;
  }
  
  #weather-widget-v2 .icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    flex: 0 0 68px;
    border-radius: 12px;
  }
  
  #weather-widget-v2 .icon svg,
  #weather-widget-v2 .icon .weather-icon-emoji {
    width: 44px;
    height: 44px;
    font-size: 44px;
  }
  
  #weather-widget-v2 .temp {
    font-size: 38px;
  }
  
  #weather-widget-v2 .location {
    font-size: 12px;
  }
  
  #weather-widget-v2 .desc {
    font-size: 13px;
  }
  
  #weather-widget-v2 .meta {
    font-size: 12px;
    gap: 10px;
  }
  
  #weather-widget-v2 .controls {
    gap: 6px;
  }
  
  #weather-widget-v2 .controls .close-btn,
  #weather-widget-v2 .controls .theme-btn,
  #weather-widget-v2 .controls .city-btn,
  #weather-widget-v2 .controls .expand-btn,
  #weather-widget-v2 .controls .seedling-btn,
  #weather-widget-v2 .controls .calendar-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;

    /* Убираем hover эффекты на touch устройствах */
    -webkit-tap-highlight-color: transparent;
  }
  
  #weather-widget-v2 .controls .close-btn:active,
  #weather-widget-v2 .controls .theme-btn:active,
  #weather-widget-v2 .controls .city-btn:active,
  #weather-widget-v2 .controls .expand-btn:active,
  #weather-widget-v2 .controls .seedling-btn:active,
  #weather-widget-v2 .controls .calendar-btn:active {
    transform: scale(0.95);
    background: rgb(0 0 0 / 12%);
  }
  
  #weather-widget-v2.dark .controls .close-btn:active,
  #weather-widget-v2.dark .controls .theme-btn:active,
  #weather-widget-v2.dark .controls .city-btn:active,
  #weather-widget-v2.dark .controls .expand-btn:active,
  #weather-widget-v2.dark .controls .calendar-btn:active {
    background: rgb(255 255 255 / 8%);
  }
  
  #weather-widget-v2 .forecast {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 8px;
  }
  
  #weather-widget-v2 .f-day {
    padding: 10px 8px;
    margin: 4px 0;
  }
  
  #weather-widget-v2 .f-day .date {
    font-size: 13px;
  }
  
  #weather-widget-v2 .f-day .vals {
    gap: 12px;
  }
}

/* Очень маленькие экраны (старые iPhone SE и т.д.) */
@media (max-width: 360px) {
  #weather-widget-v2 {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 10px;
    border-radius: 12px;
  }
  
  #weather-widget-v2 .temp { font-size: 34px; }
  #weather-widget-v2 .meta { font-size: 11px; }
  #weather-widget-v2 .icon { width: 60px; height: 60px; min-width: 60px; flex: 0 0 60px; }
  #weather-widget-v2 .icon svg { width: 38px; height: 38px; }
  #weather-widget-v2 .icon .weather-icon-emoji { font-size: 38px; }
  
  #weather-widget-v2 .controls .close-btn,
  #weather-widget-v2 .controls .theme-btn,
  #weather-widget-v2 .controls .city-btn,
  #weather-widget-v2 .controls .expand-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

:root {
  /* Utility for small captions used by AI assistant */
  .ai-bot-caption { opacity: 0.7; display: block; }
  .ai-bot-caption .icon { width: 16px; height: 16px; vertical-align: middle; }
  
  --bg: #f6f9f6;
  --bg-secondary: #fff;
  --bg-rgb: 246, 249, 246;
  --glass-color: rgb(255 255 255 / 65%);
  --glass-blur: 28px;
  --glass-border: rgb(255 255 255 / 40%);
  --text: #101010;
  --text-secondary: #4a4a4a;
  --accent: #ff5163;
  --light-accent:#8BC34A;
  --accent-rgb: 255,107,129;
  --accent-gradient: linear-gradient(135deg,#ff6b81,#ff4757);
  --danger: #ef4444;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 4px 16px rgb(0 0 0 / 5%);
  --shadow-pop: 0 14px 40px rgb(0 0 0 / 14%);
  --border-color: rgb(0 0 0 / 6%);
  --transition: .45s cubic-bezier(.34,1.56,.64,1);
  --focus-ring: 0 0 0 4px rgb(var(--accent-rgb) 0.25);

  /* Favorite Animation Variables */

  /* Favorite Animation Variables (moved to .favorite-btn scope) */
  --scrollbar: rgb(255 107 129 / 40%);

  /* Spinner Variables for iOS 2025 Glass Morphism */
  --spinner-size: 16px;
  --spinner-border-width: 2px;
  --spinner-border-color: rgb(0 0 0 / 8%);
  --spinner-color: var(--accent);

  /* Optimized repeated values */
  --shadow-overlay: rgb(0 0 0 / 12%);
  --bg-semi-transparent: rgb(255 255 255 / 95%);
  --shadow-card: 0 6px 18px var(--shadow-overlay);
  --bg-glass-overlay: rgb(255 255 255 / 65%);
  --border-subtle: rgb(0 0 0 / 6%);

 
}

:root[data-theme='dark'] {
  --bg: #080b09;
  --bg-secondary: #0f1211;
  --bg-rgb: 8, 11, 9;
  --glass-color: rgb(20 20 22 / 72%);
  --glass-blur: 30px;
  --glass-border: rgb(255 255 255 / 12%);
  --text: #f5f7f6;
  --text-secondary: #b5b9b7;
  --accent: #0A84FF;
  --accent-rgb: 10,132,255;
  --accent-gradient: linear-gradient(135deg,#0A84FF,#007AFF);
  --danger: #f87171;
  --border-color: rgb(255 255 255 / 10%);
  --scrollbar: rgb(10 132 255 / 45%);

  /* Spinner Variables for iOS 2025 Glass Morphism */
  --spinner-size: 18px;
  --spinner-border-width: 2px;
  --spinner-border-color: rgb(255 255 255 / 12%);
  --spinner-color: var(--accent);
}

/* Toast notification styles */
  
.spinner-border, .spinner-border-sm{
  display:inline-block;vertical-align:text-bottom;border-style:solid;border-radius:50%;border-width:var(--spinner-border-width);width:var(--spinner-size);height:var(--spinner-size);border-color:var(--spinner-border-color);border-top-color:var(--spinner-color);animation:spinner-rotate .8s linear infinite}
.spinner-border-sm{width:calc(var(--spinner-size) * 0.72);height:calc(var(--spinner-size) * 0.72);border-width:calc(var(--spinner-border-width) * 0.8)}

@keyframes spinner-rotate{to{transform:rotate(360deg)}}

/* Compact catalog view styles */
.product-card.compact {
  padding: 12px;
  margin-bottom: 12px;
}

.product-card.compact .card-title {
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.product-card.compact .card-text {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.product-card.compact img {
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.product-card.compact .favorite-btn {
  width: 32px !important;
  height: 32px !important;
  top: 8px !important;
  right: 8px !important;
}

.product-card.compact .favorite-btn .hearth,
.product-card.compact .favorite-btn .drop {
  width: 16px !important;
  height: 16px !important;
}

.product-card.compact .cart-glass-btn {
  min-width: 0;
}

.product-card.compact .cart-glass-btn span {
  padding: 8px 12px;
  font-size: 13px;
  gap: 4px;
}

@media (max-width: 375px) {
  .product-card.compact .cart-glass-btn span {
    padding: 6px 8px;
    font-size: 11px;
  }
}

.product-card.compact .stock-badge {
  font-size: 0.8rem;
  padding: 2px 6px;
}
#floating-toast-container{position:fixed;top:calc(18px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);z-index:10050;pointer-events:none;display:flex;flex-direction:column;gap:12px;align-items:center;width:calc(100% - 40px);max-width:640px}
#floating-toast-container .toast-item{pointer-events:auto}
#floating-toast-container .toast-notification{pointer-events:auto; background: rgb(255 255 255 / 90%); border-radius: 14px; box-shadow: 0 14px 40px rgb(6 12 30 / 28%); color: #000; padding: 12px 18px; font-weight: 600; text-align: center; max-width: 100%; transform: translateY(-12px) scale(.985); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease; font-size: 15px; }

/* Bootstrap overrides for dark theme */
[data-theme='dark'] .text-muted {
  color: rgb(245 247 246 / 90%) !important;
}

[data-theme='calm'] .text-muted {
  color: rgb(51 51 51 / 70%) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: .15s linear; }
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, sans-serif;
  background-image: linear-gradient(
    to bottom,
    #d16ba5,
    #e17497,
    #eb828b,
    #ee9183,
    #eda280,
    #f1ad7d,
    #f3b97b,
    #f3c67b,
    #FFEB3B,
    #fbdf6b,
    #fff,
    #a9a9a9
  );
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  overflow-x: hidden;
  transition: background .6s ease, color .6s ease;
  min-height: 100vh;
}

[data-theme='dark'] body {
  background-image: linear-gradient(
    to bottom,
    #2d1b3d,
    #3d2550,
    #4d3063,
    #5d3b76,
    #6d4689,
    #7d519c,
    #8d5caf,
    #9d67c2,
    #ad72d5,
    #6c6c6c,
    #444,
    #c3c3c3fa
  );
}

[data-theme='calm'] body {
  background-image: linear-gradient(
    to bottom,
    #f5f5f5,
    #fff,
    #f0f0f0
  );

  --accent: rgb(74 149 195);
}

/* iOS Glass Morphism Effect */
.glass {
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-soft),
    0 0 1px 0 rgb(255 255 255 / 40%) inset;
  position: relative;
}

.glass::after { /* iOS-style inner highlight */
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 30%),
    inset 0 -1px 1px rgb(0 0 0 / 10%);
  opacity:.5;
}

[data-theme='dark'] .glass::after {
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 15%),
    inset 0 -1px 1px rgb(0 0 0 / 30%);
}

[data-theme='calm'] .glass::after {
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 40%),
    inset 0 -1px 1px rgb(0 0 0 / 5%);
}

/* Unified iOS-2025 Liquid Modal Styles (search + privacy) */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(18px) saturate(160%);
  z-index: 2500;
}
.modal-overlay.d-none { display: none; }

.modal-card {
  width: min(94%, 720px);
  max-width: 760px;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 12px 48px rgb(0 0 0 / 16%);
  background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-border) 85%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
  transform-origin: center;
  overflow: hidden;
}
.modal-card.search-modal { max-width: 520px; padding: 14px; border-radius: 20px; }
.modal-card.privacy-modal { max-width: 700px; padding: 20px; border-radius: 20px; }

/* Liquid inner highlight */
.modal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 28%), inset 0 -6px 30px rgb(0 0 0 / 6%);
  mix-blend-mode: overlay;
  opacity: .85;
}

/* Modal internal styles */
.auth-modal-icon { margin-bottom: 24px; }
.auth-modal-text { color: var(--text-secondary); }
.auth-modal-btn { border-radius: 30px; }

/* Auth modal specific styles for theme compatibility */
#auth-modal h3,
#auth-modal p,
#auth-modal .text-secondary {
  color: var(--text) !important;
}

#auth-modal .glass {
  background: var(--glass-color);
}
.review-modal-header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.review-modal-icon { width: 28px; height: 28px; color: var(--accent); }
.review-modal-subtitle { font-size: 13px; color: var(--text-secondary); }
.review-modal-content { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.review-modal-footer { display: flex; justify-content: center; margin-top: 10px; }
.review-modal-close-btn { border-radius: 14px; padding: 10px 18px; }
.cart-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-modal-title { margin: 0; }
.cart-modal-svg { vertical-align: middle; margin-right: 8px; color: var(--accent); }
.cart-modal-controls { display: flex; gap: 8px; align-items: center; }
.cart-modal-table-wrapper { overflow: auto; }
.cart-modal-table { min-height: 80px; }
.cart-modal-footer { flex-shrink: 0; margin-top: 12px; }
.cart-modal-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cart-modal-total-label { font-weight: 700; }
.cart-modal-total-value { font-weight: 700; color: var(--accent); }
.cart-modal-actions { display: flex; gap: 10px; }
.cart-modal-btn { border-radius: 30px; }
.cart-page { padding: 20px; min-height: 100vh; background: var(--bg); }
.cart-page-card { max-width: 600px; margin: 0 auto; }
.cart-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-page-title { margin: 0; flex: 1; text-align: center; }
.btn-back { background: none; border: none; color: var(--text); padding: 8px; border-radius: 50%; }
.cart-page-controls { display: flex; gap: 8px; align-items: center; }
.cart-page-table-wrapper { overflow: auto; }
.cart-page-table { min-height: 80px; }
.cart-page-footer { flex-shrink: 0; margin-top: 12px; }
.cart-page-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cart-page-total-label { font-weight: 700; }
.cart-page-total-value { font-weight: 700; color: var(--accent); }
.cart-page-actions { display: flex; gap: 10px; }
.cart-page-btn { border-radius: 30px; }
.privacy-modal-title { font-size: 22px; margin-bottom: 20px; color: var(--text); }
.privacy-modal-body { line-height: 1.7; font-size: 15px; max-height: calc(80vh - 140px); overflow-y: auto; }
.privacy-modal-btn { border-radius: 30px; padding: 12px; }
.ai-chat-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
.ai-chat-modal-title { margin: 0; }
.ai-chat-modal-messages { margin-bottom: 12px; flex-grow: 1; overflow: hidden auto; max-height: calc(80vh - 200px); -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; }
.ai-chat-modal-input-container { flex-shrink: 0; position: relative; width: 100%; padding: 14px 18px; background: var(--glass-color); backdrop-filter: blur(var(--glass-blur)) saturate(180%); border-radius: 40px; box-shadow: var(--shadow-pop), 0 1px 0 0 rgb(255 255 255 / 30%) inset, 0 -1px 0 0 rgb(0 0 0 / 10%) inset; display: flex; align-items: center; gap: 14px; border: 1px solid var(--glass-border); }
.ai-chat-modal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); }
.seedling-gallery-modal-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.seedling-gallery-modal-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow: auto; padding-bottom: 8px; }

/* Seedling thumbnails: improved UX for mobile (horizontal scroll) and desktop (grid) */
.seedling-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 6px;
  align-items: center;
  width: 100%;
}
.seedling-container::-webkit-scrollbar { height: 8px; }
.seedling-container::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 12%); border-radius: 8px; }

@media (min-width: 900px) {
  .seedling-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; overflow: visible; }
}

/* Favorites grid/card styles */
.favorite-card-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.fav-thumb-grid {
  width: 120px;
  min-width: 120px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb,var(--bg) 85%, transparent), color-mix(in srgb,var(--bg-secondary) 92%, transparent));
}
.fav-thumb-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-body-grid { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-left: 6px; }
.fav-title { font-weight: 600; color: var(--text); line-height: 1.2; }
.fav-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fav-actions { display: flex; gap: 8px; align-items: center; }

/* CSS-only image fallback: use when real image unavailable */
.thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb,var(--bg) 92%, transparent), color-mix(in srgb,var(--bg-secondary) 92%, transparent));
  color: color-mix(in srgb,var(--text) 60%, transparent);
  font-size: 20px;
  border-radius: inherit;
}

.seedling-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 72px;
  min-height: 72px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
  transition: transform .14s ease, box-shadow .14s ease;
}
.seedling-btn:active { transform: scale(.98); }
.seedling-btn:focus { outline: none; box-shadow: 0 0 0 4px rgb(var(--accent-rgb) 0.14); }

.seedling-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 768px) {
  .seedling-btn { min-width: 96px; min-height: 96px; border-radius: 14px; }
}

/* Tooltip styling moved to centralized OS2025 glass styles (iOS-like frosted glass) */
.weather-btn {
  position: fixed;
  top: 25px;
  right: 183px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-color);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft), 0 1px 0 0 rgb(255 255 255 / 30%) inset;
  z-index: 40000;
  pointer-events: auto;
  cursor: pointer;
  transition: background .4s, transform var(--transition), box-shadow .3s ease;
}

[data-theme='calm'] .weather-btn {
  background: rgb(74 149 195);
  box-shadow: 0 1px 0 0 rgb(139 115 115 / 30%) inset, 0 -1px 0 0 rgb(0 0 0 / 10%) inset;
}

/* Input and results */
.modal-search-input, #search-modal-input {
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
  outline: none;
}
.modal-search-input::placeholder { color: var(--text-secondary); }
.modal-hint { font-size:13px; color: var(--text-secondary); margin-top:8px; }
.modal-results { max-height:360px; overflow-y:auto; margin-top:12px; padding-right:6px; border-radius:12px; }
.modal-results .result-row { border-radius:12px; padding:8px; transition: background .18s ease; }
.modal-results .result-row:hover { background: color-mix(in srgb, var(--bg) 88%, var(--accent) 2%); }
.modal-results .title { font-weight:700; font-size:15px; color: var(--text); }
.modal-results .meta { font-size:13px; color: var(--text-secondary); margin-top:6px; }

/* Debug panel for runtime diagnostics (temporary) */
#dev-debug-panel { position: fixed; right: 12px; bottom: 12px; width: 340px; max-width: calc(100% - 24px); background: color-mix(in srgb, var(--bg-secondary) 92%, transparent); border: 1px solid rgb(0 0 0 / 6%); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 12%); z-index: 12000; font-size: 13px; color: var(--text); }
#dev-debug-panel .hdr { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; gap:8px; }
#dev-debug-panel .hdr .title { font-weight:700; font-size:13px; }
#dev-debug-panel .hdr button { background:transparent;border:0;color:var(--accent);cursor:pointer;font-weight:700 }
#dev-debug-panel .body { padding:8px 10px; max-height:280px; overflow:auto; border-top:1px solid rgb(0 0 0 / 4%); }
#dev-debug-panel .row { margin-bottom:8px; }
#dev-debug-panel input[type="text"]{ width:100%; padding:6px 8px; border-radius:6px; border:1px solid rgb(0 0 0 / 8%); background:transparent; color:var(--text); }
#dev-debug-panel pre{ background: rgb(0 0 0 / 3%); padding:8px; border-radius:6px; max-height:140px; overflow:auto; font-size:12px; }
#dev-debug-panel.collapsed { width:48px; height:48px; border-radius:24px; overflow:hidden; }
#dev-debug-panel.collapsed .body, #dev-debug-panel.collapsed .hdr .title { display:none }
#dev-debug-toggle-hint { font-size:11px; color:var(--text-secondary); }

/* Dark theme overrides */
[data-theme='dark'] .modal-overlay { background: rgb(2 2 2 / 60%); }
[data-theme='dark'] .modal-card { background: var(--glass-color); border: 1px solid rgb(255 255 255 / 6%); }
[data-theme='dark'] .modal-card::before { box-shadow: inset 0 1px 1px rgb(255 255 255 / 6%), inset 0 -6px 30px rgb(0 0 0 / 45%); }
[data-theme='dark'] .modal-search-input { background: var(--bg-secondary); color: var(--text); }
[data-theme='calm'] .modal-overlay { background: rgb(0 0 0 / 30%); }
[data-theme='calm'] .modal-card { background: var(--glass-color); border: 1px solid rgb(0 0 0 / 8%); }
[data-theme='calm'] .modal-card::before { box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 30px rgb(0 0 0 / 2%); }
[data-theme='calm'] .modal-search-input { background: var(--bg-secondary); color: var(--text); }

.hero {
  height: 100vh;
  min-height: 100rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow:hidden;
}

/* New HTML hero title styling with animated gradient */
.hero-title {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.9;
  font-weight: 900;
  margin: 0;
  padding: 0.1rem 0.25rem;

  /* iOS-2025 pastel animated gradient */
  background: linear-gradient(90deg,
  #8EE8C5 0%, /* mint */
  #B7F0FF 22%, /* pale sky */
  #FFD7E0 44%, /* soft pink */
  #FFECB3 66%, /* warm cream */
  #E7F7D4 88% /* light green */
  );
  background-clip: text;
  color: transparent;
  display: inline-block;
  z-index: 4; /* above hero-content z-index 3 */
  text-shadow: 0 8px 28px rgb(0 0 0 / 22%);
  -webkit-text-fill-color: transparent;
  background-size: 250% 100%;
  background-position: 0% 50%;
  transition: background-position 8s linear;
  will-change: background-position;
}

/* Smooth, slow gradient shift for a premium iOS look */
@keyframes heroGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-title {
  animation: heroGradientShift 18s ease-in-out infinite;
}

/* Circular close button used in modals */
.circular-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 95%);
  color: #000;
  border: 1px solid rgb(0 0 0 / 6%);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  cursor: pointer;
  z-index: 10010;
}
[data-theme='dark'] .circular-close { background: rgb(34 34 34 / 92%); color: #fff; border-color: rgb(255 255 255 / 6%); }
[data-theme='calm'] .circular-close { background: rgb(255 255 255 / 90%); color: #333; border-color: rgb(0 0 0 / 8%); }

/* Reduced motion: disable animation and fallback to solid color */
@media (prefers-reduced-motion: reduce) {
  .hero-title { animation: none; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); text-shadow: none; }
}

/* Fallback HTML title (used if SVG gradient isn't supported) */

/* Force SVG text to render its fill (helps when SVG is embedded via <object>) */
#hero-text,
svg text#hero-text {
  fill-opacity: 1 !important;
  stroke: none !important;
  -webkit-text-fill-color: initial !important;
}

.hero-title-fallback {
  font-weight: 800;
  font-size: clamp(44px, 8vw, 120px);
  line-height: 0.9;
  background-image: linear-gradient(90deg, #8fcf6b 0%, #ff6b81 45%, #b3001b 100%);
  background-clip: text;
  color: transparent;
  text-align: center;
  display: block; /* show fallback when SVG gradient doesn't paint */
  filter: none;
  margin: 0;
  opacity: 1;
}

/* Ensure hero content sits above snow and blur */
.hero-content { z-index: 3; position: relative; }

/* Force hero text to be painted and ignore pointer events */
#hero-text { pointer-events: none; fill-opacity: 1 !important; mix-blend-mode: normal; }

/* Hide HTML fallback if SVG paints (we'll show fallback only when JS creates it) */
#hero-svg + .hero-title-fallback, .hero-title-fallback { display: none !important; }

.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / 5%);
  z-index: 1;
}

/* Зимняя анимация */
.garden-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Parallax blur overlay that sits above the winter scene but under hero content */
.parallax-blur {
  position: absolute;
  inset: 0;
  z-index: 0; /* lowered so snow canvas can sit above it */
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(140%) brightness(1.02);
  background: rgb(255 255 255 / 2%);
  mix-blend-mode: normal;
}

/* Canvas for procedural falling snow - placed above the blur and under hero content */
#winterSnowCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* above blur (0), below hero-content (2) */
  pointer-events: none;
  will-change: transform;
}
  
#winterScene {
  visibility: hidden;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: all;
}
  
.tree,
.bush,
.cabin {
  transform-origin: center bottom;
  will-change: transform;
}

.tree-main__leaves {
  transform-origin: center;
  will-change: transform;
}

.sun {
  transform-origin: center;
  will-change: transform;
}

.snow {
  transform-origin: center bottom;
  will-change: transform;
}

.steam {
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.text {
  cursor: pointer;
  transition: fill 0.3s ease;
}

.text:hover {
  fill: #4a7f2f;
}

.snowflakes path {
  will-change: transform;
}

/* Noisy animated background for hero */
.noisy__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.noisy__bg .bg {
  position: absolute;
  width: 300%;
  height: 300%;
  left: -110%;
  top: -110%;
  filter: contrast(100) brightness(0.75) grayscale(1);
  animation: grain 2s steps(1) infinite;
  background-blend-mode: difference;
  background-image: url("https://source.unsplash.com/2bg4wDCGU3g/1280x720");
  background-color: salmon;
  background-size: cover;
  opacity: 0.15;
}

/* Seedling popups that rise above the parallax blur but below hero content */
#seedling-popups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above blur (0) and snow (1), below hero-content (3) */
  overflow: visible;
}

.seedling-sprout {
  position: absolute;
  bottom: 4%;

  /* Make popups significantly larger on most viewports as requested */
  width: min(80vw, 640px);
  height: min(80vw, 640px);
  transform-origin: center bottom;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  filter: drop-shadow(0 18px 42px rgb(0 0 0 / 28%));
  transition: transform 220ms ease, opacity 220ms ease;
  max-width: 720px;
  max-height: 720px;
}
.seedling-sprout svg { width:100%; height:100%; display:block; }

@keyframes sproutPop {
  0% { transform: translateY(18px) scale(0.6); opacity: 0; }
  40% { transform: translateY(-20px) scale(1.08); opacity: 1; }
  70% { transform: translateY(-6px) scale(0.95); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.seedling-sprout-img { display:block; width:100%; height:100%; border-radius:12px; box-shadow: var(--shadow-card); }

/* Ensure cart thumbnails are consistently styled and don't inherit placeholder styles */
.cart-thumb { width:64px; height:64px; object-fit:cover; border-radius:12px !important; box-shadow: 0 2px 8px rgb(0 0 0 / 8%) !important; }
.cart-thumb.img-loading-placeholder { background: transparent !important; box-shadow: 0 2px 8px rgb(0 0 0 / 8%) !important; }

.cart-image-btn {
  display: block;
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center;
  border: none;
  background-color: transparent; /* Убран шортхенд background — явное свойство */
  cursor: pointer;
  border-radius: 16px;
  box-shadow: none; /* Убраны тени */
  transition: transform 0.2s ease;
}

/* Ensure privacy modal title is white in light theme for contrast */
[data-theme='light'] #privacy-modal .glass h2,
[data-theme='light'] #privacy-modal-title {
  color: #fff !important;
}

[data-theme='calm'] #privacy-modal .glass h2,
[data-theme='calm'] #privacy-modal-title {
  color: #333 !important;
}

/* Slightly smoother corners for modal content */
#privacy-modal .glass { border-radius: 16px !important; }

/* Light-theme adjustments for order totals: label and value black, larger */
[data-theme='light'] .order-total-label { color: #000; font-size: 1.3rem; font-weight:600; }
[data-theme='light'] .order-total-value { color: #000; font-size: 1.3rem; font-weight:700; }
[data-theme='calm'] .order-total-label { color: #333; font-size: 1.3rem; font-weight:600; }
[data-theme='calm'] .order-total-value { color: #333; font-size: 1.3rem; font-weight:700; }

.cart-image-btn:hover {
  transform: translateY(-2px);
}

.cart-image-btn:active {
  transform: scale(0.95);
}

.cart-image-btn:focus {
  outline: none; /* Убрана обводка */
}

/* --- Smooth modal transitions --- */
.modal, .app-modal, .position-fixed.d-none { opacity: 0; transform: translateY(8px); transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
.modal.is-open, .app-modal.is-open { opacity: 1; transform: translateY(0); }
.modal.d-none, .app-modal.d-none { display: none !important; }

/* Backdrop fade */
.modal-backdrop, .modal-backdrop.is-open { transition: opacity 240ms ease; }

/* Standardize close/clear buttons for modals */
.modal .btn-close, .modal .btn-clear, .btn-clear-cart { width:44px; height:44px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background: rgb(0 0 0 / 4%); border: none; cursor: pointer; }
.modal .btn-close svg, .modal .btn-clear svg { width:18px; height:18px; }

/* Theme-aware icon colors */
:root .modal .btn-close svg { color: #fff; fill: #fff; }
:root[data-theme='dark'] .modal .btn-close svg { color: var(--accent); fill: var(--accent); }
:root[data-theme='calm'] .modal .btn-close svg { color: var(--accent); fill: var(--accent); }

/* Remove unwanted green pressed state for chat button (mobile) */
.btn-chat-order:active { background: none !important; filter: brightness(0.98); }

/* Ensure tap targets for action buttons in lists */
.action-btn { min-width:44px; min-height:44px; padding:8px; display:inline-flex; align-items:center; justify-content:center; }

@keyframes grain {
  0%, 100% {
    transform: translate(0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  20% {
    transform: translate(-15%, 5%);
  }

  30% {
    transform: translate(7%, -25%);
  }

  40% {
    transform: translate(-5%, 25%);
  }

  50% {
    transform: translate(-15%, 10%);
  }

  60% {
    transform: translate(15%);
  }

  70% {
    transform: translateY(15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }
}

/* Squiggly text animation using SVG filters */
.hero-squiggly {
  animation: squiggly 0.8s infinite;
}

@keyframes squiggly {
  0% {
    filter: url("#squiggly-0");
  }

  25% {
    filter: url("#squiggly-1");
  }

  50% {
    filter: url("#squiggly-2");
  }

  75% {
    filter: url("#squiggly-3");
  }

  100% {
    filter: url("#squiggly-4");
  }
}

.nav-bar {
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;

  position: fixed;
  bottom: -6px;
  left: 8px;
  right: 8px;
  height: 96px;
  height: 100px;
  background: color-mix(in srgb, rgb(255 255 255 / 72%) 12%, transparent);
  backdrop-filter: url("#liquid-glass") blur(40px) brightness(1.08) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  padding: 8px;
  z-index: 1000;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
  overflow: visible;
  will-change: backdrop-filter;
  transition: background 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

.nav-bar::after {
  content: '';
  position: absolute;
  left: calc(8px + (100% - 16px) / 5 * var(--nav-index, 0));
  top: 8px;
  display: block;
  width: calc((100% - 16px) / 5);
  height: calc(100% - 16px);
  border-radius: 18px;
  background: color-mix(in srgb, rgb(var(--accent-rgb) 0.36) 36%, transparent);
  z-index: 2;
  transition:
    left 400ms cubic-bezier(1, 0.0, 0.4, 1),
    background 400ms cubic-bezier(1, 0.0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 -4px 1px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 3px 6px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
}

.nav-bar.nav-animating::after {
  animation: navStretch 440ms ease;
}

@keyframes navStretch {
  0% {
    scale: 1 1;
    transform-origin: var(--nav-origin, center);
  }

  50% {
    scale: 1.2 1;
    transform-origin: var(--nav-origin, center);
  }

  100% {
    scale: 1 1;
    transform-origin: var(--nav-origin, center);
  }
}

[data-theme='dark'] .nav-bar {
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;

  background: color-mix(in srgb, rgb(28 28 30 / 78%) 36%, transparent);
  backdrop-filter: url("#liquid-glass") blur(40px) brightness(1.15) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.15);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
}

[data-theme='calm'] .nav-bar {
  --glass-reflex-dark: 0.5;
  --glass-reflex-light: 1;

  background: color-mix(in srgb, rgb(255 255 255 / 80%) 20%, transparent);
  backdrop-filter: url("#liquid-glass") blur(40px) brightness(1.05) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* Modern Select Styles (Renamed from ios-select) */
.modern-select {
  display: inline-flex;
  align-items: center;
  position: relative;
  border-radius: 16px;
  padding: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
  transition: all 0.2s ease;
  min-width: 180px;
}

.modern-select:hover {
  border-color: rgb(var(--accent-rgb) 0.5);
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  transform: translateY(-1px);
}

.modern-select:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) 0.15);
  transform: translateY(0);
}

.modern-select select {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 40px 12px 16px;
  height: 48px;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  border-radius: 16px;
  cursor: pointer;
  line-height: 1.3;
}


/* Dark theme adjustments */
[data-theme='dark'] .modern-select {
  background: rgb(255 255 255 / 5%);
  border-color: rgb(255 255 255 / 10%);
}

[data-theme='dark'] .modern-select:hover {
  background: rgb(255 255 255 / 8%);
}

/* Calm Theme Menu Dropdown Fixes */
[data-theme='calm'] .menu-dropdown {
  background: rgb(255 255 255 / 95%) !important;
  border-color: rgb(0 0 0 / 8%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

[data-theme='calm'] .menu-item button,
[data-theme='calm'] .menu-item > div {
  color: #333 !important;
}

[data-theme='calm'] .menu-item button:hover,
[data-theme='calm'] .menu-item > div:hover {
  background: rgb(0 0 0 / 5%) !important;
}
  
/* Mobile adjustments */
@media (max-width: 768px) {
  .modern-select select { height:48px; font-size:16px; }
  #ios-filters-bar { gap:10px; }
}

[data-theme='dark'] .nav-bar::after {
  background: color-mix(in srgb, rgb(var(--accent-rgb) 0.36) 36%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 -4px 1px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 3px 6px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
}

[data-theme='calm'] .nav-bar::after {
  background: color-mix(in srgb, rgb(var(--accent-rgb) 0.3) 30%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 -4px 1px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0 3px 6px 0 color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
}

.nav-bar > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  height: 100%;
  position: relative;
  z-index: 3;
}

.nav-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0;
  padding: 0;
  font-weight: 600;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Improve tap responsiveness on mobile: allow browser to handle taps immediately
  and avoid gesture recognizer delaying the click. */
  touch-action: manipulation;
  user-select: none;
}

.hero-tagline {
  display: block;
  font-size: clamp(0.55rem, 1.8vw, 0.95rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #000; /* changed to black as requested */
  margin-bottom: 8px;
  font-weight: 400;
}

[data-theme='calm'] .hero-tagline {
  color: #333;
}

.hero-title {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
}

.hero-anim-word {
  display: inline-flex;
  gap: 2px;
  font-size: inherit;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  position: relative;
}

.hero-heading-word {
  letter-spacing: inherit;
}

.hero-subtitle {
  font-size: clamp(0.75rem, 2.4vw, 1.05rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #000; /* changed to black as requested */
  font-weight: 400;
}

[data-theme='calm'] .hero-subtitle {
  color: #333;
}

.hero-letter {
  display: inline-block;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

/* Hero SVG text styles */
#hero-svg {
  animation: squiggly 0.8s infinite;
}

#hero-text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
  
.cart-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: -8px -16px;
  padding: 8px 16px;
}

.cart-table {
  width: 100%;
  min-width: 500px;
}

.cart-table-header {
  display: grid;
  grid-template-columns: 72px 1fr 80px 120px 80px 40px;
  gap: 8px;
  padding: 12px 8px;
  background: rgb(var(--accent-rgb) 0.05);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cart-table-row {
  display: grid;
  grid-template-columns: 72px 1fr 80px 120px 80px 40px;
  gap: 8px;
  padding: 12px 8px;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  will-change: auto; 
}

/* New semantic row/cols (kept for backward compatibility) */
.cart-items {
  display: contents;
}

.cart-row {
  display: grid;
  grid-template-columns: 72px 1fr 80px 120px 80px 40px;
  gap: 8px;
  padding: 12px 8px;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease, transform 0.12s ease;
  background: transparent;
}

/* .cart-row hover intentionally left neutral to preserve existing visual style */
.col--image .cart-thumb { width:64px; height:64px; border-radius:12px; }
.col--name { min-width: 0; }
.col--price { text-align: left; }
.col--qty { text-align: center; }
.col--sum { text-align: right; }
.col--actions { text-align: center; }

.cart-table-row:hover {
  background: rgb(var(--accent-rgb) 0.03);
}

.cart-table-row:last-child {
  border-bottom: none;
}

.cart-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  transition: transform 0.2s ease;
  backface-visibility: hidden; 
  transform: translateZ(0); 
}

.cart-thumb:hover {
  transform: translateZ(0) scale(1.05);
}

.cart-product-name {
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.cart-price {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.cart-sum {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.26s cubic-bezier(.2,.9,.2,1), opacity 0.22s ease;
  will-change: transform, opacity;
}

.qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 20px;
  user-select: none;
}

/* Light theme - white transparent background */
[data-theme="light"] .qty-controls {
  background: rgb(255 255 255 / 60%);
}

/* Dark theme - accent color background */
[data-theme="dark"] .qty-controls {
  background: rgb(var(--accent-rgb) 0.08);
}

/* Calm theme - soft white background */
[data-theme="calm"] .qty-controls {
  background: rgb(255 255 255 / 70%);
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation; 
}

/* Light theme - white buttons */
[data-theme="light"] .qty-btn {
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

[data-theme="light"] .qty-btn:hover {
  background: #f5f5f5;
  transform: scale(1.08);
  box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
}

/* Dark theme - accent color */
[data-theme="dark"] .qty-btn {
  background: rgb(var(--accent-rgb) 0.15);
  color: var(--accent);
}

[data-theme="dark"] .qty-btn:hover {
  background: rgb(var(--accent-rgb) 0.25);
  transform: scale(1.08);
}

/* Calm theme - soft white */
[data-theme="calm"] .qty-btn {
  background: rgb(255 255 255 / 80%);
  color: #333;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

[data-theme="calm"] .qty-btn:hover {
  background: rgb(255 255 255 / 90%);
  transform: scale(1.08);
  box-shadow: 0 3px 12px rgb(0 0 0 / 8%);
}

.qty-btn:active {
  transform: scale(0.92);
  transition-duration: 0.05s;
}

.qty-input {
  width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1);
}

.qty-input.pulse {
  transform: scale(1.12);
}

/* Smooth per-item sum transition when quantity changes */
.cart-sum.smooth-change {
  opacity: 0.85;
}

.btn-cart-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: rgb(255 59 48 / 10%);
  color: #ff3b30;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  touch-action: manipulation;
  flex-shrink: 0;
}

.btn-cart-remove:hover {
  background: rgb(255 59 48 / 20%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(255 59 48 / 25%);
}

.btn-cart-remove:active {
  transform: translateY(0);
  transition-duration: 0.05s;
}
  
@media (max-width: 768px) {
  .cart-table, .cart-modal-table {
    min-width: 100%;
  }

  .cart-table-header {
    display: none;
  }

  /* Mobile: use card-like rows */
  .cart-row, .cart-table-row {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 8px 12px;
    padding: 14px 10px;
    align-items: start;
    border-radius: 12px;
    margin-bottom: 10px;
    border-bottom: none;
  }

  .col--image, .cart-col-image {
    grid-column: 1;
    grid-row: 1 / 5; /* spans full height of the stacked card */
    align-self: start;
  }

  .col--name, .cart-col-name {
    grid-column: 2;
    grid-row: 1;
  }

  .col--price, .cart-col-price {
    grid-column: 2;
    grid-row: 2;
  }

  .col--qty, .cart-col-qty {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
  }

  .col--sum, .cart-col-sum {
    grid-column: 2;
    grid-row: 4;
    place-self: center end;
    font-weight: 700;
    color: var(--accent);
  }

  .col--actions, .cart-col-actions {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }

  .cart-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  /* Make thumbnail clickable area clean and accessible */
  .cart-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
  }

  .cart-image-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Subtle clear-cart icon button */
  .btn-clear-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgb(0 0 0 / 6%);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
  }

  .btn-clear-cart:hover {
    background: rgb(0 0 0 / 4%);
    transform: translateY(-1px);
  }
  .btn-clear-cart:active { transform: translateY(0); }
  .btn-clear-cart:focus { outline: 2px solid rgb(var(--accent-rgb) 0.18); outline-offset: 2px; }

  /* Destructive clear action modifier */
  .btn-clear-action {
    color: #c0392b; /* iOS-like destructive red */
    border-color: rgb(192 57 43 / 12%);
    background: rgb(192 57 43 / 3%);
  }

  .btn-clear-action:hover {
    background: rgb(192 57 43 / 8%);
    box-shadow: 0 4px 12px rgb(192 57 43 / 6%);
  }
  .btn-clear-action:focus { outline: 2px solid rgb(192 57 43 / 14%); }

  .cart-product-name {
    font-size: 15px;
    margin-bottom: 6px;
  }

  /* Mobile inline labels for clarity (useful when header is off-screen) */
  .cart-col-price::before,
  .cart-col-qty::before,
  .cart-col-sum::before {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .cart-col-price::before { content: 'Цена'; }
  .cart-col-qty::before { content: 'Кол–во'; }
  .cart-col-sum::before { content: 'Сумма'; }

  .qty-controls {
    padding: 4px 6px;
    gap: 8px;
  }

  .qty-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
    min-width: 44px;
    min-height: 44px;
  }

  .qty-input {
    width: 44px;
    font-size: 17px;
    font-weight: 700;
  }
}
  
@media (max-width: 768px) {
  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-btn {
    min-height: 56px;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
    transform: scale(1.6);
  }      

  input, select, textarea {
    font-size: 16px !important;
  }
  
  a, button, input, select, textarea {
    touch-action: manipulation;
  }
  
  button:active, .btn:active {
    transform: scale(0.96);
    transition-duration: 0.05s;
  }
 
  .product-card {
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  
  .modal-content, .offcanvas {
    border-radius: 24px 24px 0 0 !important;
    max-height: 92vh;
  }

  /* Sticky */
  .sticky-bottom {
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  .sticky-top {
    padding-top: env(safe-area-inset-top, 16px);
  }
  
  img {
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) 0.2);
  }

  /* Pull-to-refresh */
  body {
    overscroll-behavior-y: contain;
  }

  .card, .product-card, .cart-table-row {
    will-change: auto; 
    backface-visibility: hidden;
    transform: translateZ(0);
  }
 
  .card {
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
  }

  .card:active {
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%);
  }
  
  .container, .offcanvas-body {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  h1 { font-size: clamp(28px, 7vw, 36px); line-height: 1.2; }
  h2 { font-size: clamp(24px, 6vw, 32px); line-height: 1.3; }
  h3 { font-size: clamp(20px, 5vw, 26px); line-height: 1.4; }
  body, p { font-size: 16px; line-height: 1.6; }

  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
  }

  /* Swipe */
  .modal-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
  }

  .fade-enter {
    opacity: 0;
    transform: translateY(10px);
  }

  .fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-out;
  }

  .order-items-table .order-table-header,
  .order-items-table .order-table-row {
    grid-template-columns: 1fr 60px 80px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .order-items-table .order-table-row > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .order-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
}

.nav-btn .icon {
  width: 28px;
  height: 28px;
  display: block;
  margin: auto; 
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
  color: var(--text);
  stroke: var(--text);
}

[data-theme='light'] .nav-btn .icon {
  color: #fff;
  stroke: #fff;
}

[data-theme='light'] .nav-btn.active .icon {
  color: #000;
  stroke: #000;
}

[data-theme='calm'] .nav-btn .icon {
  color: #333 !important;
  stroke: #333 !important;
}

[data-theme='calm'] .nav-btn.active .icon {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

.nav-btn i {
  font-size: 24px;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  display: block;
  margin: auto; 
  color: var(--text);
}

[data-theme='light'] .nav-btn i {
  color: #fff;
}

[data-theme='light'] .nav-btn.active i {
  color: #000;
}

[data-theme='calm'] .nav-btn i {
  color: #333 !important;
}

[data-theme='calm'] .nav-btn.active i {
  color: var(--accent) !important;
}

/* Telegram */
.nav-btn.active {
  color: var(--accent);
}

.nav-btn.active .icon,
.nav-btn.active i {
  animation: iconBounce 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

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

  40% {
    transform: scale(0.85);
  }

  70% {
    transform: scale(1.15);
  }

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

.nav-btn:hover .icon,
.nav-btn:hover i {
  transform: scale(1.08);
}

/* Press эффект */
.nav-btn:active .icon,
.nav-btn:active i {
  transform: scale(0.9);
  transition: transform 0.1s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Fallback */
@supports not (backdrop-filter: url("#liquid-glass")) {
  .nav-bar {
    backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
  }
}

.ai-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  font-size:16px;
  color:var(--text-primary) !important;
  font-weight:500;
}
.ai-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.ai-input:focus { outline: none; border: none; }

.send-btn {
  width:50px; height:50px;
  background: var(--accent-gradient);
  border:none; border-radius:14px;
  color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 8px 20px rgb(var(--accent-rgb) 0.35),
    0 1px 0 0 rgb(255 255 255 / 40%) inset;
  transition: box-shadow .4s, transform var(--transition);
  flex-shrink: 0;
}
.send-btn .icon { color: #fff !important; stroke: #fff !important; }
[data-theme='dark'] .send-btn { color: #fff; }
[data-theme='dark'] .send-btn .icon { color: #fff !important; stroke: #fff !important; }
[data-theme='calm'] .send-btn .icon { color: #fff !important; stroke: #fff !important; }

.send-btn:hover {
  box-shadow:
    0 10px 26px rgb(var(--accent-rgb) 0.45),
    0 1px 0 0 rgb(255 255 255 / 50%) inset;
  transform: translateY(-2px);
}

/* Theme-aware hover for send button: ensure calm/dark themes use appropriate accent color */
[data-theme='calm'] .send-btn:hover {
  box-shadow: 0 10px 26px rgb(var(--accent-rgb) 0.38), 0 1px 0 0 rgb(255 255 255 / 18%) inset;
  transform: translateY(-1px);
}

[data-theme='dark'] .send-btn:hover {
  box-shadow: 0 10px 26px rgb(var(--accent-rgb) 0.55), 0 1px 0 0 rgb(255 255 255 / 6%) inset;
  transform: translateY(-2px);
}
.send-btn:active { transform: scale(.92); }
.card-hover { transition: transform var(--transition), box-shadow .45s ease; }

/* Disable upward movement on hover to avoid layout shift and double-scroll illusions */
.card-hover:hover { transform: none !important; box-shadow: none !important; }

/* Review thumbnail active state handled via class to avoid inline transforms */
.review-thumbnail { border: 2.5px solid #e0e0e0; border-radius: 12px; display: inline-block; }
.review-thumbnail.active { border-color: var(--accent); transform: scale(1.05); }

/* AI launcher placed in top-action-panel: compact cube icon that opens AI modal */
.ai-launcher {
  width:48px;
  height:48px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--glass-color) 86%, transparent 14%);
  border: 1px solid color-mix(in srgb, var(--glass-border) 88%, transparent 12%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
  color: var(--text-secondary);
  cursor: pointer;
  padding:6px;
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 180ms ease;
}
.ai-launcher .icon { width:22px; height:22px; display:block; }
.ai-launcher:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / 10%); }
.ai-launcher:active { transform: translateY(0) scale(.98); }
.ai-launcher.active { background: color-mix(in srgb, rgb(var(--accent-rgb) 0.10) 36%, transparent); color: var(--accent); box-shadow: 0 12px 36px rgb(var(--accent-rgb) 0.12); }

/* On iPad-like widths, stack buttons in #top-action-panel vertically */
@media (min-width: 768px) and (max-width: 1024px) {
  #top-action-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
  :root { --nav-btn-size: 48px; }
  #top-action-panel .ai-launcher, #top-action-panel .weather-btn, #top-action-panel #profileToggle, #top-action-panel .themeToggle { width: var(--nav-btn-size); height: var(--nav-btn-size); }
}

@media (max-width: 768px) {
  /* Mobile: top action panel behaves like mobile overlay, above nav-bar.glass */
  #top-action-panel.show {
    #top-action-panel .ai-launcher, #top-action-panel .weather-btn, #top-action-panel #profileToggle, #top-action-panel .themeToggle { width: calc(var(--nav-btn-size) - 8px); height: calc(var(--nav-btn-size) - 8px); }
  }  }  

/* When nav-bar has .menu-open, show integrated second shelf and animate smoothly */
.nav-bar.menu-open {
  /* expand visual footprint to reveal secondary shelf */
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .nav-bar.menu-open {
    /* height: auto; */

    /* allow it to grow */
    min-height: 71px;
    transition: min-height 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
  }
  .nav-bar.menu-open > div { z-index: 4; }

  .nav-bar.menu-open #top-action-panel .collapse-btn 
    { display: inline-flex; }
}


/* Calm theme: ensure destructive/clear buttons use accent color for visibility */
[data-theme='calm'] .btn-cart-remove {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

/* Make top-action-panel a secondary mobile nav-bar (glass layer) */
@media (max-width: 768px) {
  #top-action-panel {
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  }

  /* Layout: left group and right group for buttons */
  #top-action-panel .left-group, #top-action-panel .right-group { display:flex; gap:8px; align-items:center; }

  /* Compact button look to match nav-bar icons */
  #top-action-panel .ai-launcher, #top-action-panel .weather-btn, #top-action-panel .themeToggle, #top-action-panel #profileToggle   
    { width:48px; height:48px; border-radius:12px; }
}

/* Prevent background scrolling when top-action-panel is open on mobile */
.no-scroll-top-panel, .no-scroll-top-panel body { overflow: hidden !important; touch-action: none !important; }

/* Catalog filters: hide by default, show when toggled */
#catalog-category-filters { display: none; }
.filters-open #catalog-category-filters.filters-visible { display: block; }
.filters-visible { display: block; }

/* Small icon button for filters placed left of other header controls */
.catalog-filters-toggle { padding: 0.25rem; margin-right: 0.5rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.catalog-filters-toggle svg { display:block; width:20px; height:20px; margin:auto; line-height:0; vertical-align:middle; }
.catalog-filters-toggle[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }

/* Ensure button inner alignment even if inline styles exist */
.catalog-filters-toggle { align-items:center; justify-content:center; }

/* Smooth reveal for filters panel: hidden by default via display:none above; animate when shown */
#catalog-category-filters { transform: translateY(-6px); }
#catalog-category-filters.filters-visible, #catalog-category-filters.filters-mobile-open { display: block !important; opacity: 1 !important; transform: translateY(0) !important; transition: opacity 200ms ease, transform 220ms ease; }

/* Make panel readable: ensure padding and contrast (theme-aware) */
#catalog-category-filters { padding: 8px 0; color: var(--text, #222); background: transparent; }

/* Ensure buttons inside filters are always visible and readable (fallback) */
#catalog-category-filters button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text, #222) !important;
  background: var(--card-bg, rgba(255,255,255,0.02)) !important;
  border-color: var(--glass-border, rgba(0,0,0,0.08)) !important;
}

/* Make sure the filters wrapper is not clipped and is above content when visible */
#catalog-category-filters { overflow: visible !important; z-index: 2000; }

/* Desktop: show filters inline when parent has .filters-open */
@media (min-width: 1024px) {
  .filters-open #catalog-category-filters { display: block; }
}

/* Ensure inline filters are hidden on smaller screens */
@media (max-width: 1023px) {
  .filters-open #catalog-category-filters.filters-visible {
    display: none !important;
  }
}

/* Mobile: show filters as overlay when body has .catalog-filters-mobile-open and filters have .filters-mobile-open */
.catalog-filters-mobile-open #catalog-category-filters.filters-mobile-open {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 12000;
  padding: 18px;
  overflow: auto;
  display: block !important;
}

/* Overlay behind mobile filters for dimming and click-to-close */
#catalog-filters-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 11990;
  display: none;
}
.catalog-filters-mobile-open #catalog-filters-overlay {
  display: block !important;
}

/* Prevent body scrolling when mobile filters are open */
.no-scroll-catalog-filters, .no-scroll-catalog-filters body { overflow: hidden !important; touch-action: none !important; }

/* Close button inside mobile filters */
.catalog-filters-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--card-bg, rgba(255,255,255,0.06));
  color: var(--text, #111);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 12010;
  padding: 6px;
  border: 1px solid rgba(0,0,0,0.06);
}
.catalog-filters-close svg { width:18px; height:18px; display:block; }

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .catalog-filters-close { background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
  #catalog-filters-overlay { background: rgba(0,0,0,0.6); }
}

/* Increase hit area for close button on small screens */
.catalog-filters-close { touch-action: manipulation; }

/* Overlay transitions */
#catalog-filters-overlay { opacity: 0; transition: opacity 220ms ease; }
.catalog-filters-mobile-open #catalog-filters-overlay { opacity: 1; }

/* Mobile (small): slide-in from left full-height */
@media (max-width: 1023px) {
  .catalog-filters-mobile-open #catalog-category-filters.filters-mobile-open {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 92%;
    max-width: 420px;
    padding: 18px;
    background: var(--bg);
    box-shadow: 8px 0 30px rgba(0,0,0,0.18);
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1);
    z-index: 12000;
    display: block !important;
  }
  .catalog-filters-mobile-open #catalog-category-filters.filters-mobile-open.opened {
    transform: translateX(0) !important;
  }
}

/* Mobile filter checkboxes */
.catalog-filters-mobile-open #catalog-category-filters label {
  display: block !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
  background: var(--card-bg, rgba(255,255,255,0.05)) !important;
  transition: background-color 0.2s ease !important;
}
.catalog-filters-mobile-open #catalog-category-filters label:hover {
  background: var(--card-bg-hover, rgba(255,255,255,0.1)) !important;
}
.catalog-filters-mobile-open #catalog-category-filters input[type="checkbox"] {
  margin-right: 8px !important;
  accent-color: var(--accent, #007bff) !important;
}

/* Toggle button small adjustments */
.catalog-filters-toggle { padding: 0.25rem; }
.catalog-filters-toggle svg { display: block; }


/* Ensure collapse button is visible and theme-aware */
.top-action-panel .collapse-btn {background: transparent;border: 1px solid var(--glass-border);color: var(--text-secondary);}
.top-action-panel .collapse-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(var(--accent-rgb) 0.08); }

/* Make favorite button themable by toggling .favorited class instead of inline fills */
.favorite-btn.like .hearth path { fill: transparent !important; stroke: var(--accent) !important; }
.favorite-btn.like.favorited .hearth path { fill: var(--accent) !important; stroke: var(--accent) !important; }
.favorite-btn.like.favorited .circle { opacity: 0.06 !important; background: var(--accent) !important; }

/* Hide complex photo-deck thumbnails if we prefer simple prev/next controls */
.photo-deck { display: none !important; }

/* Prev/Next buttons for product page */
#prev-product-image, #next-product-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--glass-color) 86%, transparent 14%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  z-index: 200;
  cursor: pointer;
}
#prev-product-image { left: 12px; }
#next-product-image { right: 12px; }
#prev-product-image svg, #next-product-image svg { width:20px; height:20px; color: var(--accent); }

/* Collapse button placed inside top-action-panel */
.top-action-panel .collapse-btn {
  width: calc(var(--nav-btn-size, 48px) - 10px);
  height: calc(var(--nav-btn-size, 48px) - 10px);
  position: relative;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  border: 0!important;
  background: transparent;
  cursor:pointer;
  color:var(--text-secondary);
}
.photo { border-radius: var(--radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / 15%); overflow:hidden; transition: opacity .3s ease, transform .3s ease; }
.photo:hover { transform: scale(1.02); }
#main-product-image { transition: opacity .3s ease; }

/* Responsive main product image sizing: use a clamped height to avoid oversized images */
#main-product-image {
  width: 100%;
  display: block;
  height: clamp(320px, 60vh, 800px);
  object-fit: cover;
  border-radius: 24px;
}
.sticky-search.open { transform: translateY(0); opacity:1; }

/* Отступ сверху для Telegram WebApp - safe-area-inset-top */
.sticky-search { padding-top: env(safe-area-inset-top, 0); }
.sticky-search .sticky-search-back { background: transparent; border: none; color: var(--text); font-weight:700; font-size:18px; min-width:44px; }
.sticky-search .sticky-search-clear { background: transparent; border: none; color: var(--text-secondary); font-weight:700; font-size:18px; }
.sticky-search .sticky-search-inner { display:flex; gap:8px; align-items:center; padding:10px 12px; background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom: 1px solid rgb(0 0 0 / 4%); }

/* Favorite button base styles */
.favorite-btn {
  /* Scoped favorite animation variables */
  --fav-size: 36px;
  --fav-color-primary: #E18A6D;
  --fav-color-secondary: #FFF;
  --fav-color-hearth: var(--fav-color-secondary);
  --fav-color-drop: var(--fav-color-primary);
  --fav-color-circle: var(--fav-color-secondary);
  --fav-size-hearth: var(--fav-size);
  --fav-size-drop: var(--fav-size);
  --fav-size-circle: calc(var(--fav-size) * 1.33);
  --fav-size-lines: calc(var(--fav-size) * 2.66);
  --fav-ratio-hearth: 1;
  --fav-ratio-hearth-scale: 1;
  --fav-ratio-scale: 1;
  --fav-ratio-rotate: 1;
  --fav-ratio-offset-drop: 1;
  --fav-offset-drop: calc(var(--fav-size) * 2);

  /* Strong override: ensure integrated second layer is visible on mobile and not clipped */
  @media (max-width: 768px) {
    .nav-bar.menu-open #top-action-panel {
      display: flex !important;
      position: fixed !important;
      left: 8px !important;
      right: 8px !important;
      bottom: 86px !important;
      height: auto !important;
      min-height: 64px !important;
      z-index: 99999 !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
      box-shadow: 0 12px 40px rgb(0 0 0 / 18%) !important;
    }

    /* ensure nav-bar stays behind the overlay */
    .nav-bar { z-index: 1000; }
  }

  /* ===================================================================
   FULL RESET FOR #top-action-panel
   Place this block at the end to reliably override previous styles
   =================================================================== */
  #top-action-panel, .top-action-panel {
    /* Reset only layout-related properties to avoid breaking inherited behaviors */
    box-sizing: border-box;
    display: none; /* default hidden, toggled by .show or .nav-bar.menu-open */
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgb(255 255 255 / 80%);
    color: var(--text, #111);
    border-radius: 18px;
    border: 1px solid rgb(0 0 0 / 6%);
    backdrop-filter: blur(8px) saturate(120%);
  }

  /* mobile-first: when explicitly shown or when nav-bar opens, show overlay */
  @media (max-width: 768px) {
    /* Mobile overlay behavior: use more specific selector to keep overrides scoped */
    .nav-bar.menu-open #top-action-panel,
    #top-action-panel.show,
    .top-action-panel.show {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: 86px;
      min-height: 64px;
      height: auto;
      display: flex;
      z-index: 99999;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
    }

    /* default hidden; only show when nav-bar.menu-open or .show is present */
    #top-action-panel { display: none; }
    .nav-bar.menu-open #top-action-panel, #top-action-panel.show, .top-action-panel.show { display: flex; }

    /* Inner layout: left and right groups for neat alignment */
    #top-action-panel .left-group, #top-action-panel .right-group,
    .top-action-panel .left-group, .top-action-panel .right-group {
      display:flex; gap:8px; align-items:center; justify-content:flex-end;
    }

    /* Collapse button visibility */
    #top-action-panel .collapse-btn, .top-action-panel .collapse-btn { display: inline-flex !important; }
  }

  /* Desktop: show panel by default; allow explicit .hide to hide */
  @media (min-width: 769px) {
    /* Desktop: show panel by default; allow explicit .hide to hide */
    #top-action-panel, .top-action-panel { display: flex; position: fixed; top: 14px; right: 14px; z-index: 12000; }
    #top-action-panel.hide, .top-action-panel.hide { display: none; }
  }

  /* Ensure icons inherit color and do not rely on inline fills */
  #top-action-panel svg, .top-action-panel svg { color: inherit; fill: none; stroke: currentcolor; }

  --fav-line-length: 5;
  --fav-line-offset: 35;
  --fav-opacity-circle: 0.15;
  --fav-opacity-drop: 0;
  --fav-opacity-lines: 0;

  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
  background: var(--bg) !important;
  border: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform-origin: center center !important;
}

/* Favorite button animation styles */
.favorite-btn.like {
  position: relative;
  overflow: visible;
}

.favorite-btn.like .hearth,
.favorite-btn.like .drop,
.favorite-btn.like .circle,
.favorite-btn.like .lines {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.favorite-btn.like .hearth {
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  fill: var(--accent);
  stroke: var(--accent);
}

.favorite-btn.like .drop {
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  opacity: 0;
  fill: var(--accent);
}

/* Ensure the AI modal send button displays the paper-plane icon correctly */
.ai-chat-modal-input-container .send-btn.ai-chat-modal-send-btn {
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-chat-modal-input-container .send-btn.ai-chat-modal-send-btn .icon {
  width: 18px;
  height: 18px;
  display: block;
  color: #fff !important;
  fill: currentcolor !important;
  stroke: none !important;
}

.favorite-btn.like .circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.favorite-btn.like .lines {
  width: 64px;
  height: 64px;
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* Flat square remove button used in favorites list */
.favorite-remove-btn {
  background: transparent !important;
  border: 1px solid rgb(220 53 69 / 12%) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background .12s ease, transform .08s ease;
}
.favorite-remove-btn:hover { background: rgb(220 53 69 / 4%) !important; transform: translateY(-2px); }
.favorite-remove-btn:active { transform: translateY(0); }

/* Mobile: balanced compact layout for favorites list */
@media (max-width: 768px) {
  .favorite-card {
    display: grid !important;
    grid-template-columns: 72px 1fr 48px;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .favorite-card img.photo {
    width: 72px !important;
    height: 72px !important;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    object-fit: cover;
    border-radius: 10px !important;
    flex: none;
  }

  .favorite-card > div[style*="flex: 1"] {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-width: 0;
  }

  .favorite-card h6.mb-1 {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;

    /* Standard property */
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .favorite-card .d-flex.align-items-center.gap-2.mb-2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-items: center;
    gap: 8px !important;
  }

  .favorite-card .cart-glass-btn {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    width: 44px !important;
    height: 36px !important;
    border-radius: 10px !important;
    padding: 6px !important;
  }

  /* ===== Desktop/base styles for #top-action-panel (added by assist) ===== */

  /* Keep desktop rules in main stylesheet to preserve cascade and avoid duplication */
  @media (min-width: 769px) {
    #top-action-panel, .top-action-panel {
      position: fixed;
      top: 14px;
      right: 14px;
      display: flex !important;
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      background: color-mix(in srgb, var(--glass-color) 86%, transparent 14%);
      backdrop-filter: blur(var(--glass-blur)) saturate(120%);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      box-shadow: 0 8px 20px rgb(0 0 0 / 8%);
      z-index: 12000;
      pointer-events: auto;
    }

    /* App logo placed inside top-action-panel */
    .top-panel-logo { display: inline-flex; align-items: center; margin-right: 6px; }
    .top-panel-logo .app-logo-link { display: inline-flex; align-items: center; }
    .top-panel-logo .app-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }

    /* Ensure logo also displays correctly inside the bottom navigation on small screens */
    .telegram-bottom-nav .top-panel-logo { order: -1; margin-right: 8px; margin-left: 6px; }
    .telegram-bottom-nav .top-panel-logo .app-logo { width: 36px; height: 36px; border-radius: 8px; }

    /* Top header (desktop) that holds the app logo */
    .app-top-header { position: fixed; top: 0; left: 0; right: 0; height: 96px; display: flex; align-items: center; z-index: 13000; background: transparent; }
    .app-top-header-inner { display:flex; align-items:center; gap:12px; padding: 12px 20px; }
    .app-top-header .top-panel-logo .app-logo { width: 80px; height: 80px; border-radius: 6px; }

    /* Ensure header doesn't overlap content: push main content down on desktop */
    @media (min-width:769px){
      body { --app-top-header-height: 96px; }
      main, .main-content, .content-root { padding-top: var(--app-top-header-height); }
    }

    /* Structured header layout */
    .app-top-header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
    .app-header-left { display:flex; align-items:center; gap:10px; }
    .app-header-center { display:flex; justify-content:center; align-items:center; }
    .app-site-title { font-weight:700; font-size:1.05rem; color:var(--tg-text-color, var(--text)); text-decoration:none; }
    .app-header-right { display:flex; justify-content:flex-end; align-items:center; gap:8px; }

    /* Small screens: compact top header (mobile-friendly) */
    @media (max-width:768px){
      .app-top-header { 
        display:flex !important; 
        position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index:13000; 
        background: color-mix(in srgb, var(--glass-color) 92%, transparent 8%);
        backdrop-filter: blur(6px) saturate(110%);
        border-bottom: 1px solid rgb(0 0 0 / 6%);
      }
      .app-top-header-inner.container-fluid { padding: 0 10px; }
      .app-top-header-inner { grid-template-columns: auto 1fr auto; }
      .app-top-header .top-panel-logo .app-logo { width:48px; height:48px; }
      .app-header-left { padding-left: 2px; }
      .app-header-center { display:none; }
      .app-header-right .menu-toggle-btn { width:40px; height:40px; }

      /* push content below compact header */
      body { --app-top-header-height: 56px; }
      main, .main-content, .content-root { padding-top: var(--app-top-header-height); }
    }

    /* Full header styling (glass, spacing, responsive) */
    .app-top-header {
      --header-bg: color-mix(in srgb, var(--glass-color) 90%, transparent 10%);
      --header-border: rgb(255 255 255 / 6%);

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 96px;
      display: flex;
      align-items: center;
      z-index: 13000;
      background: var(--header-bg);
      backdrop-filter: blur(8px) saturate(120%);
      border-bottom: 1px solid var(--header-border);
    }
    .app-top-header-inner.container-fluid { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 18px; box-sizing: border-box; }
    .app-top-header .app-header-left, .app-top-header .app-header-right { min-width: 64px; }
    .top-panel-logo { display:inline-flex; align-items:center; justify-content:center; }
    .top-panel-logo .app-logo-link { display:inline-flex; align-items:center; justify-content:center; }
    .top-panel-logo .app-logo { width:80px; height:80px; object-fit:contain; border-radius:8px; transition: transform .18s ease, box-shadow .18s ease; }
    .top-panel-logo .app-logo.img-loaded { opacity:1; }
    .top-panel-logo .app-logo:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 18px rgb(0 0 0 / 12%); }

    /* Стили для загруженной картинки логотипа */
    img.app-logo.img-loaded {
      width: 80px;
      height: 80px;
      object-fit: contain;
      border-radius: 6px;
    }

    /* Title styling */
    .app-header-center .app-site-title { font-size: 1.05rem; letter-spacing: 0.2px; color: var(--tg-text-color, var(--text)); }

    /* Right menu compactness */
    .app-header-right .top-right-menu { display:flex; gap:8px; align-items:center; }
    .app-header-right .menu-toggle-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:transparent; border:1px solid transparent; }
    .app-header-right .menu-toggle-btn:hover { background: color-mix(in srgb, var(--glass-color) 94%, transparent 6%); }

    /* Ensure content not hidden under header on desktop */
    @media (min-width:769px){
      body { --app-top-header-height: 96px; }
      main, .main-content, .content-root { padding-top: var(--app-top-header-height); }
    }

    #top-action-panel .ai-launcher,
    #top-action-panel .weather-btn,
    #top-action-panel .themeToggle,
    #top-action-panel #profileToggle,
    .top-action-panel .ai-launcher,
    .top-action-panel .weather-btn,
    .top-action-panel .themeToggle,
    .top-action-panel #profileToggle {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    /* Optional compact variant when .compact present */
    #top-action-panel.compact, .top-action-panel.compact {
      padding: 6px 8px;
      gap: 6px;
      border-radius: 12px;
    }

    /* Keep panel visually hidden by default; allow explicit .show to reveal */
    #top-action-panel { display: none; }
    #top-action-panel.show, .top-action-panel.show { display: flex; }
  }

  /* Clean up stray properties removed (were outside any selector) and explicitly enable panel on desktop when .show present */
  @media (min-width: 769px) {
    #top-action-panel.show, .top-action-panel.show {
      display: flex;
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 12000;
      pointer-events: auto;
    }
  }

  /* Move delete button into the grid flow and align under cart button */
  .favorite-card .favorite-remove-btn {
    position: static !important;
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    justify-self: center;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Price styling compact */
  .favorite-card p.mb-0 { font-size: 14px !important; margin: 0; }
  .favorite-card .stock-badge { width: 22px !important; height: 22px !important; font-size: 12px !important; }

  /* Ensure overall spacing doesn't overflow mobile viewport */
  .favorite-card .d-flex.gap-2 { gap: 8px !important; }
}

/* --- Favorites V2 (based on provided mockup) --- */
.favorite-card-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
  box-shadow: 0 10px 24px rgb(0 0 0 / 6%);
  transition: transform .12s ease, box-shadow .18s ease;
}
.favorite-card-v2:active { transform: translateY(1px); }

.favorite-card-v2 .fav-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-block;
}
.favorite-card-v2 .fav-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.favorite-card-v2 .fav-body-v2 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favorite-card-v2 .fav-title {
  margin: 0; font-size:15px; font-weight:600; color:var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

  /* Standard spec property for browsers that support it */
  line-clamp: 2;
}

.favorite-card-v2 .fav-desc {
  margin: 0; font-size:13px; color:var(--text-secondary); line-height:1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

  /* Standard spec property for browsers that support it */
  line-clamp: 2;
}
.favorite-card-v2 .fav-actions { flex: 0 0 auto; display:flex; align-items:center; gap:8px; }

.fav-heart {
  width:40px; height:40px; border-radius:8px; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--danger); transition: transform .12s ease, background .12s ease;
}
.fav-heart:hover { transform: translateY(-2px); }
.fav-heart .icon { width:18px; height:18px; fill: currentcolor; stroke: none; }

@media (max-width: 768px) {
  .favorite-card-v2 { padding: 10px; border-radius: 12px; }
  .favorite-card-v2 .fav-thumb { width:64px; height:64px; }
  .fav-heart { width:36px; height:36px; }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-card-v2, .fav-heart { transition: none !important; }
}

/* Tight desktop + mobile neutral layout: reduce empty space and balance elements */
.fav-body { display:flex; flex-direction:column; gap:6px; padding:0; }
.fav-body h6.mb-1 { font-weight:600; margin-bottom:2px; }
.fav-body .d-flex.gap-2 { margin:0; }
.favorite-card { padding: 10px 12px; gap: 10px; }
.favorite-card .photo { box-shadow: none; }
.favorite-card .cart-glass-btn { min-width: 0; max-width: 100%; }
.favorite-card .cart-glass-btn span { padding: 6px 10px; font-size: 12px; gap: 4px; }

@media (max-width: 375px) {
  .favorite-card .cart-glass-btn span { padding: 5px 8px; font-size: 11px; }
}

/* Compact cart button used inside favorite cards on desktop */
.cart-btn-compact { width: auto !important; min-width: 88px !important; max-width: 220px; display:inline-flex; align-items:center; justify-content:center; }

/* Ensure v2 favorite card doesn't let cart button expand to full width */
.favorite-card-v2 .cart-glass-btn, .favorite-card-v2 .cart-btn-compact {
  width: auto !important;
  min-width: 88px !important;
  max-width: 160px !important;
  display: inline-flex !important;
}

/* Portrait grid layout for favorites (mockup skeleton) */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.favorite-card-grid {
  display: flex;
  flex-direction: row;
  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .18s ease;
}
.favorite-card-grid:hover { transform: translateY(-4px); }
.favorite-card-grid .fav-thumb-grid { width:40%; height: 140px; overflow:hidden; background:var(--glass-color); }
.favorite-card-grid .fav-thumb-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.favorite-card-grid .fav-body-grid { padding: 12px; display:flex; flex-direction:column; gap:8px; min-height:84px; }
.favorite-card-grid .fav-title { margin:0; font-size:15px; font-weight:600; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-clamp:2; }
.favorite-card-grid .fav-desc { margin:0; font-size:13px; color:var(--text-secondary); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-clamp:2; }
.favorite-card-grid .fav-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.favorite-card-grid .fav-actions { display:flex; gap:8px; align-items:center; }
.favorite-card-grid .fav-heart { width:40px; height:40px; border-radius:10px; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--danger); }

@media (max-width: 768px) {
  .favorites-grid { grid-template-columns: 1fr; }
  .favorite-card-grid .fav-thumb-grid { height: 120px; }

  /* Кнопка корзины в избранном - только иконка на мобильных */
  .favorite-card .cart-glass-btn span,
  .favorite-card-grid .cart-glass-btn span,
  .favorite-card-v2 .cart-glass-btn span {
    padding: 8px !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }

  .favorite-card .cart-glass-btn span svg,
  .favorite-card-grid .cart-glass-btn span svg,
  .favorite-card-v2 .cart-glass-btn span svg {
    margin: 0 !important;
  }

  /* Скрываем текст в кнопке корзины */
  .favorite-card .cart-glass-btn span > :not(svg),
  .favorite-card-grid .cart-glass-btn span > :not(svg),
  .favorite-card-v2 .cart-glass-btn span > :not(svg) {
    display: none !important;
  }
}

/* Slightly more compact desktop presentation */
@media (min-width: 769px) {
  .favorite-card { display:flex; align-items:center; gap:12px; padding:12px; }
  .favorite-card img.photo { width:84px; height:84px; border-radius:12px; }
  .favorite-card .fav-body { gap:8px; }

  /* prevent cart button from stretching full width inside favorite cards on desktop */
  .favorite-card .cart-glass-btn { margin-left: auto; width: auto !important; max-width: 160px; display:inline-flex; }
  .favorite-card .favorite-remove-btn { position: static; margin-left: 8px; }
}

/* iOS-style Add-to-Cart button inside favorites (theme-aware glass button) */
.fav-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgb(0 0 0 / 6%);
  background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 55%));
  color: var(--text);
  box-shadow: 0 6px 18px rgb(0 0 0 / 6%), inset 0 1px 0 rgb(255 255 255 / 60%);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fav-cart-btn:active { transform: translateY(1px) scale(.995); }

/* Dark theme variant */
:root[data-theme='dark'] .fav-cart-btn,
[data-theme='dark'] .fav-cart-btn {
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));
  color: var(--text);
  border: 1px solid rgb(255 255 255 / 5%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 36%), inset 0 1px 0 rgb(255 255 255 / 2%);
}

/* Calm theme variant */
:root[data-theme='calm'] .fav-cart-btn,
[data-theme='calm'] .fav-cart-btn {
  background: linear-gradient(180deg, rgb(139 125 107 / 90%), rgb(139 125 107 / 70%));
  color: #fff;
  border: 1px solid rgb(139 125 107 / 30%);
  box-shadow: 0 6px 18px rgb(139 125 107 / 20%), inset 0 1px 0 rgb(255 255 255 / 30%);
}

/* Compact variant used on narrow screens */
@media (max-width: 480px) {
  .fav-cart-btn { padding: 8px 10px; font-size: 13px; border-radius: 16px; }
}

/* Icon-only button on mobile devices */
@media (max-width: 768px) {
  .fav-cart-btn span { display: none; }

  .fav-cart-btn { 
    padding: 8px !important; 
    width: 36px !important; 
    height: 36px !important; 
    min-width: 36px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  .fav-cart-btn svg.icon { 
    margin-right: 0 !important; 
    width: 18px !important; 
    height: 18px !important; 
  }
}

/* Stock status badge - простой статический статус */

/* Star Rating Component */
.c-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0; /* reset so stars sized by width/height */
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
}

/* new star SVG styles: use inline SVGs from stars() function */
.c-rating .star { width:20px; height:20px; flex-shrink:0; display:inline-block; color: var(--accent); }
.c-rating .star path { vector-effect: non-scaling-stroke; }
.c-rating button { opacity: 0.3; }

/* Make stars slightly larger on small screens but keep layout stable */
@media (max-width: 768px) {
  .c-rating .star { width:24px; height:24px; }
}

/* Make stars larger and more tappable on small screens */
@media (max-width: 768px) {
  .c-rating button {
    width: 32px;
    height: 32px;
    background-size: contain;
  }
}

/* Very small screens: ensure labels and spacing adapt */
@media (max-width: 420px) {
  .c-rating {
    padding: 8px;
  }
  .c-rating .star { width:20px; height:20px; }
}

.c-rating[data-rating-value="0"] button:nth-child(-n+0),
.c-rating[data-rating-value="0.25"] button:nth-child(-n+1),
.c-rating[data-rating-value="0.5"] button:nth-child(-n+1),
.c-rating[data-rating-value="0.75"] button:nth-child(-n+1),
.c-rating[data-rating-value="1"] button:nth-child(-n+1),
.c-rating[data-rating-value="1.25"] button:nth-child(-n+2),
.c-rating[data-rating-value="1.5"] button:nth-child(-n+2),
.c-rating[data-rating-value="1.75"] button:nth-child(-n+2),
.c-rating[data-rating-value="2"] button:nth-child(-n+2),
.c-rating[data-rating-value="2.25"] button:nth-child(-n+3),
.c-rating[data-rating-value="2.5"] button:nth-child(-n+3),
.c-rating[data-rating-value="2.75"] button:nth-child(-n+3),
.c-rating[data-rating-value="3"] button:nth-child(-n+3),
.c-rating[data-rating-value="3.25"] button:nth-child(-n+4),
.c-rating[data-rating-value="3.5"] button:nth-child(-n+4),
.c-rating[data-rating-value="3.75"] button:nth-child(-n+4),
.c-rating[data-rating-value="4"] button:nth-child(-n+4),
.c-rating[data-rating-value="4.25"] button:nth-child(-n+5),
.c-rating[data-rating-value="4.5"] button:nth-child(-n+5),
.c-rating[data-rating-value="4.75"] button:nth-child(-n+5),
.c-rating[data-rating-value="5"] button:nth-child(-n+5) {
  opacity: 1;
}

/* Синие звезды в темной теме */
[data-theme="dark"] .c-rating[data-rating-value="0"] button:nth-child(-n+0),
[data-theme="dark"] .c-rating[data-rating-value="0.25"] button:nth-child(-n+1),
[data-theme="dark"] .c-rating[data-rating-value="0.5"] button:nth-child(-n+1),

  
.lightning {
  display: flex;
  position: relative;
  margin: 0;
  filter: url("#squiggly-0");
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--lightning-size, 3) * 0.5vmin);
  perspective: 1000px;
  padding: calc(var(--lightning-size, 3) * 1vmin);
  overflow: visible;
  transform-style: preserve-3d;
  isolation: isolate;

  --lightning-size: 3;
  --lightning-gold: var(--accent);
  --lightning-gold-deep: color-mix(in srgb, var(--accent) 70%, black 30%);
  --lightning-ink: rgb(22 12 3);
  --lightning-text-depth: rgb(42 22 23);
  --lightning-frame: var(--accent);
}

.lightning::before,
.lightning::after {
  content: '';
  position: absolute;
  inset: calc(var(--lightning-size, 3) * -1.4vmin);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.lightning::before {
  background: radial-gradient(circle at 50% 50%, rgb(255 239 159 / 55%), rgb(255 239 159 / 5%) 60%, transparent 85%);
  filter: blur(calc(var(--lightning-size, 3) * 0.9vmin));
  animation: ambientGlow 8s ease-in-out 0.8s infinite alternate;
}

.lightning::after {
  background: linear-gradient(120deg, rgb(255 255 255 / 0%) 20%, rgb(255 255 255 / 70%) 45%, rgb(255 255 255 / 0%) 70%);
  transform: translateX(-120%) skewX(-15deg);
  mix-blend-mode: screen;
  animation: flashSweep 9s cubic-bezier(0.6, 0, 0.2, 1) 2s infinite;
  z-index: 3;
}

.lightning span {
  --tag-delay: 0.45s;

  color: #21160b;
  letter-spacing: calc(var(--lightning-size, 3) * 0.45vmin);
  font-size: clamp(0.7rem, 2.5vw, 1rem);
  padding: calc(0.45 * 1rem) calc(0.85 * 1rem);
  margin: 0;
  text-align: center;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 90%),
    0 2px 0 rgb(0 0 0 / 20%);
  animation: spanBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) var(--tag-delay) forwards,
    medallionGlow 5.5s ease-in-out calc(var(--tag-delay) + 1.4s) infinite,
    ribbonSweep 7s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--tag-delay) + 2s) infinite;
  opacity: 0;
  white-space: nowrap;
  background-image:
    linear-gradient(135deg, #fffef2 0%, #f4e096 45%, #fff6d8 100%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 18%) 0, rgb(255 255 255 / 18%) 6px, rgb(255 255 255 / 0%) 6px, rgb(255 255 255 / 0%) 12px);
  background-blend-mode: multiply;
  background-size: 100% 100%, 220% 220%;
  background-position: center, 0% 0%;
  border: 2px solid var(--lightning-frame);
  border-radius: 10px;
  box-shadow:
    0 2px 4px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
  position: relative;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  z-index: 2;
}

.lightning span::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 14px;
  border: 1.5px solid rgb(59 38 16 / 55%);
  opacity: 0;
  transform: scale(0.92);
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  animation: frameReveal 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) calc(var(--tag-delay) + 0.2s) forwards,
    framePulse 4.5s ease-in-out calc(var(--tag-delay) + 2.2s) infinite;
}

.lightning span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: calc(100% + 24px);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, transparent 0%, rgb(59 38 16 / 80%) 25%, rgb(59 38 16 / 80%) 75%, transparent 100%) top center / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0%, rgb(59 38 16 / 80%) 25%, rgb(59 38 16 / 80%) 75%, transparent 100%) bottom center / 100% 2px no-repeat,
    radial-gradient(circle, rgb(59 38 16 / 90%) 0%, rgb(59 38 16 / 0%) 70%) left 10px top 12px / 12px 12px no-repeat,
    radial-gradient(circle, rgb(59 38 16 / 90%) 0%, rgb(59 38 16 / 0%) 70%) right 10px bottom 12px / 12px 12px no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: decoRise 1s ease calc(var(--tag-delay) + 0.5s) forwards,
    decoPulse 5.5s ease-in-out calc(var(--tag-delay) + 2.4s) infinite alternate;
}

.sapling-emblem {
  --sapling-size: clamp(96px, calc(var(--lightning-size, 3) * 6vmin), 184px);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lightning-size, 3) * 0.35vmin);
  padding: calc(var(--lightning-size, 3) * 0.7vmin) calc(var(--lightning-size, 3) * 0.9vmin);
  transform: translateZ(0);
  animation: saplingFloat 7s ease-in-out 1.1s infinite alternate;
  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 25%));
  z-index: 2;
}

.sapling-emblem::before {
  content: '';
  position: absolute;
  inset: calc(var(--lightning-size, 3) * -0.2vmin);
  background: radial-gradient(circle at 50% 40%, rgb(255 245 189 / 60%), rgb(255 245 189 / 5%) 70%, transparent 90%);
  opacity: 0;
  pointer-events: none;
  animation: saplingHalo 6.5s ease-in-out 1.4s infinite;
  filter: blur(calc(var(--lightning-size, 3) * 0.35vmin));
}

.sapling-emblem svg {
  width: var(--sapling-size);
  height: auto;
  display: block;
  overflow: visible;
  color: var(--lightning-ink);
  animation: saplingGrow 1.15s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.45s both,
    saplingPulse 8s ease-in-out 1.8s infinite;
}

.sapling-emblem svg .leaf {
  stroke: color-mix(in srgb, var(--lightning-ink) 65%, transparent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transform-origin: bottom center;
  animation: leafFlutter 5.5s ease-in-out 1.6s infinite alternate;
}

.sapling-emblem svg .leaf--left {
  transform-origin: 32% 68%;
  animation-delay: 2.1s;
}

.sapling-emblem svg .leaf--right {
  transform-origin: 68% 68%;
}

.sapling-emblem svg .stem,
.sapling-emblem svg .base,
.sapling-emblem svg .seed {
  stroke: color-mix(in srgb, var(--lightning-ink) 80%, transparent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sapling-emblem svg .seed {
  fill: color-mix(in srgb, var(--lightning-gold) 55%, white 35%);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 25%));
}

.sapling-caption {
  margin-top: calc(var(--lightning-size, 3) * 0.3vmin);
  padding: calc(var(--lightning-size, 3) * 0.25vmin) calc(var(--lightning-size, 3) * 0.9vmin);
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--lightning-frame) 85%, transparent);
  background: linear-gradient(135deg, rgb(255 255 255 / 85%), rgb(255 243 185 / 40%));
  font-size: clamp(0.62rem, 2.1vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lightning-ink) 85%, #fff 15%);
  text-shadow: var(--lightning-text-depth) 0 1px 0, rgb(255 255 255 / 80%) 0 2px 4px;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 90%);
  transform: translateZ(0);
}

[data-theme='dark'] .lightning::before {
  background: radial-gradient(circle at 50% 45%, rgb(255 210 92 / 30%), rgb(255 210 92 / 8%) 55%, transparent 80%);
  filter: blur(calc(var(--lightning-size, 3) * 0.6vmin));
  opacity: 1;
}

[data-theme='dark'] .lightning::after {
  background: linear-gradient(120deg, rgb(255 230 160 / 0%) 10%, rgb(255 230 160 / 35%) 45%, rgb(255 230 160 / 0%) 75%);
}

[data-theme='dark'] .lightning span {
  color: #f7e7c2;
  background-image:
    linear-gradient(135deg, rgb(63 47 22 / 95%) 0%, rgb(86 62 26 / 92%) 45%, rgb(63 47 22 / 92%) 100%),
    repeating-linear-gradient(115deg, rgb(255 209 121 / 35%) 0, rgb(255 209 121 / 35%) 6px, rgb(0 0 0 / 15%) 6px, transparent 12px);
  border-color: color-mix(in srgb, #e4bb5e 85%, transparent);
  box-shadow: 0 3px 12px rgb(0 0 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 5%);
  text-shadow: rgb(0 0 0 / 72%) 0 2px 6px;
}

[data-theme='dark'] .lightning span::before {
  border-color: rgb(228 187 94 / 35%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 45%);
}

[data-theme='dark'] .lightning span::after {
  background:
    linear-gradient(90deg, transparent 0%, rgb(228 187 94 / 52%) 25%, rgb(228 187 94 / 52%) 75%, transparent 100%) top center / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0%, rgb(228 187 94 / 52%) 25%, rgb(228 187 94 / 52%) 75%, transparent 100%) bottom center / 100% 2px no-repeat,
    radial-gradient(circle, rgb(228 187 94 / 50%) 0%, rgb(228 187 94 / 0%) 70%) left 10px top 12px / 12px 12px no-repeat,
    radial-gradient(circle, rgb(228 187 94 / 50%) 0%, rgb(228 187 94 / 0%) 70%) right 10px bottom 12px / 12px 12px no-repeat;
}

[data-theme='dark'] .lightning > * {
  color: #ffe4dc;
  border-color: color-mix(in srgb, var(--lightning-frame) 85%, transparent);
  box-shadow: var(--lightning-ink) 0 6px 14px, var(--lightning-ink) 0 24px 52px -18px;
  filter: drop-shadow(0 18px 38px rgb(0 0 0 / 55%));
}

[data-theme='dark'] .lightning > *::before {
  background: radial-gradient(circle at 30% 30%, rgb(255 216 115 / 28%), transparent 58%);
}

[data-theme='dark'] .lightning > *::after {
  border-color: rgb(228 187 94 / 25%);
}

[data-theme='dark'] .sapling-emblem {
  filter: drop-shadow(0 20px 36px rgb(0 0 0 / 65%));
}

[data-theme='dark'] .sapling-emblem::before {
  background: radial-gradient(circle at 50% 45%, rgb(255 215 120 / 45%), rgb(255 215 120 / 8%) 60%, transparent 85%);
}

[data-theme='dark'] .sapling-emblem svg .leaf {
  stroke: rgb(255 231 168 / 45%);
}

[data-theme='dark'] .sapling-emblem svg .seed {
  fill: color-mix(in srgb, #f1d37b 70%, #352710 30%);
}

[data-theme='dark'] .sapling-caption {
  background: linear-gradient(135deg, rgb(78 60 26 / 85%), rgb(48 38 18 / 90%));
  color: #f8e8c8;
  border-color: rgb(228 187 94 / 55%);
  text-shadow: rgb(0 0 0 / 70%) 0 2px 6px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.lightning > * {
  --block-delay: 0s;

  margin: 0;
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: calc(var(--lightning-size, 3) * 0.9vmin) calc(var(--lightning-size, 3) * 1.8vmin);
  background-image:
    linear-gradient(135deg, var(--lightning-gold) 0%, var(--lightning-gold-deep) 45%, var(--lightning-gold) 100%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--lightning-gold) 65%, transparent) 0, color-mix(in srgb, var(--lightning-gold) 65%, transparent) 10px, transparent 10px, transparent 20px);
  background-size: 100% 100%, 200% 200%;
  background-position: center, 0% 0%;
  transform: skew(-7deg, -7deg) translateY(50px) rotateX(0deg);
  font-size: calc(var(--lightning-size, 3) * 3vmax);
  animation: bounceIn3D 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) var(--block-delay) forwards,
    floatTilt 6s ease-in-out calc(var(--block-delay) + 1.4s) infinite alternate,
    glowPulse 8s ease-in-out calc(var(--block-delay) + 2.1s) infinite,
    panelTexture 9s linear calc(var(--block-delay) + 2.6s) infinite;
  animation-fill-mode: forwards;
  opacity: 0;
  font-weight: 700;
  color: crimson;
  text-transform: uppercase;
  text-align: right;
  border: 3px solid var(--lightning-ink);
  border-left: 0;
  text-shadow: var(--lightning-text-depth) 0 0 0,
    var(--lightning-text-depth) 0.6691px 0.7431px 0,
    var(--lightning-text-depth) 1.3383px 1.4863px 0,
    var(--lightning-text-depth) 2.0074px 2.2294px 0,
    var(--lightning-text-depth) 2.6765px 2.9726px 0,
    var(--lightning-text-depth) 3.3457px 3.7157px 0,
    var(--lightning-text-depth) 4.0148px 4.4589px 0,
    var(--lightning-text-depth) 4.6839px 5.2020px 0;
  box-shadow: var(--lightning-ink) 0 0 0,
    var(--lightning-ink) 0.8192px 0.5736px 0,
    var(--lightning-ink) 1.6383px 1.1471px 0,
    var(--lightning-ink) 2.4575px 1.7207px 0,
    var(--lightning-ink) 3.2766px 2.2943px 0,
    var(--lightning-ink) 4.0958px 2.8679px 0,
    var(--lightning-ink) 4.9149px 3.4415px 0,
    var(--lightning-ink) 5.7341px 4.0150px 0,
    var(--lightning-ink) 6.5532px 4.5886px 0,
    var(--lightning-ink) 7.3724px 5.1622px 0,
    var(--lightning-ink) 8.1915px 5.7358px 0,
    var(--lightning-ink) 9.0107px 6.3093px 0,
    var(--lightning-ink) 9.8298px 6.8829px 0,
    var(--lightning-ink) 10.6490px 7.4565px 0,
    var(--lightning-ink) 11.4681px 8.0301px 0;
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
  will-change: transform, filter, background-position;
}

.lightning > *::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 30%), transparent 50%);
  opacity: 0;
  animation: shine 2.6s ease-in-out calc(var(--block-delay) + 1s) infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.lightning > *::after {
  content: '';
  position: absolute;
  inset: calc(var(--lightning-size, 3) * -0.6vmin);
  border: 2px solid color-mix(in srgb, var(--lightning-ink) 45%, transparent);
  border-radius: 18px;
  opacity: 0;
  transform: rotate(-1deg) scale(0.94);
  pointer-events: none;
  z-index: 0;
  animation: panelReveal 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) calc(var(--block-delay) + 0.6s) forwards,
    panelDrift 7.5s ease-in-out calc(var(--block-delay) + 2.1s) infinite alternate;
}

.lightning > *:last-child {
  left: calc(var(--lightning-size, 3) * -1vmin);
  position: relative;
  text-align: left;

  --block-delay: 0.3s;
}

.lightning > *:first-child {
  --block-delay: 0s;
}

.lightning > *:first-child span {
  --tag-delay: 0.4s;
}

.lightning > *:last-child span {
  --tag-delay: 0.7s;
}

@keyframes bounceIn3D {
  0% {
    opacity: 0;
    transform: skew(-7deg, -7deg) translateY(100px) scale(0.3) rotateX(90deg);
  }

  30% {
    transform: skew(-7deg, -7deg) translateY(-20px) scale(1.1) rotateX(-10deg);
  }

  50% {
    transform: skew(-7deg, -7deg) translateY(0) scale(1.05) rotateX(5deg);
    opacity: 1;
  }

  65% {
    transform: skew(-7deg, -7deg) translateY(-8px) scale(1.02) rotateX(-3deg);
  }

  80% {
    transform: skew(-7deg, -7deg) translateY(4px) scale(0.98) rotateX(2deg);
  }

  100% {
    opacity: 1;
    transform: skew(-7deg, -7deg) translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes floatTilt {
  0% {
    transform: skew(-7deg, -7deg) translateY(0) scale(1) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: skew(-7deg, -7deg) translateY(-8px) scale(1.01) rotateX(2.5deg) rotateY(-3deg);
  }

  100% {
    transform: skew(-7deg, -7deg) translateY(0) scale(1) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes spanBounce {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.5) rotate(-10deg);
  }

  40% {
    transform: translateY(5px) scale(1.1) rotate(3deg);
  }

  60% {
    transform: translateY(-3px) scale(0.95) rotate(-2deg);
  }

  80% {
    transform: translateY(2px) scale(1.02) rotate(1deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes medallionGlow {
  0%, 100% {
    box-shadow:
      0 2px 4px rgb(0 0 0 / 20%),
      inset 0 1px 0 rgb(255 255 255 / 80%);
  }

  50% {
    box-shadow:
      0 4px 10px rgb(0 0 0 / 25%),
      inset 0 1px 0 rgb(255 255 255 / 92%),
      0 0 12px rgb(255 214 94 / 45%);
  }
}

@keyframes ribbonSweep {
  0% {
    background-position: center, 0% 0%;
  }

  50% {
    background-position: center, 100% 100%;
  }

  100% {
    background-position: center, 0% 0%;
  }
}

@keyframes frameReveal {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  60% {
    opacity: 0.85;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.6;
    transform: scale(0.98);
  }
}

@keyframes framePulse {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  }

  50% {
    opacity: 0.85;
    box-shadow: 0 6px 18px rgb(0 0 0 / 20%);
  }
}

@keyframes decoRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }
}

@keyframes decoPulse {
  0%, 100% {
    opacity: 0.85;
  }

  50% {
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 10px 0 rgb(22 12 3 / 35%)) drop-shadow(0 22px 24px rgb(44 24 4 / 25%));
  }

  45% {
    filter: drop-shadow(0 12px 0 rgb(22 12 3 / 45%)) drop-shadow(0 28px 32px rgb(255 215 64 / 35%));
  }

  65% {
    filter: drop-shadow(0 9px 0 rgb(22 12 3 / 40%)) drop-shadow(0 20px 20px rgb(255 239 159 / 30%));
  }
}

@keyframes panelTexture {
  0% {
    background-position: center, 0% 0%;
  }

  50% {
    background-position: center, 100% 100%;
  }

  100% {
    background-position: center, 0% 0%;
  }
}

@keyframes panelReveal {
  0% {
    opacity: 0;
    transform: rotate(-4deg) scale(0.85);
  }

  70% {
    opacity: 0.55;
    transform: rotate(-1.5deg) scale(0.95);
  }

  100% {
    opacity: 0.45;
    transform: rotate(-1deg) scale(0.94);
  }
}

@keyframes panelDrift {
  0% {
    opacity: 0.45;
    transform: rotate(-1deg) scale(0.94);
  }

  50% {
    opacity: 0.6;
    transform: rotate(-0.2deg) scale(0.965);
  }

  100% {
    opacity: 0.42;
    transform: rotate(-1.2deg) scale(0.94);
  }
}

@keyframes saplingFloat {
  0% {
    transform: translate3d(0, 18px, 0) rotate(-5deg) scale(0.95);
  }

  50% {
    transform: translate3d(0, -12px, 0) rotate(3deg) scale(1.02);
  }

  100% {
    transform: translate3d(0, 16px, 0) rotate(-2deg) scale(0.97);
  }
}

@keyframes saplingGrow {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
  }

  60% {
    opacity: 1;
    transform: scale(1.08) translateY(-6px);
  }

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

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

  35% {
    transform: rotate(-7deg);
  }

  70% {
    transform: rotate(5deg);
  }

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

@keyframes saplingPulse {
  0%, 100% {
    filter: drop-shadow(0 6px 12px rgb(0 0 0 / 22%));
  }

  50% {
    filter: drop-shadow(0 12px 24px rgb(244 226 5 / 28%));
  }
}

@keyframes saplingHalo {
  0%, 20%, 100% {
    opacity: 0;
  }

  55% {
    opacity: 0.45;
  }
}

@keyframes ambientGlow {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.35;
    transform: scale(1.06);
  }

  100% {
    opacity: 0.15;
    transform: scale(0.98);
  }
}

@keyframes flashSweep {
  0%, 92% {
    opacity: 0;
    transform: translateX(-120%) skewX(-15deg);
  }

  45% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.8;
    transform: translateX(130%) skewX(-15deg);
  }

  55% {
    opacity: 0;
    transform: translateX(130%) skewX(-15deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-120%) skewX(-15deg);
  }
}

@keyframes shine {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightning,
  .lightning::before,
  .lightning::after,
  .lightning > *,
  .lightning > *::before,
  .lightning > *::after,
  .lightning span,
  .lightning span::before,
  .lightning span::after,
  .sapling-emblem,
  .sapling-emblem::before,
  .sapling-emblem svg,
  .sapling-emblem svg .leaf,
  .sapling-emblem svg .stem,
  .sapling-emblem svg .base,
  .sapling-emblem svg .seed,
  .sapling-caption {
    animation: none !important;
  }
}

.noisy {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAACgtJREFUeF7tnGWIFl8Uxt8xsMUO7MAWO7DFDuxdscUOzCN2YAeuiR3YYu2q2IEtdmCLHdiBLdafPTDw0/ufL16/vXc/nb3cO+/M5T7nOec5Z8b79OmTJE6cOCoUCoVmzJghffv2VfvDhw+SNGlStXv06CFz585Ve86cOdKzZ09jfr58+eT69es6zmv269dPpk+fruM7duyQunXrqn3gwAGpWrWq2teuXZP8+fOrHRkZKevXr1d7yZIl0rFjR7VTpEghb9++VXvFihXStm1btc+dOyfFixdXu1WrVrJ69Wq1L126JIULF1Y7U6ZM8vjxY+N3p06dKgMGDNDxyZMny6BBg9Tet2+fVK9eXe0OHTrI0qVL1X7z5o2kTJlS7aFDh8qECROivNh/3N/f74DbwL/fO13pjR07VkaMGKHHsk6dOrJz5061CckLFy5I0aJFdfzZs2eSPn16tRctWiSdO3dWe9u2bVK/fn21kyRJIh8/fjSO/bJly6R9+/Y6zt8llJo0aSLR0dE6p127drJ8+XLDjXA+f/fEiRNStmxZnS8iEhUVZVyHz7hu3Tpp3ry58by8h4EDB8qUKVN0zpEjR6RixYpqN2rUSDZv3uwgbHkAQw7CljvovXjxQtKmTavHMk6cOPLz50+1CZMHDx5I1qxZdTwmJkYaN26sdp48eeTmzZtqN2vWTDZu3Kj2vXv3JHv27AaUyKrjx4+XYcOG6ZxZs2ZJ79691Y4XL558//5dbbqOSpUqyeHDh3WczE4IE2KDBw+WSZMm6fxXr15J6tSp1c6RI4fcvXtX7WzZssn9+/eN3yWz+2wbO3/06NEyatQone9HKe4E2p5Ay/Vhv9y7ceOG5M2b9zdm+fO4pkqVSl6/fq1zGKweO3ZMypcvr+PlypWT48ePq71r1y6pXbu22gyMCY02bdrIypUrdU6aNGnk5cuXavN+ihUrJufPn9dx/hYDY7oFuo4gls+VK5fcvn3bgDMjCroFP5h3ELbEkNtA2w1kjlmgQAG5evWqHmPmhmfOnJGSJUvqeK1atWT37t1qFylSRC5evKg2r0OmO3XqlJQuXVrnMNDdsmWLNGzYUMeZOz569EgyZ86s4w0aNJCtW7eqnSVLFnn48KHa3bp1k/nz5xs2mXrBggXStWtXI0Kgq6GLqFevnmzfvl3nlyhRQs6ePas2Iw0mF74rcyfQ9gRarg/75R7hwGPMIPbbt28SP358A26xKWcoFNJxBth79uyRmjVr6jilsOHDh8u4ceN0/M6dO5IzZ061a9SoIXv37jVgTnauUKGCHD161LgHQpvsnC5dOnn+/LnBqps2bZKmTZvqOANvPjtdFn+X7sjPtR2ELTHkNtB2A6nc8riOHDlSxowZo0ed7MOcl4Exg1WyOQNmQoYsOW3aNOnfv78BKwbwZGeyOSFJpZoBMBm/U6dOsnDhQv0tPu/EiRNlyJAhOk6Vjip9tWrVZP/+/TqnS5cusnDhQidnWR5AJ2dZbyCZ7tChQ1K5cmUj96SMwwLQmjVrpGXLlgZ7Um6iCk3IkKkJ4T59+sjMmTP1mixsUXaj2kz3QtcRxLBUuQl/3sO8efOke/fuRoLAfNx3I45ELI+g20DbDSRkGFQXKlRILl++rMeYOSPZjSxJ+YhBKRXjFi1ayNq1a/WarC+zcLNq1Spp3bq1EYRnyJBBnj59quO8B16TteZevXrJ7NmzjXyZuTyluSdPnkjGjBl1Pt0aow6u9eHvTqDtCbRcH/bLPeakfq0zdlcIbRaJ/ADyT1mJQSzZnAEzC1WsCxPCZF66kXfv3kny5MkVYleuXJGCBQuqTeZloEspjAxOCY7PQpfC52XQzr0qU6aMnDx50gXSthByPtByBz1CjyzM4g5zXrZ2EG6EDxVpriWTstZMiFEyYjDM2i4DdRZ6GNj/+PFD4saNayjMZF6yNpmX0QWDZ96bL+W5E2h7Ai3Xh/1yj9Bg0MsjzVoqYcKGQ+bIhDDVZuabhBIVYDIdC0CEKgs9LEgx4Cc781nItrwO75nPy2ZLn3ljT43rzvpH2HE+0HIjPQbMPK6ED4tBbJ9gUErllkUoriWLMVdl0yPzTQa0rNUGjTNCYJDMLiyupZzF56LsRpf169cv8TzPKdKWh+635Q7ClrvpkSUpDTEHZCGGgSWVW9pUjKk8MxcmY5J56UaoHhPadDtkT8KQ9WI2jnJ+UIGJ7qtUqVJy+vRphe2GDRskIiJCbT8pcCfQ9gRarg/75R6lJ0KYR5c5LDugWAtmPvt/bBW70wy8eU3Cn3Vkwjyo5st8lqxK1uYzUjlnEkHIJ0qUSD5//my0rHCOf88OwpYYchtou4HsaKIEROaiMsxglXBj8MnXFjiHwTPlLKrNVKfpFjifUCVrE7ZsBeF8tqxQjqO7IAuz5YMymr8P7gTankDL9WG/3OMxJjzZksGAk5CklETYMujlfMpEdBFkvSAlmffAPJdtJ3QRlMiCatx8K4pS3q1btyR37txG/ZoJgl8scxC2xJDbQNsNZEDLTieqr2RGQpvyFBVjqsF0C4QSA+AvX75IwoQJjQIQ2ZnzCU8WrXj/jApYI2YLB5MC2pTpyOaUxXz5zp1A2xNouT7sl3vsB2ZnFIs+zBk5h0oypSoWbsi8ZDpKQ8y7KUkFdUyRtRkkU4JjPs6AnK0mhH+CBAnk69ev6kZYF2YLCl2Q79YchC0x5DbQdgMZfLK2ywCYTYaUpAgH5o9UuRlUE568PlmVATZfeGRTJa9D5iWTssjFgJmBOtcyEWBEEdRG4neIuRNoewIt14f9co+BMV/QIwvzm1dkPQbMDHrJyIQSe6fZ5kEWZr7JCIG/S5bn7wZ98IfzmTjQNVGNp4LNKIINqL7LchC2xJDbQNsNZO2VwS1bMthsyZyUsg9bJggBshvZk1/JoJLMpkrmnrwm83S6GroLupGgHmlGEXQRzH/57JTv/Hq3O4G2J9Byfdgv95gPsnDDb0bxfVsGt0FtEnQFDM7ZksEAm+0i/FAPPxfAHmy6EcKWATzhX6VKFTl48KDmubxnugXm9cy1GWnQHfms7SBsiSG3gbYbSPjweLNjirVjsiRzWLIqWzWoWrMmS2Yk0/EemJMy1ybceB3mvIQn1xL+zIWpirPWzOtwH3yWdyfQ9gRarg/75R6Zlx1Q/JpHUJsHmyep4nKcBRoyIwN4SmqUpKh+010whyVs+c1nXpPuiC6F+TivT7dGVZzuy3214x9hx/lAy430KB+xlkollnVhvt3HIJZ5IjuaKDcRemRSvuRICFOeoh305hTdCKU5vqmULFkyef/+veahlL/IjFSe+Xl2sjaLQQzaeU0GzGRYwpbdaHRNjBYYVFPmYouIKypZnjx/+X/o91v2U9IYogAAAABJRU5ErkJggg==");
}

@media only screen and (max-width: 768px) {
  :root {
    --lightning-size: 2.2;
  }

  .lightning {
    gap: calc(var(--lightning-size, 2.2) * 1vmin);
  }

  .lightning > * {
    border: 2px solid var(--lightning-ink);
    padding: calc(var(--lightning-size, 2.2) * 1.5vmin) calc(var(--lightning-size, 2.2) * 2.5vmin);
    font-size: calc(var(--lightning-size, 2.2) * 2.5vmax);
  }

  .lightning span {
    font-size: clamp(0.65rem, 2.2vw, 0.85rem);
    padding: calc(0.4 * 1rem) calc(0.7 * 1rem);
    letter-spacing: 1.5px;
  }

  .lightning span::before {
    inset: -6px;
  }

  .lightning span::after {
    width: 135%;
    height: calc(100% + 18px);
  }

  .sapling-emblem {
    --sapling-size: clamp(88px, calc(var(--lightning-size, 2.2) * 7vmin), 168px);

    animation-duration: 8.5s;
  }

  .sapling-caption {
    font-size: clamp(0.58rem, 2.4vw, 0.85rem);
    letter-spacing: 0.32em;
    padding: calc(var(--lightning-size, 2.2) * 0.25vmin) calc(var(--lightning-size, 2.2) * 0.8vmin);
  }
}

@media only screen and (max-width: 480px) {
  :root {
    --lightning-size: 1.5;
  }

  .lightning {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--lightning-size, 1.5) * 2vmin);
  }

  .lightning > * {
    width: 85%;
    max-width: 320px;
    border: 2px solid var(--lightning-ink);
    padding: calc(var(--lightning-size, 1.5) * 2vmin) calc(var(--lightning-size, 1.5) * 3.5vmin);
    font-size: clamp(3rem, 15vw, 5rem);
    text-align: center;
  }

  .lightning > *:last-child {
    left: 0;
  }

  .lightning span {
    font-size: clamp(0.55rem, 3.5vw, 0.75rem);
    letter-spacing: 2px;
    padding: calc(0.35 * 1rem) calc(0.65 * 1rem);
    border-width: 1.5px;
  }

  .lightning span::before {
    inset: -5px;
    border-width: 1px;
  }

  .lightning span::after {
    width: 160%;
    height: calc(100% + 16px);
  }

  .sapling-emblem {
    --sapling-size: clamp(118px, 45vw, 210px);

    padding: calc(var(--lightning-size, 1.5) * 1.4vmin);
    animation-duration: 9s;
  }

  .sapling-caption {
    font-size: clamp(0.58rem, 3.1vw, 0.8rem);
    letter-spacing: 0.28em;
    padding: calc(var(--lightning-size, 1.5) * 0.3vmin) calc(var(--lightning-size, 1.5) * 1vmin);
  }
}
.loader { width:44px; height:44px; border:4px solid rgb(0 0 0 / 8%); border-top:4px solid var(--accent); border-radius:50%; animation: spin 1s linear infinite; }
.loader-wrap { display:flex; align-items:center; justify-content:center; padding:10px 0; }

/* mobile-friendly smaller spinner */
@media (max-width:480px) {
  .loader { width:32px; height:32px; border-width:3px; }
  .loader-wrap { padding:8px 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ========== CATALOG BUTTON (Glassmorphism 3D Style) ========== */
@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.catalog-button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

.catalog-button-shadow {
  --shadow-cuttoff-fix: 2em;

  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

.catalog-button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 10%));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  /* Search modal theming - use existing CSS variables and provide fallbacks */
  #search-modal .glass { background: var(--bg-secondary); border-radius: 20px; }

  #search-modal-input {
    border-radius:14px;
    padding:14px 16px;
    font-size:16px;
    background: var(--bg);
    color: var(--text-primary, var(--text));
    border:1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
  }
  #search-modal-input::placeholder { color: var(--text-secondary); }
  #search-modal-results { max-height:360px; overflow-y:auto; margin-top:12px; padding-right:6px; border-radius:12px; }
  #search-modal-results .result-row { border-radius:12px; padding:8px; margin-bottom:8px; }
  #search-modal-results .result-row:last-child { margin-bottom:0; }
  #search-modal-results .result-row .title { font-weight:700; font-size:15px; color: var(--text); }
  #search-modal-results .result-row .meta { font-size:13px; color: var(--text-secondary); margin-top:6px; }
  [data-theme='dark'] #search-modal-input { background: var(--bg-secondary); color: var(--text); }
  [data-theme='dark'] #search-modal .glass { background: var(--glass-color); }

  mask-composite: exclude;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  overflow: visible;
  opacity: 1;
}

.catalog-btn {
  --border-width: clamp(1px, 0.0625em, 4px);

  all: unset;
  cursor: pointer;
  position: relative;
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(
    -75deg,
    rgb(255 255 255 / 5%),
    rgb(255 255 255 / 20%),
    rgb(255 255 255 / 5%)
  );
  border-radius: 999vw;
  box-shadow: inset 0 0.125em 0.125em rgb(0 0 0 / 5%),
    inset 0 -0.125em 0.125em rgb(255 255 255 / 50%),
    0 0.25em 0.125em -0.125em rgb(0 0 0 / 20%),
    0 0 0.1em 0.25em inset rgb(255 255 255 / 20%);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

.catalog-btn:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgb(0 0 0 / 5%),
    inset 0 -0.125em 0.125em rgb(255 255 255 / 50%),
    0 0.15em 0.05em -0.1em rgb(0 0 0 / 25%),
    0 0 0.05em 0.1em inset rgb(255 255 255 / 50%);
}

.catalog-btn span {
  position: relative;
  display: block;
  user-select: none;
  font-family: 'SF Pro Display', -apple-system, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 54px;
  color: rgb(255 255 255);
  text-shadow: 0 0.25em 0.05em rgb(0 0 0 / 10%);
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  padding: 42px 96px;
}

@media (max-width: 768px) {
  .catalog-btn span {
    font-size: 27px;
    padding: 21px 48px;
  }
}

.catalog-btn:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgb(0 0 0 / 12%);
}

.catalog-btn span::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(
    var(--angle-2),
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 50%) 40% 50%,
    rgb(255 255 255 / 0%) 55%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
    var(--angle-2) 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.catalog-btn:hover span::after {
  background-position: 25% 50%;
}

.catalog-btn:active span::after {
  background-position: 50% 15%;

  --angle-2: -15deg;
}

.catalog-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
    from var(--angle-1) at 50% 50%,
    rgb(0 0 0 / 50%),
    rgb(0 0 0 / 0%) 5% 40%,
    rgb(0 0 0 / 50%) 50%,
    rgb(0 0 0 / 0%) 60% 95%,
    rgb(0 0 0 / 50%)
  ),
    linear-gradient(180deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 50%));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1),
    var(--angle-1) 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgb(255 255 255 / 50%);
}

.catalog-btn:hover::after {
  --angle-1: -125deg;
}

.catalog-btn:active::after {
  --angle-1: -75deg;
}

.catalog-button-wrap:has(.catalog-btn:hover) .catalog-button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
}

.catalog-button-wrap:has(.catalog-btn:hover) .catalog-button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

.catalog-button-wrap:has(.catalog-btn:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.catalog-button-wrap:has(.catalog-btn:active) .catalog-btn {
  box-shadow: inset 0 0.125em 0.125em rgb(0 0 0 / 5%),
    inset 0 -0.125em 0.125em rgb(255 255 255 / 50%),
    0 0.125em 0.125em -0.125em rgb(0 0 0 / 20%),
    0 0 0.1em 0.25em inset rgb(255 255 255 / 20%),
    0 0.225em 0.05em 0 rgb(0 0 0 / 5%),
    0 0.25em 0 0 rgb(255 255 255 / 75%),
    inset 0 0.25em 0.05em 0 rgb(0 0 0 / 15%);
}

.catalog-button-wrap:has(.catalog-btn:active) .catalog-button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
}

.catalog-button-wrap:has(.catalog-btn:active) .catalog-button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.catalog-button-wrap:has(.catalog-btn:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgb(0 0 0 / 12%);
}

/* Style for the "In cart" button in catalog style */
.cart-glass-btn {
  --border-width: 2px;

  all: unset;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
  background: linear-gradient(
    -75deg,
    rgb(255 255 255 / 5%),
    rgb(255 255 255 / 20%),
    rgb(255 255 255 / 5%)
  );
  backdrop-filter: blur(10px) saturate(180%);
  border-radius: 999px;
  box-shadow: inset 0 2px 2px rgb(0 0 0 / 5%),
    inset 0 -2px 2px rgb(255 255 255 / 50%),
    0 4px 12px -2px rgb(0 0 0 / 20%),
    0 0 0 var(--border-width) rgb(255 255 255 / 20%) inset;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.cart-glass-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: var(--border-width);
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 50%),
    rgb(255 255 255 / 10%)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cart-glass-btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 2px rgb(0 0 0 / 5%),
    inset 0 -2px 2px rgb(255 255 255 / 50%),
    0 6px 16px -2px rgb(0 0 0 / 25%),
    0 0 0 var(--border-width) rgb(255 255 255 / 30%) inset;
}

.cart-glass-btn:active {
  transform: scale(.97);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%),
    inset 0 -2px 2px rgb(255 255 255 / 30%),
    0 2px 8px -2px rgb(0 0 0 / 20%),
    0 0 0 var(--border-width) rgb(255 255 255 / 15%) inset;
}

.cart-glass-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  user-select: none;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-glass-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgb(255 255 255 / 24%);
  width: 12px;
  height: 12px;
  transform: translate(-50%,-50%) scale(0);

  /* Komplekty banner styles moved to end of file to ensure they take effect */
  opacity: 0.95;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s;
}

.cart-glass-btn.ripple-animate .ripple {
  transform: translate(-50%,-50%) scale(6);
  opacity: 0;
}
  
/* Адаптация кнопки корзины для маленьких экранов */
@media (max-width: 375px) {
  .cart-glass-btn span {
    padding: 10px 12px;
    font-size: 13px;
    gap: 4px;
  }
}
  
@media (max-width: 320px) {
  .cart-glass-btn span {
    padding: 8px 10px;
    font-size: 12px;
    gap: 3px;
  }
}

/* Restore compact card button appearance inside catalog/product grid
  #catalog-products .cart-glass-btn span,
  .col-6 .cart-glass-btn span {
  padding: 10px 12px !important;
  font-size: 14px !important;
  }
  /* Product-page specific layout: full-width cart button, favorite beside it, centered 'no reviews' text */
#product-page .cart-glass-btn {
  margin: 6px;
  text-align: center;
  box-sizing: border-box;
}

/* allow the cart button to take remaining space while favorite stays compact */
#product-page .product-actions .cart-glass-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

/* Komplekty banner rules moved to file end to avoid duplication */
#product-page .product-actions .favorite-btn.like {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#product-page .product-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

#product-page .favorite-btn.like {
  margin: 6px;
  padding: 10px 12px;
  border-radius: 20px;
  min-width: 48px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Center the muted text for the  block on product page */
#product-page .text-muted {
  text-align: center;
}

@media (max-width: 768px) {
  .cart-glass-btn span {
    padding: 12px 16px;
    font-size: 14px;
  }

  
  .reviews-header-mobile {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .reviews-header-mobile h4 {
    text-align: center;
  }

  .reviews-header-mobile button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Theme toggle */
.theme-toggle {
  position:fixed;
  top: calc(25px + var(--safe-area-top, 0px));
  right: 68px;
  width: 50px;
  height: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--glass-color);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:
    var(--shadow-soft),
    0 1px 0 0 rgb(255 255 255 / 30%) inset;
  z-index:40000; /* raised above ai-bar and overlays to ensure clickable */
  pointer-events: auto;
  cursor:pointer;
  transition: background .4s, transform var(--transition), box-shadow .3s ease;
}

/* Hover effects are applied only on devices that actually support hover
  (prevents 'jumping' on touch devices / mobile where :hover can fire briefly) */
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    transform: translateY(-3px);
    box-shadow:
      0 8px 20px rgb(0 0 0 / 12%),
      0 1px 0 0 rgb(255 255 255 / 40%) inset;
  }
}
.theme-toggle i { font-size:22px; color: var(--accent); }

.profile-toggle {
  position:fixed;
  top: calc(25px + var(--safe-area-top, 0px));
  right: 126px;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--glass-color);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:
    var(--shadow-soft),
    0 1px 0 0 rgb(255 255 255 / 30%) inset;
  z-index:1100;
  cursor:pointer;
  transition: background .4s, transform var(--transition), box-shadow .3s ease;
  transform: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  .profile-toggle:hover {
    transform: translateY(-3px);
    box-shadow:
      0 8px 20px rgb(0 0 0 / 12%),
      0 1px 0 0 rgb(255 255 255 / 40%) inset;
  }
}

.profile-toggle .icon {
  width:24px; height:24px;
  color: var(--accent);
}

/* Mobile-specific positioning for theme and profile toggles */
@media (max-width: 480px) {
  .theme-toggle {
    top: 86px !important;
    right: 3px !important;
  }

  .profile-toggle {
    top: 142px !important;
    right: 3px !important;
  }

  /* Ensure glass blocks with padding/margin spacing don't sit under toggles on very small screens */
  .glass.p-3.mb-3 {
    margin-top: 55px !important;
  }
}

/* iOS 2025 Style Buttons */
.btn-success {
  background: var(--accent-gradient);
  border: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow:
    0 8px 20px rgb(var(--accent-rgb) 0.35),
    0 1px 0 0 rgb(255 255 255 / 40%) inset,
    0 -1px 0 0 rgb(0 0 0 / 10%) inset;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-success::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 20%) 0%, transparent 50%);
  opacity: 1;
  transition: opacity 0.25s;
  pointer-events: none;
}

.btn-success:hover {
  box-shadow:
    0 12px 28px rgb(var(--accent-rgb) 0.45),
    0 1px 0 0 rgb(255 255 255 / 50%) inset,
    0 -1px 0 0 rgb(0 0 0 / 15%) inset;
  transform: translateY(-2px) scale(1.01);
}

.btn-success:hover::before {
  opacity: 0.7;
}

.btn-success:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 4px 12px rgb(var(--accent-rgb) 0.3),
    0 1px 0 0 rgb(0 0 0 / 10%) inset;
}

.btn-success:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgb(var(--accent-rgb) 0.3),
    0 8px 20px rgb(var(--accent-rgb) 0.35),
    0 1px 0 0 rgb(255 255 255 / 40%) inset;
}

/* Категории каталога */
.category-name {
  color: var(--text-primary);
}

.category-count {
  color: var(--text-secondary);
}

[data-theme="dark"] .category-name {
  color: var(--accent);
}

[data-theme="dark"] .category-count {
  color: #000;
}

/* iOS 2025 Clean Button Style */
.btn-success {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  will-change: transform;
}

.btn-success::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
  transparent,
  rgb(255 255 255 / 30%),
  transparent
);
  transition: left 0.5s ease;
  pointer-events: none;
}

.btn-success:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgb(var(--accent-rgb) 0.45);
}

.btn-success:hover::before {
  left: 100%;
}

.btn-success:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) 0.25);
}

/* iOS 2025 Secondary Buttons */
.btn-outline-secondary,
.btn-outline-success {
  border: 1.5px solid var(--border-color);
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: rgb(var(--accent-rgb) 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 2px 8px rgb(0 0 0 / 8%),
    0 1px 0 0 rgb(255 255 255 / 20%) inset;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-secondary:hover,
.btn-outline-success:hover {
  background: rgb(var(--accent-rgb) 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 12%),
    0 1px 0 0 rgb(255 255 255 / 30%) inset;
}

.btn-outline-secondary:active,
.btn-outline-success:active {
  transform: scale(0.98);
  box-shadow:
  0 1px 4px rgb(0 0 0 / 10%) inset;
}

/* iOS 2025 Danger Buttons */
.btn-outline-danger {
  border: 1.5px solid rgb(239 68 68 / 30%);
  font-weight: 600;
  backdrop-filter: blur(20px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme */
[data-theme="light"] .btn-outline-danger {
  color: #ef4444;
  background: rgb(239 68 68 / 8%);
  border-color: rgb(239 68 68 / 30%);
}

[data-theme="light"] .btn-outline-danger:hover {
  background: rgb(239 68 68 / 15%);
  border-color: #ef4444;
  color: #dc2626;
  transform: scale(1.05);
}

/* Dark theme */
[data-theme="dark"] .btn-outline-danger {
  color: #ff6b6b;
  background: rgb(255 107 107 / 12%);
  border-color: rgb(255 107 107 / 35%);
}

[data-theme="dark"] .btn-outline-danger:hover {
  background: rgb(255 107 107 / 20%);
  border-color: #ff6b6b;
  color: #ff8787;
  transform: scale(1.05);
}

.btn-outline-danger:active {
  transform: scale(0.95);
}

/* Fix for btn-group distorted fonts and text */
.btn-group .btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* Improve color palette visibility in light and dark themes */
[data-theme='light'] .btn-group .btn {
  color: #333;
  background: rgb(255 255 255 / 90%);
  border: 1px solid rgb(0 0 0 / 10%);
}

[data-theme='light'] .btn-group .btn:hover {
  background: rgb(255 255 255 / 100%);
  color: #000;
  outline: none;
}

[data-theme='light'] .btn-group .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

[data-theme='dark'] .btn-group .btn {
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
}

[data-theme='dark'] .btn-group .btn:hover {
  background: rgb(255 255 255 / 15%);
  color: #fff;
  outline: none;
}

[data-theme='dark'] .btn-group .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* iOS 2025 Close Button - Unified for all modals */
.btn-close, .modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(120 120 128 / 16%);
  backdrop-filter: blur(20px) saturate(180%);
  border: none;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px rgb(0 0 0 / 12%),
    0 1px 0 0 rgb(255 255 255 / 30%) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.btn-close:hover, .modal-close-btn:hover {
  background: rgb(120 120 128 / 24%);
  transform: scale(1.1);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 18%),
    0 1px 0 0 rgb(255 255 255 / 40%) inset;
}

.btn-close:active, .modal-close-btn:active {
  transform: scale(0.95);
}

[data-theme='dark'] .btn-close {
  background: rgb(142 142 147 / 24%);
  border-color: rgb(255 255 255 / 10%);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius:20px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb) 0.7); }

/* Utility animations */
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

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

@keyframes scaleIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }

@keyframes shimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes fadeUpOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes heartShrink {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
.animate-in { animation: fadeSlideUp .8s var(--transition); }
.fade-in { animation: scaleIn .6s cubic-bezier(.34,1.56,.64,1); }
.review-item { animation: fadeSlideUp .5s ease-out; }

/* Page transitions */
#app {
  transition: opacity .3s ease;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
#app.transitioning { opacity: 0; }

/* Card animations */
.row > div { animation: fadeSlideUp .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.row > div:nth-child(1) { animation-delay: 0.05s; }
.row > div:nth-child(2) { animation-delay: 0.1s; }
.row > div:nth-child(3) { animation-delay: 0.15s; }
.row > div:nth-child(4) { animation-delay: 0.2s; }
.row > div:nth-child(5) { animation-delay: 0.25s; }
.row > div:nth-child(6) { animation-delay: 0.3s; }

/* Loading skeleton */
.skeleton { background: linear-gradient(90deg, var(--glass-color) 25%, rgb(255 255 255 / 50%) 50%, var(--glass-color) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); }

/* Button press animation */
.btn, button { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .3s ease; }
.btn:active, button:active { transform: scale(0.96); }

/* Modal animations */
#cart-modal {
  transition: opacity .35s ease, backdrop-filter .35s ease;
  opacity: 0;
  backdrop-filter: blur(20px) saturate(180%);
  display: flex;
}
#cart-modal:not(.d-none) { opacity: 1; animation: fadeSlideDown .45s cubic-bezier(.34,1.56,.64,1); }

#cart-modal .glass {
  animation: scaleIn .5s cubic-bezier(.34,1.56,.64,1) .1s backwards;
  box-shadow:
    0 20px 60px rgb(0 0 0 / 30%),
    0 1px 0 0 rgb(255 255 255 / 30%) inset;
}

[data-theme='dark'] #cart-modal .glass {
  box-shadow:
    0 20px 60px rgb(0 0 0 / 50%),
    0 1px 0 0 rgb(255 255 255 / 15%) inset;
}

@media (min-width: 768px) {
  #cart-modal .glass {
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  #cart-modal .glass {
    width: 95%;
    max-width: none;
    padding: 24px;
    border-radius: 24px 24px 0 0;
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  #cart-modal:not(.d-none) .glass {
    transform: translateY(0);
  }

  #cart-modal .glass::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
  }

  #cart-modal h4 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 8px;
  }

  #cart-modal #cart-items {
    margin-bottom: 20px;
    max-height: calc(70vh - 200px);
  }

  #cart-modal .flex-shrink-0 {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
  }

  #cart-modal .btn {
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
  }

  #cart-modal .btn:last-child {
    margin-bottom: 0;
  }
}

/* Input focus */
.ai-input { transition: transform .2s ease; }
.ai-input:focus { transform: scale(1.01); }

/* Smooth scroll */
* { scroll-behavior: smooth; }

/* Safe area support */
@supports(padding: max(0px)) { .nav-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } }

/* Icon system */
.icon {
  width:22px; height:22px;
  stroke:currentcolor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  display:inline-block; vertical-align:middle;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.icon[fill="currentColor"] { fill:currentcolor; stroke:none; }

/* Normalize nav icons to consistent visual size */
.nav-btn .icon { width:24px; height:24px; color: var(--text); }
.nav-btn.active .icon {color: var(--accent);filter: drop-shadow(0 4px 10px rgb(var(--accent-rgb) 0.35));}

/* Mobile menu button */
.mobile-menu-btn { display: none; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: block; }
}
.btn .icon, .theme-toggle .icon, .profile-toggle .icon {width: 45px;height: 45px;}
.theme-toggle .icon { width:26px; height:26px; }
.theme-toggle:active .icon { transform: rotate(180deg); }
.btn .icon {width:20px;height:20px;}
.btn-success .icon { color: #fff !important; stroke: #fff !important; }
[data-theme='dark'] .btn-success .icon { color: #fff !important; stroke: #fff !important; }

/* Icon colors for light theme */
#icon-cart, #icon-info, #icon-star, #icon-robot, #icon-telegram { color: var(--accent); }
[data-theme='dark'] #icon-robot, [data-theme='dark'] #icon-telegram { color: #ff6b81; }

/* Custom styles */
h6.mb-2 { color: var(--accent); }
h6.mb-1 { color: var(--accent); }
[data-theme='dark'] h6.mb-2 { color: var(--accent); }
[data-theme='dark'] h6.mb-1 { color: var(--accent); }
.row.g-3, .row.g-4 { padding-bottom: 6rem; }
button.btn.btn-light.btn-lg.glass { color: white; background: #131f34; }

/* Breadcrumb gap fallback for older browsers */
.breadcrumb-container > * { margin-right: 8px; }
.breadcrumb-container > *:last-child { margin-right: 0; }

/* iOS 2025 Liquid Glass Image Placeholder */
@keyframes glassShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.img-loading-placeholder {
  background: var(--glass-color);
  backdrop-filter: url("#liquid-glass") blur(20px) brightness(1.05) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  position: relative;
  overflow: hidden;
  opacity: 0.9;
  transition: opacity 0.4s ease;
  box-shadow:
    inset 0 0 20px rgb(255 255 255 / 10%),
    inset 0 1px 2px rgb(255 255 255 / 20%);
}

.img-loading-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgb(255 255 255 / 15%) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: glassShimmer 2s linear infinite;
}

[data-theme='dark'] .img-loading-placeholder {
  background: color-mix(in srgb, var(--glass-color) 80%, transparent);
  box-shadow:
    inset 0 0 20px rgb(255 255 255 / 5%),
    inset 0 1px 2px rgb(255 255 255 / 10%);
}
 
.img-loading-placeholder img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

img[src]:not([src=""]) {
  opacity: 1;
}

img.img-loaded {
  opacity: 1 !important;
}

/* Mobile: disable card press transforms to avoid cards 'jumping' on tap */
@media (max-width: 1024px) {
  .product-card:active, .catalog-card:active, .card:active, .favorite-card:active, .favorite-card-v2:active, .favorite-card-grid:active,
  .card-hover:active, .card:hover:active {
    transform: none !important;
    transition: none !important;
  }

  /* also disable small translateY nudges on buttons inside cards */
  .product-card .cart-glass-btn:active, .favorite-card .fav-cart-btn:active, .fav-cart-btn:active {
    transform: none !important;
  }
}
 
img {
  content-visibility: auto;
  will-change: opacity;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Review Modal - Wildberries/style + iOS Glass Effect */
#review-modal {
  transition: opacity 0.25s ease;
  align-items: center;
  padding: 20px 0;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  backdrop-filter: blur(20px) saturate(180%);
}
#review-modal.d-none { opacity: 0; pointer-events: none; }

#review-modal .glass {
  max-width: 680px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 8px 32px 0 rgb(31 38 135 / 37%),
    0 0 1px 0 rgb(255 255 255 / 50%) inset;
  background: rgb(255 255 255 / 75%);
  backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgb(255 255 255 / 18%);
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme='dark'] #review-modal .glass {
  background: rgb(30 30 30 / 80%);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow:
    0 8px 32px 0 rgb(0 0 0 / 50%),
    0 0 1px 0 rgb(255 255 255 / 20%) inset;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
 
.interactive-glass {
  will-change: transform;
  transition: box-shadow 0.2s ease, backdrop-filter 0.2s ease;
  user-select: none;
  touch-action: none;
}

.interactive-glass:active {
  box-shadow:
    0 12px 48px 0 rgb(31 38 135 / 50%),
    0 0 2px 0 rgb(255 255 255 / 60%) inset;
  backdrop-filter: url("#liquid-glass") blur(45px) brightness(1.12) saturate(200%);
}

[data-theme='dark'] .interactive-glass:active {
  box-shadow:
    0 12px 48px 0 rgb(0 0 0 / 70%),
    0 0 2px 0 rgb(255 255 255 / 30%) inset;
}

#review-modal-main-image {
  transition: opacity 0.15s ease;
  cursor: zoom-in;
}

.review-modal-image {
  max-height: calc(100vh - 160px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#review-modal .btn-close {
  opacity: 0.7;
  z-index: 10;
  background-color: rgb(255 255 255 / 95%);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

/* Reduce star size inside review modal on small screens to avoid extra vertical scroll */
@media (max-width: 520px) {
  #review-modal .c-rating {
    gap: 6px;
  }

  #review-modal .c-rating button {
    width: 18px;
    height: 18px;
    background-size: contain;
  }

  /* If modal contains additional padding/labels, reduce them slightly */
  #review-modal .glass { padding: 12px; }
  #review-modal .modal-body { padding-top: 8px; }
  #review-modal .review-caption, #review-modal .review-meta { font-size: 13px; }
}

#review-modal .btn-close:hover {
  opacity: 1;
  background-color: rgb(255 255 255 / 100%);
  transform: scale(1.05);
}

[data-theme='dark'] #review-modal .btn-close {
  background-color: rgb(50 50 50 / 95%);
  border: 1px solid rgb(255 255 255 / 10%);
}

/* Scrollbar для галереи */
#review-modal-content > div::-webkit-scrollbar { height: 6px; }
#review-modal-content > div::-webkit-scrollbar-track { background: transparent; }
#review-modal-content > div::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

/* Cart animations */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.cart-btn.added { animation: cartBounce 0.5s cubic-bezier(.34,1.56,.64,1); }
  
#favorites-count {
  animation: scaleIn 0.4s cubic-bezier(.34,1.56,.64,1);
  position: absolute;
  top: 8px;
  right: calc(50% - 16px);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
  color-mix(in srgb, var(--accent) 100%, #fff 10%) 0%,
  var(--accent) 100%);
  color: white;
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  line-height: 1;
  z-index: 10;
  box-shadow:
    0 0 0 2px var(--bg),
    0 2px 8px rgb(var(--accent-rgb) 0.4),
    inset 0 1px 1px rgb(255 255 255 / 50%);
  border: none;
}

[data-theme='dark'] #cart-count,
[data-theme='dark'] #favorites-count {
  box-shadow:
    0 0 0 2px var(--bg),
    0 2px 8px rgb(var(--accent-rgb) 0.5),
    inset 0 1px 1px rgb(255 255 255 / 30%);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Prevent image link opening */
img { pointer-events: none; user-select: none; }
.photo-card img, .glass img { cursor: default; }

/* Allow clicks on gallery thumbnails */
.photo[onclick] { pointer-events: auto !important; cursor: pointer !important; }

/* Winter SVG Scene Styles */
#winterSceneContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%) scale(1.2);
  height: 100%;
  overflow: visible;
  z-index: 0;
}

#winterSceneContainer object,
#winterSceneSVG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

#winterScene {
  visibility: hidden;
  width: 100%;
  height: 100%;
}

/* Modal overlay styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(10px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Review modal overlay - different backdrop */
#review-modal.modal-overlay,
#write-review-modal.modal-overlay,
#cart-modal.modal-overlay,
#ai-chat-modal.modal-overlay {
  backdrop-filter: blur(20px) saturate(180%);
  z-index: 2500;
}

/* Seedling gallery modal overlay - different backdrop */
#seedling-gallery-modal.modal-overlay {
  background: rgb(0 0 0 / 90%);
  backdrop-filter: blur(8px);
  z-index: 25010;
}

/* Cart modal overlay - centered */
#cart-modal.modal-overlay {
  align-items: center;
  justify-content: center;
}

/* Modal card styles */
.modal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}

/* Auth modal specific styles */
.auth-modal-card {
  width: 90%;
  max-width: 400px;
  border-radius: 28px;
}

.auth-modal-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
}

/* Review modal styles */
.review-modal-card {
  width: 94%;
  max-width: 720px;
  border-radius: 20px;
  max-height: 90vh;
  overflow: auto;
}

/* Write review modal styles */
.write-review-modal-card {
  width: 94%;
  max-width: 720px;
  border-radius: 20px;
  max-height: 92vh;
  overflow: auto;
}

/* Cart modal styles */
.cart-modal-card {
  width: 94%;
  max-width: 760px;
  max-height: 90vh;
  border-radius: 20px;
}

/* AI chat modal styles */
.ai-chat-modal-card {
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 28px;
}

/* Seedling gallery modal styles */
.seedling-gallery-modal-card {
  width: 95%;
  max-width: 1100px;
  max-height: 92vh;
  border-radius: 18px;
}

/* Privacy modal styles */
.privacy-modal-card {
  width: 94%;
  max-width: 720px;
  border-radius: 20px;
  max-height: calc(80vh - 140px);
  overflow-y: auto;
}

/* Close button styles */
.btn-close {
  background: rgb(255 255 255 / 95%);
  color: #000;
  border: 1px solid rgb(0 0 0 / 8%);
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  opacity: 1;
}

[data-theme='dark'] .btn-close {
  background: rgb(36 36 36 / 92%);
  color: #fff;
  border-color: rgb(255 255 255 / 6%);
}

.circular-close {
  border-radius: 50%;
  background: var(--glass-color);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* Animated toast container placed high above modals */
#floating-toast-container {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10050; /* above modals which use ~9999-3000 */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 640px;
}

/* On very small screens, nudge toasts lower to avoid overlapping top-right icons */
@media (max-width: 520px) {
  #floating-toast-container { top: calc(56px + env(safe-area-inset-top, 0px)); }
}
#floating-toast-container .toast-item { pointer-events: auto; }

/* Input animation styles - Apple 2025 inspired: subtle scale + soft glow for success, gentle shake + warm glow for error */
#code-input { position: relative; z-index: 10010; transition: box-shadow 200ms ease, transform 220ms cubic-bezier(.2,.9,.2,1); }

.code-success {
  animation: codeSuccessAnim 520ms cubic-bezier(.2,.9,.25,1) both;
}

.code-error {
  animation: codeErrorAnim 520ms cubic-bezier(.2,.9,.25,1) both;
}

@keyframes codeSuccessAnim {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(34 197 94 / 0%); }
  30% { transform: scale(1.03); box-shadow: 0 8px 30px -6px rgb(34 197 94 / 28%); }
  70% { transform: scale(1.01); box-shadow: 0 6px 18px -8px rgb(34 197 94 / 18%); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(34 197 94 / 0%); }
}

@keyframes codeErrorAnim {
  0% { transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgb(239 68 68 / 0%); }
  15% { transform: translateX(-6px) scale(0.995); box-shadow: 0 8px 28px -8px rgb(239 68 68 / 24%); }
  40% { transform: translateX(6px) scale(0.995); }
  60% { transform: translateX(-4px) scale(1); }
  100% { transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgb(239 68 68 / 0%); }
}

/* Ensure seedling gallery close button is always visible on desktop and mobile */
#seedling-gallery-modal .btn-close {
  z-index: 99999 !important;
  background: rgb(255 255 255 / 95%) !important;
  color: #000 !important;
  border: 1px solid rgb(0 0 0 / 8%) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  width:40px !important;
  height:40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%) !important;
  opacity: 1 !important;
}

[data-theme='dark'] #seedling-gallery-modal .btn-close {
  background: rgb(36 36 36 / 92%) !important;
  color: #fff !important;
  border-color: rgb(255 255 255 / 6%) !important;

  /* Normalize all nav icons to consistent size and appearance */
  .nav-bar .nav-btn svg.icon {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    padding: 0 !important;
  }

  /* Optional helper: if an icon needs a circular soft background, add `.icon-circle` to the svg */
  .nav-bar .nav-btn svg.icon.icon-circle {
    border-radius: 999px !important;
    background: rgb(0 0 0 / 4%) !important;
    padding: 4px !important;
  }

  /* Light theme: make the last 5 nav icons white, but when an individual button
  is active its icon becomes black. Adjust `-n+5` to `-n+3` if you prefer last 3. */
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5) svg.icon {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
  }

  /* Force fill/stroke on the actual rendered child elements as some browsers
  keep attributes from the <symbol> content; target child elements too. */
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5) svg.icon,
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5) svg.icon * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
  }

  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5).active svg.icon,
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5)[aria-pressed="true"] svg.icon,
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5).active svg.icon *,
  [data-theme='light'] .nav-bar .nav-btn:nth-last-child(-n+5)[aria-pressed="true"] svg.icon * {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
  }
}

/* Responsive product photo heights: desktop large, mobile compact */
.product-photo {
  height: 600px;
  transition: height 220ms ease;
}

@media (max-width: 600px) {
  .product-photo {
    height: 180px;
  }
}

.ai-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 80px; 
  margin: 0 auto;
  max-width: 480px;
  background: var(--glass-color);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: 40px;
  padding: 14px 18px;
  box-shadow: var(--shadow-pop), 0 1px 0 0 rgb(255 255 255 / 30%) inset, 0 -1px 0 0 rgb(0 0 0 / 10%) inset;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 30000; /* raised to sit above other overlays */
  border: 1px solid var(--glass-border);
  pointer-events: auto;
  transition: bottom .3s cubic-bezier(.4,0,.2,1);
  touch-action: manipulation; /* improve responsiveness on mobile */
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

@media (max-width: 600px) {
  .ai-bar {
    left: 0;
    right: 0;
    bottom: 80px;
    max-width: 100vw;
    border-radius: 24px;
    padding: 10px 8px;
  }
}

.ai-bar.hide {
  bottom: -100px;
  pointer-events: none;
  opacity: 0;
  transition: bottom .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.ai-bar .send-btn, .ai-bar .icon, .ai-bar .ai-input { cursor: pointer; }

/* Moved from inline styles in `oh.html` */

/* app container defaults: padding-bottom */
#app { padding-bottom: 100px; display: block; }

/* Generic small-icon style used inline across the HTML */
.svg-small-icon { width: 28px; height: 28px; vertical-align: middle; }
.icon-gap-right { margin-right: 8px; }

/* Interactive glass variant used in modals */
.glass.interactive-glass { width: 90%; max-width: 400px; border-radius: 28px; pointer-events: auto; background: var(--glass-color); box-shadow: 0 8px 32px rgb(0 0 0 / 30%); }

/* Modal action buttons - rounded primary/outline used inline */
.modal-btn-primary { border-radius:30px; background:var(--accent); border:none; padding:12px; color: #fff; transition: all 0.2s ease; }
.modal-btn-primary:hover { background: var(--accent-gradient); transform: translateY(-1px); box-shadow: 0 4px 12px rgb(var(--accent-rgb) 0.3); }
.modal-btn-outline { border-radius:30px; padding:12px; border: 1px solid rgb(0 0 0 / 10%); background: transparent; color: var(--text); transition: all 0.2s ease; }
.modal-btn-outline:hover { background: rgb(var(--accent-rgb) 0.1); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* Dark theme button styles */
[data-theme='dark'] .modal-btn-outline { border-color: rgb(255 255 255 / 20%); color: var(--text); }
[data-theme='dark'] .modal-btn-outline:hover { background: rgb(var(--accent-rgb) 0.15); border-color: var(--accent); color: var(--accent); }

/* Reusable rounded large button */
.btn-round-lg { border-radius: 30px; padding: 12px; }
.input-rounded { border-radius: 12px; padding: 12px; font-size: 16px; }

/* Fullscreen image container defaults */
#fullscreen-image-container { width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; position:relative; padding: 60px 16px 80px; touch-action: pan-x pinch-zoom; }

[data-theme='dark'] .ai-bar {
  box-shadow:
    var(--shadow-pop),
    0 1px 0 0 rgb(255 255 255 / 15%) inset,
    0 -1px 0 0 rgb(0 0 0 / 30%) inset;
}

/* Apply top margin for .glass.p-3.mb-3 on all pages (global) */

/* Mobile-only: apply top margin for .glass.p-3.mb-3 on all pages */
@media (max-width: 768px) {
  .glass.p-3.mb-3 {
    margin-top: 55px !important;
  }

  /* Ensure centered page cards and common modal cards are pushed down on mobile
  Target only top-level app glass containers and modal cards; do not target small button-like glass elements nested inside those containers. */
  #app > .glass,
  #review-modal .glass,
  #write-review-modal .glass,
  #cart-modal .glass {
    margin-top: 55px !important;
  }

  /* Move floating toast notifications lower on mobile (~20% down the viewport) */
  #floating-toast-container {
    top: calc(20vh + env(safe-area-inset-top, 0px)) !important;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Mobile: collapse AI assistant bar into a compact icon button near profile-toggle */
  .ai-bar {
    position: fixed;
    width: 56px;
    height: 56px;
    bottom: auto;
    top: calc(142px + 8px); /* slightly below profile-toggle */
    right: 3px; /* align with profile-toggle */
    margin: 0;
    max-width: 56px;
    padding: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 40010; /* above profile-toggle */
    box-shadow: var(--shadow-pop);
    cursor: pointer;
  }

  /* Make mobile ai-bar visually match profile-toggle with glass and border */
  .ai-bar { background: var(--glass-color); border: 1px solid var(--glass-border); border-radius: 14px; }
  .ai-bar:active { transform: translateY(0) scale(0.995); }

  /* click animation for mobile send icon: quick pop and rotate */
  @keyframes aiSendPress {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.12) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  .ai-bar .icon.send-mobile { transition: transform 220ms cubic-bezier(.2,.9,.2,1); }
  .ai-bar.ai-pressed .icon.send-mobile { animation: aiSendPress 420ms ease forwards; }
  .ai-bar .icon, .ai-bar .send-btn { width: 28px; height: 28px; }
  .ai-bar .ai-input { display: none; }

  /* AI modal: slide down from top on mobile */
  #ai-chat-modal .glass {
    transform: translateY(-8vh);
    transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
  }

  #ai-chat-modal.modal-overlay:not(.d-none) .glass {
    transform: translateY(0);
  }
}

/* Group theme/profile/ai buttons into a compact stacked cluster at bottom-right on very small screens */
@media (max-width: 480px) {
  .floating-action-cluster {
    position: fixed;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 12px)); /* above nav-bar */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 40050;
    align-items: center;
    pointer-events: none; /* let individual buttons be interactive */
  }

  .floating-action-cluster > button,
  .floating-action-cluster > .ai-bar {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-color);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms ease;
  }

  .floating-action-cluster > button:active,
  .floating-action-cluster > .ai-bar:active {
    transform: translateY(1px) scale(.98);
  }

  /* Ensure icons inside are visually consistent */
  .floating-action-cluster .icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
  }

  /* Place AI button on top of the stack and slightly larger accent ring */
  .floating-action-cluster > .ai-bar {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgb(var(--accent-rgb) 0.18);
  }

  /* Reduce clutter: hide default theme/profile fixed positions on very small screens */
  .theme-toggle, .profile-toggle {
    position: static !important;
    display: none !important;
  }

  /* Provide a small hit area hint for keyboard users */
  .floating-action-cluster > button:focus,
  .floating-action-cluster > .ai-bar:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgb(var(--accent-rgb) 0.12);
  }
}

/* Mobile stacked action buttons (theme / profile / ai) - place vertically with top offset */
@media (max-width: 480px) {
  /* Create a dedicated stack container in the top-right. The HTML may not contain this
  element; use fixed positioning for individual buttons as a fallback. */
  .top-right-action-stack {
    position: fixed;
    top: 25px; /* user requested ~25px offset from top */
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50050;
    align-items: center;
    pointer-events: none; /* allow individual buttons to remain interactive */
  }

  /* Ensure buttons are interactive and occupy stack positions when present */
  .top-right-action-stack > * { pointer-events: auto; }

  /* If the container is not used in HTML, fallback: place buttons individually stacked */
  .theme-toggle {
    position: fixed !important;
    top: 88px !important;
    right: 12px !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    z-index: 50060 !important;
  }

  .profile-toggle {
    position: fixed !important;
    top: 144px!important; /* button height (56) + gap (12) */
    right: 12px !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    z-index: 50060 !important;
  }

  .ai-bar {
    position: fixed !important;
    inset: calc(25px + (56px + 12px) * 2) 12px auto auto !important; /* stack under profile */
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50060 !important;
    pointer-events: auto !important;
  }

  /* Ensure ai-bar send button stays centered in compact mode */
  .ai-bar .send-btn { width: 40px !important; height: 40px !important; }

  /* Hide bottom floating cluster to avoid duplication */
  .floating-action-cluster { display: none !important; }
}

/* Mobile: centered modal search (keeps glass look, not top/bottom sheet) */
@media (max-width: 768px) {
  /* Center the search modal in the viewport */
  #search-modal,
  #search-modal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 14000 !important;
    background: rgb(0 0 0 / 42%) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* PC-specific enhancements for iOS 2025 style */
  @media (min-width: 1025px) {
    #search-modal.modal-overlay {
      background: rgb(0 0 0 / 32%) !important;
      backdrop-filter: blur(32px) !important;
      align-items: flex-start !important;
      padding-top: 80px !important; /* Position higher to avoid nav overlap */
      justify-content: flex-start !important;
    }

    #search-modal .glass,
    #search-modal .modal-card {
      max-width: 800px !important;
      width: 90vw !important;
      border-radius: 28px !important;
      padding: 24px !important;
      box-shadow: 0 32px 80px rgb(4 8 18 / 40%) !important;
      background: color-mix(in srgb, var(--glass-color) 92%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--glass-border) 95%, transparent) !important;
      backdrop-filter: blur(50px) saturate(180%) !important;
      transform: translateY(-20px) scale(0.98) !important;
      opacity: 0 !important;
      transition: transform 0.4s cubic-bezier(.2,.9,.2,1), opacity 0.3s ease !important;
    }

    #search-modal.opening .glass,
    #search-modal.opening .modal-card {
      transform: translateY(0) scale(1) !important;
      opacity: 1 !important;
    }
    #search-modal .modal-handle { display: none !important; } /* Hide handle on PC */
    #search-modal-results { max-height: 65vh; overflow-y: auto; margin-top: 16px; }

    #search-modal-input {
      font-size: 18px !important;
      padding: 16px 20px !important;
      border-radius: 16px !important;
      background: color-mix(in srgb, var(--bg-secondary) 96%, transparent) !important;
      border: 1px solid var(--glass-border) !important;
    }

    #search-modal-results .result-row {
      padding: 12px 16px !important;
      border-radius: 12px !important;
      margin-bottom: 4px !important;
      transition: background 0.2s ease !important;
    }

    #search-modal-results .result-row:hover {
      background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    }

    #search-modal-results .result-row .title {
      font-size: 16px !important;
      font-weight: 600 !important;
    }

    #search-modal-results .result-row .meta {
      font-size: 14px !important;
      margin-top: 4px !important;
    }
  }

  #search-modal .glass,
  #search-modal .modal-card {
    width: calc(100% - 36px) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 18px 50px rgb(4 8 18 / 28%) !important;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1) !important;
    background: color-mix(in srgb, var(--glass-color) 86%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--glass-border) 85%, transparent) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  }

  /* Soft handle to indicate draggable area (non-intrusive) */
  #search-modal .modal-handle { display:block; width:40px; height:5px; border-radius:999px; margin:6px auto 10px; background: color-mix(in srgb, var(--text-secondary) 36%, transparent); }

  /* Ensure stacked action buttons are behind the search modal */
  .theme-toggle, .profile-toggle, .ai-bar { z-index: 100 !important; }

  /* Results scroll area sized to viewport to avoid covering inputs */
  #search-modal-results { max-height: 56vh; overflow-y: auto; }
}

/* Toggle send icon: show plane on small screens, arrow on larger screens */
@media (max-width: 600px) {
  .send-desktop { display: none !important; }
  .send-mobile { display: inline-block !important; }

  /* make svg plane a bit larger and consistent */
  svg.icon.send-mobile, svg.send-mobile.icon { width: 25px !important; height: 25px !important; }
  .send-mobile .icon, .send-mobile svg { width: 25px; height: 25px; }
}

@media (min-width: 601px) {
  .send-mobile { display: none !important; }
  .send-desktop { display: inline-block !important; }
}

/* Ensure send buttons align icons nicely */
.send-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 10px; }
.send-btn .icon { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .send-btn { padding: 6px; }
  .send-btn .icon { width: 20px; height: 20px; }
}

/* Color adapt for send-mobile icon: use CSS variable with sensible defaults */
:root {--send-icon-on-bg: var(--accent);}
[data-theme='light'] svg.icon.send-mobile { color: var(--send-icon-on-bg); fill: currentcolor; stroke: none; transition: color .18s ease; }
[data-theme='dark'] svg.icon.send-mobile { color: color-mix(in srgb, var(--send-icon-on-bg) 80%, #fff 20%); fill: currentcolor; stroke: none; transition: color .18s ease; }

/* Mobile-specific: simplify AI helper button (hide robot icon, flatten, lower) */
@media (max-width: 600px) {
  /* hide robot icon inside ai-bar (first svg) to avoid duplicate icons */
  .ai-bar > svg.icon.svg-small-icon { display: none !important; }

  /* make ai-bar visually flat and compact */
  .ai-bar {
    background: color-mix(in srgb, var(--glass-color) 90%, transparent) !important;
    box-shadow: none !important;
    border: 1px solid rgb(0 0 0 / 4%) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .ai-bar .send-btn {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgb(0 0 0 / 6%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Lower the ai-bar about 20% of the viewport to match request */
  .ai-bar { bottom: 20vh !important; top: auto !important; }

  /* Hide the text input to keep it compact if needed (optional) */
  .ai-bar .ai-input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 15px; }
}

/* Remove focus ring / outline on the AI chat input container on small screens
  (user requested: no visible focus border on mobile). Keep actual input focus
  accessible by relying on the input element itself for keyboard users. */
@media (max-width: 600px) {
  .ai-chat-modal-input-container:focus-within {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
  }

  .ai-chat-modal-input-container:focus {
    box-shadow: none !important;
    outline: none !important;
  }

  /* ensure the inner input still has visible caret and text color */
  .ai-chat-modal-input-container .ai-chat-modal-input {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Last-resort override: restore theme/profile toggles on very small screens
  so they use the shared desktop styles (user requested to remove mobile-only hiding). */
@media (max-width: 480px) {
  .theme-toggle, .profile-toggle {
    display: inline-flex !important;
    position: fixed !important;
    right: 8px !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 50020 !important;
  }
}

/* === Project-specific quick fixes requested === */

/* 1) Move "оставить отзыв" text down on mobile ~35px */
@media (max-width: 768px) {
  /* If there is a reviews header block, add top padding to visually push text down */
  .reviews-header-mobile,
  .reviews-header,
  #product-page .reviews-section,
  #product-page .reviews-header-mobile {
    padding-top: 35px !important;
  }

  /* If the product page has centered "no reviews" text keep it vertically balanced */
  #product-page .text-muted.reviews-empty {
    margin-top: 10px;
    padding-top: 35px;
  }
}

/* 2) Make favorites/favorite-removal animations lighter and faster */

/* Reduce animation durations and remove heavy shadows during removal */
.favorite-btn,
.favorite-remove-btn,
.fav-heart,
.favorite-card,
.favorite-card-v2,
.favorite-card-grid {
  transition-duration: 120ms !important;
  transition-timing-function: cubic-bezier(.3,.9,.2,1) !important;
  will-change: auto !important;
}

/* Shorter pulse/heartbeat for hearts */
@keyframes heartBeatFast {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.fav-heart.icon-beat,
.favorite-btn.like .hearth.icon-beat {
  animation: heartBeatFast 220ms ease-in-out 1;
}

/* Remove heavy circle/lines animations on like for low-end devices, keep small scale feedback */
.favorite-btn.like .circle,
.favorite-btn.like .lines,
.favorite-btn.like .drop {
  transition: opacity 140ms linear, transform 140ms linear !important;
  opacity: 0 !important;
}

/* When removing from favorites keep it instant-ish */
.favorite-remove-btn.removing,
.favorite-card.removing,
.favorite-card-v2.removing {
  opacity: 0; transform: translateY(-6px) scale(0.985); transition: opacity 180ms linear, transform 180ms linear; box-shadow: none !important;
}

/* 3) On mobile, place theme/profile/AI buttons in the right corner (stacked)
  and ensure the compact floating cluster does not duplicate them */
@media (max-width: 480px) {
  /* Restore theme/profile toggles to use common desktop styles on mobile
  (remove mobile-only hiding — keep desktop/common styles consistent). */
  .theme-toggle, .profile-toggle {display: inline-flex !important;position: fixed !important;}

  /* Ensure ai-bar becomes a compact circular button in the top-right stack */
  .ai-bar {position: fixed !important;inset: 200px 8px auto auto!important;width: 52px !important;height: 52px !important;border-radius: 14px !important;padding: 0 !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;z-index: 50000 !important;}

  /* Provide a small cluster container anchored to top-right for theme/profile/ai if used */
  .top-right-action-cluster {
    position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 8px; display:flex; flex-direction:column; gap:10px; z-index:50010; align-items:center;
  }

  /* If the page uses floating-action-cluster at bottom, keep it but ensure it doesn't conflict */
  .floating-action-cluster { bottom: calc(72px + env(safe-area-inset-bottom, 12px)); right: 12px; }
}

/* Login / account icon animation (used for profile and AI compact button) */
@keyframes loginIconFloat {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  40% { transform: translateY(-3px) rotate(-3deg) scale(1.03); }
  70% { transform: translateY(-1px) rotate(2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes loginIconPulse {
  0% { filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%)); }
  50% { filter: drop-shadow(0 6px 18px rgb(var(--accent-rgb) 0.12)); }
  100% { filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%)); }
}

.icon-login {
  display: inline-block;
  will-change: transform, filter;
  transform-origin: center;
  animation: loginIconFloat 2600ms cubic-bezier(.2,.9,.2,1) infinite, loginIconPulse 2600ms ease-in-out infinite;
}

/* Subtle person-wave animation for the account icon specifically
  This animates only the SVG icon itself (not the whole button) and
  uses transform-box so rotation/scale happen around the icon's visual box. */
@keyframes personWave {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-2px) rotate(-3deg) scale(1.02); }
  45% { transform: translateY(-4px) rotate(2deg) scale(1.04); }
  70% { transform: translateY(-1px) rotate(-1.5deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Apply the personWave animation to the login icon inside the profile button
  and to compact AI/use instances that reuse the same icon class. */
.profile-toggle .icon-login,
.ai-bar .icon-login,
.icon.icon-login,
.profile-toggle svg.icon.icon-login,
.ai-bar svg.icon.icon-login {
  display: inline-block;
  will-change: transform, filter;

  /* prefer full support including older WebKit-based browsers */
  transform-box: fill-box;
  -webkit-transform-box: fill-box;
  transform-origin: center;
  animation: personWave 3200ms cubic-bezier(.2,.9,.2,1) infinite, loginIconPulse 3200ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .profile-toggle .icon-login,
  .ai-bar .icon-login,
  .icon.icon-login { animation: none !important; }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .icon-login { animation: none !important; }
}

/* Slightly larger icon on mobile for visibility */
@media (max-width: 600px) {
  .icon-login { width: 28px !important; height: 28px !important; }
  .ai-bar.icon-login, .ai-bar .icon-login { width: 28px !important; height: 28px !important; }
}

/* Prevent product/card movement on touch/click: neutralize active transforms
  Keep this scoped to smaller devices to preserve desktop hover effects. */
@media (max-width: 1024px) {
  .product-card:active,
  .catalog-card:active,
  .card:active,
  .favorite-card:active,
  .favorite-card-v2:active,
  .favorite-card-grid:active {
    transform: none !important;
    transition: none !important;
  }

  /* Neutralize card-hover class effects on touch devices */
  .card-hover,
  .card-hover:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: inherit !important;
  }

  /* Profile panel (added) */
  #profilePanel {
    position: absolute;
    right: 12px;
    top: 72px;
    min-width: 220px;
    max-width: 320px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
    padding: 10px;
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    z-index: 50030;
  }

  #profilePanel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  #profilePanel .profile-entry { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
  #profilePanel .profile-entry:hover { background: rgb(0 0 0 / 4%); }

  /* ==========================================
     Project quick fixes: disable card hover
     movement and fix AI button display on desktop
     ========================================== */

  /* 1) Disable hover movement for product cards globally
     The original .card-hover produced translate/scale and shadow; user requested to remove it. */
  .card-hover, .product-card, .card, .catalog-card, .favorite-card-grid, .favorite-card-v2 {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .card-hover:hover, .product-card:hover, .card:hover, .catalog-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Ensure touch and keyboard active states remain accessible but non-animated */
  .card-hover:active, .product-card:active, .card:active { transform: none !important; }

  /* 2) AI assistant bar: restore sensible desktop layout
     Keep mobile compact styles, but ensure on wider viewports the ai-bar shows
     the desktop send icon and is centered above bottom nav (as originally expected). */
  @media (min-width: 601px) {
    .ai-bar {
      left: 0 !important;
      right: 0 !important;
      bottom: 80px !important;
      margin: 0 auto !important;
      max-width: 560px !important;
      width: auto !important;
      padding: 12px 18px !important;
      border-radius: 40px !important;
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
      justify-content: center !important;
      pointer-events: auto !important;
      box-shadow: var(--shadow-pop) !important;
    }

    /* On desktop show the arrow/send icon variant */
    .send-desktop { display: inline-block !important; }
    .send-mobile { display: none !important; }

    /* Make sure ai input is visible on desktop */
    .ai-bar .ai-input { display: block !important; flex: 1 1 auto; min-width: 0; }
  }

  /* Keep mobile compact behavior but avoid forcing it on medium/large screens */
  @media (max-width: 600px) {
    /* mobile rules remain as-is; no change here */
  }

  /* 3) Small specificity patch to ensure send icon sizing consistent on desktop */
  .ai-bar .send-btn .icon, .ai-bar .send-btn svg.icon.send-desktop { width: 18px !important; height: 18px !important; }

  /* 4) Respect reduced-motion preference: remove animations for those who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .card-hover, .product-card, .card, .catalog-card, .favorite-card-grid, .favorite-card-v2, .ai-bar, .send-btn {
      transition: none !important;
      animation: none !important;
    }
  }

  /* One-shot active animation helper for SVG — triggered by JS adding .animate-once */
  .icon-login.animate-once {
    animation: activeIcon 700ms cubic-bezier(.2,.9,.3,1);
  }

  /* Mobile weather button */
 
  
  
  /* ================================================
     OLD WEATHER WIDGET STYLES - DEPRECATED
     Widget ID changed to #weather-widget-v2
     These styles commented out to prevent conflicts
     ================================================ */

  /*
  #console_ios_weather_widget_v1{position:fixed;right:20px;bottom:20px;width:320px;max-width:92vw;padding:14px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);border:1px solid rgba(255,255,255,0.12);color:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,Arial,sans-serif;box-shadow:0 10px 30px rgba(11,20,30,0.28);z-index:2147483647;overflow:hidden;transition:transform .22s ease,opacity .22s ease}
  #console_ios_weather_widget_v1.dark{background:linear-gradient(180deg, rgba(10,10,10,0.52), rgba(10,10,10,0.36));border:1px solid rgba(255,255,255,0.06);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
  #console_ios_weather_widget_v1 .top{display:flex;align-items:center;gap:12px}
  #console_ios_weather_widget_v1 .icon{width:72px;height:72px;border-radius:12px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex:0 0 72px;min-width:72px}
  #console_ios_weather_widget_v1 .top > div{min-width:0}
  #console_ios_weather_widget_v1.dark .icon{background:rgba(255,255,255,0.04)}
  #console_ios_weather_widget_v1 .icon svg{width:46px;height:46px;opacity:0.95}
  #console_ios_weather_widget_v1 .icon .weather-icon-emoji{font-size:46px;line-height:1}
  #console_ios_weather_widget_v1 .temp{font-size:44px;font-weight:700;line-height:1;color:inherit}
  #console_ios_weather_widget_v1 .location{font-size:13px;opacity:.9;margin-top:2px;color:inherit}
  #console_ios_weather_widget_v1 .desc{font-size:14px;margin-top:8px;opacity:.92}
  #console_ios_weather_widget_v1 .meta{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:8px;flex-direction:column}
  #console_ios_weather_widget_v1 .meta .meta-item{min-width:0;display:flex;gap:8px;align-items:center;overflow:hidden}
  #console_ios_weather_widget_v1 .header{display:flex;align-items:center;justify-content:space-between;padding:8px 0px;gap:8px}
  #console_ios_weather_widget_v1 .controls{position:static;display:flex;gap:4px;align-items:center;padding:4px 2px;justify-content:flex-end}
  #console_ios_weather_widget_v1 .controls .close-btn,#console_ios_weather_widget_v1 .controls .theme-btn,#console_ios_weather_widget_v1 .controls .city-btn,#console_ios_weather_widget_v1 .controls .expand-btn,#console_ios_weather_widget_v1 .controls .seedling-btn,#console_ios_weather_widget_v1 .controls .calendar-btn{width:40px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,0.06);font-size:14px;transition:background .18s,transform .12s,box-shadow .12s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  #console_ios_weather_widget_v1 .controls .city-btn{font-size:16px}
  #console_ios_weather_widget_v1 .controls .expand-btn{padding-top:2px}
  #console_ios_weather_widget_v1 .controls .close-btn:hover,#console_ios_weather_widget_v1 .controls .theme-btn:hover,#console_ios_weather_widget_v1 .controls .city-btn:hover,#console_ios_weather_widget_v1 .controls .expand-btn:hover,#console_ios_weather_widget_v1 .controls .seedling-btn:hover,#console_ios_weather_widget_v1 .controls .calendar-btn:hover{transform:translateY(-1px) scale(1.03);background:rgba(0,0,0,0.10)}
  #console_ios_weather_widget_v1 .controls svg{width:18px;height:18px;display:block}
  #console_ios_weather_widget_v1 .forecast{margin-top:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:8px}
  #console_ios_weather_widget_v1 .forecast .f-day{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:10px;margin:6px 0;background:transparent}
  #console_ios_weather_widget_v1 .forecast .f-day + .f-day{border-top:0}
  #console_ios_weather_widget_v1 .f-day .date{min-width:80px;font-size:13px;opacity:.9}
  #console_ios_weather_widget_v1 .f-day .vals{display:flex;gap:10px;align-items:center}
  #console_ios_weather_widget_v1 .expand-btn svg{transition:transform .18s cubic-bezier(.2,.9,.3,1)}
  #console_ios_weather_widget_v1 .expand-btn.expanded svg{transform:rotate(180deg)}
  #console_ios_weather_widget_v1.dark .controls .close-btn,#console_ios_weather_widget_v1.dark .controls .theme-btn,#console_ios_weather_widget_v1.dark .controls .city-btn,#console_ios_weather_widget_v1.dark .controls .expand-btn,#console_ios_weather_widget_v1.dark .controls .calendar-btn{background:rgba(255,255,255,0.04)}
  #console_ios_weather_widget_v1 .controls div:focus-visible{outline:2px solid rgba(100,150,255,0.18);outline-offset:2px;border-radius:10px}
  #console_ios_weather_widget_v1, #console_ios_weather_widget_v1 *{user-select:none;-webkit-user-select:none;-ms-user-select:none}
  #console_ios_weather_widget_v1 .close-btn,#console_ios_weather_widget_v1 .theme-btn,#console_ios_weather_widget_v1 .city-btn,#console_ios_weather_widget_v1 .expand-btn{outline:none;color:inherit}
  
  @media (max-width: 480px){ 
    #console_ios_weather_widget_v1{position:fixed !important;left:12px !important;right:12px !important;transform:none !important;width:auto !important;max-width:none !important;bottom:12px !important;padding:12px !important;border-radius:12px !important;box-sizing:border-box !important} 
    #console_ios_weather_widget_v1 .icon{width:72px;height:72px;border-radius:12px;flex:0 0 72px} 
    #console_ios_weather_widget_v1 .icon svg{width:46px;height:46px} 
    #console_ios_weather_widget_v1 .temp{font-size:40px} 
    #console_ios_weather_widget_v1 .controls{top:8px;right:8px} 
    #console_ios_weather_widget_v1 .controls .close-btn,#console_ios_weather_widget_v1 .controls .theme-btn,#console_ios_weather_widget_v1 .controls .city-btn,#console_ios_weather_widget_v1 .controls .expand-btn{width:40px;height:40px;border-radius:10px} 
    #console_ios_weather_widget_v1 .forecast{max-height:48vh;overflow:auto;padding:6px} 
    #console_ios_weather_widget_v1 .f-day{padding:8px} 
  }
  
  @media (max-width: 340px){
    #console_ios_weather_widget_v1{width:calc(100% - 20px);right:auto;left:10px;bottom:10px;border-radius:10px;padding:10px}
    #console_ios_weather_widget_v1 .temp{font-size:36px}
    #console_ios_weather_widget_v1 .meta{font-size:12px}
    .weather-summary-emoji{font-size:36px}
  }
  */
  
  /* planting popover */
  .weather-planting-popover{position:absolute;left:0;top:0;width:100%;height:100%;max-height:76vh;overflow:auto;padding:17px 0 0 10px;border-radius:20px;z-index:2147483700;background: rgb(255 255 255 / 6%);background-image: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 6%));backdrop-filter: blur(14px) saturate(110%);border: 1px solid rgb(255 255 255 / 10%);box-shadow: 0 10px 30px rgb(11 20 30 / 28%);color:#071428;-webkit-font-smoothing:antialiased;backface-visibility:hidden;will-change:transform,opacity}
  .weather-planting-popover.dark{background:linear-gradient(180deg, rgb(6 8 12 / 52%), rgb(6 8 12 / 36%));backdrop-filter:blur(18px) saturate(120%);border:1px solid rgb(255 255 255 / 6%);box-shadow:0 12px 40px rgb(0 0 0 / 60%);color:#fff}
  .weather-planting-subtitle{font-size:12px;opacity:0.95;padding:4px 8px;border-radius:10px;background:rgb(255 255 255 / 6%);backdrop-filter: blur(8px) saturate(110%);margin-left:6px}
  .weather-planting-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .weather-planting-close{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgb(0 0 0 / 6%);pointer-events:auto}
  .weather-planting-popover.dark .weather-planting-close{background:rgb(255 255 255 / 6%);color:#fff}

  @media (max-width:480px){ .weather-planting-popover{position:fixed;left:12px;right:12px;bottom:12px;border-radius:12px;max-height:78vh} }

  /* small helpers */
  .weather-summary-temp-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:14px;line-height:1;pointer-events:none;color:rgb(255 255 255);background:#000000d6;border-radius:3px;padding:1px}
  .weather-summary-emoji{font-size:42px}

  /* ========================================
     WEATHER WIDGET V2 - Clean positioning
     ======================================== */
  
  #weather-widget-v2 {
    position: fixed;
    z-index: 2147483647;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, Arial, sans-serif;
    user-select: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
    
    /* Desktop positioning */
    right: 20px;
    bottom: 20px;
    width: 320px;
    
    /* Visual styling */
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 6%));
    backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 10px 30px rgb(11 20 30 / 28%);
    color: #071428;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  #weather-widget-v2.dark {
    background: linear-gradient(180deg, rgb(10 10 10 / 52%), rgb(10 10 10 / 36%));
    border: 1px solid rgb(255 255 255 / 6%);
    color: #f5f7fb;
    box-shadow: 0 12px 40px rgb(0 0 0 / 60%);
  }
  
  #weather-widget-v2 *, #weather-widget-v2 *::before, #weather-widget-v2 *::after {
    box-sizing: border-box;
  }
  
  /* Layout */
  #weather-widget-v2 .top { display: flex; align-items: center; gap: 12px; }
  #weather-widget-v2 .top > div { min-width: 0; }
  
  #weather-widget-v2 .icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    flex: 0 0 72px;
    border-radius: 12px;
    background: rgb(255 255 255 / 6%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #weather-widget-v2.dark .icon { background: rgb(255 255 255 / 4%); }
  #weather-widget-v2 .icon svg { width: 46px; height: 46px; opacity: 0.95; }
  #weather-widget-v2 .icon .weather-icon-emoji { font-size: 46px; line-height: 1; }
  
  #weather-widget-v2 .temp { font-size: 44px; font-weight: 700; line-height: 1; color: inherit; }
  #weather-widget-v2 .location { font-size: 13px; opacity: 0.9; margin-top: 2px; color: inherit; }
  #weather-widget-v2 .desc { font-size: 14px; margin-top: 8px; opacity: 0.92; }
  
  #weather-widget-v2 .meta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-flow: column wrap;
    margin-top: 8px;
  }
  
  #weather-widget-v2 .meta .meta-item {
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow: hidden;
  }
  
  #weather-widget-v2 .meta .meta-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  #weather-widget-v2 .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 8px;
  }
  
  #weather-widget-v2 .controls {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 2px;
    justify-content: flex-end;
  }
  
  #weather-widget-v2 .controls .close-btn,
  #weather-widget-v2 .controls .theme-btn,
  #weather-widget-v2 .controls .city-btn,
  #weather-widget-v2 .controls .expand-btn,
  #weather-widget-v2 .controls .seedling-btn,
  #weather-widget-v2 .controls .calendar-btn {
    width: 40px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgb(0 0 0 / 6%);
    font-size: 14px;
    border: none;
    outline: none;
    color: inherit;
    transition: background 0.18s, transform 0.12s, box-shadow 0.12s;
    backdrop-filter: blur(6px);
  }
  
  #weather-widget-v2 .controls .city-btn { font-size: 16px; }
  #weather-widget-v2 .controls .expand-btn { padding-top: 2px; }
  
  #weather-widget-v2 .controls .close-btn:hover,
  #weather-widget-v2 .controls .theme-btn:hover,
  #weather-widget-v2 .controls .city-btn:hover,
  #weather-widget-v2 .controls .expand-btn:hover,
  #weather-widget-v2 .controls .seedling-btn:hover,
  #weather-widget-v2 .controls .calendar-btn:hover {
    transform: translateY(-1px) scale(1.03);
    background: rgb(0 0 0 / 10%);
  }
  
  #weather-widget-v2.dark .controls .close-btn,
  #weather-widget-v2.dark .controls .theme-btn,
  #weather-widget-v2.dark .controls .city-btn,
  #weather-widget-v2.dark .controls .expand-btn,
  #weather-widget-v2.dark .controls .calendar-btn {
    background: rgb(255 255 255 / 4%);
  }
  
  #weather-widget-v2 .controls svg { width: 18px; height: 18px; display: block; }
  #weather-widget-v2 .controls div:focus-visible { outline: 2px solid rgb(100 150 255 / 18%); outline-offset: 2px; border-radius: 10px; }
  
  #weather-widget-v2 .expand-btn svg { transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
  #weather-widget-v2 .expand-btn.expanded svg { transform: rotate(180deg); }
  
  #weather-widget-v2 .forecast {
    margin-top: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgb(255 255 255 / 2%), transparent);
    padding: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #weather-widget-v2 .forecast .f-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    margin: 6px 0;
    background: transparent;
  }
  
  #weather-widget-v2 .forecast .f-day + .f-day { border-top: 0; }
  #weather-widget-v2 .f-day .date { min-width: 80px; font-size: 13px; opacity: 0.9; }
  #weather-widget-v2 .f-day .vals { display: flex; gap: 10px; align-items: center; }
  
  /* Mobile/Tablet - full width with margins */
  @media (max-width: 768px) {
    #weather-widget-v2 {
      left: 12px;
      right: 12px;
      bottom: 12px;
      width: auto;
      max-width: none;
      padding: 12px;
      border-radius: 12px;
    }
    
    #weather-widget-v2 .temp { font-size: 40px; }
    #weather-widget-v2 .forecast { max-height: 48vh; }
    #weather-widget-v2 .f-day { padding: 8px; }
  }
  
  /* Extra small screens */
  @media (max-width: 360px) {
    #weather-widget-v2 {
      left: 8px;
      right: 8px;
      bottom: 8px;
      padding: 10px;
      border-radius: 10px;
    }
    
    #weather-widget-v2 .temp { font-size: 36px; }
    #weather-widget-v2 .meta { font-size: 12px; }
    #weather-widget-v2 .icon { width: 64px; height: 64px; min-width: 64px; flex: 0 0 64px; }
    #weather-widget-v2 .icon svg { width: 40px; height: 40px; }
  }
  
  /* Compact calendar widget styles (align with weather widget look) */
  .widget-calendar{position:relative;max-width:680px;margin:10px auto;padding:12px;border-radius:16px;background:linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 3%));backdrop-filter:blur(12px) saturate(110%);border:1px solid rgb(255 255 255 / 6%);color:inherit}
  .widget-calendar .w-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .widget-calendar .w-title{font-weight:700;font-size:15px}
  .widget-calendar .w-sub{font-size:12px;opacity:.85}
  .widget-calendar .w-days{display:flex;gap:8px;justify-content:space-between}
  .widget-calendar .w-day{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:10px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
  .widget-calendar .w-day.today{background:linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));box-shadow:var(--shadow-soft)}
  .widget-calendar .w-day .date{font-weight:700;margin-bottom:6px}
  .widget-calendar .w-day .icons{font-size:16px;line-height:1}
  .widget-calendar .w-legend{display:flex;gap:10px;margin-top:8px;font-size:13px;opacity:.9}
  .widget-calendar .w-action{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
  .widget-calendar .w-action button{padding:8px 10px;border-radius:10px;border:0;background:rgb(255 255 255 / 6%);color:inherit;cursor:pointer}
  .widget-calendar .w-tooltip{position:absolute;z-index:2147483700;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);min-width:200px;max-width:360px;padding:10px;border-radius:12px;background:rgb(0 0 0 / 75%);color:#fff;font-size:13px;box-shadow:0 10px 30px rgb(0 0 0 / 50%)}
  .widget-calendar .w-tooltip::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:rgb(0 0 0 / 75%);transform:translateX(-50%) rotate(45deg);border-radius:2px}

  @media (max-width:480px){ .widget-calendar .w-days{gap:6px} .widget-calendar .w-day{padding:6px} .widget-calendar .w-tooltip{inset:calc(100% + 8px) 8px auto 8px;transform:none} }

  /* When modal content is widgetized — expand and apply widget chrome */
  .calendar-modal-content.widgetized{max-width:1200px;width:95vw;padding:20px;border-radius:18px;background:linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));box-shadow:0 40px 80px rgb(0 0 0 / 45%)}
  .calendar-modal-content.widgetized .calendar-modal-content{background:transparent}
  .calendar-modal-content.widgetized .widgetized-body{background:linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 1%));}

  @media (max-width:900px){ .calendar-modal-content.widgetized{width:calc(100vw - 32px);max-width:none;padding:12px;border-radius:12px} .calendar-modal-content.widgetized .widget-side-area{display:none} .calendar-modal-content.widgetized .widget-cal-area{flex:1 1 100%} }

  /* Base calendar modal content styles with theme support */
  .calendar-modal-content {
    background: var(--bg);
    color: var(--text);
  }

  .calendar-modal-content * {
    color: var(--accent);
  }

  [data-theme='dark'] .calendar-modal-content {
    background: var(--bg);
    color: var(--text);
  }

  [data-theme='dark'] .calendar-modal-content * {
    color: var(--accent);
  }

  [data-theme='calm'] .calendar-modal-content {
    background: var(--bg);
    color: var(--text);
  }

  [data-theme='calm'] .calendar-modal-content * {
    color: var(--accent);
  }

  /* Ensure JS-inserted weather summary aligns nicely inside button */
  .weather-btn .weather-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1;
    pointer-events: none; /* summary shouldn't intercept clicks */
  }
  .weather-btn .weather-summary .weather-summary-icon svg { width: 18px; height: 18px; }

  /* Desktop: show weather button left of ai-bar */
  @media (min-width: 769px) {
    .weather-btn {
      bottom: 8px;
      right: 80px;
    }
  }

  /* Mobile: show weather button below ai-bar */
  @media (max-width: 768px) {
    .weather-btn {
      bottom: 80px;
      right: 8px;
      top: 31px;
    }
  }

  .weather-btn-inline:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-pop);
  }

  .weather-btn-inline:active {
    transform: scale(0.95);
  }

  .weather-btn-inline svg {
    width: 24px;
    height: 24px;
    fill: currentcolor;
  }

  .theme-btn-inline:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-pop);
  }

  .theme-btn-inline:active {
    transform: scale(0.95);
  }

  .theme-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
  }

  /* Show weather button in AI-bar only on PC */
  @media (min-width: 769px) {
    .weather-btn-inline {
      display: inline-flex;
    }

    .theme-btn-inline {
      display: inline-flex;
    }
  }

  /* Hide weather button in AI-bar on mobile */
  @media (max-width: 768px) {
    .weather-btn-inline {
      display: none;
    }

    .theme-btn-inline { 
      display: none;
    }
  }     

}     

/* Apply calm theme styles to modals */
:root[data-theme='calm'] .modal-overlay {
  background: rgb(0 0 0 / 20%) !important;
  backdrop-filter: blur(20px) !important;
}

:root[data-theme='calm'] .glass {
  background: var(--modal-glass) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow: var(--shadow-card) !important;
}

:root[data-theme='calm'] .btn {
  transition: background 0.2s ease, transform 0.1s ease !important;
}

:root[data-theme='calm'] .btn:hover {
  background: var(--btn-hover-bg) !important;
}

:root[data-theme='calm'] .btn:active {
  background: var(--btn-active-bg) !important;
  transform: scale(0.98) !important;
}

/* Navigation in calm theme */
:root[data-theme='calm'] .nav-bar {
  background: rgb(255 255 255 / 95%) !important;
  border-bottom: 1px solid rgb(139 125 107 / 10%) !important;
}

:root[data-theme='calm'] .nav-btn {
  color: var(--text) !important;
}

:root[data-theme='calm'] .nav-btn.active {
  background: rgb(139 125 107 / 10%) !important;
  color: var(--accent) !important;
}

/* AI bar in calm theme */
:root[data-theme='calm'] .ai-bar {
  background: rgb(255 255 255 / 90%) !important;
  border: 1px solid rgb(139 125 107 / 10%) !important;
  box-shadow: var(--shadow-soft) !important;
}

:root[data-theme='calm'] .ai-input {
  background: rgb(255 255 255 / 95%) !important;
  border: 1px solid rgb(139 125 107 / 15%) !important;
  color: var(--text) !important;
}

:root[data-theme='calm'] .ai-input::placeholder {
  color: var(--text-secondary) !important;
}

/* Cards and product items in calm theme */
:root[data-theme='calm'] .card {
  background: rgb(255 255 255 / 98%) !important;
  border: 1px solid rgb(139 125 107 / 8%) !important;
  box-shadow: var(--shadow-soft) !important;
}

:root[data-theme='calm'] .card-hover:hover {
  box-shadow: var(--shadow-pop) !important;
}

/* Scoped profile/status colors */
#profileToggle.auth svg .apple-status { fill: #30d158 !important; }
#profileToggle.guest svg .apple-status { fill: #9CA3AF !important; }
[data-theme='dark'] #profileToggle.guest svg .apple-status { fill: #6B7280 !important; }
#profileToggle svg .check-ring { stroke: #fff !important; }
#profileToggle svg .check-path { stroke: #fff !important; }

/* Control visibility of guest/check groups based on auth state */
#profileToggle.guest .apple-check { opacity: 0 !important; }
#profileToggle.guest .apple-guest { opacity: 1 !important; }
#profileToggle.auth .apple-guest { opacity: 0 !important; }
#profileToggle.auth .apple-check { opacity: 1 !important; }


.top-action-panel.loading {
  opacity: 0.7;
  transform: scale(0.95);
}
.top-action-panel > *{margin:0; transition: transform 0.2s ease, opacity 0.2s ease;}

/* Hover effects for desktop */
@media (min-width: 1025px) {
  .top-action-panel > *:hover {
    transform: scale(1.05);
  }

  .top-action-panel > *:active {
    transform: scale(0.95);
  }
}

/* Touch feedback for mobile */
@media (max-width: 1024px) {
  .top-action-panel > *:active {
    transform: scale(0.9);
  }
}

/* Treat small tablets (iPad portrait/landscape) same as mobile for top-action layout */
@media (max-width:1024px){
  .top-action-panel {/* top: 54px; *//* right: -2px; *//* bottom: 12px; *//* padding: 4px; *//* gap: 8px; *//* flex-direction: column; *//* align-items: flex-end; *//* border-radius: 8px; *//* z-index: 12; */}
  .top-action-panel > *{display:inline-flex;margin:2px 0}

  .top-action-panel.hide{
    /* On mobile we prefer panel visible reduce visual hiding to subtle opacity but keep interaction possible */
    opacity: 0.16;
    transform: none;
    pointer-events: auto;
  }
}

/* Extra small screens: smaller buttons and bottom positioning */
@media (max-width: 480px) {
  .top-action-panel {
    /* bottom: 20px; */

    /* top: auto; */

    /* right: 10px; */

    /* left: 10px; */

    /* flex-direction: row; */

    /* justify-content: space-around; */

    /* padding: 6px; */

    /* gap: 4px; */

    /* border-radius: 16px; */
  }

  .top-action-panel > * {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .top-action-panel .ai-launcher,
  .top-action-panel .weather-btn,
  .top-action-panel #profileToggle,
  .top-action-panel .themeToggle {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Ensure elements moved into the top panel don't keep fixed positioning (override heavy specificity) */
@media (max-width:1024px){
  .top-action-panel > * { position: static !important; inset: auto !important; transform: none !important; }

  /* Prevent children from flex-growing and becoming full-width when stacked */
  .top-action-panel > * { flex: 0 0 auto; width: var(--nav-btn-size); max-width: calc(var(--nav-btn-size) + 8px); }
  .top-action-panel .theme-toggle, .top-action-panel .profile-toggle, .top-action-panel .ai-bar, .top-action-panel .weather-btn, .top-action-panel .guest-btn {min-width: 56px;display: inline-flex !important;align-items: center;justify-content: center;}
  .top-action-panel .ai-bar { padding: 4px 6px; gap: 6px; }
  .top-action-panel .ai-bar .ai-input { display: none !important; }

  /* When nav buttons are moved into the top panel, cancel the mobile-scale transform so they keep intended square size */
  .top-action-panel .nav-btn { transform: none !important; }
}

/* Lightweight AI launcher: visible in top-action-panel on tablets/phones */
.ai-launcher { display: none; align-items: center; justify-content: center; width:48px; height:48px; border-radius:12px; padding:6px; background: var(--glass-color); border: 1px solid var(--glass-border); box-shadow: var(--shadow-pop); cursor: pointer; }
.ai-launcher .icon { width:22px; height:22px; color: var(--accent); }

@media (max-width:1024px) {
  .ai-launcher { display: inline-flex !important; }
  .top-action-panel .ai-launcher {margin: 2px 0;}
}

/* Ensure ai-launcher matches other nav buttons (square) on mobile/tablet */
@media (max-width:1024px) {
  .ai-launcher, #top-action-panel .ai-launcher, .top-action-panel .ai-launcher.nav-btn {
    width: 54px !important;
    height: 56px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-pop) !important;
    background: var(--glass-color) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--accent) !important;
  }
  .ai-launcher .icon { width: 22px !important; height: 22px !important; }
}

/* Prefer the launcher in the top panel on small screens; show full ai-bar on desktop */
.top-action-panel .ai-bar { display: none !important; }

@media (max-width:1024px) {
  /* Hide any floating/clustered ai-bar on small/tablet screens to avoid duplication */
  .ai-bar { display: none !important; pointer-events: none !important; opacity: 0 !important; }

  /* Additionally hide the send button inside ai-bar to be safe (prevents duplicate-looking send icon)
     This targets only the floating ai-bar control, not send buttons inside the AI chat modal. */
  .ai-bar .send-btn { display: none !important; pointer-events: none !important; }
  .ai-bar .send-btn .icon, .ai-bar .send-btn svg { display: none !important; }
}

@media (min-width: 601px) {
  .top-action-panel .ai-bar { display: inline-flex !important; }
  .top-action-panel .ai-launcher { display: none !important; }
}

/* Lighten cart modal card in light theme for better text contrast */
.cart-modal-card { background: color-mix(in srgb, var(--glass-color) 92%, #fff 8%) !important; border: 1px solid color-mix(in srgb, var(--glass-border) 88%, rgb(0 0 0 / 6%) 12%) !important; }
[data-theme='light'] .cart-modal-card { background: color-mix(in srgb, var(--glass-color) 94%, #fff 6%) !important; color: var(--text) !important; }
[data-theme='light'] .cart-modal-card .text, [data-theme='light'] .cart-modal-card p, [data-theme='light'] .cart-modal-card .cart-item-title { color: var(--text) !important; }

/* Write-review modal (moved from inline block) */
#write-review-modal .glass {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
#write-review-modal h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); }
#write-review-modal > .glass > div > div > div { color: var(--text-secondary); }

#write-review-modal .btn-close {
  width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%; background: var(--glass-color); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card); color: var(--text);
  font-size: 20px; line-height: 1; opacity: 0.98; padding:0;
}

#write-review-form .form-control {
  border-radius: 14px; padding: 12px 14px; font-size: 15px;
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  border: 1px solid var(--glass-border); color: var(--text);
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%) inset;
}

#write-review-modal .form-label,
#write-review-modal .review-caption,
#write-review-modal .review-meta,
#write-review-modal .form-text { color: var(--text) !important; font-weight: 700; }
#write-review-modal .form-control::placeholder { color: color-mix(in srgb, var(--text) 60%, var(--bg) 40%) !important; opacity: 1; }
#write-review-form textarea.form-control { min-height: 110px; resize: vertical; }
#write-review-form input[type="file"].form-control { padding: 10px 12px; }
.rating-buttons { display:flex; gap:8px; align-items:center; }
.rating-btn { min-width:48px; height:44px; border-radius:12px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; background: transparent; color:var(--text-secondary); border:1px solid transparent; transition: transform .14s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background .18s ease; cursor:pointer; }
.rating-btn:active { transform: scale(.98); }
.rating-btn.active { background: var(--accent-gradient); color: #fff; box-shadow: 0 10px 28px rgb(var(--accent-rgb) 0.22); border: 1px solid rgb(255 255 255 / 6%); }
#review-photos-preview { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
#review-photos-preview img { width:96px; height:96px; object-fit:cover; border-radius:12px; border:1px solid var(--glass-border); box-shadow: 0 8px 22px rgb(0 0 0 / 12%); }
#write-review-modal .btn-success { background: var(--accent-gradient); border: none; color: #fff; font-weight:700; border-radius: 14px; padding: 12px 14px; }
#write-review-modal .btn-outline-secondary { background: transparent; border: 1px solid var(--glass-border); color: var(--text); border-radius:14px; padding: 12px 14px; }

@media (max-width:520px) { #write-review-modal .glass { padding: 12px; border-radius: 16px; } #review-photos-preview img { width:72px; height:72px; } .rating-btn { min-width:40px; height:40px; font-size:14px; } }
[data-theme='dark'] #write-review-modal .glass { background: color-mix(in srgb, var(--glass-color) 80%, transparent); border: 1px solid rgb(255 255 255 / 6%); box-shadow: 0 10px 36px rgb(0 0 0 / 60%); }
[data-theme='dark'] #write-review-modal .btn-close { background: rgb(28 28 28 / 82%); color: var(--text); border-color: rgb(255 255 255 / 6%); }
[data-theme='dark'] #write-review-form .form-control { background: rgb(255 255 255 / 2%); color: var(--text); border: 1px solid rgb(255 255 255 / 4%); }
[data-theme='dark'] #write-review-modal .form-label, [data-theme='dark'] #write-review-modal .form-text, [data-theme='dark'] #write-review-modal .review-caption, [data-theme='dark'] #write-review-modal .review-meta { color: var(--text) !important; }
[data-theme='dark'] #write-review-form .form-control::placeholder { color: rgb(255 255 255 / 56%) !important; }
[data-theme='dark'] .rating-btn.active { box-shadow: 0 10px 28px rgb(var(--accent-rgb) 0.18); }
[data-theme='dark'] #review-photos-preview img { box-shadow: 0 8px 20px rgb(0 0 0 / 60%); border: 1px solid rgb(255 255 255 / 3%); }
[data-theme='dark'] #write-review-modal select.form-control, [data-theme='dark'] #write-review-modal input.form-control, [data-theme='dark'] #write-review-modal textarea.form-control { background: linear-gradient(180deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 1%)); color: var(--text) !important; border: 1px solid rgb(255 255 255 / 6%) !important; }
[data-theme='dark'] #write-review-modal select.form-control option { background: var(--bg-secondary); color: var(--text) !important; }
.write-review-form { display: flex; flex-direction: column; gap: 12px; }
.write-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.write-review-label { font-weight: 700; color: var(--text); }
.write-review-select-wrapper { display: flex; gap: 8px; align-items: center; }
.write-review-helper { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.write-review-buttons { display: flex; gap: 10px; }
.write-review-modal-header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.write-review-modal-icon { width: 28px; height: 28px; color: var(--accent); }
.write-review-modal-title { margin: 0; font-weight: 800; color: var(--text); font-size: 20px; }
.write-review-modal-subtitle { font-size: 13px; color: var(--text-secondary); }

/* OTP input boxes (moved from showEmailCodeInput template) */
.otp-box{ width:48px; height:56px; text-align:center; font-size:22px; font-weight:700; border-radius:12px; border:1px solid rgb(0 0 0 / 8%); background: color-mix(in srgb, var(--bg-secondary) 94%, transparent); color:var(--text); }
.otp-box:focus{ outline:none; box-shadow: var(--focus-ring); transform: translateY(-2px); position:relative; }
.otp-box:focus::after{ content:''; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, var(--accent), rgb(0 0 0 / 5%)); border-radius:2px; }
.otp-box.code-success{ border-color: rgb(0 200 120 / 90%); box-shadow: 0 6px 18px rgb(0 200 120 / 8%); }
.otp-box.code-error{ border-color: var(--danger); box-shadow: 0 6px 18px rgb(239 68 68 / 6%); }
.otp-box.success-anim { animation: otpSuccess 720ms cubic-bezier(.2,.9,.2,1) forwards; position: relative; }
.otp-box.error-anim { animation: otpShake 420ms cubic-bezier(.36,.07,.19,.97) both; }

@keyframes otpShake { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } }

@keyframes otpSuccess { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(0 200 120 / 18%); } 50% { transform: scale(1.06); box-shadow: 0 8px 28px rgb(0 200 120 / 12%); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(0 200 120 / 0%); } }
.otp-box .otp-check { position:absolute; right:6px; top:6px; width:18px; height:18px; display:none; }
.otp-box.show-check .otp-check { display:block; color: rgb(0 200 120 / 95%); }

@media (max-width:480px){ .otp-box{ width:40px; height:48px; font-size:20px; } }
:root[data-theme='dark'] .otp-box, [data-theme='dark'] .otp-box { background: linear-gradient(180deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 1%)); border:1px solid rgb(255 255 255 / 6%); color:var(--text); box-shadow: 0 6px 18px rgb(0 0 0 / 36%); }

/* Mobile modal viewport fix (moved from inline <style> near search modal) */
@media (max-width: 900px) {
  :root { --vh: 1vh; }

  .modal-overlay .modal-card.search-modal {
    max-height: calc(var(--vh, 1vh) * 100 - 40px);
    top: 10px;
    transform: translateY(-8px) scale(.995);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms;
  }
  .modal-overlay.opening .modal-card.search-modal { transform: translateY(0) scale(1); opacity: 1; }
}

/* Product page local styles (moved from inline product template) */
#product-page .product-actions{ display:flex; gap:10px; align-items:center; }
#product-page .product-actions .cart-glass-btn{ flex:1; min-width:0; padding:16px; font-size:inherit; }
#product-page .product-actions .cart-glass-btn span{ display:inline-flex; align-items:center; gap:8px; }
#product-page .product-actions .favorite-btn.like{ width:48px !important; height:48px !important; flex:0 0 48px; padding:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; position:relative; }
#product-page .product-actions .favorite-btn.like .hearth{ width:20px; height:20px; }
#product-page .product-actions .favorite-btn.like, #product-page .product-actions .cart-glass-btn{ box-shadow: none !important; }
#product-page .text-muted{ text-align:center; }

/* Accessibility: skip-to-content link (visually hidden until focused) */
.skip-to-content{
  position:fixed;left:8px;top:8px;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;z-index:12000;transform:translateY(-120%);transition:transform .18s ease,opacity .18s ease;opacity:0;}
.skip-to-content:focus{transform:translateY(0);opacity:1;outline: none;box-shadow: var(--focus-ring);}
#main-content:focus{outline: none; box-shadow: var(--focus-ring);}

/* Compact weather-style calendar widget styles */
.widget-calendar {
  width: 320px;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 85%));
  border-radius: 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
  padding: 12px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  border: 1px solid rgb(0 0 0 / 4%);
}
.widget-calendar .w-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.widget-calendar .w-title { font-size:16px; font-weight:700; }
.widget-calendar .w-sub { font-size:12px; color:var(--text-secondary); }
.widget-calendar .w-days { display:flex; gap:6px; justify-content:space-between; margin-top:8px; }
.widget-calendar .w-day { width:38px; height:54px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:6px; background: rgb(0 0 0 / 3%); cursor:default; }
.widget-calendar .w-day .date { font-size:14px; font-weight:700; }
.widget-calendar .w-day .icons { font-size:14px; }
.widget-calendar .w-day.today { background: linear-gradient(180deg, rgb(var(--accent-rgb) 0.12), rgb(255 255 255 / 60%)); box-shadow: 0 6px 18px rgb(0 0 0 / 6%); }
.widget-calendar .w-legend { display:flex; gap:8px; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.widget-calendar .w-action { margin-top:10px; display:flex; gap:8px; }
.widget-calendar .w-action button { flex:1; padding:8px 10px; border-radius:10px; border:none; cursor:pointer; font-weight:700; }
.widget-calendar .w-action .view-full { background: var(--accent-gradient); color:#fff; }
.widget-calendar .w-action .refresh { background: transparent; border:1px solid rgb(0 0 0 / 6%); }
.widget-calendar .w-tooltip { font-size:13px; color:var(--text); background: color-mix(in srgb, var(--bg-secondary) 92%, transparent); padding:8px; border-radius:10px; box-shadow: var(--shadow-card); margin-top:8px; }

@media (prefers-color-scheme: dark) {
  .widget-calendar { background: linear-gradient(180deg, rgb(20 20 22 / 75%), rgb(18 18 20 / 72%)); border:1px solid rgb(255 255 255 / 4%); color:var(--text); }
  .widget-calendar .w-day { background: rgb(255 255 255 / 2%); }
}

/* Mobile adaptation for weather button: center it horizontally */
@media (max-width: 768px) {
  .weather-btn {
    left: 50%;
    right: auto;
  }
}

/* Calm theme styles for cart empty message */
[data-theme='calm'] .cart-empty-message {
  color: #333 !important;
  font-size: 1.1rem;
  text-align: center;
  padding: 20px;
}

/* Additional calm theme overrides for elements not adapted */
[data-theme='calm'] .category-name {
  color: #333 !important;
}

[data-theme='calm'] .icon {
  color: #333 !important;
  stroke: #333 !important;
}

[data-theme='calm'] .btn {
  color: #333 !important;
  background: rgb(139 125 107 / 10%) !important;
  border-color: rgb(139 125 107 / 20%) !important;
}

[data-theme='calm'] .cart-glass-btn {
  color: #333 !important;
  background: rgb(139 125 107 / 10%) !important;
  border-color: rgb(139 125 107 / 20%) !important;
}

[data-theme='calm'] svg[stroke*="var(--accent)"] {
  stroke: #333 !important;
}

[data-theme='calm'] .favorite-btn.like svg[stroke*="var(--accent)"] {
  stroke: var(--accent) !important;
}

[data-theme='calm'] svg[fill*="var(--accent)"] {
  fill: #333 !important;
}

[data-theme='calm'] .favorite-btn {
  color: #333 !important;
}

[data-theme='calm'] .send-btn {
  color: #fff !important;
  background: #333 !important;
  border-color: #555 !important;
}

[data-theme='calm'] .ai-chat-modal-send-btn {
  color: #fff !important;
  background: #333 !important;
  border-color: #555 !important;
}

[data-theme='calm'] .btn-light {
  background: #333 !important;
  color: #fff !important;
  border-color: #555 !important;
}

[data-theme='calm'] .btn-success {
  background: #333 !important;
  color: #fff !important;
  border-color: #555 !important;
}

[data-theme='calm'] .cart-modal-btn {
  background: #333 !important;
  color: #fff !important;
  border-color: #555 !important;
}

[data-theme='calm'] .text-success {
  color: #333 !important;
}

[data-theme='calm'] .breadcrumb-separator {
  color: #333 !important;
}

[data-theme='calm'] .photo.gallery-thumb {
  border-color: #333 !important;
}

[data-theme='calm'] .availability-hints {
  color: #666 !important;
}

[data-theme='calm'] p.mb-0 {
  color: #333 !important;
}

[data-theme='calm'] p.mb-1 {
  color: #333 !important;
}

[data-theme='calm'] .cart-modal-btn {
  box-shadow: none !important;
}

[data-theme='calm'] .cart-modal-btn:hover {
  background: #555 !important;
}

[data-theme='calm'] .btn-close {
  box-shadow: none !important;
}

[data-theme='calm'] .btn-close:hover {
  background: #555 !important;
  color: #fff !important;
}

[data-theme='calm'] .btn-clear-cart {
  box-shadow: none !important;
}

[data-theme='calm'] .btn-clear-cart:hover {
  background: #555 !important;
}

[data-theme='calm'] .nav-btn svg.icon {
  fill: none !important;
  stroke: #333 !important;
}

[data-theme='calm'] .nav-btn.active svg.icon {
  fill: #333 !important;
  stroke: #333 !important;
}

[data-theme='calm'] .btn-success {
  box-shadow: none !important;
}

[data-theme='calm'] .btn-success:hover {
  background: #555 !important;
}

button[onclick*="openWriteReviewModal"] {
  box-shadow: none !important;
}

[data-theme='calm'] .send-btn.ai-chat-modal-send-btn {
  box-shadow: none !important;
}

/* Vertical product photo slider styles */
.product-photo-layout { align-items: start; }
.product-photo-layout .pps-main { width:100%; height:100%; min-height:360px; }
.product-photo-layout .pps-main img#wps-main-img, .product-photo-layout img#main-product-image { width:100%; height:100%; object-fit:cover; display:block; }
.pps-thumbs { display:flex; flex-direction:column; align-items:center; }
.pps-thumbs .thumb { transition: transform .12s ease, border-color .18s ease; box-shadow: 0 8px 20px rgb(0 0 0 / 8%); }
.pps-thumbs .thumb:hover { transform: translateY(-4px); }
.pps-thumbs .thumb.active, .pps-thumbs .thumb[aria-current='true'] { border-color: var(--accent) !important; box-shadow: 0 12px 30px rgb(var(--accent-rgb) 0.12); transform: translateY(-6px); }
.pps-thumbs::-webkit-scrollbar { width:10px; }
.pps-thumbs::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 12%); border-radius:10px; }

/* Responsive: on small screens show thumbs below main image horizontally */
@media (max-width: 720px) {
  .product-photo-layout { grid-template-columns: 1fr; }
  .pps-thumbs { flex-direction:row; gap:8px; overflow:auto; max-height:120px; padding-top:8px; }
  .pps-thumbs .thumb { width:72px; height:72px; min-width:72px; }
}

/* Layout for hero-like product display (big title + overlapping thumb stack) */
.product-split { align-items: start; }
.product-title { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text); }
.product-title { text-transform: uppercase; letter-spacing: 0.06em; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.product-price { color: var(--accent); margin-top: 8px; }
.product-title-english { font-size: 0.45em; opacity: 0.86; font-weight:600; display: inline-block; vertical-align: baseline; margin-left:6px; }
.product-media-right .photo-main-wrap img { transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease; }
.thumb-stack { display:none; }
.thumb-stack .thumb { transition: transform 520ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, border-color 180ms ease; }
.thumb-stack .thumb:hover { transform: translateX(0) translateY(-6px) scale(1.02); box-shadow: 0 20px 48px rgb(0 0 0 / 18%); }
.thumb-stack .thumb.active { border-color: var(--accent) !important; transform: translateX(0) translateY(-10px) scale(1.06); box-shadow: 0 28px 60px rgb(var(--accent-rgb) 0.18); }
.thumb-btn { background:transparent; border:0; }
.control-text { background: color-mix(in srgb, var(--glass-color) 80%, transparent); border:1px solid var(--glass-border); color:var(--text); font-weight:700; }

/* Pull animation helpers */
.pull-out { transform: translateX(-18px) scale(0.985); opacity:0.88; }
.fade-in { opacity: 0; transform: scale(1.02); transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.9,.2,1); }
.fade-in.show { opacity:1; transform: scale(1); }

@media (max-width: 900px) {
  .product-split { grid-template-columns: 1fr; }
  .product-media-right .photo-main-wrap img { height: 360px; }
  .thumb-stack { position: static; display:flex; flex-direction:row; gap:8px; margin-top:12px; right:0; transform:none; overflow:auto; }
}

/* Stack visual: overlapping look for thumbnails */
.thumb-stack img.thumb { display:block; margin-top:-36px; box-shadow: 0 12px 32px rgb(0 0 0 / 14%); border:4px solid rgb(255 255 255 / 80%); }
.thumb-stack img.thumb:first-child { margin-top:0; }
.thumb-stack { scrollbar-width: thin; }

/* Make the stack photos appear as partially hidden background peeking from right */
.product-media-right .thumb-stack { right: -56px; }
.product-media-right .thumb-stack img.thumb { width: 240px; height: 240px; margin-top: -72px; transform-origin: right top; }
.product-media-right .thumb-stack img.thumb:nth-child(1){ transform: translate(0,0) rotate(-1deg); }
.product-media-right .thumb-stack img.thumb:nth-child(2){ transform: translate(12px,12px) rotate(-2deg); }
.product-media-right .thumb-stack img.thumb:nth-child(3){ transform: translate(24px,24px) rotate(-3deg); }
.product-media-right .thumb-stack img.thumb:nth-child(n+4){ transform: translate(28px,28px) rotate(-4deg); opacity:0.96; }


/* Photo deck rewritten as horizontal carousel */
.photo-deck {
  position: absolute;
  right: 8px;
  top: 20px;
  width: calc(100% - 40px);
  max-width: 760px;
  height: 460px;
  z-index: 30;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  overflow: auto hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  pointer-events: auto;
}
.photo-deck::-webkit-scrollbar { height: 10px; }
.photo-deck::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 12%); border-radius: 999px; }

.photo-deck .deck-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 340px;
  height: 420px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 46px rgb(0 0 0 / 22%), 0 6px 18px rgb(0 0 0 / 12%);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease, opacity 220ms ease;
  position: relative;
  cursor: pointer;
  border: 1px solid rgb(255 255 255 / 6%);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
}

/* Liquid glass glossy overlay on each card (subtle animated texture)
   Uses the inline SVG filter `#liquid-glass` defined in the document. */
.photo-deck .deck-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 4%));
  filter: url("#liquid-glass") blur(0.6px);
  opacity: 0.9;
}

.photo-deck .deck-card::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%));
  pointer-events: none;
  backdrop-filter: blur(8px);
  opacity: 0.65;
}

.photo-deck .deck-card .deck-index {
  left: 12px; top: 12px; z-index: 12;
  background: rgb(0 0 0 / 50%); color: #fff; padding:6px 8px; border-radius:8px; font-weight:700;
}

.photo-deck .deck-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 28px 80px rgb(0 0 0 / 28%); }
.photo-deck .deck-card.active { transform: translateY(-10px) scale(1.06); box-shadow: 0 42px 110px rgb(var(--accent-rgb) 0.18); }
.photo-deck .deck-card:focus { outline: none; box-shadow: 0 36px 96px rgb(0 0 0 / 28%); }

/* Desktop large cards size override */
@media(min-width: 1200px) {
  .photo-deck { height: 520px; max-width: 820px; }
  .photo-deck .deck-card { width: 420px; height: 520px; border-radius: 24px; }
}

/* Responsive: narrow screens show a simpler horizontal strip */
@media (max-width: 900px) {
  .photo-deck { position: static; width: 100%; height: auto; max-width: 100%; padding: 8px 6px; gap: 12px; scroll-snap-type: x proximity; }
  .photo-deck .deck-card { width: 180px; height: 240px; border-radius: 12px; }
}

/* Prevent hyphenation splitting words with '-' */
.product-info-left .product-title, .product-info-left .product-title-english { hyphens: none; word-break: normal; overflow-wrap: break-word; }

/* Ensure left info/header stays above media deck */
.product-info-left { position: relative; z-index: 1000; }

/* Prevent title text from flowing under media: limit width and ensure wrapping */
.product-info-left .product-title { display:block; max-width: 100%; word-break: break-word; hyphens: auto; }

/* Split + Dynamic Title (lead + rest) */
.product-title.split{display:block; line-height:0.98; font-weight:900; color:var(--text);}
.product-title.split .lead{font-size: clamp(2.2rem, 6.2vw, 4.2rem); display:block; margin:0; padding:0 2px;}
.product-title.split .rest{font-size: clamp(1.0rem, 3.2vw, 1.4rem); display:block; margin-top:6px; opacity:0.94; font-weight:600; padding:0 2px}
.product-title .product-title-english{font-weight:600; font-size:0.78em; opacity:0.86; display:inline-block; vertical-align:baseline; margin-left:6px}

/* Glass accent behind lead */
.product-title.split .lead{position:relative; border-radius:12px}
.product-title.split .lead::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:12px; background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)); backdrop-filter: blur(6px) saturate(1.05); filter: url("#liquid-glass");}

@media (min-width: 1200px){
  .product-title.split .lead{font-size: clamp(3rem, 4.8vw, 5.2rem);}
  .product-title.split .rest{font-size: clamp(1rem, 2.4vw, 1.6rem);}
}

@media (max-width: 720px){
  .product-title.split .lead{font-size: clamp(1.6rem, 6.8vw, 2.4rem);}
  .product-title.split .rest{font-size: clamp(0.95rem, 3.8vw, 1.1rem); margin-top:4px}
}

/* Overlay title on photo (single-column layout) */
.product-title.overlay{position:absolute; left:18px; bottom:22px; right:18px; z-index:120; color: #fff; text-shadow: 0 6px 20px rgb(0 0 0 / 50%);}
.product-title.overlay .lead{font-size: clamp(2.6rem, 9vw, 4.2rem);line-height: 0.92;font-weight:900;display:block;}
.product-title.overlay .rest{font-size: clamp(1rem, 3.6vw, 1.6rem); opacity:0.95; margin-top:6px; display:block}
.product-title.overlay::before{content:''; position:absolute; inset:0 0 -6px; z-index: -1; border-radius:18px; background: linear-gradient(180deg, rgb(0 0 0 / 16%), rgb(0 0 0 / 6%)); backdrop-filter: blur(8px) saturate(1.05); mix-blend-mode: multiply; pointer-events:none}

/* Stronger iOS2025 card visual for product-photo and deck-cards */
.photo-main-wrap img, .photo-deck .deck-card { border-radius:20px; box-shadow: 0 30px 80px rgb(0 0 0 / 32%), 0 8px 28px rgb(0 0 0 / 18%); transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease; border: 1px solid rgb(255 255 255 / 6%); }
.photo-main-wrap img:hover, .photo-deck .deck-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 48px 140px rgb(0 0 0 / 36%), 0 12px 36px rgb(0 0 0 / 20%); }
.photo-deck .deck-card::before { opacity: 0.95; }
.photo-deck .deck-card::after { opacity: 0.8; }

/* Price under slider styling */
.product-price-under{background: linear-gradient(180deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 0%));padding: 45px 0 0;border-radius:14px;} 

/* Stronger liquid-glass for overlay title */
.product-title.overlay{ text-shadow: 0 10px 30px rgb(0 0 0 / 55%);}
.product-title.overlay::before{ background: linear-gradient(180deg, rgb(0 0 0 / 26%), rgb(0 0 0 / 8%)); backdrop-filter: blur(12px) saturate(1.08); opacity:0.96 }
.product-title.overlay .lead{text-shadow: 0 16px 40px rgb(0 0 0 / 60%);}

/* Make deck-cards span container width on mobile and fill more of available width on desktop */
@media (max-width: 900px) {
  .photo-deck .deck-card { width: calc(100% - 32px); height: calc( (100vw - 32px) * 0.66 ); border-radius: 16px; }
  .photo-main-wrap img { height: auto; max-height: 60vh; object-fit: cover; }
}

@media (min-width: 901px) {
  .photo-deck { justify-content: center; }
  .photo-deck .deck-card { width: min(720px, 92%); height: auto; aspect-ratio: 16/9; }
}

/* Compact compatibility for narrow screens */
@media (max-width: 900px) {
  .photo-deck { position: static; width: 100%; height: auto; margin-top: 12px; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .photo-deck .deck-card { position: relative; right: auto; top: auto; transform: none; width: 160px; height: 220px; flex: 0 0 auto; border-radius:10px; }
  .product-split { grid-template-columns: 1fr; }
  .product-split .product-info-left > div { max-width: calc(100% - 40px); }
  .photo-deck .deck-card:hover { transform: none; box-shadow: 0 12px 32px rgb(0 0 0 / 12%); }
}

/* Use CSS variable for main photo height to keep all overlay layers stable */
:root { --main-photo-height: 560px; }
.photo-frame { height: var(--main-photo-height); max-height: 80vh; }
.photo-main-wrap { height: var(--main-photo-height); cursor: pointer; }
.photo-main-wrap img { height: var(--main-photo-height); max-height: 80vh; }
.photo-deck { height: var(--main-photo-height); }

/* Ensure overlay layers match main image width and are positioned exactly */
.photo-frame, .photo-main-wrap, .photo-deck, .thumb-controls { width: 100%; box-sizing: border-box; }
.photo-deck { position: absolute; left: 0; right: 0; top: 0; display:flex; align-items:center; justify-content:center; }
.thumb-controls { position: absolute; bottom: 14px; right: 16px; z-index: 140; display:flex; gap:8px; }

.sticky-search {
  position: fixed;
  top: 0;
  left: 0;
  height: 139px;
  border-radius: 24px;
  right: 0;
  z-index: 9000;
  padding: 14px;
  padding-top: 54px;
  backdrop-filter: blur(28px) saturate(180%);
  background: rgb(255 255 255 / 8%);
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 8%), 0 2px 16px rgb(0 0 0 / 4%);
  display: block;
  transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-120%);
  opacity: 0;
}

.search-results-card {
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  background: rgb(255 255 255);
  border: 1px solid rgb(255 255 255 / 10%);
}

.sticky-search .sticky-search-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: rgb(255 255 255);
  border-bottom: 1px solid rgb(0 0 0 / 4%);
}

@media (max-width: 768px) {
  .nav-btn {
    min-height: 56px;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
    transform: scale(1.1);
  }
}


.nav-bar.menu-open .top-action-panel,
.top-action-panel.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}


/* Visible only on small viewports when nav-bar is opened or panel has .show */
@media (max-width: 768px) {
  .nav-bar.menu-open #top-action-panel,
  .nav-bar.menu-open .top-action-panel,
  #top-action-panel.show,
  .top-action-panel.show {
    display: flex !important;
    bottom: 92px !important;
    padding: 2px 24px;
    margin: 0;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(56px);
    background: #414141;
    box-shadow: inset 0 0 0 1px 
      color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0 -2px 
      color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0 -2px 
      color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
      color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0 -2px 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent), inset 0 3px 4px -2px 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent), 0 1px 5px 0 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent), 0 6px 16px 0 
      color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 8%), transparent);
  }

  /* show collapse button inside panel */
  .nav-bar.menu-open #top-action-panel .collapse-btn,
  #top-action-panel.show .collapse-btn,
  .top-action-panel.show .collapse-btn { display: inline-flex !important; }

  /* Temporary visual diagnostic to make it obvious panel opened */
  .nav-bar.menu-open #top-action-panel.diagnostic,
  #top-action-panel.show.diagnostic,
  .top-action-panel.show.diagnostic { outline: 3px solid rgb(255 100 80 / 90%) !important; }
}

/* Desktop: show top-action-panel by default; use .hide to hide when needed */
@media (min-width: 769px) {
  #top-action-panel, .top-action-panel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: -12px !important;
    text-align: center;
    z-index: 12000 !important;
    pointer-events: auto !important;
    align-items: center;
  }

  /* Explicit hide modifier for desktop */
  #top-action-panel.hide, .top-action-panel.hide { display: none !important; }
}

/* Desktop: slide-in (off-canvas) behavior from right */
@media (min-width: 1024px) {
  #top-action-panel, .top-action-panel {
    /* start off-canvas to the right */
    transform: translateX(110%);
    opacity: 0;
    transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 300ms ease;
    pointer-events: none;

    /* sizing */
    padding: 0 !important;
    gap: 10px !important;
    width: 10%;
    align-items: center !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--glass-color) 86%, transparent 14%);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  }

  /* When asked to show, slide into view */
  #top-action-panel.show, .top-action-panel.show,
  .nav-bar.menu-open #top-action-panel, .nav-bar.menu-open .top-action-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Theme-aware tweaks */
  :root #top-action-panel, :root .top-action-panel {
    color: var(--text);
  }

  :root[data-theme='dark'] #top-action-panel, :root[data-theme='dark'] .top-action-panel {
    background: color-mix(in srgb, var(--glass-color) 86%, color-mix(in srgb, var(--bg-secondary) 6%, transparent) 14%);
    border-color: color-mix(in srgb, var(--glass-border) 85%, transparent);
  }

  :root[data-theme='calm'] #top-action-panel, :root[data-theme='calm'] .top-action-panel {
    background: color-mix(in srgb, var(--glass-color) 90%, color-mix(in srgb, var(--bg-secondary) 8%, transparent) 10%);
    border-color: color-mix(in srgb, var(--glass-border) 70%, transparent);
  }

  /* Small adjustments to contained buttons */
  #top-action-panel .ai-launcher, #top-action-panel .weather-btn, #top-action-panel .themeToggle, #top-action-panel #profileToggle,
  .top-action-panel .ai-launcher, .top-action-panel .weather-btn, .top-action-panel .themeToggle, .top-action-panel #profileToggle {
    width: 48px !important;
    height: 48px !important;
  }
}

span#cart-count {
  display: none;
}

@media (min-width: 1200px) {
  .nav-bar.glass {
    width: 90%;
    float: right;
    display: flex;
    flex-direction: column;
    place-content: center center;
    left: 0%;
  }
  
  /* удалён пустой ruleset .nav-bar.glass */
  
  div#top-action-panel {
    position: relative;
    right: -11%!important;
    display: flex;
    width: 252px!important;
    flex-direction: column;
    place-content: center center;
    align-items: center;
    border-radius: 12px!important;
  }

  div#top-action-panel {
    width: 300px!important;
     
  }

  button.nav-btn.ai-btn {
    top: -24px;
    left: 112px;
    width: 50px;
    height: 50px;
    padding:12px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-color);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-soft), 0 1px 0 0 rgb(255 255 255 / 30%) inset;
  }
}

/* Fullscreen Gallery (Wildberries Style) */
#fullscreen-gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgb(0 0 0 / 95%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#fullscreen-gallery-overlay .modal-close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 100;
  color: white;
  font-size: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  touch-action: manipulation;
}

/* Mobile close button adjustment */
@media (max-width: 1023px) {
  #fullscreen-gallery-overlay .modal-close-btn {
    top: 16px;
    right: 16px;
    font-size: 32px;
  }
}

#fullscreen-image-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  position: relative;
  touch-action: pan-x pinch-zoom;
}

/* Mobile container adjustment */
@media (max-width: 1023px) {
  #fullscreen-image-container {
    padding: 60px 16px 80px;
    max-height: calc(100dvh - 140px);
  }
}

#fullscreen-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  user-select: none;
  transition: opacity 0.15s ease;
}

@media (max-width: 1023px) {
  #fullscreen-image {
    max-height: 100%;
  }
}

/* Desktop Gallery Strip */
.wb-gallery-strip {
  height: 120px;
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 20px;
  background: rgb(0 0 0 / 50%);
  justify-content: center;
}

.wb-thumb {
  height: 100%;
  width: auto;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s;
  object-fit: cover;
}

.wb-thumb.active {
  border-color: #ee5a6f;
}

/* Mobile Navigation Controls */
.fullscreen-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  backdrop-filter: blur(10px);
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  z-index: 10;
}

.fullscreen-nav-prev { left: 16px; }
.fullscreen-nav-next { right: 16px; }

.fullscreen-dots-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.fullscreen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(255 255 255 / 40%);
  transition: all 0.3s;
}

.fullscreen-counter {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  background: rgb(0 0 0 / 50%);
  padding: 6px 12px;
  border-radius: 20px;
}


.fullscreen-dot.active {
  background: white;
}

/* Film Strip Mode for Desktop */
.film-strip-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  /* Center the first item: 50vw - half of item width (42.5vh) */
  padding: 0 calc(50vw - 42.5vh);
  box-sizing: border-box;
  gap: 8px; /* Even closer gap */
  scrollbar-width: none; /* Hide scrollbar Firefox */
  scroll-behavior: smooth;
}

.film-strip-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

.film-frame {
  height: 85vh;
  width: 85vh; /* Larger square frames */
  object-fit: cover;
  scroll-snap-align: center;
  flex-shrink: 0;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.3;
  transform: scale(0.85);
  cursor: pointer;
  border-radius: 16px; /* Slightly more rounded for iOS feel */
  box-shadow: 0 10px 30px rgb(0 0 0 / 50%);
  background: #000;
  border: 1px solid rgb(255 255 255 / 10%);
}

.film-frame.active {
  opacity: 1;
  transform: scale(1);

  /* iOS style: Clean white border, soft deep shadow */
  border: 2px solid rgb(255 255 255 / 95%);
  box-shadow: 0 30px 80px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 10%);
  z-index: 2;
}

/* Removed duplicate earlier banner rules to avoid conflicts; final rules live at file end */

/* Modern KB banner styles (new classes `kb-*`) */
.kb-banner{ --kb-radius:12px; --kb-foreground:#0b1220; --kb-muted:#6b7280; --kb-cta:#0ea5a4; --kb-cta-contrast:#fff; box-sizing:border-box; width:100%; margin:16px 0; }
.kb-card{ display:grid; grid-template-columns:88px 1fr auto; gap:14px; align-items:center; padding:12px 14px; border-radius:var(--kb-radius); background:linear-gradient(180deg,rgb(255 255 255 / 98%),rgb(250 250 250 / 99%)); border:1px solid rgb(14 20 30 / 4%); }
.kb-media{ width:88px; height:88px; border-radius:10px; overflow:hidden; display:block; background:linear-gradient(135deg,rgb(14 165 164 / 6%),rgb(14 165 164 / 2%)); }
.kb-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.kb-content{ min-width:0; }
.kb-title{ margin:0 0 4px; font-size:clamp(16px,2.0vw,18px); font-weight:700; color:var(--kb-foreground); }
.kb-desc{ margin:0; color:var(--kb-muted); font-size:13px; line-height:1.35; }
.kb-cta{ display:flex; align-items:center; gap:10px; }
.kb-btn{ --pad-v:10px; --pad-h:16px; background:var(--kb-cta); color:var(--kb-cta-contrast); border-radius:999px; border:none; padding:var(--pad-v) var(--pad-h); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 18px rgb(14 165 164 / 12%); cursor:pointer; transition:transform 160ms ease, box-shadow 160ms ease; }
.kb-btn:focus{ outline:2px solid rgb(14 165 164 / 18%); outline-offset:2px }
.kb-btn:hover{ transform:translateY(-2px); filter:brightness(1.03) }
.kb-arrow{ width:16px; height:16px; display:inline-block; transform:translateX(0); transition:transform 180ms ease }
.kb-btn:hover .kb-arrow{ transform:translateX(6px) }

@media (max-width:720px){ .kb-card{ grid-template-columns:1fr; gap:10px; padding:12px } .kb-media{ width:100%; height:140px; border-radius:10px } .kb-cta{ width:100%; justify-content:flex-end } }

@media (prefers-reduced-motion:reduce){ .kb-btn, .kb-arrow{ transition:none !important } }

/* kb-link: remove underline from banner link */
.kb-link { text-decoration: none; }

.kb-banner.kb-hero{
  margin: 0 0 40px 0;
}
.kb-banner.kb-hero .kb-card{
  background: linear-gradient(to bottom, #34c759 0%, #30d158 25%, #28cd5e 50%, #25c35a 75%, #22b954 100%);
  color: #fff;
  border-radius: 32px;
  padding: 0;
  box-shadow: 0 20px 40px rgba(52, 199, 89, 0.3), 0 8px 16px rgba(52, 199, 89, 0.2);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 40px;
  border: none;
  gap: 30px;
}
.kb-banner.kb-hero .kb-card::before{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: kb-hero-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.kb-banner.kb-hero .kb-card::after{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: kb-hero-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes kb-hero-glow{ 0%{ transform: scale(1) rotate(0deg);} 100%{ transform: scale(1.05) rotate(1deg);} }

.kb-banner.kb-hero .kb-title{ color: #ffffff; font-size:42px; font-weight:800; margin:0 0 16px 0; text-shadow:0 2px 4px rgba(0,0,0,0.1); position:relative; z-index:1; letter-spacing:-0.5px; }
.kb-banner.kb-hero .kb-subtitle{ color: #ff4757; font-size:32px; font-weight:700; margin:0 0 8px 0; text-shadow:0 2px 4px rgba(0,0,0,0.1); position:relative; z-index:1; letter-spacing:-0.3px; }
.kb-banner.kb-hero .kb-desc{ color: rgba(255,255,255,0.95); font-size:20px; margin:0; font-weight:400; position:relative; z-index:1; max-width:600px; line-height:1.4; }
.kb-banner.kb-hero .kb-media{ width:240px; height:240px; border-radius:18px; padding-left:18px; background:transparent; position:relative; z-index:1; }
.kb-banner.kb-hero .kb-media img{ object-fit:contain }
.kb-banner.kb-hero .kb-cta .kb-btn{ background: rgba(255,255,255,0.98); color: #0b1220; box-shadow: 0 12px 32px rgba(11,18,32,0.18); position:relative; z-index:1; }
.kb-banner.kb-hero .kb-arrow{ width:24px; height:24px; transform:translateX(0); transition:transform 180ms ease; }
.kb-banner.kb-hero .kb-card:hover .kb-arrow{ transform:translateX(6px); }
.kb-banner.kb-hero .kb-cta{ margin-right: 14px; margin-left: auto; }

@media (max-width:720px){
  .kb-banner.kb-hero .kb-card{ flex-direction:column; padding:50px 24px; gap:12px; min-height: auto; border-radius:24px; margin-bottom:24px; }
  .kb-banner.kb-hero .kb-media{ width:100%; height:160px; padding-left:0 }
  .kb-banner.kb-hero .kb-cta{ justify-content:flex-end }
  .kb-banner.kb-hero .kb-title{ font-size:28px; }
  .kb-banner.kb-hero .kb-subtitle{ font-size:28px; }
  .kb-banner.kb-hero .kb-desc{ font-size:16px; }
}

/* Темы для kb-hero */
[data-theme='calm'] .kb-banner.kb-hero .kb-card {
  background: linear-gradient(to bottom, #8B7D6B 0%, #A0917F 25%, #B5A89A 50%, #C2B8A8 75%, #D0C4B8 100%);
  box-shadow: 0 20px 40px rgba(139, 125, 107, 0.3), 0 8px 16px rgba(139, 125, 107, 0.2);
}

[data-theme='light'] .kb-banner.kb-hero .kb-card {
  background: transparent;
  box-shadow: 0 20px 40px rgb(255 255 255 / 16%), 0 8px 16px rgb(255 255 255 / 27%);
}

[data-theme='dark'] .kb-banner.kb-hero .kb-card {
  background: linear-gradient(to bottom, #BA55D3 0%, #9370DB 25%, #87CEEB 50%, #00BFFF 75%, #1E90FF 100%);
  box-shadow: 0 20px 40px rgba(186, 85, 211, 0.3), 0 8px 16px rgba(186, 85, 211, 0.2);
}

/* Темы для kb-subtitle */
.kb-banner.kb-hero .kb-subtitle{ color: #ffffff; font-size:42px; font-weight:700; margin:0 0 8px 0; text-shadow:0 2px 4px rgba(0,0,0,0.1); position:relative; z-index:1; letter-spacing:-0.3px; }

[data-theme='calm'] .kb-banner.kb-hero .kb-subtitle { color: #ffffff; }
[data-theme='light'] .kb-banner.kb-hero .kb-subtitle { color: #ffffff; }
[data-theme='dark'] .kb-banner.kb-hero .kb-subtitle { color: #ffffff; }