/** Shopify CDN: Minification failed

Line 100:0 All "@import" rules must come first

**/
/* ==========================================================================
   ROBERTO - COMPLEMENTARY PRODUCTS FIXES
   1. Show only 1 product at a time (full-width card with button)
   2. Fix "Завърши визията" heading to match Roberto serif style
   3. Hide duplicate product title on image
   ========================================================================== */

/* =========================================================
   FIX 1: SINGLE PRODUCT VIEW - Show 1 item at a time
   ========================================================= */

/* Force slider to show only 1 product */
body .complementary-products__container .complementary-slider,
body .section-complementary-products .complementary-slider,
body product-recommendations .complementary-slider {
  --per-page: 1 !important;
}

/* Slide takes full width */
body .complementary-products__container .complementary-slide,
body .section-complementary-products .complementary-slide,
body product-recommendations .complementary-slide {
  width: 100% !important;
  min-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Card takes full width */
body .complementary-products__container .card--horizontal,
body .section-complementary-products .card--horizontal,
body product-recommendations .card--horizontal {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure proper horizontal layout */
@media screen and (min-width: 750px) {
  body .complementary-products__container .card--horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
  }
  
  /* Image - fixed width */
  body .complementary-products__container .card--horizontal .card__inner {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex-shrink: 0 !important;
  }
  
  /* Content area - flexible */
  body .complementary-products__container .card--horizontal .card__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
  }
  
  /* Product info */
  body .complementary-products__container .card--horizontal .card__information {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  /* Quick add button - auto width, not cramped */
  body .complementary-products__container .card--horizontal .quick-add {
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 200px !important;
  }
}

/* =========================================================
   FIX 0: SECTION PADDING - 48px top
   ========================================================= */

html body .section-complementary-products,
html body product-recommendations,
html body [class*="complementary-products"] {
  padding-top: 48px !important;
}

/* =========================================================
   FIX 2: SECTION HEADING - Roberto Serif Style
   "Завърши визията" should be Cormorant Garamond
   FORCED with inline @font-face fallback
   ========================================================= */

/* Import Cormorant Garamond directly as backup */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&display=swap');

/* NUCLEAR OVERRIDE: Use attribute selector + element for max specificity */
html body .complementary-products__heading,
html body .section-complementary-products .complementary-products__heading,
html body product-recommendations .complementary-products__heading,
html body .product-recommendations__heading,
html body [class*="complementary"] h2,
html body [class*="complementary"] .h2,
html body .section-complementary-products h2,
html body .section-complementary-products .h2,
html body product-recommendations h2,
html body product-recommendations .h2,
html body .complementary-products > h2,
html body .complementary-products__container > h2,
html body h2.complementary-products__heading,
html body .section-complementary-products h2.title,
html body product-recommendations h2.title,
html body [class*="complementary-products"] h2[class],
html body [class*="complementary-products"] .title,
html body .complementary-products h2,
html body .complementary-products .title {
  /* FORCE Cormorant Garamond - Direct reference with !important on each property */
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: #0B0B0B !important;
  text-transform: none !important;
  
  /* Spacing */
  margin-bottom: 2rem !important;
  padding: 0 !important;
  
  /* Reset any inherited styles */
  text-decoration: none !important;
  font-variant: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Also target by ID if ROA uses one */
html body #complementary-products-heading,
html body [id*="complementary"] h2,
html body [id*="recommendation"] h2 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
}

@media screen and (max-width: 749px) {
  html body .complementary-products__heading,
  html body .section-complementary-products .complementary-products__heading,
  html body product-recommendations .complementary-products__heading,
  html body [class*="complementary"] h2,
  html body .complementary-products__heading {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 24px !important;
    margin-bottom: 1.5rem !important;
  }
}

/* =========================================================
   FIX 3: QUICK ADD BUTTON - Roberto Primary Style
   ========================================================= */

body .complementary-products__container .quick-add__submit,
body .section-complementary-products .quick-add__submit,
body product-recommendations .quick-add__submit {
  /* Roberto Primary Button */
  background-color: var(--ink-black, #0B0B0B) !important;
  color: var(--soft-white, #FFFFFF) !important;
  border: none !important;
  border-radius: 0 !important;
  
  /* Typography - UPPERCASE */
  font-family: var(--font-body-family, 'Inter', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  
  /* Sizing */
  padding: 1rem 1.5rem !important;
  min-height: 48px !important;
  width: 100% !important;
  
  /* Interaction */
  transition: opacity 0.3s ease !important;
  cursor: pointer !important;
}

body .complementary-products__container .quick-add__submit:hover,
body .section-complementary-products .quick-add__submit:hover {
  opacity: 0.9 !important;
  background-color: var(--ink-black, #0B0B0B) !important;
}

/* Desktop: Button auto-width */
@media screen and (min-width: 750px) {
  body .complementary-products__container .quick-add__submit {
    width: auto !important;
    min-width: 200px !important;
    padding: 1rem 2rem !important;
  }
}

/* ==========================================================================
   FIX 4: HIDE DUPLICATE PRODUCT TITLE ON IMAGE
   The ROA theme outputs the product title twice:
   1. Inside .card__inner/.card__media (as image overlay) - HIDE THIS
   2. Inside .card__information (correct location) - KEEP THIS
   ========================================================================== */

/* =========================================================
   NUCLEAR OPTION: Hide ALL text content inside image area
   Target: .card__inner and .card__media descendants
   ========================================================= */

/* Hide heading inside image container - Maximum specificity */
body .complementary-products__container .card__inner .card__heading,
body .complementary-products__container .card__inner .card__heading a,
body .complementary-products__container .card__inner h2,
body .complementary-products__container .card__inner h3,
body .complementary-products__container .card__inner h4,
body .complementary-products__container .card__inner .h2,
body .complementary-products__container .card__inner .h3,
body .complementary-products__container .card__media .card__heading,
body .complementary-products__container .card__media .card__heading a,
body .complementary-products__container .card__media h2,
body .complementary-products__container .card__media h3,
body .complementary-products__container .card__media h4,
body .complementary-products__container .card__media .h2,
body .complementary-products__container .card__media .h3,
body .section-complementary-products .card__inner .card__heading,
body .section-complementary-products .card__inner .card__heading a,
body .section-complementary-products .card__media .card__heading,
body .section-complementary-products .card__media .card__heading a,
body product-recommendations .card__inner .card__heading,
body product-recommendations .card__inner .card__heading a,
body product-recommendations .card__media .card__heading,
body product-recommendations .card__media .card__heading a {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
}

/* Also hide any link text that's not wrapping an image */
body .complementary-products__container .card__inner a:not(:has(img)):not(.card__media-link),
body .complementary-products__container .card__media a:not(:has(img)):not(.card__media-link) {
  display: none !important;
}

/* Hide any card-content that appears inside card__inner (wrong location) */
body .complementary-products__container .card__inner .card__content,
body .complementary-products__container .card__media .card__content {
  display: none !important;
}

/* =========================================================
   ENSURE: Keep the CORRECT heading visible
   Target: .card__information .card__heading
   ========================================================= */

body .complementary-products__container .card__information .card__heading,
body .complementary-products__container .card__information .card__heading a,
body .complementary-products__container .card__content .card__information .card__heading,
body .complementary-products__container .card__content .card__information .card__heading a,
body .section-complementary-products .card__information .card__heading,
body .section-complementary-products .card__information .card__heading a,
body product-recommendations .card__information .card__heading,
body product-recommendations .card__information .card__heading a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Roberto Typography */
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: var(--ink-black, #0B0B0B) !important;
  text-decoration: none !important;
}

/* Hover state for correct heading */
body .complementary-products__container .card__information .card__heading a:hover,
body .section-complementary-products .card__information .card__heading a:hover,
body product-recommendations .card__information .card__heading a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--aubergine, #3B1B4A) !important;
}

/* =========================================================
   ALTERNATIVE: If above doesn't work, target by position
   Some themes use absolute positioning for overlays
   ========================================================= */

/* Hide any absolutely positioned text over images */
body .complementary-products__container .card__inner [style*="position: absolute"],
body .complementary-products__container .card__media [style*="position: absolute"],
body .complementary-products__container .card .card__heading[class*="absolute"],
body .complementary-products__container .card .card__heading[class*="overlay"] {
  display: none !important;
}

/* Hide card overlay content */
body .complementary-products__container .card__inner .card-information,
body .complementary-products__container .card__media .card-information,
body .complementary-products__container .card__inner .card__badge-container + .card__heading,
body .complementary-products__container .card__inner .motion-reduce + .card__heading {
  display: none !important;
}

/* =========================================================
   ROA THEME SPECIFIC: Target known ROA card structures
   ========================================================= */

/* ROA uses .card--media variant which shows title on image */
body .complementary-products__container .card--media .card__inner .card__content,
body .complementary-products__container .card--media .card__media .card__content {
  display: none !important;
}

/* ROA card with image overlay text */
body .complementary-products__container .card__inner .card__information--wrapper,
body .complementary-products__container .card__media + .card__heading {
  display: none !important;
}

/* =========================================================
   CLEANUP: Remove any overlay styling on images
   ========================================================= */

body .complementary-products__container .card__inner::after,
body .complementary-products__container .card__media::after {
  display: none !important;
  content: none !important;
}

/* Remove gradient overlays that might be under text */
body .complementary-products__container .card__inner .card__media::before,
body .complementary-products__container .card__media::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* =========================================================
   DEBUG: Temporary outline to identify elements
   Uncomment these to see what's happening
   ========================================================= */

/*
body .complementary-products__container .card__inner {
  outline: 3px solid red !important;
}

body .complementary-products__container .card__information {
  outline: 3px solid green !important;
}

body .complementary-products__container .card__heading {
  outline: 2px dashed blue !important;
}
*/