/* Janida UX refresh (Codian). GENERATED by tools/build-ux.sh from css/jx-src — do not edit here. */

/* ==== 00-tokens.css ==== */
/* ==========================================================================
   Janida UX refresh (Codian) — design tokens.
   Source partials live in css/jx-src/ and are concatenated into css/janida-ux.css
   by tools/build-ux.sh. Every rule is scoped to body.jx (preview / go-live only).
   Contrast notes: white text on --jx-green = 5.4:1, on --jx-cta = 4.9:1 (WCAG AA).
   ========================================================================== */

body.jx {
  /* brand */
  --jx-green: #217A12;          /* structure / navigation (was the category tab green) */
  --jx-green-dark: #185E0D;     /* hover / active borders */
  --jx-green-light: #8BB71B;    /* decorative accents only, never text on white */
  --jx-green-tint: #EEF6E6;     /* soft backgrounds, active chips */
  --jx-cta: #D12E6A;            /* the single "buy / act" colour (pink #F04780 darkened for AA) */
  --jx-cta-dark: #B02259;
  --jx-cta-tint: #FCE8F0;
  --jx-navy: #125E91;           /* info / footer */
  --jx-navy-dark: #0D4A73;

  /* neutrals */
  --jx-text: #2B2F2C;
  --jx-text-muted: #5F6B66;     /* 5.4:1 on white */
  --jx-border: #DDE3DE;
  --jx-surface: #F5F7F4;
  --jx-white: #FFFFFF;
  --jx-danger: #C0392B;
  --jx-success: #2E7D32;

  /* type */
  --jx-font: "Montserrat", Arial, Helvetica, sans-serif;
  --jx-fs-xs: 12px;
  --jx-fs-sm: 13px;
  --jx-fs-base: 15px;
  --jx-fs-md: 16px;
  --jx-fs-lg: 20px;
  --jx-fs-xl: 26px;
  --jx-fs-2xl: 32px;
  --jx-lh: 1.55;
  --jx-lh-tight: 1.25;

  /* spacing: 8px scale */
  --jx-s1: 4px;
  --jx-s2: 8px;
  --jx-s3: 12px;
  --jx-s4: 16px;
  --jx-s5: 24px;
  --jx-s6: 32px;
  --jx-s7: 48px;
  --jx-s8: 64px;

  /* layout */
  --jx-container: 1240px;
  --jx-gutter: 24px;
  --jx-radius: 8px;
  --jx-radius-sm: 4px;
  --jx-radius-pill: 999px;
  --jx-shadow-1: 0 1px 2px rgba(20, 40, 20, .08), 0 1px 3px rgba(20, 40, 20, .06);
  --jx-shadow-2: 0 6px 18px rgba(20, 40, 20, .12);
  --jx-focus-color: #185E0D;   /* solid ring colour (the old rgba ring was 1.9:1 on white) */
  --jx-focus: 0 0 0 3px #185E0D;
  --jx-sticky-h: 60px;          /* the stuck desktop nav row (A5): 36px tabs + 12px above and below */
  --jx-header-h: 134px;         /* desktop header above the nav row: 140px - 6px (A5 sticky offset, 21-nav.css) */
  --jx-field-border: #767F79;   /* form field borders, 4:1 on white */
  --jx-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 767px) {
  body.jx { --jx-gutter: 16px; }
}


/* ==== 05-a11y.css ==== */
/* ==========================================================================
   05 a11y (global builder): utilities, focus ring (D19), remaining contrast fixes (G1).
   Buttons and fields have their own partials (31-buttons, 35-forms).
   ========================================================================== */

/* ---- visually hidden text (screen readers only): the one definition (home H1, price words, labels) ---- */
body.jx .jx-sr,
body.jx .jx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ---- focus ring (D19) ----
   main11.css:45 `:focus{outline:0}` removes every indicator site-wide; slick-theme.css / lightbox.css
   reset outlines with (0,2,0) selectors. body.jx :focus-visible is (0,2,1) and wins without !important.
   Only keyboard focus shows the ring (and text fields, which always match :focus-visible). */
body.jx :focus-visible {
  outline: 3px solid var(--jx-focus-color);
  outline-offset: 2px;
}

/* on the dark surfaces (navy footer, grey cookie bar) the dark green ring would vanish: white ring */
body.jx .footer-container :focus-visible,
body.jx .cookies-agreement-class :focus-visible {
  outline-color: #fff;
}

/* ---- contrast: legacy error red #e74c3c is 3.82:1 on white (alerts, cart minimum, checkout delivery note,
   inline styles in page-registration.php:71, page-my-account.php, page-forget-your-password.php,
   page-shopping-cart.php:198, page-order-complete.php:206). --jx-danger #C0392B = 5.4:1.
   Inline styles need !important; .color-e74c3c is !important itself (custom63.css:2313 / 2648). ---- */
body.jx [style*="color: #e74c3c"],
body.jx [style*="color:#e74c3c"],
body.jx .color-e74c3c,
body.jx .conference-alert {
  color: var(--jx-danger) !important;
}

/* the same error state on the navy footer (newsletter consent text / alert): light red, 4.6:1 on #125E91 */
body.jx .footer-container .color-e74c3c {
  color: #FFC4BA !important;
}

/* success text (checkout consent after placeOrder(), custom63.css:2317 #2ecc71 = 2.0:1) */
body.jx .color-2ecc71 {
  color: var(--jx-success) !important;
}

/* ---- home hero slide markers (style.css:72-93): 36px boxes (30 + 2 x 3px border). A 44x44 hit area
   without changing their size on the slide; the current/hover state was white on #99cb58 (1.9:1). ---- */
body.jx ol.bjqs-markers li a {
  position: relative;
}

body.jx ol.bjqs-markers li a::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
}

body.jx ol.bjqs-markers li.active-marker a,
body.jx ol.bjqs-markers li a:hover {
  background-color: var(--jx-green);
  border-color: var(--jx-green);
  color: #fff;
}

/* ---- agreement texts next to the consent checkboxes are clickable (js/jx-src/10-a11y.js) ---- */
body.jx #agreement_text,
body.jx #registration_agreement_text,
body.jx #contacts_agreement_text {
  cursor: pointer;
}

/* ---- reduced motion: the legacy `transition: all .2s/.25s` (buttons, arrows, nav: some !important,
   e.g. main11.css:3955-3962) and every refresh transition/animation become instant ---- */
@media (prefers-reduced-motion: reduce) {
  body.jx *,
  body.jx *::before,
  body.jx *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==== 10-layout.css ==== */
/* ==========================================================================
   10-layout — page width (A3 / D10). Owner: layout.
   Five live rules hold the legacy site at 1000px; none of them is !important,
   so body.jx + the same selector wins on specificity:
     main11.css:3139  .page > .header-container > .wrapper   (min-width 680, max-width 1000)
     main11.css:3312  .page > .shop-container > .wrapper     (min-width 680, max-width 1000)
     main11.css:3491  .footer-container > .wrapper           (min-width 680, max-width 1000)
     main11.css:7592  .container  (.sec-container > .container on every template,
                                   .catalog-div > .wrapper > .container in footer.php)
     bjqs inline      .slider-area max-width:1000px          (hero, see 30-home.css)
   .main > .wrapper is already 100% everywhere (main11.css:3964, cms-home is on every body).
   Result: 1240px at >=1288px, 100% - 2 x 24px below that (1232 at 1280, 976 at 1024, 720 at 768).
   Phones (<700) and the 700-767 content area stay exactly as they are.
   ========================================================================== */

/* Header and nav rows follow the container from 700px (the header builder's nav scrolls
   sideways at 700-1023, so it fits). min-width:0 beats the 680px floor, which would
   otherwise overflow a 700-727px window. */
@media (min-width: 700px) {
  body.jx .page > .header-container > .wrapper,
  body.jx .page > .shop-container > .wrapper {
    width: min(var(--jx-container), calc(100% - 2 * var(--jx-gutter)));
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Content, catalogue band and footer from 768px (custom63.css switches to its phone
   rules at 767px, so the 700-767 hybrid zone keeps today's layout). */
@media (min-width: 768px) {
  body.jx .sec-container > .container,
  body.jx .catalog-div > .wrapper > .container,
  body.jx .footer-container > .wrapper {
    width: min(var(--jx-container), calc(100% - 2 * var(--jx-gutter)));
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* main11.css:8706 gives .sec-container width:96% at 700-991px (15px side margins); with the
     container gutter above that would double the gutter. */
  body.jx .main .sec-container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* .jx-visually-hidden (home H1, D20) is defined once in 05-a11y.css. */


/* ==== 11-type.css ==== */
/* ==========================================================================
   11 type (global builder): B1 / D16 / D20 — base rhythm, font inheritance, section titles,
   page titles, upright + left-aligned text. Card titles (cards), nav (header) and the product
   h1/description/price (product) are styled by their owners. Margins of the section titles: layout.
   ========================================================================== */

/* ---- base: main11.css:3948 sets Montserrat 16px #282828 with line-height normal ---- */
body.jx {
  color: var(--jx-text);
  line-height: var(--jx-lh);
}

/* form controls do not inherit the family (they rendered in Arial 200/300) */
body.jx button,
body.jx input,
body.jx select,
body.jx textarea {
  font-family: var(--jx-font);
}

/* main11.css:2791 `a:hover{color:#ab6a64}` turns every plain content link brown on hover.
   (0,1,2) on purpose: it only beats that generic rule; any link with its own class colour (legacy or
   refresh) keeps it. Header/footer links are their owners' (they are outside .main). */
body.jx :where(.main) a:where(:hover) {
  color: var(--jx-green-dark);
}

/* the hexagon links sit in a fixed 170px overflow:hidden hexagon (style.css:41-47, 53):
   keep their legacy height now that the body line-height is 1.55 */
body.jx .hex-button a {
  line-height: 1.25;
}

/* ---- section titles (D16): keep UPPERCASE, 700, 22px (18px <768), .02em, left on desktop.
   .product-category-title / .front-page-testimonials-title are 19pt/300 !important in
   custom63.css:1371 / 3066; the h1 variants (D20 swap) must also beat main11.css:2773 h1 48pt/60px. ---- */
body.jx .product-category-title,
body.jx .category-page-title,
body.jx .individual-product-similar-product,
body.jx .front-page-testimonials-title,
body.jx h1.product-category-title,
body.jx h1.category-page-title {
  font-family: var(--jx-font);
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: var(--jx-lh-tight);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jx-text);
}

@media (min-width: 768px) {
  body.jx .product-category-title,
  body.jx .category-page-title,
  body.jx .individual-product-similar-product,
  body.jx .front-page-testimonials-title {
    text-align: left;
  }
}

@media (max-width: 767px) {
  body.jx .product-category-title,
  body.jx .category-page-title,
  body.jx .individual-product-similar-product,
  body.jx .front-page-testimonials-title,
  body.jx h1.product-category-title,
  body.jx h1.category-page-title {
    font-size: 18px !important;
  }
}

/* blog + post titles (h1.category-page-title.text-align-center: page-blog.php:18, single-irasas.php:64):
   the page-title scale of the content pages (.cart-bag-title h1 below), not the section-title one — at
   18px the blog title was smaller than the post-card titles under it. .text-align-center is !important
   (custom63.css:1357): left on desktop like the other listing titles (D16), centred on phones. */
body.jx.jx-tpl-page-blog h1.category-page-title,
body.jx.jx-post h1.category-page-title {
  font-size: 28px !important;
}

@media (min-width: 768px) {
  body.jx.jx-tpl-page-blog h1.category-page-title.text-align-center,
  body.jx.jx-post h1.category-page-title.text-align-center {
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  body.jx.jx-tpl-page-blog h1.category-page-title,
  body.jx.jx-post h1.category-page-title {
    font-size: 24px !important;
  }
}

/* (home section tabs "Naujienos" / "Turime sandėlyje": restyled as section titles by layout, 30-home.css) */

/* ---- catalogue band on every page (footer.php): "PARSISIŲSKITE 2026 METŲ / JANIDA KATALOGĄ" was 1.75rem
   (1.5rem <992)/400 with the body line-height (custom63.css:2929, 2954) -> the section-title treatment (D16).
   Its alignment inside the band is layout's. ---- */
body.jx .catalog-div h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: var(--jx-lh-tight);
  letter-spacing: .02em;
  color: var(--jx-text);
}

@media (max-width: 767px) {
  body.jx .catalog-div h2 {
    font-size: 18px;
  }
}

/* ---- page titles of the content pages (login, registration, contacts, cart, checkout, partners,
   testimonials, conference ...): `.cart-bag-title h1` 34px/300 (custom63.css:759), centred.
   Mobile keeps its size from .font-size-24px-for-xs (!important utility). ---- */
body.jx .cart-bag-title h1 {
  font-size: 28px;
  line-height: var(--jx-lh-tight);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jx-text);
}

/* column / form headings on those pages (h2 22pt uppercase: main11.css:2766/2778; 17pt/300: custom63.css:1569, 1650) */
body.jx .login-registration-div-class h2,
body.jx .registration-div-class h2 {
  font-size: 18px;
  line-height: var(--jx-lh-tight);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jx-text);
}

/* checkout column headings ("Asmeniniai duomenys", "Pristatymo būdas" ...): inline 400 17px
   (page-order-complete.php:70 etc., Release A file) -> the same weight as the form headings above */
body.jx .complete-order-billing h4,
body.jx .complete-order-delivery-payment h4,
body.jx .complete-order-review-submit h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: var(--jx-lh-tight);
  color: var(--jx-text);
}

/* 768-1279: 16px, so "ASMENINIAI DUOMENYS" (238px at 18px) fits its 25% column (228px at 1024) */
@media (min-width: 768px) and (max-width: 1279px) {
  body.jx .complete-order-billing h4,
  body.jx .complete-order-delivery-payment h4,
  body.jx .complete-order-review-submit h4 {
    font-size: 16px !important;
  }
}

/* its "(jeigu perka įmonė)" note (inline 13px) */
body.jx .complete-order-billing h4 > span {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--jx-text-muted);
}

/* testimonials page (page-testimonials.php): its h2s are long lead sentences (inline 13pt), not headings
   of a form column: readable sentence case, semi-bold */
body.jx.jx-tpl-page-testimonials .login-registration-div-class h2 {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--jx-s5);
}

body.jx.jx-tpl-page-testimonials .login-registration-div-class p {
  margin-top: var(--jx-s2);
}

/* two columns from 768: the first lead starts level with the photo beside it */
@media (min-width: 768px) {
  body.jx.jx-tpl-page-testimonials .login-registration-div-class > div > h2:first-child {
    margin-top: 0;
  }
}

/* ---- upright, left-aligned text (D16) ---- */
/* home testimonials: 10pt, quote italic (custom63.css:3080-3092), centred under 768 (custom63.css:3119) */
body.jx .front-page-testimonials-div .individual-front-page-testimonial p {
  font-size: 15px;
  line-height: var(--jx-lh);
}

body.jx .front-page-testimonials-div .individual-front-page-testimonial p:nth-child(3) {
  font-style: normal;
}

@media (max-width: 767px) {
  body.jx .front-page-testimonials-div .individual-front-page-testimonial {
    text-align: left;
  }
}

/* category sidebar links (custom63.css:377) and the product breadcrumb (custom63.css:580) */
body.jx .category-page-sidebar ul li a,
body.jx .individual-product-breadcrumb,
body.jx .individual-product-breadcrumb a {
  font-style: normal;
}

/* blog date (custom63.css:675, every property !important) */
body.jx .blog-entry-date {
  font-style: normal !important;
  color: var(--jx-text-muted);
}

/* home "write a testimonial" modal title (custom63.css:3177, 300 weight) */
body.jx .write-testimonial-popup h3 {
  font-size: 20px;
  line-height: var(--jx-lh-tight);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jx-text);
}


/* ==== 15-rhythm.css ==== */
/* ==========================================================================
   15-rhythm — section spacing (B2). Owner: layout. Margins only: title typography is 11-type.css.
   One section gap and one title-to-content gap:
     >= 768px  48px between sections (--jx-s7), 24px title -> content (--jx-s5)
     <  768px  32px between sections (--jx-s6), 16px title -> content (--jx-s4)
   Legacy gaps were 20/30/25/58/64/51/44px, set by shared utilities (.mt4rem, .mt35px-for-desktop,
   .mt10px-for-xs, .mtm10px, .mt12px, .mt0, several !important), so every override here is scoped to
   the home page or to listing pages, and uses !important where the legacy rule does.
   Top offsets on phones (content under the fixed 44px bar) are left alone, except the home hero,
   which was partly hidden behind the bar. Listing pages end one section gap above the catalogue band.
   ========================================================================== */

body.jx.jx-home {
  --jx-section-gap: var(--jx-s6);
  --jx-title-gap: var(--jx-s4);
}
@media (min-width: 768px) {
  body.jx.jx-home {
    --jx-section-gap: var(--jx-s7);
    --jx-title-gap: var(--jx-s5);
  }
}

/* ---- home: blocks that only hold floats get their real height, so the margins below measure
   from what you see (they had height 0 and the gaps depended on .clearfix clearance) ---- */
body.jx.jx-home .how-to-purchase,
body.jx.jx-home .ask-a-question {
  display: flow-root;
}

/* main11.css:1109 `.container > div {display:inline-block}` outranks style.css:9 (.top-area flex) and
   slick.css (.slick-slider block): both sit on a text baseline and add a 4px descender gap below. */
body.jx.jx-home .top-area,
body.jx.jx-home .all-products-slides {
  vertical-align: top;
}

/* ---- home: hero ---- style.css:12-13 (20/20), style.css:39 (hexes 20) */
/* Phones: .main starts at y=0 under the fixed 44px bar (22-header-mobile.css) and the hero's 20px top
   margin left its top 24px (and the rounded corners) hidden behind the bar. Bar + 16px. */
@media (max-width: 699px) {
  body.jx.jx-home .top-area {
    margin-top: calc(44px + var(--jx-s4));
  }
}
@media (min-width: 768px) {
  body.jx.jx-home .top-area {
    margin-top: var(--jx-s5);
  }
  body.jx.jx-home .hex-area {
    margin-top: var(--jx-s5);
  }
}
body.jx.jx-home .top-area {
  margin-bottom: 0;
}

/* ---- home: section starts (the gap sits on the title, measured from the block above) ----
   .home-heading-recommended: style.css:98 margin-bottom 20px, style.css:127 margin-top 30px (<=1010)
   .product-category-title: main11.css:54 h3 margin-top 1em, custom63.css:1371 margin-bottom 20px !important,
     .mtm10px -10px (custom63.css:2266), .mt35px-for-desktop 35px !important (custom63.css:1460),
     .mt10px-for-xs 10px !important (custom63.css:999)
   .mt4rem 64px !important (custom63.css:33) on the certificate and testimonial title rows */
body.jx.jx-home .home-heading-recommended {
  margin-top: var(--jx-section-gap);
  margin-bottom: var(--jx-title-gap);
}
/* phones: the tab row ran edge to edge while the cards below have the 16px gutter (40-cards.css) */
@media (max-width: 767px) {
  body.jx.jx-home .home-heading-recommended {
    width: auto;
    margin-left: var(--jx-gutter);
    margin-right: var(--jx-gutter);
  }
}
body.jx.jx-home .mt4rem {
  margin-top: 0 !important;
}
body.jx.jx-home .product-category-title {
  margin-top: var(--jx-section-gap) !important;
  margin-bottom: var(--jx-title-gap) !important;
}
/* testimonials: the title row is a flex box (title + "Rašyti atsiliepimą"), custom63.css:3046 mb 2rem */
body.jx.jx-home .front-page-testimonials-general-div.mt4rem {
  margin-top: var(--jx-section-gap) !important;
  margin-bottom: var(--jx-title-gap);
}

/* ---- home: section ends ---- */
/* slick-theme.css:117 .slick-dotted.slick-slider margin-bottom 30px (the dots sit inside the box) */
body.jx.jx-home .all-products-slides.slick-dotted.slick-slider {
  margin-bottom: 0;
}
/* custom63.css:3002 certificates mb 1rem */
body.jx.jx-home .front-page-certificates-div {
  margin-bottom: 0;
}
/* testimonials -> "Daugiau atsiliepimų" (custom63.css:3063 .5rem), which closes the section (3100 1rem, phones 2rem) */
body.jx.jx-home .front-page-testimonials-div {
  margin-bottom: var(--jx-title-gap);
}
body.jx.jx-home .load-more-testimonials-div {
  margin-bottom: 0;
}
/* contact form -> catalogue band: one gap. The bottom paddings after the form (.cms-home .main > .wrapper
   15px from 700px, main11.css:614; .col-main 5px, main11.css:4757) are folded into it. custom63.css:284 mb 20px */
body.jx.jx-home .ask-a-question {
  margin-bottom: var(--jx-section-gap);
}
body.jx.jx-home .main > .wrapper,
body.jx.jx-home .main .col-main {
  padding-bottom: 0;
}

/* ---- blog post (single-irasas.php) ----
   The title row is an inline-block (main11.css:1109) and the h1 carries an inline
   style="margin-top:32px !important; margin-bottom:2rem" (the top margin cannot be overridden from
   a stylesheet). On phones the post content adds 50px !important on top (custom63.css:1184, <=767):
   the title sat behind the fixed 44px bar and 82px above the date (52px from 768: 2rem + 20px,
   custom63.css:594). One title gap below it, as on the listing pages, and on phones the title row
   starts under the bar: bar + 16px, like the home hero. */
body.jx.jx-post h1.category-page-title {
  margin-bottom: var(--jx-s5) !important;
}
body.jx.jx-post .blog-individual-entry-content {
  margin-top: 0 !important;
}
@media (max-width: 767px) {
  body.jx.jx-post h1.category-page-title {
    margin-bottom: var(--jx-s4) !important;
  }
}
@media (max-width: 699px) {
  body.jx.jx-post .sec-container > .container > .text-align-center-for-xs:first-child {
    padding-top: calc(44px + var(--jx-s4) - 32px);
  }
}

/* ---- listing pages (category, subcategory, visi and the other full-width lists, blog) ---- */
/* main11.css:1109 `.container > div {display:inline-block}`: the list block sat on a text baseline
   (8px descender gap under it) */
body.jx .category-page-content {
  vertical-align: top;
}
/* list end -> catalogue band: one section gap. .col-main (5px, main11.css:4757) and
   .cms-home .main > .wrapper (15px, main11.css:614) already add 20px below the container.
   The blog list ends with its own 48px (the last card's margin, custom63.css:406), so it gets none;
   .mb10px-for-desktop on the list column (custom63.css:1480, !important) would add 10px more. */
@media (min-width: 768px) {
  body.jx:not(.jx-tpl-page-blog) .category-page-content,
  body.jx.jx-tpl-page-search .sec-container > .container {
    padding-bottom: calc(var(--jx-s7) - 20px);
  }
  body.jx .category-page-content > .mb10px-for-desktop {
    margin-bottom: 0 !important;
  }
}
/* custom63.css:1420 .more-products-div 20px, cancelled by .mt0 on the CPT templates */
body.jx .category-page-content .more-products-div {
  margin-top: var(--jx-s6) !important;
}
/* .mt12px !important (custom63.css:1391) + inline style="margin-bottom: 12px|15px|2rem" */
body.jx .category-page-content .category-page-title {
  margin-bottom: var(--jx-s4) !important;
}
@media (min-width: 768px) {
  /* custom63.css:350 30px; the title starts level with the sidebar */
  body.jx .category-page-content {
    margin-top: var(--jx-s6);
  }
  body.jx .category-page-content .category-page-title {
    margin-top: 0 !important;
    margin-bottom: var(--jx-s5) !important;
  }
  /* search results: h1.product-category-title (page-search.php:135), h3 1em + 20px !important; its row
     also has .mt25-for-desktop (custom63.css:1752, 25px !important) */
  body.jx.jx-tpl-page-search .mt25-for-desktop {
    margin-top: 0 !important;
  }
  body.jx.jx-tpl-page-search .product-category-title {
    margin-top: var(--jx-s6) !important;
    margin-bottom: var(--jx-s5) !important;
  }
}
@media (max-width: 767px) {
  body.jx.jx-tpl-page-search .product-category-title {
    margin-bottom: var(--jx-s4) !important;
  }
}


/* ==== 20-header.css ==== */
/* ==========================================================================
   20-header — desktop header (>= 700px, the legacy switch point of main11.css):
   A4 sky band, A5 sticky nav row, A6 logo / contacts / search.
   Width of the header and nav wrappers comes from 10-layout.css (A3).
   Always scope to .page > .header-container: main3.js clones .header-container
   into body > .header-container (the mobile bar, 22-header-mobile.css).
   ========================================================================== */

/* ---- A4: plain white page, no tiled fonas3.jpg (custom63.css:2222-2230, !important on body AND body > .wrapper) ---- */
body.jx.header-container-cloud-bg {
  background: var(--jx-white) !important;
}
body.jx > .wrapper.header-container-cloud-bg {
  background: transparent !important;
}

@media (min-width: 700px) {
  /* A4: sky band behind the header, fading out exactly at the nav baseline (header 150px + nav row 44px).
     body > .wrapper is position:relative from 700px (main11.css:3112); the sticky .page and .main paint above it. */
  body.jx > .wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--jx-header-h) + var(--jx-sticky-h));
    background: url(../images/jx-sky-900.webp) 50% 35% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    pointer-events: none;
  }

  /* A5: the whole .page is sticky, so the 150px header scrolls away and the 44px nav row stays.
     !important beats the inline style="top: 0;" on div.page (header.php). z-index 1000: above content
     (max .success-subscribe 999), below magnific (1042), lightbox (9999) and the cookie bar. */
  body.jx > .wrapper > .page {
    position: -webkit-sticky;
    position: sticky;
    top: calc(-1 * var(--jx-header-h)) !important;
    z-index: 1000;
  }

  /* ---- A6: header row ---- */
  /* logo: legacy .branding is absolute top:20px, 100% wide, and its link a 100%-wide block with a background logo
     (main11.css:3167-3194). Now a centred <img>; only the image is clickable. */
  body.jx .page > .header-container > .wrapper > .branding {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  body.jx .page > .header-container > .wrapper > .branding > h2 {
    width: auto;
    height: auto;
    line-height: 0;
  }
  body.jx .page > .header-container > .wrapper > .branding > h2 > a {
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    text-indent: 0;
    background: none;
    border-radius: var(--jx-radius-sm);
    pointer-events: auto;
  }
  body.jx .page > .header-container .jx-logo {
    display: block;
    width: auto;
    height: 60px;
  }

  /* contacts (left): legacy panel is absolute, 40px tall, left:1% (main11.css:3196; custom63.css:334) */
  body.jx .page > .header-container > .wrapper > .content > .header-panel.left-1-proc {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: var(--jx-lh-tight);
  }
  body.jx .page > .header-container .jx-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--jx-s1);
    padding: 0;
  }
  body.jx .page > .header-container .jx-contact__link {
    display: inline-flex;
    align-items: center;
    gap: var(--jx-s2);
    min-height: 32px;
    color: var(--jx-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
  }
  body.jx .page > .header-container .jx-contact__link .jx-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--jx-navy);
  }
  body.jx .page > .header-container .jx-contact__link:hover {
    color: var(--jx-green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* search + "Turite klausimų?" (right): legacy panel is absolute top:0 right:1%, 40px tall (main11.css:3196-3210) */
  body.jx .page > .header-container > .wrapper > .content.height-50px > .header-panel {
    top: 0;
    bottom: 0;
    right: 0;
    height: auto;
    width: min(240px, calc(50% - 130px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: var(--jx-lh-tight);
  }
  /* the question link sits above the search box; absolute, so logged-in pages (empty <p>) keep the box in place */
  body.jx .page > .header-container > .wrapper > .content.height-50px > .header-panel > p.welcome-msg {
    position: absolute;
    right: 0;
    bottom: calc(50% + 28px);
    margin: 0;
    padding: 0 !important; /* .pt10px-for-desktop (custom63.css:2241) */
    white-space: nowrap;
  }
  /* legacy: #5d5d5d uppercase bold, display:block + line-height:0 (main11.css:3222-3237, custom63.css:1333) */
  body.jx .page > .header-container > .wrapper > .content > .header-panel > p.welcome-msg a.do-you-have-questions-class {
    display: inline;
    margin: 0;
    line-height: var(--jx-lh-tight);
    color: var(--jx-green-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none !important; /* .text-decoration-underline (custom63.css:1465 !important): underline on hover only */
    text-underline-offset: 3px;
  }
  body.jx .page > .header-container > .wrapper > .content > .header-panel > p.welcome-msg a.do-you-have-questions-class:hover,
  body.jx .page > .header-container > .wrapper > .content > .header-panel > p.welcome-msg a.do-you-have-questions-class:focus-visible {
    color: var(--jx-green);
    text-decoration: underline !important;
  }

  /* search box (desktop copy only: #search_mini_form exists 3 times) — form 200px (main11.css:3583),
     input 149px/uppercase (main11.css:138), lime button !important (main11.css:154), 142px/-44px !important below 768 (custom63.css:2196-2203) */
  body.jx .page > .header-container #search_mini_form {
    float: none;
    width: 100%;
    height: 44px;
    line-height: normal;
  }
  body.jx .page > .header-container #search_mini_form .form-search {
    display: flex;
    width: 100%;
  }
  body.jx .page > .header-container #search_mini_form .input-text {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 44px;
    margin: 0;
    padding: 0 var(--jx-s3);
    box-sizing: border-box;
    background: var(--jx-white);
    border: 1px solid var(--jx-field-border);
    border-right: 0 !important;
    border-radius: var(--jx-radius) 0 0 var(--jx-radius);
    color: var(--jx-text);
    font-family: var(--jx-font);
    font-size: 15px;
    text-transform: none;
  }
  body.jx .page > .header-container #search_mini_form .input-text::placeholder {
    color: var(--jx-text-muted);
    opacity: 1;
  }
  body.jx .page > .header-container #search_mini_form button.search {
    float: none;
    flex: 0 0 44px;
    left: 0 !important;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jx-field-border);
    border-radius: 0 var(--jx-radius) var(--jx-radius) 0;
    background-color: var(--jx-surface) !important; /* neutral (owner review): main11.css:154 lime is !important */
  }
  body.jx .page > .header-container #search_mini_form button.search:hover {
    background-color: #E6EAE6 !important;
  }
  body.jx .page > .header-container #search_mini_form button.search i {
    color: var(--jx-text) !important; /* inline style="color: #555;" */
    font-size: 16px;
  }
  /* one focus ring around the field + button (the input's own ring would run under the button) */
  /* focus: the field + button border turns black (owner review: no heavy green ring) */
  body.jx .page > .header-container #search_mini_form .form-search:focus-within .input-text,
  body.jx .page > .header-container #search_mini_form .form-search:focus-within button.search {
    border-color: var(--jx-text);
  }
  body.jx .page > .header-container #search_mini_form .input-text:focus-visible {
    outline: none;
  }
  body.jx .page > .header-container #search_mini_form .search-autocomplete {
    position: absolute;
  }
  /* the mobile bar's search button is printed in the shared header markup */
  body.jx .page > .header-container .jx-bar-search {
    display: none;
  }
}

@media (min-width: 1024px) {
  body.jx > .wrapper::before {
    background-image: url(../images/jx-sky-1440.webp);
  }
  body.jx .page > .header-container .jx-logo {
    height: 70px;
  }
  body.jx .page > .header-container > .wrapper > .content.height-50px > .header-panel {
    width: 320px;
  }
}

@media (min-width: 1441px), (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1024px) and (min-resolution: 144dpi) {
  body.jx > .wrapper::before {
    background-image: url(../images/jx-sky-2400.webp);
  }
}


/* ==== 21-nav.css ==== */
/* ==========================================================================
   21-nav — desktop nav row (>= 700px): A2 tabs (one green, white active tab via aria-current from
   janida_ux_nav_attr()), dropdowns, A5 stuck state + mini logo, A6 account icon, D7 cart pill.
   Scoped to .page > .shop-container: the drawer (22-header-mobile.css) holds copies of the same li/a.
   Legacy fights: the ACF <style> printed inside ul#nav (header.php) paints every tab with single-class
   !important colours; radius classes are !important (custom63.css:2104-2170); the tab transition is
   !important (main11.css:3401). Hence the !important on those properties below.
   ========================================================================== */

@media (min-width: 700px) {
  /* row: legacy .menu is a 44px table, .nav-container a table-cell with overflow:hidden (main11.css:3324-3347).
     Do not position .nav-container / #nav / li: the dropdowns escape the overflow only because their
     containing block is .shop-container > .wrapper. */
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu {
    display: flex;
    align-items: center;
    gap: var(--jx-s2);
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
  }
  /* table / table-cell !important (main11.css:3360-3376) */
  body.jx .page > .shop-container #nav {
    display: flex !important;
    gap: 3px;
    width: auto;
    height: 44px;
  }
  body.jx .page > .shop-container #nav > li {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
  }
  body.jx .page > .shop-container #nav > li > a {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 10px;
    color: var(--jx-white) !important;
    background-color: var(--jx-green) !important;
    border-radius: var(--jx-radius) var(--jx-radius) 0 0 !important;
    font-family: var(--jx-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease !important;
  }
  body.jx .page > .shop-container #nav > li > a:hover,
  body.jx .page > .shop-container #nav > li.over > a {
    background-color: var(--jx-green-dark) !important;
  }
  /* D3: the current section is a white tab joined to the white page below */
  body.jx .page > .shop-container #nav > li > a[aria-current="page"] {
    background-color: var(--jx-white) !important;
    color: var(--jx-green) !important;
  }
  body.jx .page > .shop-container #nav > li > a[aria-current="page"]:hover,
  body.jx .page > .shop-container #nav > li.over > a[aria-current="page"] {
    background-color: var(--jx-green-tint) !important;
    color: var(--jx-green-dark) !important;
  }
  /* focus: the nav-container clips outlines, so the ring is inset (D19) */
  body.jx .page > .shop-container #nav > li > a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--jx-focus-color), inset 0 0 0 5px var(--jx-white);
  }
  body.jx .page > .shop-container #nav > li > a .fa-home {
    font-size: 16px;
    vertical-align: -1px;
  }

  /* ---- dropdowns (>= 1024px; switched off below, see the 700-1023 block) ---- */
  /* legacy: lime #99cb58 panel, 12px white links, 1.9:1 (main11.css:4763-4789, specificity 1,8,3) */
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav li:hover ul.shown-sub,
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav > li:focus-within > ul.level0 {
    display: block;
    position: absolute;
    z-index: 10;
    margin: 0;
    padding: var(--jx-s2);
    box-sizing: border-box;
    background: var(--jx-white);
    border: 1px solid var(--jx-border);
    border-top: 0;
    border-radius: 0 0 var(--jx-radius) var(--jx-radius) !important;
    box-shadow: var(--jx-shadow-2);
    list-style: none;
    text-align: left;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav li:hover ul.shown-sub a,
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav > li:focus-within > ul.level0 a {
    display: block;
    padding: 10px var(--jx-s3);
    border-radius: var(--jx-radius-sm);
    color: var(--jx-text);
    font-family: var(--jx-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: normal;
    text-transform: none;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease !important;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav li:hover ul.shown-sub li:hover,
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav > li:focus-within > ul.level0 li:hover {
    background: none;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav li:hover ul.shown-sub a:hover,
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav > li:focus-within > ul.level0 a:hover {
    background: var(--jx-green-tint);
    color: var(--jx-green-dark);
  }
  body.jx .page > .shop-container #nav ul.level0 a:focus-visible {
    outline-offset: -3px;
  }
  /* Escape closes an open dropdown (20-sticky-nav.js sets .jx-closed until focus/pointer leaves the tab) */
  body.jx .page > .shop-container #nav > li.jx-closed > ul.level0 {
    display: none !important;
  }
  /* two columns: dotted lime divider !important (custom63.css:2122-2127) */
  body.jx .page > .shop-container #nav ul.level0 > li.menu-li-left-for-desktop {
    border-right: 0 !important;
  }

  /* ---- A6/D6: account icon (between the tabs and the cart) ---- */
  body.jx .page > .shop-container .jx-account {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 1px solid var(--jx-border);
    border-radius: var(--jx-radius-pill);
    background: var(--jx-white);
    box-shadow: var(--jx-shadow-1);
    color: var(--jx-green);
    line-height: normal;
    transition: background-color .15s ease, color .15s ease;
  }
  body.jx .page > .shop-container .jx-account:hover,
  body.jx .page > .shop-container .jx-account[aria-current="page"] {
    background: var(--jx-green-tint);
    color: var(--jx-green-dark);
  }
  body.jx .page > .shop-container .jx-account .jx-icon {
    display: block;
    width: 20px;
    height: 20px;
  }
  body.jx .page > .shop-container .jx-account__label,
  body.jx .page > .shop-container .jx-cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- D7: cart = pink CTA pill with a white count badge ---- */
  /* legacy: table-cell 34px tab, ACF .krepselis-2-class colour !important, #00aff0 hover !important
     (custom63.css:172-181), inline border radius. position:relative (main11.css:1490) anchors the mini-cart. */
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .top-cart {
    flex: 0 0 auto;
    display: block;
    box-sizing: border-box;
    height: 36px;
    min-height: 0;
    max-height: none;
    padding: 0;
    background-color: var(--jx-cta) !important;
    border-radius: var(--jx-radius-pill) !important;
    line-height: normal;
    transition: background-color .15s ease !important;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .top-cart:hover {
    background-color: var(--jx-cta-dark) !important;
  }
  body.jx .page > .shop-container #cartHeader {
    display: block;
    height: 100%;
    font-size: 14px;
  }
  body.jx .page > .shop-container #cartHeader > a {
    display: flex;
    align-items: center;
    gap: var(--jx-s2);
    box-sizing: border-box;
    height: 100%;
    padding: 0 var(--jx-s3) 0 14px;
    border-radius: var(--jx-radius-pill);
    color: var(--jx-white);
    font-family: var(--jx-font);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
  }
  body.jx .page > .shop-container #cartHeader > a[aria-current="page"] {
    background-color: var(--jx-cta-dark);
  }
  body.jx .page > .shop-container #cartHeader > a > i {
    font-size: 16px;
  }
  /* legacy count: bag-tick.png + navy on white 10px, colour !important (main11.css:3425-3445) */
  body.jx .page > .shop-container #cartHeader .count {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
  }
  body.jx .page > .shop-container #cartHeader .count > span {
    display: block;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--jx-white);
    color: var(--jx-cta) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .top-cart:focus-within {
    outline: none;
  }

  /* mini-cart panel (contents are Release A markup: restyle the frame only).
     It opens on .top-cart hover, so a transparent bridge keeps the pointer inside across the 4px gap. */
  body.jx .page > .shop-container #topCartContent {
    top: calc(100% + 4px);
    width: 300px;
    max-width: none; /* 238px (main11.css:1505) */
    background: var(--jx-white);
    border: 1px solid var(--jx-border);
    border-radius: var(--jx-radius);
    box-shadow: var(--jx-shadow-2);
    text-align: left;
  }
  body.jx .page > .shop-container #topCartContent::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
  }
  body.jx .page > .shop-container #topCartContent .inner-wrapper,
  body.jx .page > .shop-container #topCartContent .cart-empty {
    border-radius: var(--jx-radius) !important;
  }
  /* .cart-empty: white on lime #99cb58, 12px (custom63.css:151) */
  body.jx .page > .shop-container #topCartContent .cart-empty {
    margin: 0;
    background: transparent;
    font-weight: 400;
    padding: var(--jx-s4);
    color: var(--jx-text);
    font-size: 14px;
    line-height: var(--jx-lh);
    text-transform: none;
  }
  /* "Peržiūrėti krepšelį": full width with equal insets. Global's button base makes it inline-flex with a
     2px border, the panel is text-align:left, and below 768 .width-100proc-for-xs / .mb0-for-xs
     (custom63.css:1262-1268, !important) push it onto the panel border. A <button> never stretches to
     width:auto, hence the calc (box-sizing is border-box). */
  body.jx .page > .shop-container #topCartContent .actions > .cart-bag-button-2 {
    display: flex;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--jx-s3)) !important;
    margin-right: var(--jx-s3);
    margin-bottom: var(--jx-s3) !important;
    margin-left: var(--jx-s3);
  }

  /* ---- A5: stuck nav row (body.jx-stuck from 20-sticky-nav.js) ---- */
  /* The nav row reserves 16px above the 44px tabs in both states, so the stuck bar can be 60px
     (12px above and below the 36px tabs, owner review) without the page height changing when it
     sticks. At rest the tabs stay at 150-194px: the row starts 6px higher (inline margin-top:10px
     -> -6px, into the empty bottom of the 140px header; its content ends at 105px), which makes
     --jx-header-h 134px. */
  body.jx .page > .shop-container {
    margin-top: -6px !important;
    padding-top: 16px;
  }
  /* .background-transparent{background:transparent !important} (custom63.css:2235) */
  body.jx.jx-stuck .page > .shop-container {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--jx-white) !important;
    box-shadow: var(--jx-shadow-2);
  }
  /* in the white bar the tabs become 36px pills; the 4px margins keep a dropdown's top on the bar's
     bottom edge (its static position) and stay inside the hovered li */
  body.jx.jx-stuck .page > .shop-container #nav > li > a {
    height: 36px;
    min-height: 0;
    max-height: none;
    margin: 4px 0;
    line-height: 36px;
    border-radius: var(--jx-radius) !important;
  }
  body.jx.jx-stuck .page > .shop-container #nav > li > a[aria-current="page"] {
    background-color: var(--jx-green-tint) !important;
    color: var(--jx-green) !important;
  }
  body.jx .page > .shop-container .jx-minilogo {
    display: none;
  }
}

/* 700-1023: the tab row scrolls sideways (fade mask set by 20-sticky-nav.js); no dropdowns
   (touch tablets; the subcategories are listed on each category page) */
@media (min-width: 700px) and (max-width: 1023px) {
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container::-webkit-scrollbar {
    display: none;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container.jx-more-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container.jx-more-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
    mask-image: linear-gradient(to right, transparent, #000 40px);
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container.jx-more-start.jx-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
  body.jx .page > .shop-container #nav > li {
    flex: 0 0 auto;
  }
  body.jx .page > .shop-container #nav > li > a {
    text-overflow: clip;
  }
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav li:hover ul.shown-sub,
  body.jx .page > .shop-container > .wrapper > .viewcontroller > .menu > .nav-container ul#nav > li:focus-within > ul.level0 {
    display: none !important;
  }
}

/* D1: 14px / 600 with 12px padding from 1280px; the cart label shows */
@media (min-width: 1280px) {
  body.jx .page > .shop-container #nav > li > a {
    padding: 0 12px;
    font-size: 14px;
  }
  body.jx .page > .shop-container .jx-cart-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
  body.jx .page > .shop-container #cartHeader > a {
    padding: 0 var(--jx-s3) 0 var(--jx-s4);
  }
  /* A5/D2: in the stuck row the mini logo replaces the home tab */
  body.jx.jx-stuck .page > .shop-container .jx-minilogo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 44px;
    padding: 0 var(--jx-s2) 0 0;
    line-height: 0;
  }
  body.jx.jx-stuck .page > .shop-container .jx-minilogo img {
    display: block;
    width: auto;
    height: 32px;
  }
  body.jx.jx-stuck .page > .shop-container #nav > li:first-of-type {
    display: none !important;
  }
}


/* ==== 22-header-mobile.css ==== */
/* ==========================================================================
   22-header-mobile — A7 mobile bar, search panel and drawer (< 700px, main11.css's switch point).
   The bar is main3.js's clone of the header (body > .header-container), made at window.onload.
   Until then the original (.page > .header-container) is shown as a CSS-only fallback bar, so the
   bar rules use "body.jx .header-container", which matches both copies (the original is
   display:none below 700px otherwise, main11.css:5291). The bar stays exactly 44px tall:
   every template offsets its content for it (.cms-home{padding:0}, main11.css:8149).
   ========================================================================== */

/* the search button exists only in the mobile bar */
body.jx .jx-bar-search {
  display: none;
}

@media (max-width: 699px) {
  /* ---- pre-onload fallback bar: show the original header as the bar until the clone exists ---- */
  body.jx > .wrapper > .page > .header-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 3000;
  }
  body.jx:not(.jx-search-open) > .wrapper > .page > .header-container > .wrapper > .content {
    display: none;
  }
  /* main3.js prepends the clone to <body>: from then on only the clone is the bar */
  body.jx > .header-container ~ .wrapper > .page > .header-container {
    display: none;
  }
  /* before onload the drawer is still empty (main3.js fills it at onload), so the menu button waits */
  body.jx > .wrapper > .page > .header-container .leftbarbuttonitem {
    opacity: .4;
    pointer-events: none;
  }

  /* ---- bar ---- */
  body.jx .header-container {
    box-sizing: border-box;
    height: 44px;
    background: var(--jx-white);
    border-bottom: 1px solid var(--jx-border);
    overflow: visible !important; /* main3.js writes inline overflow-y on the clone when the drawer opens/closes */
  }
  body.jx .header-container > .wrapper {
    position: relative;
    height: 43px;
  }

  /* logo: legacy is a text link with a background (inline ACF url, then main11.css:6339 !important on
     retina screens = a 404 Bills image, so phones showed no logo) */
  body.jx .header-container > .wrapper > .branding {
    position: static;
    height: 43px;
    min-height: 0;
    max-height: none;
    line-height: normal;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.jx .header-container > .wrapper > .branding > h2 {
    width: auto;
    height: auto;
    margin: 0;
    line-height: 0;
  }
  body.jx .header-container > .wrapper > .branding > h2 > a {
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 2px 4px;
    overflow: visible;
    text-indent: 0;
    background-image: none !important;
  }
  body.jx .header-container .jx-logo {
    display: block;
    width: auto;
    height: 32px;
  }

  /* three 44x44 buttons: menu (left), search and cart (right). Legacy: 38px raster icons hanging
     below the bar (main11.css:5104-5160: hamburger.png, cart-icon.png with a baked-in badge) */
  body.jx .header-container .leftbarbuttonitem,
  body.jx .header-container .jx-bar-search,
  body.jx .header-container .rightbarbuttonitem {
    position: absolute;
    top: 0;
    z-index: 5000;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body.jx .header-container .leftbarbuttonitem {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217A12' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  }
  body.jx .header-container .jx-bar-search {
    display: block;
    right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217A12' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  }
  body.jx.jx-search-open .header-container .jx-bar-search {
    background-color: var(--jx-green-tint);
  }
  body.jx .header-container .rightbarbuttonitem {
    right: 0;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.4l2.4 10.5h10.9L20.8 7H6'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E");
    background-size: 26px 26px;
  }
  /* count badge = the <a> (main3.js writes the count into it); its ::after stretches the tap area
     over the whole 44x44 button, so every tap on the icon opens the cart */
  body.jx .header-container .rightbarbuttonitem > a {
    position: absolute;
    top: 3px;
    right: 1px;
    box-sizing: border-box;
    width: auto;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--jx-cta);
    color: var(--jx-white);
    font: 700 11px/18px var(--jx-font);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
  }
  body.jx .header-container .rightbarbuttonitem > a::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -1px;
    width: 44px;
    height: 44px;
  }
  /* empty cart: no badge (the count is 0, or not written yet before onload) */
  body.jx .header-container .rightbarbuttonitem[data-count="0"] > a,
  body.jx .header-container .rightbarbuttonitem > a:empty {
    background: transparent;
    color: transparent;
  }

  /* focus rings inside the 44px bar (legacy :focus{outline:0}, main11.css:45) */
  body.jx .header-container .leftbarbuttonitem:focus-visible,
  body.jx .header-container .jx-bar-search:focus-visible {
    outline: 3px solid var(--jx-focus-color);
    outline-offset: -5px;
    box-shadow: none;
  }
  body.jx .header-container .rightbarbuttonitem > a:focus-visible {
    outline: none;
    box-shadow: none;
  }
  body.jx .header-container .rightbarbuttonitem > a:focus-visible::after {
    outline: 3px solid var(--jx-focus-color);
    outline-offset: -5px;
  }
  body.jx .header-container > .wrapper > .branding > h2 > a:focus-visible {
    outline-offset: -2px;
  }

  /* ---- search panel under the bar: the bar's own hidden copy of #search_mini_form ---- */
  body.jx.jx-search-open .header-container > .wrapper > .content.height-50px {
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: auto !important; /* .height-50px (custom63.css:1329) */
    padding: var(--jx-s2) var(--jx-s4) var(--jx-s3);
    background: var(--jx-white);
    border-bottom: 1px solid var(--jx-border);
    box-shadow: var(--jx-shadow-2);
    z-index: 4000;
  }
  body.jx .header-container > .wrapper > .content.height-50px > .header-panel {
    position: static;
    height: auto;
    line-height: normal;
  }
  body.jx .header-container > .wrapper > .content.height-50px .welcome-msg,
  body.jx .header-container > .wrapper > .content.height-50px .links,
  body.jx .header-container > .wrapper > .content.height-50px .switches,
  body.jx .header-container > .wrapper > .content.height-50px > .header {
    display: none;
  }

  /* both mobile copies of the search box (bar panel + drawer): 44px, 16px text (no iOS focus zoom) */
  body.jx .header-container #search_mini_form,
  body.jx .mobile-nav form#search_mini_form {
    float: none;
    width: auto;
    margin: 0;
  }
  body.jx .mobile-nav form#search_mini_form {
    margin: var(--jx-s3) var(--jx-s4);
  }
  body.jx .header-container #search_mini_form .form-search,
  body.jx .mobile-nav #search_mini_form .form-search {
    display: flex;
    margin: 0;
  }
  body.jx .header-container #search_mini_form .input-text,
  body.jx .mobile-nav #search_mini_form .input-text {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important; /* .width-142px-for-xs (custom63.css:2197) */
    height: 44px;
    margin: 0;
    padding: 0 var(--jx-s3);
    box-sizing: border-box;
    background: var(--jx-white);
    border: 1px solid var(--jx-field-border);
    border-right: 0 !important; /* main11.css:151 */
    border-radius: var(--jx-radius) 0 0 var(--jx-radius);
    color: var(--jx-text);
    font-family: var(--jx-font);
    font-size: 16px;
    text-transform: none;
  }
  body.jx .header-container #search_mini_form .input-text::placeholder,
  body.jx .mobile-nav #search_mini_form .input-text::placeholder {
    color: var(--jx-text-muted);
    opacity: 1;
  }
  body.jx .header-container #search_mini_form button.search,
  body.jx .mobile-nav #search_mini_form button.search {
    float: none;
    flex: 0 0 48px;
    left: 0 !important; /* .left-minus-44px-for-xs (custom63.css:2201) */
    width: 48px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jx-field-border);
    border-radius: 0 var(--jx-radius) var(--jx-radius) 0;
    background-color: var(--jx-surface) !important; /* neutral like the desktop search (main11.css:154) */
  }
  body.jx .header-container #search_mini_form button.search i,
  body.jx .mobile-nav #search_mini_form button.search i {
    color: var(--jx-text) !important; /* inline style="color: #555;" */
    font-size: 17px;
  }
  /* focus: the field + button border turns black, like the desktop search (owner review) */
  body.jx .header-container #search_mini_form .form-search:focus-within .input-text,
  body.jx .header-container #search_mini_form .form-search:focus-within button.search,
  body.jx .mobile-nav #search_mini_form .form-search:focus-within .input-text,
  body.jx .mobile-nav #search_mini_form .form-search:focus-within button.search {
    border-color: var(--jx-text);
  }
  body.jx .header-container #search_mini_form .input-text:focus-visible,
  body.jx .mobile-nav #search_mini_form .input-text:focus-visible {
    outline: none;
  }
  body.jx .header-container #search_mini_form .search-autocomplete,
  body.jx .mobile-nav #search_mini_form .search-autocomplete {
    position: absolute;
  }

  /* ---- drawer (main3.js: fixed 300px panel behind the page, which slides 300px right) ---- */
  body.jx > .mobile-shade {
    background: rgba(20, 30, 20, .45) !important; /* main11.css:5402 url(shade.png) !important, a 404 */
  }
  body.jx .mobile-nav {
    background: var(--jx-white);
  }
  body.jx .mobile-nav > .content {
    padding: 0 0 var(--jx-s5);
  }
  body.jx .mobile-nav hr {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--jx-border) !important; /* stitch.png, main11.css:5507 / retina 6368 !important */
  }
  body.jx .mobile-nav > .content > ul > li {
    position: relative;
    min-height: 44px;
    text-align: left;
    border-bottom: 1px solid var(--jx-border);
    background: none; /* arrow-down.png / dropdown-active.png, both 404 */
  }
  /* top-level rows (the cloned desktop tabs keep their ACF !important colours and radius classes) */
  body.jx .mobile-nav .content > ul > li > a {
    display: block;
    min-height: 44px;
    margin: 0 !important; /* custom63.css:1128 */
    padding: 12px var(--jx-s4);
    box-sizing: border-box;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--jx-text) !important;
    font-family: var(--jx-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    text-decoration: none;
  }
  body.jx .mobile-nav .content > ul > li > a:hover {
    text-decoration: none;
    color: var(--jx-green) !important;
  }
  body.jx .mobile-nav .content > ul > li > a[aria-current="page"] {
    color: var(--jx-green) !important;
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--jx-green);
  }
  /* the home tab is an icon only: give it its words in the menu */
  body.jx .mobile-nav .content > ul > li:first-child > a .fa-home {
    margin-right: var(--jx-s2);
    color: var(--jx-green);
  }
  body.jx .mobile-nav .content > ul > li:first-child > a::after {
    content: "Pradžia";
  }
  /* rows with a submenu: room for the toggle button (22-header-mobile.js) */
  body.jx .mobile-nav .content > ul > li.jx-has-sub > a {
    margin-right: 48px !important;
  }
  body.jx .mobile-nav .jx-subtoggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--jx-border);
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217A12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    cursor: pointer;
    touch-action: manipulation;
  }
  body.jx .mobile-nav .jx-subtoggle[aria-expanded="true"] {
    transform: rotate(180deg);
    border-left: 0;
    border-right: 1px solid var(--jx-border);
  }
  /* the drawer's .content clips overflow: inset rings */
  body.jx .mobile-nav .content a:focus-visible,
  body.jx .mobile-nav .jx-subtoggle:focus-visible {
    outline-offset: -4px;
  }
  /* submenus */
  body.jx .mobile-nav > .content ul li ul {
    margin: 0;
    padding: var(--jx-s1) 0;
    border-top: 1px solid var(--jx-border);
    background: var(--jx-surface);
  }
  body.jx .mobile-nav > .content ul li ul li {
    min-height: 44px;
    text-align: left;
  }
  body.jx .mobile-nav > .content ul li ul li a {
    display: block;
    min-height: 44px;
    padding: 12px var(--jx-s4) 12px 28px;
    box-sizing: border-box;
    color: var(--jx-text);
    font-size: 15px;
    line-height: 20px;
    text-transform: none;
    text-decoration: none;
  }
  body.jx .mobile-nav > .content ul li ul li a:hover {
    background: var(--jx-green-tint);
    color: var(--jx-green-dark);
  }
  /* contacts row (main3.js copies the first .welcome-msg here) */
  body.jx .mobile-nav > .content li#welcome-msg {
    border-bottom: 0;
    padding: var(--jx-s2) 0;
  }
  body.jx .mobile-nav > .content li#welcome-msg .mobile-hr {
    display: none;
  }
  body.jx .mobile-nav .jx-contact {
    display: block;
  }
  /* legacy: uppercase, 0 7px padding, border-left (main11.css:5515-5525, ID specificity) */
  body.jx .mobile-nav > .content li#welcome-msg .jx-contact__link {
    display: flex;
    align-items: center;
    gap: var(--jx-s3);
    min-height: 44px;
    padding: 0 var(--jx-s4);
    border-left: 0;
    color: var(--jx-text);
    font-size: 15px;
    text-transform: none;
    text-decoration: none;
  }
  body.jx .mobile-nav > .content li#welcome-msg .jx-contact__link:hover {
    color: var(--jx-green);
  }
  body.jx .mobile-nav .jx-contact .jx-icon {
    flex: 0 0 auto;
    color: var(--jx-navy);
  }
}


/* ==== 30-home.css ==== */
/* ==========================================================================
   30-home — home page quick fixes (D11 hero, hexagons, steps, carousel arrows). Owner: layout.
   Section spacing lives in 15-rhythm.css; card and title typography belong to other partials.
   ========================================================================== */

/* ---- Hero (D11) --------------------------------------------------------------------------
   bjqs writes style="height:420px; max-width:1000px" on .slider-area (bjqs-1.3.js:196-200) and the
   inline fitSliderHeight() in front-page.php animates .slider-area/ul.bjqs to each image's natural
   ratio (1240x531 for slide 1, 1240x698 for slide 2 = a 167px jump on every change). From 768px the
   hero gets one fixed ratio (the 1916x821 main slide) and every slide is cropped to it, so nothing
   below it moves. Phones keep the legacy behaviour. !important beats the inline styles. */
@media (min-width: 768px) {
  body.jx .slider-area {
    max-width: none !important;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 1916 / 821;
  }
  body.jx .slider-area ul.bjqs,
  body.jx .slider-area li.bjqs-slide,
  body.jx .slider-area li.bjqs-slide > a,
  body.jx .slider-area li.bjqs-slide img {
    width: 100% !important;
    height: 100% !important;
  }
  /* style.css:29 object-fit:unset. Slides of another ratio are cropped from the bottom: slide 2
     (heder2.png, 1672x941) has its headline box at the top and loses 24% of its height here
     (the owner should re-export it at 1916x821). */
  body.jx .slider-area li.bjqs-slide img {
    object-fit: cover;
    object-position: 50% 0;
  }
}

/* Slide markers (style.css:72-93: 30px squares, radius 10px, 3px `green` border): round, no border,
   white with a soft shadow so they read on any photo; the current/hover one is filled --jx-green
   (05-a11y.css). The 44px hit area is the ::after in 05-a11y.css. */
body.jx ol.bjqs-markers li {
  width: 40px;
}
body.jx ol.bjqs-markers li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  margin: 0 0 var(--jx-s2);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  color: var(--jx-text);
  font-weight: 600;
}

/* ---- Section tabs "Naujienos" / "Turime sandėlyje" ------------------------------------------
   style.css:98 makes the tab row a float:left; width:100% box. The card grids after it are block
   formatting contexts (40-cards.css display:grid), and a BFC next to a float shrinks beside it:
   the "Turime sandėlyje" grid was pushed to the right of the float, off-screen. A normal block that
   still contains its floated tab (style.css:99) keeps the row full width and above the cards. */
body.jx .home-heading-recommended {
  float: none;
  display: flow-root;
  border-bottom: 0; /* style.css:98 1px rule; the green bar under the title stays (owner review) */
}
/* The tab itself was the legacy blue #1e73be pill (style.css:98-100: 250px, 400 16px uppercase white,
   the only off-palette element of the home content). It now reads like the other home section titles
   (the D16 values of 11-type.css: dark 700 22px / 18px <768, uppercase, .02em, left) and keeps a tab
   hint: a 3px --jx-green bar under the title, sitting on the row's 1px line. It is still the link to
   the full list, so hover/focus darken it. */
body.jx .home-heading-recommended a {
  width: auto;
  margin-bottom: 0;
  padding: 0 0 var(--jx-s2);
  background: none;
  border-bottom: 3px solid var(--jx-green);
  border-radius: 0;
  color: var(--jx-text);
  font-family: var(--jx-font);
  font-size: 22px;
  font-weight: 700;
  line-height: var(--jx-lh-tight);
  letter-spacing: .02em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
}
body.jx .home-heading-recommended a:hover,
body.jx .home-heading-recommended a:focus {
  color: var(--jx-green-dark);
  border-bottom-color: var(--jx-green-dark);
}
/* phones: 18px and centred like the other section titles there (11-type.css is left from 768 only) */
@media (max-width: 767px) {
  body.jx .home-heading-recommended a {
    float: none;
    display: table;
    margin: 0 auto -1px;
    font-size: 18px;
  }
}

/* ---- Hexagon tiles --------------------------------------------------------------------------
   The tiles are fixed 202x170 (the frame PNG cannot scale). A tile whose ACF label is empty prints
   an empty link (the 5th block today): hide it everywhere, not just >=1011px (style.css:49/115). */
body.jx .hexagon:has(.hex-button a:empty) {
  display: none;
}
/* Frame colour: images/hexagon-container.png (202x170) is a #1e73be frame with opaque white corners
   that hide the photo outside the hexagon. The PNG is kept as a mask only: its alpha (frame + corners)
   is painted --jx-green, and the tile is clipped to the frame's outer edge (measured on the PNG:
   top 49-153px, points at y=85), which removes the corners. Browsers without masks keep the PNG. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  body.jx .hexagon {
    -webkit-clip-path: polygon(49px 0, 153px 0, 202px 85px, 153px 170px, 49px 170px, 0 85px);
    clip-path: polygon(49px 0, 153px 0, 202px 85px, 153px 170px, 49px 170px, 0 85px);
  }
  body.jx .hex-container {
    background: var(--jx-green);
    -webkit-mask: url("../images/hexagon-container.png") no-repeat 0 0;
    mask: url("../images/hexagon-container.png") no-repeat 0 0;
  }
}
/* Rounded hexagons (owner review: six corners, softer). The tile is clipped to a hexagon with rounded
   corners and painted --jx-green; the photo is clipped to the same shape inset by 6px, so the green shows
   as an even frame, also around the curves. The frame PNG is not needed there. Coordinates are px of the
   fixed 202x170 tile (style.css:43), generated from the frame's measured points with a 24px corner cut
   (20px inside). The photo now fills the tile (cover) instead of showing its top-left corner. Browsers
   without clip-path: path() keep the straight-edged version above. */
@supports (clip-path: path("M 0 0 Z")) {
  body.jx .hexagon {
    -webkit-clip-path: path("M 73.0 0.0 L 129.0 0.0 Q 153.0 0.0 165.0 20.8 L 190.0 64.2 Q 202.0 85.0 190.0 105.8 L 165.0 149.2 Q 153.0 170.0 129.0 170.0 L 73.0 170.0 Q 49.0 170.0 37.0 149.2 L 12.0 105.8 Q 0.0 85.0 12.0 64.2 L 37.0 20.8 Q 49.0 0.0 73.0 0.0 Z");
    clip-path: path("M 73.0 0.0 L 129.0 0.0 Q 153.0 0.0 165.0 20.8 L 190.0 64.2 Q 202.0 85.0 190.0 105.8 L 165.0 149.2 Q 153.0 170.0 129.0 170.0 L 73.0 170.0 Q 49.0 170.0 37.0 149.2 L 12.0 105.8 Q 0.0 85.0 12.0 64.2 L 37.0 20.8 Q 49.0 0.0 73.0 0.0 Z");
    background: var(--jx-green);
  }
  body.jx .hexagon > .hex-container {
    display: none;
  }
  body.jx .hexagon > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-clip-path: path("M 72.5 6.0 L 129.5 6.0 Q 149.5 6.0 159.5 23.3 L 185.1 67.7 Q 195.1 85.0 185.1 102.3 L 159.5 146.7 Q 149.5 164.0 129.5 164.0 L 72.5 164.0 Q 52.5 164.0 42.5 146.7 L 16.9 102.3 Q 6.9 85.0 16.9 67.7 L 42.5 23.3 Q 52.5 6.0 72.5 6.0 Z");
    clip-path: path("M 72.5 6.0 L 129.5 6.0 Q 149.5 6.0 159.5 23.3 L 185.1 67.7 Q 195.1 85.0 185.1 102.3 L 159.5 146.7 Q 149.5 164.0 129.5 164.0 L 72.5 164.0 Q 52.5 164.0 42.5 146.7 L 16.9 102.3 Q 6.9 85.0 16.9 67.7 L 42.5 23.3 Q 52.5 6.0 72.5 6.0 Z");
  }
}

/* Label box: style.css:52 pins its TOP 22px above the middle (top:50%; margin-top:-22px), so 2- and
   3-line labels hung low and had different heights. Centre the box on the tile and give every box the
   height of a 3-line label, with the text centred inside it (owner review). */
body.jx .hex-button {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
body.jx .hex-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px; /* 3 lines x 16px x 1.25 (11-type.css) + 2 x 8px */
  padding: var(--jx-s2) var(--jx-s2);
  box-sizing: border-box;
}

/* style.css:36 gap 20px; 4 x 202 + 3 x 32 = 904px, fits the 976px container at 1024 */
@media (min-width: 1011px) {
  body.jx .hex-area {
    gap: var(--jx-s6);
  }
}
/* 461-903px: four tiles do not fit one row (4 x 202 + 3 x 16 = 856px), so show 2 + 2 instead of 3 + 1
   (<=460px they stack in one column, style.css:133). */
@media (min-width: 461px) and (max-width: 903px) {
  body.jx .hex-area {
    max-width: calc(2 * 202px + var(--jx-s6));
    margin-left: auto;
    margin-right: auto;
    column-gap: var(--jx-s6);
  }
}

/* ---- "Kaip įsigyti" step circles --------------------------------------------------------------
   Legacy: white 40px/300 numerals on #00b0f0 / #92d050 / #d6f868 / #ffc000 = 2.5 / 1.9 / 1.2 / 1.6:1
   (custom63.css:239, backgrounds custom63.css:2172-2190 !important). Keep the colours; dark numerals
   on the light circles (5.6-12:1), white on the navy one (#005696, 7.4:1). */
body.jx .how-to-purchase-step {
  color: var(--jx-text);
  font-weight: 600;
}
body.jx .how-to-purchase-step.bg-color-005696 {
  color: var(--jx-white);
}

/* ---- Naujienos carousel ------------------------------------------------------------------------
   Equal slides: slick floats the slides and .slick-list takes the tallest one, so a shorter slide
   (fewer delivery notes, one-line prices) left a blank band above the dots: up to 69px at 1440 and
   139px at 375. As a flex row every slide stretches to the tallest; the card grid inside stretches
   its rows (40-cards.css, the price stays at the card bottom), so the cards take the space instead.
   Nothing below the carousel moves between slides (it did not before either). */
body.jx .all-products-slides .slick-track {
  display: flex;
}
/* slick.css:61 clearfix pseudo-elements would be flex items */
body.jx .all-products-slides .slick-track::before,
body.jx .all-products-slides .slick-track::after {
  display: none;
}
body.jx .all-products-slides .slick-slide {
  float: none;
  flex: 0 0 auto;
  height: auto; /* slick.css:82 height:100% would block the stretch */
}
body.jx .all-products-slides .slick-slide > div,
body.jx .all-products-slides .slick-slide > div > .all-products {
  height: 100%;
}

/* Dots: custom63.css:2865 pins them at bottom:0 (-10px on phones) over the cards' last row once the
   dot buttons are 44px tall (31-buttons.css). In the flow they get their own row under the cards. */
body.jx .all-products-slides .slick-dots {
  position: relative;
  bottom: auto;
}

/* Arrows (D12: inside the container), their 44px green look is 31-buttons.css. custom63.css:2834-2862
   centres them at left/right -60px: off-screen on phones, over the card corners at 1024-1399 and in
   the page margin from 1400. At every width they now sit in the dots row under the cards, prev at the
   left edge and next at the right edge, never over a card. 30-home.js moves them in the DOM to match
   (cards, prev, dots, next) so the tab order follows what you see. */
body.jx .all-products-slides .slick-arrow {
  z-index: 2;
  top: auto;
  bottom: 0;
  -webkit-transform: none;
  transform: none;
}
body.jx .all-products-slides .slick-prev {
  left: 0;
}
body.jx .all-products-slides .slick-next {
  right: 0;
}


/* ==== 31-buttons.css ==== */
/* ==========================================================================
   31 buttons (global builder): B3 / D17. One system for the new .jx-btn markup and every legacy
   button class. Other areas may set layout on buttons (margin, width, order, flex), not colours/type.
     primary   = --jx-cta pink, white text (4.9:1; hover --jx-cta-dark 6.5:1) — one per view
     secondary = white, 2px --jx-green border + text (5.4:1)
     text      = underlined --jx-green-dark link
   Legacy rules are single classes (custom63.css:307/544/703/800/916/947/1501, (0,1,0)-(0,2,0)):
   body.jx .x (0,2,1) wins without !important. Legacy font-weight 200/300, uppercase, letter-spacing
   and `transition: all .2s` are reset here.
   ========================================================================== */

/* ---- base ---- */
body.jx .jx-btn,
body.jx .add-to-cart-button,
body.jx .cart-bag-button,
body.jx .cart-bag-button-2,
body.jx .ask-question-button,
body.jx .login-button-class,
body.jx .more-products-button,
body.jx .cart-bag-product-quantity-update-button,
body.jx .conference-div-class .password-input-div button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jx-s2);
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--jx-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border: 2px solid transparent;
  border-radius: var(--jx-radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* ---- primary (pink CTA) ----
   product "Įdėti į krepšelį", cart "Pereiti į apmokėjimą", checkout "Patvirtinti užsakymą",
   home ask form + testimonial modal submit, login/contacts/registration/account/password submits,
   conference "Prisijungti" (was #81d742, 1.8:1). The catalogue band is secondary (below). */
body.jx .jx-btn--cta,
body.jx .add-to-cart-button,
body.jx .cart-bag-button,
body.jx .ask-question-button,
body.jx .login-button-class,
body.jx .conference-div-class .password-input-div button {
  background-color: var(--jx-cta);
  border-color: var(--jx-cta);
  color: #fff;
}

body.jx .jx-btn--cta:hover,
body.jx .add-to-cart-button:hover,
body.jx .cart-bag-button:hover,
body.jx .ask-question-button:hover,
body.jx .login-button-class:hover,
body.jx .conference-div-class .password-input-div button:hover {
  background-color: var(--jx-cta-dark);
  border-color: var(--jx-cta-dark);
  color: #fff;
}

/* conference: the button is joined to the password field on its right (custom63.css:2751) */
body.jx .conference-div-class .password-input-div button {
  height: auto;
  border-radius: 0 var(--jx-radius-sm) var(--jx-radius-sm) 0;
}

/* ---- secondary (green outline) ----
   back / continue shopping (cart, checkout, header mini-cart "Peržiūrėti krepšelį"), "Rašyti atsiliepimą",
   "Daugiau atsiliepimų", cart "Atnaujinti", blog "Skaityti įrašą", login page "Registruotis", pager,
   the catalogue band on every page (footer.php .catalog-div .cart-bag-button: "Parsisiųsti katalogą",
   on blog posts "← Grįžti į tinklaraštį"), which shared the first view with each page's own pink submit.
   Same or higher specificity than the primary list and later in the file, so it wins where both match. */
body.jx .jx-btn--secondary,
body.jx .catalog-div .cart-bag-button,
body.jx .cart-bag-button-2,
body.jx .write-testimonial-btn-class,
body.jx #loadMoreTestimonialsDiv .ask-question-button,
body.jx .cart-bag-product-quantity-update-button,
body.jx .more-products-button,
body.jx.jx-tpl-page-login .login-registration-div-class > div > .login-button-class {
  background-color: #fff;
  border-color: var(--jx-green);
  color: var(--jx-green);
}

body.jx .jx-btn--secondary:hover,
body.jx .catalog-div .cart-bag-button:hover,
body.jx .cart-bag-button-2:hover,
body.jx .write-testimonial-btn-class:hover,
body.jx #loadMoreTestimonialsDiv .ask-question-button:hover,
body.jx .cart-bag-product-quantity-update-button:hover,
body.jx .more-products-button:hover,
body.jx.jx-tpl-page-login .login-registration-div-class > div > .login-button-class:hover {
  background-color: var(--jx-green-tint);
  border-color: var(--jx-green-dark);
  color: var(--jx-green-dark);
}

/* ---- pager (category / subcategory lists): 44px squares, the current page filled green.
   .bg-color-77aa35 is !important (custom63.css:2325). aria-current is set by 10-a11y.js. ---- */
body.jx .more-products-div .more-products-button {
  min-width: 44px;
  padding: 0 12px;
}

body.jx .more-products-div .more-products-button.bg-color-77aa35,
body.jx .more-products-div .more-products-button.bg-color-77aa35:hover {
  background-color: var(--jx-green) !important;
  border-color: var(--jx-green) !important;
  color: #fff;
  cursor: default;
}

/* ---- white inner ring for the keyboard focus on filled buttons (D19) ---- */
body.jx .jx-btn--cta:focus-visible,
body.jx .add-to-cart-button:focus-visible,
body.jx .cart-bag-button:focus-visible,
body.jx .ask-question-button:focus-visible,
body.jx .login-button-class:focus-visible,
body.jx .conference-div-class .password-input-div button:focus-visible,
body.jx .more-products-div .more-products-button.bg-color-77aa35:focus-visible {
  box-shadow: inset 0 0 0 2px #fff;
}

body.jx .catalog-div .cart-bag-button:focus-visible {
  box-shadow: none;
}

/* catalogue band "Parsisiųsti katalogą": black outline, filled black on hover (owner review) */
body.jx .catalog-div .cart-bag-button {
  border-color: var(--jx-text);
  color: var(--jx-text);
}
body.jx .catalog-div .cart-bag-button:hover {
  background-color: var(--jx-text);
  border-color: var(--jx-text);
  color: #fff;
}

/* ---- busy / disabled: custom48.js sets [disabled] (#ft_news_button, #askQuestionId button) and
   .pointer-events-none (testimonial buttons, custom63.css:2695 !important) ---- */
body.jx .jx-btn:disabled,
body.jx .jx-btn[aria-disabled="true"],
body.jx button.pointer-events-none,
body.jx button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- text link ----
   "Pamiršote slaptažodį?" (custom63.css:1529-1537, colour/decoration !important; no href: 10-a11y.js makes
   it keyboard reachable). 44px tall hit area. */
body.jx .forget-password-href-class {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jx-green-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.jx .forget-password-href-class:hover {
  color: var(--jx-green-dark) !important;
  text-decoration-thickness: 2px !important;
}

body.jx .forget-password-div-class {
  margin-top: var(--jx-s1);
  margin-bottom: var(--jx-s3);
}

/* cart product names and the checkout links (pickup address map, the terms "(skaityti)" next to the
   required checkbox) were #282828 without underline (main11.css:2787, custom63.css:829).
   Not !important: custom48.js marks #agreementHrefId .color-e74c3c / .color-2ecc71 (!important, 05-a11y.css). */
body.jx a.cart-bag-product-title,
body.jx .order-review-totals-table a {
  color: var(--jx-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.jx a.cart-bag-product-title:hover,
body.jx .order-review-totals-table a:hover {
  color: var(--jx-green-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---- icon buttons ---- */
/* cart remove "X": #aaa 24px/200 on white (2.3:1, custom63.css:839) -> muted 5.5:1, 44x44 */
body.jx .cart-bag-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-family: var(--jx-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--jx-text-muted);
  background-color: transparent;
  border: 0;
  border-radius: var(--jx-radius-sm);
  transition: background-color .15s, color .15s;
}

body.jx .cart-bag-remove-button:hover {
  color: var(--jx-danger);
  background-color: #FBEAEA;
}

/* home product carousel arrows: #81d742 36x36 with a white icon (1.8:1, custom63.css:2834) ->
   green 44x44 (position: layout / cards). aria-labels: 10-a11y.js */
body.jx .all-products-slides .slick-prev,
body.jx .all-products-slides .slick-next {
  width: 44px;
  height: 44px;
  line-height: 44px;
  background-color: var(--jx-green);
  color: #fff;
  border-radius: var(--jx-radius);
}

body.jx .all-products-slides .slick-prev:hover,
body.jx .all-products-slides .slick-next:hover,
body.jx .all-products-slides .slick-prev:focus,
body.jx .all-products-slides .slick-next:focus {
  background-color: var(--jx-green-dark);
  color: #fff;
}

body.jx .all-products-slides .slick-prev:focus-visible,
body.jx .all-products-slides .slick-next:focus-visible {
  box-shadow: inset 0 0 0 2px #fff;
}

/* carousel dots: 10px grey buttons (custom63.css:2873-2895, #ddd = 1.4:1) -> a 24x44 transparent hit area
   with a 12px dot drawn by ::before (#8A948F 3.2:1, current page --jx-green) */
body.jx .all-products-slides .slick-dots li {
  width: 24px;
  height: 44px;
  margin: 0 2px;
}

body.jx .all-products-slides .slick-dots li button {
  position: relative;
  width: 24px;
  height: 44px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

body.jx .all-products-slides .slick-dots li button::before {
  display: block;
  content: "";
  font: 0/0 var(--jx-font); /* slick-theme.css gives it font-family 'slick', whose files 404 */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background-color: #8A948F;
  opacity: 1;
}

body.jx .all-products-slides .slick-dots li.slick-active button::before {
  background-color: var(--jx-green);
}

/* keyboard focus on any slick dot: slick-theme.css:167-170 `.slick-dots li button:focus{outline:none}` is
   (0,2,2) and beat the global ring (0,2,1) */
body.jx .slick-dots li button:focus-visible {
  outline: 3px solid var(--jx-focus-color);
  outline-offset: 2px;
  border-radius: var(--jx-radius-sm);
}

/* ---- footer newsletter: 33px field + 32x33 submit with the pink arrow image (main11.css:92-131;
   the background colour is !important there) -> 44px field + 44x44 submit ---- */
body.jx #newsletter-validate-detail .search-box-right #ft_news_button {
  width: 44px;
  max-width: 44px;
  height: 44px;
  margin-left: -44px;
  background-position: center center;
}

/* ---- cookie bar (every legacy property is !important, custom63.css:2486-2620).
   Accept and decline stay equally prominent (consent): the same white outline and white text on the dark
   bar (7:1), white fill on hover. The legacy lime #ADE02C accept outline is not a brand colour; the
   decline text #f09188 was 3.2:1. ---- */
body.jx .privacy-policy-button-agree,
body.jx .privacy-policy-button-disagree,
body.jx .privacy-policy-button-agree-mobile,
body.jx .privacy-policy-button-disagree-mobile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto !important;
  min-width: 140px;
  min-height: 44px;
  padding: 8px 20px !important;
  font-family: var(--jx-font) !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .85) !important;
  border-radius: var(--jx-radius-sm) !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}

body.jx .privacy-policy-button-disagree {
  margin-left: var(--jx-s3) !important;
}

/* phones: full-width stacked buttons (legacy display-block) */
body.jx .privacy-policy-button-agree-mobile,
body.jx .privacy-policy-button-disagree-mobile {
  display: flex !important;
  width: 100% !important;
}

body.jx .privacy-policy-button-agree > span,
body.jx .privacy-policy-button-disagree > span,
body.jx .privacy-policy-button-agree-mobile > span,
body.jx .privacy-policy-button-disagree-mobile > span {
  color: inherit !important;
  font-size: inherit !important;
  text-transform: none !important;
}

body.jx .privacy-policy-button-agree:hover,
body.jx .privacy-policy-button-agree-mobile:hover,
body.jx .privacy-policy-button-disagree:hover,
body.jx .privacy-policy-button-disagree-mobile:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--jx-text) !important;
}


/* ==== 35-forms.css ==== */
/* ==========================================================================
   35 forms (global builder): D18. Text fields 44px, Montserrat 15px (16px on touch screens, so iOS
   does not zoom on focus now that the preview allows pinch-zoom), --jx-field-border (4:1 on white;
   legacy #ccc/#bbb were 1.6/1.9:1), checkboxes 20px with accent-color.
   border-color is deliberately NOT !important: custom48.js toggles .error-input / .success-input,
   whose border-color is !important (custom63.css:1873-1879) and must keep winning.
   ========================================================================== */

body.jx .registration-input-class:not([type="radio"]):not([type="checkbox"]),
body.jx .login-registration-input,
body.jx .login-registration-textarea,
body.jx .ask-question-input,
body.jx .ask-question-textarea,
body.jx .cart-bag-product-quantity-input,
body.jx .conference-div-class .password-input-div input {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--jx-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--jx-text);
  background-color: #fff;
  border: 1px solid var(--jx-field-border);
  border-radius: var(--jx-radius-sm);
}

/* legacy fixed heights: 33px (custom63.css:1580/1648, line-height 12px) and the contacts textarea 33px
   (custom63.css:1787, no font-family: it rendered monospace) */
body.jx .login-registration-input,
body.jx .registration-input-class:not([type="radio"]):not([type="checkbox"]) {
  height: 44px;
}

body.jx .login-registration-textarea,
body.jx .ask-question-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

/* home ask form: the legacy widths were content-box (custom63.css:288/297 100% / 96.5% + 22px of padding
   and border; phones 92% !important, custom63.css:1061/1067). With border-box they fill their column. */
body.jx .ask-question-input,
body.jx .ask-question-textarea {
  width: 100% !important;
}

/* checkout / account fields sat 5px apart (.mt5px utility, custom63.css:1593 !important) */
body.jx .registration-input-class.mt5px {
  margin-top: var(--jx-s2) !important;
}

/* cart quantity (custom63.css:793: 30px wide) */
body.jx .cart-bag-product-quantity-input {
  width: 64px;
  text-align: center;
}

/* conference password: joined to its button on the right (custom63.css:2739) */
body.jx .conference-div-class .password-input-div input {
  border-right: 0;
  border-radius: var(--jx-radius-sm) 0 0 var(--jx-radius-sm);
}

/* read-only / disabled (my account e-mail, checkout for logged-in buyers: inline #dedede backgrounds) */
body.jx .registration-input-class:disabled,
body.jx .login-registration-input:disabled {
  color: var(--jx-text-muted);
  cursor: not-allowed;
}

/* ---- footer newsletter field (white on navy; the border is transparent !important,
   custom63.css:1869 .border-1px-solid-transparent) ---- */
body.jx #newsletter-validate-detail .search-box-right input[type="text"] {
  height: 44px;
  padding-right: 44px; /* the 44px submit (31-buttons.css) lies over the right end of the field */
  font-size: 15px;
  border-radius: var(--jx-radius-sm);
}

/* (its width on phones and the wider newsletter column at 700-1023, so the placeholder "Įveskite savo
   el. pašto adresą" fits: layout, 60-footer.css) */

/* ---- checkout fields (page-order-complete.php, Release A markup) ----
   The field wrappers carry an inline width:85%; the legacy content-box fields overflowed it by 22px,
   the border-box ones stopped at it (12px narrower on phones, where they were 91% + centred,
   custom63.css:1696). They fill their column again (the column gutter: 55-pages.css). */
body.jx .complete-order-billing > div {
  width: 100% !important;
}

body.jx .complete-order-billing .registration-input-class:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
}

/* 768-1023: the column leaves 142px for text; "Įmonės pavadinimas" needs 156px at 15px (135px at 13px)
   and the placeholders are the only labels */
@media (min-width: 768px) and (max-width: 1023px) {
  body.jx .complete-order-billing .registration-input-class:not([type="radio"]):not([type="checkbox"]) {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.jx .complete-order-billing .registration-input-class::placeholder {
    font-size: 13px;
  }
}

/* ---- checkboxes and radios ---- */
body.jx input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: var(--jx-s2);
  vertical-align: -4px;
  accent-color: var(--jx-green);
  cursor: pointer;
}

/* checkout radios keep their inline 25x25 float (page-order-complete.php:156-180, Release A); the
   option text started right at the circle */
body.jx input[type="radio"] {
  accent-color: var(--jx-green);
  cursor: pointer;
}

body.jx input[type="radio"][name="delivery_method"],
body.jx input[type="radio"][name="payment_method"] {
  margin-right: var(--jx-s2);
}

/* ---- touch screens: 16px text in every field, or iOS Safari zooms in on focus.
   #product_quantity (custom63.css:733, 15px) and the header search are included; an owner may size
   them differently for pointer:fine. ---- */
@media (pointer: coarse) {
  body.jx input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  body.jx select,
  body.jx textarea,
  body.jx .login-registration-textarea,
  body.jx .ask-question-textarea,
  body.jx #product_quantity,
  body.jx #newsletter-validate-detail .search-box-right input[type="text"] {
    font-size: 16px;
  }
}

/* checkout option texts select their radio (10-a11y.js) */
body.jx input[type="radio"][name="delivery_method"] + span,
body.jx input[type="radio"][name="payment_method"] + span {
  cursor: pointer;
}


/* ==== 40-cards.css ==== */
/* ==========================================================================
   40 — Product cards and listing grids (D1 / D12). Owner: cards.
   One markup everywhere (16 templates, plus front-page.php and the related products in
   single-produktas.php):
     .category-products | .all-products          grid container
       > .min-height-380px-for-desktop            card
           > .min-height-200px-for-desktop > a > img   image frame (the only link)
           > .produktas-kaina > h2 (title), h2.product-delivery-note, p.jx-price (41-price.css)
   Traps: the blog list reuses .category-products (page-blog.php:20) and the hidden home block
   "Apie mus rašo" is .all-products.display-none (front-page.php:371), so both are excluded.
   ========================================================================== */

/* ---- grid containers ----
   display:grid !important beats the inline style="display: block;" (front-page.php:216/250,
   page-search.php:143). 2 columns below 768px. */
body.jx .category-products:not(.blog-category-products),
body.jx .all-products:not(.display-none) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jx-s3);
  align-items: stretch;
}

/* the float helpers are grid children now; custom63.css:397 forces inline-block !important
   on every ".category-products > div" */
body.jx .category-products > .clearfix-for-xs,
body.jx .all-products > .clearfix-for-xs {
  display: none !important;
}

/* phones: the legacy grids and the empty-list message touch the screen edges (x=0);
   the home carousel already has 16px */
@media (max-width: 767px) {
  body.jx .category-page-products .category-products,
  body.jx .category-page-products-2 .category-products,
  body.jx .container > .all-products:not(.display-none),
  body.jx .there-are-no-products {
    padding: 0 var(--jx-gutter);
  }
}

@media (min-width: 768px) {
  body.jx .category-products:not(.blog-category-products) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--jx-s4);
  }
  /* home slides and the "Turime sandėlyje" block hold 10 cards: 5 across (and 2 on phones) */
  body.jx .all-products:not(.display-none) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--jx-s3);
  }
  /* related products on the product page: 4 cards, keep them on one row */
  body.jx.jx-product .category-page-products .category-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* related wrapper is shifted by .ml-minus-15px-for-desktop (custom63.css:2145, !important) */
  body.jx.jx-product .category-page-products.ml-minus-15px-for-desktop {
    margin-left: 0 !important;
  }
}

@media (min-width: 1024px) {
  /* sidebar layouts (category, subcategory) and related products */
  body.jx .category-page-products .category-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--jx-s5) var(--jx-s4);
  }
  /* full-width lists (visos prekės, naujienos, sandėlyje, pasiūlymai, rekomenduojamos) */
  body.jx .category-page-products-2 .category-products:not(.blog-category-products) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--jx-s5) var(--jx-s4);
  }
  body.jx .all-products:not(.display-none) {
    gap: var(--jx-s4);
  }
}

/* ---- card ---- */
body.jx .category-products > .min-height-380px-for-desktop,
body.jx .all-products > .min-height-380px-for-desktop {
  position: relative;          /* containing block of the stretched link and the badge */
  display: flex !important;    /* custom63.css:58 / :397 inline-block !important */
  flex-direction: column;
  width: auto !important;      /* custom63.css:1158 50% !important (<768) */
  float: none;
  min-height: 0;               /* custom63.css:2269 360px (>=768) */
  margin: 0 !important;        /* .mt20px-for-xs custom63.css:1049/1165 (!important) */
  padding: var(--jx-s2);
  background: var(--jx-white);
  border: 1px solid var(--jx-border);
  border-radius: var(--jx-radius);
  text-align: left;
  transition: transform .18s var(--jx-ease), box-shadow .18s var(--jx-ease);
}

@media (min-width: 768px) {
  body.jx .category-products > .min-height-380px-for-desktop,
  body.jx .all-products > .min-height-380px-for-desktop {
    padding: var(--jx-s3);
  }
}

/* 768-1023: the 5-across .all-products blocks (D12) leave ~135px per card, so they get a compact
   card (tighter gap and padding, 16px price, sale line that fits on one row) */
@media (min-width: 768px) and (max-width: 1023px) {
  body.jx .all-products:not(.display-none) {
    gap: var(--jx-s2);
  }
  body.jx .all-products > .min-height-380px-for-desktop {
    padding: var(--jx-s2);
  }
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card {
    font-size: var(--jx-fs-md);
  }
  /* old price + pill on one row in the 120px text column ("899,00 € −22 %"), now-price below */
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card.jx-price--sale {
    column-gap: var(--jx-s1);
  }
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card .jx-price__old {
    font-size: var(--jx-fs-xs);
  }
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card .jx-price__badge {
    padding: 1px var(--jx-s1);
  }
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card.jx-price--ask,
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card.jx-price--soldout,
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card.jx-price--soon,
  body.jx .all-products > .min-height-380px-for-desktop .jx-price--card.jx-price--text {
    font-size: var(--jx-fs-xs);
  }
}

/* 1024-1279: the 5-across lists (visos prekės and the other full-width lists, home) have ~182px
   cards; 8px padding gives the title 164px instead of 156px */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.jx .category-page-products-2 .category-products:not(.blog-category-products) > .min-height-380px-for-desktop,
  body.jx .all-products > .min-height-380px-for-desktop {
    padding: var(--jx-s2);
  }
}

/* ---- square image frame ----
   min-height:0 !important beats custom63.css:2275 (200px !important); the 1:1 box also reserves
   the space before the photo loads (category mobile CLS). Not positioned on purpose: the link's
   ::after must resolve to the card, not to this frame. */
body.jx .min-height-380px-for-desktop > .min-height-200px-for-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  overflow: hidden;
  border-radius: var(--jx-radius-sm);
  background: var(--jx-white);
}

body.jx .min-height-200px-for-desktop > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* custom63.css:113/510: max-width 90%, radius 6px, "transition: all". (70-media.css sets height:auto
   on the -240x240 crops; they are square, so they fill the frame either way.) */
body.jx .min-height-200px-for-desktop > a > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  transition: transform .3s var(--jx-ease);
}

/* the legacy 1.05 zoom (custom63.css:120/519) would fire from anywhere on the card now that the
   link covers it, and it sticks after a tap on touch screens: off by default, 1.03 on hover devices */
body.jx .category-products a:hover img,
body.jx .all-products a:hover img {
  transform: none;
}

/* ---- whole card clickable: stretch the image link over the card ----
   The image anchor is the only interactive element in a card, so the title and price clicks
   land on the product link (the title's onclick goToUrl() goes to the same URL). Any future
   in-card control needs position:relative; z-index:2. */
body.jx .min-height-200px-for-desktop > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--jx-radius);
}

body.jx .min-height-200px-for-desktop > a:focus-visible {
  outline: none;
}

body.jx .min-height-200px-for-desktop > a:focus-visible::after {
  outline: 3px solid var(--jx-focus-color);
  outline-offset: 2px;
}

/* the carousel's .slick-list clips anything outside the slide: ring inside the card there */
body.jx .all-products-slides .min-height-200px-for-desktop > a:focus-visible::after {
  outline-offset: -3px;
}

/* ---- "Akcija" badge (sale cards only; the price helper marks them .jx-price--sale) ---- */
body.jx .min-height-380px-for-desktop:has(.jx-price--sale) > .min-height-200px-for-desktop::before {
  content: "Akcija";
  position: absolute;
  top: var(--jx-s4);
  left: var(--jx-s4);
  z-index: 2;
  padding: 3px var(--jx-s2);
  border-radius: var(--jx-radius-pill);
  background: var(--jx-cta);
  color: var(--jx-white);
  font: 700 var(--jx-fs-xs)/1.4 var(--jx-font);
  letter-spacing: .02em;
  pointer-events: none;
}

@media (min-width: 768px) {
  body.jx .min-height-380px-for-desktop:has(.jx-price--sale) > .min-height-200px-for-desktop::before {
    top: var(--jx-s5);
    left: var(--jx-s5);
  }
}

/* the compact 8px-padding cards (see above): keep the badge 8px inside the photo frame */
@media (min-width: 768px) and (max-width: 1279px) {
  body.jx .all-products > .min-height-380px-for-desktop:has(.jx-price--sale) > .min-height-200px-for-desktop::before {
    top: var(--jx-s4);
    left: var(--jx-s4);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.jx .category-page-products-2 .category-products > .min-height-380px-for-desktop:has(.jx-price--sale) > .min-height-200px-for-desktop::before {
    top: var(--jx-s4);
    left: var(--jx-s4);
  }
}

/* ---- text block: title, delivery note, price at the bottom ---- */
body.jx .min-height-380px-for-desktop > .produktas-kaina {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: auto;                 /* custom63.css:62-67 94% + 3% margins, centred */
  margin: var(--jx-s3) 0 0;
  text-align: left;
}

/* custom63.css:69-89: 10pt/16px, centred, min-height 32px !important, 2-line clamp.
   Up to 3 lines (2 reserved, so rows of short names stay compact; the price is pinned to the card
   bottom either way): at 2 lines most long names lost the words that tell products apart.
   14px/1.3 in the narrow cards (every card below 1280px is 120-203px of text), 15px/1.35 from
   1280px (207px+). Clamped names on /visos-prekes/: 375 133/715, 1024 69, 1440 19 (legacy
   13.33px/2 lines: 173, 42, 42). */
body.jx .min-height-380px-for-desktop > .produktas-kaina > h2:first-child {
  margin: 0 0 var(--jx-s1);
  font: 500 14px/1.3 var(--jx-font);
  min-height: 2.6em !important;
  max-height: 3.9em;
  -webkit-line-clamp: 3;
  color: var(--jx-text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  transition: color .18s var(--jx-ease);
}

@media (min-width: 1280px) {
  body.jx .min-height-380px-for-desktop > .produktas-kaina > h2:first-child {
    font-size: var(--jx-fs-base);
    line-height: 1.35;
    min-height: 2.7em !important;
    max-height: 4.05em;
  }
}

/* "Pristatymas per 2-3 d. d." (in-stock products); the blank &nbsp; rows are not printed in the
   preview. custom63.css:2279-2288 sets pink 9pt with !important */
body.jx .min-height-380px-for-desktop > .produktas-kaina > .product-delivery-note {
  margin: 0 0 var(--jx-s1);
  min-height: 0 !important;
  max-height: none;
  font: 600 var(--jx-fs-xs)/1.4 var(--jx-font);
  font-size: var(--jx-fs-xs) !important;
  color: var(--jx-success) !important;
  text-align: left;
  text-transform: none;
  text-wrap: balance;          /* no lone "d." on a second line in narrow cards */
}

/* the price sits at the bottom, so prices line up across a row */
body.jx .min-height-380px-for-desktop > .produktas-kaina > .jx-price {
  margin-top: auto;
  padding-top: var(--jx-s2);
}

/* legacy price h3 (templates not converted to janida_ux_price(): the hidden seminar prices
   keep their inline display:none). custom63.css:91-111 is the blue chip that looked like a button */
body.jx .min-height-380px-for-desktop > .produktas-kaina > h3 {
  margin: auto 0 0;
  padding: var(--jx-s2) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 700 var(--jx-fs-md)/1.3 var(--jx-font);
  color: var(--jx-text);
  text-align: left;
  text-transform: none;
  cursor: inherit;
}

body.jx .min-height-380px-for-desktop > .produktas-kaina > h3:hover {
  border: 0;
  background: none;
  color: var(--jx-text);
}

body.jx .min-height-380px-for-desktop > .produktas-kaina .strikeout2 {
  font-size: var(--jx-fs-sm);
  font-weight: 400;
  color: var(--jx-text-muted);
}

body.jx .min-height-380px-for-desktop > .produktas-kaina .strikeout2::after {
  border-bottom-color: currentColor;
}

/* ---- hover: lift only where hovering exists ---- */
@media (hover: hover) {
  body.jx .category-products > .min-height-380px-for-desktop:hover,
  body.jx .all-products > .min-height-380px-for-desktop:hover {
    transform: translateY(-3px);
    box-shadow: var(--jx-shadow-2);
  }
  body.jx .min-height-380px-for-desktop:hover > .produktas-kaina > h2:first-child {
    color: var(--jx-green);
  }
  body.jx .category-products a:hover img,
  body.jx .all-products a:hover img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.jx .category-products > .min-height-380px-for-desktop,
  body.jx .all-products > .min-height-380px-for-desktop,
  body.jx .min-height-200px-for-desktop > a > img {
    transition: none;
  }
  body.jx .category-products > .min-height-380px-for-desktop:hover,
  body.jx .all-products > .min-height-380px-for-desktop:hover,
  body.jx .category-products a:hover img,
  body.jx .all-products a:hover img {
    transform: none;
  }
}

/* ---- home carousel: slick.css:21 .slick-list overflow:hidden would clip the lift and shadow ---- */
body.jx .all-products-slides .slick-list {
  padding: 6px 0 20px;
}

/* ---- listing sidebar (category / subcategory, >=768; hidden on phones by .display-none-for-xs) ----
   custom63.css:353/377: 20% float, content-box, inline links 14px/22px with no gap between items,
   so a 2-line link read as two items and the longest one ran into the grid (4px at 1024). */
body.jx .category-page-sidebar {
  box-sizing: border-box;      /* the padding must not push the 80% product column below */
  padding-right: var(--jx-s4);
}

@media (min-width: 1024px) {
  body.jx .category-page-sidebar {
    padding-right: var(--jx-s5);
  }
}

body.jx .category-page-sidebar ul li {
  margin: 0;
}

body.jx .category-page-sidebar ul li a {
  display: block;
  padding: 6px 0;
  line-height: 1.3;
}

/* current subcategory (single-subkategorija.php / page-subcategory.php mark it with the
   .text-decoration-underline class; the preview also adds aria-current="page") */
body.jx .category-page-sidebar ul li a.text-decoration-underline {
  color: var(--jx-green);
  font-weight: 600;
}

/* ---- blog list (page-blog.php): cards on the container edges like the rest of the page ----
   custom63.css:401-500: 50% flex wrappers (100% below 992px) and cards with margin 0 14px, so the
   cards sat 14px inside the header/H1 edge and 28px apart (30px from the screen edge on phones,
   on top of the 16px list padding above). The row spacing stays the wrappers' 48px margin
   (15-rhythm.css counts on it after the last card). */
body.jx .blog-category-products {
  column-gap: var(--jx-s5);
}

@media (min-width: 992px) {
  body.jx .blog-category-products > .blog-entry-card-wrapper {
    width: calc(50% - var(--jx-s5) / 2);
  }
}

/* one border round the whole card: the card without a photo (its placeholder is display:none)
   had an open top edge */
body.jx .blog-category-products > .blog-entry-card-wrapper > .blog-entry-card {
  margin-left: 0;
  margin-right: 0;
  border: 1px solid var(--jx-border);
  border-radius: var(--jx-radius);
}

body.jx .blog-entry-card .blog-entry-card-content {
  border: 0;
  border-radius: 0;
}

/* custom63.css:470: 20pt/26px weight 300 (0.98 line-height, 4 lines at 375) */
body.jx .blog-entry-card .blog-entry-card-content h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 var(--jx-s3);
  font: 600 18px/1.25 var(--jx-font);
  color: var(--jx-text);
  text-transform: none;
}

@media (min-width: 768px) {
  body.jx .blog-entry-card .blog-entry-card-content h2 {
    font-size: var(--jx-fs-lg);
  }
}


/* ==== 41-price.css ==== */
/* ==========================================================================
   41 — Prices (D2 / D13). Owner: cards.
   Markup from janida_ux_price() (inc/jx/price.php): <p class="jx-price jx-price--card|--product
   [--sale|--ask|--soldout|--soon|--text]"> with .jx-price__now / __old / __badge / __ask.
   A <p> instead of the legacy h2/h3 escapes the chip (custom63.css:91-111), the product-page
   yellow box (custom63.css:649) and the global h2/h3 uppercase rules (main11.css:2766).
   This file sets the look of every variant and the base size per context; where the price sits
   (card bottom: 40-cards.css, product buy box: 50-product.css) belongs to that layout.
   ========================================================================== */

/* base; font-style/weight/colour also beat ".individual-product-description-price p"
   (custom63.css:637: 14px italic 300 #555) on the product page */
body.jx .jx-price {
  margin: 0;
  font-family: var(--jx-font);
  font-size: var(--jx-fs-md);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jx-text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

body.jx .jx-price__now {
  text-decoration: none;       /* <ins> */
  white-space: nowrap;
}

/* ---- sale: pink now-price, struck old price, "−22 %" pill; wraps as a unit in narrow cards ---- */
body.jx .jx-price--sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--jx-s2);
}

body.jx .jx-price--sale .jx-price__now {
  color: var(--jx-cta);
}

body.jx .jx-price__old {
  font-size: var(--jx-fs-sm);
  font-weight: 400;
  color: var(--jx-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

body.jx .jx-price__badge {
  align-self: center;
  padding: 1px 6px;
  border-radius: var(--jx-radius-pill);
  background: var(--jx-cta-tint);
  color: var(--jx-cta-dark);
  font-size: var(--jx-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---- no-number states: smaller, never mistaken for an amount ---- */
body.jx .jx-price--ask,
body.jx .jx-price--soldout,
body.jx .jx-price--soon,
body.jx .jx-price--text {
  font-size: var(--jx-fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* "Kaina teiraukitės →": reads as the action (the card itself is the link) */
body.jx .jx-price--ask .jx-price__ask {
  color: var(--jx-cta);
}

body.jx .jx-price--ask .jx-price__ask::after {
  content: "\00a0\2192";
  content: "\00a0\2192" / "";
}

body.jx .jx-price--soldout {
  color: var(--jx-text-muted);
}

body.jx .jx-price--soon {
  color: var(--jx-navy);
}

body.jx .jx-price--text {
  font-weight: 500;
  color: var(--jx-text-muted);
}

/* .jx-sr (screen-reader-only words inside the price) is defined once in 05-a11y.css. */

/* ---- context: listing card ---- */
body.jx .jx-price--card {
  font-size: var(--jx-fs-md);
}

/* (0,3,1): the no-number sizes must beat the context size at every width */
body.jx .jx-price--card.jx-price--ask,
body.jx .jx-price--card.jx-price--soldout,
body.jx .jx-price--card.jx-price--soon,
body.jx .jx-price--card.jx-price--text {
  font-size: var(--jx-fs-sm);
}

/* sale in a card: struck old price and pill on top, the now-price on its own line at the bottom,
   so it lines up with the regular prices of the other cards in the row (visual order only; the
   DOM keeps "Kaina su nuolaida … Buvo …" for screen readers) */
body.jx .jx-price--card.jx-price--sale .jx-price__now {
  flex-basis: 100%;
  order: 2;
}

@media (min-width: 768px) {
  body.jx .jx-price--card {
    font-size: 18px;
  }
}

/* ---- context: product page (base size only; the buy-box layout is 50-product.css) ---- */
body.jx .jx-price--product {
  font-size: var(--jx-fs-xl);
  line-height: 1.2;
}

body.jx .jx-price--product.jx-price--sale {
  gap: var(--jx-s1) var(--jx-s3);
}

body.jx .jx-price--product .jx-price__old {
  font-size: var(--jx-fs-md);
}

body.jx .jx-price--product .jx-price__badge {
  padding: 2px var(--jx-s2);
  font-size: var(--jx-fs-sm);
}

body.jx .jx-price--product.jx-price--ask,
body.jx .jx-price--product.jx-price--soldout,
body.jx .jx-price--product.jx-price--soon,
body.jx .jx-price--product.jx-price--text {
  font-size: var(--jx-fs-lg);
}

/* the arrow points at the product page; on the product page itself the ask CTA follows */
body.jx .jx-price--product .jx-price__ask::after {
  content: none;
}

@media (min-width: 768px) {
  body.jx .jx-price--product {
    font-size: var(--jx-fs-2xl);
  }
}


/* ==== 50-product.css ==== */
/* ==========================================================================
   50-product — single product page: gallery | buy box, description below (E1 / D15). Owner: product.
   Preview markup (single-produktas.php + inc/jx/product.php):
     .individual-product-content
       .individual-product-photo    #productPhotoId (srcset), div.mb20px-for-xs > img[onclick] thumbs, [iframe]
       .individual-product-description-price
         h1 · h6 "Kodas" · p (empty legacy slot) · p.jx-meta--supplier · div.clearfix
         p.jx-price--product · p.jx-stock · p.jx-delivery · input[hidden] ×2
         div.addtocartgroup (#product_quantity + .add-to-cart-button [+ in-cart note]) | div.jx-ask (D14)
         div.jx-desc (h2 "Aprašymas" + the wysiwyg description)
   Reorder: >=768 one grid on .individual-product-content with display:contents on the info column
   (photo left, buy box right, description full width below); <768 the info column is a flex column.
   The order values below make the reorder CSS-driven; the gated template already prints this order.
   Button colours/typography: global (31-buttons.css). Price look: 41-price.css. This file = layout.
   ========================================================================== */

/* ---- legacy bits the refresh does not use ---- */
/* the breadcrumb placeholder is an &nbsp; spacer (custom63.css:575); breadcrumbs are Tier 2 */
body.jx.jx-product .individual-product-breadcrumb,
body.jx.jx-product .individual-product-description-price > p:not([class]),
body.jx.jx-product .individual-product-description-price > .clearfix,
body.jx.jx-product .individual-product-photo > br {
  display: none;
}

/* ---- buy box order (grid auto-placement >=768 and flex order <768 both follow it) ---- */
body.jx.jx-product .individual-product-description-price > h1:first-child { order: 1; }
body.jx.jx-product .individual-product-description-price > h6 { order: 2; }
body.jx.jx-product .individual-product-description-price > .jx-meta { order: 3; }
body.jx.jx-product .individual-product-description-price > .jx-price { order: 4; }
body.jx.jx-product .individual-product-description-price > .jx-stock { order: 5; }
body.jx.jx-product .individual-product-description-price > .jx-delivery { order: 6; }
body.jx.jx-product .individual-product-description-price > .addtocartgroup { order: 7; }
body.jx.jx-product .individual-product-description-price > .jx-ask { order: 7; }
body.jx.jx-product .individual-product-description-price > .jx-desc { order: 50; }

/* ---- >=768: grid. Rows 1-8 hold the buy box; the trailing 1fr row absorbs the rest of the photo
   column's height, so the buy-box rows never stretch. The description starts under both columns. ---- */
@media (min-width: 768px) {
  body.jx.jx-product .individual-product-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(8, auto) 1fr;
    column-gap: var(--jx-s6);
    align-items: start;
    margin-top: var(--jx-s5);
  }

  /* custom63.css:599 float/48%/margin-right 2% */
  body.jx.jx-product .individual-product-photo {
    grid-column: 1;
    grid-row: 1 / 10;
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }

  /* custom63.css:613 float right / 48% */
  body.jx.jx-product .individual-product-description-price {
    display: contents;
  }

  body.jx.jx-product .individual-product-description-price > * {
    grid-column: 2;
    min-width: 0;
  }

  body.jx.jx-product .individual-product-description-price > .jx-desc {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  body.jx.jx-product .individual-product-content {
    column-gap: var(--jx-s7);
  }
}

/* ---- <768: one column with side gutters (the legacy page has none) ---- */
@media (max-width: 767px) {
  /* custom63.css:1179 margin-top 50px !important (44px fixed bar above) */
  body.jx.jx-product .individual-product-content {
    display: flex;
    flex-direction: column;
    margin-top: 60px !important;
    padding: 0 var(--jx-gutter);
    box-sizing: border-box;
  }

  /* custom63.css:1183-1188, all !important. Capped so the 700-767 hybrid zone (one column, desktop
     header) does not push the CTA below a 660px photo. */
  body.jx.jx-product .individual-product-photo {
    float: none !important;
    width: auto !important;
    max-width: 520px;
    margin: 0 0 var(--jx-s4) !important;
  }

  /* custom63.css:1190-1196 (80% wide, centred), all !important */
  body.jx.jx-product .individual-product-description-price {
    display: flex;
    flex-direction: column;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

/* 700-767: the desktop header scrolls with the page, there is no fixed 44px bar to clear */
@media (min-width: 700px) and (max-width: 767px) {
  body.jx.jx-product .individual-product-content {
    margin-top: var(--jx-s5) !important;
  }
}

/* ==== gallery ==== */
/* one square frame, so switching thumbnails never moves the buy box or the page */
body.jx.jx-product #productPhotoId {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--jx-white);
  border: 1px solid var(--jx-border);
  border-radius: var(--jx-radius);
}

body.jx.jx-product .individual-product-photo > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jx-s2);
  margin: var(--jx-s3) 0 0 !important;   /* .mb20px-for-xs is !important (custom63.css:1474) */
}

/* thumbs: inline style="height: 75px; width: auto" on each img (single-produktas.php:154-183) */
body.jx.jx-product .individual-product-photo > div > img[onclick] {
  box-sizing: border-box;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  background: var(--jx-white);
  border: 1px solid var(--jx-border);
  border-radius: var(--jx-radius-sm);
  transition: border-color .15s var(--jx-ease), box-shadow .15s var(--jx-ease);
}

body.jx.jx-product .individual-product-photo > div > img[onclick].is-active {
  border-color: var(--jx-green);
  box-shadow: 0 0 0 1px var(--jx-green);
}

@media (hover: hover) {
  body.jx.jx-product .individual-product-photo > div > img[onclick]:hover {
    border-color: var(--jx-green-dark);
  }
}

body.jx.jx-product .individual-product-photo > div > img[onclick]:focus-visible {
  outline: 3px solid var(--jx-focus-color);
  outline-offset: 2px;
}

/* video (desktop only: .display-none-for-xs keeps hiding it on phones) — fixed 480px iframe */
body.jx.jx-product .individual-product-photo > iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: var(--jx-s4);
  border: 0;
  border-radius: var(--jx-radius);
}

@media (max-width: 767px) {
  /* one swipeable row instead of up to 3 wrapped rows of thumbs */
  body.jx.jx-product .individual-product-photo > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
    margin: var(--jx-s2) -2px 0 !important;
  }

  body.jx.jx-product .individual-product-photo > div > img[onclick] {
    flex: none;
    width: 56px !important;
    height: 56px !important;
  }
}

/* ==== buy box ==== */
/* title: custom63.css:621 (26px/300), 22px !important below 768 (custom63.css:1198) */
body.jx.jx-product .individual-product-description-price > h1:first-child {
  margin: 0 0 var(--jx-s2);
  font-family: var(--jx-font);
  font-size: 28px;
  font-weight: 600;
  line-height: var(--jx-lh-tight);
  letter-spacing: -.005em;
  color: var(--jx-text);
  text-transform: none;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  body.jx.jx-product .individual-product-description-price > h1:first-child {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
}

/* meta lines: code (h6, custom63.css:628 16px uppercase 300) and supplier (Tiekėjas stays visible) */
body.jx.jx-product .individual-product-description-price > h6,
body.jx.jx-product .individual-product-description-price > .jx-meta {
  margin: 0;
  font-family: var(--jx-font);
  font-size: var(--jx-fs-sm);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--jx-text-muted);
  text-transform: none;
}

/* price (41-price.css sets the look; here only its place) */
body.jx.jx-product .individual-product-description-price > .jx-price {
  margin: var(--jx-s5) 0 var(--jx-s1);
}

/* one pink action per view (D17): on the product page the ask CTA below is the action, so the
   "Kaina teiraukitės" state reads as plain text here (41-price.css colours it --jx-cta for cards) */
body.jx.jx-product .individual-product-description-price > .jx-price--ask .jx-price__ask {
  color: var(--jx-text);
}

/* stock + delivery: two short status lines with a 16px icon column */
body.jx.jx-product .individual-product-description-price > .jx-stock,
body.jx.jx-product .individual-product-description-price > .jx-delivery {
  display: flex;
  align-items: flex-start;
  gap: var(--jx-s2);
  margin: var(--jx-s2) 0 0;
  font-family: var(--jx-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  color: var(--jx-text);
}

body.jx.jx-product .individual-product-description-price > .jx-stock::before,
body.jx.jx-product .individual-product-description-price > .jx-delivery::before {
  content: "";
  flex: none;
  width: 16px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* status dot: muted = made to order (most products), green = in stock */
body.jx.jx-product .individual-product-description-price > .jx-stock::before {
  background-image: radial-gradient(circle, var(--jx-text-muted) 0 4px, transparent 4.5px);
}

body.jx.jx-product .individual-product-description-price > .jx-stock--in {
  font-weight: 600;
  color: var(--jx-success);
}

body.jx.jx-product .individual-product-description-price > .jx-stock--in::before {
  background-image: radial-gradient(circle, var(--jx-success) 0 4px, transparent 4.5px);
}

/* truck icon (stroke = --jx-green #217A12) */
body.jx.jx-product .individual-product-description-price > .jx-delivery::before {
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1zM15 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='18.5' r='2'/%3E%3C/svg%3E");
}

/* qty + CTA row. Legacy margins: custom63.css:703 (.add-to-cart-button margin-top 18px, margin-right 10px),
   custom63.css:733 (#product_quantity), <768 custom63.css:1211 (margin-bottom 30px !important) */
body.jx.jx-product .individual-product-description-price > .addtocartgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--jx-s3);
  max-width: 460px;
  margin: var(--jx-s5) 0 0;
}

body.jx.jx-product .addtocartgroup > .add-to-cart-button {
  display: inline-flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0 !important;
  white-space: nowrap;
}

body.jx.jx-product .addtocartgroup > .add-to-cart-button.is-loading {
  cursor: progress;
  opacity: .75;
}

/* qty field before the stepper script runs: same footprint as the stepper (no layout shift) */
body.jx.jx-product .addtocartgroup > #product_quantity {
  box-sizing: border-box;
  flex: 0 0 128px;
  width: 128px;
  min-height: 48px;
  margin: 0;
  text-align: center;
}

/* the value (before and inside the stepper): custom63.css:733 set 15px/200 and no colour (black).
   16px at every width (no iOS focus zoom), weighted like the CTA beside it */
body.jx.jx-product .addtocartgroup #product_quantity {
  font-family: var(--jx-font);
  font-size: var(--jx-fs-md);
  font-weight: 600;
  color: var(--jx-text);
}

/* stepper (50-product-buy.js): [−][qty][+] in one field-like box */
body.jx.jx-product .jx-qty {
  display: inline-flex;
  flex: 0 0 128px;
  box-sizing: border-box;
  width: 128px;
  min-height: 48px;
  background: var(--jx-white);
  border: 1px solid var(--jx-field-border);
  border-radius: var(--jx-radius-sm);
}

body.jx.jx-product .jx-qty > #product_quantity {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 44px;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.jx.jx-product .jx-qty__btn {
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--jx-radius-sm);
  background: transparent;
  color: var(--jx-green);
  font: 500 22px/1 var(--jx-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.jx.jx-product .jx-qty__btn:disabled {
  color: var(--jx-border);
  cursor: default;
}

@media (hover: hover) {
  body.jx.jx-product .jx-qty__btn:not(:disabled):hover {
    background: var(--jx-green-tint);
  }
}

/* "Krepšelyje jau yra: N vnt." — inline style margin-top:6px;margin-bottom:30px;font-size:14px (single-produktas.php:255) */
body.jx.jx-product .addtocartgroup > div:not([class]) {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45;
  color: var(--jx-text-muted);
}

body.jx.jx-product .addtocartgroup > div:not([class]) strong {
  font-weight: 600;
  color: var(--jx-text);
}

/* D14: "Teirautis dėl kainos" + phone, instead of the add-to-cart group */
body.jx.jx-product .individual-product-description-price > .jx-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jx-s2) var(--jx-s5);
  margin: var(--jx-s5) 0 0;
}

body.jx.jx-product .jx-ask > .jx-btn {
  flex: 0 1 280px;
  min-height: 48px;
}

body.jx.jx-product .jx-ask__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--jx-s2);
  min-height: 44px;
  font-weight: 600;
  color: var(--jx-green-dark);
  text-decoration: none;
  white-space: nowrap;
}

body.jx.jx-product .jx-ask__phone::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23185E0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

@media (hover: hover) {
  body.jx.jx-product .jx-ask__phone:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (max-width: 767px) {
  /* tighter on phones: keeps the CTA inside the first screen */
  body.jx.jx-product .individual-product-description-price > .jx-price {
    margin-top: var(--jx-s4);
  }

  body.jx.jx-product .individual-product-description-price > .addtocartgroup,
  body.jx.jx-product .individual-product-description-price > .jx-ask {
    max-width: 520px;
    margin-top: var(--jx-s4);
  }

  body.jx.jx-product .jx-ask > .jx-btn {
    flex: 1 1 100%;
  }
}

/* ==== description (below the buy box, full width; B1: upright, left, 15px/1.55) ====
   68ch keeps a line near 75 characters (820px gave ~105 at 15px) */
body.jx.jx-product .individual-product-description-price > .jx-desc {
  max-width: 68ch;
  margin: var(--jx-s7) 0 0;
  font-family: var(--jx-font);
  font-size: var(--jx-fs-base);
  line-height: var(--jx-lh);
  color: var(--jx-text);
  overflow-wrap: break-word;
}

/* "Aprašymas" carries .individual-product-similar-product, so its type (size, weight, colour, case)
   comes from the global section-title rule (11-type.css), same as "Panašios prekės". This only undoes
   the yellow price box it would inherit as an h2 in the info column (custom63.css:649). */
body.jx.jx-product .jx-desc > .jx-desc__title {
  display: block;
  margin: 0 0 var(--jx-s4);
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* custom63.css:637 (p 14px/20px italic 300 #555, margin-top 16px), main11.css:9501 (li italic 14px 300) */
body.jx.jx-product .jx-desc p,
body.jx.jx-product .jx-desc li {
  font-size: var(--jx-fs-base);
  font-style: normal;
  font-weight: 400;
  line-height: var(--jx-lh);
  color: var(--jx-text);
}

body.jx.jx-product .jx-desc p {
  margin: 0 0 var(--jx-s3);
}

body.jx.jx-product .jx-desc ul,
body.jx.jx-product .jx-desc ol {
  margin: 0 0 var(--jx-s3);
  padding-left: 1.4em;
}

body.jx.jx-product .jx-desc li {
  margin: 0 0 var(--jx-s1);
}

/* pasted lists often wrap each item in a <p> */
body.jx.jx-product .jx-desc li > p {
  margin: 0;
}

body.jx.jx-product .jx-desc strong,
body.jx.jx-product .jx-desc b {
  font-weight: 600;
}

body.jx.jx-product .jx-desc a {
  color: var(--jx-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* wysiwyg content never widens the page */
body.jx.jx-product .jx-desc img,
body.jx.jx-product .jx-desc iframe,
body.jx.jx-product .jx-desc video {
  max-width: 100%;
  height: auto;
}

/* pasted tables carry width="1509" and an inline style="height: 40px" (virtualus-akiniai): the
   attribute loses to any CSS width, the inline height needs !important */
body.jx.jx-product .jx-desc table {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  margin: 0 0 var(--jx-s3);
  border-collapse: collapse;
}

body.jx.jx-product .jx-desc td,
body.jx.jx-product .jx-desc th {
  padding: var(--jx-s2) var(--jx-s3) var(--jx-s2) 0;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--jx-border);
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  body.jx.jx-product .individual-product-description-price > .jx-desc {
    margin-top: var(--jx-s6);
  }
}

/* ==== "Panašios prekės" (single-produktas.php:310-311): same rhythm as the description above it —
   one section gap before the title, one title gap to the cards (B2 values: 48/24 >=768, 32/16 <768).
   The heading's type is global (11-type.css); the cards grid and its phone padding are 40-cards.css. ==== */
/* main11.css:51 h2 margin .83em 0 5px */
body.jx.jx-product .container > .individual-product-similar-product {
  margin: var(--jx-s7) 0 var(--jx-s5);
}

@media (min-width: 768px) {
  /* .mt40px-for-desktop / .mb10px-for-desktop / .mb1rem-for-desktop are !important (custom63.css:2141, 1480, 2919) */
  body.jx.jx-product .container > .category-page-products {
    margin-top: 0 !important;
    margin-bottom: var(--jx-s7) !important;
  }
}

@media (max-width: 767px) {
  /* the phone page has no side gutter; line the title up with the card grid (padded 16px in 40-cards.css) */
  body.jx.jx-product .container > .individual-product-similar-product {
    margin: var(--jx-s6) 0 var(--jx-s4);
    padding: 0 var(--jx-gutter);
  }
}


/* ==== 51-toast.css ==== */
/* ==========================================================================
   51-toast — "added to cart" banner as a toast (E3). Owner: product.
   .settings-alert-class is printed on ?action=success (single-produktas.php:135). Every legacy
   property is !important (custom63.css:1889-1902: centred green 60% bar, white text 1.9:1, margin-top
   70px pushing the page down), so each one it sets is overridden with !important here. Scoped to
   .jx-product: the class is also used by the account, cart and checkout pages.
   Works without JS (fixed card, no auto-hide); 51-cart-toast.js adds the link, close and auto-hide.
   Placement >=700: bottom right, on the container edge. Under the cart pill it sat on the product
   title, code and price (the buy column's top) for its whole life; down here it clears the buy box at
   every width. It rises above the phone buy bar (700-767) and above the cookie bar (51-cart-toast.js).
   Phones (<700): top, full width, under the fixed 44px bar.
   ========================================================================== */

body.jx.jx-product .settings-alert-class {
  position: fixed;
  z-index: 100001;                       /* desktop header 99999, under the cookie bar (2147483647) */
  top: auto;
  bottom: calc(var(--jx-s5) + env(safe-area-inset-bottom));
  right: max(var(--jx-gutter), calc((100% - var(--jx-container)) / 2));
  left: auto;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start;
  gap: var(--jx-s3);
  width: min(400px, calc(100% - 2 * var(--jx-gutter))) !important;
  margin: 0 !important;
  padding: 14px var(--jx-s4) !important;
  background-color: var(--jx-white) !important;
  color: var(--jx-text) !important;
  border: 1px solid var(--jx-border);
  border-left: 4px solid var(--jx-success);
  border-radius: var(--jx-radius) !important;
  box-shadow: var(--jx-shadow-2);
  font-family: var(--jx-font);
  font-size: var(--jx-fs-base);
  font-weight: 500 !important;
  line-height: 1.45;
  text-align: left !important;
  animation: jx-toast-up .22s var(--jx-ease) both;
  transition: bottom .2s var(--jx-ease);
}

/* 700-767: the phone buy bar (52-buybar, 64px) is at the bottom too */
@media (min-width: 700px) and (max-width: 767px) {
  body.jx.jx-product.jx-buybar-on .settings-alert-class {
    bottom: calc(64px + var(--jx-s4) + env(safe-area-inset-bottom));
  }
}

/* check mark */
body.jx.jx-product .settings-alert-class::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jx-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

body.jx.jx-product .jx-toast__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.jx.jx-product .jx-toast__msg {
  font-weight: 600;
}

body.jx.jx-product .jx-toast__meta {
  font-size: var(--jx-fs-sm);
  font-weight: 400;
  color: var(--jx-text-muted);
}

body.jx.jx-product .jx-toast__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: var(--jx-s1);
  font-weight: 600;
  color: var(--jx-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.jx.jx-product .jx-toast__link::after {
  content: "\00a0\2192";
  content: "\00a0\2192" / "";
}

body.jx.jx-product .jx-toast__close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--jx-radius-sm);
  background: transparent;
  color: var(--jx-text-muted);
  font: 400 24px/1 var(--jx-font);
  cursor: pointer;
}

@media (hover: hover) {
  body.jx.jx-product .jx-toast__close:hover {
    background: var(--jx-surface);
    color: var(--jx-text);
  }
}

/* leaving: 51-cart-toast.js adds .is-out, then .is-hidden */
body.jx.jx-product .settings-alert-class.is-out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s var(--jx-ease), transform .22s var(--jx-ease);
  pointer-events: none;
}

body.jx.jx-product .settings-alert-class.is-hidden {
  display: none !important;
}

@keyframes jx-toast-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes jx-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* phones: full width under the fixed 44px bar (main11.css:5213); the buy bar owns the bottom edge */
@media (max-width: 699px) {
  body.jx.jx-product .settings-alert-class {
    top: calc(44px + var(--jx-s2));
    bottom: auto;
    right: var(--jx-gutter);
    left: var(--jx-gutter);
    width: auto !important;
    animation-name: jx-toast-in;
  }

  body.jx.jx-product .settings-alert-class.is-out {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.jx.jx-product .settings-alert-class,
  body.jx.jx-product .settings-alert-class.is-out {
    animation: none;
    transition: none;
    transform: none;
  }
}


/* ==== 52-buybar.css ==== */
/* ==========================================================================
   52-buybar — mobile sticky buy bar (E3, <=767px). Owner: product.
   Built by 52-buybar.js and appended to <body> (outside the phone scroller body > .wrapper).
   z-index 2990: under the fixed phone header (3000, main11.css:5213), the menu shade (9999999)
   and the cookie bar (2147483647). The CTA's colours come from .jx-btn--cta (global).
   ========================================================================== */

body.jx.jx-product .jx-buybar {
  position: fixed;
  z-index: 2990;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--jx-s3);
  min-height: 64px;
  padding: var(--jx-s2) var(--jx-gutter) calc(var(--jx-s2) + env(safe-area-inset-bottom));
  background: var(--jx-white);
  border-top: 1px solid var(--jx-border);
  box-shadow: 0 -4px 16px rgba(20, 40, 20, .10);
  font-family: var(--jx-font);
  text-align: left;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .2s var(--jx-ease), visibility 0s linear .2s;
}

body.jx.jx-product .jx-buybar.is-on {
  transform: none;
  visibility: visible;
  transition: transform .2s var(--jx-ease), visibility 0s;
}

body.jx.jx-product .jx-buybar__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

body.jx.jx-product .jx-buybar__title {
  overflow: hidden;
  font-size: var(--jx-fs-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--jx-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* no amount (ask / sold out): the title gets two lines */
body.jx.jx-product .jx-buybar.is-noprice .jx-buybar__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: var(--jx-text);
  white-space: normal;
}

body.jx.jx-product .jx-buybar__price {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jx-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body.jx.jx-product .jx-buybar__price.is-sale {
  color: var(--jx-cta);
}

body.jx.jx-product .jx-buybar__cta {
  flex: none;
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}

/* never on tablets/desktop; and hidden while main3.js has the phone menu open (inline overflow-y) */
@media (min-width: 768px) {
  body.jx.jx-product .jx-buybar {
    display: none;
  }
}

body.jx.jx-product[style*="overflow-y: hidden"] .jx-buybar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.jx.jx-product .jx-buybar,
  body.jx.jx-product .jx-buybar.is-on {
    transition: none;
  }
}


/* ==== 55-pages.css ==== */
/* ==========================================================================
   55 pages (global builder): content pages with forms or long text.
   login + contacts (.login-registration-div-class, two 45% floats: custom63.css:1549-1640),
   registration / my account / forgotten password (.registration-div-class 64%: custom63.css:1640-1700),
   rules / privacy / delivery / returns (.inner-p-useful-info, inline width 80%).
   Cart and checkout keep their layout (Release A, F1 later): only their buttons/fields change (31/35).
   ========================================================================== */

/* ---- login + contacts ---- */
body.jx .login-registration-div-class p {
  font-size: 15px;
  font-weight: 400;
  line-height: var(--jx-lh);
  color: var(--jx-text);
}

body.jx .login-registration-div-class .login-registration-input,
body.jx .login-registration-div-class .login-registration-textarea {
  display: block;
  width: 100%;
  max-width: 440px;
}

/* the 5px utility gaps between fields (.mt5px is !important, custom63.css:1593) */
body.jx .login-registration-div-class .mt5px,
body.jx .registration-div-class .registration-input-class.mt5px {
  margin-top: var(--jx-s3) !important;
}

/* consent row: checkbox + text with a hanging indent (the text is clickable, 10-a11y.js).
   custom63.css:2662-2667 (desktop): contacts width 75% !important, registration margin-top 5px !important;
   the checkbox carries .mt15px (!important) */
body.jx .contacts-agreement-class,
body.jx .registration-agreement-class {
  display: flex;
  align-items: flex-start;
  gap: var(--jx-s2);
  box-sizing: border-box;
  max-width: 440px;
  margin-top: var(--jx-s4) !important;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

body.jx .registration-agreement-class {
  max-width: none;
}

body.jx .contacts-agreement-class input[type="checkbox"],
body.jx .registration-agreement-class input[type="checkbox"] {
  flex: none;
  margin: 0 !important;
}

body.jx #askQuestionId > .login-button-class {
  margin-top: var(--jx-s4) !important;
}

/* phones: the columns were centred with 70% inline fields; now left-aligned, full-width fields */
@media (max-width: 767px) {
  body.jx .login-registration-div-class > div:nth-child(1),
  body.jx .login-registration-div-class > div:nth-child(2) {
    text-align: left;
  }

  body.jx .login-registration-div-class .login-registration-input,
  body.jx .login-registration-div-class .login-registration-textarea {
    max-width: none;
  }

  body.jx .login-registration-div-class .login-button-class,
  body.jx .registration-div-class .login-button-class {
    width: 100%;
  }
}

/* ---- registration, my account, forgotten password: one column, max 640px (D18).
   It is a `.container > div` (inline-block, main11.css:1109): block, so auto margins centre it ---- */
body.jx .registration-div-class {
  display: block;
  width: auto;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* phones: 80% column with 91% inline-block fields (custom63.css:1680, 1696 display !important) */
@media (max-width: 767px) {
  body.jx .registration-div-class {
    margin-left: var(--jx-gutter);
    margin-right: var(--jx-gutter);
  }

  body.jx .registration-div-class .registration-input-class:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
  }
}

/* ---- checkout columns: 25% / 25% / 50% floats with no gutter (custom63.css:1956-1975, !important).
   With the 18px/700 headings the first two columns ran into each other ("ASMENINIAI DUOMENYS PRISTATYMO
   BŪDAS" at 1024) and the delivery notes touched the order table (1440). Width stays 25% (border-box). ---- */
@media (min-width: 768px) {
  body.jx .complete-order-billing,
  body.jx .complete-order-delivery-payment {
    box-sizing: border-box;
    padding-right: var(--jx-s4);
  }
}

/* ---- blog post: the text column is centred on phones (.individual-product-description-price,
   custom63.css:1190 !important); the list bullets stayed at the left edge. Left, like the desktop (D16),
   with the page gutter instead of the 2% (7px) side margins (custom63.css:1203, !important). ---- */
@media (max-width: 767px) {
  body.jx.jx-post .blog-individual-entry-text {
    text-align: left !important;
  }

  body.jx.jx-post .blog-individual-entry-text,
  body.jx.jx-post .blog-individual-entry-photo {
    width: calc(100% - 2 * var(--jx-gutter)) !important; /* inline-block: auto would shrink-to-fit */
    margin-left: var(--jx-gutter) !important;
    margin-right: var(--jx-gutter) !important;
  }

  /* posts pasted from the newsletter carry fixed 552px tables and 528px images: they were cut at the
     right edge of the phone */
  body.jx.jx-post .blog-entry-content-body table {
    width: 100% !important;
    max-width: 100%;
  }

  body.jx.jx-post .blog-entry-content-body img {
    max-width: 100%;
    height: auto;
  }
}

/* ---- rules, privacy, delivery, returns: readable measure instead of the inline 80% width ---- */
body.jx .login-registration-div-class > .inner-p-useful-info {
  float: none;
  display: block;
  box-sizing: border-box;
  width: auto !important;
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jx-text);
}

body.jx .inner-ul-useful-info ul li {
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  body.jx .login-registration-div-class > .inner-p-useful-info {
    margin-left: var(--jx-gutter) !important;
    margin-right: var(--jx-gutter) !important;
  }

  body.jx .inner-ul-useful-info ul li {
    font-size: 15px !important;
  }
}


/* ==== 60-footer.css ==== */
/* ==========================================================================
   60-footer — footer quick fixes (no redesign, that is G3). Owner: layout.
   The footer width itself follows the container in 10-layout.css.
   ========================================================================== */

/* main11.css:3505 .copyright is width:100% + padding:1% in content-box, so it is 20px wider than
   the footer (1020 in 1000, 783 at 768): the horizontal overflow on every page at 768-1024. */
body.jx .footer-container > .wrapper > .copyright {
  box-sizing: border-box;
  max-width: 100%;
}

/* The four columns carry padding:1% !important (main11.css:3553), so the first heading started
   10-12px right of the content edge above it and the newsletter field stopped short of the right
   edge: outer sides flush with the container. */
@media (min-width: 768px) {
  body.jx .footer-container > .wrapper > .table.four-cols .cell:first-child {
    padding-left: 0 !important;
  }
  body.jx .footer-container > .wrapper > .table.four-cols .cell:last-child {
    padding-right: 0 !important;
  }
}

/* Newsletter field width. Its text is 15px / 16px on touch screens now (35-forms.css, D18) and the
   44px submit sits over its right end (48px padding), so the placeholder "Įveskite savo el. pašto
   adresą" (228px at 16px) needs a ~290px field; it was cut to "… pašto a" / "… pašto ad".
   Phones: the field was 80% of a fixed 300px block (custom63.css:1079 !important, main11.css:5338),
   240px. 700-1023: four equal ~175px columns (700-767) or 15/20/30/35% (custom63.css:2618-2633
   !important, from 768) left 161-242px. The address column (30%) gives the room; every column stays
   wider than its longest word, and the headings stay on one line. */
@media (max-width: 767px) {
  body.jx #newsletter-validate-detail .search-box-right #newsletter_ft {
    width: 100% !important;
    margin-left: 0;
  }
}
@media (max-width: 699px) {
  body.jx .footer-container .newsletter-block {
    width: calc(100% - 2 * var(--jx-gutter));
    max-width: 360px;
  }
}
/* 700-767: the full-bleed legacy table, 1% side padding on every cell */
@media (min-width: 700px) and (max-width: 767px) {
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-15proc-for-desktop {
    width: 17% !important;
  }
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-20proc-for-desktop {
    width: 19% !important;
  }
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-30proc-for-desktop {
    width: 21% !important;
  }
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-35proc-for-desktop {
    width: 43% !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-30proc-for-desktop {
    width: 21% !important;
  }
  body.jx .footer-container > .wrapper > .table.four-cols .cell.width-35proc-for-desktop {
    width: 44% !important;
  }
}

/* main11.css:5334 (phones) draws css/enterprise/bills/images/footer-sep.png under each column:
   the file does not exist, so every phone page view makes a 404 request. */
@media (max-width: 699px) {
  body.jx .footer-container .cell ul {
    background-image: none;
  }
}

/* Tap targets: the footer links are 375x15 (phones, main11.css:5315) or ~21px tall (700-767,
   custom63.css:19 line-height 21px !important on .footer-container). 20px line + 2 x 12px = 44px.
   Only real links; the company details are <a> without href (plain text). */
@media (max-width: 767px) {
  body.jx .footer-container .cell ul li a[href] {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 0;
    padding: 12px 0;
    line-height: 20px;
  }
}
/* tablets (touch, >=768px: the desktop four-column footer, 16px-tall links 9px apart) */
@media (min-width: 768px) and (pointer: coarse) {
  body.jx .footer-container .cell ul li a[href] {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 0;
    padding: 12px 0;
    line-height: 20px;
  }
}


/* ==== 70-media.css ==== */
/* ==========================================================================
   70 media (global builder): G2 / D22 companions of inc/jx/perf.php.
   ========================================================================== */

/* The output filter adds width/height to the hard-cropped sizes (-240x240, -488x488, -100x100,
   -480x480) so lazy images reserve their space. Legacy rules only cap the width (e.g. .all-products img /
   .category-products img max-width:90%, custom63.css:113/510), so without this the height attribute
   would stretch a narrowed image. Inline styles (product thumbnails: height 75px, width auto) still win.
   Kept at (0,1,2) with :where() so any class rule of an owner (e.g. the cards' square frame,
   40-cards.css `height:100%` + object-fit) wins over this safety net. */
body.jx img:where([width][height][src*="-240x240."]),
body.jx img:where([width][height][src*="-488x488."]),
body.jx img:where([width][height][src*="-100x100."]),
body.jx img:where([width][height][src*="-480x480."]) {
  height: auto;
}

/* Font Awesome 6 Pro (css/all.css) is not loaded on public pages in the refresh. Its only glyphs there
   (header.php cart, front-page.php slick arrows) have the same code points in the FA4 font that is
   already loaded (css/font-awesome.css): \f07a cart, \f053 / \f054 chevrons. */
body.jx .fa-solid.fa-cart-shopping,
body.jx .far.fa-chevron-left,
body.jx .far.fa-chevron-right {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.jx .fa-solid.fa-cart-shopping::before {
  content: "\f07a";
}

body.jx .far.fa-chevron-left::before {
  content: "\f053";
}

body.jx .far.fa-chevron-right::before {
  content: "\f054";
}