:root{ --ink:#212224; --muted:#6e726e; --line:#ececec; --bg:#ffffff; --accent:#BF4A15; --secondary:#6B744A; --surface:#ffffff;
    --ease:cubic-bezier(.77,0,.175,1); --ease-out:cubic-bezier(.16,1,.3,1); --menu-w:min(438px,86vw); }
  *{box-sizing:border-box}
  /* Valikon "Tuotteet" ja "Selaa varusteita" vierittävät pehmeästi tuotteisiin; ankkuri jää
     kiinteän yläpalkin (18 + 58 px) alle ilman scroll-marginia. Reduced motion: ks. alempana. */
  html{scroll-behavior:smooth}
  #cats,#catalog{scroll-margin-top:84px}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  .logo-font{font-family:'Oswald',sans-serif;font-weight:600}

  /* ---------- HEADER BAR ---------- */
  header.bar{position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;justify-content:center;pointer-events:none}
  .pill{pointer-events:auto;width:calc(var(--menu-w) - 2px);height:58px;background:#fff;border:1px solid var(--line);
    border-radius:40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    box-shadow:0 6px 24px rgba(0,0,0,.06);transition:border-radius .3s var(--ease), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out)}
  body.open .pill{border-color:transparent;box-shadow:0 6px 24px rgba(0,0,0,0)}
  .pill .ico{display:flex;align-items:center;justify-content:center;width:58px;height:100%;cursor:pointer;background:none;border:0}
  .pill .ico svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.9;fill:none}
  .pill .brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink)}
  .pill .brand .brand-logo{height:28px;width:auto;display:block}
  .pill .brand .brand-text{font-family:'Oswald',sans-serif;line-height:1}

  /* ---------- BLUR BACKDROP ---------- */
  .backdrop{position:fixed;inset:0;z-index:90;background:rgba(130,130,130,.14);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    opacity:0;visibility:hidden;will-change:opacity;transition:opacity .4s var(--ease-out), visibility .4s}
  body.open .backdrop{opacity:1;visibility:visible}

  /* ---------- DROPDOWN PANEL (menu) ---------- */
  .panel{position:fixed;top:18px;left:50%;transform:translateX(-50%);
    transform-origin:top center;z-index:99;
    width:var(--menu-w);background:#fff;border:1px solid var(--line);border-radius:31px;padding-top:52px;
    overflow:hidden;visibility:hidden;clip-path:inset(0 0 100% 0);box-shadow:0 24px 50px rgba(0,0,0,.14);will-change:clip-path;
    transition:clip-path .55s var(--ease-out), visibility .55s}
  body.open .panel{visibility:visible;clip-path:inset(0 0 0 0)}

  .bignav{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 24px 24px}
  .bignav a{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
    font-size:clamp(24px,4vw,38px);line-height:1.16;letter-spacing:-.5px;color:var(--ink);
    transition:color .15s}
  .bignav a:hover{color:var(--accent)}
  body.open .bignav a{opacity:1;transform:none}
  body.open .bignav a:nth-child(1){transition-delay:0s,.05s,.05s}
  body.open .bignav a:nth-child(2){transition-delay:0s,.08s,.08s}
  body.open .bignav a:nth-child(3){transition-delay:0s,.11s,.11s}
  body.open .bignav a:nth-child(4){transition-delay:0s,.14s,.14s}
  body.open .bignav a:nth-child(5){transition-delay:0s,.17s,.17s}

  .prow{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .pcell{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 10px;background:none;border:0;
    cursor:pointer;font-weight:700;letter-spacing:1px;font-size:12.5px;text-transform:uppercase;color:var(--ink);transition:color .15s}
  .pcell:first-child{border-right:1px solid var(--line)}
  .pcell:hover{color:var(--accent)}
  .pcell svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
  .pbar{background:var(--ink);color:#fff;text-align:center;font-size:11px;letter-spacing:1.2px;font-weight:600;
    padding:11px;text-transform:uppercase;cursor:pointer}
  .pinfo{text-align:center;font-size:11.5px;color:var(--muted);padding:12px 18px 14px}

  /* ---------- HERO ---------- */
  .hero{position:relative;height:90vh;min-height:560px;overflow:hidden;background:#cfe4ee}
  /* Hero on <img> eikä taustakuva, jotta se saa preloadin, fetchpriorityn ja srcsetin.
     object-fit:cover toistaa saman rajauksen kuin background-size:cover teki. */
  .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
  /* Vaihtuva hero: uusi kuva häivytetään edellisen päälle (theme.js). */
  .hero-slide{opacity:0;transition:opacity 1.6s ease}
  .hero-slide.is-on{opacity:1}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(95deg,rgba(8,16,20,.58) 0%,rgba(8,16,20,.30) 34%,rgba(8,16,20,0) 60%),linear-gradient(0deg,rgba(8,16,20,.42) 0%,rgba(8,16,20,0) 38%)}
  .hero .copy{position:absolute;left:7vw;bottom:14vh;max-width:660px;z-index:5}
  /* Logo on SVG (assets/img/logo-full-white.svg), joten koko ei enää rajoitu
     lähdetiedoston pikselileveyteen — terävä myös 3x-näytöllä. */
  .hero-logo{display:block;width:min(320px,62vw);height:auto;margin:0 0 12px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
  /* Slogan logon ja myyntilauseen väliin: pieni harvennettu rivi ei kilpaile H1:n
     kanssa, joten hero ei kasva tekstimassaksi (asiakkaan toive 20.8.2026). */
  .hero-slogan{display:block;font-family:'Oswald',sans-serif;font-size:clamp(11px,1.1vw,13px);
    letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.88);margin:0 0 16px}
  .hero h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(24px,3.4vw,40px);
    line-height:1.06;letter-spacing:-.5px;margin:0 0 14px;text-transform:uppercase;color:#fff}
  .hero p.sub{font-size:clamp(15px,1.6vw,19px);line-height:1.5;color:rgba(255,255,255,.92);max-width:540px;margin:0 0 26px;font-weight:400}
  .cta{display:flex;gap:14px;flex-wrap:wrap}
  .cta a{border-radius:34px;padding:15px 28px;font-weight:600;font-size:15px;transition:.2s}
  .cta .primary{background:var(--ink);color:#fff}
  .cta .primary:hover{background:var(--accent)}
  .cta .ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.85);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .cta .ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}

  /* ---------- CATALOG (floating product images) ---------- */
  /* Flex eikä grid: viimeinen vajaa rivi keskittyy, joten ruudukko pysyy symmetrisenä
     millä tahansa tuotemäärällä (10 = 5+5, 11 = 5+5+1 keskellä). Asiakkaan toive 5.8.2026.
     Leveys 5 saraketta: (100% - 4 x gap) / 5. */
  #catalog{position:relative;padding:26px 5vw 96px;display:flex;flex-wrap:wrap;
    justify-content:center;gap:26px}
  #catalog > .tile{flex:0 0 calc((100% - 4 * 26px) / 5);max-width:calc((100% - 4 * 26px) / 5)}
  /* Kategoriasuodattimen piilotusluokka (theme.js). Tämä puuttui, joten suodatin oli
     näkymätön no-op: luokka vaihtui mutta tiilet jäivät ruudulle. */
  #catalog > .tile.hide{display:none}
  /* Two fixed bands per tile: a square image area and a label area of a constant height.
     Sizing the tile itself (aspect-ratio) instead let a long product name push the image
     around, so images and prices sat at different heights across the grid. */
  .tile{position:relative;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;
    gap:12px;cursor:pointer;padding:0;font-family:inherit}
  .tile .emoji{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
    font-size:clamp(64px,9vw,96px);line-height:1;transition:transform .28s;filter:drop-shadow(0 10px 18px rgba(0,0,0,.16))}
  /* Direct child only: WordPress swaps emoji for Twemoji <img> tags, and a descendant
     selector would size the emoji fallback like a product photo. */
  /* height:auto is required — WordPress prints width/height attributes on the <img>, and
     that presentational hint otherwise wins over aspect-ratio (a 768px source rendered
     768px tall inside a 210px tile). */
  .tile > img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:14px;transition:transform .28s}
  .tile .emoji img{width:auto;height:1em;display:inline-block}
  /* Fixed label height (three name lines + the price row) with the price pushed to the
     bottom, so prices line up across a row no matter how many lines a name wraps to. */
  .tile .name{text-align:center;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);padding:0 6px;
    pointer-events:none;min-height:5.4em;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
  /* Price pinned to the bottom of the label band so prices line up across the row even
     when product names wrap to a different number of lines. */
  .tile .name small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:auto;padding-top:2px}
  .tile:hover{z-index:20}
  .tile:hover .emoji{transform:scale(1.08) translateY(-6px)}
  .tile:hover img{transform:scale(1.04)}
  .tile:hover .name{color:var(--accent)}

  /* Kapeammilla näytöillä vähemmän sarakkeita, sama keskitetty vajaa rivi. */
  @media(max-width:1100px){
    #catalog > .tile{flex-basis:calc((100% - 3 * 26px) / 4);max-width:calc((100% - 3 * 26px) / 4)}
  }
  @media(max-width:860px){
    #catalog > .tile{flex-basis:calc((100% - 2 * 26px) / 3);max-width:calc((100% - 2 * 26px) / 3)}
  }
  @media(max-width:640px){
    .hero .copy{left:6vw;right:6vw;bottom:12vh;text-align:center}
    .hero-logo{margin-left:auto;margin-right:auto}
    .hero .cta{justify-content:center}
    #catalog{gap:16px}
    #catalog > .tile{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}
    .tile .emoji{font-size:78px}
  }

  /* ---------- CATEGORIES ---------- */
  .cats{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:36px 6vw 0}
  .cats .cat{background:none;border:0;cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(13px,1.5vw,16px);letter-spacing:.5px;color:#6e726e;padding:4px 2px;transition:color .2s}
  .cats .cat:hover{color:var(--ink)} .cats .cat.on{color:var(--ink)}
  .cats .sep{color:#e2e2e2}

  /* ---------- PARTNERS ---------- */
  .partners{border-top:1px solid var(--line);padding:36px 6vw 44px;text-align:center}
  .partners h2{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 22px}
  .partner-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 40px}
  .partner-row a{display:block;border-radius:8px;overflow:hidden;transition:opacity .15s}
  .partner-row a:hover{opacity:.75}
  .partner-row img{display:block;height:56px;width:auto;max-width:70vw}
  .partner-row a:first-child img{height:88px}
  .partner-row img[alt="Loukko.com"]{height:40px} /* ponytail: leveä pelkkä sanamerkki, muuten jyrää rivin */
  @media(max-width:760px){.partner-row{gap:20px 26px}.partner-row img{height:44px}.partner-row a:first-child img{height:72px}.partner-row img[alt="Loukko.com"]{height:32px}}
  /* ---------- CONTACT + MAP ---------- */
  .contact{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;margin-top:24px}
  .contact .info{padding:60px 6vw}
  .contact .info h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(24px,3vw,34px);margin:0 0 18px}
  .contact .info .row{margin:0 0 14px;color:#333}
  .contact .info .row b{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;font-weight:700}
  /* Kartta on kortti, ei nurkkaan upotettu ruutu: väljyys ympärille ja pyöristys,
     jolloin se luetaan omana elementtinään (asiakkaan palaute 20.8.2026).
     Reunaviiva jää pois — välistys erottaa sarakkeet ilman sitä. */
  .contact .map{min-height:400px;padding:28px 6vw 32px 28px;display:flex}
  .contact .map iframe{width:100%;height:100%;min-height:372px;border:0;display:block;
    border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.10);filter:grayscale(.15)}
  @media(max-width:760px){.contact{grid-template-columns:1fr}.contact .map{padding:0 6vw 40px;min-height:0}}

  /* ---------- WEATHER (in header pill) ---------- */
  .pill-right{display:flex;align-items:center;justify-self:end;gap:2px;padding-right:12px}
  .wx-pill{display:flex;align-items:baseline;gap:6px;white-space:nowrap;padding:0 6px 0 8px;color:var(--ink)}
  .wx-pill:empty{display:none}
  .wx-pill .wx-t{font-family:'Oswald',sans-serif;font-size:15px;line-height:1}
  /* Puhelimessa sää näkyy palkissa aina kun se mahtuu (asiakas 6.10.2026). Palkki on
     min(438px,86vw) ja sarakkeet 1fr auto 1fr, joten oikea sarake = (palkki − logo 158px) / 2.
     Leveimmillään "LEVI −28°" vie 74px + 6px reunaa: 360px:n näytöllä se koskettaa logoa,
     375px:llä väliä jää 6px (mitattu 6.10.2026). Kapeammilla sää on valikossa (.menu-wx).
     Logon leveyden muutos siirtää rajaa. */
  @media(max-width:430px){.pill-right{padding-right:6px}.wx-pill{padding-left:2px}}
  @media(max-width:374px){.wx-pill{display:none}}

  /* ---------- CHAT BOT ---------- */
  .chatfab{position:fixed;left:22px;bottom:22px;z-index:88;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .2s}
  .chatfab:hover{transform:translateY(-2px)}
  .chatfab svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}
  .chat{position:fixed;left:22px;bottom:90px;z-index:111;width:min(360px,92vw);height:min(520px,72vh);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom left;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .chat.open{opacity:1;visibility:visible;transform:none}
  .chat-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
  .chat-head span{display:flex;flex-direction:column;line-height:1.2}
  .chat-head b{font-size:14px}
  .chat-head small{font-size:11px;color:var(--muted)}
  .chat-head button{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
  .chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fafafa}
  .chat-body .msg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45}
  .chat-body .msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
  .chat-body .msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
  .chat-sugs{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;border-top:1px solid var(--line)}
  .chat-sugs button{background:#f4f4f4;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-family:inherit;font-size:12px;cursor:pointer;color:var(--ink);transition:.15s}
  .chat-sugs button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
  .chat-input input{flex:1;border:1px solid var(--line);border-radius:22px;padding:10px 14px;font-family:inherit;font-size:14px;outline:0}
  .chat-input button{border:0;background:var(--accent);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:15px;flex:0 0 auto}
  @media(max-width:480px){.chat{left:12px;right:12px;width:auto;bottom:84px}}
  .wx-pill .wx-loc{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .menu-wx{display:none}
  .menu-wx .wx-loc{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .menu-wx .wx-t{font-family:'Oswald',sans-serif;font-size:20px;line-height:1}
  @media(max-width:374px){ .menu-wx{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:18px 24px 2px} }

  /* === Brand colors (light theme) — Esko palette: orange CTA #D25418, olive #6B744A available === */
  .cta .primary{background:var(--accent);color:#fff}
  .cta .primary:hover{background:#9e3d10}

  /* ---------- WOOCOMMERCE SKIN (cart / checkout / my-account) ---------- */
  .woocommerce .button,.woocommerce button.button,.woocommerce a.button,
  .woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button,
  .woocommerce #respond input#submit,.woocommerce-page .button{background:var(--accent);color:#fff;border-radius:34px;padding:13px 26px;font-weight:600;text-transform:none;border:0}
  .woocommerce .button:hover,.woocommerce .button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce .single_add_to_cart_button:hover{background:#9e3d10;color:#fff}
  .woocommerce table.shop_table{border-radius:14px;border-color:var(--line)}
  .woocommerce-cart .cart-collaterals,.woocommerce form .form-row input{font-family:inherit}

  /* ---------- A11Y (WCAG 2.1 AA) ---------- */
  .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link{position:fixed;top:-60px;left:8px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;transition:top .2s}
  .skip-link:focus{top:8px}
  :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .backdrop{backdrop-filter:none}
  }

  /* ===================== PHASE 5 POLISH ===================== */

  /* Brand logo is a link to the front page (keeps the pill layout). */
  .brand-link{display:flex;align-items:center;gap:8px;color:inherit}

  /* Cart bubble — floats only when the cart has items; hidden otherwise. */
  .cart-bubble{pointer-events:auto;position:fixed;top:16px;right:16px;z-index:101;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .2s,background .2s,opacity .2s}
  .cart-bubble[hidden]{display:none}
  .cart-bubble:hover{background:var(--accent);transform:translateY(-2px)}
  .cart-bubble svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
  .cart-bubble-count{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
  body.open .cart-bubble{opacity:0;pointer-events:none}
  @media(max-width:640px){.cart-bubble{top:auto;bottom:22px;right:18px}}

  /* Generic page container (cart / checkout / my-account / plain pages):
     line content up with the hero/contact 6vw inset, clear the fixed header. */
  .ah-page{max-width:1100px;margin:0 auto;padding:120px 6vw 80px}
  .ah-page-title{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(28px,4vw,46px);letter-spacing:-.5px;margin:0 0 24px}
  .ah-page .woocommerce-message,.ah-page .woocommerce-info,.ah-page .woocommerce-error{border-left:3px solid var(--accent);background:#fafafa;border-radius:10px}
  .ah-page input[type=text],.ah-page input[type=email],.ah-page input[type=tel],.ah-page input[type=password],.ah-page input[type=number],.ah-page textarea,.ah-page select{font-family:inherit;border:1px solid var(--line);border-radius:10px;padding:11px 13px;max-width:420px}
  .ah-page .woocommerce-form-login,.ah-page .woocommerce-form-register{max-width:460px;border-color:var(--line);border-radius:14px}

  /* Dokumenttisivut (tietosuojaseloste, ehdot, pukeutumisopas). Rivipituus rajataan
     luettavaan mittaan — lakiteksti luetaan usein puhelimella kassalle mennessä. */
  .ah-page-content{max-width:68ch;line-height:1.7}
  .ah-page-content h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(17px,2.2vw,21px);
    letter-spacing:.3px;margin:38px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
  .ah-page-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
  .ah-page-content h3{font-size:16px;font-weight:700;margin:24px 0 6px}
  .ah-page-content p{margin:0 0 14px}
  .ah-page-content ul{margin:0 0 16px;padding-left:22px}
  .ah-page-content li{margin:0 0 8px}
  .ah-page-content .ah-doc-meta{margin-top:30px;font-size:13px;color:#666}
  .ah-doc-download a{display:inline-block;margin-top:6px;padding:11px 18px;border:1px solid var(--line);
    border-radius:10px;font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
    text-decoration:none;color:var(--ink);transition:border-color .15s,color .15s}
  .ah-doc-download a:hover{border-color:var(--accent);color:var(--accent)}

  /* Pukeutumisopas on neuvo, ei asiakirja: keskitetty ladonta ja väljemmät osastot,
     jottei se lue kuin sopimusteksti (asiakkaan palaute 11.8.2026). */
  /* Oppaan pääotsikko keskitetään muun ladonnan mukaisesti. H1 on kääreen ulkopuolella
     (page.php), joten se tunnistetaan sisällöstä :has():lla — tuntemattomassa selaimessa
     otsikko jää nykyiselleen vasemmalle, ei rikkoudu (asiakkaan palaute 20.8.2026). */
  .ah-page:has(.ah-doc-guide) .ah-page-title{text-align:center}
  /* Myös tekstipalsta keskelle: .ah-page-content on 68ch levyinen ja muilla sivuilla
     vasemmalla. Oppaassa otsikko oli keskellä sivua mutta teksti keskellä vasenta
     palstaa, joten ne olivat läppärillä 125 px eri linjassa (asiakkaan palaute 22.9.2026). */
  .ah-page:has(.ah-doc-guide) .ah-page-content{margin-left:auto;margin-right:auto}
  .ah-doc-guide{text-align:center;margin:0 auto}
  .ah-doc-guide h2{margin-top:52px;padding-top:26px;font-size:clamp(18px,2.4vw,23px)}
  .ah-doc-guide h3{margin-top:28px;font-weight:700}
  .ah-doc-guide ul{list-style:none;padding-left:0}
  .ah-doc-guide li{margin:0 auto 12px;max-width:56ch}
  .ah-doc-guide p{margin-left:auto;margin-right:auto;max-width:56ch}

  /* Shop archive heading aligned to the same 6vw inset. */
  .shop-head{padding:120px 6vw 0}
  .shop-title{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(28px,4vw,46px);letter-spacing:-.5px;margin:0}
  #catalog.shop-grid{padding:26px 6vw 80px}

  /* Visible immersive product page (replaces the old hidden .pdp overlay). */
  .product-page{display:grid;grid-template-columns:1fr min(46%,520px);min-height:70vh;padding-top:96px}
  .product-media{display:flex;align-items:center;justify-content:center;padding:24px 5vw}
  .product-emoji span{font-size:clamp(120px,18vw,240px);line-height:1;filter:drop-shadow(0 22px 32px rgba(0,0,0,.14))}
  .product-media .woocommerce-product-gallery{width:min(440px,86%);margin:0 auto;position:relative}
  .product-media .woocommerce-product-gallery img{border-radius:18px}
  /* Gallery = WooCommerce's flexslider. It sizes the track and slides itself with inline
     styles, so the theme only adds cosmetics — overriding the slide widths here blows the
     layout up (an 11-image set once rendered a 9680px-wide slide). */
  .product-media .flex-viewport{border-radius:18px}
  .product-media .woocommerce-product-gallery__image img{aspect-ratio:1/1;object-fit:contain;background:#fff}
  /* Before flexslider runs (and for JS-disabled visitors) the images are a plain stack —
     clip it to one image so the page never renders as a tall column of photos. */
  .product-media .woocommerce-product-gallery__wrapper{max-height:min(440px,86vw);overflow:hidden}
  .product-media .flex-viewport .woocommerce-product-gallery__wrapper{max-height:none;overflow:visible}
  .product-media .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:12px 0 0;padding:0}
  .product-media .flex-control-thumbs li{flex:0 0 calc(25% - 6px);margin:0}
  .product-media .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
  .product-media .flex-control-thumbs img:hover{opacity:.85}
  .product-media .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--accent)}
  .product-info{border-left:1px solid var(--line);padding:24px 48px 60px;display:flex;flex-direction:column}
  /* Paluulinkki huomiovärillä: harmaana se hukkui tuotesivun ylälaitaan
     (asiakkaan palaute 11.9.2026). Alleviivaus tulee vasta hoverissa, jottei
     rivi kilpaile tuotenimen kanssa. */
  .product-back{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px;align-self:flex-start}
  .product-back:hover{color:var(--accent);text-decoration:underline}
  .product-title{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;margin:0 0 12px;line-height:1.02}
  .product-meta{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px}
  .product-cat{color:var(--muted)}
  .product-price{color:var(--accent);font-family:'Oswald',sans-serif;font-size:20px}
  .product-desc{color:#444;line-height:1.6;font-size:15px;margin:0 0 22px}
  .product-info .ahb-picker,.product-info .ahb-booking{margin:8px 0 18px}
  .product-info .single_add_to_cart_button{width:100%;margin-top:6px}
  /* Koko-opas: linkki koon valinnan ja ostoskoripainikkeen väliin (asiakkaan malli
     scandinavianoutdoor.fi), taulukot modaalissa — ne eivät ole tuotekuvia. */
  .ah-size-guide-open{display:inline-block;background:none;border:0;padding:0;margin:2px 0 10px;
    font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
    color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .ah-size-guide-open:hover{color:var(--ink)}
  .ah-size-guide[hidden]{display:none}
  .ah-size-guide{position:fixed;inset:0;z-index:120;background:rgba(10,16,20,.55);
    display:flex;align-items:center;justify-content:center;padding:24px}
  .ah-size-guide-box{position:relative;background:#fff;border-radius:18px;padding:28px;
    width:min(760px,96vw);max-height:88vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.3)}
  .ah-size-guide-box h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:22px;margin:0 0 16px}
  .ah-size-guide-box img{display:block;width:100%;height:auto;margin:0 0 14px;border-radius:10px}
  .ah-size-guide-close{position:absolute;top:12px;right:16px;background:none;border:0;
    font-size:30px;line-height:1;color:var(--muted);cursor:pointer}
  .ah-size-guide-close:hover{color:var(--ink)}
  .product-info .ah-go-to-cart{display:block;width:100%;margin-top:10px;text-align:center;background:#fff;color:var(--accent);border:2px solid var(--accent);border-radius:34px;padding:11px 26px;font-weight:600;text-decoration:none;transition:.2s}
  .product-info .ah-go-to-cart:hover{background:var(--accent);color:#fff}
  @media(max-width:820px){
    .product-page{grid-template-columns:1fr;padding-top:84px}
    .product-info{border-left:0;border-top:1px solid var(--line);padding:24px 6vw 50px}
    .product-media{padding:20px 6vw}
  }

  /* ---------- SOME-PIKALINKIT (footer + valikko) ---------- */
  .social{display:flex;flex-wrap:wrap;gap:10px}
  .social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;
    justify-content:center;color:var(--ink);transition:color .15s,background .15s,border-color .15s}
  .social a:hover,.social a:focus-visible{color:#fff;background:var(--accent);border-color:var(--accent)}
  .social svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .social-menu{justify-content:center;padding:14px 18px 0;border-top:1px solid var(--line)}
  /* ---------- KASSA ---------- */
  /* Noudossa laskutuslomakkeesta jää vain nimi ja puhelin (osoitekentät valinnaisia,
     inc/woo-setup.php). Toimituksessa laskutus = toimitusosoite, joten "sama osoite"
     -valinta on turha (asiakkaan palaute 26.9.2026). */
  .wc-block-checkout__form:has(#pickup-options) #billing-fields :is(.wc-block-components-address-form__country,.wc-block-components-address-form__address_1,.wc-block-components-address-form__address_2,.wc-block-components-address-form__address_2-toggle,.wc-block-components-address-form__postcode,.wc-block-components-address-form__city,.wc-block-components-address-form__state){display:none}
  .wc-block-checkout__use-address-for-billing{display:none}
  /* "Olet tekemässä ostosta vieraana" ei ole lakisääteinen (asiakkaan palaute 26.9.2026).
     WooCommerce näyttää sen aina kun vierasosto on sallittu, eikä sitä voi kytkeä pois
     asetuksista. */
  .wc-block-checkout__guest-checkout-notice{display:none}