/* Detalji jednog sajta; zajednicki header, footer i kartice ostaju u osnovnim stilovima. */
.detail-page {
  --detail-border: #353637;
  --detail-muted: #adb0b2;
  --detail-surface: #181b1d;
  background: #101214;
}
body.detail-page { overflow-x: clip; }

.detail-page .header-nav a[aria-current="page"] { color: var(--gold); }
.detail-page .footer { background: #090b0d; }
.detail-page [hidden] { display: none !important; }
html.detail-gallery-open { overflow: hidden; }
.detail-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  padding: 12px 20px;
  border-radius: 6px;
  color: #161511;
  background: var(--gold);
  transform: translateY(-200%);
}
.detail-skip:focus { transform: none; }
.detail-page main {
  background: radial-gradient(ellipse 880px 480px at 82% 0%, #80643b12, transparent 85%);
}
.detail-page :is(a, button, input, video, iframe):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
.detail-page button { -webkit-tap-highlight-color: transparent; }
.detail-shell { width: min(1280px, 100% - 80px); margin-inline: auto; }

.detail-breadcrumb { padding-top: 104px; }
.detail-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.detail-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #cfbd9d;
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.detail-breadcrumb a { color: #a6a9ac; }
.detail-breadcrumb li + li::before { display: block; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 3px; border-top: 1px solid #747672; border-right: 1px solid #747672; transform: rotate(45deg); content: ""; }
.detail-breadcrumb .icon { width: 12px; height: 12px; flex-basis: 12px; color: #646769; }

.detail-heading { padding: 38px 0 32px; }
.detail-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.detail-tag,
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid #5a4e37;
  border-radius: 5px;
  color: #e8ca95;
  background: #29241b;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.detail-status { border-color: #3e4440; color: #c3d1c6; background: #1a211d; }
.detail-status.is-sold { border-color: #5e4847; color: #deb5b0; background: #2a2020; }
.detail-heading h1 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.detail-lead {
  max-width: 900px;
  margin: 20px 0 0;
  color: #b9bbbc;
  font-size: 1.0625rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding-bottom: 48px;
}
.detail-gallery,
.detail-summary,
.detail-content,
.detail-sidebar { min-width: 0; }
.detail-browser {
  overflow: hidden;
  border: 1px solid #5a554b;
  border-radius: 12px;
  background: #0b0d0f;
  box-shadow: 0 18px 44px #0003;
}
.detail-browser-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 46px;
  padding: 6px 12px 6px 16px;
  border-bottom: 1px solid #363636;
  background: linear-gradient(110deg, #282a2b, #1b1d1f);
}
.detail-browser-dots { display: flex; flex: 0 0 auto; gap: 5px; }
.detail-browser-dots span { width: 6px; height: 6px; border-radius: 50%; background: #94816a; }
.detail-browser-dots span:nth-child(2) { opacity: 0.65; }
.detail-browser-dots span:nth-child(3) { opacity: 0.4; }
.detail-domain {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #bfc0bd;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-zoom {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #ddd5c8;
  background: transparent;
  cursor: pointer;
}
.detail-zoom .icon { width: 17px; height: 17px; flex-basis: 17px; }
.detail-gallery-stage { position: relative; }
[data-gallery-swipe] { touch-action: pan-y pinch-zoom; }
.detail-gallery-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #877553;
  border-radius: 50%;
  color: #f0d4a3;
  background: #16191aeb;
  box-shadow: 0 4px 18px #0005;
  transform: translateY(-50%);
  cursor: pointer;
}
.detail-gallery-arrow.is-prev { left: 14px; }
.detail-gallery-arrow.is-next { right: 14px; }
.detail-gallery-error { position: absolute; right: 65px; bottom: 16px; left: 65px; margin: 0; padding: 12px; border-radius: 6px; color: #f1d2a0; background: #171a1cf2; font-size: 0.875rem; text-align: center; }
.detail-image-link { display: block; cursor: zoom-in; }
.detail-image-link:focus-visible { outline-offset: -5px !important; }
#detail-main-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #111315;
}
.detail-thumbnails {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #766445 #191b1d;
  padding: 6px 5px 10px;
  margin: 8px -5px -10px;
}
.detail-thumbnails :is(a, button) {
  position: relative;
  display: block;
  flex: 0 0 100px;
  width: 100px;
  scroll-snap-align: start;
  overflow: hidden;
  padding: 3px;
  border: 1px solid #424343;
  border-radius: 6px;
  background: #191b1d;
  cursor: pointer;
}
.detail-thumbnails :is(a, button)[aria-pressed="true"],
.detail-thumbnails :is(a, button)[aria-current="true"],
.detail-thumbnails :is(a, button).is-active { border-color: var(--gold); background: #373025; box-shadow: 0 0 0 1px var(--gold); }
.detail-thumbnails img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 3px; object-fit: contain; }
.detail-thumbnail-number { position: absolute; right: 5px; bottom: 5px; min-width: 22px; padding: 2px 5px; border-radius: 3px; color: #e5d7bd; background: #101214e8; font-size: 0.6875rem; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
[aria-current="true"] > .detail-thumbnail-number { color: #171511; background: var(--gold); }
.detail-gallery-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 0 0; }
.detail-gallery-meta p { min-width: 0; margin: 0; }
.detail-gallery-label { display: block; color: #e2d7c4; font-size: 0.875rem; font-weight: 600; line-height: 1.6; }
.detail-gallery-caption { display: block; margin-top: 4px; color: #a1a7a9; font-size: 0.8125rem; line-height: 1.75; overflow-wrap: anywhere; }
.detail-gallery-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 32px; padding: 5px 10px; border: 1px solid #484033; border-radius: 5px; color: #ddc293; background: #25231e; font-size: 0.8125rem; line-height: 1.6; font-variant-numeric: tabular-nums; white-space: nowrap; }

.detail-panel {
  padding: 28px;
  border: 1px solid #464036;
  border-radius: 12px;
  background: radial-gradient(ellipse at 100% 0, #9d733317, transparent 66%), var(--detail-surface);
}
.detail-summary .detail-panel { border-top: 2px solid #977746; }
.detail-summary > .detail-panel { position: relative; isolation: isolate; border-radius: 12px; }
.detail-summary > .detail-panel::before { border-radius: inherit; }
.detail-price-label { display: block; margin: 0 0 10px; color: #b8b1a3; font-size: 0.875rem; line-height: 1.7; }
.detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.detail-price strong { color: var(--gold); font-size: clamp(2.5rem, 3.4vw, 3.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-price small { color: #bcb6aa; font-size: 0.875rem; line-height: 1.6; }
.detail-price-options dl,
dl.detail-price-options,
.detail-quick-facts dl,
dl.detail-quick-facts,
.detail-costs { margin: 0; }
.detail-price-options,
dl.detail-price-options { margin-top: 20px; }
.detail-price-options dl > div,
dl.detail-price-options > div,
.detail-quick-facts dl > div,
dl.detail-quick-facts > div,
.detail-costs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  font-size: 0.875rem;
  line-height: 1.7;
}
.detail-price-options dt,
.detail-quick-facts dt,
.detail-costs dt { min-width: 0; color: #a8abad; }
.detail-price-options dd,
.detail-quick-facts dd,
.detail-costs dd { min-width: 0; margin: 0; color: #e3ded5; text-align: right; overflow-wrap: anywhere; }
.detail-price-options dd { color: var(--gold); }
.detail-quick-facts,
dl.detail-quick-facts { margin-top: 28px; padding-top: 16px; border-top: 1px solid #3f3b34; }
.detail-quick-facts:empty { display: none; }
.detail-actions { display: grid; gap: 10px; margin-top: 22px; }
.detail-actions > .button,
.detail-contact-actions .button { width: 100%; min-width: 0; }
.detail-actions .button-content { min-width: 0; gap: 10px; }
.detail-summary .button::before,
.detail-summary .button::after { animation-play-state: paused; }
.detail-summary.is-in-view .button::before,
.detail-summary.is-in-view .button::after { animation-play-state: running; }
.detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid #595044;
  border-radius: 6px;
  color: #ece3d3;
  background: #25241f;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.detail-button .icon { width: 17px; height: 17px; flex-basis: 17px; }
.detail-button-gold { width: 100%; border-color: #edce95; color: #1b1914; background: linear-gradient(115deg, #edd29e, var(--gold)); }
.detail-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-contact-actions > :only-child { grid-column: 1 / -1; }
.detail-share { padding: 23px 1px 0; }
.detail-share > :is(p, span, label) { display: block; margin: 0 0 12px; color: #969c9f; font-size: 0.875rem; line-height: 1.7; }
.detail-share-links { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-share-links :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #343839;
  border-radius: 5px;
  color: #b9bec0;
  background: #171a1c;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
}
.detail-share-links .icon { width: 14px; height: 14px; flex-basis: 14px; }
.detail-share .detail-share-status { margin: 10px 0 0; color: #e5c994; }
.detail-share-status:empty { display: none; }
.detail-copy-fallback { display: block; width: 100%; min-width: 0; margin-top: 13px; padding: 12px; border: 1px solid #5b5140; border-radius: 5px; color: #ead8b9; background: #101416; font: inherit; font-size: 1rem; line-height: 1.6; }

.detail-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  padding: 0;
  border-block: 1px solid #3e3b35;
}
.detail-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 62px;
  padding: 16px 0;
  border-bottom: 2px solid transparent;
  color: #b7b6b1;
  font-size: 0.875rem;
  line-height: 1.6;
}
.detail-section-nav a[aria-current="true"],
.detail-section-nav a.is-active { border-bottom-color: var(--gold); color: var(--gold); }
.detail-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 64px;
}
.detail-section { margin: 0 0 42px; padding: 0 0 42px; border-bottom: 1px solid #323435; scroll-margin-top: 28px; }
.detail-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.detail-section h2 { margin: 0 0 24px; font-size: 2rem; font-weight: 500; line-height: 1.25; letter-spacing: 1px; }
.detail-section h3 { margin: 26px 0 14px; color: #ede4d5; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }
.detail-description { color: #b8bbbd; font-size: 1rem; line-height: 1.95; overflow-wrap: anywhere; }
.detail-description p { margin: 0 0 20px; }
.detail-description p:last-child { margin-bottom: 0; }
.detail-description :is(ul, ol) { padding-left: 22px; }
.detail-description li { margin-block: 7px; padding-left: 4px; }
.detail-description li::marker { color: var(--gold); }
.detail-description strong { color: #e6e0d5; font-weight: 600; }
.detail-description a,
.detail-facts a,
.detail-owner a,
.detail-costs a { color: #e9ca94; text-decoration: underline; text-decoration-color: #746248; text-underline-offset: 4px; }
.detail-facts { margin: 0; }
.detail-description + .detail-facts { margin-top: 30px; padding-top: 25px; border-top: 1px solid #343738; }
.detail-facts > div { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 16px 24px; padding: 16px 0; border-bottom: 1px solid #2e3133; font-size: 0.875rem; line-height: 1.8; }
.detail-facts > div:first-child { padding-top: 0; }
.detail-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-facts dt { color: #a2a8ac; }
.detail-facts dd { margin: 0; color: #e0e0dc; overflow-wrap: anywhere; }
.detail-sidebar { display: grid; gap: 22px; }
.detail-sidebar .detail-panel { border-color: #3a3c3c; background: #171a1c; }
.detail-sidebar .detail-panel h2 { margin: 0 0 19px; color: #ece8df; font-size: 1.1875rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.015em; }
.detail-costs > div + div { border-top: 1px solid #2e3335; }
.detail-owner { color: #b6bbbd; font-size: 0.875rem; line-height: 1.9; overflow-wrap: anywhere; }
.detail-owner p { margin: 10px 0 0; }
.detail-owner p:first-child { margin-top: 0; }
.detail-owner strong { color: #e4ddd2; font-weight: 500; }
.detail-owner dl { margin: 0; }
.detail-owner dl > div + div { margin-top: 14px; }
.detail-owner dt { margin-bottom: 3px; color: #949da1; font-size: 0.875rem; }
.detail-owner dd { margin: 0; color: #deded9; }
.detail-owner-link { display: flex; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; margin-top: 17px; color: #e9ca94; overflow-wrap: anywhere; }
.detail-owner-link .icon { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 5px; }
.detail-owner .detail-owner-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #343738; color: #a9aaa4; font-size: 0.8125rem; line-height: 1.7; overflow-wrap: normal; }

.detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.detail-metric { min-width: 0; padding: 22px 8px 18px; border: 1px solid #353a3a; border-radius: 8px; background: #171b1c; text-align: center; }
.detail-score {
  --score-color: #a4c599;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 0 auto 15px;
  border-radius: 50%;
  color: var(--score-color);
  background: conic-gradient(var(--score-color) calc(var(--score, 0) * 1%), #333b3b 0);
}
.detail-score::before { position: absolute; z-index: -1; inset: 4px; border-radius: inherit; background: #171b1c; content: ""; }
.detail-score.score-good,
.score-good .detail-score { --score-color: #a4c599; }
.detail-score.score-average,
.score-average .detail-score { --score-color: #e6c17b; }
.detail-score.score-low,
.score-low .detail-score { --score-color: #e9978f; }
.detail-score strong { display: block; margin: 0; font-size: 1.625rem; font-weight: 500; line-height: 1.15; text-align: center; font-variant-numeric: tabular-nums; }
.detail-score small { display: block; margin: 3px 0 0; color: #a1adad; font-size: 0.75rem; line-height: 1.2; text-align: center; }
.detail-metric > :is(p, span, h3) { display: block; margin: 0; color: #c0c6c4; font-size: 0.875rem; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
.detail-seo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 23px; border: 1px solid #424037; border-radius: 8px; background: #1c1d1b; }
.detail-stat strong { color: var(--gold); font-size: 2.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-stat strong small,
.detail-review strong small { color: #b9b3a6; font-size: 0.875rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.detail-seo > :only-child,
.detail-reviews > :only-child { grid-column: 1 / -1; }
.detail-stat span { color: #b8b9b2; font-size: 0.875rem; line-height: 1.7; }
.detail-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-review { min-width: 0; padding: 22px; border: 1px solid #454036; border-radius: 8px; background: #1d1d1a; }
.detail-review h3 { margin: 0 0 14px; color: #ccc5b6; font-size: 0.875rem; }
.detail-review strong { display: inline-block; margin-right: 9px; color: var(--gold); font-size: 1.875rem; font-weight: 500; line-height: 1.3; }
.detail-review strong > span { color: var(--gold); font-size: 1.375rem; }
.detail-review span,
.detail-review p { color: #a9aaa4; font-size: 0.875rem; line-height: 1.7; }
.detail-review p { margin: 10px 0 0; }
.detail-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.detail-ranking { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 2px; min-width: 0; padding: 18px 22px; border: 1px solid #424037; border-radius: 8px; background: #1c1d1b; }
.detail-ranking strong { grid-row: span 2; min-width: 2.4ch; color: var(--gold); font-size: 2.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-ranking strong small { color: #b9b3a6; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; }
.detail-ranking-keyword { color: #ecebe4; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.detail-ranking-type { color: #a9aaa4; font-size: 0.8125rem; line-height: 1.6; }
.detail-rankings > :only-child { grid-column: 1 / -1; }
.detail-rankings-note { margin: 18px 0 0; color: #a9aaa4; font-size: 0.875rem; line-height: 1.7; }
.detail-rankings-note a { color: var(--gold); }
.detail-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.detail-video-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.detail-video-heading .detail-gallery-count { margin-top: 4px; }
.detail-video { min-width: 0; margin: 0; }
.detail-video figure { margin: 0; }
.detail-video :is(video, iframe) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #424340; border-radius: 8px; background: #07090b; }
.detail-video figcaption { margin-top: 13px; }
.detail-video figcaption h3 { margin: 0 0 7px; font-size: 1rem; }
.detail-video figcaption p { margin: 0; color: #aeb2b4; font-size: 0.875rem; line-height: 1.85; overflow-wrap: anywhere; }
.detail-video-playlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.detail-video-playlist a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 1px solid #3f4241; border-radius: 8px; color: #c9c9c3; background: #181c1d; }
.detail-video-playlist a[aria-current="true"] { border-color: #b19460; color: #efd6a9; background: linear-gradient(115deg, #343024, #22231f); }
.detail-video-play { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #5a5344; border-radius: 50%; color: #d9bf93; background: #282820; }
.detail-video-play .icon { width: 17px; height: 17px; flex-basis: 17px; }
.detail-video-choice { flex: 1 1 auto; min-width: 0; }
.detail-video-choice strong { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.detail-video-choice > span { display: block; margin-top: 3px; color: #a5aaa7; font-size: 0.75rem; line-height: 1.5; }
.detail-video-number { align-self: flex-start; color: #a69a83; font-size: 0.6875rem; line-height: 1.8; font-variant-numeric: tabular-nums; }
.detail-dates { margin: 0; padding-top: 20px; border-top: 1px solid #323537; color: #8f989c; }
.detail-dates dl { margin: 0; }
.detail-dates dl > div,
dl.detail-dates > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 15px; margin-top: 9px; font-size: 0.8125rem; line-height: 1.7; }
.detail-dates dl > div:first-child,
dl.detail-dates > div:first-child { margin-top: 0; }
.detail-dates dd { margin: 0; color: #b4babd; }

.detail-related { padding: 60px 0 72px; border-top: 1px solid #434035; background: #131618; }
.detail-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; margin-bottom: 32px; }
.detail-related-heading h2 { margin: 0; font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; }
.detail-back { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 9px; min-height: 44px; color: #dcc292; font-size: 0.875rem; line-height: 1.7; }
.detail-back .icon { width: 17px; height: 17px; flex-basis: 17px; }
.detail-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.detail-related .site-card-price strong { color: var(--gold); }
.detail-empty { min-height: 52vh; padding-block: 80px 96px; }
.detail-empty h1 { max-width: 840px; margin: 0 0 22px; font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.04em; }
.detail-empty p { max-width: 680px; margin: 0 0 27px; color: var(--detail-muted); font-size: 1rem; line-height: 1.9; }
.detail-empty .detail-button { width: auto; }
.detail-not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.detail-lightbox {
  width: min(1100px, 94vw);
  max-width: min(1200px, 94vw);
  max-height: 94vh;
  max-height: 94dvh;
  overflow: auto;
  padding: 58px 20px 20px;
  border: 1px solid #5d5341;
  border-radius: 12px;
  color: #ece5d9;
  background: #111416;
  box-shadow: 0 28px 90px #000a;
}
.detail-lightbox::backdrop { background: #030508e8; }
.detail-lightbox-stage { display: grid; place-items: center; min-height: 100px; }
.detail-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94vh - 285px); max-height: calc(94dvh - 285px); margin-inline: auto; object-fit: contain; }
.detail-lightbox-stage.is-zoomed { display: block; overflow: auto; max-height: calc(94vh - 285px); max-height: calc(94dvh - 285px); overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.detail-lightbox-stage.is-zoomed img { max-width: none; max-height: none; margin: 0; }
.detail-lightbox-zoom { position: absolute; top: 7px; left: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #494332; border-radius: 5px; color: #e6d6bc; background: #292923; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.detail-lightbox-zoom .icon { width: 16px; height: 16px; flex-basis: 16px; }
.detail-lightbox-zoom[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.detail-lightbox-close { position: absolute; top: 7px; right: 9px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 5px; color: #e6d6bc; background: #292923; cursor: pointer; }
.detail-lightbox-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 15px 0 0; color: #bbbcb6; font-size: 0.875rem; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.detail-lightbox-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.detail-lightbox-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #555041; border-radius: 5px; color: #e4cfaa; background: #24251f; font: inherit; font-size: 0.875rem; cursor: pointer; }
.detail-lightbox-nav [data-gallery-counter] { min-width: 60px; font-size: 0.875rem; text-align: center; font-variant-numeric: tabular-nums; }
.detail-lightbox-thumbnails { width: max-content; max-width: 100%; margin: 14px auto 0; padding-block: 4px 8px; }
.detail-lightbox-thumbnails button { flex-basis: 64px; width: 64px; }

@media (max-height: 500px) {
  .detail-lightbox-thumbnails { display: none; }
  .detail-lightbox-stage img,
  .detail-lightbox-stage.is-zoomed { max-height: calc(94vh - 170px); max-height: calc(94dvh - 170px); }
  .detail-lightbox-caption { -webkit-line-clamp: 1; margin-top: 10px; }
  .detail-lightbox-nav { margin-top: 8px; }
}

@media (hover: hover) and (pointer: fine) {
  .detail-breadcrumb a:hover,
  .detail-back:hover { color: #fff0cd; }
  .detail-button:hover { border-color: #b5945f; color: #fff1d5; background: #343027; }
  .detail-button-gold:hover { border-color: #ffe5b7; color: #171510; background: #f0d49f; }
  .detail-zoom:hover { border-color: #5a5345; background: #34312a; }
  .detail-share-links :is(a, button):hover { border-color: #786748; color: #ead0a1; background: #27271f; }
  .detail-section-nav a:hover { color: #efd29e; border-bottom-color: #7c6541; }
  .detail-thumbnails :is(a, button):hover { border-color: #b69762; }
  .detail-gallery-arrow:hover { border-color: var(--gold); color: #fff0cc; background: #393127; }
  .detail-video-playlist a:hover { border-color: #a18b63; background: #2b2a22; }
  .detail-lightbox-close:hover,
  .detail-lightbox-zoom:hover,
  .detail-lightbox-nav button:hover { background: #383329; }
}
@media (prefers-reduced-motion: no-preference) {
  .detail-button,
  .detail-zoom,
  .detail-share-links :is(a, button),
  .detail-section-nav a,
  .detail-thumbnails :is(a, button),
  .detail-gallery-arrow,
  .detail-video-playlist a,
  .detail-back { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
}

@media (max-width: 1100px) {
  .detail-hero { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; }
  .detail-panel { padding: 23px; }
  .detail-content-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; }
  .detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-related-grid { gap: 18px; }
  .detail-related .site-card-body { padding: 22px 18px; }
  .detail-related .site-card-footer { flex-wrap: wrap; gap: 8px 15px; }
  .detail-rankings { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detail-ranking { padding: 15px; }
  .detail-ranking strong { font-size: 1.875rem; }
  .detail-videos { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) {
  .detail-sidebar { position: sticky; top: var(--detail-sidebar-top, 24px); align-self: start; }
}

@media (max-width: 900px) {
  .detail-heading { padding-top: 32px; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 36px; }
  .detail-summary .detail-panel { padding: 28px; }
  .detail-price strong { font-size: 3rem; }
  .detail-content-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 38px 48px; }
  .detail-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .detail-sidebar .detail-dates { grid-column: 1 / -1; }
  .detail-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-rankings { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detail-ranking { padding: 15px; }
  .detail-ranking strong { font-size: 1.875rem; }
  .detail-videos { grid-template-columns: minmax(0, 1fr); }
  .detail-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-related-heading { align-items: flex-start; }
}

@media (max-width: 767px) {
  .detail-shell { width: calc(100% - 40px); }
  .detail-breadcrumb { padding-top: 90px; }
  .detail-breadcrumb ol,
  .detail-breadcrumb li { gap: 8px; }
  .detail-breadcrumb li { font-size: 0.875rem; }
  .detail-heading { padding-block: 28px; }
  .detail-eyebrow { margin-bottom: 15px; }
  .detail-heading h1 { font-size: clamp(2.05rem, 7vw, 3rem); line-height: 1.16; letter-spacing: .8px; }
  .detail-lead { margin-top: 16px; font-size: 1rem; line-height: 1.85; }
  .detail-hero { gap: 24px; }
  .detail-browser-bar { min-height: 42px; gap: 10px; padding-left: 12px; }
  .detail-summary .detail-panel { padding: 24px; }
  .detail-section-nav { gap: 0 22px; }
  .detail-section-nav a { min-height: 54px; padding-block: 13px; font-size: 0.875rem; }
  .detail-section { margin-bottom: 34px; padding-bottom: 34px; }
  .detail-section h2 { margin-bottom: 20px; font-size: 1.75rem; letter-spacing: .7px; }
  .detail-facts > div { gap: 12px 18px; padding-block: 14px; font-size: 0.875rem; }
  .detail-related { padding-block: 44px 52px; }
  .detail-related-heading { flex-wrap: wrap; gap: 8px 20px; margin-bottom: 25px; }
  .detail-related .site-card h3 { font-size: 1.2rem; }
  .detail-related .site-card-specs { gap: 12px; }
}

@media (max-width: 560px) {
  .detail-panel,
  .detail-summary .detail-panel { padding: 22px 20px; }
  .detail-price strong { font-size: 2.75rem; }
  .detail-contact-actions { gap: 8px; }
  .detail-button { padding-inline: 12px; }
  .detail-share-links { gap: 8px; }
  .detail-share-links :is(a, button) { min-height: 40px; padding-inline: 11px; }
  .detail-thumbnails { gap: 8px; }
  .detail-thumbnails :is(a, button) { flex-basis: 80px; width: 80px; }
  .detail-lightbox-thumbnails button { flex-basis: 56px; width: 56px; }
  .detail-gallery-arrow.is-prev { left: 9px; }
  .detail-gallery-arrow.is-next { right: 9px; }
  .detail-gallery-meta { gap: 12px; padding-top: 15px; }
  .detail-video-playlist { grid-template-columns: minmax(0, 1fr); }
  .detail-section-nav { gap: 0 21px; }
  .detail-content-grid { padding-top: 32px; }
  .detail-sidebar { grid-template-columns: minmax(0, 1fr); }
  .detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .detail-metric { padding-block: 20px; }
  .detail-metric > :is(p, span, h3) { font-size: 0.875rem; }
  .detail-facts > div { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; }
  .detail-seo,
  .detail-reviews { gap: 10px; }
  .detail-stat,
  .detail-review { padding: 19px 15px; }
  .detail-stat strong { font-size: 1.875rem; }
  .detail-rankings { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detail-ranking { padding: 15px; }
  .detail-ranking strong { font-size: 1.875rem; }
  .detail-videos { grid-template-columns: minmax(0, 1fr); }
  .detail-related-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .detail-related .site-card-body { padding: 25px 24px 22px; }
  .detail-related .site-card h3 { font-size: 1.375rem; }
  .detail-related .site-card-footer { flex-wrap: nowrap; }
  .detail-empty { padding-block: 60px 72px; }
  .detail-lightbox { max-width: calc(100vw - 20px); padding-inline: 10px; border-radius: 8px; }
}

/* Proof-next-to-claim layout (includes/product-sections.php). */
.detail-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 34px; padding: 0; list-style: none; }
.detail-highlights li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px 22px; border: 1px solid #424037; border-radius: 8px; background: #1c1d1b; }
.detail-highlights strong { color: var(--gold); font-size: 2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.detail-highlights strong small { color: #b9b3a6; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; }
.detail-highlights span { color: #b8b9b2; font-size: 0.875rem; line-height: 1.6; overflow-wrap: anywhere; }
/* A single fact becomes a deliberate wide strip: number left, label right. */
.detail-highlights.is-single li { flex-direction: row; align-items: baseline; gap: 18px; }
.detail-highlights.is-single span { font-size: 1rem; }
.detail-flow { padding-top: 48px; padding-bottom: 64px; }
.detail-flow > .detail-section:last-of-type { margin-bottom: 42px; padding-bottom: 42px; border-bottom: 1px solid #323435; }
.detail-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.detail-about-aside { display: grid; gap: 28px; min-width: 0; }
.detail-audience { padding: 24px; border: 1px solid #5a4e36; border-radius: 8px; background: linear-gradient(135deg, #2a261c, #1b1c1a); }
.detail-audience h3 { margin: 0 0 10px; color: var(--gold); font-size: 1.0625rem; }
.detail-audience p { margin: 0; color: #d6d2c6; font-size: 1rem; line-height: 1.85; }
.detail-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; gap: 32px; }
.detail-proof.is-single { grid-template-columns: minmax(0, 1fr); }
.detail-proof:not(.is-single) .detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-flow .detail-ranking { grid-template-columns: auto minmax(0, 1fr) auto; }
.detail-ranking-play { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border: 1px solid #5a5344; border-radius: 999px; color: #efd6a9; background: #24231d; font-size: 0.875rem; line-height: 1.4; white-space: nowrap; }
.detail-ranking-play .detail-video-play { flex-basis: 34px; width: 34px; height: 34px; border-color: #b19460; color: #171511; background: var(--gold); }
.detail-ranking-play .detail-video-play .icon { width: 15px; height: 15px; flex-basis: 15px; fill: currentColor; }
.detail-clip { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 1px solid #5a4e36; border-radius: 10px; color: #ecebe4; background: #111314; overflow: hidden; }
.detail-clip::backdrop { background: rgba(4, 5, 6, 0.86); }
.detail-clip-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; }
.detail-clip-bar p { margin: 0; min-width: 0; color: #efd6a9; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.detail-clip-bar button { position: static; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border: 1px solid #edce95; border-radius: 999px; color: #1b1914; background: var(--gold); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.detail-clip-bar button .icon { width: 18px; height: 18px; }
.detail-clip video { display: block; width: 100%; height: auto; max-height: calc(100vh - 110px); background: #07090b; }
.detail-included-aside { display: grid; gap: 22px; min-width: 0; }
/* What stays with the seller (e.g. listings in a real estate database): clearly apart from what the buyer gets. */
.detail-excluded { padding: 20px 24px; border: 1px solid #3f3a33; border-left: 3px solid #c98b5a; border-radius: 8px; background: #1a1918; }
.detail-excluded h3 { margin: 0 0 8px; color: #ecc49b; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }
.detail-excluded p { margin: 0; color: #b8bbbd; font-size: 1rem; line-height: 1.85; }
/* Two columns: the costs panel follows the reader while a long list of extras scrolls (below the fixed 78px header). */
@media (min-width: 901px) {
  .detail-about-aside,
  .detail-included-aside { position: sticky; top: 102px; }
}
.detail-included { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.detail-included-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.detail-included-list li { padding: 20px 22px; border: 1px solid #353a3a; border-radius: 8px; background: #171b1c; }
.detail-included-list h3 { margin: 0 0 6px; }
.detail-included-list p { margin: 0; color: #b8bbbd; font-size: 1rem; line-height: 1.8; }
.detail-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 32px; border: 1px solid #5a4e36; border-radius: 10px; background: linear-gradient(120deg, #2a261c, #17191a); }
.detail-cta h2 { margin: 0 0 8px; font-size: 1.75rem; font-weight: 500; line-height: 1.3; }
.detail-cta p { margin: 0; color: #c2c0b6; font-size: 1rem; line-height: 1.7; }
.detail-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .detail-about,
  .detail-proof,
  .detail-included { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .detail-proof:not(.is-single) .detail-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .detail-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
  .detail-highlights li { padding: 16px 14px; }
  .detail-highlights strong { font-size: 1.625rem; }
  .detail-flow .detail-ranking { grid-template-columns: auto minmax(0, 1fr); }
  .detail-ranking-play { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 12px; }
  .detail-proof:not(.is-single) .detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-cta { padding: 24px 18px; }
  .detail-cta-actions,
  .detail-cta-actions .button { width: 100%; }
}
.detail-clip-bar kbd { padding: 1px 6px; border: 1px solid rgba(27, 25, 20, 0.45); border-radius: 4px; font: inherit; font-size: 0.75rem; font-weight: 500; }

/* Analitika i alati: screenshots from the seller's tools. */
.detail-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-shot { min-width: 0; margin: 0; }
.detail-shot:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.detail-shot a { display: block; overflow: hidden; border: 1px solid #424340; border-radius: 8px; background: #f4f4f2; }
.detail-shot img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; }
.detail-shot a:hover img { transform: scale(1.015); }
.detail-shot figcaption { margin-top: 10px; color: #b8bbbd; font-size: 0.875rem; line-height: 1.7; }
.detail-shot-stage { overflow: auto; max-height: calc(100vh - 110px); background: #f4f4f2; }
.detail-shot-stage img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .detail-shots { grid-template-columns: minmax(0, 1fr); }
}

/* Sta jos ide uz sajt (product_inclusions) i razlog prodaje. */
.detail-included-main { display: grid; gap: 22px; min-width: 0; }
/* Without extras the space under "Domen i sajt" gets the golden light video, stretched to the side panel's height. */
.detail-included-art { position: relative; min-height: 180px; overflow: hidden; border: 1px solid #5a4e36; border-radius: 8px; background: #0b0d0f; }
@media (min-width: 901px) {
  .detail-included.has-art { align-items: stretch; }
  .detail-included.has-art .detail-included-main { display: flex; flex-direction: column; }
  .detail-included.has-art .detail-included-art { flex: 1 1 auto; }
}
@media (max-width: 900px) {
  .detail-included-art { display: none; }
}
.detail-extras { padding: 22px 24px; border: 1px solid #5a4e36; border-radius: 8px; background: linear-gradient(135deg, #2a261c, #1b1c1a); }
.detail-extras h3 { margin: 0 0 14px; color: var(--gold); font-size: 1.0625rem; }
.detail-extras ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.detail-extras li { position: relative; display: grid; gap: 2px; padding-left: 26px; }
.detail-extras li::before { content: ""; position: absolute; top: 0.55em; left: 2px; width: 12px; height: 7px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); transform: rotate(-45deg); }
.detail-extras strong { color: #ecebe4; font-size: 1rem; font-weight: 500; line-height: 1.6; }
.detail-extras strong a { color: #efd6a9; }
.detail-extras strong .icon { width: 14px; height: 14px; vertical-align: -1px; }
.detail-extras span,
.detail-extras p { margin: 0; color: #c2c0b6; font-size: 0.9375rem; line-height: 1.7; }

/* Answer-first summary and site-specific FAQ (SEO/AEO). */
/* The summary keeps its width; the golden light video from the home FAQ fills the space to its right,
   shrinks first on narrower screens and is gone once there is no room left for it. */
.detail-answer-row { display: flex; align-items: stretch; gap: 24px; margin: -6px 0 26px; }
.detail-answer-row .detail-answer { flex: 0 1 900px; margin: 0; }
.detail-answer-art { position: relative; flex: 1 1 0; min-width: 0; max-width: 420px; overflow: hidden; border: 1px solid #5a4e36; border-radius: 8px; background: #0b0d0f; }
.detail-answer-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1140px) {
  .detail-answer-art { display: none; }
}
.detail-answer { max-width: 900px; margin: -6px 0 26px; padding: 16px 20px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: #1d1e1c; color: #e3ddd0; font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.detail-faq { border-top: 1px solid #323435; }
.detail-faq details { border-bottom: 1px solid #323435; }
.detail-faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; }
.detail-faq summary::-webkit-details-marker { display: none; }
.detail-faq summary h3 { margin: 0; color: #ede4d5; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }
.detail-faq summary > span { flex: 0 0 25px; color: var(--gold); font-size: 1.25rem; line-height: 1.4; text-align: center; transition: transform 180ms ease; }
.detail-faq details[open] summary > span { transform: rotate(45deg); }
.detail-faq p { margin: 0 0 20px; padding-right: 40px; color: #b8bbbd; font-size: 1rem; line-height: 1.9; }
.detail-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }