/* ==========================================================
   PAJS_ice – SALES LAYER (naložen PO style.css)
   Prodajno usmerjene sekcije + popravki za mobilne naprave.
   ========================================================== */

:root{
  --ink: #123a63;
  --ink-soft: #4a5f7a;
  --card: #ffffff;
  --line: rgba(18, 58, 99, 0.10);
  --ok: #1f9d63;
  --radius-lg: 28px;
  --radius-md: 18px;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  background: var(--ink);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.announce-track{
  display:flex; justify-content:center; gap: 2.2rem;
  padding: .5rem 1rem; white-space: nowrap;
}
.announce-track span{ display:inline-flex; align-items:center; gap:.45rem; opacity:.95 }
@media (max-width: 760px){
  .announce-track{ justify-content:flex-start; overflow:hidden; gap:2.4rem; }
  .announce-track > span{ animation: announceSlide 18s linear infinite; }
  @keyframes announceSlide{ from{ transform: translateX(0) } to{ transform: translateX(-100%) } }
}
@media (prefers-reduced-motion: reduce){
  .announce-track > span{ animation:none !important }
}

/* ---------- HERO ---------- */
.hero-sales .hero-title{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero-price{
  display:flex; align-items:baseline; gap:.6rem; margin: 1.1rem 0 1.2rem;
  color: var(--ink);
}
.hero-price .from{ font-size:.95rem; font-weight:600; opacity:.8 }
.hero-price .amount{ font-family:'Baloo 2', cursive; font-size: 2.1rem; font-weight:700; line-height:1 }
.hero-price .note{ font-size:.88rem; color: var(--ink-soft) }

.hero-sales .btn-primary{ font-size: 1.05rem; padding: .95rem 1.9rem; }

.trust-row{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.55rem .9rem; margin-top: 1.4rem; max-width: 470px;
}
.trust-row div{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color: var(--ink);
}
.trust-row svg{ flex: 0 0 20px; width:20px; height:20px; color: var(--pink-deep) }

/* ---------- SECTION HELPERS ---------- */
.section-pad{ padding: 4.5rem 0; }
.eyebrow{
  display:block; text-align:center; text-transform:uppercase;
  font-size:.78rem; font-weight:800; letter-spacing:.14em;
  color: var(--pink-deep); margin-bottom:.4rem;
}

/* ---------- FLAVOR CARD UPSELL ---------- */
.size-hint{
  font-size: .8rem; font-weight: 700; color: var(--ok);
  margin-top: -.2rem;
}
.size-btn .save-tag{
  display:inline-block; margin-left:.3rem; padding: 0 .4rem;
  border-radius: 999px; font-size:.7rem; background: #e6f7ee; color: var(--ok);
}

/* ---------- BUNDLE ---------- */
.bundle{
  margin-top: 2.6rem;
  background: linear-gradient(120deg, #fff 0%, #fff4f8 55%, #eef8ff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items:center;
  box-shadow: 0 18px 40px rgba(255, 150, 185, 0.18);
}
.bundle-photos{ display:flex; justify-content:center; }
.bundle-photos img{
  width: 34%; aspect-ratio:1; object-fit:cover; border-radius: 22px;
  border: 4px solid #fff; box-shadow: 0 10px 24px rgba(18,58,99,.15);
}
.bundle-photos img:nth-child(1){ transform: rotate(-7deg) translateX(14px); }
.bundle-photos img:nth-child(2){ transform: translateY(-10px); z-index:2; position:relative }
.bundle-photos img:nth-child(3){ transform: rotate(7deg) translateX(-14px); }
.bundle h3{
  font-family:'Baloo 2', cursive; font-size: 1.9rem; line-height:1.1; color: var(--ink); margin-bottom:.4rem;
}
.bundle p{ color: var(--ink-soft); margin-bottom: 1.1rem; }
.bundle-options{ display:flex; flex-wrap:wrap; gap:.7rem; }
.bundle-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.8rem 1.2rem; border-radius: 16px; cursor:pointer;
  border: 2px solid var(--ink); background:#fff; color: var(--ink);
  font: inherit; font-weight:700; transition: transform .12s, background .12s, color .12s;
}
.bundle-btn small{ font-weight:600; opacity:.75; font-size:.8rem }
.bundle-btn:hover{ transform: translateY(-2px); }
.bundle-btn.primary{ background: var(--ink); color:#fff; }
.bundle-btn.primary small{ opacity:.85 }

/* ---------- USE CASES ---------- */
.uses-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: 2rem;
}
.use-card{
  background: var(--card); border-radius: var(--radius-md); padding: 1.4rem 1.2rem;
  border: 1px solid var(--line);
}
.use-emoji{
  width: 52px; height:52px; border-radius: 16px; display:grid; place-items:center;
  font-size: 1.6rem; background: #fff0f5; margin-bottom: .8rem;
}
.use-card h3{ font-family:'Baloo 2', cursive; font-size:1.2rem; color: var(--ink); line-height:1.15; margin-bottom:.3rem }
.use-card p{ font-size:.92rem; color: var(--ink-soft); }

/* ---------- COMPARISON ---------- */
.compare-wrap{ max-width: 760px; margin: 2rem auto 0; }
.compare{
  width:100%; border-collapse: separate; border-spacing:0;
  background: var(--card); border-radius: var(--radius-md); overflow:hidden;
  border: 1px solid var(--line); font-size: .98rem;
}
.compare th, .compare td{ padding: .9rem 1.1rem; text-align:left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td{ border-bottom:none }
.compare thead th{ font-family:'Baloo 2', cursive; font-size:1.05rem; color: var(--ink); background:#fafbfd }
.compare thead th.us{ background: var(--ink); color:#fff }
.compare td.us{ background: #fff5f9; font-weight:700; color: var(--ink) }
.compare .yes{ color: var(--ok) }
.compare .no{ color: #b04a5f }

/* ---------- STEPS (how) – mobile fix ---------- */
@media (max-width: 760px){
  .how-grid{ grid-template-columns: 1fr !important; gap: .8rem !important; }
  .how-card{ text-align:left; display:grid; grid-template-columns: 52px 1fr; gap: .2rem .9rem; align-items:start; }
  .how-card .how-icon{ grid-row: span 2; margin:0 !important; }
  .why-grid{ grid-template-columns: 1fr !important; }
  .badge-list{ grid-template-columns: 1fr 1fr !important; }
  .uses-grid{ grid-template-columns: 1fr 1fr; }
  .bundle{ grid-template-columns: 1fr; padding: 1.5rem 1.2rem; text-align:center; }
  .bundle-options{ justify-content:center; }
  .section-pad{ padding: 3.2rem 0; }
  .trust-row{ grid-template-columns: 1fr 1fr; }
  .compare th, .compare td{ padding: .7rem .7rem; font-size:.9rem }
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  margin: 1rem auto 4rem;
  background: linear-gradient(120deg, var(--pink-main), var(--pink-deep));
  color:#fff; border-radius: var(--radius-lg);
  padding: 2.6rem 2rem; text-align:center;
  box-shadow: 0 18px 45px rgba(255, 107, 156, .35);
}
.final-cta h2{ font-family:'Baloo 2', cursive; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height:1.1; margin-bottom:.4rem }
.final-cta p{ opacity:.95; margin-bottom: 1.3rem }
.final-cta .btn-white{
  display:inline-block; background:#fff; color: var(--pink-deep);
  padding: .95rem 2rem; border-radius:999px; font-weight:800; font-size:1.05rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display:none; align-items:center; justify-content:space-between; gap:.8rem;
  background: var(--ink); color:#fff; border-radius: 18px;
  padding: .65rem .7rem .65rem 1.1rem;
  box-shadow: 0 14px 35px rgba(18,58,99,.35);
  transform: translateY(140%); transition: transform .25s ease;
}
.sticky-cta.show{ transform: translateY(0) }
.sticky-cta .s-txt{ font-size:.85rem; line-height:1.2 }
.sticky-cta .s-txt strong{ display:block; font-size:1rem }
.sticky-cta a{
  background: var(--pink-deep); color:#fff; font-weight:800;
  padding:.7rem 1.1rem; border-radius: 12px; white-space:nowrap;
}
@media (max-width: 760px){
  .sticky-cta{ display:flex; }
  body.has-sticky footer{ padding-bottom: 90px; }
}

/* ---------- CART NOTE ---------- */
.cart-ship-note{ font-size:.82rem; color: var(--ink-soft); margin: .2rem 0 .7rem; }

/* ---------- CHECKOUT TRUST ---------- */
.checkout-trust{
  display:grid; gap:.55rem; margin-top: 1rem; padding: 1rem; border-radius: 14px;
  background: #f6f9fc; border: 1px solid var(--line);
}
.checkout-trust div{ display:flex; gap:.55rem; align-items:center; font-size:.88rem; font-weight:600; color: var(--ink) }
.checkout-trust svg{ width:18px; height:18px; flex:0 0 18px; color: var(--ok) }

.promo-toggle{
  background:none; border:none; padding:0; margin: 12px 0 4px; cursor:pointer;
  color: var(--ink); font: inherit; font-size:.9rem; font-weight:700; text-decoration: underline;
}
.promo-section[hidden]{ display:none !important }

/* ---------- PRODUCT DETAIL (okusi.html) ---------- */
.okusi-intro{ text-align:center; padding: 3rem 0 .5rem; }
.okusi-intro h1{ font-family:'Baloo 2', cursive; color: var(--ink); font-size: clamp(2rem, 4vw, 2.8rem); line-height:1.1 }
.okusi-intro p{ color: var(--ink-soft); max-width: 560px; margin: .5rem auto 0 }
.okusi-jump{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top: 1.2rem }
.okusi-jump a{ padding:.5rem 1rem; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:700; color: var(--ink); font-size:.92rem }

/* ---------- MOBILE POLISH ---------- */
.hero-sales .hero-title span{ display:block; }
@media (max-width: 760px){
  .nav-cta{ display:none !important; }
  .logo-text{ font-size: 1.7rem; }
  .hero-sales .hero-image-wrap{ max-width: 280px; margin: 0 auto; }
  .hero-sales .hero-text{ text-align:left; }
  .hero-price{ margin: .8rem 0 1rem; }
  .use-card{ padding: 1.1rem 1rem; }
  .use-card p{ font-size:.86rem; }
}

/* ---------- PRODUCT DETAIL FOOTER FIX ---------- */
.product-detail-footer{ display:flex; flex-wrap:wrap; align-items:center; gap: .8rem 1rem; }
.product-detail-price{ white-space:nowrap; flex: 0 0 auto; }
.detail-size-selector .size-btn{ white-space:nowrap; padding-left:.9rem; padding-right:.9rem; }
.product-detail-footer .add-to-cart{ white-space:nowrap; }

/* ---------- CHECKOUT MOBILE OVERFLOW FIX ---------- */
#checkout-section .checkout-left,
#checkout-section .checkout-right,
#checkout-form, .checkout-card, .form-grid > *{ min-width: 0; max-width: 100%; }
.form-grid input, .form-grid textarea{ width:100%; max-width:100%; }
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr !important; }
  #checkout-section .checkout-layout{ grid-template-columns: minmax(0,1fr) !important; }
  .form-grid input{ font-size: 16px; } /* prepreči iOS zoom ob vnosu */
}

/* ---------- BUNDLE IMAGE + HERO IMAGE FIX ---------- */
.bundle-photos img{
  width: 100%; max-width: 380px; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transform:none !important; border:none;
  border-radius: 24px; box-shadow: 0 14px 30px rgba(18,58,99,.14);
}
.hero-bag{ height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
.bundle-eyebrow{ text-align:left; }
@media (max-width: 760px){ .bundle-eyebrow{ text-align:center; } }

/* ---------- BUNDLE BUTTONS: hover preklop barv ----------
   Privzeto je "mini" poudarjen (priporočen). Ko je miška nad katerimkoli
   gumbom, je temen samo ta gumb, drugi postane bel. */
.bundle-btn{ transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.bundle-btn:hover,
.bundle-btn:focus-visible{
  background: var(--ink); color:#fff; border-color: var(--ink);
}
.bundle-btn:hover small,
.bundle-btn:focus-visible small{ opacity:.85; }
.bundle-options:hover .bundle-btn.primary:not(:hover),
.bundle-options:focus-within .bundle-btn.primary:not(:focus-visible):not(:hover){
  background:#fff; color: var(--ink);
}
.bundle-btn:active{ transform: translateY(0) scale(.98); }

/* ---------- HERO GUMBA: enaka višina, centriran tekst ---------- */
.hero-buttons .btn-primary,
.hero-buttons .btn-ghost{
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.2; min-height: 3.25rem;
  padding-top: 0; padding-bottom: 0;
  font-size: 1.05rem; box-sizing: border-box;
}
.hero-buttons .btn-ghost{ padding-left: 1.8rem; padding-right: 1.8rem; font-weight: 700; }

/* ---------- VELIKOST 20 g / 60 g: hover preklop barv ----------
   Izbrana velikost je temna. Ko je miška nad drugo velikostjo, se barvi
   zamenjata (predogled izbire); klik velikost dejansko izbere. */
.size-btn{ transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .15s ease, box-shadow .2s ease; }
@media (hover: hover){
  .size-selector .size-btn:hover{
    background:#0c2e58; color:#fff; border-color:#0c2e58; opacity:1;
    box-shadow: 0 10px 24px rgba(12,46,88,0.30);
  }
  .size-selector:hover .size-btn.active:not(:hover){
    background: rgba(255,255,255,0.85); color:#0c2e58;
    border-color: rgba(12,46,88,0.25); box-shadow:none; opacity:.8;
  }
}
.size-btn:focus-visible{ outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.size-btn:hover .save-tag,
.size-btn.active .save-tag{ background: rgba(255,255,255,.18); color:#bff0d6; }
.size-selector:hover .size-btn.active:not(:hover) .save-tag{ background:#e6f7ee; color: var(--ok); }

/* ==========================================================
   KORAKI (Kako nastane) – vsak korak svoja barva in ikona
   ========================================================== */
.steps{
  list-style:none; margin: 2.2rem 0 0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem;
  position: relative; counter-reset: none;
}
.steps::before{ /* povezovalna črta med koraki */
  content:""; position:absolute; top: 46px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(18,58,99,.22) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step{
  position:relative; z-index:1; background:#fff; border-radius: 24px;
  padding: 1.6rem 1.5rem 1.7rem; border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(18,58,99,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(18,58,99,.10); }
.step-icon{
  width: 64px; height: 64px; border-radius: 20px; display:grid; place-items:center;
  margin-bottom: 1rem; background: var(--tile-bg); color: var(--tile-fg);
}
.step-icon svg{ width: 32px; height: 32px; }
.step-num{
  position:absolute; top: 1.3rem; right: 1.4rem;
  font-family:'Baloo 2', cursive; font-weight:700; font-size: 2.2rem; line-height:1;
  color: var(--tile-fg); opacity:.18;
}
.step-title{ font-family:'Baloo 2', cursive; font-size: 1.35rem; color: var(--ink); line-height:1.15; margin-bottom:.35rem; }
.step-text{ color: var(--ink-soft); font-size: .96rem; }
.step-freeze{ --tile-bg:#e3f1ff; --tile-fg:#2f7fd1; }
.step-vacuum{ --tile-bg:#dcf6f1; --tile-fg:#1c9a86; }
.step-crunch{ --tile-bg:#ffe4ee; --tile-fg:#e2457c; }

@media (max-width: 760px){
  .steps{ grid-template-columns: 1fr; gap: .9rem; }
  .steps::before{ top: 2rem; bottom: 2rem; left: calc(1.3rem + 27px); right:auto; width: 2px; height:auto;
    background: repeating-linear-gradient(180deg, rgba(18,58,99,.22) 0 8px, transparent 8px 16px); }
  .step{ display:grid; grid-template-columns: 54px 1fr; column-gap: 1rem; padding: 1.2rem 1.3rem; }
  .step-icon{ width:54px; height:54px; border-radius:16px; margin:0; grid-row: span 2; }
  .step-icon svg{ width:26px; height:26px; }
  .step-num{ top: 1rem; right: 1rem; font-size: 1.7rem; }
}

/* ==========================================================
   PRIMERJALNA TABELA – zelena kljukica = dobro, siv X = slabo
   ========================================================== */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.compare-wrap{ max-width: 820px; }
.compare{ border: none; box-shadow: 0 16px 40px rgba(18,58,99,.08); border-radius: 24px; }
.compare th, .compare td{ padding: 1rem 1.3rem; vertical-align: middle; }
.compare thead th{ font-size: 1.05rem; background:#fff; border-bottom: 1px solid var(--line); }
.compare thead th.them{ color: var(--ink-soft); font-weight:600; }
.compare thead th.us{
  background: var(--ink); color:#fff; border-radius: 0; position:relative;
}
.compare tbody th{ text-align:left; font-weight:700; color: var(--ink); font-size: .98rem; background:#fff; }
.compare td.them{ background:#fff; color: #7a8696; font-weight:500; }
.compare td.us{ background: #eefaf4; color: #14724a; font-weight:700; }
.compare tbody tr:nth-child(even) th,
.compare tbody tr:nth-child(even) td.them{ background:#fbfcfe; }
.compare tbody tr:nth-child(even) td.us{ background:#e4f6ec; }
.compare td{ white-space: nowrap; }
.compare td > span:not(.mark){ margin-left:.55rem; }
.mark{
  display:inline-grid; place-items:center; width: 26px; height: 26px; border-radius: 50%;
  vertical-align: middle; flex: 0 0 26px;
}
.mark svg{ width: 15px; height: 15px; }
.mark-yes{ background: #1f9d63; color:#fff; }
.mark-no{ background: #eceff3; color: #8a94a3; }
.mark-maybe{ background: #f3efe4; color: #a08a52; }

@media (max-width: 760px){
  .compare th, .compare td{ padding: .8rem .6rem; font-size: .85rem; }
  .compare td{ white-space: normal; }
  .compare td > span:not(.mark){ display:block; margin: .3rem 0 0; font-size:.8rem; }
  .compare tbody th{ font-size:.88rem; }
  .mark{ width:22px; height:22px; } .mark svg{ width:13px; height:13px; }
}