/* Original leaf drawings and motion; photos remain the documented Pexels assets. */
* { scrollbar-width: thin; scrollbar-color: #527758 #eeeadd; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eeeadd; border-radius: 12px; }
::-webkit-scrollbar-thumb { background: #527758; border: 2px solid #eeeadd; border-radius: 12px; }
::-webkit-scrollbar-thumb:hover { background: #244a36; }
.delivery-shortcut { display: flex; align-items: center; justify-content: center; gap: .55rem; min-block-size: 46px; border: 1px solid var(--moss); border-radius: 16px; padding: .65rem .9rem; background: var(--paper); color: var(--forest); box-shadow: var(--shadow-soft); font: 600 .8rem system-ui, sans-serif; cursor: pointer; transition: background 180ms, color 180ms, box-shadow 180ms, transform 180ms; }
.delivery-shortcut svg { inline-size: 24px; block-size: 24px; }
.delivery-shortcut:active { transform: scale(.97); }
.falling-leaves { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; user-select: none; }
.falling-leaf { position: absolute; top: -65px; left: 2%; inline-size: 17px; block-size: 27px; color: #8a9b68; opacity: 0; animation: leaf-descent 19s linear infinite; }
.falling-leaf svg { display: block; inline-size: 100%; block-size: 100%; }
.falling-leaf:nth-child(2) { left: 96%; color: #a88b56; animation-duration: 23s; animation-delay: 6s; }
.falling-leaf:nth-child(3) { left: 5%; inline-size: 13px; animation-duration: 21s; animation-delay: 11s; }
.falling-leaf:nth-child(4) { left: 92%; inline-size: 14px; color: #a88b56; animation-duration: 25s; animation-delay: 15s; }
.leaves-paused .falling-leaf { animation-play-state: paused; }
@keyframes leaf-descent {
  0% { transform: translate3d(0, 0, 0) rotate(-20deg); opacity: 0; }
  8% { opacity: .45; }
  35% { transform: translate3d(12px, 38vh, 0) rotate(65deg); }
  65% { transform: translate3d(-6px, 72vh, 0) rotate(120deg); }
  92% { opacity: .4; }
  100% { transform: translate3d(5px, calc(100vh + 100px), 0) rotate(185deg); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .delivery-shortcut:hover { background: var(--forest); color: var(--paper); box-shadow: 0 6px 18px rgba(15,47,36,.18); }
  .about-switch button:not([aria-pressed="true"]):hover { background: rgba(126,159,132,.15); }
  .product-tabs button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--line); }
}
@media (max-width: 599px) {
  .delivery-shortcut { padding: .55rem .65rem; min-block-size: 44px; font-size: .72rem; }
  .falling-leaf:nth-child(2), .falling-leaf:nth-child(3) { display: none; }
  .falling-leaf { inline-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .falling-leaves { display: none; }
  .falling-leaf { animation: none; }
  .delivery-shortcut { transition: none; }
  .delivery-shortcut:active { transform: none; }
}

/* Slightly richer canopy motion with fine, low-contrast rain. */
.falling-leaf:nth-child(5) { left: 8%; animation-duration: 20s; animation-delay: -9s; }
.falling-leaf:nth-child(6) { left: 89%; animation-duration: 24s; animation-delay: -15s; color: #a88b56; }
.falling-leaf:nth-child(7) { left: 12%; inline-size: 12px; animation-duration: 22s; animation-delay: -4s; }
.falling-leaf:nth-child(8) { left: 85%; inline-size: 13px; animation-duration: 26s; animation-delay: -19s; }
.falling-rain { position: fixed; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; user-select: none; }
.rain-drop { position: absolute; top: -35px; inline-size: 1px; block-size: 18px; border-radius: 2px; background: linear-gradient(transparent, #719187); opacity: .15; animation: fine-rain 4s linear infinite; }
.leaves-paused .rain-drop { animation-play-state: paused; }
@keyframes fine-rain {
  from { transform: translate3d(0, -20px, 0) rotate(7deg); }
  to { transform: translate3d(-28px, calc(100vh + 70px), 0) rotate(7deg); }
}
.rain-drop:nth-child(1) { left: 3%; animation-duration: 3.95s; animation-delay: -0.43s; block-size: 26px; }
.rain-drop:nth-child(2) { left: 9%; animation-duration: 4.40s; animation-delay: -0.86s; block-size: 30px; }
.rain-drop:nth-child(3) { left: 15%; animation-duration: 4.85s; animation-delay: -1.29s; block-size: 22px; }
.rain-drop:nth-child(4) { left: 21%; animation-duration: 3.50s; animation-delay: -1.72s; block-size: 26px; }
.rain-drop:nth-child(5) { left: 27%; animation-duration: 3.95s; animation-delay: -2.15s; block-size: 30px; }
.rain-drop:nth-child(6) { left: 33%; animation-duration: 4.40s; animation-delay: -2.58s; block-size: 22px; }
.rain-drop:nth-child(7) { left: 39%; animation-duration: 4.85s; animation-delay: -3.01s; block-size: 26px; }
.rain-drop:nth-child(8) { left: 45%; animation-duration: 3.50s; animation-delay: -3.44s; block-size: 30px; }
.rain-drop:nth-child(9) { left: 51%; animation-duration: 3.95s; animation-delay: -3.87s; block-size: 22px; }
.rain-drop:nth-child(10) { left: 57%; animation-duration: 4.40s; animation-delay: -4.30s; block-size: 26px; }
.rain-drop:nth-child(11) { left: 63%; animation-duration: 4.85s; animation-delay: -4.73s; block-size: 30px; }
.rain-drop:nth-child(12) { left: 69%; animation-duration: 3.50s; animation-delay: -5.16s; block-size: 22px; }
.rain-drop:nth-child(13) { left: 75%; animation-duration: 3.95s; animation-delay: -5.59s; block-size: 26px; }
.rain-drop:nth-child(14) { left: 81%; animation-duration: 4.40s; animation-delay: -6.02s; block-size: 30px; }
.rain-drop:nth-child(15) { left: 87%; animation-duration: 4.85s; animation-delay: -6.45s; block-size: 22px; }
.rain-drop:nth-child(16) { left: 93%; animation-duration: 3.50s; animation-delay: -6.88s; block-size: 26px; }
@media (max-width: 599px) {
  .falling-leaf:nth-child(n+7) { display: none; }
  .falling-leaf:nth-child(5) { left: 7%; inline-size: 12px; }
  .falling-leaf:nth-child(6) { left: 88%; inline-size: 12px; }
  .rain-drop:nth-child(even) { display: none; }
  .rain-drop { opacity: .11; }
}
@media (prefers-reduced-motion: reduce) {
  .falling-rain, .falling-leaves { display: none; }
  .rain-drop, .falling-leaf { animation: none; }
}

/* More legible weather, with a clear central reading area. */
.rain-drop { inline-size: 1.4px; opacity: .34; background: linear-gradient(transparent, #729b90 50%, #456f65); }
.rain-drop:nth-child(3n) { inline-size: 1.8px; opacity: .27; }

@media (max-width: 599px) {
  .rain-drop { opacity: .27; }
  .rain-drop:nth-child(4n + 2) { display: block; }
}
/* Five small original glass droplets: no fog or full-screen blur. */
.glass-droplets { position: fixed; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; user-select: none; }
.glass-drop {
  position: absolute;
  inline-size: 7px;
  block-size: 11px;
  border-radius: 55% 45% 48% 52% / 65% 62% 38% 35%;
  border: 1px solid rgba(90,119,106,.28);
  background: radial-gradient(ellipse at 28% 24%, rgba(255,255,255,.8) 0 10%, transparent 28%), linear-gradient(145deg, rgba(238,249,241,.28), rgba(117,151,132,.1) 60%, rgba(57,91,75,.22));
  box-shadow: inset -1px -1px 2px rgba(47,78,60,.18), 0 1px 2px rgba(15,47,36,.12);
}
.glass-drop:nth-child(1) { left: 1.6%; top: 21%; }
.glass-drop:nth-child(2) { right: 2%; top: 35%; inline-size: 5px; block-size: 8px; }
.glass-drop:nth-child(3) { left: 2.8%; top: 70%; inline-size: 6px; block-size: 9px; }
.glass-drop:nth-child(4) { right: 1.5%; top: 81%; inline-size: 8px; block-size: 12px; }
.glass-drop:nth-child(5) { right: 3.3%; top: 16%; inline-size: 4px; block-size: 6px; }
@media (max-width: 599px) {
  .glass-drop:nth-child(3), .glass-drop:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .glass-droplets { display: none; }
}
/* Three well-separated glass droplets and lighter rain. */
.glass-drop:nth-child(1) { left: 1.6%; right: auto; top: 18%; }
.glass-drop:nth-child(2) { right: 1.8%; left: auto; top: 52%; }
.glass-drop:nth-child(3) { left: 2.4%; right: auto; top: 84%; }
.rain-drop { opacity: .22; }
.rain-drop:nth-child(3n) { display: none; }
@media (max-width: 599px) {
  .glass-drop:nth-child(3) { display: none; }
  .glass-drop:nth-child(2) { top: 74%; }
  .rain-drop { opacity: .17; }
}