/*
 * Kori, kassa ja tilausvahvistus storefrontin näköisiksi.
 *
 * Muuttujat ja komponenttityylit ovat web/app/globals.css:n vastineita. Paletti on
 * kopio, ei jaettu tiedosto: sovellukset ovat eri domaineissa eikä WP saa jäädä
 * riippumaan Next-buildin tiedostonimistä. Jos paletti muuttuu, muuta molemmat.
 */
:root{
  --bg:#ECEAE6; --bg2:#E4E0DA; --panel:#F2F0EC; --card:#FFFFFF;
  --ink:#1A1918; --ink2:#44413D; --muted:#77726C; --line:#D6D1CA; --line2:#E6E1DA;
  --accent:#1263D6; --accent-dk:#0E4FAC; --accent-lt:#6FA8FF; --signal:#B42318; --steel:#A8A19A;
  --disp:'Saira',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
}

body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ===== yläpalkki + header + footer: sama markup ja mitat kuin storefrontissa =====
 * Luokat on prefiksoitu ja skoopattu, koska WooCommercen ja teeman tyyleissä on samoja
 * yleisnimiä (.cart, .logo, .nav) — ilman prefiksiä ne törmäisivät molempiin suuntiin.
 */
.kauppa-wrap{max-width:1320px;margin:0 auto;padding:0 36px}

.kauppa-strip{background:var(--ink);color:#C9CDD2;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.kauppa-strip .kauppa-wrap{display:flex;justify-content:space-between;align-items:center;height:36px;text-transform:uppercase}
.kauppa-strip b{color:#fff;font-weight:500}
.kauppa-strip .acc{color:#7C97FF}
.kauppa-strip .r span{margin-left:26px}
.kauppa-strip .r span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:9px}

.kauppa-header{position:sticky;top:0;z-index:100;background:rgba(231,233,236,.9);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.kauppa-header a{color:inherit;text-decoration:none}
.kauppa-header .nav{display:flex;align-items:center;height:74px;gap:34px}
.kauppa-header .logo{display:flex;align-items:center}
.kauppa-header .logo img{height:52px;width:auto;display:block}
.kauppa-header .nav-mid{display:flex;gap:4px;margin-left:14px}
.kauppa-header .nav-mid a{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);padding:9px 15px;border:1px solid transparent;transition:.15s}
.kauppa-header .nav-mid a:hover{color:var(--ink);border-color:var(--line);background:var(--panel)}
.kauppa-header .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.kauppa-header .lang{display:flex;align-items:center;height:42px}
.kauppa-header .lang svg{display:block;height:19px;width:auto;border:1px solid var(--line);transition:.15s}
.kauppa-header .lang:hover svg{border-color:var(--ink)}
.kauppa-header .kori{display:flex;align-items:center;gap:10px;height:42px;padding:0 19px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--ink);transition:.15s}
.kauppa-header .kori:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Tausta on logon oma laattasävy eikä var(--ink): logo.png:ssä laatta on poltettu kiinni,
   joten --ink (L10%) jättäisi logon ympärille näkyvän vaaleamman suorakaiteen (L18%).
   Sama arvo kuin storefrontin footer{} globals.css:ssä. */
.kauppa-footer{background:#2C2D30;color:#B9BEC4;padding:56px 0 30px;margin-top:70px}
.kauppa-footer a{color:#9097A0;text-decoration:none}
.kauppa-footer .fg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px}
.kauppa-footer .logo img{height:58px;width:auto;display:block}
.kauppa-footer .fb p{color:#9097A0;max-width:34ch;margin-top:18px;line-height:1.6;font-family:var(--mono);font-size:12.5px}
.kauppa-footer .fc h4{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.kauppa-footer .fc a,.kauppa-footer .fc span{display:block;margin-bottom:10px;font-family:var(--mono);font-size:12.5px;transition:.15s}
.kauppa-footer .fc a:hover{color:#fff}
.kauppa-footer .fbot{margin-top:46px;padding-top:22px;border-top:1px solid #262C33;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:#6C747D;letter-spacing:.04em;text-transform:uppercase}

/* ===== sivun runko ===== */
.wp-site-blocks{padding-top:0}
main.wp-block-group{padding-top:34px}
h1.wp-block-post-title{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4vw,52px);line-height:.94;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:26px}

/* Lohkoteeman ja Woon omat pyöristykset pois: storefront on kauttaaltaan suorakulmainen. */
.wp-site-blocks button,.wp-site-blocks input,.wp-site-blocks select,.wp-site-blocks textarea,
.wc-block-components-button,.wc-block-components-panel,.wc-block-components-address-card,
.wc-block-components-radio-control__option,.wc-block-components-notice-banner{border-radius:0}
.wp-site-blocks input,.wp-site-blocks select,.wp-site-blocks textarea{accent-color:var(--accent)}

/* Otsikot: Saira, versaalit. Woon askelotsikot ja koontiotsikot mukaan lukien. */
h1,h2,h3,h4,.wc-block-components-title,.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,.wc-block-components-express-payment__title{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.05}
.wc-block-cart__totals-title,.wc-block-cart-items__header{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

a{color:var(--accent)}
a:hover{color:var(--accent-dk)}

/* ===== korin tuoterivit ===== */
.wc-block-cart-items__header{border-bottom:1px solid var(--line)}
.wc-block-cart-items__row{border-bottom:1px dashed var(--line)}
.wc-block-cart-item__image img{border:1px solid var(--line2);background:var(--panel);mix-blend-mode:multiply}
.wc-block-components-product-name{font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.05}
.wc-block-components-product-name:hover{color:var(--accent)}
.wc-block-components-order-summary-item .wc-block-components-product-name{font-size:14px;line-height:1.15}
.wc-block-components-product-metadata,.wc-block-components-order-summary-item__description{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.wc-block-components-product-price__value{font-family:var(--disp);font-weight:700}
.wc-block-cart-item__total .wc-block-components-product-price__value{font-size:20px;font-weight:800}
.wc-block-components-quantity-selector{border:1px solid var(--line);background:var(--card);border-radius:0}
.wc-block-components-quantity-selector__input{font-family:var(--mono);color:var(--ink)}
.wc-block-components-quantity-selector__button{color:var(--ink2)}
.wc-block-components-quantity-selector__button:hover{color:var(--accent)}
.wc-block-cart-item__remove-link{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.wc-block-cart-item__remove-link:hover{color:var(--signal)}

/* ===== sivupalkki: yhteenveto ja tilauskooste ===== */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content{background:transparent}
/* Woon oma sääntö nollaa sivupalkin pehmusteen, joten tarkkuus on nostettava vanhemmalla
   luokalla — muuten summat liimautuvat kortin reunaan mobiilissa. */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar{background:var(--card);border:1px solid var(--line);padding:20px 22px;box-sizing:border-box}
.wc-block-components-totals-item{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.wc-block-components-totals-item__label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px}
.wc-block-components-totals-item__value{font-family:var(--disp);font-weight:600;color:var(--ink)}
.wc-block-components-totals-wrapper{border-top:1px dashed var(--line)}
.wc-block-components-totals-wrapper:first-child{border-top:0}
.wc-block-components-totals-footer-item{border-top:1px solid var(--ink)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.01em}
.wc-block-components-totals-footer-item-tax{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.wc-block-components-panel__button{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--accent)}

/* ===== painikkeet ===== */
.wc-block-components-button:not(.wc-block-components-button--text),
.wp-element-button,.wp-block-button__link{
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 30px;transition:.15s}
.wc-block-components-button:not(.wc-block-components-button--text):hover,
.wp-element-button:hover,.wp-block-button__link:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{width:100%;justify-content:center}
/* Tekstipainikkeet (esim. "Muokkaa") pysyvät linkkeinä, eivät saa laatikkotyyliä. */
.wc-block-components-button.wc-block-components-button--text,
.wc-block-components-address-card__edit{background:none;border:0;padding:0;color:var(--accent);font-family:var(--body);text-transform:none;letter-spacing:0;font-size:14px}

/* ===== lomakekentät ===== */
.wc-block-components-text-input input,.wc-blocks-components-select__select,
.wc-block-components-textarea,textarea.wc-block-components-textarea{
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--body);border-radius:0}
.wc-block-components-text-input.is-active input,.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,textarea.wc-block-components-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}
.wc-block-components-text-input label,.wc-blocks-components-select__label{color:var(--muted)}
.wc-block-components-checkbox__label,.wc-block-components-radio-control__label{color:var(--ink2)}

/* Toimitustapa- ja maksutapavalinnat: laatikko kuten tuotekortti, valittu kuparilla. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{border:1px solid var(--line);background:var(--card);margin-bottom:8px}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}

/* Kassan askeleet */
.wc-block-components-checkout-step{border-bottom:1px solid var(--line2);padding-bottom:22px}
.wc-block-components-checkout-step__title{font-size:20px}
.wc-block-components-checkout-step__description{color:var(--muted);font-size:14px}

/* Ilmoitukset */
.wc-block-components-notice-banner{border-left-width:3px;font-family:var(--body)}
.wc-block-components-notice-banner.is-error{border-color:var(--signal)}

/* ===== tilausvahvistus (order-received) ===== */
.wc-block-order-confirmation-status{color:var(--ink2)}
.wc-block-order-confirmation-summary{background:var(--card);border:1px solid var(--line);padding:18px 22px}
.wc-block-order-confirmation-summary-list-item__key{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
.wc-block-order-confirmation-summary-list-item__value{font-family:var(--disp);font-weight:600;font-size:16px}
.wc-block-order-confirmation-totals__table{border:1px solid var(--line);background:var(--card)}
.wc-block-order-confirmation-totals__table th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;border-bottom:1px solid var(--line)}
.wc-block-order-confirmation-totals__table td{border-top:1px dashed var(--line)}
.wc-block-order-confirmation-totals__total td{font-family:var(--disp);font-weight:700;border-top:1px solid var(--ink)}
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address{background:var(--card);border:1px solid var(--line);padding:18px 22px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink2)}

@media(max-width:920px){
  .kauppa-header .nav-mid{display:none}
  .kauppa-footer .fg{grid-template-columns:1fr 1fr}
  .kauppa-footer .fb{grid-column:1/-1}
}
@media(max-width:680px){
  /* Sama reunapehmuste kuin storefrontin .wrap-elementillä pienillä ruuduilla. */
  :root{--wp--style--root-padding-left:20px;--wp--style--root-padding-right:20px}
  .kauppa-wrap{padding:0 20px}
  .kauppa-strip .r{display:none}
  .kauppa-header .logo img{height:40px}
}