/*
Theme Name: Storefront
Theme URI: http://woothemes.com/storefront
Author: WooThemes
Author URI: http://woothemes.com
Description: Storefront child theme for Kasvivalo Online.
Template: storefront
Version: 1.4.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
Tags: black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments

======
1.3.0 (2026-10-05): mobile fix.
- All original rules are kept. Rules that set fixed widths/heights/offsets
  are now wrapped in @media (min-width: 768px), so the desktop layout is
  unchanged and phones fall back to Storefront's responsive layout.
- New "MOBILE" section at the end (max-width: 767px) styles the header,
  menu, bottom bar, sidebar and footer for phones.
- Backup of the previous file: style-backup-2026-10-05.css
======
@font-face { font-family: Rothenburg Decorative; src: url(http://www.kasvivalo.fi/wp-content/themes/storefront-child/fonts/RothenburgDecorative.ttf); font-weight: normal; }
*/

/* =====================================================================
   1.4.7 (2026-10-08): Source Sans Pro self-hosted (was Google Fonts).
   Latin subset, the four styles the site uses. SIL Open Font License.
   Removes the render-blocking request to fonts.googleapis.com.
   ===================================================================== */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-pro-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-pro-400-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-pro-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/source-sans-pro-700.woff2) format('woff2');
}


/* =====================================================================
   ORIGINAL RULES (order kept; desktop-only parts wrapped in media queries)
   ===================================================================== */

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
margin-bottom: 0em;
}
a:focus, a:active {
outline: none;
}
@media (min-width: 768px) {
  #masthead {
    background-size: 80% auto;
    height: 500px;
    background-repeat: no-repeat;
  }
}
.site-header {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0;
border-bottom: none !important; /* removes default storefront "transparent" header border bottom */
}
/* current active page main menu link color */
.site-header ul.menu li.current-menu-item > a {
color: var(--kv-green-dark) !important;
}
/* main menu links */
.main-navigation ul li a {
color: #808080 !important;
}
@media (min-width: 768px) {
  .main-navigation ul li a {
    margin-top: -5px !important;
    font-size: 20px;
  }
}
.beta site-title a{
font-family: "Rothenburg Decorative", Arial, sans-serif !important;
}
@media (min-width: 768px) {
  .search-field {
    margin-top: 5px;
    margin-bottom: -5px;
  }
  /* header cart text */
  .site-header .site-header-cart a span {
    font-size: 20px !important;
    color: #808080 !important;
  }
  /* header cart icon */
  .site-header .site-header-cart a {
    font-size: 20px !important;
    margin-top: 5px;
  }
}
.widget_shopping_cart_content a {
color: #ffffff !important;
}
@media (min-width: 768px) {
  .main-navigation ul.menu, .main-navigation ul.nav-menu {
    margin-bottom: 10px !important;
  }
  .main-navigation {
    padding-top: 12.5px;
    padding-left: 6.66% !important;
    margin-bottom: 10px !important;
    height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  .main-navigation ul {
    padding-left: 25px !important;
    padding-bottom: 10px !important;
  }
  #site-navigation {
    height: 20px !important;
  }
  ul#menu-paavalikko.menu.nav-menu {
    height: 40px !important;
  }
}
.widget-area ul.menu li.current-menu-item > a {
color: #60646C !important;
}
@media (min-width: 768px) {
  .woocommerce-active .site-header .site-header-cart a, .woocommerce-active .site-header .site-header-cart {
    color: var(--kv-green);
    font-size: 14px;
    padding-bottom: 1.618em;
  }
}
.widget_shopping_cart_content {
border: 1px solid #000;
border-top-style: none;
}
.col-full {
max-width: 75.141em;
}
@media (min-width: 768px) {
  .col-full {
    margin-top: 40px;
  }
}
/* Align add to cart buttons on front page */
.woocommerce ul.products, .woocommerce-page ul.products{
	display: flex;
	flex-wrap: wrap;
}

.woocommerce ul.products li.product{
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link{
	flex-grow: 1;
	display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product .button{
	align-self: flex-start;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
	flex-grow: 1;
}
@media (min-width: 768px) {
  .site-content {
    margin-top: -50px;
  }
  .content-area {
    width: 62.91304% !important;
    float: left;
  }
  /* 1.3.3: keeps the right-hand column where the Klarna sidebar badge was
     (10.6% + 5% margin), so the layout stays as before the template cleanup.
     Remove this rule to let the content sit right next to the right edge. */
  .left-sidebar .content-area {
    margin-right: 15.6%;
  }
}
/*
Make Smileyface before stock level invisible
*/
p.stock.in-stock::before {
display: none !important;
}
@media (min-width: 768px) {
  .widget-area {
    width: 16.73913% !important;
  }
  .left-sidebar .widget-area {
    margin-right: 3.5% !important;
  }
}
.product-categories {
font-size: 16px;
}
#menu-sivupalkin-valikko {
font-size: 16px;
}
.storefront-sorting select {
width: 13em !important;
}
@media (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    width: 26% !important;
  }
  .woocommerce-tabs .panel {
    width: 67.7059% !important;
  }
  .sidebarright {
    width: 10.6%;
    float: right;
    margin-left: 5%;
    height: 390px;
    margin-top: 5%;
  }
}
.mthr {
height: 3px !important;
}
.sidebarright .maksutavat {
padding-left: 14%;
}
.paypal-logo {
width: 115px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
@media (min-width: 768px) {
  .sidebarright-single {
    width: 120px;
    float: right;
    margin-left: 5%;
    height: 390px;
  }
}
.input-text {
background-color: #f8f8f8 !important;
}
@media (min-width: 768px) {
  .col2-set .form-row-first {
    width: 42% !important;
    margin-right: 8% !important;
  }
  .col2-set .form-row-last {
    width: 50% !important;
  }
}
.site-footer {
display: block;
margin-left: auto;
margin-right: auto;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iMzAiPgo8ZGVmcz4KPHJlY3QgaWQ9InIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNSIgZmlsbD0iI2Y2ZjZmNiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZT0iI2RkZGRkZCI+PC9yZWN0Pgo8ZyBpZD0icCI+Cjx1c2UgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8dXNlIHk9IjE1IiB4bGluazpocmVmPSIjciI+PC91c2U+Cjx1c2UgeT0iMzAiIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPHVzZSB5PSI0NSIgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8L2c+CjwvZGVmcz4KPHVzZSB4bGluazpocmVmPSIjcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMjUpIHNrZXdZKDQwKSI+PC91c2U+Cjx1c2UgeGxpbms6aHJlZj0iI3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDApIHNrZXdZKC00MCkiPjwvdXNlPgo8L3N2Zz4=");
}
@media (min-width: 768px) {
  .site-footer {
    width: 1950px;
    height: 200px;
  }
}
.footer-widgets {
padding-top: 1em;
}
.footerdiv a, .footerdiv a:hover {
color: #fff;
}
.socialicons {
background: none;
}
@media (min-width: 768px) {
  .footerdiv {
    width: 1000px;
  }
  .footerfloatleft {
    width: 200px;
    float: left;
  }
  .footerfloatfarright {
    width: 200px;
    height: 30px;
    float: right;
  }
  .footerfloatright {
    width: 300px;
    float: right;
    padding-bottom: 35px;
    margin-right: 140px;
  }
}

.add_to_cart_button, .single_add_to_cart_button {
border-radius: 3px;
}
/* Number badge on the header cart is for phones only */
@media (min-width: 768px) {
  .site-header .site-header-cart .kv-cart-badge {
    display: none;
  }
}


/* =====================================================================
   MOBILE (phones, under 768 px) - new in 1.3.0
   Desktop is not affected by anything below.
   ===================================================================== */
@media (max-width: 767px) {

  /* ---------- Header: banner on top, menu button + cart below ---------- */
  #masthead {
    height: auto;
    background-repeat: no-repeat;
    background-size: 100% auto;          /* banner is 1950 x 500 */
    background-position: center 8px;
    padding-top: calc(25.64vw + 8px);    /* 500/1950 = 25.64% of width */
    margin-bottom: 0;
  }
  #masthead > .col-full {
    margin-top: 0;
  }
  #masthead > .col-full > .col-full {
    margin-top: 0;
  }
  #masthead .site-branding {
    margin: 0;
    float: none;
    width: auto;
  }
  .storefront-primary-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 10px;
    border-bottom: 1px solid #e6e6e6;
  }
  .storefront-primary-navigation > .col-full {
    position: relative;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }
  .main-navigation {
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
  }

  /* Menu button: was white on white (Customizer header text colour) */
  button.menu-toggle,
  button.menu-toggle:hover {
    color: var(--kv-green);
    background-color: #ffffff;
    border: 2px solid var(--kv-green);
    border-radius: 4px;
    float: none;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }
  button.menu-toggle:before,
  button.menu-toggle:after,
  button.menu-toggle span:before {
    background-color: var(--kv-green);
  }

  /* Opened handheld menu */
  .main-navigation.toggled .handheld-navigation {
    border-top: 1px solid #e6e6e6;
    margin-top: 10px;
  }
  .handheld-navigation ul.menu li a,
  .main-navigation .handheld-navigation ul li a {
    color: #2f3a30 !important;
    font-size: 17px;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f0f0;
    text-shadow: none;
  }
  .handheld-navigation ul.menu li.current-menu-item > a {
    color: var(--kv-green-dark) !important;
  }
  .handheld-navigation .dropdown-toggle {
    color: var(--kv-green);
  }

  /* Cart in the header row (top right): icon + total + item count badge */
  .woocommerce-active .site-header .site-header-cart {
    display: block;
    position: absolute;
    right: 0;
    top: 4px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .site-header .site-header-cart a.cart-contents:before {
    content: "\f291";                    /* basket icon (Font Awesome, loaded by Storefront) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
  }
  .site-header .site-header-cart a.cart-contents {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 8px 0;
    color: var(--kv-green) !important;
    font-weight: 600;
    font-size: 15px;
  }
  .site-header .site-header-cart a.cart-contents:after {
    position: static;
    font-size: 22px;
    line-height: 1;
    color: var(--kv-green);
    order: -1;
  }
  /* Phones: no total or "x tuotetta" text, only the icon with a number badge.
     The header cart is hidden while the cart is empty (class set in functions.php). */
  .woocommerce-active .site-header .site-header-cart.kv-cart-empty {
    display: none;
  }
  .site-header .site-header-cart a.cart-contents .amount,
  .site-header .site-header-cart a.cart-contents .count {
    display: none;
  }
  .site-header .site-header-cart li {
    position: relative;
  }
  .site-header .site-header-cart a.cart-contents {
    padding: 10px 14px 10px 10px;
  }
  .site-header .site-header-cart a.cart-contents:before {
    font-size: 26px;
  }
  .site-header .site-header-cart .kv-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: var(--kv-green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;            /* taps go through to the cart link */
  }

  /* ---------- Content: full width ---------- */
  .col-full {
    margin-top: 0;
  }
  .site-content {
    margin-top: 0;
    padding-top: 1em;
  }
  .content-area,
  .widget-area {
    width: 100%;
    float: none;
    margin-right: 0;
  }
  h1.page-title,
  .woocommerce-products-header__title {
    font-size: 30px;
    margin-bottom: .5em;
  }

  /* Klarna sidebar badge: hidden on phones (the footer placement stays) */
  .sidebarright,
  .sidebarright-single {
    display: none;
  }

  /* Product grid: 2 columns */
  .site-main ul.products li.product {
    width: 48%;
    margin-right: 4%;
    float: none;
    margin-bottom: 2em;
  }
  .site-main ul.products li.product:nth-child(2n) {
    margin-right: 0;
  }
  .woocommerce ul.products li.product .button {
    align-self: stretch;
    font-size: 14px;
    padding: .7em .5em;
    text-align: center;
    white-space: normal;
  }
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
  }

  /* Bestsellers slider: keep inside the screen */
  .wcpscwc-product-slider-wrap {
    width: 100%;
    overflow: hidden;
  }
  .wcpscwc-product-slider-wrap img {
    max-height: 220px;
    width: auto;
    margin: 0 auto;
  }

  /* Single product: tabs and summary full width */
  .woocommerce-tabs ul.tabs,
  .woocommerce-tabs .panel {
    width: 100%;
    float: none;
  }

  /* Checkout: one field per row */
  .col2-set .form-row-first,
  .col2-set .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }

  /* ---------- Sidebar (Osastot / Sivut) as tappable chips ---------- */
  #secondary {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid #e6e6e6;
  }
  #secondary .widget ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }
  #secondary .widget ul li,
  #secondary .widget ul ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #secondary .widget ul ul {
    display: contents;             /* sub-categories become chips too */
  }
  #secondary .widget ul li:before {
    display: none;
  }
  #secondary .widget ul li a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #cfe6cf;
    border-radius: 999px;
    background: #f4faf4;
    color: #2f3a30;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  #secondary .widget ul li.current-cat > a,
  #secondary .widget ul li.current-menu-item > a {
    background: var(--kv-green);
    border-color: var(--kv-green);
    color: #ffffff !important;
  }
  /* Categories and pages are in the Handheld Menu (Mobiilivalikko),
     so the sidebar is hidden on phones. The chip styles above are kept
     in case the sidebar is shown again. */
  #secondary { display: none; }

  /* ---------- Footer ---------- */
  .site-footer {
    width: auto;
    height: auto;
    padding-bottom: 90px;        /* room for the fixed bottom bar */
  }
  .footerdiv,
  .footerfloatleft,
  .footerfloatright,
  .footerfloatfarright {
    width: auto;
    height: auto;
    float: none;
    margin: 0 0 1em;
  }

  /* ---------- Bottom bar (Oma tili / Haku / Ostoskori) ---------- */
  .storefront-handheld-footer-bar {
    background: #ffffff;
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }
  .storefront-handheld-footer-bar ul li > a,
  .storefront-handheld-footer-bar ul li.search .site-search {
    background-color: #ffffff;
  }
  .storefront-handheld-footer-bar ul li > a:before,
  .site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) {
    color: var(--kv-green);
  }
  .storefront-handheld-footer-bar ul li {
    border-right: 1px solid #f0f0f0;
  }
  .storefront-handheld-footer-bar ul li:last-child {
    border-right: 0;
  }
  .storefront-handheld-footer-bar ul li.cart > a {
    background-color: #f4faf4;
  }
  .storefront-handheld-footer-bar ul li.cart .count {
    background-color: var(--kv-green);
    border-color: #ffffff;
    color: #ffffff;
    font-weight: 700;
  }
  .storefront-handheld-footer-bar ul li.search .site-search {
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }
}

/* Keyboard focus stays visible (overrides the outline:none above for keyboard users only) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--kv-green);
  outline-offset: 2px;
}

/* =====================================================================
   1.3.1: visible "Hae" button inside the search field (all screen sizes)
   (Storefront hides the submit button; the label text is set in functions.php)
   ===================================================================== */
.woocommerce-product-search {
  position: relative;
}
.woocommerce-product-search .search-field {
  padding-right: 80px;
}
.woocommerce-product-search button[type="submit"] {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: 4px !important;
  left: auto !important;
  width: auto !important;
  min-width: 64px;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  margin: 0;
  padding: 0 18px !important;
  border-radius: 3px;
  background: var(--kv-green);
  border-color: var(--kv-green);
  color: #ffffff;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1;
}
@media (min-width: 768px) {
  .woocommerce-product-search .search-field {
    padding-right: 60px;
  }
  .woocommerce-product-search button[type="submit"] {
    min-width: 0;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

/* =====================================================================
   1.3.2 (2026-10-05): header between phone and wide desktop
   - 1024-1799 px: same layout as at 1800 px, but the menu, cart and search
     are positioned relative to the shelf image and scale with the screen.
   - 768-1023 px: banner on top, one row below with menu, cart and search.
   - 1800 px and wider: unchanged.
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1799px) {
  #masthead { position: relative; height: 28vw; background-size: 80% auto; background-position: center center; }
  #masthead .col-full, #masthead .storefront-primary-navigation { position: static; }
  #masthead .site-search { position: absolute; left: 67.7vw; top: 4.4vw; width: 15vw; min-width: 190px; margin: 0; float: none; }
  #masthead .site-search .search-field { margin: 0; }
  #site-navigation.main-navigation { position: absolute; left: 24.5vw; top: 12.3vw; width: auto; height: auto !important; margin: 0 !important; padding: 0 !important; float: none; clear: none; }
  #site-navigation ul#menu-paavalikko.menu.nav-menu, #site-navigation .primary-navigation ul { height: auto !important; margin: 0 !important; padding: 0 !important; display: flex; gap: 2.4vw; }
  #site-navigation ul li a { margin: 0 !important; padding: 0.5em 0 !important; font-size: clamp(14px, 1.12vw, 20px); }
  #masthead .site-header-cart { position: absolute; left: 67.7vw; top: 12.1vw; width: 13.6vw; min-width: 170px; margin: 0; padding: 0 !important; float: none; }
  #masthead .site-header-cart a.cart-contents { margin: 0; padding: 0.5em 0; }
  #masthead .site-header-cart a span { font-size: clamp(14px, 1.12vw, 20px) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #masthead { height: auto; background-size: 100% auto; background-position: center 8px; padding-top: 21vw; margin-bottom: 1em; }
  #masthead > .col-full { margin-top: 0; display: flex; align-items: center; gap: 16px; padding-left: 16vw; padding-right: 0; }
  #masthead > .col-full > .col-full { order: 2; flex: 0 0 auto; margin: 0; padding: 0; width: auto; }
  #masthead .site-branding { display: none; }
  #masthead .site-search { float: none; width: 170px; margin: 0; }
  #masthead .storefront-primary-navigation { order: 1; flex: 1 1 auto; }
  #masthead .storefront-primary-navigation > .col-full { margin: 0; padding: 0; width: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #site-navigation.main-navigation { width: auto; height: auto !important; margin: 0 !important; padding: 0 !important; float: none; }
  #site-navigation ul#menu-paavalikko.menu.nav-menu { height: auto !important; margin: 0 !important; padding: 0 !important; display: flex; gap: 18px; }
  #site-navigation ul li a { margin: 0 !important; padding: .5em 0 !important; font-size: 16px; white-space: nowrap; }
  #masthead .site-header-cart { float: none; width: auto; padding: 0 !important; margin: 0; }
  #masthead .site-header-cart a.cart-contents { margin: 0; padding: .5em 0; white-space: nowrap; }
  #masthead .site-header-cart a span { font-size: 15px !important; }
  #masthead .site-header-cart a.cart-contents .count { display: none; }
  .site-content { margin-top: 0; }
}

/* =====================================================================
   1.3.4 (2026-10-05): site title text
   The shelf banner is the visual logo. Now that the Site Title is set, its
   text (white on white) took up space and pushed the menu down. Keep it
   for search engines and screen readers, show it only on keyboard focus.
   ===================================================================== */
.site-header .site-branding {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-header .site-branding:focus-within {
  z-index: 100;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 6px 12px;
  background: #ffffff;
}
.site-header .site-branding:focus-within a {
  color: var(--kv-green) !important;
}

/* =====================================================================
   1.3.5 (2026-10-05): compact breadcrumb
   Storefront's breadcrumb bar (shop page 2+, categories, products) had
   large padding plus the 40px .col-full offset, leaving ~150px of empty
   space under the header. Breadcrumb kept (navigation + Google), spacing reduced.
   ===================================================================== */
.storefront-breadcrumb {
  padding: 0;
  margin: 0 0 .5em;
}
.storefront-breadcrumb .col-full {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .storefront-breadcrumb {
    margin: -20px 0 0;
  }
  .storefront-breadcrumb + #content {
    margin-top: 0;
  }
}

/* =====================================================================
   1.3.6 (2026-10-05): footer
   - Customer-service links + Y-tunnus in the footer (markup in functions.php).
   - Footer content was centred in a fixed 1950px box, so on screens
     narrower than that it sat off-centre and the Klarna badge was cut off
     on the right. The footer now spans the window on all widths.
   ===================================================================== */
.site-footer {
  width: auto !important;
  height: auto !important;
  min-height: 200px;
}
.site-footer .site-info {
  padding: 1.5em 0;
}
.kv-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.5em;
  margin-bottom: .75em;
}
.site-footer .kv-footer-links a {
  color: #2f3a30 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .kv-footer-links a:hover {
  color: var(--kv-green-dark) !important;
}
.kv-footer-company {
  margin: 0;
  color: #383838;
}

/* =====================================================================
   1.4.0 (2026-10-05): design refresh, step 1 - colours and typography
   One palette for the whole shop. Button green #1f6b2c is set in the
   Customizer (Ulkoasu > Mukauta > Painikkeet); the same value is used here.
   Earlier hard-coded greens in this file now use these variables too.
   ===================================================================== */
:root {
  --kv-green: #1f6b2c;        /* primary: buttons, links, icons (white text 6.6:1) */
  --kv-green-dark: #065213;   /* hover / active (white text 9.4:1) */
  --kv-green-tint: #eef5ef;   /* light green backgrounds */
  --kv-accent: #b5532c;       /* terracotta: sale badges, highlights (white text 5.0:1) */
  --kv-text: #4a4d54;         /* body text (unchanged) */
  --kv-heading: #2b2f2c;      /* headings, prices */
  --kv-cream: #f6f3ec;        /* warm off-white section background */
  --kv-radius: 6px;
}

/* ---------- Links: brand green instead of WooCommerce purple ---------- */
a {
  color: var(--kv-green);
}
a:hover {
  color: var(--kv-green-dark);
}
a:focus,
button:focus,
.button:focus,
input:focus,
textarea:focus,
select:focus {
  outline-color: var(--kv-green);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.page-title,
.product_title,
.woocommerce-products-header__title {
  color: var(--kv-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-main h2,
.widget .widget-title,
.widget .widgettitle {
  font-weight: 600;
}
ul.products li.product .woocommerce-loop-product__title {
  color: var(--kv-heading);
  font-weight: 600;
}

/* ---------- Prices ---------- */
ul.products li.product .price,
.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--kv-heading);
  font-weight: 600;
}
ul.products li.product .price del,
.single-product div.product .price del {
  color: #8a8d92;
  font-weight: 400;
}
ul.products li.product .price ins,
.single-product div.product .price ins {
  color: var(--kv-accent);
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Buttons ---------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wc-block-components-button {
  border-radius: var(--kv-radius);
  font-weight: 600;
}
.added_to_cart,
.widget a.button.checkout {
  background-color: var(--kv-green);
  border-color: var(--kv-green);
  color: #ffffff;
}
.added_to_cart:hover,
.widget a.button.checkout:hover {
  background-color: var(--kv-green-dark);
  border-color: var(--kv-green-dark);
  color: #ffffff;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  background-color: var(--kv-green);
  border-radius: var(--kv-radius);
}

/* ---------- Sale badge ---------- */
.onsale,
.wc-block-grid__product-onsale {
  background-color: var(--kv-accent);
  border: 0;
  border-radius: var(--kv-radius);
  color: #ffffff !important;
  font-weight: 700;
  padding: .3em .8em;
}

/* ---------- Ratings, WooCommerce widgets ---------- */
.star-rating span:before,
p.stars a:hover:after,
p.stars a:after,
p.stars.selected a.active:before,
p.stars:hover a:before,
p.stars.selected a:not(.active):before,
.quantity .plus,
.quantity .minus,
#payment .payment_methods li input[type=radio]:first-child:checked + label:before {
  color: var(--kv-green);
}
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--kv-green);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--kv-green);
}

/* ---------- Header on desktop: menu and cart in brand green ---------- */
@media (min-width: 768px) {
  .main-navigation ul li a {
    color: var(--kv-green) !important;
    font-weight: 600;
    text-shadow: none;
  }
  .main-navigation ul li a:hover,
  .site-header ul.menu li.current-menu-item > a {
    color: var(--kv-green-dark) !important;
    text-decoration: none !important;
  }
  .woocommerce-active .site-header .site-header-cart a,
  .site-header .site-header-cart a span {
    color: var(--kv-green) !important;
  }
}

/* =====================================================================
   1.4.1 (2026-10-06): design refresh, step 2 - product cards
   Cards with a light frame, left-aligned text, title max 2 lines,
   full-width button, "Loppuunmyyty" badge for out-of-stock products.
   (Overrides the centre alignment set in Storefront WooCommerce Customiser.)
   ===================================================================== */
body .site-main ul.products li.product {
  position: relative;
  box-sizing: border-box;
  padding: 12px 12px 16px;
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid #e7e4dc;
  border-radius: 10px;
  text-align: left;
  transition: box-shadow .2s ease, transform .2s ease;
}
body .site-main ul.products li.product:hover {
  box-shadow: 0 8px 22px rgba(31, 46, 34, .10);
  transform: translateY(-2px);
}
body .site-main ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--kv-radius);
  margin: 0 0 12px;
}
body .site-main ul.products li.product .woocommerce-loop-product__title {
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 .4em;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body .site-main ul.products li.product .price {
  display: block;
  text-align: left;
  font-size: 17px;
  margin: 0 0 .9em;
}
body .site-main ul.products li.product .button {
  display: block;
  width: 100%;
  align-self: stretch;
  margin: auto 0 0;
  padding: .75em .5em;
  text-align: center;
  font-size: 15px;
}
body .site-main ul.products li.product .added_to_cart {
  display: block;
  margin-top: .5em;
  text-align: center;
}
/* Sale badge position on cards */
body .site-main ul.products li.product .onsale {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  margin: 0;
  font-size: 13px;
}

/* ---------- Out of stock ---------- */
body .site-main ul.products li.product.outofstock img {
  opacity: .5;
}
body .site-main ul.products li.product.outofstock .woocommerce-LoopProduct-link {
  position: relative;
}
body .site-main ul.products li.product.outofstock .woocommerce-LoopProduct-link::before {
  content: "Loppuunmyyty";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: .3em .8em;
  border-radius: var(--kv-radius);
  background: var(--kv-heading);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}
body .site-main ul.products li.product.outofstock .button {
  background: transparent;
  border: 2px solid var(--kv-green);
  color: var(--kv-green);
}
body .site-main ul.products li.product.outofstock .button:hover {
  background: var(--kv-green);
  color: #ffffff;
}

/* ---------- Bestseller slider: gaps between cards, room for the shadow ---------- */
.wcpscwc-product-slider .slick-list {
  margin: 0 -8px;
  padding: 4px 0 12px;
}
.wcpscwc-product-slider ul.products li.product.slick-slide {
  margin: 0 8px !important;
}

@media (max-width: 767px) {
  body .site-main ul.products li.product {
    padding: 8px 8px 12px;
  }
  body .site-main ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
  }
  body .site-main ul.products li.product .price {
    font-size: 15px;
  }
  body .site-main ul.products li.product .button {
    font-size: 14px;
  }
}

/* =====================================================================
   1.4.2 (2026-10-06): design refresh, step 3
   Cookie banner buttons, product page clean-up, dark-green footer.
   ===================================================================== */

/* ---------- Cookie banner (CookieYes has no colour setting for these) ---------- */
.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-reject {
  background-color: var(--kv-green) !important;
  border-color: var(--kv-green) !important;
  color: #ffffff !important;
  border-radius: var(--kv-radius) !important;
  font-weight: 600 !important;
}
.cky-btn.cky-btn-accept:hover,
.cky-btn.cky-btn-reject:hover {
  background-color: var(--kv-green-dark) !important;
  border-color: var(--kv-green-dark) !important;
  opacity: 1 !important;
}
.cky-btn.cky-btn-customize,
.cky-btn.cky-btn-preferences {
  background-color: #ffffff !important;
  border: 2px solid var(--kv-green) !important;
  color: var(--kv-green) !important;
  border-radius: var(--kv-radius) !important;
  font-weight: 600 !important;
}

/* ---------- Product page ---------- */
/* Keyword list and previous/next product thumbnails: clutter */
.single-product .product_meta .tagged_as,
.storefront-product-pagination {
  display: none !important;
}
.single-product div.product p.price {
  font-size: 1.6em;
  margin-bottom: .6em;
}
.single-product div.product .stock.in-stock {
  color: var(--kv-green);
  font-weight: 600;
}
.single-product div.product form.cart .single_add_to_cart_button {
  padding: .85em 1.8em;
  font-size: 1.05em;
}

/* Trust box under the add-to-cart button (markup in functions.php) */
.kv-trust {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 1em 1.2em;
  background: var(--kv-cream);
  border-radius: var(--kv-radius);
  font-size: 15px;
}
.kv-trust li {
  position: relative;
  padding-left: 1.6em;
  margin: .25em 0;
  color: var(--kv-heading);
}
.kv-trust li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--kv-green);
  font-weight: 700;
}

/* Description, details and reviews as stacked sections instead of tabs */
.single-product .woocommerce-tabs ul.tabs {
  display: none !important;
}
.single-product .woocommerce-tabs .panel {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 2em;
  padding-top: 1.5em;
  border-top: 1px solid #e7e4dc;
}
.single-product .woocommerce-tabs .panel h2 {
  font-size: 1.4em;
  margin-bottom: .6em;
}

/* ---------- Footer: solid dark green, four columns ---------- */
.site-footer {
  background: #173d21 !important;
  color: #dfe9e1;
}
.site-footer .footerfloatfarright {
  display: none;            /* old Klarna spot; Klarna is now in the "Maksutavat" column */
}
.kv-footer {
  padding: 3em 0 1.5em !important;
}
.kv-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2em;
}
.kv-footer .kv-footer-title {
  color: #ffffff;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .8em;
  padding: 0;
  border: 0;
}
.kv-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kv-footer li {
  margin: 0 0 .45em;
}
.kv-footer p {
  margin: 0 0 .45em;
  color: #dfe9e1;
}
.site-footer .kv-footer a:not(.button) {
  color: #ffffff !important;
  text-decoration: none;
}
.site-footer .kv-footer a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 1.4.8: static payment logos (images/pay-*.svg) instead of Klarna's script */
.kv-footer .kv-pay-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: .7em .8em;
  background: #ffffff;
  border-radius: var(--kv-radius);
}
.kv-footer .kv-pay-badges li {
  margin: 0;
}
.kv-footer .kv-pay-badges img {
  display: block;
  width: auto;
  height: 24px;
}
.kv-footer-copy {
  margin: 2.5em 0 0 !important;
  padding-top: 1.2em;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 14px;
  color: #b9cbbd !important;
}
@media (max-width: 1023px) {
  .kv-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .kv-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
}

/* =====================================================================
   1.4.3 (2026-10-06): design refresh, step 4 - header
   Icon cart with number badge on all screen sizes, "Tuotteet" dropdown
   (markup from functions.php), trust strip under the header.
   ===================================================================== */

/* ---------- Cart: basket icon + badge (text kept for screen readers) ---------- */
.site-header .site-header-cart a.cart-contents .amount,
.site-header .site-header-cart a.cart-contents .count {
  display: inline-block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.site-header .site-header-cart li {
  position: relative;
}
.site-header .kv-cart-empty .kv-cart-badge {
  display: none !important;
}
@media (min-width: 768px) {
  .site-header .site-header-cart {
    text-align: right;
  }
  .site-header .site-header-cart a.cart-contents {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 12px 6px 6px !important;
    margin: 0 !important;
  }
  .site-header .site-header-cart a.cart-contents::after {
    float: none;
    position: static;
    font-size: 28px !important;
    line-height: 1;
    color: var(--kv-green);
  }
  .site-header .site-header-cart .kv-cart-badge {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: var(--kv-green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
  }
}

/* ---------- "Tuotteet" dropdown (desktop) ---------- */
@media (min-width: 768px) {
  #site-navigation .primary-navigation ul.sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px !important;
    width: 440px;
    height: auto !important;
    margin: 0 !important;
    padding: .6em !important;
    background: #ffffff;
    border: 1px solid #e7e4dc;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(31, 46, 34, .14);
    z-index: 999;
  }
  .main-navigation ul.menu li.kv-menu-products:hover > ul.sub-menu,
  .main-navigation ul.menu li.kv-menu-products:focus-within > ul.sub-menu,
  .main-navigation ul.menu li.kv-menu-products.focus > ul.sub-menu {
    left: 0;
  }
  #site-navigation ul.sub-menu li {
    width: auto;
    float: none;
  }
  #site-navigation ul.sub-menu li a {
    display: block;
    width: auto;
    margin: 0 !important;
    padding: .45em .8em !important;
    font-size: 15px !important;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--kv-radius);
    text-shadow: none;
  }
  #site-navigation ul.sub-menu li a:hover,
  #site-navigation ul.sub-menu li a:focus {
    background: var(--kv-green-tint);
    color: var(--kv-green-dark) !important;
    text-decoration: none;
  }
}

/* ---------- Trust strip under the header (markup in functions.php) ---------- */
.kv-trust-strip {
  position: relative;
  z-index: 1;
  background: var(--kv-cream);
  border-top: 1px solid #ebe5d8;
  border-bottom: 1px solid #ebe5d8;
  color: var(--kv-heading);
  font-size: 14px;
}
.kv-trust-strip .col-full {
  margin-top: 0 !important;
}
.kv-trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3em 2.2em;
  list-style: none;
  margin: 0;
  padding: .6em 0;
}
.kv-trust-strip li {
  margin: 0;
  white-space: nowrap;
}
.kv-trust-strip li::before {
  content: "\2713";
  margin-right: .45em;
  color: var(--kv-green);
  font-weight: 700;
}
/* Spacing around the strip */
.kv-trust-strip + #content {
  margin-top: 0 !important;
}
.kv-trust-strip + .storefront-breadcrumb {
  margin-top: .8em !important;
}
/* Header ends right below the shelf image (image keeps its position),
   so the strip sits close to the banner instead of after empty space. */
@media (min-width: 1024px) and (max-width: 1799px) {
  #masthead {
    height: 24.8vw;
    background-position: center 3.745vw;
  }
}
@media (min-width: 1800px) {
  #masthead {
    height: calc(260px + 10.26vw);
    background-position: center calc(250px - 10.26vw);
  }
}
@media (max-width: 767px) {
  .kv-trust-strip {
    font-size: 13px;
  }
  .kv-trust-strip ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.6em;
    padding: .55em 0;
  }
  .kv-trust-strip ul::-webkit-scrollbar {
    display: none;
  }
}

/* =====================================================================
   1.4.4 (2026-10-06): header meets the trust strip
   On desktop (1024 px and wider) the trust strip is pulled up to the
   bottom edge of the shelf. The header background is transparent (the
   banner PNG has a transparent background), so the hanging plant is
   drawn in front of the strip. The header lets clicks pass through
   except on its links, buttons and search.
   Shelf bottom = 56.8 % of the banner height; banner height = 20.51vw.
   ===================================================================== */
@media (min-width: 1024px) {
  #masthead {
    background-color: transparent !important;
    pointer-events: none;
  }
  #masthead a,
  #masthead button,
  #masthead input,
  #masthead form,
  #masthead li,
  #masthead .sub-menu {
    pointer-events: auto;
  }
}
@media (min-width: 1024px) and (max-width: 1799px) {
  .kv-trust-strip {
    margin-top: -9.4vw;               /* header 24.8vw - shelf bottom 15.4vw */
  }
  #masthead .site-header-cart {
    margin-top: calc(1.3vw - 14px) !important;   /* cart on the shelf front */
  }
  #secondary {
    padding-top: calc(9.4vw - 70px);  /* sidebar starts below the hanging plant */
  }
}
@media (min-width: 1024px) and (max-width: 1799px) {
  .kv-trust-strip ul {
    justify-content: flex-end;        /* keep the texts clear of the plant */
  }
}
@media (min-width: 1024px) {
  /* Breadcrumb lines up with the page content, clear of the plant */
  .left-sidebar .storefront-breadcrumb .woocommerce-breadcrumb {
    padding-left: 21.49%;
  }
}
@media (min-width: 1800px) {
  .kv-trust-strip {
    margin-top: calc(-10px - 8.87vw);
  }
  .site-header .site-header-cart {
    position: relative;
    top: 36px;                        /* cart on the shelf front, level with the menu */
  }
  #secondary {
    padding-top: calc(8.87vw - 60px);
  }
}


/* =====================================================================
   1.4.5 (2026-10-06): category tiles ([kv_kategoriat] shortcode) and a
   cleaner category list in the sidebar (no folder icons).
   ===================================================================== */
.kv-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 1.5em 0 2.5em;
}
.kv-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 14px;
  background: var(--kv-cream);
  border: 1px solid #ebe5d8;
  border-radius: 10px;
  text-decoration: none !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.kv-tile:hover,
.kv-tile:focus {
  box-shadow: 0 8px 22px rgba(31, 46, 34, .10);
  transform: translateY(-2px);
}
.kv-tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: var(--kv-radius);
  overflow: hidden;
}
.kv-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}
.kv-tile-name {
  color: var(--kv-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}
.kv-tile:hover .kv-tile-name {
  color: var(--kv-green);
}
@media (max-width: 767px) {
  .kv-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kv-tile-name {
    font-size: 14px;
  }
}

/* Sidebar category list: no folder icons, quieter links */
.widget_product_categories ul li::before,
.widget_nav_menu ul li::before {
  display: none !important;
}
.widget-area .widget_product_categories ul li,
.widget-area .widget_nav_menu ul li {
  padding-left: 0 !important;
  margin: 0;
}
.widget-area .widget_product_categories ul li a,
.widget-area .widget_nav_menu ul li a {
  display: block;
  padding: .35em .6em;
  border-radius: var(--kv-radius);
  color: var(--kv-heading) !important;
  font-weight: 600;
  text-decoration: none;
}
.widget-area .widget_product_categories ul li a:hover,
.widget-area .widget_nav_menu ul li a:hover {
  background: var(--kv-green-tint);
  color: var(--kv-green-dark) !important;
}
.widget-area .widget_product_categories ul li.current-cat > a {
  background: var(--kv-green-tint);
  color: var(--kv-green) !important;
}
.widget-area .widget_product_categories ul ul.children {
  margin: 0 0 0 .8em;
}
.widget-area .widget_product_categories ul ul.children a {
  font-weight: 400;
}

/* =====================================================================
   1.4.6 (2026-10-06): bestseller slider pause/play button
   (button is added by kv_slider_a11y_script in functions.php)
   ===================================================================== */
.wcpscwc-product-slider-wrap .kv-slider-pause {
  display: block;
  margin: 6px 0 0 auto;
  padding: .35em 1em;
  font-size: 13px;
  line-height: 1.4;
  background: #ffffff;
  color: var(--kv-green);
  border: 1px solid var(--kv-green);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.wcpscwc-product-slider-wrap .kv-slider-pause:hover {
  background: var(--kv-green-tint);
  color: var(--kv-green-dark);
}
.wcpscwc-product-slider-wrap .kv-slider-pause:focus-visible {
  outline: 2px solid var(--kv-green);
  outline-offset: 2px;
}

/* =====================================================================
   1.4.9 (2026-10-08): product image lightbox (WooCommerce PhotoSwipe)
   Dark green see-through overlay, image as a rounded card, no share button.
   Overlay opacity is set in functions.php (kv_lightbox_options).
   ===================================================================== */
.pswp__bg {
  background: #0b1a10 !important;
}
.pswp__img:not(.pswp__img--placeholder) {
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.pswp__top-bar {
  background: transparent !important;
}
.pswp__button--share {
  display: none !important;
}