/* ==========================================================================
   VPLUX modern UI overlay
   - Toimii rinnakkain vanhan tyylikoodin kanssa.
   - JS-sidonnaiset selektorit (toggle_mobilemenu, header_search_input2 ym.)
     pysyvät koskemattomina; uudet luokat ovat omassa nimiavaruudessa "vplux-".
   ========================================================================== */

/* --- Smart banner zone (yläpalkki + harmaa_palkki samassa) ---------------- */

.vplux-banner-zone {
  position: relative;
  z-index: 90;
  width: 100%;
  background: transparent;
}

.vplux-banner-zone__item {
  position: relative;
  width: 100%;
}

.vplux-banner-zone__item.is-dismissed {
  display: none !important;
}

/* Kompaktimpi nykyinen ".infobar" yläpalkin sisällä */
.vplux-banner-zone .infobar {
  padding: 8px 44px 8px 16px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Estetään mahdolliset Refox-blokin marginaalit pomppimasta zonen ulkopuolelle */
.vplux-banner-zone .vplux-smartcampaign,
.vplux-banner-zone .vplux-hours-toggle {
  margin: 0 !important;
}

/* Sulkupainike (oikea yläkulma per banneri) */
.vplux-banner-zone__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  transition: background .15s ease, transform .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.vplux-banner-zone__close:hover,
.vplux-banner-zone__close:focus-visible {
  background: rgba(0, 0, 0, 0.42);
  outline: none;
}

.vplux-banner-zone__close:active {
  transform: translateY(-50%) scale(0.92);
}

.vplux-banner-zone__close::before {
  content: "\00d7"; /* × */
  display: block;
  font-weight: 700;
}

/* Mobiilissa nappi pieni ja oikealla kompaktissa kulmassa */
@media (max-width: 768px) {
  .vplux-banner-zone .infobar {
    padding: 7px 38px 7px 12px;
    font-size: 12.5px;
  }
  .vplux-banner-zone__close {
    width: 24px;
    height: 24px;
    right: 6px;
    font-size: 13px;
  }
}

/* Print-näkymässä bannerit eivät kuulu */
@media print {
  .vplux-banner-zone { display: none !important; }
}

/* ==========================================================================
   VPLUX modern header
   - Wrap-luokka olemassa olevaan #apisearchcontainer -elementtiin
   - JS-sidonnaiset luokat säilyvät (.toggle_mobilemenu, .header_search_input2,
     .header_logo, .header_menu_element, .menu_onoff jne.)
   - Sticky + kompakti scroll-tila + selkeämpi visuaalinen hierarkia
   ========================================================================== */

.vplux-header {
  position: sticky !important;     /* layoutin .headermenu inline-tyyli yrittäisi
                                      asettaa position:relative + z-index:10 */
  top: 0;
  z-index: 1000 !important;        /* yli .sidebar_submenu (z=500, layout inline) */
  margin: 0 !important;
  padding: 0 !important;
  /* Header.jpg suoraan headerin taustaksi tumman puoliläpinäkyvän overlay-
     gradientin alle. Rajattu tiukasti headerin alueeseen — ei vuoda alas. */
  background-color: #0f1a0f;  /* fallback */
  background-image:
    linear-gradient(rgba(15, 26, 15, 0.55), rgba(15, 26, 15, 0.55)),
    url('/media/header.jpg');
  background-size: cover, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 1px 0 rgba(35, 160, 67, 0.20), 0 4px 14px rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: none;
}

/* Override vanha .headermenu -tausta — käytetään uutta taustakuvaa */
.vplux-header.headermenu {
  background-color: #0f1a0f;
}

/* Sisäkääre joka rajaa leveyden ja sisuksen */
.vplux-header > .col-xl-10,
.vplux-header > [id="foxquicksearch"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Päärivi: top_padding_30 -> tiukempi */
.vplux-header .row.top_padding_30 {
  padding-top: 10px !important;
  padding-bottom: 6px !important;
  align-items: center;
}

/* Header-tekstit normaalipainoisiksi (override .semi-bold globaalille).
   Rajaus #foxquicksearch > .row.top_padding_30 -tasolle jättää
   .mobile_menu-drawerin omat bold-tekstit ennalleen. */
.vplux-header #foxquicksearch > .row.top_padding_30,
.vplux-header #foxquicksearch > .row.top_padding_30 * {
  font-weight: 400 !important;
}

/* Päämenun nappulat: bold-paino selkeyttämään valikkoriviä */
.vplux-header .header_menu_element,
.vplux-header .header_menu_element a {
  font-weight: 600 !important;
}

/* Account + cart selkeiksi pilleripainikkeiksi oikealla reunalla.
   Targetoidaan ainoastaan .justify-content-end -rivin lapset, joten
   .vplux-header sisäiset valikko/haku-rivit eivät muutu. */
.vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end > .col-xl-auto {
  margin-left: 8px !important;
}

.vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end > .col-xl-auto > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end > .col-xl-auto > a:hover {
  background: rgba(35, 160, 67, 0.18);
  border-color: rgba(35, 160, 67, 0.55);
  transform: translateY(-1px);
}

/* Ikoni napin sisällä — pienempi ja symmetrinen tekstin kanssa */
.vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end > .col-xl-auto > a > img {
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
}

/* Cart-painikkeen "Ostoskori"-teksti on .d-none.d-xl-inline-spannissä —
   pakotetaan se aina näkyviin desktopilla napissa */
@media (min-width: 1200px) {
  .vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end > .col-xl-auto > a > span.d-none.d-xl-inline {
    display: inline !important;
  }

  /* Erotetaan account+cart -rivi valikkoriviin pienellä alaviivamarginaalilla */
  .vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15.justify-content-end {
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
  }
}

/* Desktop-kompaktointi: oikean puolen sisäisten rivien padding pieneksi
   (account+cart -rivi, menusec-rivi, haku-rivi) + ulompi bottom_padding_30 */
@media (min-width: 1200px) {
  .vplux-header.bottom_padding_30 {
    padding-bottom: 4px !important;
  }
  .vplux-header #foxquicksearch > .row.top_padding_30 {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
  }
  .vplux-header #foxquicksearch .row.top_padding_15.bottom_padding_15,
  .vplux-header #foxquicksearch .row.justify-content-center.bottom_padding_15 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin: 0 !important;
  }
}

/* Logo: kiinteä koko, ei muutu scrollatessa */
.vplux-header .header_logo {
  max-width: 80px;
  height: auto;
  display: inline-block;
}

@media (min-width: 1200px) {
  .vplux-header .header_logo {
    max-width: 130px;
  }
}

/* Haku-input: selkeämpi, suurempi, ilmavampi */
.vplux-header .header_search_input2 {
  height: 44px !important;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 44px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow .15s ease;
}
.vplux-header .header_search_input2:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(35, 160, 67, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.vplux-header .header_search_button2 {
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

/* Search-input ja icon ovat .col-* -wrapperin sisällä, joka tuo
   Bootstrap-default 15 px padding-rightin. Tämä työnsi iconin yli
   inputin oikean reunan. Nollataan paddingit, jotta icon asettuu
   tarkasti inputin sisään right: 14 px:ssa. */
.vplux-header .row.justify-content-center.bottom_padding_15.d-none.d-xl-flex > .col-xl-12,
.vplux-header .col-xs-12.col-sm-6.d-xl-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Päämenun pillerit */
.vplux-header .header_menu_element {
  padding: 4px 14px !important;
  margin: 0 2px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.vplux-header .header_menu_element:hover {
  background: rgba(35, 160, 67, 0.15) !important;
  border-color: rgba(35, 160, 67, 0.45);
  transform: translateY(-1px);
}
.vplux-header .header_menu_element a {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Account + cart -ikonit: tasalevyiset napit (EI logo) */
.vplux-header .col-xl-auto > a img:not(.header_logo) {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity .15s ease, transform .15s ease;
}

/* Ostoskori-badge: pieni punainen pyöreä numero ostoskori-ikonin oikeassa yläkulmassa */
.vplux-header a.vplux-cart-link,
.mobile_menu a.vplux-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header_cart_product_amount {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #c0392b;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(15, 26, 15, 0.4);
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* Piilotetaan kun määrä = 0 tai tyhjä */
.header_cart_product_amount[data-value="0"],
.header_cart_product_amount:empty {
  display: none !important;
}

/* Mobiilimenun cart-painikkeessa badge on hieman erilainen (ympyrän nappi
   itse on jo absolute-positioidu close-napin viereen) */
.mobile_menu .mobile_buttons > a.vplux-cart-link .header_cart_product_amount {
  top: -2px;
  right: -2px;
  box-shadow: 0 0 0 2px rgba(15, 26, 15, 0.6);
}
.vplux-header .col-xl-auto > a:hover img:not(.header_logo) {
  opacity: 1;
  transform: translateY(-1px);
}

/* .frontsearch -elementti piilotetaan — header.jpg on nyt headerin
   omana taustakuvana, rajattu tiukasti sen alueelle. */
.frontsearch {
  display: none !important;
}

/* Nostot-grid: ohitetaan Bootstrap-.container -max-width-rajoitus, jotta grid
   täyttää koko sen parentin (contents_container) leveyden — pysyy muun
   main contentin tasalla. */
#frontpage_nostot_grid {
  padding-top: 16px !important;
  padding-bottom: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobiilissa .etusivun_nostopalkki on kiinteä 310 px korkea ja sen sisältö on
   siirretty top: 80 px alaspäin. Tämä leikkaa sisällön mobiilissa, jossa
   stäkkäys vie enemmän pystytilaa, ja seuraavat tuotteet päätyvät visuaalisesti
   bannerin päälle. Annetaan korkeuden mukautua sisältöön. */
@media (max-width: 1199px) {
  .etusivun_nostopalkki {
    height: auto !important;
    padding: 16px 0 !important;
  }
  .etusivun_nostopalkki_content {
    top: 0 !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Modernisoidaan content-leveys: vanha .col-xl-10 .offset-xl-1 .col-12 antoi
   83 % leveyden ja 8.33 % vasemman offsetin Bootstrap-12-gridissä. Korvataan
   täysleveällä lapsi-elementillä + content_containerin clamp-pohjaisella
   padding-spacingilla. Yhdellä CSS-säännöllä modernisoidaan kaikki 21 Blade-
   tiedostoa.
   ========================================================================== */

.col-xl-10.offset-xl-1.col-12:not(#foxquicksearch):not(.newsletter_holder) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Modernit padding-arvot content-alueelle (skaalaa näytön mukaan).
   .contents_container on käytössä sidebar-näkymissä, body-tason rakenteissa
   jouduttaisiin lisäämään myös container-pohjainen padding. */
.contents_container {
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

/* Jos sivulla ei ole sidebariä (.sidebar_and_content puuttuu) tai sidebar on
   piilossa (mobile), annetaan body-tason sisällölle vastaava padding niin
   ettei se liimaudu viewportin reunaan. */
@media (max-width: 1199px) {
  .sidebar_and_content > .contents_container,
  body > .col-xl-10.offset-xl-1.col-12,
  body > .row > .col-xl-10.offset-xl-1.col-12 {
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }
}

/* Header-rivi (foxquicksearch) säilyttää oman padding-logiikan — sillä on
   tarkkoja sääntöjä yllä. Override .col-xl-10 .offset-xl-1 ei vaikuta siihen,
   koska .vplux-header omaa korkean spesifisyytensä. */

/* ==========================================================================
   VPLUX modern product card (.product_container)
   Käytössä sekä product_container.blade.php että product_nosto_container.blade.php.
   - Alennus/uutuus -lätkät pyöreinä pillereinä vasemmassa yläkulmassa
   - Brändiväri (#23a043) räikeän punaisen sijaan
   - Hover: kortti nousee + varjostus voimistuu
   - Tuotenimi 2-rivin line-clamp ellipsiksellä (poistaa mask-fade-efektin)
   ========================================================================== */

.product_container {
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
}

.product_container > .row {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product_container > .row > .product_container_inner {
  flex: 1;
}

.product_container .product_container_inner {
  background-color: #fff;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(15, 26, 15, 0.04), 0 4px 16px rgba(15, 26, 15, 0.06);
  border: 1px solid rgba(15, 26, 15, 0.05);
  padding: 14px 14px 18px !important;
  transition: box-shadow .18s ease, transform .18s ease;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

/* Sisäinen .row stäkkäytyy column-suunnassa että voimme käyttää margin-top:autoa */
.product_container .product_container_inner > .row {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 !important;
  width: 100%;
}

/* Bootstrap .col-12 sisältää flex: 0 0 100% joka flex-column-kontekstissa
   tarkoittaa flex-basis 100 % main-axis-suunnassa = 100 % korkeudesta.
   Tämä saa jokaisen lapsen yrittämään olla yhtä korkea kuin koko parent
   → kuva täyttäisi koko alueen ja tekstit työntyisivät pois. Yliriidataan
   flex-basis auto:ksi (= luonnollinen korkeus), pidetään width 100 %. */
.product_container .product_container_inner > .row > [class*="col-"] {
  -ms-flex: 0 0 auto !important;
      flex: 0 0 auto !important;
  flex-basis: auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Lisää ostoskoriin -napin sisältävä .col-12 työnnetään pohjalle */
.product_container .product_container_inner > .row > .col-12:nth-last-child(2) {
  margin-top: auto;
}

.product_container:hover .product_container_inner {
  box-shadow: 0 2px 0 rgba(35, 160, 67, 0.18), 0 12px 28px rgba(15, 26, 15, 0.14);
  transform: translateY(-3px);
}

/* Alennuslätkä — pyöreä pilleri, tumma punainen
   (erottuu vihreästä Lisää ostoskoriin -napista, ei räikeän kirkas). */
.discount_icon {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  background-color: #c0392b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(15, 26, 15, 0.18);
  z-index: 4;
  white-space: nowrap;
}

/* Uutuuslätkä — sama muoto, tumma neutraali sävy ettei kilpaile alennuksen kanssa */
.new_icon {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  background-color: #0f1a0f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(15, 26, 15, 0.18);
  z-index: 4;
  white-space: nowrap;
}

/* Jos sekä alennus että uutuus, uutuus tippuu rivillä alaspäin */
.product_container .discount_icon + .new_icon,
.product_container_image .discount_icon ~ .new_icon {
  top: 48px !important;
}

/* Tuotekuvan tila — kuva täyttää koko neliön (object-fit: cover) */
.product_container .product_container_image {
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}

/* imghelper oli vanhassa CSS:ssä inline-block height:100% -trikki kuvan
   vertikaaliseen keskittämiseen. Object-fit: cover korvaa tämän. */
.product_container .product_container_image > span.imghelper {
  display: none !important;
}

.product_container .product_container_image > a {
  width: 100%;
  height: 100%;
  display: block;
}

.product_container .product_container_image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  object-position: center;
  padding: 0 !important;
  box-sizing: border-box;
  display: block;
}

/* Erottava viiva kuvan ja tekstin välillä — poistetaan, varjostus tekee saman */
.product_container hr {
  display: none !important;
}

/* Tuotenimi — 2-rivin clamp ellipsis, ei mask-fade */
.product_container .product_container_name {
  height: auto !important;
  max-height: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  min-height: 2.7em;
  margin-bottom: 8px;
}

.product_container .product_container_name a {
  color: #1f2a1f !important;
  text-decoration: none;
}

.product_container .product_container_name a:hover {
  color: #23a043 !important;
}

/* Tähti-arvio (wrapper aina renderöity, sisältö ehdollinen).
   min-height varaa tilaa myös arvostelemattomille tuotteille, jotta kortit
   pysyvät samankokoisina. 5-tähden asteikko: harmaa pohja + keltainen
   täyte width-prosentilla. */
.product_container .container_review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5a6b5a;
  margin-bottom: 6px;
  min-height: 16px;
}

.product_container .stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  /* Estetään tekstinvalinta */
  user-select: none;
}

.product_container .stars__empty {
  color: #e0e3e0;
}

.product_container .stars__filled {
  position: absolute;
  top: 0;
  left: 0;
  color: #f7b500;
  overflow: hidden;
  white-space: nowrap;
}

.product_container .container_review__value {
  font-size: 12.5px;
  color: #5a6b5a;
  font-weight: 500;
}

/* Hinta: selkeämpi typografia */
.product_container .container_price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #0f1a0f;
}

.product_container del {
  color: #8a9c8a !important;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Lisää ostoskoriin -nappi: brändin vihreä, modern pilleri */
.product_container .btn.lightgreenbg {
  background-color: #23a043 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(35, 160, 67, 0.24);
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  border: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.product_container .btn.lightgreenbg:hover {
  background-color: #1c8636 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(35, 160, 67, 0.32);
}

.product_container .btn.lightgreenbg:active {
  transform: translateY(0);
}

/* Out-of-stock -tila: hieman himmennetty kortti */
.product_container_oos .product_container_inner {
  opacity: 0.78;
}

.product_container_oos .product_container_image img {
  filter: grayscale(40%);
}

/* ==========================================================================
   Tuotesivun (/product) overhaul
   - Otsikko + hinta selkeämmin
   - Variation-selector ennen ostoa, modernit kortit
   - Buy-area suurempi & selkeämpi CTA
   - Stock-indikaattorit värikoodattu
   - JS-sidonnaiset luokat (.product_variation_selector, .buy_button,
     .product_package_variation_selector, #buy_button_red yms) säilyy
   ========================================================================== */

/* Sivun yläosa */
.page_container.whitebg {
  padding-top: 24px !important;
  background-color: transparent !important;
}

.page_container .breadcrumbs {
  text-align: left !important;
  padding: 8px 16px 14px !important;
  font-size: 13px;
  color: #5a6b5a !important;
}
.page_container .breadcrumbs a {
  color: #5a6b5a;
  text-decoration: none;
}
.page_container .breadcrumbs a:hover { color: #23a043; text-decoration: underline; }
.page_container .breadcrumbs br { display: none; }

/* Tuotteen pääkortti */
#product_pictures_container .product_main_picture {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 26, 15, 0.06);
  padding: 24px;
  box-shadow: 0 1px 0 rgba(15, 26, 15, 0.04), 0 6px 22px rgba(15, 26, 15, 0.06);
}
#product_pictures_container .product_main_picture img {
  max-width: 100%;
  height: auto;
}
.product_pictures_extra_container .product_picture_extra {
  cursor: pointer;
}
.product_pictures_extra_container .product_picture_extra img {
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.product_pictures_extra_container .thumb_selected img {
  border-color: #23a043;
}

/* Tuotteen header (nimi) */
#buy_button_container .product_header h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f1a0f;
  margin: 0;
}

/* Keskiarvo-tähdet H1:n alla */
#buy_button_container .product_header_stars {
  margin-top: 10px;
  display: block;
}
#buy_button_container .vplux-product-stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
  user-select: none;
}
#buy_button_container .vplux-product-stars__empty {
  color: #e0e3e0;
}
#buy_button_container .vplux-product-stars__filled {
  position: absolute;
  top: 0;
  left: 0;
  color: #f7b500;
  overflow: hidden;
  white-space: nowrap;
}

/* Hinta */
#buy_button_container .price_container_static {
  padding-top: 16px !important;
  border-top: 1px solid rgba(15, 26, 15, 0.06);
  margin-top: 16px;
}
#buy_button_container #product_price_span {
  font-size: 34px !important;
  font-weight: 700;
  color: #0f1a0f;
  letter-spacing: -0.01em;
}
#buy_button_container #product_price .greytext {
  color: #5a6b5a !important;
  font-size: 14px !important;
}

/* Variation-selector — radio-pohjaiset kortit */
.product_buy_selector_left {
  margin-top: 20px;
}
.product_buy_selector_left .variation_selector {
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
.product_buy_selector_left .variation_selector .selectdiv {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product_buy_selector_left .variation_selector_container {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 26, 15, 0.10);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
  margin: 0 !important;
  user-select: none;
}

/* Sisäiset div-elementit periivät cursor: pointer korttitilan, vaikka
   browser default <label>-elementeillä olisi text-cursor */
.product_buy_selector_left .variation_selector_container * {
  cursor: pointer;
}
.product_buy_selector_left .variation_selector_container:hover {
  border-color: rgba(35, 160, 67, 0.45);
  background: rgba(35, 160, 67, 0.04);
}
.product_buy_selector_left .variation_selector_container .col-xs-1,
.product_buy_selector_left .variation_selector_container .col-xs-7,
.product_buy_selector_left .variation_selector_container .col-xs-3 {
  padding: 0 !important;
  width: auto !important;
  flex: initial;
}
.product_buy_selector_left .variation_selector_container .col-xs-7 {
  flex: 1;
}
.product_buy_selector_left .variation_selector_container input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 26, 15, 0.25);
  border-radius: 50%;
  background: #fff;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease;
}
.product_buy_selector_left .variation_selector_container input[type="radio"]:checked {
  border-color: #23a043;
}
.product_buy_selector_left .variation_selector_container input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #23a043;
}
.product_buy_selector_left .variation_selector_container:has(input[type="radio"]:checked) {
  border-color: #23a043;
  background: rgba(35, 160, 67, 0.08);
}
.product_buy_selector_left .variation_selector_container label {
  margin: 0 !important;
  cursor: pointer;
  color: #1f2a1f;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.4;
}
.product_buy_selector_left .variation_selector_container .col-xs-3 label {
  color: #0f1a0f;
  font-weight: 700;
  white-space: nowrap;
}

/* Package-select on natiivi select — käytetään samoja chevron-tyylejä */
.product_buy_selector_left .product_package_variation_selector {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding: 10px 36px 10px 14px !important;
  border: 1px solid rgba(15, 26, 15, 0.14);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2a1f;
  height: auto;
  width: 100% !important;
  margin-bottom: 8px;
}

/* Stock-indikaattorit */
.greytext .instock-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #23a043;
  display: inline-block !important;
  vertical-align: middle;
}
.greytext .instock-icon.instock-red { background: #c0392b; }
.greytext .instock-icon.instock-yellow { background: #e8a500; }
.greytext > div {
  font-size: 13.5px;
  color: #1f2a1f;
}
.greytext > div span {
  color: #5a6b5a;
}

/* Osto-nappi: iso vihreä CTA */
.product_buy_selector.buy_buttons {
  margin-top: 20px;
}
.product_buy_selector #buyamount {
  width: 80px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 26, 15, 0.14) !important;
  background: #fff !important;
  font-size: 16px;
  font-weight: 600;
  color: #0f1a0f;
  text-align: center;
}
.product_buy_selector #buy_button_red {
  background-color: #23a043 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 999px !important;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(35, 160, 67, 0.28);
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.product_buy_selector #buy_button_red:hover {
  background-color: #1c8636 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(35, 160, 67, 0.35);
}
.product_buy_selector #buy_button_red:active {
  transform: translateY(0);
}

/* Tuotekuvaus alapuolelle pehmeänä korttilauttana */
.product_description.greybg {
  background-color: #f7f9f7 !important;
  border-radius: 14px;
  padding: 18px !important;
  margin-top: 24px;
  line-height: 1.6;
  font-size: 14.5px;
}

/* ==========================================================================
   Tuotearvostelut — modernit kortit, CSS-tähdet, päivämäärä
   ========================================================================== */

.product_reviews {
  margin-top: 8px;
}

/* CSS Grid (display: grid) hoitaa rivit/sarakkeet ilman flex + calc-konflikteja
   Bootstrap .col-* -luokkien kanssa. Jokainen .vplux-review-cell saa
   automaattisesti yhden grid-radan. */
.vplux-reviews-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

@media (min-width: 768px) {
  .vplux-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .vplux-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vplux-review-cell {
  padding: 0 !important;
  flex: initial !important;
  max-width: 100% !important;
  width: auto !important;
  min-width: 0;            /* grid-itemin overflow-suoja */
}

.vplux-review {
  background: #ffffff;
  border: 1px solid rgba(15, 26, 15, 0.06);
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 0 rgba(15, 26, 15, 0.03), 0 4px 14px rgba(15, 26, 15, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s ease, transform .12s ease;
}

.vplux-review:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(15, 26, 15, 0.04), 0 8px 22px rgba(15, 26, 15, 0.07);
}

.vplux-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vplux-review__stars {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
  user-select: none;
}

.vplux-review__stars-empty {
  color: #e0e3e0;
}

.vplux-review__stars-filled {
  position: absolute;
  top: 0;
  left: 0;
  color: #f7b500;
  overflow: hidden;
  white-space: nowrap;
}

.vplux-review__date {
  font-size: 12.5px;
  color: #8a9c8a;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.vplux-review__body {
  font-size: 14px;
  line-height: 1.55;
  color: #1f2a1f;
  flex: 1;
  word-break: break-word;
  overflow-wrap: break-word;
}

.vplux-review__body .edit_area {
  display: block;
  cursor: text;
}

.vplux-review__foot {
  border-top: 1px solid rgba(15, 26, 15, 0.06);
  padding-top: 10px;
  margin-top: 4px;
}

.vplux-review__author {
  font-size: 13px;
  font-weight: 600;
  color: #0f1a0f;
}

/* Arvostelulomake modernisoituna.
   Käytetään compound-selektoria .product_reviews .review_bottom (spesifisyys
   0,2,0) joka voittaa layoutin globaalin .row { margin: 0 !important }
   -säännön (0,1,0). */
.product_reviews .review_bottom,
.review_bottom.row {
  background: #f7f9f7;
  border-radius: 16px;
  padding: 28px !important;
  margin-top: 40px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
}

/* Pieni vihreä korostus yläosaan erottamaan arvosteluista yläpuolella */
.review_bottom::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 3px;
  background: #23a043;
  border-radius: 0 0 6px 6px;
}

.review_bottom > .col-12 {
  padding: 0 !important;
}

.review_bottom__title {
  font-size: 19px;
  font-weight: 700;
  color: #0f1a0f;
  margin: 0 0 4px;
  line-height: 1.3;
}

.review_bottom__field {
  margin-top: 18px;
}

.review_bottom__field--rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review_bottom__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a1f;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.review_bottom__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review_bottom .review_star {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform .12s ease;
}

.review_bottom .review_star:hover {
  transform: scale(1.15);
}

.review_bottom .customer_nickname,
.review_bottom .new_review {
  width: 100%;
  padding: 10px 14px !important;
  border: 1px solid rgba(15, 26, 15, 0.14);
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  font-family: inherit;
  margin: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  resize: vertical;
  box-sizing: border-box;
}

.review_bottom .customer_nickname:focus,
.review_bottom .new_review:focus {
  outline: none;
  border-color: rgba(35, 160, 67, 0.55);
  box-shadow: 0 0 0 2px rgba(35, 160, 67, 0.18);
}

.review_bottom .customer_nickname {
  min-height: 44px;
  max-height: 44px;
}

.review_bottom .new_review {
  min-height: 120px;
}

.review_bottom__actions {
  margin-top: 22px;
}

.review_bottom #send_review {
  background-color: #23a043 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(35, 160, 67, 0.24);
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  font-size: 14.5px;
}

.review_bottom #send_review:hover {
  background-color: #1c8636 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(35, 160, 67, 0.32);
}

@media (max-width: 768px) {
  .review_bottom {
    padding: 20px !important;
    margin-top: 28px !important;
  }
  .review_bottom::before {
    left: 20px;
    right: 20px;
  }
  .review_bottom__title { font-size: 17px; }
}

/* Aggregate-rating (piilotettu schema-data) — pidetään piilossa */
[itemprop="aggregateRating"] { display: none !important; }

/* Visually-hidden utility — sisältö pysyy DOM:issa hakukoneille ja ruudun-
   lukijoille, mutta ei näy visuaalisesti. Käytetään SEO-H1-tageille jotka
   eivät kuulu visuaaliseen designiin. */
.vplux-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   /cart (ostoskori-sivu) modernisointi
   - Rajaus body:has(#cart_address_form) -selektorilla, vaikuttaa vain
     cart-sivulla. JS-sidonnaiset luokat (#cart_giftcard_code,
     #cart_giftcard_use_button, #checkout_button, .cart_remove yms.) säilyy.
   ========================================================================== */

body:has(#cart_address_form) .page_container.whitebg {
  background-color: transparent !important;
  /* Horisontaaliset reunamarginaalit, koska sivulla ei ole sidebariä
     joka antaisi contents_container-paddingia */
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Form-osio joka sisältää 1-4 sektiot — sama reunapadding */
body:has(#cart_address_form) form.cart_address_form > .row.whitebg {
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  background-color: transparent !important;
  margin: 0 !important;
}

/* Sivun otsikko Ostoskori */
body:has(#cart_address_form) .page_container > .col-12 > h1.f40 {
  font-size: 28px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  text-align: left !important;
  color: #0f1a0f;
  margin: 8px 0 24px !important;
  padding: 0 16px;
}

/* Sektioiden otsikot ("1. Syötä tiedot", "3. Valitse maksutapa", "4. Vahvista") */
body:has(#cart_address_form) form.cart_address_form h1.f40 {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  text-align: left !important;
  color: #0f1a0f;
  margin: 0 0 18px !important;
}

/* Sektio-kortit: jokainen .col-xl-10 ... .bottom_border -lohko valkoinen kortti.
   ID-pohjainen :has-rajaus kasvattaa spesifisyyttä yli globaalin
   .col-xl-10.offset-xl-1.col-12:not(#foxquicksearch) -säännön (1,4,0). */
body:has(#cart_address_form) .col-xl-10.offset-xl-1.col-12.top_padding_30.bottom_padding_30.bottom_border,
body:has(#cart_address_form) .col-xl-10.offset-xl-1.col-12.top_padding_30.bottom_padding_30 {
  background: #ffffff;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 26, 15, 0.06) !important;
  box-shadow: 0 1px 0 rgba(15, 26, 15, 0.03), 0 4px 14px rgba(15, 26, 15, 0.04);
  padding-top: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 24px !important;
  padding-left: 24px !important;
  margin: 16px 0 !important;
}

/* Bottom_border ei tarvita kun kortit erottuvat itse */
body:has(#cart_address_form) .col-xl-10.offset-xl-1.col-12.bottom_border {
  border-bottom: none !important;
}

/* Cart-itemit selkeämmäksi */
body:has(#cart_address_form) #cart_items .row.bottom_border.bottom_padding_30 {
  border-bottom: 1px solid rgba(15, 26, 15, 0.08) !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  align-items: center;
}

body:has(#cart_address_form) #cart_items .row.bottom_border.bottom_padding_30:last-child {
  border-bottom: none !important;
}

body:has(#cart_address_form) #cart_items .row.d-none.d-xl-flex {
  border-bottom: 2px solid rgba(15, 26, 15, 0.08);
  margin: 0 0 8px !important;
}

body:has(#cart_address_form) #cart_items .row.d-none.d-xl-flex .col-xl-2,
body:has(#cart_address_form) #cart_items .row.d-none.d-xl-flex .col-xl-4 {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6b5a;
  padding: 12px 8px !important;
}

/* Cart-itemin "poista tuote"-linkki näkyvämmäksi */
body:has(#cart_address_form) .cart_remove {
  display: inline-block;
  margin-top: 6px;
  color: #c0392b;
  text-decoration: none;
  font-size: 13px;
  transition: color .15s ease;
}
body:has(#cart_address_form) .cart_remove:hover { color: #8a2820; text-decoration: underline; }
body:has(#cart_address_form) .cart_remove .greytext { color: inherit !important; }

/* Yhteensä-summan blokki kuvalla */
body:has(#cart_address_form) .col-xl-8.d-none.d-xl-inline-block.text-center.vertti img {
  max-width: 200px;
  height: auto;
  opacity: 0.92;
}

/* Lahjakortti/alennuskoodi -input + nappi */
body:has(#cart_address_form) #cart_giftcard_code {
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 26, 15, 0.14) !important;
  background: #ffffff !important;
  padding: 0 14px !important;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body:has(#cart_address_form) #cart_giftcard_code:focus {
  outline: none;
  border-color: rgba(35, 160, 67, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(35, 160, 67, 0.18);
}
body:has(#cart_address_form) #cart_giftcard_use_button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f1a0f !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
body:has(#cart_address_form) #cart_giftcard_use_button:hover {
  background: #1f2a1f !important;
  transform: translateY(-1px);
}

/* Lomakkeen input-kentät: yhdenmukainen tyyli koko cart-sivulla */
body:has(#cart_address_form) .cart_input_text,
body:has(#cart_address_form) #description,
body:has(#cart_address_form) input.form-control,
body:has(#cart_address_form) select.form-control {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 26, 15, 0.14) !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  height: auto;
  min-height: 44px;
  box-sizing: border-box;
}
body:has(#cart_address_form) .cart_input_text:focus,
body:has(#cart_address_form) #description:focus,
body:has(#cart_address_form) input.form-control:focus,
body:has(#cart_address_form) select.form-control:focus {
  outline: none;
  border-color: rgba(35, 160, 67, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(35, 160, 67, 0.18);
}

/* Lopullinen Vahvista tilaus -nappi: iso, brändin vihreä CTA */
body:has(#cart_address_form) #checkout_button,
body:has(#cart_address_form) #checkout_button_klarna {
  background-color: #23a043 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 16px 36px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(35, 160, 67, 0.28);
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  letter-spacing: 0.01em;
  min-width: 220px;
}
body:has(#cart_address_form) #checkout_button:hover,
body:has(#cart_address_form) #checkout_button_klarna:hover {
  background-color: #1c8636 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(35, 160, 67, 0.36);
}

/* Total-erittely (cart.totals) */
body:has(#cart_address_form) #cart_erittely {
  background: #f7f9f7;
  border-radius: 14px;
  padding: 22px !important;
  text-align: left !important;
  line-height: 1.8;
  font-size: 14px;
  margin-bottom: 20px;
}
body:has(#cart_address_form) #cart_erittely > span:first-child {
  font-size: 20px !important;
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 26, 15, 0.08);
  color: #0f1a0f;
}

/* Toimitus/maksu -lohkojen sisällön spacing */
body:has(#cart_address_form) .cart_shipment_select,
body:has(#cart_address_form) .cart_payment_select {
  padding: 8px 0;
}

/* Toimitus- ja maksuvaihtoehtojen kuvaukset: pitkät linkit/URL:t murtuvat
   rivin loppuun eivätkä vuoda kortin yli */
body:has(#cart_address_form) .cart_shipment_select label,
body:has(#cart_address_form) .cart_payment_select label,
body:has(#cart_address_form) .cart_shipment_select .greytext,
body:has(#cart_address_form) .cart_payment_select .greytext {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  white-space: normal;
}

body:has(#cart_address_form) .cart_shipment_select a,
body:has(#cart_address_form) .cart_payment_select a {
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
  display: inline;
}

/* Flex-rivin lapsille min-width: 0, jotta sisältö voi murtua eikä venytä
   parent-flex-rivin yli */
body:has(#cart_address_form) .cart_shipment_select .col-xl-8,
body:has(#cart_address_form) .cart_shipment_select .col-8,
body:has(#cart_address_form) .cart_payment_select .col-xl-8,
body:has(#cart_address_form) .cart_payment_select .col-8 {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  body:has(#cart_address_form) .page_container > .col-12 > h1.f40 {
    font-size: 24px !important;
    margin: 4px 0 16px !important;
  }
  body:has(#cart_address_form) form.cart_address_form h1.f40 {
    font-size: 18px !important;
  }
  body:has(#cart_address_form) .col-xl-10.offset-xl-1.col-12.top_padding_30.bottom_padding_30.bottom_border,
  body:has(#cart_address_form) .col-xl-10.offset-xl-1.col-12.top_padding_30.bottom_padding_30 {
    padding: 18px 16px !important;
    margin: 12px 0 !important;
    border-radius: 14px !important;
  }
  body:has(#cart_address_form) #checkout_button {
    width: 100%;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   Tuotesivun alaosan suositussektiot ("Muut ostivat myös" + "Lisäksi suosittelemme")
   Bladessa h3.f40.semi-bold + .col-12.nopadd.text-center -wrapperit.
   Modernisoidaan otsikko + sektion ympärille selkeä spacing/erotin.
   ========================================================================== */

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 {
  padding-top: 32px !important;
  padding-bottom: 8px !important;
  margin-top: 24px !important;
  border-top: 1px solid rgba(15, 26, 15, 0.06);
}

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30:first-of-type {
  margin-top: 8px !important;
}

/* H3-otsikko: ei valtava 40 px, vaan moderni 24 px vasemmalla */
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd.text-center {
  text-align: left !important;
  padding: 0 !important;
}

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd.text-center h3.f40,
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd.text-center h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0f1a0f !important;
  text-align: left !important;
  margin: 0 0 20px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

/* Sisempi grid-wrapper poistaa nopadd-paddingin ja sallii kortit ottaa
   oman sivu-padding-spacenin */
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd:not(.text-center) {
  padding: 0 !important;
}

/* Pakotetaan alaosan suositussektioiden product_container -kortit takaisin
   normaaliin flex-column -tilaan riippumatta parent .row -kerroksista.
   Lisätään min-width: 0 ja overflow-wrap textille, jottei sisältö
   ylivuotaisi flex-itemistä. */
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd > .row > .product_container {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
}

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd > .row > .product_container > .row {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd > .row > .product_container > .row > .product_container_inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0;
  max-width: 100%;
}

.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd > .row > .product_container .product_container_inner > .row {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}

/* Korttitekstit murtuvat sanan rajalla, eivät vuoda ulos */
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 .product_container .product_container_name,
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 .product_container .container_price,
.col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 .product_container .container_review {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* Tuotekortit näissä rivissä saavat saman 2/3/4 -kolumni-asettelun mobiilissa
   ja desktopilla kuin muualla (kategoria). Sääntö pätee koska .row > .product_container
   -säännön avulla mobile 50% jo toimii. */

@media (max-width: 768px) {
  .col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd.text-center h3.f40,
  .col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 > .col-12 > .col-12.nopadd.text-center h3 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  .col-xl-10.offset-xl-1.col-12 > .row.top_padding_30 {
    padding-top: 24px !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 768px) {
  .vplux-review {
    padding: 14px 16px;
  }
  .vplux-review__body { font-size: 13.5px; }
}

/* Mobiilissa pienemmät paddingit, kompaktimpi näkymä */
@media (max-width: 768px) {
  .product_container .product_container_inner {
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
  }
  .product_container .discount_icon,
  .product_container .new_icon {
    top: 8px !important;
    left: 8px !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
  .product_container .product_container_name {
    font-size: 13.5px;
    -webkit-line-clamp: 3;       /* sallitaan 3 rivin nimi */
    min-height: 4em;
  }
  .product_container .container_price {
    font-size: 18px;
  }
  /* Lisää ostoskoriin -nappi pysyy yhdellä rivillä kapeassa kortissa */
  .product_container .btn.lightgreenbg {
    padding: 9px 12px !important;
    font-size: 12.5px;
    letter-spacing: 0;
  }
}

/* Erittäin kapeissa mobiilinäytöissä (<400 px) tarvitaan vielä tiukempi
   nappi-padding ja pieni font ettei "Lisää ostoskoriin" katkea */
@media (max-width: 400px) {
  .product_container .btn.lightgreenbg {
    padding: 8px 10px !important;
    font-size: 11.5px;
  }
}

/* Bootstrap 4.3:ssa ei ole col-xs-*-luokkia, joten product_container on
   mobiilissa (<576 px) 100 % leveä gridissä. Pakotetaan 2 saraketta MUTTA
   vain Bootstrap-rivin (.row) suorille lapsille — slick-karuselleissa
   (.slick-track > .slick-slide > .product_container) sääntö ei laukea ja
   slick voi hallita slide-leveyttä itse. */
@media (max-width: 575.98px) {
  .row > .product_container {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* ==========================================================================
   Kategoriasivun yläosa: kompaktimpi description + lapsi-kategoriat pillereinä
   - Tuotteet halutaan nähtäville mahdollisimman pian
   - JS-injektoitu "Lue lisää" -toggle paljastaa description-loput
   ========================================================================== */

/* Description yläosassa piilotetaan oletuksena visually-hidden (off-screen)
   -tekniikalla. Sisältö pysyy täysipainoisesti DOM:issa renderöitynä
   (Google ei käsittele 'display:none'-piilotuksena, SEO-painot säilyvät),
   mutta käyttäjä ei näe sitä. Modaali näyttää saman sisällön kopioituna. */
.vplux-cat-desc.is-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Modaali kategorian description-tekstille. Description-elementti DOM:issa
   pysyy is-hidden -tilassa (SEO-arvo säilyy), modaali näyttää sisällön
   kopioituna kelluvana paneelina päällä. */
.vplux-cat-desc-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vpluxModalFadeIn .18s ease;
}

.vplux-cat-desc-modal.is-closing {
  animation: vpluxModalFadeOut .18s ease forwards;
}

.vplux-cat-desc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.vplux-cat-desc-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 28px 24px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  animation: vpluxModalPanelIn .22s cubic-bezier(.2,.7,.2,1);
  -webkit-overflow-scrolling: touch;
}

.vplux-cat-desc-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 26, 15, 0.06);
  color: #0f1a0f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  z-index: 2;
}

.vplux-cat-desc-modal__close::before {
  content: "\00d7";
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.vplux-cat-desc-modal__close:hover,
.vplux-cat-desc-modal__close:focus-visible {
  background: rgba(35, 160, 67, 0.20);
  outline: none;
}

.vplux-cat-desc-modal__close:active {
  transform: scale(0.94);
}

.vplux-cat-desc-modal__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f1a0f;
  margin: 0 44px 16px 0;
}

.vplux-cat-desc-modal__body {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2a1f;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.vplux-cat-desc-modal__body h1,
.vplux-cat-desc-modal__body h2,
.vplux-cat-desc-modal__body h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f1a0f;
  margin: 16px 0 10px;
}

.vplux-cat-desc-modal__body h1:first-child,
.vplux-cat-desc-modal__body h2:first-child,
.vplux-cat-desc-modal__body h3:first-child {
  margin-top: 0;
}

.vplux-cat-desc-modal__body p {
  margin: 0 0 12px;
}

.vplux-cat-desc-modal__body p:last-child {
  margin-bottom: 0;
}

.vplux-cat-desc-modal__body img,
.vplux-cat-desc-modal__body iframe,
.vplux-cat-desc-modal__body video,
.vplux-cat-desc-modal__body table {
  max-width: 100%;
  height: auto;
}

body.vplux-cat-desc-modal-open {
  overflow: hidden;
}

@keyframes vpluxModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vpluxModalFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vpluxModalPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .vplux-cat-desc-modal {
    padding: 8px;
    align-items: flex-end;            /* slide up from bottom on mobile */
  }
  .vplux-cat-desc-modal__panel {
    padding: 22px 18px 18px;
    border-radius: 18px 18px 12px 12px;
    max-height: calc(100vh - 16px);
  }
  .vplux-cat-desc-modal__title {
    font-size: 18px;
    margin: 0 44px 12px 0;
  }
  .vplux-cat-desc-modal__body {
    font-size: 14px;
  }
}

/* Teaser-kortti — tuotekortin grid-koko (col-*) mutta erottuva sisällöltä */
.vplux-cat-desc-teaser {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.vplux-cat-desc-teaser .product_container_inner.vplux-cat-desc-teaser__inner {
  background: linear-gradient(140deg, #0f1a0f 0%, #1f2a1f 100%) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(35, 160, 67, 0.20) !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
  min-height: 280px;
}

.vplux-cat-desc-teaser:hover .vplux-cat-desc-teaser__inner,
.vplux-cat-desc-teaser:focus-visible .vplux-cat-desc-teaser__inner {
  transform: translateY(-3px);
  border-color: rgba(35, 160, 67, 0.45) !important;
  box-shadow: 0 12px 28px rgba(15, 26, 15, 0.22),
              0 2px 0 rgba(35, 160, 67, 0.30);
}

.vplux-cat-desc-teaser__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.vplux-cat-desc-teaser__snippet {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  width: 100%;
  flex: 1;
}

.vplux-cat-desc-teaser__cta {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(35, 160, 67, 0.20);
  border: 1px solid rgba(35, 160, 67, 0.50);
  color: #ffffff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: auto;
  transition: background-color .15s ease, border-color .15s ease;
}

.vplux-cat-desc-teaser:hover .vplux-cat-desc-teaser__cta {
  background: rgba(35, 160, 67, 0.32);
  border-color: rgba(35, 160, 67, 0.75);
}

@media (max-width: 768px) {
  .vplux-cat-desc-teaser .product_container_inner.vplux-cat-desc-teaser__inner {
    padding: 16px 14px !important;
    min-height: 220px;
  }
  .vplux-cat-desc-teaser__title { font-size: 14.5px; }
  .vplux-cat-desc-teaser__snippet {
    font-size: 12.5px;
    -webkit-line-clamp: 6;
  }
  .vplux-cat-desc.is-revealed {
    padding: 16px !important;
    font-size: 14px !important;
    margin: 4px 0 16px;
    scroll-margin-top: 90px;          /* mobiili: pienempi header + banneri */
  }
  .vplux-cat-desc.is-revealed h1,
  .vplux-cat-desc.is-revealed h2,
  .vplux-cat-desc.is-revealed h3 {
    font-size: 16px;
  }
}

/* Lapsi-kategoriat (.card-columns) — pillerit flex-row:ssa */
.category_container .card-columns {
  column-count: unset !important;
  column-gap: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 4px;
}

.category_container .card-columns > .card {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(15, 26, 15, 0.10);
  border-radius: 999px;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 26, 15, 0.04);
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
  height: auto;
  min-height: 0;
  text-align: center;
  width: auto;
  max-width: 100%;
}

.category_container .card-columns > .card:hover {
  background: rgba(35, 160, 67, 0.08);
  border-color: rgba(35, 160, 67, 0.45);
  transform: translateY(-1px);
}

.category_container .card-columns > .card > a {
  display: inline-block;
  padding: 7px 16px;
  color: #1f2a1f !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.category_container .card-columns > .card:hover > a {
  color: #0f1a0f !important;
}

/* Mobiili: kompaktimpi spacing */
@media (max-width: 768px) {
  .vplux-cat-desc {
    max-height: 64px;
    font-size: 14px !important;
  }
  .category_container .card-columns {
    gap: 6px;
  }
  .category_container .card-columns > .card > a {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Tuotteiden listan padding ja .col-12.top_padding_30 yläosan tilan
   tiivistäminen — vie tuotteet vielä lähemmäs yläosaa */
.category_container > .col-12.top_padding_30.bottom_padding_30 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.category_container > .col-12.top_padding_30.bottom_padding_15 {
  padding-top: 12px !important;
  padding-bottom: 6px !important;
}

.category_container > .col-12.bottom_padding_30.text-center.f18 {
  padding-bottom: 8px !important;
}

/* Kategoriasivun filtterit ja järjestysvalitsin: korvataan natiivi nuoli
   omalla SVG-chevronilla, jotta sen sijaintia voidaan hallita.
   Selector kohdistuu .sorting_selector ja .attribute_filtering_select
   -luokkiin samaan rajaukseen. */
.category_container .sorting_selector,
#bestsearch_types_mobile .sorting_selector,
.category_container .attribute_filtering_select,
#bestsearch_types_mobile .attribute_filtering_select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding: 8px 36px 8px 14px !important;
  border: 1px solid rgba(15, 26, 15, 0.14);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1f2a1f;
  height: auto;
  min-height: 38px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: none;
  /* Poistaa IE/Edge-default dropdown arrow */
}

.category_container .sorting_selector:focus,
.category_container .sorting_selector:focus-visible,
#bestsearch_types_mobile .sorting_selector:focus,
.category_container .attribute_filtering_select:focus,
.category_container .attribute_filtering_select:focus-visible,
#bestsearch_types_mobile .attribute_filtering_select:focus {
  outline: none;
  border-color: rgba(35, 160, 67, 0.55);
  box-shadow: 0 0 0 2px rgba(35, 160, 67, 0.18);
}

/* IE-spesifinen: piilota natiivi nuoli IE11:ssä */
.category_container select::-ms-expand,
#bestsearch_types_mobile select::-ms-expand {
  display: none;
}

/* Breadcrumb-rivi: vasen-kohdistettu, ilmava yläpadding, pehmeät hover-värit.
   Bladen rakenne säilyy (.breadcrumbs > <span itemtype="BreadcrumbList">). */
.category_container > .breadcrumbs {
  text-align: left !important;
  padding-top: 24px !important;
  padding-bottom: 14px !important;
  font-size: 13px;
  color: #5a6b5a !important;
  line-height: 1.5;
}

.category_container > .breadcrumbs a {
  color: #5a6b5a;
  text-decoration: none;
  transition: color .15s ease;
}

.category_container > .breadcrumbs a:hover,
.category_container > .breadcrumbs a:focus-visible {
  color: #23a043;
  text-decoration: underline;
  outline: none;
}

@media (max-width: 768px) {
  .category_container > .breadcrumbs {
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    font-size: 12.5px;
  }
}

/* Etusivun uutiskirje-banner: hengittävä alamargin (jos selain tukee :has()) */
.col-12.or:has(.newsletter_holder) {
  margin-bottom: 48px;
}

/* Hengittävä alapadding sidebar+content -alueen JA footerin välille
   — vaikuttaa kaikkiin sivuihin joilla sidebar käytössä. */
.sidebar_and_content {
  padding-bottom: 48px;
}

#footer {
  margin-top: 24px;
}

@media (max-width: 1199px) {
  .col-12.or:has(.newsletter_holder) {
    margin-bottom: 32px;
  }
  .sidebar_and_content {
    padding-bottom: 32px;
  }
  #footer {
    margin-top: 16px;
  }
}

.sidebar {
  margin-top: 0 !important;
}

/* Mobiili-hamburger: parempi koko ja tappable area */
.vplux-header .toggle_mobilemenu {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
  cursor: pointer;
  padding: 4px;
  box-sizing: content-box;
}

/* Mobiilissa: tiukempi rivivälitys ja parempi haku */
@media (max-width: 1199px) {
  .vplux-header .row.top_padding_30 {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
  }
  .vplux-header .col-xs-12.col-sm-6.d-xl-none {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  .vplux-header .col-xs-12.col-sm-6.d-xl-none .header_search_button2 {
    top: 50% !important;
    transform: translateY(-50%);
    right: 18px !important;
    padding-top: 0 !important;
  }
}

/* Quicksearch-popup: pehmeämpi varjo ja rounded */
.vplux-header [v-if="!hide"] {
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
  top: 52px !important;
}

/* Mobile menu -drawer modernisointi (säilyttäen .mobile_menu, .mobilemenu_prods_toggle yms.) */
.mobile_menu {
  background-color: #0f1a0f !important;
  color: #ffffff !important;
  padding: 14px 16px !important;
  /* z-index korkealle, jotta drawer peittää aina banner-zonen (z=90),
     stickyn vplux-headerin (z=100) ja yleiset sticky-elementit. */
  z-index: 9999 !important;
}

/* Top-rivi (logo + close): override .whitebg ja kompaktimpi spacing */
.mobile_menu > .row:first-child,
.mobile_menu .row.whitebg {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px !important;
}

.mobile_menu > .row:first-child .top_padding_15 {
  padding-top: 0 !important;
}

/* Nollataan top-rivin .col-6 -bootstrap-paddingit, jotta close-nappi on
   tasan mobile_menun padding-rightin (16 px) reunasta. Muuten col antaisi
   15 px lisäpaddingia ja ostoskori-nappi osuisi close-napin päälle. */
.mobile_menu > .row:first-child > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.mobile_menu .header_logo {
  /* Alkuperäinen logo-väri säilyy — ei filter:invert -valkaisua.
     Max-height vakioi rivin korkeuden Kirjaudu/Ostoskori/× -nappien kanssa. */
  max-width: 96px;
  max-height: 40px;
  width: auto;
  height: auto;
  display: inline-block;
}

.mobile_menu .bottom_border_mm {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.mobile_menu a {
  color: #ffffff !important;
}

.mobile_menu .mobilemenu_prods_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile_menu .showchildren {
  display: inline-block;
  width: 100%;
}

/* Close-painike (×): pyöreä ja selkeästi näkyvä, ei pelkkä "X"-teksti */
.mobile_menu .toggle_mobilemenu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  font-size: 0 !important;       /* piilottaa alkuperäisen "X"-tekstin */
  font-weight: 500 !important;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile_menu .toggle_mobilemenu::before {
  content: "\00d7";              /* tyylikäs typografinen × */
  font-size: 26px;
  line-height: 1;
  display: block;
}

.mobile_menu .toggle_mobilemenu:hover,
.mobile_menu .toggle_mobilemenu:active {
  background: rgba(35, 160, 67, 0.30);
  transform: scale(0.96);
}

/* Kirjaudu sisään + Ostoskori siirretään ylös close-napin viereen pyöreinä
   ikoninappeina. DOM säilyy (mobile_buttons-divit jäävät listan loppuun,
   ne vain irrotetaan flowsta CSS:llä position: absoluteilla). */
.mobile_menu .mobile_buttons {
  position: absolute !important;
  top: 14px;
  right: 64px;                       /* default: Ostoskori-paikka, override :has() */
  width: 40px !important;
  height: 40px;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Sibling-pohjainen fallback (jos :has() ei tuettu): ensimmäinen .mobile_buttons
   on Kirjaudu sisään, sen perään seuraa Ostoskori. */
.mobile_menu .row > .mobile_buttons {
  right: 112px;
}
.mobile_menu .row > .mobile_buttons + .mobile_buttons {
  right: 64px;
}

.mobile_menu .mobile_buttons > a {
  position: relative;                /* SVG-keskitykselle */
  width: 100%;
  height: 100%;
  display: block !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  /* Teksti piilotetaan visuaalisesti — text-indent siirtää sen pois ilman
     että sen line-height tai white-space vaikuttaa SVG:n keskitykseen. */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile_menu .mobile_buttons > a:hover,
.mobile_menu .mobile_buttons > a:active {
  background: rgba(35, 160, 67, 0.30);
  transform: scale(0.96);
}

.mobile_menu .mobile_buttons > a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px !important;
  height: 22px !important;
  fill: currentColor;
  text-indent: 0;                    /* nollaa parentin text-indent SVG-sisällölle */
}

/* Sijoitukset: oikealta vasemmalle järjestyksessä  Kirjaudu | Ostoskori | × .
   .mobile_menu padding-right on 16 px ja close-nappi 40 px → ostoskori 64 px,
   kirjaudu 112 px oikeasta reunasta. */
.mobile_menu .mobile_buttons:has(a[onclick*="cart_preview"]) {
  right: 64px;
}
.mobile_menu .mobile_buttons:has(a[href="/account"]) {
  right: 112px;
}

/* Mobiilimenun valikkorivit: flex-layout pakottaa nuolen pystysuoraan keskitykseen
   (override vanha inline 'float: right; top: 4-6px') */
.mobile_menu .row > [class*="col-"] {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.mobile_menu .row > [class*="col-"] > a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile_menu img[src*="rightarrow"] {
  float: none !important;
  position: static !important;
  top: auto !important;
  margin: 0 0 0 auto !important;
  width: 11px;
  height: auto;
  flex-shrink: 0;
  align-self: center;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

/* Sticky-header kompensaatio: banner-zone tulee headerin jälkeen, ei piilon alle */
.vplux-banner-zone {
  margin-top: 0;
}

/* Print: ei stickyä */
@media print {
  .vplux-header {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   VPLUX modern sidebar (desktop-päämenu vasemmalla)
   - JS-sidonnaiset luokat pysyvät: .sidebar, .sidebar_content, .sidebar_submenu,
     .menu_subelement, .menu_onoff[data-id], .subelement_container[data-parent-id],
     .menu_sub_subelement
   - Parempi visuaalinen tila, suuremmat tappable-alueet, selkeämpi hover/active
   ========================================================================== */

@media (min-width: 1200px) {
  /* Sidebar-kortti: ilmavampi, pyöristetty, varjostus */
  .sidebar {
    width: 19% !important;
    padding-top: 24px !important;
    padding-left: 16px !important;
    padding-right: 8px !important;
    background-color: transparent !important;
  }

  .sidebar_content {
    background: #ffffff !important;
    border-radius: 16px;
    padding: 6px 4px;
    box-shadow: 0 1px 0 rgba(15, 26, 15, 0.04), 0 8px 24px rgba(15, 26, 15, 0.06);
    border: 1px solid rgba(15, 26, 15, 0.05);
    /* Ei sticky. position: relative säilyttää containing block -roolin
       .sidebar_submenu:lle (absolute), jotta hover-popup tulee oikealle
       paikalle. Submenu hoitaa pidempien alivalikkojen scrollauksen
       omalla overflow-y:llään. */
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
  }

  .contents_container {
    width: 81% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Yksittäinen valikkokohta: parempi spacing ja typografia */
  .sidebar_content .menu_subelement {
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(15, 26, 15, 0.04) !important;
    border-radius: 10px;
    margin: 1px 2px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.25;
  }

  .sidebar_content .menu_subelement:last-child {
    border-bottom: none !important;
  }

  .sidebar_content .menu_subelement:hover {
    background-color: rgba(35, 160, 67, 0.08) !important;
  }

  .sidebar_content .menu_subelement:hover > a {
    color: #0f1a0f !important;
  }

  .sidebar_content .menu_subelement a {
    color: #1f2a1f !important;
    font-weight: 500 !important;
    text-decoration: none;
    display: block;
    flex: 1;
    /* Mahdollistaa pitkien nimien wräppäyksen siististi */
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Vanha kelluva oikea nuoli — siistitään pois ja korvataan CSS-chevronilla */
  .sidebar_content .menu_subelement img[src*="rightarrow"] {
    display: none !important;
  }

  /* CSS-chevron näytetään vain niissä itemeissä, joilla on alivalikko —
     ne ovat .menu_onoff -luokassa JA niiden data-id matchaa subelement_containeriin.
     Yksinkertaistus: kaikki .menu_onoff -itemit saavat chevronin (sama logiikka kuin alkuperäisessä HTML:ssä,
     jossa <img src="rightarrow"> renderöitiin vain @if(count($m->children) > 0) -ehdolla,
     joten alkuperäinen logiikka säilyy: img-piilotus + uusi chevron tulee vain niihin missä alkuperäisesti oli kuva). */
  .sidebar_content .menu_subelement:has(img[src*="rightarrow"])::after,
  .sidebar_content .menu_subelement.has-children::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(15, 26, 15, 0.35);
    border-top: 2px solid rgba(15, 26, 15, 0.35);
    transform: rotate(45deg);
    transition: border-color .15s ease, transform .15s ease;
    flex-shrink: 0;
    margin-right: 4px;
  }

  .sidebar_content .menu_subelement:hover::after {
    border-color: #23a043;
    transform: rotate(45deg) translateY(-1px);
  }

  /* Sidebar submenu pop-up: pehmeämpi visuaalinen ulkoasu.
     Sisäinen scroll, jotta käyttäjä pääsee submenun alaosaan myös pienillä
     näytöillä (parent sidebar_content on sticky, joten sivun scrollaus ei
     auttaisi). */
  .sidebar_submenu {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 26, 15, 0.06) !important;
    box-shadow: 0 8px 32px rgba(15, 26, 15, 0.14), 0 2px 8px rgba(15, 26, 15, 0.06) !important;
    padding: 8px;
    min-width: 280px;
    max-width: 420px !important;
    margin-left: 8px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;       /* estää scrollin valumista sivulle */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 26, 15, 0.18) transparent;
  }
  .sidebar_submenu::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar_submenu::-webkit-scrollbar-thumb {
    background: rgba(15, 26, 15, 0.18);
    border-radius: 3px;
  }
  .sidebar_submenu::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Submenun yksittäiset linkit kortikkaaksi */
  .sidebar_submenu .menu_sub_subelement {
    padding: 9px 12px;
    border-radius: 8px;
    transition: background-color .12s ease;
    margin: 1px 0;
  }

  .sidebar_submenu .menu_sub_subelement:hover {
    background-color: rgba(35, 160, 67, 0.08);
  }

  .sidebar_submenu .menu_sub_subelement a {
    color: #1f2a1f !important;
    font-weight: 500;
    text-decoration: none;
    display: block;
    overflow-wrap: anywhere;
  }

  /* Etusivun outo margin-top: 150 px on jäänne header.jpg-ajalta */
  .sidebar {
    margin-top: 0 !important;
  }
}