/* Verkkokaupan sivut: tuotelista, tuotevalitsin, ostoskori. Käyttää styles.css:n muuttujia. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tuotelista */
.shop-group + .shop-group { margin-top: clamp(36px, 5vw, 56px); }
.shop-group-title { font-size: var(--fs-h2); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--green); }
.shop-card .card-media { background: var(--panel); }
.shop-drawing { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--panel); }
.shop-drawing svg { width: auto; height: 86%; }
.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 4px; }
.shop-price span:first-child { color: var(--ink-soft); font-size: var(--fs-small); }
.shop-price strong { font-weight: 800; font-size: 1.5rem; color: var(--green-ink); }
.ph-tag { background: var(--ph-bg); outline: 1px dashed var(--ph-line); padding: 0 6px; font-size: var(--fs-note); font-weight: 600; color: #5C4A00; }

/* Näin tilaat */
.how { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); counter-reset: h; }
.how li { counter-increment: h; display: grid; gap: 6px; align-content: start; }
.how li::before { content: counter(h); width: 34px; height: 34px; border: 1.5px solid var(--green); border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.how h2, .how h3 { font-size: var(--fs-h3); line-height: 1.25; }

/* Tuotevalitsin */
.shop-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 980px) { .shop-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 48px; } .price-box { position: sticky; top: calc(var(--header-h) + 16px); } }
.size-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.choices.stack { grid-template-columns: 1fr; }
.choice > span { display: grid; gap: 2px; }
.choice-sub { font-size: var(--fs-note); color: var(--ink-soft); font-weight: 300; }
.choice-title { display: flex; align-items: center; gap: 10px; }
.choice .swatch { display: inline-flex; flex: none; width: 30px; height: 18px; border: 1px solid var(--rule); }
.choice .swatch span { flex: 1; }
.choice:has(input:checked) { border-color: var(--magenta-ink); box-shadow: inset 0 0 0 1px var(--magenta-ink); }
.price-box { background: var(--panel); padding: 22px; display: grid; gap: 14px; }
.price-box .drawing { display: grid; place-items: center; background: var(--paper); padding: 10px; }
.price-box .drawing svg { max-width: 100%; height: auto; }
.price-box h2 { font-size: var(--fs-h3); }
.price-lines { display: grid; gap: 4px; font-size: var(--fs-small); }
.price-lines > div, .totals > div { display: flex; justify-content: space-between; gap: 12px; }
.price-lines dd, .totals dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; }
.totals .grand dt, .totals .grand dd { font-weight: 800; font-size: 1.35rem; }
.added { background: var(--paper); border-left: 4px solid var(--green); padding: 14px 16px; display: grid; gap: 10px; }
.added:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Ostoskori */
.cart-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 640px; }
.cart-table th, .cart-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.cart-table thead th { border-bottom: 2px solid var(--ink); font-weight: 800; }
.cart-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-drawing svg { width: 64px; height: 64px; display: block; background: var(--panel); }
.qty { width: 5.5em !important; min-height: 40px !important; }
.checkout { display: grid; gap: 32px; align-items: start; margin-top: 32px; }
@media (min-width: 980px) { .checkout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 48px; } .checkout .price-box { position: sticky; top: calc(var(--header-h) + 16px); } }
.order-flow { list-style: none; display: grid; gap: 10px; counter-reset: o; }
.order-flow li { counter-increment: o; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.order-flow li::before { content: counter(o); width: 26px; height: 26px; border: 1.5px solid var(--green); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-note); }
.terms { display: grid; gap: 10px; font-size: var(--fs-small); }
.terms h3 { font-size: 1rem; margin-top: 6px; }

/* Mittausohje */
.measure { display: grid; gap: 24px; align-items: center; }
@media (min-width: 880px) { .measure { grid-template-columns: 1fr 1fr; } }
.measure svg { width: 100%; height: auto; max-width: 440px; }

/* Ikkunan toiminto: pieni avautumissymboli valinnan edessä */
.toiminto-symboli { flex: none; width: 26px; height: 36px; }
/* Jaettu ikkuna 7.11.: osat omina riveinään, viimeisen osan koko lasketaan */
.osa { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--panel-deep); }
.osa:first-child { border-top: 0; padding-top: 4px; }
.osa-otsikko { font-weight: 700; margin: 0; }
.osa input[readonly] { background: var(--panel); color: var(--ink-soft, #575756); }
/* v25: lähetyspainikkeen viereen tilauksen eteneminen, maksu ja peruuttamisoikeus */
.laheta-ohje { background: var(--panel); padding: 16px 18px; display: grid; gap: 8px; font-size: var(--fs-small); }
.laheta-ohje h2 { font-size: var(--fs-h3); line-height: 1.25; }
.laheta-ohje ul { padding-left: 1.2em; display: grid; gap: 4px; }
/* v25: vahvistusten teksti ja linkit samalle riville (ei ruudukkoa) */
.choice > span.teksti { display: block; }
/* Erikoismuotoiset ikkunat 7.11.: muodon valinta kuvakkeilla, sisäkkäinen kenttäryhmä ja yhteenveto */
.choices.muodot { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
@media (max-width: 600px) { .choices.muodot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* minmax(0, ...): pitkä nimi rivittyy eikä levitä sivua */
.muoto-symboli { flex: none; width: 36px; height: 36px; }
.form-card fieldset fieldset legend { font-size: 1rem; }
.e-yhteenveto { font-size: var(--fs-small); }
#e-varalla textarea { min-height: 120px; font-size: var(--fs-small); }