/* Bannery na úvodnej stránke (js/banners.js) – rovnaké v obchode aj v náhľade administrácie.
   Rozmery v cqw (% šírky bannera): banner sa zmenšuje ako obrázok; úzky banner (mobil) má vlastné rozloženie. */
.bnr { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; container-type: size; text-decoration: none !important; color: inherit; -webkit-tap-highlight-color: transparent; }
.bnr-i picture, .bnr-i img { display: block; width: 100%; height: 100%; }
.bnr-i img { object-fit: cover; object-position: left center; }
.bnr-i.mob img { object-position: center; }   /* vlastný mobilný obrázok – stred, bez mobilného ľavá časť s textom */
@media (max-width: 640px) { .bnr-i.has-mob img { object-position: center; } }

/* ---------- témy: výrazné (predvolené) a svetlé ---------- */
.bnr-c { --bg: linear-gradient(120deg, #18b84c 0%, #0f9440 55%, #0a6e2f 100%); --h: #fff; --ink: rgba(255, 255, 255, .9); --kick-bg: rgba(255, 255, 255, .18); --kick-ink: #fff;
  --btn: #16202e; --btn-ink: #fff; --chip: rgba(255, 255, 255, .16); --chip-ink: #fff; --glow: rgba(255, 255, 255, .11); --glow2: rgba(0, 0, 0, .1); --badge: #e5383b; }
.bnr-navy { --bg: linear-gradient(120deg, #2d5b98 0%, #1d3a66 58%, #13264a 100%); }
.bnr-red { --bg: linear-gradient(120deg, #f04848 0%, #d32f33 55%, #9b1c1f 100%); --badge: #16202e; }
.bnr-purple { --bg: linear-gradient(120deg, #8d63ff 0%, #6a46e3 55%, #4a2db0 100%); }
.bnr-night { --bg: radial-gradient(circle at 82% 28%, rgba(34, 197, 94, .35), transparent 46%), linear-gradient(120deg, #0f172a 0%, #172238 60%, #0d2a1c 100%);
  --kick-bg: rgba(250, 204, 21, .16); --kick-ink: #facc15; --btn: #22c55e; --btn-ink: #062b14; --glow: rgba(34, 197, 94, .1); }
.bnr-color { --bg: linear-gradient(120deg, var(--c) 0%, color-mix(in srgb, var(--c) 68%, #000) 100%); }
/* svetlé (štýl doterajších bannerov zo Shoptetu) */
.bnr-light { --h: #0b4f2a; --ink: #2f5a41; --kick-bg: #fff; --kick-ink: #0b7a3e; --btn: #0fb441; --btn-ink: #fff; --chip: #0fb441; --chip-ink: #fff; --glow: rgba(255, 255, 255, .6); --glow2: rgba(255, 255, 255, .35); }
.bnr-fresh { --bg: linear-gradient(110deg, #f2fff5 0%, #c8f3d2 50%, #d4f57d 100%); }
.bnr-mint { --bg: linear-gradient(110deg, #effaff 0%, #c9edf4 50%, #c2f2d3 100%); --h: #0a4258; --ink: #285566; --kick-ink: #0a6b54; --btn: #0e9f6e; --chip: #0e9f6e; }
.bnr-sun { --bg: linear-gradient(110deg, #fffbea 0%, #ffe9a6 50%, #ffc977 100%); --h: #5a2d00; --ink: #6b4510; --kick-ink: #c2410c; --btn: #e8590c; --chip: #f08c00; }
.bnr-berry { --bg: linear-gradient(110deg, #fff4fb 0%, #ffd8ec 52%, #e8d6ff 100%); --h: #5b0f45; --ink: #6d2a5a; --kick-ink: #a61e4d; --btn: #c2255c; --chip: #c2255c; }

/* ---------- rozloženie (počítač): text vľavo, veľký panel s produktom vpravo ---------- */
.bnr-c { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 4cqw; align-items: center; padding: 0 4.6cqw 0 5.8cqw; overflow: hidden;
  background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
.bnr-c::before, .bnr-c::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.bnr-c::before { width: 64cqw; height: 64cqw; right: -16cqw; top: -30cqw; background: var(--glow); }
.bnr-c::after { width: 36cqw; height: 36cqw; left: -14cqw; bottom: -20cqw; background: var(--glow2); }
.bnr-c.no-art { grid-template-columns: 1fr; }
.bnr-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bnr-kick { background: var(--kick-bg); color: var(--kick-ink); font-weight: 700; font-size: 1.3cqw; padding: .55cqw 1.35cqw; border-radius: 99px; margin-bottom: 1.8cqw; }
.bnr-h { font-family: Nunito, Inter, system-ui, sans-serif; font-weight: 900; font-size: 4.9cqw; line-height: 1.07; letter-spacing: -.02em; color: var(--h); margin-bottom: 1.5cqw;
  text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bnr-c.len-l .bnr-h { font-size: 4.3cqw; }
.bnr-c.len-xl .bnr-h { font-size: 3.7cqw; }
.bnr-p { font-size: 1.65cqw; line-height: 1.5; color: var(--ink); margin-bottom: 2.4cqw; max-width: 42cqw; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bnr-tags { display: flex; flex-wrap: wrap; gap: .8cqw; margin: -.6cqw 0 2.4cqw; max-width: 44cqw; }
.bnr-tags span { background: var(--chip); color: var(--chip-ink); font-weight: 700; font-size: 1.25cqw; padding: .5cqw 1.2cqw; border-radius: 99px; }
.bnr-cta { display: flex; align-items: center; gap: 1.6cqw; }
.bnr-price, .bnr-code { display: flex; flex-direction: column; justify-content: center; background: #fff; color: #16202e; border-radius: 1.3cqw; padding: .9cqw 1.9cqw; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .14);
  font-family: Nunito, Inter, sans-serif; font-weight: 900; font-size: 3cqw; line-height: 1; min-height: 5.6cqw; box-sizing: border-box; }
.bnr-price s { font-family: Inter, sans-serif; font-size: 1.1cqw; font-weight: 600; color: #98a2b3; margin-bottom: .25cqw; }
.bnr-code { font: 900 2.4cqw/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; border: .25cqw dashed #16a34a; }
.bnr-code small { font: 700 .95cqw Inter, sans-serif; color: #98a2b3; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35cqw; }
.bnr-btn { display: inline-flex; align-items: center; gap: .9cqw; background: var(--btn); color: var(--btn-ink); font-weight: 800; font-size: 1.6cqw; min-height: 5.6cqw; box-sizing: border-box;
  padding: 0 2.4cqw; border-radius: 1.3cqw; white-space: nowrap; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .16); transition: filter .15s, transform .15s; }
.bnr-btn svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
a.bnr:hover .bnr-btn { filter: brightness(1.12); }
a.bnr:hover .bnr-btn svg { transform: translateX(.3cqw); }

.bnr-art { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; }
.bnr-card { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.42; max-height: 74cqh; background: #fff; border-radius: 2.2cqw; padding: 2.4cqw; box-sizing: border-box;
  box-shadow: 0 2cqw 4.5cqw rgba(0, 0, 0, .22); }
.bnr-card img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.bnr-card.multi { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2cqw; padding: 1.6cqw; }
.bnr-card.multi > .m { display: grid; place-items: center; min-height: 0; background: #f6f8fa; border-radius: 1.3cqw; padding: 1.2cqw; overflow: hidden; }
.bnr-card.multi > .m0 { grid-row: span 2; background: #fff; }
.bnr-card.multi.two { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.bnr-card.multi.two > .m0 { grid-row: auto; }
.bnr-glyph { display: grid; place-items: center; width: 100%; aspect-ratio: 1.42; max-height: 74cqh; border-radius: 2.2cqw; background: rgba(255, 255, 255, .12); border: .2cqw solid rgba(255, 255, 255, .22); box-sizing: border-box; }
.bnr-glyph svg { width: 34%; height: auto; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .18)); }
.bnr-light .bnr-glyph { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
.bnr-light .bnr-glyph svg { stroke: var(--btn); }
.bnr-own { max-width: 100%; max-height: 82cqh; object-fit: contain; filter: drop-shadow(0 2cqw 2.4cqw rgba(0, 0, 0, .25)); }
.bnr-badge { position: absolute; z-index: 3; top: -1.6cqw; right: -1.6cqw; background: var(--badge); color: #fff; font: 900 2.1cqw/1 Nunito, Inter, sans-serif; padding: 1cqw 1.6cqw; border-radius: 99px;
  transform: rotate(5deg); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .25); white-space: nowrap; }
.bnr-badge small { font: 700 1.1cqw Inter, sans-serif; margin-right: .4cqw; opacity: .9; }

/* ---------- úzky banner (mobil): text hore, tlačidlo dole, produkt vpravo dole ---------- */
@container (max-width: 560px) {
  .bnr-c, .bnr-c.no-art { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 6cqw; }
  .bnr-c::before { width: 90cqw; height: 90cqw; right: -40cqw; top: -46cqw; }
  .bnr-txt { position: static; }
  .bnr-txt > :not(.bnr-cta) { position: relative; z-index: 2; }
  .bnr-kick { font-size: 3cqw; padding: 1cqw 2.6cqw; margin-bottom: 2.6cqw; }
  .bnr-h { font-size: 7.6cqw; max-width: 96%; margin-bottom: 2cqw; text-wrap: wrap; }
  .bnr-c.len-l .bnr-h { font-size: 6.6cqw; }
  .bnr-c.len-xl .bnr-h { font-size: 5.7cqw; }
  .bnr-p { font-size: 3.3cqw; max-width: 54%; margin-bottom: 0; -webkit-line-clamp: 2; }
  .bnr-c.len-xl .bnr-p { display: none; }
  .bnr-c.no-art .bnr-p { max-width: 92%; display: -webkit-box; }
  .bnr-tags { display: none; }
  .bnr-cta { position: absolute; z-index: 3; left: 6cqw; bottom: 6cqw; gap: 2.4cqw; }
  .bnr-price, .bnr-code { font-size: 5.4cqw; padding: 1.6cqw 3cqw; border-radius: 2.4cqw; min-height: 10.4cqw; }
  .bnr-price s { display: none; }
  .bnr-code { font-size: 4.2cqw; border-width: .5cqw; } .bnr-code small { font-size: 1.9cqw; }
  .bnr-btn { font-size: 3.4cqw; padding: 0 4cqw; border-radius: 2.4cqw; min-height: 10.4cqw; gap: 1.6cqw; }
  .bnr-btn svg { width: 3.4cqw; height: 3.4cqw; }
  /* s cenou je na mobile tlačidlo len okrúhla šípka (klikne sa aj tak na celý banner) – nezasahuje do obrázka */
  .bnr-cta:not(.solo) .bnr-btn { width: 10.4cqw; padding: 0; justify-content: center; border-radius: 50%; }
  .bnr-cta:not(.solo) .bnr-bt { display: none; }
  .bnr-cta:not(.solo) .bnr-btn svg { width: 4.4cqw; height: 4.4cqw; }
  .bnr-art { position: absolute; right: 5cqw; bottom: 6cqw; width: 36%; height: auto; }
  .bnr-card, .bnr-glyph { aspect-ratio: 1.1; border-radius: 3cqw; padding: 2.2cqw; max-height: none; }
  .bnr-glyph svg { width: 46%; }
  .bnr-card.multi { gap: 1.4cqw; padding: 1.6cqw; }
  .bnr-card.multi > .m { border-radius: 2cqw; padding: 1cqw; }
  .bnr-own { max-height: 46cqh; }
  .bnr-badge { font-size: 3.6cqw; padding: 1.4cqw 2.4cqw; top: -3cqw; right: -2cqw; } .bnr-badge small { font-size: 2cqw; }
}

/* staršie prehliadače bez jednotiek kontajnera (iOS 15): pevné veľkosti */
@supports not (width: 1cqw) {
  .bnr-c { padding: 0 40px 0 50px; }
  .bnr-kick { font-size: 12px; padding: 5px 12px; margin-bottom: 14px; }
  .bnr-h { font-size: 40px; margin-bottom: 12px; } .bnr-c.len-l .bnr-h { font-size: 36px; } .bnr-c.len-xl .bnr-h { font-size: 31px; }
  .bnr-p { font-size: 14px; margin-bottom: 18px; max-width: 380px; }
  .bnr-tags span { font-size: 12px; padding: 4px 10px; }
  .bnr-cta { gap: 12px; }
  .bnr-price, .bnr-code { font-size: 26px; padding: 8px 16px; border-radius: 12px; min-height: 50px; } .bnr-price s { font-size: 10px; }
  .bnr-code { font-size: 20px; } .bnr-code small { font-size: 9px; }
  .bnr-btn { font-size: 14px; padding: 0 20px; border-radius: 12px; min-height: 50px; } .bnr-btn svg { width: 15px; height: 15px; }
  .bnr-card { border-radius: 18px; padding: 20px; max-height: 290px; }
  .bnr-badge { font-size: 18px; padding: 8px 14px; top: -12px; right: -12px; } .bnr-badge small { font-size: 10px; }
  @media (max-width: 640px) {
    .bnr-c { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 22px; }
    .bnr-txt { position: static; }
    .bnr-h { font-size: 26px; } .bnr-c.len-l .bnr-h, .bnr-c.len-xl .bnr-h { font-size: 22px; }
    .bnr-p { font-size: 13px; max-width: 54%; } .bnr-tags { display: none; }
    .bnr-cta { position: absolute; left: 22px; bottom: 22px; } .bnr-price s { display: none; }
    .bnr-art { position: absolute; right: 18px; bottom: 22px; width: 36%; height: auto; }
    .bnr-card { aspect-ratio: 1.1; padding: 8px; }
  }
}