/* ============================================
   VINA PAGE — Immersive Redesign
   ============================================ */

/* ---- HERO ---- */
.vh-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vh-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vh-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.08);
  filter: saturate(0.7) brightness(0.35) contrast(1.15);
  animation: heroSlow 30s ease-in-out infinite alternate;
}

@keyframes heroSlow {
  from { transform: scale(1.08); }
  to   { transform: scale(1.16) translate3d(-1%, -1.5%, 0); }
}

.vh-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,166,107,0.07), transparent 55%),
    linear-gradient(180deg, rgba(6,8,16,0.5) 0%, rgba(6,8,16,0.3) 40%, rgba(6,8,16,0.7) 75%, var(--bg) 100%);
}

/* SVG vine animation */
.vh-vine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.vine-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawVine 4s ease-out 0.8s forwards;
}

@keyframes drawVine {
  to { stroke-dashoffset: 0; }
}

.vh-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 100px 0 60px;
}

.vh-hero-label {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.vh-hero-label::before,
.vh-hero-label::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.vh-hero-title {
  font-size: clamp(3.5rem, 10vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.vh-title-line {
  display: block;
}

.vh-title-accent {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #a07840 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.vh-hero-sub {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  font-style: italic;
}

.vh-hero-scroll {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

.vh-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); }
}

/* Floating bottles */
.vh-float-bottle {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.vh-float-bottle img {
  height: clamp(220px, 28vw, 380px);
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  opacity: 0.6;
}

.vh-float-left {
  left: 3%;
  bottom: 8%;
  transform: rotate(-5deg);
  animation: floatLeft 8s ease-in-out infinite alternate;
}

.vh-float-right {
  right: 3%;
  bottom: 12%;
  transform: rotate(4deg);
  animation: floatRight 9s ease-in-out 1s infinite alternate;
}

@keyframes floatLeft {
  from { transform: rotate(-5deg) translateY(0); }
  to   { transform: rotate(-3deg) translateY(-16px); }
}

@keyframes floatRight {
  from { transform: rotate(4deg) translateY(0); }
  to   { transform: rotate(2deg) translateY(-14px); }
}

/* ---- PHOTO STRIP ---- */
.vh-photo-strip {
  overflow: hidden;
  padding: 2px 0;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.vh-strip-track {
  display: flex;
  gap: 3px;
  width: max-content;
  animation: stripScroll 40s linear infinite;
}

.vh-strip-track img {
  height: 120px;
  width: auto;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.7);
  transition: filter 0.4s ease;
}

.vh-strip-track img:hover {
  filter: saturate(1) brightness(0.9);
}

@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- CATALOG ---- */
.vh-catalog {
  --vina-blend-h: clamp(68px, 7vw, 112px);
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0 calc(clamp(60px, 8vw, 100px) + var(--vina-blend-h));
  background:
    radial-gradient(circle at 12% 20%, rgba(201,166,107,0.08), transparent 34%),
    radial-gradient(circle at 88% 74%, rgba(156,45,79,0.14), transparent 38%),
    linear-gradient(180deg, #070a12 0%, #0a1018 36%, #090d15 100%);
  isolation: isolate;
  overflow: hidden;
}

.vh-catalog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(7,10,18,0.42) 0%, rgba(7,10,18,0.22) 28%, rgba(7,10,18,0.52) 100%),
    radial-gradient(circle at 50% -20%, rgba(201,166,107,0.07), transparent 55%);
  pointer-events: none;
}

.vh-catalog::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--vina-blend-h);
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(90% 120% at 50% 0, rgba(201,166,107,0.07) 0%, rgba(201,166,107,0) 62%),
    linear-gradient(180deg, rgba(9,13,21,0) 0%, rgba(9,13,21,0.28) 46%, rgba(9,13,21,0.82) 84%, var(--bg) 100%);
}

.vh-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.vh-catalog-svg {
  position: absolute;
  inset: -2% -4%;
  width: 108%;
  height: 104%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.vh-svg-layer,
.vh-svg-cluster {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.vh-svg-vine {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420 18;
  opacity: 0.58;
  animation: vinePulse 14s ease-in-out infinite alternate;
}

.vh-svg-vine.thin {
  stroke-width: 1.45;
  stroke-dasharray: 280 14;
  opacity: 0.4;
  animation-duration: 18s;
}

.vh-svg-grape {
  fill: rgba(126, 27, 55, 0.34);
  stroke: rgba(201, 166, 107, 0.52);
  stroke-width: 1.1;
}

@keyframes vinePulse {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.22;
  }
  55% {
    opacity: 0.62;
  }
  100% {
    stroke-dashoffset: -140;
    opacity: 0.34;
  }
}

.vh-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
  animation: orbFloat var(--orb-duration, 24s) ease-in-out infinite alternate;
}

.vh-orb-1 {
  width: clamp(260px, 32vw, 520px);
  height: clamp(260px, 32vw, 520px);
  top: -15%;
  left: -8%;
  --orb-duration: 26s;
  background: radial-gradient(circle at 30% 35%, rgba(201,166,107,0.32), rgba(201,166,107,0.04) 62%, transparent 75%);
}

.vh-orb-2 {
  width: clamp(280px, 30vw, 500px);
  height: clamp(280px, 30vw, 500px);
  top: 24%;
  right: -10%;
  --orb-duration: 30s;
  background: radial-gradient(circle at 45% 45%, rgba(118,22,50,0.34), rgba(118,22,50,0.06) 60%, transparent 76%);
}

.vh-orb-3 {
  width: clamp(240px, 26vw, 460px);
  height: clamp(240px, 26vw, 460px);
  bottom: -10%;
  left: 15%;
  --orb-duration: 22s;
  background: radial-gradient(circle at 50% 40%, rgba(201,166,107,0.22), rgba(201,166,107,0.04) 58%, transparent 74%);
}

.vh-orb-4 {
  width: clamp(200px, 22vw, 380px);
  height: clamp(200px, 22vw, 380px);
  top: 46%;
  left: 42%;
  --orb-duration: 20s;
  background: radial-gradient(circle at 50% 50%, rgba(109,22,48,0.28), rgba(109,22,48,0.02) 60%, transparent 76%);
}

.vh-orb-5 {
  width: clamp(180px, 20vw, 340px);
  height: clamp(180px, 20vw, 340px);
  bottom: 12%;
  right: 16%;
  --orb-duration: 28s;
  background: radial-gradient(circle at 55% 45%, rgba(201,166,107,0.25), rgba(201,166,107,0.02) 60%, transparent 74%);
}

@keyframes orbFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -22px, 0) scale(1.06); }
  100% { transform: translate3d(-18px, 14px, 0) scale(0.97); }
}

.vh-catalog-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.74;
  display: block;
}

.vh-catalog > .container {
  position: relative;
  z-index: 3;
}

/* Per-group color accent via border */
.vh-catalog .wine-group {
  margin-bottom: 80px;
  position: relative;
}

.vh-catalog .wine-group:last-child {
  margin-bottom: 0;
}

.vh-catalog .wine-group h3 {
  position: relative;
  margin-top: 0;
  margin-bottom: 32px;
}

.vh-catalog .wine-group h3::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: var(--gold);
  margin: 12px auto 0;
  opacity: 0.4;
}

/* Category intro images - visual separators */
.vh-category-banner {
  position: relative;
  height: 200px;
  margin-bottom: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

.vh-category-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.4);
  transition: transform 0.8s ease;
}

.vh-category-banner:hover img {
  transform: scale(1.04);
}

.vh-category-banner .vh-cat-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--text);
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  letter-spacing: 0.08em;
}

/* Wine cards - enhanced */
.vh-catalog .wine-card {
  width: min(30%, 270px);
  min-height: 340px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  backdrop-filter: blur(4px);
}

.vh-catalog .wine-card img {
  max-height: 210px;
  object-fit: contain;
}

/* Fix long wine names - prevent overflow */
.wine-card h4 {
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
  padding: 0 4px;
}

/* ---- 1903 SECTION ---- */
.vh-1903 {
  --vina-blend-h: clamp(68px, 7vw, 112px);
  position: relative;
  margin-top: calc(var(--vina-blend-h) * -1);
  padding: calc(clamp(80px, 10vw, 120px) + var(--vina-blend-h)) 0 clamp(80px, 10vw, 120px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,166,107,0.04), transparent 50%),
    linear-gradient(180deg, #090d15 0%, var(--bg-soft) 56%, var(--bg) 100%);
}

.vh-1903-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: "Cinzel", serif;
  color: rgba(201,166,107,0.035);
  font-size: clamp(10rem, 28vw, 24rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

.vh-1903 > .container {
  position: relative;
  z-index: 1;
}

/* ---- QUOTE ---- */
.vh-quote {
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,166,107,0.04), transparent 45%),
    var(--bg);
}

.vh-quote blockquote {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  color: var(--text);
  max-width: 750px;
  margin: 0 auto 36px;
  line-height: 1.55;
  position: relative;
  border: none;
  padding: 0;
}

.vh-quote-mark {
  color: var(--gold);
  font-size: 1.5em;
  opacity: 0.5;
  vertical-align: -0.15em;
}

/* scroll-progress line moved to posjetite.css */

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  .vh-float-bottle { display: none; }

  .vh-catalog,
  .vh-1903 {
    --vina-blend-h: clamp(82px, 11vw, 130px);
  }

  .vh-hero-title {
    font-size: clamp(2.8rem, 12vw, 5rem);
  }

  .vh-catalog-svg {
    inset: -1% -8%;
    width: 116%;
    opacity: 0.76;
  }

  .vh-gradient-orb {
    filter: blur(74px);
    opacity: 0.32;
  }

  .vh-catalog .wine-card {
    width: min(47%, 280px);
  }

  .vh-category-banner {
    height: 150px;
  }

  .vh-strip-track img {
    height: 90px;
  }
}

@media (max-width: 680px) {
  .vh-catalog,
  .vh-1903 {
    --vina-blend-h: clamp(64px, 16vw, 104px);
  }

  .vh-hero-title {
    font-size: clamp(2.4rem, 14vw, 3.5rem);
  }

  .vh-catalog {
    padding: clamp(44px, 7vw, 72px) 0 calc(clamp(44px, 7vw, 72px) + var(--vina-blend-h));
  }

  .vh-1903 {
    padding: calc(clamp(64px, 10vw, 92px) + var(--vina-blend-h)) 0 clamp(72px, 10vw, 96px);
  }

  .vh-catalog-svg {
    inset: -2% -4%;
    width: 108%;
    height: 104%;
    opacity: 0.84;
  }

  .vh-orb-4,
  .vh-orb-5 {
    display: none;
  }

  .vh-catalog .wine-card {
    width: min(calc(50% - 10px), 200px);
    min-height: 260px;
    padding: 18px 12px 16px;
  }

  .vh-catalog .wine-card img {
    max-height: 155px;
  }

  .wine-card h4 {
    font-size: 0.95rem;
  }

  .vh-category-banner {
    height: 120px;
    margin-bottom: 28px;
  }

  .vh-strip-track img {
    height: 70px;
  }

  .vh-quote blockquote {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-hero-img { animation: none; }
  .vh-float-bottle { animation: none; }
  .vh-strip-track { animation: none; }
  .vine-draw { stroke-dashoffset: 0; animation: none; }
  .vh-svg-vine { animation: none; }
  .vh-gradient-orb { animation: none; }
  .vh-catalog-canvas { display: none; }
}

/* Final editorial pass for wine catalog page */
.vh-hero {
  min-height: 82svh;
  justify-content: flex-start;
  align-items: center;
}

.vh-hero-img {
  transform: none;
  animation: none;
  filter: saturate(0.62) brightness(0.42) contrast(1.08);
}

.vh-vine-svg,
.vh-hero-scroll,
.vh-catalog-svg,
.vh-gradient-orb,
.vh-catalog-canvas {
  display: none !important;
}

.vh-hero-content {
  width: min(1240px, calc(100vw - 96px));
  margin: 0 auto;
  text-align: left;
  padding: 120px 0 78px;
}

.vh-hero-label {
  justify-content: flex-start;
  margin-left: 0;
}

.vh-hero-label::before,
.vh-hero-label::after {
  display: none;
}

.vh-hero-title {
  max-width: 8ch;
  font-size: clamp(4rem, 10vw, 8.8rem);
  font-weight: 400;
  letter-spacing: 0.075em;
  text-align: left;
}

.vh-title-accent {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #dbc084;
}

.vh-hero-sub {
  max-width: 42ch;
  margin: 22px 0 0;
  text-align: left;
  color: #d2cabd;
}

.vh-catalog,
.vh-1903,
.vh-quote {
  background:
    linear-gradient(90deg, rgba(240,237,230,0.018) 1px, transparent 1px),
    linear-gradient(180deg, #080806 0%, #11100c 100%) !important;
  background-size: 96px 96px, auto !important;
}

.vh-catalog::before,
.vh-catalog::after,
.vh-1903::before {
  display: none !important;
}

.vh-catalog .wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(215, 189, 130, 0.18);
  border-left: 1px solid rgba(215, 189, 130, 0.18);
}

.vh-catalog .wine-card {
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(215, 189, 130, 0.18) !important;
  border-bottom: 1px solid rgba(215, 189, 130, 0.18) !important;
  background: rgba(9, 9, 7, 0.2) !important;
  box-shadow: none !important;
  transform: none !important;
}

.vh-catalog .wine-card:hover {
  background: rgba(185, 145, 83, 0.06) !important;
}

@media (max-width: 1024px) {
  .vh-hero-content {
    width: min(100% - 56px, 1240px);
  }
}

@media (max-width: 680px) {
  .vh-hero {
    min-height: 88svh;
  }

  .vh-hero-content {
    width: min(100% - 32px, 1240px);
    padding-top: 118px;
  }

  .vh-hero-title {
    font-size: clamp(2.8rem, 14vw, 4.4rem);
  }

  .vh-catalog .wine-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 1903 GRID FIX ----
   Keep the box wide, but let the two cards stretch to fill it so the border
   matches the content (previously the border spanned full width while the
   centered cards left detached gaps). */
.vh-1903 .wine-grid.narrow {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

/* Mobile: 2 vina po redu, ime ISPOD boce (centrirano), ne sa strane */
@media (max-width: 680px) {
  .vh-catalog .wine-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .vh-catalog .wine-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 18px 10px 16px !important;
  }
  .vh-catalog .wine-card img {
    max-height: 150px !important;
    margin-bottom: 12px !important;
  }
  .vh-catalog .wine-card h4 {
    text-align: center !important;
    font-size: 0.95rem !important;
  }
}

/* ============================================
   /vina: svjetlija pozadina + brand SVG watermark,
   1903 kartice uspravne na mobitelu, neparna zadnja centrirana
   ============================================ */

/* malo svjetlija, topla pozadina cijele /vina stranice */

/* /vina remake: warm catalog system aligned with landing */
.vina-body,
body.vina-body {
  background: #f1eadf;
}

.vh-hero {
  min-height: 100svh !important;
  background: #090806;
}

.vh-hero-overlay {
  background:
    radial-gradient(70% 70% at 18% 42%, rgba(159, 116, 61, 0.14), transparent 55%),
    linear-gradient(90deg, rgba(6, 8, 16, 0.78) 0%, rgba(6, 8, 16, 0.58) 44%, rgba(6, 8, 16, 0.24) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.26) 0%, rgba(6, 8, 16, 0.1) 58%, #f1eadf 100%) !important;
}

.vh-hero-img {
  filter: saturate(0.82) brightness(0.58) contrast(1.04) !important;
}

.vh-hero-title {
  max-width: 8.5ch;
}

.vh-catalog,
.vh-quote {
  --page-paper: #f1eadf;
  --page-paper-soft: #e7dbc9;
  --page-ink: #201b16;
  --page-muted: #665d51;
  --page-line: rgba(95, 69, 45, 0.22);
  --page-wine: #6f1730;
  --page-gold: #9f743d;
  color: var(--page-ink);
  background:
    linear-gradient(90deg, rgba(95, 69, 45, 0.05) 1px, transparent 1px),
    radial-gradient(70% 80% at 0% 14%, rgba(159, 116, 61, 0.08), transparent 58%),
    linear-gradient(180deg, var(--page-paper) 0%, var(--page-paper-soft) 100%) !important;
  background-size: 96px 96px, auto, auto !important;
}

.vh-catalog .section-label span:not(.label-line),
.vh-quote .section-label span:not(.label-line) {
  color: var(--page-gold) !important;
}

.vh-catalog .label-line,
.vh-quote .label-line {
  background: var(--page-line) !important;
}

.vh-catalog .wine-group h3,
.vh-quote h2 {
  color: var(--page-ink) !important;
}

.vh-catalog .wine-grid {
  border-color: var(--page-line);
}

.vh-catalog .wine-card {
  border-right-color: var(--page-line) !important;
  border-bottom-color: var(--page-line) !important;
  background: rgba(250, 246, 238, 0.52) !important;
  color: var(--page-ink);
}

.vh-catalog .wine-card:hover {
  background: rgba(255, 252, 247, 0.78) !important;
}

.vh-catalog .wine-card-copy {
  border-top-color: var(--page-line);
}

.vh-catalog .wine-card-copy h4,
.vh-catalog .wine-card h4 {
  color: var(--page-ink) !important;
}

.vh-catalog .wine-card-copy p {
  color: var(--page-muted);
}

.vh-catalog .wine-card-copy span {
  color: var(--page-gold);
}

.vh-1903 {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #302219 0%, #1f1713 100%) !important;
  background-size: 96px 96px, auto !important;
}

.vh-quote blockquote {
  color: #201b16 !important;
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 840px;
}

.vh-quote blockquote::before {
  content: "";
  display: block;
  width: min(180px, 34vw);
  height: 1px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  background: linear-gradient(90deg, transparent, #6f1730, transparent);
}

.vh-quote blockquote::after {
  content: "";
  display: block;
  width: min(96px, 24vw);
  height: 1px;
  margin: clamp(22px, 3vw, 34px) auto 0;
  background: rgba(95, 69, 45, 0.24);
}

.vh-quote-mark {
  color: #6f1730 !important;
  opacity: 0.62;
}

.vh-quote .btn,
.vh-quote .btn-wine {
  background: #6f1730 !important;
  border-color: #6f1730 !important;
  color: #fff8ef !important;
  box-shadow: 0 14px 30px rgba(111, 23, 48, 0.16);
}

.vh-quote .btn:hover,
.vh-quote .btn-wine:hover {
  background: #571126 !important;
  border-color: #571126 !important;
  color: #fff8ef !important;
}

body.vina-body .site-header {
  background: rgba(32, 27, 22, 0.96) !important;
  border-bottom: 1px solid rgba(215, 189, 130, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vh-hero-overlay {
  background:
    radial-gradient(70% 70% at 18% 42%, rgba(159, 116, 61, 0.14), transparent 55%),
    linear-gradient(90deg, rgba(6, 8, 16, 0.8) 0%, rgba(6, 8, 16, 0.58) 44%, rgba(6, 8, 16, 0.28) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.3) 0%, rgba(6, 8, 16, 0.14) 70%, rgba(6, 8, 16, 0.52) 100%) !important;
}

.vh-1903 .wine-card {
  background: rgba(255, 255, 255, 0.025) !important;
}

@media (max-width: 680px) {
  .vh-hero {
    min-height: 100svh !important;
  }

  .vh-hero-content {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 92px !important;
    padding-bottom: 64px !important;
  }
}
.vh-catalog,
.vh-1903,
.vh-quote {
  background:
    linear-gradient(90deg, rgba(240, 237, 230, 0.02) 1px, transparent 1px),
    linear-gradient(180deg, #0b0a08 0%, #14110b 55%, #0b0a08 100%) !important;
  background-size: 96px 96px, auto !important;
}

/* brand SVG kao suptilan watermark u katalogu (da malo "probudi") */
.vh-catalog::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("../converted_no_bg_clean.svg") center 110px / min(520px, 80vw) auto no-repeat !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
}

/* mobitel: 1903 kartice uspravne (ime ISPOD boce) */
@media (max-width: 680px) {
  .vh-1903 .wine-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 18px 10px 16px !important;
  }
  .vh-1903 .wine-card img {
    max-height: 150px !important;
    margin-bottom: 12px !important;
  }
  .vh-1903 .wine-card h4 {
    text-align: center !important;
    font-size: 0.95rem !important;
  }

  /* neparan zadnji u redu (2 stupca) -> preko cijele širine, sadržaj centriran */
  .vh-catalog .wine-grid > .wine-card:last-child:nth-child(odd),
  .vh-1903 .wine-grid > .wine-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

/* Final /vina override: keep catalog light after legacy dark block */
.vh-catalog,
.vh-quote {
  --page-paper: #f1eadf;
  --page-paper-soft: #e7dbc9;
  --page-ink: #201b16;
  --page-muted: #665d51;
  --page-line: rgba(95, 69, 45, 0.22);
  --page-wine: #6f1730;
  --page-gold: #9f743d;
  color: var(--page-ink);
  background:
    linear-gradient(90deg, rgba(95, 69, 45, 0.05) 1px, transparent 1px),
    radial-gradient(70% 80% at 0% 14%, rgba(159, 116, 61, 0.08), transparent 58%),
    linear-gradient(180deg, var(--page-paper) 0%, var(--page-paper-soft) 100%) !important;
  background-size: 96px 96px, auto, auto !important;
}

.vh-catalog::before {
  background: url("../converted_no_bg_clean.svg") center 110px / min(520px, 80vw) auto no-repeat !important;
  opacity: 0.035 !important;
}

.vh-catalog .wine-group h3,
.vh-quote h2,
.vh-catalog .wine-card-copy h4,
.vh-catalog .wine-card h4 {
  color: var(--page-ink) !important;
}

.vh-catalog .wine-card {
  border-right-color: var(--page-line) !important;
  border-bottom-color: var(--page-line) !important;
  background: rgba(250, 246, 238, 0.52) !important;
  color: var(--page-ink);
}

.vh-catalog .wine-card:hover {
  background: rgba(255, 252, 247, 0.78) !important;
}

.vh-catalog .wine-card-copy {
  border-top-color: var(--page-line);
}

.vh-catalog .wine-card-copy p {
  color: var(--page-muted);
}

.vh-catalog .wine-card-copy span,
.vh-catalog .section-label span:not(.label-line),
.vh-quote .section-label span:not(.label-line) {
  color: var(--page-gold) !important;
}

.vh-1903 {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #302219 0%, #1f1713 100%) !important;
  background-size: 96px 96px, auto !important;
}