/* Hoitolatukku design system (HOITO-304). */
/* Montserrat variable (wght 100-900), self-hosted. Files from Google Fonts v31, latin + latin-ext subsets.
   One face per subset with the full weight range: a face pinned to a single weight cannot serve 800. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
    --ht-primary: #860044;
    --ht-primary-dark: #53002a;
    --ht-text: #1a1a1a;
    --ht-muted: #6b6b6b;
    --ht-border: #e8e6eb;
    --ht-border-strong: #d8d3d0;
    --ht-bg: #ffffff;
    --ht-cream: #faf6f2;
    --ht-cream-dark: #f1ece5;
    --ht-success: #2a7f4f;
    --ht-success-bg: #e8f4ee;
    --ht-danger: #a23030;
    --ht-danger-bg: #fdecec;
    --ht-warning: #b8760a;
    --ht-info: #1d4e89;
    --ht-info-bg: #eef4fb;
    --ht-rating: #e6a300;
    --ht-peach: #eebc9f;
    --ht-space-2xs: 8px;
    --ht-space-xs: 16px;
    --ht-space-xs-plus: 20px;
    --ht-space-sm: 24px;
    --ht-space-md: 32px;
    --ht-space-lg: 48px;
    --ht-space-xl: 64px;
    --ht-space-2xl: 96px;
    --ht-radius-default: 3px;
    --ht-radius-card: 4px;
    --ht-radius-pill: 999px;
    --ht-font: "Montserrat", sans-serif;
    --ht-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
    /* Favourite heart, shared by the card, the PDP gallery and anything else rendering a YITH button. */
    --ht-heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M20.5833 15.1667C22.2083 13.5417 23.8333 11.5917 23.8333 9.20833C23.8333 7.62808 23.2056 6.11256 22.0882 4.99516C20.9708 3.87775 19.4552 3.25 17.875 3.25C16.0333 3.25 14.625 4.11667 13 5.95833C11.375 4.11667 9.96667 3.25 8.125 3.25C6.54475 3.25 5.02923 3.87775 3.91182 4.99516C2.79442 6.11256 2.16667 7.62808 2.16667 9.20833C2.16667 11.5917 3.79167 13.5417 5.41667 15.1667L13 22.75L20.5833 15.1667Z' stroke='%23000' stroke-width='1.95' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    --ht-heart-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M20.5833 15.1667C22.2083 13.5417 23.8333 11.5917 23.8333 9.20833C23.8333 7.62808 23.2056 6.11256 22.0882 4.99516C20.9708 3.87775 19.4552 3.25 17.875 3.25C16.0333 3.25 14.625 4.11667 13 5.95833C11.375 4.11667 9.96667 3.25 8.125 3.25C6.54475 3.25 5.02923 3.87775 3.91182 4.99516C2.79442 6.11256 2.16667 7.62808 2.16667 9.20833C2.16667 11.5917 3.79167 13.5417 5.41667 15.1667L13 22.75L20.5833 15.1667Z' fill='%23000' stroke='%23000' stroke-width='1.95' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Type scale (applied via CSS classes set in Elementor "CSS Classes") ---- */
.ht-h1, .ht-h1 .elementor-heading-title { font: 800 42px/44px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-h2, .ht-h2 .elementor-heading-title { font: 700 30px/36px var(--ht-font); letter-spacing: -0.3px; color: var(--ht-text); margin: 0; }
.ht-h3, .ht-h3 .elementor-heading-title { font: 700 20px/26px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-h4, .ht-h4 .elementor-heading-title { font: 700 18px/23px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-eyebrow, .ht-eyebrow .elementor-heading-title { font: 600 12px/19px var(--ht-font); letter-spacing: 0.48px; text-transform: uppercase; color: var(--ht-primary); margin: 0; }
.ht-eyebrow--muted, .ht-eyebrow--muted .elementor-heading-title { color: var(--ht-muted); }
.ht-body, .ht-body p { font: 400 16px/25px var(--ht-font); color: var(--ht-muted); margin: 0; }
.ht-body--dark, .ht-body--dark p { color: var(--ht-text); }
.ht-caption { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); }
.ht-h1 .ht-accent, .ht-h2 .ht-accent { color: var(--ht-primary); }
/* Elementor's page CSS gives every heading title the primary global's colour AND font-weight (600) at equal
   specificity, and it loads after this file, so the type scale above loses. Repeat weight and colour here. */
.elementor-widget-heading.ht-h1 .elementor-heading-title, .elementor-widget-heading.ht-h2 .elementor-heading-title, .elementor-widget-heading.ht-h3 .elementor-heading-title, .elementor-widget-heading.ht-h4 .elementor-heading-title { color: var(--ht-text); }
.elementor-widget-heading.ht-h1 .elementor-heading-title { font-weight: 800; }
.elementor-widget-heading.ht-h2 .elementor-heading-title, .elementor-widget-heading.ht-h3 .elementor-heading-title, .elementor-widget-heading.ht-h4 .elementor-heading-title { font-weight: 700; }
.elementor-widget-heading.ht-eyebrow .elementor-heading-title { font-weight: 600; }
.ht-primary-text, .elementor-widget-heading.ht-primary-text .elementor-heading-title { color: var(--ht-primary); }
.elementor-widget-heading.ht-eyebrow--muted .elementor-heading-title { color: var(--ht-muted); }

/* ---- Buttons ---- */
.elementor-widget-button.ht-btn .elementor-button, .ht-btn.ht-btn--link {
    font: 600 16px/24px var(--ht-font); letter-spacing: 0.3px;
    padding: 14px var(--ht-space-sm); border-radius: var(--ht-radius-default);
    background: var(--ht-primary); color: #fff; border: 1.5px solid var(--ht-primary);
    transition: background .15s, color .15s;
}
.elementor-widget-button.ht-btn .elementor-button:hover { background: var(--ht-primary-dark); border-color: var(--ht-primary-dark); color: #fff; }
.elementor-widget-button.ht-btn--outline .elementor-button { background: #fff; color: var(--ht-primary); }
.elementor-widget-button.ht-btn--outline .elementor-button:hover { background: var(--ht-primary); color: #fff; }
.elementor-widget-button.ht-btn--small .elementor-button { padding: 10px var(--ht-space-xs-plus); }
.elementor-widget-button.ht-link .elementor-button, .ht-link-arrow {
    background: none !important; border: 0 !important; padding: 4px 0 !important;
    font: 600 14px/20px var(--ht-font) !important; color: var(--ht-primary) !important;
    display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
.ht-link .elementor-button .elementor-button-content-wrapper { gap: 4px; }
.elementor-widget-button.ht-link .elementor-button:hover, .ht-link-arrow:hover { color: var(--ht-primary-dark) !important; }
.ht-link-arrow::after { content: ""; width: 14px; height: 14px; background: url(../img/icons/arrow-right.svg) center/contain no-repeat; }
/* Section links carry the design's arrow at every breakpoint. */
.ht-link--arrow-next .elementor-button-content-wrapper { align-items: center; }
.ht-link--arrow-next .elementor-button-content-wrapper::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: url(../img/icons/arrow-right.svg) center/contain no-repeat; }

/* ---- Section chrome ---- */
.ht-section { padding: var(--ht-space-xl) var(--ht-space-2xl); }
.ht-section--cream { background: var(--ht-cream); }
.ht-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ht-space-xs); width: 100%; }
.ht-section-header > .e-con { --width: auto; width: auto; flex: 1 1 auto; min-width: 0; }
.ht-section-header > .elementor-widget-button { --width: auto; width: auto; flex: 0 0 auto; }
.ht-section-header .elementor-widget-button .elementor-button { white-space: nowrap; }
.ht-section-header .ht-body { max-width: 700px; }

/* ---- Hero ---- */
.ht-hero { min-height: 468px; }
.ht-hero .ht-hero__copy { max-width: 560px; }
.ht-hero .ht-body { color: var(--ht-muted); }
.ht-hero__last-order, .ht-hero__last-order p { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); margin: 0; }
/* A customer with no orders gets no line at all, not an empty one. */
.ht-hero__last-order:has(.ht-last-order[hidden]) { display: none; }
/* Mobile hero follows the design: dark intro copy, buttons stacked full width. */
@media (max-width: 767px) {
    .ht-hero .ht-body, .ht-hero .ht-body p { color: var(--ht-text); }
    /* Tall mobile art: copy stays on top, buttons drop to the bottom edge. */
    .ht-hero.ht-section { min-height: min(176vw, 660px); } /* 176vw = the mobile art's 750x1320 ratio, so it fills without a hard crop */
    .ht-hero .e-con-inner { height: 100%; }
    .ht-hero .ht-hero__copy { flex: 1 1 auto; max-width: none; }
    .ht-hero .ht-hero__copy > .e-con { flex-direction: column; align-items: stretch; margin-top: auto; }
    .ht-hero .ht-hero__copy > .e-con > .elementor-widget-button { --width: 100%; width: 100%; }
    .ht-hero .ht-hero__copy .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
}

/* ---- Trust bar ---- */
.ht-trust { border-top: 1px solid var(--ht-border); border-bottom: 1px solid var(--ht-border); }
/* Slim bar: .ht-section's 64px block padding would stack on top of the container's own; keep only the latter. */
.ht-section.ht-trust { padding-block: 0; }
.ht-trust .e-con { justify-content: space-between; }
.ht-trust .elementor-widget-icon-box .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: var(--ht-space-xs); text-align: left; }
.ht-trust .elementor-widget-icon-box .elementor-icon-box-icon { margin: 0; }
.ht-trust .elementor-widget-icon-box .elementor-icon { width: 36px; height: 36px; border-radius: 18px; background: var(--ht-cream-dark); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ht-trust .elementor-widget-icon-box .elementor-icon svg { width: 24px; height: 24px; }
/* The kit globals reach the icon-box title and description from the page CSS, which loads after this file:
   repeat weight and colour with the widget class in front so these win. */
.ht-trust .elementor-widget-icon-box .elementor-icon-box-title { font: 700 14px/20px var(--ht-font); color: var(--ht-primary); margin: 0 0 4px; }
.ht-trust .elementor-widget-icon-box .elementor-icon-box-description { font: 400 12px/19px var(--ht-font); color: var(--ht-muted); margin: 0; max-width: 220px; }

/* ---- Round arrow buttons: sliders, the product carousel and the subcategory rail ----
   Same button in three places; only the size and the placement differ, through --ht-arrow-size.
   The Elementor kit paints every `button` with the global button colour and the loop-carousel
   widget styles its own buttons through --arrow-* variables, so both need the extra classes. */
.ht-slider__arrow,
.ht-subcategory-rail__arrow,
.elementor-element.elementor-widget-loop-carousel.ht-product-carousel .elementor-swiper-button {
    --ht-arrow-size: 36px; --ht-arrow-icon: 12px;
    --arrow-normal-color: var(--ht-muted); --arrow-hover-color: var(--ht-muted);
    width: var(--ht-arrow-size); height: var(--ht-arrow-size); border-radius: 50%; padding: 0;
    background: #fff; border: 1px solid var(--ht-border-strong); color: var(--ht-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ht-slider__arrow svg,
.ht-subcategory-rail__arrow svg,
.elementor-element.elementor-widget-loop-carousel.ht-product-carousel .elementor-swiper-button svg {
    display: block; width: var(--ht-arrow-icon); height: var(--ht-arrow-icon); color: var(--ht-muted); fill: currentColor;
}
button.ht-slider__arrow, button.ht-slider__arrow:hover, button.ht-slider__arrow:focus,
button.ht-subcategory-rail__arrow, button.ht-subcategory-rail__arrow:hover, button.ht-subcategory-rail__arrow:focus {
    background: #fff; color: var(--ht-muted);
}
.ht-slider__arrow[disabled], .ht-subcategory-rail__arrow:disabled { opacity: .4; cursor: default; }

/* ---- Sliders (scroll-snap tracks; arrows and dots are kept in sync by ht.js) ---- */
.ht-slider__arrow { position: absolute; top: 50%; margin-top: -36px; }
.ht-slider__arrow--prev { left: calc(-1 * var(--ht-space-xl)); }
.ht-slider__arrow--prev svg { transform: scaleX(-1); }
.ht-slider__arrow--next { right: calc(-1 * var(--ht-space-xl)); }
.ht-slider__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--ht-space-md); }
.ht-slider__dots:empty { display: none; }
.ht-slider__dot { width: 28px; height: 4px; border-radius: var(--ht-radius-pill); background: var(--ht-border-strong); border: 0; padding: 0; cursor: pointer; transition: width .15s, background .15s; }
.ht-slider__dot.is-active { width: 40px; background: var(--ht-primary); }
/* The kit's global `button` colour hits the dots too. */
button.ht-slider__dot, button.ht-slider__dot:hover, button.ht-slider__dot:focus { background: var(--ht-border-strong); }
button.ht-slider__dot.is-active, button.ht-slider__dot.is-active:hover, button.ht-slider__dot.is-active:focus { background: var(--ht-primary); }
/* Everything fits on one page: nothing to page through. */
.is-single .ht-slider__arrow, .is-single .ht-slider__dots { display: none; }
/* Touch sizes swipe instead of using arrows. */
@media (max-width: 1024px) { .ht-slider__arrow { display: none; } }
@media (max-width: 767px) { .ht-slider__dots { margin-top: var(--ht-space-sm); } }

/* ---- Category tiles ---- */
/* #browse-categories is this section; the margin keeps it clear of the sticky header. */
.ht-categories { scroll-margin-top: 82px; }
@media (max-width: 767px) { .ht-categories { scroll-margin-top: 0; } }
.ht-category-slider { position: relative; width: 100%; }
/* Column flow: 2 rows, each column is one tile pair; the track scrolls sideways and snaps per page. */
.ht-category-tiles { --ht-cat-cols: 6; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - (var(--ht-cat-cols) - 1) * var(--ht-space-xs)) / var(--ht-cat-cols)); gap: var(--ht-space-xs); width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ht-category-tiles::-webkit-scrollbar { display: none; }
.ht-category-tiles > .ht-category-tile:nth-child(odd) { scroll-snap-align: start; }
.ht-category-tile { display: flex; flex-direction: column; gap: var(--ht-space-2xs); padding: var(--ht-space-xs); background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); text-decoration: none; color: inherit; transition: box-shadow .15s; }
.ht-category-tile:hover { box-shadow: var(--ht-shadow-md); }
.ht-category-tile__image { aspect-ratio: 1 / 1; border-radius: var(--ht-radius-default); overflow: hidden; background: var(--ht-cream); }
.ht-category-tile__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-category-tile__name { font: 700 14px/20px var(--ht-font); color: var(--ht-text); min-height: 40px; }
.ht-category-tile__count { font: 400 12px/16px var(--ht-font); color: var(--ht-muted); }
@media (max-width: 1024px) { .ht-category-tiles { --ht-cat-cols: 3; } }
/* Peek of the third column tells the user the row scrolls. */
@media (max-width: 767px) { .ht-category-tiles { grid-auto-columns: calc(50% - 20px); } }
/* Mobile-only "All products" link under the categories subtitle. */
.elementor-widget-button.ht-link--all-products { display: none; }
@media (max-width: 767px) { .elementor-widget-button.ht-link--all-products { display: block; } }

/* ---- Product card ---- */
.ht-card { position: relative; display: flex; flex-direction: column; background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); padding: var(--ht-space-xs); font-family: var(--ht-font); color: var(--ht-text); height: 100%; box-sizing: border-box; transition: box-shadow .15s; }
.ht-card:hover { box-shadow: var(--ht-shadow-md); }
.ht-card__media { position: relative; height: 208px; border-radius: var(--ht-radius-default); overflow: hidden; display: block; }
/* Specificity beats Elementor's `.elementor img{height:auto}` and WC's `ul.products li.product a img`, which let the image overflow the 208px box. */
.ht-card .ht-card__media img, .woocommerce ul.products li.product .ht-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; }
.ht-badges { display: flex; flex-direction: column; gap: var(--ht-space-2xs); align-items: flex-start; }
.ht-card__media .ht-badges { position: absolute; top: 8px; left: 0; z-index: 1; }
.ht-badge { padding: 4px var(--ht-space-2xs); border-radius: var(--ht-radius-pill); font: 700 12px/19px var(--ht-font); letter-spacing: 1.44px; text-transform: uppercase; color: #fff; background: var(--ht-text); }
.ht-badge--primary { background: var(--ht-primary); }
.ht-badge--danger { background: var(--ht-danger); }
.ht-badge--success { background: var(--ht-success); }
.ht-badge--neutral { background: var(--ht-text); }
.ht-badge--peach { background: var(--ht-peach); color: var(--ht-primary-dark); }
.ht-badge--info { background: var(--ht-info); }
.ht-badge--muted { background: var(--ht-muted); }
.ht-badge--outline { padding: 3px calc(var(--ht-space-2xs) - 1px); background: rgba(134, 0, 68, 0.14); border: 1px solid var(--ht-primary); color: var(--ht-primary); }
/* Favourite heart, shared by the product card, the PDP gallery and the cart line.
   Keyed on .exists, the only class YITH sets on every saved state: its template
   swaps between browse/added/remove markup with the global "after add" and style
   options, so anything keyed on those wrappers silently stops matching. Masked
   rather than a background image so the saved state can swap shape and colour. */
.ht-wishlist { --ht-heart: 22px; --ht-heart-color: var(--ht-muted); }
.ht-wishlist .yith-wcwl-add-to-wishlist { margin: 0; opacity: 1 !important; }
.ht-wishlist .feedback, .ht-wishlist i, .ht-wishlist svg, .ht-wishlist .yith-wcwl-icon { display: none !important; }
/* Suppresses the plugin's fade and oversized spinner while its request runs. */
.ht-wishlist .blockOverlay { background-image: none !important; }
.ht-wishlist a::before { content: ""; flex: 0 0 var(--ht-heart); width: var(--ht-heart); height: var(--ht-heart); background: var(--ht-heart-color); -webkit-mask: var(--ht-heart-outline); mask: var(--ht-heart-outline); }
.ht-wishlist a:hover::before, .ht-wishlist a:focus-visible::before { background: var(--ht-primary); }
.ht-wishlist .exists a::before { background: var(--ht-primary); -webkit-mask: var(--ht-heart-filled); mask: var(--ht-heart-filled); }

/* Icon-only surfaces: the anchor is the heart's box, YITH's label collapsed to
   nothing rather than hidden, so the accessible name survives. */
.ht-card__wishlist a, .hoito-gallery__wishlist a { position: relative; display: block !important; width: var(--ht-heart) !important; height: var(--ht-heart) !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background: none !important; }
.ht-card__wishlist a::before, .hoito-gallery__wishlist a::before { position: absolute; inset: 0; width: auto; height: auto; }
.ht-card__wishlist { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; z-index: 1; }
.ht-card__body { display: flex; flex-direction: column; gap: var(--ht-space-2xs); padding-top: var(--ht-space-xs); flex: 1; }
.ht-card__main, .ht-card__aside, .ht-card__statline { display: contents; }
.ht-card__bullets { display: none; }
.ht-card__brand { font: 600 12px/19px var(--ht-font); letter-spacing: 0.48px; text-transform: uppercase; color: var(--ht-muted); min-height: 19px; }
.ht-card__name { font: 600 14px/20px var(--ht-font); color: var(--ht-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; padding: 4px 0; }
.ht-card__sku { font: 400 12px/19px var(--ht-font); color: var(--ht-muted); min-height: 19px; }
.ht-card__rating { display: flex; align-items: center; gap: 6px; font: 400 14px/20px var(--ht-font); color: var(--ht-muted); }
.ht-stars { position: relative; display: inline-block; width: 74px; height: 14px; }
.ht-stars::before { content: ""; position: absolute; inset: 0; background: url(../img/icons/star-bg.svg) 0 0/14.8px 14px repeat-x; filter: grayscale(1) opacity(.35); }
.ht-stars__fill { position: absolute; inset: 0; background: url(../img/icons/star-bg.svg) 0 0/14.8px 14px repeat-x; overflow: hidden; }
.ht-card__rating u { text-decoration: underline; }
.ht-card__rating--none .ht-card__rating-value, .ht-card__rating--none .ht-card__rating-sep { display: none; }
.ht-stock { display: inline-flex; align-items: center; gap: var(--ht-space-2xs); margin: 0; font: 600 12px/19px var(--ht-font); }
.ht-stock::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ht-stock--in { color: var(--ht-success); }
.ht-stock--low { color: var(--ht-warning); }
.ht-stock--out { color: var(--ht-danger); }
.ht-card__price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; margin-top: auto; }
.ht-card__price { font: 700 20px/26px var(--ht-font); color: var(--ht-primary); }
.ht-card__price .ht-card__from { font: 400 16px/25px var(--ht-font); }
.ht-card__price del { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); margin-left: 4px; }
.ht-card__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.ht-card__vat { font: 400 12px/19px var(--ht-font); color: var(--ht-text); }
/* Shared VAT mode: <html class="hoito-vat-*"> (Hoitolatukku_Vat_Mode) picks one of the two server-rendered prices. */
html.hoito-vat-excl [data-vat="incl"], html.hoito-vat-incl [data-vat="excl"] { display: none !important; }
.ht-card__cta { display: flex; gap: var(--ht-space-2xs); align-items: stretch; margin-top: var(--ht-space-2xs); }
.ht-card__cta .ht-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; text-align: center; font: 600 16px/24px var(--ht-font); letter-spacing: .3px; padding: 12px 10px; border-radius: var(--ht-radius-default); background: var(--ht-primary); color: #fff; border: 1.5px solid var(--ht-primary); text-decoration: none; cursor: pointer; }
.ht-card__cta .ht-btn:hover { background: var(--ht-primary-dark); border-color: var(--ht-primary-dark); color: #fff; }
.ht-card__cta .ht-btn--outline { background: #fff; color: var(--ht-primary); }
.ht-card__cta .ht-btn--outline:hover { background: var(--ht-primary); color: #fff; }
.ht-card__cta .ht-btn[disabled], .ht-card__cta .ht-btn.is-disabled { background: var(--ht-cream-dark); border-color: var(--ht-cream-dark); color: var(--ht-muted); cursor: not-allowed; pointer-events: none; }
.ht-card__cta .ht-btn.added::after, .ht-card__cta .add_to_cart_button::before, .ht-card__cta .add_to_cart_button::after { display: none !important; content: none !important; }
.ht-card__cta .ht-btn.add_to_cart_button { background: var(--ht-primary) !important; color: #fff !important; }
.ht-card__cta .ht-btn.loading { opacity: .6; }
.ht-stepper { display: inline-flex; align-items: center; width: 112px; height: 50px; border: 1.5px solid var(--ht-border-strong); border-radius: var(--ht-radius-default); background: #fff; flex: 0 1 112px; min-width: 80px; }
/* In a narrow card the stepper shrinks, not the Add to cart label. */
.ht-stepper + .ht-btn { flex: 1 0 auto; }
@media (min-width: 1024px) {
    .ht-stepper { width: 135px; flex-basis: 135px; height: 52px; }
    .ht-stepper button { width: 42px; flex-basis: 42px; }
}
.ht-stepper button { width: 34px; flex: 0 1 34px; min-width: 24px; height: 100%; border: 0; background: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ht-stepper button::before { content: ""; width: 18px; height: 18px; background: url(../img/icons/plus-bg.svg) center/contain no-repeat; }
.ht-stepper button[data-step="-1"]::before { background-image: url(../img/icons/minus-bg.svg); }
.ht-stepper input { width: 40px; flex: 1 1 auto; min-width: 0; height: 100%; border: 0 !important; box-shadow: none !important; text-align: center; font: 600 16px/24px var(--ht-font); color: var(--ht-text); padding: 0; background: none; -moz-appearance: textfield; }
.ht-stepper input::-webkit-inner-spin-button, .ht-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
/* The Elementor kit borders every input and fills every button on hover: the stepper is one framed control. */
.ht-stepper input:focus { outline: 2px solid var(--ht-border-strong); outline-offset: -2px; }
.ht-stepper button:hover, .ht-stepper button:focus { background: none; }
.ht-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--ht-space-2xs); flex-wrap: wrap; }
.ht-card__variants { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/19px var(--ht-font); color: var(--ht-muted); }
.ht-card__colour { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ht-border-strong); box-shadow: 0 0 0 1px #fff; background: var(--hoito-swatch, #ccc); }
.ht-card__sizes--count { display: none; }
@media (max-width: 767px) {
    .ht-products .ht-card__statline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ht-space-2xs); }
    .ht-products .ht-card__meta { display: contents; }
    .ht-products .ht-card__variants { flex: 1 0 100%; justify-content: flex-start; }
    .ht-products .ht-card__sizes { display: none; }
    .ht-products .ht-card__sizes--count { display: inline-flex; }
}
.ht-card__cta button.ht-btn.tilaustuote-button { font-size: 15px; line-height: 24px; padding: 12px 10px; border-radius: var(--ht-radius-default); box-shadow: none; text-shadow: none; }

/* Carousel wrapper (Elementor loop-carousel with .ht-product-carousel class) */
.ht-product-carousel .swiper-slide { height: auto; }
/* equal_height stretches the slides; .ht-card only fills one if every wrapper between them has a height too.
   The loop item IS the slide, so the chain starts at its container: card wrap → widget → container → shortcode. */
.ht-product-carousel .swiper-slide > .e-con,
.ht-product-carousel .swiper-slide .elementor-widget-shortcode,
.ht-product-carousel .swiper-slide .elementor-widget-shortcode > .elementor-widget-container,
.ht-product-carousel .swiper-slide .elementor-shortcode { height: 100%; }
.elementor-widget-loop-carousel.ht-product-carousel .swiper-pagination { position: static; inset-inline-start: auto; top: auto; transform: none; width: 100%; margin-top: var(--ht-space-md); display: flex; justify-content: center; gap: 6px; }
.elementor-widget-loop-carousel.ht-product-carousel .swiper-pagination-bullet { width: 28px; height: 4px; border-radius: var(--ht-radius-pill); background: var(--ht-border-strong); opacity: 1; margin: 0 !important; }
.elementor-widget-loop-carousel.ht-product-carousel .swiper-pagination-bullet-active { width: 40px; background: var(--ht-primary); }
/* arrows_position=outside keeps 30px clear on both sides for the buttons; the track instead keeps the full width, so the cards line up with the section heading. */
.elementor-element.ht-product-carousel.elementor-arrows-position-outside .swiper { width: 100%; }
/* The arrows move into the 96px section gutter: 66px = the 36px button plus the 30px the design leaves to the viewport edge. Elementor writes the --arrow-* offsets per element, so the buttons are placed directly. */
.elementor-element.elementor-widget-loop-carousel.ht-product-carousel .swiper ~ .elementor-swiper-button-prev { left: -66px; }
.elementor-element.elementor-widget-loop-carousel.ht-product-carousel .swiper ~ .elementor-swiper-button-next { right: -66px; }
/* Touch sizes swipe instead: no arrows, and the track runs to the screen edge so the next card peeks out of the section padding. */
@media (max-width: 1024px) {
    .elementor-element.ht-product-carousel .swiper ~ .elementor-swiper-button { display: none; }
}
@media (max-width: 767px) {
    /* Elementor caps widgets at `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`; the extra classes outweigh it. */
    .ht-section > .e-con-inner > .elementor-widget.elementor-widget-loop-carousel.ht-product-carousel { width: calc(100% + var(--ht-space-xs)); max-width: none; }
    .elementor-widget-loop-carousel.ht-product-carousel .swiper-pagination { width: calc(100% - var(--ht-space-xs)); }
}

/* ---- Brand strip ---- */
/* Brand stat: "75+" and its copy side by side. The widget class keeps the kit's heading weight and colour out. */
.elementor-widget-heading.ht-stat .elementor-heading-title { font: 800 64px/44px var(--ht-font); color: var(--ht-primary); margin: 0; white-space: nowrap; }
.elementor-widget-heading.ht-stat-copy .elementor-heading-title { font: 700 18px/23px var(--ht-font); color: var(--ht-primary); margin: 0; max-width: 337px; }
/* Mobile: smaller number and copy. */
@media (max-width: 767px) {
    .ht-brands.e-con > .e-con-inner { gap: var(--ht-space-xs); }
    /* Elementor wraps row containers on mobile (--flex-wrap-mobile); keep the number and copy on one row, the copy wraps inside instead. */
    .e-con.ht-stat-block { flex-wrap: nowrap; }
    .e-con.ht-stat-block > .ht-stat-copy { flex: 1 1 0; min-width: 0; }
    .elementor-widget-heading.ht-stat .elementor-heading-title { font-size: 42px; }
    .elementor-widget-heading.ht-stat-copy .elementor-heading-title { font-size: 16px; line-height: 20px; }
}
.ht-brand-strip { display: flex; gap: 12px; width: 100%; }
/* 4px keeps the logo close to the tile edge as the design draws it; the artwork in img/brands/ is trimmed to its ink. */
.ht-brand-strip__tile { flex: 1 1 0; min-width: 0; height: 64px; border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); display: flex; align-items: center; justify-content: center; padding: 4px; background: #fff; }
.ht-brand-strip__tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 1024px) { .ht-brand-strip { flex-wrap: wrap; } .ht-brand-strip__tile { flex: 1 1 calc(33.333% - 8px); } }
/* Mobile: one scrollable row of fixed tiles that runs off the right screen edge; no arrows or indicators. */
@media (max-width: 767px) {
    .ht-brand-strip { flex-wrap: nowrap; width: calc(100% + var(--ht-space-xs)); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ht-brand-strip::-webkit-scrollbar { display: none; }
    /* 2.75 tiles per view (~122px at 375px): the third tile is cut at 3/4 to show the row scrolls. 24px = 2 gaps. */
    .ht-brand-strip__tile { flex: 0 0 calc((100% - 24px) / 2.75); }
    .ht-brand-strip__tile:last-child { margin-right: var(--ht-space-xs); }
}

/* ---- Testimonials ---- */
/* The row is the scroll track: below the desktop width the cards are swiped one at a time. */
/* Elementor wraps row containers on mobile (--flex-wrap-mobile); the track scrolls instead. */
.e-con.ht-testimonial-slider { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ht-testimonial-slider::-webkit-scrollbar { display: none; }
.ht-testimonial { background: var(--ht-cream); border-radius: var(--ht-radius-card); padding: var(--ht-space-sm) !important; gap: var(--ht-space-sm); scroll-snap-align: start; }
.ht-testimonial .elementor-widget-icon .elementor-icon svg { width: 20px; height: 16px; }
.ht-testimonial__quote, .ht-testimonial__quote p { font: 400 14px/20px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-testimonial__name.elementor-widget-heading .elementor-heading-title { font: 700 14px/20px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-testimonial__role, .ht-testimonial__role p { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); margin: 0; }
@media (max-width: 1024px) { .e-con.ht-testimonial-slider > .e-con.ht-testimonial { flex: 0 0 calc(50% - 20px); } }
@media (max-width: 767px) {
    /* The track runs to the screen edge so the next card peeks out of the section padding. */
    .ht-section > .e-con-inner > .e-con.ht-testimonial-slider { --width: calc(100% + var(--ht-space-xs)); }
    .e-con.ht-testimonial-slider > .e-con.ht-testimonial { flex: 0 0 calc(100% - 45px); }
}

/* ---- Blog cards ---- */
.ht-blog-slider { width: 100%; }
/* The row is the scroll track: three fit on desktop (dots hide themselves), below that the cards are swiped. */
.ht-blog-cards { display: flex; gap: var(--ht-space-sm); width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ht-blog-cards::-webkit-scrollbar { display: none; }
.ht-blog-card { flex: 0 0 calc((100% - 2 * var(--ht-space-sm)) / 3); scroll-snap-align: start; }
.ht-blog-card { background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); overflow: hidden; display: flex; flex-direction: column; }
.ht-blog-card__image { display: block; height: 220px; background: var(--ht-cream); }
.ht-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-blog-card__body { display: flex; flex-direction: column; gap: var(--ht-space-2xs); padding: var(--ht-space-sm); flex: 1; }
.ht-blog-card__date { font: 600 12px/19px var(--ht-font); letter-spacing: .48px; text-transform: uppercase; color: var(--ht-muted); }
.ht-blog-card__title { font: 700 18px/23px var(--ht-font); color: var(--ht-text); text-decoration: none; margin: 0; }
.ht-blog-card__excerpt { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ht-blog-card .ht-link-arrow { margin-top: auto; padding-top: 8px; }
@media (max-width: 1024px) { .ht-blog-card { flex: 0 0 calc(50% - 20px); } }
@media (max-width: 767px) {
    /* The track runs past the section padding so the next card peeks out. */
    .ht-blog-cards { width: calc(100% + var(--ht-space-xs)); }
    .ht-blog-card { flex: 0 0 calc(100% - 45px); }
}

/* ---- Campaign block ---- */
/* Height lives in the patch (min_height / min_height_mobile) so it stays editable in Elementor. */
.ht-campaign__copy { max-width: 560px; }

/* Responsive section padding */
@media (max-width: 1024px) { .ht-section { padding: var(--ht-space-lg) var(--ht-space-sm); } .ht-h1, .ht-h1 .elementor-heading-title { font-size: 32px; line-height: 38px; } }
@media (max-width: 767px) {
    .ht-section { padding: var(--ht-space-md) var(--ht-space-xs); }
    .ht-section-header { flex-direction: column; align-items: flex-start; }
    /* Product sections close to 24px between the header and the first card on mobile; Elementor writes the
       32px desktop gap per element with three classes, so the override needs to outweigh that. */
    .elementor .e-con.ht-section:has(> .e-con-inner > .elementor-widget-loop-carousel) { --gap: var(--ht-space-sm) var(--ht-space-sm); --row-gap: var(--ht-space-sm); --column-gap: var(--ht-space-sm); }
}

/* ---- Footer ---- */
/* Inner containers/widgets default to 100% width in Elementor; the footer rows are auto-width flex items. */
.ht-footer__top .e-con-inner > .e-con.ht-footer__col, .ht-footer__payments .e-con-inner > .e-con, .ht-footer__payments .e-con-inner > .elementor-widget, .ht-footer__bottom .e-con-inner > .elementor-widget { --width: auto; width: auto; flex: 0 0 auto; }
.ht-footer__payments .e-con-inner > .elementor-widget-text-editor, .ht-footer__bottom .e-con-inner > .elementor-widget { white-space: nowrap; }
.ht-footer .ht-footer__title .elementor-heading-title { font: 700 16px/24px var(--ht-font); color: var(--ht-muted); margin: 0; }
.ht-footer__top .e-con-inner > .ht-footer__col--wide { width: 440px; }
.ht-footer__top .e-con-inner > .ht-footer__col--contact { width: 289px; }
/* The .elementor-item class is needed to outweigh Elementor Pro's own 13px 20px item padding, which it repeats
   on :hover/:focus at equal specificity — without it the link jumps and pushes the rest of the footer down. */
.ht-footer__menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
.ht-footer__menu .elementor-nav-menu a.elementor-item { font: 400 14px/20px var(--ht-font); color: var(--ht-text); padding: 0; }
.ht-footer__menu .elementor-nav-menu a.elementor-item:hover { color: var(--ht-primary); }
.ht-footer__menu .elementor-nav-menu--main .elementor-nav-menu { display: flex; flex-direction: column; gap: var(--ht-space-2xs); }
/* The design fills the first column with six links, then goes on in the second; CSS columns would balance them. */
.ht-footer__col--wide .elementor-nav-menu--main .elementor-nav-menu { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: var(--ht-space-2xs) var(--ht-space-xs-plus); }
.elementor-widget-icon-list.ht-footer__contact .elementor-icon-list-text, .ht-footer__text, .ht-footer__text p { font: 400 14px/20px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-caption.ht-footer__text, .ht-caption.ht-footer__text p { color: var(--ht-muted); }
.ht-footer__contact .elementor-icon-list-icon svg { width: 20px; height: 20px; }
.ht-footer__socials .elementor-social-icon { background: transparent; width: 20px; height: 20px; }
.ht-footer__socials .elementor-social-icon i, .ht-footer__socials .elementor-social-icon svg { color: var(--ht-muted); fill: var(--ht-muted); }
.ht-footer__socials .elementor-social-icon:hover i { color: var(--ht-primary); }
.ht-payment-badges { display: flex; gap: var(--ht-space-2xs); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ht-payment-badges img { display: block; width: 36px; height: 24px; }
.ht-footer__copyright, .ht-footer__copyright p, .elementor-widget-icon-list.ht-footer__links .elementor-icon-list-text { font: 400 12px/19px var(--ht-font); color: var(--ht-muted); margin: 0; }
.elementor-widget-icon-list.ht-footer__links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--ht-primary); }
.ht-footer__links .elementor-icon-list-items { gap: var(--ht-space-md); }
.ht-footer__links .elementor-icon-list-item { margin: 0; padding: 0; }
@media (max-width: 767px) {
    .ht-footer__top .e-con-inner > .e-con.ht-footer__col { --width: 100%; width: 100%; }
    .ht-footer__entity { display: none; }
    .ht-footer__payments .e-con-inner > .elementor-widget-text-editor, .ht-footer__bottom .e-con-inner > .elementor-widget { white-space: normal; }
    .ht-footer__menu .elementor-nav-menu--main .elementor-nav-menu,
    .ht-footer__col--wide .elementor-nav-menu--main .elementor-nav-menu { display: flex; gap: var(--ht-space-xs); }
    /* Link/contact columns collapse into accordions. */
    .ht-footer__col--wide, .ht-footer__col:not(.ht-footer__col--brand) { border-top: 1px solid var(--ht-border); padding-top: var(--ht-space-xs); }
    .ht-footer__col.is-collapsible .ht-footer__title { cursor: pointer; width: 100%; }
    .ht-footer__col.is-collapsible .ht-footer__title .elementor-heading-title { display: flex; justify-content: space-between; align-items: center; }
    .ht-footer__col.is-collapsible .ht-footer__title .elementor-heading-title::after { content: ""; width: 24px; height: 24px; background: url("../img/icons/chevron-right-bg.svg") center / contain no-repeat; transform: rotate(90deg); transition: transform .2s; }
    .ht-footer__col.is-collapsible.is-open .ht-footer__title .elementor-heading-title::after { transform: rotate(-90deg); }
    .ht-footer__col.is-collapsible:not(.is-open) > .elementor-element:not(.ht-footer__title) { display: none; }
    .ht-footer__bottom .ht-footer__links .elementor-icon-list-items { gap: var(--ht-space-md); }
}


/* ==== Breadcrumb (global: the woocommerce_breadcrumb_defaults filter runs everywhere) ==== */
/* Breadcrumb bar */
.ht-breadcrumb-bar { background: var(--ht-cream); }
.ht-breadcrumb, nav.woocommerce-breadcrumb.ht-breadcrumb { display: flex; align-items: center; gap: var(--ht-space-2xs); font: 400 12px/19px var(--ht-font); color: var(--ht-muted); white-space: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; }
.ht-breadcrumb::-webkit-scrollbar { display: none; }
/* WooCommerce clearfix pseudos become flex items here and the gap pushes the first crumb off the gutter. */
.ht-breadcrumb::before, .ht-breadcrumb::after, .woocommerce .ht-breadcrumb::before, .woocommerce .ht-breadcrumb::after { display: none; }
.ht-breadcrumb a, .ht-breadcrumb__item a { color: var(--ht-muted); text-decoration: none; }
.ht-breadcrumb a:hover { color: var(--ht-primary); }
.ht-breadcrumb__item[aria-current="page"] { color: var(--ht-text); font-weight: 600; }
.ht-breadcrumb__sep { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; color: var(--ht-muted); }
.ht-breadcrumb__sep svg { width: 24px; height: 24px; fill: none; }
.ht-breadcrumb__sep svg path { stroke-width: 1; }
.ht-breadcrumb-bar .elementor-widget-woocommerce-breadcrumb { width: 100%; }

/* ==== Header ==== */
.ht-header { font-family: var(--ht-font); }
/* Elementor puts the z_index setting in the inherited --z-index property and its .e-con reset uses revert, which keeps the inherited value; without this the wrapper's 100 lands on every row, the sticky row ties with the nav row and loses on DOM order */
.ht-header .e-con { --z-index: initial; }
.ht-utility { color: #fff; }
.ht-utility__inner .e-con-inner > .elementor-widget, .ht-utility__inner > .elementor-widget { --width: auto; width: auto; flex: 0 0 auto; }
.ht-utility__msg .elementor-heading-title, .ht-utility__msg p { font: 400 12px/19px var(--ht-font); color: #fff !important; margin: 0; }
.ht-utility__contact .elementor-icon-list-text, .ht-utility__contact .elementor-icon-list-icon i, .ht-utility__contact .elementor-icon-list-icon svg { color: #fff !important; fill: #fff; font: 400 12px/19px var(--ht-font); }
.ht-utility__contact .elementor-icon-list-icon svg { width: 16px; height: 16px; }
/* The free-shipping threshold is a wholesale term, so guests don't see it. Hiding the message leaves the
   contact list alone in a space-between row, where it would fall back to the left edge. */
body:not(.logged-in) .ht-utility__msg { display: none; }
body:not(.logged-in) .ht-utility__contact { margin-inline-start: auto; }
.ht-header__main .e-con-inner > .elementor-widget, .ht-header__main .e-con-inner > .e-con { --width: auto; width: auto; flex: 0 0 auto; }
.ht-header__main .e-con-inner > .ht-header__search { flex: 1 1 auto; min-width: 0; max-width: 616px; }
.ht-header__logo img { width: 195px; height: auto; }
/* Search bar (header + overlay); selectors outrank the Kit's input:not([type=…]) rules */
.ht-search, form.ht-search { display: flex; align-items: center; height: 44px; margin: 0; padding: 0 4px 0 0; border: 1px solid var(--ht-border-strong); border-radius: var(--ht-radius-default); background: #fff; }
.ht-search:focus-within { border-color: var(--ht-primary); box-shadow: 0 0 0 3px rgba(134,0,68,.08); }
form.ht-search input.ht-search__input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; font: 400 14px/20px var(--ht-font); color: var(--ht-text); -webkit-appearance: none; appearance: none; }
form.ht-search input.ht-search__input[type="search"]:focus { border: 0; box-shadow: none; outline: 0; }
form.ht-search input.ht-search__input[type="search"]::placeholder { color: var(--ht-muted); opacity: 1; }
form.ht-search input.ht-search__input[type="search"]::-webkit-search-cancel-button, form.ht-search input.ht-search__input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.ht-search button.ht-search__submit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 58px; width: 58px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0 var(--ht-radius-default) var(--ht-radius-default) 0; background: #fff; color: var(--ht-primary); cursor: pointer; --ht-btn-bg: #fff; --ht-btn-fg: var(--ht-primary); }
.ht-search button.ht-search__submit:hover, .ht-search button.ht-search__submit:focus { background: #fff; color: var(--ht-primary-dark); --ht-btn-fg: var(--ht-primary-dark); }
.ht-search button.ht-search__submit svg { display: block; width: 24px; height: 24px; }
.ht-header__account { gap: 12px; }
.ht-header__account .elementor-widget-button .elementor-button { font: 600 14px/20px var(--ht-font); padding: 10px 16px; border-radius: var(--ht-radius-default); }
/* "Hae asiakkaaksi" is the guest's only header button; a customer has already applied. */
body.logged-in .ht-header__apply { display: none; }
.ht-account-chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ht-text); }
.ht-account-chip__avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ht-peach); color: var(--ht-primary-dark); font: 700 14px/1 var(--ht-font); }
.ht-account-chip__icon { display: inline-flex; color: var(--ht-text); }
.ht-account-chip__icon svg { display: block; width: 24px; height: 24px; }
.ht-account-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
.ht-account-chip__hi { font: 400 12px/16px var(--ht-font); color: var(--ht-muted); }
.ht-account-chip__text b { font: 600 16px/20px var(--ht-font); color: var(--ht-text); }
.ht-account-chip--guest .ht-account-chip__text b { font-weight: 700; }
.ht-header__cart .elementor-menu-cart__toggle .elementor-button { background: transparent; color: var(--ht-text); padding: 0; }
/* The widget icon is the legacy filled cart, so the design outline cart replaces it as a background. */
.ht-header__cart .elementor-menu-cart__toggle .elementor-button-icon { display: block; width: 24px; height: 24px; background: url(../img/icons/cart-bg.svg) center/contain no-repeat; }
.ht-header__cart .elementor-menu-cart__toggle .elementor-button-icon > svg, .ht-header__cart .elementor-menu-cart__toggle .elementor-button-icon > i { display: none; }
/* Outranks the widget's own bubble rule, which is four classes deep */
.ht-header__cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] { top: -3px; inset-inline-end: -7px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--ht-primary); color: #fff; font: 600 10px/16px var(--ht-font); }
.ht-header__nav { position: static; }
.ht-header__navbar { position: relative; border-top: 1px solid var(--ht-border); }
.ht-header__nav .e-con-inner > .ht-header__menu { --width: auto; width: auto; flex: 0 0 auto; }
.ht-header__menu #mega-menu-wrap-menu-1, .ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 { background: transparent; padding: 0; }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 { display: flex; align-items: center; gap: var(--ht-space-xs); }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link { display: flex; align-items: center; gap: var(--ht-space-2xs); font: 600 16px/24px var(--ht-font); color: var(--ht-text); height: 56px; padding: 0 var(--ht-space-xs); margin: 0; background: transparent; text-transform: none; letter-spacing: 0; }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover, .ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { color: var(--ht-primary); background: transparent; }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-ht-has-products-panel > a.mega-menu-link::after { content: ""; display: block; width: 16px; height: 16px; flex: 0 0 16px; background: url(../img/icons/chevron-right-bg.svg) center/contain no-repeat; transform: rotate(90deg); }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-ht-nav-offer > a.mega-menu-link, .ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.ht-nav-offer > a.mega-menu-link { color: var(--ht-primary); }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-ht-nav-offer > a.mega-menu-link::before, .ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.ht-nav-offer > a.mega-menu-link::before { content: ""; display: block; margin: 0; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.ht-header__menu #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-ht-has-products-panel > a[aria-expanded="true"]::after { transform: rotate(-90deg); }
.elementor-sticky--effects.ht-header--sticky { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-bottom: 2px solid var(--ht-primary); }
.elementor-sticky--effects.ht-header--sticky .e-con-inner { padding-top: 12px; padding-bottom: 12px; }

/* Tuotteet panel: three click-drilldown columns anchored to the nav row */
.ht-products-panel { display: none; position: fixed; inset: var(--wp-admin--admin-bar--height, 0px) 0 0; z-index: 100000; --width: 100%; width: 100%; }
.ht-products-panel.is-open { display: block; }
.ht-products-panel__menu, .ht-products-panel__menu > .elementor-widget-container, .ht-products-panel .elementor-shortcode { height: 100%; }
.ht-products-panel::before { content: ""; position: fixed; inset: var(--wp-admin--admin-bar--height, 0px) 0 0; background: rgba(26,26,26,.35); z-index: -1; }
@media screen and (max-width: 600px) { .ht-products-panel, .ht-products-panel::before { inset: 0; } }
.ht-products-menu { font-family: var(--ht-font); }
.ht-products-menu__list { list-style: none; margin: 0; padding: 0; }
.ht-products-menu__item { margin: 0; padding: 0; }
.ht-products-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; min-height: 42px; font: 400 16px/24px var(--ht-font); color: var(--ht-text); text-decoration: none; border-bottom: 1px solid var(--ht-border); }
.ht-products-menu__item.has-children > .ht-products-menu__link::after { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: url(../img/icons/chevron-right-bg.svg) center/contain no-repeat; mask: url(../img/icons/chevron-right-bg.svg) center/contain no-repeat; }
.ht-products-menu__item.is-active > .ht-products-menu__link { color: var(--ht-primary); background: var(--ht-cream); }
.ht-products-menu__link:hover { color: var(--ht-primary-dark); background: var(--ht-cream-dark); }
.ht-products-menu__head { display: flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 44px; border-bottom: 1px solid var(--ht-border); }
.ht-products-menu__title { flex: 1 1 auto; font: 600 16px/24px var(--ht-font); color: var(--ht-text); text-align: center; }
.ht-products-menu__head--root .ht-products-menu__title { text-align: left; }
.ht-products-menu__back, .ht-products-menu__close, button.ht-products-menu__back, button.ht-products-menu__close,
button.ht-products-menu__back:hover, button.ht-products-menu__back:focus, button.ht-products-menu__close:hover, button.ht-products-menu__close:focus { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 0; background: transparent; padding: 0; cursor: pointer; }
button.ht-products-menu__back::before { content: ""; display: block; width: 24px; height: 24px; background: url(../img/icons/chevron-left-bg.svg) center/contain no-repeat; }
button.ht-products-menu__close::before { content: ""; display: block; width: 24px; height: 24px; background: url(../img/icons/close.svg) center/contain no-repeat; }
.ht-products-menu__all { display: flex; align-items: center; gap: 4px; padding: 16px; font: 600 14px/20px var(--ht-font); color: var(--ht-primary); text-decoration: none; }
.ht-products-menu__all::after { content: ""; width: 14px; height: 14px; background: url(../img/icons/arrow-right.svg) center/contain no-repeat; }
.ht-products-menu--panel { --ht-panel-col: min(375px, calc(100vw / 3)); position: relative; width: var(--ht-panel-col); height: 100%; background: #fff; box-shadow: 8px 0 24px rgba(0,0,0,.08); }
.ht-products-menu--panel > .ht-products-menu__list { height: calc(100% - 44px); overflow-y: auto; }
.ht-products-menu--panel .ht-products-menu__sub { display: none; position: absolute; top: 0; left: 100%; width: var(--ht-panel-col); height: 100%; background: #fff; border-left: 1px solid var(--ht-border-strong); }
.ht-products-menu--panel .ht-products-menu__sub > .ht-products-menu__list { max-height: calc(100% - 48px); overflow-y: auto; }
.ht-products-menu--panel .ht-products-menu__item.is-active > .ht-products-menu__sub { display: block; }
.ht-products-menu--panel .ht-products-menu__sub > .ht-products-menu__head { display: none; }
.ht-products-menu--panel .ht-products-menu__link { padding: 0 16px; min-height: 41px; }
.ht-products-menu--panel .ht-products-menu__sub .ht-products-menu__sub { height: 100%; }
.ht-products-menu--panel .ht-products-menu__item.has-children > .ht-products-menu__link::after { width: 20px; height: 20px; flex: 0 0 20px; }
.ht-products-menu--panel .ht-products-menu__list::-webkit-scrollbar { width: 6px; }
.ht-products-menu--panel .ht-products-menu__list::-webkit-scrollbar-track { background: transparent; }
.ht-products-menu--panel .ht-products-menu__list::-webkit-scrollbar-thumb { background: var(--ht-border-strong); background-clip: padding-box; border-right: 2px solid transparent; border-radius: 999px; }
.ht-products-menu--panel .ht-products-menu__list::-webkit-scrollbar-thumb:hover { background: var(--ht-muted); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
    .ht-products-menu--panel .ht-products-menu__list { scrollbar-width: thin; scrollbar-color: var(--ht-border-strong) transparent; }
}
/* Drawer: one level visible at a time, back button returns */
.ht-products-menu--drawer .ht-products-menu__link { padding: 16px; min-height: 56px; font: 400 16px/24px var(--ht-font); }
.ht-products-menu--drawer .ht-products-menu__item.has-children > .ht-products-menu__link::after { width: 24px; height: 24px; flex: 0 0 24px; }
/* "Näytä kaikki" is a nav row like the others, in the primary colour */
.ht-products-menu--drawer .ht-products-menu__all { justify-content: space-between; padding: 16px; min-height: 56px; font: 400 16px/24px var(--ht-font); border-bottom: 1px solid var(--ht-border); }
.ht-products-menu--drawer .ht-products-menu__all::after { width: 24px; height: 24px; flex: 0 0 24px; background: var(--ht-primary); -webkit-mask: url(../img/icons/chevron-right-bg.svg) center/contain no-repeat; mask: url(../img/icons/chevron-right-bg.svg) center/contain no-repeat; }
.ht-products-menu--drawer .ht-products-menu__head { position: sticky; top: 0; z-index: 1; padding: 20px 16px; min-height: 64px; background: #fff; }
.ht-products-menu--drawer .ht-products-menu__sub { display: none; }
.ht-products-menu--drawer .ht-products-menu__item.is-active > .ht-products-menu__sub { display: block; }
.ht-products-menu--drawer .has-active > .ht-products-menu__head, .ht-products-menu--drawer .has-active > .ht-products-menu__all,
.ht-products-menu--drawer .has-active > .ht-products-menu__list > .ht-products-menu__item:not(.is-active),
.ht-products-menu--drawer.has-active > .ht-products-menu__list > .ht-products-menu__item:not(.is-active),
.ht-products-menu--drawer .ht-products-menu__item.is-active > .ht-products-menu__link { display: none; }

/* Mobile header + drawer popup */
.ht-header--mobile .ht-header__mobile-row > .elementor-widget, .ht-header--mobile .ht-header__mobile-row > .e-con, .ht-header--mobile .ht-header__mobile-tools > .elementor-widget { --width: auto; width: auto; flex: 0 0 auto; }
.ht-header--mobile .ht-header__logo img { width: 130px; height: auto; }
.ht-header--mobile .ht-header__burger .elementor-icon { color: var(--ht-text); font-size: 24px; }
.ht-header--mobile .ht-account-chip__text { display: none; }
.ht-header--mobile .ht-account-chip__avatar { width: 32px; height: 32px; font-size: 12px; }
.ht-header--mobile .ht-header__search { --width: 100%; width: 100%; }
.elementor-popup-modal.ht-mobile-menu-popup .dialog-widget-content { border-radius: 0; box-shadow: none; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; height: auto; }
.elementor-popup-modal.ht-mobile-menu-popup .dialog-message { padding: 0; max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; }
/* 100vh assumes the browser toolbars are hidden, which cuts off the end of the list on phones. */
@supports (height: 100dvh) {
    .elementor-popup-modal.ht-mobile-menu-popup .dialog-message { max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }
}
body.dialog-prevent-scroll #wpadminbar { position: fixed; }
.ht-mobile-menu { font-family: var(--ht-font); background: #fff; }
.ht-mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-bottom: 1px solid var(--ht-border); }
.ht-mobile-menu__logo img { display: block; width: 175px; height: auto; }
.ht-mobile-menu__tools { display: flex; align-items: center; gap: 12px; }
.ht-mobile-menu .ht-account-chip__text { display: none; }
.ht-mobile-menu .ht-account-chip__avatar { width: 32px; height: 32px; font-size: 14px; }
.ht-mobile-menu__icon { display: block; width: 24px; height: 24px; background: center/contain no-repeat; }
.ht-mobile-menu__icon--user { background-image: url(../img/icons/user-circle.svg); }
.ht-mobile-menu__icon--cart { position: relative; background-image: url(../img/icons/cart-bg.svg); }
.ht-mobile-menu__count { position: absolute; top: -5px; left: 14px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--ht-primary); color: #fff; font: 600 10px/16px var(--ht-font); text-align: center; }
.ht-mobile-menu__cta { padding: 16px; border-bottom: 1px solid var(--ht-border); }
.ht-mobile-menu__cta .ht-btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; text-decoration: none; }
.ht-mobile-menu__item--offer > .ht-products-menu__link { justify-content: flex-start; color: var(--ht-primary); }
.ht-mobile-menu__item--offer > .ht-products-menu__link::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--ht-primary); }
.ht-mobile-menu__contact { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px; border-top: 1px solid var(--ht-border); }
.ht-mobile-menu__contact-link { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/20px var(--ht-font); color: var(--ht-muted); text-decoration: none; }
.ht-mobile-menu__contact-link::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: center/contain no-repeat; }
.ht-mobile-menu__contact-link--mail::before { background-image: url(../img/icons/mail.svg); }
.ht-mobile-menu__contact-link--phone::before { background-image: url(../img/icons/phone.svg); }
/* A drilldown level replaces the root: top bar, CTA and contact row step aside */
.ht-mobile-menu.has-active > .ht-mobile-menu__bar, .ht-mobile-menu.has-active > .ht-mobile-menu__cta, .ht-mobile-menu.has-active > .ht-mobile-menu__contact { display: none; }

/* ==== Search overlay (mobile = full screen) ==== */
body.ht-search-open, body.ht-menu-open { overflow: hidden; }
html.ht-menu-open { overflow: hidden; }
.ht-search-overlay { position: fixed; inset: 0; z-index: 100000; font-family: var(--ht-font); }
.ht-search-overlay[hidden], .ht-search-overlay [hidden] { display: none; }
.ht-search-overlay__scrim { position: absolute; inset: 0; background: rgba(26,26,26,.2); }
.ht-search-overlay__panel { position: absolute; top: 0; left: 0; right: 0; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ht-space-md); padding: var(--ht-space-md) 0; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.ht-search-overlay__bar { display: flex; align-items: center; justify-content: center; gap: var(--ht-space-md); padding: 0 96px; }
.ht-search--overlay, form.ht-search--overlay { width: 652px; max-width: 100%; border-color: var(--ht-primary); box-shadow: 0 0 0 3px rgba(134,0,68,.08); }
form.ht-search--overlay input.ht-search__input[type="search"] { font-size: 16px; line-height: 24px; }
form.ht-search--overlay input.ht-search__input[type="search"]::placeholder { font-size: 14px; }
.ht-search-overlay__close, button.ht-search-overlay__close { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ht-text); cursor: pointer; --ht-btn-bg: transparent; --ht-btn-fg: var(--ht-text); }
button.ht-search-overlay__close:hover, button.ht-search-overlay__close:focus { background: transparent; color: var(--ht-primary); --ht-btn-fg: var(--ht-primary); }
.ht-search-overlay__close svg { display: block; width: 24px; height: 24px; }
.ht-search-columns { display: flex; align-items: flex-start; gap: var(--ht-space-md); width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 96px; box-sizing: border-box; }
.ht-search-col { display: flex; flex-direction: column; gap: var(--ht-space-xs); flex: 0 0 270px; min-width: 0; }
.ht-search-col--products { flex: 1 1 592px; }
.ht-search-col--entities { flex: 1 1 296px; }
.ht-search-col__title { margin: 0; padding: 0; font: 600 16px/24px var(--ht-font); color: var(--ht-text); }
.ht-search-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ht-space-2xs); }
.ht-search-col__list li { margin: 0; padding: 0; }
.ht-search-col__cards { display: flex; flex-direction: column; gap: var(--ht-space-xs); }
.ht-search-col__list a { font: 400 14px/22px var(--ht-font); color: var(--ht-text); text-decoration: none; }
.ht-search-overlay__results .ht-search-col__list a { line-height: 20px; }
.ht-search-col__list a:hover, .ht-search-col__list a:focus { color: var(--ht-primary); }
.ht-search-card { position: relative; display: flex; align-items: center; gap: 12px; padding: var(--ht-space-xs); border: 1px solid var(--ht-border-strong); border-radius: var(--ht-radius-card); background: #fff; color: var(--ht-text); text-decoration: none; transition: box-shadow .15s; }
.ht-search-card:hover, .ht-search-card:focus { box-shadow: var(--ht-shadow-md); color: var(--ht-text); }
.ht-search-card__thumb { flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid var(--ht-border); border-radius: var(--ht-radius-default); overflow: hidden; background: #fff; }
.ht-search-card__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ht-search-card__body { display: flex; flex-direction: column; justify-content: center; gap: var(--ht-space-2xs); flex: 1 1 auto; min-width: 0; min-height: 96px; }
.ht-search-card__name { font: 600 14px/20px var(--ht-font); color: var(--ht-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-search-card--sale .ht-search-card__name { padding-right: 64px; }
.ht-search-card__excerpt { font: 400 14px/20px var(--ht-font); color: var(--ht-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-search-card__price { font: 600 14px/20px var(--ht-font); color: var(--ht-primary); }
.ht-search-card__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.ht-search-card__price [data-vat] { display: inline-flex; align-items: baseline; gap: var(--ht-space-2xs); }
.ht-search-card__price del { font: 400 12px/19px var(--ht-font); color: var(--ht-muted); }
.ht-search-card .ht-badges { position: absolute; top: 8px; right: 12px; z-index: 1; }
.ht-search-overlay__empty { margin: 0; font: 400 16px/24px var(--ht-font); color: var(--ht-muted); }
.ht-search-overlay__more .ht-link-arrow { gap: 4px; font-size: 16px !important; line-height: 24px !important; padding: 0 !important; }
@media (min-width: 1025px) and (max-width: 1279px) {
    .ht-search-overlay__bar, .ht-search-columns { padding: 0 var(--ht-space-md); }
    .ht-search-overlay__idle { flex-wrap: wrap; }
    .ht-search-overlay__idle .ht-search-col { flex: 1 1 200px; }
    .ht-search-col--products { flex: 1 1 340px; }
    .ht-search-col--entities { flex: 0 1 240px; }
}
@media (max-width: 1024px) {
    .ht-search-overlay__panel { gap: 0; padding: 0; }
    .ht-search-overlay__bar { gap: var(--ht-space-xs); padding: var(--ht-space-md) var(--ht-space-xs); }
    .ht-search--overlay, form.ht-search--overlay { flex: 1 1 auto; width: auto; }
    form.ht-search--overlay input.ht-search__input[type="search"] { padding: 0 var(--ht-space-2xs); }
    .ht-search--overlay button.ht-search__submit { flex: 0 0 36px; width: 36px; }

    .ht-search-columns { flex-direction: column; gap: 0; padding: 0; }
    .ht-search-col, .ht-search-col--products, .ht-search-col--entities { flex: 0 0 auto; width: 100%; padding: var(--ht-space-xs); border-bottom: 1px solid var(--ht-border); }
    .ht-search-col.is-collapsible > .ht-search-col__title { display: flex; align-items: center; justify-content: space-between; gap: var(--ht-space-2xs); cursor: pointer; }
    .ht-search-col.is-collapsible > .ht-search-col__title::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: url(../img/icons/chevron-right-bg.svg) center / contain no-repeat; transform: rotate(90deg); transition: transform .2s; }
    .ht-search-col.is-collapsible.is-open > .ht-search-col__title::after { transform: rotate(-90deg); }
    .ht-search-col.is-collapsible:not(.is-open) > :not(.ht-search-col__title) { display: none; }
    .ht-search-col__list { gap: var(--ht-space-xs); }
    .ht-search-col__cards { gap: var(--ht-space-2xs); padding: var(--ht-space-2xs) 0; }

    .ht-search-card__body { min-height: 0; }
    .ht-search-card__excerpt { display: block; -webkit-line-clamp: none; }
    .ht-search-card .ht-badges { top: 12px; right: auto; left: var(--ht-space-xs); }
    .ht-search-card--sale .ht-search-card__name { padding-right: 0; }

    .ht-search-overlay__empty, .ht-search-overlay__more { padding: var(--ht-space-xs); }
}

/* ---- WooCommerce notices ---- */
.woocommerce-notices-wrapper, .woocommerce-NoticeGroup { display: flex; flex-direction: column; gap: var(--ht-space-2xs); margin: var(--ht-space-xs-plus) 0; }
/* Not :empty — Woo leaves newlines between the notices, so whitespace defeats it. */
.woocommerce-notices-wrapper:not(:has(*)), .woocommerce-NoticeGroup:not(:has(*)) { display: none; }
ul.woocommerce-error:has(> .ht-notice) { display: contents; }
.ht-notice { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: var(--ht-space-2xs) var(--ht-space-xs-plus); border: 0; border-radius: var(--ht-radius-default); list-style: none; font: 400 16px/24px var(--ht-font); color: var(--ht-text); }
.ht-notice--success { background: var(--ht-success-bg); }
.ht-notice--info { background: var(--ht-info-bg); }
.ht-notice--error { background: var(--ht-danger-bg); }
.ht-notice__icon { flex: 0 0 20px; width: 20px; height: 20px; }
.ht-notice--success .ht-notice__icon { color: var(--ht-success); }
.ht-notice--info .ht-notice__icon { color: var(--ht-info); }
.ht-notice--error .ht-notice__icon { color: var(--ht-danger); }
.ht-notice__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ht-notice .ht-notice__text a, .ht-notice .ht-notice__text a.button { float: none; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ht-primary); text-decoration: underline; }
.ht-notice .ht-notice__text a:hover, .ht-notice .ht-notice__text a.button:hover { background: none; color: var(--ht-primary-dark); }
.woocommerce .ht-notice .ht-notice__text a.button { padding: 0 !important; }
.ht-notice::before, .ht-notice::after,
ul.woocommerce-error:has(> .ht-notice)::before, ul.woocommerce-error:has(> .ht-notice)::after { content: none; }
.woocommerce-error > li.ht-notice { padding-left: var(--ht-space-xs-plus) !important; margin-left: 0 !important; }
.ht-notice button.ht-notice__close { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; margin: 0 0 0 var(--ht-space-2xs); padding: 0; border: 0; background: none; color: var(--ht-text); cursor: pointer; --ht-btn-bg: transparent; --ht-btn-fg: var(--ht-text); }
.ht-notice__close svg { width: 24px; height: 24px; }
.ht-notice button.ht-notice__close:hover { color: var(--ht-primary); --ht-btn-fg: var(--ht-primary); }
.woocommerce-error:not(:has(.ht-notice)) { display: block; position: relative; min-height: 64px; margin: 0; padding: 20px var(--ht-space-xs-plus) 20px 52px; border: 0; border-radius: var(--ht-radius-default); background: var(--ht-danger-bg); list-style: none; font: 400 16px/24px var(--ht-font); color: var(--ht-text); }
.woocommerce-error:not(:has(.ht-notice))::before { content: ""; position: absolute; left: var(--ht-space-xs-plus); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1.25' y='1.25' width='17.5' height='17.5' rx='3' fill='%23a23030'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.58709 5.58709C5.9532 5.22097 6.5468 5.22097 6.91291 5.58709L10 8.67417L13.0871 5.58709C13.4532 5.22097 14.0468 5.22097 14.4129 5.58709C14.779 5.9532 14.779 6.5468 14.4129 6.91291L11.3258 10L14.4129 13.0871C14.779 13.4532 14.779 14.0468 14.4129 14.4129C14.0468 14.779 13.4532 14.779 13.0871 14.4129L10 11.3258L6.91291 14.4129C6.5468 14.779 5.9532 14.779 5.58709 14.4129C5.22097 14.0468 5.22097 13.4532 5.58709 13.0871L8.67417 10L5.58709 6.91291C5.22097 6.5468 5.22097 5.9532 5.58709 5.58709Z' fill='%23fdecec'/%3E%3C/svg%3E") center/contain no-repeat; }
.woocommerce-error:not(:has(.ht-notice))::after { content: none; }
.woocommerce-error:not(:has(.ht-notice)) a { color: var(--ht-primary); text-decoration: underline; }
.woocommerce-error:not(:has(.ht-notice)) a:hover { color: var(--ht-primary-dark); }

/* ---- Add-to-cart toast (Figma 2709-4415): top right, below the header row, auto-dismiss ---- */
.ht-toasts { position: fixed; top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); right: var(--ht-space-xs); z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; gap: var(--ht-space-2xs); max-width: min(682px, calc(100vw - 2 * var(--ht-space-xs))); pointer-events: none; }
.ht-toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border: 1px solid var(--ht-border-strong); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
.ht-toast.is-visible { opacity: 1; transform: none; }
.ht-toast__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--ht-success); }
.ht-toast__message { margin: 0; font: 400 16px/24px var(--ht-font); color: var(--ht-text); overflow-wrap: anywhere; }
.ht-toast__message b { font-weight: 700; }
@media (max-width: 767px) {
    .ht-toasts { left: var(--ht-space-xs); align-items: stretch; max-width: none; }
}