/*--------------------------------------------------------------
  FOMOGO ZANNA HERO SECTION
  File: swarna-child/assets/css/zanna-hero.css
  Theme: Swarna Child
  Scope: Zanna Collection Category Page Only
--------------------------------------------------------------*/

/* Prevent horizontal overflow across page */
body.swarna-child-zanna-collection,
body.term-zanna-collection {
  overflow-x: hidden !important;
}

/* =============================================================
   KEYFRAMES: LUXURY REVEAL ANIMATIONS
   ============================================================= */
@keyframes zannaFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zannaFadeInRight {
  0% {
    opacity: 0;
    transform: translateX(45px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================================
   HERO BACKGROUND: NATIVE FOMOGO / SWARNA IVORY & LEAF ATMOSPHERE
   Continuous ivory surface from header through hero
   ============================================================= */

/* Header Wrapper on Zanna category: continuous native ivory tone.
   isolation:isolate keeps z-index:-1 leaf layer ABOVE this cream fill
   without changing header/hero geometry. */
body.swarna-child-zanna-collection #header-wrapper,
body.term-zanna-collection #header-wrapper {
  background-color: var(--wdtTertiaryColor, #fdf9f4) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Header sits transparently on the continuous ivory surface */
body.swarna-child-zanna-collection #header,
body.term-zanna-collection #header,
body.swarna-child-zanna-collection #header .wdt-no-header-builder-content,
body.term-zanna-collection #header .wdt-no-header-builder-content,
body.swarna-child-zanna-collection #header .no-header,
body.term-zanna-collection #header .no-header {
  background: transparent !important;
  background-color: transparent !important;
}

/* Zanna Hero Section: static wrapper so .main-title-section-bg spans #header-wrapper */
.zanna-collection-hero,
.main-title-section-wrapper.zanna-collection-hero,
body .zanna-collection-hero {
  position: static !important;
  float: left !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Inner content wrappers remain 100% transparent */
.zanna-collection-hero .main-title-section-container,
.zanna-collection-hero .main-title-section,
.zanna-hero__container,
.zanna-hero__inner,
.zanna-hero__grid,
.zanna-hero__col,
.zanna-hero__copy,
.zanna-hero__story-inner,
.zanna-hero__figure {
  background: transparent !important;
  background-color: transparent !important;
}

/* ONE native leaf layer only — match Kadın philosophy.
   breadcrumb-bg.png contains opaque WHITE fills around leaf drawings.
   On Kadın those wash into near-white body; on Zanna's warmer cream they
   read as white panels. background-blend-mode:multiply removes white
   while keeping gray leaf shadows. NO repeat / NO tiling. */
.zanna-collection-hero > .main-title-section-bg {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--wdtTertiaryColor, #fdf9f4) !important;
  background-image: var(--wdt-breadcrumb-bg-image, url('../images/breadcrumb-bg.png')) !important;
  background-blend-mode: multiply !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-attachment: inherit !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Soft overlay — keep lighter than Kadın 0.8 so multiply leaves stay visible */
.zanna-collection-hero.overlay-wrapper > .main-title-section-bg:after,
.zanna-collection-hero > .main-title-section-bg:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--wdtTertiaryColor, #fdf9f4) !important;
  background-image: none !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* Remove decorative watermark word if any */
.zanna-hero__watermark {
  content: none !important;
  display: none !important;
}

/* =============================================================
   HERO CONTAINER & INNER WRAPPERS
   Structural fix for model top clipping:
   - container has generous min-height
   - overflow visible so model head/hair is never chopped off
   ============================================================= */
.zanna-collection-hero .main-title-section-container,
.zanna-hero__container,
body .zanna-hero__container {
  position: relative !important;
  float: left !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: clamp(35px, 3.5vw, 65px) 4% 0 !important;
  padding-bottom: 0 !important;
  min-height: clamp(560px, 48vw, 700px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.zanna-collection-hero .main-title-section,
.zanna-hero__inner {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: inherit !important;
  overflow: visible !important;
}

/* =============================================================
   HERO LAYOUT: ALIGNED LEFT/CENTER CONTENT + FLUSH RIGHT MODEL
   ============================================================= */
.zanna-collection-hero .zanna-hero__grid,
.zanna-hero__grid,
body .zanna-hero__grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(24px, 3.5vw, 60px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(500px, 44vw, 640px) !important;
  position: static !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Hide mobile-only CTA on desktop */
.zanna-hero__mobile-cta,
.zanna-collection-hero .zanna-hero__mobile-cta {
  display: none !important;
}

/* =============================================================
   COLUMN 1: LEFT CONTENT (Eyebrow, Title, Breadcrumb, CTA)
   ============================================================= */
.zanna-hero__col--left {
  flex: 0 0 clamp(240px, 20vw, 300px) !important;
  max-width: 320px !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  text-align: left !important;
  padding: 20px 0 30px !important;
  animation: zannaFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0s !important;
}

.zanna-hero__copy {
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
}

.zanna-hero__eyebrow {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--wdtPrimaryColor, #ac805d) !important;
  font-family: var(--wdtFontTypo_Base, inherit) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

.zanna-hero__title {
  margin: 0 0 12px !important;
  color: var(--wdtHeadAltColor, #000) !important;
  font-family: var(--wdtFontTypo_Alt, var(--wdtFontTypo_Base, inherit)) !important;
  font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  word-break: break-word !important;
}

.zanna-hero__breadcrumb.breadcrumb {
  float: none !important;
  clear: both !important;
  width: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.zanna-hero__description {
  margin: 0 0 20px !important;
  color: var(--wdtBodyTxtColor, #585858) !important;
  font-family: var(--wdtFontTypo_Base, inherit) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

.zanna-hero__actions {
  margin: 0 !important;
}

.zanna-hero__cta.wdt-button {
  display: inline-block !important;
  margin: 0 !important;
  padding: 13px 30px !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  background-color: var(--wdtPrimaryColor, #ac805d) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.zanna-hero__cta.wdt-button:hover,
.zanna-hero__cta.wdt-button:focus {
  background-color: var(--wdtHeadAltColor, #000) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* =============================================================
   COLUMN 2: CENTER EDITORIAL STORY & SIGNATURE
   ============================================================= */
.zanna-hero__col--center {
  flex: 0 1 clamp(280px, 26vw, 380px) !important;
  max-width: 400px !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  text-align: left !important;
  padding: 20px 0 20px !important;
  animation: zannaFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.2s !important;
}

.zanna-hero__story-inner {
  margin: 0 !important;
  padding: 0 !important;
}

.zanna-hero__story-p {
  margin: 0 0 10px !important;
  color: var(--wdtBodyTxtColor, #525252) !important;
  font-family: var(--wdtFontTypo_Base, inherit) !important;
  font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
}

.zanna-hero__story-p:last-of-type {
  margin-bottom: 8px !important;
}

/* Handwritten Signature */
.zanna-hero__signature-wrap {
  display: block !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.zanna-hero__signature {
  display: block !important;
  width: 120px !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* =============================================================
   COLUMN 3: RIGHT MODEL (Anchored Flush to Bottom-Right)
   Approved Large Composition: starts ~44% width, center ~72% width
   Full important subject (face, hair, shoulders, jewelry) intact.
   ============================================================= */
.zanna-hero__col--right {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  width: clamp(740px, 88vw, 1774px) !important;
  max-width: 88vw !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  animation: zannaFadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.4s !important;
}

.zanna-hero__figure {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.zanna-hero__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1774 / 887 !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zanna-hero__col--left,
  .zanna-hero__col--center,
  .zanna-hero__col--right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   ============================================================= */

/* Tablet (1024px and below) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .zanna-collection-hero .main-title-section-container,
  .zanna-hero__container {
    min-height: 520px !important;
    padding-top: 40px !important;
  }

  .zanna-collection-hero .zanna-hero__grid,
  .zanna-hero__grid {
    gap: 20px !important;
    min-height: 480px !important;
  }

  .zanna-hero__col--left {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }

  .zanna-hero__col--center {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .zanna-hero__col--right {
    width: min(85vw, 1050px) !important;
    max-width: 85vw !important;
    opacity: 0.88 !important;
  }
}

/* Mobile (767px and below) */
@media only screen and (max-width: 767px) {
  .zanna-collection-hero .main-title-section-container,
  .zanna-hero__container {
    padding: 35px 20px 25px !important;
    min-height: auto !important;
  }

  .zanna-collection-hero .zanna-hero__grid,
  .zanna-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: auto !important;
    width: 100% !important;
  }

  .zanna-hero__col--left {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 0 15px !important;
  }

  .zanna-hero__copy {
    text-align: center !important;
  }

  .zanna-hero__breadcrumb.breadcrumb {
    text-align: center !important;
  }

  .zanna-hero__actions--desktop {
    display: none !important;
  }

  .zanna-hero__col--center {
    order: 2 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 0 15px !important;
    margin: 0 auto !important;
  }

  .zanna-hero__signature-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }

  .zanna-hero__signature {
    margin: 0 auto !important;
    width: 110px !important;
  }

  .zanna-hero__col--right {
    order: 3 !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
  }

  .zanna-hero__mobile-cta {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 20px !important;
  }
}

/* =============================================================
   HERO -> PRODUCT SECTION SPACING
   Clean, natural vertical rhythm matching Kadın category
   ============================================================= */
body.term-zanna-collection #header-wrapper,
body.swarna-child-zanna-collection #header-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.term-zanna-collection .zanna-collection-hero,
body.swarna-child-zanna-collection .zanna-collection-hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.term-zanna-collection #main,
body.swarna-child-zanna-collection #main {
  margin-top: 0 !important;
}

/* =============================================================
   PRODUCT GRID: UNIFORM 3:4 IMAGE FRAME STANDARDIZATION
   Scope: Zanna Collection Category Only (Zero global bleed)
   Preserves Swarna's inner primary/secondary hover fade transitions

   IMPORTANT: `.woocommerce` lives on BODY on this site — use the
   compound body selector, NOT a descendant `.woocommerce` combinator.
   ============================================================= */
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb,
body.swarna-child-zanna-collection ul.products li.product .product-thumb {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Ensure padding-based ratio pseudo elements do not conflict */
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb::before,
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb::after,
body.swarna-child-zanna-collection ul.products li.product .product-thumb::before,
body.swarna-child-zanna-collection ul.products li.product .product-thumb::after {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* Standardize the outer product thumbnail image viewport to 3:4 */
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb a.image,
body.swarna-child-zanna-collection ul.products li.product .product-thumb a.image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  float: none !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep CSS grid overlay alignment intact for images and thumb content */
body.term-zanna-collection.woocommerce ul.products li.product .product-wrapper .product-thumb > a,
body.swarna-child-zanna-collection ul.products li.product .product-wrapper .product-thumb > a,
body.term-zanna-collection.woocommerce ul.products li.product .product-wrapper .product-thumb > .product-thumb-content,
body.swarna-child-zanna-collection ul.products li.product .product-wrapper .product-thumb > .product-thumb-content {
  grid-area: 1 / -1 !important;
}

/* Primary and secondary image layers occupy the exact same frame */
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb a.image > .primary-image,
body.swarna-child-zanna-collection ul.products li.product .product-thumb a.image > .primary-image,
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb a.image > .secondary-image,
body.swarna-child-zanna-collection ul.products li.product .product-thumb a.image > .secondary-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Inner images fill the uniform 3:4 frame without distortion or stretching */
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb a.image > .primary-image img,
body.swarna-child-zanna-collection ul.products li.product .product-thumb a.image > .primary-image img,
body.term-zanna-collection.woocommerce ul.products li.product .product-thumb a.image > .secondary-image img,
body.swarna-child-zanna-collection ul.products li.product .product-thumb a.image > .secondary-image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}