/* theme.css: shower filters (namaimax.lt › dušas). Bathroom calm: mist-blue mineral palette, deep teal ink, a book serif for headings. */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --bg: #EEF3F3;
  --panel-bg: #FAFCFC;
  --top-bg: rgba(250, 252, 252, .86);
  --stage-bg: linear-gradient(180deg, #E4EDED 0%, #D6E3E2 100%);
  --ink: #0E3437;
  --ink-soft: #2F4F51;
  --muted: #4F6466;
  --line: #CBD9D8;
  --line-strong: #A9BDBC;
  --opt-bg: #FFFFFF;
  --opt-bg-on: #FFFFFF;
  --accent-ink: #1F6F68;
  --focus: #2E8C84;
  --focus-soft: rgba(46, 140, 132, .22);
  --badge-bg: #DDEFEC;
  --badge-ink: #1F6F68;
  /* Call-to-action: morning-light yellow, deep teal label (8.3:1). */
  --btn-bg: #F4C542;
  --btn-bg-hover: #F7D266;
  --btn-ink: #0E3437;
  --btn-edge: inset 0 0 0 1px #DDAA22, inset 0 -2px 0 rgba(120, 80, 0, .18);
  --notice-bg: #E5F1EF;
  --notice-line: #C3DEDA;
  --error-bg: #FBECEA;
  --error-ink: #8E2A1F;

  --r: 18px;
  --btn-r: 999px;
  --panel-w: 460px;
  --visual-max: 640px;

  --brand-font: 500 24px/1 var(--font-display);
  --brand-track: 0;
  --h1-font: 500 38px/1.12 var(--font-display);
  --h1-track: -0.01em;
  --h2-font: 500 38px/1.15 var(--font-display);
  --price-font: 500 30px/1.1 var(--font-display);
  --num-font: 500 26px/1 var(--font-display);
}

/* the one moment of motion: water falling from the shower head */
.drop { animation: fall 1.6s linear infinite; }
.drop--1 { animation-delay: .5s; }
.drop--2 { animation-delay: 1s; }
@keyframes fall { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }

/* product photos sit on #F7F7F7: match the picture card so the photo has no visible edge */
body.has-photo .stage, body.is-gallery .stage { background: #F6F6F6; }
/* fade the photo's own edges into the card so no square outline shows */
body.has-photo:not(.is-gallery) .stage__visual > img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect; }
.thumb__live:has(img) { background: #F7F7F7; padding: 2px; }
.feat__fig.is-img, .wide__fig.is-img { background: #F7F7F7; }