/* WooCommercen ja design-systemin silta.
   pesola.css pidetään identtisenä demon kanssa, joten kaikki Woo-kohtainen
   ylikirjoitus asuu täällä. Ladataan vain Woo-sivuilla. */

/* WooCommercen oma ruudukko on float-pohjainen (float:left, width:22.05%,
   clear:both joka neljännelle). Se taistelee gridiä vastaan ja rikkoo rivit,
   jolloin kortit ovat eri korkuisia eivätkä napit ole linjassa.
   Spesifisyys nostettu Woon tasolle ja !important layoutin kannalta
   kriittisiin ominaisuuksiin, jotta latausjärjestys ei ratkaise. */
/* Yksi ja sama valitsinlista kaikkialla, myös media queryissä.
   Aiemmin perussäännöllä oli korkeampi spesifisyys kuin media queryillä,
   jolloin ruudukko jäi neljään sarakkeeseen myös kapealla näytöllä ja
   tuotenimet sekä napit vuotivat naapurisarakkeen päälle. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.woo-grid,
.woocommerce ul.products.woo-grid{
  list-style:none!important;margin:0!important;padding:0!important;
  display:grid!important;align-items:stretch!important;
  gap:clamp(14px,1.6vw,24px)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;}

@media(max-width:1080px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.woo-grid,
  .woocommerce ul.products.woo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:820px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.woo-grid,
  .woocommerce ul.products.woo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:340px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.woo-grid,
  .woocommerce ul.products.woo-grid{grid-template-columns:1fr!important;}
}

.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products.woo-grid::before,ul.products.woo-grid::after{content:none!important;display:none!important;}

.woocommerce ul.products li.product,
.woocommerce ul.products li.product.woo-card,
ul.products li.product.woo-card{
  width:auto!important;margin:0!important;float:none!important;clear:none!important;
  padding:0!important;height:100%;
  display:flex;flex-direction:column;}

/* ---------- TUOTEKORTIN NAPPI ----------
   TÄRKEÄ: alempana on yleinen nappisääntö kassalle ja korille
   (.woocommerce a.button = tarkkuus 0-2-1). Se on tarkempi kuin
   .woo-card .add (0-2-0), joten ILMAN tätä sääntöä tuotekortin nappi saa
   kassan ison pillerityylin: padding 15/30 px, umpinainen tausta, 48 px korkea.
   Kapeassa ruudussa se ei mahdu hinnan viereen ja rivi hajoaa.
   Tämä valitsin on tarkoituksella tarkempi (0-5-3) kuin kumpikaan. */
.woocommerce ul.products li.product a.button.add,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product button.button.add{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;font-weight:500;line-height:1.3;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  transition:background .25s,color .25s,border-color .25s,transform .12s ease;}
.woocommerce ul.products li.product a.button.add:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{
  background:var(--ink);color:var(--bg);border-color:var(--ink);}
.woocommerce ul.products li.product a.button.add:active{transform:scale(.96);}
.woocommerce ul.products li.product a.button.add.added,
.woocommerce ul.products li.product a.add_to_cart_button.added{
  background:var(--green);border-color:var(--green);color:#fff;}
/* Woon oma "Näytä ostoskori" -lisälinkki kortin alla pois */
.woocommerce ul.products li.product a.added_to_cart{
  display:inline-block;font-size:12px;color:var(--muted);text-decoration:underline;margin-top:6px;}

/* ---------- TUOTEKORTIN HINTA ----------
   Woon oma sääntö `.woocommerce ul.products li.product .price` (0-4-2) antaa
   hinnalle oliivinvihreän #77a464 ja voittaa `.woo-card .price` -säännön.
   Sama tarkkuusansa kuin nappiin. Lisätään .woo-card valitsimeen, jolloin
   tämä on aina yhtä luokkaa tarkempi. */
.woocommerce ul.products li.product.woo-card .price{
  color:var(--ink);font-family:'Bricolage',sans-serif;font-weight:700;font-size:19px;}
.woocommerce ul.products li.product.woo-card .price .amount,
.woocommerce ul.products li.product.woo-card .price bdi{
  color:inherit;font:inherit;}
.woocommerce ul.products li.product.woo-card .price del{
  color:var(--muted);opacity:.55;font-size:.8em;margin-right:6px;font-weight:400;}
.woocommerce ul.products li.product.woo-card .price ins{
  color:var(--accent-deep);text-decoration:none;background:none;}

/* Woon nth-child-clearit rikkovat rivit gridissä */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{clear:none!important;margin:0!important;}

/* Woon oletustypografia ja -välit pois kortin sisältä */
.woo-card .woocommerce-loop-product__title{all:unset;}
.woo-card h3 a{text-decoration:none;color:inherit;}
.woo-card .price{color:var(--ink);font-size:19px;}
.woo-card .price del{opacity:.5;font-size:.8em;margin-right:6px;}
.woo-card .price ins{text-decoration:none;}

/* Lisää koriin: Woon nappi meidän tyylillä */
.woo-card a.add,.woo-card a.added_to_cart{max-width:100%;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;font-size:13px;font-weight:500;
  padding:9px 15px;border-radius:999px;cursor:pointer;text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  transition:background .25s,color .25s,border-color .25s,transform .12s ease;}
.woo-card a.add:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.woo-card a.add:active{transform:scale(.96);}
.woo-card a.add.loading{opacity:.6;pointer-events:none;}
.woo-card a.add.added{background:var(--green);border-color:var(--green);color:#fff;}
.woo-card a.added_to_cart{margin-left:8px;font-size:12px;text-decoration:underline;border:0;padding:0;}

/* ---------- KORI, KASSA JA OMA TILI ----------
   functions.php poistaa Woon woocommerce-layout.css:n ja woocommerce-smallscreen.css:n,
   koska niiden float-ruudukko rikkoo tuotekortit. Ne kaksi tiedostoa hoitivat
   kuitenkin myös korin, kassan ja oman tilin ASETTELUN. Ilman korvausta kaikki
   valuisi yhteen sarakkeeseen ja koritaulukko olisi puhelimessa luettelokelvoton.
   Alla ne rakenteet uudelleen gridillä, ei floateilla.                          */
.woocommerce-cart .wrap,.woocommerce-checkout .wrap{max-width:1320px;margin:0 auto;}
.woocommerce table.shop_table{border-collapse:collapse;border:0;}
.woocommerce table.shop_table th{font-family:'Bricolage',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.02em;text-transform:none;border-bottom:1px solid var(--line);}
.woocommerce table.shop_table td{border-top:1px solid var(--line);}
.woocommerce #respond input#submit,.woocommerce a.button,
.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--accent);color:#2a1d12;border-radius:999px;padding:15px 30px;
  text-decoration:none;border:0;cursor:pointer;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:15px;
  transition:background .3s,color .3s,box-shadow .3s;}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce button.button.alt:hover{background:var(--accent-deep);color:#fff;}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{
  border-top-color:var(--accent);background:var(--surface);}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--accent);}

/* --- Kassa: laskutus- ja toimitussarakkeet (korvaa .col2-set-floatit) --- */
.woocommerce .col2-set,.woocommerce-page .col2-set{
  display:grid;grid-template-columns:1fr 1fr;gap:0 42px;}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,.woocommerce-page .col2-set .col-2{
  float:none;width:auto;min-width:0;}

/* --- Lomakekentät: etunimi/sukunimi rinnakkain, muut koko leveydeltä --- */
.woocommerce form .woocommerce-billing-fields__field-wrapper,
.woocommerce form .woocommerce-shipping-fields__field-wrapper,
.woocommerce form .woocommerce-address-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.woocommerce form .form-row-first,.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,.woocommerce-page form .form-row-last{
  float:none;width:auto;min-width:0;overflow:visible;}
.woocommerce form .form-row-wide,.woocommerce form .form-row.notes,
.woocommerce-page form .form-row-wide{grid-column:1/-1;}
.woocommerce form .form-row,.woocommerce-page form .form-row{
  margin:0 0 18px;padding:0;}
.woocommerce form .form-row label,.woocommerce-page form .form-row label{
  display:block;font-family:'Bricolage',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.01em;color:var(--ink);margin:0 0 7px;}
.woocommerce form .form-row label.checkbox,.woocommerce-page form .form-row label.checkbox{
  display:inline;font-family:'DM Sans',system-ui,sans-serif;font-weight:400;font-size:15px;}
.woocommerce form .form-row .input-text,.woocommerce form .form-row select,
.woocommerce form .form-row textarea,.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select{
  box-sizing:border-box;width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;color:var(--ink);transition:border-color .25s,box-shadow .25s;}
.woocommerce form .form-row .input-text:focus,.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,122,44,.18);}
.woocommerce form .form-row.woocommerce-invalid .input-text{border-color:#b3261e;}
.woocommerce #payment .form-row select,.woocommerce-page #payment .form-row select{width:auto;}
.woocommerce .select2-container .select2-selection--single{
  height:48px;border:1px solid var(--line);border-radius:10px;}
.woocommerce .select2-container .select2-selection--single
  .select2-selection__rendered{line-height:46px;padding-left:15px;}

/* --- Kori: taulukko ja summat --- */
.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{
  display:grid;grid-template-columns:1fr minmax(0,420px);gap:42px;
  align-items:start;margin-top:44px;}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{
  float:none;width:auto;grid-column:2;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:26px 28px;}
.woocommerce .cart-collaterals .cross-sells,.woocommerce .cart-collaterals .related,
.woocommerce-page .cart-collaterals .cross-sells{float:none;width:auto;grid-column:1;}
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator{float:none;width:auto;clear:none;}
.woocommerce .cart_totals h2{font-family:'Bricolage',sans-serif;font-size:20px;margin:0 0 16px;}
.woocommerce .cart_totals table{width:100%;border-collapse:collapse;}
.woocommerce .cart_totals th{text-align:left;font-size:13px;}
.woocommerce .cart_totals td{text-align:right;}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{
  font-size:17px;border-top:1px solid var(--line);padding-top:14px;}
.woocommerce .wc-proceed-to-checkout{padding-top:18px;}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;text-align:center;}

/* --- Kuponki ja korin toiminnot ---
   Woo tulostaa kuponkilohkon ja "Päivitä ostoskori" -napin samaan soluun.
   Yksi flex-rivi: kuponki vasemmalle kiinteän levyisenä, päivitys oikealle. */
/* HUOM: td.actions on colspan-solu. display:flex poistaisi sen taulukkosolujen
   joukosta, jolloin colspan lakkaa toimimasta ja sarakeleveydet menevät sekaisin.
   Solu pidetään siis taulukkosoluna; kuponki kelluu vasemmalle, päivitys oikealle. */
.woocommerce table.cart td.actions{padding:22px 0;border-top:1px solid var(--line);
  text-align:right;}
.woocommerce table.cart td.actions::after{content:"";display:table;clear:both;}
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon{
  float:left;display:inline-flex;gap:10px;flex-wrap:nowrap;align-items:center;}
.woocommerce table.cart td.actions .coupon label{flex:0 0 auto;margin:0;}
.woocommerce table.cart td.actions .coupon .input-text{
  width:auto;flex:0 1 210px;min-width:0;padding:13px 15px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:'DM Sans',system-ui,sans-serif;font-size:15px;}
.woocommerce table.cart td.actions .coupon .input-text:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,122,44,.18);}
.woocommerce table.cart td.actions .button{white-space:nowrap;}
.woocommerce table.cart td.actions .button:disabled{opacity:.45;cursor:default;}

/* --- Korin tuotekuva ja määräkenttä ---
   Woon yleistyyli kutistaa korikuvan 32 pikseliin. Leipä myydään ulkonäöllä,
   joten kuva isommaksi; määräkenttä samaan muotokieleen kuin muut kentät. */
.woocommerce table.cart img,.woocommerce-page table.cart img{
  width:72px;height:72px;object-fit:cover;border-radius:10px;box-shadow:none;
  /* max-width:none on pakollinen: tuotenimi vie width:100%, jolloin kuvasarake
     puristuu ja yleinen img{max-width:100%} kutistaisi kuvan viivaksi.
     Ilman tätä kuva katoaa käytännössä näkyvistä. */
  max-width:none;}
.woocommerce table.cart td.product-thumbnail,.woocommerce table.cart th.product-thumbnail{width:96px;}
.woocommerce table.cart td.product-remove,.woocommerce table.cart th.product-remove{width:46px;}
.woocommerce table.cart td.product-name,.woocommerce table.cart th.product-name{width:100%;}
.woocommerce table.cart td.product-price,.woocommerce table.cart td.product-subtotal,
.woocommerce table.cart th.product-price,.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-quantity,.woocommerce table.cart th.product-quantity{
  white-space:nowrap;padding-left:26px;}
.woocommerce .quantity .qty{
  width:76px;padding:11px 8px;text-align:center;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;color:var(--ink);}
.woocommerce .quantity .qty:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,122,44,.18);}
.woocommerce table.cart td.product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:999px;font-size:18px;line-height:1;text-decoration:none;
  color:var(--muted);background:transparent;transition:background .25s,color .25s;}
.woocommerce table.cart td.product-remove a.remove:hover{background:#b3261e;color:#fff;}
.woocommerce table.cart td.product-name a{text-decoration:none;font-weight:500;}
.woocommerce table.cart td.product-name a:hover{color:var(--accent-deep);}

/* --- Maksulohko ---
   Woon yleistyyli antaa #payment-laatikolle harmaan taustan, joka riitelee
   lämpimän paletin kanssa. */
.woocommerce #payment,.woocommerce-checkout #payment{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 18px;}
.woocommerce #payment ul.payment_methods li{list-style:none;margin:0 0 10px;}
.woocommerce #payment div.form-row{padding:0;margin:0;}
.woocommerce #payment .place-order{padding:0;margin:0;}
.woocommerce #payment #place_order{width:100%;}
.woocommerce #payment div.payment_box{
  background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:14px;}
.woocommerce #payment div.payment_box::before{border-bottom-color:#fff;}
.woocommerce-terms-and-conditions-wrapper{font-size:14px;color:var(--muted);}

/* --- Oma tili: navigaatio ja sisältö (korvaa 30/68 %:n floatit) --- */
.woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:auto;}
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto;}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:46px;align-items:start;}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 2px;font-family:'Bricolage',sans-serif;font-weight:700;
  font-size:14px;color:var(--muted);text-decoration:none;transition:color .25s;}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--accent-deep);}
.woocommerce-account .woocommerce-MyAccount-content mark{
  background:transparent;color:inherit;font-weight:700;}

/* --- Arkiston lajittelurivi ja sivutus --- */
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{float:none;margin:0;}
.woocommerce .woocommerce-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  list-style:none;margin:38px 0 0;padding:0;border:0;}
.woocommerce .woocommerce-pagination ul.page-numbers li{display:inline-block;border:0;}
.woocommerce .woocommerce-pagination ul.page-numbers li a,
.woocommerce .woocommerce-pagination ul.page-numbers li span{
  display:block;min-width:42px;padding:10px 12px;text-align:center;border-radius:999px;
  border:1px solid var(--line);font-size:14px;text-decoration:none;transition:background .25s,color .25s;}
.woocommerce .woocommerce-pagination ul.page-numbers li span.current{
  background:var(--accent);color:#2a1d12;border-color:var(--accent);}

/* --- Tilausvahvistus --- */
.woocommerce ul.order_details{
  display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:26px 0;padding:26px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.woocommerce ul.order_details li{float:none;margin:0;padding:0;border:0;font-size:13px;
  color:var(--muted);text-transform:none;}
.woocommerce ul.order_details li strong{display:block;font-family:'Bricolage',sans-serif;
  font-size:17px;color:var(--ink);margin-top:5px;}

/* --- Virheilmoitukset --- */
.woocommerce .woocommerce-error{border-top-color:#b3261e;background:var(--surface);
  list-style:none;margin:0 0 26px;}
.woocommerce .woocommerce-error::before{color:#b3261e;}

/* --- Kapeampi näyttö: sarakkeet pinoon --- */

/* Summalaatikko on myös .shop_table, joten se perii yllä olevat taulukkoviivat.
   Nollataan ne: laatikossa on jo oma kehys, sisäiset viivat vain sotkivat. */
.woocommerce .cart_totals table.shop_table{border:0;margin:0;border-radius:0;}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{border:0;padding:9px 0;background:transparent;}
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td{
  border-top:1px solid var(--line);padding-top:14px;}
.woocommerce .cart_totals .woocommerce-Price-amount{font-family:'Bricolage',sans-serif;font-weight:700;}

/* Kassan tilausyhteenveto: sama siisti kehys kuin korin summalaatikossa */
.woocommerce .woocommerce-checkout-review-order-table{border:1px solid var(--line);
  border-radius:16px;border-collapse:collapse;overflow:hidden;width:100%;margin:0 0 24px;}
.woocommerce .woocommerce-checkout-review-order-table th,
.woocommerce .woocommerce-checkout-review-order-table td{padding:13px 20px;}
.woocommerce .woocommerce-checkout-review-order-table td:last-child,
.woocommerce .woocommerce-checkout-review-order-table th:last-child{text-align:right;}
.woocommerce .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce .woocommerce-checkout-review-order-table tfoot .order-total td{
  font-size:17px;background:var(--surface);}

/* --- Kapeampi näyttö ---
   Nämä ovat tiedoston lopussa tarkoituksella: samalla tarkkuudella myöhempi
   sääntö voittaa, joten mediakyselyt eivät saa jäädä perussääntöjen yläpuolelle. */
@media(max-width:980px){
  .woocommerce .col2-set,.woocommerce-page .col2-set{grid-template-columns:1fr;gap:0;}
  .woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{
    grid-template-columns:1fr;gap:28px;}
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals{grid-column:1;}
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns:1fr;gap:28px;}
}
@media(max-width:640px){
  .woocommerce form .woocommerce-billing-fields__field-wrapper,
  .woocommerce form .woocommerce-shipping-fields__field-wrapper,
  .woocommerce form .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr;}

  /* Koritaulukko pinotuiksi korteiksi. Vain table.cart, EI .shop_table_responsive:
     myös summalaatikon taulukko kantaa tuota luokkaa, ja sen pinoaminen teki
     laatikosta lukukelvottoman. Woon cart.php merkitsee solut data-titlellä. */
  .woocommerce table.cart,.woocommerce-page table.cart{border:0;display:block;}
  .woocommerce table.cart thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .woocommerce table.cart tbody{display:block;}
  .woocommerce table.cart tr{
    display:block;border:1px solid var(--line);border-radius:14px;
    padding:12px 16px;margin:0 0 14px;background:#fff;}
  .woocommerce table.cart td{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    width:auto;border:0;border-top:1px solid var(--line);padding:11px 0 0;
    margin:0 0 11px;text-align:right;}
  /* Työpöydän .product-price/.product-quantity/.product-subtotal -säännöt ovat
     tarkempia kuin yllä oleva td-sääntö, joten niiden padding-left on nollattava
     erikseen. Muuten otsikot jäävät sisennetyiksi vain osassa soluja. */
  .woocommerce table.cart td.product-price,.woocommerce table.cart td.product-quantity,
  .woocommerce table.cart td.product-subtotal,.woocommerce table.cart td.product-name{
    width:auto;padding-left:0;padding-right:0;}
  .woocommerce table.cart td[data-title]::before{
    content:attr(data-title);font-family:'Bricolage',sans-serif;font-weight:700;
    font-size:12px;color:var(--muted);text-align:left;flex:0 0 auto;}

  /* Poisto ja kuva ylimmäksi omalle rivilleen, ilman erotinviivaa */
  .woocommerce table.cart td.product-remove{
    justify-content:flex-end;border-top:0;padding:0;margin:0;}
  .woocommerce table.cart td.product-thumbnail{
    display:block;border-top:0;padding:0;margin:0 0 6px;}
  .woocommerce table.cart img,.woocommerce-page table.cart img{
    width:88px;height:88px;max-width:none;}
  .woocommerce table.cart td.product-name{font-size:16px;}
  .woocommerce table.cart td.product-name a{text-align:right;}

  /* Toimintorivi: ei korttikehystä, napit koko leveydeltä */
  .woocommerce table.cart tr:last-child{border:0;background:transparent;padding:0;}
  .woocommerce table.cart td.actions{
    display:block;text-align:left;border:0;padding:4px 0 0;margin:0;}
  .woocommerce table.cart td.actions .coupon{
    float:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px;}
  .woocommerce table.cart td.actions .coupon label{flex:1 1 100%;}
  .woocommerce table.cart td.actions .coupon .input-text{flex:1 1 100%;}
  .woocommerce table.cart td.actions .button{width:100%;}

  /* Summalaatikko pysyy tavallisena kaksisarakkeisena taulukkona */
  .woocommerce .cart_totals table.shop_table{display:table;width:100%;}
  .woocommerce .cart_totals table.shop_table tbody{display:table-row-group;}
  .woocommerce .cart_totals table.shop_table tr{display:table-row;}
  .woocommerce .cart_totals table.shop_table th,
  .woocommerce .cart_totals table.shop_table td{display:table-cell;}

  .woocommerce ul.order_details{gap:16px;}
  .woocommerce .cart-collaterals .cart_totals{padding:22px 20px;}
}

/* ---------- TUOTESIVU ----------
   Markup on WooCommercen omaa (koukut säilyvät lisäosille), ulkoasu tehdään tässä.

   KAKSI OPPIA JOTKA ON KOODATTU TÄHÄN VALITSIMEEN:

   1) Tässä oli pareja muotoa
        .single-product .woocommerce-tabs,
        .single-product-main .woocommerce-tabs ul.tabs li.active a{...}
      Pilkun jälkeen alkaa AINA uusi valitsin, joten ensimmäinen osui koko
      välilehtilaatikkoon: tumma tausta + 999px pyöristys = jättimäinen pallo
      kuvauksen päällä.

   2) Woon omat säännöt ovat muotoa `.woocommerce div.product ...`. Pelkkä
      `.single-product ...` häviää niille tarkkuudessa, jolloin esimerkiksi
      hinta jäi Woon oliivinvihreäksi. Siksi kaikki alla käyttää etuliitettä
      `.single-product.woocommerce div.product`, joka on aina yhtä luokkaa tarkempi kuin Woon vastaava. */

.single-product.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,64px);align-items:start;margin:0 0 clamp(40px,6vh,72px);}
@media(max-width:880px){ .single-product.woocommerce div.product{grid-template-columns:1fr;} }

/* Galleria */
.single-product.woocommerce div.product .woocommerce-product-gallery{width:100%!important;float:none!important;
  margin:0!important;border-radius:14px;overflow:hidden;background:var(--surface);}
.single-product.woocommerce div.product .woocommerce-product-gallery img{border-radius:14px;display:block;
  width:100%;height:auto;box-shadow:none;}
.single-product.woocommerce div.product .woocommerce-product-gallery__trigger{top:14px;right:14px;}
.single-product.woocommerce div.product .flex-control-thumbs{display:flex;gap:9px;margin:12px 0 0;padding:0;list-style:none;}
.single-product.woocommerce div.product .flex-control-thumbs li{width:auto;margin:0;}
.single-product.woocommerce div.product .flex-control-thumbs img{width:66px;height:50px;object-fit:cover;border-radius:8px;
  opacity:.55;transition:opacity .2s;}
.single-product.woocommerce div.product .flex-control-thumbs img.flex-active,
.single-product.woocommerce div.product .flex-control-thumbs img:hover{opacity:1;}

/* Tuotetiedot */
.single-product.woocommerce div.product .summary{margin:0!important;width:auto!important;float:none!important;}
.single-product.woocommerce div.product .summary .product_title{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(30px,3.6vw,52px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;
  padding:0;color:var(--ink);}
.single-product.woocommerce div.product p.price,
.single-product.woocommerce div.product span.price{font-family:'Bricolage',sans-serif;font-weight:700;
  font-size:clamp(24px,2.4vw,32px);color:var(--ink);margin:0 0 18px;display:block;}
.single-product.woocommerce div.product p.price del,
.single-product.woocommerce div.product span.price del{opacity:.5;font-size:.75em;margin-right:8px;}
.single-product.woocommerce div.product p.price ins,
.single-product.woocommerce div.product span.price ins{text-decoration:none;color:var(--accent-deep);background:none;}
.single-product.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--muted);line-height:1.75;font-size:15.5px;margin-bottom:24px;letter-spacing:.02em;}
.single-product.woocommerce div.product .woocommerce-product-details__short-description p{margin:0 0 8px;}

.single-product.woocommerce div.product form.cart{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:0 0 22px;}
.single-product.woocommerce div.product .quantity input.qty{border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;font-size:15px;padding:13px 10px;border-radius:999px;
  width:78px;text-align:center;}
.single-product.woocommerce div.product .single_add_to_cart_button{white-space:nowrap;}

.single-product.woocommerce div.product .product_meta{border-top:1px solid var(--line);padding-top:18px;font-size:13.5px;
  color:var(--muted);line-height:1.9;}
.single-product.woocommerce div.product .product_meta a{color:var(--accent-deep);text-decoration:none;}
.single-product.woocommerce div.product .product_meta a:hover{text-decoration:underline;}
.single-product.woocommerce div.product .product_meta .sku_wrapper{display:block;}

/* Välilehdet ja kuvaus. Koko gridin leveydelle, eivät sarakkeeseen.
   Woon oletusvälilehdet ovat laatikoita reunoineen ja kulmakoristeineen;
   ne nollataan ja tilalle tulee pillerit. */
.single-product.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;border-top:1px solid var(--line);
  padding-top:clamp(26px,4vh,42px);background:none;border-radius:0;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs{list-style:none;margin:0 0 22px;padding:0;display:flex;
  gap:8px;flex-wrap:wrap;background:none;border:0;overflow:visible;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after{content:none;display:none;border:0;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0;
  border-radius:999px;box-shadow:none;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;display:none;border:0;box-shadow:none;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:inline-block;padding:9px 17px;border-radius:999px;
  border:1px solid var(--line);font-family:'DM Sans',system-ui,sans-serif;font-size:13.5px;
  font-weight:500;color:var(--ink);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:var(--ink);color:var(--bg);
  border-color:var(--ink);}
.single-product.woocommerce div.product .woocommerce-tabs .panel{background:none;border:0;border-radius:0;margin:0;padding:0;}
.single-product.woocommerce div.product .woocommerce-tabs .panel h2{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(20px,2vw,26px);margin:0 0 12px;color:var(--ink);}
.single-product.woocommerce div.product .woocommerce-tabs .panel p{color:var(--muted);line-height:1.8;font-size:15.5px;
  max-width:66ch;}

/* Liittyvät tuotteet */
.single-product.woocommerce div.product .related,
.single-product.woocommerce div.product .upsells{grid-column:1/-1;border-top:1px solid var(--line);
  padding-top:clamp(30px,4vh,48px);margin-top:clamp(30px,4vh,48px);}
.single-product.woocommerce div.product .related > h2,
.single-product.woocommerce div.product .upsells > h2{font-family:'Bricolage',sans-serif;
  font-weight:800;font-size:clamp(24px,2.6vw,36px);margin:0 0 24px;letter-spacing:-.02em;}

/* Arvostelut */
.single-product.woocommerce div.product #reviews{grid-column:1/-1;}
.single-product.woocommerce div.product #reviews .commentlist{list-style:none;padding:0;margin:0;}
.single-product.woocommerce div.product #reviews .comment_container{display:flex;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);}
.single-product.woocommerce div.product #reviews .star-rating span{color:var(--accent);}