/* VÄRIT JA TEKSTIKOOT: kaikki käyttöliittymätekstit vähintään 14 px. */
:root {
  --bg:#ffffff; --surface:#f4f6f8; --surface2:#eaf0f5; --card:#ffffff;
  --ink:#172b42; --muted:#526273; --accent:#173e6a; --accent-hover:#0d2d51;
  --border:#d9e0e7; --shadow:0 18px 60px #142d4a20; --radius:16px;
  color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#101b28; --surface:#182635; --surface2:#213449; --card:#172636;
  --ink:#f0f4f8; --muted:#bbc7d4; --accent:#b0d2f8; --accent-hover:#d8e9fc; --border:#35495e;
  color-scheme:dark;
}
* {box-sizing:border-box;}
html {scroll-behavior:smooth; scroll-padding-top:120px;}
body {margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
button,input,select,textarea {font:inherit;}
button {cursor:pointer;color:inherit;}
a {color:inherit;text-decoration:none;}
button,a,input,select,textarea {touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
button:disabled {cursor:not-allowed;opacity:.5;}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {outline:3px solid #508ac8;outline-offset:4px;}
img {display:block;max-width:100%;}
svg {width:24px;height:24px;max-width:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
h1,h2,h3,p,figure {margin:0;}
h1,h2,h3 {hyphens:auto;line-height:1.18;letter-spacing:-.025em;overflow-wrap:break-word;}
h1 {font-size:clamp(38px,4.5vw,64px);font-weight:650;}
h2 {font-size:clamp(30px,3.2vw,44px);font-weight:650;}
h3 {font-size:24px;font-weight:650;}
p {color:var(--muted);}
[hidden] {display:none!important;}
.container {width:100%;max-width:1400px;margin-inline:auto;padding-inline:40px;}
.section-padding {padding-block:88px;}
.eyebrow,.small-label {font-size:14px;line-height:1.5;font-weight:650;letter-spacing:.06em;text-transform:uppercase;}
.eyebrow {color:var(--accent);margin-bottom:16px;}
.body-large {font-size:19px;line-height:1.75;}
.quiet-note {font-size:15px;line-height:1.65;color:var(--muted);}
.button {max-width:100%;white-space:normal;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:13px 22px;border:1px solid transparent;border-radius:8px;font-size:16px;line-height:1.4;font-weight:650;text-align:center;transition:background .15s;}
.button-primary {background:var(--accent);color:var(--bg);}
.button-primary:hover:not(:disabled) {background:var(--accent-hover);}
.button-outline {background:transparent;border-color:var(--border);color:var(--ink);}
.button-outline:hover:not(:disabled) {background:var(--surface2);}
.button-white {background:white;color:#173e6a;}
.button-white:hover {background:#eaf0f7;}
.full-width {width:100%;}
.text-link {max-width:100%;white-space:normal;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;background:none;border:0;color:var(--accent);font-size:16px;line-height:1.5;font-weight:600;text-align:left;}
.text-link:hover {text-decoration:underline;text-underline-offset:4px;}
.text-link svg {width:18px;height:18px;}
.icon-button {width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:30px;line-height:1;}
.icon-button:hover {background:var(--surface2);}
.skip-link {position:fixed;top:10px;left:16px;z-index:100;transform:translateY(-160%);padding:12px 18px;background:var(--accent);color:var(--bg);border-radius:8px;}
.skip-link:focus {transform:translateY(0);}
/* YLÄPALKKI: suurempi logo, selkeät linkit ja ostoskori. */
.header {position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border);}
.header-inner {min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;}
.brand {display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0;font-size:32px;font-weight:750;line-height:1.2;letter-spacing:-.035em;}
.brand img {width:54px;height:42px;object-fit:contain;}
.brand-light {font-weight:450;}
.header nav {display:flex;align-items:center;gap:26px;}
.header nav a {font-size:17px;line-height:1.5;font-weight:600;padding:14px 0;white-space:nowrap;}
.header nav a:hover {color:var(--accent);text-decoration:underline;text-underline-offset:6px;}
.header-actions {display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cart-button {display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:9px;font-size:16px;font-weight:600;}
.cart-count {display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 5px;border-radius:14px;background:var(--accent);color:var(--bg);font-size:14px;font-weight:700;}
.menu-toggle {display:none;}
/* ETUSIVU: palvelut suoraan ja ymmärrettävästi. */
.hero-intro {padding:64px 0 40px;max-width:960px;}
.hero-lead {margin-top:22px;max-width:730px;font-size:20px;line-height:1.7;}
.hero-cards {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.hero-card {min-width:0;border-radius:var(--radius);overflow:hidden;}
.website-card {padding:36px;background:#173e6a;color:white;display:flex;flex-direction:column;align-items:flex-start;}
.website-card .eyebrow {color:#c7dcf3;}
.hero-card h2 {font-size:clamp(30px,2.8vw,40px);}
.website-card > p:not(.eyebrow) {color:#e1eaf5;margin-top:20px;font-size:17px;max-width:500px;}
.hero-service-list {padding-left:22px;color:#e1eaf5;font-size:16px;margin:20px 0 26px;}
.hero-service-list li {margin:5px 0;}
.website-card .button {margin-top:auto;}
.computers-card {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border:1px solid var(--border);background:var(--surface);}
.hero-computer-photo {min-height:100%;background:#171717;display:flex;align-items:center;}
.hero-computer-photo img {width:100%;height:100%;max-height:510px;object-fit:contain;}
.hero-computer-copy {min-width:0;padding:32px 26px;display:flex;flex-direction:column;align-items:flex-start;}
.hero-computer-copy > p:not(.eyebrow) {margin:20px 0 26px;font-size:17px;}
.hero-computer-copy .button {margin-top:auto;}
.web-service {display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.service-intro .body-large {margin:22px 0 26px;}
.service-intro .quiet-note {margin-top:12px;}
.service-list article {display:flex;gap:22px;border-top:1px solid var(--border);padding:24px 0;}
.service-list article > div {min-width:0;}
.service-list article:last-child {border-bottom:1px solid var(--border);}
.step-number {flex-shrink:0;font-size:16px;font-weight:650;color:var(--accent);padding-top:4px;}
.service-list h3 {font-size:23px;margin-bottom:10px;}
.service-list p {font-size:17px;}
/* VERKKOKAUPPA JA TUOTEKORTIT */
.shop-section {background:var(--surface);}
.section-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:48px;}
.section-heading > div {min-width:0;}
.section-heading > p {max-width:360px;font-size:17px;padding-top:34px;}
.shop-toolbar {display:flex;align-items:center;justify-content:space-between;padding:26px 0 20px;font-size:16px;}
.shop-toolbar strong {font-weight:650;color:var(--ink);}
.product-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.product-card {display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.product-content {display:flex;flex-direction:column;flex:1;min-width:0;padding:24px 28px 28px;}
.product-meta {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:14px;}
.condition-badge {padding:5px 10px;border-radius:5px;background:var(--surface);color:var(--ink);font-size:14px;}
.stock-label {color:#236447;font-weight:600;}
html[data-theme="dark"] .stock-label {color:#96d6b6;}
.stock-label.out-of-stock {color:var(--muted);}
.product-title {padding:0;border:0;background:none;font-size:28px;line-height:1.25;letter-spacing:-.025em;font-weight:700;text-align:left;}
.product-title:hover {color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
.product-summary {font-size:16px;line-height:1.7;margin:15px 0;}
.product-specs {display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:0;margin:0 0 14px;list-style:none;font-size:15px;line-height:1.5;}
.product-specs li {padding-left:14px;position:relative;}
.product-specs li::before {content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--muted);}
.warranty-line {font-size:15px;font-weight:600;color:var(--ink);margin-bottom:22px;}
.product-bottom {display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:auto;}
.price strong {font-size:34px;font-weight:750;line-height:1.2;letter-spacing:-.03em;}
.price span {display:block;font-size:15px;color:var(--muted);margin-top:4px;}
.details-button {margin-top:16px;}
.product-service-list {padding-left:22px;font-size:16px;margin:16px 0 26px;}
.product-service-list li {margin:7px 0;}
/* KUVAGALLERIA: pikkukuvat ja nuolet ovat näkyvissä jo tuotekortissa. */
.product-gallery {min-width:0;}
.card-gallery {padding:16px 16px 0;}
.gallery-stage {position:relative;overflow:hidden;border-radius:10px;background:#f1f2f4;touch-action:pan-y;}
.product-photo-button {display:block;position:relative;width:100%;padding:0;border:0;background:#171717;cursor:zoom-in;touch-action:pan-y;}
.product-photo-button > img {width:100%;height:390px;object-fit:contain;}
.zoom-hint {position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;background:#fffffff2;color:#172b42;padding:6px 10px;border-radius:6px;font-size:14px;font-weight:600;pointer-events:none;}
.zoom-hint svg {width:18px;height:18px;}
.photo-count {position:absolute;left:14px;bottom:14px;padding:6px 10px;border-radius:6px;background:#fffffff2;color:#172b42;font-size:14px;font-weight:600;pointer-events:none;}
.gallery-arrow {display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;padding:0;border:1px solid #d2d8df;border-radius:50%;background:#fffffff0;color:#172b42;box-shadow:0 2px 8px #00000012;}
.gallery-arrow:hover:not(:disabled) {background:white;border-color:#6c7f93;}
.gallery-arrow:disabled {visibility:hidden;}
.gallery-prev {left:10px;}
.gallery-next {right:10px;}
.gallery-thumbnails {display:flex;gap:9px;overflow-x:auto;padding:12px 3px 4px;scrollbar-width:thin;scrollbar-color:#a7b4c3 transparent;}
.card-gallery .gallery-thumbnails {min-height:90px;}
.gallery-thumb {display:flex;align-items:center;justify-content:center;flex:0 0 66px;width:66px;height:66px;padding:3px;background:var(--surface);border:2px solid var(--border);border-radius:6px;}
.gallery-thumb[aria-pressed="true"] {border-color:var(--accent);background:var(--surface2);}
.gallery-thumb img {width:100%;height:100%;object-fit:contain;border-radius:2px;}
.photo-placeholder {min-height:350px;padding:30px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);}
/* PALVELUT, YRITYS JA YHTEYDENOTTO */
.pc-service-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px;}
.pc-service-card {display:flex;flex-direction:column;min-width:0;padding:30px;border:1px solid var(--border);border-radius:var(--radius);}
.pc-service-card .small-label {color:var(--muted);}
.pc-service-card h3 {font-size:27px;margin:14px 0;}
.pc-service-card p,.pc-service-card li {font-size:16px;}
.pc-service-card ul {padding-left:22px;margin:20px 0 26px;}
.pc-service-card li {margin:6px 0;}
.pc-service-bottom {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:20px;margin-top:auto;}
.pc-service-bottom .service-price {font-size:25px;line-height:1.4;font-weight:650;color:var(--ink);}
.service-price span {display:block;font-size:15px;line-height:1.6;font-weight:400;color:var(--muted);margin-top:5px;}
.service-agreement {display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;background:var(--surface);padding:32px;border-radius:var(--radius);margin-top:32px;}
.service-agreement h3 {margin-bottom:16px;}
.service-agreement p,.service-agreement li {font-size:16px;}
.service-agreement ul {padding-left:22px;margin:0;}
.service-agreement li {margin:7px 0;}
.about-section {border-top:1px solid var(--border);}
.about-intro {display:grid;grid-template-columns:1fr 1fr;gap:70px;}
.team-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;}
.person {display:flex;align-items:center;gap:16px;padding-block:20px;border-top:1px solid var(--border);}
.person-avatar {display:flex;align-items:center;justify-content:center;width:60px;height:60px;flex-shrink:0;border-radius:50%;font-size:20px;font-weight:650;background:var(--surface2);color:var(--accent);}
.person > div {min-width:0;}
.person h3 {font-size:21px;margin-bottom:5px;}
.person p {font-size:15px;line-height:1.5;}
.support-card {display:flex;align-items:center;gap:28px;padding:32px;background:var(--surface);border-radius:var(--radius);margin-top:40px;}
.support-symbol svg {width:58px;height:58px;color:var(--accent);}
.support-copy {flex:1;}
.support-copy h3 {margin-bottom:12px;font-size:27px;}
.support-copy .eyebrow {margin-bottom:8px;}
.support-copy p {font-size:16px;}
.support-address {font-style:normal;font-size:17px;font-weight:600;margin-top:16px;}
.warranty-line a,.quiet-note a {text-decoration:underline;text-underline-offset:3px;}
.terms-page {max-width:900px;padding-block:40px 70px;}
.terms-page h1 {font-size:clamp(30px,5vw,44px);margin:24px 0;}
.terms-page h2 {font-size:25px;margin:30px 0 14px;}
.terms-page p {margin:12px 0;}
.terms-page address {font-style:normal;}
.terms-page a {text-decoration:underline;text-underline-offset:3px;}
.terms-page .button {margin-block:18px;}
.support-card > .button {flex-shrink:0;}
.contact-strip {display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:72px;padding-top:48px;border-top:1px solid var(--border);}
.contact-strip h2 {margin-bottom:14px;}
.contact-links {display:flex;flex-direction:column;gap:13px;align-items:flex-start;padding-top:10px;min-width:0;}
.contact-links > a {font-size:clamp(17px,1.8vw,24px);font-weight:600;overflow-wrap:anywhere;}
.contact-links a:hover {text-decoration:underline;text-underline-offset:5px;}
.contact-small {display:flex;flex-wrap:wrap;gap:22px;font-size:16px;margin-top:8px;}
.footer {border-top:1px solid var(--border);background:var(--surface);}
.footer-inner {display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:28px;}
.footer .brand {font-size:25px;}
.footer .brand img {width:40px;height:auto;}
.footer-inner > span {font-size:15px;color:var(--muted);margin-right:auto;}
.footer-link {border:0;background:none;color:var(--muted);font-size:15px;min-height:44px;padding:10px 0;}
.footer-link:hover {text-decoration:underline;}
/* DIALOGIT JA LOMAKKEET */
body:has(dialog[open]) {overflow:hidden;}
dialog {color:var(--ink);background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow);max-height:92dvh;padding:0;}
dialog::backdrop {background:#091b2dd4;}
.standard-dialog {width:min(680px,calc(100% - 32px));border-radius:14px;padding:28px;overflow-y:auto;}
.dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;}
.dialog-heading > :not(button) {min-width:0;overflow-wrap:anywhere;}
.dialog-heading h2 {font-size:30px;}
.dialog-heading .eyebrow {font-size:14px;margin-bottom:6px;}
.close-dialog {margin-left:auto;}
.standard-dialog > p {margin-bottom:20px;font-size:16px;}
.product-dialog {width:min(840px,calc(100% - 32px));}
.detail-gallery .product-photo-button > img {height:min(50dvh,410px);}
.detail-content {padding-top:24px;}
.detail-content > .badge {display:block;font-size:15px;color:var(--muted);margin-bottom:12px;}
.detail-content h2 {font-size:32px;margin-bottom:18px;}
.detail-content h3 {font-size:23px;margin-top:26px;margin-bottom:12px;}
.detail-content > p {font-size:16px;line-height:1.75;margin-bottom:20px;}
.detail-content dl {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);font-size:16px;line-height:1.6;margin:18px 0 26px;}
.detail-content dt,.detail-content dd {margin:0;padding:11px 8px;border-bottom:1px solid var(--border);overflow-wrap:anywhere;}
.detail-content dt {color:var(--muted);padding-left:0;}
.detail-content dd {font-weight:500;}
.detail-bottom {display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);}
label {display:block;font-size:16px;font-weight:600;line-height:1.5;margin:18px 0;}
label > span {font-size:15px;font-weight:400;color:var(--muted);}
input,select,textarea {display:block;width:100%;max-width:100%;min-width:0;margin-top:8px;padding:12px 14px;min-height:50px;background:var(--bg);color:var(--ink);border:1px solid #9aa9b8;border-radius:7px;font-size:16px;font-weight:400;line-height:1.5;}
textarea {resize:vertical;}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-row label {min-width:0;}
.assembly-fields {border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:24px 0;min-width:0;}
.assembly-fields legend {font-size:17px;font-weight:650;padding:0 6px;}
.assembly-fields label {margin:14px 0;}
.privacy-text h3 {font-size:23px;margin:24px 0 12px;}
.privacy-text p {font-size:16px;margin:0 0 16px;}
.privacy-text a {text-decoration:underline;overflow-wrap:anywhere;}
pre {white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px;font:15px/1.7 Arial,Helvetica,sans-serif;margin:20px 0;}
.preview-actions {display:flex;gap:12px;flex-wrap:wrap;margin:18px 0;}
.preview-status {display:flex;align-items:center;gap:14px;}
.preview-status > span {flex-shrink:0;display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--surface2);border-radius:50%;color:var(--accent);font-size:24px;}
.preview-status h3 {font-size:24px;}
/* OSTOSKORI JA KASSA */
.cart-dialog {position:fixed;inset:0 0 0 auto;margin:0;width:min(600px,100%);height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--border);overflow-y:auto;}
.cart-dialog > .dialog-heading {position:sticky;top:0;z-index:3;padding:24px 28px;margin:0;border-bottom:1px solid var(--border);background:var(--bg);}
.cart-body {padding:24px 28px 36px;}
.cart-prototype {padding:12px 15px;background:var(--surface);border-radius:7px;font-size:15px;color:var(--muted);margin-bottom:22px;}
.cart-item {display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--border);}
.cart-thumb {width:72px;height:88px;object-fit:contain;background:var(--surface);border-radius:6px;}
.cart-placeholder {display:flex;align-items:center;justify-content:center;}
.cart-item-top {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;font-size:16px;}
.cart-item-top strong {font-weight:650;line-height:1.5;}
.cart-item-top > span {white-space:nowrap;font-weight:650;}
.cart-item small {display:block;font-size:14px;color:var(--muted);margin-top:7px;}
.quantity-row {flex-wrap:wrap;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.quantity {flex-shrink:0;display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.quantity button {width:40px;min-height:42px;border:0;background:var(--surface);font-size:22px;}
.quantity > span {min-width:34px;text-align:center;font-size:16px;}
.remove-item {font-size:15px;border:0;background:none;color:var(--muted);padding:10px 0;min-height:44px;text-decoration:underline;}
.cart-total {display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);font-size:18px;}
.cart-total strong {font-size:29px;white-space:nowrap;}
#cart-summary > .quiet-note {margin:14px 0 22px;}
.cart-empty {text-align:center;padding:38px 8px;}
.cart-empty > svg {width:44px;height:44px;margin:0 auto 22px;color:var(--muted);}
.cart-empty h3 {font-size:26px;margin-bottom:14px;}
.cart-empty p {font-size:16px;margin-bottom:24px;}
#checkout-panel > h3 {font-size:27px;margin:24px 0 14px;}
.checkout-costs {padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:17px;font-weight:650;line-height:1.65;color:var(--ink);margin:20px 0;}
#checkout-form .terms-check {display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.65;margin:22px 0;}
#checkout-form .terms-check input {width:22px;min-height:22px;height:22px;flex:0 0 22px;margin:3px 0 0;accent-color:var(--accent);}
#checkout-form .terms-check span {font-size:15px;}
.checkout-error {color:#9c2222;font-size:16px;line-height:1.65;margin:16px 0;}
html[data-theme="dark"] .checkout-error {color:#ffb6b6;}
#order-preview > p {font-size:16px;margin:18px 0;}
/* SUURI KUVAKATSELU: näytölle sovitus ja alkuperäinen pikselikoko. */
.image-dialog {width:min(1480px,96vw);height:94dvh;max-height:94dvh;border-radius:12px;padding:0;overflow:hidden;}
.image-dialog[open] {display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.image-toolbar {display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border);}
.image-toolbar h2 {flex:1;font-size:20px;line-height:1.4;letter-spacing:0;}
.image-toolbar .button {font-size:14px;min-height:44px;padding:10px 16px;}
.image-view {position:relative;min-height:0;background:#111;}
.image-view .gallery-arrow {z-index:4;}
.image-viewport {width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;}
.image-viewport img {width:100%;height:100%;object-fit:contain;cursor:zoom-in;}
.image-viewport.is-zoomed {display:block;touch-action:auto;}
.image-viewport.is-zoomed img {width:auto;height:auto;max-width:none;max-height:none;margin:auto;cursor:zoom-out;}
.image-footer {display:flex;align-items:center;gap:20px;padding:8px 20px 12px;min-width:0;}
#image-position {font-size:16px;white-space:nowrap;}
.image-footer .gallery-thumbnails {padding-top:4px;min-width:0;}
.image-footer .gallery-thumb {flex-basis:56px;width:56px;height:56px;}
/* SELAINTALLENNUS JA PALAUTE */
.storage-notice {position:fixed;bottom:20px;left:20px;right:20px;max-width:720px;z-index:12;display:flex;align-items:center;gap:18px;padding:20px 58px 20px 22px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);}
.storage-notice p {font-size:14px;line-height:1.65;}
.storage-notice strong {color:var(--ink);}
.storage-notice .text-link {font-size:15px;flex-shrink:0;}
.notice-close {position:absolute;right:6px;top:6px;width:44px;height:44px;}
.toast {position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);z-index:30;background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:8px;box-shadow:var(--shadow);font-size:16px;text-align:center;max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;}
.toast.visible {opacity:1;transform:translate(-50%,0);}
/* TABLETTI JA PUHELIN */
@media (max-width:1100px) {
  .container {padding-inline:28px;}
  .header-inner {min-height:90px;}
  .header nav {display:none;position:absolute;left:28px;right:28px;top:calc(100% - 1px);padding:16px 22px;background:var(--bg);border:1px solid var(--border);border-radius:0 0 12px 12px;box-shadow:var(--shadow);}
  .header nav.is-open {display:flex;align-items:stretch;flex-direction:column;gap:2px;}
  .header nav a {font-size:18px;padding:14px 0;}
  .menu-toggle {display:inline-flex;}
  .hero-cards {gap:20px;}
  .website-card {padding:28px;}
  .computers-card {grid-template-columns:1fr;}
  .hero-computer-photo {display:none;}
  .hero-computer-copy {padding:28px;}
  .hero-computer-copy h2 br {display:none;}
  .web-service {gap:40px;}
  .product-content {padding:22px;}
  .product-bottom .button {width:100%;}
  .team-grid {gap:18px;}
  .person {flex-direction:column;align-items:flex-start;}
  .support-card {flex-wrap:wrap;}
  .support-copy {flex-basis:70%;}
}
@media (max-width:760px) {
  html {scroll-padding-top:96px;}
  body {font-size:16px;}
  .container {padding-inline:20px;}
  .section-padding {padding-block:56px;}
  .hero-intro {padding-top:40px;padding-bottom:30px;}
  .hero-lead {font-size:18px;margin-top:18px;}
  .hero-cards {grid-template-columns:1fr;}
  .hero-card h2 {font-size:32px;}
  .hero-computer-photo {display:flex;}
  .computers-card {grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);}
  .hero-computer-copy {padding:28px 22px;}
  .hero-computer-copy h2 br {display:block;}
  .hero-computer-photo img {max-height:410px;}
  .web-service,.about-intro,.service-agreement,.contact-strip {grid-template-columns:1fr;gap:30px;}
  .body-large {font-size:18px;}
  .service-list article {padding:22px 0;}
  .section-heading {flex-direction:column;gap:16px;}
  .section-heading > p {padding-top:0;max-width:620px;font-size:17px;}
  .product-grid {grid-template-columns:1fr;gap:24px;}
  .product-photo-button > img {height:360px;}
  .product-content {padding:24px;}
  .product-bottom .button {width:auto;}
  .pc-service-grid {grid-template-columns:1fr;margin-top:28px;}
  .pc-service-card {padding:26px;}
  .service-agreement {padding:28px;}
  .team-grid {grid-template-columns:1fr;gap:0;margin-top:24px;}
  .person {flex-direction:row;align-items:center;padding:22px 0;}
  .person h3 {font-size:22px;}
  .support-card {padding:26px;gap:20px;}
  .support-symbol {display:none;}
  .support-copy {flex-basis:100%;}
  .contact-strip {margin-top:48px;padding-top:34px;}
  .footer-inner {gap:14px 24px;}
  .footer-inner > span {margin-right:0;}
  .standard-dialog {padding:24px;width:calc(100% - 24px);}
  .image-dialog {width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0;border:0;}
}
@media (max-width:600px) {
  .header-inner {min-height:82px;gap:10px;}
  .brand {font-size:27px;gap:8px;}
  .brand img {width:40px;height:32px;}
  .header-actions {gap:6px;}
  .theme-button {display:none;}
  .cart-label {display:none;}
  .cart-button {padding:10px;gap:7px;min-height:48px;}
  .header nav {left:20px;right:20px;}
  .hero-intro h1 {font-size:38px;}
  /* Rivinvaihdon vieressä on HTML:ssä välilyönti, jotta sanat eivät yhdisty. */
  .hero-intro h1 br,.website-card h2 br {display:none;}
  .hero-lead {font-size:17px;}
  .website-card {padding:28px 24px;}
  .computers-card {grid-template-columns:1fr;}
  .hero-computer-photo {display:none;}
  .hero-computer-copy {padding:28px 24px;}
  .hero-computer-copy h2 br {display:none;}
  .hero-card .button {width:100%;}
  .card-gallery {padding:12px 12px 0;}
  .product-photo-button > img {height:320px;}
  .gallery-arrow {width:44px;height:44px;}
  .gallery-prev {left:8px;}.gallery-next {right:8px;}
  .gallery-thumb {flex-basis:60px;width:60px;height:60px;}
  .card-gallery .gallery-thumbnails {min-height:84px;}
  .product-content {padding:22px 20px;}
  .product-title {font-size:26px;}
  .product-specs {grid-template-columns:1fr;gap:8px;}
  .product-bottom {gap:18px;}
  .product-bottom .button {width:100%;}
  .price strong {font-size:34px;}
  .details-button {font-size:16px;}
  .pc-service-card {padding:24px 20px;}
  .pc-service-card h3 {font-size:26px;}
  .service-agreement {padding:24px 20px;}
  .pc-service-bottom {align-items:flex-start;}
  .contact-links > a {font-size:18px;}
  .form-row {grid-template-columns:1fr;gap:0;}
  .form-row label {margin-block:12px;}
  .assembly-fields {padding:14px;}
  .dialog-heading {gap:12px;margin-bottom:20px;}
  .dialog-heading h2 {font-size:27px;}
  .cart-dialog > .dialog-heading {padding:18px 20px;}
  .cart-body {padding:20px;}
  .cart-item {grid-template-columns:56px minmax(0,1fr);gap:12px;}
  .cart-thumb {width:56px;height:74px;}
  .cart-item-top {flex-direction:column;gap:4px;font-size:16px;}
  .cart-total {font-size:17px;}
  .cart-total strong {font-size:27px;}
  .detail-content h2 {font-size:28px;}
  .detail-content dl {font-size:16px;grid-template-columns:minmax(0,1fr);}
  .detail-content dt {padding:14px 0 3px;border-bottom:0;}
  .detail-content dd {padding:0 0 14px;}
  .detail-bottom .button {width:100%;}
  .image-toolbar {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 16px;}
  .image-toolbar h2 {font-size:17px;grid-column:1;grid-row:1;}
  .image-toolbar .close-dialog {grid-column:2;grid-row:1;}
  #image-zoom-toggle {grid-column:1 / -1;grid-row:2;justify-self:start;}
  .image-footer {gap:12px;padding-inline:14px;}
  .image-footer .gallery-thumb {flex-basis:50px;width:50px;height:50px;}
  .storage-notice {left:12px;right:12px;bottom:12px;display:block;padding:18px 52px 14px 18px;}
  .storage-notice .text-link {margin-top:3px;}
  .footer .brand {font-size:24px;}
}
@media (max-width:380px) {
  .container {padding-inline:16px;}
  .brand {font-size:23px;gap:6px;}
  .brand img {width:34px;height:28px;}
  .header nav {left:16px;right:16px;}
  .header-actions .icon-button {width:44px;}
  .hero-intro h1 {font-size:34px;}
  .product-photo-button > img {height:285px;}
  .product-meta {gap:8px;}
  .product-title {font-size:25px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *,*::before,*::after {transition:none!important;animation:none!important;}
}

/* Varausajastin ja yhteydenottolomakkeen tilaviestit. */
.reservation-info { max-width: 70ch; margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; }
[data-availability] { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.product-bottom .button { white-space: normal; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status { margin-top: 1rem; line-height: 1.6; }