/* ── FE.Bottle — component CSS ─────────────────────────────────────────────
   Requires: templates/_partials/bottle_defs.html included once per document.
   Tint swap via .bottle--amber / .bottle--sage / .bottle--plum on the <svg>.
   Size via .bottle--small / .bottle--medium / .bottle--large on the <svg>.
   Dark-mode counterpart: see [data-theme="dark"] rules below.
   Reduced-motion: liquid fill transitions suppressed.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.bottle {
  display: block;
}

/* ── Sizes ────────────────────────────────────────────────────────────────── */
.bottle--small  { width: 80px;  height: 160px; }
.bottle--medium { width: 180px; height: 270px; }
.bottle--large  { width: 360px; height: 540px; }

/* ── Liquid tint routing (default: amber) ─────────────────────────────────── */
.bottle [data-bottle="liquid-body"],
.bottle [data-bottle="wave-back"],
.bottle [data-bottle="wave-front"]        { fill: url(#fe-liquid-amber); transition: opacity .35s ease; }

.bottle--sage [data-bottle="liquid-body"],
.bottle--sage [data-bottle="wave-back"],
.bottle--sage [data-bottle="wave-front"]  { fill: url(#fe-liquid-sage); }

.bottle--plum [data-bottle="liquid-body"],
.bottle--plum [data-bottle="wave-back"],
.bottle--plum [data-bottle="wave-front"]  { fill: url(#fe-liquid-plum); }

/* ── Surface band tint routing ────────────────────────────────────────────── */
.bottle [data-bottle="surface-band"]        { fill: url(#fe-surface-amber); }
.bottle--sage [data-bottle="surface-band"]  { fill: url(#fe-surface-sage); }
.bottle--plum [data-bottle="surface-band"]  { fill: url(#fe-surface-plum); }

/* ── Dark-mode label legibility ───────────────────────────────────────────── */
[data-theme="dark"] .bottle .etch text,
[data-theme="dark"] .bottle .etch line { fill: #E8E0D6; stroke: #E8E0D6; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottle [data-bottle="liquid-body"],
  .bottle [data-bottle="wave-back"],
  .bottle [data-bottle="wave-front"],
  .bottle [data-bottle="surface-band"] { transition: none; }
}