/* Design typeface: the official EB Garamond (self-hosted).
   Google's webfont build breaks UPPERCASE Latvian macrons (Ā/Ē/Ī/Ū collide
   with the next glyph); this variable TTF from the upstream project renders
   them correctly, so we can use the exact Figma font. */
/* ------------------------------------------------------------------ */
/* Jost — the UI / small-text face (self-hosted variable, 100-900).     */
/* latin-ext carries the Latvian diacritics and cyrillic the Russian    */
/* text; loading latin alone is what broke the macrons on the earlier   */
/* attempt, so all three subsets ship.                                  */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Type system: EB Garamond carries titles and display copy, Jost the   */
/* UI and small text. This baseline keeps any heading the redesign has  */
/* not styled by hand (404, plugin templates, editor content) on the    */
/* serif — individual rules below still win where a heading is UI.      */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4,
.page-heading,
.block-heading,
.section-heading,
.entry-title,
#main-footer .widget-title {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost/jost-latin.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost/jost-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: 'Jost';
  src: url('../fonts/jost/jost-cyrillic.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost/jost-latin-italic.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-latin-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost/jost-latin-ext-italic.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-latin-ext-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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: 'Jost';
  src: url('../fonts/jost/jost-cyrillic-italic.woff2') format('woff2-variations'),
       url('../fonts/jost/jost-cyrillic-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'EB Garamond LV';
  src: url('../fonts/eb-garamond-var.woff2') format('woff2-variations'),
       url('../fonts/eb-garamond-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/*
 * 2026 redesign (ClickUp 86bbmpgt4, Figma node 396:13067 "Homepage").
 *
 * Design language:
 *  - Serif:   'EB Garamond' 500 — headings, product titles/prices  (#2A2B26)
 *  - The whole store is set in EB Garamond (client decision): UI sans
 *    declarations are written as "Poppins" so the Store Design body-font
 *    setting drives them; picking League Spartan there restores the
 *    design's Jost-substitute sans for menus, labels and form fields.
 *  - Neutrals #2A2B26 / #1E2934; section canvas #F9F9F9.
 *  - Accent elements keep the theme's red-family hexes (#475836 …) so the
 *    Store Design customizer's primary-color derivation keeps recoloring
 *    them; this file is also regenerated by the customizer pipeline.
 */

/* Design grid: 1200px content column on the homepage */
body.page-template-page-home main .container {
  max-width: 1230px;
}

/* ------------------------------------------------------------------ */
/* Homepage: "Populārākie" featured products (Figma 398:18336)         */
/* ------------------------------------------------------------------ */

body.page-template-page-home .featured-products {
  padding: 40px 0 40px;
  /* full-bleed #F9F9F9 canvas behind the section */
  background: #F9F9F9;
  box-shadow: 0 0 0 100vmax #F9F9F9;
  clip-path: inset(0 -100vmax);
}
body.page-template-page-home .featured-products.pt-70 {
  padding-top: 40px;
}
body.page-template-page-home .featured-products:last-of-type {
  padding-bottom: 80px;
}

body.page-template-page-home .featured-products .block-heading {
  margin: 0 0 24px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  color: #2A2B26;
}

.products-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 12px;
}
@media screen and (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
}

.products-grid__item {
  text-align: left;
}
.products-grid__item-image {
  display: block;
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0 0 10px;
  border-radius: 4px;
  overflow: hidden;
}
.products-grid__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.products-grid__item-title {
  margin: 0 0 4px;
  overflow: hidden;
}
.products-grid__item-title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: #2A2B26;
}
/* Design underlines the title on hover only (the mock shows one card hovered) */
.products-grid__item-title a:hover {
  color: #2A2B26;
  text-decoration: underline;
  text-underline-position: from-font;
}

.products-grid__item-price {
  margin: 0;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: #2A2B26;
}
.products-grid__item-price * {
  color: inherit;
  font-weight: inherit;
}

/* Heart: white, always visible, 16px inset on the photo */
.products-grid__item .wishlist-icon {
  top: 16px;
  right: 16px;
  z-index: 2;
  visibility: visible;
  opacity: 1;
}
.products-grid__item .wishlist-icon button {
  filter: brightness(0) invert(1);
}

/* Badges: frosted glass chip on the photo (Figma "JAUNUMS") */
.products-grid__item .badges {
  top: 16px;
  left: 16px;
}
.products-grid__item .badges .badge,
.products-grid__item .badges .badge--red,
.products-grid__item .badges .badge--green,
.products-grid__item .badges .badge--special {
  height: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 2px;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

/* No hover cart overlay in the redesign */
.products-grid__item .add-to-cart {
  display: none !important;
}

/* "SKATĪT VAIRĀK" — plain underlined text link instead of the pill button */
body.page-template-page-home .featured-products .read-more {
  padding: 40px 0 0;
}
body.page-template-page-home .featured-products .read-more .btn {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-position: from-font;
  color: #1E2934;
  border-radius: 0;
}
body.page-template-page-home .featured-products .read-more .btn:hover {
  background: transparent;
  color: #1E2934;
  opacity: .75;
}

/* ------------------------------------------------------------------ */
/* Homepage hero (Figma 398:18538)                                     */
/* ------------------------------------------------------------------ */

body.page-template-page-home .hero-swiper .swiper-slide {
  height: clamp(520px, 43vw, 826px);
}
/* The old --hero-banner-height var (viewport-fill) must not override the
   design height (826px @1920 = 43vw) */
body.page-template-page-home .hero-swiper .swiper-holder,
body.page-template-page-home .hero-swiper .swiper,
body.page-template-page-home .hero-swiper .swiper .swiper-slide {
  min-height: clamp(520px, 43vw, 826px);
}
body.page-template-page-home .hero-swiper .swiper-slide__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The Figma photos carry their own darkness; real banners may not — a soft
   left-edge scrim keeps the white hero text legible on any photo. */
body.page-template-page-home .hero-swiper .swiper-slide__picture::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(30, 41, 52, 0.30) 0%, rgba(30, 41, 52, 0) 22%),
    linear-gradient(90deg, rgba(30, 41, 52, 0.35) 0%, rgba(30, 41, 52, 0.12) 45%, rgba(30, 41, 52, 0) 70%);
  pointer-events: none;
}
body.page-template-page-home .hero-swiper .swiper-slide__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.page-template-page-home .hero-swiper .swiper-slide__text {
  max-width: 510px;
  color: #fff;
}
/* Design: hero text is always white on the photo — per-banner inline colors
   were authored for the old split layout */
body.page-template-page-home .hero-swiper .swiper-slide__text-heading,
body.page-template-page-home .hero-swiper .swiper-slide__text-subheading,
body.page-template-page-home .hero-swiper .swiper-slide__text-top {
  color: #fff !important;
}

body.page-template-page-home .hero-swiper .swiper-slide__text-top {
  display: block;
  margin: 0 0 20px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

body.page-template-page-home .hero-swiper .swiper-slide__text-heading {
  margin: 0 0 20px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 68px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
}

body.page-template-page-home .hero-swiper .swiper-slide__text-subheading {
  margin: 0 0 32px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 1px;
  color: #fff;
}

/* Hero text starts at the container edge (design x=360 @1920) */
body.page-template-page-home .swiper-slide__text:not(.swiper-slide__text--center) {
  padding-left: 0;
}

/* Primary buttons: sage by default, darkening to the header green on hover
   (client feedback). '#939c81' derives to the design's sage #939C81 and
   '#475836' to Haki #475836, so the Store Design customizer keeps driving
   both. Same selector strength as the front-page customizer so its button
   controls still override when changed. */
body.page-template-page-home .btn.btn-primary {
  height: 52px;
  padding: 16px 32px;
  background: #939c81;
  border: 0;
  border-radius: 4px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}
/* Primary buttons darken on hover instead of inverting to white (the legacy
   style.css rule) or flipping to the sage accent — the hero CTA already did
   this, so the same treatment now applies storewide: PDP add-to-cart, the
   "added to cart" pop-up, cart, checkout and account. */
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-primary:active,
body .btn.btn-primary:not(:disabled):not(.disabled):active {
  background: #475836;
  border-color: #475836;
  color: #fff;
}

/* Anchor pagination + info line to the hero itself */
body.page-template-page-home .hero-swiper .swiper-holder {
  position: relative;
}

/* Slider dots: 8px #FAF6EE at 30%, active 12px solid white */
body.page-template-page-home .hero-swiper .swiper-pagination {
  bottom: 44px;
}
body.page-template-page-home .hero-swiper .swiper-pagination {
  gap: 0 12px;
}
body.page-template-page-home .hero-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  gap: 0;
  margin: 0 !important;
  background: #FAF6EE;
  opacity: .3;
  border-radius: 50%;
  /* hide the old "01/02/03" numbers */
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}
/* hide the old progress bar */
body.page-template-page-home .hero-swiper .swiper-pagination-bullet::after {
  content: none;
  display: none;
}
body.page-template-page-home .hero-swiper .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  body.page-template-page-home .hero-swiper .swiper-slide__text-heading {
    font-size: 34px;
    line-height: 42px;
    letter-spacing: 3px;
  }
  body.page-template-page-home .hero-swiper .swiper-slide__text-subheading {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage reviews / customers gallery (Figma 501:4219)               */
/* ------------------------------------------------------------------ */

.customers-gallery .section-heading {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #2A2B26;
}

.customers-gallery__phrases {
  gap: 12px;
  justify-content: center;
}
.customers-gallery__phrases li {
  display: flex;
  align-items: center;
  gap: 0 8px;
  padding: 6px 8px 6px 12px;
  background: #EFF4E6;
  border: 0;
  border-radius: 8px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #2A2B26;
  text-transform: none;
}
.customers-gallery__phrases li,
.customers-gallery__phrases li a {
  text-decoration: none;
}
.customers-gallery__phrases li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url('../images/redesign/reviews-checkmark.svg') center / contain no-repeat;
}

.customers-gallery .gallery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px; /* 4 × 282px + 3 × 24px, as in the design */
}
.customers-gallery .gallery-grid > .gallery-grid__item:nth-child(n+5) {
  display: none;
}
.customers-gallery .gallery-grid__item img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .customers-gallery .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .customers-gallery__phrases li {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ------------------------------------------------------------------ */
/* Promises — MŪSU SOLĪJUMS JUMS (Figma 501:4476)                      */
/* ------------------------------------------------------------------ */

.promises {
  background: #fff;
  padding-bottom: 80px;
}
.promises .block-heading {
  margin-bottom: 32px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  text-align: center;
  color: #2A2B26;
}
.promises .sub-heading {
  display: none;
}
.promises__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px 0;
  height: 100%;
  padding: 94px 24px;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  text-align: center;
}
.promises__item-icon {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.promises__item-icon img {
  max-width: 104px;
  max-height: 104px;
  width: auto;
  height: auto;
}
.promises__item-heading {
  margin: 0 0 16px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A2B26;
}
.promises__item p {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #2A2B26;
}
@media screen and (max-width: 768px) {
  .promises__item {
    padding: 48px 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Instagram heading (Figma 501:5027)                                  */
/* ------------------------------------------------------------------ */

.ig-output .section-heading {
  /* Serif like every other section heading (client feedback) — this one was
     left on the sans body token. */
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1E2934;
}

/* ------------------------------------------------------------------ */
/* Footer (Figma 501:5027) — site-wide                                 */
/* ------------------------------------------------------------------ */

#main-footer {
  background: #FAF6EE;
}
#main-footer .widget-title {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2A2B26;
}
#main-footer .menu-col .menu a,
#main-footer .menu-col .menu li,
#main-footer .footer-content__text {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #2A2B26;
}
#main-footer .menu-col .menu a:hover {
  color: #475836; /* derives to Haki */
}
#main-footer .investment-details {
  background: #FAF6EE;
}
#main-footer .footer-bottom {
  background: #2A2B26;
}
#main-footer .footer-bottom,
#main-footer .footer-bottom a {
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Product page: mobile gallery is 3:4 like the catalog (Figma 392:7654,
   accepted ClickUp item) — desktop main image is already 3:4-ish      */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 575px) {
  .single-product-page__main .product-images .swiper-container-main .swiper-slide a {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .single-product-page__main .product-images .swiper-container-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px !important;
  }
  .single-product-page__main .product-images .swiper-container-main {
    border-radius: 4px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Header (Figma 501:3676) — site-wide, desktop                        */
/* ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid #D1D1D1;
}
.site-header .top-bar {
  height: 32px;
  padding: 6px 0;
}
.site-header .top-bar__links li a {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #FDFBF7;
}
.site-header .top-bar .header-lang-bar {
  padding: 0;
  margin-left: 24px;
  background: transparent;
  border-radius: 0;
}
.site-header .main-bar .container {
  height: 72px;
}
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li > a {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    /* two steps lighter than the 600 it shipped with (client feedback) */
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2A2B26;
  }
}
.site-header .buttons__cart-price {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  /* matches the nav links (client feedback) */
  font-weight: 400;
  color: #2A2B26;
}

/* ------------------------------------------------------------------ */
/* Product page (Figma 392:7654 "Krokus_PDP_2")                        */
/* ------------------------------------------------------------------ */

.single-product-page h1.entry-title,
.single-product-page .summary h1.entry-title,
.single-product-page .summary .entry-title-holder h1.entry-title {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #2A2B26;
}

.single-product-page .woocommerce-breadcrumb,
.single-product-page .woocommerce-breadcrumb a {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #6D6D6D;
}
.single-product-page .woocommerce-breadcrumb {
  color: #2A2B26; /* current item */
}

.single-product-page .summary > .price,
.single-product-page .summary .price:not(.variations__item-price) {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #2A2B26;
}

/* Gallery: 3:4 main image + thumbs, 4px radius, inactive thumbs 50% */
.single-product-page__main .product-images .swiper-container-main .swiper-slide a {
  aspect-ratio: 3 / 4;
  height: auto;
}
.single-product-page__main .product-images .swiper-container-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.single-product-page__main .product-images .swiper-thumbs img,
.single-product-page__main .product-images [class*="thumb"] img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
}

/* Variant selector: borderless text options, unselected at 50% */
.single-product-page .summary .variations__name {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2A2B26;
}
.single-product-page .summary .variations--grid-5 input[type="radio"] + label {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  align-items: flex-start;
  text-align: left;
  opacity: .5;
  transition: opacity .2s ease-in-out;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #2A2B26;
}
.single-product-page .summary .variations--grid-5 input[type="radio"] + label:hover {
  background: transparent;
  opacity: .8;
}
.single-product-page .summary .variations--grid-5 input[type="radio"]:checked + label {
  background: transparent;
  border: 0;
  opacity: 1;
}
.single-product-page .summary .variations--grid-5 input[type="radio"] + label .variations__item-price {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #6D6D6D;
}

.single-product-page .summary .wdm-pts-quantity-label {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2A2B26;
}

/* Quantity + add-to-cart row: white bordered qty cell + sage button
   (#939c81 derives to the design's #939C81 via the Store Design pipeline) */
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile) {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.single-product-page .summary .woocommerce-variation-add-to-cart .wdm-pts-qty-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 52px;
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
}
.single-product-page .summary .woocommerce-variation-add-to-cart .wdm-pts-qty-amount,
.single-product-page .summary .woocommerce-variation-add-to-cart .wdm-pts-qty-input {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1E2934;
  background: transparent;
  border: 0;
}
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile) > button,
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile) > button.single_add_to_cart_button {
  flex: 1 1 auto;
  height: 52px;
  margin: 0;
  padding: 16px 32px;
  background: #939c81;
  border: 0;
  border-radius: 4px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  transition: filter .2s ease-in-out;
}
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile) > button:hover {
  background: #475836;
  color: #fff;
}

/* Add-ons: heading + tabs (active = bottom border, inactive 50%) */
.nav-tabs-holder__heading {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A2B26;
}
.nav-tabs-holder .nav-tabs {
  border-bottom: 0;
  gap: 0 24px;
}
.nav-tabs-holder .nav-tabs .nav-link {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  opacity: .5;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2A2B26;
}
.nav-tabs-holder .nav-tabs .nav-link.active {
  opacity: 1;
  border-bottom-color: #2A2B26;
  color: #2A2B26;
}

/* Add-on product cards: serif underlined titles like the design list */
.single-product-page .product-item__details-title,
.single-product-page .product-item__details-title a {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #2A2B26;
}
.single-product-page .product-item__details-price {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #2A2B26;
}

/* PDP image badge: frosted chip like the card badges */
.single-product-page .product-images .badges .badge,
.single-product-page .badges .badge {
  height: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 2px;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

/* Catalog/archive grid: same design cards, 3 per row (ClickUp directive) */
.archive .products-grid {
  gap: 24px 12px;
}
.archive .products-grid__item-image {
  height: auto;
  aspect-ratio: 3 / 4;
  margin-bottom: 10px;
}
.archive .products-grid__item-price {
  margin: 0;
}
@media screen and (max-width: 575px) {
  .archive .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Brand-derived hover / active states (fix raw-red leftovers)         */
/* ------------------------------------------------------------------ */

/* Add to cart: sage by default (Figma Krokus_PDP_2), header green on hover —
   kills both the old white invert and the raw-red active state. */
.single-product-page .summary form.cart.krokus-qty-std .single_add_to_cart_button:hover,
.single-product-page .summary form.cart.krokus-qty-std .single_add_to_cart_button:focus,
.single-product-page .summary form.cart.krokus-qty-std .single_add_to_cart_button:active,
.single-product-page .summary form.cart.krokus-qty-std .single_add_to_cart_button:not(:disabled):not(.disabled):active {
  background: #475836;
  border-color: #475836;
  color: #fff;
}

/* Wishlist "added" heart: mask + background-color so it follows the
   customizer primary (the old added-to-wishlist.svg has a baked-in red) */
.single-product-page .summary .entry-title-holder .wc-wishlist-btn .tinvwl_add_to_wishlist_button.krokus-wishlist-added,
.single-product-page .summary .entry-title-holder .wc-wishlist-btn .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.products-grid__item .wishlist-icon .tinvwl_add_to_wishlist_button.krokus-wishlist-added,
.products-grid__item .wishlist-icon .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
  background: #475836;
  -webkit-mask: url('../images/icons/added-to-wishlist.svg') center / contain no-repeat;
  mask: url('../images/icons/added-to-wishlist.svg') center / contain no-repeat;
}

/* Reviews gallery: no borders, 4px radius (design), 80px gap to promises */
.customers-gallery {
  padding-bottom: 80px;
}
.customers-gallery .gallery-grid__item {
  padding: 0;
  border: 0 !important;
  border-radius: 4px;
  overflow: hidden;
}

/* Cormorant Garamond runs lighter than EB Garamond — step headings up */
body.page-template-page-home .featured-products .block-heading,
body.page-template-page-home .customers-gallery .section-heading,
body.page-template-page-home .promises .block-heading,
.customers-gallery .section-heading,
.promises .block-heading,
.single-product-page h1.entry-title,
.products-grid__item-title a,
.products-grid__item-price {
  font-weight: 600;
}

/* Halloween menu icon: content image has a baked-in red fill — approximate
   the Haki accent with a filter (scoped to inline nav-link images only) */
.site-header #site-navigation #primary-menu-list > li:not(.mobile-icon-item) > a > img {
  filter: hue-rotate(88deg) saturate(.45) brightness(.85);
}

/* ------------------------------------------------------------------ */
/* Specificity assertions vs older custom-overrides rules              */
/* ------------------------------------------------------------------ */

/* Cards are 3:4 everywhere (old rules forced 1:1 squares) */
.featured-products .products-grid__item-image,
.products-grid .products-grid__item-image {
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0 0 10px;
}
.featured-products .products-grid {
  gap: 24px 12px;
}
@media screen and (max-width: 768px) {
  .featured-products .products-grid {
    gap: 24px 12px;
  }
}

/* Reviews gallery is 4 photos in the redesign (old .grid-5 forced five) */
.customers-gallery .gallery-grid.grid-5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Promises: no box at all, at rest or on hover (client feedback) */
.promises__item,
body.page-template-page-home .promises__item,
.promises__item:hover,
body.page-template-page-home .promises__item:hover,
.promises__item:focus-within,
body.page-template-page-home .promises__item:focus-within {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Reviews rating row: "4.8 [stars] 332 Atsauksmes" (Figma 501:4219).
   Star color #475836 derives to Haki #475836 via the pipeline. */
.customers-gallery .section-heading-holder .rating,
.block-heading-holder .rating,
.section-heading-holder .rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
  width: auto;
  height: auto;
  margin: 0 auto 8px;
  background: none;
}
.rating .rating__score {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #2A2B26;
}
.rating .rating__stars {
  display: inline-flex;
  gap: 0 2px;
}
.rating .rating__star {
  width: 14px;
  height: 14px;
  background: #475836;
  -webkit-mask: url('../images/redesign/reviews-star-filled.svg') center / contain no-repeat;
  mask: url('../images/redesign/reviews-star-filled.svg') center / contain no-repeat;
}
.rating .rating__star--half {
  -webkit-mask-image: url('../images/redesign/reviews-star-half.svg');
  mask-image: url('../images/redesign/reviews-star-half.svg');
}
.rating .rating__count {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: underline;
  text-underline-position: from-font;
  color: #2A2B26;
}

/* Footer per Figma Footer_2: left column = logo + newsletter + socials.
   The old description paragraph and contact rows are not in the design. */
#main-footer .footer-content__text > p,
#main-footer .footer-content__text-contacts {
  display: none;
}
#main-footer .footer-content__text .newsletter {
  margin: 24px 0 16px;
  padding: 0;
  text-align: left;
}
#main-footer .footer-content__text .newsletter form,
#main-footer .footer-content__text .newsletter [data-testid],
#main-footer .footer-content__text .newsletter div {
  max-width: 448px;
  margin-left: 0 !important;
}
#main-footer .social-media--footer-left {
  gap: 0 32px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Footer is full-width with 48px side padding (Figma 501:11029) */
#main-footer .container {
  max-width: none;
  padding-left: 48px;
  padding-right: 48px;
}
@media screen and (min-width: 992px) {
  /* QA (ClickUp 86bbu9quq): the design's fixed 448px text column plus 160/124px
     gaps overflowed the viewport on laptops (content ran to 1492px), cutting off
     the last column. The gaps and the text column now scale down below ~1600px
     and hit the design values again on a full-width desktop. */
  #main-footer .footer-content {
    display: flex;
    justify-content: flex-start;
    gap: 0 clamp(40px, 8.4vw, 160px);
  }
  #main-footer .footer-content__text {
    width: clamp(320px, 30vw, 448px);
    max-width: 448px;
    flex-shrink: 0;
  }
  #main-footer .footer-menu-holder {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 0 clamp(24px, 6.5vw, 124px);
  }
  #main-footer .footer-menu-holder .menu-col {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media screen and (max-width: 991px) {
  #main-footer .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Content offset matches the redesigned header: 32px top bar + 72px main
   bar. The all-green header dropped the 1px bottom rule that used to make
   it 105px, so the extra pixel now shows as a white hairline. */
@media screen and (min-width: 1121px) {
  body {
    padding-top: 104px !important;
  }
}

/* Design icon set (Figma header 501:3676) — swaps every usage of the old
   theme icons via attribute selectors */
img[src*="header-user-icon"]  { content: url('../images/redesign/icon-user.svg'); width: 24px; height: 24px; }
img[src*="header-search-icon"] { content: url('../images/redesign/icon-search.svg'); width: 24px; height: 24px; }
img[src*="header-heart-icon"] { content: url('../images/redesign/icon-heart-dark.svg'); width: 24px; height: 24px; }
img[src*="header-cart-icon"]  { content: url('../images/redesign/icon-basket.svg'); width: 24px; height: 24px; }

/* Wishlist hearts: the design outline heart everywhere */
.products-grid__item .wishlist-icon .tinvwl_add_to_wishlist_button,
.products-grid__item .wishlist-icon button {
  background-image: url('../images/redesign/icon-heart.svg');
  background-size: 24px 24px;
}
.single-product-page .summary .entry-title-holder .wc-wishlist-btn .tinvwl_add_to_wishlist_button {
  background: url('../images/redesign/icon-heart-dark.svg') center / 24px 24px no-repeat;
}

/* PDP variant selector: numbers only, 24px gaps (design shows no prices) */
.single-product-page .summary .variations--grid-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.single-product-page .summary .variations--grid-5 .variations__name {
  width: 100%;
  margin: 0;
}
.single-product-page .summary .variations--grid-5 input[type="radio"] + label .variations__item-price {
  display: none;
}

/* Trustindex "RAKSTI ATSAUKSMI" button → design sage pill (#939c81 derives
   to #939C81) */
.container .ti-widget[data-layout-id='79'][data-set-id='ligth-border'] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn,
.container .ti-widget[data-layout-id='14'][data-set-id='ligth-border'] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn,
.ti-widget .ti-header-write-btn-container a.ti-header-write-btn {
  background-color: #939c81 !important;
  border: 0 !important;
  border-color: #939c81 !important;
  border-radius: 4px !important;
  padding: 9px 12px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff !important;
}

/* Add-ons inside the info column: compact 3-row list (Figma 392:7654) */
.single-product-page .summary .single-product-page__tabs {
  margin-top: 32px;
}
.single-product-page .summary .single-product-page__tabs .products-swiper .swiper-holder,
.single-product-page .summary .single-product-page__tabs .products-swiper .swiper {
  overflow: visible;
}
.single-product-page .summary .single-product-page__tabs .swiper-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: none !important;
  height: auto !important;
}
.single-product-page .summary .single-product-page__tabs .swiper-slide {
  width: 100% !important;
  margin: 0 !important;
  height: auto;
}
/* Top 3 add-ons per category, like the design */
.single-product-page .summary .single-product-page__tabs .swiper-slide:nth-child(n+4) {
  display: none;
}
.single-product-page .summary .single-product-page__tabs .swiper-pagination,
.single-product-page .summary .single-product-page__tabs .swiper-nav {
  display: none !important;
}
.single-product-page .summary .single-product-page__tabs .product-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0 12px;
  width: 100%;
  padding: 0 0 12px;
  border-bottom: 1px solid #D1D1D1;
  text-align: left;
}
.single-product-page .summary .single-product-page__tabs .swiper-slide:last-of-type .product-item,
.single-product-page .summary .single-product-page__tabs .swiper-slide:nth-child(3) .product-item {
  border-bottom: 0;
  padding-bottom: 0;
}
.single-product-page .summary .single-product-page__tabs .product-item__image {
  flex-shrink: 0;
  display: block;
  width: 60px !important;
  min-width: 60px;
  height: 60px !important;
  border-radius: 4px;
  overflow: hidden;
}
.single-product-page .summary .single-product-page__tabs .product-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.single-product-page .summary .single-product-page__tabs .product-item__details {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.single-product-page .summary .single-product-page__tabs .product-item__details-title {
  margin: 0 0 4px;
}
.single-product-page .summary .single-product-page__tabs .product-item__details-title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.single-product-page .summary .single-product-page__tabs .product-item .badges {
  display: none;
}

/* Kill the old red pill hover on the cart row (rogue #a40709, not derived) */
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile):hover {
  background: transparent;
  border-color: transparent;
}
.single-product-page .summary .woocommerce-variation-add-to-cart:has(.wdm-pts-qty-tile):hover > button {
  background: #475836;
  border: 0;
  color: #fff;
}

/* Quantity stepper: [−][value][+] 52px cells, #D1D1D1 borders (Figma 392:7654) */
.krokus-qty-group {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.krokus-qty-step {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #D1D1D1;
  background: #fff;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #1E2934;
  cursor: pointer;
  user-select: none;
}
.krokus-qty-step--minus {
  border-radius: 4px 0 0 4px;
  border-right: 0;
}
.krokus-qty-step--plus {
  border-radius: 0 4px 4px 0;
  border-left: 0;
}
.krokus-qty-group .wdm-pts-qty-tile {
  border-radius: 0;
  min-width: 64px;
}

/* ------------------------------------------------------------------ */
/* Store-wide design language: cart / checkout / account / info pages  */
/* ------------------------------------------------------------------ */

/* Primary buttons everywhere: 4px radius, serif label (colors already
   derive through the pipeline) */
.btn.btn-primary,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.checkout-button,
#place_order,
.woocommerce-Button,
button[name="update_cart"],
button[name="apply_coupon"] {
  border-radius: 4px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.btn.btn-primary {
  border-radius: 4px;
}
.btn.btn-secondary,
.btn.btn-outline-primary {
  border-radius: 4px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Form fields: 4px radius, design border */
.woocommerce-cart main input[type="text"],
.woocommerce-cart main input[type="email"],
.woocommerce-checkout main input[type="text"],
.woocommerce-checkout main input[type="email"],
.woocommerce-checkout main input[type="tel"],
.woocommerce-checkout main input[type="password"],
.woocommerce-checkout main textarea,
.woocommerce-checkout main select,
.woocommerce-account main input[type="text"],
.woocommerce-account main input[type="email"],
.woocommerce-account main input[type="password"],
.woocommerce-account main input[type="tel"],
.cart-content-wrapper input[type="text"] {
  border-radius: 4px;
  border-color: #D1D1D1;
}

/* Cart quantity control: rectangular design cells */
.cart-content-wrapper .quantity {
  border-radius: 4px;
  border-color: #D1D1D1;
}

/* Sans-based page headings on account/cart follow the serif system too */
.woocommerce-account main h1,
.woocommerce-account main h2,
.woocommerce-account main h3,
.cart-content-wrapper h1,
.cart-content-wrapper h2,
.cart-content-wrapper h3 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-weight: 600;
}
.cart-content-wrapper button,
.cart-content-wrapper .btn,
.cart-content-wrapper a.btn {
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Footer fidelity pass vs Figma 494:6640                              */
/* ------------------------------------------------------------------ */

/* Design has no hairline dividers around the main footer block */
#main-footer .footer-content {
  border-top: 0;
  border-bottom: 0;
}

/* Link columns: 24px lines on a 32px rhythm */
#main-footer .menu-col .menu li {
  margin-bottom: 8px;
}
#main-footer .menu-col .widget-title {
  margin-bottom: 28px;
}

/* Company column is sans in the design */
#main-footer .menu--contacts li {
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 24px;
}

/* Newsletter (Klaviyo) flattened to the design: no card, left-aligned serif,
   white borderless input + attached button */
#main-footer .klaviyo-form-SDzWmA form {
  background: transparent !important;
  padding: 0 !important;
}
#main-footer .klaviyo-form-SDzWmA form div,
#main-footer .klaviyo-form-SDzWmA form p,
#main-footer .klaviyo-form-SDzWmA form span,
#main-footer .klaviyo-form-SDzWmA form h1,
#main-footer .klaviyo-form-SDzWmA form h2,
#main-footer .klaviyo-form-SDzWmA form h3 {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  text-align: left !important;
  color: #2A2B26 !important;
}
#main-footer .klaviyo-form-SDzWmA form h1 span,
#main-footer .klaviyo-form-SDzWmA form h2 span,
#main-footer .klaviyo-form-SDzWmA form h3 span {
  font-size: 20px !important;
  line-height: 32px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
}
#main-footer .klaviyo-form-SDzWmA input {
  height: 50px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px 0 0 4px !important;
  padding-left: 17px !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  color: #2A2B26 !important;
}
#main-footer .klaviyo-form-SDzWmA button {
  height: 50px !important;
  padding: 0 20px !important;
  background: #939c81 !important; /* derives to sage #939C81 */
  border: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: #fff !important;
}

/* EU logos sit directly on the beige (no white card) */
#main-footer .investment-details__logos img,
#main-footer .investment-details img {
  mix-blend-mode: multiply;
}
#main-footer .investment-details {
  justify-content: flex-start;
  gap: 0 48px;
}
#main-footer .investment-details__text {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 27px;
  color: #2A2B26;
}

/* Footer fidelity, second pass */
#main-footer .menu-col .menu.menu--contacts li {
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 24px;
}
#main-footer .klaviyo-form-SDzWmA [data-testid="form-row"] {
  width: 100% !important;
}
#main-footer .klaviyo-form-SDzWmA [data-testid="form-row"] > div:first-child {
  flex: 1 1 auto !important;
}
#main-footer .klaviyo-form-SDzWmA input {
  width: 100% !important;
}
/* Newsletter heading: uppercase serif 20/32 with 2px tracking */
#main-footer .klaviyo-form-SDzWmA form [data-testid="form-row"]:first-child span {
  font-size: 20px !important;
  line-height: 32px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
/* EU logos blend onto the beige (white background baked into the PNG) */
#main-footer .investment-details__logos,
#main-footer .investment-details__logos img {
  mix-blend-mode: multiply;
  background: transparent;
}

/* Klaviyo: uppercase serif heading + full-width input cell */
#main-footer .klaviyo-form-SDzWmA [data-testid="form-row"]:first-child p,
#main-footer .klaviyo-form-SDzWmA [data-testid="form-row"]:first-child p span {
  font-size: 20px !important;
  line-height: 32px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
#main-footer .klaviyo-form-SDzWmA [data-testid="form-row"] [data-testid="form-component"]:first-child {
  flex: 1 1 auto !important;
  max-width: none !important;
}
#main-footer .klaviyo-form-SDzWmA [data-testid="form-component"]:first-child > div {
  width: 100% !important;
}

/* Footer strict-audit round 2 (live vs Figma side-by-side) */

/* Links: true EB Garamond (design font — safe in sentence case; only its
   UPPERCASE Latvian macrons are broken, headings stay Cormorant) */
#main-footer .menu-col .menu a,
#main-footer .menu-col .menu li,
#main-footer .investment-details__text,
#main-footer .klaviyo-form-SDzWmA form [data-testid="form-row"]:not(:first-child) p,
#main-footer .klaviyo-form-SDzWmA form [data-testid="form-row"]:not(:first-child) span,
#main-footer .klaviyo-form-SDzWmA input {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
}
#main-footer .menu-col .menu.menu--contacts li {
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif!important;
}

/* Exact 32px link rhythm (li carried a stray line-height → 42px pitch) */
#main-footer .menu-col .menu li {
  margin: 0 0 8px;
  line-height: 24px;
}
#main-footer .menu-col .menu li a {
  display: inline-block;
  line-height: 24px;
  padding: 0;
}

/* Newsletter keeps its space while the Klaviyo JS loads (admins/slow nets),
   so the socials never jump up under the logo */
#main-footer .footer-content__text .newsletter {
  min-height: 136px;
}
/* Socials: 20px glyphs on the 56px rhythm, well below the input (design) */
#main-footer .social-media--footer-left {
  margin-top: 48px;
  gap: 0 36px;
}
#main-footer .social-media--footer-left img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Bottom bar: exactly 80px, content vertically centered; WDM logo white */
#main-footer .footer-bottom {
  height: 80px;
  display: flex;
  align-items: center;
  background: #2A2B26;
}
#main-footer .footer-bottom .container {
  width: 100%;
  /* style.css pins this row to 84px above 1200px, which is taller than the
     80px bar: the overflow poked ~3px of page background out below the dark
     band and stretched the document by the same amount (the "white line"). */
  height: auto;
}
#main-footer .footer-bottom .footer-bottom__text img {
  filter: brightness(0) invert(1);
}
#main-footer .footer-bottom .footer-bottom__logos img {
  filter: none;
}
#main-footer .menu-col .menu {
  gap: 0;
}

/* Footer strict-audit round 3: design logo, design social glyphs, EU row width */
#main-footer .footer-content__text > img {
  width: 141px;
  height: 32px;
  object-fit: contain;
}
#main-footer .social-media--footer-left li:nth-child(1) img { content: url('../images/redesign/social-fb.svg'); width: 12px !important; min-width: 12px !important; }
#main-footer .social-media--footer-left li:nth-child(2) img { content: url('../images/redesign/social-ig.svg'); }
#main-footer .social-media--footer-left li:nth-child(3) img { content: url('../images/redesign/social-tiktok.svg'); width: 18px !important; min-width: 18px !important; }
#main-footer .social-media--footer-left li:nth-child(4) img { content: url('../images/redesign/social-whatsapp.svg'); }
#main-footer .social-media--footer-left li:nth-child(5) img { content: url('../images/redesign/social-vk.svg'); }

/* EU row: text fills to the right margin like the design (1552px @1920) */
#main-footer .investment-details__text {
  flex: 1 1 auto;
  max-width: none;
}
#main-footer .investment-details__text > div,
#main-footer .investment-details__text p {
  max-width: none;
}

/* Instagram strip flows straight into the footer (no gap/border in design) */
#main-footer {
  margin-top: 0;
  border-top: 0;
}
.ig-output.pb-70 {
  padding-bottom: 0;
}
.ig-output .instagram-gallery-feed,
.ig-output .instagram-gallery-feed .swiper,
.ig-output .instagram-gallery-feed li {
  line-height: 0;
  font-size: 0;
}
.ig-output .instagram-gallery-feed a,
.ig-output .instagram-gallery-feed img,
.ig-output .instagram-gallery-feed .swiper-slide > * {
  display: block;
}
.ig-output .instagram-gallery-feed .swiper-slide {
  line-height: 0;
}
/* Empty insta-gallery actions row added 15px under the strip */
.ig-output .instagram-gallery__actions {
  display: none !important;
  margin: 0 !important;
}

/* Promises spacing to Figma 501:10400: 32px heading→cards (swiper wrapper
   carries a hidden 25px), 80px cards→next section (kill IG's stacked pt-70) */
.promises .block-heading,
body.page-template-page-home .promises .block-heading {
  margin-bottom: 8px;
}
.ig-output.pt-70 {
  padding-top: 0;
}

/* Newsletter submit shows the design arrow (Klaviyo label is dashboard-set) */
#main-footer .klaviyo-form-SDzWmA button {
  min-width: 46px !important;
  width: 46px !important;
  padding: 0 !important;
  font-size: 0 !important;
  position: relative;
}
#main-footer .klaviyo-form-SDzWmA button::after {
  content: '→';
  font-size: 18px;
  line-height: 50px;
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* PDP block placement audit vs Figma 392:7654                          */
/* ------------------------------------------------------------------ */

/* Columns: gallery 588 | gap 80 | info 532 (was 50/50 with 30 gap) */
@media screen and (min-width: 992px) {
  .single-product-page__main {
    gap: 0 80px;
  }
  .single-product-page .product-images {
    flex: 0 0 588px;
    width: 588px;
    max-width: 588px;
  }
  .single-product-page__main .summary {
    flex: 1 1 auto;
    width: auto;
    max-width: 532px;
  }
  /* Gallery internals: 68px thumb rail + 8px gap + 512px main (3:4) */
  .single-product-page .product-images .swiper-container-main {
    width: calc(100% - 76px);
  }
  .single-product-page .product-images [class*="thumb"] .swiper-slide,
  .single-product-page .product-images .swiper-thumbs {
    width: 68px;
  }
}

/* Photo caption: EB Garamond 12/16, 1px tracking, uppercase, right-aligned */
.single-product-page .product-images__caption {
  margin: 16px 0 0;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #2A2B26;
}

/* Info column rhythm: divider pb 12 → price 12 below, 32 to variants,
   32 between option row and quantity label */
.single-product-page .summary .entry-title-holder {
  padding-bottom: 12px;
}
.single-product-page .summary > .price {
  margin: 12px 0 32px;
}
.single-product-page .summary .wdm-pts-quantity-label {
  margin-top: 32px;
}

/* Reviews widget placement (both pages): photos → 16px → Google bar,
   widget → 80px → next section */
.customers-gallery {
  padding-bottom: 16px;
}
.product-rating-widget.pt-70,
section.product-rating-widget {
  padding-top: 0;
  padding-bottom: 80px;
}
@media screen and (min-width: 992px) {
  .single-product-page .product-images .swiper-container-main {
    width: 512px !important;
    flex: 0 0 512px;
    margin-left: 8px;
  }
  .single-product-page .product-images .swiper-container-thumbs {
    width: 68px !important;
    flex: 0 0 68px;
  }
}
@media screen and (min-width: 992px) {
  /* Main gallery image is a 3:4 portrait on desktop too (512x683) */
  .single-product-page .product-images .swiper-container-main .swiper-slide a {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .single-product-page .product-images .swiper-container-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide {
    width: 68px !important;
    height: 91px;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
}
@media screen and (min-width: 992px) {
  /* Kill the fixed 513px gallery height — design is 512x683 (3:4) */
  .single-product-page .product-images,
  .single-product-page .product-images .swiper-container-main,
  .single-product-page .product-images .swiper-container-thumbs {
    height: 683px !important;
    max-height: 683px;
  }
}
/* Caption sits under the gallery (the gallery is a flex row) */
.single-product-page .product-images {
  position: relative;
}
.single-product-page .product-images__caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin: 16px 0 0;
  width: auto;
  white-space: nowrap;
}

/* Trustindex "RAKSTĪT ATSAUKSMI": white label on the sage pill (the widget
   renders several class variants — cover them all, incl. inner spans) */
.ti-widget a[class*="write"],
.ti-widget [class*="write-btn"] a,
.ti-widget a.ti-header-write-btn,
.ti-widget .ti-header-write-btn-container a,
.product-rating-widget a[class*="write"] {
  background-color: #939c81 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.ti-widget a[class*="write"] *,
.ti-widget [class*="write-btn"] a *,
.ti-widget .ti-header-write-btn-container a *,
.product-rating-widget a[class*="write"] * {
  color: #fff !important;
  fill: #fff !important;
  font-family: inherit !important;
  text-shadow: none !important;
}

/* PDP "Līdzīgi produkti": 4 design cards, 12px gaps (Figma 392:7654) */
.related-products {
  padding: 80px 0 0;
}
.related-products .block-heading {
  margin: 0 0 24px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  color: #2A2B26;
}
.related-products .products-grid--related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 12px;
}
@media screen and (max-width: 991px) {
  .related-products .products-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gallery thumbnails: 68x91 (3:4), top-aligned, 8px gaps — not stretched
   to fill the 683px rail (Figma 392:7654) */
@media screen and (min-width: 992px) {
  .single-product-page .product-images .swiper-container-thumbs .swiper-wrapper {
    height: auto !important;
  }
  /* Spacing comes from Swiper's spaceBetween (see functions.js) — a CSS gap
     here is invisible to Swiper and made it scroll past the last thumbnail
     (ClickUp 86bbuafmq). */
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide {
    height: 91px !important;
    max-height: 91px;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide img {
    height: 91px;
    object-fit: cover;
  }
}

/* Related products abuts the product block: in the design the section starts
   at y=923, exactly where the product block ends (0 gap), heading→cards 24px */
.single-product-page .single-product-page__main {
  margin-bottom: 0;
}
.related-products {
  padding-top: 0;
}
.related-products .block-heading {
  margin-bottom: 24px;
}

/* Add-on quick add "+" button (Figma 392:7654): 40x40, r4,
   bordered by default, solid sage once in the cart */
.single-product-page .summary .single-product-page__tabs .product-item__quick-add {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  background: transparent;
  font-size: 0;
  text-indent: 0;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}
/* Design icon: 16px box holding a 7px cross, 1.25 stroke (Figma 501:8141) */
.single-product-page .summary .single-product-page__tabs .product-item__quick-add::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background-color: #1E2934;
  -webkit-mask: url('../images/redesign/plus-small.svg') center / 16px 16px no-repeat;
  mask: url('../images/redesign/plus-small.svg') center / 16px 16px no-repeat;
  transition: background-color .2s ease-in-out;
}
/* Added state: solid sage with a white glyph (#939c81 derives to #939C81) */
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.is-added,
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.added {
  background: #939c81;
  border-color: #939c81;
}
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.is-added::before,
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.added::before {
  background-color: #fff;
}
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.loading {
  opacity: .6;
}
/* Woo appends a "View cart" link after ajax adds — not in the design */
.single-product-page .summary .single-product-page__tabs .product-item a.added_to_cart {
  display: none !important;
}

/* Beat the legacy high-specificity Trustindex rules (they carry !important
   with data-layout-id/data-set-id/data-pid chains) */
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn,
html body .container .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn {
  background-color: #939c81 !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 9px 12px !important;
  color: #fff !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}

/* Add-ons block corrections (Figma 392:7654) */

/* No full-width rule under the tab row — only the active tab is underlined */
.single-product-page .summary .nav-tabs-holder,
.nav-tabs-holder {
  border-bottom: 0;
}

/* Heading is 18px/500 with 2px tracking (theme rendered it 28px/700) */
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder h2.nav-tabs-holder__heading {
  margin: 0 0 16px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2A2B26;
}

/* Hover (Figma row 501:8134): the whole row hovers together — solid sage
   button with a white glyph + underlined product name */
.single-product-page .summary .single-product-page__tabs .product-item:hover .product-item__quick-add {
  background: #939c81;
  border-color: #939c81;
}
.single-product-page .summary .single-product-page__tabs .product-item:hover .product-item__quick-add::before {
  background-color: #fff;
}
.single-product-page .summary .single-product-page__tabs .product-item__quick-add:hover {
  background: #939c81;
  border-color: #939c81;
}
.single-product-page .summary .single-product-page__tabs .product-item__quick-add:hover::before {
  background-color: #fff;
}
/* ...and the row's product name underlines with it */
.single-product-page .summary .single-product-page__tabs .product-item:hover .product-item__details-title a {
  text-decoration: underline;
  text-underline-position: from-font;
}
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.is-added:hover,
.single-product-page .summary .single-product-page__tabs .product-item__quick-add.added:hover {
  background: #939c81;
  border-color: #939c81;
  filter: brightness(.92);
}

/* ------------------------------------------------------------------ */
/* Header full-width layout + content (Figma 293:6114 / 501:3676)      */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  /* Full-bleed bars with the design's 48px side padding */
  .site-header .top-bar .container,
  .site-header .main-bar .container {
    max-width: none;
    width: 100%;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Logo at the design's 140x32 */
  .site-header .site-logo img {
    width: 141px;
    height: 32px;
    object-fit: contain;
  }

  /* Top bar: phone + hours, 12px gap, 20px icon */
  .site-header .top-bar__info {
    gap: 0 12px;
  }
  .site-header .top-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0 4px;
  }
  .site-header .top-bar__phone img {
    width: 20px;
    height: 20px;
  }
  .site-header .top-bar__phone span,
  .site-header .top-bar__hours {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #FDFBF7;
    white-space: nowrap;
  }
  .site-header .top-bar__divider {
    width: 1px;
    height: 20px;
    background: rgba(253, 251, 247, .5);
  }
  /* The old link menu lives in the mobile drawer only */
  .site-header .top-bar__links--hidden {
    display: none !important;
  }

  /* Icon row: 24px glyphs, 20px apart, 12px before the cart total */
  .site-header .buttons {
    gap: 0 20px;
    align-items: center;
  }
  .site-header .buttons__cart {
    gap: 0 12px;
  }
}

/* Language switcher: the design shows one flag + code + chevron on desktop
   too, so use the existing dropdown instead of the three-flag row */
@media screen and (min-width: 1121px) {
  .site-header .top-bar .header-lang-bar__desktop {
    display: none;
  }
  .site-header .top-bar .header-lang-bar__mobile {
    display: block;
  }
  .site-header .top-bar .header-lang-bar {
    margin-left: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .site-header .top-bar .header-lang-bar__toggle {
    gap: 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FDFBF7;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
  }
  .site-header .top-bar .header-lang-bar__toggle span {
    order: 2;
    color: #FDFBF7;
  }
  /* Flatten the wrapper so flag / code / chevron order as in the design */
  .site-header .top-bar .header-lang-bar__toggle-right {
    display: contents;
  }
  .site-header .top-bar .header-lang-bar__toggle-right img {
    order: 1;
  }
  .site-header .top-bar .header-lang-bar__toggle-right img {
    width: 21px;
    height: 15px;
    border-radius: 2px;
  }
  .site-header .top-bar .header-lang-bar__toggle-right svg {
    order: 3;
    margin-left: 4px;
    width: 12px;
    height: 8px;
  }
  .site-header .top-bar .header-lang-bar__dropdown {
    right: 0;
    left: auto;
  }
}


/* Mobile: the top bar keeps the language switcher only — the phone/hours
   line is desktop-only in the design and would wrap into the logo */
@media screen and (max-width: 1120px) {
  .site-header .top-bar__info {
    display: none !important;
  }
  .site-header .top-bar .container {
    justify-content: flex-end;
  }
}

/* Quantity stepper: design total is 168px (52 + 64 + 52), not 212 */
.single-product-page .summary .woocommerce-variation-add-to-cart .wdm-pts-qty-tile {
  min-width: 64px;
  width: 64px;
  padding: 14px 4px;
}
.single-product-page .summary .variations--grid-5 input[type="radio"] + label {
  letter-spacing: normal;
}

/* Add-ons block spacing to Figma 501:8113: 16px heading→tabs,
   16px tabs→rows, 12px between rows, rows top-aligned */
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder {
  margin-bottom: 0;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder h2.nav-tabs-holder__heading {
  margin-bottom: 16px;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
}
.single-product-page .summary .single-product-page__tabs .tab-content {
  margin-top: 16px;
}
.single-product-page .summary .single-product-page__tabs .products-swiper,
.single-product-page .summary .single-product-page__tabs .products-swiper .swiper-holder,
.single-product-page .summary .single-product-page__tabs .products-swiper .swiper {
  margin: 0;
  padding: 0;
}
/* Rows: top-aligned, 4px between name and price (design 501:8137) */
.single-product-page .summary .single-product-page__tabs .product-item {
  align-items: flex-start;
}
.single-product-page .summary .single-product-page__tabs .product-item__details-title {
  margin: 0 0 4px;
}
.single-product-page .summary .single-product-page__tabs .product-item__image {
  margin: 0;
}
/* Right-edge white fade over the scrollable tab row (design 501:8132) */
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder .nav-tabs {
  position: relative;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs::-webkit-scrollbar {
  display: none;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder {
  position: relative;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 28px;
  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* The tabs holder is a flex column whose own gap stacked on the heading
   margin (16 + 30 = 46); design is a flat 16px */
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder {
  gap: 0;
  row-gap: 0;
}
/* Title divider is #D1D1D1 in the design (theme used a dark grey) */
.single-product-page .summary .entry-title-holder {
  border-bottom-color: #D1D1D1;
}

/* ------------------------------------------------------------------ */
/* Hero: centered content card (flowerslovers.ru pattern, Krokus tokens)*/
/* Full-bleed photo crossfades behind a cream card holding the slogan,  */
/* text and link. 4+ banners come from the ACF repeater.                */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  body.page-template-page-home .hero-swiper .swiper-slide .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  body.page-template-page-home .hero-swiper .swiper-slide__text.hero-card {
    width: 100%;
    max-width: 820px;
    padding: 56px 64px 50px;
    background: #FAF6EE;
    text-align: center;
    align-items: center;
    box-shadow: 0 18px 60px rgba(30, 41, 52, .18);
  }
}
body.page-template-page-home .hero-swiper .swiper-slide__text.hero-card {
  display: flex;
  flex-direction: column;
}

/* On the cream card the text is dark, not white */
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading,
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-subheading,
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-top {
  color: #2A2B26 !important;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-top {
  margin-bottom: 12px;
  color: #475836 !important;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-subheading {
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 26px;
}

/* Smooth entrance for the active slide's card */
@keyframes krokusHeroCardIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-template-page-home .hero-swiper .swiper-slide .hero-card {
  opacity: 0;
}
body.page-template-page-home .hero-swiper .swiper-slide-active .hero-card {
  animation: krokusHeroCardIn .9s cubic-bezier(.22, .61, .36, 1) .15s both;
}
/* Slow zoom on the active photo for life behind the card */
@keyframes krokusHeroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
body.page-template-page-home .hero-swiper .swiper-slide-active .swiper-slide__picture img {
  animation: krokusHeroZoom 7s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-page-home .hero-swiper .swiper-slide-active .hero-card,
  body.page-template-page-home .hero-swiper .swiper-slide-active .swiper-slide__picture img {
    animation: none;
  }
  body.page-template-page-home .hero-swiper .swiper-slide .hero-card { opacity: 1; }
}

/* Mobile: card spans the width with tighter padding */
@media screen and (max-width: 768px) {
  body.page-template-page-home .hero-swiper .swiper-slide__text.hero-card {
    width: calc(100% - 24px);
    margin: 0 auto;
    padding: 20px 16px;
    background: #FAF6EE;
    text-align: center;
    align-items: center;
    box-shadow: 0 12px 40px rgba(30, 41, 52, .18);
  }
  body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading {
    font-size: 26px;
    letter-spacing: 2px;
  }
  body.page-template-page-home .hero-swiper .swiper-slide .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* clear the info line + dots at the bottom of the hero */
    padding-bottom: 72px;
  }
}

/* Top bar: content row is 20px inside 6px padding (Figma 501:3677) — the
   language toggle was 32px tall, pushing the row below centre */
@media screen and (min-width: 1121px) {
  .site-header .top-bar .container {
    height: 20px;
    min-height: 20px;
    align-items: center;
  }
  .site-header .top-bar .header-lang-bar,
  .site-header .top-bar .header-lang-bar__mobile,
  .site-header .top-bar .header-lang-bar__toggle {
    height: 20px;
    min-height: 20px;
    line-height: 20px;
    align-items: center;
  }
  .site-header .top-bar .top-bar__info,
  .site-header .top-bar .top-bar__phone {
    height: 20px;
    align-items: center;
  }
}

/* Mobile top bar: keep the language pill inside the 32px bar */
@media screen and (max-width: 1120px) {
  .site-header .top-bar .container {
    align-items: center;
    min-height: 20px;
  }
  .site-header .top-bar .header-lang-bar,
  .site-header .top-bar .header-lang-bar__mobile {
    display: flex;
    align-items: center;
  }
  .site-header .top-bar .header-lang-bar__toggle {
    height: 20px;
    min-height: 20px;
    padding: 0 8px;
    line-height: 20px;
  }
}

/* ------------------------------------------------------------------ */
/* Form controls store-wide: radios, checkboxes, selects, focus states  */
/* Accent colors use red-family hexes so they derive with the brand.    */
/* ------------------------------------------------------------------ */

/* Native control accent (covers anything we don't restyle explicitly) */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.single-product-page {
  accent-color: #475836; /* derives to Haki */
}

/* Radios */
.woocommerce-cart input[type="radio"],
.woocommerce-checkout input[type="radio"],
.woocommerce-account input[type="radio"],
.cart-content-wrapper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  flex-shrink: 0;
  border: 1px solid #D1D1D1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease-in-out;
}
.woocommerce-cart input[type="radio"]:hover,
.woocommerce-checkout input[type="radio"]:hover,
.woocommerce-account input[type="radio"]:hover,
.cart-content-wrapper input[type="radio"]:hover {
  border-color: #475836;
}
.woocommerce-cart input[type="radio"]:checked,
.woocommerce-checkout input[type="radio"]:checked,
.woocommerce-account input[type="radio"]:checked,
.cart-content-wrapper input[type="radio"]:checked {
  border-color: #475836;
}
.woocommerce-cart input[type="radio"]:checked::after,
.woocommerce-checkout input[type="radio"]:checked::after,
.woocommerce-account input[type="radio"]:checked::after,
.cart-content-wrapper input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #475836;
}

/* Checkboxes */
.woocommerce-cart input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account input[type="checkbox"],
.cart-content-wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  flex-shrink: 0;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.woocommerce-cart input[type="checkbox"]:hover,
.woocommerce-checkout input[type="checkbox"]:hover,
.woocommerce-account input[type="checkbox"]:hover,
.cart-content-wrapper input[type="checkbox"]:hover {
  border-color: #475836;
}
.woocommerce-cart input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-account input[type="checkbox"]:checked,
.cart-content-wrapper input[type="checkbox"]:checked {
  background: #475836;
  border-color: #475836;
}
/* white tick */
.woocommerce-cart input[type="checkbox"]:checked::after,
.woocommerce-checkout input[type="checkbox"]:checked::after,
.woocommerce-account input[type="checkbox"]:checked::after,
.cart-content-wrapper input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Selects: match the text inputs (r4, #D1D1D1, serif) */
.woocommerce-cart select,
.woocommerce-checkout select,
.woocommerce-account select,
.cart-content-wrapper select {
  border-radius: 4px !important;
  border: 1px solid #D1D1D1 !important;
  background-color: #fff;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: #2A2B26;
  padding: 8px 12px;
}

/* Keyboard focus: brand ring instead of the browser default */
.woocommerce-cart :is(input, select, textarea, button, a.button, .btn):focus-visible,
.woocommerce-checkout :is(input, select, textarea, button, a.button, .btn):focus-visible,
.woocommerce-account :is(input, select, textarea, button, a.button, .btn):focus-visible,
.single-product-page :is(input, select, textarea, button, a.button, .btn):focus-visible {
  /* sits ON the field's own border instead of 2px outside it — the offset
     ring plus the focused border read as two concentric lines */
  outline: 2px solid #475836;
  outline-offset: -1px;
}
.woocommerce-cart input:focus,
.woocommerce-checkout input:focus,
.woocommerce-account input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  border-color: #475836 !important;
  box-shadow: none;
}

/* Text selection highlight */
::selection {
  background: #c2c2c2; /* derives with the brand */
  color: #2A2B26;
}

/* Checkout/cart section headings follow the serif system (they were Poppins;
   the store-design token only converts Georgia-based headings) */
.woocommerce-checkout main h1,
.woocommerce-checkout main h2,
.woocommerce-checkout main h3,
.woocommerce-checkout main h4,
.woocommerce-checkout main legend,
.woocommerce-cart main h1,
.woocommerce-cart main h2,
.woocommerce-cart main h3,
.woocommerce-cart main h4 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  color: #2A2B26;
}

/* The checkout page uses a custom template (body.page-template-page-checkout),
   so scope headings/controls to it as well as the Woo form class */
body.page-template-page-checkout h1,
body.page-template-page-checkout h2,
body.page-template-page-checkout h3,
body.page-template-page-checkout h4,
body.page-template-page-checkout legend,
.woocommerce-checkout h3,
.woocommerce-checkout h4 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  color: #2A2B26;
}
body.page-template-page-checkout {
  accent-color: #475836;
}
body.page-template-page-checkout input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid #D1D1D1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
body.page-template-page-checkout input[type="radio"]:checked {
  border-color: #475836;
}
body.page-template-page-checkout input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #475836;
}
body.page-template-page-checkout input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
body.page-template-page-checkout input[type="checkbox"]:checked {
  background: #475836;
  border-color: #475836;
}
body.page-template-page-checkout input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.page-template-page-checkout select {
  border-radius: 4px !important;
  border: 1px solid #D1D1D1 !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  color: #2A2B26;
}
/* Checkout header/footer use the design wordmark like the main header */
body.page-template-page-checkout .site-logo img,
body.page-template-page-checkout header img[src*="logo"] {
  width: 141px;
  height: 32px;
  object-fit: contain;
}

/* checkout.css pins Poppins on the customer-details headings — match its
   specificity so the serif system wins */
form.woocommerce-checkout .customer-details h1,
form.woocommerce-checkout .customer-details h2,
form.woocommerce-checkout .customer-details h3,
form.woocommerce-checkout .customer-details h4,
form.woocommerce-checkout .customer-details .h3,
form.woocommerce-checkout .customer-details .h4,
form.woocommerce-checkout h3,
form.woocommerce-checkout h4 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
}

/* My Account: headings serif, form buttons match the system (they were
   Poppins / square from my-account-customization.css) */
body.woocommerce-account main h1,
body.woocommerce-account main h2,
body.woocommerce-account main h3,
body.woocommerce-account main h4,
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  color: #2A2B26;
}
body.woocommerce-account form button,
body.woocommerce-account form .button,
body.woocommerce-account .woocommerce-Button {
  border-radius: 4px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Product badges (Figma 501:11871): ALWAYS the frosted-glass chip,     */
/* whatever the text or the colour configured per badge in admin.      */
/* The badges plugin prints inline background-color/color, so these     */
/* declarations need !important to win.                                 */
/* ------------------------------------------------------------------ */
.badges .badge:not(.badge--sale):not(.badge--new),
.products-grid__item .badges .badge:not(.badge--sale):not(.badge--new),
.single-product-page .badges .badge:not(.badge--sale):not(.badge--new),
.single-product-page .product-images .badges .badge:not(.badge--sale):not(.badge--new),
.related-products .badges .badge:not(.badge--sale):not(.badge--new),
.archive .badges .badge:not(.badge--sale):not(.badge--new),
.product-item .badges .badge:not(.badge--sale):not(.badge--new) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif!important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(30, 41, 52, .25);
}
/* Stack multiple badges with the design's 16px inset and 6px gap */
.products-grid__item .badges,
.single-product-page .product-images .badges,
.related-products .badges {
  gap: 6px;
}

/* ------------------------------------------------------------------ */
/* Breathing room between page content and the footer: 80px desktop,   */
/* 40px mobile. The homepage is the exception — its Instagram strip     */
/* runs flush into the footer by design.                                */
/* ------------------------------------------------------------------ */
#main-footer {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  #main-footer {
    margin-top: 40px;
  }
}
body.page-template-page-home #main-footer {
  margin-top: 0;
}

/* Checkout uses its own footer element — same 80/40 rhythm, and the design
   wordmark in both its header and footer */
.checkout-main-footer {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .checkout-main-footer {
    margin-top: 40px;
  }
}
.checkout-main-footer img[src*="checkout-footer-logo"],
body.page-template-page-checkout .site-logo img[src*="logo.svg"] {
  width: 141px;
  height: 32px;
  object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Cart / checkout polish: notices, chips and buttons on the system     */
/* ------------------------------------------------------------------ */

/* Notices: 4px radius + 1px border like the rest of the UI */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-width: 1px !important;
  border-radius: 4px !important;
}
/* The notice icons are static SVGs with a baked-in red stroke — draw them as
   masks so they take the derived brand color like everything else */
.woocommerce-error::before {
  background: #475836 !important;
  -webkit-mask: url('../images/icons/woocommerce-error.svg') center / contain no-repeat;
  mask: url('../images/icons/woocommerce-error.svg') center / contain no-repeat;
}

/* Legacy pill chips (price ranges, FREE) → the design's pale green chip.
   Frosted product badges are unaffected: those match `.badges .badge`. */
.badge--red,
.badge--green,
.badge--special {
  background: #EFF4E6 !important;
  color: #2A2B26 !important;
  border-radius: 4px !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}

/* Cart buttons: 4px radius, no pill */
.woocommerce-cart .cart-content-wrapper button,
.woocommerce-cart .cart-content-wrapper .button,
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart .checkout-button,
.woocommerce-cart a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
  border-radius: 4px !important;
  border-width: 1px !important;
}
.woocommerce-cart .checkout-button,
.wc-proceed-to-checkout a.checkout-button {
  border-width: 0 !important;
}
/* Same treatment for the info/notice icon (also a baked-in red stroke).
   The success tick keeps its green — success is a status color, not brand. */
/* Info notices keep the theme's own "ⓘ" glyph in a filled circle — only
   the fill moves to the brand accent. (An earlier mask experiment clipped
   the glyph into an unreadable squiggle.) */
.woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
  content: 'ⓘ' !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: #475836 !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 24px;
}

/* --- Postcard picker: accent-derived icon + site-standard rounding --- */
.cart-content-wrapper .upsell-options__item-label--design .hidden-blocks .cards-block__heading::before {
  background: #475836 !important;
  -webkit-mask: url('../images/icons/heading-edit-icon.svg') center / contain no-repeat;
  mask: url('../images/icons/heading-edit-icon.svg') center / contain no-repeat;
}
.cart-content-wrapper .upsell-options__item-label--design .hidden-blocks .cards-block .cards-swiper .card-item label {
  border-width: 1px !important;
  border-radius: 4px !important;
}
.cart-content-wrapper .upsell-options__item-label--design .hidden-blocks .cards-block .cards-swiper .card-item__image,
.cart-content-wrapper .upsell-options__item-label--design .hidden-blocks .cards-block .cards-swiper .card-item__image img {
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Storewide typography carry-over (cart, checkout, account, blog…)     */
/* The Klaviyo embed ships its own Poppins from the Klaviyo dashboard;  */
/* pull it onto the redesign typeface so no page mixes fonts.           */
/* ------------------------------------------------------------------ */
.klaviyo-form input,
.klaviyo-form label,
.klaviyo-form button,
.klaviyo-form span,
.klaviyo-form p,
form[class*="klaviyo"] label,
form[class*="klaviyo"] input,
.needsclick label,
.needsclick input,
.needsclick p,
.needsclick span {
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif!important;
}

/* Additional-payment page: same button shape as the rest of the store */
.krokus-additional-payment-form__submit {
  border-width: 1px !important;
  border-radius: 4px !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: 2px;
}

/* ------------------------------------------------------------------ */
/* Store pages: form controls, notices and pagination on brand         */
/* (cart, checkout, account/login, wishlist, thank-you, blog, info)     */
/* ------------------------------------------------------------------ */

/* Checkbox labels: the login "remember me" label stacks its box above
   the text — put it back on one line like every other checkbox row. */
label.checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 0 8px;
}

/* Every native control tints with the brand accent (the EU-withdrawal
   plugin ships its own blue). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #475836;
}

/* Notices: the info variant was Tailwind blue and the success one a
   generic green — bring both onto the redesign palette. */
.woocommerce-info {
  background-color: #F9F9F9 !important;
  border: 1px solid #D1D1D1 !important;
}
.woocommerce-info::before {
  background-color: #475836 !important;
}
.woocommerce-message {
  background-color: rgba(147, 156, 129, 0.15) !important;
  border: 1px solid #939c81 !important;
}

/* Pagination: the current page was neutral black. */
.woocommerce-pagination .page-numbers li .page-numbers.current,
.pagination .page-numbers.current,
.page-numbers li span.current {
  background-color: #475836 !important;
  color: #fff !important;
  border-radius: 4px;
}

/* Additional-payment page inputs: same shape as the rest of the store. */
.krokus-additional-payment-form input[type="text"],
.krokus-additional-payment-form input[type="number"],
.krokus-additional-payment-form__input {
  height: 48px;
  padding: 0 14px;
  background: #F9F9F9;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

/* Order-received page renders WooCommerce's bare login / e-mail
   verification forms — they sit outside .woocommerce-account. */
.woocommerce-order form.woocommerce-verify-email,
.woocommerce-order form.woocommerce-form-login,
.woocommerce-order .woocommerce-form-login {
  max-width: 520px;
  margin: 24px 0 40px;
}
.woocommerce-order form.woocommerce-verify-email input.input-text,
.woocommerce-order .woocommerce-form-login .woocommerce-form-row input.input-text {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #F9F9F9;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
}
.woocommerce-order form.woocommerce-verify-email button,
.woocommerce-order .woocommerce-form-login button[name="login"] {
  height: 48px;
  padding: 0 32px;
  background: #475836;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Checkout coupon toggle: WooCommerce renders "Have a coupon?" as a
   .woocommerce-info notice, so the notice box framed it. The design has
   it as a plain line of text above the form. */
.woocommerce-form-coupon-toggle .woocommerce-info {
  padding: 0 !important;
  margin: 0 0 24px !important;
  background: none !important;
  border: 0 !important;
  font-size: 15px;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Contacts page + contact modal icons                                 */
/* location/at/call are <img> SVGs with a baked-in #475836, so the      */
/* Store Design derivation never reached them. Blank the bitmap with an */
/* empty replaced source and repaint the glyph as a mask, exactly like  */
/* the postcard pencil and the cart notice icons.                       */
/* ------------------------------------------------------------------ */
img[src$="/location-icon.svg"],
img[src$="/at-icon.svg"],
img[src$="/call-icon.svg"] {
  /* 20x20 to keep the icons' intrinsic size once the bitmap is blanked */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  background-color: #475836;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
img[src$="/location-icon.svg"] {
  -webkit-mask-image: url('../images/icons/location-icon.svg');
  mask-image: url('../images/icons/location-icon.svg');
}
img[src$="/at-icon.svg"] {
  -webkit-mask-image: url('../images/icons/at-icon.svg');
  mask-image: url('../images/icons/at-icon.svg');
}
img[src$="/call-icon.svg"] {
  -webkit-mask-image: url('../images/icons/call-icon.svg');
  mask-image: url('../images/icons/call-icon.svg');
}

/* ------------------------------------------------------------------ */
/* Mobile top bar per Figma 501:3739 (375x32)                          */
/* Phone + divider + hours on the left (hours truncates), flag/LV/     */
/* chevron on the right; 16px side padding, 20px content row.          */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  .site-header .top-bar .container {
    justify-content: space-between;
    gap: 0 8px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header .top-bar__info {
    display: flex !important;
    align-items: center;
    gap: 0 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;
  }
  .site-header .top-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0 4px;
    flex: 0 0 auto;
  }
  .site-header .top-bar__phone img {
    width: 20px;
    height: 20px;
  }
  .site-header .top-bar__phone span,
  .site-header .top-bar__hours {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #FDFBF7;
    white-space: nowrap;
  }
  .site-header .top-bar__divider {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    background: rgba(253, 251, 247, .5);
  }
  /* The hours line is clipped in the design, not wrapped */
  .site-header .top-bar__hours {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Language switcher: flag → LV → chevron, no pill (as on desktop) */
  .site-header .top-bar .header-lang-bar {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .site-header .top-bar .header-lang-bar__toggle {
    padding: 0;
    gap: 0 8px;
    background: transparent !important;
    border: 0;
    color: #FDFBF7;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
  }
  .site-header .top-bar .header-lang-bar__toggle span {
    order: 2;
    color: #FDFBF7;
  }
  .site-header .top-bar .header-lang-bar__toggle-right {
    display: contents;
  }
  .site-header .top-bar .header-lang-bar__toggle-right img {
    order: 1;
    width: 21px;
    height: 15px;
    border-radius: 2px;
  }
  .site-header .top-bar .header-lang-bar__toggle-right svg {
    order: 3;
    margin-left: -4px; /* design gap after the code is 4px, not the row's 8px */
    width: 12px;
    height: 8px;
  }
  .site-header .top-bar .header-lang-bar__dropdown {
    right: 0;
    left: auto;
  }
}

/* Price ("no €44.00"): nothing in it is bold — word and amount both 400 —
   and it is set in the header green. '#475835' is the very token the header
   bar uses, so the two derive to the exact same shade and the Store Design
   customizer keeps them in step.
   (client feedback, ClickUp 86bbz1791) */
.products-grid__item-price,
.product-item__price,
.single-product-page .summary > .price,
.products-grid__item-price .woocommerce-Price-amount,
.product-item__price .woocommerce-Price-amount,
.single-product-page .summary > .price .woocommerce-Price-amount {
  font-weight: 400;
}
/* Only the amount takes the accent — the "no"/"from" prefix stays neutral */
.products-grid__item-price,
.archive .products-grid__item-price,
.product-item__price,
.single-product-page .product-item__details-price,
.single-product-page .summary > .price,
.single-product-page .summary .price:not(.variations__item-price) {
  color: #2A2B26;
}
.products-grid__item-price .woocommerce-Price-amount,
.archive .products-grid__item-price .woocommerce-Price-amount,
.product-item__price .woocommerce-Price-amount,
.single-product-page .product-item__details-price .woocommerce-Price-amount,
.single-product-page .summary > .price .woocommerce-Price-amount,
.single-product-page .summary .price:not(.variations__item-price) .woocommerce-Price-amount {
  color: #475835;
}
/* The struck-out old price stays the muted neutral, not the accent */
.products-grid__item-price del,
.product-item__price del,
.single-product-page .summary > .price del,
.price del {
  color: rgba(37, 31, 31, 0.55);
}

/* The toggle carries a 109px min-width (kept for the old pill), which left
   the group floating short of the right edge — the design sizes it to its
   content: flag 21 + 8 + code + 4 + chevron = 67px. */
.site-header .top-bar .header-lang-bar__toggle {
  min-width: 0 !important;
  width: auto !important;
}

/* Language flag: the design draws it 21x15 in the top bar; header-
   customization.css pins 29x17 with !important, so match it in kind. */
.site-header .top-bar .header-lang-bar__toggle img {
  width: 21px !important;
  height: 15px !important;
  border-radius: 2px;
  object-fit: cover;
}

/* Homepage: the last products block keeps the 80/40 rhythm — 80px below it
   on desktop, 40px on mobile (Figma mobile homepage). */
@media screen and (max-width: 768px) {
  body.page-template-page-home .featured-products:last-of-type {
    padding-bottom: 40px;
  }
}

/* ------------------------------------------------------------------ */
/* Reviews / customers gallery on mobile (Figma 501:6795)              */
/* The design wraps the phrase chips into centered rows and shows the  */
/* photos as a 2x2 grid — the base theme turned both into strips.      */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .customers-gallery .section-heading {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 2.4px;
  }

  /* Figma 501:6796: heading ends at 125, chips start at 145 — the holder
     adds another 30px on top of the heading's own margin */
  .customers-gallery .section-heading {
    margin-bottom: 20px;
  }
  .customers-gallery .section-heading-holder {
    margin-bottom: 0;
  }
  /* Chips: wrapped and centered, not a horizontal scroller */
  .customers-gallery__phrases {
    width: 100%;
    max-width: 343px;
    margin: 0 auto 32px;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    overflow: visible;
  }
  .customers-gallery__phrases li {
    height: 32px;
    padding: 4px 8px;
    gap: 0 8px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }
  .customers-gallery__phrases li::before {
    width: 12px;
    height: 12px;
  }

  /* Photos: 2 x 2, 8px gutters, square tiles (167.5 x 169.5 in the design).
     `.grid-5` in the base theme outranks the plain .gallery-grid rule, so it
     has to be matched here too. */
  .customers-gallery .gallery-grid,
  .customers-gallery .gallery-grid.grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .customers-gallery .gallery-grid__item img {
    aspect-ratio: 167.5 / 169.5;
  }
}

/* Below 1120px the body still reserved 127px for the old two-row header —
   the redesigned bar is 104px (32 top bar + 72 main bar), which left a
   23px white band above the hero. The 1121+ block below 1120 is overridden
   again at 768 and under, where the main bar is 56px. */
@media screen and (max-width: 1120px) {
  body {
    padding-top: 104px;
  }
}

/* ------------------------------------------------------------------ */
/* Promises carousel on mobile (Figma 398:20674 / 501:7142, 375x426)   */
/* 40px section padding, heading 343x36, card 343x290 with 32/24       */
/* padding, 104px icon, 32px icon->text gap, title 26 / text 2x24.     */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .promises {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .promises .block-heading {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 2.4px;
  }
  .promises__item {
    padding: 32px 24px;
    gap: 32px 0;
  }
  .promises__item-icon {
    width: 104px;
    height: 104px;
  }
  .promises__item-heading {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 2px;
  }
  .promises__item p {
    font-size: 16px;
    line-height: 24px;
  }
  .promises .swiper-pagination {
    margin-top: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile homepage grid metrics (Figma 398:20476 / 398:22647)          */
/* Design: 16px page margins, cards 167.5 wide with an 8px column gap  */
/* and 16px row gap, 8px insets on the photo, 2-line titles.           */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  body.page-template-page-home .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.page-template-page-home .featured-products .block-heading {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 2.4px;
  }
  .featured-products .products-grid,
  body.page-template-page-home .products-grid,
  .products-grid {
    gap: 16px 8px;
  }
  /* Titles wrap onto a second line in the design instead of truncating,
     and the block reserves both lines so the rows stay aligned */
  .products-grid__item-title {
    min-height: 36px;
  }
  .products-grid__item-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 1.5px;
  }
  .products-grid__item-price {
    font-size: 16px;
    line-height: 24px;
  }
  /* Photo overlays sit 8px in, not 16px */
  .products-grid__item .wishlist-icon,
  .products-grid__item .badges {
    top: 8px;
  }
  .products-grid__item .wishlist-icon {
    right: 8px;
  }
  .products-grid__item .badges {
    left: 8px;
  }
}

/* Homepage section headings on mobile are 24px/31px with 2.4px tracking
   (Figma 398:20476) — the Instagram strip kept the desktop 28px. */
@media screen and (max-width: 768px) {
  .ig-output .block-heading,
  .ig-output h2,
  body.page-template-page-home .ig-output .section-heading {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 2.4px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile header per Figma 501:3738 (375x88)                           */
/* 32px top bar + 56px main bar; inside the main bar a 24px row with   */
/* 16px padding: burger 30x16 at 16, wordmark 130x24 at 62 (LEFT, not  */
/* centred), search + cart 24x24 ending at the 16px right margin.      */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  body {
    padding-top: 88px;
  }
  .site-header .main-bar,
  .site-header .main-bar .container {
    height: 56px;
    min-height: 56px;
    align-items: center;
  }
  .site-header .main-bar .menu-toggle {
    order: 1;
  }
  .site-header .main-bar .site-logo {
    position: static;
    order: 2;
    margin-left: 16px;
    height: 24px;
    transform: none;
  }
  .site-header .main-bar .site-logo img {
    width: 130px;
    height: 24px;
    object-fit: contain;
  }
  .site-header .main-bar .buttons {
    order: 3;
    margin-left: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Footer bottom bar on mobile (Figma 501:7336, 375x118)               */
/* One centred copyright line — "2026 KROKUS | INTERNETA VEIKALU       */
/* IZSTRĀDĀJA" — with the studio mark under it, then a single 18px row */
/* of payment logos. The base theme stacks the text (column at 575px)  */
/* and drops the "|" separator there, so these need the same           */
/* #main-footer specificity to win.                                    */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* the desktop bar is a fixed 80px; the mobile design is 118 and grows
     with its two text lines */
  #main-footer .footer-bottom {
    height: auto;
    padding: 20px 0;
  }
  #main-footer .footer-bottom__text {
    /* Figma 501:7336: one 328px line, 20px tall */
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px;
    position: relative;
    padding-bottom: 20px; /* room for the centred studio mark below */
  }
  #main-footer .footer-bottom .container {
    row-gap: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #main-footer .footer-bottom__text {
    flex-direction: row;
    flex-wrap: wrap;
    /* both texts sit on one baseline; the studio mark drops underneath */
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    text-align: center;
  }
  #main-footer .footer-bottom__text li {
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 20px;
  }
  #main-footer .footer-bottom__text li:not(:last-child)::after {
    content: "|";
    padding: 0 5px;
  }
  /* the studio mark sits on its own line, centred on the PAGE (it lives
     inside the second <li>, so centring it there would follow that li's
     box instead — pin it to the row instead) */
  #main-footer .footer-bottom__text li a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin: 0;
  }
  #main-footer .footer-bottom__text li a img {
    width: 49px;
    height: 12px;
  }
  #main-footer .footer-bottom__logos ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 4px;
  }
  #main-footer .footer-bottom__logos img {
    height: 18px;
    width: auto;
    max-height: 18px;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile PDP (Figma 287:11214 / 287:12429 / 287:12442)                */
/* 16px page margins; square 343x343 gallery image paged by DOTS (the  */
/* thumbnail rail is desktop only); qty row and add-to-cart both run   */
/* the full 343 width, stacked.                                        */
/* ------------------------------------------------------------------ */
.product-images .swiper-pagination-main,
.single-product-page__main .pdp-breadcrumb--mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .single-product-page .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Breadcrumb sits above the gallery in the mobile design; the base theme
     hides the one inside .summary at this width, so the mobile copy shows */
  .single-product-page__main .pdp-breadcrumb--mobile {
    display: block;
    width: 100%;
    order: -1;
  }
  .single-product-page__main .pdp-breadcrumb--mobile .woocommerce-breadcrumb {
    display: flex;
    margin: 0 0 16px;
  }

  /* Gallery: a column of square image → dots → caption */
  .single-product-page__main .product-images {
    flex-direction: column;
    gap: 0;
  }
  /* the slide's <a> carries the desktop 3:4 ratio — mobile is square */
  .single-product-page__main .product-images .swiper-container-main .swiper-slide a {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    display: block;
  }
  .single-product-page__main .product-images .swiper-container-main .swiper-slide img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover;
  }
  .single-product-page__main .product-images .swiper-container-thumbs,
  .single-product-page__main .product-images .swiper-nav {
    display: none;
  }
  .product-images .swiper-pagination-main {
    order: 3;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 20px;
    height: 34px;
    margin: 0;
  }
  .product-images .swiper-pagination-main .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    background: #2A2B26;
    opacity: .25;
  }
  .product-images .swiper-pagination-main .swiper-pagination-bullet-active {
    opacity: 1;
  }
  /* caption runs the full width, left aligned (design 343x32) */
  .single-product-page__main .product-images .product-images__caption {
    order: 4;
    width: 100%;
    margin: 12px 0 0;
    text-align: left;
    white-space: normal;
  }

  /* Cart row: full-width stepper, then a full-width add-to-cart. The row is
     .woocommerce-variation-add-to-cart, not the form itself. */
  .single-product-page .summary form.cart.krokus-qty-std,
  .single-product-page .summary .woocommerce-variation-add-to-cart {
    flex-direction: column;
    align-items: stretch;
    gap: 8px 0;
  }
  .single-product-page .summary form.cart .krokus-qty-group {
    width: 100%;
    display: flex;
  }
  .single-product-page .summary form.cart .krokus-qty-group .krokus-qty-input,
  .single-product-page .summary form.cart .krokus-qty-group input {
    flex: 1 1 auto;
    width: auto;
  }
  .single-product-page .summary form.cart .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ */
/* Storewide mobile consistency with the homepage / PDP frames         */
/* The design uses 16px page margins on every mobile frame, and one    */
/* heading scale: 28px/2.8px tracking on desktop, 24px/31px/2.4px on   */
/* mobile, uppercase serif. Section and page headings outside the      */
/* homepage sections were still on the old 30/28px non-tracked scale.  */
/* ------------------------------------------------------------------ */
.page-heading,
.block-heading {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #2A2B26;
}

@media screen and (max-width: 768px) {
  main .container,
  .site-main .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-heading,
  .block-heading,
  .section-heading,
  .single-product-page .block-heading,
  .related .block-heading,
  .ig-output .section-heading,
  .customers-gallery .section-heading {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 2.4px;
  }
}

/* ------------------------------------------------------------------ */
/* My Account icons: every one of these SVGs has a baked-in #475836    */
/* fill/stroke, so the Store Design derivation never reached them.     */
/* They are CSS backgrounds (no <img> bitmap), so a plain mask swap    */
/* repaints them in the derived accent.                                */
/* ------------------------------------------------------------------ */
.wc-my-account-wrapper .woocommerce-MyAccount-content .addresses .woocommerce-Address .edit-btn::before,
.wc-my-account-wrapper .wc-my-account-sidebar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a::after,
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li .wd-nav-icon {
  background-color: #475836 !important;
  background-image: none !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .addresses .woocommerce-Address .edit-btn::before {
  -webkit-mask-image: url('../images/icons/edit-icon.svg');
  mask-image: url('../images/icons/edit-icon.svg');
}
.wc-my-account-wrapper .wc-my-account-sidebar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a::after {
  -webkit-mask-image: url('../images/icons/my-account-navigation-arrow.svg');
  mask-image: url('../images/icons/my-account-navigation-arrow.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-orders .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-orders-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-orders-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-downloads .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-downloads-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-downloads-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-my-acc-edit-address .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-my-acc-edit-address-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-my-acc-edit-address-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-edit-account .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-edit-account-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-edit-account-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-wishlist .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-wishlist-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-wishlist-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-messages .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-messages-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-messages-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-eu-withdrawal .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-eu-withdrawal-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-eu-withdrawal-icon.svg');
}
.wc-my-account-wrapper .woocommerce-MyAccount-content .wc-my-account-links li.wc-my-acc-customer-logout .wd-nav-icon {
  -webkit-mask-image: url('../images/icons/wc-my-acc-customer-logout-icon.svg');
  mask-image: url('../images/icons/wc-my-acc-customer-logout-icon.svg');
}

/* ------------------------------------------------------------------ */
/* Mobile footer per Figma 501:7278 (375x1176)                         */
/* Order is logo → newsletter → accordions → socials; ours had the      */
/* socials stuck in the text column above the accordions. Spacing:      */
/* 40px top, 32px under the logo, 40px before the accordions, 24px      */
/* before the socials row (56px tall), 16px page margins.               */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  #main-footer > .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* the footer's own 35px top padding stacked on the 40px content inset,
     leaving 75px above the logo — the design has 40 */
  #main-footer {
    padding-top: 0;
  }
  #main-footer .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 40px;
  }
  /* flatten the text column so its children can be reordered against
     the accordion holder, which is their sibling */
  #main-footer .footer-content__text {
    display: contents;
  }
  #main-footer .footer-content__text > img {
    order: 1;
    width: 140px;
    height: 32px;
    margin: 0 0 32px;
    object-fit: contain;
  }
  #main-footer .newsletter {
    order: 2;
    margin: 0 0 40px;
  }
  #main-footer .footer-menu-holder {
    order: 3;
  }
  #main-footer .social-media--footer-left {
    order: 4;
    margin: 24px 0 0;
    justify-content: flex-start;
    gap: 0 32px;
  }
  #main-footer .footer-content__text-contacts {
    order: 5;
  }
}

/* ------------------------------------------------------------------ */
/* Footer newsletter (Klaviyo embed) on mobile                         */
/* The embed stacks its rows on small screens: the heading is printed  */
/* twice and the submit button drops onto its own line. The design has */
/* heading → subtext → one row of input + arrow button.                */
/* Row order comes from the Klaviyo block, so these are positional —   */
/* re-check if the form is rebuilt in the Klaviyo dashboard.           */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* Klaviyo writes inline styles on every row, so these need !important */
  #main-footer .newsletter form > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  #main-footer .newsletter form > div > div {
    grid-column: 1 / -1;
  }
  /* second copy of the heading */
  #main-footer .newsletter form > div > div:nth-child(3) {
    display: none !important;
  }
  /* e-mail field and arrow button share one row */
  #main-footer .newsletter form > div > div:nth-child(5) {
    grid-column: 1;
  }
  #main-footer .newsletter form > div > div:nth-child(6) {
    grid-column: 2;
    width: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Footer accordions on mobile (Figma 501:7278)                        */
/* Each header is a 48px row — 14px above and below a 20px label — with */
/* the divider as its bottom border and the chevron centred on it. Ours */
/* had 20px padding plus a 28px margin, so the rows sat unevenly.       */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  #main-footer .menu-col {
    margin: 0;
  }
  #main-footer .menu-col .widget-title {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 30px 14px 0;
    margin: 0;
  }
  #main-footer .menu-col .widget-title::after {
    top: 50%;
    transform: translateY(-50%);
  }
  /* social row centred under the accordions */
  #main-footer .social-media--footer-left {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ */
/* Promises on mobile: the design (Figma 398:20476) has no carousel     */
/* pager and a 20px gap under the heading — ours kept the dots plus     */
/* their 33px margin, which is most of the extra height.                */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .promises .swiper-pagination,
  body.page-template-page-home .promises .swiper-pagination {
    display: none !important;
  }
  .promises .block-heading,
  body.page-template-page-home .promises .block-heading {
    margin: 0 0 20px !important;
  }
  /* the heading sits in a holder that adds another 25px */
  .promises .block-heading-holder {
    margin-bottom: 0;
  }
  /* the card carries its border in the mobile design (no hover there) */
  .promises__item,
  body.page-template-page-home .promises__item {
    border-color: #D1D1D1;
  }
}

/* The reviews-widget block kept the desktop 80px bottom padding on mobile,
   which stacked with the promises' 40px top inset for a 120px gap — the
   mobile rhythm is 40px each side. */
@media screen and (max-width: 768px) {
  /* .pt-70 in the base rule group makes it 0,2,0 — match that */
  section.product-rating-widget,
  .product-rating-widget.pt-70 {
    padding-bottom: 40px;
  }
  /* the class is on BOTH the section and an inner div, so a bare
     .product-rating-widget rule pads twice */
  section.product-rating-widget .product-rating-widget {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile PDP top spacing (Figma 287:11214): header 88 → breadcrumb at  */
/* 104 → gallery at 140 → summary at 585. So 16px above the crumb, 16   */
/* below it, 24 between gallery and summary. `.single-product-page__main`*/
/* is a flex column with a 50px gap, which was inflating all of them.    */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* the PDP nests two <main> elements (outer 20px, inner 50px of top
     padding) before the .single-product-page div — 86px above the crumb */
  main.site-main.single-product-page,
  main.site-main.single-product-page main.site-main {
    padding-top: 0;
  }
  .container > .single-product-page {
    padding-top: 16px;
  }
  .single-product-page__main {
    gap: 0;
  }
  .single-product-page__main .pdp-breadcrumb--mobile {
    margin: 0 0 16px;
  }
  .single-product-page__main .pdp-breadcrumb--mobile .woocommerce-breadcrumb {
    margin: 0;
  }
  .single-product-page__main .product-images {
    margin-bottom: 24px;
  }
}

/* The mobile PDP has no rule under the product title (Figma 287:11214) */
@media screen and (max-width: 768px) {
  .single-product-page .summary .entry-title-holder {
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile PDP summary spacing (Figma 287:12443, 343x311)               */
/* title row 0-31 → price at 35 (4px) → next block at 91 (24px after   */
/* the 32px price). Ours had 12px padding + 15px margin under the      */
/* title and a 12/32 margin pair on the price.                          */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .single-product-page .summary .entry-title-holder {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .single-product-page .summary > .price {
    margin: 4px 0 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile PDP: stepper fills the row and the title takes the design's  */
/* 24px/31px (Figma 287:12443 — qty row 343 = 52 | 239 | 52).          */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .single-product-page .summary form.cart .krokus-qty-group > :not(.krokus-qty-step) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* must match the 0,4,1 specificity of the 28px rules above */
  .single-product-page .summary .entry-title-holder h1.entry-title,
  .single-product-page .summary h1.entry-title,
  .single-product-page h1.entry-title {
    font-size: 24px;
    line-height: 31px;
  }
}

/* Gallery caption: absolutely positioned for the desktop layout, so on
   mobile it fell outside its block and collided with the summary. The
   design (287:12429) has it in flow, 12px under the dots, with 24px to
   the summary below. */
@media screen and (max-width: 768px) {
  .single-product-page__main .product-images .product-images__caption {
    position: static;
    margin: 12px 0 0;
    width: 100%;
    /* the desktop rule pins the caption to one line; the full disclaimer is
       far wider than a phone, so let it wrap (ClickUp 86bbuaamw reopen) */
    white-space: normal;
  }
}

/* ------------------------------------------------------------------ */
/* Related products on mobile (Figma 501:9513)                         */
/* A horizontal scroller of 212px cards with 8px gutters — not the      */
/* 2-column grid — with a thin progress bar under it.                   */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .related-products .products-grid--related {
    display: flex;
    gap: 0 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .related-products .products-grid--related > .products-grid__item {
    flex: 0 0 212px;
    width: 212px;
    scroll-snap-align: start;
  }
  .related-products .products-grid--related::-webkit-scrollbar {
    height: 3px;
  }
  .related-products .products-grid--related::-webkit-scrollbar-track {
    background: #E7E7E7;
  }
  .related-products .products-grid--related::-webkit-scrollbar-thumb {
    background: #2A2B26;
  }
}

/* The add-ons tab pane carries a min-height (sized for the tallest tab),
   which left ~135px of empty space under the rows on mobile before the
   related products. The design sizes the block to its content. */
@media screen and (max-width: 768px) {
  .single-product-page__tabs .tab-content .tab-pane {
    min-height: 0 !important;
  }
  /* design: 40px between the add-ons block and "Līdzīgi produkti" */
  .related-products {
    margin-top: 40px;
  }
}


/* The PDP ends with the full-bleed Instagram strip, so its footer sits
   flush against it — same as the homepage (Figma 287:11214: the footer
   starts exactly where the Instagram block ends). */
body.single-product #main-footer {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Checkout: phone fields and checkbox rows                            */
/* The intl-tel-input wrapper stays inline-block at its intrinsic 240px */
/* so the phone rows were narrower than every other field, and the      */
/* checkbox labels carry a 30px left padding that indents the box away  */
/* from the form's left edge.                                           */
/* ------------------------------------------------------------------ */
form.woocommerce-checkout .customer-details .iti,
form.woocommerce-checkout .customer-details .iti--inline-dropdown,
form.woocommerce-checkout .customer-details .iti--allow-dropdown {
  display: block;
  width: 100%;
}
form.woocommerce-checkout .customer-details .iti input.input-text {
  width: 100%;
}
form.woocommerce-checkout .customer-details label.checkbox {
  padding-left: 0;
  gap: 0 8px;
}

/* Checkout on mobile: the form is a flex column with a 48px gap, and the
   notes row adds another 20px — 68px between the fields and the order
   summary. The mobile rhythm elsewhere is 40. */
@media screen and (max-width: 768px) {
  form.woocommerce-checkout {
    gap: 20px 0;
  }
}

/* ------------------------------------------------------------------ */
/* "Izmantot kodu" is the cart's secondary action. The design uses a    */
/* solid SAGE fill for secondary buttons (the reviews widget's "Raksti  */
/* atsauksmi" and the footer newsletter arrow), so match that instead   */
/* of an outline — the solid checkout button stays the primary.         */
/* ------------------------------------------------------------------ */
.woocommerce-cart button[name="apply_coupon"],
.cart-content-wrapper button[name="apply_coupon"] {
  background: #939c81 !important;
  border-color: #939c81 !important;
  color: #fff !important;
}
.woocommerce-cart button[name="apply_coupon"]:hover,
.cart-content-wrapper button[name="apply_coupon"]:hover {
  background: #475836 !important;
  border-color: #475836 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Bouquet composition picker (wdm product-type-selector)              */
/* The plugin ships its own palette — raw #475836 price, a red-tinted  */
/* selected card, dark 2px control borders — and its stylesheet is     */
/* outside the Store Design pipeline, so it never derived. Restate the */
/* few colors here (theme CSS => derived) using the same treatment as  */
/* the postcard picker: pale sage fill, accent border, 4px radii.      */
/* ------------------------------------------------------------------ */
.wdm-pts-composition-card {
  border: 1px solid #D1D1D1 !important;
  border-radius: 4px !important;
  background: #fff !important;
}
/* markup is label > input.radio + div.card, so the checked state is a
   sibling combinator, not :has() */
.wdm-pts-composition-radio:checked + .wdm-pts-composition-card,
.wdm-pts-composition-card.is-selected,
.wdm-pts-composition-card.selected {
  background: #EFF4E6 !important;
  border-color: #475836 !important;
}
.wdm-pts-composition-price {
  color: #475836;
}
.quantity.wdm-pts-custom-quantity {
  border-width: 1px !important;
  border-color: #D1D1D1 !important;
  border-radius: 4px !important;
}
.wdm-pts-composition-radio {
  border-color: #D1D1D1 !important;
  accent-color: #475836;
}

/* Stepper focus: highlight the cell that actually has focus, not the whole
   "− value +" group (the plugin's own 3px dark outline is dropped first). */
.wdm-pts-custom-quantity input:focus,
.wdm-pts-custom-quantity input:focus-visible,
.krokus-qty-group input:focus,
.krokus-qty-group input:focus-visible,
.quantity.wdm-pts-quantity input:focus,
.quantity.wdm-pts-quantity input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.krokus-qty-step:focus-visible,
.krokus-qty-group .wdm-pts-qty-tile:focus-within,
.krokus-qty-group .krokus-qty-input:focus-visible,
.quantity.wdm-pts-quantity .minus:focus-visible,
.quantity.wdm-pts-quantity .plus:focus-visible,
.quantity.wdm-pts-quantity .qty:focus-visible,
.quantity.wdm-pts-custom-quantity .minus:focus-visible,
.quantity.wdm-pts-custom-quantity .plus:focus-visible,
.quantity.wdm-pts-custom-quantity .wdm-pts-custom-input-wrap:focus-within {
  outline: 2px solid #475836 !important;
  outline-offset: -2px;
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* My Account order-row actions ("Skatīt"): the last outline button in  */
/* the store. Buttons are solid now — Haki for primary actions, sage    */
/* for secondary ones — so this row action takes the sage treatment.    */
/* The EU-withdrawal link keeps its plain-link styling.                 */
/* ------------------------------------------------------------------ */
/* the template renders these as <a class="btn btn-secondary view">, not
   .woocommerce-button — target the actions holder */
body.woocommerce-account .action-btns-holder .btn:not([class*="withdraw"]),
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .btn:not([class*="withdraw"]),
body.woocommerce-account a.woocommerce-button.button:not(.eu-withdrawal) {
  background: #939c81 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
body.woocommerce-account .action-btns-holder .btn:not([class*="withdraw"]):hover,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .btn:not([class*="withdraw"]):hover,
body.woocommerce-account a.woocommerce-button.button:not(.eu-withdrawal):hover {
  background: #475836 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Mobile: breadcrumb rhythm matches the PDP (Figma 287:11214) — 16px   */
/* under the header, 16px to the content. Pages were inheriting a 40px  */
/* top padding plus the breadcrumb's own 30px bottom margin.            */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  body:not(.home):not(.page-template-page-home):not(.single-product) main.site-main {
    padding-top: 16px;
  }
  /* the account pages target #main by id, which outranks the rule above */
  body.woocommerce-account #main {
    padding-top: 16px;
  }
  .woocommerce-breadcrumb {
    margin-bottom: 16px;
  }
}

/* (the wishlist's own 50px top padding is overridden inside wishlist.css —
   that file is enqueued AFTER redesign.css, so a rule here would lose) */

/* ------------------------------------------------------------------ */
/* Reviews carousel: cards flush with the content column               */
/* Trustindex's preset sets `.ti-reviews-container-wrapper{margin:0 20px */
/* !important}` at 0,4,0 specificity, which insets the cards 20px (plus  */
/* the items' own 8px gutter) from the photo grid above. Beat it by      */
/* repeating the widget's data-attributes, and restore the -8px gutter   */
/* compensation so the card edges land on the column edges. Arrows hang  */
/* outside the column. Verified against a local replica of the widget    */
/* (its markup and preset CSS fetched from cdn.trustindex.io) because    */
/* the widget refuses to render in a headless browser.                   */
/* ------------------------------------------------------------------ */
.product-rating-widget .ti-widget[data-layout-id][data-set-id] {
  position: relative;
  overflow: visible !important;
}
.product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-reviews-container-wrapper {
  margin-left: -8px !important;
  margin-right: -8px !important;
}
.product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-controls {
  overflow: visible !important;
}
.product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-controls .ti-arrow-prev {
  margin-left: -20px !important;
}
.product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-controls .ti-arrow-next {
  margin-right: -20px !important;
}
@media screen and (max-width: 768px) {
  /* no room to hang them outside on a phone */
  .product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-controls .ti-arrow-prev {
    margin-left: 0 !important;
  }
  .product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-controls .ti-arrow-next {
    margin-right: 0 !important;
  }
}

/* ------------------------------------------------------------------ */
/* Reviews widget header box: same 20/28px inset problem as the cards.  */
/* The preset pins `.ti-widget-container .ti-widget-header{margin:0 28px */
/* !important}` at 0,5,0 — outrank it so the box lines up with the cards */
/* and the photo grid.                                                  */
/* ------------------------------------------------------------------ */
.product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-widget-container .ti-widget-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header counters: the wishlist badge was Haki while the cart badge is
   the sage secondary — match them (Figma 501:3765). */
.site-header .wishlist_products_counter_number,
.site-header .wd-header-wishlist .wishlist_products_counter_number {
  background-color: #939c81 !important;
  color: #fff !important;
}

/* Instagram strip on mobile: the design puts 20px under the heading
   (Figma 501:7222 — heading 0-36, images at 56); ours carried 30px. */
@media screen and (max-width: 768px) {
  .ig-output .section-heading,
  .ig-output .block-heading,
  body.page-template-page-home .ig-output .section-heading {
    margin-bottom: 20px;
  }
}

/* ------------------------------------------------------------------ */
/* Laptop header: the row never wraps                                   */
/* The nav has to stay on one line at every desktop width, so between   */
/* 1121 and 1619px the type and spacing step down instead (the English  */
/* labels are the longest and set each tier). Full design values —      */
/* 16px / 1px tracking / 30px gaps — return at 1620.                    */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) and (max-width: 1619px) {
  .site-header .main-bar .container {
    gap: 0 16px;
    flex-wrap: nowrap;
  }
  .site-header #site-navigation {
    min-width: 0;
  }
  .site-header #site-navigation #primary-menu-list {
    flex-wrap: nowrap;
  }
  .site-header #site-navigation #primary-menu-list > li > a {
    white-space: nowrap;
  }
  /* the cart total is the widest element in the icon row */
  .site-header .main-bar .buttons__cart-price {
    display: none;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1619px) {
  .site-header #site-navigation #primary-menu-list {
    gap: 0 clamp(14px, 7.8vw - 98px, 26px);
  }
  .site-header #site-navigation #primary-menu-list > li > a {
    font-size: 15px;
    letter-spacing: .6px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1439px) {
  .site-header #site-navigation #primary-menu-list {
    gap: 0 12px;
  }
  .site-header #site-navigation #primary-menu-list > li > a {
    font-size: 14px;
    letter-spacing: .4px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1299px) {
  .site-header #site-navigation #primary-menu-list {
    gap: 0 10px;
  }
  .site-header #site-navigation #primary-menu-list > li > a {
    font-size: 13px;
    letter-spacing: .2px;
  }
}
@media screen and (min-width: 1121px) and (max-width: 1199px) {
  .site-header #site-navigation #primary-menu-list {
    gap: 0 8px;
  }
  .site-header #site-navigation #primary-menu-list > li > a {
    font-size: 12px;
    letter-spacing: 0;
  }
  .site-header .main-bar .container {
    gap: 0 12px;
  }
  .site-header .buttons {
    gap: 0 12px;
  }
}

/* Footer columns: size to their content so long RU headings ("ИНФОРМАЦИЯ О
   КОМПАНИИ") no longer force every column to the widest one and push the row
   past the container (ClickUp 86bbu9quq, RU at 1280-1560). Outer alignment is
   kept by space-between: first column at the holder start, last flush right. */
@media screen and (min-width: 992px) {
  #main-footer .footer-menu-holder {
    justify-content: space-between;
    gap: 0 clamp(24px, 3vw, 124px);
  }
  #main-footer .footer-menu-holder .menu-col { flex: 0 1 auto; }
  #main-footer .footer-menu-holder .menu-col .widget-title { white-space: nowrap; }
}

/* ------------------------------------------------------------------ */
/* Footer newsletter field (ClickUp 86bbu9vx0)                          */
/* Figma has one white bordered box with the arrow sitting inside it at */
/* the right; the embed rendered the submit as a separate filled sage   */
/* square with a 20px gap. Close the gap and carry the border across    */
/* both halves so they read as a single field. The Klaviyo wrappers     */
/* carry inline padding, hence the !important.                          */
/* ------------------------------------------------------------------ */
#main-footer .klaviyo-form-SDzWmA div:has(> div > input[type="email"]) {
  padding-right: 0 !important;
}
#main-footer .klaviyo-form-SDzWmA div:has(> button.klaviyo-form-button) {
  padding-left: 0 !important;
}
#main-footer .klaviyo-form-SDzWmA input {
  border: 1px solid #D1D1D1 !important;
  border-right: 0 !important;
}
#main-footer .klaviyo-form-SDzWmA button.klaviyo-form-button {
  width: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid #D1D1D1 !important;
  border-left: 0 !important;
  border-radius: 0 4px 4px 0 !important;
}
#main-footer .klaviyo-form-SDzWmA button.klaviyo-form-button::after {
  color: #2A2B26;
}

/* The embed styles its placeholder separately (Poppins + 2px tracking from
   the Klaviyo dashboard), which is the "different font" in 86bbu9vx0. */
#main-footer .klaviyo-form-SDzWmA input,
#main-footer .klaviyo-form-SDzWmA input::placeholder {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: normal !important;
}

/* EU / NAP logos: the artwork is now the 1065x521 master (ClickUp 86bbua1fv —
   the old 229x115 file was pixelated on retina), so pin the rendered box to
   the size it always had instead of letting the intrinsic size through. */
#main-footer .investment-details img,
#main-footer .investment-details__logos img {
  width: 229px;
  height: auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Hero: keep the cream card out of the info line (ClickUp 86bbux8qa)   */
/* The card was centred in the full slide height while the info line +  */
/* dots sit in a fixed band at the bottom, so a taller RU/EN headline   */
/* grew the card straight over "100% svaigi ziedi" / "Strādājam 24/7".  */
/* Reserving that band around the card keeps its design position where  */
/* it fits and lets the slide grow only when the text needs it.         */
/* ------------------------------------------------------------------ */
body.page-template-page-home .hero-swiper .swiper-slide,
body.page-template-page-home .hero-swiper .swiper .swiper-slide {
  height: auto;
}
@media screen and (min-width: 769px) {
  body.page-template-page-home .hero-swiper .swiper-slide .container {
    height: auto;
    /* only the dots sit below the card now: 44px up, 12px tall, 16px breather */
    padding-block: 72px;
  }
}
@media screen and (max-width: 768px) {
  body.page-template-page-home .hero-swiper .swiper-slide .container {
    height: auto;
    /* dots sit 44px up and are 12px tall; 16px on top keeps a tall RU/EN
       card off the header edge */
    padding-top: 16px;
    padding-bottom: 72px;
  }
}
@media screen and (max-width: 768px) {
  /* the mobile slide is a column flex box, so vertical centring of the
     (now auto-height) card comes from justify-content, not align-items */
  body.page-template-page-home .hero-swiper .swiper-slide {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ */
/* PDP caption vs the next section (ClickUp 86bbux222)                  */
/* The caption hangs off the bottom of the gallery with position:       */
/* absolute, so it occupies no space. On a product with no description  */
/* the summary column is shorter than the gallery, the product block    */
/* ends at the gallery, and the caption printed straight over the       */
/* "Similar products" heading. Reserve its band under the gallery — it  */
/* is invisible whenever the summary is the taller column.              */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .single-product-page .product-images {
    margin-bottom: 48px;
  }
}

/* Footer at narrow desktop widths: at ~1200px the fluid outer gap (8.4vw)
   and the 30vw text column left the RU menu columns 59px short, which
   pushed the row past the container. Tighten both below 1300px. */
@media screen and (min-width: 992px) and (max-width: 1300px) {
  #main-footer .footer-content {
    gap: 0 clamp(32px, 4vw, 100px);
  }
  #main-footer .footer-content__text {
    width: clamp(300px, 26vw, 360px);
  }
  #main-footer .footer-menu-holder {
    gap: 0 clamp(16px, 2vw, 40px);
  }
}

/* ------------------------------------------------------------------ */
/* PDP gallery arrows                                                   */
/* The legacy rule parks .swiper-nav at the bottom-left of the gallery   */
/* as a 122px-wide pair — that predates the redesign, where the 68px     */
/* thumbnail rail is as tall as the gallery, so the arrows sat on top of */
/* the last thumbnail and spilled over the main image. Split them to the */
/* ends of the rail instead, and only inset the strip when they are      */
/* actually in use (Swiper locks them away when everything fits).        */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .single-product-page__main .product-images .swiper-nav {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 68px;
    height: auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
    z-index: 3;
  }
  .single-product-page__main .product-images .swiper-nav .swiper-button-prev,
  .single-product-page__main .product-images .swiper-nav .swiper-button-next {
    width: 68px;
    flex-basis: auto;
    height: 24px;
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Add-to-cart hovers that escaped the brand derivation                 */
/* style.css darkens these two with a Sass-computed rgb() literal        */
/* (rgb(143.04, 5.96, 8.195)), which the colour pipeline cannot match,   */
/* so they flashed the old red on hover. Point them at the same darker   */
/* brand shade every other primary button uses.                          */
/* ------------------------------------------------------------------ */
.modal#cartModal .modal-dialog .modal-body .products-swiper .product-item__details .add-to-cart-loop,
.products-grid__item .add-to-cart-loop {
  background-color: #939c81;
}
.modal#cartModal .modal-dialog .modal-body .products-swiper .product-item__details .add-to-cart-loop:hover,
.products-grid__item .add-to-cart-loop:hover {
  background-color: #475836;
}

/* ------------------------------------------------------------------ */
/* Add-on category tabs: sideways only                                  */
/* The row already scrolled horizontally, but setting overflow-x alone  */
/* leaves the other axis scrollable, and the 1px active underline made  */
/* the strip 1px taller than its box — so a wheel gesture nudged it     */
/* vertically instead of moving along the categories. The last tab also */
/* sat under the 100px white fade with nothing to scroll into.          */
/* ------------------------------------------------------------------ */
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder .nav-tabs {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-right: 44px;
  scroll-padding-right: 44px;
}
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder::after {
  width: 44px;
}

/* Drag the category strip: the pointer only turns into a grabbing hand once a
   drag actually starts, so the tabs still read as clickable at rest. Text
   selection would otherwise fight the drag. */
.single-product-page .summary .single-product-page__tabs .nav-tabs.is-dragging,
.single-product-page .summary .single-product-page__tabs .nav-tabs.is-dragging .nav-link {
  cursor: grabbing;
  user-select: none;
}


/* ------------------------------------------------------------------ */
/* Quantity steppers: one style everywhere                              */
/* Three product types render three different markups — the redesign    */
/* .krokus-qty-group (52px cells), the plugin's .wdm-pts-quantity (48px */
/* box with a 2px dark border) and .wdm-pts-custom-quantity (the        */
/* free-price field). Give the last two the design's cells so every     */
/* product page shows the same control.                                 */
/* ------------------------------------------------------------------ */
.single-product-page .summary .quantity.wdm-pts-quantity,
.single-product-page .summary .quantity.wdm-pts-custom-quantity {
  display: flex;
  align-items: stretch;
  /* the row would otherwise stretch the control across the free space */
  flex: 0 0 auto;
  width: auto;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.single-product-page .summary .quantity.wdm-pts-quantity .minus,
.single-product-page .summary .quantity.wdm-pts-quantity .plus,
.single-product-page .summary .quantity.wdm-pts-custom-quantity .minus,
.single-product-page .summary .quantity.wdm-pts-custom-quantity .plus {
  width: 52px;
  min-width: 52px;
  height: 52px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #D1D1D1;
  border-radius: 0;
  background: #fff;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #1E2934;
  cursor: pointer;
}
.single-product-page .summary .quantity.wdm-pts-quantity .minus,
.single-product-page .summary .quantity.wdm-pts-custom-quantity .minus {
  border-right: 0;
  border-radius: 4px 0 0 4px;
}
.single-product-page .summary .quantity.wdm-pts-quantity .plus,
.single-product-page .summary .quantity.wdm-pts-custom-quantity .plus {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.single-product-page .summary .quantity.wdm-pts-quantity .qty,
.single-product-page .summary .quantity.wdm-pts-custom-quantity .wdm-pts-custom-input-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 2px;
  flex: 0 0 auto;
  width: 64px;
  min-width: 64px;
  height: 52px;
  padding: 0 8px;
  border: 1px solid #D1D1D1;
  border-radius: 0;
  background: #fff;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #1E2934;
}
.single-product-page .summary .quantity.wdm-pts-custom-quantity .wdm-pts-custom-input-wrap input {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
}

/* the free-price cell holds a value plus the € sign, so it gets a little more */
.single-product-page .summary .quantity.wdm-pts-custom-quantity .wdm-pts-custom-input-wrap {
  width: 88px;
}
@media screen and (max-width: 768px) {
  /* mobile stepper spans the column, like the redesign one already does */
  .single-product-page .summary .quantity.wdm-pts-quantity,
  .single-product-page .summary .quantity.wdm-pts-custom-quantity {
    flex: 1 1 auto;
    width: 100%;
  }
  .single-product-page .summary .quantity.wdm-pts-quantity .qty,
  .single-product-page .summary .quantity.wdm-pts-custom-quantity .wdm-pts-custom-input-wrap {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Trustindex "write a review" button: hover                            */
/* Only the base state was overridden, so on hover the widget's own      */
/* preset took back over — and outside .container (the PDP block sits    */
/* in .product-rating-widget) that meant an empty grey pill. Pin the     */
/* hover in every selector chain the preset uses: sage → header green,   */
/* white label, like the rest of the store's buttons.                    */
/* ------------------------------------------------------------------ */
.ti-widget a[class*="write"]:hover,
.ti-widget a[class*="write"]:focus,
.ti-widget [class*="write-btn"] a:hover,
.ti-widget [class*="write-btn"] a:focus,
.ti-widget a.ti-header-write-btn:hover,
.ti-widget a.ti-header-write-btn:focus,
.ti-widget .ti-header-write-btn-container a:hover,
.ti-widget .ti-header-write-btn-container a:focus,
.product-rating-widget a[class*="write"]:hover,
.product-rating-widget a[class*="write"]:focus,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn:hover,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn:focus,
html body .container .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn:hover,
html body .product-rating-widget .ti-widget[data-layout-id][data-set-id] .ti-widget-header .ti-header-content .ti-header-write-btn-container a.ti-header-write-btn:hover {
  background-color: #475836 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.ti-widget a[class*="write"]:hover *,
.ti-widget [class*="write-btn"] a:hover *,
.ti-widget .ti-header-write-btn-container a:hover *,
.product-rating-widget a[class*="write"]:hover * {
  color: #fff !important;
  fill: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Product filters sidebar: tighter rows                                */
/* The plugin pads each filter title 20px top and bottom and adds a     */
/* 24px gap under every section, so a column of collapsed filters was   */
/* ~89px per row. Bring the closed row down to ~50px, keep the breathing*/
/* room inside an open section, and put the divider on the design grey. */
/* ------------------------------------------------------------------ */
.wpc-filters-main-wrap .wpc-filters-section {
  margin-bottom: 0;
}
.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-collapsible {
  border-top-color: #D1D1D1;
}
.wpc-filters-main-wrap .wpc-filters-section .widget-title.wpc-filter-title {
  padding-top: 14px;
  padding-bottom: 14px;
}
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-content {
  padding-bottom: 16px;
}


/* ------------------------------------------------------------------ */
/* PDP gallery: 8px between the thumbnail rail and the main image       */
/* (Figma 501:8063 — thumbs 0-68, main image starts at x=76). The theme */
/* adds a 10px flex gap on .product-images on top of the 8px margin the */
/* redesign put on the main slider, so the column read 18px and ran 10px*/
/* past the 588px the design gives it.                                  */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .single-product-page .product-images {
    gap: 0 8px;
  }
  .single-product-page .product-images .swiper-container-main {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* One content offset under the header                                  */
/* The theme's base is 100px, and the redesign brought the PDP, blog,   */
/* account and wishlist down to 50px one page at a time — archives,     */
/* contacts and the info pages were left on the old value, so they      */
/* opened with twice the empty band. Make 50px the desktop default.     */
/* Home/cart/checkout keep their own (0) and the PDP already nets 50    */
/* through its negative margin, so they stay out of it.                 */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  body:not(.home):not(.page-template-page-home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) main.site-main {
    padding-top: 25px;
  }
  /* the product page pads 100 and pulls back 50; take it to the same 25 */
  body.single-product main.site-main,
  main.site-main.single-product-page {
    padding-top: 25px;
    margin-top: 0;
  }
}

/* The gallery slide draws a 51px "expand" badge in its bottom-left corner
   (a::before with a background SVG). The design has no such badge — clicking
   the photo still opens the lightbox. */
.single-product-page .product-images .swiper-container-main .swiper-slide a::before {
  content: none;
}

/* ------------------------------------------------------------------ */
/* Sticky header: hide the top bar, keep the logo row whole             */
/* style.css slides the scrolled header up by 46px — a leftover from    */
/* the old two-row header. The redesigned top bar is 32px, so 46px also */
/* ate 14px of the 72px logo row and left its contents sitting low in   */
/* the visible band (6px above the logo, 21px below).                   */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  .site-header.on-scroll {
    top: -32px;
  }
}

/* The 404 template pins its own heading font (legacy Poppins, now Jost via the
   body token) — it is a page title, so it belongs on the serif. */
.error404 .page-not-found__text .h1,
.error404 .page-not-found__text h1,
.error404 .page-not-found__text h2 {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
}

/* ------------------------------------------------------------------ */
/* Client typography pass (ClickUp 86bbz1791)                           */
/* - headings and titles drop to 1px tracking (were 2-2.8px, hero 3-6)  */
/* - product titles go slightly negative                                */
/* - product-card prices move to Jost at a lighter weight               */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4,
.page-heading,
.block-heading,
.section-heading,
.entry-title,
.single-product-page h1.entry-title,
.single-product-page .summary h1.entry-title,
.single-product-page .summary .entry-title-holder h1.entry-title,
.promises__item-heading,
.nav-tabs-holder__heading,
.single-product-page .summary .single-product-page__tabs .nav-tabs-holder h2.nav-tabs-holder__heading,
.customers-gallery .section-heading,
.ig-output .section-heading,
.ig-output .block-heading,
body.page-template-page-home .featured-products .block-heading,
body.page-template-page-home .hero-swiper .swiper-slide__text-heading,
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading,
.promises .block-heading,
.related-products .block-heading,
#main-footer .widget-title {
  letter-spacing: 1px;
}

.products-grid__item-title,
.products-grid__item-title a,
.single-product-page .product-item__details-title,
.single-product-page .product-item__details-title a {
  letter-spacing: 0.4px;
}

.products-grid__item-price,
.products-grid__item-price *,
.single-product-page .product-item__details-price {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Gallery rebuilt per client feedback (ClickUp 86bbz1791)              */
/* Square product images, and the thumbnail strip back under the main   */
/* photo the way the old design had it (it was a 68px rail on the left). */
/* Applies from 769 up: tablets were left on the legacy vertical rail    */
/* and came out broken (ClickUp 86bc2z17y).                              */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .single-product-page .product-images {
    flex-direction: column;
    gap: 8px 0;
    height: auto !important;
    max-height: none;
  }
  /* main image first, strip under it */
  .single-product-page .product-images .swiper-container-main {
    order: 1;
    width: 100% !important;
    flex: 0 0 auto;
    height: auto !important;
    max-height: none;
    margin-left: 0;
  }
  .single-product-page .product-images .swiper-container-thumbs {
    order: 2;
    width: 100% !important;
    flex: 0 0 auto;
    height: 88px !important;
    max-height: 88px;
    margin: 0;
  }
  /* square photos */
  .single-product-page .product-images .swiper-container-main .swiper-slide a,
  .single-product-page__main .product-images .swiper-container-main .swiper-slide a {
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-wrapper {
    height: 88px !important;
    flex-direction: row;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide {
    width: 88px !important;
    height: 88px !important;
    max-height: 88px;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-slide img,
  .single-product-page__main .product-images .swiper-thumbs img,
  .single-product-page__main .product-images [class*="thumb"] img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  /* the rail's up/down arrows belong to the old vertical strip */
  .single-product-page__main .product-images .swiper-nav {
    display: none;
  }
  /* caption follows the strip instead of hanging off the gallery */
  .single-product-page .product-images {
    margin-bottom: 0;
  }
  .single-product-page .product-images__caption {
    position: static;
    order: 3;
    width: 100%;
    margin: 8px 0 0;
    text-align: left;
  }
}

/* Product cards: square images (were 3:4) */
.products-grid__item-image,
.archive .products-grid__item-image,
.featured-products .products-grid__item-image,
.products-grid .products-grid__item-image {
  aspect-ratio: 1 / 1;
}

/* The thumbnail strip is one scrolling row — Swiper drives it, so it must
   clip rather than wrap when a product has more photos than fit. */
@media screen and (min-width: 769px) {
  .single-product-page .product-images .swiper-container-thumbs {
    overflow: hidden;
  }
  .single-product-page .product-images .swiper-container-thumbs .swiper-wrapper {
    flex-wrap: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* Client feedback (ClickUp 86bbz1791): the whole header is the brand  */
/* green, with white type and white icons. The green is written as the */
/* red-family token #475835 so the Store Design customizer keeps       */
/* deriving it together with the top bar it already painted.           */
/* ------------------------------------------------------------------ */
.site-header,
.site-header .main-bar {
  background-color: #475835;
  border-bottom: 0;
}

/* Type on the green ground. Only the bar's own icon links go white — the
   search panel drops out of .buttons onto a white sheet, so anything
   inside it keeps the normal dark text. */
.site-header .main-bar,
.site-header .main-bar .buttons > a,
.site-header .buttons__cart-price,
.site-header .top-bar__phone span,
.site-header .top-bar__hours {
  color: #FDFBF7;
}
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li > a,
  .site-header #site-navigation #primary-menu-list > li > a img + span {
    color: #FDFBF7;
  }
  .site-header #site-navigation #primary-menu-list > li > a:hover,
  .site-header #site-navigation #primary-menu-list > li.current-menu-item > a,
  .site-header #site-navigation #primary-menu-list > li.current-menu-ancestor > a {
    color: #FFFFFF;
  }
}
.site-header .buttons__cart-price {
  color: #FDFBF7;
}

/* Every SVG in the header bar is white. Scoped to the bar's own icons so
   the mobile drawer (white sheet, dark icons) and the search panel that
   drops out of the bar (white sheet, its own inline SVG) are untouched. */
.site-header .main-bar .site-logo img,
.site-header .main-bar .buttons > a img,
.site-header .main-bar .buttons .wd-header-search__toggle img {
  filter: brightness(0) invert(1);
}
/* The Halloween nav icon carried a hue-rotate to fake the accent — on the
   green ground it is simply white like the rest. */
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li:not(.mobile-icon-item) > a > img {
    filter: brightness(0) invert(1);
  }
}
/* Hamburger bars */
.site-header .menu-toggle .icon,
.site-header .menu-toggle .icon::before,
.site-header .menu-toggle .icon::after {
  background: #FDFBF7;
}

/* Counters: sage-on-green has no contrast — flip to a white pill with the
   brand green inside it. */
.site-header .buttons__cart-badge,
.site-header .buttons__wishlist-badge,
.site-header .wishlist_products_counter_number,
.site-header .wd-header-wishlist .wishlist_products_counter_number {
  background-color: #FDFBF7 !important;
  color: #475835 !important;
}

/* The top bar keeps its divider legible against the same green */
.site-header .top-bar__divider {
  background: rgba(253, 251, 247, 0.5);
}

/* ------------------------------------------------------------------ */
/* Sale badge (ClickUp 86bbz1791): the discount chip is the solid dark  */
/* brand green with white type, not the frosted glass the other badges  */
/* use. '#3d4b30' is the red-family token that derives to the darker    */
/* Haki #3D4B30, so the customizer keeps it in step with the header.    */
/* ------------------------------------------------------------------ */
/* Every badge keeps the chip's shape and type; only the frosted fill above
   is limited to badges without a solid treatment. */
.badges .badge,
.products-grid__item .badges .badge,
.single-product-page .badges .badge,
.single-product-page .product-images .badges .badge,
.related-products .badges .badge,
.archive .badges .badge,
.product-item .badges .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif!important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.badges .badge--sale,
.products-grid__item .badges .badge--sale,
.single-product-page .badges .badge--sale,
.single-product-page .product-images .badges .badge--sale,
.related-products .badges .badge--sale,
.archive .badges .badge--sale,
.product-item .badges .badge--sale,
.badges .badge--new,
.products-grid__item .badges .badge--new,
.single-product-page .badges .badge--new,
.single-product-page .product-images .badges .badge--new,
.related-products .badges .badge--new,
.archive .badges .badge--new,
.product-item .badges .badge--new {
  /* White chip with a touch of blur behind it, sage rule, green type
     (client feedback). The white is slightly translucent — otherwise an
     opaque fill leaves the backdrop blur with nothing to do. '#939c81'
     derives to the sage #939C81 and '#3d4b30' to Haki #3D4B30. */
  background: rgba(255, 255, 255, 0.78) !important;
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border: 0 !important;
  color: #3d4b30 !important;
  text-shadow: none;
}

/* The sale chip is a listing cue — the product page already shows the
   struck-out price, so it does not repeat it there (client feedback). */
.single-product-page .krokus-single-product-badges .badge--sale {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Sale pricing (ClickUp 86bbz1791): the old price is struck through,   */
/* a step lighter than the live price and ~2px smaller.                 */
/* ------------------------------------------------------------------ */
.products-grid__item-price del,
.product-item .price del,
.single-product-page .summary .price del,
.single-product-page .price del,
.related-products .price del,
.archive .price del,
.woocommerce-Price-amount del,
.price del {
  font-size: 0.875em;
  color: rgba(37, 31, 31, 0.55);
  text-decoration: line-through;
  opacity: 1;
}
.products-grid__item-price ins,
.product-item .price ins,
.single-product-page .summary .price ins,
.single-product-page .price ins,
.related-products .price ins,
.archive .price ins,
.price ins {
  background: transparent;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Homepage featured products (ClickUp 86bbz1791): the card rows run    */
/* almost the full page width instead of sitting in the 1230px column.  */
/* The band keeps a 50px gutter and tops out at 1720px so the cards     */
/* hold roughly their current size on a 1920 screen rather than         */
/* ballooning; the column count steps up with it so 12 products still   */
/* fill whole rows — no orphan or half card.                            */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  body.page-template-page-home main .container.featured-products-band {
    max-width: 1720px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }
}
/* Three cards per row at every desktop width, with half the previous
   gutters now that the band is wide. */
@media screen and (min-width: 769px) {
  body.page-template-page-home .featured-products .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 6px;
  }
}

/* ------------------------------------------------------------------ */
/* Green header, open mega item: mega-menu.css darkened the nav link    */
/* to #1E2934 and drew its 3px indicator bar in the accent (which now   */
/* derives to the same green as the bar it sits on). Both go white, and */
/* the text underline is dropped on these items so the bar isn't        */
/* doubled up — plain nav items keep the underline as their only cue.   */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li.menu-item-has-children.mega-open > a,
  .site-header #site-navigation #primary-menu-list > li.menu-item-has-children > a:hover {
    color: #FFFFFF;
    text-decoration: none;
  }
  .site-header #site-navigation #primary-menu-list > li.menu-item-has-children > a::before {
    background: #FDFBF7;
  }
}

/* ------------------------------------------------------------------ */
/* Header search overlay (ClickUp 86bbz1791): the field ran the full    */
/* window width — pull it back to roughly the nav's own width and       */
/* centre it, then lay the suggestions out as a product grid (3 up on   */
/* desktop, 2 on tablet, 1 on phone) instead of one tall list.          */
/* ------------------------------------------------------------------ */
.site-header .wd-header-search__form-holder .wdm-ajax-search {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.site-header .wd-header-search__form-holder .wdm-search-item .title,
.site-header .wd-header-search__form-holder .wdm-all-results,
.site-header .wd-header-search__form-holder .no-results {
  color: #251F1F;
}
@media screen and (min-width: 768px) {
  .site-header .wd-header-search__form-holder .wdm-search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 4px 8px;
    max-height: 420px;
    padding-bottom: 0;
  }
  .site-header .wd-header-search__form-holder .wdm-search-item {
    padding: 10px;
  }
  /* The "see all results" bar and the empty state stay full width */
  .site-header .wd-header-search__form-holder .wdm-all-results,
  .site-header .wd-header-search__form-holder .no-results {
    grid-column: 1 / -1;
  }
}
@media screen and (min-width: 992px) {
  .site-header .wd-header-search__form-holder .wdm-search-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Green header, active nav item: header-customization.css dims the     */
/* current item to rgba(37,31,31,.8), which reads as black on the green */
/* bar. On desktop it stays white — a plain item keeps the underline,   */
/* a mega item shows its white indicator bar (the same cue it gets on   */
/* hover). The mobile drawer is a white sheet, so it is left alone.     */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li.menu-current-item > a {
    color: #FFFFFF;
  }
}

/* ------------------------------------------------------------------ */
/* One indicator for the whole nav: mega-menu.css only drew its 3px    */
/* bar under items that own a dropdown, so plain items fell back to a  */
/* text underline and the two cues sat at different heights and        */
/* weights. Every top-level item now uses the same bar, on hover, when */
/* its panel is open, and on the current page.                          */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li > a {
    position: relative;
    text-decoration: none;
  }
  .site-header #site-navigation #primary-menu-list > li:not(.menu-item-has-children) > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #FDFBF7;
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .site-header #site-navigation #primary-menu-list > li > a:hover::before,
  .site-header #site-navigation #primary-menu-list > li.menu-current-item > a::before,
  .site-header #site-navigation #primary-menu-list > li.current-menu-item > a::before,
  .site-header #site-navigation #primary-menu-list > li.current-menu-ancestor > a::before {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage category collage (ClickUp 86bbz1791) — a full-bleed mosaic  */
/* of category tiles under the hero, edge to edge, 4px seams. Each      */
/* tile picks its own width in the admin panel, laid out on a 6-column  */
/* grid so 2/3+1/3, 1/2+1/2 and 1/3+1/3+1/3 rows all come out flush.    */
/* A fixed row height keeps every tile in a row the same height however */
/* the client's photos are cropped.                                     */
/* ------------------------------------------------------------------ */
.category-collage {
  width: 100%;
  padding-top: 20px;
}
/* Heading sits in the same band and type as "Populārākie" below it */
.category-collage__band {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding-inline: 50px;
}
.category-collage__heading {
  margin: 0 0 24px;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #2A2B26;
}
.category-collage__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Row height is the width of a square 1/3 tile (two columns plus the gutter
     between them), so rows scale with the window and every tile in a row is
     exactly the same height. A fixed height let the proportions drift. */
  grid-auto-rows: calc((100vw - 30px) / 3 + 6px);
  /* Equal gutters both ways, matching the column gap of the product grids */
  gap: 6px;
  background: #FFFFFF;
}
.category-collage__tile--third     { grid-column: span 2; }
.category-collage__tile--half      { grid-column: span 3; }
.category-collage__tile--twothirds { grid-column: span 4; }
.category-collage__tile--full      { grid-column: span 6; }

.category-collage__tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  border-radius: 4px;
  color: #FDFBF7;
  text-decoration: none;
  background: #E9E9E4;
}
.category-collage__media,
.category-collage__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.category-collage__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a.category-collage__tile .category-collage__media img {
  transition: transform .5s ease;
}
a.category-collage__tile:hover .category-collage__media img {
  transform: scale(1.03);
}
.category-collage__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 96px 24px 40px;
  text-align: center;
  /* Dark brand green, the same one used across the page. Written as the
     rgb() of the '#3d4b30' token so the Store Design pipeline derives it
     alongside the header. The client's photos vary — some are bright, some
     near-white — so keep the scrim deep enough to carry the label. */
  background: linear-gradient(to top, rgba(61, 75, 48, .82) 0%, rgba(61, 75, 48, .5) 45%, rgba(61, 75, 48, 0) 100%);
  text-shadow: 0 1px 3px rgba(61, 75, 48, .45);
  pointer-events: none;
}
.category-collage__label {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FDFBF7;
}
.category-collage__sublabel {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(253, 251, 247, .85);
}
@media screen and (max-width: 1199px) {
  .category-collage__label {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .category-collage__caption {
    padding: 72px 20px 32px;
  }
}
@media screen and (max-width: 1120px) {
  .category-collage__band {
    padding-inline: 30px;
  }
}
/* Phone: every tile runs the full width of the screen, stacked — and keeps
   the proportions it has on desktop. */
@media screen and (max-width: 768px) {
  .category-collage {
    padding-top: 16px;
  }
  .category-collage__band {
    padding-inline: 16px;
  }
  .category-collage__heading {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 1px;
  }
  .category-collage__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 8px;
  }
  /* Each tile is its own row here, so it can hold the proportions it has on
     desktop directly. */
  .category-collage__tile--third     { aspect-ratio: 1 / 1; }
  .category-collage__tile--half      { aspect-ratio: 3 / 2; }
  .category-collage__tile--twothirds { aspect-ratio: 2 / 1; }
  .category-collage__tile--full      { aspect-ratio: 3 / 1; }
  .category-collage__tile--third,
  .category-collage__tile--half,
  .category-collage__tile--twothirds,
  .category-collage__tile--full {
    grid-column: span 1;
  }
  .category-collage__caption {
    padding: 64px 16px 24px;
  }
  .category-collage__label {
    font-size: 18px;
    letter-spacing: 2px;
  }
  .category-collage__sublabel {
    font-size: 12px;
    letter-spacing: 1.4px;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage "shop by color" (ClickUp 86bbz1791) — the colour names run   */
/* as a plain text strip in the site's own tab idiom (the PDP add-on     */
/* tabs), and the products are one endless row that bleeds off the       */
/* right edge of the screen. Heading and strip share the featured-band   */
/* width; the row starts at the same left edge and keeps going.          */
/* ------------------------------------------------------------------ */
.shop-by-color {
  padding-block: 40px 80px;
  overflow: hidden;
}
.shop-by-color__band {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding-inline: 50px;
}
.shop-by-color__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
}
.shop-by-color__heading {
  margin: 0;
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: #2A2B26;
}
/* Arrows: 40px with the same 4px corner as the images; on hover the button
   fills with the brand green and the chevron flips to white. The chevron is
   a mask rather than a background image so its colour is ours to set. */
.shop-by-color__nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.shop-by-color__nav .swiper-button-prev,
.shop-by-color__nav .swiper-button-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #2A2B26;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.shop-by-color__nav .swiper-button-prev::after,
.shop-by-color__nav .swiper-button-next::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background-color: #2A2B26;
  transition: background-color .3s ease-in-out;
}
.shop-by-color__nav .swiper-button-prev::after {
  -webkit-mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
}
.shop-by-color__nav .swiper-button-next::after {
  -webkit-mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
}
.shop-by-color__nav .swiper-button-prev:hover,
.shop-by-color__nav .swiper-button-next:hover {
  background-color: #475835; /* derives to the header green */
  border-color: #475835;
}
.shop-by-color__nav .swiper-button-prev:hover::after,
.shop-by-color__nav .swiper-button-next:hover::after {
  background-color: #FFFFFF;
}

/* Colour names: text tabs, active one underlined, the rest at 50% */
.shop-by-color__filters {
  display: flex;
  gap: 0 24px;
  margin: 0 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shop-by-color__filters::-webkit-scrollbar {
  display: none;
}
.shop-by-color__filter {
  flex: 0 0 auto;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  opacity: .5;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2A2B26;
  transition: opacity .2s ease, border-color .2s ease;
}
.shop-by-color__filter:hover {
  opacity: .8;
}
.shop-by-color__filter.is-active {
  opacity: 1;
  border-bottom-color: #2A2B26;
}

/* The row: starts on the band's left edge, runs off the right of the screen */
.shop-by-color__track {
  margin-left: max(50px, calc((100% - 1720px) / 2));
  transition: opacity .2s ease;
}
.shop-by-color__track[aria-busy="true"] {
  opacity: .45;
  pointer-events: none;
}
.shop-by-color__swiper {
  overflow: hidden;
}
.shop-by-color__swiper .swiper-slide {
  height: auto;
}
.shop-by-color__swiper .products-grid__item {
  width: 100%;
}
.shop-by-color__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
@media screen and (max-width: 1120px) {
  .shop-by-color__band {
    padding-inline: 30px;
  }
  .shop-by-color__track {
    margin-left: 30px;
  }
}
@media screen and (max-width: 768px) {
  .shop-by-color {
    padding-block: 32px 40px;
  }
  .shop-by-color__band {
    padding-inline: 16px;
  }
  .shop-by-color__track {
    margin-left: 16px;
  }
  .shop-by-color__heading {
    font-size: 22px;
  }
  .shop-by-color__nav {
    display: none;
  }
  .shop-by-color__filters {
    gap: 0 16px;
    margin-bottom: 20px;
  }
  .shop-by-color__filter {
    font-size: 13px;
    letter-spacing: .8px;
  }
  .shop-by-color__more {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------------ */
/* PDP gallery: prev/next on the main photo, desktop and mobile        */
/* (client feedback). The legacy .swiper-nav drives the thumbnail      */
/* strip, so the main image gets a pair of its own, styled like the    */
/* other sliders: 4px corners, green fill and white chevron on hover.  */
/* ------------------------------------------------------------------ */
.single-product-page .product-images .swiper-container-main {
  position: relative;
}
.product-images__nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 16px;
  pointer-events: none;
  z-index: 4;
}
.product-images__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* Quiet over the photo: frosted glass, no outline. Only the chevron
     changes on hover — it turns white. */
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .2s ease;
}
.product-images__nav-btn::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background-color: rgba(42, 43, 38, 0.65);
  transition: background-color .3s ease-in-out;
}
.product-images__nav-prev::after {
  -webkit-mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
}
.product-images__nav-next::after {
  -webkit-mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
}
.product-images__nav-btn:hover::after {
  background-color: #FFFFFF;
}
/* Swiper hides these itself when a product has a single photo */
.product-images__nav-btn.swiper-button-disabled,
.product-images__nav-btn.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .product-images__nav {
    padding: 0 12px;
  }
  .product-images__nav-btn {
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------------ */
/* Add-to-cart popup (client feedback): it sat high with uneven air      */
/* above and below. Flex centring fought this theme's own modal rules,   */
/* so the panel is placed dead centre with a transform — that holds      */
/* whatever height the product swiper inside settles at. The panel caps  */
/* at the window height and scrolls internally rather than overflowing.  */
/* And while it is open the page behind it must not move: Bootstrap      */
/* locks <body>, but this theme leaves <html> scrollable, so the         */
/* background slid under the popup on desktop wheel scroll.              */
/* ------------------------------------------------------------------ */
.modal#cartModal .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  /* The theme pads this box; the padding was what held the panel low. */
  margin: 0;
  padding: 0;
  width: 750px;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
}
.modal#cartModal .modal-dialog .modal-content {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
@media screen and (max-width: 575px) {
  .modal#cartModal .modal-dialog {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
  }
  .modal#cartModal .modal-dialog .modal-content {
    max-height: calc(100vh - 32px);
  }
}
html:has(body.modal-open) {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* One button colour system, storewide (client feedback, Figma 398:18558 */
/* / 501:8111): every solid button is the sage by default and darkens to  */
/* the header green on hover — the treatment the PDP add-to-cart already  */
/* had. Written with the brand tokens so the customizer still drives them:*/
/* '#939c81' derives to sage #939C81, '#475836' to Haki #475836.          */
/* Secondary/outline buttons and the withdrawal links keep their own look.*/
/* ------------------------------------------------------------------ */
html body .btn.btn-primary,
html body .woocommerce .button:not(.btn-secondary):not(.btn-outline-primary),
html body .woocommerce button.button:not(.btn-secondary),
html body .woocommerce a.button:not(.btn-secondary),
html body .checkout-button,
html body #place_order,
html body button[name="update_cart"],
html body .wpc-filter-range-custom .wpc-filter-range-apply-button,
html body .wpc-filter-range-apply-button,
html body .single_add_to_cart_button,
html body .add-to-cart-loop {
  background-color: #939c81;
  border-color: #939c81;
  color: #fff;
}
html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus,
html body .woocommerce .button:not(.btn-secondary):not(.btn-outline-primary):hover,
html body .woocommerce button.button:not(.btn-secondary):hover,
html body .woocommerce a.button:not(.btn-secondary):hover,
html body .checkout-button:hover,
html body #place_order:hover,
html body button[name="update_cart"]:hover,
html body .wpc-filter-range-custom .wpc-filter-range-apply-button:hover,
html body .wpc-filter-range-apply-button:hover,
html body .single_add_to_cart_button:hover,
html body .add-to-cart-loop:hover {
  background-color: #475836;
  border-color: #475836;
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Cart postcard picker: every card the same height so the strip — and  */
/* the page under it — never moves as you page through (client report). */
/* ------------------------------------------------------------------ */
.cards-swiper .swiper-wrapper {
  align-items: stretch;
}
.cards-swiper .swiper-slide {
  height: auto;
}
.cards-swiper .swiper-slide .card-item,
.cards-swiper .swiper-slide .card-item label {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cards-swiper .card-item__info {
  margin-top: auto;
}
/* Two lines max, so one long name cannot set the height of the whole row */
.cards-swiper .card-item__info-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Sale prices (ClickUp 86bc2zbdj): the old price is struck through, a   */
/* step lighter and 2px smaller. The earlier rules styled <del> itself,  */
/* but the .woocommerce-Price-amount nested inside carries its own size  */
/* and picks up the accent colour, so it came out green and *larger*     */
/* than the current price. Pin the whole subtree to the del.             */
/* ------------------------------------------------------------------ */
.price del,
.products-grid__item-price del,
.product-item__price del,
.single-product-page .summary > .price del,
.single-product-page .summary .price:not(.variations__item-price) del,
.single-product-page .product-item__details-price del {
  /* !important because the accent-colour rules for the amount span carry a
     .archive / .single-product-page prefix and would otherwise re-green the
     struck price on listing cards. */
  font-size: calc(1em - 2px) !important;
  color: rgba(37, 31, 31, 0.55) !important;
  text-decoration: line-through;
  opacity: 1;
}
.price del *,
.products-grid__item-price del *,
.product-item__price del *,
.single-product-page .summary > .price del *,
.single-product-page .summary .price:not(.variations__item-price) del *,
.single-product-page .product-item__details-price del *,
/* named explicitly so these beat the accent-colour rule, which carries one
   more class than a universal selector */
.price del .woocommerce-Price-amount,
.products-grid__item-price del .woocommerce-Price-amount,
.product-item__price del .woocommerce-Price-amount,
.single-product-page .summary > .price del .woocommerce-Price-amount,
.single-product-page .summary .price:not(.variations__item-price) del .woocommerce-Price-amount,
.single-product-page .product-item__details-price del .woocommerce-Price-amount {
  font-size: inherit !important;
  color: inherit !important;
}

/* ------------------------------------------------------------------ */
/* Header nav chevron + active underline (ClickUp 86bc2zb5t)            */
/* The caret was a dark background SVG left over from the white header; */
/* mask it so we control the colour. The 3px active bar sat at the very */
/* bottom of the bar, flush against the white mega panel — lift it so   */
/* it reads against the green.                                          */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) {
  .site-header #site-navigation #primary-menu-list > li.menu-item-has-children > a::after {
    background: #FDFBF7;
    -webkit-mask: url('../images/icons/header-dropdown-arrow.svg') right center / 12px 7px no-repeat;
    mask: url('../images/icons/header-dropdown-arrow.svg') right center / 12px 7px no-repeat;
  }
  .site-header #site-navigation #primary-menu-list > li > a::before,
  .site-header #site-navigation #primary-menu-list > li.menu-item-has-children > a::before {
    bottom: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Gallery note (ClickUp 86bc2z5hx): it was absolutely positioned and   */
/* pinned to one line, so a long note ran across the page and over the  */
/* next section, while the space it was taken out of stayed reserved    */
/* and showed as a gap on products with no note. Put it back in flow.   */
/* ------------------------------------------------------------------ */
.single-product-page .product-images__caption {
  position: static;
  order: 3;
  width: 100%;
  margin: 12px 0 0;
  white-space: normal;
  text-align: left;
}

/* ------------------------------------------------------------------ */
/* PDP two-column layout between 769 and 1299 (ClickUp 86bc2z17y)       */
/* The row is a flex pair, but both children default to min-width:auto, */
/* so the summary could not shrink below the width of its add-to-cart   */
/* row and the column ran past the viewport — the add-to-cart button    */
/* and the add-on tab strip were cut off on tablets.                    */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .single-product-page__main .product-images,
  .single-product-page__main .summary {
    min-width: 0;
  }
  .single-product-page__main .product-images {
    width: calc(50% - 15px) !important;
    max-width: calc(50% - 15px);
    flex: 0 1 auto;
  }
  .single-product-page__main .summary {
    flex: 1 1 auto;
    max-width: none;
  }
  /* the add-to-cart row wraps instead of forcing the column wide */
  .single-product-page .summary .woocommerce-variation-add-to-cart,
  .single-product-page .summary form.cart {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------ */
/* Hero card: a touch less tracking across the block (client feedback)  */
/* ------------------------------------------------------------------ */
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading,
body.page-template-page-home .hero-swiper .swiper-slide__text-heading {
  letter-spacing: 0.5px;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-subheading,
body.page-template-page-home .hero-swiper .swiper-slide__text-subheading {
  letter-spacing: 0.2px;
}
body.page-template-page-home .hero-swiper .hero-card .btn,
body.page-template-page-home .hero-swiper .btn.btn-primary {
  letter-spacing: 1px;
}
/* The cart total is nav-weight now, so drop its negative tracking too */
.site-header .buttons__cart-price {
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Hero card: the type filled the box exactly, so it read cramped.      */
/* Trim the sizes and the gaps between them — the card keeps its size    */
/* and proportions, the saved height becomes breathing room, centred     */
/* top and bottom (client feedback).                                     */
/* ------------------------------------------------------------------ */
body.page-template-page-home .hero-swiper .hero-card {
  /* The card is content-sized, so trimming the type would have shrunk the
     box. Hold it at the height it had and centre the content, so the
     saved height turns into even breathing room instead. */
  min-height: 320px;
  justify-content: center;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading {
  font-size: 34px;
  line-height: 1.1;
  margin-bottom: 14px;
}
body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-subheading {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 24px;
}
body.page-template-page-home .hero-swiper .hero-card .btn.btn-primary {
  height: 48px;
  padding: 14px 28px;
}
@media screen and (max-width: 768px) {
  /* Phone: keep the card close to the desktop's landscape proportions
     instead of the near-square box it had (client feedback). */
  body.page-template-page-home .hero-swiper .hero-card {
    min-height: 0;
  }
  body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-heading {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  body.page-template-page-home .hero-swiper .hero-card .swiper-slide__text-subheading {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 14px;
  }
  body.page-template-page-home .hero-swiper .hero-card .btn.btn-primary {
    height: 32px;
    padding: 6px 20px;
    font-size: 12px;
    /* hug the label instead of filling the card */
    width: auto;
    align-self: center;
  }
}

/* ------------------------------------------------------------------ */
/* Square corners storewide (client feedback): images, buttons, fields  */
/* and the cards that hold them lose their 2-8px radius. !important      */
/* because most of those radii are set by more specific rules in         */
/* style.css and the plugin stylesheets. Deliberate circles and pills —   */
/* the wishlist heart, counters, menu badges, language flags, the colour  */
/* filter chips and the swiper dots — keep their shape.                   */
/* ------------------------------------------------------------------ */
img,
picture,
a,
button,
input,
select,
textarea,
section,
article,
.products-grid__item,
.products-grid__item-image,
.product-item,
.product-item__image,
.category-collage__tile,
.promises__item,
.card-item,
.card-item__image,
.gallery-grid__item,
.post-item,
.swiper-slide,
.swiper-slide a,
.swiper-slide img,
.swiper-slide__text.hero-card,
.modal .modal-content,
.modal .modal-dialog,
.wdm-search-results,
.header-lang-bar__dropdown,
.badges .badge,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.checkout-button,
#place_order,
.cart-content-wrapper input,
.cart-content-wrapper button,
.woocommerce-checkout input,
.woocommerce-checkout button,
.woocommerce-account input,
.woocommerce-account button,
.badges .badge--sale,
.badges .badge--new,
.instagram-gallery-item__wrap,
.page-numbers,
span.page-numbers,
a.page-numbers,
.klaviyo-form input,
.klaviyo-form button,
[class*="klaviyo"] input,
[class*="klaviyo"] button {
  border-radius: 0 !important;
}
/* …but keep the round things round */
.buttons__cart-badge,
.buttons__wishlist-badge,
.wishlist_products_counter_number,
.tinvwl_add_to_wishlist_button,
.wishlist-icon button,
.wishlist-icon a,
.swiper-pagination-bullet,
.wdm-search-icon,
.avatar,
img.avatar {
  border-radius: 50% !important;
}
/* Radios are circles — the storewide squaring turned them into squares with
   a round dot inside. Checkboxes stay square. */
input[type="radio"],
input[type="radio"]::before,
input[type="radio"]::after,
.cart-content-wrapper input[type="radio"],
.woocommerce-checkout input[type="radio"],
.woocommerce-account input[type="radio"],
body.page-template-page-checkout input[type="radio"] {
  border-radius: 50% !important;
}

/* Language flags are rectangles, not discs (client feedback) */
.header-lang-bar__lang img,
.header-lang-bar__dropdown-item img,
.header-lang-bar__toggle-right img,
.header-lang-bar img {
  border-radius: 0 !important;
}
.menu-badge,
.badge--price,
.upsell-options__item-label .badge {
  border-radius: 999px !important;
}
/* The colour filter is a text tab with a 1px rule under it — a pill radius
   bent that rule into an arc. */
.shop-by-color__filter {
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Hero banner prev/next — the product gallery's treatment (client      */
/* feedback): frosted glass, no outline, chevron turns white on hover.  */
/* ------------------------------------------------------------------ */
.hero-swiper .swiper-holder {
  position: relative;
}
.hero-swiper__nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 24px;
  pointer-events: none;
  z-index: 4;
}
.hero-swiper__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .2s ease;
}
.hero-swiper__nav-btn::after {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background-color: rgba(42, 43, 38, 0.65);
  transition: background-color .3s ease-in-out;
}
.hero-swiper__nav-prev::after {
  -webkit-mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-left-arrow.svg') center / 8px 14px no-repeat;
}
.hero-swiper__nav-next::after {
  -webkit-mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
  mask: url('../images/icons/swiper-nav-right-arrow.svg') center / 8px 14px no-repeat;
}
.hero-swiper__nav-btn:hover::after {
  background-color: #FFFFFF;
}
.hero-swiper__nav-btn.swiper-button-disabled,
.hero-swiper__nav-btn.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .hero-swiper__nav {
    padding: 0 12px;
  }
  .hero-swiper__nav-btn {
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------------ */
/* Google reviews widget: no card borders, no rounding (client          */
/* feedback). Trustindex ships its own preset stylesheet, so these need  */
/* !important and the [data-layout-id][data-set-id] prefix its own       */
/* rules use.                                                            */
/* ------------------------------------------------------------------ */
.ti-widget,
.ti-widget *,
.ti-widget[data-layout-id][data-set-id] .ti-widget-container,
.ti-widget[data-layout-id][data-set-id] .ti-widget-header,
.ti-widget[data-layout-id][data-set-id] .ti-review-item,
.ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner,
.ti-widget[data-layout-id][data-set-id] .ti-reviews-container,
.ti-widget[data-layout-id][data-set-id] .ti-reviews-container-wrapper,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-container,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-header,
html body .ti-widget[data-layout-id][data-set-id] .ti-review-item,
html body .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner {
  border-radius: 0 !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-widget-container,
.ti-widget[data-layout-id][data-set-id] .ti-widget-header,
.ti-widget[data-layout-id][data-set-id] .ti-review-item,
.ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner,
.ti-widget[data-layout-id][data-set-id] .ti-reviews-container,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-container,
html body .ti-widget[data-layout-id][data-set-id] .ti-widget-header,
html body .ti-widget[data-layout-id][data-set-id] .ti-review-item,
html body .ti-widget[data-layout-id][data-set-id] .ti-review-item .ti-inner {
  border: 0 !important;
  box-shadow: none !important;
}
/* The profile avatars and the carousel arrows stay round */
.ti-widget .ti-profile-img,
.ti-widget img.ti-profile-img,
.ti-widget .ti-controls .ti-arrow-prev,
.ti-widget .ti-controls .ti-arrow-next {
  border-radius: 50% !important;
}

/* ------------------------------------------------------------------ */
/* Footer: nothing bold (client feedback). The column titles were 600    */
/* and the company name came through as <strong>; both read as regular   */
/* now. The newsletter form is Klaviyo's own markup and is left alone.   */
/* ------------------------------------------------------------------ */
#main-footer .widget-title,
#main-footer strong,
#main-footer b,
#main-footer .footer-company-info strong,
#main-footer p strong,
#main-footer a,
#main-footer li,
#main-footer li a,
#main-footer p,
#main-footer span,
#main-footer .widget ul li a,
footer .widget-title,
footer strong,
footer b,
footer a,
footer li,
footer li a {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------------ */
/* Promises: a more compact block (client feedback). The cards carried   */
/* 94px of vertical padding from when they were bordered boxes; with the */
/* border gone that is just empty space.                                 */
/* ------------------------------------------------------------------ */
.promises__item,
body.page-template-page-home .promises__item {
  padding: 24px 24px;
  gap: 20px 0;
}
.promises__item-heading {
  margin-bottom: 10px;
}
.promises {
  padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .promises__item,
  body.page-template-page-home .promises__item {
    padding: 16px 24px;
    gap: 16px 0;
  }
  .promises {
    padding-block: 32px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile drawer nav: same weight as the desktop bar (client feedback)  */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  .site-header #site-navigation #primary-menu-list > li > a,
  .site-header #site-navigation #primary-menu-list > li.mobile-icon-item > a,
  .site-header #site-navigation .mobile-view--bottom .top-bar-links li a {
    font-weight: 400 !important;
  }
}

/* ------------------------------------------------------------------ */
/* Cart typography matches the homepage (client feedback): product names */
/* read like the product-card titles, section headings like the section  */
/* headings, and prices carry the same regular weight and accent.        */
/* ------------------------------------------------------------------ */
.woocommerce-cart .cart_item .product-name,
.woocommerce-cart .cart_item .product-name a,
.cart-content-wrapper .cart_item .product-name,
.cart-content-wrapper .cart_item .product-name a,
.woocommerce-cart-form__cart-item .product-name,
.woocommerce-cart-form__cart-item .product-name a {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #2A2B26;
}
/* Cart headings pick up the uppercase serif of the homepage sections */
.woocommerce-cart .cart-content-wrapper h1,
.woocommerce-cart .cart-content-wrapper h2,
.cart-content-wrapper .cart-totals__heading,
.cart-content-wrapper .cards-block__heading {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2A2B26;
}
/* Prices: regular weight like the cards, amount in the brand green */
.woocommerce-cart .cart_item .product-price,
.woocommerce-cart .cart_item .product-subtotal,
.cart-content-wrapper .cart_item .product-price,
.cart-content-wrapper .cart_item .product-subtotal {
  font-weight: 400;
  color: #2A2B26;
}
.woocommerce-cart .cart_item .product-price .woocommerce-Price-amount,
.woocommerce-cart .cart_item .product-subtotal .woocommerce-Price-amount,
.cart-content-wrapper .cart_item .product-price .woocommerce-Price-amount,
.cart-content-wrapper .cart_item .product-subtotal .woocommerce-Price-amount {
  font-weight: 400;
  color: #475835; /* derives to the header green */
}

/* ------------------------------------------------------------------ */
/* One type system across the store (client feedback: "homepage styling  */
/* applied to all other pages"). Families were already consistent — the  */
/* drift was in weight and tracking, page by page. This fixes the roles  */
/* to what the homepage uses and leaves sizes alone, since a cart row    */
/* and a hero heading legitimately differ in scale.                      */
/*   page + section headings ....... 600, 1px, EB Garamond              */
/*   product titles ................ 600, 0.4px, uppercase              */
/*   prices ........................ 400, amount in the brand green     */
/*   body copy ..................... 400                                 */
/* ------------------------------------------------------------------ */
h1.entry-title,
.page-heading,
.block-heading,
.section-heading,
.cart-content-wrapper h1,
.cart-content-wrapper h2,
.wc-my-account-wrapper h1,
.wc-my-account-wrapper h2,
.woocommerce-account h1,
.woocommerce-account h2,
body.page-template-page-contacts h1,
body.page-template-page-contacts h2,
.single-product-page h1.entry-title {
  font-family: 'EB Garamond LV', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 1px;
}
.products-grid__item-title,
.products-grid__item-title a,
.product-item__details-title,
.product-item__details-title a,
.single-product-page .product-item__details-title,
.single-product-page .product-item__details-title a,
.cart_item .product-name,
.cart_item .product-name a {
  font-weight: 600;
  letter-spacing: 0.4px;
}
/* Prices: never bold anywhere, amount always the brand green. The cart
   table's own rules carry three type selectors, hence !important. */
.products-grid__item-price,
.product-item__price,
.cart_item .product-price,
.cart_item .product-subtotal,
.cart-content-wrapper .shop_table tbody tr td.product-price,
.cart-content-wrapper .shop_table tbody tr td.product-subtotal,
.woocommerce-checkout .order-total,
.woocommerce-checkout td.product-total {
  font-weight: 400 !important;
}
.cart-content-wrapper .shop_table tbody tr td.product-price,
.cart-content-wrapper .shop_table tbody tr td.product-subtotal {
  color: #2A2B26 !important;
}
.cart_item .product-price .woocommerce-Price-amount,
.cart_item .product-subtotal .woocommerce-Price-amount,
.cart-content-wrapper .shop_table tbody tr td.product-price .woocommerce-Price-amount,
.cart-content-wrapper .shop_table tbody tr td.product-subtotal .woocommerce-Price-amount {
  font-weight: 400 !important;
  color: #475835 !important; /* derives to the header green */
}


/* -------------------------------------------------------------------------
   Hover / entrance motion: Firefox reads the long durations as lag
   -------------------------------------------------------------------------
   Firefox repaints a scaled <img> inside an overflow:hidden tile instead of
   compositing it, so a half-second zoom on a full-bleed photo drags. Shorter
   moves, and the photo gets its own layer so the scale stays on the GPU. */

a.category-collage__tile .category-collage__media img,
.instagram-gallery-item img {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
a.category-collage__tile .category-collage__media img {
  transition: transform .28s cubic-bezier(.2, .6, .3, 1);
}
a.category-collage__tile:hover .category-collage__media img {
  transform: translateZ(0) scale(1.03);
}
.instagram-gallery-item {
  transition-duration: .25s !important;
  transition-property: opacity, transform !important;
}

/* The hero photo drifted for seven seconds — long enough to look stalled
   rather than slow. Four seconds over a shorter distance reads as intent. */
@keyframes krokusHeroZoom {
  from { transform: translateZ(0) scale(1.04); }
  to   { transform: translateZ(0) scale(1); }
}
body.page-template-page-home .hero-swiper .swiper-slide-active .swiper-slide__picture img {
  animation: krokusHeroZoom 4s ease-out both;
  will-change: transform;
  backface-visibility: hidden;
}