/*
Theme Name: SaraBags / Storefront Child
Theme URI: https://sarabags.com/
Description: SaraBags.comin Storefront-lapsiteema
Author: Peak Things Oy
Author URI: https://sarabags.com/
Template: storefront
Version: 1.2.8
Text Domain: sarabags-storefront-child
*/

/* SARABAGS.COM | Storefront-lapsiteeman tyylit */

/* 01 | Yleiset asetukset */

body.sarabags-child-theme {
  background-color: var(--sb-white, #fff);
  color: var(--sb-black, #111);
}

/* 02 | Sivuston yläosa */

body.sarabags-child-theme .site-header {
  background: var(--sb-black, #111) !important;
  color: var(--sb-white, #fff) !important;
  border-bottom: 1px solid var(--sb-border, #ddd) !important;
}

body.sarabags-child-theme .site-header .site-title,
body.sarabags-child-theme .site-header .site-title a,
body.sarabags-child-theme .site-header .site-description {
  color: var(--sb-white, #fff) !important;
}

body.sarabags-child-theme .site-header .site-title a {
  text-decoration: none;
}

body.sarabags-child-theme .site-search {
  display: none !important;
}

/* 03 | Työpöydän header: logo ja kaksi keskitettyä valikkoriviä (768 px+) */

@media (min-width: 768px) {
  /* Pienennetään headerin alimmaista tyhjää tilaa. */
  body.sarabags-child-theme .site-header {
    padding-bottom: 0 !important;
  }

  /* Logo ja toissijainen valikko samaan keskitettyyn sarakkeeseen. */
  body.sarabags-child-theme .site-header > .col-full {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.sarabags-child-theme .site-header .site-branding {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 6px auto 18px !important;
    text-align: center !important;
  }

  /* Logo hieman nykyistä suuremmaksi – mobiilikokoon ei kosketa. */
  body.sarabags-child-theme .site-header .custom-logo,
  body.sarabags-child-theme .site-header .site-logo img {
    display: inline-block !important;
    box-sizing: border-box;
    width: 330px !important;
    max-width: 100% !important;
    max-height: 145px !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto 5px !important;
  }

  /* Toissijainen menu: Storefrontin oikealle kellutus pois. */
  body.sarabags-child-theme .site-header .secondary-navigation {
    display: block !important;
    box-sizing: border-box;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body.sarabags-child-theme .site-header .secondary-navigation ul.menu {
    display: flex !important;
    flex-direction: row;
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;
    float: none !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none;
  }

  body.sarabags-child-theme .site-header .secondary-navigation ul.menu > li {
    display: block;
    float: none !important;
    width: auto;
    margin: 0;
    padding: 0;
  }

  body.sarabags-child-theme .site-header .secondary-navigation ul.menu > li > a {
    display: block;
    padding: 3px 16px !important;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Ensisijainen menu ja ostoskori jatkavat yhtenä keskitettynä rivinä. */
  body.sarabags-child-theme .storefront-primary-navigation {
    margin-top: -12px !important;
  }

  body.sarabags-child-theme .storefront-primary-navigation .col-full {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
  }

  body.sarabags-child-theme .storefront-primary-navigation .main-navigation {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    text-align: center;
  }

  body.sarabags-child-theme .main-navigation .primary-navigation {
    display: inline-block;
  }

  body.sarabags-child-theme .main-navigation ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.sarabags-child-theme .main-navigation ul.menu > li > a {
    padding: 10px 16px;
    color: rgb(255 255 255 / 92%) !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
  }

  body.sarabags-child-theme .main-navigation ul.menu > li > a:hover,
  body.sarabags-child-theme .main-navigation ul.menu > li.current-menu-item > a {
    color: var(--sb-gold, #c58e28) !important;
  }

  body.sarabags-child-theme .storefront-primary-navigation #site-header-cart {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
  }

  body.sarabags-child-theme .storefront-primary-navigation #site-header-cart .cart-contents {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.sarabags-child-theme .site-header-cart .cart-contents::after {
    padding-right: 5px !important;
    padding-left: 8px !important;
  }

  /* Storefront / WooCommerce: leveä miniostoskori (työpöytä).
     Storefrontin oma sääntö määrittää paneelille oletuksena 100 %
     ostoskorilinkin leveydestä; siksi teksti pakkautuu kapeaksi.
     Sijoitusankkurina toimii navigaatiorivin koko leveys. */
  body.sarabags-child-theme .site-header .storefront-primary-navigation,
  body.sarabags-child-theme .site-header .storefront-primary-navigation > .col-full {
    overflow: visible !important;
  }

  body.sarabags-child-theme .site-header .storefront-primary-navigation > .col-full {
    position: relative !important;
  }

  /* Miniostoskorin absoluuttinen sijainti ei saa riippua
     vain 150 px leveästä ostoskorilinkistä. */
  body.sarabags-child-theme .site-header ul.site-header-cart,
  body.sarabags-child-theme .site-header ul.site-header-cart > li {
    position: static !important;
    overflow: visible !important;
  }

  /* Käytetään myös Storefrontin alkuperäistä luokkavalitsinta,
     jotta muotoilu toimii, vaikka ostoskorin DOM muuttuu hieman. */
  body.sarabags-child-theme .site-header .site-header-cart .widget_shopping_cart,
  body.sarabags-child-theme .site-header #site-header-cart .widget_shopping_cart,
  .site-header .storefront-primary-navigation ul.site-header-cart .widget_shopping_cart {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    width: min(800px, calc(100vw - 32px)) !important;
    min-width: min(800px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10001 !important;
    background: #0a0a0a;
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: min(72vh, 650px);
    overflow-x: hidden !important;
    overflow-y: auto;
    transition: visibility .15s ease, opacity .15s ease;
  }

  body.sarabags-child-theme .site-header #site-header-cart:hover .widget_shopping_cart,
  body.sarabags-child-theme .site-header ul.site-header-cart:hover .widget_shopping_cart,
  body.sarabags-child-theme .site-header #site-header-cart.focus .widget_shopping_cart,
  body.sarabags-child-theme .site-header ul.site-header-cart.focus .widget_shopping_cart,
  body.sarabags-child-theme .site-header #site-header-cart:focus-within .widget_shopping_cart,
  body.sarabags-child-theme .site-header ul.site-header-cart:focus-within .widget_shopping_cart,
  .site-header .storefront-primary-navigation ul.site-header-cart:hover .widget_shopping_cart,
  .site-header .storefront-primary-navigation ul.site-header-cart:focus-within .widget_shopping_cart {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.sarabags-child-theme .site-header .site-header-cart .widget_shopping_cart_content,
  .site-header .storefront-primary-navigation ul.site-header-cart .widget_shopping_cart_content {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 22px !important;
  }

  /* Anna tuoteriville koko leveys, mutta jätä tuotekuvalle oma paikka. */
  body.sarabags-child-theme .site-header .widget_shopping_cart .woocommerce-mini-cart-item,
  .site-header .storefront-primary-navigation .widget_shopping_cart .woocommerce-mini-cart-item {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 86px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  body.sarabags-child-theme .site-header .widget_shopping_cart .woocommerce-mini-cart-item img,
  .site-header .storefront-primary-navigation .widget_shopping_cart .woocommerce-mini-cart-item img {
    float: right;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    object-fit: contain;
    margin: 0 0 0 18px !important;
  }

  body.sarabags-child-theme .site-header .widget_shopping_cart .buttons,
  .site-header .storefront-primary-navigation .widget_shopping_cart .buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body.sarabags-child-theme .site-header .widget_shopping_cart .buttons a,
  .site-header .storefront-primary-navigation .widget_shopping_cart .buttons a {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;
    min-width: 180px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 18px !important;
    text-align: center;
    white-space: normal;
  }

  body.sarabags-child-theme .menu-toggle,
  body.sarabags-child-theme .handheld-navigation {
    display: none !important;
  }

  /* Kun vieritys ylittaa paavalikon alkuperaisen kohdan, pieni JS-toiminto
     lisaa taman luokan vain ensisijaiselle valikkoriville. */
  body.sarabags-child-theme .storefront-primary-navigation.sb-nav-stuck {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
  }

  /* WP:n hallintapalkki 32 px korkealla tyopoydan nakymassa. */
  body.admin-bar.sarabags-child-theme .storefront-primary-navigation.sb-nav-stuck {
    top: 32px !important;
  }

  /* JS-varaus estaa sisallon hyppaamisen kiinnittymishetkella. */
  body.sarabags-child-theme .sb-primary-placeholder {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

}

/* 04 | Tuotegalleria */

body.sarabags-child-theme.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow-x: auto;
  margin: 10px 0 0 !important;
  padding: 3px 2px 8px !important;
  list-style: none;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

body.sarabags-child-theme.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

body.sarabags-child-theme.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  box-sizing: border-box;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 6px;
  opacity: 1;
  cursor: pointer;
}

body.sarabags-child-theme.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border: 2px solid var(--sb-gold, #c58e28);
}

body.sarabags-child-theme.single-product .variations_form.sarabags-swatch-toggle-ready .reset_variations {
  display: none !important;
}

/* Vain mobiilia varten luodut elementit piiloon desktopissa. */

body.sarabags-child-theme.single-product .sarabags-mobile-product-title,
body.sarabags-child-theme.single-product .sarabags-mobile-price,
body.sarabags-child-theme.single-product .sarabags-mobile-variation-title {
  display: none;
}

/* 05 | Etusivun yleiset asetukset */

/* Etusivun WooCommerce-tuoteotsikon piilotus (aiempi Mukauttajan Oma CSS). */
body.home h1.woocommerce-products-header__title {
  display: none !important;
}

body.sarabags-child-theme.home .entry-title,
body.sarabags-child-theme.home .page-title,
body.sarabags-child-theme.home h1.entry-title {
  text-align: center !important;
}

body.sarabags-child-theme .wp-block-heading::before {
  display: none !important;
}

/* 06 | Sosiaalilinkit */

body.sarabags-child-theme .wp-container-core-social-links-is-layout-a446ad33 {
  display: none !important;
}

/* 07 | WooCommercen tulossa pian -sivu */

.woocommerce-coming-soon-default h1.wp-block-heading.woocommerce-coming-soon-banner,
.woocommerce-coming-soon-default .wp-block-loginout,
.woocommerce-coming-soon-default .woocommerce-coming-soon-powered-by-woo {
  display: none !important;
}

.woocommerce-coming-soon-default,
.woocommerce-coming-soon-default .wp-block-woocommerce-coming-soon {
  background-color: #000 !important;
  color: #fff !important;
}

.woocommerce-coming-soon-default .wp-block-woocommerce-coming-soon {
  position: relative;
  background-image: url("https://sarabags.com/wp-content/uploads/2025/11/sarabags-logo-w.png") !important;
  background-repeat: no-repeat !important;
  background-position: center 42% !important;
  background-size: 260px auto !important;
}

.woocommerce-coming-soon-default .wp-block-woocommerce-coming-soon::after {
  content: "Avataan pian";
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .woocommerce-coming-soon-default .wp-block-woocommerce-coming-soon::after {
    top: 62%;
    font-size: .95rem;
    letter-spacing: .14em;
  }
}

/* 08 | WooCommercen ilmoitukset */

body.sarabags-child-theme .woocommerce-message {
  box-sizing: border-box;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 24px !important;
  background: #f7f5f0 !important;
  color: #252525 !important;
  border: 0 !important;
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
}

body.sarabags-child-theme .woocommerce-message::before {
  position: static !important;
  display: block;
  margin: 0 auto 8px;
  color: #736247;
}

body.sarabags-child-theme .woocommerce-message .button,
body.sarabags-child-theme .woocommerce-message a.button {
  display: table;
  float: none !important;
  margin: 12px auto 0 !important;
  padding: 8px 14px !important;
  background: transparent !important;
  color: #252525 !important;
  border: 0 !important;
  border-left: 0 !important;
  text-align: center;
}

/* 09 | Alatunniste */

body.sarabags-child-theme .site-footer address,
body.sarabags-child-theme .sarabags-footer-company address {
  font-style: normal;
}

body.sarabags-child-theme .sarabags-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 42px;
  padding: 22px 0 4px;
  border-top: 1px solid rgb(0 0 0 / 8%);
  font-size: 13px;
  line-height: 1.6;
}

body.sarabags-child-theme .sarabags-footer-bottom-left,
body.sarabags-child-theme .sarabags-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.sarabags-child-theme .sarabags-footer-bottom a {
  color: inherit;
  text-decoration: none;
}

body.sarabags-child-theme .sarabags-footer-bottom a:hover,
body.sarabags-child-theme .sarabags-footer-bottom a:focus {
  text-decoration: underline;
}

body.sarabags-child-theme .sarabags-footer-separator {
  opacity: .45;
}

@media (max-width: 767px) {
  body.sarabags-child-theme .sarabags-footer-bottom {
    display: block;
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
  }

  body.sarabags-child-theme .sarabags-footer-bottom-left,
  body.sarabags-child-theme .sarabags-footer-bottom-right {
    justify-content: center;
    flex-wrap: wrap;
  }

  body.sarabags-child-theme .sarabags-footer-bottom-left {
    margin-bottom: 6px;
  }
}

/* 10 | Tuotesivujen tabletin asetukset (1024 px asti), headerin mobiiliraja 767 px */

@media (max-width: 1024px) {
  body.sarabags-child-theme {
    --sb-content-max: 640px;
    --sb-mobile-gutter: max(16px, calc((100vw - var(--sb-content-max)) / 2));
    --sb-product-inset: var(--sb-title-inset, var(--sb-mobile-gutter));
    --sb-price-zone: clamp(108px, 28vw, 150px);
    --sb-qty-zone: clamp(38px, 9vw, 50px);
    --sb-buy-row: 42px;
    --sb-variation-row: 38px;
    --sb-dock-gap: clamp(6px, 1.7vw, 10px);
  }

}

/* Header vaihtuu mobiilitilaan vasta alle 768 px leveydellä.
   Tuotesivujen omat tablettisäännöt pysyvät edelleen enintään 1024 px:ssa. */
@media (max-width: 767px) {
  /* Mobiiliheader: keskitetty logo ja oikealla valikkopainike. */

  body.sarabags-child-theme .site-header {
    display: grid !important;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
    align-items: end !important;
    box-sizing: border-box;
    width: 100% !important;
    position: relative !important;
    z-index: 2000;
    overflow: visible !important;
    padding: 16px var(--sb-mobile-gutter) !important;
    gap: 0 !important;
  }

  body.sarabags-child-theme .site-header .col-full,
  body.sarabags-child-theme .site-header .storefront-primary-navigation {
    display: contents !important;
  }

  body.sarabags-child-theme .site-header .site-branding {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: end !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
  }

  body.sarabags-child-theme .site-header .custom-logo,
  body.sarabags-child-theme .site-header .site-logo img {
    display: block !important;
    width: clamp(170px, 58vw, 285px) !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain;
  }

  body.sarabags-child-theme .site-header .site-search,
  body.sarabags-child-theme #site-header-cart,
  body.sarabags-child-theme .site-header .site-header-cart,
  body.sarabags-child-theme .main-navigation .primary-navigation {
    display: none !important;
  }

  body.sarabags-child-theme .site-header .main-navigation,
  body.sarabags-child-theme .site-header.sarabags-menu-aligned .main-navigation {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  body.sarabags-child-theme .site-header button.menu-toggle {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgb(255 255 255 / 45%) !important;
    border-radius: 8px;
    box-shadow: none !important;
    font-size: 0 !important;
    z-index: 2;
  }

  body.sarabags-child-theme .site-header button.menu-toggle span {
    font-size: 0 !important;
  }

  body.sarabags-child-theme .site-header button.menu-toggle::before,
  body.sarabags-child-theme .site-header button.menu-toggle::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 9px;
    width: 22px;
    height: 2px;
    margin: 0;
    background: #fff;
    border-radius: 2px;
    transform: none;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  body.sarabags-child-theme .site-header button.menu-toggle::before {
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
  }

  body.sarabags-child-theme .site-header button.menu-toggle::after,
  body.sarabags-child-theme .site-header button.menu-toggle span::before {
    display: none;
  }

  body.sarabags-child-theme .site-header button.menu-toggle[aria-expanded="true"]::before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  body.sarabags-child-theme .site-header button.menu-toggle[aria-expanded="true"]::after {
    display: block;
    transform: rotate(-45deg);
  }

  /* Mobiilivalikko: sisällön kokoinen liukuva paneeli ja sisäinen vieritys. */

  body.sarabags-child-theme .site-header .handheld-navigation {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    box-sizing: border-box;
    width: max-content !important;
    min-width: min(260px, calc(100vw - 32px));
    max-width: min(88vw, 420px) !important;
    height: auto !important;
    max-height: calc(100dvh - 90px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2001;
    padding: 10px 14px;
    background: var(--sb-black, #000);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 10px 0 0 10px;
    box-shadow: -10px 12px 28px rgb(0 0 0 / 28%);
    text-align: left;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 24px));
    transition: transform .24s ease, opacity .18s ease, visibility .18s ease;
  }

  body.sarabags-child-theme .site-header .main-navigation.toggled .handheld-navigation,
  body.sarabags-child-theme .site-header.sarabags-menu-aligned .main-navigation.toggled .handheld-navigation {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.sarabags-child-theme .site-header .handheld-navigation ul,
  body.sarabags-child-theme .site-header .handheld-navigation ul.menu {
    display: block !important;
    width: auto !important;
    min-width: 100%;
    float: none !important;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  body.sarabags-child-theme .site-header .handheld-navigation li {
    display: block !important;
    width: 100%;
    float: none !important;
    margin: 0;
  }

  body.sarabags-child-theme .site-header .handheld-navigation li a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 8px;
    color: #fff;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.sarabags-child-theme .site-header .handheld-navigation ul.sub-menu {
    box-sizing: border-box;
    padding-left: 12px;
  }

}

/* Tuotesivujen mobiili-/tablettiasettelu säilyy ennallaan (<=1024 px). */
@media (max-width: 1024px) {
  /* Tuotesivun mobiiliasettelu. */

  body.sarabags-child-theme.single-product #secondary,
  body.sarabags-child-theme.single-product .widget-area {
    display: none !important;
  }

  body.sarabags-child-theme.single-product #primary,
  body.sarabags-child-theme.single-product .content-area {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  body.sarabags-child-theme.single-product .site-main,
  body.sarabags-child-theme.single-product div.product {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.sarabags-child-theme.single-product .storefront-breadcrumb,
  body.sarabags-child-theme.single-product .woocommerce-breadcrumb {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    text-align: center;
  }

  body.sarabags-child-theme.single-product .sarabags-breadcrumb-path,
  body.sarabags-child-theme.single-product .sarabags-breadcrumb-product {
    display: block;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.sarabags-child-theme.single-product .sarabags-title-slot {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
  }

  body.sarabags-child-theme.single-product .sarabags-mobile-product-title {
    display: block !important;
    box-sizing: border-box !important;
    width: var(--sb-title-width, 100vw) !important;
    max-width: none !important;
    margin: 0 0 0 var(--sb-title-offset, 0px) !important;
    padding: 14px var(--sb-title-inset, 24px) !important;
    background: #f7f5f0 !important;
    color: #343434;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    font-size: clamp(1.25rem, 5vw, 1.85rem);
    line-height: 1.15;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  body.sarabags-child-theme.single-product .sarabags-mobile-product-title.sarabags-title-floating {
    z-index: 1000 !important;
  }

  body.sarabags-child-theme.single-product .summary > .woocommerce-product-details__short-description {
    clear: both;
    margin: 1.5rem 0 0;
  }

  body.sarabags-child-theme.single-product div.product > .product_meta,
  body.sarabags-child-theme.single-product div.product > .woocommerce-product-rating,
  body.sarabags-child-theme.single-product div.product > .storefront-product-sharing {
    clear: both;
    margin: 1.5rem 0;
  }

  /* Kiinteä mobiiliostopalkki ja sen yhteiset mitoitukset. */

  body.sarabags-mobile-cart {
    padding-bottom: calc(var(--sb-cart-height, 126px) + 16px) !important;
  }

  body.sarabags-child-theme.single-product .storefront-sticky-add-to-cart,
  body.sarabags-child-theme.single-product .storefront-handheld-footer-bar {
    display: none !important;
  }

  body.sarabags-child-theme.single-product .summary form.sarabags-purchase-panel {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999;
    box-sizing: border-box;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 6px var(--sb-product-inset) calc(6px + env(safe-area-inset-bottom)) !important;
    background: #f7f5f0 !important;
    color: #111;
    border-top: 1px solid rgb(0 0 0 / 10%) !important;
    box-shadow: 0 -3px 12px rgb(0 0 0 / 7%);
  }

  body.sarabags-child-theme.single-product .sarabags-purchase-panel .sarabags-mobile-variation-title {
    display: none !important;
  }

  body.sarabags-child-theme.single-product .sarabags-purchase-panel .single_add_to_cart_button {
    box-sizing: border-box;
    height: var(--sb-buy-row) !important;
    min-height: var(--sb-buy-row) !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    line-height: 1.1 !important;
    font-size: clamp(.72rem, 2.4vw, .88rem) !important;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .sarabags-purchase-panel .quantity {
    width: var(--sb-qty-zone) !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .sarabags-purchase-panel .quantity .qty {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: var(--sb-buy-row) !important;
    min-height: var(--sb-buy-row) !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    text-align: center !important;
  }

  /* Variaatiotuote: hinta / variaatiot / ostaminen / määrä / varastosaatavuus. */

  body.sarabags-child-theme.single-product .product-type-variable form.sarabags-purchase-panel {
    display: grid !important;
    grid-template-columns: minmax(0, var(--sb-price-zone)) minmax(0, 1fr) var(--sb-qty-zone) !important;
    grid-template-rows: var(--sb-variation-row) var(--sb-buy-row) minmax(14px, auto) !important;
    column-gap: var(--sb-dock-gap) !important;
    row-gap: 2px !important;
    align-items: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel > .sarabags-mobile-price {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 2px !important;
    text-align: left !important;
    font-size: clamp(1.28rem, 5vw, 1.65rem) !important;
    line-height: 1.02 !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel > .sarabags-mobile-price::before {
    content: "Hinta / kpl:";
    display: block;
    margin: 0 0 3px;
    font-size: .68rem;
    line-height: 1;
    font-weight: 400;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel > .sarabags-mobile-price::after {
    content: "sis. alv 25,5 %";
    display: block;
    margin-top: 3px;
    font-size: .58rem;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-mobile-price .woocommerce-price-suffix {
    display: none !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel > .variations {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations tr {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0;
    height: var(--sb-variation-row);
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations th,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations td {
    border: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations .label {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations .label label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .variations .value {
    flex: 1 1 auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .wcas-wrap,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .wcas-list {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .wcas-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .wcas-swatch {
    flex: 0 0 clamp(30px, 8vw, 34px) !important;
    box-sizing: border-box;
    width: clamp(30px, 8vw, 34px) !important;
    min-width: clamp(30px, 8vw, 34px) !important;
    height: clamp(30px, 8vw, 34px) !important;
    min-height: clamp(30px, 8vw, 34px) !important;
    margin: 0 !important;
    padding: 2px !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .wcas-swatch__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel > .single_variation_wrap,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .woocommerce-variation-add-to-cart {
    display: contents !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .single_add_to_cart_button {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    align-self: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .quantity {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .single_variation {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    align-self: start !important;
    margin: -1px 0 0 !important;
    padding: 0 !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .woocommerce-variation-price,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .woocommerce-variation-description {
    display: none !important;
  }

  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .woocommerce-variation-availability,
  body.sarabags-child-theme.single-product .product-type-variable .sarabags-purchase-panel .woocommerce-variation-availability p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
  }

  /* Tavallinen tuote: vastaavat vyöhykkeet; varastorivi siirretään JS:llä. */

  body.sarabags-child-theme.single-product .product-type-simple form.sarabags-purchase-panel {
    display: grid !important;
    grid-template-columns: minmax(0, var(--sb-price-zone)) minmax(0, 1fr) var(--sb-qty-zone) !important;
    grid-template-rows: var(--sb-buy-row) minmax(14px, auto) !important;
    column-gap: var(--sb-dock-gap) !important;
    row-gap: 2px !important;
    align-items: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-purchase-panel > .sarabags-simple-price {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-areas: "label" "amount" "tax";
    align-content: end;
    justify-items: start;
    align-self: stretch;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 2px !important;
    text-align: left !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price::before,
  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price::after {
    display: none !important;
    content: none !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price .sarabags-price-labels {
    display: contents !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price .sarabags-price-labels > span {
    grid-area: label;
    margin: 0 0 3px;
    font-size: .68rem;
    line-height: 1;
    font-weight: 400;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price .sarabags-price-amount {
    grid-area: amount;
    display: block;
    font-size: clamp(1.28rem, 5vw, 1.65rem);
    line-height: 1.02;
    font-weight: 700;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price .sarabags-price-amount .woocommerce-price-suffix {
    display: none !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-simple-price .sarabags-price-labels > small {
    grid-area: tax;
    display: block;
    margin-top: 3px;
    font-size: .58rem;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-purchase-panel .single_add_to_cart_button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    align-self: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-purchase-panel .quantity {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  body.sarabags-child-theme.single-product .product-type-simple .sarabags-purchase-panel > .sarabags-mobile-stock {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
  }

}

/* Alareunan mobiilipalkki näkyy vain varsinaisilla mobiilileveyksillä. */
@media (max-width: 767px) {
  /* Muiden mobiilisivujen alareunan pikanavigaatio. */

  body.sarabags-child-theme:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) .storefront-handheld-footer-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
  }

  body.sarabags-child-theme:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) .site-footer {
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  body.sarabags-child-theme.woocommerce-cart .storefront-handheld-footer-bar,
  body.sarabags-child-theme.woocommerce-checkout .storefront-handheld-footer-bar {
    display: none !important;
  }
}

/* Storefrontin mobiilin alareunavalikko ei kuulu desktop-headeriin. */
@media (min-width: 768px) {
  body.sarabags-child-theme .storefront-handheld-footer-bar {
    display: none !important;
  }
}

/* 11 | Erityisen kapeat näytöt (enintään 360 px) */

@media (max-width: 360px) {
  body.sarabags-child-theme {
    --sb-price-zone: 100px;
    --sb-qty-zone: 36px;
    --sb-dock-gap: 5px;
  }

  body.sarabags-child-theme.single-product .sarabags-purchase-panel .single_add_to_cart_button {
    font-size: .70rem !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
}

/* 12 | WooCommerce-virheilmoitukset */

.woocommerce-error {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Ilmoituksen kuvake. */

.woocommerce-error::before {
  color: #fff !important;
}

/* Ilmoituksen linkit. */

.woocommerce-error a,
.woocommerce-error .button {
  color: #fff !important;
}

/* Linkkien hover-väri. */

.woocommerce-error a:hover,
.woocommerce-error .button:hover {
  color: #e6a11a !important;
}

/* 13 | SaraBags-etusivu (.sb-home): vaikuttaa vain tätä lohkoa käyttäviin etusivuihin. */

body.home:has(.sb-home) {
  --sb-ink: #30261f;
  --sb-muted: #66594f;
  --sb-paper: #faf7f2;
  --sb-accent: #b08b60;
}

body.home:has(.sb-home) #masthead {
  margin-bottom: 0 !important;
  border-bottom: 0;
}

body.home:has(.sb-home) #content {
  padding-top: 0 !important;
}

body.home:has(.sb-home) #content > .col-full {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.home:has(.sb-home) #primary {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.home:has(.sb-home) #secondary,
body.home:has(.sb-home) .storefront-breadcrumb,
body.home:has(.sb-home) .woocommerce-products-header__title,
body.home:has(.sb-home) #main > .hentry > .entry-header {
  display: none;
}

body.home:has(.sb-home) .woocommerce-products-header,
body.home:has(.sb-home) .page-description,
body.home:has(.sb-home) #main > .hentry,
body.home:has(.sb-home) #main > .hentry > .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

body.home:has(.sb-home) #content > .col-full > .woocommerce:empty {
  display: none;
}

/* Etusivun automaattisen tuoteluettelon leveys. */

body.home:has(.sb-home) #main > .products,
body.home:has(.sb-home) #main > .storefront-sorting,
body.home:has(.sb-home) #main > .woocommerce-notices-wrapper {
  width: calc(100% - 40px);
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Tuotelistaus samalla 800 px enimmäisleveydellä tarinaosion kanssa. */

@media (min-width: 782px) {
  body.home:has(.sb-home) #main > .products,
  body.home:has(.sb-home) #main > .storefront-sorting,
  body.home:has(.sb-home) #main > .woocommerce-notices-wrapper,
  body.home:has(.sb-home) #main > .woocommerce-pagination {
    box-sizing: border-box;
    float: none !important;
    width: calc(100% - 40px) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.sb-home,
.sb-home * {
  box-sizing: border-box;
}

.sb-home {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sb-ink, #30261f);
  background: #fff;
  text-align: left;
}

.sb-home .sb-home-hero {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-top: 3px solid var(--sb-accent, #b08b60);
  border-radius: 0;
  overflow: hidden;
}

.sb-home .sb-home-hero img {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(340px, 33.333vw, 620px);
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.sb-home .sb-home-intro,
.sb-home .sb-home-selection {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(36px, 5vw, 72px) 20px;
  text-align: center;
}

/* Etusivun esittely: kokoleveä tausta, mutta sisältö 800 px linjassa tarinan kanssa. */

.sb-home .sb-home-intro {
  background: var(--sb-paper, #faf7f2);
  padding-left: max(20px, calc((100% - 800px) / 2)) !important;
  padding-right: max(20px, calc((100% - 800px) / 2)) !important;
}

.sb-home .sb-home-intro h2,
.sb-home .sb-home-intro p,
.sb-home .sb-home-intro .wp-block-buttons {
  width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.sb-home .sb-home-intro h2,
.sb-home .sb-home-intro p {
  white-space: normal !important;
}

.sb-home .sb-home-intro h2 {
  text-wrap: balance;
}

/* Esittelyosion tunnuslause hieman suuremmaksi. */

.sb-home .sb-home-intro .sb-home-eyebrow {
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: .1em !important;
  margin-bottom: 22px !important;
}

.sb-home .sb-home-intro .wp-block-buttons {
  justify-content: center !important;
}

@media (max-width: 767px) {
  .sb-home .sb-home-intro .sb-home-eyebrow {
    font-size: 14px !important;
  }
}

.sb-home h2 {
  color: var(--sb-ink, #30261f);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: .035em;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 20px;
  overflow-wrap: break-word;
}

.sb-home h2 strong {
  font-weight: inherit;
}

.sb-home p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--sb-muted, #66594f);
  margin: 0 0 18px;
}

.sb-home .sb-home-selection > h2,
.sb-home .sb-home-selection > p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.sb-home .sb-home-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sb-home .wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 0;
  gap: 12px;
}

.sb-home .wp-block-button__link {
  display: inline-block;
  max-width: 100%;
  padding: 14px 26px;
  color: #fff;
  background: var(--sb-ink, #30261f);
  border: 1px solid var(--sb-ink, #30261f);
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}

.sb-home .wp-block-button__link:hover {
  color: #fff;
  background: #564233;
}

.sb-home a:focus-visible {
  outline: 3px solid #91672f;
  outline-offset: 4px;
}

.sb-home .sb-home-selection {
  width: calc(100% - 40px);
  max-width: 800px;
  margin-inline: auto;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 36px;
}

@media (max-width: 781px) {
  .sb-home .sb-home-hero img {
    height: clamp(240px, 45vw, 340px);
    object-position: 49% 50%;
  }
}

@media (max-width: 359px) {
  .sb-home .sb-home-hero img {
    height: 220px;
  }
}

/* Tarinaosio: kuva säilyttää alkuperäisen kuvasuhteensa. */

.sb-home .sb-story-section {
  box-sizing: border-box;
  width: calc(100% - 40px) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: clamp(36px, 5vw, 72px) 0;
}

.sb-home .sb-story-section .sb-story-title {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(26px, 4vw, 48px);
  padding: 0;
}

.sb-home .sb-story-section .sb-story-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch !important;
  gap: clamp(20px, 2.5vw, 36px);
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}

.sb-home .sb-story-columns > .wp-block-column {
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  margin: 0 !important;
  padding: 0;
}

.sb-home .sb-story-section .sb-story-photo > figure {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Työpöydällä kuva hieman pienemmäksi, jotta se sopii tekstin rytmiin.
   Mobiilissa ja pystysuuntaisessa asettelussa kuvakoko säilyy ennallaan. */
@media (min-width: 782px) {
  .sb-home .sb-story-section .sb-story-columns:not(.sb-story-stacked) .sb-story-photo > figure {
    max-width: 350px;
    margin: 0 auto !important;
  }
}

.sb-home .sb-story-section .sb-story-photo > figure > img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  transform: none !important;
}

.sb-home .sb-story-columns > .sb-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  gap: 14px;
  align-self: stretch;
}

.sb-home .sb-story-copy > p {
  flex: 0 0 auto;
  color: #615248;
  font-size: var(--sb-story-font, clamp(14px, 1.5vw, 17px));
  line-height: 1.75;
  margin: 0 !important;
}

/* Myös JavaScriptin .sb-story-fitted-luokalla kappaleet pysyvät yhdessä.
   Keskityksen vuoksi kuvaa ei tarvitse suurentaa tekstin korkeuteen. */

.sb-home .sb-story-columns.sb-story-short > .sb-story-copy {
  justify-content: center;
  text-align: center;
}

.sb-home .sb-home-selection > p:last-child {
  margin-bottom: 0;
}

/* Tarinaosio: pitkä teksti siirtyy kuvan alle. */

.sb-home .sb-story-section .sb-story-columns.sb-story-stacked {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.sb-home .sb-story-columns.sb-story-stacked > .wp-block-column {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.sb-home .sb-story-columns.sb-story-stacked .sb-story-photo > figure {
  max-width: 520px;
  margin: 0 auto !important;
}

@media (max-width: 781px) {
  .sb-home .sb-story-section .sb-story-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    justify-items: center;
  }

  .sb-home .sb-story-columns > .wp-block-column {
    width: 100%;
    max-width: 640px;
    text-align: center;
  }

  .sb-home .sb-story-section .sb-story-photo > figure {
    max-width: 520px;
    margin: 0 auto !important;
  }

  .sb-home .sb-story-copy > p {
    font-size: clamp(16px, 2.4vw, 18px);
  }
}

/* Etusivun tuoteruudukko: mobiilissa kaksi saraketta. */

@media (max-width: 781px) {
  body.home:has(.sb-home) #main > ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;
    list-style: none;
  }

  /* Storefrontin apuelementit pois ruudukosta. */

  body.home:has(.sb-home) #main > ul.products::before,
  body.home:has(.sb-home) #main > ul.products::after {
    display: none !important;
    content: none !important;
  }

  body.home:has(.sb-home) #main > ul.products > li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  body.home:has(.sb-home) #main > ul.products > li.product img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto 12px;
  }

  body.home:has(.sb-home) #main > ul.products .woocommerce-loop-product__title {
    margin: 0 0 8px;
    font-size: clamp(14px, 3.5vw, 17px);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.home:has(.sb-home) #main > ul.products .price {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Tuotekorttien ostopainikkeet piiloon mobiilissa. */

  body.home:has(.sb-home) #main > ul.products > li.product > .button,
  body.home:has(.sb-home) #main > ul.products > li.product > .added_to_cart {
    display: none !important;
  }
}

/* Tuotemäärä ja sivutus piiloon etusivulla. */

body.home:has(.sb-home) #main .woocommerce-result-count,
body.home:has(.sb-home) #main .woocommerce-pagination {
  display: none !important;
}

/* Tuotelistan alapuolinen lajittelu piiloon. */

body.home:has(.sb-home) #main > ul.products ~ .storefront-sorting {
  display: none !important;
}

/* Ylempi lajittelu vasempaan reunaan. */

body.home:has(.sb-home) #main .storefront-sorting .woocommerce-ordering {
  float: none !important;
  width: auto;
  margin: 0;
  text-align: left;
}

/* Mobiililajittelu keskelle. */

@media (max-width: 767px) {
  body.home:has(.sb-home) #main .storefront-sorting .woocommerce-ordering {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  body.home:has(.sb-home) #main .woocommerce-ordering select {
    width: auto;
    max-width: 100%;
    margin: 0;
  }
}