/* ZARINOVA — editorial homepage enhancement for the existing Tead OpenCart theme.
   Scoped to body.home-page and #zarinova-home; existing shop flows stay intact. */

body.home-page { background: #fffdf9; color: #302b28; overflow-x: hidden; }
body.home-page #zarinova-home { overflow: clip; }
body.home-page a:focus-visible,
body.home-page button:focus-visible { outline: 2px solid #826b46; outline-offset: 4px; }

.zv-home .zv-hero {
  position: relative;
  display: flex;
  min-height: clamp(530px, 50vw, 735px);
  max-width: 1720px;
  margin: 0 auto;
  background: #eee4d6;
  isolation: isolate;
  overflow: hidden;
}
.zv-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}
.zv-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(250,246,239,.96) 0%, rgba(250,246,239,.83) 24%, rgba(250,246,239,.30) 51%, rgba(250,246,239,0) 74%);
}
.zv-hero__content {
  width: min(760px, 62%);
  padding: clamp(75px, 8vw, 142px) 0 88px clamp(32px, 6.2vw, 115px);
  position: relative;
  z-index: 2;
}
.zv-eyebrow {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #846c49;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .27em;
}
.zv-eyebrow__line { width: 27px; height: 1px; background: currentColor; }
.zv-hero h1 {
  margin: 27px 0 21px;
  color: #342f2b;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(56px, 5.75vw, 100px);
  letter-spacing: -.042em;
  line-height: .99;
}
.zv-hero h1 em { font-weight: 400; color: #9d8359; }
.zv-hero p {
  max-width: 398px;
  color: #645d55;
  line-height: 1.9;
  font-size: 15px;
  margin: 0 0 32px;
}
.zv-hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.zv-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; letter-spacing: .07em; font-size: 12px; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }
.zv-button--primary { padding: 17px 24px; min-height: 52px; color: #fff; background: #3a332d; }
.zv-button--primary:hover, .zv-button--primary:focus { color: #fff; background: #836c4d; transform: translateY(-2px); text-decoration: none; }
.zv-button--text { color: #3a332d; padding: 12px 0; border-bottom: 1px solid #a88e6d; }
.zv-button--text:hover, .zv-button--text:focus { color: #8d7148; text-decoration: none; }
.zv-hero__footnote { margin-top: 60px; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: #a09281; }
.zv-hero__index { position: absolute; bottom: 26px; right: 37px; font-size: 10px; letter-spacing: .25em; color: rgba(47,42,37,.65); }

.zv-collections-intro { max-width: 1300px; margin: 86px auto 35px; text-align: center; padding: 0 22px; }
.zv-collections-intro__label { font-size: 11px; font-weight: 700; letter-spacing: .27em; color: #a1865d; }
.zv-collections-intro h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(44px, 4.2vw, 65px); font-weight: 500; margin: 6px 0 5px; color: #302b28; }
.zv-collections-intro h2 em { color: #a1865d; font-weight: 400; }
.zv-collections-intro p { margin: 0; font-size: 14px; color: #7d756d; }

body.home-page #common-home { max-width: 1520px; margin: 0 auto; }
body.home-page #common-home #content { padding-left: 20px; padding-right: 20px; }
body.home-page #common-home #content > .row.product-layout:first-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 30px;
  margin: 0 auto 65px;
}
body.home-page #common-home #content > .row.product-layout:first-child .category-layout {
  float: none;
  width: 100% !important;
  padding: 0 12px;
}
body.home-page #common-home #content > .row.product-layout:first-child .product-thumb.transition2 {
  max-width: 222px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 1px solid #e5d7c6;
  background: #faf7f1;
  box-shadow: 0 8px 24px rgba(50,39,27,.045);
}
body.home-page #common-home #content > .row.product-layout:first-child .product-thumb.transition2:hover { border-color: #ad977b; opacity: 1; transform: translateY(-5px); }
body.home-page #common-home #content > .row.product-layout:first-child .caption h4 a { color: #3b342f; font-size: 14px; font-weight: 600; letter-spacing: .025em; }
body.home-page #common-home #content > .row.product-layout:first-child .caption h4 a:hover { color: #947754; }

@media (max-width: 991px) {
  .zv-hero__content { width: 68%; padding: 90px 0 80px 48px; }
  .zv-hero__veil { background: linear-gradient(90deg, rgba(250,246,239,.97) 0%, rgba(250,246,239,.82) 38%, rgba(250,246,239,0) 80%); }
  body.home-page #common-home #content > .row.product-layout:first-child { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
}
@media (max-width: 767px) {
  .zv-home .zv-hero { min-height: 660px; align-items: flex-end; }
  .zv-hero__image { object-position: 65% 0%; height: 72%; top: 0; bottom: auto; }
  .zv-hero__veil { background: linear-gradient(0deg, #f8f1e7 0%, #f8f1e7 32%, rgba(248,241,231,.84) 51%, rgba(248,241,231,0) 79%); }
  .zv-hero__content { width: 100%; padding: 305px 24px 40px; }
  .zv-hero h1 { font-size: clamp(50px, 12vw, 70px); margin: 20px 0 12px; }
  .zv-hero p { max-width: 420px; font-size: 13px; line-height: 1.7; margin-bottom: 24px; }
  .zv-hero__footnote, .zv-hero__index { display: none; }
  .zv-button--primary { padding: 14px 18px; }
  .zv-hero__actions { gap: 18px; }
  .zv-collections-intro { margin: 55px auto 28px; }
  body.home-page #common-home #content { padding-left: 14px; padding-right: 14px; }
  body.home-page #common-home #content > .row.product-layout:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 8px; margin-bottom: 44px; }
  body.home-page #common-home #content > .row.product-layout:first-child .category-layout { padding: 0 7px; }
  body.home-page #common-home #content > .row.product-layout:first-child .product-thumb.transition2 { max-width: 162px; }
  body.home-page #common-home #content > .row.product-layout:first-child .caption h4 a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .zv-home *, .zv-home *::before, .zv-home *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}