.elementor-kit-2156{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-2156 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --sw-ink:#001e60; --sw-ink-soft:#313453; --sw-body:#333333; --sw-green:#277c29; --sw-sage:hsl(108, 28%, 76%); --sw-cream:#fffcf6; --sw-coral:#fe7f5c; --sw-line:#ded6ce; --sw-font-heading:Philosopher; --sw-font-body:Montserrat; --e-gv-8f4b247:Philosopher; --sw-forest:#14532d; }
/* Start custom CSS *//* ===== store.css ===== */
/* ShamanWorld storefront styling for WooCommerce's own output.
 *
 * The cart / checkout / my-account / order-received pages are rendered by
 * WooCommerce shortcodes, not built in Elementor, so they cannot carry kit
 * classes. This file is the storefront layer: it is pushed into the Elementor
 * kit's Site Settings -> Custom CSS, which Elementor prints on every page.
 *
 * Source of truth is here; push it with:
 *   scripts/push-store-css.sh
 * Colours, fonts and radii come from the kit variables (docs/Elementor-design-system.md).
 */

/* ---------- page shell: give the Woo pages the site's band rhythm ---------- */

body.woocommerce-cart main.site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-account main.site-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 4rem 1.5rem 6rem;
}

body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title,
body.woocommerce-account .page-header .entry-title {
  font-family: var(--sw-font-heading);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--sw-ink);
  margin: 0 0 2.5rem;
}

@media (max-width: 767px) {
  body.woocommerce-cart main.site-main,
  body.woocommerce-checkout main.site-main,
  body.woocommerce-account main.site-main {
    padding: 2.5rem 1.25rem 4rem;
  }

  body.woocommerce-cart .page-header .entry-title,
  body.woocommerce-checkout .page-header .entry-title,
  body.woocommerce-account .page-header .entry-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}

/* ---------- shared type ---------- */

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce {
  font-family: var(--sw-font-heading);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sw-body);
}

body.woocommerce-cart .woocommerce h2,
body.woocommerce-cart .woocommerce h3,
body.woocommerce-checkout .woocommerce h2,
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3 {
  font-family: var(--sw-font-heading);
  font-size: 1.5rem;
  color: var(--sw-ink);
  margin-block: 0 1.25rem;
}

body.woocommerce-cart .woocommerce a,
body.woocommerce-checkout .woocommerce a,
body.woocommerce-account .woocommerce a {
  color: var(--sw-green);
}

body.woocommerce-cart .woocommerce .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce .woocommerce-Price-amount,
body.woocommerce-account .woocommerce .woocommerce-Price-amount {
  font-family: var(--sw-font-heading);
  color: var(--sw-ink);
  font-weight: 600;
}

/* ---------- buttons ---------- */

body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button,
body.woocommerce-cart .woocommerce #respond input#submit,
body.woocommerce-cart .woocommerce .cart .button,
body.woocommerce-cart .woocommerce .cart input.button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce input.button,
body.woocommerce-checkout .woocommerce #place_order,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button {
  font-family: var(--sw-font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #ffffff;
  background-color: var(--sw-green);
  border: 0 none;
  border-radius: 5px;
  padding: 1rem 2rem;
  transition: background-color 0.2s ease;
}

body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce input.button:hover,
body.woocommerce-cart .woocommerce .cart .button:hover,
body.woocommerce-cart .woocommerce .cart input.button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce input.button:hover,
body.woocommerce-checkout .woocommerce #place_order:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover {
  background-color: #1f5f21;
  color: #ffffff;
}

/* secondary actions stay quiet: outline in brand green */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce .coupon button,
body.woocommerce-cart .woocommerce .return-to-shop a.button {
  background-color: transparent;
  color: var(--sw-green);
  border: 2px solid var(--sw-green);
  padding-block: calc(1rem - 2px);
}

body.woocommerce-cart .woocommerce button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce .coupon button:hover,
body.woocommerce-cart .woocommerce .return-to-shop a.button:hover {
  background-color: var(--sw-green);
  color: #ffffff;
}

body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled,
body.woocommerce-cart .woocommerce button[name="update_cart"][disabled] {
  background-color: transparent;
  border-color: var(--sw-line);
  color: var(--sw-ink-soft);
  cursor: default;
}

/* the actions row holds the coupon form and the update button in one cell */
body.woocommerce-cart .woocommerce table.shop_table td.actions {
  padding: 1.25rem 1rem;
}

body.woocommerce-cart .woocommerce .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  float: none;
}

body.woocommerce-cart .woocommerce .coupon .input-text {
  flex: 1 1 11rem;
  width: auto;
  min-width: 11rem;
}

body.woocommerce-cart .woocommerce button[name="update_cart"] {
  float: right;
}

body.woocommerce-cart .woocommerce table.cart img {
  width: 4rem;
  border-radius: 8px;
}

/* ---------- notices ---------- */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
  font-family: var(--sw-font-heading);
  font-size: 1rem;
  color: var(--sw-ink-soft);
  background-color: var(--sw-cream);
  border: 0 none;
  border-inline-start: 4px solid var(--sw-green);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error {
  border-inline-start-color: var(--sw-coral);
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-error::before {
  display: none;
}

/* ---------- tables (cart, order review, order details) ---------- */

body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-account .woocommerce table.shop_table {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-block-end: 2rem;
}

body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table th {
  font-family: var(--sw-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
  background-color: var(--sw-cream);
  padding: 0.875rem 1rem;
}

body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table td,
body.woocommerce-account .woocommerce table.shop_table td {
  font-family: var(--sw-font-heading);
  color: var(--sw-body);
  border-block-start: 1px solid var(--sw-line);
  padding: 1rem;
}

body.woocommerce-cart .woocommerce table.shop_table img,
body.woocommerce-checkout .woocommerce table.shop_table img {
  border-radius: 8px;
}

body.woocommerce-cart .woocommerce a.remove {
  color: var(--sw-ink-soft);
  font-size: 1.25rem;
  line-height: 1;
}

body.woocommerce-cart .woocommerce a.remove:hover {
  color: #ffffff;
  background-color: var(--sw-coral);
}

body.woocommerce-cart .woocommerce .cart_totals,
body.woocommerce-checkout .woocommerce #order_review {
  margin-block-start: 2rem;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table td,
body.woocommerce-checkout .woocommerce #order_review table.shop_table td {
  border-block-start: 1px solid var(--sw-line);
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td,
body.woocommerce-checkout .woocommerce #order_review table.shop_table tr.order-total th,
body.woocommerce-checkout .woocommerce #order_review table.shop_table tr.order-total td {
  background-color: var(--sw-cream);
  color: var(--sw-ink);
  font-size: 1.125rem;
}

/* ---------- form fields ---------- */

body.woocommerce-cart .woocommerce form .form-row label,
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-account .woocommerce form .form-row label {
  font-family: var(--sw-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--sw-ink-soft);
  margin-block-end: 0.375rem;
}

body.woocommerce-cart .woocommerce form .form-row input.input-text,
body.woocommerce-cart .woocommerce form .form-row textarea,
body.woocommerce-cart .woocommerce form .form-row select,
body.woocommerce-cart .woocommerce .quantity input.qty,
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row textarea,
body.woocommerce-account .woocommerce form .form-row select {
  font-family: var(--sw-font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sw-body);
  background-color: #ffffff;
  border: 1px solid var(--sw-line);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  min-height: 3rem;
}

body.woocommerce-cart .woocommerce form .form-row input.input-text:focus,
body.woocommerce-cart .woocommerce form .form-row textarea:focus,
body.woocommerce-cart .woocommerce form .form-row select:focus,
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce form .form-row textarea:focus,
body.woocommerce-account .woocommerce form .form-row select:focus {
  outline: 2px solid var(--sw-green);
  outline-offset: 1px;
}

body.woocommerce-cart .woocommerce .quantity input.qty,
body.woocommerce-checkout .woocommerce .quantity input.qty {
  font-family: var(--sw-font-heading);
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
}

/* select2 is Woo's country/state picker: match the plain selects */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  border: 1px solid var(--sw-line);
  border-radius: 6px;
  min-height: 3rem;
  padding-block: 0.5rem;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--sw-font-body);
  color: var(--sw-body);
  line-height: 2rem;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0.5rem;
}

/* ---------- checkout ---------- */

body.woocommerce-checkout .woocommerce-checkout-review-order {
  margin-block-start: 3rem;
}

body.woocommerce-checkout #payment {
  background-color: transparent;
  border-radius: 8px;
}

body.woocommerce-checkout #payment ul.payment_methods {
  border-block-end: 1px solid var(--sw-line);
  padding: 1.25rem 0;
}

body.woocommerce-checkout #payment div.payment_box {
  font-family: var(--sw-font-heading);
  color: var(--sw-ink-soft);
  background-color: var(--sw-cream);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

body.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

body.woocommerce-checkout #payment div.form-row.place-order {
  padding: 1.5rem 0 0;
}

body.woocommerce-checkout #place_order {
  float: none;
  width: 100%;
}

/* ---------- my account ---------- */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding-block: 0.375rem;
  font-family: var(--sw-font-body);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--sw-green);
  text-decoration: underline;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--sw-ink);
  font-weight: 600;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  padding: 1.5rem;
  margin-block-end: 1.5rem;
}

/* ---------- order received / thank-you ---------- */

body.woocommerce-order-received .woocommerce-order > p:first-child {
  font-family: var(--sw-font-heading);
  font-size: 1.25rem;
  color: var(--sw-ink);
}

body.woocommerce-order-received ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
  flex: 1 1 12rem;
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  padding: 0.875rem 1.25rem;
  margin: 0;
  font-family: var(--sw-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-block-start: 0.25rem;
  font-family: var(--sw-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sw-ink);
}

body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
  margin-block-start: 3rem;
}

/* ---------- single product: price on request, gallery, video ---------- */

/* Price on request. WooCommerce adds `purchasable` to the product wrapper only when
   the product has a price. Without one, the template's "Hind päringu alusel" block
   (kit class `sw-price-ask`) shows and the buy row + invoice note (kit class `sw-buy`)
   hide; entering a price in wp-admin flips both automatically. */
.elementor-location-single.product.purchasable .sw-price-ask,
.elementor-location-single.product:not(.purchasable) .sw-buy {
  display: none;
}

/* The availability pill prints nothing until the product has a status. */
/* (Product cards in the loops carry no product classes, so this is not scoped to them.) */
.elementor .sw-pill:empty {
  display: none;
}

/* WooCommerce's own gallery (Elementor "Product Images" widget in template 2473).
   The gallery compound carries `.images` on purpose: WooCommerce's
   `.woocommerce div.product div.images ...` rules (4 classes + 2 types) would otherwise
   win over the rules below and reset their margins, widths and opacity. */
.elementor-location-single.product .woocommerce-product-gallery.images {
  margin: 0;
}

.elementor-location-single.product .woocommerce-product-gallery .flex-viewport,
.elementor-location-single.product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
  border-radius: 8px;
  overflow: hidden;
}

.elementor-location-single.product .woocommerce-product-gallery.images ol.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.elementor-location-single.product .woocommerce-product-gallery.images ol.flex-control-thumbs li {
  width: 4.5rem;
  float: none;
  margin: 0;
}

.elementor-location-single.product .woocommerce-product-gallery.images ol.flex-control-thumbs img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.elementor-location-single.product .woocommerce-product-gallery.images ol.flex-control-thumbs img.flex-active,
.elementor-location-single.product .woocommerce-product-gallery.images ol.flex-control-thumbs img:hover {
  opacity: 1;
}

.elementor-location-single.product .woocommerce-product-gallery__trigger {
  top: 0.75rem;
  right: 0.75rem;
}

/* Media in the description ("Pilli lugu"): a [video] or [audio] shortcode, or a video/audio
   block. Centred, never wider than the screen. */
.elementor-location-single.product .sw-article :is(.wp-video, .wp-audio-shortcode, .wp-block-video, .wp-block-audio) {
  max-width: 100%;
  margin: 1.5rem auto 2rem;
}

/* A pasted YouTube/Vimeo link is an iframe (classic oEmbed or Gutenberg embed): 16:9, never wider
   than the screen (a fixed 500 px width would overflow a 390 px phone). */
.elementor-location-single.product .sw-article iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto 2rem;
  border: 0;
}

/* ---------- single product: conversion helpers (template 2473, session 39) ---------- */

/* Attribute terms print as links, but attribute archives are off, so every link
   (?taxonomy=pa_helistik&term=g4) landed on the homepage. Pills and the key-facts
   list (kit class `sw-specs`) show the value only. Also covers the shop cards. */
.elementor .sw-pill a,
.elementor .sw-specs a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.elementor .sw-pill a {
  color: inherit;
}

/* Lines that are only true for handmade instruments. The product wrapper carries a
   class per assigned category (e.g. `product_cat-floodid`, not the parent). */
.elementor-location-single.product .sw-if-one-off,
.elementor-location-single.product .sw-if-maker {
  display: none;
}

/* "Ainueksemplar": every flute, drum and jaw harp is its own product (stock 1). */
.elementor-location-single.product:is(.product_cat-floodid, .product_cat-trummid, .product_cat-parmupillid) .sw-if-one-off,
/* "Käsitsi valmistanud Tõnu Talimaa": documented for flutes and drums only. */
.elementor-location-single.product:is(.product_cat-floodid, .product_cat-trummid) .sw-if-maker {
  display: block;
}

/* Sold block: the "Loe töötoast" link (→ /e-pood/#meisterda-ise) is for instruments only.
   Matched by its href, because the line is a plain sw-linklist with no marker of its own. */
.elementor-location-single.product:not(:is(.product_cat-floodid, .product_cat-trummid, .product_cat-parmupillid))
  .sw-sold .sw-linklist:has(> a[href="/e-pood/#meisterda-ise"]) {
  display: none;
}

/* "Kuula, kuidas see pill kõlab" jumps to the description — only when it holds something to
   listen to or watch: a video, an audio file or an embedded player (all three wrap audio, video or iframe). */
.elementor-location-single.product:not(:has(.sw-article :is(audio, video, iframe))) .sw-listen {
  display: none;
}

/* The page script (V3 HTML widget) takes no room in the hero column. */
.elementor-location-single.product .sw-js {
  display: none;
}

/* Side-by-side hero: the gallery stays in view while the taller buy column scrolls. */
@media (min-width: 1025px) {
  .elementor-location-single.product .sw-split:has(.woocommerce-product-gallery) {
    align-items: start;
  }

  .elementor-location-single.product .sw-split > :has(.woocommerce-product-gallery) {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
  }
}

/* Mobile buy bar (kit class `sw-buybar`): fixed to the bottom of the screen while the
   hero's own buy / price-request block and the closing band are out of view. The
   script in the template toggles `is-on`; which half shows follows the same
   `purchasable` switch as the hero (sw-buy / sw-price-ask rules above). */
.elementor-location-single.product .sw-buybar {
  display: none;
}

@media (max-width: 767px) {
  .elementor-location-single.product .sw-buybar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    margin: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background-color: #ffffff;
    border-top: 1px solid var(--sw-line);
    box-shadow: 0 -8px 24px rgba(0, 30, 96, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .elementor-location-single.product .sw-buybar.is-on {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  .elementor-location-single.product .sw-buybar > * {
    flex: 1 1 auto;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .elementor-location-single.product .sw-buybar .sw-btn,
  .elementor-location-single.product .sw-buybar .sw-btn-ghost {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    font-size: 0.875rem;
    padding-block: 0.875rem;
    padding-inline: 0.75rem;
  }

  .elementor-location-single.product .sw-buybar .sw-btn-ghost {
    padding-block: calc(0.875rem - 2px);
  }

  .elementor-location-single.product .sw-buybar .sw-price {
    flex: 0 1 auto;
    margin: 0;
    font-size: 1.125rem;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .elementor-location-single.product .sw-buybar,
  .elementor-location-single.product .sw-buybar.is-on {
    transition: none;
  }
}

/* ---------- single product: sold state (stock 0, template 2473) ---------- */

/* The sold block (kit class `sw-if-sold`) and its half of the mobile buy bar show only when
   the product is out of stock. The `outofstock` wrapper class is WooCommerce's. */
.elementor-location-single.product .sw-if-sold {
  display: none;
}

.elementor-location-single.product.outofstock .sw-if-sold {
  display: flex;
}

/* A sold instrument shows no price, no price request, no buy row, and not the one-of-a-kind
   line either. "Kuula" and the contact link stay. These come after the price/buy rules above
   so they win on equal specificity. */
.elementor-location-single.product.outofstock .sw-price-ask,
.elementor-location-single.product.outofstock .sw-buy,
.elementor-location-single.product.outofstock .sw-price,
.elementor-location-single.product.outofstock .sw-if-one-off {
  display: none;
}

/* The sold block: a card-like box (kit class `sw-sold`). */
.elementor-location-single.product .sw-sold {
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 1.25rem;
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background-color: var(--sw-cream);
}

/* ---------- single product: "Kuidas pill sünnib" per category (template 2473) ---------- */

/* One variant band per category: the flute band on flutes, the drum band on drums and the
   jaw-harp band on jaw harps (kit classes sw-if-floot / sw-if-trumm / sw-if-parmupill).
   Drum stands and other products get none of them. */
.elementor-location-single.product .sw-if-floot,
.elementor-location-single.product .sw-if-trumm,
.elementor-location-single.product .sw-if-parmupill {
  display: none;
}

.elementor-location-single.product.product_cat-floodid .sw-if-floot,
.elementor-location-single.product.product_cat-trummid .sw-if-trumm,
.elementor-location-single.product.product_cat-parmupillid .sw-if-parmupill {
  display: flex;
}

/* ---------- prices: sale markup (product page, buy bar and cards) ---------- */

/* The price paragraph prints `<del>old</del> <strong>new</strong>` only when there is a sale
   (see scripts/snippets/sw-store-rules.php, filter 4). Show the new price first, the old one
   struck through after it, and a "Soodus" badge. Without a sale the paragraph is unchanged. */
.elementor .sw-price:has(del) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
}

.elementor .sw-price:has(del) strong {
  order: 1;
  font-weight: inherit;
}

.elementor .sw-price:has(del) del {
  order: 2;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--sw-ink-soft);
  opacity: 0.75;
}

.elementor .sw-price:has(del)::after {
  content: "Soodus";
  order: 3;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background-color: var(--sw-coral);
  color: var(--sw-ink);   /* ink on coral passes AA at 11px; cream on coral does not (about 2.4:1) */
  font-family: var(--sw-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* The mobile buy bar is half a screen wide: the badge would wrap onto a second row there. */
.elementor-location-single.product .sw-buybar .sw-price::after {
  display: none;
}

/* ---------- availability pill: colour by status (product page and cards) ---------- */

/* The pill's link carries the status slug (term=kohe-saadaval, ettetellimisel, muudud,
   broneeritud), so the colour follows the status with no class on the card. */
.elementor .sw-pill:has(a[href*="term=kohe-saadaval"]) {
  color: var(--sw-green);
  background-color: color-mix(in srgb, var(--sw-green) 12%, #ffffff);
}

.elementor .sw-pill:has(a[href*="term=ettetellimisel"]) {
  color: var(--sw-ink-soft);
  background-color: color-mix(in srgb, var(--sw-coral) 22%, #ffffff);
}

.elementor .sw-pill:has(a[href*="term=muudud"]),
.elementor .sw-pill:has(a[href*="term=broneeritud"]) {
  color: var(--sw-ink-soft);
  background-color: color-mix(in srgb, var(--sw-line) 60%, #ffffff);
}

/* ---------- shop / category archive (template 2478) ---------- */

/* The loop's prev/next pagination: hide the control that has nowhere to go
   (Elementor marks it `e--disabled`) instead of showing a dead button. */
.elementor .e-pagination-prev-base.e--disabled,
.elementor .e-pagination-next-base.e--disabled {
  display: none;
}

/* A sold instrument in a product list: loop items carry no product classes, so the card is
   found by its pill link (term=muudud). The photo is dimmed and the price is dropped. */
.elementor [role="listitem"]:has(.sw-pill a[href*="term=muudud"]) img {
  opacity: 0.7;
  filter: grayscale(0.35);
}

.elementor [role="listitem"]:has(.sw-pill a[href*="term=muudud"]) .sw-price {
  display: none;
}

/* ---------- "Telli sarnane" on sold cards (snippet 2820 rule 7, task 1027-03) ---------- */

/* Snippet 2820 wraps the availability pill of a sold instrument card in <div class="sw-pillrow"> and adds the green
   "Telli sarnane" link after it (-> /e-pood/eritellimus/?pill=<kind>&naidis=<id>). One row: Müüdud + button; the row
   wraps cleanly when the card is narrow. The button is its own link above the card's stretched "Vaata lähemalt"
   link (z-index), 36 px tall like the pill on desktop; an ::after enlarges the hit area to 44 px. Cream on green is 5.1:1. */
.elementor .sw-pillrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  gap: 0.5rem;
}

.elementor .sw-pillrow > .sw-pill {
  flex: 0 0 auto;
}

.elementor .sw-pillrow a.sw-telli:any-link {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 1.5px solid var(--sw-green);
  border-radius: 999px;
  background: var(--sw-green);
  color: var(--sw-cream);
  font-family: var(--sw-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.elementor .sw-pillrow a.sw-telli::after {
  content: "";
  position: absolute;
  inset: -0.35rem -0.125rem;   /* 36 px visual (33 inside the border), 44 px hit area */
}

.elementor .sw-pillrow a.sw-telli:any-link:hover,
.elementor .sw-pillrow a.sw-telli:any-link:focus-visible {
  border-color: color-mix(in srgb, var(--sw-green) 80%, #000);
  background: color-mix(in srgb, var(--sw-green) 80%, #000);
  color: var(--sw-cream);
}

.elementor .sw-pillrow a.sw-telli:any-link:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .elementor .sw-pillrow a.sw-telli:any-link {
    transition: none;
  }
}

/* ---------- product loops: cards on the archive, the landing grid and "Sarnased pillid" ---------- */

/* Loop items carry no product classes, so a product card is found by its availability pill
   (`.sw-pill` exists only on product cards and the product page). */

/* The grid sits on the container edge. Elementor's loop base adds 10 px side padding to the loop
   element and each item adds 10 px more, which put the cards 20 px inside their headings. */
.elementor .e-collection-loop-base:has([role="listitem"] .sw-pill),
.elementor [role="listitem"]:has(.sw-pill) {
  padding-inline: 0;
}

/* A product with no price yet says so on its card. Sold cards hide the price (above). */
.elementor [role="listitem"] .sw-price:empty::before {
  content: "Hind päringu alusel";
  font-family: var(--sw-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--sw-ink-soft);
}

@media (max-width: 767px) {
  /* One column of compact horizontal cards: a square photo on the left, the text on the right. */
  .elementor .e-collection-loop-layout-base:has([role="listitem"] .sw-pill) {
    grid-template-columns: minmax(0, 1fr);   /* the landing's sw-grid-4 is two columns on phones */
    grid-auto-rows: auto;                    /* sw-grid-3 sets 1fr: every card would take the tallest height */
    row-gap: 1rem;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-card {
    flex-direction: row;
    align-items: stretch;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-card > a:first-child {
    position: relative;
    flex: 0 0 7.5rem;
    width: 7.5rem;
    align-self: stretch;  /* F14: the photo fills the card's height, no empty white under it */
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-card img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-card-body {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.375rem;
    padding: 0.75rem;
  }

  /* Only pill, title, price and link on a compact card. A short description (sw-note, or a
     product whose description prints as a bare paragraph) is left out. */
  .elementor [role="listitem"]:has(.sw-pill) .sw-card-body > :not(.sw-pill, .sw-pillrow, .sw-h3, .sw-price, .sw-linklist) {
    display: none;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-pill {
    align-self: flex-start;
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Compact card: Müüdud and "Telli sarnane" share a row (about 200 px of the 212 px text column) or wrap
     cleanly; the button is as tall as the pill row, its ::after keeps the 44 px hit area. */
  .elementor [role="listitem"]:has(.sw-pill) .sw-pillrow {
    gap: 0.375rem;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-pillrow a.sw-telli:any-link {
    min-height: 1.75rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-pillrow a.sw-telli::after {
    inset: -0.6rem -0.25rem;   /* 28 px visual (25 inside the border), 44 px hit area */
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  .elementor [role="listitem"]:has(.sw-pill) .sw-price {
    margin: 0;
    font-size: 1rem;
  }
}

/* The archive category row (kit class sw-chips) and every link button: styles/site-ui.css. */

/* ---------- type chips on an archive (snippet 2820 rule 6, task 1027-02) ---------- */

/* "Kõik trummid · Liugurpingutitega · …": printed by snippet 2820 right under the category row (nav.sw-typechips).
   Same look as the category chips (white chip, line border, soft shadow; the current one a green ring on a light
   green tint), without the round photo. Always wraps (390 px: two or three rows); every chip is a 44 px target. */
.elementor nav.sw-typechips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.elementor nav.sw-typechips a:any-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 30, 96, 0.06), 0 4px 12px -6px rgba(0, 30, 96, 0.2);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.elementor nav.sw-typechips a:any-link:hover,
.elementor nav.sw-typechips a:any-link:focus-visible {
  border-color: var(--sw-green);
  color: var(--sw-green);
  transform: translateY(-1px);
}

.elementor nav.sw-typechips a:any-link:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 2px;
}

.elementor nav.sw-typechips a[aria-current="page"]:any-link {
  border-color: var(--sw-green);
  background: color-mix(in srgb, var(--sw-green) 10%, #fff);
  color: var(--sw-green);
  box-shadow: inset 0 0 0 1px var(--sw-green), 0 1px 2px rgba(0, 30, 96, 0.06),
    0 4px 12px -6px rgba(0, 30, 96, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .elementor nav.sw-typechips a:any-link {
    transition: none;
  }
}

/* ---------- single product: out of stock, no price, related products (session 41) ---------- */

/* Out of stock: the reassurance list and the ordering steps promise a cart that does not exist. */
.elementor-location-single.product.outofstock .sw-assure,
.elementor-location-single.product.outofstock .elementor-element-5e0a1020 {
  display: none;
}

/* The hero's "Küsi selle pilli kohta" (the hero column's own link to /kontakt-uus/) repeats the
   price-request block (email and WhatsApp) on a product without a price, and on a sold one. */
.elementor-location-single.product:not(.purchasable) .elementor-element-48904f73 > .sw-linklist:has(> a[href="/kontakt-uus/"]),
.elementor-location-single.product.outofstock .elementor-element-48904f73 > .sw-linklist:has(> a[href="/kontakt-uus/"]) {
  display: none;
}

/* Sold block buttons: side by side with equal widths when both fit, stacked full width when not. */
.elementor-location-single.product .elementor-element-5f0b0003 {
  gap: 0.75rem;
}

.elementor-location-single.product .elementor-element-5f0b0003 > .sw-btn,
.elementor-location-single.product .elementor-element-5f0b0003 > .sw-btn-ghost {
  flex: 1 1 0;
  min-width: max-content;
  box-sizing: border-box;
  padding-inline: 1.5rem;
  justify-content: center;
  text-align: center;
}

/* "Sarnased pillid" disappears when its loop has nothing to show. */
.elementor-location-single.product .elementor-element-625b1b88:not(:has([role="listitem"])) {
  display: none;
}


/* ===== site-ui.css ===== */
/* ShamanWorld site-wide UI: link buttons, product/post card CTA, category chips.
 *
 * Source of truth. Pushed with scripts/push-store-css.sh, which concatenates this file after store.css
 * and before shop-landing.css and custom-order.css into the kit's Site Settings -> Custom CSS.
 * Colours and fonts are kit variables (docs/Elementor-design-system.md).
 *
 * Specificity: the kit's own rule for sw-linklist is `.elementor .sw-linklist a` (0,2,1) and Elementor's
 * e-default-a reset sits at the same level. Every link rule here uses `a:any-link` (+0,1,0), so it wins
 * without !important. Chips come after the base link rules and match them on the same specificity.
 */

/* ---------- link paragraph (kit class sw-linklist): one line of link buttons ---------- */

/* font-size 0 hides any stray text between inline links; each link restores its own size.
   A span holding two or more links (the Terje "Valislingid" row on /inimesed-uus/) is a row too. */
.elementor :is(p, div).sw-linklist,
.elementor span.sw-linklist:has(> a ~ a) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0;
}

/* ---------- link buttons ---------- */

.elementor .sw-linklist a:any-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 2.5rem;
  max-width: 100%;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--sw-green);
  border-radius: 999px;
  background: #fff;
  color: var(--sw-green);
  font-family: var(--sw-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: left;
  text-decoration: none;
  text-wrap: balance;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.elementor .sw-linklist a:any-link::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block;
  transition: transform 0.2s ease;
}

.elementor .sw-linklist a:any-link:hover::after,
.elementor .sw-linklist a:any-link:focus-visible::after {
  transform: translateX(3px);
}

.elementor .sw-linklist a:any-link:hover,
.elementor .sw-linklist a:any-link:focus-visible {
  background: var(--sw-green);
  color: #fff;
}

.elementor .sw-linklist a:any-link:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .elementor .sw-linklist a:any-link {
    min-height: 2.75rem;
  }
}

/* Contact links (mailto, tel, WhatsApp) open a mail, a call or a chat: no arrow. */
.elementor .sw-linklist a[href^="mailto:"]:any-link::after,
.elementor .sw-linklist a[href^="tel:"]:any-link::after,
.elementor .sw-linklist a[href*="wa.me/"]:any-link::after {
  content: none;
}

/* In-page jump (href "#…"): a quiet chip, not a green call to action. White, grey outline, ink text,
   a down arrow. Same height scale as the pills. */
.elementor .sw-linklist a[href^="#"]:any-link {
  border-color: var(--sw-line);
  background: #fff;
  color: var(--sw-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.elementor .sw-linklist a[href^="#"]:any-link::after {
  content: "\2193";
  content: "\2193" / "";
}

.elementor .sw-linklist a[href^="#"]:any-link:hover,
.elementor .sw-linklist a[href^="#"]:any-link:focus-visible {
  border-color: var(--sw-green);
  background: #fff;
  color: var(--sw-green);
}

/* A paragraph with three or more links that is not a chip row: compact neutral tags, no arrow. */
.elementor .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:any-link {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  border-color: var(--sw-line);
  background: #fff;
  color: var(--sw-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.elementor .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:any-link::after {
  content: none;
}

.elementor .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:any-link:hover,
.elementor .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:any-link:focus-visible {
  border-color: var(--sw-green);
  background: #fff;
  color: var(--sw-green);
}

@media (max-width: 767px) {
  .elementor .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:any-link {
    min-height: 2.75rem;
  }
}

/* The same for a card whose link paragraphs are stacked one link each (the totem lists on
   /shamaani-tarkused-uus/): three or more in one card body. A card with an in-page link keeps its chips. */
.elementor .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:any-link {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  border-color: var(--sw-line);
  background: #fff;
  color: var(--sw-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.elementor .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:any-link::after {
  content: none;
}

.elementor .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:any-link:hover,
.elementor .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:any-link:focus-visible {
  border-color: var(--sw-green);
  background: #fff;
  color: var(--sw-green);
}

@media (max-width: 767px) {
  .elementor .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:any-link {
    min-height: 2.75rem;
  }
}

/* Dark backgrounds: cream outline and text, cream fill on hover. Links inside a (white) .sw-card keep the
   normal light-background style: the :where() exclusion adds no specificity (task 1023-03, 2254 band 58d67125). */
.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist a:not(:where(.sw-card *)):any-link {
  border-color: var(--sw-cream);
  background: transparent;
  color: var(--sw-cream);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist a:not(:where(.sw-card *)):any-link:hover,
.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist a:not(:where(.sw-card *)):any-link:focus-visible {
  background: var(--sw-cream);
  color: var(--sw-forest);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist a:not(:where(.sw-card *)):any-link:focus-visible {
  outline-color: var(--sw-cream);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:not(:where(.sw-card *)):any-link {
  border-color: var(--sw-cream);
  background: transparent;
  color: var(--sw-cream);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:not(:where(.sw-card *)):any-link:hover,
.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-linklist:has(a ~ a ~ a):not(.sw-chips) a:not(:where(.sw-card *)):any-link:focus-visible {
  background: var(--sw-cream);
  color: var(--sw-forest);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:not(:where(.sw-card *)):any-link {
  border-color: var(--sw-cream);
  background: transparent;
  color: var(--sw-cream);
}

.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:not(:where(.sw-card *)):any-link:hover,
.elementor :is(.sw-band-green, .sw-band-ink, .sw-photo-content) .sw-card-body:has(> .sw-linklist + .sw-linklist + .sw-linklist):not(:has(a[href^="#"])) > .sw-linklist:not(.sw-chips) a:not(:where(.sw-card *)):any-link:focus-visible {
  background: var(--sw-cream);
  color: var(--sw-forest);
}

/* Play link (kit class sw-listen): keeps its play icon, gets no arrow. */
.elementor .sw-linklist.sw-listen a:any-link::after {
  content: none;
}

.elementor .sw-linklist.sw-listen::before {
  font-size: 0.875rem;
}

/* Footer exception: footer links stay plain green underlined text — except the Kontakt column's phone and
   e-mail (nodes 20da8423, 23b3a815 in footer 2344), which keep the link-button pill (user, 2026-10-13). */
:is(.elementor-location-footer, [data-elementor-type="footer"]) :is(p, div).sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) {
  display: block;
  gap: 0;
  font-size: 0.8125rem;
}

:is(.elementor-location-footer, [data-elementor-type="footer"]) .sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) a:any-link {
  display: inline;
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sw-green);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: underline;
  transition: none;
}

:is(.elementor-location-footer, [data-elementor-type="footer"]) .sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) a:any-link::after {
  content: none;
}

:is(.elementor-location-footer, [data-elementor-type="footer"]) .sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) a:any-link:hover,
:is(.elementor-location-footer, [data-elementor-type="footer"]) .sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) a:any-link:focus-visible {
  background: none;
  color: var(--sw-green);
}

:is(.elementor-location-footer, [data-elementor-type="footer"]) .sw-linklist:not([data-id="20da8423"], [data-id="23b3a815"]) a:any-link:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 2px;
}

/* Footer Kontakt pills: stacked, left-aligned, on the cream footer. */
:is(.elementor-location-footer, [data-elementor-type="footer"]) :is([data-id="20da8423"], [data-id="23b3a815"]).sw-linklist {
  justify-content: flex-start;
}

/* ---------- cards: the CTA link is the card's button ---------- */

/* Cards are flex columns (kit sw-card sw-col). The body fills the height so the CTA sits at the bottom. */
.elementor .sw-card > .sw-card-body {
  flex: 1 1 auto;
  align-self: stretch;
}

/* A loop card's CTA sits on the bottom edge of its card. Link lists in intro cards (the /inimesed-uus/
   cards) keep the normal gap, so the last link is not pushed down by a taller neighbour. */
.elementor [role="listitem"] .sw-card-body > .sw-linklist:last-child {
  margin-top: auto;
}

/* Stretched link: the CTA's ::before covers the whole card, so a click anywhere on it follows the CTA.
   The loop item fills its grid row and the card fills the item, so every CTA ends on the same line. */
.elementor [role="listitem"]:has(.sw-linklist a:any-link) {
  position: relative;
  display: flex;
  flex-direction: column;
}

.elementor [role="listitem"]:has(.sw-linklist a:any-link) > .sw-card {
  flex: 1 1 auto;
}

.elementor [role="listitem"] .sw-linklist a:any-link::before {
  content: "";
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .elementor [role="listitem"] .sw-linklist a:any-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .elementor [role="listitem"] .sw-linklist {
    align-self: stretch;
  }

  .elementor [role="listitem"]:has(.sw-linklist a:any-link) .sw-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  @media (hover: hover) {
    .elementor [role="listitem"]:has(.sw-linklist a:any-link):hover .sw-card {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px -14px rgba(0, 30, 96, 0.35);
    }
  }
}

/* Phones: horizontal compact cards, so the CTA is a compact pill, not full width. */
@media (max-width: 767px) {
  .elementor [role="listitem"] .sw-linklist {
    justify-content: flex-start;
  }

  .elementor [role="listitem"] .sw-linklist a:any-link {
    width: auto;
    padding: 0.5rem 0.95rem;
  }
}

/* ---------- category chips (kit class sw-chips) ---------- */

/* The e-pood landing's link row (a paragraph) and the archive's category row (a container of
   paragraphs) both carry sw-chips. A chip is the link inside it. */
.elementor .sw-chips a:any-link {
  gap: 0.6rem;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  border: 1px solid var(--sw-line);
  background: #fff;
  color: var(--sw-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 30, 96, 0.06), 0 4px 12px -6px rgba(0, 30, 96, 0.2);
}

.elementor .sw-chips a:any-link::before {
  content: "";
  flex: 0 0 2.125rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background-color: var(--sw-line);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.elementor .sw-chips a:any-link::after {
  content: none;
}

.elementor .sw-chips a[href$="/floodid/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2026/10/FB_IMG_1779607550542-150x150.jpg");
}

.elementor .sw-chips a[href$="/trummid/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2022/09/photo_5852721908599077576_y-150x150.jpg");
}

.elementor .sw-chips a[href$="/parmupillid/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2026/09/parmupill-sw-parmu-008-1-150x150.jpg");
}

.elementor .sw-chips a[href$="/kasitoo/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2026/09/trummialus-sw-kasitoo-001-1-150x150.jpg");
}

.elementor .sw-chips a[href$="/koik-tooted/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2024/11/MLC6633-150x150.jpg");
}

.elementor .sw-chips a[href$="/eritellimus/"]::before {
  background-image: url("https://shamanworld.ee/wp-content/uploads/2026/10/IMG_20210207_150733-150x150.jpg");
}

.elementor .sw-chips a:any-link:hover,
.elementor .sw-chips a:any-link:focus-visible {
  background: #fff;
  color: var(--sw-green);
  border-color: var(--sw-green);
  transform: translateY(-1px);
}

/* Current category (set by the archive page script): a green ring on a light green tint. The ring is an
   inset shadow, so the chip has the same 1px border and the same height as the others. */
.elementor .sw-chips a[aria-current="page"]:any-link {
  border: 1px solid var(--sw-green);
  background: color-mix(in srgb, var(--sw-green) 10%, #fff);
  color: var(--sw-green);
  box-shadow: inset 0 0 0 1px var(--sw-green), 0 1px 2px rgba(0, 30, 96, 0.06),
    0 4px 12px -6px rgba(0, 30, 96, 0.2);
}

@media (max-width: 767px) {
  /* one horizontally scrollable row: no wrap, hidden scrollbar, chips snap to the edge */
  /* doubled class: the archive row also carries sw-row, whose wrap rule has the same specificity */
  .elementor .sw-chips.sw-chips,
  .elementor .sw-linklist.sw-chips {
    flex-wrap: nowrap;
    align-self: stretch;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    padding-block: 0.375rem;
    -ms-overflow-style: none;
    /* F10: the row bleeds to the phone's edges. The margin is the 1rem page gutter, which both the landing
       and the archive row sit in; the first chip stays on the content edge. A short fade on the right
       says the row scrolls (the fade covers the padding, so a chip at the end is not faded). */
    width: calc(100% + 2rem);
    margin-inline: -1rem;
    padding-inline: 1rem 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }

  .elementor .sw-chips::-webkit-scrollbar {
    display: none;
  }

  .elementor .sw-chips > * {
    flex: 0 0 auto;
  }

  .elementor .sw-chips a:any-link {
    min-height: 2.75rem;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor .sw-linklist a:any-link,
  .elementor .sw-linklist a:any-link::after,
  .elementor .sw-chips a:any-link,
  .elementor [role="listitem"]:has(.sw-linklist a:any-link) .sw-card {
    transition: none;
  }
}


/* ===== shop-landing.css ===== */
/* ShamanWorld e-pood landing (page 570): hero slider and trust strip.
 *
 * Source of truth. Pushed with scripts/push-store-css.sh, which concatenates
 * styles/store.css, styles/site-ui.css, this file and styles/custom-order.css into the kit's Site Settings -> Custom CSS.
 * Link buttons and the card CTA are in styles/site-ui.css, not here.
 * Every rule is scoped to body.page-id-570 so nothing leaks to other pages.
 * Colours and fonts come from the kit variables (docs/Elementor-design-system.md).
 */

/* ---------- hero slider (sw-slider / sw-slide, controls from slider.js) ---------- */

body.page-id-570 .sw-slider-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

body.page-id-570 .sw-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
}

body.page-id-570 .sw-slider::-webkit-scrollbar {
  display: none;
}

body.page-id-570 .sw-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Each slide's text block is centred in the area above the control bar. The theme band padding
   (6 rem / 3.5 rem) is removed so the block centres in the slide itself. The bottom padding
   reserves the bar (44 px + 12 px offset = 56 px) plus 2 rem; the top gets 2 rem. The gap above
   the block then equals the gap between the block and the bar, with 2 rem clearance on every width. */
body.page-id-570 {
  --sw-ctl-zone: 3.5rem;
}

body.page-id-570 .sw-slide {
  padding-block: 0;
}

body.page-id-570 .sw-slide > .sw-photo-content {
  flex: 1 1 auto;
  justify-content: center;
  padding-block: 2rem calc(var(--sw-ctl-zone) + 2rem);
}

/* the eyebrow's theme top margin (13 px) is invisible whitespace; drop it so the visible edges are centred */
body.page-id-570 .sw-slide > .sw-photo-content > :first-child {
  margin-block-start: 0;
}

body.page-id-570 .sw-slide > .sw-photo-content > :last-child {
  margin-block-end: 0;
}

/* F7: veil 0.6 on every slide, 0.7 on the busy photos (slides 2, 4 and 5: drum, workshop, gift card) */
body.page-id-570 .sw-slide .sw-photo-veil {
  background-color: rgba(0, 16, 36, 0.6);
}

body.page-id-570 .sw-slide:nth-child(2) .sw-photo-veil,
body.page-id-570 .sw-slide:nth-child(4) .sw-photo-veil,
body.page-id-570 .sw-slide:nth-child(5) .sw-photo-veil {
  background-color: rgba(0, 16, 36, 0.7);
}

body.page-id-570 .sw-slide .sw-eyebrow {
  font-size: 0.8125rem;
}

body.page-id-570 .sw-slide .sw-eyebrow,
body.page-id-570 .sw-slide .sw-lead {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* controls: dots + pause only, floating on the photo (no bar background; user request 2026-10-14).
   Cream on the photo with a soft shadow so they stay readable on light photos too. */
body.page-id-570 .sw-slider-ctl {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding: 0;
  background: transparent;
}

/* every control is a 44 x 44 hit area; the visual dot or icon sits inside it */
body.page-id-570 .sw-slider-ctl button {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sw-cream);
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

body.page-id-570 .sw-slider-ctl button:hover {
  color: #fff;
}

body.page-id-570 .sw-slider-ctl button:focus-visible {
  outline: 2px solid var(--sw-cream);
  outline-offset: -4px;
}

/* the pause button is hidden after a manual slide change (slider.js sets the hidden attribute) */
body.page-id-570 .sw-slider-ctl [hidden] {
  display: none !important;
}

body.page-id-570 .sw-slider-dots {
  display: inline-flex;
  align-items: center;
}

/* pill-shaped dots: 8 px translucent cream circles; the active one is a solid cream pill, 20 x 8 px */
body.page-id-570 .sw-slider-dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.55);
  transition: width 0.2s ease, background-color 0.2s ease;
}

body.page-id-570 .sw-slider-dot:hover::before {
  background: rgba(255, 252, 246, 0.85);
}

body.page-id-570 .sw-slider-dot[aria-current="true"]::before {
  width: 1.25rem;
  background: var(--sw-cream);
}

/* no arrows: swipe, dots or autoplay. Higher specificity than the button rule above. */
body.page-id-570 .sw-slider-ctl .sw-slider-prev,
body.page-id-570 .sw-slider-ctl .sw-slider-next {
  display: none;
}

/* the script widget takes no room */
body.page-id-570 .sw-slider-js {
  display: none;
}

/* ---------- trust strip (sw-trust) ---------- */

body.page-id-570 .sw-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 0.75rem 2rem;
}

body.page-id-570 .sw-trust > * {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  font-family: var(--sw-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-ink-soft);
}

body.page-id-570 .sw-trust > *::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.35em;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--sw-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  body.page-id-570 .sw-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.5rem;
    align-items: start;
  }

  body.page-id-570 .sw-trust > * {
    padding-left: 1rem;
    text-wrap: balance;
  }

  body.page-id-570 .sw-trust > *::before {
    left: 0.1rem;
  }
}

@media (max-width: 767px) {
  /* F5: category tiles on phones show image, title and link only, with a compact body */
  body.page-id-570 #kategooriad .sw-body {
    display: none;
  }

  body.page-id-570 #kategooriad .sw-card-body {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  /* F6: tap target of at least 44 px for the tile title link (the link buttons: styles/site-ui.css). */
  body.page-id-570 #kategooriad .sw-h3 a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* F4: on phones the whole tile is the link. The CTA pill is hidden; the title link's ::after
     covers the tile (the tile is the containing block). */
  body.page-id-570 #kategooriad .sw-card{
    position: relative;
  }

  body.page-id-570 #kategooriad .sw-card .sw-linklist{
    display: none;
  }

  body.page-id-570 #kategooriad .sw-h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
  }
}

/* the tile CTA sits on the bottom edge of its tile (desktop; hidden on phones, see above) */
body.page-id-570 #kategooriad .sw-card-body > .sw-linklist:last-child{
  margin-top: auto;
}

/* in-page anchors: land the section a little below the top of the viewport */
body.page-id-570 #kohe-saadaval,
body.page-id-570 #kategooriad,
body.page-id-570 #eritellimus,
body.page-id-570 #meisterda-ise,
body.page-id-570 #kinkekaart,
body.page-id-570 #tellimine,
body.page-id-570 #kkk {
  scroll-margin-top: 1.5rem;
}


/* ===== custom-order.css ===== */
/* ===== "Pill sinu soovi järgi" (page 2832, /e-pood/eritellimus/) =====
 * Pushed into the kit's custom CSS by scripts/push-store-css.sh (with store.css and
 * shop-landing.css). Everything is scoped to the picker widget (.sw-cfg-app) or to an anchor
 * on this page (#vali, #paring, #kkk, #tahad), so nothing leaks to other pages. Kit classes
 * (sw-*) come from Elementor; this file adds only what the picker needs. */

/* ---------- page bands ---------- */

#vali { scroll-margin-top: 8rem; }

/* Hero button row: centred under the lead (user request 2026-10-14). */
#alusta { justify-content: center; width: 100%; }

/* A1: "Alusta eritellimusega" jumps to the steps band; the sticky header must not cover its heading.
   Smooth scrolling only on this page (the picker marks it) and only without reduced motion. */
#sammud { scroll-margin-top: 8rem; }

@media (prefers-reduced-motion: no-preference) {
  html:has(#sw-cfg-app) {
    scroll-behavior: smooth;
  }
}

/* F15: the banner sits right under the picker heading: the picker's 20 px flex gap is pulled up by 12 px */
#vali .sw-cfg-app {
  margin-top: -0.75rem;
}

/* F8: a heading the script focuses (the step "1. Pill" after "Vaata valikud üle") draws no box */
.sw-cfg-app h2[tabindex="-1"]:focus,
.sw-cfg-app h3[tabindex="-1"]:focus {
  outline: none;
}
#paring { scroll-margin-top: 8rem; }
#paring .sw-container { max-width: 46rem; }
#kkk .sw-container { max-width: 54rem; }

/* green closing band: the kit's green-band rule needs an explicit cream heading and body
   (docs/Elementor-design-system.md, gotchas); the buttons sit centred in their row */
#tahad h2 { color: var(--sw-cream); }
#tahad p { color: var(--sw-cream); opacity: 0.9; }
#tahad .sw-row { justify-content: center; }

/* ---------- picker widget ---------- */

.sw-cfg-app {
  width: 100%;
  min-width: 0;
  color: var(--sw-body);
  font-family: var(--sw-font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.sw-cfg-app *,
.sw-cfg-app *::before,
.sw-cfg-app *::after {
  box-sizing: border-box;
}

.sw-cfg-app [hidden] {
  display: none !important;
}

.sw-cfg-app :focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 3px;
}

.sw-cfg-app img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sw-cfg-app button,
.sw-cfg-app button * {
  font: inherit;
  white-space: normal;
}

/* steps and headings */

.sw-cfg-app .sw-cfg-step {
  margin: 0 0 2.5rem;
  min-width: 0;
}

.sw-cfg-app .sw-cfg-title {
  margin: 0 0 0.5rem;
  font-family: var(--sw-font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-lead {
  margin: 0 0 1rem;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-fixed {
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-gtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-group + .sw-cfg-group {
  margin-top: 1.75rem;
}

.sw-cfg-app .sw-cfg-help {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-muted {
  color: var(--sw-ink-soft);
}

/* step 1: instrument cards (horizontal: photo left, name right; column on narrow screens) */

.sw-cfg-app .sw-cfg-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.sw-cfg-app .sw-cfg-pillcard {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 9rem;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--sw-cream);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  cursor: pointer;
}

.sw-cfg-app .sw-cfg-pillcard:hover {
  border-color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-pillcard-img {
  flex: 0 0 9rem;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
}

.sw-cfg-app .sw-cfg-pillcard-label {
  align-self: center;
  padding: 0 1rem;
  font-family: var(--sw-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-pillcard[aria-pressed="true"] {
  border-color: var(--sw-green);
  box-shadow: 0 0 0 2px var(--sw-green);
}

/* step 2: option cards (with a picture) and chips (without) */

.sw-cfg-app .sw-cfg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* 1016-11: the wood group has bigger cards, 3 per row (2 under 768 px, see the media query below),
   so a wood can be judged from its photo. Scoped to the puit group, and to the drum frame colours (raam,
   1019-02), whose frame sits at the edge of the photo. */
.sw-cfg-app .sw-cfg-group[data-gid="puit"] .sw-cfg-cards,
.sw-cfg-app .sw-cfg-group[data-gid="raam"] .sw-cfg-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sw-cfg-app .sw-cfg-group[data-gid="puit"] .sw-cfg-card-label,
.sw-cfg-app .sw-cfg-group[data-gid="raam"] .sw-cfg-card-label {
  font-size: 1rem;
}

.sw-cfg-app .sw-cfg-card {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  padding: 0 0 0.625rem;
  overflow: hidden;
  text-align: left;
  color: var(--sw-ink);
  background: var(--sw-cream);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  cursor: pointer;
}

.sw-cfg-app .sw-cfg-card:hover {
  border-color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-card-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.sw-cfg-app .sw-cfg-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sw-cfg-app .sw-cfg-card-label {
  padding: 0.5rem 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-card-help {
  padding: 0.25rem 0.625rem 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-card[aria-pressed="true"] {
  border-color: var(--sw-green);
  box-shadow: 0 0 0 2px var(--sw-green);
}

.sw-cfg-app .sw-cfg-card[aria-pressed="true"] .sw-cfg-card-label {
  color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sw-cfg-app .sw-cfg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sw-ink);
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
}

.sw-cfg-app .sw-cfg-chip:hover {
  border-color: var(--sw-green);
}

/* the check sits to the right of the label; its 14 px are always reserved, so a chip keeps its width
   when it is chosen (no row jump). Selected: green fill, white text and check. */
.sw-cfg-app .sw-cfg-chip::after {
  content: "";
  flex: 0 0 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.875rem 0.875rem;
}

.sw-cfg-app .sw-cfg-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--sw-green);
  border-color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-chip[aria-pressed="true"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.1L13 4.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* selected state of image cards (instrument cards, option cards, reference cards): a 2 px green ring
   and a 28 px green check badge at the top-right corner, with a white ring so it reads on any photo.
   Unselected cards have no badge. */

.sw-cfg-app .sw-cfg-pillcard,
.sw-cfg-app .sw-cfg-card,
.sw-cfg-app .sw-cfg-ref {
  position: relative;
}

.sw-cfg-app .sw-cfg-pillcard[aria-pressed="true"]::after,
.sw-cfg-app .sw-cfg-card[aria-pressed="true"]::after,
.sw-cfg-app .sw-cfg-ref.is-on::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--sw-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.6l4.2 4.2 8.8-9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.sw-cfg-app .sw-cfg-ref.is-on {
  border-color: var(--sw-green);
  box-shadow: 0 0 0 2px var(--sw-green);
}

/* link buttons: every picker button and small text link is an outline pill (the site's link-button
   style): 1.5 px green border, white ground, green text; filled green on hover. The primary action
   ("Edasi päringu juurde") stays solid. #sammud is the "Kolm sammu" band (its hint link). */

.sw-cfg-app .sw-cfg-btn,
.sw-cfg-app .sw-cfg-refbtn,
.sw-cfg-app .sw-cfg-reflink,
.sw-cfg-app .sw-cfg-more,
.sw-cfg-app .sw-cfg-copy,
#sammud .sw-cfg-linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 1.05rem;
  font-family: var(--sw-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  color: var(--sw-green);
  background: #fff;
  border: 1.5px solid var(--sw-green);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sw-cfg-app .sw-cfg-btn:hover,
.sw-cfg-app .sw-cfg-refbtn:hover,
.sw-cfg-app .sw-cfg-reflink:hover,
.sw-cfg-app .sw-cfg-more:hover,
.sw-cfg-app .sw-cfg-copy:hover,
#sammud .sw-cfg-linkbtn:hover {
  color: #fff;
  background: var(--sw-green);
}

.sw-cfg-app .sw-cfg-btn:focus-visible,
.sw-cfg-app .sw-cfg-refbtn:focus-visible,
.sw-cfg-app .sw-cfg-reflink:focus-visible,
.sw-cfg-app .sw-cfg-more:focus-visible,
.sw-cfg-app .sw-cfg-copy:focus-visible,
#sammud .sw-cfg-linkbtn:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 3px;
}

/* banner above step 1, shown when the page opens with ?naidis= (label, title, text, two actions) */

.sw-cfg-app .sw-cfg-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.125rem;
  background: #eef6ee;
  border-left: 4px solid var(--sw-green);
  border-radius: 8px;
}

.sw-cfg-app .sw-cfg-banner-img {
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 8px;
}

.sw-cfg-app .sw-cfg-banner-body {
  flex: 1 1 14rem;
  min-width: 0;
}

.sw-cfg-app .sw-cfg-banner-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-banner-icon {
  position: relative;
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--sw-green);
}

.sw-cfg-app .sw-cfg-banner-icon::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.4375rem;
  width: 0.25rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sw-cfg-app .sw-cfg-banner-title {
  margin: 0;
  font-family: var(--sw-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sw-ink);
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-banner-text {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-banner-note {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* the quiet line under "1. Pill" when the page opens with ?pill= only; the "eeltäidetud" group tag */

.sw-cfg-app .sw-cfg-pickline {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-gtrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
}

.sw-cfg-app .sw-cfg-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sw-green);
  background: #fff;
  border: 1px solid var(--sw-green);
  border-radius: 999px;
}

/* step 1 of "Kolm sammu" when the picker is prefilled: green border, tinted ground, hint and link */

#sammud .sw-cfg-step-on {
  background: #eef6ee;
  border: 1.5px solid var(--sw-green);
}

#sammud .sw-cfg-hint[hidden] {
  display: none;
}

#sammud .sw-cfg-hint {
  margin-top: 0.75rem;
}

#sammud .sw-cfg-hint-text {
  margin: 0;
  font-weight: 600;
  color: var(--sw-ink);
}

#sammud .sw-cfg-linkbtn {
  margin-top: 0.75rem;
}

/* 1016-12: "Vaata selles puidus pille", links to the flutes made of the chosen wood (under the wood cards) */

.sw-cfg-app .sw-cfg-woodrefs {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sw-line);
}

.sw-cfg-app .sw-cfg-woodrefs-title {
  margin: 0 0 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-woodrefs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-cfg-app .sw-cfg-woodref {
  min-width: 0;
  margin: 0;
}

.sw-cfg-app .sw-cfg-woodref-link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding-bottom: 0.625rem;
  overflow: hidden;
  color: var(--sw-ink);
  text-decoration: none;
  background: var(--sw-cream);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
}

.sw-cfg-app .sw-cfg-woodref-link:hover {
  border-color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-woodref-link:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 2px;
}

.sw-cfg-app .sw-cfg-woodref-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.sw-cfg-app .sw-cfg-woodref-name {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-woodref-link .sw-cfg-status {
  margin-left: 0.625rem;
}

/* step 3: reference gallery */

.sw-cfg-app .sw-cfg-refs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-cfg-app .sw-cfg-ref {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--sw-cream);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
}

.sw-cfg-app .sw-cfg-ref-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.sw-cfg-app .sw-cfg-ref-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem;
}

.sw-cfg-app .sw-cfg-ref-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sw-ink);
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-status {
  align-self: flex-start;
  margin: 0;
  margin-top: auto;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--sw-line);
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-status.is-avail {
  color: var(--sw-green);
  border-color: var(--sw-green);
}

.sw-cfg-app .sw-cfg-ref-body .sw-cfg-refbtn,
.sw-cfg-app .sw-cfg-ref-body .sw-cfg-reflink {
  width: 100%;
}

.sw-cfg-app .sw-cfg-refbtn[aria-pressed="true"] {
  color: #fff;
  background: var(--sw-green);
}

.sw-cfg-app .sw-cfg-more {
  margin-top: 1rem;
}

/* two-column layout on desktop: options left, summary right (sticky) */

.sw-cfg-app .sw-cfg-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0 2.5rem;
}

.sw-cfg-app .sw-cfg-main {
  min-width: 0;
}

.sw-cfg-app .sw-cfg-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.25rem;
  background: var(--sw-cream);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
}

.sw-cfg-app .sw-cfg-aside .sw-cfg-title {
  margin-bottom: 0;
}

.sw-cfg-app .sw-cfg-sum {
  margin: 0;
}

.sw-cfg-app .sw-cfg-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--sw-line);
}

.sw-cfg-app .sw-cfg-row dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-row dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--sw-ink);
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-row dd.sw-cfg-muted {
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-price {
  margin: 0;
  color: var(--sw-ink);
}

.sw-cfg-app .sw-cfg-price[hidden] {
  display: none;
}

.sw-cfg-app .sw-cfg-price-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-price-text {
  margin: 0;
  font-family: var(--sw-font-heading);
  font-size: 1.125rem;
  line-height: 1.4;
}

.sw-cfg-app .sw-cfg-prows {
  margin: 0;
}

.sw-cfg-app .sw-cfg-prow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.375rem 0;
  border-top: 1px solid var(--sw-line);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.sw-cfg-app .sw-cfg-price-text + .sw-cfg-prows {
  margin-top: 0.5rem;
}

.sw-cfg-app .sw-cfg-prow dt {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sw-cfg-app .sw-cfg-prow dd {
  margin: 0;
  flex: none;
  text-align: right;
  white-space: nowrap;
}

.sw-cfg-app .sw-cfg-prow.is-total {
  padding-top: 0.5rem;
  border-top: 2px solid var(--sw-ink);
  font-family: var(--sw-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

/* A2: key ranges (small headings above the chips of a group) */

.sw-cfg-app .sw-cfg-section {
  margin-top: 0.875rem;
}

.sw-cfg-app .sw-cfg-section .sw-cfg-chips {
  margin-top: 0.375rem;
}

.sw-cfg-app .sw-cfg-sub {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-section + .sw-cfg-chips {
  margin-top: 0.875rem;
}

/* A4: a wood card waiting for its photo (the product list is loading) keeps the card's size */
.sw-cfg-app .sw-cfg-card-img:empty {
  background: var(--sw-line);
}

.sw-cfg-app .sw-cfg-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--sw-ink-soft);
}

.sw-cfg-app .sw-cfg-aside .sw-cfg-go {
  width: 100%;
  min-height: 44px;
  margin-top: 0.25rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sw-cream);
  background: var(--sw-green);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.sw-cfg-app .sw-cfg-aside .sw-cfg-copy {
  width: 100%;
}

@media (min-width: 900px) {
  .sw-cfg-app .sw-cfg-body {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }

  .sw-cfg-app .sw-cfg-aside {
    position: sticky;
    top: 7rem;
  }
}

/* the bar appended to <body> by custom-order.js: shown under 768 px only, while the picker is on screen */

.sw-cfg-bar {
  display: none;
}

.sw-cfg-bar button:focus-visible {
  outline: 3px solid var(--sw-green);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sw-cfg-app {
    padding-bottom: 4.5rem;
  }

  .sw-cfg-app .sw-cfg-btn,
  .sw-cfg-app .sw-cfg-refbtn,
  .sw-cfg-app .sw-cfg-reflink,
  .sw-cfg-app .sw-cfg-more,
  .sw-cfg-app .sw-cfg-copy,
  #sammud .sw-cfg-linkbtn {
    min-height: 2.75rem;
  }

  .sw-cfg-app .sw-cfg-cards,
  .sw-cfg-app .sw-cfg-group[data-gid="puit"] .sw-cfg-cards,
  .sw-cfg-app .sw-cfg-group[data-gid="raam"] .sw-cfg-cards,
  .sw-cfg-app .sw-cfg-refs-list,
  .sw-cfg-app .sw-cfg-woodrefs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sw-cfg-app .sw-cfg-group[data-gid="puit"] .sw-cfg-cards,
  .sw-cfg-app .sw-cfg-group[data-gid="raam"] .sw-cfg-cards {
    gap: 0.75rem;
  }

  /* form: inputs and the two links get a 44 px tap area */
  #paring input.sw-field,
  #paring textarea.sw-field {
    min-height: 44px;
  }

  #paring .sw-linklist a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .sw-cfg-bar.is-on {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: block;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--sw-cream);
    border-top: 1px solid var(--sw-line);
  }

  .sw-cfg-bar .sw-cfg-bar-go {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: normal;
    color: var(--sw-cream);
    background: var(--sw-green);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
}

@media (max-width: 560px) {
  .sw-cfg-app .sw-cfg-pillcard {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0 0.75rem;
    text-align: center;
  }

  .sw-cfg-app .sw-cfg-pillcard-img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .sw-cfg-app .sw-cfg-pillcard-label {
    align-self: auto;
    padding: 0 0.5rem;
    font-size: 1rem;
  }

  .sw-cfg-app .sw-cfg-title {
    font-size: 1.375rem;
  }

  .sw-cfg-app .sw-cfg-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}/* End custom CSS */