/* store3d.css — pure-CSS 3D store backdrop (no images, no library): a
   perspective "room" (floor, ceiling, two shelf walls) built entirely
   from CSS gradients, sitting behind page content (z-index:-1) so it
   reads through the page's margins/gaps without ever fighting the
   legibility of cards/text. Reacts to mouse/scroll via store3d.js, which
   only ever writes the --rx/--ry/--tz custom properties below — all the
   actual 3D transform math lives here. */

html{background:var(--paper)}
body{background:transparent}

.store3d{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  perspective:1400px;
  perspective-origin:50% 42%;
  /* Default shelf palette — overridden per niche below via [data-theme]. */
  --t1:var(--stamp);
  --t2:var(--gold);
  --t3:var(--paper);
}

/* Per-niche personalization: each category gets its own accent palette on
   the same shelf geometry, so /electronics/ "feels" different from
   /beauty/ without a different scene. Chosen to echo each niche's mood
   rather than the site's generic brand colors. */
.store3d[data-theme="electronics"], .site-footer[data-theme="electronics"]        { --t1:#3E8EDE; --t2:#7BE0D6; --t3:#C7CFE0; }
.store3d[data-theme="beauty"], .site-footer[data-theme="beauty"]                  { --t1:#E58FB0; --t2:#F2C6D0; --t3:#C9A0DC; }
.store3d[data-theme="auto"], .site-footer[data-theme="auto"]                      { --t1:#4A4E58; --t2:#C6491A; --t3:#9AA0AC; }
.store3d[data-theme="watches-jewelry"], .site-footer[data-theme="watches-jewelry"]{ --t1:#C9A227; --t2:#2B2140; --t3:#E8D7A0; }
.store3d[data-theme="home-kitchen"], .site-footer[data-theme="home-kitchen"]      { --t1:#B9622E; --t2:#7C8B4A; --t3:#E7C9A0; }
.store3d[data-theme="health-personal-care"], .site-footer[data-theme="health-personal-care"]{ --t1:#4FA88A; --t2:#7EC8E3; --t3:#DDEFE6; }
.store3d[data-theme="fashion"], .site-footer[data-theme="fashion"]                { --t1:#C22368; --t2:#1B1B1F; --t3:#E8B4C8; }
.store3d[data-theme="sports-outdoors"], .site-footer[data-theme="sports-outdoors"]{ --t1:#E8792B; --t2:#9BC53D; --t3:#2E86AB; }
.store3d[data-theme="pet-supplies"], .site-footer[data-theme="pet-supplies"]      { --t1:#B9863F; --t2:#E2B33C; --t3:#7FA6A0; }

/* The home page doesn't belong to one niche — it gets the full run of
   the store instead: every category's palette cycling through the shelf
   in turn (hue-rotate sweep), a wider look-around, and a longer walk down
   the aisle (see store3d.js reading [data-amplify]), so the entrance page
   reads as the whole site's energy rather than one department. */
.store3d[data-theme="home"] .store3d__wall,
.store3d[data-theme="home"] .store3d__floor,
.store3d[data-theme="home"] .store3d__ceiling,
.site-footer[data-theme="home"] .site-footer__floor{
  animation:store3d-hue-sweep 26s linear infinite;
}
@keyframes store3d-hue-sweep{
  from{ filter:hue-rotate(0deg) saturate(1); }
  50%{ filter:hue-rotate(180deg) saturate(1.25); }
  to{ filter:hue-rotate(360deg) saturate(1); }
}

/* The whole "room" tilts (--rx/--ry, mouse look-around) and slides along
   its own depth axis (--tz, scroll = walking further down the aisle). */
.store3d__scene{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .18s ease-out;
  will-change:transform;
}

.store3d__floor,
.store3d__ceiling,
.store3d__wall{
  position:absolute;
  top:50%; left:50%;
  margin:-450px 0 0 -800px;
  width:1600px; height:900px;
  background-repeat:no-repeat;
}

.store3d__floor{
  transform:rotateX(90deg) translateZ(-450px);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--t1) 16%, transparent) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 1px, transparent 1px 90px),
    linear-gradient(var(--paper-sunken), var(--paper-sunken));
}

.store3d__ceiling{
  transform:rotateX(-90deg) translateZ(-450px);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--t2) 30%, var(--paper)) 0 4px, transparent 4px 160px),
    linear-gradient(var(--ink), var(--ink));
}

.store3d__wall{ width:1600px; height:900px; margin:-450px 0 0 -800px; }
.store3d__wall--left{  transform:rotateY(90deg)  translateZ(-800px); }
.store3d__wall--right{ transform:rotateY(-90deg) translateZ(-800px); }

/* Shelf planks (horizontal plank-shadow bands) + product "silhouettes"
   (soft colored blobs standing in for boxes, no image assets) stacked in
   four rows, using nothing but layered radial/linear gradients. */
.store3d__wall{
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 5px, transparent 5px 165px),
    radial-gradient(46px 36px at 10% 18%,  color-mix(in srgb, var(--t1) 75%, transparent) 0 60%, transparent 72%),
    radial-gradient(40px 32px at 32% 20%,  color-mix(in srgb, var(--t2) 70%, transparent) 0 60%, transparent 72%),
    radial-gradient(44px 34px at 58% 16%,  color-mix(in srgb, var(--t3) 65%, transparent) 0 60%, transparent 72%),
    radial-gradient(38px 30px at 82% 19%,  color-mix(in srgb, var(--t1) 65%, transparent) 0 60%, transparent 72%),
    radial-gradient(42px 34px at 18% 42%,  color-mix(in srgb, var(--t2) 72%, transparent) 0 60%, transparent 72%),
    radial-gradient(46px 30px at 46% 44%,  color-mix(in srgb, var(--t1) 68%, transparent) 0 60%, transparent 72%),
    radial-gradient(40px 32px at 72% 40%,  color-mix(in srgb, var(--t3) 60%, transparent) 0 60%, transparent 72%),
    radial-gradient(44px 34px at 92% 46%,  color-mix(in srgb, var(--t2) 65%, transparent) 0 60%, transparent 72%),
    radial-gradient(40px 30px at 14% 68%,  color-mix(in srgb, var(--t3) 62%, transparent) 0 60%, transparent 72%),
    radial-gradient(46px 34px at 40% 66%,  color-mix(in srgb, var(--t1) 70%, transparent) 0 60%, transparent 72%),
    radial-gradient(38px 32px at 64% 70%,  color-mix(in srgb, var(--t2) 68%, transparent) 0 60%, transparent 72%),
    radial-gradient(44px 30px at 88% 66%,  color-mix(in srgb, var(--t1) 62%, transparent) 0 60%, transparent 72%),
    linear-gradient(var(--paper-raised), var(--paper-raised));
}

/* Atmospheric edge vignette so the CSS 3D room fades into the page
   background instead of hard-cutting, and stays subtle behind content. */
.store3d__haze{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 60% at 50% 38%, transparent 30%, var(--paper) 92%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent), transparent 20% 80%, color-mix(in srgb, var(--paper) 70%, transparent));
}

/* -------------------------------------------------------------------- */
/* Site footer — the fixed .store3d backdrop fades to solid paper near the
   top/bottom of the *viewport* (via .store3d__haze), so on a short page
   the very bottom of the screen could read as empty rather than "still in
   the aisle". The footer closes that gap for real: it sits in normal
   document flow (so it's guaranteed to be the actual end of the page,
   not just a fixed vignette edge) and continues the floor illusion —
   same plank-grid technique as .store3d__floor, tilted toward the viewer,
   tinted with the current niche's palette. */
.site-footer{
  position:relative;
  margin-top:48px;
  border-top:2px solid var(--ink);
  overflow:hidden;
  --t1:var(--stamp);
  --t2:var(--gold);
  --t3:var(--paper);
  /* --footer-bg/--footer-fg are fixed globals (see :root in listing.css) —
     deliberately not the theme-swapping --ink/--paper pair, so this band
     reads as the dim far end of the aisle in either theme. Shared with
     .category-nav-wrap/.category-select so the sub-category bar up top
     matches this same "dark shelf label" surface. */
  background:var(--footer-bg);
}

.site-footer__floor{
  height:120px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--t1) 22%, transparent) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--footer-fg) 10%, transparent) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, color-mix(in srgb, var(--t2) 18%, var(--footer-bg)), var(--footer-bg));
  transform:perspective(500px) rotateX(38deg) scale(1.5);
  transform-origin:top center;
}

.site-footer__inner{
  position:relative;
  max-width:1100px;
  margin:-28px auto 0;
  padding:0 20px 26px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px 32px;
  color:var(--footer-fg);
}

.site-footer__brand{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-weight:800;
  font-size:15px;
  color:var(--footer-fg);
}
.site-footer__brand svg{ flex:none; }
.site-footer__tagline{
  flex-basis:100%;
  font-weight:400;
  font-size:12px;
  color:color-mix(in srgb, var(--footer-fg) 65%, transparent);
  font-family:var(--mono);
}

.site-footer__niches{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  max-width:460px;
  font-size:12.5px;
}
.site-footer__niches-label{
  flex-basis:100%;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--t1) 70%, var(--footer-fg));
  margin-bottom:2px;
}
.site-footer__niches a{
  color:color-mix(in srgb, var(--footer-fg) 80%, transparent);
}
.site-footer__niches a:hover{ color:var(--footer-fg); text-decoration:underline; }

.site-footer__meta{
  font-family:var(--mono);
  font-size:11.5px;
  color:color-mix(in srgb, var(--footer-fg) 55%, transparent);
  white-space:nowrap;
}

/* -------------------------------------------------------------------- */
/* Card tilt — light parallax 3D on hover/pointer-move. Pure CSS transform
   driven by --rx/--ry set from JS (pointer position relative to card
   center). Gives cards tactile depth without any 3D engine. Namespaced
   per-card so it doesn't collide with the --rx/--ry used by the scene
   above (those live on .store3d__scene, these live on .card). */
.card{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
  transition:transform .12s ease-out,box-shadow .15s ease;
}
.card:hover{
  box-shadow:0 18px 34px -18px rgba(20,20,10,.4);
}
.card .imgwrap,
.card .card-body{
  transform:translateZ(18px);
}

/* CTA breathing glow — a slow, low-amplitude pulse that draws peripheral
   attention to the primary action without any false urgency claim. */
.btn-primary{
  position:relative;
  animation:store3d-breathe 3.4s ease-in-out infinite;
}
@keyframes store3d-breathe{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--stamp) 35%, transparent); }
  50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--stamp) 0%, transparent); }
}

/* Directional nudge — a small chevron that eases toward the primary CTA
   on card hover, a gaze-cueing technique (eye-tracking literature: motion
   toward a target pulls attention along with it). */
.actions .right{ position:relative; }
.actions .right::after{
  content:"";
  position:absolute;
  right:-2px; top:50%;
  width:6px; height:6px;
  margin-top:-3px;
  border-right:2px solid var(--stamp);
  border-bottom:2px solid var(--stamp);
  transform:translateX(-6px) rotate(-45deg);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
  pointer-events:none;
}
.card:hover .actions .right::after{
  opacity:.7;
  transform:translateX(2px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce){
  .store3d__scene{ transition:none; transform:translate(-50%,-50%) !important; }
  .store3d__wall,.store3d__floor,.store3d__ceiling,.site-footer__floor{ animation:none !important; }
  .btn-primary{ animation:none; }
  .card{ transition:none; transform:none !important; animation:none !important; opacity:1 !important; }
  .img{ transition:none; }
  .chip{ transition:none; }
  .btn{ transition:none; }
  .actions .right::after{ transition:none; }
}

@media (pointer: coarse){
  /* No hover/pointer-tracking on touch — skip tilt math entirely. */
  .card{ transform:none; }
}