/* =====================================================================
   depth.css — "4D" layered depth for all three themes. Loaded after app.css.
   Lightweight: layered box-shadows, soft radial glows, glass surfaces, gentle 3D hover lifts.
   Respects prefers-reduced-motion and the data-motion="off" switch.
   ===================================================================== */
:root {
  --glow-1: rgba(176, 118, 90, .18);
  --glow-2: rgba(201, 164, 106, .16);
  --glow-3: rgba(127, 143, 120, .14);
  --shadow-3d: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 6px rgba(60,40,25,.06), 0 14px 34px -10px rgba(60,40,25,.22), 0 30px 60px -30px rgba(60,40,25,.28);
  --shadow-3d-hover: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 14px rgba(60,40,25,.08), 0 26px 50px -14px rgba(60,40,25,.30), 0 50px 90px -40px rgba(60,40,25,.32);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --edge: rgba(255,255,255,.6);
}
html[data-theme="light"] { --glow-1: rgba(156,107,78,.14); --glow-2: rgba(201,164,106,.12); --glow-3: rgba(110,140,126,.12); --shadow-3d: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(20,20,30,.05), 0 14px 34px -10px rgba(20,20,30,.16), 0 30px 60px -30px rgba(20,20,30,.2); --shadow-3d-hover: 0 1px 0 #fff inset, 0 6px 14px rgba(20,20,30,.07), 0 26px 50px -14px rgba(20,20,30,.22), 0 50px 90px -40px rgba(20,20,30,.24); }
html[data-theme="dark"] { --glow-1: rgba(213,163,130,.22); --glow-2: rgba(217,184,124,.16); --glow-3: rgba(147,164,142,.14); --edge: rgba(255,255,255,.08); --shadow-3d: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 8px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6), 0 40px 80px -30px rgba(0,0,0,.7); --shadow-3d-hover: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 16px rgba(0,0,0,.4), 0 30px 60px -14px rgba(0,0,0,.7), 0 60px 100px -40px rgba(0,0,0,.75); --glass: color-mix(in srgb, var(--surface) 70%, transparent); }

/* Page atmosphere: soft ambient glows that move slowly (paused for reduced motion) */
body { position: relative; }
body::before { content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 12% 18%, var(--glow-1), transparent 70%),
    radial-gradient(30% 26% at 88% 8%, var(--glow-2), transparent 70%),
    radial-gradient(34% 30% at 70% 92%, var(--glow-3), transparent 70%);
  filter: blur(10px); opacity: .9; animation: ambient 40s ease-in-out infinite alternate; }
@keyframes ambient { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }
html[data-motion="off"] body::before, body.admin::before { animation: none; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Glass header */
.site-header { background: var(--glass); box-shadow: 0 1px 0 var(--edge) inset, 0 10px 30px -18px rgba(0,0,0,.25); }

/* Elevated surfaces */
.card, .needs-card, .info-card, .usp-item, .feature-media, .summary, .order-card, .auth-card, .review, .review-form, .filters, .settings-panel, .cart-drawer, dialog.sheet {
  box-shadow: var(--shadow-3d); border-color: color-mix(in srgb, var(--line) 70%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, #fff 0%) 0%, color-mix(in srgb, var(--surface) 94%, var(--bg-2) 6%) 100%);
}
.card { transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform: translateY(-6px) rotateX(1.2deg) rotateY(-1deg); box-shadow: var(--shadow-3d-hover); }
html[dir="rtl"] .card:hover { transform: translateY(-6px) rotateX(1.2deg) rotateY(1deg); }
.card-media { background: radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--surface) 60%, #fff 40%), var(--surface-2) 75%); }
html[data-theme="dark"] .card-media { background: radial-gradient(80% 70% at 50% 30%, #35312e, var(--surface-2) 75%); }
.card-media img { filter: drop-shadow(0 18px 22px rgba(60,40,25,.22)); transition: transform .6s var(--ease), filter .6s var(--ease); }
.card:hover .card-media img { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 30px 34px rgba(60,40,25,.28)); }
.gallery-main { background: radial-gradient(75% 65% at 50% 35%, color-mix(in srgb, var(--surface) 55%, #fff 45%), var(--surface) 80%); box-shadow: var(--shadow-3d); }
html[data-theme="dark"] .gallery-main { background: radial-gradient(75% 65% at 50% 35%, #36322f, var(--surface) 80%); }
.gallery-main img { filter: drop-shadow(0 26px 30px rgba(60,40,25,.26)); }

/* Buttons: soft glow + press */
.btn:not(.ghost):not(.soft) { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent) 60%, color-mix(in srgb, var(--accent) 85%, #000 15%)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:not(.ghost):not(.soft):hover { box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 16px 34px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: translateY(1px) scale(.99); }
.chip:hover, .variant[aria-pressed="true"] { box-shadow: 0 6px 16px -8px var(--glow-1); }

/* Hero: richer droplets with refraction ring + caustic highlight */
.droplet { box-shadow: inset -8px -10px 22px rgba(255,255,255,.45), inset 6px 8px 14px var(--droplet-edge), 0 24px 40px -10px rgba(80,50,30,.18), 0 0 0 1px rgba(255,255,255,.25); }
.droplet::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 60% 70%, rgba(255,255,255,.35), transparent 60%); }
.hero .layer-light { opacity: .95; }
.hero-content .hero-inner { position: relative; }
.hero h1 { text-shadow: 0 2px 0 var(--edge), 0 18px 40px rgba(60,40,25,.12); }
html[data-theme="dark"] .hero h1 { text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5); }

/* Section titles get a subtle accent underline glow */
.section-title { position: relative; }
.section-head .section-title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 6px 16px -4px var(--glow-1); }

/* Feature band media: depth frame */
.feature-media { transform: perspective(1200px) rotateY(0deg); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.feature:hover .feature-media { transform: perspective(1200px) rotateY(-2deg) translateY(-4px); box-shadow: var(--shadow-3d-hover); }
.feature.reverse:hover .feature-media { transform: perspective(1200px) rotateY(2deg) translateY(-4px); }

/* Footer: soft top glow */
.site-footer { background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 85%, var(--bg) 15%)); box-shadow: 0 -1px 0 var(--edge) inset; }

/* Hero slides (A, A2, A3 …): stacked pictures with a slow crossfade; the first stays static when motion is off/reduced */
.hero .layer-photo .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out; }
.hero .layer-photo .hero-slide.active { opacity: 1; }
.hero .layer-photo .hero-slide picture, .hero .layer-photo .hero-slide img { width: 100%; height: 100%; }
.hero .layer-photo .hero-slide img { object-fit: cover; }
.hero .layer-photo .hero-slide .slide-blur { display: none; position: absolute; inset: -6%; background-size: cover; background-position: center 20%; filter: blur(28px) saturate(1.05) brightness(1.04); transform: scale(1.08); }
@media (min-width: 821px) {
  .hero .layer-photo .hero-slide.portrait .slide-blur { display: block; }
  /* the photo layer is 3% larger than the viewport for parallax, so keep the whole portrait inside with generous insets */
  .hero .layer-photo .hero-slide.portrait picture { position: absolute; inset: 7% 7% 10% auto; width: 46%; }
  .hero .layer-photo .hero-slide.portrait img { object-fit: contain; object-position: right center !important; filter: drop-shadow(0 30px 60px rgba(60,40,25,.28)); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero .layer-photo .hero-slide { transition: none; } }

/* Layout guards (found in QA): Leaflet must run LTR even inside RTL pages; fieldsets/grid items may shrink; nav never wraps */
.map, .leaflet-container { direction: ltr; overflow: hidden; }
.form fieldset { min-inline-size: 0; }
.checkout-layout > *, .form, .form label, .summary { min-width: 0; }
.nav a { white-space: nowrap; }
@media (max-width: 1280px) { .header-actions .pref-group.theme .label-text { display: none; } .header-actions .search-form input { width: 120px; } }

/* Reduced motion / motion off: no transforms on hover */
@media (prefers-reduced-motion: reduce) { .card:hover, .feature:hover .feature-media, .feature.reverse:hover .feature-media { transform: none; } .card:hover .card-media img { transform: none; } }
html[data-motion="off"] .card:hover { transform: translateY(-3px); }

/* Selects never exceed their column (long zone option labels on phones) */
.form select, .form input, .form textarea { min-width: 0; max-width: 100%; }
.form label > select { width: 100%; }