/** Shopify CDN: Minification failed

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

**/
/* ============================================
   SARAI COSMETICS — Luxury Design System v3.0
   AGGRESSIVE overrides — all !important
   ============================================ */

:root {
  --gold: #b8965a;
  --gold-light: #d4b87a;
  --gold-dark: #8b6d3f;
  --gold-glow: rgba(184, 150, 90, 0.3);
  --black: #1a1b18;
  --cream: #f5f0e8;
  --white: #ffffff;
  /* Brand teal palette — accent only, see brand guide ~10% usage */
  --teal: #66AEB0;
  --teal-soft: #AFCFD1;
  --teal-tint: #F4FAFA;  /* very light teal-tinted white */
  --teal-glow: rgba(102, 174, 176, 0.3);
}

/* ===========================================
   1. FULL-WIDTH HEROES
   =========================================== */
.page-width.page-width--full-width {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.banner, .banner__media {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===========================================
   2. GLOBAL TYPOGRAPHY — BIGGER, BOLDER
   =========================================== */
h1, .h0 {
  font-size: clamp(3rem, 5.5vw, 5rem) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05 !important;
}
h2, .h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.1 !important;
}
h3, .h2, .h3 {
  font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
  letter-spacing: 0.04em !important;
}

/* Italic emphasis in headings = gold */
h1 em, h2 em, h3 em, .h0 em, .h1 em, .h2 em {
  color: var(--gold) !important;
  font-style: italic !important;
}

/* Section headings — gold underline bar */
.section__heading {
  letter-spacing: 0.06em !important;
  padding-bottom: 24px !important;
}
.section__heading::after {
  content: '' !important;
  display: block !important;
  width: 80px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gold), var(--teal)) !important;
  margin: 20px auto 0 !important;
}

/* Navigation — high-fashion */
.header__menu-item, .header__menu-item span {
  letter-spacing: 0.18em !important;
  font-weight: 400 !important;
  font-size: 0.75em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
}
.header__menu-item:hover, .header__menu-item:hover span {
  color: var(--teal) !important;
}

/* Body text */
.rte p, .rte li {
  line-height: 1.85 !important;
  letter-spacing: 0.015em !important;
}

/* Banner text */
.banner__subheading {
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 0.85em !important;
}

/* ===========================================
   3. SECTION PADDING — FORCE LUXURY SPACING
   =========================================== */
@media (min-width: 750px) {
  .section-padding {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

/* Smaller padding for utility sections */
[id*="scrolling-marquee"] .section-padding,
[id*="bottom-marquee"] .section-padding,
[id*="press-logos"] .section-padding {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Hero — no padding, capped height */
[id*="hero-banner"] .section-padding,
[id*="hero-banner"] .banner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
[id*="hero-banner"] .banner,
[id*="hero-banner"] .banner__media {
  max-height: 75vh !important;
  overflow: hidden !important;
}
[id*="hero-banner"] .banner__media img {
  object-fit: contain !important;
  object-position: center center !important;
  height: 75vh !important;
  width: 100% !important;
  background-color: var(--black) !important;
}

@media (max-width: 749px) {
  [id*="hero-banner"] .banner,
  [id*="hero-banner"] .banner__media {
    max-height: 60vh !important;
  }
  [id*="hero-banner"] .banner__media img {
    height: 60vh !important;
  }
}

@media (max-width: 749px) {
  .section-padding {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ===========================================
   4. BRAND PILLARS — FORCE DARK BG
   =========================================== */
[id*="brand-pillars"],
[id*="brand-pillars"] .section-padding,
[id*="brand-pillars"] .guarantees,
[id*="brand-pillars"] .icon-with-text {
  background-color: var(--black) !important;
  color: var(--gold) !important;
}
[id*="brand-pillars"] h2,
[id*="brand-pillars"] .section__heading,
[id*="brand-pillars"] p,
[id*="brand-pillars"] span,
[id*="brand-pillars"] .guarantees__heading,
[id*="brand-pillars"] .icon-with-text__heading {
  color: var(--gold) !important;
}
[id*="brand-pillars"] .section__heading::after {
  background: linear-gradient(90deg, var(--gold), transparent) !important;
}
[id*="brand-pillars"] .guarantees__item,
[id*="brand-pillars"] .icon-with-text__item {
  border-color: rgba(184, 150, 90, 0.2) !important;
}
[id*="brand-pillars"] svg,
[id*="brand-pillars"] .icon path {
  stroke: var(--gold) !important;
  fill: none !important;
}
[id*="brand-pillars"] .section-padding {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ===========================================
   5. SHOP BY CATEGORY — CREAM BG, BIGGER
   =========================================== */
[id*="shop-categories"],
[id*="shop-categories"] .section-padding {
  background-color: var(--cream) !important;
}
[id*="shop-categories"] .multicolumn-card {
  background: var(--white) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
  overflow: hidden !important;
}
[id*="shop-categories"] .multicolumn-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}
[id*="shop-categories"] .multicolumn-card .media img {
  transition: transform 0.7s ease !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  transform: scale(0.92) !important;
}
[id*="shop-categories"] .multicolumn-card:hover .media img {
  transform: scale(1.03) !important;
}
[id*="shop-categories"] .multicolumn-card__info h3,
[id*="shop-categories"] .multicolumn-card__info .h3 {
  font-size: 1.3rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 20px !important;
}

/* ===========================================
   6. FOUNDER SECTION — FORCE DARK BG
   =========================================== */
[id*="founder-section"],
[id*="founder-section"] .section-padding,
[id*="founder-section"] .image-with-text,
[id*="founder-section"] .image-with-text__text-item,
[id*="founder-section"] .image-with-text__content,
[id*="founder-section"] .grid__item,
[id*="founder-section"] .image-with-text__content--top,
[id*="founder-section"] .image-with-text__content--middle,
[id*="founder-section"] .image-with-text__content--bottom,
[id*="founder-section"] > div,
[id*="founder-section"] * {
  background-color: var(--black) !important;
  color: var(--white) !important;
}
[id*="founder-section"] h2,
[id*="founder-section"] p,
[id*="founder-section"] span,
[id*="founder-section"] a:not(.button),
[id*="founder-section"] .image-with-text__heading,
[id*="founder-section"] .image-with-text__text {
  color: var(--white) !important;
}
[id*="founder-section"] .button--secondary,
[id*="founder-section"] .button {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: transparent !important;
}
[id*="founder-section"] .button--secondary:hover,
[id*="founder-section"] .button:hover {
  background: var(--gold) !important;
  color: var(--white) !important;
}

/* ===========================================
   7. STATS SECTION — BOLD GOLD BANNER
   =========================================== */
[id*="stats-section"],
[id*="stats-section"] .section-padding,
[id*="stats-section"] .multicolumn {
  background-color: var(--gold) !important;
  color: var(--white) !important;
}
[id*="stats-section"] h2,
[id*="stats-section"] .h0,
[id*="stats-section"] .h1,
[id*="stats-section"] p,
[id*="stats-section"] span,
[id*="stats-section"] .multicolumn-card__info * {
  color: var(--white) !important;
}
[id*="stats-section"] .h0,
[id*="stats-section"] .multicolumn-card__info h3 {
  font-size: clamp(3rem, 6vw, 5rem) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15) !important;
}
[id*="stats-section"] .multicolumn-card {
  background: transparent !important;
  box-shadow: none !important;
}
[id*="stats-section"] .multicolumn-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
[id*="stats-section"] .section__heading::after {
  background: var(--white) !important;
}
[id*="stats-section"] .section-padding {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ===========================================
   8. TESTIMONIALS — DARK LUXURY
   =========================================== */
[id*="testimonials"],
[id*="testimonials"] .section-padding {
  background-color: var(--black) !important;
  color: var(--white) !important;
}
[id*="testimonials"] h2,
[id*="testimonials"] p,
[id*="testimonials"] span,
[id*="testimonials"] blockquote,
[id*="testimonials"] cite {
  color: var(--white) !important;
}
[id*="testimonials"] blockquote {
  font-style: italic !important;
  font-size: 1.15em !important;
  line-height: 1.9 !important;
  border-left: 2px solid var(--gold) !important;
  padding-left: 24px !important;
}
[id*="testimonials"] .testimonial__author,
[id*="testimonials"] cite {
  color: var(--gold) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.8em !important;
}

/* ===========================================
   9. PRESS LOGOS — LARGER, GRAYSCALE HOVER
   =========================================== */
[id*="press-logos"] .logo-list__item img {
  filter: grayscale(30%) !important;
  opacity: 0.8 !important;
  transition: all 0.4s ease !important;
  max-height: 80px !important;
}
[id*="press-logos"] .logo-list__item:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

/* ===========================================
   10. BRIDAL TEASER — KEEP DARK
   =========================================== */
[id*="bridal-teaser"] .image-with-text__media-item img {
  transition: transform 0.8s ease !important;
}
[id*="bridal-teaser"]:hover .image-with-text__media-item img {
  transform: scale(1.03) !important;
}

/* ===========================================
   11. PHILOSOPHY QUOTE — DRAMATIC
   =========================================== */
[id*="philosophy-quote"],
[id*="philosophy-quote"] .section-padding {
  background-color: var(--black) !important;
  color: var(--gold) !important;
}
[id*="philosophy-quote"] p,
[id*="philosophy-quote"] em,
[id*="philosophy-quote"] span {
  color: var(--gold) !important;
}
[id*="philosophy-quote"] em {
  font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
  line-height: 1.8 !important;
}

/* ===========================================
   12. NEWSLETTER — DARK WITH GOLD
   =========================================== */
[id*="newsletter"],
[id*="newsletter"] .section-padding {
  background-color: var(--black) !important;
}
[id*="newsletter"] h2, [id*="newsletter"] p, [id*="newsletter"] span {
  color: var(--white) !important;
}
[id*="newsletter"] .field__input {
  background: transparent !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
}

/* ===========================================
   13. HERO — CINEMATIC OVERLAY
   =========================================== */
.banner__media::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.1) 25%,
    rgba(0,0,0,0.05) 50%,
    rgba(0,0,0,0.2) 75%,
    rgba(0,0,0,0.4) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.banner__heading, .banner__text, .banner__subheading, .banner__buttons {
  position: relative !important;
  z-index: 2 !important;
}
/* Strong text shadows for readability without heavy overlay */
.banner__heading {
  text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.4) !important;
}
.banner__subheading,
.banner__text {
  text-shadow: 0 1px 15px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.3) !important;
}
/* ===========================================
   HEADER — LUXURY SPLIT NAV LAYOUT
   =========================================== */

/* Hide "Home" and "Shop" nav items (Home redundant, Shop = cart icon) */
.header__menu-item[href="/"],
.header__menu-item[href="/collections/all"] {
  display: none !important;
}

@media (min-width: 750px) {
  /* Make the header a single-row layout */
  .header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Search icon container — far left */
  .header__left {
    order: -2 !important;
    flex-shrink: 0 !important;
  }

  /* Logo — right next to search icon, nudged right & up */
  .header__heading {
    order: -1 !important;
    margin-right: 0 !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    margin-left: 1.6rem !important;
    margin-top: -40px !important;
  }

  /* Nav — center, split visually */
  .header__inline-menu,
  .header nav {
    order: 0 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .header__inline-menu .list-menu,
  .header nav ul {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 2rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  /* Split nav: push Portfolio and after to the right */
  .header__inline-menu .list-menu li:has(> a[href*="portfolio"]),
  .header__inline-menu .list-menu li:has(> a[href*="Portfolio"]),
  .header__inline-menu .list-menu li:has(> dropdown-menu a[href*="portfolio"]),
  .header__inline-menu .list-menu li:has(a[href*="portfolio"]) {
    margin-left: auto !important;
  }

  /* Account + Cart icons — stay on right */
  .header__icons,
  .header > div:last-child {
    order: 1 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

/* Text shadow for readability on hero */
.header--transparent .header__menu-item,
.header--transparent .header__heading a {
  text-shadow: 0 1px 8px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.2) !important;
}

/* ======= Hero banner — SPLIT layout: DESKTOP ONLY ======= */
@media (min-width: 750px) {
  [id*="hero-banner"] .banner__content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    left: 0 !important;
  }
  [id*="hero-banner"] .banner__box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: none !important;
  }
  [id*="hero-banner"] .banner__heading,
  [id*="hero-banner"] .banner__subheading {
    position: static !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    text-shadow: none !important;
    transform: none !important;
  }
  [id*="hero-banner"] .banner__heading *,
  [id*="hero-banner"] .banner__subheading * {
    display: none !important;
  }
  [id*="hero-banner"] .banner__subheading::before {
    content: "HIGH-PERFORMANCE CLEAN BEAUTY" !important;
    position: absolute !important;
    left: 4% !important;
    top: auto !important;
    bottom: 51% !important;
    color: var(--gold) !important;
    font-size: 2rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5) !important;
    display: block !important;
    line-height: 1.4 !important;
    z-index: 3 !important;
  }
  [id*="hero-banner"] .banner__subheading::after {
    content: "BY CELEBRITY MAKEUP ARTIST SARAI" !important;
    position: absolute !important;
    right: 4% !important;
    top: auto !important;
    bottom: 51% !important;
    color: var(--gold) !important;
    font-size: 2rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-align: right !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5) !important;
    display: block !important;
    line-height: 1.4 !important;
    z-index: 3 !important;
  }
  [id*="hero-banner"] .banner__heading::before {
    content: "Clean Luxury\a Beauty." !important;
    white-space: pre-line !important;
    position: absolute !important;
    left: 4% !important;
    top: auto !important;
    bottom: 26% !important;
    color: var(--white) !important;
    font-size: clamp(2.5rem, 3.8vw, 3.8rem) !important;
    font-family: var(--font-heading-family) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
    display: block !important;
    z-index: 3 !important;
  }
  [id*="hero-banner"] .banner__heading::after {
    content: "Artistry Without\a Compromise." !important;
    white-space: pre-line !important;
    position: absolute !important;
    right: 4% !important;
    top: auto !important;
    bottom: 26% !important;
    color: var(--white) !important;
    font-size: clamp(2.5rem, 3.8vw, 3.8rem) !important;
    font-family: var(--font-heading-family) !important;
    font-style: italic !important;
    text-align: right !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
    display: block !important;
    z-index: 3 !important;
  }
  [id*="hero-banner"] .button-group {
    position: absolute !important;
    bottom: 12% !important;
    left: 4% !important;
    right: 4% !important;
    display: flex !important;
    justify-content: space-between !important;
    width: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
  }
}

/* Banner buttons */
.banner .button {
  backdrop-filter: blur(4px) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  padding: 16px 36px !important;
}
.banner .button:hover {
  background: var(--white) !important;
  color: var(--black) !important;
}

/* ===========================================
   14. BUTTONS — PREMIUM
   =========================================== */
.button:not(.button--tertiary) {
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
  font-size: 0.75em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  transition: all 0.4s ease !important;
}
.button:not(.button--secondary):not(.button--tertiary):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(184, 150, 90, 0.2) !important;
}
.button--secondary {
  border-width: 1.5px !important;
}
.button--secondary:hover {
  transform: translateY(-2px) !important;
}

/* === TEAL HOVER STATES — interaction accent (per brand guide) === */
/* Primary solid buttons: lift + teal glow on hover */
.button:not(.button--secondary):not(.button--tertiary):hover {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 30px var(--teal-glow) !important;
}
/* Outline / secondary buttons: teal border + teal text on hover */
.button--secondary:hover,
.button.button--secondary:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background: transparent !important;
}
/* Tertiary / link buttons: teal text on hover */
.button--tertiary:hover {
  color: var(--teal) !important;
}
/* Hero banner overlay buttons (over images): teal-tinted glass on hover */
.banner .button:hover {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--white) !important;
}

/* ===========================================
   15. PRODUCT CARDS — ELEVATED
   =========================================== */
.card {
  transition: box-shadow 0.5s ease, transform 0.5s ease !important;
}
.card-wrapper:hover .card {
  box-shadow: 0 16px 48px rgba(0,0,0,0.08) !important;
  transform: translateY(-6px) !important;
}
.card__media img {
  transition: transform 0.7s ease !important;
}
.card-wrapper:hover .card__media img {
  transform: scale(1.05) !important;
}
.card__heading a {
  letter-spacing: 0.06em !important;
}
.price-item {
  letter-spacing: 0.08em !important;
}

/* Badges */
.card__badge .badge, .badge--sold-out {
  background-color: var(--black) !important;
  color: var(--gold) !important;
  letter-spacing: 0.16em !important;
  font-size: 0.63em !important;
  border: 1px solid var(--gold) !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
}

/* Brand-icon stars stay gold */
[class*="star"]:not(.jdgm-star) {
  color: var(--gold) !important;
}
/* Judge.me review stars — teal (matches brand teal accent) */
.jdgm-star {
  color: var(--teal) !important;
}

/* ===========================================
   16. ANNOUNCEMENT BAR
   =========================================== */
.announcement-bar {
  letter-spacing: 0.14em !important;
  font-size: 0.7em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--gold) !important;
}

/* ===========================================
   17. HEADER
   =========================================== */
.header-wrapper {
  border-bottom: 1px solid rgba(184,150,90,0.15) !important;
}
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

.header h1 a, .header__heading a {
  letter-spacing: 0.08em !important;
  background: linear-gradient(135deg, #d4b87a 0%, #f5e6c8 25%, #b8965a 50%, #f5e6c8 75%, #b8965a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* SARAI brand logo (matches lipstain packaging: thin geometric, tracked) */
.sarai-brand-logo {
  font-family: 'Poiret One', 'Century Gothic', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  font-size: 1.8rem !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
@media (max-width: 749px) {
  .sarai-brand-logo {
    font-size: 1.35rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* ===========================================
   18. FOOTER — DARK LUXURY
   =========================================== */
.footer {
  background-color: var(--black) !important;
  color: #d4c5a9 !important;
  padding-top: 80px !important;
}
.footer a, .footer p, .footer span, .footer li {
  color: #d4c5a9 !important;
}
.footer a:hover {
  color: var(--teal) !important;
}
.footer__heading, .footer .h4 {
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 0.8em !important;
  color: var(--white) !important;
  margin-bottom: 20px !important;
}
.footer input[type="email"], .footer .field__input {
  background: transparent !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
}
.footer .field__label {
  color: #8a7d6b !important;
}
.footer__content-bottom {
  border-top: 1px solid rgba(184,150,90,0.15) !important;
  color: #8a7d6b !important;
}
.footer .payment-icons img {
  opacity: 0.4 !important;
  filter: brightness(2) !important;
}
.footer .social-icons a {
  color: #d4c5a9 !important;
}
.footer .social-icons a:hover {
  color: var(--teal) !important;
  transform: translateY(-2px) !important;
}

/* ===========================================
   19. SECTION DIVIDERS
   =========================================== */
.shopify-section + .shopify-section {
  border-top: 1px solid rgba(184,150,90,0.12) !important;
}
/* No divider after dark sections */
[id*="hero-banner"] + .shopify-section,
[id*="scrolling-marquee"] + .shopify-section,
[id*="brand-pillars"] + .shopify-section,
[id*="stats-section"] + .shopify-section,
[id*="testimonials"] + .shopify-section,
[id*="philosophy-quote"] + .shopify-section,
[id*="bottom-marquee"] + .shopify-section,
[id*="newsletter"] + .shopify-section {
  border-top: none !important;
}

/* ===========================================
   20. SCROLL ANIMATIONS
   =========================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25,0.1,0.25,1), transform 0.9s cubic-bezier(0.25,0.1,0.25,1);
}
.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.image-with-text__media-item.scroll-reveal {
  transform: translateX(-50px);
  opacity: 0;
}
.image-with-text__media-item.scroll-reveal--visible {
  transform: translateX(0);
  opacity: 1;
}
.image-with-text__text-item.scroll-reveal {
  transform: translateX(50px);
  opacity: 0;
}
.image-with-text__text-item.scroll-reveal--visible {
  transform: translateX(0);
  opacity: 1;
}
.card-wrapper.scroll-reveal, .multicolumn-card.scroll-reveal, .gallery__item.scroll-reveal {
  transform: translateY(50px) scale(0.96);
}
.card-wrapper.scroll-reveal--visible, .multicolumn-card.scroll-reveal--visible, .gallery__item.scroll-reveal--visible {
  transform: translateY(0) scale(1);
}
.logo-list__item.scroll-reveal {
  transform: translateY(20px) scale(0.85);
  opacity: 0;
}
.logo-list__item.scroll-reveal--visible {
  transform: translateY(0) scale(1);
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===========================================
   21. GALLERY & PORTFOLIO
   =========================================== */
.gallery__item {
  overflow: hidden !important;
  position: relative !important;
}
.gallery__item .media img {
  transition: transform 0.7s ease !important;
}
.gallery__item:hover .media img {
  transform: scale(1.06) !important;
}
.gallery__item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid var(--gold) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.gallery__item:hover::after {
  opacity: 1 !important;
}

/* ===========================================
   22. FORMS
   =========================================== */
.field__input:focus, .form__input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(184,150,90,0.15) !important;
}
.field__label {
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.75em !important;
}

/* ===========================================
   23. SCROLLBAR
   =========================================== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::selection { background: rgba(184,150,90,0.2); color: var(--black); }

/* ===========================================
   24. SCROLLING PROMOTIONS
   =========================================== */
.scrolling-promotion {
  letter-spacing: 0.14em !important;
  font-size: 0.78em !important;
  text-transform: uppercase !important;
}

/* ===========================================
   25. PAGE FADE IN
   =========================================== */
main {
  animation: fadeInPage 0.6s ease-out;
}
@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   27. COLLECTION / SHOP PAGE
   =========================================== */
.collection__view-all .button {
  border-color: var(--gold) !important;
  color: var(--black) !important;
  background: transparent !important;
  padding: 14px 48px !important;
}
.collection__view-all .button:hover {
  background: var(--gold) !important;
  color: var(--white) !important;
}

/* ===========================================
   28. IMAGE PLACEHOLDERS
   =========================================== */
.media--placeholder, .placeholder-svg {
  background-color: var(--cream) !important;
}

/* ===========================================
   29. FEATURED PRODUCTS — CREAM BG
   =========================================== */
/* Featured Products: very light teal tint as the single highlight section (per brand guide) */
[id*="featured-products"],
[id*="featured-products"] .section-padding {
  background-color: var(--teal-tint) !important;
}

/* ===========================================
   30. BRIDAL PAGE — LUXURY OVERHAUL
   =========================================== */

/* Transparent header on all pages — handled by Liquid (header.liquid always sets enable_transparent_header = true) */

/* --- ALL non-homepage heroes: zero padding (all screens) --- */
[id$="__hero"] .section-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* --- Desktop: 75vh capped, contain, dark bars --- */
@media (min-width: 750px) {
  [id$="__hero"] .banner {
    isolation: isolate !important;
    max-height: 75vh !important;
    overflow: hidden !important;
    background-color: var(--black) !important;
  }
  [id$="__hero"] .banner__media {
    max-height: 75vh !important;
    overflow: hidden !important;
  }
  [id$="__hero"] .banner__media img {
    object-fit: contain !important;
    object-position: center center !important;
    height: 75vh !important;
    width: 100% !important;
    background-color: var(--black) !important;
  }
}

/* ===== ALL non-homepage heroes: SPLIT LAYOUT — DESKTOP ONLY ===== */
@media (min-width: 750px) {

/* Full-width content overlay */
[id$="__hero"] .banner__content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  left: 0 !important;
}
/* banner__box fills entire banner */
[id$="__hero"] .banner__box {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: none !important;
}
/* Hide original text */
[id$="__hero"] .banner__heading,
[id$="__hero"] .banner__subheading,
[id$="__hero"] .banner__text {
  position: static !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  text-shadow: none !important;
  transform: none !important;
}
[id$="__hero"] .banner__heading *,
[id$="__hero"] .banner__subheading *,
[id$="__hero"] .banner__text * {
  display: none !important;
}

/* --- Shared pseudo-element positioning --- */
[id$="__hero"] .banner__subheading::before,
[id$="__hero"] .banner__subheading::after {
  position: absolute !important;
  top: auto !important;
  bottom: 51% !important;
  color: var(--gold) !important;
  font-size: 2rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5) !important;
  display: block !important;
  line-height: 1.4 !important;
  z-index: 3 !important;
}
[id$="__hero"] .banner__subheading::before { left: 4% !important; }
[id$="__hero"] .banner__subheading::after { right: 4% !important; text-align: right !important; }

[id$="__hero"] .banner__heading::before,
[id$="__hero"] .banner__heading::after {
  white-space: pre-line !important;
  position: absolute !important;
  top: auto !important;
  bottom: 26% !important;
  font-size: clamp(2.5rem, 3.8vw, 3.8rem) !important;
  font-family: var(--font-heading-family) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
  display: block !important;
  z-index: 3 !important;
}
[id$="__hero"] .banner__heading::before { left: 4% !important; color: var(--white) !important; }
[id$="__hero"] .banner__heading::after { right: 4% !important; color: var(--gold-light) !important; font-style: italic !important; text-align: right !important; }

/* ===== BRIDAL PAGE ===== */
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('sarai-bridal-hero-portrait.png') center center / contain no-repeat var(--black) !important;
  z-index: 0 !important;
}
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__media img { opacity: 0 !important; }
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__subheading::before { content: "LUXURY BRIDAL ARTISTRY" !important; }
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__subheading::after { content: "25+ YEARS OF EXPERTISE" !important; }
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__heading::before { content: "Bridal Beauty," !important; }
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__heading::after { content: "Elevated." !important; }
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__text::before {
  content: "Timeless, flawless beauty for the most\a important day of your life." !important;
  white-space: pre-line !important; position: absolute !important; left: 4% !important;
  top: auto !important; bottom: 14% !important; color: rgba(255,255,255,0.85) !important;
  font-size: 1rem !important; font-family: var(--font-body-family) !important;
  letter-spacing: 0.03em !important; line-height: 1.6 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5) !important; display: block !important; z-index: 3 !important;
}
[id$="__hero"]:has(~ [id*="bridal-intro"]) .banner__text::after {
  content: "INQUIRE  \2192" !important; position: absolute !important; right: 4% !important;
  top: auto !important; bottom: 14% !important; color: var(--white) !important;
  font-size: 0.85rem !important; letter-spacing: 0.25em !important; text-transform: uppercase !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important; padding: 16px 40px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important; display: block !important; z-index: 3 !important;
  backdrop-filter: blur(4px) !important;
}

/* ===== ABOUT PAGE ===== */
[id$="__hero"]:has(~ [id*="founder-story"]) .banner__subheading::before { content: "THE WOMAN BEHIND THE BRAND" !important; }
[id$="__hero"]:has(~ [id*="founder-story"]) .banner__subheading::after { content: "25+ YEARS OF ARTISTRY" !important; }
[id$="__hero"]:has(~ [id*="founder-story"]) .banner__heading::before { content: "Meet\a Sarai." !important; }
[id$="__hero"]:has(~ [id*="founder-story"]) .banner__heading::after { content: "Her Story,\a Her Vision." !important; }

/* ===== PORTFOLIO PAGE ===== */
[id$="__hero"]:has(~ [id*="editorial-gallery"]) .banner__subheading::before { content: "25+ YEARS OF ARTISTRY" !important; }
[id$="__hero"]:has(~ [id*="editorial-gallery"]) .banner__subheading::after { content: "EDITORIAL & BRIDAL" !important; }
[id$="__hero"]:has(~ [id*="editorial-gallery"]) .banner__heading::before { content: "Makeup\a Artistry." !important; }
[id$="__hero"]:has(~ [id*="editorial-gallery"]) .banner__heading::after { content: "The\a Portfolio." !important; }

/* ===== SERVICES PAGE ===== */
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__subheading::before { content: "BOOK SARAI" !important; }
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__subheading::after { content: "LUXURY PERSONALIZED" !important; }
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__heading::before { content: "Beauty\a Services." !important; }
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__heading::after { content: "Concierge\a & Elevated." !important; }

/* ===== PRESS PAGE ===== */
[id$="__hero"]:has(~ [id*="press-logos"]) .banner__subheading::before { content: "SARAI COSMETICS" !important; }
[id$="__hero"]:has(~ [id*="press-logos"]) .banner__subheading::after { content: "IN THE SPOTLIGHT" !important; }
[id$="__hero"]:has(~ [id*="press-logos"]) .banner__heading::before { content: "Press &\a Media." !important; }
[id$="__hero"]:has(~ [id*="press-logos"]) .banner__heading::after { content: "Features &\a Recognition." !important; }

/* ===== CONTACT PAGE ===== */
[id$="__hero"]:has(~ [id*="__main"]) .banner__subheading::before { content: "WE'D LOVE TO HEAR FROM YOU" !important; }
[id$="__hero"]:has(~ [id*="__main"]) .banner__subheading::after { content: "SARAI COSMETICS" !important; }
[id$="__hero"]:has(~ [id*="__main"]) .banner__heading::before { content: "Get in\a Touch." !important; }
[id$="__hero"]:has(~ [id*="__main"]) .banner__heading::after { content: "Let's\a Connect." !important; }

} /* end @media (min-width: 750px) for non-homepage heroes */

/* Replace services hero image with new pink-curlers portrait (all viewports) */
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__media img {
  visibility: hidden !important;
}
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__media .media-wrapper,
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__media .image-animate {
  background: transparent !important;
}
[id$="__hero"]:has(~ [id*="services-intro"]) .banner__media {
  background: url('sarai-services-hero-pink.jpg') center center / contain no-repeat var(--black) !important;
}

/* --- Bridal Intro: Cream bg, elegant spacing --- */
[id*="bridal-intro"],
[id*="bridal-intro"] .section-padding,
[id*="bridal-intro"] .rich-text {
  background-color: var(--cream) !important;
}
[id*="bridal-intro"] h2 {
  color: var(--black) !important;
}
[id*="bridal-intro"] h2::after {
  content: '' !important;
  display: block !important;
  width: 80px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gold), var(--teal)) !important;
  margin: 20px auto 0 !important;
}
[id*="bridal-intro"] p {
  color: #4a4a4a !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Packages: Cream bg, card effects like shop-categories --- */
[id*="packages"],
[id*="packages"] .section-padding {
  background-color: var(--cream) !important;
}
[id*="packages"] .section__heading::after {
  background: linear-gradient(90deg, var(--gold), var(--teal)) !important;
}
[id*="packages"] .multicolumn-card {
  background: var(--white) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
  overflow: hidden !important;
  border-radius: 2px !important;
}
[id*="packages"] .multicolumn-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}
[id*="packages"] .multicolumn-card__info h3 {
  font-size: 1.4rem !important;
  letter-spacing: 0.08em !important;
  color: var(--black) !important;
}
[id*="packages"] .multicolumn-card__info p {
  color: #555 !important;
  line-height: 1.8 !important;
}
[id*="packages"] .multicolumn-card .button {
  background: var(--black) !important;
  color: var(--gold) !important;
  border: 1.5px solid var(--gold) !important;
}
[id*="packages"] .multicolumn-card .button:hover {
  background: var(--gold) !important;
  color: var(--white) !important;
}

/* --- What's Included: Gold icon/text styling like brand-pillars --- */
[id*="whats-included"],
[id*="whats-included"] .section-padding,
[id*="whats-included"] .guarantees,
[id*="whats-included"] .icon-with-text {
  background-color: var(--black) !important;
  color: var(--gold) !important;
}
[id*="whats-included"] h2,
[id*="whats-included"] .section__heading,
[id*="whats-included"] .guarantees__heading,
[id*="whats-included"] .icon-with-text__heading {
  color: var(--gold) !important;
}
[id*="whats-included"] p,
[id*="whats-included"] span {
  color: #d4c5a9 !important;
}
[id*="whats-included"] .section__heading::after {
  background: linear-gradient(90deg, var(--gold), transparent) !important;
}
[id*="whats-included"] .guarantees__item,
[id*="whats-included"] .icon-with-text__item {
  border-color: rgba(184, 150, 90, 0.2) !important;
}
[id*="whats-included"] svg,
[id*="whats-included"] .icon path {
  stroke: var(--gold) !important;
  fill: none !important;
}

/* --- Bridal Gallery: Enhanced with dark bg, better spacing --- */
[id*="bridal-gallery"],
[id*="bridal-gallery"] .section-padding {
  background-color: var(--black) !important;
}
[id*="bridal-gallery"] h2,
[id*="bridal-gallery"] .section__heading {
  color: var(--white) !important;
}
[id*="bridal-gallery"] .section__heading::after {
  background: linear-gradient(90deg, var(--gold), var(--teal)) !important;
}
[id*="bridal-gallery"] .gallery__item {
  overflow: hidden !important;
  border-radius: 2px !important;
}
[id*="bridal-gallery"] .gallery__item .media img {
  object-fit: contain !important;
  transition: transform 0.7s ease !important;
}
[id*="bridal-gallery"] .gallery__item:hover .media img {
  transform: scale(1.06) !important;
}
/* Gold border on gallery hover */
[id*="bridal-gallery"] .gallery__item::after {
  border-color: var(--gold) !important;
}

/* --- Bridal CTA: show complete image without awkward cropping --- */
[id*="bridal-cta"] .banner {
  background: var(--black) !important;
  isolation: isolate !important;
}
[id*="bridal-cta"] .banner__media {
  background: var(--black) !important;
}
[id*="bridal-cta"] .banner__media::after {
  background: linear-gradient(
    to bottom,
    rgba(26,27,24,0.15) 0%,
    rgba(26,27,24,0.28) 60%,
    rgba(26,27,24,0.45) 100%
  ) !important;
}

/* Mobile: centered image with text overlay */
@media (max-width: 749px) {
  [id*="bridal-cta"] .banner {
    min-height: 520px !important;
  }
  [id*="bridal-cta"] .banner__media img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Desktop: split layout — image on left, text/CTA on right */
@media (min-width: 750px) {
  [id*="bridal-cta"] .banner {
    min-height: 640px !important;
    height: 640px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 48%) 1fr !important;
    align-items: stretch !important;
  }
  [id*="bridal-cta"] .banner__media,
  [id*="bridal-cta"] .banner__media .media {
    position: relative !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    top: auto !important;
    left: auto !important;
  }
  [id*="bridal-cta"] .banner__media img,
  [id*="bridal-cta"] .banner__media picture {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  [id*="bridal-cta"] .banner__media::after {
    z-index: 1 !important;
  }
  [id*="bridal-cta"] .banner__content {
    position: relative !important;
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 clamp(32px, 5vw, 80px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    inset: auto !important;
  }
  [id*="bridal-cta"] .banner__box {
    text-align: left !important;
    align-items: flex-start !important;
    max-width: 560px !important;
    width: 100% !important;
  }
  [id*="bridal-cta"] .banner__heading {
    text-align: left !important;
    margin-bottom: 22px !important;
    font-size: clamp(2.2rem, 3.4vw, 3.2rem) !important;
    line-height: 1.15 !important;
  }
  [id*="bridal-cta"] .banner__box .button-wrapper,
  [id*="bridal-cta"] .banner__box .banner__buttons {
    justify-content: flex-start !important;
  }
}

/* --- Bridal CTA enhanced content: eyebrow + tagline + divider + fine print --- */
[id*="bridal-cta"] .banner__subheading {
  color: var(--gold) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  margin-bottom: 22px !important;
  position: relative !important;
  padding-left: 54px !important;
  display: inline-block !important;
}
[id*="bridal-cta"] .banner__subheading::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 40px !important;
  height: 1px !important;
  background: var(--gold) !important;
}
[id*="bridal-cta"] .banner__text:not(:last-child) {
  color: rgba(255,255,255,0.82) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin-bottom: 36px !important;
  position: relative !important;
}
[id*="bridal-cta"] .banner__text:not(:last-child)::after {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 1px !important;
  background: var(--gold) !important;
  opacity: 0.7 !important;
  margin-top: 36px !important;
}
[id*="bridal-cta"] .banner__text:last-of-type {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-top: 22px !important;
  font-style: normal !important;
}

/* Mobile: center-align the new content blocks so they don't look misaligned */
@media (max-width: 749px) {
  [id*="bridal-cta"] .banner__subheading {
    display: inline-block !important;
    padding-left: 54px !important;
    padding-right: 54px !important;
    font-size: 0.72rem !important;
  }
  [id*="bridal-cta"] .banner__subheading::before {
    display: none !important;
  }
  [id*="bridal-cta"] .banner__text:not(:last-child) {
    font-size: 0.95rem !important;
    max-width: 88% !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
  }
  [id*="bridal-cta"] .banner__text:not(:last-child)::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [id*="bridal-cta"] .banner__text:last-of-type {
    font-size: 0.7rem !important;
    margin-top: 18px !important;
    text-align: center !important;
  }
}
[id*="bridal-cta"] .banner__heading {
  text-shadow: 0 2px 30px rgba(0,0,0,0.8) !important;
  letter-spacing: 0.03em !important;
}
[id*="bridal-cta"] .button {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 2px solid var(--white) !important;
  padding: 18px 48px !important;
  font-size: 0.85em !important;
  letter-spacing: 0.2em !important;
}
[id*="bridal-cta"] .button:hover {
  background: var(--gold) !important;
  color: var(--white) !important;
  border-color: var(--gold) !important;
}

/* --- Bridal section dividers: no border between dark sections --- */
[id*="whats-included"] + [id*="bridal-gallery"],
[id*="bridal-gallery"] + [id*="bridal-cta"] {
  border-top: none !important;
}

/* --- Portfolio page: show full images without cropping --- */
[id*="editorial-gallery"] .gallery__item .media img,
[id*="bridal-gallery"] .gallery__item .media img,
[id*="commercial-gallery"] .gallery__item .media img {
  object-fit: contain !important;
}

/* --- Portfolio: Celebrity & VIP gallery images via CSS (theme assets) --- */
[id*="celebrity-gallery"] .gallery__item .media--placeholder {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
[id*="celebrity-gallery"] .gallery__item .media--placeholder svg {
  display: none !important;
}
[id*="celebrity-gallery"] .gallery__item:nth-child(1) .media--placeholder { background-image: url('sarai-celebrity-vip-1.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(2) .media--placeholder { background-image: url('sarai-celebrity-vip-2.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(3) .media--placeholder { background-image: url('sarai-celebrity-vip-3.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(4) .media--placeholder { background-image: url('sarai-celebrity-vip-4.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(5) .media--placeholder { background-image: url('sarai-celebrity-vip-5.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(6) .media--placeholder { background-image: url('sarai-celebrity-vip-6.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(7) .media--placeholder { background-image: url('sarai-celebrity-vip-7.jpg') !important; }
[id*="celebrity-gallery"] .gallery__item:nth-child(8) .media--placeholder { background-image: url('sarai-celebrity-vip-8.jpg') !important; }

/* --- Portfolio new-image placeholder cells: match existing image cells exactly --- */
/* Real cells inherit `.gallery .media { height: var(--image-height) }` (280px desktop, 160px mobile) — */
/* do NOT override aspect-ratio/height here, or new cells will differ from old ones. */
[id*="editorial-gallery"] .gallery__item .media--placeholder,
[id$="bridal-gallery"] .gallery__item .media--placeholder,
[id*="commercial-gallery"] .gallery__item .media--placeholder {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: rgb(var(--color-background)) !important;
}
[id*="editorial-gallery"] .gallery__item .media--placeholder svg,
[id$="bridal-gallery"] .gallery__item .media--placeholder svg,
[id*="commercial-gallery"] .gallery__item .media--placeholder svg {
  display: none !important;
}
[id*="editorial-gallery"] .gallery__item:nth-child(9) .media--placeholder { background-image: url('sarai-editorial-new-1.jpg') !important; }
[id*="editorial-gallery"] .gallery__item:nth-child(10) .media--placeholder { background-image: url('sarai-editorial-new-2.jpg') !important; }
[id*="editorial-gallery"] .gallery__item:nth-child(11) .media--placeholder { background-image: url('sarai-editorial-new-3.jpg') !important; }
[id*="editorial-gallery"] .gallery__item:nth-child(12) .media--placeholder { background-image: url('sarai-editorial-new-4.jpg') !important; }
[id$="bridal-gallery"] .gallery__item:nth-child(5) .media--placeholder { background-image: url('sarai-bridal-new-5.jpg') !important; }
[id$="bridal-gallery"] .gallery__item:nth-child(6) .media--placeholder { background-image: url('sarai-bridal-new-6.jpg') !important; }
[id$="bridal-gallery"] .gallery__item:nth-child(7) .media--placeholder { background-image: url('sarai-bridal-new-7.jpg') !important; }
[id$="bridal-gallery"] .gallery__item:nth-child(8) .media--placeholder {
  background-image: url('sarai-bridal-new-8.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
}

[id*="commercial-gallery"] .gallery__item:nth-child(5) .media--placeholder { background-image: url('sarai-commercial-new-5.jpg') !important; }
[id*="commercial-gallery"] .gallery__item:nth-child(6) .media--placeholder { background-image: url('sarai-commercial-new-6.jpg') !important; }
[id*="commercial-gallery"] .gallery__item:nth-child(7) .media--placeholder { background-image: url('sarai-commercial-new-7.jpg') !important; }
[id*="commercial-gallery"] .gallery__item:nth-child(8) .media--placeholder { background-image: url('sarai-commercial-new-8.jpg') !important; }

/* --- About page: replace Celebrity & Editorial timeline image --- */
[id*="timeline"] .slide:nth-child(2) {
  position: relative !important;
  overflow: hidden !important;
}
[id*="timeline"] .slide:nth-child(2) img[src*="leopard-portrait"] {
  visibility: hidden !important;
}
[id*="timeline"] .slide:nth-child(2) {
  background: url('sarai-about-celebrity-editorial.jpg') center/cover no-repeat !important;
}

/* ===========================================
   MOBILE RESPONSIVE — Clean minimal overrides
   Desktop-only rules are now scoped with min-width:750px
   so mobile gets the theme's default responsive behavior
   =========================================== */
@media (max-width: 749px) {
  /* Typography */
  h1, .h0 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  h2, .h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  [id*="stats-section"] .h0 { font-size: clamp(2rem, 10vw, 3rem) !important; }

  /* No hover effects on touch */
  .card-wrapper:hover .card { transform: none !important; box-shadow: none !important; }

  /* Buttons smaller */
  .banner .button { padding: 12px 24px !important; font-size: 0.65em !important; }

  /* Hide quick-add cart button overlay on product cards (shows as gold oval on mobile) */
  .card-wrapper .card-information__button,
  .card-wrapper add-to-cart.button--small {
    display: none !important;
  }

  /* Press page "Awards & Recognition" has 5 items in 2 cols — make the orphan 5th span full width centered on mobile */
  [id*="awards"] .multicolumn-list__item:nth-last-child(1):nth-child(odd) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  [id*="awards"] .multicolumn-list__item:nth-last-child(1):nth-child(odd) .multicolumn-card {
    max-width: 72% !important;
    width: 72% !important;
    margin: 0 auto !important;
  }
}

/* --- Press awards: center every image within its card (both desktop + mobile) --- */
[id*="awards"] .multicolumn-card__image-wrapper {
  width: 100% !important;
  text-align: center !important;
}
[id*="awards"] .multicolumn-card__image-wrapper img,
[id*="awards"] .multicolumn-card__image-wrapper picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}