/* DEL MONACO LIVE V133.1.1 — restore the approved three-card About carousel and
   refine product hero balance. Scope: public homepage About section + four
   product hero sections only. Header, footer, admin, dashboard, inquiry and DB
   behaviour remain untouched. */

:root{
  --dm1331-gold:#dcae3d;
  --dm1331-cream:#f6edcf;
  --dm1331-deep:#050906;
}

/* --------------------------------------------------------------------------
   ABOUT — restore the approved V70 floating three-card composition.
   V131's generic reveal transform was overriding the carousel transforms and
   stacking all three cards in the same position. These more-specific rules
   preserve the active / previous / next positions while retaining carousel JS.
   -------------------------------------------------------------------------- */
html body #about.about-carousel-section .about-grid{
  grid-template-columns:minmax(320px,430px) minmax(0,1fr)!important;
  gap:clamp(54px,6vw,104px)!important;
  align-items:center!important;
}

html body #about.about-carousel-section .carousel-stage,
html body #about.about-carousel-section .carousel-stage.dm1331-floating-three{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:clamp(540px,38vw,620px)!important;
  padding:16px 50px 58px!important;
  overflow:visible!important;
  perspective:1550px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

html body #about.about-carousel-section .carousel-stage::before,
html body #about.about-carousel-section .carousel-stage::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  display:block!important;
  border-radius:50%!important;
}
html body #about.about-carousel-section .carousel-stage::before{
  width:70%!important;
  height:62%!important;
  left:15%!important;
  top:19%!important;
  background:radial-gradient(ellipse,rgba(220,174,61,.13),rgba(220,174,61,.035) 42%,transparent 72%)!important;
  filter:blur(32px)!important;
  opacity:.82!important;
}
html body #about.about-carousel-section .carousel-stage::after{
  width:86%!important;
  height:1px!important;
  left:7%!important;
  bottom:42px!important;
  border-radius:0!important;
  background:linear-gradient(90deg,transparent,rgba(222,181,70,.34),transparent)!important;
}

html body #about.about-carousel-section .story-card{
  position:absolute!important;
  z-index:2!important;
  width:min(58%,560px)!important;
  height:clamp(450px,31vw,500px)!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(224,184,77,.36)!important;
  border-radius:30px!important;
  clip-path:inset(0 round 30px)!important;
  background:#050604!important;
  box-shadow:0 38px 105px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset!important;
  transform-style:preserve-3d!important;
  transform-origin:center center!important;
  transition:transform .82s cubic-bezier(.18,.78,.22,1),opacity .72s ease,filter .72s ease,box-shadow .72s ease!important;
  will-change:transform,opacity,filter!important;
}
html body #about.about-carousel-section .story-card::before{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(125deg,rgba(255,255,255,.12),transparent 19%,transparent 70%,rgba(216,169,52,.08))!important;
  mix-blend-mode:screen!important;
}
html body #about.about-carousel-section .story-card::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.90) 100%)!important;
}
html body #about.about-carousel-section .story-card img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  transform:scale(1.015)!important;
  transition:transform 6s ease,filter .75s ease!important;
}

/* Override V129/V131 generic reveal transforms on carousel cards. */
html body.dm-live-v129-motion #about .story-card.is-active,
html body.dm-live-v131-motion #about .story-card.is-active,
html body #about .story-card.is-active.dm129-card,
html body #about .story-card.is-active.dm131-reveal,
html body #about .story-card.is-active.dm131-visible{
  z-index:6!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:translate3d(0,0,82px) rotateY(0deg) rotateZ(0deg) scale(1.035)!important;
}
html body.dm-live-v129-motion #about .story-card.is-prev,
html body.dm-live-v131-motion #about .story-card.is-prev,
html body #about .story-card.is-prev.dm129-card,
html body #about .story-card.is-prev.dm131-reveal,
html body #about .story-card.is-prev.dm131-visible{
  z-index:3!important;
  opacity:.58!important;
  visibility:visible!important;
  filter:saturate(.86) brightness(.78) blur(.2px)!important;
  transform:translate3d(-48%,24px,-92px) rotateY(18deg) rotateZ(-2.4deg) scale(.78)!important;
}
html body.dm-live-v129-motion #about .story-card.is-next,
html body.dm-live-v131-motion #about .story-card.is-next,
html body #about .story-card.is-next.dm129-card,
html body #about .story-card.is-next.dm131-reveal,
html body #about .story-card.is-next.dm131-visible{
  z-index:3!important;
  opacity:.58!important;
  visibility:visible!important;
  filter:saturate(.86) brightness(.78) blur(.2px)!important;
  transform:translate3d(48%,24px,-92px) rotateY(-18deg) rotateZ(2.4deg) scale(.78)!important;
}
html body #about .story-card.is-hidden-spin{
  z-index:1!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,30px,-180px) rotateY(0) scale(.66)!important;
}
html body #about .story-card.is-active img{transform:scale(1.065)!important;filter:saturate(1.04) brightness(1.04)!important}
html body #about .story-card.is-prev img,
html body #about .story-card.is-next img{transform:scale(1.02)!important}

html body #about .card-caption{
  z-index:4!important;
  left:30px!important;
  right:30px!important;
  bottom:26px!important;
  padding:22px 24px!important;
  border:1px solid rgba(224,184,77,.24)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(35,15,8,.88),rgba(5,9,6,.88))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
html body #about .card-caption h3{margin:0 0 8px!important;color:#efd071!important;font-size:clamp(1.65rem,2vw,2.15rem)!important;line-height:1!important}
html body #about .card-caption p{margin:0!important;color:rgba(255,245,216,.88)!important;line-height:1.55!important}

html body #about .carousel-control{
  z-index:12!important;
  width:56px!important;
  height:56px!important;
  border:1px solid rgba(224,184,77,.46)!important;
  background:rgba(3,7,5,.64)!important;
  color:#efc955!important;
  box-shadow:0 14px 42px rgba(0,0,0,.36),0 0 28px rgba(218,174,61,.08)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
html body #about .carousel-control.prev{left:1%!important}
html body #about .carousel-control.next{right:1%!important}
html body #about .carousel-dots{z-index:12!important;bottom:12px!important}

/* --------------------------------------------------------------------------
   PRODUCT HERO — remove the dead area and create one balanced premium scene.
   The copy card stretches to the media height on desktop; badges and actions
   settle at the bottom, so the composition feels intentional rather than empty.
   -------------------------------------------------------------------------- */
html body.dm-live-v125-product-pages .dm125-hero,
html body.dm-live-v127-product-pages .dm125-hero,
html body.dm-live-v131-motion .dm125-hero{
  min-height:0!important;
  height:auto!important;
  padding:clamp(18px,2vw,28px) 0 clamp(24px,2.6vw,40px)!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse at 12% 14%,rgba(225,180,68,.16),transparent 31%),
    radial-gradient(ellipse at 84% 26%,rgba(255,255,255,.052),transparent 22%),
    linear-gradient(135deg,#171c16 0%,#0b110d 48%,#040705 100%)!important;
}
html body.dm-live-v125-product-pages .dm125-hero-grid,
html body.dm-live-v127-product-pages .dm125-hero-grid{
  position:relative!important;
  z-index:1!important;
  align-items:stretch!important;
  min-height:0!important;
  isolation:isolate!important;
}
html body.dm-live-v125-product-pages .dm125-hero-grid::before,
html body.dm-live-v127-product-pages .dm125-hero-grid::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  width:54%!important;
  height:68%!important;
  right:-5%!important;
  top:12%!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(ellipse,rgba(216,172,59,.12),rgba(216,172,59,.025) 48%,transparent 72%)!important;
  filter:blur(34px)!important;
}
html body.dm-live-v125-product-pages .dm125-hero-grid::after,
html body.dm-live-v127-product-pages .dm125-hero-grid::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:3%!important;
  right:3%!important;
  bottom:-18px!important;
  height:1px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(224,184,77,.31),transparent)!important;
}

html body.dm-live-v125-product-pages .dm125-hero-copy,
html body.dm-live-v127-product-pages .dm125-hero-copy{
  align-self:stretch!important;
  min-height:100%!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  padding-bottom:clamp(28px,3vw,46px)!important;
}
html body.dm-live-v125-product-pages .dm125-badges,
html body.dm-live-v127-product-pages .dm125-badges{
  margin-top:auto!important;
  padding-top:clamp(22px,3vw,42px)!important;
  margin-bottom:16px!important;
}
html body.dm-live-v125-product-pages .dm125-actions,
html body.dm-live-v127-product-pages .dm125-actions{
  margin-top:0!important;
}
html body.dm-live-v125-product-pages .dm125-hero-media,
html body.dm-live-v127-product-pages .dm125-hero-media{
  align-self:stretch!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:stretch!important;
}
html body.dm-live-v125-product-pages .dm125-hero-image,
html body.dm-live-v127-product-pages .dm125-hero-image{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Product-specific ambient light remains restrained and does not affect layout. */
html body.tone-shiraz .dm125-hero-grid::before{background:radial-gradient(ellipse,rgba(78,133,190,.15),rgba(78,133,190,.025) 48%,transparent 72%)!important}
html body.tone-spicy .dm125-hero-grid::before{background:radial-gradient(ellipse,rgba(191,87,36,.16),rgba(191,87,36,.025) 48%,transparent 72%)!important}
html body.tone-fayrouz .dm125-hero-grid::before{background:radial-gradient(ellipse,rgba(84,157,124,.15),rgba(84,157,124,.025) 48%,transparent 72%)!important}
html body.tone-santorini .dm125-hero-grid::before{background:radial-gradient(ellipse,rgba(222,157,45,.17),rgba(222,157,45,.025) 48%,transparent 72%)!important}

@media(max-width:1220px){
  html body #about.about-carousel-section .about-grid{grid-template-columns:1fr!important;gap:38px!important}
  html body #about.about-carousel-section .carousel-stage{height:560px!important;padding:12px 30px 56px!important}
  html body #about.about-carousel-section .story-card{width:min(66%,540px)!important;height:470px!important}
}

@media(max-width:900px){
  html body #about.about-carousel-section .carousel-stage{height:520px!important;padding:12px 20px 54px!important}
  html body #about.about-carousel-section .story-card{width:78%!important;height:430px!important;border-radius:27px!important;clip-path:inset(0 round 27px)!important}
  html body #about .story-card.is-prev,
  html body #about .story-card.is-prev.dm131-visible{transform:translate3d(-36%,28px,-92px) rotateY(13deg) rotateZ(-1.5deg) scale(.74)!important}
  html body #about .story-card.is-next,
  html body #about .story-card.is-next.dm131-visible{transform:translate3d(36%,28px,-92px) rotateY(-13deg) rotateZ(1.5deg) scale(.74)!important}

  html body.dm-live-v125-product-pages .dm125-hero-grid,
  html body.dm-live-v127-product-pages .dm125-hero-grid{align-items:start!important}
  html body.dm-live-v125-product-pages .dm125-hero-copy,
  html body.dm-live-v127-product-pages .dm125-hero-copy{min-height:0!important;height:auto!important}
  html body.dm-live-v125-product-pages .dm125-badges,
  html body.dm-live-v127-product-pages .dm125-badges{margin-top:24px!important;padding-top:0!important}
  html body.dm-live-v125-product-pages .dm125-hero-media,
  html body.dm-live-v127-product-pages .dm125-hero-media{height:auto!important;min-height:0!important}
  html body.dm-live-v125-product-pages .dm125-hero-image,
  html body.dm-live-v127-product-pages .dm125-hero-image{height:auto!important;min-height:0!important;aspect-ratio:4/5!important}
}

@media(max-width:620px){
  html body #about.about-carousel-section .carousel-stage{height:455px!important;padding:8px 10px 48px!important;overflow:hidden!important}
  html body #about.about-carousel-section .story-card{width:86%!important;height:380px!important;border-radius:24px!important;clip-path:inset(0 round 24px)!important}
  html body #about .story-card.is-prev,
  html body #about .story-card.is-prev.dm131-visible{transform:translate3d(-31%,25px,-95px) rotateY(10deg) rotateZ(-1deg) scale(.70)!important;opacity:.40!important}
  html body #about .story-card.is-next,
  html body #about .story-card.is-next.dm131-visible{transform:translate3d(31%,25px,-95px) rotateY(-10deg) rotateZ(1deg) scale(.70)!important;opacity:.40!important}
  html body #about .card-caption{left:17px!important;right:17px!important;bottom:17px!important;padding:17px!important;border-radius:17px!important}
  html body #about .carousel-control{width:46px!important;height:46px!important}

  html body.dm-live-v125-product-pages .dm125-hero,
  html body.dm-live-v127-product-pages .dm125-hero,
  html body.dm-live-v131-motion .dm125-hero{padding:12px 0 28px!important}
}

@media(prefers-reduced-motion:reduce){
  html body #about .story-card,
  html body #about .story-card img{transition:none!important;animation:none!important}
}