/** Shopify CDN: Minification failed

Line 1211:0 Unexpected "}"

**/
/* custom.css — Her Own Alone overrides on stock Stretch (Copy of Stretch 1.1).
 * theme.css is a Maestrooo bundle that a theme update overwrites, so our overrides live here. */

/* HEADINGS ON PHONES: one step larger than desktop.
 * heading_font_size_factor is one global setting (0.8, steps of 0.1). At 0.8 a phone section
 * heading is 26px against 15px body text and reads as large body copy; 0.9 gives 29px, the
 * demo's own phone size. Desktop stays at 0.8, where the heading/body ratio is already right.
 * 699px is the theme's own phone breakpoint. */
@media screen and (max-width: 699px) {
  :root { --text-heading-size-factor: 0.9; }
}

/* DESKTOP DROPDOWN MENU: sentence case, one line per item.
 * Every menu link carries the global .subheading class (caps, +10%, 12px), right for the five
 * short top-level labels but hard to read on long product names wrapped over two lines.
 * Dropdown items are names you read, so: as typed, no tracking, 14px regular, and a panel
 * wide enough that no name wraps. Top-level items keep the caps. */
.header__dropdown-menu .subheading {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 400;
}
.header__dropdown-menu {
  min-width: max-content;
  max-width: min(28rem, 90vw);
}

/* TRUST ICONS: title above its description, not below it.
 * The demo pairs a 12px caps label with 13px body, so the two sit level. At our 16/15px body the
 * caps label became SMALLER than its own description. Items now use the section's own "heading"
 * style (item_heading_style: h7 = heading font, as typed) raised to 18px, and the description
 * drops to the theme's small text size. */
.trust-icons__item .h7 { font-size: 1.125rem; }
.trust-icons__item .text-subdued { font-size: var(--text-sm); }

/* TRUST ICONS, proportions (09-26). The title sat 17px under the icon and 19px above its own line, so it
 * read as the icon's caption. Now icon -> title 20px, title -> line 8px: the title groups with its text.
 * The line was 60% ink (~#7c8083, 3.98:1, under the 4.5:1 small-text minimum); 75% is ~6:1 and still
 * visibly softer than the title. Icons went 24 -> 28px desktop, 20 -> 24px phone (block settings). */
.trust-icons__item .prose > .h7 { margin-block-start: 1.25rem; }
.trust-icons__item .prose > .text-subdued {
  margin-block-start: .5rem;
  color: rgb(var(--text-color) / .75);
}

/* TRUST ICONS ON PHONES: no double air.
 * Below 700px theme.css gives the band its own 48px padding top and bottom, on top of the
 * neighbours' section spacing, so one icon sat in 112px of white above and 88px below its dots.
 * The air belongs to the neighbouring sections (same rule as the 09-25 section edit): no top
 * padding, 24px under the dots. Measured result: 64px above the icon, 64px under the dots. */
@media screen and (max-width: 699px) {
  /* 09-26: 24px → 40px. With the 64px phone base the icon sat 81px under the photo but the dots only
   * 64px above the grey timeline (24 + the 40px spacer section). 40 + 40 = 80 below, 81 above. */
  .shopify-section--trust-icons .trust-icons { padding-block: 0 2.5rem; }
  /* 10-21: the list (first row starts at the section top, no icon padding any more) sat 65px under the photo,
   * 80px above the grey timeline. +15px on top → 80 / 80. */
  [id$="__trust_icons_Y9eDiJ"] .trust-icons { padding-block-start: 15px; }
}
@media screen and (min-width: 1000px) {
  [id$="__trust_icons_Y9eDiJ"] .trust-icons { padding-block-start: 7px; } /* 10-21: 89px above vs 96px below (spacer) → 96 / 96 */
}

/* PHONE MENU DRAWER: no social icons.
 * The drawer footer renders the four social links (Facebook, Instagram, YouTube, TikTok) as a full-width
 * row above the country and language selectors. Gytis, 09-25: hide them on mobile. The drawer is the
 * phone/tablet menu only (desktop uses the inline menu), so the rule is scoped to below 1000px, the theme's
 * own desktop breakpoint. The footer still shows them. */
@media screen and (max-width: 999px) {
  .menu-drawer__footer-item:has(> .social-media) { display: none; }
}

/* CART DOT: brand red, pulsing slowly while the cart holds something.
 * Stretch marks a non-empty cart with a 4px dot in the text colour, easy to miss. Now 7px in the
 * brand red (#F12F47, the logo's red), with a faint ring that grows out of it and fades, every 3s:
 * about 2s of ring, then a short rest. Gytis, 09-25: always on, but slow. (A first version pulsed
 * 3 times per add and stopped; the add opens the drawer over the header, so the pulses went unseen.)
 * Pure CSS: the dot is hidden by Stretch when the cart is empty, so the ring stops with it. It
 * animates only transform and opacity. No animation for anyone who asked their device to reduce motion. */
.header__active-dot {
  background: #F12F47;
  width: 7px;
  height: 7px;
  inset-block-start: -3px;
  inset-inline-end: -3px;
}
.header__active-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100%;
  background: rgb(241 47 71 / 0.45);
  animation: hoa-cart-pulse 3s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes hoa-cart-pulse {
  0% { transform: scale(1); opacity: 1; }
  65%, 100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header__active-dot::after { content: none; }
}

/* MENU: HOA product rows, tiles and article cards (snippets/hoa-menu-panel, hoa-menu-item, hoa-menu-article).
 * Only mega-menu blocks whose "Layout" is "Product list" or "Latest articles" use these; "Stretch default"
 * blocks and plain nested menus render exactly as Maestrooo shipped them.
 * Type: titles and prices use the product card's own classes (text-sm, price-list 'card'), so the menu reads
 * like the product grid. Photos: 1:1 everywhere in the menu (Gytis, 09-25: a 1:1 "Menu image" per product,
 * on pure white). Products contain on white, articles cover.
 * Caps: product name 60 characters / 2 lines, benefit line 70 / 2 lines, article title 80 / 3 lines. */
.hoa-menu-item { display: grid; color: inherit; text-decoration: none; }
.hoa-menu-item__media { display: block; aspect-ratio: 1; background: #f9f9f9; overflow: hidden; } /* the product photos' own grey (10-21), so the square shows no edge */
.hoa-menu-item__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hoa-menu-item__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hoa-menu-item__title,
.hoa-menu-article__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Benefit line (off by default): ONE line, cut with an ellipsis, and darker than Stretch's subdued grey
 * (Gytis, 09-25: the grey was hard to read for older buyers). */
.hoa-menu-item__line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--text-color) / .8); }
.hoa-menu-item__price .price-list { flex-wrap: nowrap; column-gap: 0.4rem; }

/* Featured tile's label: the action red (#EA102B, 4.56:1 on white; the logo red #F12F47 is 3.9:1, too light
 * for 11px text). Gytis, 09-25: red label, but nothing changes colour on hover. */
.hoa-menu-item__eyebrow { color: #EA102B; font-size: 0.6875rem; }

/* Row (phone drawer): photo | name + line | price */
.hoa-menu-item--row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 0.875rem;
  align-items: start;
  padding-block: 0.625rem;
  border-bottom: 1px solid rgb(var(--text-color) / .12);
}
.hoa-menu-item--row .hoa-menu-item__media { width: 56px; }
.hoa-menu-item--row .hoa-menu-item__text,
.hoa-menu-item--row .hoa-menu-item__price { padding-top: 0.2rem; }
.hoa-menu-item--row .hoa-menu-item__price .price-list { flex-direction: column; align-items: flex-end; }
/* No benefit line (the default): name and price centred on the photo, not hanging from its top edge. */
.hoa-menu-item--row:not(:has(.hoa-menu-item__line)) { align-items: center; }
.hoa-menu-item--row:not(:has(.hoa-menu-item__line)) .hoa-menu-item__text,
.hoa-menu-item--row:not(:has(.hoa-menu-item__line)) .hoa-menu-item__price { padding-top: 0; }

/* Featured (top of the phone drawer), option A of 09-25: the scheme's secondary ground (#f4f6f7), photo on a
 * white square, then label / name (regular weight) / stars / price stacked, all on one left edge. */
.hoa-menu-item--featured {
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  background: #f9f9f9; /* 10-21: the product photos' own grey, so the photo has no edge (was the theme's secondary grey) */
}
.hoa-menu-item--featured .hoa-menu-item__media { width: 112px; } /* was 84; slim bottles read too small */
.hoa-menu-item--featured .hoa-menu-item__text { gap: 0.3rem; }
.hoa-menu-item--featured .hoa-menu-item__title { font-size: 0.9375rem; font-weight: normal; }
.hoa-menu-item--featured .price-list { margin-top: 0.1rem; }

/* Tile (desktop dropdown), sized like Stretch's own promo tiles */
.hoa-menu-item--tile { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; align-content: start; }

/* Nothing in the menu changes colour on hover or tap. */
.hoa-menu-item:hover,
.hoa-menu-article:hover { color: inherit; }

/* Phone drawer panels */
.hoa-menu-panel { display: flex; flex-direction: column; gap: 1rem; }
.hoa-menu-panel__title { margin: 0; }
.hoa-menu-panel__products { display: flex; flex-direction: column; }
.hoa-menu-panel__articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
.hoa-menu-panel__button { margin-top: 0.5rem; }

/* Article card */
.hoa-menu-article { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; }
.hoa-menu-article__media { display: block; aspect-ratio: 1; overflow: hidden; background: rgb(var(--text-color) / .06); }
.hoa-menu-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoa-menu-article__more { display: flex; align-items: center; gap: 0.45rem; }
.hoa-menu-article__more::before { content: ''; width: 6px; height: 6px; border-radius: 100%; background: currentColor; flex-shrink: 0; }
.hoa-menu-article__title { -webkit-line-clamp: 3; font-family: var(--heading-font-family); font-size: 1.0625rem; line-height: 1.2; }

/* Desktop dropdown: Stretch's layout (links left, tiles right). Tiles keep one width; the promo carousel's own
 * arrows take over when they do not fit. The view-all link sits under the list, like Stretch's "View all". */
/* Tile width follows the screen: 5 tiles fit at 1440 (216px), bigger screens get up to 260px. */
.hoa-mega-promo { --hoa-tile: clamp(200px, 15vw, 260px); }
.hoa-mega-promo .menu-promo__item { width: var(--hoa-tile); min-width: var(--hoa-tile); max-width: var(--hoa-tile); flex: none; }
.hoa-mega-promo .hoa-menu-item--tile,
.hoa-mega-promo .hoa-menu-article { width: var(--hoa-tile); }
.hoa-mega-nav .mega-menu__linklist { max-width: 220px; }
.hoa-mega-nav__all { justify-self: start; }

/* PRICES: regular prices in the full text colour, store-wide (product cards, menu, product page).
 * Stretch prints every regular price `text-subdued`, which is the text colour at 60%: #7c8083 on white,
 * 3.98:1, under the 4.5:1 body-text minimum. The full colour is 14.2:1. Gytis, 09-25: "hard to see".
 * Sale prices keep the theme's on-sale colour (set to the action red #EA102B, 4.56:1); the struck-through
 * old price stays grey on purpose, it is the secondary number. */
price-list sale-price.text-subdued { color: rgb(var(--text-color)); }

/* DRAWER TOP LEVEL, option A of 09-25: one calm list.
 * Every item in the full text colour (Stretch's faded list greys the siblings of a hovered item, which on a
 * phone read as disabled), one size (20px, was ~34px), a hairline under each row, the chevron on the right
 * edge of every row. The secondary links (Pristatymas, Apie mus, Susisiekti) sit on one line under the list. */
.menu-drawer .hoa-drawer-list { gap: 0; margin-top: 0.5rem; }
.menu-drawer .hoa-drawer-list > li { border-bottom: 1px solid rgb(var(--text-color) / .12); }
.menu-drawer .hoa-drawer-list :where(a, button) {
  max-width: none;
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgb(var(--text-color));
}
.menu-drawer .hoa-drawer-list button > div { width: 100%; justify-content: space-between; }
.menu-drawer .faded-linklist li:hover ~ * > :where(a, button),
.menu-drawer .faded-linklist li:has(~ li:hover) > :where(a, button) { color: rgb(var(--text-color)); }
.hoa-drawer-chevron { width: 0.875rem; height: 0.875rem; color: rgb(var(--text-color) / .55); }
.menu-drawer .hoa-drawer-list + .menu-drawer__separator { display: none; }
.menu-drawer .hoa-drawer-secondary { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }

/* HOA HERO (sections/hoa-hero.liquid, blocks/hoa-trust-figures.liquid), 2026-09-25.
 * Our own section, so its height is a percentage of the screen, set separately for desktop and phone
 * (--hoa-hero-h / --hoa-hero-h-m from the sliders). The announcement bar is taken off so 100% is
 * exactly the first screen. The text box is a min-height: long copy grows the hero, never clips.
 * Phone "below": the photo becomes a plain block of its own height and the text sits under it on
 * the panel scheme (variables printed by the section under the same 699px query). */
.hoa-hero__box {
  min-height: calc(var(--hoa-hero-h) * 1svh - var(--announcement-bar-height, 0px));
}
.hoa-hero__media {
  position: absolute;
  inset: 0;
}
.hoa-hero__media img,
.hoa-hero__media video {
  object-fit: cover;
}
/* The text box carries .color-scheme (for the phone "below" panel), which paints the scheme's background.
 * Over the photo it must stay see-through, whatever scheme the hero uses. */
.hoa-hero__content.color-scheme {
  background: none;
}
/* Hero paragraph 2 px over body text (Gytis 10-23): 18 desktop, 17 phones. */
.hoa-hero__content .prose p {
  font-size: calc(var(--text-base) + 0.125rem);
}

@media screen and (max-width: 699px) {
  .hoa-hero__box {
    min-height: calc(var(--hoa-hero-h-m) * 1svh - var(--announcement-bar-height, 0px));
  }
  .hoa-hero__content .button {
    width: 100%;
  }
  /* The phone photo arrives as a <source>, which cannot carry Shopify's focal point, so the crop
   * comes from the "Phone photo focus" slider. !important beats the desktop image's inline focal point. */
  .hoa-hero__media img {
    object-position: 50% var(--hoa-hero-focus-m, 50%) !important;
  }
  .hoa-hero--m-below .hoa-hero__box {
    display: block;
    min-height: 0;
  }
  .hoa-hero--m-below .hoa-hero__media {
    position: relative;
    height: calc(var(--hoa-hero-h-m) * 1svh);
  }
  .hoa-hero--m-below .hoa-hero__content {
    padding: 1.5rem var(--container-gutter) 2rem;
  }
  .hoa-hero--m-below .hoa-hero__content.color-scheme {
    background-color: rgb(var(--background));
  }
}

/* Trust figures: two figures under a thin rule, numbers in the heading font. */
.hoa-trust {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  max-width: 30rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgb(var(--text-color) / 0.35);
  text-align: start;
}
.prose .hoa-trust {
  margin-block-start: 2.5rem;
}
.hoa-trust__rule {
  flex: none;
  width: 1px;
  background: rgb(var(--text-color) / 0.35);
}
.hoa-trust__fig {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.hoa-trust__num-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.hoa-trust__num {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  font-size: 2.0625rem; /* 10-21 QA: 36 → 33, one size with the quotes (fewer sizes on the page) */
  line-height: 1;
  letter-spacing: -0.02em;
}
.hoa-trust__label {
  font-size: var(--text-sm);
  line-height: 1.3;
  opacity: 0.9;
}
.hoa-trust__stars {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.hoa-trust__stars-base,
.hoa-trust__stars-fill {
  display: flex;
  gap: 2px;
}
.hoa-trust__stars-base {
  color: rgb(var(--text-color) / 0.3);
}
.hoa-trust__stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--hoa-star-fill);
  overflow: hidden;
  color: var(--hoa-star-color);
}
.hoa-trust__stars svg {
  flex: none;
}
/* .prose gives every svg (and other children) 40px of block margin: none of it applies in here. */
.prose .hoa-trust :is(div, span, svg) {
  margin: 0;
}

@media screen and (max-width: 699px) {
  .hoa-trust {
    gap: 1.25rem;
    max-width: none;
  }
  .prose .hoa-trust {
    margin-block-start: 1.5rem;
  }
  .hoa-trust__num {
    font-size: 1.8125rem; /* 30 → 29, = h3 on phones */
  }
  .hoa-trust__stars svg {
    width: 12px;
    height: 12px;
  }
}

/* HOA HEADING (blocks/hoa-heading.liquid): the | line break, per breakpoint. A hidden <br> has a
 * space before it in the markup, so the two words still read as two. */
@media screen and (max-width: 699px) {
  .hoa-br--desktop { display: none; }
}
@media screen and (min-width: 700px) {
  .hoa-br--mobile { display: none; }
}

/* WASH SPOTLIGHT CARD: one size everywhere (09-26).
 * Stretch puts the desktop product list in a flex row beside the carousel arrows, inside a box with only a
 * MAX width (min(35vw, 550px)). Neither grows, so the card took the width of whatever photo resolution
 * loaded: 300px in one browser, ~376px in the theme editor. The box now takes its full maximum and the list
 * fills the row, so the 2:3 card is the same size in the editor and on the storefront. */
@media screen and (min-width: 1000px) {
  /* Third term: a 4:5 card never taller than the screen minus the section's own air (9rem), so the
   * section stays one screen tall on wide, short windows too. (Card ratio: 'portrait_crop' = 4:5, passed
   * in sections/products-with-image.liquid; was 2:3 'tall_crop' until 09-26.) */
  .products-with-image__carousel-container {
    width: min(35vw, 550px, calc((100svh - 9rem) * 4 / 5));
  }
  .products-with-image__carousel-container .h-stack > .product-list {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* MARQUEE SEPARATOR: a drop outline, not Stretch's solid shape (09-26, option F of the symbols canvas).
 * Drawn over the separator blocks with a mask, so the blocks stay in the editor and the drop sits centred
 * between items. Colour is the band's text colour (Stretch paints .shape with currentColor). Whatever
 * "Shape" the editor shows, the marquee draws the drop. */
.shopify-section--scrolling-content .shape {
  position: relative;
  width: .48em;
  height: .64em;
  transform: none;
  border-radius: 0;
  background: none;
}
/* The drop moved to ::before (10-23) so ::after can carry the ripple without the mask cutting it off. */
.shopify-section--scrolling-content .shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1.2C6 1.2 1.5 6.6 1.5 10.2a4.5 4.5 0 0 0 9 0C10.5 6.6 6 1.2 6 1.2Z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1.2C6 1.2 1.5 6.6 1.5 10.2a4.5 4.5 0 0 0 9 0C10.5 6.6 6 1.2 6 1.2Z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* MARQUEE DROP RIPPLE (10-23, option C of the drop motion page, Gytis): a thin ring spreads under each drop
 * as if it touched water. Separators sit at every 2nd child, so three delay groups stagger them along the band. */
.shopify-section--scrolling-content .shape::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.12em;
  width: 1.1em;
  height: .3em;
  margin-left: -.55em;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: hoa-drop-ripple 4.2s ease-out infinite;
}
.shopify-section--scrolling-content .shape:nth-child(6n + 4)::after { animation-delay: 1.4s; }
.shopify-section--scrolling-content .shape:nth-child(6n)::after { animation-delay: 2.8s; }
@keyframes hoa-drop-ripple {
  0% { transform: scale(.3); opacity: 0; }
  8% { opacity: .55; }
  45%, 100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shopify-section--scrolling-content .shape::after { animation: none; }
}

/* DYNAMIC GRID PARALLAX (09-26): Stretch runs the scroll parallax with no reduced-motion check, so visitors who
 * ask their device for less motion still get items sliding up to 25vmin. Off for them; everyone else unchanged. */
@media (prefers-reduced-motion: reduce) {
  .dynamic-grid__cell {
    animation: none !important;
    transform: none !important;
  }
}


/* WASH BIG TYPE (scheme-8, 09-26): the rating sits inside Stretch's .prose, which gives the "(4.7)" label
 * (.subheading, 40px) and every star (.icon, 32px) a top margin, so the star row was 55px tall and sat far
 * below the price. */
.color-scheme--scheme-8 .rating-badge > *,
.color-scheme--scheme-8 .rating-badge .icon {
  margin-block: 0;
}

/* WASH BIG TYPE, name / price / stars (09-26): the product card's rhythm, scaled to this section's larger type.
 * Card: name -> price 3px, price -> stars 7px (text lines, 14px type). Here the name is h5 and the price h6, whose
 * line boxes left 15px under the name and 3px above the stars, the card's rhythm upside down. */
.hoa-wash-meta {
  row-gap: 0;
}
.hoa-wash-meta > a,
.hoa-wash-meta > price-list {
  line-height: 1.15;
}
.hoa-wash-meta > price-list {
  margin-block-start: .5rem;
}
/* .prose gives the price's .h6 an 18px heading margin; its "heading after heading" rule ends in :first-child,
 * which outranks a single class, hence the doubled class. */
.hoa-wash-meta.hoa-wash-meta > price-list > * {
  margin-block: 0;
}
.hoa-wash-meta > .rating-badge {
  margin-block-start: .625rem;
}

/* PHONE SECTION RHYTHM (09-26, Gytis: "on mobile paddings are inconsistent and too short").
 * Stretch's "loose" setting, the largest it offers, gives 48px above and below every section under
 * 1000px (72px from 1000, 88px from 1399). Measured on home that read as cramped, so phones and
 * tablets get 64px. Same mechanism as the theme: one variable, and sections that share a background
 * still share one gap instead of stacking two. Loaded after css-variables, so this :root wins. */
@media screen and (max-width: 999px) {
  :root { --section-vertical-spacing: 4rem; }
}

/* GRADIENT SCHEME EDGES SHARE THEIR GAP (09-26).
 * scheme-8 (wash spotlight) is a gradient, white at the top to #f4f6f7 at the bottom. Stretch decides
 * "same background" by comparing each scheme's gradient-or-colour, so it treats scheme-8 as different
 * from everything and doubles the gap on both edges (128px on a phone), although both edges are
 * seamless: white meets scheme-1 above it, #f4f6f7 meets scheme-2 below it. The theme's own flag,
 * set for exactly those two joins. */
.shopify-section:has(> .color-scheme--scheme-1) + .shopify-section:has(> .color-scheme--scheme-8),
.shopify-section:has(> .color-scheme--scheme-8) + .shopify-section:has(> .color-scheme--scheme-2) {
  --section-has-same-background-as-previous-section: 1;
}

/* JOURNAL BOTTOM ON PHONES (09-26). The journal follows the founder quote, which gives itself 1.5×
 * spacing, so its heading sat 96px under the quote but its button only 64px above the dark footer.
 * 96 to match the top read as too much (Gytis); then 80; now 72 (Gytis). */
@media screen and (max-width: 999px) {
  .shopify-section--blog-posts .section-spacing { padding-block-end: 4.5rem; }
}

/* SECTION HEADINGS PAINT ABOVE THE PREVIOUS SECTION (09-26, „Ž“ in „Žinių erdvė“ cut on phones).
 * When a section shares its background with the one above, Stretch drops its top padding, so its
 * heading sits on the section's top edge. The heading font's 0.9 line-height puts accents above the
 * line box, and the section above (the founder quote: `.relative color-scheme`, positioned, with its
 * own background) paints over anything non-positioned that pokes into it, so the caron was cut flat.
 * Positioning the header (no z-index) returns it to document order, on top. A/B tested at 500px:
 * this restores the caron; extra padding on the heading does not. */
.shopify-section .section-header {
  position: relative;
}

/* FOOTER HEADINGS ON PHONES (09-27). On a phone the footer column titles are the accordion toggles,
 * the only visible text of each collapsed menu, and Stretch sets them at 11px caps: the smallest text
 * on the page, for a tap target read by older buyers. 13px keeps them under the 15px links. Laptop
 * stays at the site-wide 12px label size. */
@media screen and (max-width: 699px) {
  .shopify-section--footer .subheading { font-size: 0.8125rem; }
}

/* FOOTER BOTTOM ROW ON PHONES (09-27, Gytis). Stretch stacks the language switch, the social icons, the
 * copyright and the payment icons as four centred rows. On phones: language left + social right on ONE row,
 * then copyright, then every payment icon on ONE row, shrunk to fit (9 icons wrapped 6 + 3 and left a hole).
 * Desktop keeps Stretch's own three-column row. */
@media screen and (max-width: 999px) {
  .footer__aside:has(> .social-media) {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }
  .footer__aside:has(> .social-media) > .social-media { justify-content: end; gap: 1rem 1.5rem; }
  .footer__aside:has(> .social-media) > .v-stack { grid-column: 1 / -1; }
  .footer__aside ul.h-stack:has(> li > svg) {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.375rem;
  }
  .footer__aside ul.h-stack:has(> li > svg) > li { flex: 1 1 0; min-width: 0; max-width: 2.375rem; }
  .footer__aside ul.h-stack:has(> li > svg) svg { display: block; width: 100%; height: auto; }
}

/* PAYMENT ICONS WITH BANK LINKS (09-27). Two lists: her LT bank links, then Shopify's cards and wallets.
 * Desktop: one centred row. Phones: one row each (banks, then cards), each shrunk to fit by the rule above. */
.hoa-payments { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
/* Two rows up to 1199px: at 1000px one row of 13 squeezed the social icons into a 2x2 block (measured). */
@media screen and (max-width: 1199px) {
  .hoa-payments { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* WASH SPOTLIGHT BUTTONS (09-27). Add to cart is a real form inside the button group; the wrappers would
 * otherwise stretch it and drop it out of line with "Žiūrėti prausiklį". display: contents keeps the submit. */
.hoa-wash-buttons product-form,
.hoa-wash-buttons form { display: contents; }
.hoa-wash-buttons .button { margin: 0; } /* the theme gives a form's submit button 24px on top */

/* ===== PDP HEADER (09-27): badge + claim on one line, stars and value line tight like Stretch's vendor/price ===== */
.hoa-pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.hoa-pdp-meta .subheading { margin: 0; }
.product-info__block-item:is([data-block-id="hoa_meta"], [data-block-id^="judge_me_reviews_preview_badge"]) { --product-block-item-margin: 1.25rem; }
.product-info__block-item[data-block-id="hoa_value_line"] { --product-block-item-margin: 0rem; }

/* ===== PDP PRICE ROW (09-27): price and the value line on one baseline ===== */
.product-info__block-item[data-block-type="price"]:has(+ [data-block-id="hoa_value_line"]) { display: inline-block; vertical-align: baseline; margin-block-end: 0; }
.product-info__block-item[data-block-id="hoa_value_line"] { display: inline-block; vertical-align: baseline; margin-inline-start: .75rem; margin-block-start: 0; }
.product-info__block-item[data-block-id="hoa_value_line"] p { margin: 0; }

/* ===== PDP B+ (09-27, canvas „B+"): price weight, benefits row, delivery box, UGC placeholder, stock only when low ===== */
.product-info__block-item[data-block-type="price"] sale-price { font-size: 1.375rem; font-weight: 500; }
.product-info__block-item[data-block-id="icons_with_text_VqRAcH"] { border-block: 1px solid rgb(var(--border-color, 227 230 232)); padding-block: .875rem; }
.product-info__block-item[data-block-id="icons_with_text_VqRAcH"] .v-stack { font-size: 13px; line-height: 1.35; } /* canvas B+ benefit row size */
.product-info__block-item[data-block-type="inventory"]:has(.text-success) { display: none; }
.hoa-delivery { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.125rem; background: #f3f6f9; font-size: .9375rem; } /* 09-28: beige → theme grey (Gytis) */
.hoa-delivery strong { font-weight: 600; }
.product-info__block-item[data-block-type="buy-buttons"] .quantity-selector { border-color: #c9ced2; }

/* ===== PDP SPACING SYSTEM (09-27): one explicit rhythm for the main product column, replacing Stretch's per-block margins =====
   name group 12 · content groups 24 · description→link 8 · delivery→button 10 (one unit) · below the button 32 */
.shopify-section.shopify-section--main-product .product-info__block-list > * { margin-block: 0; }
.shopify-section.shopify-section--main-product .product-info__block-list > :is([data-block-type="title"], [data-block-type="price"]) { margin-block-start: .75rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > :is([data-block-type="description"], [data-block-id="hoa_description"]) { margin-block-start: 1.25rem; } /* hoa_description = temporary first-paragraph block (09-28) */
.shopify-section.shopify-section--main-product .product-info__block-list > :is([data-block-id="icons_with_text_VqRAcH"], [data-block-id="hoa_delivery"]) { margin-block-start: 1rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > :is([data-block-type="variant-picker"], [data-block-type="inventory"]) { margin-block-start: 1.5rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > [data-block-id="hoa_ingredients"] { margin-block-start: .5rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > [data-block-type="buy-buttons"] { margin-block-start: .625rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > :is([data-block-type="hoa-ugc-stories"], .product-info__block-group, [data-block-type="complementary-products"], [data-block-type="disclosures"]) { margin-block-start: 2rem; }
.shopify-section.shopify-section--main-product .product-info__block-list > [data-block-id="hoa_value_line"] { margin-block-start: 0; }

/* ===== PDP COMPLEMENTARY (09-27, canvas „B+ — 1 kortelė, rėmelis"): „Derinkite su" = one framed card per view,
   arrows + „1 / 3" inside the card. Markup: snippets/product-info.liquid, complementary_products branch (HOA override). ===== */
.shopify-section.shopify-section--main-product .product-info__block-list > [data-block-type="complementary-products"] { margin-block-start: 1rem; }
.hoa-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.hoa-pair__label { margin: 0; }
.hoa-pair__card { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem .75rem .75rem; border: 1px solid #e3e6e8; background: #ffffff; }
.hoa-pair__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; flex: 1 1 auto; min-width: 0; }
.hoa-pair .product-cross-sell--horizontal { padding: 0; column-gap: 1rem; background: none; }
.hoa-pair .product-cross-sell--horizontal img { width: 72px; height: 72px; max-width: none; object-fit: cover; background: transparent; mix-blend-mode: multiply; }
/* 09-28 (Gytis): packshots carry their own white ground, so the grey sits on the link behind the image and multiply lets it show through */
.hoa-pair .product-cross-sell--horizontal > a { display: block; background: #f3f6f9; line-height: 0; isolation: isolate; }
.hoa-pair .product-cross-sell--horizontal .v-stack.gap-2 { row-gap: .625rem; }
.hoa-pair .product-cross-sell .v-stack > a { font-size: 14px; }
.hoa-pair .product-cross-sell :is(button.link, product-form button) { font: 500 13px/1.2 var(--text-font-family); letter-spacing: 0; text-transform: none; padding-bottom: 2px; } /* underline + hover slide = Stretch .link (same as „Visa sudėtis") */
.hoa-pair__nav { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; } /* arrows = stock Stretch circle-button (grey fill, dark on hover), as on every other carousel */
.hoa-pair__count { display: none; min-width: 1.75rem; text-align: center; font-size: 13px; }
@media screen and (min-width: 1000px) {
  .hoa-pair .product-cross-sell--horizontal img { width: 88px; height: 88px; }
  .hoa-pair .product-cross-sell .v-stack > a { font-size: 15px; }
  .hoa-pair__count { display: block; }
}

/* ===== PDP RATING (09-27): `hoa_rating` block = Stretch stars (theme colour) + "67 atsiliepimai", replaces the Judge.me badge ===== */
.hoa-rating { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.hoa-rating .rating-badge > .subheading { display: none; }
.hoa-rating__count { font-size: 14px; }
@media screen and (pointer: fine) { .hoa-rating:hover .hoa-rating__count { text-decoration: underline; text-underline-offset: 3px; } }

/* ===== PDP MOBILE MEDIA GAP (09-27): gallery → rating 36 px (Stretch stock 2.25rem) → 24 px, the PDP group unit.
   Header → gallery stays Stretch's 20 px = the side gutter, so the image sits in an even 20 px frame. ===== */
@media screen and (max-width: 999px) {
  .shopify-section--main-product .product { row-gap: 1.5rem; }
  /* header icons → photo = 24 px, same as photo → stars (Gytis). Header leaves 20 px under its icons, so 4 px here.
     !important: Stretch writes the "Add top spacing" setting (20 px) as an id-scoped rule in main-product.liquid. */
  .shopify-section--main-product .product { padding-block-start: .25rem !important; }
}

/* ===== HEADER BELL (09-27, Gytis): the „Svarbu žinoti" bell only on desktop; hidden wherever the hamburger header shows. ===== */
@media screen and (max-width: 999px) {
  .header .header__secondary-nav .header__news-link { display: none !important; } /* beats the news-modal section's inline `.header__news-link { display: contents !important }` */
}

/* ===== PDP DESKTOP COLUMNS (09-27): photo 58 % (section setting, was 50) + info block pinned to the photo side instead of
   centred in its half → photo↔text gap = the info's own 48 px padding, text right edge = 1392 at 1440 like the home sections.
   Text stays capped at Stretch's 520 px (≈75 characters/line). ===== */
@media screen and (min-width: 1000px) {
  .shopify-section--main-product .product-info { margin-inline: 0; padding-inline-start: 5rem; max-width: calc(32rem + 5rem); } /* 09-27 v2: photo 56 %, inner gap 80 px ≈ 1.7× the 48 px outer margin (Gytis: equal 48 read too narrow) */
}

/* ===== PDP UGC STORIES (2026-09-28, feature-ugc-videos) — snippets/hoa-ugc-stories.liquid + assets/hoa-ugc-stories.js
   Row = Stretch Sand collection-quick-navigation look (round image, subheading name, ▶ badge); one circle plays a muted
   3 s preview at a time with a red ring filling (playing style "progress"). Player = native <dialog>, stories format. ===== */
.product-info__block-item[data-block-type="hoa-ugc-stories"]:not(:has(hoa-ugc-stories)) { display: none; } /* no matching videos → no empty 32 px gap */
.hoa-ugc-stories { --hoa-ugc-size: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; }
.hoa-ugc-stories__label { margin: 0; }
.hoa-ugc-stories__row { display: flex; gap: 20px; padding: 6px; margin: -6px; }
.hoa-ugc-stories__item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--hoa-ugc-size); flex-shrink: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hoa-ugc-stories__item:focus-visible { outline: none; }
.hoa-ugc-stories__item:focus-visible .hoa-ugc-stories__media { outline: 2px solid currentColor; outline-offset: 4px; }
.hoa-ugc-stories__circle { position: relative; display: block; width: var(--hoa-ugc-size); height: var(--hoa-ugc-size); }
.hoa-ugc-stories__media { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; background: #f4f6f7; box-shadow: inset 0 0 0 2px var(--hoa-ugc-ring, transparent); }
.hoa-ugc-stories__poster, .hoa-ugc-stories__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hoa-ugc-stories__preview { opacity: 0; transition: opacity .3s ease; }
.hoa-ugc-stories__item.is-live .hoa-ugc-stories__preview { opacity: 1; }
.hoa-ugc-stories__media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hoa-ugc-ring, transparent); pointer-events: none; }
.hoa-ugc-stories__progress { position: absolute; left: -5px; top: -5px; width: calc(var(--hoa-ugc-size) + 10px); height: calc(var(--hoa-ugc-size) + 10px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .2s; overflow: visible; }
.hoa-ugc-stories__track, .hoa-ugc-stories__bar { fill: none; stroke-width: 2.4; }
.hoa-ugc-stories__track { stroke: #e3e6e8; }
.hoa-ugc-stories__bar { stroke: #ea102b; stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; }
.hoa-ugc-stories--progress .is-playing .hoa-ugc-stories__progress,
.hoa-ugc-stories--ring .is-playing .hoa-ugc-stories__progress { opacity: 1; }
.hoa-ugc-stories--progress .is-playing .hoa-ugc-stories__bar { animation: hoa-ugc-ring 3s linear forwards; }
.hoa-ugc-stories--ring .hoa-ugc-stories__track { stroke: #ea102b; }
.hoa-ugc-stories--ring .hoa-ugc-stories__bar { display: none; }
@keyframes hoa-ugc-ring { to { stroke-dashoffset: 0; } }
.hoa-ugc-stories__badge { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; border: 1px solid #e3e6e8; box-sizing: border-box; color: rgb(var(--text-color)); }
.hoa-ugc-stories__icon-play { margin-left: 2px; }
.hoa-ugc-stories__icon-live, .is-playing .hoa-ugc-stories__icon-play { display: none; }
.is-playing .hoa-ugc-stories__icon-live { display: block; }
.hoa-ugc-stories__name { max-width: calc(var(--hoa-ugc-size) + 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width: 699px) {
  /* Phones: max 4 videos (Liquid) → 4 × 72 px + 3 × 20 px = 348 px fits the 350 px column at 390; narrower phones shrink
     the circles so all 4 still fit — no sideways scroll, nothing cut off. */
  .hoa-ugc-stories__item { width: auto; flex: 0 1 var(--hoa-ugc-size); min-width: 0; }
  .hoa-ugc-stories__circle { width: 100%; height: auto; aspect-ratio: 1; }
  .hoa-ugc-stories__progress { width: calc(100% + 10px); height: calc(100% + 10px); }
  .hoa-ugc-stories__name { max-width: 100%; }
}

/* player */
.hoa-stories { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(21, 25, 28, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #ffffff; overflow: hidden; }
.hoa-stories:focus { outline: none; }
.hoa-stories::backdrop { background: transparent; }
html.hoa-stories-open { overflow: hidden; }
.hoa-stories__stage { position: absolute; inset: 0; margin: auto; height: min(86vh, 782px); width: calc(min(86vh, 782px) * 9 / 16); } /* no transform: the desktop close button is position: fixed */
.hoa-stories__slides { position: absolute; inset: 0; }
.hoa-stories__slide { position: absolute; inset: 0; overflow: hidden; background: #000000; visibility: hidden; opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.hoa-stories__slide.is-active { visibility: visible; opacity: 1; z-index: 1; }
.hoa-stories__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoa-stories__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0) 140px, rgba(0,0,0,0) calc(100% - 200px), rgba(0,0,0,.45)); }
.hoa-stories__bars { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 4px; z-index: 2; }
.hoa-stories__bar { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.38); overflow: hidden; }
.hoa-stories__bar > span { display: block; height: 100%; width: 0; background: #ffffff; }
.hoa-stories__who { position: absolute; left: 14px; top: 32px; right: 110px; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.hoa-stories__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid #ffffff; box-sizing: border-box; flex-shrink: 0; }
.hoa-stories__name { font-size: 14px; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoa-stories__controls { position: absolute; right: 14px; top: 32px; display: flex; gap: 8px; z-index: 2; }
.hoa-stories__icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.28); color: #ffffff; cursor: pointer; }
.hoa-stories__icon-sound, .hoa-stories.is-sound-on .hoa-stories__icon-muted { display: none; }
.hoa-stories.is-sound-on .hoa-stories__icon-sound { display: block; }
.hoa-stories__card { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: rgb(var(--text-color)); } /* style B „matinė balta" (Gytis 2026-09-28) */
.hoa-stories__thumb { width: 56px; height: 56px; object-fit: cover; background: #f4f6f7; flex-shrink: 0; }
.hoa-stories__info { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.hoa-stories__title { font-size: 13px; line-height: 1.3; }
.hoa-stories__price { font-size: 14px; font-weight: 500; }
.hoa-stories__price s { margin-inline-start: 6px; font-weight: 400; color: rgb(var(--text-color) / .65); }
.hoa-stories__form { display: contents; }
.hoa-stories__btn { flex-shrink: 0; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid rgb(var(--text-color)); background: transparent; color: rgb(var(--text-color)); font: 500 11.5px/1 var(--subheading-font-family, inherit); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.hoa-stories__btn--primary { border-color: #ea102b; background: #ea102b; color: #ffffff; }
.hoa-stories__arrow { display: none; }
@media screen and (min-width: 1000px) {
  .hoa-stories__slide.is-prev, .hoa-stories__slide.is-next { visibility: visible; opacity: .45; cursor: pointer; }
  .hoa-stories__slide.is-prev { transform: translateX(calc(-100% - 72px)) scale(.57); transform-origin: right center; }
  .hoa-stories__slide.is-next { transform: translateX(calc(100% + 72px)) scale(.57); transform-origin: left center; }
  .hoa-stories__slide.is-prev .hoa-stories__card, .hoa-stories__slide.is-next .hoa-stories__card,
  .hoa-stories__slide.is-prev .hoa-stories__who, .hoa-stories__slide.is-next .hoa-stories__who { visibility: hidden; }
  .hoa-stories__arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #ffffff; color: #252c31; transform: translateY(-50%); cursor: pointer; }
  .hoa-stories__arrow--prev { left: -58px; }
  .hoa-stories__arrow--next { right: -58px; }
  .hoa-stories__arrow[disabled] { opacity: .35; cursor: default; }
  .hoa-stories__close { position: fixed; right: 24px; top: 24px; width: 44px; height: 44px; background: rgba(255,255,255,.14); }
  .hoa-stories__controls { gap: 0; }
}
@media screen and (max-width: 999px) {
  .hoa-stories { background: #000000; }
  .hoa-stories__stage { position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; }
  .hoa-stories__bars { left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); }
  .hoa-stories__who { left: 12px; top: calc(26px + env(safe-area-inset-top, 0px)); }
  .hoa-stories__controls { right: 12px; top: calc(26px + env(safe-area-inset-top, 0px)); }
  .hoa-stories__card { left: 12px; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .hoa-stories__slide { transition: none; }
}

/* ===== FORMULA TABS BACKGROUND (home, timeline_QGJeWe) — 09-28, Gytis chose board option D =====
 * One texture behind the text side (tab row + text), the same on all three tabs, like the Sand
 * article banner. The timeline section has no background-image setting, hence CSS.
 * 10-28: Simona's own background image, see below. */
[id$="__timeline_QGJeWe"] .timeline__content-with-nav {
  /* 10-28 (Gytis: „change to this background"): Simona's whole backround.png (Drive 1TQQwZT298JWUWKNspAH_11CYvNl0pJwl, 2000² →
   * hoa-tabs-bg-simona.jpg 1600²) as the text side's background, anchored bottom right so her swipe stays in the corner.
   * Replaces the cut-out hoa-tabs-swipe.webp (the 10-27 cut-out never reached the store; the 10-21 swipe was still showing). */
  background-color: #f2f3f4; /* her ground (242/243/244) */
  background-image: url("hoa-tabs-bg-simona.jpg");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}
@media screen and (max-width: 999px) {
  /* 10-28 M1 (Gytis, https://claude.ai/artifact/JSM2SGMPC4XsiZ7RDjxFf2): stacked, one tab was ~920 px and the photo that changes sat
   * below the fold. Photo first at 4:3 (pump + label in frame), then tabs + text; no swipe and no 190 px swipe reserve on phones. */
  [id$="__timeline_QGJeWe"] .timeline { display: flex; flex-direction: column; }
  [id$="__timeline_QGJeWe"] .timeline__image-list { order: -1; }
  [id$="__timeline_QGJeWe"] .timeline__image-list img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; object-position: 50% 40%; }
  [id$="__timeline_QGJeWe"] .timeline__content-with-nav { background-image: none; }
  [id$="__timeline_QGJeWe"] .timeline__content-list { padding-block-end: 2rem; } /* 10-28 Gytis: a bit more grey under the text (gutter 20 → 32) */
}

/* ===== PDP ACTIVES v2 (10-20, Gytis: no AI pictures → her factory clip, same height as Rezultatai) =====
 * sections/hoa-actives.liquid on the .hoa-results layout: square video half (left) + one row per active
 * (name · Latin INCI in italics + one line). v1 (text-with-icons, 200 px round photos) rules removed. */
.hoa-actives .hoa-results__row { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
.hoa-actives .hoa-results__text p:first-child:has(> em:only-child) { font-size: .8125rem; letter-spacing: .02em; margin-block-end: .125rem; color: rgb(var(--text-color)); }
.hoa-results__media video-media { display: block; width: 100%; height: 100%; }
.hoa-results__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (min-width: 1000px) {
  .hoa-actives .hoa-results__row { grid-template-columns: 11rem minmax(0, 1fr); }
  .hoa-actives .hoa-results__media { align-self: stretch; } /* text taller than the square (narrow desktops) → video fills the height, no strip */
}
@media screen and (min-width: 1000px) and (max-width: 1399px) {
  /* 1280: the text half is 640 wide and the lines wrap; keep the section at the Rezultatai height */
  .hoa-actives .hoa-results__content { padding-inline: 3.5rem; }
  .hoa-actives .hoa-results__row { grid-template-columns: 9.5rem minmax(0, 1fr); padding-block: .875rem; }
}

/* ===== PDP REZULTATAI (09-28, canvas „Rezultatai — …", Gytis: „build it") — sections/hoa-results.liquid =====
 * Text half + photo half, like Sand's „benefits." (specifications), all rows open, no chevrons. 720 px tall at 1440
 * (the photo half is square). Marker = tick, or the number (34 px, own column, centred on the row) when tested. */
.hoa-results { display: grid; grid-template-columns: minmax(0, 1fr); }
.hoa-results__content { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 1.25rem 3rem; }
.hoa-results__content .prose { margin-block-end: 1.5rem; }
.hoa-results__intro { color: rgb(var(--text-color) / .8); }
.hoa-results__list { display: flex; flex-direction: column; border-block-end: 1px solid rgb(var(--text-color) / .15); }
.hoa-results__row { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: .875rem; row-gap: .5rem; align-items: center; padding-block: 1rem; border-block-start: 1px solid rgb(var(--text-color) / .15); }
.hoa-results__row--number { grid-template-columns: 6rem minmax(0, 1fr); column-gap: .5rem; row-gap: .375rem; }
.hoa-results__tick { display: flex; color: rgb(var(--text-color)); }
.hoa-results__number { grid-row: 1 / span 2; align-self: center; font-family: var(--heading-font-family); font-weight: 300; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoa-results__title { margin: 0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hoa-results__text { grid-column: 2; color: rgb(var(--text-color) / .8); font-size: .9375rem; line-height: 1.55; }
.hoa-results__text p { margin: 0; }
.hoa-results__source { margin-block-start: .875rem; font-size: .75rem; line-height: 1.5; color: rgb(var(--text-color) / .65); }
.hoa-results__source p { margin: 0; }
.hoa-results__media { order: -1; aspect-ratio: 1; overflow: hidden; }
.hoa-results__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (min-width: 1000px) {
  .hoa-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoa-results__media { order: 0; }
  .hoa-results--image-start .hoa-results__media { order: -1; }
  .hoa-results__content { padding: 2rem 5rem; }
  .hoa-results__row { padding-block: 1.0625rem; }
  .hoa-results__row--number { grid-template-columns: 7.75rem minmax(0, 1fr); } /* 09-28 Gytis: numbers 34 → 40 px */
  .hoa-results__number { font-size: 2.5rem; }
  .hoa-results__title { font-size: 1.125rem; }
}

/* ===== PDP DUK (09-28, Gytis: Sand split FAQ, 4–5 questions max, per product) =====
 * Stock faq section: layout split, card style „background", scheme-1 white (cards = scheme's secondary grey), no button.
 * Questions per product from custom.faq → metaobject hoa_faq (5 slots bound; Stretch skips empty ones natively). */
[id$="__hoa_faq"]:not(:has(details)) { display: none; } /* product without FAQ entry → no heading-only section */

/* ===== PDP ATSILIEPIMAI (09-28, Gytis: reviews wider + our section heading/style) — Judge.me widget in Stretch `apps` =====
 * Section header = Stretch's own (label + title) like every other section; Judge.me's duplicate title hidden.
 * The app block carries max width 1200 and centres itself → full container width, aligned with the heading.
 * New Judge.me widget (jm-* classes): text lives in .jm-text → theme fonts there only; stars are an icon font
 * (.jm-star-rating__font-icon) and must not get a text font. Body text to the theme's 15 px. */
[id$="__17905339550e3b8a82"] :is(.shopify-app-block, .jdgm-widget, .jdgm-review-widget) { max-width: none !important; margin-inline: 0 !important; }
[id$="__17905339550e3b8a82"] :is(.jm-review-widget-minimal-header__title, .jdgm-rev-widg__title) { display: none !important; }
[id$="__17905339550e3b8a82"] .jm-text { font-family: var(--text-font-family) !important; }
[id$="__17905339550e3b8a82"] .jm-review-content__title { font-family: var(--heading-font-family) !important; font-weight: 500 !important; font-size: 1.125rem !important; }
[id$="__17905339550e3b8a82"] .jm-review-content__body, [id$="__17905339550e3b8a82"] .jm-review-content__body .jm-text { font-size: .9375rem !important; line-height: 1.6 !important; }
[id$="__17905339550e3b8a82"] .jm-reviewer-info__name { font-size: .9375rem !important; }
[id$="__17905339550e3b8a82"] .jm-button { font-family: var(--text-font-family) !important; }

/* ===== PDP SAME-BACKGROUND JOINS ACROSS HIDDEN SECTIONS (09-28 QA, Gytis: „yes") =====
 * Stretch merges the gap between two same-colour sections only when they are DOM neighbours
 * (css-variables: .shopify-section:has(> .color-scheme--X) + …). Our per-product sections stay in the DOM when a
 * product has no content: hoa_set / hoa_actives / hoa_proof render empty, hoa_faq is hidden by CSS. The white
 * sections on either side then got both paddings (176 px desktop / 128 phone instead of 88 / 64).
 * Same flag the theme uses, set across the hidden ones. Colour-change joins are untouched. */
[id$="__main"] + [id$="__hoa_set"]:not(:has(> *)) + [id$="__hoa_steps"],
[id$="__hoa_steps"] + [id$="__hoa_actives"]:not(:has(> *)) + [id$="__hoa_proof"]:not(:has(> *)) + [id$="__17905339550e3b8a82"],
[id$="__17905339550e3b8a82"] + [id$="__hoa_faq"]:not(:has(details)) + [id$="__related-products"] {
  --section-has-same-background-as-previous-section: 1;
  --section-enable-padding-collapsing: 1; /* theme only derives this when the DOM neighbour has .section-spacing */
}
/* Judge.me's review list ends with its own 48 px padding under „Rodyti daugiau" → section spacing alone. */
[id$="__17905339550e3b8a82"] .jm-review-widget > .jm-stack,
[id$="__17905339550e3b8a82"] .jdgm-widget > .jm-stack { padding-bottom: 0 !important; }

/* ===== SCHEME-4 = BRAND NEUTRAL #5B6770 (09-28, Gytis) — footer + PDP ingredients =====
 * A mid-tone, not a near-black: Stretch's faded text (60 %) drops to 3.05:1 on it (footer newsletter consent line).
 * 90 % keeps it a step quieter than body text and passes AA at 4.7:1. */
.color-scheme--scheme-4 .text-subdued { color: rgb(var(--text-color) / .9); }

/* ===== BUTTON ROLES ON THE PDP (09-29, Gytis) — brand: red is for the moment that matters (buying) =====
 * Stretch's sticky add-to-cart is hard-coded outline on desktop (solid on phones): same buy action as the main
 * button → solid red on desktop too. Judge.me „Parašyti atsiliepimą" is a secondary action → dark outline, like the
 * filter/sort buttons beside it (its black fill competed with add-to-cart). Theme-only: Judge.me's own colours
 * are app-wide and also drive the live Dawn store, so they are not changed. */
/* 10-21 Gytis: the wash's long title ran into the button (3 px). Stretch's bar grid has no column gap; 32 px = its right padding, the title wraps to 2 lines (bar stays 104 px). */
.product-sticky-add-to-cart { column-gap: 2rem; }
product-sticky-add-to-cart .button--outline {
  --button-text-color: var(--button-text-primary);
  background: rgb(var(--button-background-primary));
  border-color: rgb(var(--button-background-primary));
  color: rgb(var(--button-text-primary));
}
[id$="__17905339550e3b8a82"] .jm-button--primary {
  background: transparent !important;
  color: #252c31 !important;
  border: 1px solid #252c31 !important;
}
[id$="__17905339550e3b8a82"] .jm-button--primary .jm-text { color: inherit !important; }
/* Hover = the theme's own "glowing" sweep (button_animation: glowing), no colour change, like every other CTA. */
[id$="__17905339550e3b8a82"] .jm-button { position: relative; overflow: hidden; }
@media screen and (pointer: fine) {
  [id$="__17905339550e3b8a82"] .jm-button::after {
    --glowing-shape-width: min(40px, 60%);
    content: ""; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
    clip-path: polygon(calc(var(--glowing-shape-width) * .25) 0%, var(--glowing-shape-width) 0%, calc(var(--glowing-shape-width) * .75) 100%, 0% 100%);
    background-color: rgb(37 44 49 / .1);
    transform: translateX(calc(-1 * var(--glowing-shape-width)));
    transition: transform .55s cubic-bezier(.19, 1, .22, 1);
  }
  [id$="__17905339550e3b8a82"] .jm-button:hover::after { transform: translateX(100%); }
}

/* WASH PHONE HEADING DROP (09-29) → replaced by „WASH SECTION ASSEMBLE" (10-21) at the end of this file. */

/* ===== PDP ATSILIEPIMAI LAYOUT (09-29, Gytis: „update reviews block", canvas 6rSSadmx… row 2) =====
 * Desktop: summary column left (average, write button, filters, AI highlights), review list right, hairline between
 * reviews. Stars stay Judge.me's #F6A429 (Gytis). Pin icon hidden; „Patvirtinta" as quiet text, not a boxed tag.
 * Phones keep Judge.me's single column. Date format (01/14/2025) is a Judge.me admin setting, not CSS. */
[id$="__17905339550e3b8a82"] .jm-review-item__pin-icon { display: none !important; }
[id$="__17905339550e3b8a82"] :is(.jm-verified-buyer-badge, .jm-verified-buyer-badge__text) { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; }
[id$="__17905339550e3b8a82"] .jm-verified-buyer-badge__text { color: rgb(var(--text-color) / .65) !important; }
[id$="__17905339550e3b8a82"] .jm-review-content__title { font-size: 1.25rem !important; }
[id$="__17905339550e3b8a82"] .jm-review-highlights__text { font-size: .9375rem !important; line-height: 1.5; }
[id$="__17905339550e3b8a82"] :is(.jm-review-widget__header, .jm-center) .jm-button { min-height: 45px !important; height: 45px; text-transform: uppercase; letter-spacing: .05em !important; font-size: .8125rem !important; font-weight: 400 !important; }
[id$="__17905339550e3b8a82"] :is(.jm-review-widget__header, .jm-center) .jm-button .jm-text { font-size: .8125rem !important; font-weight: 400 !important; letter-spacing: .05em !important; }
[id$="__17905339550e3b8a82"] .jm-review-widget__header .jm-button:not(.jm-action-buttons__button) { width: 45px; }
[id$="__17905339550e3b8a82"] :is(.jm-sort-filter, .jm-sort-filter__select) { width: 45px !important; min-width: 45px; }
/* „Rodyti daugiau": centred under the list, theme button size. */
[id$="__17905339550e3b8a82"] .jm-center:has(> .jm-button) { max-width: none !important; }
[id$="__17905339550e3b8a82"] .jm-center > .jm-button { padding-inline: 40px !important; }
@media screen and (min-width: 1000px) {
  [id$="__17905339550e3b8a82"] .jm-review-widget__header-and-body { display: grid !important; grid-template-columns: 340px minmax(0, 1fr); column-gap: 72px !important; align-items: start; }
  [id$="__17905339550e3b8a82"] .jm-review-widget__header > .jm-cluster,
  [id$="__17905339550e3b8a82"] .jm-review-widget-minimal-header__button-and-filters { flex-direction: column !important; align-items: stretch !important; }
  [id$="__17905339550e3b8a82"] .jm-review-widget-minimal-header__action-buttons,
  [id$="__17905339550e3b8a82"] .jm-action-buttons__button { width: 100%; }
  [id$="__17905339550e3b8a82"] .jm-review-widget-minimal-header__filters .jm-filters { justify-content: flex-start !important; }
  [id$="__17905339550e3b8a82"] .jm-average-rating-display--minimal-header .jm-text:first-of-type { font-family: var(--heading-font-family) !important; font-weight: 300 !important; font-size: 4rem !important; line-height: 1 !important; }
  [id$="__17905339550e3b8a82"] .jm-average-rating-display--minimal-header .jm-cluster { align-items: baseline !important; }
  [id$="__17905339550e3b8a82"] .jm-load-more-pagination { padding-inline-start: 412px !important; }
  [id$="__17905339550e3b8a82"] .jm-review-widget__header { position: sticky; top: calc(var(--header-height, 72px) + 24px); }
}

/* JUDGE.ME STARS = THEME STAR (09-29, Gytis: "match judge.me stars, the actual star icon"). Judge.me's font glyph is
 * hidden and Stretch's star-rating icon (snippets/icon.liquid) is painted in its place, Judge.me's star colour #F6A429.
 * Empty = the theme's 40 % star. Tags come from the script in snippets/hoa-rating.liquid. */
.jm-star-rating__font-icon[data-hoa-star] {
  color: transparent !important;
  background-color: var(--jm-review-widget-star-and-histogram-color, #F6A429);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='m6.5 0 1.607 4.623 4.893.1-3.9 2.956 1.417 4.685L6.5 9.568l-4.017 2.796L3.9 7.679 0 4.723l4.893-.1L6.5 0Z'/%3E%3C/svg%3E") center / 80% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='m6.5 0 1.607 4.623 4.893.1-3.9 2.956 1.417 4.685L6.5 9.568l-4.017 2.796L3.9 7.679 0 4.723l4.893-.1L6.5 0Z'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.jm-star-rating__font-icon[data-hoa-star="empty"] { opacity: .4; }
.jm-star-rating__font-icon[data-hoa-star="half"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 0v9.568l-4.017 2.796L3.9 7.679 0 4.723l4.893-.1L6.5 0Z'/%3E%3Cpath fill-opacity='.2' d='m6.5 0 1.607 4.623 4.893.1-3.9 2.956 1.417 4.685L6.5 9.568V0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 0v9.568l-4.017 2.796L3.9 7.679 0 4.723l4.893-.1L6.5 0Z'/%3E%3Cpath fill-opacity='.2' d='m6.5 0 1.607 4.623 4.893.1-3.9 2.956 1.417 4.685L6.5 9.568V0Z'/%3E%3C/svg%3E");
}

/* STICKY ADD-TO-CART HOVER (09-29, Gytis): the desktop button is recoloured solid red above, but its "glowing" sweep
 * still used the outline colour (red on red = invisible). White 10 %, same as the main add-to-cart. */
product-sticky-add-to-cart .button--outline .button__content[glowing]::after { background-color: rgb(var(--button-text-primary) / .1); }

/* PDP ACCORDION LISTS (09-29, Gytis): lists in the product drawers get the theme's small square (as before section
 * labels) instead of dots, tight spacing between items. */
.product-info .accordion .prose ul { list-style: none; padding-inline-start: 0; }
.product-info .accordion .prose ul > li { position: relative; padding-inline-start: 1.25rem; margin-block: .5rem 0; }
.product-info .accordion .prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 6px; height: 6px; background: currentColor;
}

/* JUDGE.ME "PRODUKTO VERSIJOS ATSILIEPIMAS" CARD (09-29, Gytis: the beige did not fit). Judge.me tints it from the star
 * colour (#F6A429); the theme's light section grey instead, square like every other card. */
[id$="__17905339550e3b8a82"] .jm-product-variant-card { background: rgb(244 246 247) !important; border-radius: 0 !important; }
[id$="__17905339550e3b8a82"] .jm-product-variant-card__thumbnail { background: #ffffff; border-radius: 0 !important; }

/* COLLECTION BUBBLES (09-29, Gytis: images in the collection banner's round links). Her packshots sit on white, so
 * on the white banner the circle vanished and the product was tiny: light section grey behind, the white photo
 * background multiplied into it, and a closer crop. `scale` composes with the theme's hover zoom (transform). */
.collection-quick-navigation__item > .rounded-full { background: rgb(244 246 247); }
.collection-quick-navigation__item > .rounded-full img { mix-blend-mode: multiply; scale: 1.35; }

/* COLLECTION TILE FILLS THE CARD HEIGHT (09-29, Gytis). With names below the card photo, Stretch stops the grid tile
 * at the photo row and leaves the name row empty (a white strip under the photo). Span the whole card instead, like
 * the theme already does for cards with the name inside. Tablet/desktop only; phones show the tile full width. */
@media screen and (min-width: 700px) {
  @supports (grid-template-rows: subgrid) {
    .product-list:has(.product-card--info-outside) .product-list__promo .content-box {
      grid-row: span calc(var(--product-card-row-count) * var(--product-list-promo-row-span));
    }
  }
}

/* COLLECTION TILE AFTER THE PRODUCTS ON PHONES (09-29, Gytis). Full width, the tile was a whole screen of photo
 * between product rows and sent sets-campaign visitors to the wash before they saw 3 of the 5 sets. Phones: last in
 * the grid; its "not last child" negative bottom margin is cleared since it no longer sits before a row. */
@media screen and (max-width: 699px) {
  .product-list__promo { order: 1; }
  .product-list__promo:not(:last-child) { margin-block-end: 0; }
}

/* COLLECTION BOTTOM SPACING = EVERY OTHER SECTION (09-29, Gytis: consistent with home/PDP). Stretch caps the collection
 * grid's bottom padding at min(4rem, section spacing) = 64 px, while every other section ends on the full
 * --section-vertical-spacing (88 px desktop). Uncapped. */
.collection { padding-block-end: var(--section-vertical-spacing); }


/* ===== BUTTON SYSTEM (09-29, Gytis: "buttons all over the place") — three roles, one rule each =====
 * 1 BUY = red filled: the scheme's primary button (add to cart). Nothing else is red.
 * 2 EVERYTHING ELSE on a light background = outline in the section's text colour (slate; white on dark sections).
 *   Stretch's outline buttons borrowed the primary colour, so „Žiūrėti prausiklį" / „Skaityti įrašus" came out red.
 * 3 ON A PHOTO or dark background = white filled (scheme-3 / scheme-4 primary).
 * The sticky add-to-cart keeps its own red rule above (higher specificity). */
/* Stretch's button snippet writes --button-text-color inline on outline buttons, hence !important; the sticky
 * add-to-cart (an outline button on desktop) keeps its white-on-red the same way. */
.button--outline { --button-text-color: var(--text-color) !important; }
product-sticky-add-to-cart .button--outline { --button-text-color: var(--button-text-primary) !important; }
/* Floating „Rūšiuoti" on phones: role 2, filled with the page background so content does not show through. */
.collection__floating-button .button {
  --button-background: var(--background);
  --button-text-color: var(--text-color);
  --button-border-color: var(--text-color);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  border-color: rgb(var(--text-color));
}

/* FOOTER CONTACTS = THE MENU COLUMNS' RHYTHM (09-29, Gytis: spacing looked odd). The e-mail and phone are one text
 * paragraph (22 px line pitch, underlined) beside link lists with a 10 px gap between items and no underline until
 * hover. Same gap, same Stretch „link-reversed" underline-on-hover. */
.footer__block--text p:has(> a[href^="mailto:"], > a[href^="tel:"]) {
  display: grid;
  justify-items: start;
  row-gap: 10px;
}
.footer__block--text p:has(> a[href^="mailto:"], > a[href^="tel:"]) > br { display: none; }
.footer__block--text p > a:is([href^="mailto:"], [href^="tel:"]) {
  background: linear-gradient(to right, currentColor, currentColor) 0 100% / 0 1px no-repeat;
  background-position-x: var(--transform-origin-end);
  text-decoration: none;
  transition: background-size .2s ease-in-out;
}
/* !important: Stretch's .prose a:hover (higher specificity) sets the underline to 0 and anchors it right on hover. */
.footer__block--text p > a:is([href^="mailto:"], [href^="tel:"]):hover {
  background-size: 100% 1px !important;
  background-position-x: var(--transform-origin-start) !important;
}

/* LABELS 12 → 13 PX ON DESKTOP (09-29, Gytis: older customers). One variable drives every small uppercase label:
 * header menu, section labels, footer headings. Desktop only — phones already get the footer headings at 13 px and
 * the rest one size down by design. */
@media screen and (min-width: 1000px) {
  :root { --subheading-font-size: 0.8125rem; }
}
/* …except the header menu, which stays at 12 px at every desktop width (09-30, Gytis: labels and footer up, menu not;
 * at 13 px its six items also wrap to two lines on 1366 px laptops). */
@media screen and (min-width: 1000px) {
  .header__primary-nav { --subheading-font-size: 0.75rem; }
}

/* COLLECTION TILE WITHOUT CONTENT = NO TILE (09-29 QA). The tile reads the collection's „Plytelė: …" fields; a
 * collection without them (Shopify's /collections/all, any new one) rendered an empty 2-slot box (48 px strip on
 * phones). No image → the tile is not shown and the products close up. */
.product-list__promo:not(:has(img, video)) { display: none; }

/* BLOG CARDS, ONE RATIO (09-30). Article images come in every shape (portrait beach, 16:9 diptychs), so the cards
 * started at different heights. 4:5 cover = the home blog carousel (sections/blog-posts.liquid, Gytis: same as HP);
 * used by the blog list, "Skaityti daugiau" and search. */
.blog-post-card__image-container { aspect-ratio: 4 / 5; }
.blog-post-card__image-container > img { width: 100%; height: 100%; object-fit: cover; }

/* FEATURED COLLECTIONS: SAME HEADING-TO-CARDS GAP WITH OR WITHOUT „RODYTI VISKĄ" (09-30, Gytis, About page vs home).
 * With the view-all button on, Stretch prints a second row above the cards holding the phone copy of the button:
 * ≥1000 px it is empty (button md:hidden) but still costs a 48 px grid gap (gap 91 vs home 40); <1000 px the button sits
 * between heading and cards (104 vs 32). Empty row gone on desktop; on phones the button moves below the cards. */
@media screen and (min-width: 1000px) {
  .featured-collections-products .h-stack:not(:has(.prose)) { display: none; }
}
@media screen and (max-width: 999px) {
  .featured-collections-products .h-stack:not(:has(.prose)) { order: 2; }
}
/* The tab list is overflow-y: hidden and exactly one line tall, so the tails of ą ę į ų are cut
 * („Atraskite mūsų priežiūrą"). Room above and below, cancelled by margins — nothing moves. */
.featured-collections-header__tab-list { padding-block: 10px; margin-block: -10px; }

/* BLOG LIST SPACING (09-30, Gytis: "too big compared to HP/PDP"). Stretch pads the list wrapper by the gutter
 * (48 desktop / 20 phone) to clear the topic-filter row. With the row off, that stacked on the banner's own 48
 * and put the title 96px above the cards (home heading → content is ~58). Only when the list is the first thing
 * in the container, so turning the filters back on keeps Stretch's spacing. */
.shopify-section--main-blog .container > .blog-post-list-wrapper:first-child { padding-block-start: 0; }

/* ARTICLE "SKAITYTI DAUGIAU" (09-30, Gytis picked B). The home blog carousel reused on article pages shows 3 posts
 * (current one skipped), so Stretch stretched them to thirds, gapless, 448x560. Desktop: home card size (quarter
 * columns, 4:5) with gutter gaps, 4th slot left empty. Phones/tablets keep the home carousel. */
@media screen and (min-width: 1000px) {
  [id$="__read_more"].shopify-section--blog-posts {
    --blog-post-list-grid: auto / repeat(4, minmax(0, 1fr)) !important;
    --blog-post-list-gap: 0 var(--container-gutter) !important;
    --blog-post-card-padding-inline: 0 !important;
  }
}

/* CART DRAWER (09-30, replaces Kaching Cart; canvas WiAPhgnY…). Trust lines under „Derinkite su", gift wrap toggle
 * above the discount field, payment icons under the button (the footer's set, one centred block). */
/* 10-27 (Gytis, option A on CuuG6vRB…): cross-sell cards look like the PDP pairs (.hoa-pair__card): white card, thin border,
 * photo on a grey tile. Packshots carry their own white ground, so the grey sits on the link behind the image and multiply
 * lets it show through. !important: Stretch sets the card background inline (snippets/surface.liquid). */
.cart-drawer__cross-sell .product-cross-sell--horizontal { background-color: #ffffff !important; border: 1px solid #e3e6e8; }
.cart-drawer__cross-sell .product-cross-sell--horizontal > a { display: block; background: #f3f6f9; line-height: 0; isolation: isolate; }
.cart-drawer__cross-sell .product-cross-sell--horizontal img { background: transparent; mix-blend-mode: multiply; }
.hoa-cart-trust { font-size: 0.875rem; }
.hoa-cart-trust svg { flex-shrink: 0; }
.hoa-gift-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; }
.hoa-gift-wrap__image { width: 2.75rem; height: 2.75rem; object-fit: cover; background: rgb(var(--secondary-background, 244 246 247)); }
.hoa-gift-wrap__text { display: grid; gap: 0.125rem; cursor: pointer; }
.hoa-gift-wrap__switch { appearance: none; margin: 0; width: 2.5rem; height: 1.5rem; border-radius: 1rem; background: #d5d9de; position: relative; cursor: pointer; transition: background .2s; }
.hoa-gift-wrap__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.hoa-gift-wrap__switch:checked { background: rgb(var(--text-color)); }
.hoa-gift-wrap__switch:checked::after { transform: translateX(1rem); }
.hoa-gift-wrap__switch:disabled { opacity: .5; }
.hoa-gift-wrap__switch:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: 2px; }
/* Icons: one wrapping row — banks, then Apple Pay / Google Pay, then cards. 34 px each: 13 in one row in the 536 px
 * desktop drawer; on phones 8 + 5 (Gytis: wallets up into the bank row). */
.hoa-payments.hoa-payments--cart { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem; }
.hoa-payments--cart ul { display: contents; }
.hoa-payments--cart li { order: 3; }
.hoa-payments--cart .hoa-payments__banks li { order: 1; }
.hoa-payments--cart li:has(svg[aria-labelledby="pi-apple_pay"], svg[aria-labelledby="pi-google_pay"]) { order: 2; }
.hoa-payments--cart svg { width: 2.125rem; height: auto; display: block; }
/* Phones (Gytis 09-30: 9 + 4 looked unfinished): always two rows — the 6 bank links, then the 7 cards and wallets
 * (Apple Pay / Google Pay first). A full-width break after the banks, so the split does not depend on the width. */
@media screen and (max-width: 699px) {
  .hoa-payments--cart::before { content: ""; flex-basis: 100%; order: 2; }
  .hoa-payments--cart li { order: 4; }
  .hoa-payments--cart li:has(svg[aria-labelledby="pi-apple_pay"], svg[aria-labelledby="pi-google_pay"]) { order: 3; }
}
/* Discount = one collapsible row (canvas, 09-30): label + applied codes as small grey tags + chevron; opens the field
 * with „Pritaikyti" beside it. The tags sit over the row's right side so their × stays clickable. */
/* Bottom line only: the footer's own top border already sits above the row (two lines stacked, Gytis 09-30);
 * a top line only when the gift wrap row is above it. */
.hoa-discount { border-bottom: 1px solid rgb(var(--text-color) / 0.12); }
.hoa-gift-wrap + .hoa-discount, .hoa-gift-wrap ~ .hoa-discount { border-top: 1px solid rgb(var(--text-color) / 0.12); }
.hoa-discount__row { position: relative; }
.hoa-discount__toggle { display: flex; width: 100%; min-height: 2.75rem; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.875rem; text-align: start; }
.hoa-discount__toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.hoa-discount__toggle:disabled { cursor: default; }
/* Same text start as the phone line under the cross-sell: icon in a 20 px slot (14 px glyph + 3 px each side), 12 px gap. */
.hoa-discount__toggle > .h-stack { gap: 0.75rem; }
.hoa-discount__toggle > .h-stack > svg { margin-inline: 3px; flex-shrink: 0; }
/* When the row is the first thing in the footer (no gift wrap), it starts at the footer's divider: the row's own
 * 44 px gives the space above and below the label (was 20/28 px padding + the row, Gytis: too much padding). */
.cart-drawer__footer-inner:has(> .v-stack > .hoa-discount:first-child) { padding-top: 0; }
.hoa-discount__tags { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); }
.hoa-discount .discount-badge { display: inline-flex; align-items: center; gap: 0.375rem; background: rgb(var(--secondary-background, 244 246 247)); color: rgb(var(--text-color)); font-size: 0.75rem; line-height: 1; padding: 0.375rem 0.5rem; }
.hoa-discount__panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; padding-bottom: 0.75rem; }
.hoa-discount__apply { min-height: 2.75rem; }

/* EMPTY SEARCH PAGE (09-30). Stretch's .empty-state pads 200px top and bottom on desktop (120 on phones), so /search
 * with no query put "Paieška" half-way down the screen. Search page only, down to the section rhythm 88/64.
 * Cart/blog empty states keep the theme value. */
.shopify-section--main-search .empty-state { padding-block: 4rem; }
@media screen and (min-width: 700px) {
  .shopify-section--main-search .empty-state { padding-block: 5.5rem; }
}

/* FREE SHIPPING BAR FILL = RED (09-30, Gytis). Only the fill; the track stays the theme's 20 % grey. Same red as the
 * checkout button (#ea102b). Applies in the drawer and on the cart page. */
.free-shipping-bar .progress-bar::before { background: #ea102b; }

/* ===== PDP PER-PRODUCT ROWS (10-03, Simona's PDP Doc) =====
 * Facts row (liquid block id icons_with_text_VqRAcH) and value line read product metafields; empty → hide the
 * wrapper too, or the bordered row shows as two lines. „Kaip naudoti" (hoa_steps, stock multi-column) reads
 * custom.steps: a step without a title hides its column (the static „01" number would stay), no steps → no section.
 * 10-30 (Gytis): steps without any photo or video → no section either (roller: text only, Simona has no media for it);
 * its how-to stays in the buy-block „Kaip naudoti" accordion. Products with step media (demo included) are unchanged. */
.product-info__block-item[data-block-id="icons_with_text_VqRAcH"]:not(:has(.v-stack)),
.product-info__block-item[data-block-id="hoa_value_line"]:not(:has(p)) { display: none; }
[id$="__hoa_steps"] .multi-column__item:not(:has(.h4)) { display: none; }
[id$="__hoa_steps"]:not(:has(.multi-column__item .h4)),
[id$="__hoa_steps"]:not(:has(.multi-column__item :is(img, video))) { display: none; }
/* Results rows with the manufacturer's sentence only (no separate text line): centre it beside the number. */
.hoa-results__row--number .hoa-results__title:last-child { grid-row: 1 / span 2; align-self: center !important; }

/* Sets (10-04): the grey „Rinkinį sudaro" sits directly above the reviews once the steps are hidden (steps now per product).
 * The same-background join above was written when the white steps showed on every product, so it removed the reviews'
 * top padding under a grey section. Undo the join only in that case; tools (steps visible) and the hoodie (set empty) keep it. */
[id$="__hoa_set"]:has(> *) + [id$="__hoa_steps"]:not(:has(.multi-column__item .h4)) + [id$="__hoa_actives"] + [id$="__hoa_proof"] + [id$="__17905339550e3b8a82"],
[id$="__hoa_set"]:has(> *) + [id$="__hoa_steps"]:not(:has(.multi-column__item :is(img, video))) + [id$="__hoa_actives"] + [id$="__hoa_proof"] + [id$="__17905339550e3b8a82"] {
  --section-has-same-background-as-previous-section: 0;
  --section-enable-padding-collapsing: 0;
}


/* ===== HOME VISUAL QA (10-21, Gytis picked 3, 4, 5, 6, 8, 9 from https://claude.ai/artifact/U74czXejdWo4ULZuoP6i1x) =====
 * Home only: scoped by section id, or by body:has(hoa_hero) — that section exists only on the home page. */

/* 3 · Founder quote: the theme's grey mark sat on top of the typed „ (10-21: first moved above, Gytis: keep it beside
 * „Her). Now inline at the start of the first line: hangs just left of „ on desktop, sits before it on phones. */
[id$="__press"] .press-carousel__quotation--with-mark:before {
  position: relative; display: inline-block; inset: auto; z-index: 0;
  /* 10-21 Gytis (twice): higher and closer to „Her. It hangs like an opening quote: its foot at about mid-cap of the
   * H (measured), not on the baseline; .1em gap to „ on desktop. */
  width: .9em; height: .83em; margin: 0 .14em 0 0; vertical-align: .38em;
}
@media screen and (min-width: 700px) {
  [id$="__press"] .press-carousel__quotation--with-mark:before { width: 1.05em; height: .97em; margin: 0 .1em 0 -1.15em; vertical-align: .42em; }
}

/* 4 · Review arrows square and transparent (brand: nothing rounded); quotes one step smaller on phones (were 4 lines at 25 px). */
[id$="__testimonials"] .circle-button, [id$="__testimonials"] .circle-button:before { border-radius: 0; }
[id$="__testimonials"] .circle-button:before { background: transparent; border: 1px solid rgb(var(--text-color) / .25); }
@media screen and (max-width: 699px) {
  [id$="__testimonials"] .h4, [id$="__press"] .press-carousel__quotation { font-size: 1.25rem; line-height: 1.35; }
}

/* 5 · Trust row: all four visible on phones and tablets (2 × 2), no one-at-a-time slider. */
@media screen and (max-width: 999px) {
  /* 10-21 Gytis picked B (https://claude.ai/artifact/95PVPUwhapiD2Xgpfmo4uF): one list, icon left, title + line right,
   * hairlines between rows, inside the site gutter (the first list had lost it and touched the screen edge). */
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__carousel { grid: auto / minmax(0, 1fr); row-gap: 0; overflow: visible; margin-inline: 0; padding-inline: var(--container-gutter, 20px); }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item { padding: 1rem 0; border-block-start: 1px solid rgb(var(--text-color) / .12); }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item:last-child { border-block-end: 1px solid rgb(var(--text-color) / .12); }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item .prose { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: .875rem; row-gap: .25rem; justify-items: start; align-items: start; text-align: start; }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item .prose > * { margin: 0 !important; grid-column: 2; }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item .prose > svg { grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; margin-block-start: 1px !important; }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item .h7 { font-size: 1rem; }
  [id$="__trust_icons_Y9eDiJ"] .trust-icons__item .text-subdued { font-size: .875rem; line-height: 1.45; }
  [id$="__trust_icons_Y9eDiJ"] carousel-navigation, [id$="__trust_icons_Y9eDiJ"] .scroll-marker-group { display: none; }
}
}

/* 8 · Nothing under 13 px on the home page (her older customers read on phones). */
[id$="__featured-collections"] .badge { font-size: .8125rem; padding: .2rem .45rem; }
body:has([id$="__hoa_hero"]) main .subheading { font-size: 13px; }
body:has([id$="__hoa_hero"]) main .button__content { font-size: 13px; }
[id$="__ugc_testimonials_TEST"] :is(.ugc-card__who, .ugc-card__product, .ugc-card__toggle) { font-size: 13px; }


/* ===== SPACE ABOVE THE FOOTER: 72 px on every page, desktop and phone (10-21, Gytis: "consistent in all pages,
 * desktop a bit too large"). Was 88 desktop / 64 phone (theme loose spacing), 72 on the home phone (09-26 pick),
 * 48 on the plain page template. One rule per way a last section makes its bottom space. Empty states (404, empty
 * cart) centre themselves and are left alone. */
main > .shopify-section:nth-last-child(1 of .shopify-section) .section-spacing:not(.section-spacing .section-spacing),
main > .shopify-section--main-blog:nth-last-child(1 of .shopify-section) .blog-post-list-wrapper,
main > .shopify-section:nth-last-child(1 of .shopify-section) .collection { padding-block-end: 4.5rem !important; }

/* Menu drawer „Atgal": keep the soft grey fill (secondary action), square like every other button (10-21). */
.back-button { border-radius: 0; }


/* ===== HERO MOTION (10-21, Gytis picked 1 + 2 + 3) — sections/hoa-hero.liquid, blocks/hoa-trust-figures.liquid =====
 * Calm brand (design.md U2a: calm ×1.3 on the 500 ms reveal = 650 ms, ease-out token). CSS only except the count-up (1.4 s of rAF),
 * so it costs nothing while the page loads. The photo is the LCP and is never hidden: it is on screen at once and only
 * drifts after. Reduced motion: text fades without travel, no drift, numbers shown final. */
@keyframes hoa-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes hoa-fade-in { from { opacity: 0; } }
@keyframes hoa-drift { from { transform: scale(1); } to { transform: scale(1.04); } }
.hoa-hero { --hoa-ease-out: cubic-bezier(0.22, 1, 0.36, 1); }

/* 1 · text arrives in reading order: heading, line, button, figures — 80 ms apart, 16 px rise, once */
.hoa-hero__content .prose > * { animation: hoa-rise 650ms var(--hoa-ease-out) both; }
.hoa-hero__content .prose > :nth-child(2) { animation-delay: 80ms; }
.hoa-hero__content .prose > :nth-child(3) { animation-delay: 160ms; }
.hoa-hero__content .prose > :nth-child(4) { animation-delay: 240ms; }
.hoa-hero__content .prose > :nth-child(n + 5) { animation-delay: 320ms; }

/* 2 · the photo drifts in about 4 % over 14 s after it has painted, then stays */
.hoa-hero__media { overflow: hidden; }
.hoa-hero__media img { animation: hoa-drift 14s var(--hoa-ease-out) 200ms both; transform-origin: 60% 40%; }

/* 3 · „2000+" and „4,7" count up once. 10-28: the number is written into data-n by the script in
 * blocks/hoa-trust-figures.liquid; the registered-integer counter it replaced stayed at 0 on iPhone Safari (Gytis). */
@media (prefers-reduced-motion: no-preference) {
  .hoa-count {
    display: inline-block;
    min-width: calc((var(--digits) + 1) * 1ch);
    font-variant-numeric: tabular-nums;
  }
  .hoa-count > .hoa-count__final { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hoa-count::after { content: attr(data-n); }
  .hoa-count--decimal { min-width: 0; } /* always „X,Y": no reserved width, so the stars keep their 10 px gap (10-21 Gytis) */
}
@media (prefers-reduced-motion: reduce) {
  .hoa-hero__content .prose > * { animation-name: hoa-fade-in; }
  .hoa-hero__media img { animation: none; }
}


/* ===== WASH SECTION ASSEMBLE (10-21, Gytis picked effect 1 of https://claude.ai/artifact/Nu9ADFhbNYuqQJMPLv21Nn) =====
 * Replaces Stretch's dynamic-grid parallax on this section only. The theme drifts every cell for the whole time the
 * section is on screen and never settles, which is how the bottle slid over the „Perkamiausias" label. Now the section
 * builds itself while it scrolls in and then holds: the two words slide out from behind the bottle, the bottle rises
 * from lower down and grows, then the texts and „prausiklis" + price + buttons. Scroll-linked (follows the thumb both
 * ways), CSS only, on the section's own view timeline (the theme's --dynamic-grid timeline ran ~2× faster than the
 * section). No support or reduced motion → the finished layout, still. */
@keyframes hoa-wash-in-l { from { transform: translateX(30vw); opacity: 0; } }
@keyframes hoa-wash-in-r { from { transform: translateX(-30vw); opacity: 0; } }
@keyframes hoa-wash-bottle { from { transform: translateY(24vh) scale(.8); } }
@keyframes hoa-wash-up { from { transform: translateY(30px); opacity: 0; } }
@keyframes hoa-wash-drop { from { transform: translateY(-40px); opacity: 0; } }
/* 10-26: the layers below stay inside the section; without this the label (z 4) drew over the sticky header (also z 4). */
.shopify-section[id$="__hoa_wash_type"] { isolation: isolate; }
[id$="__hoa_wash_type"] [id$="wt_label"] { z-index: 4; }
[id$="__hoa_wash_type"] [id$="wt_bottle"] { z-index: 3; }
[id$="__hoa_wash_type"] :is([id$="wt_heading"], [id$="wt_heading_r"]) { z-index: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [id$="__hoa_wash_type"] { view-timeline-name: --hoa-wash; }
    [id$="__hoa_wash_type"] .dynamic-grid__cell {
      animation-timeline: --hoa-wash !important;
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
      animation-fill-mode: both !important;
    }
    [id$="__hoa_wash_type"] [id$="wt_label"] { animation: none !important; }
    [id$="__hoa_wash_type"] [id$="wt_heading"] { animation-name: hoa-wash-in-l !important; animation-range: entry 20% entry 85% !important; }
    [id$="__hoa_wash_type"] [id$="wt_heading_r"] { animation-name: hoa-wash-in-r !important; animation-range: entry 20% entry 85% !important; }
    [id$="__hoa_wash_type"] [id$="wt_heading_m"] { animation-name: hoa-wash-drop !important; animation-range: entry 10% entry 50% !important; }
    [id$="__hoa_wash_type"] [id$="wt_bottle"] { animation-name: hoa-wash-bottle !important; animation-range: entry 0% entry 90% !important; }
    [id$="__hoa_wash_type"] :is([id$="wt_left"], [id$="wt_right"]) { animation-name: hoa-wash-up !important; animation-range: entry 60% entry 95% !important; }
    [id$="__hoa_wash_type"] :is([id$="wt_cta_desktop"], [id$="wt_cta_mobile"]) { animation-name: hoa-wash-up !important; animation-range: entry 65% entry 100% !important; }
  }
}


/* ===== FOOTER DROP (10-21, Gytis picked A, https://claude.ai/artifact/FxKwztEaWe8vZAAhbfy9Vh) — snippets/hoa-footer-drop.liquid =====
 * Her gel drop draws in (3.2 s) when the footer is in view, fills with soft light (2.4 s), breathes; two ripples every
 * 9 s; five bubbles rise past it (desktop). White lines on the slate, never under text. Paused off screen, lit and still
 * for reduce motion. Desktop: under the Kontaktai block (the only text block). Below 1000 px: beside its two lines. */
.footer__block--text:has(.hoa-drop) { position: relative; }
.hoa-drop { position: absolute; pointer-events: none; z-index: 0; }
.hoa-drop--col { display: none; }
@media screen and (min-width: 1000px) {
  /* the footer blocks all stretch to the row height, so measure from the block's top, not its bottom:
   * the two contact lines end ~80 px down; the drop starts at 100 px, ~50 px above the bottom bar (QA 1440/1280) */
  .hoa-drop--col { display: block; left: 44px; top: 100px; width: 84px; height: 112px; }
  .hoa-drop--news { display: none; }
}
@media screen and (min-width: 950px) and (max-width: 1259px) {
  /* Kontaktai sits on its own row, left, from ~950 to 1259 px (measured): the drop sits to the right of the two lines */
  .footer .hoa-drop--col { right: auto; left: calc(100% + 40px); top: -4px; width: 72px; height: 96px; } /* .footer: beats the phone rule further down (955–999) */
}
@media screen and (max-width: 999px) {
  /* 10-21 Gytis: the newsletter-corner drop read too small. Phones/tablets: beside the two contact lines, right edge,
   * about twice the size; the two bubbles that would rise past the screen edge are left out */
  .hoa-drop--col { display: block; left: auto; right: 24px; top: 6px; width: clamp(42px, 14vw, 58px); height: calc(clamp(42px, 14vw, 58px) * 4 / 3); }
  .hoa-drop--col .hoa-drop__bub:nth-of-type(3), .hoa-drop--col .hoa-drop__bub:nth-of-type(4) { display: none; }
}
@media screen and (min-width: 700px) and (max-width: 949px) {
  /* tablets: columns, Kontaktai narrow and close to the bottom bar; the row is empty to its left (QA 768 / 820) */
  .hoa-drop--col { left: auto; right: calc(100% + 40px); top: 0; width: 50px; height: 67px; }
}
.hoa-drop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hoa-drop__line { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: .22; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hoa-drop__fill { fill: rgb(255 255 255 / .10); opacity: 0; }
.hoa-drop__hl { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: .16; stroke-linecap: round; opacity: 0; }
.hoa-drop__ripple { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: .12; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hoa-drop__bub { position: absolute; left: var(--x); bottom: -14px; width: var(--s); height: var(--s); border: 1px solid rgb(255 255 255 / .32); border-radius: 50%; opacity: 0; }
.hoa-drop.is-on .hoa-drop__line { animation: hoa-drop-draw 3.2s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards; }
.hoa-drop.is-on .hoa-drop__fill { animation: hoa-drop-lit 2.4s cubic-bezier(0.22, 1, 0.36, 1) 2.6s forwards, hoa-drop-breathe 9s ease-in-out 5s infinite; }
.hoa-drop.is-on .hoa-drop__hl { animation: hoa-drop-lit 1.6s cubic-bezier(0.22, 1, 0.36, 1) 3s forwards; }
.hoa-drop.is-on .hoa-drop__ripple--1 { animation: hoa-drop-ripple 9s cubic-bezier(0.22, 1, 0.36, 1) 3.4s infinite; }
.hoa-drop.is-on .hoa-drop__ripple--2 { animation: hoa-drop-ripple 9s cubic-bezier(0.22, 1, 0.36, 1) 4.6s infinite; }
.hoa-drop.is-on .hoa-drop__bub { animation: hoa-drop-bub var(--d) linear var(--dl) infinite; }
.hoa-drop.is-off * { animation-play-state: paused !important; }
@keyframes hoa-drop-draw { to { stroke-dashoffset: 0; } }
@keyframes hoa-drop-lit { to { opacity: 1; } }
@keyframes hoa-drop-breathe { 0%, 100% { fill: rgb(255 255 255 / .10); } 50% { fill: rgb(255 255 255 / .17); } }
@keyframes hoa-drop-ripple { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: .9; } 60%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hoa-drop-bub { 0% { opacity: 0; transform: none; } 10%, 85% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--h))); } }
@media (prefers-reduced-motion: reduce) {
  .hoa-drop * { animation: none !important; }
  .hoa-drop__line { stroke-dashoffset: 0; } .hoa-drop__fill, .hoa-drop__hl { opacity: 1; } .hoa-drop__ripple, .hoa-drop__bub { opacity: 0; }
}

/* ===== LABEL SQUARES ONE COLOUR (10-21, Gytis) =====
 * Section labels (.subheading-badge) are slate #5B6770, square and word. Journal card tags (blog-post-card
 * .meta-information + .shape) took the near-black text colour. Same slate everywhere the cards show. */
.blog-post-card .meta-information { color: rgb(91 103 112); }

/* ===== SET SAVING (10-21, Gytis option B) =====
   snippets/hoa-saving.liquid: „Sutaupote 13,00 € (20 %)" on the buy-block price row, and on its own line
   under „Rinkinio kaina" in hoa-set-contents. Slate text, no badge, no red (red stays for actions). */
.hoa-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .25rem; }
.hoa-save { color: rgb(var(--text-color)); } /* h7 = the old price's own font and size (Outfit), so the row reads as one line */
.hoa-save b { font-weight: 500; }
.hoa-setc__total:has(.hoa-save) { flex-wrap: wrap; row-gap: .25rem; }
.hoa-setc__total .hoa-save { flex-basis: 100%; text-align: end; }

/* ===== DERINKITE SU ARROWS (10-21 QA, Gytis): square + outlined like the home review arrows (nothing rounded).
   Visible square 32 px; the button stays 44 px to tap but takes only 32 px of the card (negative margin).
   Hover: outline darkens, no dark fill and no 1.2 scale (Stretch's circle-button hover made a big black block). ===== */
.hoa-pair__arrow.circle-button { width: 2.75rem; height: 2.75rem; margin: -.375rem; border-radius: 0; }
.hoa-pair__arrow.circle-button:before { inset: .375rem; border-radius: 0; background: transparent; border: 1px solid rgb(var(--text-color) / .25); }
.hoa-pair__arrow.circle-button:not([disabled]):hover { color: rgb(var(--text-color)); }
.hoa-pair__arrow.circle-button:not([disabled]):hover:before { background: transparent; transform: none; border-color: rgb(var(--text-color)); }
.hoa-pair__nav { gap: .625rem; }

/* ===== PHONE SCROLL LINE (10-21 QA, Gytis): assets/hoa-scroll-line.js puts Stretch's own <progress-bar> (as on home:
   featured collections, UGC) under the PDP „Kaip naudoti" swipe row; centred, 98 × 2 px, 32 px under the row (section-stack gap). ===== */
/* the steps section already says how to use it, so the buy-block accordion of the same name goes where the section shows */
body:has([id$="__hoa_steps"] .multi-column__item .h4):has([id$="__hoa_steps"] .multi-column__item :is(img, video)) .product-info__block-item[data-block-id="accordion_HgkT4B"] { display: none; }

/* ===== UGC PHOTO STORIES (10-21, Simona via Gytis): a story slot with an image shows the photo instead of the video.
   No play badge on its circle; in the player the photo fills the frame like a video. ===== */
.hoa-ugc-stories__item--image .hoa-ugc-stories__badge { display: none; }
.hoa-stories__image { object-fit: cover; }
/* a white photo would melt into the page: a hairline keeps the circle; no sound button on a photo */
.hoa-ugc-stories__item--image .hoa-ugc-stories__media { outline: 1px solid rgb(var(--text-color) / .14); outline-offset: -1px; }
.hoa-stories:has(.hoa-stories__slide--image.is-active) [data-action="sound"] { visibility: hidden; }

/* ===== SITE QA 10-21 (Gytis) ===== */
/* Cart page + drawer: product titles in sentence case like the product cards (were tracked capitals via .subheading). */
.line-item a.subheading { text-transform: none; letter-spacing: 0; }
/* Cart drawer: close button and upsell arrows square, same size as before, calm hover (no dark fill, no 1.2 scale). */
#cart-drawer::part(close-button)::before { border-radius: 0; }
#cart-drawer::part(close-button):hover::before { transform: none; background: rgb(var(--text-color) / .14); }
#cart-drawer .circle-button, #cart-drawer .circle-button:before { border-radius: 0; }
#cart-drawer .circle-button:not([disabled]):hover { color: rgb(var(--text-color)); }
#cart-drawer .circle-button:not([disabled]):hover:before { transform: none; background: rgb(var(--text-color) / .14); }
/* Phones: the drawer upsell swipes with the scroll line under it, no arrows (Gytis: a line, never arrows, on phones). */
@media screen and (max-width: 699px) {
  #cart-drawer .circle-button { display: none; }
}
/* Swipe-row line spacing where the row has no grid gap after it (drawer upsell, collection circles). */
#cart-drawer .hoa-swipe-line { margin-block-start: .5rem; } /* drawer row → line 24 px, like the 32 px rows elsewhere less the drawer's own gap */
@media screen and (min-width: 700px) { #cart-drawer .hoa-swipe-line { display: none; } } /* desktop drawer keeps its (square) arrows */
/* Collection page, phones: the floating „Rūšiuoti" steps aside over the promo tile; the product count shows like on desktop. */
.collection__floating-button.hoa-hidden-by-promo { opacity: 0; pointer-events: none; transition: opacity .2s; }
@media screen and (max-width: 699px) {
  .collection__toolbar > .subheading.sm-max\:hidden { display: block; }
}

/* ===== CARD BADGE, PHONES (10-21, Gytis: option C). New product photos put the pump top at 16 % of the card; at 16 px
 * the badge ended 5 px above it. 8 px from the corner leaves 13 px, same badge size. Desktop keeps 16 px (plenty of room). */
/* Phones also show the product 8 % smaller (Gytis: desktop keeps the full 65 % framing), shrunk around the floor line
 * (81 %); the media is painted the new photos' grey so the shrunk photo shows no edge. Old darker photos show a frame
 * until they are reshot. */
@media screen and (max-width: 699px) {
  .product-card__figure .badge-list { padding: 8px; }
  .product-card__media { background: #f7f7f7; }
  .product-card__image { transform: scale(.96); transform-origin: 50% 81%; } /* 10-28 (Gytis, https://claude.ai/artifact/LbZLh1mw1BwKbzh2nNcoYg): .92 → .96; 1.0 put the badge 2.7 px from the conditioner pump */
}

/* ===== LEGAL PAGES (/policies/*: privacy, terms, shipping, returns, contact) (10-21, Gytis: "different paddings, different
 * headings, bullets fly around"). Shopify's policy text arrives as plain h2/h3/p/ul/table inside .rte.prose, so Stretch gave
 * section headings the page-title size (h2 52 px, h3 39 px), 32 px between every paragraph, and centred table cells with the
 * bullets left at the edge. One reading column: title left like the text, h2/h3 on the h5/h6 scale, 16 px between
 * paragraphs, 40 px above a section heading, lists and tables aligned to the text. Text untouched. */
.shopify-policy__container .shopify-policy__title { text-align: start; }
.shopify-policy__body .prose { --prose-default-spacing: 1rem; }
.shopify-policy__body .prose :is(h2, h3) { margin-block-start: 2.5rem; line-height: 1.25; }
.shopify-policy__body .prose h2 { font-size: var(--text-h5); }
.shopify-policy__body .prose h3 { font-size: var(--text-h6); margin-block-start: 2rem; }
.shopify-policy__body .prose :is(h2, h3) + * { margin-block-start: .75rem; }
.shopify-policy__body .prose :is(ul, ol) { padding-inline-start: 1.25rem; }
.shopify-policy__body .prose li { padding-inline-start: .25rem; }
.shopify-policy__body .prose li + li { margin-block-start: .375rem; }
.shopify-policy__body .prose :is(td, th) { text-align: start; vertical-align: top; }
.shopify-policy__body .prose :is(td, th) > :first-child { margin-block-start: 0; }
/* Phones: the privacy table's two columns are ~150 px; Stretch's prose wraps anywhere, which split words mid-word.
 * Whole words only, tighter cells and list indent. */
@media screen and (max-width: 699px) {
  .shopify-policy__body .prose :is(td, th) { padding: .5rem; overflow-wrap: break-word; word-break: normal; }
  .shopify-policy__body .prose :is(td, th) :is(ul, ol) { padding-inline-start: 1rem; }
}

/* ===== MARKET + LANGUAGE SELECTORS (10-21, Gytis: the Ciongo rule). Country = round flag + name, language = globe + code,
 * so the header never shows two identical flags. Flags round everywhere they appear (buttons and the country list). */
.country-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.hoa-globe { flex-shrink: 0; }

/* ===== CARD TITLE H3 (10-26, seo.md S4) =====
   snippets/product-card.liquid wraps the title link in an h3. display: contents keeps the link the
   grid item it was, so the card measures exactly as before (an h3 box added ~3 px per line). */
.hoa-card-title {
  display: contents;
}

/* COOKIE BANNER (Gytis 10-26): Shopify's own privacy banner (#shopify-pc__banner, light DOM, its own inline styles,
 * hence !important). Brand type and slate, square equal buttons (Atmesti = Priimti, EU consent), heading kept.
 * Position = the admin setting (Gytis 10-26: Bottom right, native); this file styles only. Desktop card 380 px wide, flush in the corner (Gytis 10-29: the old 24 px right/bottom margin left a gap below but none at the side once the banner moved to bottom left).
 * The text itself is set in admin: Settings → Customer privacy → Cookie banner → Content. */
#shopify-pc__banner { font-family: var(--text-font-family), sans-serif !important; color: #5B6770 !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
#shopify-pc__banner .shopify-pc__banner__wrapper { display: flex !important; flex-direction: column !important; gap: 12px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
#shopify-pc__banner .shopify-pc__banner__body { margin: 0 !important; padding: 0 !important; }
#shopify-pc__banner h2 { margin: 0 0 4px !important; font: 400 16px/1.3 var(--heading-font-family), sans-serif !important; color: #252c31 !important; letter-spacing: 0 !important; }
#shopify-pc__banner p { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #5B6770 !important; }
#shopify-pc__banner p a { color: inherit !important; text-underline-offset: 2px; }
#shopify-pc__banner .shopify-pc__banner__btns { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#shopify-pc__banner .shopify-pc__banner__btns :is(.shopify-pc__banner__btn-accept, .shopify-pc__banner__btn-decline) {
  flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid #5B6770 !important; border-radius: 0 !important; background: #fff !important; color: #5B6770 !important;
  font: 500 12px/1 var(--text-font-family), sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important;
}
#shopify-pc__banner .shopify-pc__banner__btns .shopify-pc__banner__btn-decline { order: 1 !important; }
#shopify-pc__banner .shopify-pc__banner__btns .shopify-pc__banner__btn-accept { order: 2 !important; }
#shopify-pc__banner .shopify-pc__banner__btns .shopify-pc__banner__btn-manage-prefs {
  order: 0 !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 8px 0 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; color: #5B6770 !important; font: 400 12px/1.3 var(--text-font-family), sans-serif !important;
  text-decoration: underline !important; text-underline-offset: 2px;
}
@media screen and (max-width: 999px) {
  #shopify-pc__banner { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid #D0D8DF !important; }
}
@media screen and (min-width: 1000px) {
  #shopify-pc__banner { width: 380px !important; max-width: none !important; margin: 0 !important; padding: 20px !important; border: 1px solid #D0D8DF !important; box-shadow: 0 8px 28px rgba(37, 44, 49, .12) !important; }
}

/* ===== HOME WASH BOTTLE (10-26) =====
   hoa_wash_type → wt_bottle: her wash cut-out (hoa-prausiklis-be-fono-iskirpta.png, w/h 0.345) is wider than the
   demo packshot it replaced (0.303). The image fills the cell's width, so at the cell width it rendered ~12 % shorter.
   114 % width (0.345 / 0.303), centred, gives the demo's height on every breakpoint. */
[id$="__wt_bottle"] img {
  width: 114%;
  max-width: none;
  margin-inline: -7%;
}

/* ===== ABOUT OPENING LABEL (10-26) =====
   „Mūsų istorija" on the lab background (hoa-about-bg-lab.jpg, slate scheme-4, overlay 40 % for ≥ 4.5:1 on the
   label): Stretch sets the subheading to 11 px on phones; nothing on the site goes under 13 px. */
@media screen and (max-width: 699px) {
  [id$="__story_opening"] .subheading { font-size: 13px; }
}

/* ===== PRODUCT CARDS, OPTION E (10-28, Gytis, https://claude.ai/artifact/SxWvnwbU7qDVRc2BhaoRJo). The grey photo ended in nothing
 * and the row ran edge to edge under a heading that sits 48 px in, so it read as a cut strip. Card spacing setting none → medium
 * (Stretch drops its hairline grid and adds gaps); rows sit on the site gutter like the headings; the caption gets a hairline left,
 * right and bottom, flush with the photo, so each card closes into one object. */
:root { --product-list-padding-inline: var(--container-gutter); }  /* Stretch pads home rows + collection grid with this (medium = 28 px) */
.product-list--padded { scroll-padding-inline: var(--container-gutter); }
/* 10-28 E1 (https://claude.ai/artifact/ENGrtrxY1B51hTxk7Z6weX): the frame runs around the whole card, drawn above the photo, so the
 * line no longer starts where the photo ends (caption-only frame looked unconnected). */
.product-card--info-outside::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(var(--border-color)); pointer-events: none; z-index: 2; }
/* With spacing ≠ none a white card on a white section „blends", and Stretch drops the caption's bottom padding (and the side
 * padding on flush captions), so the stars sat on the frame. Same padding as the draft (spacing none) on all sides. */
.product-card--info-outside.product-card--blends .product-card__info,
.product-card--info-outside.product-card--blends .product-card__info.product-card__info--flush { padding: var(--product-card-inner-padding); }
/* Card gaps = the home video row („Iš pirmų lūpų", ugc column_gap 16 / mobile 12) (Gytis 10-28: narrower, cards wider); rows the
 * same so a collection grid is even both ways (medium was 28 px columns / 48 px rows on desktop). Card width follows (Stretch
 * computes it from the gap). */
:root { --product-list-column-gap: 12px; --product-list-row-gap: 12px; }
@media screen and (min-width: 700px) { :root { --product-list-column-gap: 16px; --product-list-row-gap: 16px; } }
/* 10-28 C1 (Gytis, https://claude.ai/artifact/Hm86oMTmQ3iJwf9yKj835A): „12 prekių / Rūšiuoti" on the page margin like the title,
 * circles and grid (Stretch gives it min(28 px, gutter), so it sat 20 px left on desktop; phones already matched). */
.collection__toolbar { padding-inline: var(--container-gutter); }

/* ===== BLOG CARDS, G3 (10-28, Gytis „maybe g3", https://claude.ai/artifact/QzemZm5AAKUPBKYZJvkHGX). Home „Žinių erdvė" + article
 * „Skaityti daugiau": 16 px gap (12 phones) like the product cards; the text sits on the site panel #f3f6f9 under the photo, no lines.
 * Stretch's 16/24 px margin under the photo goes (the panel's padding takes over); flex so every panel reaches the card bottom. */
.shopify-section--blog-posts .blog-post-list { gap: 16px; column-gap: 16px; }
.shopify-section--blog-posts .blog-post-card { display: flex; flex-direction: column; }
.shopify-section--blog-posts .blog-post-card__image-container { margin-block-end: 0; }
.shopify-section--blog-posts .blog-post-card__content { padding: 16px; background: #f3f6f9; flex: 1; }
@media screen and (max-width: 699px) { .shopify-section--blog-posts .blog-post-list { gap: 12px; column-gap: 12px; } }

/* ===== HOME CATEGORY TILES, DARKER PHOTOS (10-28, Gytis, https://claude.ai/artifact/NM7GZxYmSBMfzn64gRB2FN): the centred white
 * heading, line and button crossed light robes and white bottles (~2:1). Both tiles in „Papildykite savo rutiną" at 72 % brightness. */
[id$="__media-blocks"] .media-blocks__item :is(img, video) { filter: brightness(.72); }

/* ===== iPHONE TEXT AUTOSIZING OFF (10-28, Gytis: footer consent line came out large with a small link, then fixed itself) =====
 * iOS Safari reads only the -webkit- property; Stretch's theme.css sets the -moz- and unprefixed ones, so Safari kept
 * enlarging some text blocks on some loads (first-render width, rotation, back navigation). 100 %, not none: pinch zoom stays. */
html { -webkit-text-size-adjust: 100%; }

/* ===== FOUNDER QUOTE AVATAR (10-28, Gytis picked B over the D1 portrait, https://claude.ai/artifact/1x5hGDDTWWwx7VX8pZZusT): her face
 * as a 112 px circle (theme's 64 px was too small to recognise her), theme's centred layout kept. */
[id$="__press"] .press-carousel__avatar { width: 7rem; height: 7rem; object-fit: cover; }

/* ===== 13 PX FLOOR ON EVERY PAGE (10-28 launch audit) =====
 * The home rule above (8) and About carried „nothing under 13 px"; PDP, collection, blog and search still had Stretch's
 * 11 px phone labels („Ingredientai", „Derinkite su", „12 prekių", card rating) and 12 px buttons. Same two rules, all pages.
 * Not the collection-grid card badge: it sits 8 px from the corner and the .96 photo scale (10-28) leaves the pump 2.7 px
 * below it; a 13 px badge would land on the pump. */
@media screen and (max-width: 999px) {
  main .subheading { font-size: 13px; }
  main .button__content { font-size: 13px; }
}

/* „pH" stays lowercase inside uppercase labels (sections/timeline.liquid, 10-28) */
.hoa-ph { text-transform: none; }

/* COLLECTION CIRCLES, ONE-LINE LABELS (10-28, Gytis): Stretch caps each item at 8rem, so „Plaukų priežiūra" (13 px caps) wrapped
 * while „Kūno priežiūra" fit. From 700 px there is room for all five on one line; phones keep the two-line labels. */
@media screen and (min-width: 700px) {
  .collection-quick-navigation__item { max-width: none; }
  .collection-quick-navigation__item > .subheading { white-space: nowrap; }
}

/* CARD BADGE 11 PX ON PHONE GRIDS (10-28, Gytis „ok"): was ~9 px. Measured at 360 px on the conditioner (tightest pump):
 * 11 px clears the pump with room; 13 px still clears but crowds it. Photo scale .96 (10-28) unchanged. */
@media screen and (max-width: 699px) {
  main product-list .product-card__figure .badge-list .badge { font-size: 11px; }
}

/* CHAT AFTER COOKIE ANSWER (Gytis 10-29): the Inbox chat button (<shopify-chat>, added by the app embed at the end of
 * <body>) covered „Priimti" in the phone cookie bar. layout/theme.liquid sets html.hoa-consent-pending while the cookie
 * question is open; the chat appears once the visitor accepts or declines. */
html.hoa-consent-pending shopify-chat { display: none !important; }

/* CHAT CLEARS THE STICKY ADD TO CART (Gytis 10-29): the Inbox embed only offers Lowest/Higher/Highest for every page; at
 * Lowest (20 px) the round chat button sat on „Įdėti į krepšelį". While Stretch's sticky bar is shown (.is-visible) the chat
 * lifts above it: phones bar 73 px tall at the bottom → 88 px; from 700 px the floating card is 122 px tall, 28 px up → 164 px. */
html:has(.product-sticky-add-to-cart.is-visible) { --shopify-chat-activator-offset: 164px !important; }
@media screen and (max-width: 699px) {
  html:has(.product-sticky-add-to-cart.is-visible) { --shopify-chat-activator-offset: 88px !important; }
}

/* ARTICLE BODY HEADINGS (Gytis 10-29: „a bit too big"): Stretch sizes .prose h2/h3 like page-section titles (40–76 px),
 * so the numbered points inside an article (H2, H3 under them; restored 10-29) towered over the text. Inside the article
 * body only, H2 takes the theme's h5 size (desktop 23 px measured, never under 20) and H3 its h6 size (18 px, never under 17); body is 16 px. Structure for SEO unchanged. */
.article-main > .v-stack > .prose:first-child h2 { font-size: max(var(--text-h5), 1.25rem); line-height: 1.25; }
.article-main > .v-stack > .prose:first-child h3 { font-size: max(var(--text-h6), 1.0625rem); line-height: 1.3; } /* floors: phones would give H3 ~15 px, under the 16 px body */