/* ==========================================================================
   AYOR by Amnay — custom rebrand styles
   --------------------------------------------------------------------------
   Loaded after the theme's main.css to override only where needed.
   Keep all hand-written/custom CSS here (do not edit the generated main.css).
   ========================================================================== */

/* --- Brand display font: Calora (logo, product names, big headings) --- */
@font-face {
  font-family: 'Calora';
  src: url('fonts/Calora.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* big page headings use the brand font (product-type words keep the
   theme font — wrap brand names in .brand-font) */
.brand-font,
.dett-info__title,
.dett-hscroll__heading,
.dett-texture__title,
.dett-perche__title,
.dett-prefooter__brand span,
.brand__title,
.brand__title-left,
.brand__title-right,
.slide_content-heading,
.linea-story__type,
.linea-story__title,
.hero-title,
.story-title,
.prodotti__name {
  font-family: 'Calora', 'freight-display-pro', serif !important;
}

/* --- Header: Amnay Beauty wordmark logo sizing --- */
.dett-nav__logo img {
  height: clamp(1.7rem, 3.4vw, 2.7rem);
}

/* --- Home hero: align slide 1 "AYOR" heading to the bottom
       (so it matches the right-hand "Illuminante" heading) --- */
.left-container .slide_left-wrap:first-child .slide_content {
  justify-content: flex-end;
}

/* --- Prodotti slider: square product images (e.g. AYOR pump bottle)
       render the same visual size as the tall thin bottle images.
       Tall bottles are height-capped (~85vh) so their rendered width is
       ~35vh; matching that width keeps every slide the same scale. --- */
/* AYOR rotation clip (16:9, dark bg): crop to a tall portrait frame so the
   bottle matches the current center bottle size and the dark side-bars hide.
   Class-based so it works for <video> or <img>. */
#prodotti .prodotti__bottle-img--crop {
  width: 28vh;
  height: 66vh;
  max-height: 66vh;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 990px) {
  #prodotti .prodotti__bottle-img--crop { width: 46vh; height: 64vh; max-height: 64vh; }
}
/* Home prodotti slide 1: the interactive Three.js bottle replaces the
   rotation video on desktop (main.css already hides .prodotti__bottle-img
   above 990px, so the video stays as the mobile fallback). */
#prodotti .prodotti__bottle-3d {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37vw;
  height: 76vh;
  z-index: 10;
  cursor: grab;
  touch-action: none;
}
#prodotti .prodotti__bottle-3d:active { cursor: grabbing; }
#prodotti .prodotti__bottle-3d canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 990px) {
  #prodotti .prodotti__bottle-3d { display: none; }
}

/* --- AYOR real-time 3D bottle (product page hero) ---
   Replaces the Spline 3D scene: a parametric WebGL model built with Three.js
   (lathe glass body + gold collar + matte cap), label texture baked live from
   brand/ayorwb.png. Transparent canvas floats over the hero, drag to rotate.
   Desktop only, like the Spline canvas it replaces. */
.ayor360 {
  position: absolute;
  right: 6vw;
  bottom: 4vh;
  width: clamp(280px, 27vw, 430px);
  aspect-ratio: 11 / 18;
  cursor: grab;
  z-index: 5;
  touch-action: none;
}
.ayor360:active { cursor: grabbing; }
.ayor360 canvas { width: 100%; height: 100%; display: block; }
.ayor360::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 62%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}
.ayor360__hint {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: quasimoda, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(50, 38, 24, 0.6);
  pointer-events: none;
}
@media (max-width: 990px) {
  .ayor360 { display: none; }
}

/* Journey mode (product pages): the canvas covers the viewport and the bottle
   travels with the scroll, like the old Spline choreography. */
.ayor360--journey {
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  z-index: 900;
  pointer-events: none;
  cursor: default;
}
.ayor360--journey::after { display: none; }
/* drag zone floating over the bottle's hero position */
.ayor360__dragzone {
  position: fixed;
  top: 16vh;
  right: 5vw;
  width: 30vw;
  height: 70vh;
  z-index: 901;
  cursor: grab;
  touch-action: none;
}
.ayor360__dragzone:active { cursor: grabbing; }
.ayor360__dragzone .ayor360__hint {
  bottom: 0.5rem;
  color: rgba(50, 38, 24, 0.6);
}
@media (max-width: 990px) {
  .ayor360__dragzone { display: none; }
}
/* ayor hero: the bottle sits bigger and nearer the title (heroX 1.12), so the
   drag zone follows it toward the centre */
body.page-ayor .ayor360__dragzone { right: 11vw; width: 34vw; }

/* Home prodotti: the 3D models replace the flat product image on desktop.
   The carousel JS forces .prodotti__bottle-img visible, so override it with
   !important — keeps layout (carousel maths intact) but hides the flat image
   behind the 3D model. On mobile the image stays as the product fallback. */
@media (min-width: 991px) {
  #prodotti .prodotti__bottle-img { visibility: hidden !important; }
}

/* ==========================================================================
   Home prodotti — unified MOBILE UI (all phones + small tablets, <=990px).
   Desktop (>990) keeps the interactive 3D models. On mobile we lay out one
   consistent screen: product image up top-centre, description bottom-left,
   product thumbnails small at the bottom-right (replacing the 01/03 counter).
   ========================================================================== */
@media (max-width: 990px) {
  /* Compress the header (brand / name / price / CTA) into a tight block at the
     top so the product below never covers the "ENTDECKEN" link. */
  #prodotti .prodotti__label { margin-bottom: 8px !important; }
  #prodotti .prodotti__name { margin-bottom: 4px !important; }
  #prodotti .prodotti__price { margin-bottom: 8px !important; }
  #prodotti .prodotti__explore-cta { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Product photo: sits between the header and the description, centred. Its
     height scales with the viewport height (calc) so it always fits the gap
     between the fixed header above and the description/thumbnails below — even
     on short phones. Cover crops only the greige side-margins (never product). */
  #prodotti .prodotti__bottle-img {
    width: 58vw !important;
    height: clamp(150px, calc(100vh - 475px), 340px) !important;
    max-height: none !important;
    top: 48% !important;
    left: 68% !important;
    object-fit: cover !important;
    object-position: 50% 40% !important;
  }

  /* Drop the "01 / 03" counter — the thumbnails below do the same job. */
  #prodotti .prodotti__indicator { display: none !important; }

  /* Description: bottom-left, readable, clear of the product above it. */
  #prodotti .prodotti__desc { display: block !important; }
  #prodotti .prodotti__slide-info .info-testo {
    position: absolute !important;
    left: 6vw !important;
    right: auto !important;
    bottom: 7rem !important;
    width: 58vw !important;
    max-width: 340px !important;
    z-index: 20 !important;
  }
  #prodotti .prodotti__tagline { font-size: .72rem !important; margin-bottom: .35rem !important; }
  #prodotti .prodotti__desc {
    font-size: .74rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* Thumbnails: small, bottom-right, replacing the counter. */
  #prodotti .prodotti__previews {
    display: flex !important;
    position: absolute !important;
    left: auto !important;
    right: 4vw !important;
    bottom: 2.2rem !important;
    gap: .45rem !important;
    z-index: 25 !important;
  }
  #prodotti .prodotti__preview-img {
    width: 42px !important;
    height: 52px !important;
    border-radius: 7px !important;
  }
  #prodotti .prodotti__preview-label { font-size: .5rem !important; letter-spacing: .04em !important; }
}

/* ==========================================================================
   AYOR product page — warm argan/terracotta theme (matches the home prodotti
   AYOR slide, #b9723f). Scoped to body.page-ayor so the other product pages
   keep their own palettes until they are restyled.
   ========================================================================== */
/* Textur und Sinnlichkeit: beige -> warm caramel */
body.page-ayor .dett-texture {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(233, 180, 130, .38) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(190, 120, 65, .28) 0%, transparent 50%),
    #c68a55;
}
/* Warum es wählen: warm the photographic background */
body.page-ayor .dett-perche__bg {
  filter: sepia(.35) saturate(1.15) hue-rotate(-8deg) brightness(.98);
}
/* Prefooter (3-products banner) */
body.page-ayor .dett-prefooter { background: #c08050; }
/* Rotating AMNAY BEAUTY circle */
body.page-ayor .dett-cerchio { background-color: #d9a97b; }
/* "Amnay" in the brand display font; "Beauty" keeps the theme font */
body.page-ayor .dett-cerchio__text .cerchio-brand {
  font-family: 'Calora', 'freight-display-pro', serif;
}
/* Hero product a touch larger on mobile so it reads proportionate */
body.page-ayor .dett-hero__product-mobile { max-width: 275px !important; }
/* phones + tablets: bigger still, centred, anchored so its base sits right
   above the title on every viewport */
@media (max-width: 990px) {
  body.page-ayor .dett-hero__product-mobile {
    max-width: 330px !important;
    top: auto !important;
    bottom: 27% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
/* mobile ingredients: drop the photo background, keep the section-2 orange
   (#b9723f) with white text to match it */
@media (max-width: 990px) {
  body.page-ayor .dett-hscroll__panel .dett-hscroll__bg { display: none !important; }
  body.page-ayor .dett-hscroll__panel { background-color: #b9723f !important; }
  body.page-ayor .dett-hscroll__heading,
  body.page-ayor .dett-hscroll__label,
  body.page-ayor .dett-hscroll__text-block,
  body.page-ayor .dett-hscroll__text-block p,
  body.page-ayor .dett-hscroll__center-block,
  body.page-ayor .dett-hscroll__center-block p { color: #fff !important; }
}
body.page-ayor .dett-info__product-mobile img { width: 115%; max-width: none; }

/* Short phones: drop the tagline + thumbnail labels and narrow the description
   so the whole layout still fits without any element overlapping another. */
@media (max-width: 990px) and (max-height: 720px) {
  #prodotti .prodotti__tagline { display: none !important; }
  #prodotti .prodotti__desc { font-size: .68rem !important; line-height: 1.42 !important; }
  #prodotti .prodotti__slide-info .info-testo { bottom: 6rem !important; }
  #prodotti .prodotti__preview-label { display: none !important; }
  #prodotti .prodotti__preview-img { width: 38px !important; height: 48px !important; }
  #prodotti .prodotti__previews { bottom: 1.6rem !important; }
}