@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/images/fonts/bebas-neue.ttf') format('truetype'); }
:root { color-scheme: dark; --ink: #F5F4EF; --muted: #F5F4EF; --line: #353535; --surface: #1a1a1a; --surface-2: #242424; --accent: #C9B69A; --danger: #C9B69A; }
* { box-sizing: border-box; }
body { margin: 0; background: #111111; color: var(--ink); font-family: 'Bebas Neue', Impact, sans-serif; line-height: 1.5; letter-spacing: .035em; }
a { color: inherit; } button, input, select { font: inherit; } button { border: 0; cursor: pointer; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 700; letter-spacing: .12em; text-decoration: none; font-size: .72rem; }.brand-logo { display: block; width: 42px; height: 42px; object-fit: cover; transform: scale(1.7); }.brand { width: auto; overflow: hidden; }.brand-logo { margin: -11px; }.primary-logo { display: block; width: min(260px, 70vw); height: auto; margin: 0 auto 1.7rem; }.print-logo { display: block; width: 38px; height: 38px; object-fit: cover; transform: scale(1.6); margin: -6px 0 .35rem; }
.eyebrow { color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 .8rem; }.muted { color: var(--muted); }.empty-state { color: var(--muted); padding: 2rem 0; }
.admin-header, .client-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem max(5vw, 1.5rem); border-bottom: 1px solid var(--line); }.admin-nav { display: flex; align-items: center; gap: 1rem; }.text-button { background: transparent; color: var(--muted); padding: .4rem; }.text-button:hover { color: var(--ink); }
.admin-shell { width: min(1120px, 90vw); margin: 0 auto; padding: 4.5rem 0 6rem; }.intro { max-width: 720px; margin-bottom: 2.5rem; }.intro h1, .client-intro h1, .login-card h1, .client-card h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.05em; margin: 0 0 1rem; }.intro p { color: var(--muted); max-width: 570px; }
.notice { border-left: 3px solid var(--accent); background: #1b1a18; color: var(--ink); padding: .8rem 1rem; margin: 1rem 0; }.notice--warning { border-color: var(--danger); background: #211f1c; color: var(--ink); }.notice code { color: var(--ink); }
.create-card, .gallery-card, .login-card, .client-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }.create-card { padding: clamp(1.4rem, 4vw, 2.4rem); margin: 2.2rem 0 4rem; }.create-card h2, .gallery-list h2 { margin-top: 0; }.create-form { display: grid; grid-template-columns: 1fr 180px auto; align-items: end; gap: 1rem; }.create-form label, .stacked-form label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }input, select { width: 100%; border: 1px solid #625c52; border-radius: 8px; background: #111111; color: var(--ink); padding: .74rem .8rem; }input:focus, select:focus { border-color: var(--accent); outline: 2px solid #C9B69A55; }
button, .button-link, .button-secondary, .button-danger { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; background: var(--accent); color: #111111; font-weight: 750; border-radius: 8px; padding: .7rem 1rem; text-decoration: none; }button:hover, .button-link:hover { filter: brightness(1.08); }.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }.section-heading span { color: var(--muted); }
.gallery-list { display: grid; gap: 1rem; }.gallery-card { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.5rem; }.gallery-card h2 { margin: .45rem 0; font-size: 1.4rem; }.status { display: inline-flex; background: var(--surface-2); color: var(--ink); border-radius: 999px; font-size: .75rem; font-weight: 700; padding: .23rem .6rem; }.status--live { background: var(--accent); color: #111111; }.card-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .9rem; }.card-links a { color: var(--accent); }.qr-code { width: 125px; height: 125px; background: white; border-radius: 8px; }.card-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1rem; }.upload-form { display: flex; flex-wrap: wrap; gap: .7rem; }.file-input { position: relative; overflow: hidden; display: inline-flex; align-items: center; color: var(--muted); border: 1px solid #625c52; border-radius: 8px; padding: .65rem .8rem; max-width: 330px; }.file-input input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gallery-select { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; min-height: 38px; padding: .35rem .65rem; margin-bottom: .65rem; color: var(--muted); border: 1px solid #625c52; border-radius: 8px; cursor: pointer; font-size: .84rem; }.gallery-select input { width: 1.1rem; min-height: 1.1rem; padding: 0; margin: 0; accent-color: var(--accent); }.gallery-card.is-selected-for-deletion { border-color: var(--accent); box-shadow: 0 0 0 1px #C9B69A55; }.bulk-gallery-delete-form { display: contents; }.bulk-gallery-delete-form button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(1); }
.gallery-card__selection-row { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }.gallery-card__selection-row .gallery-select { margin-bottom: 0; }.gallery-card__selection-row .status { align-self: center; }
.gallery-card__title { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 48px; margin: .45rem 0 1rem !important; padding: .65rem 1rem; color: #111111; background: var(--accent); border-radius: 8px; font-size: 1.45rem !important; line-height: 1.15; letter-spacing: .035em; overflow-wrap: anywhere; }
.gallery-payment { margin: 1.25rem 0; font-weight: 800; letter-spacing: .035em; }.gallery-payment--paid { color: #70bd87; }.gallery-payment--unpaid { color: #ef837c; }
.gallery-list-tools { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; }.gallery-search { display: grid; gap: .4rem; min-width: min(100%, 360px); color: var(--muted); font-size: .9rem; }.gallery-search input { min-width: 300px; }
.batch-import-list { display: grid; gap: 1rem; margin: 0 0 4rem; }.batch-import-card { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.35rem 1.5rem; }.batch-import-card h3 { margin: 0 0 .25rem; font-size: 1.2rem; }.batch-import-card .eyebrow { margin-bottom: .25rem; }
.login-shell, .client-shell { width: min(1120px, 90vw); margin: 0 auto; }.login-shell { min-height: 100vh; display: grid; place-items: center; }.login-card { width: min(100%, 480px); padding: clamp(1.5rem, 5vw, 3rem); }.stacked-form { display: grid; gap: 1rem; margin-top: 2rem; }.batch-card, .settings-card { max-width: 620px; }.settings-card { margin-bottom: 1.5rem; }.settings-card h2 { margin-top: 0; }.text-link { color: var(--muted); text-decoration: none; }.text-link:hover { color: var(--ink); }.client-card { max-width: 640px; margin: 16vh auto; text-align: center; padding: clamp(2rem, 6vw, 4rem); }.client-card .muted { margin: 1.6rem auto 0; max-width: 460px; }.client-gallery { padding: 5rem 0; }.client-intro { margin-bottom: 3rem; max-width: 650px; }.client-intro p { color: var(--muted); }.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.photo-card { margin: 0; background: var(--surface); border: 1px solid var(--line); overflow: hidden; border-radius: 10px; }.photo-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #20201d; }.photo-card figcaption { padding: .7rem .8rem; font-size: .85rem; }.photo-card a { color: var(--accent); }
.print-shell { width: min(1100px, 92vw); margin: 0 auto; padding: 3rem 0 6rem; }.print-title { margin-bottom: 2rem; }.print-title h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0; }.print-title p { color: var(--muted); }.print-actions { display: flex; align-items: center; gap: 1rem; }.print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.print-card { background: white; color: #151515; padding: 16px; text-align: center; min-height: 390px; display: flex; flex-direction: column; align-items: center; break-inside: avoid; }.print-brand { font-size: .67rem; font-weight: 900; letter-spacing: .2em; margin: 0; }.print-card h2 { font-size: 1.25rem; margin: 12px 0 0; }.print-event { font-size: .78rem; margin: .25rem 0 .8rem; max-width: 250px; }.print-card img { width: 185px; height: 185px; }.print-reference { font-weight: 800; font-size: .8rem; margin: .8rem 0 .2rem; }.print-instruction { font-size: .72rem; margin: .2rem 0; max-width: 245px; }.print-expiry { color: #555; font-size: .65rem; margin: auto 0 0; }
.print-card { min-height: 455px; padding: 14px 16px; }.print-card-header { display: flex; align-items: center; justify-content: center; gap: .35rem; height: 48px; font-size: .68rem; font-weight: 900; letter-spacing: .16em; }.print-card .print-logo { display: block; width: 46px; height: 46px; object-fit: cover; transform: scale(1.45); margin: -6px; }.print-card .print-qr { display: block; width: 154px; height: 154px; margin: .2rem 0 0; }.print-event { font-size: .73rem; font-weight: 700; margin: .25rem 0 .35rem; max-width: 250px; }.print-reference { font-size: .78rem; margin: .55rem 0 .15rem; }.print-instruction { font-size: .67rem; line-height: 1.35; margin: .15rem 0 .35rem; max-width: 250px; }.print-contact { display: grid; gap: .18rem; margin-top: auto; padding-top: .45rem; border-top: 1px solid #d8d6d1; font-size: .65rem; line-height: 1.25; }.print-contact a { display: inline-flex; justify-content: center; align-items: center; gap: .28rem; color: #151515; text-decoration: none; }.print-card .social-icon { width: 11px; height: 11px; object-fit: contain; margin: 0; transform: none; }.print-expiry { font-size: .6rem; margin: .2rem 0 0; }
@media (max-width: 720px) { .admin-shell { padding-top: 3rem; }.create-form { grid-template-columns: 1fr; }.gallery-card { grid-template-columns: 1fr; }.qr-code { grid-row: 1; }.card-actions, .upload-form, .batch-import-card { flex-direction: column; align-items: stretch; }.file-input { max-width: none; }.photo-grid { grid-template-columns: repeat(2, 1fr); }.gallery-list-heading { align-items: stretch; flex-direction: column; }.gallery-list-tools { align-items: stretch; justify-content: stretch; }.gallery-search, .gallery-search input { min-width: 0; width: 100%; } }
@media (max-width: 420px) { .photo-grid { grid-template-columns: 1fr; }.admin-header, .client-header { padding-inline: 1.25rem; } }
@media print { @page { size: A4; margin: 8mm; } body { background: white; } .no-print { display: none !important; } .print-shell { width: auto; margin: 0; padding: 0; } .print-grid { grid-template-columns: repeat(3, 1fr); gap: 5mm; } .print-card { min-height: 0; border: 1px dashed #aaa; padding: 4mm; } .print-card .print-qr { width: 43mm; height: 43mm; } .print-card .print-logo { width: 12mm; height: 12mm; } .print-card .social-icon { width: 3mm; height: 3mm; } }

/* A6-postikortti: kaksi korttia leveydeltä ja korkeudelta A4-arkilla. */
.print-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.print-card { min-height: 500px; padding: 20px; }.print-card-header { height: 58px; overflow: hidden; }.print-card .print-logo { width: 48px !important; height: 48px !important; margin: -8px; }.print-card .print-qr { width: 178px !important; height: 178px !important; }.print-event { margin: .35rem 0 .55rem; }.print-reference { margin-top: .75rem; }.print-contact { gap: .3rem; padding-top: .65rem; font-size: .7rem; }.print-card .social-icon { width: 13px !important; height: 13px !important; flex: 0 0 13px; }
@media print { @page { size: A4 portrait; margin: 0; } .print-shell { width: 210mm; } .print-grid { grid-template-columns: repeat(2, 105mm); grid-auto-rows: 148.5mm; gap: 0; } .print-card { width: 105mm; height: 148.5mm; min-height: 0; border: 1px dashed #aaa; padding: 7mm 8mm; } .print-card-header { height: 16mm; font-size: 2.5mm; } .print-card .print-logo { width: 13mm !important; height: 13mm !important; margin: -2mm; } .print-card .print-qr { width: 47mm !important; height: 47mm !important; } .print-event { font-size: 2.5mm; margin: 1mm 0 2mm; } .print-reference { font-size: 2.7mm; margin: 2mm 0 .5mm; } .print-instruction { font-size: 2.2mm; margin: .5mm 0 1.5mm; } .print-contact { gap: .7mm; padding-top: 1.5mm; font-size: 2.2mm; } .print-card .social-icon { width: 3.2mm !important; height: 3.2mm !important; flex-basis: 3.2mm; } .print-expiry { font-size: 1.9mm; margin-top: .5mm; } }

/* Canva-pohja ja siihen sijoitettavat galleriakohtaiset tiedot. */
.print-card { position: relative; overflow: hidden; padding: 0; background: #F5F4EF; }.print-card .template-background { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0; }.print-card .template-qr { position: absolute; left: 29.5%; top: 35.7%; display: block; width: 41% !important; height: auto !important; aspect-ratio: 1; margin: 0; }.template-reference, .template-expiry { position: absolute; z-index: 1; left: 9%; right: 9%; margin: 0; background: #F5F4EF; color: #111111; text-align: center; font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: .04em; line-height: 1.2; }.template-reference { top: 72.3%; padding: .2% 1%; font-size: clamp(12px, 1.45vw, 18px); }.template-expiry { top: 76%; padding: .2% 1%; font-size: clamp(11px, 1.3vw, 16px); }
@media print { .print-card { padding: 0; border: 0; } .template-reference { top: 72.3%; font-size: 3.1mm; } .template-expiry { top: 76%; font-size: 2.8mm; } }

/* Brändi, lukurytmi ja mobiilikäyttö. */
body { isolation: isolate; letter-spacing: .07em; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url('/assets/images/monogram-light.png') center / min(760px, 70vw) no-repeat; opacity: .045; } body > * { position: relative; z-index: 1; } h1, h2, h3 { letter-spacing: .045em; word-spacing: .1em; } .eyebrow, label, button, .button-link, .wordmark { letter-spacing: .09em; }.brand { width: auto; overflow: visible; gap: 0; font-size: 1rem; }.wordmark { color: var(--ink); font-weight: 400; white-space: nowrap; }.admin-header, .client-header { background: rgba(17, 17, 17, .72); backdrop-filter: blur(8px); }.intro h1, .client-intro h1, .login-card h1, .client-card h1 { letter-spacing: .035em; }
@media (max-width: 720px) { body { letter-spacing: .055em; } body::before { background-size: 125vw; opacity: .035; background-position: center 28%; } .admin-header, .client-header { padding: .95rem 1.25rem; } .brand { font-size: .9rem; } .admin-nav { gap: .7rem; } .admin-shell, .client-shell { width: min(100% - 2.5rem, 1120px); } .admin-shell { padding: 2.6rem 0 4rem; } .intro { margin-bottom: 2rem; } .intro h1, .client-intro h1, .login-card h1, .client-card h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); line-height: 1.03; letter-spacing: .03em; } .client-gallery { padding: 2.5rem 0 4rem; } .client-intro { margin-bottom: 2rem; } .client-card { margin: 10vh auto; padding: 2rem 1.5rem; } .photo-grid { gap: .75rem; } .photo-card figcaption { padding: .65rem; font-size: .9rem; } }
@media print { body::before { display: none; } }

/* Monogrammi näkyy taustalla, mutta ei kilpaile sisällön kanssa. */
body::before { opacity: .065; }
@media (max-width: 720px) { body::before { opacity: .05; } }

/* Gallerioiden työnkulku. */
.status-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0 2rem; }
.status-overview > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.status-overview strong { color: var(--ink); font-size: 1.25rem; }
.status--captured { background: #4a4439; color: #f5f4ef; }
.status--editing { background: #29465c; color: #e5f1fa; }
.status--live { background: #32664b; color: #ecf8ef; }
.status--expired { background: #71343c; color: #ffe8ea; }
.status-overview > div:has(.status--captured) { border-color: #5a5244; }
.status-overview > div:has(.status--editing) { border-color: #3b5c73; }
.status-overview > div:has(.status--live) { border-color: #477d5e; }
.status-overview > div:has(.status--expired) { border-color: #87434b; }
.status-form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.status-form label { display: grid; gap: .45rem; min-width: 12rem; color: var(--muted); font-size: .9rem; }
.status-form select { min-width: 12rem; }
 .payment-form { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; align-items: end; gap: .7rem; width: 100%; padding: .9rem 0; border-top: 1px solid var(--line); }
.payment-form label { display: grid; gap: .45rem; min-width: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .status-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .status-form { align-items: stretch; } .status-form label, .status-form select { min-width: 0; width: 100%; } .payment-form { grid-template-columns: 1fr; } }

/* Asiakasgallerian kiitosviesti ja tietosuojasivu. */
.client-thank-you { max-width: 680px; margin: 3.5rem auto 0; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: rgba(28, 28, 27, .88); text-align: center; }
.client-thank-you h2 { margin: 0 0 .75rem; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: .045em; word-spacing: .05em; }
.client-thank-you p, .privacy-card p { color: var(--muted); line-height: 1.65; }
.client-thank-you a, .privacy-card a, .client-footer a { color: var(--accent); }
.client-thank-you .client-thank-you__website { width: auto; max-width: 100%; margin-top: .65rem; color: #111111; letter-spacing: .06em; }
.client-shell { letter-spacing: .04em; }
.client-shell h1, .client-shell h2 { letter-spacing: .055em; word-spacing: .06em; }
.client-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.client-footer__brand { display: grid; gap: .2rem; justify-items: start; }
.client-footer__brand strong { letter-spacing: .15em; }
.client-footer__brand span { color: var(--muted); }
.client-footer__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8rem 1.25rem; }
.client-social-link { display: inline-flex; align-items: center; gap: .4rem; }
.client-website-link { font-weight: 700; letter-spacing: .07em; }
.client-social-link img { width: 18px; height: 18px; object-fit: contain; filter: invert(1) brightness(1.2); }
.client-footer__legal { display: flex; justify-self: end; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 1rem; }
.client-footer__copyright { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; text-align: center; }

@media (max-width: 720px) {
  .client-footer { grid-template-columns: 1fr; justify-items: center; margin-top: 2.75rem; padding: 2rem 0 1rem; text-align: center; }
  .client-footer__brand { justify-items: center; }
  .client-footer__links { display: grid; gap: .65rem; }
  .client-footer__legal { justify-self: auto; justify-content: center; }
  .client-thank-you { padding: 1.75rem 1.3rem; }
  .client-thank-you h2 { letter-spacing: .04em; }
  .client-thank-you p { letter-spacing: .03em; line-height: 1.55; }
  .client-thank-you .client-thank-you__website { width: 100%; letter-spacing: .055em; }
}

body.mobile-preview-mode .client-footer { grid-template-columns: 1fr; justify-items: center; margin-top: 2.75rem; padding: 2rem 0 1rem; text-align: center; }
body.mobile-preview-mode .client-footer__brand { justify-items: center; }
body.mobile-preview-mode .client-footer__links { display: grid; gap: .65rem; }
body.mobile-preview-mode .client-footer__legal { justify-self: auto; justify-content: center; }
body.mobile-preview-mode .client-thank-you { padding: 1.75rem 1.3rem; }
body.mobile-preview-mode .client-thank-you h2 { letter-spacing: .04em; }
body.mobile-preview-mode .client-thank-you p { letter-spacing: .03em; line-height: 1.55; }
body.mobile-preview-mode .client-thank-you .client-thank-you__website { width: 100%; letter-spacing: .055em; }
.client-faq { max-width: 920px; margin: 3rem auto 0; padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.client-faq h2 { margin: 0 0 .55rem; font-size: clamp(2rem, 4vw, 3rem); }.client-faq__intro { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.5; }.client-faq__items { display: grid; gap: .7rem; margin-top: 1.5rem; }.client-faq details { border: 1px solid #5b5750; border-radius: 9px; background: #151515; }.client-faq summary { padding: 1rem 1.1rem; color: var(--ink); cursor: pointer; font-size: 1.08rem; }.client-faq details p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--muted); line-height: 1.55; }.client-info-page { max-width: 820px; margin: 3rem auto 0; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.client-info-page h1 { margin: 0 0 1rem; font-size: clamp(2.5rem, 6vw, 4.4rem); }.client-info-page > p, .client-info-page section p { color: var(--muted); line-height: 1.65; }.client-info-page section { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }.client-info-page section h2 { margin: 0; font-size: 1.9rem; }.client-info-page a { color: var(--accent); }
.client-feedback { position: fixed; z-index: 60; inset: 0; display: grid; box-sizing: border-box; place-items: center; padding: 1rem; }.client-feedback[hidden] { display: none; }.client-feedback__backdrop { position: absolute; inset: 0; width: 100%; min-height: 100%; padding: 0; background: rgba(0, 0, 0, .78); border: 0; border-radius: 0; }.client-feedback__dialog { position: relative; width: min(760px, 100%); max-height: min(880px, 94vh); overflow-y: auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #776e5e; border-radius: 16px; background: linear-gradient(135deg, #1e1c18, #151515); box-shadow: 0 22px 70px rgba(0, 0, 0, .48); }.client-feedback h2 { margin: 0 2.75rem .5rem 0; font-size: clamp(2rem, 4vw, 3rem); }.client-feedback__dialog > p { margin: 0; color: var(--muted); line-height: 1.55; }.client-feedback__close { position: absolute; top: 1rem; right: 1rem; min-height: 38px; padding: .4rem .7rem; color: var(--accent); background: #171717; border-color: #625c52; font-size: .85rem; }.client-feedback__form { display: grid; gap: 1rem; margin-top: 1.5rem; }.client-feedback fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1rem; margin: 0; border: 1px solid #5f5a52; border-radius: 9px; }.client-feedback legend { padding: 0 .4rem; color: var(--muted); }.client-feedback [data-feedback-name] { grid-column: 1 / -1; }.feedback-is-open { overflow: hidden; }.client-testimonials { max-width: 1080px; margin: 3rem auto 0; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.client-testimonials__title { margin: 0; color: var(--ink); font-size: clamp(2.75rem, 6vw, 4.4rem); line-height: .95; letter-spacing: .07em; }.client-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }.client-testimonials blockquote { display: grid; gap: .7rem; padding: 1.25rem; margin: 0; border: 1px solid #59554e; border-radius: 10px; background: #171717; }.client-testimonials blockquote p { margin: 0; color: var(--ink); line-height: 1.55; }.client-testimonials blockquote footer { color: var(--muted); }.testimonial-stars { color: var(--accent); letter-spacing: .13em; }
@media (max-width: 720px) { .client-feedback fieldset, .client-testimonials__grid { grid-template-columns: 1fr; } }

/* Hallinnan mobiiliesikatselu käyttää puhelimen levyistä näkymää myös tietokoneella. */
.mobile-preview-banner { display: none; }
@media (min-width: 721px) {
  body.mobile-preview-mode { background: #262626; }
  body.mobile-preview-mode::before { background-size: 310px; }
  body.mobile-preview-mode .client-header,
  body.mobile-preview-mode .client-shell,
  body.mobile-preview-mode .mobile-preview-banner { box-sizing: border-box; width: min(390px, calc(100% - 2rem)); margin-right: auto; margin-left: auto; }
  body.mobile-preview-mode .client-header { padding-right: 1.25rem; padding-left: 1.25rem; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
  body.mobile-preview-mode .client-shell { min-height: calc(100vh - 88px); padding-right: 1.25rem; padding-left: 1.25rem; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: #111111; }
  body.mobile-preview-mode .mobile-preview-banner { display: block; padding: .55rem 1.25rem; color: #111111; background: var(--accent); text-align: center; font-size: .82rem; font-weight: 700; }
}
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .client-feedback { padding: .75rem; }
  .client-feedback__dialog { max-height: 92vh; padding: 1.4rem 1.15rem; border-radius: 12px; }
  .client-feedback h2 { margin-right: 2.6rem; font-size: clamp(2rem, 10vw, 2.75rem); }
  .client-feedback fieldset { grid-template-columns: 1fr; }
  .client-feedback__dialog button[type="submit"] { width: 100%; }
  .client-testimonials__title { font-size: clamp(2.5rem, 12vw, 3.55rem); }
}
.privacy-shell { padding: 4rem 0; }
.privacy-card { max-width: 760px; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.privacy-card h2 { margin: 2.2rem 0 .65rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.privacy-card h2:first-child { margin-top: 0; }
.receipt-shell { padding: 4rem 0; }
.receipt-card { max-width: 620px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.receipt-card h1 { margin: 0 0 .5rem; font-size: clamp(2.3rem, 5vw, 4rem); }
.receipt-card dl { display: grid; gap: .8rem; margin: 2rem 0; }
.receipt-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.receipt-card dt { color: var(--muted); }.receipt-card dd { margin: 0; text-align: right; }
@media (max-width: 720px) { .client-thank-you { margin-top: 2.25rem; } .privacy-shell { padding: 2.5rem 0 3rem; } }

/* Sähköposti-ilmoitukset ja uutiskirjeen suostumus. */
.client-email-signup { max-width: 640px; margin: 1.5rem auto 0; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: 16px; background: rgba(28, 28, 27, .92); text-align: center; }
.client-email-signup h2 { margin: .35rem 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.6rem); }
.client-email-signup > p { color: var(--muted); line-height: 1.55; }
.client-email-signup .stacked-form { max-width: 480px; margin: 1.5rem auto 0; text-align: left; }
.client-email-signup .stacked-form > label:not(.consent-label) { text-align: center; }
.client-email-signup input[type="email"] { text-align: center; }
.client-card--waiting { margin-top: 8vh; margin-bottom: 8vh; }.client-card--waiting .client-email-signup { max-width: 500px; margin: 1.7rem auto 0; padding: 1.7rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }.client-card--waiting .client-email-signup h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }.client-card--waiting .client-email-signup .stacked-form { margin-top: 1.25rem; }.client-card__link-note { margin-top: 1.8rem !important; }
.consent-label { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: .7rem !important; color: var(--ink) !important; line-height: 1.35; }
.consent-label input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: .15rem 0 0; accent-color: var(--accent); }
.newsletter-overview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.newsletter-overview .eyebrow { margin: 0 0 .25rem; }.newsletter-overview h2 { margin: 0; }.newsletter-overview p { margin: .35rem 0 0; }
@media (max-width: 720px) { .newsletter-overview { align-items: stretch; flex-direction: column; } .newsletter-overview .button-link { width: 100%; } }
.newsletter-print { width: min(980px, 92vw); margin: 0 auto; padding: 3rem 0 5rem; }
.newsletter-print table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
.newsletter-print th, .newsletter-print td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.newsletter-print th { color: var(--accent); font-weight: 400; }.newsletter-print tr:last-child td { border-bottom: 0; }

/* Lisätuotteiden tilauspyynnöt. */
.product-order { max-width: 760px; margin: 3.5rem auto 0; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: rgba(28, 28, 27, .92); }
.product-order h2 { margin: 0 0 .75rem; font-size: clamp(1.8rem, 3.5vw, 2.65rem); }
.product-order > p { color: var(--muted); line-height: 1.6; }
.product-order-form { margin-top: 1.5rem; }
.product-preview { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: #171717; }
.product-preview img { width: 110px; height: 90px; object-fit: cover; border-radius: 6px; background: #242424; }
.product-preview .eyebrow { margin: 0 0 .35rem; }
.product-preview p:last-child { margin: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.order-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid #625c52; border-radius: 8px; background: #151515; }
.order-total strong { color: var(--accent); font-size: 1.4rem; }
textarea { width: 100%; min-height: 100px; resize: vertical; border: 1px solid #625c52; border-radius: 8px; background: #111111; color: var(--ink); padding: .74rem .8rem; font: inherit; }
textarea:focus { border-color: var(--accent); outline: 2px solid #C9B69A55; }
.product-order .muted a { color: var(--accent); }
.order-list { display: grid; gap: 1rem; }
.order-card { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.order-card h2 { margin: 0 0 .45rem; font-size: 1.6rem; }
.order-card p { margin: .35rem 0; }
.admin-item-list, .payment-list { display: grid; gap: 1rem; margin: 0 0 3rem; }
.admin-item-card, .payment-card { padding: 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.product-admin-card { display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem; }
.product-admin-card > div:only-child { grid-column: 1 / -1; }
.admin-product-image { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; background: #242424; }
.product-editor { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) minmax(110px, .7fr) minmax(90px, .5fr) auto auto; align-items: end; gap: .8rem; }
.coupon-editor { display: grid; grid-template-columns: minmax(130px, 1.5fr) minmax(120px, 1fr) minmax(100px, .7fr) minmax(140px, 1fr) minmax(120px, .8fr) auto auto; align-items: end; gap: .8rem; }
.delivery-editor { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, .8fr) auto auto auto; align-items: end; gap: .8rem; }
.product-editor label, .delivery-editor label, .coupon-editor label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }
.inline-check { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: .55rem !important; min-height: 44px; color: var(--ink) !important; white-space: nowrap; }
.inline-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.order-actions { display: grid; gap: .8rem; min-width: min(100%, 330px); }
.receipt-form { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.payment-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.payment-card h2 { margin: 0 0 .45rem; }
.payment-card__invoice-meta { margin: -.1rem 0 .65rem; color: var(--accent); font-size: .92rem; }
.payment-card__actions, .report-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.order-filter-tabs { display: flex; flex-wrap: wrap; gap: .8rem; margin: -1rem 0 2rem; }.order-filter-tab { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 190px; padding: .9rem 1rem; color: var(--ink); background: var(--surface); border: 1px solid #625c52; border-radius: 9px; text-decoration: none; font-size: 1rem; }.order-filter-tab span { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem; color: var(--accent); background: #111; border-radius: 999px; }.order-filter-tab:hover, .order-filter-tab.is-active { color: #111; background: var(--accent); border-color: var(--accent); }.order-filter-tab:hover span, .order-filter-tab.is-active span { color: var(--accent); background: #111; }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } .order-card, .payment-card { align-items: stretch; flex-direction: column; } .product-admin-card { grid-template-columns: 1fr; } .admin-product-image { width: 100%; height: 220px; } .product-preview { grid-template-columns: 80px 1fr; } .product-preview img { width: 80px; height: 72px; } .product-editor, .delivery-editor, .coupon-editor { grid-template-columns: 1fr; } .inline-check { min-height: auto; } }

@media print { .payment-report { width: auto; padding: 10mm; color: #111; } .payment-report .intro, .payment-report .newsletter-overview, .payment-card { background: white; border-color: #bbb; } .payment-report .intro p, .payment-report .newsletter-overview p, .payment-card .muted { color: #333; } .payment-report .eyebrow { color: #555; } .payment-list { gap: 5mm; } .payment-card { break-inside: avoid; page-break-inside: avoid; } .payment-card__actions, .no-print { display: none !important; } }
/* Tiivis kirjanpitoraportti: PDF:ään mahtuu useita maksutapahtumia samalle A4:lle. */
@media print { @page { size: A4 portrait; margin: 7mm; } .payment-report { width: auto; padding: 0; font-family: Arial, Helvetica, sans-serif; } .payment-report .intro { margin: 0 0 3mm; padding: 0; border: 0; } .payment-report .intro .eyebrow { margin: 0 0 1mm; font-size: 7pt; letter-spacing: .08em; } .payment-report .intro h1 { margin: 0; font-size: 21pt; line-height: 1.05; letter-spacing: .02em; } .payment-report .intro > p:last-child { display: none; } .payment-report .newsletter-overview { align-items: center; min-height: 0; margin: 0 0 4mm; padding: 3mm 4mm; border: 1px solid #999; border-radius: 0; } .payment-report .newsletter-overview .eyebrow { margin: 0 0 .5mm; font-size: 7pt; } .payment-report .newsletter-overview h2 { margin: 0; font-size: 14pt; line-height: 1; } .payment-report .newsletter-overview p { margin: .7mm 0 0; font-size: 8pt; } .payment-list { display: block; margin: 0; } .payment-card { display: block; min-height: 0; margin: 0; padding: 3mm 4mm; border: 0; border-bottom: 1px solid #999; border-radius: 0; background: #fff; break-inside: avoid; page-break-inside: avoid; } .payment-card .eyebrow { margin: 0 0 1mm; font-size: 7pt; letter-spacing: .06em; } .payment-card h2 { margin: 0 0 1mm; font-size: 12pt; line-height: 1.1; } .payment-card p { margin: .7mm 0; font-size: 8.5pt; line-height: 1.3; } .payment-card .muted { font-size: 7.5pt; } .payment-card__actions { display: none !important; } }
@media print { .newsletter-print { width: auto; margin: 0; padding: 0; color: #111; } .newsletter-print table { background: white; border-color: #999; } .newsletter-print th, .newsletter-print td { border-color: #bbb; } .newsletter-print th { color: #111; } }

/* Asiakkaan tilauslomake: riittävän suuri sekä puhelimella että tietokoneella. */
.product-order { max-width: 920px; padding: clamp(1.75rem, 5vw, 3.5rem); margin-top: 4.5rem; }
.product-order h2 { font-size: clamp(2.15rem, 4vw, 3.25rem); line-height: 1.08; }
.product-order > p { max-width: 680px; font-size: 1.08rem; }
.product-order-form { gap: 1.25rem; margin-top: 2rem; }
.product-order-form label { gap: .6rem; font-size: 1.04rem; }
.product-order-form input, .product-order-form select, .product-order-form textarea { min-height: 54px; padding: .85rem 1rem; font-size: 1.08rem; }
.product-order-form textarea { min-height: 130px; }
.product-order-form button { min-height: 56px; width: 100%; font-size: 1.12rem; }
.product-order-form .form-row { gap: 1.25rem; }
.product-preview { grid-template-columns: 150px 1fr; min-height: 130px; padding: 1.15rem; }
.product-preview img { width: 150px; height: 110px; }
.product-preview .muted { font-size: 1rem; line-height: 1.55; }
.order-total { padding: 1rem 1.15rem; font-size: 1.1rem; }
.order-total strong { font-size: 1.75rem; }
@media (min-width: 721px) { .product-order-form > label:nth-of-type(1) { max-width: 100%; } }
@media (max-width: 720px) { .product-order { width: 100%; padding: 1.5rem 1.2rem; margin-top: 2.75rem; border-radius: 14px; } .product-order h2 { font-size: clamp(2rem, 10vw, 2.65rem); } .product-order > p { font-size: 1rem; } .product-order-form { gap: 1.1rem; margin-top: 1.5rem; } .product-order-form label { font-size: 1rem; } .product-order-form input, .product-order-form select, .product-order-form textarea { min-height: 52px; font-size: 1rem; } .product-order-form textarea { min-height: 120px; } .product-order-form button { min-height: 58px; font-size: 1.1rem; } .product-preview { grid-template-columns: 96px 1fr; padding: .85rem; } .product-preview img { width: 96px; height: 86px; } .order-total strong { font-size: 1.5rem; } }

/* Luettavampi käyttöliittymä: näytöllä suurempi teksti ja väljemmät hallintatyökalut. */
@media screen {
  body { font-size: 18px; line-height: 1.55; }
  button, .button-link, .button-secondary, .button-danger { min-height: 52px; padding: .8rem 1.2rem; font-size: 1.02rem; }
  input, select, textarea { min-height: 50px; padding: .82rem 1rem; font-size: 1.02rem; }
  .eyebrow { font-size: .86rem; }
  .muted, .intro p, .client-intro p { font-size: 1.02rem; }
  .admin-header, .client-header { padding-block: 1.45rem; }
  .brand { font-size: 1.12rem; }
  .admin-shell { width: min(1280px, 93vw); padding-top: 5rem; }
  .create-card { padding: clamp(1.8rem, 4vw, 3rem); }
  .gallery-card { gap: 2rem; padding: 1.9rem; }
  .gallery-card h2 { font-size: 1.7rem; }
  .gallery-card__details .muted { font-size: 1rem; }
  .qr-code { width: 150px; height: 150px; }
  .card-actions { gap: .9rem; padding-top: 1.3rem; }
  .file-input { min-height: 52px; padding: .8rem 1rem; font-size: 1rem; }
  .status { font-size: .86rem; padding: .28rem .72rem; }
  .status-form label, .payment-form label { font-size: 1rem; }
  .newsletter-overview, .batch-import-card, .admin-item-card, .payment-card { padding: 1.65rem; }
  .newsletter-overview h2 { font-size: 2rem; }
  .client-shell { width: min(1180px, 92vw); }
  .client-card { max-width: 720px; }
  .client-card p, .client-thank-you p, .privacy-card p { font-size: 1.04rem; }
  .photo-card figcaption { padding: .9rem 1rem; font-size: 1rem; }
}
@media screen and (min-width: 721px) {
  .admin-header { padding-inline: max(5vw, 2.5rem); }
  .admin-nav { gap: 1.35rem; }
  .intro { max-width: 840px; }
  .intro h1, .client-intro h1, .login-card h1, .client-card h1 { font-size: clamp(3rem, 5vw, 5.25rem); }
  .create-form { grid-template-columns: minmax(360px, 1fr) 220px auto; gap: 1.25rem; }
  .payment-form { gap: 1rem; }
}
@media screen and (max-width: 720px) {
  body { font-size: 17px; }
  .admin-header, .client-header { padding-block: 1.1rem; }
  .admin-header { display: block; overflow: hidden; }
  .admin-header .brand { display: inline-flex; margin-bottom: .8rem; }
  .admin-header .admin-nav { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: .15rem 0 .45rem; }
  .admin-header .admin-nav > * { flex: 0 0 auto; white-space: nowrap; }
  .admin-header .admin-nav .text-link, .admin-header .admin-nav .text-button { min-height: 42px; }
  .admin-shell, .client-shell { width: min(100% - 2rem, 1180px); }
  .gallery-card { padding: 1.4rem; }
  .qr-code { width: 135px; height: 135px; }
  .client-card { padding: 2.25rem 1.5rem; }
}

/* Asiakasgallerian otsikko on rauhallisesti keskitetty myös pitkille nimille. */
.client-gallery-intro { max-width: none; text-align: center; }
.client-gallery-intro h1 { margin-inline: auto; font-size: clamp(2.4rem, 5vw, 4.1rem); letter-spacing: .04em; }
.client-gallery-intro p { margin-inline: auto; }
.client-gallery-access-note { max-width: 760px; margin-top: 1rem; color: var(--muted); font-size: .95rem; line-height: 1.55; }
@media screen and (min-width: 721px) { .client-gallery-intro h1 { white-space: nowrap; } }
@media screen and (max-width: 720px) { .client-gallery-intro h1 { font-size: clamp(2.15rem, 9vw, 3.35rem); line-height: 1.08; } }

/* Kuvauspäivän myyntinäkymä. */
.batch-import-card__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.sales-dashboard { max-width: 1280px; }
.sales-overview { display: grid; grid-template-columns: 1.35fr 1fr auto; align-items: center; gap: 1.5rem; margin: 0 0 2.25rem; padding: 1.65rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.sales-overview .eyebrow { margin: 0 0 .3rem; }.sales-overview h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }.sales-overview p { margin: .35rem 0 0; }
.sales-day-list { display: grid; gap: 1rem; }
.sales-day-card { padding: 1.65rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.sales-day-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }.sales-day-card__heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); }.sales-day-card__heading p { margin: .35rem 0 0; }
.sales-day-card__metrics, .sales-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.sales-day-card__metrics > div, .sales-metric-grid > div { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #171717; }
.sales-day-card__metrics span, .sales-metric-grid span, .sales-metric-grid small { color: var(--muted); font-size: .9rem; }.sales-day-card__metrics strong, .sales-metric-grid strong { color: var(--accent); font-size: 1.45rem; line-height: 1.1; }
.sales-metric-grid { margin: 0 0 1.5rem; }.sales-metric-grid > div { min-height: 135px; align-content: center; }.sales-metric-grid small { margin-top: .25rem; }
.sales-status-overview { margin-top: 0; }
.sales-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.sales-detail-card { display: flex; flex-direction: column; min-height: 300px; padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.sales-detail-card .eyebrow { margin-bottom: .35rem; }.sales-detail-card h2 { margin: 0 0 1rem; font-size: 1.75rem; }.sales-detail-card ul { display: grid; gap: .65rem; padding: 0; margin: 0 0 1.25rem; list-style: none; }.sales-detail-card li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }.sales-detail-card li span { color: var(--muted); }.sales-detail-card li strong { color: var(--ink); text-align: right; font-weight: 400; }.sales-detail-card > .text-link { margin-top: auto; color: var(--accent); }
@media (max-width: 900px) { .sales-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sales-overview .button-link { grid-column: 1 / -1; }.sales-day-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sales-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .batch-import-card__actions { justify-content: stretch; flex-direction: column; }.batch-import-card__actions .button-link { width: 100%; }.sales-overview { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.35rem; }.sales-overview .button-link { grid-column: auto; width: 100%; }.sales-day-card { padding: 1.35rem; }.sales-day-card__heading { align-items: stretch; flex-direction: column; }.sales-day-card__heading .button-link { width: 100%; }.sales-day-card__metrics, .sales-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }.sales-day-card__metrics > div, .sales-metric-grid > div { padding: .85rem; }.sales-day-card__metrics strong, .sales-metric-grid strong { font-size: 1.25rem; }.sales-detail-card { min-height: 0; padding: 1.35rem; }.sales-detail-card li { align-items: flex-start; flex-direction: column; gap: .15rem; }.sales-detail-card li strong { text-align: left; } }

/* Asiakasgallerian näyttävä tuote-esittely. */
.product-storefront { max-width: 1240px; padding: 0; overflow: hidden; background: #0d0d0d; border-color: #4a4a4a; }
.product-storefront__form { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr); gap: 0; margin: 0; }
.product-storefront__visual { position: relative; display: grid; align-content: end; min-height: 690px; overflow: hidden; background: radial-gradient(circle at 55% 30%, #494641 0, #1a1a19 38%, #080808 77%); }
.product-storefront__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 42%, rgba(0, 0, 0, .68)); pointer-events: none; }
.product-storefront__visual-header { position: absolute; z-index: 1; top: 2rem; left: 2rem; display: grid; gap: .35rem; color: #fff; }.product-storefront__visual-header span { font-size: 1rem; letter-spacing: .24em; }.product-storefront__visual-header strong { max-width: 500px; font-size: clamp(2.15rem, 4vw, 4.2rem); line-height: 1; letter-spacing: .06em; }
.product-storefront__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.product-storefront__image-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201, 182, 154, .18), transparent 48%); }
.size-guide-button { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; min-height: 42px; padding: .55rem .8rem; color: #111; background: var(--accent); border-color: var(--accent); border-radius: 7px; font-size: .85rem; }.size-guide-button[hidden] { display: none; }
.product-storefront__visual > p { position: relative; z-index: 1; max-width: 520px; margin: 0; padding: 2rem; color: #F5F4EF; font-size: 1.05rem; }
.product-storefront__details { display: grid; align-content: start; gap: 1.15rem; padding: clamp(1.75rem, 4vw, 3rem); background: #111111; }.product-storefront__details > .eyebrow { margin: 0 0 -.7rem; }.product-storefront__details h2 { margin: 0; padding-bottom: 1.1rem; border-bottom: 1px solid #73706b; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; }.product-storefront__description { min-height: 1.3rem; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.5; }
.product-storefront__features { display: grid; gap: .7rem; padding: 0 0 1.2rem; margin: 0; border-bottom: 1px solid #55514c; list-style: none; }.product-storefront__features li { position: relative; padding-left: 2rem; color: var(--ink); }.product-storefront__features li::before { content: '✓'; position: absolute; left: .25rem; color: var(--accent); font-size: 1.2rem; }
.product-storefront__section { display: grid; gap: .55rem; }.product-storefront__section label, .field-label { display: grid; gap: .55rem; color: var(--ink); font-size: 1rem; }.field-label { display: block; }.choice-grid { display: flex; flex-wrap: wrap; gap: .65rem; }.choice-button { flex: 1 1 100px; min-height: 58px; padding: .65rem .85rem; color: var(--ink); background: #111; border: 1px solid #615f5b; border-radius: 8px; font-size: 1rem; }.choice-button:hover, .choice-button.is-selected { color: #111; background: var(--accent); border-color: var(--accent); filter: none; }
.product-storefront__form .choice-button { width: auto; min-height: 58px; font-size: 1rem; }
.product-storefront__price { display: grid; gap: .25rem; padding: 1.25rem 0; border-top: 1px solid #55514c; border-bottom: 1px solid #55514c; }.product-storefront__price span, .product-storefront__price small { color: var(--muted); }.product-storefront__price strong { color: var(--ink); font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1; }
.product-storefront__order-fields { margin-top: .25rem; padding-top: 1.25rem; border-top: 1px solid #55514c; }.product-storefront__order-fields > .form-row { gap: .85rem; }.product-storefront__order-fields .order-total { margin-top: .25rem; }.product-storefront__order-fields > .muted { margin: .2rem 0; font-size: .95rem; line-height: 1.45; }.product-storefront__order-fields > .muted a { color: var(--accent); }
.cart-panel { display: grid; gap: .8rem; margin-top: .45rem; padding: 1.1rem; border: 1px solid #615f5b; border-radius: 10px; background: #161616; }.cart-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }.cart-panel__heading .eyebrow, .cart-panel__heading h3 { margin: 0; }.cart-panel__heading h3 { font-size: 1.55rem; }.cart-panel__heading > span { color: var(--accent); white-space: nowrap; }.cart-items-list { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }.cart-items-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .65rem; border-top: 1px solid #45433f; }.cart-items-list li span { color: var(--ink); font-size: .96rem; line-height: 1.35; }.cart-items-list .text-button { min-height: auto; padding: .2rem 0; color: var(--accent); background: transparent; border: 0; font-size: .9rem; white-space: nowrap; }
.order-items-list { display: grid; gap: .5rem; padding: 1rem; margin: 1rem 0; border: 1px solid #55514c; border-radius: 10px; background: #151515; list-style: none; }.order-items-list li { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }.order-items-list strong { color: var(--ink); font-weight: 400; }.order-items-list span { color: var(--accent); white-space: nowrap; }
.header-cart-button, .cart-open-inline { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem .9rem; color: #111; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; font-size: .92rem; }.header-cart-button span, .cart-open-inline span { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .22rem; color: var(--accent); background: #111; border-radius: 999px; }.cart-open-inline { width: 100%; margin-top: .2rem; }.cart-drawer { position: fixed; z-index: 30; inset: 0; display: grid; justify-items: end; }.cart-drawer[aria-hidden="true"] { display: none; }.cart-drawer__backdrop { position: absolute; inset: 0; min-height: 100%; padding: 0; background: rgba(0, 0, 0, .62); border: 0; border-radius: 0; }.cart-drawer__panel { position: relative; width: min(520px, 100%); height: 100%; overflow-y: auto; padding: 1.25rem; background: #111; box-shadow: -18px 0 45px rgba(0, 0, 0, .45); }.cart-drawer__panel .cart-panel { min-height: 100%; margin: 0; padding: clamp(1rem, 3vw, 1.6rem); }.cart-is-open { overflow: hidden; }
.shipping-fields { display: grid; gap: .85rem; }.shipping-fields[hidden] { display: none !important; }.order-terms { display: flex !important; align-items: flex-start; gap: .7rem; padding: .9rem 0 .15rem; color: var(--muted) !important; font-size: .95rem !important; line-height: 1.45; }.order-terms input { flex: 0 0 auto; width: 1.15rem; min-height: 1.15rem; margin: .18rem 0 0; accent-color: var(--accent); }.order-terms a { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) { .product-storefront__form { grid-template-columns: 1fr; }.product-storefront__visual { min-height: 520px; }.product-storefront__details { padding: 2rem; } }
@media (max-width: 720px) { .product-storefront { margin-top: 3rem; border-radius: 14px; }.product-storefront__visual { min-height: 410px; }.product-storefront__visual-header { top: 1.25rem; left: 1.25rem; }.product-storefront__visual-header span { font-size: .8rem; }.product-storefront__visual-header strong { font-size: clamp(1.8rem, 10vw, 2.75rem); }.product-storefront__visual > p { padding: 1.25rem; font-size: .95rem; }.product-storefront__details { gap: 1rem; padding: 1.4rem 1.2rem; }.product-storefront__details h2 { font-size: clamp(2.2rem, 11vw, 3rem); }.product-storefront__description { font-size: 1rem; }.choice-button { flex-basis: 110px; min-height: 54px; }.product-storefront__price { padding: 1rem 0; }.cart-panel { padding: .95rem; }.cart-panel__heading { align-items: start; flex-direction: column; gap: .3rem; }.cart-items-list li { align-items: flex-start; }.order-items-list li { align-items: flex-start; flex-direction: column; gap: .2rem; } }

/* Tiiviimpi tuotevalinta ja erillinen ostoskoripaneeli. */
.product-storefront { max-width: 1080px; }.product-storefront__form { grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); }.product-storefront__visual { min-height: 430px; }.product-storefront__visual-header { top: 1.35rem; left: 1.35rem; }.product-storefront__visual > p { padding: 1.35rem; }.product-storefront__details { gap: .85rem; padding: clamp(1.3rem, 3vw, 2rem); }.product-storefront__details h2 { padding-bottom: .75rem; font-size: clamp(2.1rem, 3.8vw, 3.1rem); }.product-storefront__features { gap: .45rem; padding-bottom: .8rem; }.product-storefront__price { padding: .85rem 0; }.product-storefront__form .choice-button { min-height: 48px; }.product-storefront__details > .button-secondary { min-height: 50px; }
@media (max-width: 720px) { .header-cart-button { min-height: 40px; padding: .45rem .65rem; font-size: .8rem; }.product-storefront__form { grid-template-columns: 1fr; }.product-storefront__visual { min-height: 300px; }.cart-drawer__panel { width: 100%; padding: .65rem; }.cart-drawer__panel .cart-panel { padding: 1rem; }.cart-drawer__panel .form-row { grid-template-columns: 1fr; } }

/* Tyhjä ostoskori on rauhallinen ja Sulje-painike pysyy aina yläkulmassa. */
.cart-panel__heading { position: relative; display: grid; min-height: 5rem; padding-right: 0; place-items: center; }
.cart-panel__heading > [data-cart-close] { position: absolute; top: 0; right: 0; min-height: auto; padding: .2rem 0; }
.cart-panel__heading > div { width: 100%; padding: .75rem 3.75rem .75rem 1rem; text-align: center; }
.cart-panel--empty .cart-panel__heading h3 { font-size: clamp(1.7rem, 5vw, 2.25rem); letter-spacing: .055em; line-height: 1.1; }
.cart-panel--empty .cart-panel__heading > [data-cart-close] { top: .75rem; right: .25rem; }
.cart-empty-notice:empty { display: none !important; }
@media (max-width: 720px) { .cart-panel__heading { min-height: 5.5rem; }.cart-panel__heading > div { padding: 1rem 3.6rem 1rem .5rem; }.cart-panel--empty .cart-panel__heading h3 { font-size: clamp(1.65rem, 8vw, 2.1rem); } }

/* Hallinnan mobiiliesikatselu pakottaa myös tuote-esittelyn puhelinasetteluun. */
@media (min-width: 721px) {
  body.mobile-preview-mode .product-storefront { margin-top: 3rem; border-radius: 14px; }
  body.mobile-preview-mode .product-storefront__form { grid-template-columns: 1fr; }
  body.mobile-preview-mode .product-storefront__visual { min-height: 300px; }
  body.mobile-preview-mode .product-storefront__visual-header { top: 1.25rem; left: 1.25rem; }
  body.mobile-preview-mode .product-storefront__visual-header span { font-size: .8rem; }
  body.mobile-preview-mode .product-storefront__visual-header strong { font-size: clamp(1.8rem, 10vw, 2.75rem); }
  body.mobile-preview-mode .product-storefront__visual > p { padding: 1.25rem; font-size: .95rem; }
  body.mobile-preview-mode .product-storefront__details { gap: 1rem; padding: 1.4rem 1.2rem; }
  body.mobile-preview-mode .product-storefront__details h2 { font-size: clamp(2.2rem, 11vw, 3rem); }
  body.mobile-preview-mode .product-storefront__description { font-size: 1rem; }
  body.mobile-preview-mode .choice-button { flex-basis: 110px; min-height: 54px; }
  body.mobile-preview-mode .product-storefront__price { padding: 1rem 0; }
  body.mobile-preview-mode .cart-drawer__panel { width: 100%; padding: .65rem; }
  body.mobile-preview-mode .cart-drawer__panel .cart-panel { padding: 1rem; }
  body.mobile-preview-mode .cart-drawer__panel .form-row { grid-template-columns: 1fr; }
}

/* Tuotehallinnan lisäkentät pysyvät väljinä myös tietokoneella. */
@media (min-width: 721px) { .product-editor { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }.product-editor textarea { min-height: 110px; } }

/* Uuden tuotteen lisäys etenee selkeinä vaiheina. */
.product-create-card { max-width: none; }.product-create-intro { max-width: 760px; margin: -.25rem 0 1.35rem; }.product-create-form { grid-template-columns: 1fr; gap: 1rem; }.product-form-section { padding: 1.15rem; border: 1px solid #4c4944; border-radius: 10px; background: #1b1b1a; }.product-form-section > .eyebrow { margin: 0 0 1rem; color: var(--accent); }.product-form-grid { display: grid; gap: 1rem; }.product-form-grid--basics { grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(145px, .75fr) minmax(110px, .55fr); }.product-form-grid--details, .product-form-grid--options { grid-template-columns: repeat(2, minmax(0, 1fr)); }.product-create-form label { display: grid; gap: .45rem; color: var(--muted); font-size: .92rem; }.product-create-form label small { color: #9b978f; font-size: .8rem; font-weight: 400; line-height: 1.35; }.product-create-form textarea { min-height: 125px; }.product-create-actions { display: flex; justify-content: flex-end; padding-top: .15rem; }.product-create-actions button { min-width: 200px; }
@media (max-width: 900px) { .product-form-grid--basics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .product-create-card { padding: 1.25rem; }.product-create-intro { margin-bottom: 1.1rem; }.product-form-section { padding: 1rem; }.product-form-grid--basics, .product-form-grid--details, .product-form-grid--options { grid-template-columns: 1fr; }.product-create-actions { justify-content: stretch; }.product-create-actions button { width: 100%; } }

.coupon-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }.coupon-card-footer p { margin: 0; }
.product-image-tools { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .9rem; }.product-image-tools .receipt-form { margin: 0; }
@media (max-width: 720px) { .coupon-card-footer { align-items: stretch; flex-direction: column; }.coupon-card-footer .button-danger { width: 100%; } }

/* Asiakassivun tekstit muokataan hallinnan Sisällöt-näkymässä. */
.content-editor { display: grid; gap: 1.5rem; }.content-editor > button { width: fit-content; }.content-editor .create-card { display: grid; gap: 1rem; }.content-editor .create-card > .eyebrow, .content-editor .create-card > h2, .content-editor .create-card > .muted { margin: 0; }.content-editor textarea { min-height: 150px; }.content-faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }.content-faq-editor { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #171717; }.content-faq-editor .eyebrow { margin: 0; }.content-faq-editor textarea { min-height: 130px; }
@media (max-width: 720px) { .content-editor > button { width: 100%; } }

/* Asiakaspalautteiden seuranta ja julkaisuvalinnat. */
.feedback-overview { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(360px, 1.5fr) minmax(180px, .7fr); gap: 1rem; margin: 0 0 2rem; }.feedback-overview > div { display: grid; align-content: center; gap: .4rem; min-height: 150px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.feedback-overview .eyebrow { margin: 0; }.feedback-overview > div > strong { color: var(--accent); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; }.feedback-overview > div > strong small { font-size: 1.3rem; }.feedback-overview > div > span { color: var(--muted); }.feedback-chart { align-content: start !important; }.feedback-chart__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 2rem; align-items: center; gap: .6rem; color: var(--muted); font-size: .95rem; }.feedback-chart__row > div { height: .7rem; overflow: hidden; border-radius: 999px; background: #292825; }.feedback-chart__row i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--accent); }.feedback-chart__row strong { color: var(--ink); text-align: right; }.feedback-list { display: grid; gap: 1rem; }.feedback-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .4fr); gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }.feedback-card .eyebrow { margin: 0 0 .5rem; }.feedback-card h2 { margin: 0; color: var(--accent); font-size: 1.45rem; letter-spacing: .18em; }.feedback-card h2 span { color: var(--muted); font-size: 1rem; letter-spacing: normal; }.feedback-card__comment { margin: 1rem 0; color: var(--ink); font-size: 1.12rem; line-height: 1.5; }.feedback-editor { display: grid; align-content: center; gap: 1rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }.feedback-editor .muted { margin: 0; }.feedback-editor button { width: 100%; }
@media (max-width: 720px) { .feedback-overview, .feedback-card { grid-template-columns: 1fr; }.feedback-card { padding: 1.25rem; }.feedback-editor { padding: 1.25rem 0 0; border-top: 1px solid var(--line); border-left: 0; } }

/* Palautteiden yksittäinen ja valittu poisto hallinnassa. */
.bulk-feedback-delete-form { display: contents; }.bulk-feedback-delete-form button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(1); }.feedback-select { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; min-height: 38px; margin: 0 0 .85rem; padding: .35rem .65rem; color: var(--muted); border: 1px solid #625c52; border-radius: 8px; cursor: pointer; font-size: .84rem; }.feedback-select input { width: 1.1rem; min-height: 1.1rem; padding: 0; margin: 0; accent-color: var(--accent); }.feedback-card.is-selected-for-deletion { border-color: var(--accent); box-shadow: 0 0 0 1px #C9B69A55; }.feedback-card__actions { display: grid; align-content: center; gap: 1rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }.feedback-editor { padding-left: 0; border-left: 0; }.feedback-delete-form .button-danger { width: 100%; }
@media (max-width: 720px) { .feedback-card__actions { padding: 1.25rem 0 0; border-top: 1px solid var(--line); border-left: 0; }.feedback-editor { padding: 0; border-top: 0; } }

/* Tulostuslista kokoaa vain maksetut, vielä toimittamatta olevat tilaukset. */
.production-list { display: grid; gap: 1rem; }.production-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .35fr); gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }.production-card h2 { margin: 0 0 .7rem; font-size: 2rem; }.production-card__items { margin: 0 0 1rem; color: var(--ink); line-height: 1.5; }.production-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0 0; }.production-card dl div { display: grid; gap: .25rem; }.production-card dt { color: var(--accent); font-size: .86rem; }.production-card dd { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.35; }.production-files { display: grid; gap: .5rem; padding: 1rem; border: 1px solid #615f5b; border-radius: 10px; background: #151515; }.production-files > div { display: flex; flex-wrap: wrap; gap: .6rem; }.production-files .button-secondary { min-height: 42px; text-decoration: none; }.production-status-form { display: grid; align-content: start; gap: .7rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }.production-status-form label { display: grid; gap: .45rem; color: var(--muted); font-size: .95rem; }.production-status-form select { min-width: 0; }
@media (max-width: 720px) { .production-card { grid-template-columns: 1fr; padding: 1.25rem; }.production-card dl { grid-template-columns: 1fr; }.production-status-form { padding: 1.25rem 0 0; border-top: 1px solid var(--line); border-left: 0; }.production-status-form button { width: 100%; } }

/* Tilauspyynnön tiedot ovat luettavissa suoraan myös Postin lomaketta täytettäessä. */
.order-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(380px, .9fr); align-items: stretch; gap: 2.25rem; padding: 2rem; }.order-card__information { min-width: 0; }.order-card h2 { font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1; }.order-card__price { display: grid; gap: .25rem; margin: 1rem 0 !important; }.order-card__price strong { color: var(--accent); font-size: 1.85rem; line-height: 1; }.order-card__price span { color: var(--muted); font-size: 1rem; }
.order-shipping { margin: 1.45rem 0; padding: 1.25rem; border: 1px solid #615f5b; border-radius: 12px; background: #151515; }.order-shipping .eyebrow { margin-bottom: .8rem; }.order-shipping dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.25rem; margin: 0; }.order-shipping dl div { display: grid; gap: .25rem; }.order-shipping dl div:last-child { grid-column: 1 / -1; }.order-shipping dt { color: var(--accent); font-size: .9rem; }.order-shipping dd { margin: 0; color: var(--ink); font-size: 1.14rem; line-height: 1.35; overflow-wrap: anywhere; }.order-shipping a { color: var(--ink); }.shipping-address { padding: .8rem 1rem; border-left: 3px solid var(--accent); background: #20201e; font-size: 1.22rem !important; }
.order-card__note { display: grid; gap: .25rem; padding: .85rem 1rem; margin: 1rem 0 !important; border-left: 3px solid #625c52; background: #181818; }.order-card__note span { color: var(--accent); font-size: .9rem; }.order-actions { min-width: 0; padding-left: 2rem; border-left: 1px solid var(--line); }.order-actions .status-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 1rem; }.order-actions .status-form label, .order-actions .status-form select { min-width: 0; width: 100%; }.order-actions .status-form label { font-size: 1rem; }.order-actions .status-form button { width: 100%; }.order-actions .receipt-form { padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .order-card { grid-template-columns: 1fr; gap: 1.5rem; }.order-actions { padding: 1.5rem 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 720px) { .order-card { padding: 1.4rem; }.order-card h2 { font-size: 2rem; }.order-shipping { padding: 1rem; }.order-shipping dl { grid-template-columns: 1fr; gap: .8rem; }.order-shipping dl div:last-child { grid-column: auto; }.order-shipping dd { font-size: 1.06rem; }.shipping-address { font-size: 1.12rem !important; }.order-actions .status-form { grid-template-columns: 1fr; }.order-actions .receipt-form { align-items: stretch; flex-direction: column; }.order-actions .receipt-form .file-input, .order-actions .receipt-form button { max-width: none; width: 100%; } }

/* Kuvan valitseminen suoraan asiakasgalleriasta. */
.photo-card { position: relative; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }.photo-card.is-selected-for-order { border-color: var(--accent); box-shadow: 0 0 0 2px #C9B69A55; transform: translateY(-2px); }.photo-card figcaption { display: grid; gap: .65rem; }.photo-number { position: absolute; z-index: 2; top: .65rem; left: .65rem; padding: .35rem .55rem; color: #111; background: var(--accent); border-radius: 5px; font-size: .78rem; line-height: 1; }.photo-card__label { color: var(--ink); font-size: .98rem; }.photo-card .photo-order-button { width: 100%; min-height: 42px; padding: .55rem .75rem; background: transparent; color: var(--accent); border: 1px solid #625c52; border-radius: 6px; font-size: .92rem; }.photo-card .photo-order-button:hover { background: var(--accent); color: #111; filter: none; }
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 245px)); justify-content: start; gap: 1rem; }.photo-card { min-width: 0; }.photo-preview-button { position: relative; display: block; width: 100%; min-height: 0; padding: 0; overflow: hidden; background: #20201d; border: 0; border-radius: 0; }.photo-preview-button img { aspect-ratio: 4 / 5; transition: transform .2s ease; }.photo-preview-button span { position: absolute; right: .6rem; bottom: .6rem; padding: .35rem .5rem; color: #111; background: var(--accent); border-radius: 4px; font-size: .72rem; opacity: 0; transition: opacity .2s ease; }.photo-preview-button:hover img { transform: scale(1.025); }.photo-preview-button:hover span, .photo-preview-button:focus-visible span { opacity: 1; }.photo-preview-unavailable { display: grid; align-content: center; gap: .55rem; min-height: 245px; padding: 1rem; color: var(--muted); background: #20201d; overflow-wrap: anywhere; }.photo-preview-unavailable strong { color: var(--ink); }.photo-preview-unavailable small { line-height: 1.45; }.photo-preview-modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 1.5rem; }.photo-preview-modal[aria-hidden="true"] { display: none; }.photo-preview-modal__backdrop { position: absolute; inset: 0; min-height: 100%; padding: 0; background: rgba(0, 0, 0, .82); border: 0; border-radius: 0; }.photo-preview-modal__content { position: relative; display: grid; justify-items: center; width: min(980px, 100%); max-height: 92vh; padding: 3.2rem 1rem 1rem; background: #111; border: 1px solid #55514c; border-radius: 12px; }.photo-preview-modal__content img { display: block; width: auto; max-width: 100%; max-height: calc(92vh - 6rem); object-fit: contain; }.photo-preview-modal__content p { margin: .8rem 0 0; color: var(--muted); text-align: center; overflow-wrap: anywhere; }.photo-preview-modal__close { position: absolute; top: .7rem; right: .7rem; min-height: 36px; padding: .35rem .65rem; background: #222; border-color: #615f5b; font-size: .8rem; }.photo-preview-is-open { overflow: hidden; }
.wall-art-prompt { margin: 2.6rem 0 3rem; padding: clamp(1.6rem, 3.5vw, 2.45rem); border: 1px solid #625c52; border-radius: 14px; background: linear-gradient(110deg, #1d1c19, #151515); text-align: center; }.wall-art-prompt h2 { max-width: 980px; margin: 0 auto; font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.2; letter-spacing: .085em; }.wall-art-prompt p { max-width: 680px; margin: 0; color: var(--muted); }

/* Maksupyyntö, tilausvahvistus ja asiakkaan oma tilasivu. */
.payment-link-management, .order-confirmation-management, .invoice-management { display: grid; gap: .75rem; padding: 1.1rem; border: 1px solid #615f5b; border-radius: 10px; background: #161616; }.payment-link-management .eyebrow, .order-confirmation-management .eyebrow, .invoice-management .eyebrow { margin: 0; }.payment-link-management form, .order-confirmation-management form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }.payment-link-management label { display: grid; gap: .45rem; color: var(--muted); font-size: .95rem; }.payment-link-management__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }.payment-link-management__actions form { display: block; }.payment-link-management__actions .text-link { color: var(--accent); }.payment-link-management .muted, .order-confirmation-management .muted, .invoice-management .muted { margin: 0; font-size: .94rem; }.invoice-management form { display: block; }.invoice-management .button-link { width: fit-content; }
.payment-link-management--disabled { border-style: dashed; border-color: #786e61; background: linear-gradient(135deg, #1a1917, #151515); opacity: .82; }.payment-link-management__disabled-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }.feature-disabled-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 1px solid #9b665f; border-radius: 999px; color: #e0b4ac; background: rgba(123, 66, 60, .2); font-size: .82rem; letter-spacing: .08em; white-space: nowrap; }.payment-link-management__disabled-content { display: flex; align-items: center; gap: .9rem; min-height: 3.4rem; }.payment-link-management__disabled-icon { flex: 0 0 auto; color: #ba746b; font-size: 2.8rem; line-height: 1; }.payment-link-management__disabled-content h3 { margin: 0 0 .25rem; color: var(--ink); font-size: 1.2rem; }.payment-link-management__disabled-content .muted { color: #c5bbae; }
.client-order-shell { padding: 4.5rem 0; }.client-order-card { max-width: 760px; margin: 0 auto; padding: clamp(1.6rem, 5vw, 3.25rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.client-order-card h1 { margin: 0 0 .35rem; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; }.client-order-number { margin: 0 0 2rem; color: var(--accent); }.client-order-card dl { display: grid; gap: .85rem; margin: 0; }.client-order-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }.client-order-card dt { color: var(--muted); }.client-order-card dd { margin: 0; text-align: right; }.client-order-payment { margin-top: 2rem; padding: 1.35rem; border: 1px solid #625c52; border-radius: 12px; background: #151515; }.client-order-payment h2 { margin: 0 0 .5rem; font-size: 2rem; }.client-order-payment p { color: var(--muted); }.client-order-payment--paid { border-color: var(--accent); }.client-order-payment .button-link { margin-top: .5rem; width: 100%; }

/* Lähetyslista on tarkoitettu Postin lomakkeelle kopiointiin tai PDF-tulosteeksi. */
.invoice-list { display: grid; gap: 1rem; }.invoice-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.invoice-card .eyebrow { margin: 0 0 .4rem; }.invoice-card h2 { margin: 0; font-size: 1.85rem; }.invoice-card__amount { margin: .65rem 0; color: var(--accent); font-size: 1.55rem; font-weight: 700; }.invoice-card .muted { margin: 0; }.invoice-card__actions { display: grid; gap: .7rem; min-width: 170px; }.invoice-card__actions .button-link, .invoice-card__actions button { width: 100%; }.invoice-card__actions .muted { text-align: center; }
.invoice-print { width: min(960px, 92vw); margin: 0 auto; padding: 3rem 0 5rem; }.invoice-document { padding: clamp(1.75rem, 5vw, 3.5rem); color: #111; background: #fdfcf9; border-radius: 4px; }.invoice-document h1, .invoice-document h2, .invoice-document p { color: #111; }.invoice-document .eyebrow { color: #75654d; }.invoice-document a { color: #4f422e; }.invoice-document__header { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 2px solid #c9b69a; }.invoice-document__header h1 { margin: .25rem 0 0; font-size: clamp(3rem, 8vw, 5rem); line-height: .9; }.invoice-document__header dl { display: grid; gap: .5rem; min-width: 220px; margin: 0; }.invoice-document__header dl div, .invoice-payment dl div { display: flex; justify-content: space-between; gap: 1rem; }.invoice-document dt { color: #695e4f; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }.invoice-document dd { margin: 0; color: #111; font-weight: 700; text-align: right; }.invoice-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; }.invoice-parties > div { min-height: 140px; padding: 1.35rem; background: #f0ede7; border-left: 4px solid #c9b69a; }.invoice-parties .eyebrow { margin: 0 0 .35rem; }.invoice-parties h2 { margin: 0 0 .6rem; font-size: 1.5rem; }.invoice-parties p { margin: 0; line-height: 1.55; }.invoice-items { overflow-x: auto; }.invoice-items table { width: 100%; border-collapse: collapse; }.invoice-items th { padding: .9rem .75rem; color: #685b47; border-bottom: 2px solid #c9b69a; font-size: .78rem; letter-spacing: .07em; text-align: right; white-space: nowrap; }.invoice-items th:first-child { text-align: left; }.invoice-items td { padding: .95rem .75rem; border-bottom: 1px solid #ded8ce; text-align: right; vertical-align: top; }.invoice-items td:first-child { min-width: 190px; text-align: left; }.invoice-items td small { display: block; margin-top: .2rem; color: #685f55; font-size: .82rem; font-weight: 400; line-height: 1.35; }.invoice-items tfoot td { padding-top: 1.1rem; border-bottom: 0; color: #111; font-size: 1rem; font-weight: 700; }.invoice-items tfoot td:last-child { color: #111; font-size: 1.35rem; }.invoice-payment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); align-items: stretch; gap: 1.25rem; margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid #d3ccc0; }.invoice-payment > div:first-child { padding: 1.25rem; background: #f0ede7; }.invoice-payment .eyebrow { margin: 0 0 1rem; }.invoice-payment dl { display: grid; gap: .55rem; margin: 0; }.invoice-payment__total { display: grid; align-content: center; gap: .4rem; padding: 1.25rem; color: #111; background: #c9b69a; text-align: right; }.invoice-payment__total span { font-size: .82rem; font-weight: 700; letter-spacing: .08em; }.invoice-payment__total strong { font-size: 2rem; line-height: 1; }.invoice-payment__total small { font-size: .82rem; }.invoice-missing-details { margin: 0; color: #711c1c !important; font-weight: 700; line-height: 1.45; }.invoice-document__footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid #d3ccc0; color: #625b52; font-size: .8rem; }
@media (max-width: 720px) { .invoice-card { align-items: stretch; flex-direction: column; }.invoice-card__actions { width: 100%; min-width: 0; }.invoice-card .button-link { width: 100%; }.invoice-print { width: 100%; padding: 0; }.invoice-document { padding: 1.35rem; }.invoice-document__header { align-items: flex-start; flex-direction: column; gap: 1.4rem; }.invoice-document__header dl { width: 100%; }.invoice-parties, .invoice-payment { grid-template-columns: 1fr; gap: 1rem; }.invoice-items { margin: 0 -1.35rem; padding: 0 1.35rem; }.invoice-document__footer { align-items: flex-start; flex-direction: column; } }
.shipping-print { width: min(960px, 92vw); margin: 0 auto; padding: 3rem 0 5rem; }.shipping-document-list { display: grid; gap: 2rem; }.shipping-document { display: flex; flex-direction: column; min-height: 1050px; padding: clamp(1.75rem, 5vw, 3.5rem); color: #111; background: #fdfcf9; border-radius: 4px; }.shipping-document h1, .shipping-document h2, .shipping-document p { color: #111; }.shipping-document .eyebrow { color: #75654d; }.shipping-document__header { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.65rem; border-bottom: 2px solid #c9b69a; }.shipping-document__header h1 { margin: .25rem 0 0; font-size: clamp(2.75rem, 7vw, 4.4rem); line-height: .95; }.shipping-document__header dl { display: grid; gap: .45rem; min-width: 230px; margin: 0; }.shipping-document__header dl div, .shipping-document__details > div:last-child dl div { display: flex; justify-content: space-between; gap: 1.5rem; }.shipping-document dt { color: #695e4f; font-size: .76rem; font-weight: 700; letter-spacing: .08em; }.shipping-document dd { margin: 0; color: #111; font-weight: 700; text-align: right; }.shipping-document__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; }.shipping-document__details > div { min-height: 170px; padding: 1.35rem; background: #f0ede7; border-left: 4px solid #c9b69a; }.shipping-document__details .eyebrow { margin: 0 0 .4rem; }.shipping-document__details h2 { margin: 0 0 .75rem; font-size: 1.75rem; }.shipping-document__details p { margin: 0; line-height: 1.55; }.shipping-document__address { font-size: 1.3rem; font-weight: 700; }.shipping-document__details > div:last-child dl { display: grid; gap: .65rem; margin: 1.1rem 0 0; }.shipping-document__items { padding-top: .2rem; }.shipping-document__items h2 { margin: 0 0 .8rem; font-size: 1.6rem; }.shipping-document__items table { width: 100%; border-collapse: collapse; }.shipping-document__items th { padding: .85rem .75rem; color: #685b47; border-bottom: 2px solid #c9b69a; font-size: .76rem; letter-spacing: .08em; text-align: left; }.shipping-document__items th:last-child, .shipping-document__items td:last-child { width: 90px; text-align: right; }.shipping-document__items td { padding: 1rem .75rem; border-bottom: 1px solid #ded8ce; color: #111; vertical-align: top; }.shipping-document__items td small { display: block; margin-top: .25rem; color: #685f55; font-size: .85rem; font-weight: 400; line-height: 1.35; }.shipping-document__note { margin-top: 1.4rem; padding: 1rem 1.25rem; border-left: 3px solid #c9b69a; background: #f0ede7; }.shipping-document__note .eyebrow { margin: 0 0 .35rem; }.shipping-document__note p:last-child { margin: 0; line-height: 1.5; }.shipping-document__footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid #d3ccc0; color: #625b52; font-size: .82rem; }.shipping-document__footer div { display: grid; gap: .2rem; }.shipping-document__footer div:last-child { text-align: right; }.shipping-document__footer strong, .shipping-document__footer span { color: inherit; }
@media (max-width: 720px) { .payment-link-management form, .order-confirmation-management form { grid-template-columns: 1fr; }.payment-link-management__actions { align-items: stretch; flex-direction: column; }.payment-link-management__actions form, .payment-link-management__actions button { width: 100%; }.client-order-shell { padding: 2.5rem 0; }.client-order-card { padding: 1.5rem; }.client-order-card dl div { align-items: flex-start; flex-direction: column; gap: .25rem; }.client-order-card dd { text-align: left; }.shipping-print { width: 100%; padding: 0; }.shipping-document { min-height: 0; padding: 1.35rem; }.shipping-document__header, .shipping-document__details { grid-template-columns: 1fr; }.shipping-document__header { align-items: flex-start; flex-direction: column; gap: 1.4rem; }.shipping-document__header dl { width: 100%; }.shipping-document__details { gap: 1rem; }.shipping-document__footer { align-items: flex-start; flex-direction: column; }.shipping-document__footer div:last-child { text-align: left; } }
@media print { @page { size: A4 portrait; margin: 0; }.shipping-print { width: auto; margin: 0; padding: 0; color: #111; }.shipping-document-list { display: block; }.shipping-document { width: 210mm; min-height: 297mm; height: 297mm; padding: 16mm; border-radius: 0; break-after: page; page-break-after: always; }.shipping-document:last-child { break-after: auto; page-break-after: auto; }.shipping-document__header h1, .shipping-document h2 { color: #111 !important; }.shipping-document__details > div, .shipping-document__note { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media print { .invoice-print { width: auto; margin: 0; padding: 0; }.invoice-document { padding: 10mm; border-radius: 0; }.invoice-document__header h1, .invoice-document h2 { color: #111 !important; }.invoice-parties > div, .invoice-payment > div:first-child, .invoice-payment__total { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Virallinen, A4-kokoinen laskupohja. */
.invoice-document--official { display: flex; flex-direction: column; min-height: 297mm; box-sizing: border-box; padding: 16mm; border: 1px solid #d6d0c7; border-radius: 0; background: #fff; font-family: Arial, Helvetica, sans-serif; }.invoice-document--official h1, .invoice-document--official h2, .invoice-document--official h3, .invoice-document--official p, .invoice-document--official strong, .invoice-document--official span, .invoice-document--official dt, .invoice-document--official dd, .invoice-document--official td, .invoice-document--official th { font-family: Arial, Helvetica, sans-serif; letter-spacing: normal; }.invoice-document--official .eyebrow { margin: 0 0 .45rem; color: #555; font-size: .72rem; font-weight: 700; letter-spacing: .025em; }.invoice-document--official .invoice-document__masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid #161616; color: #111; font-size: .77rem; }.invoice-document--official .invoice-document__masthead strong { font-size: .78rem; letter-spacing: .06em; }.invoice-document--official .invoice-document__overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 2.5rem; padding: 1.25rem 0 1.5rem; }.invoice-document--official .invoice-document__recipient h1 { margin: 0 0 .42rem; color: #111; font-size: 1.1rem; line-height: 1.2; }.invoice-document--official .invoice-document__recipient p:last-child { margin: 0; color: #222; font-size: .86rem; line-height: 1.55; }.invoice-document--official .invoice-document__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.3rem; margin: 0; align-content: start; }.invoice-document--official .invoice-document__facts div { display: grid; gap: .14rem; }.invoice-document--official dt { color: #555; font-size: .68rem; font-weight: 700; letter-spacing: .015em; }.invoice-document--official dd { color: #111; font-size: .82rem; font-weight: 700; text-align: left; }.invoice-document--official .invoice-items { overflow: visible; }.invoice-document--official .invoice-items table, .invoice-document--official .invoice-vat-table { width: 100%; border-collapse: collapse; }.invoice-document--official .invoice-items th, .invoice-document--official .invoice-vat-table th { padding: .52rem .42rem; color: #111; border-top: 1px solid #222; border-bottom: 1px solid #222; font-size: .68rem; font-weight: 700; letter-spacing: .01em; text-align: left; }.invoice-document--official .invoice-items th:not(:first-child), .invoice-document--official .invoice-items td:not(:first-child), .invoice-document--official .invoice-vat-table th:not(:first-child), .invoice-document--official .invoice-vat-table td:not(:first-child) { text-align: right; }.invoice-document--official .invoice-items td, .invoice-document--official .invoice-vat-table td { padding: .58rem .42rem; border-bottom: 1px dotted #999; color: #111; font-size: .77rem; vertical-align: top; }.invoice-document--official .invoice-items td:first-child { min-width: 230px; }.invoice-document--official .invoice-items td small { margin-top: .18rem; color: #555; font-size: .7rem; }.invoice-document--official .invoice-document__totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .5fr); gap: 2.2rem; margin-top: 1.35rem; padding-bottom: 1.4rem; border-bottom: 1px solid #222; }.invoice-document--official .invoice-vat-table th, .invoice-document--official .invoice-vat-table td { font-size: .7rem; }.invoice-document--official .invoice-grand-total { display: grid; gap: 0; align-content: start; margin: 0; }.invoice-document--official .invoice-grand-total div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid #bbb; }.invoice-document--official .invoice-grand-total dt, .invoice-document--official .invoice-grand-total dd { color: #111; font-size: .78rem; }.invoice-document--official .invoice-grand-total div:last-child { margin-top: .32rem; padding: .62rem .55rem; border: 1px solid #111; background: #f3f1ec; }.invoice-document--official .invoice-grand-total div:last-child dt, .invoice-document--official .invoice-grand-total div:last-child dd { font-size: .95rem; font-weight: 800; }.invoice-document--official .invoice-document__payment { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(190px, .55fr); gap: 2.2rem; margin-top: 1.5rem; padding: 0; border: 0; }.invoice-document--official .invoice-document__payment > div { min-height: 110px; padding: 0; background: transparent; }.invoice-document--official .invoice-document__payment dl { display: grid; gap: .45rem; margin: .5rem 0 0; }.invoice-document--official .invoice-document__payment dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #ddd; padding-bottom: .3rem; }.invoice-document--official .invoice-document__payment-note { border-left: 2px solid #c9b69a; padding-left: 1rem !important; }.invoice-document--official .invoice-document__payment-note strong { display: block; color: #111; font-size: .95rem; }.invoice-document--official .invoice-document__payment-note p:last-child { margin: .5rem 0 0; color: #444; font-size: .75rem; line-height: 1.45; }.invoice-document--official .invoice-missing-details { color: #8f2020 !important; font-size: .78rem; }.invoice-document--official .invoice-document__footer--official { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid #222; color: #111; font-size: .68rem; }.invoice-document--official .invoice-document__footer--official div { display: grid; gap: .22rem; }.invoice-document--official .invoice-document__footer--official strong { font-size: .68rem; }.invoice-document--official .invoice-document__footer--official span { color: #222; line-height: 1.45; }
@media (max-width: 720px) { .invoice-document--official { min-height: 0; padding: 1.35rem; }.invoice-document--official .invoice-document__overview, .invoice-document--official .invoice-document__totals, .invoice-document--official .invoice-document__payment { grid-template-columns: 1fr; gap: 1.3rem; }.invoice-document--official .invoice-document__facts { grid-template-columns: 1fr 1fr; }.invoice-document--official .invoice-items { margin: 0 -1.35rem; padding: 0 1.35rem; overflow-x: auto; }.invoice-document--official .invoice-items table { min-width: 690px; }.invoice-document--official .invoice-document__footer--official { grid-template-columns: 1fr 1fr; }.invoice-document--official .invoice-document__masthead { align-items: flex-start; flex-direction: column; } }
@media print { .invoice-print { width: 210mm; margin: 0; padding: 0; }.invoice-document--official { width: 210mm; min-height: 297mm; padding: 16mm; border: 0; }.invoice-document--official .invoice-grand-total div:last-child { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Kuvien latauksen tarkistus ennen ja jälkeen latauksen. */
.upload-form { align-items: center; }.file-selection { max-width: 360px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.3; }.gallery-uploaded-files { margin-top: .9rem; }.gallery-uploaded-files summary { width: fit-content; cursor: pointer; color: var(--accent); }.gallery-uploaded-files__list { display: grid; gap: .7rem; max-height: 410px; padding: .8rem 0 0; margin: 0; overflow-y: auto; list-style: none; }.gallery-uploaded-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }.gallery-uploaded-file__meta { display: grid; min-width: 0; gap: .2rem; color: var(--muted); font-size: .92rem; }.gallery-uploaded-file__meta strong { color: var(--ink); }.gallery-uploaded-file__meta span { overflow-wrap: anywhere; }.gallery-uploaded-file__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }.gallery-uploaded-file__actions .button-secondary, .gallery-uploaded-file__actions .button-danger { min-height: 40px; padding: .5rem .7rem; font-size: .86rem; }.gallery-uploaded-file__delete-form { margin: 0; }.gallery-uploaded-file__delete-form .button-danger { border: 1px solid #8d3b3b; background: #3c2020; color: #f5e9e9; }.gallery-uploaded-file__no-preview { color: var(--muted); font-size: .84rem; font-style: italic; }
.gallery-card .card-actions { align-items: flex-end; }
@media (max-width: 720px) { .file-selection { max-width: none; width: 100%; padding: .35rem 0; }.gallery-uploaded-files__list { max-height: none; }.gallery-uploaded-file { align-items: stretch; flex-direction: column; gap: .75rem; }.gallery-uploaded-file__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }.gallery-uploaded-file__actions .button-secondary, .gallery-uploaded-file__actions .button-danger, .gallery-uploaded-file__delete-form { width: 100%; }.gallery-uploaded-file__no-preview { grid-column: 1 / -1; text-align: center; } }
@media (max-width: 720px) { .gallery-card .card-actions { align-items: stretch; } }

/* Työntekijätilit ja roolivalinta kirjautumisessa. */
.login-choice-card { text-align: center; }
.login-role-choices { display: grid; gap: .9rem; margin-top: 2rem; }
.login-role-choices .button-link { width: 100%; }
.login-back-link { display: block; margin-top: 1.35rem; text-align: center; }
.password-input { display: flex; align-items: stretch; gap: .45rem; width: 100%; }
.password-input input { min-width: 0; flex: 1; }
.password-toggle { flex: 0 0 auto; min-height: 50px; padding: .55rem .8rem; color: var(--accent); background: #181818; border: 1px solid #615f5b; border-radius: 8px; font-size: .92rem; }
.password-toggle:hover, .password-toggle[aria-pressed="true"] { color: #111; background: var(--accent); border-color: var(--accent); filter: none; }
.employee-list { margin: 0 0 3rem; }
.employee-card { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); align-items: start; gap: 2rem; }
.employee-card h2 { margin: .2rem 0 .55rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.employee-card__actions { display: grid; gap: 1rem; }
.employee-editor, .employee-password-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; gap: .8rem; padding: 1rem; border: 1px solid #55514c; border-radius: 10px; background: #151515; }
.employee-editor .inline-check { display: flex; align-items: center; gap: .55rem; min-height: 50px; color: var(--ink); white-space: nowrap; }
.employee-editor .inline-check input { min-height: 20px; width: 20px; padding: 0; accent-color: var(--accent); }
.employee-password-form { grid-template-columns: minmax(180px, 1fr) auto; }
.employee-card__actions > form:last-child { justify-self: start; }
@media (max-width: 900px) { .employee-card { grid-template-columns: 1fr; }.employee-editor { grid-template-columns: minmax(180px, 1fr) auto; }.employee-editor .inline-check { grid-column: 1 / -1; } }
@media (max-width: 720px) { .employee-card { gap: 1.25rem; }.employee-editor, .employee-password-form { grid-template-columns: 1fr; padding: .9rem; }.employee-editor .inline-check { grid-column: auto; }.employee-card__actions > form:last-child { justify-self: stretch; }.employee-card__actions > form:last-child button { width: 100%; } }
@media (max-width: 720px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.photo-preview-button img { aspect-ratio: 1 / 1; }.photo-preview-button span { display: none; }.photo-preview-unavailable { min-height: 170px; font-size: .9rem; }.photo-preview-modal { padding: .75rem; }.photo-preview-modal__content { padding: 3rem .55rem .7rem; }.photo-preview-modal__content img { max-height: calc(92vh - 5rem); } }
@media (max-width: 720px) { .wall-art-prompt { margin: 2rem 0 2.5rem; padding: 1.7rem 1.25rem; }.wall-art-prompt h2 { font-size: clamp(1.75rem, 7.6vw, 2.35rem); line-height: 1.24; letter-spacing: .07em; } }
@media (max-width: 720px) { .size-guide-button { right: .75rem; bottom: .75rem; }.product-image-tools, .product-image-tools .receipt-form { width: 100%; }.product-image-tools .file-input, .product-image-tools button { width: 100%; } }


/* Asiakassivujen kielivalinta */
.client-header__actions { display: flex; align-items: center; gap: .7rem; }
.client-language-switch { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: .55rem; background: rgba(17, 17, 17, .54); }
.client-language-switch a { display: grid; min-width: 2.7rem; min-height: 2.45rem; place-items: center; padding: .25rem .55rem; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .12em; line-height: 1; text-decoration: none; }
.client-language-switch a + a { border-left: 1px solid var(--line); }
.client-language-switch a:hover, .client-language-switch a:focus-visible { color: var(--text); background: rgba(201, 182, 154, .13); outline: none; }
.client-language-switch a.is-active { color: var(--background); background: var(--accent); }
@media (max-width: 720px) { .client-header__actions { gap: .4rem; }.client-language-switch a { min-width: 2.35rem; min-height: 2.25rem; padding: .2rem .42rem; font-size: .7rem; } }