/* Stoneriai Voyager - design token enforcement. Generated 2026-09-24.
   Source of record: ~/Downloads/stoneriai-preview/handoff-2026-09-24/voyager-tokens.css
   NOTE: overriding Flatsome's --fs-color-* vars was tested and does NOT work;
   a later rule hardcodes the colour. Explicit rule overrides are required. */

:root{
  --ink:#181410; --ink-2:#3a3028; --ink-3:#5a4e42; --muted:#9a8878;
  --sand:#D9C8AF; --tile:#EDE0CC; --cream:#F5EDE0; --warm-white:#FAF6F0;
  --tp-green:#00B67A;
  --r-field:12px; --r-card:18px; --r-hero:28px; --r-pill:999px; --bd:1.5px;
}

/* 1. PAGINATION - spec reserves 2px ink for the ACTIVE state only */
.nav-pagination > li > a,
.nav-pagination > li > span{
  border:0 !important; background:transparent !important; color:var(--ink-3) !important;
  min-width:44px !important; height:44px !important; width:auto !important;
  padding:0 6px !important; border-radius:var(--r-pill) !important;
  font-size:15px !important; font-weight:600 !important; line-height:44px !important;
}
.nav-pagination > li > a:hover{ background:var(--tile) !important; color:var(--ink) !important; }
.nav-pagination > li > .current,
.nav-pagination > li > span.current{
  background:var(--ink) !important; border-color:var(--ink) !important;
  color:var(--cream) !important; font-weight:700 !important;
}
.nav-pagination > li > .prev,
.nav-pagination > li > .next{ color:var(--ink) !important; font-weight:700 !important; }

/* 2. TEAL LEAK - #1f4f57 / #1a535c are Flatsome defaults. 2.12:1 contrast fail. */
a{ color:var(--ink); }
a:hover{ color:var(--ink-3); }
.button.checkout, a.button.checkout.wc-forward, .single_add_to_cart_button,
button.ux-search-submit.submit-button, .button.primary, .button.secondary{
  background-color:var(--ink) !important; border-color:var(--ink) !important; color:var(--cream) !important;
}

/* 3. ORANGE LEAK - #fe7706 sale badge at 2.67:1 */
.badge-inner.on-sale, .badge-inner.secondary.on-sale, span.onsale{
  background-color:var(--ink) !important; color:var(--cream) !important;
  border-radius:var(--r-pill) !important; font-size:11px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
}

/* 4. PRICES - 78 elements rendering #111 */
.woocommerce-Price-amount, .woocommerce-Price-amount bdi,
.woocommerce-Price-currencySymbol, .price, .price ins, .price .amount{ color:var(--ink) !important; }
.price del, .price del .amount{ color:var(--muted) !important; }

/* 5. RED LEAK - spec: state by contrast, not hue */
.required, abbr.required, .woocommerce-error, .wc-block-components-validation-error{
  color:var(--ink) !important; text-decoration:none !important;
}
.woocommerce-invalid input, .woocommerce-invalid select{ border:2px solid var(--ink) !important; }

/* 6. STARS - ink for reviews, green ONLY for Trustpilot (the one sanctioned exception) */
.star-rating span::before, .star-rating::before{ color:var(--ink) !important; }
.trustpilot-block .star-rating span::before,
.sn-trustpilot .star-rating span::before{ color:var(--tp-green) !important; }

/* 7. SORT CONTROL - was a raw browser select, the only pure-white surface on a cream site */
select.orderby, .woocommerce-ordering select{
  border:var(--bd) solid var(--sand) !important; border-radius:var(--r-field) !important;
  background-color:var(--warm-white) !important; color:var(--ink) !important;
  height:46px !important; font-size:15px !important; padding:0 14px !important; appearance:none;
}

/* 8. ONE PILL TOKEN, ONE BORDER WIDTH */
[style*="border-radius:99px"], [style*="border-radius: 99px"]{ border-radius:var(--r-pill) !important; }
[style*="#E7DCCD"], [style*="#e7dccd"]{ border-color:var(--sand) !important; }
[style*="#FAF7F1"], [style*="#faf7f1"]{ background-color:var(--warm-white) !important; }

/* 9. CONTAINER - ratified fluid 6vw; Flatsome .row must stop carrying its own geometry */
.row, .row.row-large, .row.row-small{
  max-width:none !important; padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
}
.container, .shop-container > .container{
  max-width:1230px !important; padding-left:6vw !important; padding-right:6vw !important;
}
@media (min-width:1600px){
  .container, .shop-container > .container{ padding-left:0 !important; padding-right:0 !important; }
}

/* 10. ACCESSIBILITY FLOOR */
.woocommerce-result-count, .shop-page-title .is-xsmall, .breadcrumbs{ color:var(--ink-3) !important; }
@media (max-width:549px){ a, button, .button, input[type="submit"]{ min-height:44px; } }

/* 11. HERO RATING BADGE - was three items on one row sharing no baseline */
.sn-rating{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; line-height:1; }
.sn-rating__stars{ display:inline-flex; gap:2px; flex-shrink:0; }
.sn-rating__stars svg{ display:block; width:16px; height:16px; }
.sn-rating__score{ font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.sn-rating__score small{ font-weight:500; color:var(--ink-3); font-size:14px; }
.sn-rating__sep{ color:var(--sand); }
.sn-rating__link{ color:var(--ink-3); text-decoration:none; border-bottom:var(--bd) solid var(--sand); padding-bottom:2px; }
.sn-rating__link:hover{ color:var(--ink); border-color:var(--ink); }
.sn-rating__brand{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); text-decoration:none; margin-left:auto; }
.sn-rating__brand svg{ width:15px; height:15px; display:block; }
.sn-rating__caption{ margin:24px 0 0; font-size:15px; line-height:1.65; color:var(--ink-3); max-width:46ch; }
@media (max-width:549px){ .sn-rating__brand{ margin-left:0; } }


/* ===== COMPONENT PASS - VERIFIED 2026-09-24 =====
   Every rule below was injected into the live page and screenshotted before
   being saved. Three theme behaviours that break naive overrides:
   1. YITH points plugin sets background-color + color INLINE -> shorthand
      overrides lose; use longhand + a body prefix.
   2. Trustpilot stars are 5 sibling spans, each with its own gradient fill %
      and the glyph as background-clip:text (white fill). Setting colour on
      the parent inherits down and erases all 5 glyphs -> solid rectangles.
      SIZE AND SPACING ONLY.
   3. :first-of-type / :last-of-type match PER ELEMENT TYPE - with two
      children of different tags both matched both rules. Use :nth-child(). */

/* A. PDP TRUST TILES */
.sn-product-benefits{ gap:12px !important; }
.sn-product-benefits > div{
  display:grid !important; grid-template-columns:22px 1fr; column-gap:12px; align-items:center;
  justify-items:start !important; text-align:left !important;
  background:var(--warm-white) !important; border:var(--bd) solid var(--sand) !important;
  border-radius:var(--r-card) !important; padding:14px 16px !important;
}
.sn-product-benefits > div > *{ text-align:left !important; }
.sn-product-benefits > div::before{
  content:""; grid-row:1 / span 2; width:22px; height:22px;
  background-repeat:no-repeat; background-position:center; background-size:20px 20px; opacity:.85;
}
.sn-product-benefits > div:nth-child(1)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181410' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); }
.sn-product-benefits > div:nth-child(2)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181410' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.sn-product-benefits > div:nth-child(3)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181410' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.sn-product-benefits > div > *:nth-child(1){
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.15em !important;
  text-transform:uppercase !important; color:var(--ink-3) !important; line-height:1.2 !important; margin-bottom:2px !important;
}
.sn-product-benefits > div > *:nth-child(2){
  font-size:15px !important; font-weight:700 !important; color:var(--ink) !important;
  line-height:1.25 !important; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap !important;
}
@media (max-width:549px){ .sn-product-benefits{ grid-template-columns:1fr !important; } }

/* B. LOYALTY POINTS NOTICE - longhand + body prefix beats the inline style */
/* The child theme sets background + padding on this element with HIGHER
   specificity AND !important, so a plain override loses even from the end of
   the document. Repeated-class specificity is what actually wins. */
html body .sn-purchase-loyalty.sn-purchase-loyalty.sn-purchase-loyalty,
html body .yith-par-message.yith-par-message.yith-par-message:not(.hide){
  background-color:var(--tile) !important; background-image:none !important;
  color:var(--ink) !important; border:0 !important; border-radius:var(--r-pill) !important;
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  width:auto !important; max-width:100% !important; align-self:flex-start !important;
  padding:9px 16px !important; font-size:13.5px !important; line-height:1.3 !important; margin:0 0 4px !important;
}
html body .yith-par-message.yith-par-message strong{ color:var(--ink) !important; font-weight:700 !important; }

/* C. HERO TRUSTPILOT SUMMARY */
a.sn-tp-summary{
  display:flex !important; align-items:center !important; flex-wrap:wrap !important;
  gap:14px !important; line-height:1 !important; text-decoration:none !important; padding:0 !important;
}
body a.sn-tp-summary > span{ display:inline-flex !important; align-items:center !important; }
body a.sn-tp-summary .sn-tp-score-copy{ flex-direction:row !important; align-items:baseline !important; gap:7px !important; }
body a.sn-tp-summary .sn-tp-score-copy > span,
body a.sn-tp-summary .sn-tp-score-copy > strong{ display:inline !important; float:none !important; margin:0 !important; }
.sn-tp-score-copy > span{
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.15em !important;
  text-transform:uppercase !important; color:var(--ink-3) !important;
}
.sn-tp-score-copy > strong{ font-size:16px !important; font-weight:700 !important; color:var(--ink) !important; letter-spacing:-.01em !important; }
body a.sn-tp-summary .sn-tp-score-stars{ flex-direction:row !important; align-items:center !important; gap:10px !important; }
body a.sn-tp-summary .sn-tp-score-stars > span{ display:inline-flex !important; margin:0 !important; float:none !important; }
body a.sn-tp-summary .sn-tp-stars{ display:inline-flex !important; align-items:center !important; gap:2px !important; line-height:1 !important; font-size:15px !important; }
.sn-tp-score-stars > span:not(.sn-tp-stars){
  font-size:14px !important; color:var(--ink-3) !important;
  border-bottom:var(--bd) solid var(--sand) !important; padding-bottom:2px !important; line-height:1 !important;
}
.sn-tp-source{ margin-left:auto !important; font-size:14px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1 !important; }
a.sn-tp-summary:hover .sn-tp-score-stars > span:not(.sn-tp-stars){ border-color:var(--ink) !important; }
@media (max-width:649px){ .sn-tp-source{ margin-left:0 !important; } }

/* D. FLAVOUR / VARIATION SWATCHES */
body ul.variable-items-wrapper{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:0 !important; padding:0 !important; }
body ul.variable-items-wrapper > li.variable-item{
  margin:0 !important; min-height:44px !important; height:auto !important; width:auto !important;
  padding:0 18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background-color:var(--warm-white) !important; color:var(--ink) !important;
  border:var(--bd) solid var(--sand) !important; border-radius:var(--r-pill) !important;
  box-shadow:none !important; transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
body ul.variable-items-wrapper > li.variable-item:hover{ border-color:var(--ink) !important; background-color:var(--tile) !important; }
body ul.variable-items-wrapper > li.variable-item.selected{ background-color:var(--ink) !important; color:var(--cream) !important; border-color:var(--ink) !important; }
body ul.variable-items-wrapper > li.variable-item.selected .variable-item-span{ color:var(--cream) !important; }
body ul.variable-items-wrapper > li.variable-item:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }
body .variable-item-span{ font-size:15px !important; font-weight:600 !important; line-height:1 !important; padding:0 !important; color:inherit !important; }
body .variations .label, body .variations label{
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.15em !important;
  text-transform:uppercase !important; color:var(--ink-3) !important;
}
body .reset_variations{
  position:static !important; float:none !important; display:inline-block !important; margin-top:10px !important;
  font-size:12px !important; font-weight:600 !important; color:var(--ink-3) !important;
  border-bottom:var(--bd) solid var(--sand) !important; text-decoration:none !important; width:auto !important; height:auto !important;
}
body .reset_variations:hover{ color:var(--ink) !important; border-color:var(--ink) !important; }

/* E. BROWSER SURFACES */
::selection{ background:var(--ink); color:var(--cream); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
a{ text-underline-offset:3px; }
html{ scrollbar-color:var(--sand) var(--cream); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--sand); border-radius:999px; border:3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
.woocommerce-Price-amount, .price{ font-variant-numeric:tabular-nums; }


/* ===================================================================
   F. HERO TRUSTPILOT BADGE — shape + lockup   (verified 2026-09-24)
   The square tiles with knocked-out white stars are the intended
   Trustpilot idiom — NOT a rendering bug. This section fixes only
   the alignment and adds the Trustpilot lockup.
   The green is the existing --tp-green token, inlined as a hex
   because a CSS var cannot be read inside an SVG data URI. Keep the
   two in sync if the token ever changes.
   =================================================================== */
html body a.sn-tp-summary{
  display:inline-flex !important; width:auto !important; height:auto !important;
  align-self:flex-start !important; align-items:center !important; gap:12px !important;
}
html body a.sn-tp-summary .sn-tp-stars{
  display:inline-flex !important; align-items:center !important;
  gap:3px !important; line-height:1 !important; font-size:0 !important;
}
/* Trustpilot TILE treatment — this is the intended idiom, not a bug.
   Each span's own linear-gradient fills the tile to the rating
   percentage and the white star glyph is knocked out on top, exactly
   how Trustpilot draws its widget. Do NOT convert these to masked
   star shapes (tried 2026-09-24, reverted — reads far too light).
   Never set colour on the .sn-tp-stars PARENT: it inherits down and
   erases all five glyphs. Size and fill live on the spans only. */
html body a.sn-tp-summary .sn-tp-stars > span{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:24px !important; height:24px !important; flex:0 0 auto !important;
  font-size:17px !important; line-height:1 !important;
  border-radius:3px !important; padding:0 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  text-indent:0 !important; overflow:visible !important;
  background-size:100% 100% !important; background-repeat:no-repeat !important;
  -webkit-mask:none !important; mask:none !important;
}

/* Kill the margin-left:auto that flung the wordmark to the far right */
html body a.sn-tp-summary .sn-tp-source{
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  margin:0 0 0 2px !important; padding-left:14px !important;
  border-left:1px solid var(--sand) !important;
  font-size:13.5px !important; font-weight:700 !important;
  letter-spacing:-.01em !important; color:var(--ink) !important; line-height:1.2 !important;
}
html body a.sn-tp-summary .sn-tp-source > span{ display:none !important; }
html body a.sn-tp-summary .sn-tp-source::before{
  content:"" !important; flex:0 0 auto !important; width:15px !important; height:15px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.09 6.9 7.41.64-5.6 4.95 1.66 7.31L12 17.55 5.44 21.4l1.66-7.31L1.5 9.14l7.41-.64z' fill='%2300B67A'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* ===================================================================
   G. RELATED / UPSELL PRODUCTS — container, grid, equal cards
   Corrected 2026-09-24 after measuring; the first attempt was wrong.

   .row.upsells is the one top-level row Flatsome never gives the site
   gutter to: it ran 0 -> 100vw so the last card was clipped.
   GUTTER: the inner .col already contributes 15px, and at mobile the
   theme forces 22px on the row regardless of what we set — so the
   only arrangement correct at BOTH widths is 6vw on the row with the
   .col zeroed. (calc(6vw - 15px) was wrong: it lands at 37px on a
   388px phone where the page gutter is 22px.)
   EQUAL CARDS: Flatsome's equalize-box JS writes an inline height on
   .box (e.g. 392.5px) computed from the pre-grid layout, and
   height:100% does NOT beat it because the percentage fails to
   resolve against a stretched grid item. Make .product the flex
   column and give .box height:auto + flex:1 1 auto instead.
   The price is NOT a direct flex child — it sits inside
   .price-wrapper, so margin-top:auto belongs on the WRAPPER.
   Verified: desktop 1500px and phone 388px, headings, cards and
   prices all flush; no horizontal overflow.
   =================================================================== */
html body .row.upsells,
html body .row.related,
html body .related.products{
  padding-left:6vw !important; padding-right:6vw !important;
  max-width:100% !important; overflow:visible !important;
}
html body .row.upsells > .col,
html body .row.related > .col,
html body .related.products > .col{
  padding-left:0 !important; padding-right:0 !important;
}
html body .row.upsells .products.row,
html body .row.related .products.row,
html body .related.products .products.row{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important; margin:0 !important; width:auto !important; max-width:none !important;
}
html body .row.upsells .products.row > .product,
html body .row.related .products.row > .product,
html body .related.products .products.row > .product{
  width:auto !important; max-width:none !important; min-width:0 !important;
  flex:none !important; padding:0 !important; margin:0 !important;
  display:flex !important; flex-direction:column !important;
}
/* NOTE: .box is NOT a direct child of .product — Flatsome inserts a
   .col-inner between them (and only on some renders), so the child
   combinator silently failed. Use descendants and stretch .col-inner
   too, or the chain breaks at that level. */
html body .row.upsells .products.row > .product .col-inner,
html body .row.related .products.row > .product .col-inner,
html body .related.products .products.row > .product .col-inner{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important;
}
html body .row.upsells .products.row > .product .box,
html body .row.related .products.row > .product .box,
html body .related.products .products.row > .product .box{
  flex:1 1 auto !important; height:auto !important; min-height:0 !important;
  display:flex !important; flex-direction:column !important;
}
html body .row.upsells .products.row > .product .box-text,
html body .row.related .products.row > .product .box-text,
html body .related.products .products.row > .product .box-text{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
}
html body .row.upsells .products.row > .product .box-text > .price-wrapper,
html body .row.related .products.row > .product .box-text > .price-wrapper,
html body .related.products .products.row > .product .box-text > .price-wrapper{
  margin-top:auto !important;
}
@media (min-width:850px){
  html body .row.upsells .products.row,
  html body .row.related .products.row,
  html body .related.products .products.row{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (min-width:1000px){
  /* --sn-cols is set by snippet 4473 when it removes the self-referencing
     card, so three cards fill the row instead of leaving an empty column. */
  html body .row.upsells .products.row,
  html body .row.related .products.row,
  html body .related.products .products.row{
    grid-template-columns:repeat(var(--sn-cols,4),minmax(0,1fr)) !important; gap:24px !important;
  }
}


/* Flex min-width trap: making .box-text a flex column gave its
   children min-width:auto (= min-content). The nowrap category
   eyebrow forced .title-wrapper to 180px inside a 140px card, so the
   text overflowed the card at phone width. Every element in this
   flex chain needs min-width:0. Measured before: title 180 in a 140
   card; after: 138 in 140, zero overflow offenders at 388px. */
html body .row.upsells .products.row > .product .col-inner,
html body .row.related .products.row > .product .col-inner,
html body .related.products .products.row > .product .col-inner,
html body .row.upsells .products.row > .product .box,
html body .row.related .products.row > .product .box,
html body .related.products .products.row > .product .box,
html body .row.upsells .products.row > .product .box-text,
html body .row.related .products.row > .product .box-text,
html body .related.products .products.row > .product .box-text{
  min-width:0 !important; align-items:stretch !important;
}
html body .row.upsells .products.row > .product .box-text > *,
html body .row.related .products.row > .product .box-text > *,
html body .related.products .products.row > .product .box-text > *{
  min-width:0 !important; max-width:100% !important;
}

/* ===================================================================
   H. PAGE BACKDROP + RELATED-CARD SURFACE   (verified 2026-09-24)
   =================================================================== */

/* <html> shipped with a #5B5B5B backdrop. #wrapper paints the cream,
   but anything rendered outside it — the footer, and on some products
   the upsells row and tab panels — sat straight on that grey. On
   /?product=ccell-th2-evo-... that exposed a full-width grey band
   behind "Jums taip pat gali patikti" with dark-brown text on it.
   The escape itself is a template/content issue on those products;
   this makes the backdrop correct so a gap can never show grey. */
html{ background-color:var(--cream) !important; }

/* Related cards were white with a 15px radius while the shop grid
   uses a transparent card and an 18px image radius — so the related
   grid rendered a white slab with a mismatched sliver around each
   image. Match the shop grid exactly. */
html body .row.upsells .products.row > .product,
html body .row.related .products.row > .product,
html body .related.products .products.row > .product{
  background-color:transparent !important; border-radius:0 !important; box-shadow:none !important;
}
html body .row.upsells .products.row > .product .box-image,
html body .row.related .products.row > .product .box-image,
html body .related.products .products.row > .product .box-image{
  border-radius:18px !important;
}
html body .row.upsells .products.row > .product .box-text,
html body .row.related .products.row > .product .box-text,
html body .related.products .products.row > .product .box-text{
  background-color:transparent !important;
}


/* ===================================================================
   I. MOBILE PASS 1 — verified at a true 388px viewport, 2026-09-24
   (tested in a same-origin iframe harness; Chrome will not size a
   real window below 500px, so the iframe is the only way to reach
   phone width in this environment.)
   =================================================================== */

/* Loyalty points box: the container was display:flex, so every TEXT
   NODE of the sentence became its own flex item and each wrapped
   independently — "Pirkdami sia preke jus / gaunate" | "18 / tsk." |
   "- kas / yra" | "0,18 EUR". It must not be a flex container. */
html body .sn-purchase-loyalty.sn-purchase-loyalty.sn-purchase-loyalty,
html body .yith-par-message.yith-par-message.yith-par-message:not(.hide){
  display:block !important; width:auto !important; max-width:100% !important;
  align-self:flex-start !important; padding:10px 16px !important;
  font-size:13.5px !important; line-height:1.45 !important;
  border-radius:14px !important; text-align:left !important;
}
html body .sn-purchase-loyalty > img, html body .yith-par-message > img{
  display:inline-block !important; vertical-align:-3px !important;
  width:16px !important; height:16px !important; margin:0 8px 0 0 !important; float:none !important;
}
html body .sn-purchase-loyalty strong, html body .yith-par-message strong{ white-space:nowrap !important; }

/* Quantity tiers: the clickable button.snm-tier-select sits in the
   FIRST cell only (141x36 inside a 167x109 card), so the price half
   of the card was dead. The button is position:relative, so its
   ::after resolved against itself — making it static lets the
   overlay resolve against the <tr> and cover the whole card.
   Verified: clicking the price area selects the tier and sets qty. */
html body .tiered-pricing-table tbody tr{ position:relative !important; cursor:pointer !important; }
html body .tiered-pricing-table tbody tr > td{ position:static !important; }
html body button.snm-tier-select{ position:static !important; }
html body button.snm-tier-select::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
}

/* Card add-to-cart "+": the hero-panel variant never received the
   drawn icon that .sn-card-standard-* buttons get, and fell back to a
   27px "+" TEXT glyph boxed into 16px with line-height:12px — it
   rendered as a mangled double-cross. Draw the plus from two bars.
   Scoped to .product-small so the main product pill is untouched. */
html body .product-small .cart:not(.snm-quick) > button.single_add_to_cart_button{
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:0 !important; font-size:0 !important;
}
html body .product-small .cart:not(.snm-quick) > button.single_add_to_cart_button::after{
  content:"" !important; font-size:0 !important; line-height:0 !important;
  width:16px !important; height:16px !important; flex:0 0 auto !important;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor) !important;
  background-size:16px 2px, 2px 16px !important;
  background-position:center, center !important;
  background-repeat:no-repeat !important; background-color:transparent !important;
  -webkit-mask:none !important; mask:none !important;
}

/* Prices sat in a stray #E8E8E8 pill on <bdi> — an off-palette grey,
   visible in the hero feature panel. Prices are text, not chips. */
html body .price bdi,
html body .woocommerce-Price-amount bdi{
  background:transparent !important; background-color:transparent !important;
  padding:0 !important; border-radius:0 !important;
}


/* ===================================================================
   J. PRIVACY PAGE MOBILE GUTTER   (verified 360 / 390 / 768px)
   The privacy page uses page-template-page-blank, which supplies no
   container at all, so h1 and every paragraph ran 0 -> 100vw and the
   text touched both screen edges. Measured: h1 [0,390] before,
   [22,368] after. The site gutter below 850px is a flat 22px
   (confirmed at 360/390/700; above 850 the container takes over), so
   this is scoped to the mobile range and desktop is left alone.
   =================================================================== */
@media (max-width:849px){
  html body [class*="sn-privacy"]{
    padding-left:22px !important; padding-right:22px !important;
    box-sizing:border-box !important;
  }
}


/* ===================================================================
   K. CHECKOUT + CART   (2026-09-24)
   =================================================================== */

/* Cross-sells off the payment page. At 390px the block sat at x=73..317
   against a 22px page gutter, four cards crammed into 244px, overlapping
   the bank-transfer explanation, with a legacy teal button among the
   black ones. Decision (user): recommendations belong on the cart page.
   NOTE: a PHP snippet that detaches woocommerce_cross_sell_display from
   the checkout hooks had NO effect — the theme calls it directly from a
   template — so this hides it instead. */
html body.woocommerce-checkout .cross-sells{ display:none !important; }

/* "Sutaupei" badge collided with the quantity stepper (measured gap 0px).
   The badge's own margin/padding cannot be overridden from this
   stylesheet — the WooCommerce cart BLOCK resists it and no matching
   rule is findable in document.styleSheets — so the gap is created on
   the following element, which does accept padding (verified computed
   padding-top:14px). */
html body .wc-block-cart-item__wrap .wc-block-cart-item__quantity{
  padding-top:14px !important;
}



/* ===================================================================
   L. LOYALTY NOTICE — duplicate on variable products (2026-09-24)
   Selecting a variant showed TWO identical notices: a turquoise
   .yith-par-message-variation and the styled .yith-par-message-product.
   YITH marks the product one .hide on variant select, but it kept
   rendering because section B's own selector
   (.sn-purchase-loyalty x3, specificity 0,3,2) has no :not(.hide) and
   outranked a plain .hide rule. Repeat the class to outrank it.
   Both elements also carry an INLINE turquoise
   style="background-color:#E4F6F3" from the plugin, so the variation
   one needs !important to be brought onto the palette.
   Verified at 1280px and 360px: exactly one notice, on --tile.

   (An earlier section L claimed a 1.12:1 contrast failure on the
   variant swatches, per the ChatGPT review. That was a FALSE
   POSITIVE and has been removed: the cream 1.12:1 text belongs to a
   hidden duplicate .variable-item-span. The visible label is
   li::before, inheriting the li colour at 14.07:1. Screenshot
   confirms the swatches read correctly.)
   =================================================================== */
html body .yith-par-message.hide.hide.hide.hide,
html body .sn-purchase-loyalty.hide.hide.hide.hide,
html body .yith-par-message-product.hide.hide.hide.hide{ display:none !important; }

html body .yith-par-message-variation{
  background-color:var(--tile) !important; background-image:none !important;
  color:var(--ink) !important; border:0 !important; border-radius:14px !important;
  display:block !important; width:auto !important; align-self:flex-start !important;
  padding:10px 16px !important; font-size:13.5px !important; line-height:1.45 !important;
  margin:0 0 4px !important;
}


/* ===================================================================
   M. CATEGORY TOOLBAR — duplicate heading   (2026-09-24)
   Every category repeated its own title inside the filter/sort bar:
   h1.snm-shop-title at y=170 and h2.prepended-category-name with the
   SAME text at y=338 inside .snm-toolbar. The duplicate consumed the
   sort control's row and forced the toolbar onto two lines.
   Measured at 390px: toolbar 129px -> 52px, one row, Filtrai (95px)
   plus the sort control (241px). Desktop already hides this element,
   so the rule is a no-op there (verified at 1280px).
   =================================================================== */
html body .snm-toolbar .prepended-category-name{ display:none !important; }