/**
 * ln-fixes.css — Laikas Namams migration fixes (gama).
 *
 * SEPARATE from custom.css so upstream theme/module restores of custom.css
 * don't wipe our fixes. Loaded via theme.yml assets (priority 10000, after
 * custom.css) so rules here win without !important in most cases.
 *
 * Convention:
 *   - Each block prefixed with TASKS.md task number and brief WHY
 *   - Prefer specificity over !important (but some SuperCheckout inline CSS
 *     forces us to use !important in places)
 */

/* ============================================================
   Task #53 — product detail page layout (May 4 #14).
   Client wants:
   - SKU larger and ABOVE stock indicator (template swap done)
   - More vertical spacing between key elements
   - Trust icons row removed (blockreassurance on displayReassurance)
   ============================================================ */
.cw_reference {
  margin-top: 20px;
  margin-bottom: 14px;
}
.cw_reference .product-variants-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cw_reference .control-label {
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}
.cw_reference span[itemprop="sku"] {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.3px;
}
.cw_product_availability {
  margin-bottom: 18px;
}
.product-detail .product-actions {
  margin-top: 18px;
}
/* Hide trust-icons row injected via blockreassurance on displayReassurance.
   lndeliverypreview is also on the same hook, so we keep the wrapper hook
   call in the template but hide only the reassurance markup. */
.product-detail .blockreassurance_product {
  display: none;
}

/* ============================================================
   Task #25 — Cart page AJAX loading overlay.
   Shows a faded overlay while cart quantity/coupon AJAX is in
   flight. Matches .cssload-speeding-wheel spinner convention
   used elsewhere in the theme.
   ============================================================ */
.cart-overview.js-cart {
  position: relative;
}
.cart-loading-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  justify-content: center;
  align-items: center;
}
.cart-loading-overlay.active {
  display: flex;
}

/* ============================================================
   Task #26 — SuperCheckout login option radios.
   Three radio options (Login / Guest / Register) rendered as
   dark pill buttons, switching to yellow (#f5c518) on selected.
   Radio inputs themselves hidden; the <label> becomes the button.
   ============================================================ */
#supercheckout-option.login-options {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
#supercheckout-option .radio-inline {
  padding: 0;
  width: auto;
  flex: 1;
  max-width: 160px;
}
.form-group.login-options .radio-inline label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 4px 15px !important;
  background: #222 !important;
  border: 1px solid #222 !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-align: center;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #fff !important;
  transition: all 0.2s;
}
#supercheckout-option .radio-inline input[type="radio"] {
  display: none;
}
.opc-container .login-options [type="radio"]:checked + label {
  background: #f5c518 !important;
  border-color: #f5c518 !important;
  color: #222 !important;
  font-weight: 300 !important;
}
.form-group.login-options .radio-inline label:hover {
  background: #333 !important;
  border-color: #333 !important;
}
.opc-container .login-options [type="radio"]:checked + label:hover {
  background: #e0b415 !important;
  border-color: #e0b415 !important;
}

/* ============================================================
   Task #26 — SuperCheckout login submit button styling.
   Template uses .btn.orangebuttonsmall (class undefined in
   theme.css → falls back to bad default). Re-style as dark pill.
   ============================================================ */
.loginBtn .btn.orangebuttonsmall {
  background: #222 !important;
  border: none !important;
  border-radius: 4px !important;
  color: #fff !important;
  padding: 10px 30px !important;
  font-size: 14px !important;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  max-width: 300px;
  transition: background 0.2s;
}
.loginBtn .btn.orangebuttonsmall:hover {
  background: #333 !important;
}

/* SuperCheckout registration password field — match login form width */
#supercheckout-new-customer-form #new_customer_password td {
  padding: 0 !important;
}

/* ============================================================
   Task #29 / #7 — Megamenu viewport overflow.
   2026-05-08: removed all max-height + overflow caps on the
   verticalmenu dropdown. Client explicitly does not want a
   scrollbar inside the megamenu. Let dropdowns grow to their
   natural content height; if content is taller than the viewport
   the bottom is simply not visible (still better than a scrollbar
   per client preference).
   ============================================================ */

/* ============================================================
   Task #7 — Vertical megamenu dropdown clipped on 768px laptops.
   The verticalmenu is rendered inside the 184px fixed header.
   Each parent <li> opens its `.dropdown-menu` with `top: 0`
   relative to that LI, so dropdowns of items further down the
   list (rows ~37px each) project below the viewport. Because
   the menu sits inside `position: fixed` chrome, the page can't
   be scrolled to reveal the cut-off bottom.

   Cap each dropdown's max-height to the space remaining between
   its trigger and the viewport bottom (with ~20px breathing
   room). Trigger top ≈ 184 + (childIdx-1)*37px. Caps are
   conservative — slightly tighter than the math so layout
   wiggle (line wraps, padding) stays inside the viewport.
   `:nth-of-type` selects by sibling LI position; non-parent
   rows simply don't match `li.parent` so the rule is a no-op
   for them.
   ============================================================ */
/* Override the theme's flat `max-height: calc(100vh - 200px) !important`
   in appagebuilder/styles.css line 9737 — client doesn't want any scrollbar
   on the megamenu. `none` lets the dropdown grow to its natural height. */
.leo-verticalmenu .verticalmenu > .megamenu > li.parent > .dropdown-menu {
  max-height: none !important;
  overflow: visible !important;
}

/* ============================================================
   Task #75 — always-on vertical scrollbar.
   Old rule used to hide body overflow while the megamenu was
   open (to suppress a double-scrollbar) — but that REMOVED the
   17px scrollbar gutter on hover, the page reflowed left, the
   mouse fell off the trigger element, and the dropdown closed
   on its own. Fix: always reserve scrollbar space so toggling
   the scrollbar never shifts layout. `overflow-y: scroll` is
   the legacy way and works in every browser. `scrollbar-gutter:
   stable` would be cleaner but isn't required.
   ============================================================ */
html {
  overflow-y: scroll;
}


/* ============================================================
   Task #61 — Manufacturers/brands index page (`/prekiu-zenklai`).
   Default PS template renders an unstyled row list with broken
   `.btn-outline` buttons, includes empty brands, and pulls in
   the bogus left category sidebar. The template now filters
   empty brands and uses full-width layout; this gives the list
   a clean responsive card grid with proper buttons.
   ============================================================ */
.brand-list-page > h1 {
  text-align: center;
  margin: 30px 0 25px;
}
.brand-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1320px;
}
.brand-list .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.brand-list .brand:hover {
  border-color: #f5c518;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.brand-list .brand-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  margin-bottom: 14px;
  overflow: hidden;
}
.brand-list .brand-img > picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.brand-list .brand-img img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-list .brand-infos {
  display: block;
  text-align: center;
  margin-bottom: 14px;
  flex-grow: 1;
  width: 100%;
}
.brand-list .brand-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.brand-list .brand-name:hover {
  color: #f5c518;
  text-decoration: none;
}
.brand-list .brand-text {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
  margin: 0;
}
.brand-list .brand-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.brand-list .brand-count {
  font-size: 12px;
  color: #888;
}
.brand-list .brand-cta {
  display: inline-block;
  padding: 8px 20px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}
.brand-list .brand-cta:hover {
  background: #333;
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   Task #60 — Manufacturer/supplier product grid gaps.
   at_auros uses a float-based grid (`col-lg-4` floats left).
   theme.css declares `.first-in-line { clear: both }` at lg
   breakpoint but a later same-specificity rule
   `.layout-left-column .product_list.grid .ajax_block_product
    { clear: none }` overrides it on every page with that body
   class. Category pages have a `body#category ... { clear: both }`
   override (id boosts specificity), but body#manufacturer/
   body#supplier have no such escape hatch — tiles with unequal
   heights stack raggedly with empty cells in the wrap.

   Restore clearing per breakpoint with body-prefixed specificity
   (0,4,1) which beats the broken layout-left-column rule (0,4,0).
   nth-child rather than .first-in-line — controllers that don't
   set the class still render correctly. Breakpoints follow the
   theme's col-* widths: 3-col at lg+ (≥992), 2-col 481–991,
   1-col below 481 (no clearing needed).
   ============================================================ */
@media (min-width: 992px) {
  body .product_list.grid .ajax_block_product:nth-child(3n+1) {
    clear: both;
  }
}
@media (min-width: 481px) and (max-width: 991px) {
  body .product_list.grid .ajax_block_product:nth-child(2n+1) {
    clear: both;
  }
}

/* ============================================================
   Task #47 — color swatches on category listing tiles.
   Renders small circles under product name. Source data is
   $product.main_variants, populated by PrestaShop's product
   presenter for each combination's primary attribute group.
   Non-clickable by default (client to confirm interaction).
   ============================================================ */
.ln-listing-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 8px 0 10px;
}
.ln-listing-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7) inset;
    cursor: default;
}
.ln-listing-color .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Task #58 — back-block-category arrow vertical alignment.
   custom.css absolute-positions the ::before glyph at top:0 with
   font-size:21px, which floats the arrow above the text baseline.
   Switch the link to inline-flex so the glyph aligns with the
   text it precedes, and put the glyph back into normal flow.
   ============================================================ */
.back-block-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 0;
}
.back-block-category::before {
    position: static;
    top: auto;
    left: auto;
    font-size: 1.1em;
    line-height: 1;
}

/* ============================================================
   Task #68 — Blog (tinklaraštis) post styling
   Client report 2026-05-12 #23: inserted images don't stretch
   to text column width regardless of editor size; post H1 font
   too small / blends into body copy.
   leoblog module renders blog.tpl (no theme override).
   The full-width content-wrapper gives the article a 1400px+
   span on desktop, so constrain to a comfortable reading column
   and centre. Images use natural size (max-width:100%) so the
   WordPress-imported pixel-fixed photos don't get up-scaled.
   ============================================================ */
.blog-detail {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

.blog-detail .blog-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    margin: 0 0 18px;
}

@media (min-width: 768px) {
    .blog-detail .blog-title { font-size: 32px; }
}
@media (min-width: 992px) {
    .blog-detail .blog-title { font-size: 36px; }
}

.blog-detail .blog-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 18px;
    row-gap: 6px;
    text-align: center;
}
.blog-detail .blog-meta > span {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.blog-detail .blog-meta .material-icons {
    margin-right: 6px;
    font-size: 16px;
    line-height: 1;
}

/* Share bar — leoblog ships flex CSS but theme overrides reset it to
   block + list-item, so items stack vertically. Force a horizontal,
   centred inline bar with branded pill buttons. */
.blog-detail .share_button {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
}
.blog-detail .share_button > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
}
.blog-detail .share_button > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-detail .share_button li {
    display: block;
    padding: 0;
    margin: 0;
    line-height: 1;
    background: none;
}
.blog-detail .share_button li::before {
    display: none;
}
.blog-detail .share_button li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    transition: opacity .15s ease;
}
.blog-detail .share_button li a:hover {
    opacity: .85;
    color: #fff;
}
.blog-detail .share_button li.facebook a { background: #1877f2; }
.blog-detail .share_button li.twitter a  { background: #1da1f2; }

/* Hide the bottom "Like This" widget block — mixes a Twitter iframe,
   a dead Google +1 button, and an oversized Facebook SVG (leoblog's
   sizing rule for .social-share .facebook a svg is being overridden,
   so the icon renders at its 320x512 viewBox default). The top
   .share_button already provides Facebook + Twitter sharing. */
.blog-detail .social-share {
    display: none !important;
}

.blog-detail .blog-image {
    margin: 0 0 24px;
}

.blog-detail .blog-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.blog-detail .blog-description img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
}

/* WordPress-imported headings carry inline `margin:0;padding:0`, so
   override with !important to restore vertical rhythm. */
.blog-detail .blog-description h2,
.blog-detail .blog-description h3,
.blog-detail .blog-description h4 {
    margin: 1.6em 0 .6em !important;
    line-height: 1.3 !important;
}
.blog-detail .blog-description h2 { font-size: 26px !important; }
.blog-detail .blog-description h3 { font-size: 22px !important; }
.blog-detail .blog-description h4 { font-size: 18px !important; }

/* ============================================================
   Task #74 — May 13 follow-up: hero image + Read-More button
   #74.1: Hero (.blog-image) was capped at the 960px reading
   column set by #68. Client wants the hero stretched wider, body
   images stay constrained. Break out of the column via viewport-
   relative negative margins on desktop; cap at 1100px so the
   WordPress-imported pixel-fixed hero photos don't upscale.
   #74.2: leoblog's "Read More" CTA (.more.btn.btn-primary) ships
   orange #eb7025, mismatched against the project yellow #f5c518
   used on the brands index + listing CTAs. Recolour on the blog
   index AND the .extra-blogs related-posts widget at the bottom
   of detail pages.
   ============================================================ */
@media (min-width: 992px) {
    .blog-detail .blog-image {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
    }
    .blog-detail .blog-image img {
        width: 100%;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

a.more.btn.btn-primary,
.more.btn.btn-primary {
    background-color: #f5c518;
    border-color: #f5c518;
    color: #1a1a1a;
}
a.more.btn.btn-primary:hover,
a.more.btn.btn-primary:focus,
.more.btn.btn-primary:hover,
.more.btn.btn-primary:focus {
    background-color: #e0b300;
    border-color: #e0b300;
    color: #1a1a1a;
}

/* ============================================================
   Task #74 — Blog card title height normalization (2026-05-18)
   Client: "titles with 1 line vs 2 lines differ in height, fix
   by making all cards have equal space for title". One-line
   titles measure 15px, two-line titles 31px — the bottom of
   the card (date / comment line) then drifts up/down 16px
   between cards in the same row.
   Reserve two lines of room for every title and clamp to 2
   lines so freakishly long titles don't blow the card height.
   Scoped to ONLY .blog-item h4.title — no parent layout
   selectors that could ripple to the header/menu rows.
   ============================================================ */
body#module-leoblog-list .blog-item h4.title,
body#module-leoblog-category .blog-item h4.title {
    min-height: 2.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Image is wrapped in <a> linking to the post — pointer cursor + a
   small zoom on hover to signal it's clickable. Scoped tight. */
body#module-leoblog-list a.blog-image,
body#module-leoblog-category a.blog-image {
    display: block;
    overflow: hidden;
    cursor: pointer;
}
body#module-leoblog-list a.blog-image img,
body#module-leoblog-category a.blog-image img {
    transition: transform .35s ease;
}
body#module-leoblog-list a.blog-image:hover img,
body#module-leoblog-category a.blog-image:hover img {
    transform: scale(1.04);
}

/* ============================================================
   Task #69 — Continue shopping CTA at top of cart/checkout page.
   "Tęsti apsipirkimą" link gives customers a clear way out of
   the cart back to the catalog without using browser Back.
   Placed at the top of the supercheckout content area (replaces
   visual space the breadcrumb used to occupy).
   Smart href: page-referrer if it's an internal non-cart page,
   else home.
   ============================================================ */
.continue-shopping-bar {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 18px;
}
.continue-shopping-bar .continue-shopping-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: #fff;
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .15s ease, border-color .15s ease;
}
.continue-shopping-bar .continue-shopping-link:hover,
.continue-shopping-bar .continue-shopping-link:focus {
    background: #333;
    border-color: #333;
    color: #fff;
    text-decoration: none;
}
.continue-shopping-bar .continue-shopping-arrow {
    font-size: 15px;
    line-height: 1;
}

/* ============================================================
   Task #73 — replace slick pagination dots with image thumbnails
   on product detail (#thumb-gallery) + quickview modal (.qv-carousel).
   The slick init's customPaging callback renders a
   <button class="thumb-pager"><img></button> per slide; this
   block styles those buttons as a wrapped thumbnail row.
   ============================================================ */
#thumb-gallery .slick-dots,
.quickview .qv-carousel .slick-dots {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 0 0;
    margin: 0;
    justify-content: center;
    position: relative;
    bottom: auto;
    list-style: none;
}
#thumb-gallery .slick-dots li,
.quickview .qv-carousel .slick-dots li {
    width: 56px !important;
    height: 56px !important;
    margin: 0;
    padding: 0;
}
#thumb-gallery .slick-dots li button.thumb-pager,
.quickview .qv-carousel .slick-dots li button.thumb-pager {
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    background: #fff;
    opacity: .6;
    transition: opacity .15s ease, border-color .15s ease;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
#thumb-gallery .slick-dots li button.thumb-pager img,
.quickview .qv-carousel .slick-dots li button.thumb-pager img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#thumb-gallery .slick-dots li.slick-active button.thumb-pager,
.quickview .qv-carousel .slick-dots li.slick-active button.thumb-pager {
    opacity: 1;
    border-color: #1a1a1a;
}
#thumb-gallery .slick-dots li button.thumb-pager:hover,
.quickview .qv-carousel .slick-dots li button.thumb-pager:hover {
    opacity: 1;
}
/* Slick's default dot pseudo-element interferes — kill it on our pager. */
#thumb-gallery .slick-dots li button.thumb-pager::before,
.quickview .qv-carousel .slick-dots li button.thumb-pager::before {
    display: none;
}

/* ============================================================
   Task #72 — zoom UX (rebuilt 2026-05-20)
     1. Hover the main product image  → drift-zoom side magnifier.
     2. Click the main image          → PhotoSwipe v5 lightbox opens
        with built-in wheel/pinch/drag zoom + swipe nav.
   Both libraries loaded from jsDelivr CDN in the detail tpl.
   ============================================================ */
#thumb-gallery .slick-current img.js-thumb {
    cursor: zoom-in;
}
/* drift's floating pane — pinned to the right of the gallery in a
   dedicated absolute-positioned container we inject (.ln-drift-pane).
   The pane only renders while the cursor is over the source image,
   so it overlaying the right-hand product info column is acceptable
   (matches the Amazon-style magnifier UX). */
.images-container {
    position: relative;
    overflow: visible;
}
.ln-drift-pane {
    position: absolute;
    top: 0;
    left: calc(100% + 20px);
    width: 400px;
    height: 400px;
    z-index: 100;
    pointer-events: none;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    /* Hide by default; only visible while drift has the pane open. */
    visibility: hidden;
}
.ln-drift-pane:has(.drift-zoom-pane.drift-open) {
    visibility: visible;
}
.ln-drift-pane .drift-zoom-pane,
.ln-drift-pane .drift-zoom-pane-loader {
    width: 100% !important;
    height: 100% !important;
}
.drift-bounding-box {
    border: 1px solid rgba(0, 0, 0, .3);
    background: rgba(255, 255, 255, .25);
}

/* ============================================================
   Task #75 — Megamenu hover-intent companion CSS.
   The JS in ln-fixes.js adds .ln-menu-keep-open to the
   .nav-item.parent.dropdown <li> while the cursor is over the
   trigger OR its dropdown (with a 250ms grace window after
   leaving). This forces the dropdown to stay open during the
   diagonal traverse from trigger to subcategory.

   2026-06-04 regression fix: gate on viewport WIDTH, not hover.
   appagebuilder/styles.css switches to the off-canvas/hamburger menu
   at <=1199px; the desktop vertical megamenu (where this hover-intent
   belongs) only exists at >=1200px. Below that, the same .verticalmenu
   is reused as a touch drill-in menu and the desktop .dropdown-sub
   flyout (`right:-300px`) renders clipped off the right edge. A first
   attempt scoped this to `(hover:hover) and (pointer:fine)`, but
   DevTools "Responsive" mode and narrow desktop windows still report
   hover:hover at 440px, so it kept clipping. Width is the correct
   switch. */
@media (min-width: 1200px) {
    .verticalmenu .nav-item.parent.dropdown.ln-menu-keep-open > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}
/* Below the desktop-megamenu breakpoint the menu is the off-canvas
   drill-in (tap a category → slide into its submenu, Back to return).
   The desktop hover flyout must never appear here — on a real phone
   there's no hover so it never did, but on a narrow MOUSE viewport
   (DevTools, small window, touch-laptop) :hover would pop the same
   clipped `right:-300px` flyout. Suppress both the native :hover and
   the hover-intent keep-open openings; the touch drill-in uses the
   separate .menu_mobile_top panel and is unaffected. */
@media (max-width: 1199px) {
    .verticalmenu .nav-item.parent.dropdown:hover > .dropdown-menu,
    .verticalmenu .nav-item.parent.dropdown.ln-menu-keep-open > .dropdown-menu {
        display: none !important;
    }
}
/* Hide drift when there's no zoomable source (single-image products
   that still bound, edge cases) — fall through to default cursor. */
#thumb-gallery .slick-current img.js-thumb:not([data-image-large-src]) {
    cursor: default;
}

/* ============================================================
   Task #81 — Border around main image after variant switch
   (May 28 #21). PS9 variant-AJAX re-wraps the gallery with
   the old .product-thumb-images markup; theme.css:24564 adds
   `border: 1px solid #414141` on .thumb.selected and .thumb:hover.
   With #73's thumbnails-as-pagination layout, that legacy thumb
   selector targets the MAIN image instead of mini-thumbnails,
   producing a visible frame after color switch.
   ============================================================ */
.product-thumb-images .thumb.selected,
.product-thumb-images .thumb:hover {
    border: none !important;
}

/* ============================================================
   Task #80 — Align cart action buttons to single right edge
   (May 28 #7 second bullet). Continue-shopping-bar, Apply
   (voucher) and Share-this-cart all originally lived in different
   parent columns so their right edges drifted apart by 39 px @
   desktop and 100+ px @ mobile/tablet. Structural fix is in
   ln-fixes.js (relocateContinueShoppingBar) — it moves the
   continue-shopping-bar into #column-2-upper at page load so all
   three buttons share the same column and align via flex-end /
   text-align right consistently at every viewport. CSS here just
   zeroes out Share's 5 px margin-right offset so it lands flush
   with Apply.
   ============================================================ */
.addtocartfromurl_content {
    margin-right: 0 !important;
}

/* ============================================================
   Task #63 — productbundlespro widget visual restructure.
   Default upstream layout is a 2-column grid (products left,
   totals right) with a hard border around the whole bundle.
   Client wants: no frame, responsive product grid (5 / 3 / 2),
   bundle totals as a single horizontal row at the bottom,
   per-bundle title only when there's more than one bundle on
   the product page, plus a project-wide header above the whole
   widget. Header markup + ln-single-bundle helper class added in
   modules/productbundlespro/views/templates/front/bundle_groups.tpl
   (template patch mirrored to gama-module-patches/).
   ============================================================ */

/* 1. Frame removal — no border, no panel padding. */
.productbundlespro .pbp-bundle {
    border: none;
    background-color: transparent;
    padding: 0;
}

/* 2. Generic header above all bundles. */
.productbundlespro .ln-pbp-header {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* 3. Per-bundle title — hide when only one bundle exists for the
      product (helper class set by the template). When multiple
      bundles share the page the per-bundle title is needed to
      tell tabs apart. */
.productbundlespro.ln-single-bundle .pbp-bundle .bundle-title {
    display: none;
}

/* 4. Bundle body — kill the 2-col grid, stack vertically. */
.productbundlespro .pbp-bundle-body {
    display: block;
}

/* 5. Products row — responsive flex grid. Desktop 5 / tablet 3 /
      mobile 2 products visible at a time. Native horizontal scroll
      with scroll-snap so the existing prev/next arrows still work. */
.productbundlespro .pbp-bundle .pbp-products {
    position: relative;
    width: 100%;
}
.productbundlespro .pbp-bundle .pbp-products-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0;
}
.productbundlespro .pbp-bundle .pbp-bundle-product {
    flex: 0 0 calc((100% - 30px * 4) / 5);
    margin-right: 0;
    scroll-snap-align: start;
}

/* Center the "+" separator inside the flex gap, vertically aligned
   to the IMAGE midline (not the whole card). Upstream put ::after on
   .pbp-bundle-product so `top: 50%` was the centre of the entire
   card — which sits below the image because the card also holds the
   name + price. Re-host ::after on .product-image so vertical centre
   matches image centre, and align horizontally to the gap centre.
   Last card suppresses the separator. */
.productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product:after {
    display: none; /* kill upstream ::after on the card */
}
.productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product .product-image {
    position: relative;
}

/* Bundle thumbnails — explicit max-height so cards stay compact
   regardless of source image dimensions. Cross-sell context, not the
   primary product gallery, so a smaller thumbnail keeps the widget
   from dominating the layout. */
.productbundlespro .pbp-bundle .pbp-bundle-product .product-image img {
    max-height: 140px;
    width: auto;
    max-width: 100%;
}
@media (max-width: 991px) {
    .productbundlespro .pbp-bundle .pbp-bundle-product .product-image img {
        max-height: 110px;
    }
}
@media (max-width: 575px) {
    .productbundlespro .pbp-bundle .pbp-bundle-product .product-image img {
        max-height: 90px;
    }
}

/* Bundle combination select — upstream sets width 100% / font-size 12 px but
   leaves height to the browser default (~26 px). With our denser bundle layout
   the dropdown looks cramped and is hard to tap on mobile. Bump to ~36 px so
   the visible label has breathing room and the click target is comfortable. */
.productbundlespro .pbp-bundle .pbp-bundle-body .pbp-products .pbp-bundle-product select {
    height: 36px;
    padding: 4px 8px;
    line-height: 1.4;
}

.productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product .product-image::after {
    content: "+";
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 2.5px; /* (30 gap - 25 symbol) / 2 */
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 24px;
    color: #666;
    z-index: 2;
}
.productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product:last-of-type .product-image::after {
    display: none;
}
@media (max-width: 991px) {
    .productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product .product-image::after {
        height: 20px;
        width: 20px;
        line-height: 20px;
        font-size: 18px;
        margin-left: 0; /* gap is 20 px, symbol is 20 px */
    }
}
@media (max-width: 575px) {
    .productbundlespro .pbp-bundle .pbp-products .pbp-bundle-product .product-image::after {
        margin-left: -2.5px; /* gap 15 px, symbol 20 px */
    }
}

@media (max-width: 991px) {
    .productbundlespro .pbp-bundle .pbp-products-slider {
        gap: 20px;
    }
    .productbundlespro .pbp-bundle .pbp-bundle-product {
        flex: 0 0 calc((100% - 20px * 2) / 3);
    }
}

@media (max-width: 575px) {
    .productbundlespro .pbp-bundle .pbp-products-slider {
        gap: 15px;
    }
    .productbundlespro .pbp-bundle .pbp-bundle-product {
        flex: 0 0 calc((100% - 15px) / 2);
    }
}

/* 6. Bundle totals — single horizontal row at the bottom.
      Heading text + price + qty + Add to basket all on one line.
      Adjusts to wrap on narrow viewports without breaking. */
.productbundlespro .pbp-bundle .bundle-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 0 0 0;
    border-top: 1px solid #eee;
    text-align: left;
}
.productbundlespro .pbp-bundle .bundle-totals .heading-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
.productbundlespro .pbp-bundle .bundle-totals .bundle_original_price_formatted_tax_included,
.productbundlespro .pbp-bundle .bundle-totals .bundle_discounted_price_formatted_tax_included {
    margin: 0;
}
.productbundlespro .pbp-bundle .bundle-totals .bundle_original_price_formatted_tax_included .price.badge,
.productbundlespro .pbp-bundle .bundle-totals .bundle_discounted_price_formatted_tax_included .price {
    border: none;
    color: #222;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    width: auto;
    display: inline-block;
}
.productbundlespro .pbp-bundle .bundle-totals .bundle_actions {
    display: flex !important; /* override upstream inline-grid */
    align-items: center;
    gap: 20px;
    grid-gap: 0;
    grid-template-columns: none;
}
.productbundlespro .pbp-bundle .bundle-totals .bundle_actions .bundle_quantity {
    margin: 0;
}
.productbundlespro .pbp-bundle .bundle-totals .pbp-btn-add-to-basket {
    padding: 10px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 7. Slider navigation buttons — clean, no border. */
.productbundlespro .pbp-bundle .pbp-slider-nav .pbp-btn-slider-nav {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #888;
    padding: 0 8px;
    cursor: pointer;
}
.productbundlespro .pbp-bundle .pbp-slider-nav .pbp-btn-slider-nav:hover {
    color: #222;
}
.productbundlespro .pbp-bundle .pbp-slider-nav .pbp-btn-slider-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* Bundle slider arrows visibility — JS-driven via .ln-bundle-no-overflow on
   .pbp-bundle when the slider's scrollWidth <= clientWidth (no overflow). A
   CSS-only :has() check on child count was wrong: viewport width plus the
   product info column squeeze the bundle area unpredictably, so 4 cards may
   or may not fit. The JS lives in ln-fixes.js and recomputes on resize. */
.productbundlespro .pbp-bundle.ln-bundle-no-overflow .pbp-slider-nav {
    visibility: hidden;
}

/* Multi-bundle accordion — when a product has more than one bundle (9
   products on gama, mostly Ravak combo washbasins) we show them as a
   Bootstrap 4 collapse list: first bundle expanded by default, the rest
   collapsed with a chevron-rotating trigger. Template adds ln-multi-bundle
   + accordion classes on the tab-content wrapper, marks bundle-title as
   data-toggle="collapse", and wraps the body in .ln-accordion-collapse. */
.productbundlespro .pbp-tab-content.ln-multi-bundle .pbp-bundle {
    border-bottom: 1px solid #eee;
}
.productbundlespro .pbp-tab-content.ln-multi-bundle .pbp-bundle:last-child {
    border-bottom: none;
}
.productbundlespro .pbp-tab-content.ln-multi-bundle .bundle-title.ln-accordion-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    user-select: none;
    transition: color 0.15s;
}
.productbundlespro .pbp-tab-content.ln-multi-bundle .bundle-title.ln-accordion-trigger:hover {
    color: #555;
}
.productbundlespro .ln-accordion-chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: 12px;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.productbundlespro .bundle-title.ln-accordion-trigger.collapsed .ln-accordion-chevron {
    transform: rotate(-45deg);
    margin-bottom: -2px;
}