/**
 * MixMart Morocco - Authentic 100% Ciao Energy Hero Stylesheet
 * Matching screenshot: 3D rotating arc, clear products, bottom title, pedestal & liquid bar
 */

@font-face {
  font-family: "Franklin Gothic Atf";
  src: url("/fonts/Franklin_Gothic_ATF_Black_Italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geistmono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-scheme-1--taste-primary: #3D2B68;
  --color-scheme-1--taste-secondary: #9089D3;
  --_typography---font-styles--heading: "Franklin Gothic Atf", Arial, sans-serif;
  --_typography---font-styles--mono: "Geistmono", monospace;
  --hero-header-offset: 68px;
}

@media (max-width: 1023px) {
  :root {
    --hero-header-offset: 96px;
  }
}

/* Prevent offscreen mobile drawer from expanding page scrollWidth */
#mobile-drawer.translate-x-full,
#mobile-drawer.-translate-x-full {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hero Section Container */
#hero-scroll-track {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #08080a;
}

/* Ciao Hero Section Container */
#gamme.section.is-gamme {
  position: relative;
  top: 0;
  width: 100%;
  min-height: 560px;
  height: calc(100vh - var(--hero-header-offset) - 34px);
  height: calc(100svh - var(--hero-header-offset) - 34px);
  max-height: 840px;
  background-color: #08080a;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  user-select: none;
}

.gamme_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.5rem 1rem 0.75rem 1rem;
  box-sizing: border-box;
}

/* Top HUD Bar */
.ciao-top-hud {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
}

.navbar_sound {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--_typography---font-styles--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.navbar_sound:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-scheme-1--taste-secondary);
}

.navbar_sound.is-muted .eq-bar {
  animation: none !important;
  height: 2px !important;
  y: 6px !important;
}

.ciao-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ciao-hud-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 9999px;
  background: #ffffff;
  color: #08080a;
  font-family: var(--_typography---font-styles--heading);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.ciao-hud-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

/* Subtle Bottom Ambient Glow (NO WASH IN CENTER) */
.gamme_gradient-bottom {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 750px);
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 17deg at 50% 50%, #00a6e2 0deg, #71bd96 72deg, #eeb169 142deg, #e59de6 214deg, #ff659d 287deg, #9089d3 360deg);
  filter: blur(85px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   3D ROTATING ARC VIEWPORT (THE ROW OF PRODUCTS)
   ========================================== */
.carousel_3d-viewport {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 45%;
  overflow: visible;
}

.carousel_3d-track {
  position: relative;
  width: 100%;
  height: min(32vh, 310px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.carousel_3d-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  will-change: transform, opacity, filter;
  transition: opacity 0.5s ease;
  transform-origin: center center;
}

.carousel_3d-card.is-center {
  cursor: grab;
  z-index: 20;
}

.carousel_3d-card.is-center:active {
  cursor: grabbing;
}

.product-arc-img {
  max-height: 100%;
  max-width: min(75vw, 420px);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.95));
}

.carousel_3d-card.is-center .product-arc-img {
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.95));
  animation: centerCanHover 4.5s ease-in-out infinite alternate;
}

@keyframes centerCanHover {
  0% { transform: translateY(-6px) rotate(-0.5deg); }
  50% { transform: translateY(5px) rotate(0.8deg); }
  100% { transform: translateY(-3px) rotate(-0.3deg); }
}

/* Arrow Navigation */
.carousel_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  cursor: pointer;
  color: #ffffff;
  opacity: 0.75;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
  padding: 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel_arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.12);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

.carousel_arrow.is-prev { left: max(0.75rem, 2vw); }
.carousel_arrow.is-next { right: max(0.75rem, 2vw); }

/* ==========================================
   BOTTOM STACK: TITLE, PEDESTAL, LIQUID BAR
   ========================================== */
.ciao-bottom-stack {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 0.25rem;
}

/* Title directly under product, smaller & sharp (Matching screenshot!) */
.heading-style-h2-bottom {
  font-family: var(--_typography---font-styles--heading);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.85rem, 3.8vw, 2.9rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.heading-style-h2-bottom span {
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}

/* Metallic Pedestal Disc */
.ciao-pedestal-disc {
  width: min(260px, 55vw);
  height: 18px;
  position: relative;
  margin: 0 auto 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ciao-pedestal-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

/* Price & Quick COD pill */
.ciao-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 2px;
}

.ciao-price-pill .current-price {
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-scheme-1--taste-secondary);
}

.ciao-price-pill .old-price {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}

.ciao-price-pill .cod-badge {
  font-family: var(--_typography---font-styles--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Liquid Pagination Bar */
.carousel_pagination {
  width: 260px;
  max-width: 75vw;
  cursor: pointer;
}

.carousel_pagination-svg {
  width: 100%;
  height: 24px;
  overflow: visible;
}

/* Scroll Discover */
.scroll_discover {
  font-family: var(--_typography---font-styles--mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ==========================================
   MOBILE & TABLET RESPONSIVE OVERRIDES
   ========================================== */
@media (max-width: 767px) {
  .carousel_3d-track {
    height: min(24vh, 195px);
  }

  .product-arc-img {
    max-width: min(60vw, 195px);
  }

  .ciao-top-hud {
    padding: 0.15rem 0.25rem;
  }

  .navbar_sound {
    padding: 4px 10px;
    font-size: 10px;
    gap: 5px;
  }

  .ciao-hud-cta {
    padding: 4px 11px;
    font-size: 0.65rem;
    gap: 4px;
  }

  .heading-style-h2-bottom {
    font-size: clamp(1.1rem, 4.4vw, 1.35rem);
    line-height: 0.88;
    margin-bottom: 2px;
  }

  .ciao-pedestal-disc {
    width: min(150px, 40vw);
    height: 9px;
    margin: 0 auto 2px auto;
  }

  .ciao-price-pill {
    padding: 2px 8px;
    gap: 5px;
    font-size: 0.66rem;
    margin-bottom: 2px;
  }

  .ciao-price-pill .current-price {
    font-size: 0.84rem;
  }

  .ciao-price-pill .old-price {
    font-size: 0.62rem;
  }

  .ciao-price-pill .cod-badge {
    font-size: 0.52rem;
    padding: 1px 5px;
  }

  .carousel_pagination {
    width: min(170px, 48vw);
  }

  .carousel_pagination-svg {
    height: 14px;
  }

  .scroll_discover {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }

  .carousel_arrow {
    padding: 5px;
    width: 28px;
    height: 28px;
  }

  .carousel_arrow svg {
    width: 9px;
    height: 16px;
  }

  .carousel_arrow.is-prev { left: 4px; }
  .carousel_arrow.is-next { right: 4px; }
}