/*
Theme Name: Säkkisen Shop
Theme URI: https://parkettiliikesakkinen.fi/
Author: Parkettiliike Säkkinen Oy
Author URI: https://parkettiliikesakkinen.fi/
Description: Kevyt, nopea ja WooCommerce-yhteensopiva teema Parkettiliike Säkkisen verkkokauppaan. Mobiili ensin, dynaamiset etusivulohkot ja ostaminen aina yhden napin päässä.
Version: 1.5.8
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sakkinen-shop
Tags: e-commerce, custom-logo, custom-menu, featured-images, block-styles, wide-blocks
*/

/* Styles are loaded from assets/css/main.css (and editor.css). */
/* Keep this file minimal to avoid duplication and selector conflicts. */
/* SWT Search Suggest – theme styling (Puuilo-style) */
:root{
    --sakkinen-header-z: 20000;
    --sakkinen-ss-z: 15000;
    /* Search suggest panel should feel like a floating box above the hero (not edge-to-edge). */
    --sakkinen-ss-max-width: 1040px;
}

.site-header{
    position: relative;
    z-index: var(--sakkinen-header-z);
}

/* Panel positioning/stacking: must render above page content, below header */
:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel){
    z-index: var(--swt-ss-z, var(--sakkinen-ss-z));
    /* Centered floating panel (slightly narrower than the hero). */
    width: min(var(--swt-ss-panel-width, var(--sakkinen-ss-max-width)), calc(100vw - 48px));
    max-height: min(70vh, 560px);
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(16, 24, 40, .12);
    background: #fff;
    box-shadow: 0 26px 80px rgba(16, 24, 40, .22);
}

/* Ensure the panel is not clipped by any parent stacking context */
body :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel){
    position: fixed;
}

/* When header search is open, force suggest panel to center (ignore plugin's inline left). */
body.sakkinen-search-open :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel){
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Never show the suggest panel unless the inline header search is open.
   This prevents the panel from re-appearing (and jumping to the wrong left/top)
   after clearing/closing the input, when the plugin may still emit async updates. */
body:not(.sakkinen-search-open) :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel){
    display: none !important;
}

/* Subtle backdrop so the panel "floats" above the page. */
/* No page dimming/overlay when search is open (user requested). */
body.sakkinen-search-open::before{ content: none !important; display:none !important; }

/* Mobile sizing: keep the panel comfortably within viewport */
@media (max-width: 640px){
    :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel){
        width: calc(100vw - 20px);
        max-height: min(70vh, 520px);
        border-radius: 16px;
    }
}

/* Header/footer inside panel */
:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-header,
:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-footer{
    padding: 12px 14px;
    background: #fff;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-header{
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    font-weight: 700;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-footer{
    border-top: 1px solid rgba(16, 24, 40, .08);
}

/* List */
:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-list{
    list-style: none;
    margin: 0;
    padding: 6px;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-item{
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-item:hover{
    background: rgba(17, 24, 39, .04);
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-thumb{
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(17, 24, 39, .04);
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-title{
    font-weight: 700;
    line-height: 1.2;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-meta{
    font-size: 13px;
    opacity: .78;
    margin-top: 2px;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-price{
    font-weight: 800;
    white-space: nowrap;
    padding-left: 8px;
}

:where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-sku{
    font-size: 12px;
    opacity: .70;
}

/* Mobile: keep panel tight and readable */
@media (max-width: 768px){
    :root{
        --sakkinen-ss-max-width: 96vw;
    }
    :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-item{
        grid-template-columns: 48px 1fr;
        gap: 10px;
    }
    :where(.swt-block--search-suggest, [data-swt-block="search-suggest"], .swt-search-suggest-panel) .swt-search-suggest-price{
        grid-column: 1 / -1;
        padding-left: 0;
        margin-top: 4px;
    }
}

/* TEMP DISABLE: category listing + promo blocks */
.section--cats,
.sakkinen-categories,
.header-promo,
.header-promo__inner{
    display:none !important;
}


/* Header: show hamburger when nav is hidden (mobile) and when search is open */

/* Sticky spacer: ensure it only reserves space, no visuals */
.sakkinen-sticky-spacer{
    display:block;
    width:100%;
    pointer-events:none;
    background:transparent;
}

/* Header height fix: keep header compact */
.site-header{
    min-height: unset !important;
}

.header-main,
.header-row{
    padding-top: 6px;
    padding-bottom: 6px;
}

.header-row--search{
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Sticky spacer must never grow large */
.sakkinen-sticky-spacer{
    height: 96px !important;
    max-height: 96px !important;
}

/* Sticky spacer removed: keep header compact */
.sakkinen-sticky-spacer{ display:none !important; height:0 !important; }


/* Header – compact, clean */
.site-header{
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    background: #fff;
}

.header-layout{
    gap: 10px;
}

.header-row--top{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0 6px;
}

.header-brand{
    flex: 0 0 auto;
}

.site-header .site-logo img{
    max-height: 44px;
}

.header-nav{
    flex: 1 1 auto;
}

.header-nav .menu{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-nav .menu > li > a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
}

.header-nav .menu > li > a:hover{
    background: rgba(17, 24, 39, .04);
}

.header-tools{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-tool{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(16, 24, 40, .10);
    border-radius: 12px;
    background: #fff;
    line-height: 1;
}

.header-tool:hover{
    background: rgba(17, 24, 39, .04);
}

.header-tool__label{
    font-weight: 700;
}

.header-tool__meta{
    font-weight: 800;
    opacity: .9;
}

.cart-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.header-row--search{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 12px;
}

.header-searchbar{
    flex: 1 1 auto;
    max-width: 760px;
    margin: 0 auto;
}

.searchform.searchform--puuilo .searchform__field{
    border-radius: 14px;
    border: 1px solid rgba(16, 24, 40, .12);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .08);
}

.searchform.searchform--puuilo .searchform__input{
    padding: 14px 14px 14px 46px;
    font-size: 18px;
}

.searchform.searchform--puuilo .searchform__icon{
    left: 16px;
}

@media (max-width: 900px){
    .header-nav{ display:none; }
    .header-row--top{
        justify-content: space-between;
    }
    .header-searchbar{
        max-width: 100%;
    }
    .searchform.searchform--puuilo .searchform__input{
        font-size: 16px;
        padding: 13px 12px 13px 44px;
    }
    .site-header .site-logo img{
        max-height: 40px;
    }
}

@media (max-width: 520px){
    .header-tool__label{ display:none; }
    .header-tool{ padding: 8px 9px; }
    .header-tool__meta{ display:none; }
}


/* Header tools: icon + badge only */
.header-tool__label{ display:none !important; }
.header-tool__meta{ display:none !important; }

/* Cart badge as the only "cart indicator" */
.header-tool--cart{
    position: relative;
}
.header-tool--cart .cart-badge{
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    border: 2px solid #fff;
}

/* Remove extra floating badge (if any from legacy code) */
.site-header [data-cart-count].cart-badge{
    display:inline-flex;
}

/* Search: compact */
.header-row--search{
    padding: 4px 0 10px;
}
.header-searchbar{
    max-width: 640px;
}
.searchform.searchform--puuilo .searchform__field{
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(16, 24, 40, .07);
}
.searchform.searchform--puuilo .searchform__input{
    height: 52px;
    font-size: 16px;
    padding: 0 14px 0 42px;
}
.searchform.searchform--puuilo .searchform__icon{
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

/* Burger: hidden on desktop, shown on mobile and when search is open (rules below) */
.header-burger--top{ display:none; }

/* Keep logo compact */
.site-header .site-logo img{
    max-height: 40px;
}


/* Search: fix odd double-box / oversized look */
.header-searchbar{
    max-width: 620px;
}
.searchform.searchform--puuilo{
    width: 100%;
    margin: 0;
}
.searchform.searchform--puuilo .searchform__field{
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
}
.searchform.searchform--puuilo .searchform__input{
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
}
.searchform.searchform--puuilo .searchform__clear{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    opacity: .55;
}

/* Keep ONLY the theme's single clear/close button (×). Hide browser-provided
   search cancel buttons that otherwise create a double "X" in the input. */
.searchform.searchform--puuilo .searchform__input::-webkit-search-cancel-button,
.searchform.searchform--puuilo .searchform__input::-webkit-search-decoration{
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.searchform.searchform--puuilo .searchform__input::-ms-clear,
.searchform.searchform--puuilo .searchform__input::-ms-reveal{
    display: none;
    width: 0;
    height: 0;
}
.searchform.searchform--puuilo .searchform__clear:hover{
    opacity: .9;
}

/* Burger: must appear when nav hides, regardless of tools */
.header-burger--top{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, .10);
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}
.header-burger--top:hover{
    background: rgba(17, 24, 39, .04);
}
.header-burger--top .burger{
    width: 18px;
    height: 12px;
    position: relative;
    display: inline-block;
    background: transparent !important; /* override assets/css/main.css base burger background */
}
.header-burger--top .burger:before,
.header-burger--top .burger:after{ background: transparent; }
.header-burger--top .burger:before,
.header-burger--top .burger:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(17, 24, 39, .80);
    border-radius: 999px;
}
.header-burger--top .burger:before{ top: 0; box-shadow: 0 5px 0 rgba(17, 24, 39, .80); }
.header-burger--top .burger:after{ bottom: 0; }
.header-burger--top .burger{ }
.header-burger--top .burger i{ display:none; }

/* One-row header layout with expandable search */
.header-row--search{ display:none !important; } /* legacy row */

/* IMPORTANT: main.css still contains legacy rules that hide the top row on mobile.
   Force the new one-row header to stay visible in all viewports. */
@media (max-width: 979px){
  .site-header .header-row--top{ display:flex !important; }
}

/* Narrow desktop/tablet: collapse the nav into the hamburger earlier so the
   header never breaks. */
@media (max-width: 1100px){
  .site-header .header-nav{ display:none !important; }
  /* When nav collapses, show the inline burger next to the magnifier */
  .site-header .header-burger--inline{ display:inline-flex !important; }
}

/* When search is open we hide the nav; the search cluster stays anchored to the right */

/* Override assets/css/main.css grid layout: keep header truly one-row and predictable */
.site-header .header-row--top{
  display:flex !important;
  align-items:center;
  gap:18px;
  width:100%;
  flex-wrap:nowrap;
}

.site-header .header-brand{ flex:0 0 auto; min-width:auto !important; }
.site-header .header-nav{ flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.site-header .header-tools{ flex:0 0 auto; }

/* Give the top row a touch more breathing room so the burger isn't glued to the edge */
.header-row--top{ padding-left: 8px; padding-right: 8px; }

/* Search cluster is anchored to the magnifier position (right side) and expands LEFT */
.header-search-inline{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

/* Inline burger (shown next to the search when needed) */
.header-burger--inline{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.10);
  background:#fff;
  display:none; /* default: shown only when nav is collapsed or search is open */
  align-items:center;
  justify-content:center;
  color: rgba(17,24,39,.80);
  transition: transform .22s ease, opacity .18s ease;
}
.header-burger--inline .burger-icon rect{ fill: currentColor; }

@keyframes sakkinenBurgerIn{
  from{ opacity: 0; transform: translateX(10px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* When search opens, the burger slides in right next to the expanding field */
.site-header.is-search-open .header-burger--inline{
  /* Override legacy .site-header .header-burger{display:none !important} */
  display:inline-flex !important;
  opacity:1;
  transform: translateX(0);
  animation: sakkinenBurgerIn .18s ease both;
}

/* Ensure the SVG burger is never suppressed by legacy rules */
.site-header .header-burger.header-burger--inline{
  /* default is hidden; shown by media queries or search-open state */
}

@media (max-width: 1100px){
  .site-header .header-burger.header-burger--inline{ display:inline-flex !important; }
}

@media (max-width: 980px){
  .site-header .header-burger.header-burger--inline{ display:inline-flex !important; }
}

/* Tools should always remain at the far right; within tools, account comes before cart */
.header-tools{ flex: 0 0 auto; margin-left: 10px; }

/* (No row-reverse: we keep a stable anchor on the right and expand to the left) */

.header-search-toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.10);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.header-search-toggle:hover{ background: rgba(17,24,39,.04); }

.header-searchbar--inline{
  position: relative;
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .25s ease, max-width .25s ease, opacity .2s ease;
}

/* Expand state */
.site-header.is-search-open .header-searchbar--inline{
  width: clamp(260px, 52vw, 640px);
  max-width: clamp(260px, 52vw, 640px);
  opacity: 1;
}

.site-header.is-search-open .header-nav{ display:none !important; }

/* In expanded state, hide the external magnifier button (input is already visible,
   and has its own close button). */
.site-header.is-search-open .header-search-toggle{ display:none !important; }

/* Mobile/tablet: nav collapses into hamburger */
@media (max-width: 980px){
  .header-burger--inline{ display:inline-flex !important; }
  .header-nav{ display:none !important; }
  /* Keep header on one row */
  .header-row--top{ gap: 10px; }
  /* Keep the same inline "slide-open" search also on mobile */
  .site-header.is-search-open .header-searchbar--inline{
    width: calc(100vw - 200px);
    max-width: calc(100vw - 200px);
  }
}

/* Search form inside inline container */
.header-searchbar--inline .searchform.searchform--puuilo{
  width: 100%;
}
.header-searchbar--inline .searchform.searchform--puuilo .searchform__input{
  height: 44px;
  font-size: 15px;
  padding: 0 44px 0 14px; /* no icon inside, keep room for close button */
}

/* Do not show a magnifier icon inside the input; the icon button is outside */
.header-searchbar--inline .searchform.searchform--puuilo .searchform__icon{ display:none !important; }
.header-search-close{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,.10);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
  opacity: .8;
}
.header-search-close:hover{ opacity: 1; background: rgba(17,24,39,.04); }

/* Prevent header from growing tall (keep side padding for nicer alignment) */
.header-row--top{ padding: 10px 8px; }
.header-main{ padding: 0; }

/* --------------------------------------------------------------------------
   CRITICAL: Force the one-row header to use flex.
   assets/css/main.css defines a grid-based header-row--top (3 columns) and
   even hides it on mobile. Our header markup contains 5 elements
   (burger, brand, nav, search, tools) so the grid forces wrapping.
   These overrides make the header truly one-row in all viewports.
-------------------------------------------------------------------------- */

.site-header .header-layout{ padding: 0 !important; gap: 0 !important; }

.site-header .header-row--top{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
}

/* Left cluster */
.site-header .header-burger--inline{ flex: 0 0 auto; }
.site-header .header-brand{ flex: 0 0 auto; min-width: 0 !important; }

/* Middle nav (takes remaining space until search/tools) */
.site-header .header-nav{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Right cluster: search + tools stay at the far right */
.site-header .header-search-inline{ margin-left: auto !important; }
.site-header .header-tools{ margin-left: 10px !important; }

/* Mobile: never hide the top row; we intentionally keep account/cart visible */
@media (max-width: 979px){
  .site-header .header-row--top{ display:flex !important; }
  .site-header .header-row--search{ display:none !important; }
  .site-header .header-tools{ display:flex !important; }
}


/* --- v1.4.54: Definitive header ordering (no element jumps) --- */
.site-header .header-row--top{
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap;
}
/* Stable order: LOGO | NAV (desktop) | BURGER | SEARCH | TOOLS */
.site-header .header-brand{ order:10; flex:0 0 auto; }
.site-header .header-nav{ order:20; flex:1 1 auto; }
.site-header .header-burger--top{ order:30; flex:0 0 auto; }
.site-header .header-search-inline{ order:40; flex:0 0 auto; }
.site-header .header-tools{ order:50; flex:0 0 auto; }

/* Burger icon: always a clean 3-line SVG (avoid CSS conflicts) */
.site-header .header-burger--top .burger-icon{ display:block; }
.site-header .header-burger--top{ color: rgba(17, 24, 39, .80); background: #fff; }
.site-header .header-burger--top .burger-icon rect{ fill: currentColor; }

/* Compact right alignment on small widths: push burger+search+tools to the far right */
@media (max-width: 1100px){
  .site-header .header-nav{ display:none !important; }
  .site-header .header-burger--top{ display:inline-flex !important; margin-left:auto !important; }
  .site-header .header-search-inline{ margin-left: 12px !important; }
  .site-header .header-tools{ margin-left: 12px !important; }
}

/* When search is open: hide nav, keep logo left; keep burger immediately left of search. */
.site-header.is-search-open .header-nav{ display:none !important; }
.site-header.is-search-open .header-burger--top{ display:inline-flex !important; margin-left:auto !important; }
.site-header.is-search-open .header-search-toggle{ display:none !important; }


/* --- v1.4.55: tighten burger + search cluster and allow wider search when space --- */

/* In collapsed-nav widths and when search is open, push the whole right cluster (burger+search+tools)
   to the far right while keeping logo pinned left. */
@media (max-width: 1100px){
  .site-header .header-brand{ margin-right: auto !important; }
  /* Remove the old "auto" push on the burger; logo now does the pushing */
  .site-header .header-burger--top{ margin-left: 0 !important; }
  .site-header .header-search-inline{ margin-left: 0 !important; }
  /* Keep everything snug */
  .site-header .header-row--top{ gap: 12px !important; }
}

.site-header.is-search-open .header-brand{ margin-right: auto !important; }
.site-header.is-search-open .header-burger--top{ margin-left: 0 !important; }
.site-header.is-search-open .header-row--top{ gap: 12px !important; }

/* Make the inline search area able to grow and sit tight to the burger */
.site-header.is-search-open .header-search-inline{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px;
}

/* Let the input expand as wide as possible (bounded with a sane max) */
.site-header.is-search-open .header-searchbar--inline{
  width: clamp(280px, 52vw, 760px) !important;
  max-width: none !important;
}

/* Mobile: use full available space between burger and tools */
@media (max-width: 980px){
  .site-header.is-search-open .header-searchbar--inline{
    width: calc(100vw - 200px) !important;
    max-width: none !important;
  }
}

/* SWT Cart Drawer (Puuilo-tyyli) – style the plugin toggle to match header tools */
/* Hide the plugin's auto-injected toggle inside the main nav/menu; we only want the right-side icon */
.site-header nav .swt-cart-drawer__toggle,
.site-header .header-nav .swt-cart-drawer__toggle{
  display: none !important;
}
.header-tool--cart-drawer .swt-cart-drawer__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(16, 24, 40, .10);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}
.header-tool--cart-drawer .swt-cart-drawer__toggle:focus{ outline: none; }
.header-tool--cart-drawer .swt-cart-drawer__toggle .swt-cart-drawer__label{ display:none; }
.header-tool--cart-drawer .swt-cart-drawer__toggle svg,
.header-tool--cart-drawer .swt-cart-drawer__toggle .swt-cart-drawer__icon{
  width: 20px;
  height: 20px;
}
.header-tool--cart-drawer .swt-cart-drawer__badge,
.header-tool--cart-drawer .swt-cart-drawer__count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #0f5132;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-tool--cart-drawer{
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Header icon buttons: keep search/user/cart the same size and style */
.site-header .header-tools{
  gap: 12px;
}

/* Make account tool match icon-btn size (labels are hidden in compact header UI) */
.site-header .header-tools .header-tool{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  justify-content: center;
}
.site-header .header-tools .header-tool__label,
.site-header .header-tools .header-tool__meta{
  display: none !important;
}
.site-header .header-tools .icon{
  font-size: 18px;
  line-height: 1;
}

/* Ensure the cart drawer toggle doesn't get double framing inside the wrapper */
.header-tool--cart-drawer .swt-cart-drawer__toggle{
  box-shadow: none;
}