/*
  eDoktor stranica proizvoda v2 - raspored nad trg.css (trgovina-v2) i NextSaaS main.css.
  Prefiks pv-. Boje i komponente (gumb, oznake, planovi, FAQ, kartice proizvoda) dolaze iz trg.css.
*/
.pv-prekidac { max-width: 1290px; margin: 14px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--trg-g5); }
.pv-prekidac a { padding: 6px 14px; border-radius: 999px; border: 1px dashed #c8d3e1; color: var(--trg-g7); font-weight: 600; }
.pv-prekidac a.is-akt { background: var(--trg-ink); border-color: var(--trg-ink); color: #fff; }

.pv-hero { padding-top: 28px; padding-bottom: 56px; margin-top: 12px; }
.pv-put { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--trg-g5); margin-bottom: 26px; }
.pv-put a { color: var(--trg-g7); }
.pv-put a:hover { color: var(--trg-bl); }
.pv-put > span:last-child { color: var(--trg-ink); font-weight: 600; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }

/* galerija */
.pv-glavna { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 30% 10%, #fff 0%, #eaf1fe 55%, #e8f8f1 100%); border: 1px solid #e3ebf5; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 70px -40px rgba(15, 23, 42, .45); }
.pv-glavna img { display: block; }
.pv-glavna img.is-naslovnica { width: 100%; height: 100%; object-fit: cover; }
.pv-glavna img.is-ekran { height: 88%; width: auto; border-radius: 30px; border: 7px solid #0f172a; box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .55); background: #fff; }
.pv-slicice { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; margin-top: 14px; }
.pv-sl { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; border: 2px solid transparent; background: #fff; padding: 0; cursor: pointer; transition: border-color .2s, transform .2s; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .3); }
.pv-sl img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pv-sl:hover { transform: translateY(-2px); }
.pv-sl.is-akt { border-color: #14b8a6; }
.pv-sl:focus-visible { outline: 3px solid rgba(37, 99, 235, .4); outline-offset: 2px; }

/* ogledni nalaz (analiza) */
.pv-glavna--nalaz { padding: 28px; }
.pv-nalaz { width: 100%; max-width: 440px; background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 24px 50px -28px rgba(15, 23, 42, .45); }
.pv-nalaz-vrh { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; color: var(--trg-ink) !important; }
.pv-nalaz-vrh span { font-size: 12px; color: var(--trg-g5); }
.pv-nalaz-sk { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--trg-tq) !important; margin: 12px 0 6px; }
.pv-nalaz-red { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--trg-bg); border-radius: 12px; margin-bottom: 6px; font-size: 13.5px; color: var(--trg-ink); }
.pv-nalaz-red small { display: block; font-size: 11.5px; color: var(--trg-g5); }
.pv-nalaz-red b { font-weight: 600; white-space: nowrap; font-size: 13px; }
.pv-st { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pv-st--ok { background: var(--trg-zl); color: var(--trg-tq); }
.pv-st--gore { background: #fff1e6; color: #9a3412; }
.pv-st--dolje { background: var(--trg-pl); color: var(--trg-bl); }
.pv-nalaz-zn { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f3fbf9; border: 1px solid #c6ebe4; font-size: 13.5px; line-height: 1.5; color: var(--trg-g7); }
.pv-nalaz-zn b { display: block; color: var(--trg-ink); margin-bottom: 2px; }
.pv-nalaz-noga { font-size: 11.5px; margin: 10px 0 0; }

/* kupnja */
.pv-oznake { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pv-h1 { font-size: 46px !important; line-height: 1.08 !important; font-weight: 500 !important; letter-spacing: -0.035em !important; margin: 0 0 14px; }
.pv-h1 .hl { display: block; font-size: .62em; line-height: 1.2; margin-top: 6px; }
.pv-uvod { font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.pv-tocke { margin-bottom: 24px; }
.pv-okvir { background: #fff; border: 1px solid #e3ebf5; border-radius: 24px; padding: 22px; box-shadow: 0 24px 60px -40px rgba(15, 23, 42, .45); }
.pv-planovi { margin-bottom: 16px; }
.pv-planovi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-planovi--4 .trg-plan { flex-wrap: wrap; }
.pv-planovi .trg-plan-ime small { display: block; font-size: 12px; font-weight: 500; color: var(--trg-g5); }
.pv-planovi .trg-plan b small { font-size: 12px; font-weight: 500; color: var(--trg-g5); }
.pv-zn-p { display: inline-flex; align-items: center; gap: 4px; background: #fdf2f8 !important; color: #9d174d !important; }
.pv-drugi { margin-top: 10px; }
.pv-napomena { font-size: 13px; line-height: 1.55; margin: 12px 0 0; }
.pv-povjerenje { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--trg-line); font-size: 12.5px; color: var(--trg-g5); }
.pv-povjerenje span { display: inline-flex; align-items: center; gap: 6px; }
.pv-povjerenje svg { color: #0d9488; }

/* znacajke */
.pv-cetiri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pv-znac, .pv-zakoga, .pv-korak { border-radius: 22px; padding: 28px 24px; }
.pv-znac--a { background: var(--trg-pl); }
.pv-znac--b { background: var(--trg-zl); }
.pv-znac--c { background: #f1f4f9; }
.pv-znac-ico { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; color: var(--trg-tq); margin-bottom: 18px; box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .4); }
.pv-znac--a .pv-znac-ico { color: var(--trg-bl); }
.pv-znac-n { font-size: 19px !important; line-height: 1.3 !important; font-weight: 600 !important; margin: 0 0 8px; }
.pv-znac p, .pv-zakoga p, .pv-korak p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* telefoni */
.pv-telefoni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1000px; margin: 0 auto; }
.pv-tel-f { margin: 0; text-align: center; }
.pv-tel { max-width: 270px; margin: 0 auto; border: 8px solid #0f172a; border-radius: 36px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55); aspect-ratio: 390 / 760; }
.pv-tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pv-tel-f:nth-child(2) .pv-tel { transform: translateY(-18px); }
.pv-tel-f figcaption { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--trg-ink); }

/* koraci (analiza) */
.pv-koraci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pv-korak { position: relative; background: #fff; border: 1px solid #e6ecf3; }
.pv-korak-br { position: absolute; top: 22px; right: 24px; font-size: 34px; font-weight: 600; color: #dbe5f1; letter-spacing: -0.03em; }
.pv-prepoznaje { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pv-cip { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--trg-line); color: var(--trg-g7); font-size: 13.5px; font-weight: 500; }

/* poglavlja */
.pv-poglavlja { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; max-width: 1000px; margin-inline: auto; }
.pv-poglavlja li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 20px; background: #fff; border: 1px solid var(--trg-line); border-radius: 18px; }
.pv-pg-br { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 14px; background: var(--trg-zl); color: var(--trg-tq); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.pv-poglavlja b { color: var(--trg-ink); font-weight: 600; font-size: 16px; }
.pv-poglavlja li > span:last-child { font-size: 14px; color: var(--trg-g5); line-height: 1.5; }

/* za koga */
.pv-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pv-zakoga { background: #fff; border: 1px solid var(--trg-line); }

/* cjenik */
.pv-cjenik { display: grid; gap: 20px; max-width: 1100px; margin: 0 auto; }
.pv-cjenik--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-cjenik--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.pv-cj { position: relative; background: #fff; border: 1.5px solid var(--trg-line); border-radius: 24px; padding: 28px 22px 22px; text-align: center; display: flex; flex-direction: column; }
.pv-cj.is-istaknut { border-color: #14b8a6; box-shadow: 0 0 0 4px rgba(20, 184, 166, .1), 0 24px 50px -34px rgba(15, 23, 42, .45); }
.pv-cj-zn { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--trg-grad); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pv-cj-n { font-size: 16px; font-weight: 600; color: var(--trg-ink) !important; margin: 0 0 6px; }
.pv-cj-c { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--trg-ink) !important; margin: 0; }
.pv-cj-po { font-size: 13px; margin: 4px 0 20px; }
.pv-cj .trg-btn { margin-top: auto; }
.pv-cj-ispod { text-align: center; font-size: 14px; margin: 22px 0 0; }
.pv-usp-btn { margin-top: 22px; }

/* povezani */
.pv-povezani { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ljepljiva traka (samo mobitel) */
.pv-traka { display: none; }

@media (max-width: 1100px) {
  .pv-grid { gap: 36px; }
  .pv-cetiri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-cjenik--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .pv-h1 { font-size: 38px !important; }
}
@media (max-width: 900px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-galerija { max-width: 520px; width: 100%; margin: 0 auto; }
  .pv-tri, .pv-koraci { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .pv-poglavlja { grid-template-columns: minmax(0, 1fr); }
  .pv-povezani { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pv-prekidac { padding: 0 12px; margin-top: 10px; }
  .pv-hero { padding-top: 18px; padding-bottom: 28px; margin-top: 8px; }
  .pv-put { font-size: 12.5px; margin-bottom: 16px; }
  .pv-put > span:last-child { display: none; }
  .pv-put > span:nth-last-child(2) { display: none; }
  .pv-grid { gap: 22px; }
  .pv-glavna { border-radius: 22px; aspect-ratio: 1 / 1; }
  .pv-glavna img.is-naslovnica { object-position: center 30%; }
  .pv-glavna--nalaz { aspect-ratio: auto; padding: 14px; }
  .pv-nalaz { padding: 16px; }
  .pv-slicice { gap: 8px; margin-top: 10px; }
  .pv-sl { border-radius: 12px; }
  .pv-h1 { font-size: 30px !important; }
  .pv-uvod { font-size: 15.5px; }
  .pv-okvir { padding: 16px; border-radius: 20px; }
  .pv-planovi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-planovi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-planovi--1 { grid-template-columns: minmax(0, 1fr); }
  .pv-planovi .trg-plan { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; font-size: 13.5px; border-radius: 14px; }
  .pv-planovi .trg-plan .trg-radio, .pv-planovi .trg-plan .trg-plan-zn { display: none; }
  .pv-planovi .trg-plan b { margin-left: 0; font-size: 15px; }
  .pv-planovi--1 .trg-plan { flex-direction: row; justify-content: space-between; text-align: left; padding: 14px; }
  .pv-planovi--1 .trg-plan b { margin-left: auto; }
  .trg-btn--puna { padding: 14px 16px; white-space: normal; }
  .pv-cetiri { grid-template-columns: minmax(0, 1fr); }
  .pv-znac, .pv-zakoga, .pv-korak { padding: 22px 20px; }
  .pv-telefoni { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pv-tel { border-width: 4px; border-radius: 18px; }
  .pv-tel-f:nth-child(2) .pv-tel { transform: none; }
  .pv-tel-f figcaption { font-size: 12px; margin-top: 8px; }
  .pv-poglavlja li { padding: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .pv-pg-br { width: 38px; height: 38px; }
  .pv-cjenik--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .pv-cjenik--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 18px; }
  .pv-cj { padding: 22px 12px 14px; border-radius: 18px; }
  .pv-cj-c { font-size: 26px; }
  .pv-cj-po { margin-bottom: 14px; font-size: 12px; }
  .pv-cj .trg-btn { padding: 11px 12px; font-size: 14px; }
  .pv-cjenik--3 .pv-cj { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: left; align-items: center; column-gap: 12px; padding: 18px; }
  .pv-cjenik--3 .pv-cj .trg-btn { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; }
  .pv-cjenik--3 .pv-cj-po { margin: 2px 0 0; }
  .pv-cjenik--3 .pv-cj-zn { left: 18px; transform: none; }
  .pv-povezani { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-traka {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 900; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border: 1px solid #e3ebf5; border-radius: 999px;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45); transform: translateY(140%); transition: transform .3s ease;
  }
  .pv-traka.is-vidljiva { transform: none; }
  .pv-traka-c { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; color: var(--trg-g5); }
  .pv-traka-c b { font-size: 17px; color: var(--trg-ink); }
  .pv-traka .trg-btn { padding: 12px 20px; }
}

/* analiza: ogledni prikaz u "Kako radi" */
.pv-nalaz-kako { display: flex; justify-content: center; margin-top: 28px; }
.pv-nalaz-kako .pv-nalaz { max-width: 560px; }

/* fotka "Skener u trgovini" - ista visina i širina kao okvir mobitela (Petra 23.10.) */
.pv-sken { margin: 0; text-align: center; }
.pv-sken-okvir { position: relative; max-width: 270px; margin: 0 auto; aspect-ratio: 390 / 760; box-sizing: border-box; border-radius: 36px; overflow: hidden; background: #0f172a; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55); }
/* cijela fotka (mobitel i natpis u kadru) preko zamućene iste fotke koja ispunjava visinu okvira */
.pv-sken-okvir .pv-sken-poz { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(16px) brightness(.85); }
.pv-sken-okvir img:not(.pv-sken-poz) { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.pv-sken figcaption { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--trg-ink); }
.pv-telefoni--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1160px; }
.pv-telefoni--4 .pv-tel-f:nth-child(2) .pv-tel { transform: none; }
@media (max-width: 1100px) { .pv-telefoni--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 767px) {
  .pv-telefoni--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pv-telefoni--4 .pv-tel { border-width: 5px; border-radius: 22px; }
  .pv-sken-okvir { border-radius: 22px; }
  .pv-sken figcaption { font-size: 12px; margin-top: 8px; }
}

/* ===== Sve o proizvodu: opis iz Wooa u FAQ kartici (opcija 1), shop-v2 23.10.2026. ===== */
.pv-opis-tijelo { padding: 0 24px 24px; font-size: 15.5px; line-height: 1.65; color: var(--trg-g7); overflow-wrap: anywhere; }
.pv-opis-tijelo p, .trg-faq .pv-opis-tijelo p { padding: 0; margin: 0 0 12px; }
.pv-opis-tijelo h2, .pv-opis-tijelo h3, .pv-opis-tijelo h4 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--trg-ink); margin: 22px 0 8px; }
.pv-opis-tijelo h2:first-child, .pv-opis-tijelo h3:first-child { margin-top: 4px; }
.pv-opis-tijelo ul, .pv-opis-tijelo ol { margin: 0 0 14px; padding-left: 20px; }
.pv-opis-tijelo ul { list-style: disc; }
.pv-opis-tijelo ol { list-style: decimal; }
.pv-opis-tijelo li { margin: 0 0 5px; }
.pv-opis-tijelo a { color: #0f766e; text-decoration: underline; }
.pv-opis-tijelo img { max-width: 100%; height: auto; border-radius: 12px; }
.pv-opis-tablica { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
.pv-opis-tablica table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pv-opis-tablica th, .pv-opis-tablica td { border: 1px solid var(--trg-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.pv-opis-tablica th { background: #f0fdfa; color: var(--trg-ink); font-weight: 600; }
@media (max-width: 767px) { .pv-opis-tijelo { padding: 0 18px 20px; font-size: 15px; } .pv-opis-tablica table { min-width: 520px; } }