/* UQ / Karta produktu (hero) */
.uq-hero-produkt{display:grid;gap:26px;padding-top:26px;padding-bottom:40px}
/* Right column slightly wider than the media: long PL copy wraps less, so
   the whole buy stack gets shorter (fold budget) without shrinking type. */
@media(min-width:960px){.uq-hero-produkt{grid-template-columns:.95fr 1.05fr;gap:clamp(28px,3.4vw,56px);align-items:start}}

.uq-hp-main{aspect-ratio:1/1;position:relative;cursor:zoom-in}
/* Square (approved V6 look). A gentle cap keeps it sane on very tall
   viewports without squashing the ratio. */
@media(min-width:960px){.uq-hp-media{position:sticky;top:24px}.uq-hp-main{max-height:min(72vh,620px)}}
.uq-hp-zoom{position:absolute;right:14px;bottom:14px;width:40px;height:40px;display:flex;
	align-items:center;justify-content:center;border-radius:50%;
	background:color-mix(in srgb,var(--uq-paper),transparent 8%);color:var(--uq-ink);
	box-shadow:0 6px 18px -8px rgba(36,27,19,.55);pointer-events:none;transition:opacity .2s}
.uq-hp-main:hover .uq-hp-zoom{opacity:.85}
.uq-hp-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;margin-top:8px}
.uq-hp-thumbs .uq-figure{aspect-ratio:1/1;cursor:pointer;transition:outline-color .15s}
.uq-hp-thumbs .uq-figure.is-active{outline:2px solid var(--uq-ink);outline-offset:-2px}
.uq-hp-thumbs .uq-figure:hover{outline:2px solid var(--uq-line-strong);outline-offset:-2px}

/* Lightbox */
body.uq-lb-open{overflow:hidden}
.uq-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
	background:color-mix(in srgb,var(--uq-brown-deep),transparent 8%);padding:24px}
.uq-lb.is-open{display:flex}
.uq-lb-stage{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.uq-lb-stage img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:6px;
	box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.uq-lb-counter{font-family:var(--uq-font-mono);font-size:.8rem;letter-spacing:.14em;color:var(--uq-cream)}
/* Icon buttons: SVG marks centred by flex. No font metrics involved, so the
   arrows sit exactly in the middle of the circle at any size. */
.uq-lb-close,.uq-lb-nav{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.uq-lb-close svg,.uq-lb-nav svg{display:block}
.uq-lb-close{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;cursor:pointer;
	background:transparent;color:var(--uq-cream)}
.uq-lb-close svg{width:24px;height:24px}
.uq-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:0;cursor:pointer;
	background:color-mix(in srgb,var(--uq-paper),transparent 82%);color:var(--uq-cream);
	border-radius:50%;transition:background .15s}
.uq-lb-nav svg{width:26px;height:26px}
.uq-lb-nav:hover{background:color-mix(in srgb,var(--uq-paper),transparent 68%)}
.uq-lb-prev{left:20px}.uq-lb-next{right:20px}
@media(max-width:640px){.uq-lb-nav{width:44px;height:44px}.uq-lb-nav svg{width:22px;height:22px}.uq-lb-prev{left:8px}.uq-lb-next{right:8px}}

.uq-hp-info{max-width:620px}
.uq-hp-rating{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;margin-bottom:8px;text-decoration:none;color:var(--uq-ink-soft)}
.uq-hp-rating .uq-stars{color:var(--uq-cta)}
.uq-hp-rating-num{font-weight:700;color:var(--uq-ink)}
.uq-hp-rating-count{text-decoration:underline;text-underline-offset:3px}
.uq-hp-rating:hover .uq-hp-rating-count{color:var(--uq-ink)}
/* Compact display size: the name should read in ~one line, not dominate
   the fold budget (best-practice buy box: title small, CTA prominent). */
.uq-hp-name{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.18;margin:0}
.uq-hp-sub{font-size:1.04rem;color:var(--uq-ink-soft);margin:14px 0 24px}

.uq-hp-benefits{list-style:none;margin:0 0 28px;padding:0}
.uq-hp-benefits li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:var(--uq-dash);font-size:.96rem}
.uq-hp-benefits li:first-child{border-top:var(--uq-dash)}
.uq-hp-benefits .uq-ic{color:var(--uq-ok);margin-top:.22em}

/* Price block: ONE loud element (the price, display face), everything else
   steps down - old price quiet body text, discount a small CTA chip, the
   Omnibus line real fine print. Mono everywhere read like a receipt. */
.uq-hp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.uq-hp-price-now{font-family:var(--uq-font-display);font-size:2.05rem;font-weight:700;letter-spacing:-.01em;color:var(--uq-ink)}
.uq-hp-price-old{font-family:var(--uq-font-body);font-size:1rem;color:var(--uq-ink-soft);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--uq-cta) 60%,transparent)}
.uq-hp-price-save{font-family:var(--uq-font-body);background:var(--uq-cta-deep);color:#fff;font-weight:700;font-size:.74rem;letter-spacing:.04em;padding:4px 9px;border-radius:3px;align-self:center}
.uq-hp-omnibus{font-family:var(--uq-font-mono);font-size:.63rem;color:color-mix(in srgb,var(--uq-ink-soft),var(--uq-cream) 25%);margin:5px 0 0}

.uq-hp-variants p{font-family:var(--uq-font-mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--uq-brown);margin:0 0 10px}
.uq-hp-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.uq-hp-chip{border:1px solid var(--uq-line);background:var(--uq-paper);padding:11px 18px;font-family:var(--uq-font-mono);font-size:.78rem;border-radius:var(--uq-r)}
.uq-hp-chip.is-on{border-color:var(--uq-line-strong);outline:1px solid var(--uq-line-strong);outline-offset:-2px;background:var(--uq-cream);font-weight:500}

.uq-hp-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;margin-top:12px;color:var(--uq-ink-soft)}
.uq-hp-note .uq-ic{color:var(--uq-ok)}
.uq-hp-note b{color:var(--uq-ink);font-weight:600}

.uq-hp-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}
@media(min-width:540px){.uq-hp-badges{grid-template-columns:repeat(4,1fr)}}
.uq-hp-badge{display:flex;flex-direction:column;justify-content:center;border:var(--uq-dash);border-radius:var(--uq-r);padding:12px 8px;text-align:center;font-size:.72rem;line-height:1.38;color:var(--uq-ink-soft)}
.uq-hp-badge .uq-ic{width:1.8em;height:1.8em;color:var(--uq-brown);display:block;margin:0 auto 6px}
.uq-hp-badge b{display:block;color:var(--uq-ink);font-weight:600;font-size:.82rem}

/* Woo price markup normalization inside our card */
.uq-hp-price .woocommerce-Price-amount{font:inherit;color:inherit}

/* --- native product hero additions (content-single-product.php) --- */
.uq-hp-shortdesc p{font-size:.98rem;color:var(--uq-ink-soft);margin:10px 0 14px}
.uq-hp-shortdesc ul{list-style:none;margin:0 0 20px;padding:0}
.uq-hp-shortdesc ul li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:var(--uq-dash);font-size:.95rem;line-height:1.45}
.uq-hp-shortdesc ul li:first-child{border-top:var(--uq-dash)}
.uq-hp-shortdesc ul li::before{content:"\2713";color:var(--uq-ok);font-weight:800;flex:none}
.uq-hp-shortdesc strong,.uq-hp-shortdesc b{font-weight:600}

.uq-hp-cart form.cart{display:flex;gap:12px;margin:14px 0 0}
/* With offer packs active the pack IS the quantity choice - a second qty
   spinner next to the CTA is redundant noise, so it is hidden and the
   button takes the full row (the input stays in the DOM for the AJAX post). */
.uq-hp-info:has(.uq-offers) .uq-hp-cart .quantity{display:none}
.uq-hp-cart .quantity{display:inline-flex;border:1px solid var(--uq-line);border-radius:var(--uq-r);overflow:hidden;flex:none}
.uq-hp-cart .quantity .qty{width:64px;border:0;background:var(--uq-paper);text-align:center;font-family:var(--uq-font-mono);font-size:1rem;padding:0}
.uq-hp-cart form.cart .button{flex:1;display:flex;align-items:center;justify-content:center;gap:.55em;background:var(--uq-cta);color:#fff;border:1px solid var(--uq-cta);border-radius:var(--uq-r);padding:17px 24px;font-family:var(--uq-font-body);font-size:.95rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .15s ease}
.uq-hp-cart form.cart .button .uq-ic{width:1.3em;height:1.3em}
.uq-hp-cart form.cart .button:hover{background:var(--uq-cta-hover);border-color:var(--uq-cta-hover)}
.uq-hp-main img,.uq-hp-thumbs img{width:100%;height:100%;object-fit:cover}

/* v6 parity fixes */
.uq-hp-name{margin:0}
.uq-hp-note{align-items:flex-start}
.uq-hp-note .uq-ic{margin-top:.18em}
.uq-hp-note span{flex:1;min-width:0}

/* --- section jump nav (micro-menu): tab bar, sticky under the header --- */
html{scroll-behavior:smooth}
.uq-secnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--uq-cta) 9%,var(--uq-paper));border-top:1px solid var(--uq-line);border-bottom:1px solid color-mix(in srgb,var(--uq-cta) 30%,var(--uq-line));box-shadow:0 3px 10px color-mix(in srgb,var(--uq-ink) 8%,transparent)}
.uq-secnav-in{display:flex;align-items:stretch;gap:0}
.uq-secnav-track{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:center;gap:4px 5px;padding:8px 0}
.uq-secnav-link{flex:none;white-space:nowrap;font-family:var(--uq-font-body);font-size:.78rem;font-weight:600;color:var(--uq-ink-soft);padding:6px 11px;border-bottom:2px solid transparent;text-decoration:none;transition:color .15s ease,border-color .15s ease}
.uq-secnav-link:hover{color:var(--uq-ink)}
.uq-secnav-link.is-active{color:var(--uq-cta);border-bottom-color:var(--uq-cta)}
/* primary CTA: its own column on the right, a rounded pill that rises a few
   px above and below the bar so it pops out and grabs attention */
.uq-secnav-buy{flex:none;position:relative;z-index:1;display:flex;align-items:center;gap:.5em;align-self:stretch;margin:-5px 0 -5px 16px;padding:0 22px;background:var(--uq-cta);color:#fff;font-family:var(--uq-font-body);font-weight:700;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;border-radius:var(--uq-r);box-shadow:0 2px 9px color-mix(in srgb,var(--uq-cta) 38%,transparent);transition:background .15s ease,box-shadow .15s ease}
.uq-secnav-buy .uq-ic{width:1.3em;height:1.3em}
.uq-secnav-buy:hover{background:var(--uq-cta-deep);color:#fff;box-shadow:0 3px 13px color-mix(in srgb,var(--uq-cta) 48%,transparent)}
/* Mobile: drop the sticky section jump-nav entirely. On a phone people scroll
   linearly and the sticky bottom bar is the CTA, so the top menu only got in
   the way. Desktop keeps the full wrapping nav + buy button. */
@media(max-width:768px){
	.uq-secnav{display:none}
}
/* anchor targets clear the sticky header + nav */
.uq-product-page .uq-section{scroll-margin-top:var(--uq-anchor-offset,110px)}

/* --- reviews section --- */
.uq-reviews-avg{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.95rem;color:var(--uq-ink-soft)}
.uq-reviews-avg .uq-stars{color:var(--uq-cta)}
.uq-reviews-avg b{color:var(--uq-ink)}
.uq-reviews-grid{display:grid;gap:16px;margin-top:6px;grid-template-columns:1fr}
@media(min-width:560px){.uq-reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.uq-reviews-grid{grid-template-columns:repeat(4,1fr)}}
.uq-review.is-hidden{display:none}

/* Load-more chevron: a pill that reveals the next batch of reviews; the arrow
   flips once every review is shown so the same control collapses back. */
.uq-reviews-more{display:flex;justify-content:center;margin-top:28px}
.uq-reviews-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
	font-family:var(--uq-font-body);font-weight:600;font-size:.92rem;color:var(--uq-ink);
	background:var(--uq-paper);border:1px solid var(--uq-line-strong);border-radius:999px;
	padding:12px 22px;transition:background .15s,color .15s}
.uq-reviews-toggle:hover{background:var(--uq-ink);color:var(--uq-cream)}
.uq-reviews-chevron{width:18px;height:18px;transition:transform .25s ease}
.uq-reviews-toggle.is-expanded .uq-reviews-chevron{transform:rotate(180deg)}
.uq-review{border:1px solid var(--uq-line);border-radius:var(--uq-r);background:var(--uq-cream);padding:20px;display:flex;flex-direction:column}
.uq-review-stars{display:inline-flex;gap:2px;margin-bottom:10px}
.uq-review-stars svg{width:15px;height:15px;fill:var(--uq-line);stroke:none}
.uq-review-stars svg.is-on{fill:var(--uq-cta)}
.uq-review-text{font-size:.94rem;line-height:1.5;margin:0 0 14px;flex:1}
.uq-review-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.uq-review-author{font-weight:700;font-size:.9rem}
.uq-review-verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--uq-ok)}
.uq-review-verified .uq-ic{width:1.1em;height:1.1em}
.uq-review-unverified{font-family:var(--uq-font-mono);font-size:.64rem;color:var(--uq-ink-soft);text-transform:uppercase;letter-spacing:.06em}

/* payment badge: real BLIK + HotPay logos instead of an icon */
/* Payment marks stacked and enlarged: they carry the "you can actually pay
   with this" message, so they must read at a glance, not hide as 16px slivers. */
/* Logos side by side keep the payment tile as short as the delivery tiles, so
   it no longer forces an oversized row height (and empty space) on the others.
   They wrap to a stack only if the tile gets very narrow. */
.uq-hp-badge--pay .uq-pay-logos{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:8px 10px;margin:0 auto 6px}
.uq-hp-badge--pay .uq-pay-logos img{height:20px;width:auto;max-width:100%;object-fit:contain}
/* BLIK is a chunky near-square mark, so at a shared height it reads far smaller
   than the wide HotPay wordmark - give it its own slightly taller size. */
.uq-hp-badge--pay .uq-pay-logos img[alt="BLIK"]{height:28px}

/* Hero mini-FAQ: same smooth slide as the main FAQ - grid-rows 0fr->1fr driven
   by .is-open (uq-faq.js keeps <details> open until the close transition ends,
   so it never snaps). Two-level: outer animates rows, inner clips + holds copy;
   bottom gap rides on a margin so the collapsed row still floors at zero. */
.uq-hp-faq{margin:20px 0 4px;border-top:var(--uq-dash)}
.uq-hp-faq-item{border-bottom:var(--uq-dash)}
.uq-hp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;font-weight:600;font-size:.95rem;color:var(--uq-ink);user-select:none}
.uq-hp-faq-item summary::-webkit-details-marker{display:none}
.uq-hp-faq-ico{position:relative;flex:none;width:16px;height:16px}
.uq-hp-faq-ico::before,.uq-hp-faq-ico::after{content:"";position:absolute;background:var(--uq-brown);transition:transform .34s cubic-bezier(.4,0,.2,1)}
.uq-hp-faq-ico::before{top:7px;left:1px;width:14px;height:2px}
.uq-hp-faq-ico::after{top:1px;left:7px;width:2px;height:14px}
.uq-hp-faq-item.is-open .uq-hp-faq-ico::after{transform:scaleY(0)}
.uq-hp-faq-item > .uq-hp-faq-a{display:grid;grid-template-rows:0fr;opacity:0;contain:layout paint;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1),opacity .22s linear}
.uq-hp-faq-item.is-open > .uq-hp-faq-a{grid-template-rows:1fr;opacity:1}
.uq-hp-faq-a-in{overflow:hidden;min-height:0}
.uq-hp-faq-a-in p{margin:0 0 16px;color:var(--uq-ink-soft);font-size:.9rem;line-height:1.55}
@media(prefers-reduced-motion:reduce){
	.uq-hp-faq-item > .uq-hp-faq-a,.uq-hp-faq-ico::before,.uq-hp-faq-ico::after{transition-duration:.01ms}
}

/* Social-proof strip under the hero: real rating + short honest quotes. */
.uq-social-strip{background:var(--uq-paper);border-top:var(--uq-dash);border-bottom:var(--uq-dash)}
.uq-social-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;padding-top:20px;padding-bottom:20px}
.uq-social-score{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:none}
.uq-social-score .uq-stars{color:var(--uq-cta)}
.uq-social-score b{font-family:var(--uq-font-display);font-size:1.5rem;line-height:1;color:var(--uq-ink)}
.uq-social-score span{font-size:.74rem;color:var(--uq-ink-soft);font-family:var(--uq-font-mono);letter-spacing:.06em}
.uq-social-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.uq-social-quotes li{border-left:2px solid var(--uq-line);padding-left:14px}
.uq-social-quotes .uq-stars--sm{display:inline-flex;gap:1px;color:var(--uq-cta)}
.uq-social-quotes .uq-stars--sm svg{width:12px;height:12px;fill:currentColor}
.uq-social-quotes p{margin:5px 0 6px;font-size:.9rem;line-height:1.45;color:var(--uq-ink)}
.uq-social-quotes footer{font-size:.7rem;color:var(--uq-ink-soft);font-family:var(--uq-font-mono);letter-spacing:.04em}
.uq-social-quotes footer em{font-style:normal;opacity:.8}
@media(max-width:900px){
	.uq-social-in{grid-template-columns:1fr;gap:16px}
	.uq-social-quotes{grid-template-columns:1fr;gap:14px}
	.uq-social-quotes li:nth-child(3){display:none}
}