/* ============================================================
   FineArt & Canvas Orders — Frontend styles v2.4.1
   Kaikki fontit em-pohjaisina, juurena 1rem (.fco-wrap)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --ink:      #1a1714;
    --ink-soft: #4a4540;
    --rule:     #ddd8d0;
    --surface:  #faf9f7;
    --card:     #ffffff;
    --gold:     #b8964e;
    --gold-lt:  #f5eddc;
    --blue:     #2a5f8a;
    --error:    #a0291e;
    --radius:   8px;
    --shadow:   0 2px 16px rgba(26,23,20,.08);
}

/* ── Wrap — em-juuri ──────────────────────────────────────── */
.fco-wrap {
    max-width: 700px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;        /* seuraa selaimen/käyttäjän asetuksia */
    color: var(--ink);
}

/* ── Hero banner ──────────────────────────────────────────── */
.fco-hero {
    background: var(--ink);
    color: #fff;
    padding: 2.5em 2.25em 2em;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
    overflow: hidden;
}
.fco-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,.015) 40px,
            rgba(255,255,255,.015) 80px
        );
    pointer-events: none;
}
.fco-hero__eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: .688em;      /* ≈11px @ 16px root */
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .625em;
}
.fco-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.75em, 5vw, 2.5em);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 .875em;
    color: #fff;
}
.fco-hero__title em { font-style: italic; color: #e8dfc8; }
.fco-hero__sub {
    font-size: .844em;      /* ≈13.5px */
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin: 0;
    max-width: 440px;
}
.fco-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1.375em;
}
.fco-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .313em;
    padding: .25em .75em;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    font-size: .75em;       /* ≈12px */
    color: rgba(255,255,255,.85);
}

/* ── Form body ────────────────────────────────────────────── */
.fco-form {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Section ──────────────────────────────────────────────── */
.fco-section {
    padding: 1.75em 2em;
    border-bottom: 1px solid var(--rule);
}
.fco-section:last-child { border-bottom: none; }

.fco-section__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25em;      /* ≈20px */
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 .25em;
    display: flex;
    align-items: center;
    gap: .625em;
}
.fco-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}
.fco-section__hint {
    font-size: .75em;       /* ≈12px */
    color: var(--ink-soft);
    margin: .25em 0 1.125em;
}

/* ── Fields ───────────────────────────────────────────────── */
.fco-field { margin-bottom: 1em; }
.fco-field:last-child { margin-bottom: 0; }

.fco-form label {
    display: block;
    font-size: .75em;       /* ≈12px */
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .375em;
}
.fco-form input[type="text"],
.fco-form input[type="email"],
.fco-form input[type="tel"],
.fco-form input[type="number"],
.fco-form select,
.fco-form textarea {
    width: 100%;
    padding: .625em .813em;
    border: 1.5px solid var(--rule);
    border-radius: 6px;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    font-size: .875em;      /* ≈14px — readable on all displays */
    background: var(--card);
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.fco-form input:focus,
.fco-form select:focus,
.fco-form textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(26,23,20,.06);
}
.fco-form textarea { resize: vertical; }
.fco-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a4540' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75em center;
    padding-right: 2.25em;
}

.fco-grid {
    display: grid;
    gap: .875em;
    grid-template-columns: 1fr 1fr;
}
.fco-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875em;
    margin-bottom: 1em;
}
@media (max-width: 580px) {
    .fco-grid, .fco-row { grid-template-columns: 1fr; }
    .fco-section { padding: 1.375em 1.125em; }
    .fco-hero { padding: 1.75em 1.125em 1.5em; }
}

.fco-req { color: var(--gold); }

/* ── Material info card ───────────────────────────────────── */
.fco-matinfo {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    background: var(--gold-lt);
    border: 1px solid #e2d4b4;
    border-radius: var(--radius);
    padding: .875em 1em;
    margin-top: .875em;
    animation: fco-fadein .25s ease;
}
@keyframes fco-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Image thumb with hover zoom */
.fco-matinfo__thumb {
    position: relative;
    flex-shrink: 0;
    width: 5.5em;           /* scales with font size */
    height: 4.625em;
}
.fco-matinfo__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #d4c49a;
    display: block;
    cursor: zoom-in;
    transition: opacity .15s;
}
.fco-matinfo__thumb img:hover { opacity: .9; }
.fco-matinfo__zoom-hint {
    display: block;
    font-size: .65em;
    color: var(--ink-soft);
    text-align: center;
    margin-top: .25em;
    opacity: .7;
    pointer-events: none;
    letter-spacing: .01em;
}

/* Zoom overlay */
.fco-img-zoom {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.fco-img-zoom.fco-img-zoom--visible {
    opacity: 1;
    pointer-events: auto;
}
.fco-img-zoom__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.88);
    cursor: zoom-out;
}
.fco-img-zoom__img {
    position: relative;
    z-index: 1;
    max-width: min(1200px, 94vw);
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 16px 80px rgba(0,0,0,.7);
    cursor: zoom-out;
    transform: scale(.94);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.fco-img-zoom--visible .fco-img-zoom__img {
    transform: scale(1);
}
.fco-img-zoom__caption {
    position: absolute;
    bottom: -2em;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: .75em;
    white-space: nowrap;
}

.fco-matinfo__body { flex: 1; min-width: 0; }
.fco-matinfo__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1em;         /* ≈16px */
    font-weight: 600;
    margin: 0 0 .375em;
    color: var(--ink);
}
.fco-chips { display: flex; flex-wrap: wrap; gap: .313em; margin-bottom: .375em; }
.fco-chip {
    display: inline-block;
    padding: .125em .563em;
    border-radius: 20px;
    font-size: .688em;      /* ≈11px */
    font-weight: 600;
    letter-spacing: .03em;
}
.fco-chip--code   { background: rgba(26,23,20,.08); color: var(--ink-soft); }
.fco-chip--weight { background: #fff; color: var(--blue); border: 1px solid #bcd4ea; }
.fco-matdesc {
    font-size: .813em;      /* ≈13px — was 12px, slightly larger for readability */
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.55;
    font-style: italic;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.fco-tabs {
    display: flex;
    border: 1.5px solid var(--rule);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 1.125em;
    background: var(--card);
}
.fco-tab {
    flex: 1;
    padding: .5em .875em;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: .813em;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background .15s, color .15s;
}
.fco-tab + .fco-tab { border-left: 1.5px solid var(--rule); }
.fco-tab:hover { background: var(--surface); color: var(--ink); }
.fco-tab--active { background: var(--ink); color: #fff; }

/* ── Size grid ────────────────────────────────────────────── */
.fco-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-bottom: .5em;
}
.fco-size-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .188em;
    padding: .688em 1em;
    border: 1.5px solid var(--rule);
    border-radius: 7px;
    background: var(--card);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: .813em;
    font-weight: 600;
    color: var(--ink);
    transition: border-color .15s, background .15s, transform .1s;
}
.fco-size-btn:hover { border-color: #aaa; transform: translateY(-1px); }
.fco-size-btn--active { border-color: var(--ink); background: var(--ink); color: #fff; }
.fco-size-btn--active .fco-size-price { color: #e8dfc8; }
.fco-size-dims  { display: block; line-height: 1.2; }
.fco-size-dims  { display: block; line-height: 1.2; }
.fco-size-price { display: block; font-size: .688em; color: var(--blue); font-weight: 700; margin-top: .25em; }

/* ── Checkbox & radio ─────────────────────────────────────── */
.fco-checkbox-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .5em;
    font-size: .813em !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink) !important;
    cursor: pointer;
    margin-bottom: .875em;
}
.fco-checkbox-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--ink); }

.fco-radio-label {
    display: inline-flex;
    align-items: center;
    gap: .375em;
    font-size: .875em;
    font-weight: 500;
    cursor: pointer;
    margin-right: 1.25em;
    color: var(--ink);
}
.fco-radio-label input { margin: 0; width: auto; accent-color: var(--ink); }

/* ── Business fields ──────────────────────────────────────── */
.fco-biz-box {
    background: #f5f3ef;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1em;
    margin-bottom: 1em;
}

/* ── Delivery cards ───────────────────────────────────────── */
.fco-delivery-cards { display: flex; gap: .625em; margin-bottom: 1.125em; }
.fco-delivery-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;
    padding: 1em .75em;
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--card);
    text-align: center;
    transition: border-color .15s;
}
.fco-delivery-card input[type="radio"] { display: none; }
.fco-delivery-card:hover { border-color: #aaa; }
.fco-delivery-card--active { border-color: var(--ink); background: var(--ink); }
.fco-delivery-card--active .fco-delivery-card__label,
.fco-delivery-card--active .fco-delivery-card__price { color: #fff; }
.fco-delivery-card__icon  { font-size: 1.375em; }
.fco-delivery-card__label { font-size: .813em; font-weight: 600; color: var(--ink); }
.fco-delivery-card__price { font-size: .75em; color: var(--blue); font-weight: 700; }
.fco-delivery-card--active .fco-delivery-card__price { color: #b8cfe0; }

/* ── File upload ──────────────────────────────────────────── */
.fco-file-hint { font-size: .75em; color: var(--ink-soft); margin: .375em 0 0; line-height: 1.5; }
.fco-file-hint a { color: var(--blue); }

/* ── Price summary ────────────────────────────────────────── */
.fco-price-summary {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.125em 1.25em;
    margin-top: 1.25em;
    animation: fco-fadein .2s ease;
}
.fco-price-summary table { width: 100%; border-collapse: collapse; }
.fco-price-summary td { padding: .25em 0; font-size: .813em; color: var(--ink-soft); }
.fco-price-summary td:last-child { text-align: right; }
.fco-total-row td {
    font-size: 1.063em;
    font-weight: 700;
    color: var(--ink);
    border-top: 2px solid var(--ink);
    padding-top: .625em;
    padding-bottom: .125em;
}
.fco-price-summary .fco-vat-row td {
    font-size: .75em;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: .375em;
}
.fco-summary-note { font-size: .688em; color: #999; margin: .625em 0 0; }

/* ── Submit ───────────────────────────────────────────────── */
.fco-submit-wrap {
    padding: 1.5em 2em 1.75em;
    background: var(--surface);
    border-radius: 0 0 var(--radius) var(--radius);
}
.fco-submit {
    display: block;
    width: 100%;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .938em;
    font-family: 'DM Sans', sans-serif;
    font-size: .938em;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.fco-submit:hover:not(:disabled) { background: #a07a30; transform: translateY(-1px); }
.fco-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Error & success ──────────────────────────────────────── */
.fco-field-error {
    color: var(--error);
    font-size: .75em;
    margin-top: .25em;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.fco-form-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: .625em .875em;
    color: var(--error);
    font-size: .813em;
    margin-bottom: .875em;
    text-transform: none;
    letter-spacing: 0;
}
.fco-success-msg {
    background: #f0f7f0;
    border: 1px solid #a5c8a5;
    border-radius: var(--radius);
    padding: 1.75em;
    color: #1b4d1b;
    text-align: center;
    margin-bottom: 1em;
}
.fco-success-msg strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375em;
    margin-bottom: .5em;
}
.fco-notice {
    padding: .875em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 5px;
    color: #856404;
}

/* ── Match info / roll warn ───────────────────────────────── */
.fco-match-info { font-size: .813em; margin-top: .5em; min-height: 1.4em; }
.fco-roll-warn  { color: var(--error); font-size: .813em; }

/* ── Varnish option cards ─────────────────────────────────── */
.fco-option-cards { display: flex; gap: .5em; flex-wrap: wrap; }
.fco-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .313em;
    padding: .75em 1.25em;
    border: 1.5px solid var(--rule);
    border-radius: 7px;
    cursor: pointer;
    background: var(--card);
    transition: border-color .15s, background .15s;
    min-width: 5.625em;
}
.fco-option-card input[type="radio"] { display: none; }
.fco-option-card:hover { border-color: #aaa; }
.fco-option-card:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.fco-option-card__icon  { font-size: 1.25em; line-height: 1; }
.fco-option-card__label { font-size: .75em; font-weight: 600; white-space: nowrap; }

/* ── Border treatment cards ───────────────────────────────── */
.fco-border-cards { display: flex; gap: .5em; flex-wrap: wrap; }
.fco-border-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375em;
    padding: .688em 1em;
    border: 1.5px solid var(--rule);
    border-radius: 7px;
    cursor: pointer;
    background: var(--card);
    transition: border-color .15s;
    flex: 0 0 auto;
}
.fco-border-card input[type="radio"] { display: none; }
.fco-border-card:hover { border-color: #aaa; }
.fco-border-card--active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fco-border-card__img-wrap { width: 4em; height: 3em; border-radius: 4px; overflow: hidden; border: 1px solid #ddd; }
.fco-border-card__img { width: 100%; height: 100%; }
.fco-border-card__img--white  { background: linear-gradient(135deg, #e8e0d4 60%, #fff 60%); }
.fco-border-card__img--mirror { background: linear-gradient(135deg, #c8c0b4 0%, #e8e0d4 40%, #c8c0b4 40%, #e8e0d4 100%); }
.fco-border-card__img--color  { background: #2d6a4f; transition: background .2s; }
.fco-border-card__label { font-size: .75em; font-weight: 600; color: var(--ink); text-align: center; }

/* ── ALE badge ────────────────────────────────────────────── */
.fco-ale-badge {
    position: absolute;
    top: .25em;
    left: .25em;
    background: #c0392b;
    color: #fff;
    font-size: .625em;      /* small but legible */
    font-weight: 800;
    letter-spacing: .04em;
    padding: .188em .438em;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── H1 hide helper ───────────────────────────────────────── */
.fco-hide-title { display: none !important; }

/* ── Kampanjakortti ────────────────────────────────────────────────────── */
.fco-campaign-card {
  border: 2px solid #d4af37;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffdf0 0%, #fff8e1 100%);
  padding: 1.25em 1.5em 1em;
  position: relative;
  overflow: hidden;
}
.fco-campaign-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f5d76e, #d4af37);
}
.fco-campaign-badge {
  display: inline-block;
  background: #d4af37;
  color: #fff;
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25em .75em;
  border-radius: 20px;
  margin-bottom: .6em;
}
.fco-campaign-header strong { font-size: 1.05em; }
.fco-campaign-desc { font-size: .85em; color: #666; margin: .25em 0 .75em; }
.fco-campaign-table { width: 100%; border-collapse: collapse; font-size: .9em; margin: .5em 0; }
.fco-campaign-table td { padding: .2em .4em .2em 0; }
.fco-campaign-table td:last-child { text-align: right; white-space: nowrap; }
.fco-campaign-total-row td { border-top: 1px solid #e8dfc8; padding-top: .4em; color: #888; }
.fco-campaign-total-row td:last-child { text-decoration: line-through; color: #aaa; }
.fco-campaign-price-row td { padding-top: .3em; font-size: 1.1em; }
.fco-price-was { color: #999; text-decoration: line-through; }
.fco-price-campaign { color: #c0392b; font-size: 1.2em; }
.fco-price-normal { color: var(--ink); }
.fco-campaign-checkbox {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: 1em;
  padding-top: .75em;
  border-top: 1px solid #e8dfc8;
  cursor: pointer;
  font-size: .95em;
  font-weight: 600;
}
.fco-campaign-checkbox input[type="checkbox"] { width: 1.1em; height: 1.1em; cursor: pointer; accent-color: #d4af37; }
.fco-variant-btn {
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  padding: .4em .85em;
  font-size: .85em;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fco-variant-btn:hover { border-color: #d4af37; }
.fco-variant-btn--active { border-color: #d4af37; background: #fffdf0; font-weight: 600; }


/* ── FCO 2.7.0: kampanjatekstivärit — parempi kontrasti ── */
.fco-campaign-desc { font-size: .85em; color: #3d3520 !important; }
.fco-campaign-total-row td { color: #5a4e2e !important; }
.fco-campaign-total-row td:last-child {
  text-decoration: line-through;
  color: #7a6840 !important;
}
.fco-campaign-card {
  background: linear-gradient(135deg, #faf6e4 0%, #f5eecc 100%);
}
.fco-campaign-table td { color: #2a2010; }
.fco-price-normal { color: #555; }
.fco-price-was { color: #7a6840; text-decoration: line-through; }
.fco-price-campaign { color: #1a7f37; font-size: 1.1em; }

/* ── FCO 2.7.0: kiitossivu ── */
.fco-thankyou {
  text-align: center;
  padding: 3em 2em;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: var(--radius, 8px);
  margin-top: 1.5em;
}
.fco-thankyou__icon {
  width: 3em; height: 3em;
  line-height: 3em;
  background: #1a7f37;
  color: #fff;
  border-radius: 50%;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 auto .75em;
}
.fco-thankyou__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2em;
  font-weight: 400;
  margin: 0 0 .5em;
}
.fco-thankyou__num {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--gold, #d4af37);
  margin: 0 0 .5em;
  letter-spacing: .03em;
}
.fco-thankyou__msg {
  color: var(--ink-soft, #555);
  line-height: 1.7;
  margin: 0 0 .5em;
}
.fco-thankyou__email {
  font-size: .9em;
  color: var(--ink-soft, #777);
  margin: 0;
}
.fco-thankyou__new {
  cursor: pointer;
  text-decoration: none;
}

/* ── FCO 2.7.0: kampanjateaser ── */
.fco-campaign-teaser {
  display: flex;
  align-items: center;
  gap: .75em;
  flex-wrap: wrap;
  padding: .75em 1em;
  background: #fffbea;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
}
.fco-campaign-teaser__btn {
  margin-left: auto;
  background: none;
  border: 1.5px solid #d4af37;
  border-radius: 5px;
  padding: .3em .85em;
  font-size: .82em;
  font-weight: 600;
  color: #7a5c00;
  cursor: pointer;
  transition: background .15s;
}
.fco-campaign-teaser__btn:hover { background: #fef3c7; }

/* ================================================================
   FCO 2.7.3 — Kattava responsiivisuus (mobile-first korjaukset)
   Testattu: 320px–1200px leveys
   ================================================================ */

/* ── Globaali: touch-target minimikoko, smooth scroll ─────────── */
.fco-wrap * { box-sizing: border-box; }
.fco-wrap { scroll-behavior: smooth; }

/* Varmista ettei mikään elementti vuoda ulos kontainerista */
.fco-wrap,
.fco-wrap * { max-width: 100%; }

/* ── Wrap: täysi leveys pienillä näytöillä ────────────────────── */
@media (max-width: 767px) {
    .fco-wrap {
        max-width: 100%;
        font-size: .9375rem; /* 15px — luettavampi pienellä näytöllä */
    }
}

/* ── Hero: kompaktimpi mobiilissa ─────────────────────────────── */
@media (max-width: 480px) {
    .fco-hero {
        padding: 1.25em 1em 1.125em;
        border-radius: 0; /* mobiilissa reunasta reunaan */
    }
    .fco-hero__title {
        font-size: clamp(1.5em, 7vw, 2em);
        margin-bottom: .625em;
    }
    .fco-hero__sub {
        font-size: .8em;
    }
    .fco-hero__badges {
        margin-top: .875em;
        gap: .375em;
    }
    .fco-hero__badge {
        font-size: .7em;
        padding: .2em .6em;
    }
}

/* ── Form: reunojen padding mobiilissa ────────────────────────── */
@media (max-width: 480px) {
    .fco-section {
        padding: 1.125em 1em;
    }
    .fco-submit-wrap {
        padding: 1.125em 1em 1.375em;
    }
    .fco-form {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ── Materiaali-select: isompi touch-target ───────────────────── */
@media (max-width: 767px) {
    .fco-form input[type="text"],
    .fco-form input[type="email"],
    .fco-form input[type="tel"],
    .fco-form input[type="number"],
    .fco-form select,
    .fco-form textarea {
        font-size: 1rem;  /* 16px — estää iOS:n automaattisen zoomingin */
        padding: .75em .875em;
        min-height: 2.75rem; /* 44px touch target */
    }
}

/* ── Materiaali-info: pino mobiilissa ─────────────────────────── */
@media (max-width: 480px) {
    .fco-matinfo {
        flex-direction: column;
        gap: .75em;
    }
    .fco-matinfo__thumb {
        width: 100%;
        height: 9em;
        flex-shrink: unset;
    }
    .fco-matinfo__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ── Koko-tabs: täysi leveys ──────────────────────────────────── */
@media (max-width: 480px) {
    .fco-tabs { border-radius: 6px; }
    .fco-tab {
        padding: .625em .5em;
        font-size: .75em;
    }
}

/* ── Size grid: pienempi painos mobiilissa, min 2 saraketta ─── */
@media (max-width: 480px) {
    .fco-size-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5em;
    }
    .fco-size-btn {
        width: 100%;
        padding: .75em .5em;
        font-size: .8em;
        min-height: 3.5rem; /* selkeä touch-target */
    }
    .fco-size-dims { font-size: .85em; }
    .fco-size-price { font-size: .75em; }
}

/* ── Varnish / option-kortit: rivi mobiilissa ─────────────────── */
@media (max-width: 480px) {
    .fco-option-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .375em;
    }
    .fco-option-card {
        min-width: unset;
        padding: .625em .25em;
        font-size: .8em;
    }
    .fco-option-card__icon { font-size: 1.1em; }
    .fco-option-card__label { font-size: .7em; }
}

/* ── Border-kortit: tasainen rivi ─────────────────────────────── */
@media (max-width: 480px) {
    .fco-border-cards {
        gap: .375em;
    }
    .fco-border-card {
        width: auto;
        flex: 1;
        padding: .5em .375em;
    }
    .fco-border-card__img-wrap {
        width: 3.5em;
        height: 2.5em;
    }
    .fco-border-card__label { font-size: .7em; }
}

/* ── Toimitus-kortit: pino mobiilissa ─────────────────────────── */
@media (max-width: 480px) {
    .fco-delivery-cards {
        flex-direction: column;
        gap: .5em;
    }
    .fco-delivery-card {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: .875em 1em;
        gap: .75em;
        align-items: center;
    }
    .fco-delivery-card__icon { font-size: 1.5em; flex-shrink: 0; }
    .fco-delivery-card__label { font-size: .9em; flex: 1; }
    .fco-delivery-card__price { font-size: .85em; margin-left: auto; }
}

/* ── Yhteystiedot-grid: yksisarake mobiilissa ─────────────────── */
@media (max-width: 580px) {
    .fco-grid { grid-template-columns: 1fr; gap: .75em; }
    .fco-row  { grid-template-columns: 1fr; gap: .75em; margin-bottom: .75em; }
}

/* ── Hintayhteenveto: luettavampi mobiilissa ──────────────────── */
@media (max-width: 480px) {
    .fco-price-summary {
        padding: .875em 1em;
        margin-top: 1em;
    }
    .fco-price-summary td { font-size: .8em; padding: .2em 0; }
    .fco-total-row td { font-size: .95em; }
    .fco-price-summary td:last-child {
        text-align: right;
        padding-left: .5em;
        word-break: break-word;
    }
}

/* ── Kampanjateaser: pino mobiilissa ──────────────────────────── */
@media (max-width: 480px) {
    .fco-campaign-teaser {
        flex-direction: column;
        align-items: flex-start;
        gap: .5em;
        padding: .75em;
    }
    .fco-campaign-teaser__btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: .5em 1em;
    }
}

/* ── Kampanjakortti: kompaktimpi mobiilissa ───────────────────── */
@media (max-width: 480px) {
    .fco-campaign-card {
        padding: 1em .875em .875em;
    }
    .fco-campaign-table { font-size: .85em; }
    .fco-campaign-table td { padding: .25em .25em .25em 0; }
    .fco-campaign-price-row td { font-size: 1em; }

    /* Kampanjakuva: pino eikä float mobiilissa */
    .fco-camp-img-wrap {
        float: none !important;
        margin: 0 0 .75em 0 !important;
        width: 100% !important;
    }
    .fco-camp-img {
        width: 100% !important;
        height: 7em !important;
        object-fit: cover;
    }
}

/* ── Kiitossivu: pienempi padding mobiilissa ──────────────────── */
@media (max-width: 480px) {
    .fco-thankyou {
        padding: 2em 1.125em;
        margin-top: 0;
        border-radius: 0;
    }
    .fco-thankyou__title { font-size: 1.5em; }
    .fco-thankyou__icon  { font-size: 1.25em; }
}

/* ── Lähetä-nappi: isompi touch-target ───────────────────────── */
@media (max-width: 480px) {
    .fco-submit {
        padding: 1em;
        font-size: 1rem;
        min-height: 3rem;
    }
}

/* ── Zoom-overlay: ei zoomia mobiilissa (käytetään koko näyttöä) */
@media (max-width: 480px) {
    .fco-img-zoom__img {
        max-width: 98vw;
        max-height: 85vh;
    }
}

/* ── Variant-napit: rivittyvät siististi ─────────────────────── */
@media (max-width: 480px) {
    .fco-variant-btn {
        font-size: .8em;
        padding: .5em .75em;
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ── iOS Safari -erityiskorjaukset ───────────────────────────── */
/* Estä select-elementin oma tyyli iOS:ssä */
.fco-form select {
    -webkit-appearance: none;
    appearance: none;
}
/* Estä input zoom iOS:ssä (font-size: 16px riittää, mutta varmuudeksi) */
@supports (-webkit-touch-callout: none) {
    .fco-form input[type="text"],
    .fco-form input[type="email"],
    .fco-form input[type="tel"],
    .fco-form input[type="number"],
    .fco-form select {
        font-size: max(1rem, 16px);
    }
}

/* ── Tablet (481–767px): välivaiheen layout ───────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
    .fco-wrap { max-width: 100%; }
    .fco-hero { padding: 1.75em 1.5em 1.5em; }
    .fco-section { padding: 1.5em 1.5em; }
    .fco-submit-wrap { padding: 1.25em 1.5em 1.5em; }

    .fco-size-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
    }
    .fco-option-cards { gap: .5em; }
    .fco-border-cards { gap: .5em; }
}

/* ── Accessibility: focus-visible selkeä kaikilla laitteilla ─── */
.fco-wrap :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.fco-size-btn:focus-visible,
.fco-option-card:focus-visible,
.fco-border-card:focus-visible,
.fco-delivery-card:focus-visible,
.fco-variant-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Tulostusnäkymä: piilota interaktiiviset elementit ───────── */
@media print {
    .fco-submit, .fco-img-zoom, .fco-tabs { display: none !important; }
}