/* ==========================================================================
   Rizovit product pages (Rice Panel, Rice Tile)
   The product sits centre-stage on a lit backdrop; the name runs huge across
   the top and small facts sit in the corners. Below: buy box, demo copy,
   a live demo of what the product does, specs, the sibling product.
   ========================================================================== */

:root {
  --stage-hi: #74883D;   /* sunlit leaf, centre of the olive stage */
  --stage-lo: #1E2710;   /* stage edge */
  --bran-hi: #FBF6E8;    /* lit bran, centre of the light stage */
  --bran-lo: #D6C69B;    /* bran edge */
}

/* ---------- Stage ---------- */
.pstage {
  position: relative;
  height: max(640px, min(100svh, 1040px));
  overflow: hidden;
  isolation: isolate;
}
.pstage--olive {
  background: radial-gradient(85% 70% at 50% 62%, var(--stage-hi) 0%, var(--paddy) 52%, var(--stage-lo) 100%);
  color: var(--on-dark);
}
.pstage--bran {
  background: radial-gradient(85% 70% at 50% 62%, var(--bran-hi) 0%, var(--rice-2) 55%, var(--bran-lo) 100%);
  color: var(--ink);
}
.pstage__viewer {
  position: absolute;
  inset: clamp(150px, 24%, 280px) 0 0 0;
  z-index: 0;
}
.pstage__ui {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px);
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.pstage__ui a, .pstage__ui button, .pstage__ui label, .pstage__ui input { pointer-events: auto; }
.pstage__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: start; }
.pstage__crumbs { grid-column: 1 / -1; display: flex; gap: 10px; opacity: .8; }
.pstage__crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pstage__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 14rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-wrap: balance;
  min-width: 0;
}
.pstage__meta { text-align: right; font-size: var(--t-sm); line-height: 1.45; padding-top: .6em; }
.pstage__foot {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 20px;
}
.pstage__made { max-width: 19em; font-size: var(--t-sm); line-height: 1.45; display: flex; gap: 12px; align-items: flex-start; }
.pstage__made .mark { width: 22px; height: 22px; flex: none; color: var(--straw); }
.pstage--bran .pstage__made .mark { color: var(--husk); }
.pstage__right { display: grid; justify-items: end; gap: 12px; text-align: right; }
.pstage__hint { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); letter-spacing: .04em; opacity: .8; }
.pstage__hint svg { width: 28px; height: 14px; }
.pstage__views { justify-content: center; }
/* Centre of the stage foot: current dimensions over the size (and view) switches */
.pstage__mid { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pstage__switches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pstage__dim {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.pstage__dim::before, .pstage__dim::after { content: ""; width: 28px; height: 9px; border: solid currentColor; border-width: 0 1px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .55; }

/* Option pills on dark backgrounds */
.is-dark .opt > span, .is-deep .opt > span { border-color: var(--line-dark); }
.is-dark .opt:hover > span, .is-deep .opt:hover > span { border-color: var(--on-dark); }
.is-dark .opt input:checked + span, .is-deep .opt input:checked + span { background: var(--rice); color: var(--paddy-deep); border-color: var(--rice); }
.pstage__views .opt > span { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(243, 238, 226, .06); }
.pstage--bran .pstage__views .opt > span { background: rgba(255, 255, 255, .35); }
.pstage--bran .pstage__views .opt input:checked + span { background: var(--ink); }

.no-webgl { display: grid; place-items: center; }
.no-webgl::after { content: ""; width: min(46vw, 360px); aspect-ratio: 1; border-radius: 18px; background: var(--fin-natural); transform: rotate(-8deg); box-shadow: 0 40px 60px -30px rgba(31, 37, 16, .5); }

@media (max-width: 760px) {
  .pstage { height: max(600px, min(100svh, 900px)); }
  .pstage__viewer { inset: 150px 0 190px 0; } /* room for the size switch under the model */
  .pstage__head { grid-template-columns: 1fr; }
  .pstage__meta { text-align: left; padding-top: 0; }
  .pstage__foot { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .pstage__views { justify-content: flex-start; order: -1; }
  .pstage__mid { justify-items: start; text-align: left; order: -1; }
  .pstage__mid .pstage__views { order: 0; }
  .pstage__switches { justify-content: flex-start; }
  .pstage__right { justify-items: start; text-align: left; }
  .pstage__made { display: none; }
}

/* ---------- Sizes to scale (buy box) ---------- */
.sizecmp { margin: 8px 0 0; padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; }
.sizecmp__title { color: var(--ink-2); }
.sizecmp__svg { width: 100%; max-height: 190px; overflow: visible; }
.sizecmp__shape { fill: rgba(205, 178, 122, .1); stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; transition: fill .45s, stroke .45s, stroke-dasharray .45s; }
.sizecmp__item.is-on .sizecmp__shape { fill: var(--fin-natural); stroke: var(--husk); stroke-dasharray: none; }
.sizecmp__dim { fill: none; stroke: var(--ink-2); stroke-width: 1; opacity: .45; transition: opacity .45s; }
.sizecmp__label { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: .03em; fill: var(--ink-2); opacity: .6; transition: opacity .45s; }
.sizecmp__item.is-on .sizecmp__dim, .sizecmp__item.is-on .sizecmp__label { opacity: 1; fill: var(--ink); }
.sizecmp__item.is-on .sizecmp__dim { fill: none; stroke: var(--ink); }
/* Panels are drawn from one corner, so only the chosen size keeps its dimension line */
.sizecmp--nested .sizecmp__item:not(.is-on) .sizecmp__dim, .sizecmp--nested .sizecmp__item:not(.is-on) .sizecmp__label { opacity: 0; }
.sizecmp__bar path { stroke: var(--ink-2); stroke-width: 2; }
.sizecmp__bar text { font-family: var(--f-cond); font-size: 11px; fill: var(--ink-2); }
.sizecmp__note { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Buy ---------- */
.buy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.buy__info { display: grid; gap: 28px; align-content: start; max-width: 42rem; }
.buy__info .tag { justify-self: start; color: var(--husk); }
.prose { display: grid; gap: 1em; font-size: 1.075rem; line-height: 1.68; color: var(--ink-2); max-width: 36em; }
.made {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
}
.made .mark { width: 44px; height: 44px; color: var(--husk); }
.made p { font-size: var(--t-lg); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; }

.buybox {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--line);
}
.buybox__name { display: grid; gap: 6px; }
.buybox__name h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem); line-height: .9; letter-spacing: -.02em; }
.buybox__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buybox__price strong { font-size: var(--t-lg); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.buybox fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.buybox legend { padding: 0; margin-bottom: 10px; }
.buybox__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.buybox__row .btn { flex: 1 1 200px; }
.buybox__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.buybox__total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.buybox__notes { display: grid; gap: 4px; color: var(--ink-2); }
.buybox__notes li { padding-left: 18px; position: relative; }
.buybox__notes li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 3px; border-radius: 3px; background: var(--husk); }

@media (max-width: 900px) {
  .buy__grid { grid-template-columns: 1fr; }
  .buybox { position: static; order: -1; }
}

/* ---------- Sound demo (panel) ---------- */
.sound__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.sound__text { display: grid; gap: 24px; align-content: start; }
.sound__btns { display: grid; gap: 12px; }
.sbtn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--line-dark);
  text-align: left;
  transition: background-color .3s, border-color .3s;
}
.sbtn:hover { background: rgba(243, 238, 226, .06); }
.sbtn[aria-pressed="true"] { border-color: var(--sb-c); background: rgba(243, 238, 226, .08); }
.sbtn__icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sb-c);
  color: var(--paddy-deep);
}
.sbtn__icon svg { width: 16px; height: 16px; }
.sbtn[aria-pressed="true"] .sbtn__icon { animation: pulse 1s var(--ease-out) infinite; }
@keyframes pulse { 50% { transform: scale(.9); } }
.sbtn strong { display: block; font-weight: 600; font-size: 1.05rem; }
.sbtn small { display: block; color: var(--on-dark-2); font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.sbtn--empty { --sb-c: var(--straw); }
.sbtn--panel { --sb-c: var(--sprout); }

.chart { display: grid; gap: 14px; margin: 0; }
.chart__plot { position: relative; aspect-ratio: 16 / 10; margin-left: 52px; margin-bottom: 26px; }
.chart__plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__tick { position: absolute; font-size: var(--t-xs); color: var(--on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__tick--y { right: calc(100% + 10px); transform: translateY(-50%); }
.chart__tick--x { top: calc(100% + 8px); transform: translateX(-50%); }
.chart figcaption { color: var(--on-dark-2); }

@media (max-width: 900px) {
  .sound__grid { grid-template-columns: 1fr; }
}

/* ---------- Configurator (tile) ---------- */
.config__head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 64px); }
.config__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.config__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: calc(var(--radius) * 1.3);
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 45%, var(--stage-hi) 0%, var(--paddy) 60%, var(--paddy-deep) 100%);
}
.config__stage .pstage__hint { position: absolute; z-index: 1; left: 18px; bottom: 16px; color: var(--on-dark); pointer-events: none; }
.config__panel { display: grid; gap: 28px; }
.config__panel fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.config__panel legend { padding: 0; margin-bottom: 12px; color: var(--on-dark-2); }

.calc {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius);
  background: rgba(243, 238, 226, .07);
  border: 1px solid var(--line-dark);
}
.calc h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
.is-dark .field input {
  background: rgba(243, 238, 226, .08);
  border-color: var(--line-dark);
  color: var(--on-dark);
}
.is-dark .field input:focus { background: rgba(243, 238, 226, .14); border-color: var(--straw); }
.is-dark .field .err { color: #F2B8A0; }
.calc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.calc__out div { display: grid; gap: 2px; min-width: 0; }
.calc__out div:last-child { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.calc__out span { font-size: var(--t-xs); color: var(--on-dark-2); }
.calc__out strong { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__out div:last-child strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--straw); }

@media (max-width: 900px) {
  .config__grid { grid-template-columns: 1fr; }
}

/* ---------- Specs + mounting ---------- */
.specs__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 100px);
}
.specs__intro { display: grid; gap: 14px; align-content: start; }
.spec-list { display: grid; margin: 0; }
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line-2);
}
.spec-list > div:last-child { border-bottom: 1px solid var(--line-2); }
.spec-list dt { color: var(--ink-2); }
.spec-list dd { margin: 0; font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ptag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(181, 131, 58, .16);
  color: #7A5420;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-xs);
}

.mount { margin-top: clamp(72px, 9vw, 140px); display: grid; gap: 32px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.step { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.step__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2vw, 4.6rem); line-height: .8; color: var(--husk); }
.step h4 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
.step p { color: var(--ink-2); }

@media (max-width: 800px) {
  .specs__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Related product ---------- */
.related__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(20px, 4vw, 56px);
  border-radius: calc(var(--radius) * 1.4);
  background: var(--rice);
  transition: transform .7s var(--ease-out);
}
.related__card:hover { transform: translateY(-6px); }
.related__img {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  justify-self: center;
  object-fit: contain;
  transition: transform 1s var(--ease-out);
}
.related__img:not([src]) { visibility: hidden; }
.related__card:hover .related__img { transform: rotate(-5deg) scale(1.05); }
.related__text { display: grid; gap: 14px; justify-items: start; }
.related__text h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 2rem + 5vw, 7.5rem); line-height: .82; letter-spacing: -.03em; }
.related__text p:not(.label) { color: var(--ink-2); max-width: 26em; }

@media (max-width: 720px) {
  .related__card { grid-template-columns: 1fr; }
}