/* PDP Fáza 1 — listing/PDP, no demo controls */

/* PDP — Fáza 1: hviezdičkové hodnotenie a recenzie */

/* "Zákazníci si kúpili aj" — moved to sit right above the "Detaily" tabs (see CHANGELOG), but on
 desktop its own row has the theme's own `m-0-lg` (zeroes all margin at that breakpoint) and the
 tabs row right after it has no top margin/padding of its own either, so the two sat flush
 against each other. Mobile already had breathing room from the theme's own responsive spacing
 further down (untouched here — this rule only applies at the same 1025px breakpoint the theme
 itself uses for `.mt-20-lg`, whose value we're reusing here for consistency). */
@media (min-width: 1025px) {
 /* !important needed: the element also carries the theme's own .m-0-lg utility class, which
 is itself declared with !important (style-desktop.min.css) and zeroes margin on every
 side — a plain override here, even via the more specific #id, would lose to that. */
 #crosselingTab {
 margin-bottom: 20px !important;
 }
}

/* Small clickable affordance for the rating summary next to the title */
.rating-stars-wrapper .count {
 cursor: pointer;
 text-decoration: underline;
}

/* "Detaily" tab body copy (heading + paragraphs) carries inline style="text-align:justify" —
 baked into the saved snapshot's product description HTML itself (looks like WYSIWYG editor
 output from PrestaShop admin, not something style-custom.css sets), which stretches short
 lines with big, uneven word gaps. #id selectors already beat inline style attribute order,
 but inline style has near-max specificity, so !important is needed here to actually win. */
#custom_style,
#custom_style * {
 text-align: left !important;
}

/* Reviews tab renders on mobile even though the tab switcher itself is desktop-only
 (matches live theme behavior) — give it breathing room from the "Detaily" accordion above it */
#reviews_tab.show-xs {
 margin-top: 20px;
}

/* "výhodné balenie" badge above the gallery: 20% bigger, left-aligned on every breakpoint
 (theme's .justify-center-xs on the wrapper was removed in the HTML — this only handles size) */
.hero-badge {
 transform: scale(1.2);
 transform-origin: left center;
}

/* Availability/delivery info (Na sklade / Odošleme zajtra / Doprava zdarma), now living inside
 the price box itself (left column, price on the right — see .price-info-merged below). Theme's
 default .product-qualities lays items out in a wrapping row (display:flex;flex-wrap:wrap) —
 here we stack them in a column, left-aligned, with icons 20% bigger than their original size
 (the theme sets these specific icons to 14px via its own "fs-14i" !important utility, removed
 from the markup here so this rule can take over: 14 * 1.2 = 16.8px). */
.product-qualities.product-qualities-cta {
 flex-direction: column;
 align-items: flex-start;
 flex-wrap: nowrap;
 row-gap: 10px;
}
.product-qualities.product-qualities-cta .quality {
 margin-left: 0;
}
.product-qualities.product-qualities-cta .quality i {
 font-size: 16.8px;
}

/* Below the theme's md breakpoint (767px) the page layout stacks to one column, so this box
 stretches to the full (wide) page width instead of sharing a row with the product image.
 .justify-content:space-between then pushes the two columns apart across that whole width —
 at e.g. 764px the box is ~736px wide but the two columns only need ~230px combined, leaving a
 ~485px dead gap between "Doprava zdarma" and the price. Capped so the columns stay close
 together at any width in that stacked range, same proportions as on real desktop (where the
 box only ever gets the ~58% share of a two-column row) and as on narrow mobile. */
@media (max-width: 767px) {
 .price-info-merged {
 max-width: 480px;
 }
}

/* Main price ("11,90 €") is fs-28 by theme default, unresponsive at any width. Harmless for our
 real (short) SK price, but stress-testing against abc-zoo.bg's real dual-currency price format
 (e.g. "44,90 € (87,82 лв)") showed it wrapping into ~3 ragged lines at 400px, since it competes
 for width with the "Na sklade / Odošleme.../ Doprava..." column beside it. Shrunk on mobile —
 doesn't fully solve the BG worst case (still wraps, just to a clean 2-line break at a space
 instead of 3 ragged ones) but is a meaningful improvement and keeps our real SK price readable,
 just slightly smaller. */
@media (max-width: 767px) {
 .price-info-merged .text-right .price {
 font-size: 22px;
 }
}

/* "Odporúčame zakúpiť" cross-sell box, above the price. Live abc-zoo.sk theme has these two
 rules in a newer style-custom.css than the one saved in our snapshot — added here since
 they're genuinely missing locally, not because we're avoiding the theme's own styling.
 Native appearance replaced entirely (rather than just accent-color) — accent-color only
 controls the box fill, the checkmark glyph color it auto-picks isn't something CSS can target
 directly and rendered dark on our orange instead of white, so a custom checkmark (inline SVG)
 is the only reliable way to guarantee it's white. !important still needed on top of that:
 style-custom.css (loaded after this file, see) now ships its own .accessory-checkbox
 rule at identical specificity — later-in-cascade wins on a tie without it. */
.accessory-checkbox {
 -webkit-appearance: none;
 appearance: none;
 width: 18px;
 height: 18px;
 margin: 0;
 border: 2px solid #ccc !important;
 border-radius: 4px;
 background-color: #fff !important;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 12px 12px;
 cursor: pointer;
 display: block;
}
.accessory-checkbox:checked {
 border-color: #ff7c00 !important;
 background-color: #ff7c00 !important;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5l-7 7-4-4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Checked state reuses the exact same brand orange (#ff7c00 border / #fff7ef background — theme's
 own --secondary/--soft-secondary variables) as a selected row in the Balenie/Príchuť cards
 above, so "this is now included" reads consistently across every selectable card on the page
 instead of only the checkbox itself changing color. */
.accessory-card.is-selected {
 background: #fff7ef;
 border-color: #ff7c00;
}
/* "Množstevná zľava" restyled to match a Balenie row's layout/info (name + discount badge +
 €/ks + "Spolu X €" total) instead of the original product-thumbnail card — reuses the same
 .pdp-choice-row-name/-prices/-price-line/-total classes 1:1 (generic, not scoped to
 .pdp-choice-row specifically) so it looks identical without duplicating any CSS. Only this
 wrapper-specific padding/cursor needed adding, since .accessory-card already carries the same
 border (.b-gray = #ddd, matches .pdp-choice-row's border 1:1) and checked-state colors. Uses a
 real checkbox (not radio) since it's an independent add-on, not a mutually exclusive choice —
 wraps the whole row so clicking anywhere toggles it, same reachable-target size as a
 Balenie row despite no JS click handler being needed here. */
.accessory-card-row {
 padding: 12px 14px;
 cursor: pointer;
}
/* "ABC klub" upsell, shown below the price box once "Množstevná zľava" is checked (see
 pdp-custom.js) — real brand asset (badge.svg, downloaded from the live theme's own footer
 "ABC Club" section) instead of a recreated logo. The SVG already carries its own white
 rounded-card background + drop shadow, so it's sized down and left otherwise untouched rather
 than fighting that framing with more CSS.
 Named .pdp-abcclub-logo (not .abcclub-logo) on purpose: the theme's own style-basic.min.css
 already ships a real .abcclub-logo class (height:50px; margin-top:-20px — used to pop the same
 badge.svg out of some other real banner elsewhere on the live site) that loads after this file
 and was silently winning the height on a same-specificity tie, dragging our logo up out of its
 row via that negative margin. Different class name sidesteps the collision entirely rather
 than fighting it with !important. */
.pdp-abcclub-logo {
 height: 28px !important;
 width: auto !important;
 display: block;
 max-height: 28px !important;
}
.pdp-abcclub-state .pdp-choice-row-name {
 flex-direction: row;
 align-items: center;
 gap: 0;
}
/* Colors match the theme's own real "requires login for a promo price" pattern used in checkout
 (.checkout-promo-auth-box / .checkout-promo-auth-buttons in style-basic.min.css) — reused here
 for visual consistency instead of inventing a new promo-box treatment, even though our own
 markup is simpler (no real social-login SDK dependencies to replicate for a static demo). */
.abcclub-auth-panel {
 background-color: #ffe4cb;
 margin-top: 10px;
 display: none;
}
.pdp-abcclub-state:has(#pdp-abcclub-optin:checked) + .abcclub-auth-panel,
.abcclub-auth-panel.is-open {
 display: block;
}
/* Box tucked visually "under" the price box — flat top on this box meets a flattened bottom on
 the price box, so the two edges line up exactly with no gap, then pulled up to close the price
 box's own mb-15 (margin-bottom:15px, a theme utility already present in its HTML class list) so
 the two boxes sit flush/"stuck together" instead of leaving a 15px seam between them. (Earlier
 version used a negative margin + z-index overlap instead of matching the corners — at the
 rounded corners themselves the price box's fill curves inward before reaching its bounding edge,
 so the straight vertical overlap didn't reach far enough there, leaving a small triangular gap at
 each corner. Flattening both meeting edges removes the mismatch instead of trying to overlap
 past it.) Tinted a light orange at rest (not just once checked) so it reads as a distinct promo
 area from the plain white Balenie/Množstevná zľava rows above it.
 The ABC klub section is now always shown (no longer conditional on "Množstevná zľava" — see
 pdp-custom.js), so the flattened-bottom treatment is unconditional here too, rather than gated
 behind a .pdp-abcclub-open class that only ever got added/removed together with the box's own
 show/hide.
 !important on the price box's radius: it also carries the theme's own .product-price class, and
 style-basic.min.css has ".single-product .product-price { border-radius: 10px }" — two classes
 beats our one-class selector on specificity regardless of load order, so a plain override here
 was silently losing (same class of issue as .accessory-checkbox / #crosselingTab elsewhere in
 this file). */
.price-info-merged:has(+ .pdp-abcclub-offer) {
 border-bottom-left-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
}
.pdp-abcclub-state {
 margin-top: 0;
 /* !important: same specificity as theme .br-5 on these elements. */
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important;
 border-bottom-left-radius: 10px !important;
 border-bottom-right-radius: 10px !important;
 background: #fff7ef !important;
 border-color: #ffd9ad !important;
}
.pdp-abcclub-better,
.pdp-abcclub-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.pdp-abcclub-better.is-hidden,
.pdp-abcclub-points.is-hidden {
    display: none;
}
.abcclub-auth-buttons {
    gap: 8px;
}
.abcclub-auth-buttons .btn-outline-orange {
    background: #fff;
}
.accessories-wrapper .tooltip-wrapper-info {
 opacity: 0.8;
 transition: color 0.3s;
 cursor: pointer;
 color: #666 !important;
}

/* Fix: at narrow widths (tested at 400px, and against real long product names/price formats
 from abc-zoo.hu, abc-zoo.bg, abc-zoo.ro — see CHANGELOG) the fixed 70px thumbnail + 15px
 checkbox padding left only ~235px for the name, wrapping it into 2-3 ragged lines even on the
 live production site itself. Name is capped at 2 lines with an ellipsis (safety net for any
 language/length) and the info icon is pulled out of the wrapping text flow so it never gets
 orphaned onto its own line. */
.accessories-wrapper .fw-600.fs-16 {
 display: flex;
 align-items: flex-start;
 column-gap: 4px;
}
.accessories-wrapper .accessory-name {
 flex: 1 1 auto;
 min-width: 0;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.accessories-wrapper .accessory-info-icon {
 flex-shrink: 0;
 margin-top: 2px;
}
@media (max-width: 767px) {
 .accessories-wrapper .accessory-thumb {
 width: 52px !important;
 }
 .accessories-wrapper .accessory-checkbox-col {
 padding-right: 8px;
 }
 .accessories-wrapper .accessory-name {
 font-size: 14px;
 }
}

/* Fix: theme's own tooltip positioning for this info icon (.tooltip-wrapper margin-left:-140px
 + .tooltip left:-72px, both from the original style-custom.css, untouched by us) assumes a wide
 desktop layout. On mobile the icon sits near the right edge of a ~340px-wide card, so that fixed
 offset combined with the tooltip's fixed 280px width pushed it ~160px past the right edge of the
 viewport (measured: tooltip right edge at 535px on a 375px-wide screen). Scoped to this icon only
 (not a global tooltip fix) since other tooltip usages on the page have their own specific classes
 and aren't affected by this override.
 .tooltip-wrapper's own offsetParent here (.wrapper.main-wrapper) happens to span the full mobile
 viewport width, so stretching the wrapper to left:0/right:0 turns it into a full-width anchor —
 the child .tooltip can then be pinned to its right edge with a safe inset instead of a fixed
 left-offset that doesn't account for where the icon actually sits. */
@media (max-width: 767px) {
 .accessories-wrapper .tooltip-wrapper {
 left: 0 !important;
 right: 0 !important;
 margin-left: 0 !important;
 }
 .accessories-wrapper .has-tooltip.product-tooltip .tooltip {
 left: auto !important;
 right: 8px !important;
 width: auto !important;
 max-width: calc(100% - 16px) !important;
 }
}

/* Quick parameter facts, under the short description — the product's own attributes (brand, meat,
 size, life stage) read at a glance. Originally styled as bordered pill/chip buttons (derived
 from the filter project's .qw-chip component) — changed on feedback: bordered pills read as
 clickable active-filter chips even though nothing here is actionable, which misled users into
 expecting a tap to do something. Restyled as checkmark + text "proof points" — no border, no
 button affordance — same brand green as the check_circle icon used for "Na sklade" elsewhere on
 the page, but the plain checkmark on its own (no filled circle behind it, per feedback — the
 circle read as another small button/badge shape). A gentle gray fill (no border) was added back
 afterwards per feedback, to give each fact a visible boundary again without the border that made
 the original version read as clickable — `#f8f8f8`, matching the theme's own `.bg-gray` utility
 (used a few sections down for the "Kód výrobku" box) rather than an invented gray value.
 Mobile: horizontal-scroll row (swipeable, no wrapping — the more common pattern on narrow
 screens). Desktop (≥768px): "tag cloud" — wraps onto as many lines as needed so every fact is
 visible at once with nothing to scroll.
 Checkmark itself: own inline SVG, hand-drawn in the rounded-stroke line style of
 amicons.design (2.5px stroke, round caps/joins, no fill) instead of the material-icons font
 glyph — not their actual icon file, just inspired by the visual language. */
.pdp-params-pills {
 display: flex;
 align-items: center;
 row-gap: 8px;
 column-gap: 16px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 margin: 32px 0 0;
 padding-bottom: 2px;
}
.pdp-params-pills::-webkit-scrollbar {
 display: none;
}
@media (min-width: 1025px) {
 .pdp-params-pills--wrap {
 flex-wrap: wrap;
 overflow-x: visible;
 }
}
.pdp-quick-fact {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 4px 0;
 font-size: 13px;
 font-weight: 600;
 line-height: 1.2;
 color: #333;
 white-space: nowrap;
}
.pdp-quick-fact-icon {
 flex: 0 0 auto;
 width: 18px;
 height: 18px;
 color: #1d9001;
}
.pdp-pill {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 border-radius: 999px;
 background: #fff;
 border: 1px solid #e0e0e0;
 font-size: 13px;
 font-weight: 600;
 line-height: 1.2;
 color: #222;
 white-space: nowrap;
}

/* Generic "collapsed summary card → full list" selector, derived from the vilgain.sk pattern
 the user pointed to (vilgain.sk/vilgain-grass-fed-whey-protein/...): a collapsed card showing
 only the currently selected option; clicking it (or "+N ďalšie možnosti") reveals the rest.
 Desktop: reveals inline below the card, same as vilgain. Mobile: opens as a bottom-sheet
 drawer (dark backdrop, slides up, rounded top corners, own header + close button) — same
 pattern as this theme's own mobile filter drawer (.side-filter, seen live on
 abc-zoo.sk/100-potreby-pre-psov), rebuilt here with our own classes since that drawer's CSS
 isn't part of the PDP page bundle we have (it only ships on category/listing pages).
 Shared by two independent instances on this page — "Balenie" (package size, 3 real options)
 and "Príchuť" (flavor, 13 real options, one disabled/out of stock) — each its own
 .pdp-choice-wrap with its own id, initialised generically by pdp-custom.js (see there). */
/* Consistent 32px vertical rhythm between top-level PDP content sections (pills, Balenie/
 Varianty, Príchuť, accessory cards, price box, add-to-cart row) — previously an inconsistent
 mix of theme mt-10/mt-20/mt-30 and mb-10/mb-15/mb-20 utility classes left uneven 20-30px gaps
 between blocks. Margin-top only (each section sets its own gap from whatever precedes it),
 margin-bottom pinned to 0 so the gap is exactly 32px regardless of whether adjacent margins
 would otherwise collapse (e.g. across the #variantSection/#buy_block form boundary) — with one
 side always 0, collapsed-or-not gives the same 32px either way. The matching mt-* and mb-*
 utility classes were removed from the HTML on each of these elements so there's no
 same-specificity conflict with the classes below (both single-class selectors targeting the
 same property — cascade order would otherwise decide, not us).
 #abcClubBox and #abcClubAuthPanel are deliberately NOT part of this rhythm: they're not
 independent top-level sections, they're a sub-attachment glued to the price box right above
 them (see the "tucked under" corner-radius system further down) — their own margin-top values
 are set there instead, closer to 0 by design. */
.pdp-choice-wrap,
.accessories-wrapper,
.price-info-merged,
#add_to_cart_display {
 margin-top: 32px;
 margin-bottom: 0;
}
.pdp-choice-wrap {
 position: relative;
}
/* Groups summary + backdrop + panel (but not the heading, and not Príchuť's "Najobľúbenejšie"
 pills, which sit outside this) — gives the panel a positioning context that starts exactly at
 the top of the summary card, so the desktop dropdown-overlay rule further down can anchor to
 it precisely regardless of what else lives inside .pdp-choice-wrap above/below it. */
.pdp-choice-selector {
 position: relative;
}
.pdp-choice-summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 12px 14px;
 background: #fff;
 cursor: pointer;
 text-align: left;
 font-family: inherit;
 gap: 10px;
}
.pdp-choice-summary-body {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex: 1 1 auto;
 min-width: 0;
 gap: 10px;
}
.pdp-choice-wrap--detailed .pdp-choice-summary-body {
 justify-content: flex-start;
}
.pdp-choice-wrap--detailed .pdp-choice-summary .pdp-choice-row-name {
 flex: 1 1 auto;
}
/* Collapsed-card price — same brand orange as the rest of the "active selector" system, bolder
 than the theme's plain .color-gray it carries in markup. !important needed: same specificity
 as .color-gray, and style-basic.min.css (which defines it) loads after this file in, so
 later-in-cascade would otherwise win on the tie (same class of issue noted earlier in this file
 for .accessory-checkbox / #crosselingTab). */
.pdp-choice-selected-price {
 color: #ff7c00 !important;
 font-weight: 600 !important;
}
/* Collapsed-card name (e.g. "6 x 400 g" / "Beef & Duck Heart") — carries theme's fw-700/fs-16 in
 markup; weight brought down to 600 here (16px already matched fs-16, kept explicit for good
 measure). !important: same specificity as those theme classes, defined later in. Only
 the collapsed summary name — .pdp-choice-row-name (rows inside the opened list) is untouched. */
.pdp-choice-selected-name {
 font-size: 16px !important;
 font-weight: 600 !important;
 color: #222;
}
.pdp-choice-selected-name-line {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
}
.pdp-choice-selected-discount {
 padding: 4px 12px !important;
 font-size: 12px !important;
 font-weight: 700 !important;
}
.pdp-choice-selected-total {
 margin-top: 2px;
}
.pdp-choice-selected-bestseller {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 4px 12px;
 border-radius: 999px;
 background: #2456e0;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 white-space: nowrap;
 line-height: 1.2;
}
.pdp-choice-row-discount {
 padding: 2px 7px !important;
 font-size: 10px !important;
 font-weight: 600 !important;
 border-radius: 50px;
 line-height: 1.3;
}
.pdp-choice-row-bestseller {
 display: inline-flex;
 align-items: center;
 gap: 3px;
 padding: 2px 7px;
 border-radius: 999px;
 background: #2456e0;
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 white-space: nowrap;
 line-height: 1.2;
}
.pdp-choice-chevron {
 flex: 0 0 auto;
 transition: transform 0.2s ease;
 color: #666;
}
.pdp-choice-wrap.is-open .pdp-choice-chevron {
 transform: rotate(180deg);
}
/* Extra "Najobľúbenejšie" section under a variant picker (not a variant type). */
.pdp-choice-popular {
 margin-top: 10px;
}
.pdp-choice-popular > span:first-child {
 display: block;
 margin-bottom: 6px;
}
.pdp-choice-popular-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
/* Unlike the shared .pdp-pill green (kept as-is for the "quick param" pills under the short
 description), these are fully recoloured into orange tones — soft-secondary background,
 #ffe4cb light-orange border (the theme's own border color, seen on its search input in
 style-basic.min.css), dark normal text instead of green, so they read as part of the same
 "active selector" family as the Balenie/Príchuť rows rather than as parameter tags. */
.pdp-choice-popular-pill {
 cursor: pointer;
 background: #fff7ef;
 border-color: #ffe4cb;
 color: #222;
}
/* Marks whichever pill matches the currently selected flavour — same brand orange border as a
 selected row (.pdp-choice-row.is-selected uses the identical #ff7c00), kept in sync by JS
 whenever the selection changes (row click, pill click, or on page load). */
.pdp-choice-popular-pill.is-selected {
 border-color: #ff7c00;
}
.pdp-choice-panel {
 display: none;
 margin-top: 10px;
}
.pdp-choice-wrap.is-open .pdp-choice-panel {
 display: flex;
 flex-direction: column;
}
/* Desktop dropdown mode (4+ options, not flat): the open panel overlays the page like a native
 instead of pushing everything below it down — previously it sat in normal flow right
 after .pdp-choice-selector, so opening Príchuť's 13-item list shoved "Najobľúbenejšie" and
 everything further down the page along with it. .pdp-choice-selector (summary+backdrop+panel
 only, not the "Najobľúbenejšie" pills or the heading) is the positioning context this anchors
 to, so the panel opens flush against the bottom of the summary card regardless of what other
 content lives inside .pdp-choice-wrap around it. Flat mode (.is-flat) is untouched here — its
 own !important rules further down already force position:static for that case. */
@media (min-width: 1025px) {
 .pdp-choice-wrap:not(.is-flat) .pdp-choice-panel {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 20;
 margin-top: 6px;
 padding: 8px;
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 5px;
 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
 }
}
.pdp-choice-panel-header {
 margin-bottom: 16px;
}
.pdp-choice-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.pdp-choice-row {
 display: flex;
 align-items: center;
 padding: 12px 14px;
 border: 1px solid #ddd;
 border-radius: 5px;
 color: #222;
 text-decoration: none;
 background: #fff;
}
.pdp-choice-row-name {
 flex: 1 1 auto;
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
}
.pdp-choice-row-label-line {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
}
.pdp-choice-row-prices {
 flex: 0 0 auto;
 margin-left: auto;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
}
.pdp-choice-row-price-line {
 display: flex;
 align-items: center;
 gap: 6px;
}
.pdp-choice-row-total {
 white-space: nowrap;
}
.pdp-choice-row-price {
 color: gray;
}
.pdp-choice-row.is-selected .pdp-choice-row-price,
.pdp-choice-summary .pdp-choice-row-price {
 color: #ff7c00;
}
.pdp-choice-radio {
 flex: 0 0 auto;
 width: 18px;
 height: 18px;
 margin-right: 10px;
 border: 1px solid #ccc;
 border-radius: 50%;
 background: #fff;
 position: relative;
}
.pdp-choice-row.is-selected .pdp-choice-radio {
 border-color: #ff7c00;
}
.pdp-choice-row.is-selected .pdp-choice-radio::after {
 content: "";
 position: absolute;
 top: 3px;
 left: 3px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #ff7c00;
}
.pdp-choice-row.is-selected {
 /* --soft-secondary from the theme's own CSS variables (style-basic.min.css :root) */
 background: #fff7ef;
 border-color: #ff7c00;
}
/* The one row whose price text was hardcoded to the theme's green .color-primary utility
 (6×400g, the default selection) — scoped override so only this row's price follows the new
 orange "active selector" color, without touching .color-primary anywhere else on the page
 (add-to-cart button, "Na sklade", etc. all keep the theme's real green unrelated to this). */
.pdp-choice-row.is-selected .color-primary {
 color: #ff7c00 !important;
}
.pdp-choice-row.is-disabled {
 color: #aaa;
 background: #fafafa;
 cursor: default;
 pointer-events: none;
}
.pdp-choice-row.is-disabled .pdp-choice-radio {
 border-color: #ddd;
 background: #f0f0f0;
}

/* "Flat" mode — used automatically when a selector has 3 or fewer options (computed in
 pdp-custom.js at init, and recomputed live by the Balenie demo toggle below): skips the
 collapsed summary card entirely and always shows the full option list directly under the
 heading, since with that few options a "tap to expand" step just adds friction. From 4 options
 up, the regular collapsed-card/expand behaviour (rest of this file) applies unchanged.
 !important is needed here to beat the mobile @media block further down, which otherwise turns
 .pdp-choice-panel into a fixed bottom-sheet regardless of mode. */
.pdp-choice-wrap.is-flat .pdp-choice-summary,
.pdp-choice-wrap.is-flat .pdp-choice-backdrop,
.pdp-choice-wrap.is-flat .pdp-choice-panel-header {
 display: none !important;
}
.pdp-choice-wrap.is-flat .pdp-choice-panel {
 display: block !important;
 position: static !important;
 max-height: none !important;
 overflow: visible !important;
 padding: 0 !important;
 margin-top: 0 !important;
 transform: none !important;
 box-shadow: none !important;
 border-radius: 0 !important;
 pointer-events: auto !important;
}
.pdp-choice-wrap.is-flat .pdp-choice-list {
 /* The 16px/20px side padding on .pdp-choice-list further down (mobile-only) exists to inset
 the list from the bottom-sheet's rounded edges — flat mode has no sheet to inset from, so
 that padding just misaligned the rows from the "BALENIE" heading above them on mobile. */
 padding: 0 !important;
}
/* Flat mode's row names sized/weighted the same as the collapsed-card name (16px/600) instead of
 the smaller 14px used for rows inside an actual dropdown list (Príchuť, or Balenie once the
 demo toggle switches it to 4 items) — flat mode has no separate collapsed-card name shown at
 all, these rows *are* the primary "what's selected" display, so they get the larger treatment. */
.pdp-choice-wrap.is-flat .pdp-choice-row-name,
.pdp-choice-wrap.is-flat .pdp-choice-selected-name {
 font-size: 16px;
 font-weight: 600;
}

/* Príchuť has 13 rows — desktop inline panel gets its own scroll cap so it can't push the rest
 of the page too far down. Scoped to desktop only: two classes on one selector outrank the
 single-class mobile rule below regardless of media query order, so without this scope it was
 also clamping the mobile bottom-sheet down to ~5 visible rows instead of its intended 70vh. */
@media (min-width: 1025px) {
 .pdp-choice-panel.pdp-choice-panel-scroll {
 max-height: 360px;
 overflow-y: auto;
 }
}

@media (max-width: 1024px) {
 .pdp-choice-wrap:not(.is-flat) .pdp-choice-panel {
 display: flex;
 margin-top: 0;
 overflow: hidden;
 }
 .pdp-choice-panel-header {
 margin-bottom: 0;
 }
 .pdp-choice-wrap:not(.is-flat) .pdp-choice-list {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 padding: 16px 20px 20px;
 }
}

/* ABC klub login overlay. Desktop: centered dialog. Mobile: bottom sheet.
 Scroll lock and Escape come from AbcSheet.bind; close uses .abc-sheet-close. */
.pdp-auth-overlay {
 position: fixed;
 inset: 0;
 /* Theme CSS itself uses z-index up to ~10003 (mobile menu, header, chat widget) — 200 sat
 well below that, so on top of a possible ancestor stacking-context issue (see pdp-custom.js,
 this element is now moved to a direct child of on init specifically to avoid that),
 any of those theme elements still on screen could out-rank it. Comfortably above their max. */
 z-index: 10050;
 /* Overlay itself never blocks clicks on the page behind it — the backdrop and panel below
 each opt back into pointer-events individually, only once actually open. No display:none
 toggle anywhere here on purpose: a transition can't animate a property change that happens
 in the same tick as display:none → block (the element simply isn't rendered yet to animate
 from), which is exactly why the slide-up/backdrop-fade wasn't playing before — same fix
 already applied to .pdp-choice-panel's own mobile drawer further up this file. Staying
 permanently in the render tree (just invisible/non-interactive via opacity+pointer-events
 when closed) is what makes the transition actually have a "before" frame to animate from. */
 pointer-events: none;
}
.pdp-auth-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.25s ease;
}
.pdp-auth-overlay.is-open .pdp-auth-backdrop {
 opacity: 1;
 pointer-events: auto;
}
.pdp-auth-panel {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 background: #fff;
 border-radius: 16px 16px 0 0;
 overflow: hidden;
 pointer-events: none;
}
.pdp-auth-overlay.is-open .pdp-auth-panel {
 pointer-events: auto;
}
/* Clipping (rounded corners, via overflow:hidden on .pdp-auth-panel above) is kept separate from
 scrolling (this wrapper) — overflow:auto/scroll + border-radius doesn't reliably clip a
 position:sticky child in Chromium, which let the header's square corners bleed white past the
 panel's rounded ones. overflow:hidden on a non-scrolling ancestor clips unconditionally. */
.pdp-auth-panel-scroll {
 max-height: 85vh; /* fallback for browsers without dvh — see .pdp-choice-panel above */
 max-height: 85dvh;
 overflow-y: auto;
}
/* Sticky within the scrolling wrapper, same technique as .pdp-choice-panel-header/.pdp-cart-header
 — kept reachable no matter how far the form is scrolled, for consistency across every
 drawer/modal in this prototype. No negative margin needed here (unlike the earlier version):
 .pdp-auth-panel itself carries no padding any more, so the header can just sit flush at the
 scroll wrapper's top edge on its own — negative top margin on a sticky element also turned out
 to shift *following* siblings up by the same amount in Chromium (a real overlap bug, not just a
 visual one), which this sidesteps entirely. */
.pdp-auth-panel-header {
 position: sticky;
 top: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 20px 16px;
 background: #fff;
 border-bottom: 1px solid #eee;
}
.pdp-auth-panel-header .abc-sheet-close {
    background: #fff;
    border: 1px solid #ddd;
}
.pdp-auth-tabs {
 display: flex;
 gap: 20px;
 padding: 0 20px;
 border-bottom: 1px solid #eee;
 margin-bottom: 20px;
}
.pdp-auth-tab {
 background: none;
 border: none;
 padding: 0 0 10px;
 font-size: 16px;
 font-weight: 600;
 color: #999;
 cursor: pointer;
 border-bottom: 3px solid transparent;
 margin-bottom: -1px;
}
.pdp-auth-tab.is-active {
 color: #222;
 font-weight: 700;
 border-bottom-color: #ff7c00;
}
.pdp-auth-tab-panel {
 display: none;
}
.pdp-auth-tab-panel.is-active {
 display: block;
}
.pdp-auth-google-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: 100%;
 padding: 10px 14px;
 border: 1px solid gray;
 border-radius: 5px;
 background: #fff;
 color: #222;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}
.pdp-auth-google-icon {
 width: 18px;
 height: 18px;
 flex: 0 0 auto;
}
.pdp-auth-divider {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 16px 0;
 color: #999;
 font-size: 12px;
}
.pdp-auth-divider::before,
.pdp-auth-divider::after {
 content: "";
 flex: 1 1 auto;
 height: 1px;
 background: #eee;
}
.pdp-auth-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 14px;
}
.pdp-auth-field label {
 font-size: 13px;
 font-weight: 700;
 color: #222;
}
.pdp-auth-google-hook {
 margin-bottom: 0;
}
.pdp-auth-google-hook .row,
.pdp-auth-google-hook [class*="col-"] {
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 0;
 float: none;
}
.pdp-auth-google-hook a,
.pdp-auth-google-hook .btn-new,
.pdp-auth-google-hook .login-social {
 display: flex !important;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: 100%;
 padding: 10px 14px !important;
 margin: 0 !important;
 border: 1px solid gray !important;
 border-radius: 5px;
 background: #fff !important;
 color: #222 !important;
 font-size: 14px;
 font-weight: 600;
 box-shadow: none;
}
.pdp-auth-google-hook img,
.pdp-auth-google-hook .login-social-icon {
 width: 18px;
 height: 18px;
 margin: 0;
}
.pdp-auth-field .checkout-input {
 width: 100%;
}
.pdp-auth-password-field {
 position: relative;
}
.pdp-auth-password-field .password-toggle {
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: #999;
 cursor: pointer;
 font-size: 20px;
}
.pdp-auth-forgot {
 display: block;
 text-align: center;
 margin-top: 14px;
 font-size: 13px;
 color: #888;
 text-decoration: underline;
}
.pdp-auth-body {
 padding: 0 20px 20px;
}
.pdp-auth-body .btn-new.btn-orange {
 width: 100%;
}

/* Mobile bottom-sheet: slide up from the bottom, same transform/transition technique as
 .pdp-choice-panel's own mobile drawer. */
@media (max-width: 1024px) {
 .pdp-auth-panel {
 transform: translateY(100%);
 transition: transform 0.25s ease;
 }
 .pdp-auth-overlay.is-open .pdp-auth-panel {
 transform: translateY(0);
 }
}

/* Desktop: centered dialog instead of a bottom sheet — overlay becomes a flex centering
 context (permanently, not toggled — see the display:none note above), panel gets its own
 max-width/border-radius/shadow instead of spanning full width, and fades/scales in instead of
 sliding up (translateY doesn't read as "sliding up" once it's centered instead of pinned to
 the bottom edge). */
@media (min-width: 1025px) {
 .pdp-auth-overlay {
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .pdp-auth-panel {
 position: relative;
 left: auto;
 right: auto;
 bottom: auto;
 width: 100%;
 max-width: 420px;
 border-radius: 10px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
 opacity: 0;
 transform: scale(0.96);
 transition: opacity 0.2s ease, transform 0.2s ease;
 }
 .pdp-auth-panel-scroll {
 max-height: 90vh;
 max-height: 90dvh;
 }
 .pdp-auth-overlay.is-open .pdp-auth-panel {
 opacity: 1;
 transform: scale(1);
 }
}

/* Add-to-cart confirmation modal — reproduces the real abc-zoo.sk pre-cart modal in our own
 style (see index.html for the "what's real vs simplified" notes). Mobile: bottom-sheet drawer
 fixed at 80vh tall (not max-height — a real fixed height, per feedback, so it reads as a
 proper drawer rather than a box that just happens to be short). Desktop: centered dialog at
 ~700px, matching the real modal's own measured width on the live site (696px content width at
 1280px viewport — not a number we picked, it's what their `.modal-content` actually renders
 at, driven by their "Nezabúdaš na niečo?" cross-sell grid we don't reproduce; kept anyway so
 our simplified modal reads at the same real scale instead of a cramped 460px). Same
 display:none-free opacity/pointer-events technique as .pdp-auth-overlay throughout, for the
 same reason (a transition can't animate a display:none → block change). */
.pdp-cart-overlay {
 position: fixed;
 inset: 0;
 z-index: 10050;
 pointer-events: none;
}
.pdp-cart-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.25s ease;
}
.pdp-cart-overlay.is-open .pdp-cart-backdrop {
 opacity: 1;
 pointer-events: auto;
}
.pdp-cart-panel {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 background: #fff;
 border-radius: 16px 16px 0 0;
 overflow: hidden;
 box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
 pointer-events: none;
 transform: translateY(100%);
 transition: transform 0.25s ease;
}
.pdp-cart-overlay.is-open .pdp-cart-panel {
 pointer-events: auto;
 transform: translateY(0);
}
/* Clipping (rounded corners, via overflow:hidden on .pdp-cart-panel above) is kept separate from
 scrolling (this wrapper) — overflow:auto/scroll + border-radius doesn't reliably clip a
 position:sticky child in Chromium, which let the header's square corners bleed white past the
 panel's rounded ones. overflow:hidden on a non-scrolling ancestor clips unconditionally.
 height:95vh (real device bug, reported): on iOS, `vh` units are computed against the browser's
 largest possible viewport (as if the address bar were hidden), not the actual visible one — a
 bottom-anchored, vh-sized panel like this one ends up taller than what's really on screen, so
 its top portion (the sticky header with the close button) rendered above the visible viewport
 with no way to scroll it into view (the page behind is scroll-locked while the modal is open).
 `dvh` (dynamic viewport height) tracks the real visible viewport instead and is now widely
 supported — kept `vh` as the line above it as a fallback for older browsers that don't
 recognize `dvh` (they just ignore that whole declaration and keep the first one). Same fix
 applied everywhere else in this file with a *vh mobile-overlay height (.pdp-choice-panel,
 .pdp-auth-panel-scroll). */
.pdp-cart-panel-scroll {
 height: 95vh;
 height: 95dvh;
 overflow-y: auto;
}
@media (min-width: 768px) {
 .pdp-cart-overlay {
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .pdp-cart-panel {
 position: relative;
 left: auto;
 right: auto;
 bottom: auto;
 width: 100%;
 max-width: 700px;
 margin: 0 16px;
 border-radius: 10px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
 opacity: 0;
 transform: scale(0.96);
 transition: opacity 0.2s ease, transform 0.2s ease;
 }
 .pdp-cart-panel-scroll {
 height: auto;
 max-height: 90vh;
 max-height: 90dvh;
 }
 .pdp-cart-overlay.is-open .pdp-cart-panel {
 opacity: 1;
 transform: scale(1);
 }
}
/* Sticky within the scrolling wrapper, same technique/reasoning as .pdp-choice-panel-header (the
 Balenie/Príchuť mobile drawer) — per feedback, kept reachable no matter how far the now much
 longer content (shipping bar + cross-sell grid) is scrolled, and consistent across every
 drawer/modal in this prototype rather than just the one it was first built for. No border-radius
 needed here — .pdp-cart-panel's own overflow:hidden clips this regardless of the header's shape. */
.pdp-cart-header {
 position: sticky;
 top: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 14px 16px;
 background: #1d9001;
 color: #fff;
 font-size: 18px;
 font-weight: 700;
}
.pdp-cart-header #pdpCartTitle {
 display: flex;
 align-items: center;
 gap: 8px;
}
.pdp-cart-header .abc-sheet-close {
 background: rgba(255, 255, 255, 0.2);
 color: #fff;
}
.pdp-cart-product {
 display: flex;
 /* Default align-items is "stretch" — without this, the image (a flex item with no explicit
 height) gets stretched to match its sibling info column's height instead of keeping its
 own aspect ratio, despite height:auto below (flex stretch wins over that for replaced
 elements in this rendering). Confirmed live: a real 600×600 square photo was rendering at
 64×92.5 — visibly squashed taller/narrower than its actual 1:1 ratio. */
 align-items: flex-start;
 gap: 12px;
 padding: 16px;
}
.pdp-cart-product img {
 width: 64px;
 height: auto;
 flex: 0 0 auto;
 border-radius: 5px;
 object-fit: contain;
}
.pdp-cart-product-info {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
}
.pdp-cart-name {
 font-size: 15px;
 font-weight: 600;
}
.pdp-cart-price-line {
 display: flex;
 align-items: baseline;
 gap: 6px;
 flex-wrap: wrap;
}
.pdp-cart-old-price {
 font-size: 13px;
 color: #999;
 text-decoration: line-through;
}
.pdp-cart-price {
 font-size: 18px;
 font-weight: 700;
 color: #1d9001;
}
.pdp-cart-dph {
 font-size: 12px;
 color: #999;
}
.pdp-cart-qty {
 display: inline-flex;
 align-items: center;
 gap: 0;
 border: 1px solid #ddd;
 border-radius: 5px;
 width: fit-content;
}
.pdp-cart-qty button {
 width: 28px;
 height: 28px;
 border: none;
 background: none;
 cursor: pointer;
 font-size: 16px;
 color: #333;
}
.pdp-cart-qty span {
 width: 32px;
 text-align: center;
 font-size: 14px;
 font-weight: 600;
}
/* Side-by-side on desktop; stacked on mobile per feedback — "Pokračovať v nákupe" and "Pokladňa"
 sitting next to each other only has room for short SK button text. Other languages this
 prototype might get adapted for (longer button labels) would wrap/collide at narrow widths in
 a 2-up row — stacking removes that risk entirely instead of trying to shrink text to fit. */
.pdp-cart-actions {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 0 16px 16px;
}
@media (min-width: 768px) {
 .pdp-cart-actions {
 flex-direction: row;
 }
}
.pdp-cart-shipping {
 padding: 14px 16px;
 border-top: 1px solid #eee;
}
.pdp-cart-shipping-text-row {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 8px;
}
.pdp-cart-shipping-icon {
 flex: 0 0 auto;
 font-size: 18px;
 color: #ff7c00;
}
.pdp-cart-shipping-text {
 display: block;
 font-size: 13px;
}
.pdp-cart-shipping-track {
 position: relative;
 height: 6px;
 border-radius: 999px;
 background: #eee;
 margin-bottom: 8px;
}
.pdp-cart-shipping-fill {
 position: absolute;
 inset: 0;
 width: 0%;
 border-radius: 999px;
 background: #ff7c00;
 transition: width 0.25s ease;
}
.pdp-cart-shipping-tick {
 position: absolute;
 top: -3px;
 width: 2px;
 height: 12px;
 background: #fff;
 border-left: 1px solid #ccc;
}
.pdp-cart-shipping-labels {
 display: flex;
 justify-content: space-between;
 font-size: 13px;
 font-weight: 600;
 color: inherit;
 text-align: center;
}
.pdp-cart-shipping-labels .fs-10 {
 font-size: 11px;
}
/* Which of the 3 tiers is highlighted is now dynamic (see syncCartShipping in pdp-custom.js) —
 matches whichever tier the current cart total actually falls into, not just "Zadarmo" always. */
.pdp-cart-shipping-tier.is-current {
 color: #1d9001;
 font-weight: 700;
}
/* Free-shipping-reached banner — colors/markup lifted from the real
 .checkout-discount-wrapper.success (bg rgb(235,255,231)) / .color-success (rgb(76,175,80))
 on the live site, but centered and enlarged per feedback ("silnejšie a menej čítania pre oči")
 instead of their real left-aligned 14px/16px row. */
.pdp-cart-shipping-success {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px;
 border-radius: 5px;
 background: #ebffe7;
 color: #4caf50;
}
.pdp-cart-shipping-success i {
 font-size: 22px;
}
.pdp-cart-shipping-success span {
 font-size: 16px;
 font-weight: 700;
 text-transform: uppercase;
}
/* "Nezabúdaš na niečo?" cross-sell — real banner background/dog mascot/category photos
 (downloaded locally, see index.html comment), simplified from the real markup (theirs uses a
 full PrestaShop category-grid component with per-breakpoint column counts; this is a fixed
 2-column grid, matching the layout it actually renders as in a modal this width anyway). */
.pdp-cart-upsell {
 margin-top: 32px;
}
.pdp-cart-upsell-banner {
 position: relative;
 padding: 0 20px 54px;
 background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff 100%), url("../../PDP_konzervy_files/crosssell-banner-bg.jpg") center / cover;
}
/* Heading is horizontally centered across the full banner width — on your request, matching how
 it reads in the modal/drawer overall. The dog goes back to being absolutely positioned (out of
 flow) so the heading can span/center on the full row width instead of only the space after it.
 Kept the same -25px peek above the banner edge as the flex version had (dog top = row padding
 20px + previous -45px margin = -25px net), so the "mascot sticking out" look doesn't change. */
.pdp-cart-upsell-banner-row {
 position: relative;
 padding: 34px 0 18px;
}
.pdp-cart-upsell-dog {
 position: absolute;
 top: -25px;
 left: 0;
 width: 90px;
 height: auto;
}
.pdp-cart-upsell-banner-row h3 {
 margin: 0;
 font-size: 22px;
 font-weight: 700;
 line-height: 1.2;
 color: #fff;
 text-align: center;
 text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Full-width centering collides with the dog on narrow mobile widths for the longer heading
 ("Zákazníci si kúpili aj") — there just isn't enough room either side of a 90px-wide dog once
 the container itself is only ~340px. Nudge the centering axis right by the dog's own footprint
 only at this breakpoint (desktop/tablet have plenty of clearance and stay truly full-width
 centered, matching how the real abc-zoo.sk banner reads on a wide layout). */
@media (max-width: 767px) {
 .pdp-cart-upsell-banner-row h3 {
 padding-left: 100px;
 }
}
.pdp-cart-upsell-grid {
 position: relative;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
 padding: 0 16px 16px;
 margin-top: -34px;
}
.pdp-cart-upsell-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 background: #fff;
 border-radius: 14px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
 padding: 14px 10px;
 text-decoration: none;
 text-align: center;
}
.pdp-cart-upsell-card img {
 width: 70px;
 height: 70px;
 object-fit: contain;
}
.pdp-cart-upsell-name {
 font-size: 14px;
 font-weight: 700;
 color: #ff8c00;
}
.pdp-cart-upsell-card .btn-new.btn-cta {
 gap: 6px;
 font-size: 13px;
}
.pdp-cart-upsell-card .btn-new.btn-cta .material-icons {
 font-size: 16px;
}
.pdp-cart-upsell-variant {
 display: none;
}
.pdp-cart-upsell-variant.is-active {
 display: block;
}
/* "Zákazníci si kúpili aj" variant — horizontal-scroll row of real products (see index.html
 comment for where the data comes from) instead of the fixed 2x2 category grid. Own arrow
 buttons instead of relying on native scrollbar drag, since this sits inside an already-scrolling
 drawer/modal where a second scroll affordance needs to be obvious at a glance. */
.pdp-cart-bought-wrap {
 position: relative;
 padding: 0 0 16px;
 margin-top: -46px;
}
/* overflow-x:auto here implicitly computes overflow-y as auto too (not visible), which was
 clipping the cards' own box-shadow flat at the row's top/bottom edge since there was no padding
 for it to render into. padding-top/bottom give the shadow room; wrap's margin-top above is
 -46px (not -34px like .pdp-cart-upsell-grid) specifically to net out to the same -34px visual
 overlap once this row's own +12px padding-top is subtracted, so both variants sit the same
 distance below the banner.
 The 16px left/right inset lives here (inside the scroll container) rather than on
 .pdp-cart-bought-wrap above — padding on a scrolling element is part of its scrollable area, so
 cards still sit with the same visual gap at rest, but scrolling can now reach all the way to the
 drawer/modal's real edge instead of being clipped early by a non-scrolling wrapper's padding. */
.pdp-cart-bought-row {
 display: flex;
 gap: 10px;
 overflow-x: auto;
 scrollbar-width: none;
 padding: 12px 16px 20px;
}
.pdp-cart-bought-row::-webkit-scrollbar {
 display: none;
}
.pdp-cart-bought-card {
 flex: 0 0 156px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 7px;
 background: #fff;
 border-radius: 14px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
 padding: 14px 12px;
 text-decoration: none;
 text-align: center;
}
.pdp-cart-bought-card img {
 width: 100%;
 height: 108px;
 object-fit: contain;
}
.pdp-cart-bought-name {
 font-size: 14px;
 font-weight: 600;
 color: #222;
 line-height: 1.3;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 min-height: 37px;
}
.pdp-cart-bought-price {
 font-size: 19px;
 font-weight: 700;
 color: #222;
}
.pdp-cart-bought-card .btn-new.btn-cta {
 gap: 5px;
 padding: 7px 12px;
 font-size: 14px;
}
.pdp-cart-bought-card .btn-new.btn-cta .material-icons {
 font-size: 17px;
}
.pdp-cart-bought-stock {
 display: flex;
 align-items: center;
 gap: 3px;
 font-size: 13px;
 color: #4caf50;
}
.pdp-cart-bought-stock .material-icons {
 font-size: 16px;
}
.pdp-cart-bought-arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 34px;
 height: 34px;
 border: none;
 border-radius: 50%;
 background: rgba(255, 124, 0, 0.85);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 2;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 padding: 0;
}
.pdp-cart-bought-arrow .material-icons {
 font-size: 22px;
}
.pdp-cart-bought-prev {
 left: 22px;
}
.pdp-cart-bought-next {
 right: 22px;
}
/* Not needed on mobile — the card row already scrolls natively by touch/swipe there, and the
 arrows just eat into limited screen width for no benefit. */
@media (max-width: 767px) {
 .pdp-cart-bought-arrow {
 display: none;
 }
}

.pdp-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.pdp-rating-row .rating-stars-wrapper {
    margin-bottom: 0;
}
.pdp-wishlist {
    margin-left: auto;
}
.pdp-wishlist ul,
.pdp-wishlist li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pdp-wishlist .material-icons {
    color: #e9242e;
    font-size: 26px;
}
.pdp-mobile-h1 {
    margin-top: 0;
}
.pdp-abcclub-offer {
    margin-top: -2px;
}
#cartModalContent {
    overflow: hidden;
    max-height: 95vh;
    max-height: 95dvh;
}
#cartModalContent .pdp-cart-panel-scroll {
    height: auto;
    overflow-y: auto;
    max-height: 95vh;
    max-height: 95dvh;
}
#cartModalContent .pdp-cart-header {
    position: sticky;
    top: 0;
    z-index: 2;
}
.pdp-choice-row {
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
}
.pdp-choice-row input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pdp-params-pills,
.pdp-quick-fact {
    pointer-events: none;
}
#quantity_discounts .pdp-qty-discount-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #222;
}
#quantity_discounts .pdp-choice-list {
    gap: 8px;
}
#quantity_discounts .pdp-choice-row {
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    align-items: center;
    gap: 0;
}
#quantity_discounts .quantity-discount-checkbox,
#quantity_discounts .accessory-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    align-self: center;
    border: 1px solid #ccc !important;
    border-radius: 3px;
}
#quantity_discounts.pdp-choice-wrap.is-flat .pdp-choice-row-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}
#quantity_discounts .pdp-choice-row-prices {
    gap: 2px;
}
#quantity_discounts .pdp-choice-row-price-line {
    gap: 8px;
}
#quantity_discounts .pdp-choice-row-discount {
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background-color: #fd0002 !important;
    color: #fff !important;
    border-radius: 999px;
    line-height: 1.3;
}
#quantity_discounts .pdp-choice-row-price {
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}
#quantity_discounts .pdp-choice-row-total {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    white-space: nowrap;
}
#quantity_discounts .pdp-choice-row:hover {
    background: #fff !important;
    cursor: pointer;
}
#quantity_discounts .pdp-choice-row.is-selected,
#quantity_discounts .pdp-choice-row.is-selected:hover,
#quantity_discounts .pdp-choice-row.selected,
#quantity_discounts .pdp-choice-row.selected:hover {
    background: #fff !important;
    border-color: #e0e0e0 !important;
    color: #222 !important;
}
#quantity_discounts .pdp-choice-row.is-selected .pdp-choice-row-price,
#quantity_discounts .pdp-choice-row.selected .pdp-choice-row-price {
    color: #ff7c00;
    font-weight: 700;
}
#quantity_discounts .pdp-choice-row.is-selected .pdp-choice-row-total,
#quantity_discounts .pdp-choice-row.selected .pdp-choice-row-total {
    color: #8a8a8a;
}