/*
 * ACADÉMIE HERO — MOBILE V6 CORRECTED
 *
 * Replacement content for the existing:
 * /assets/css/partials/hero-mobile-final-v5.css
 *
 * Does not change JavaScript, swipe behavior or product slider functionality.
 */
@media (max-width: 1050px) {

  .ab-hero {
    /*
     * Header is fixed above the hero and visually covers its first ~65px.
     * Therefore the hero itself must still occupy the complete small viewport.
     */
    --ab-header-height: 65px;
    --ab-copy-top: calc(var(--ab-header-height) + 17px);
    --ab-panel-top: clamp(202px, 30.8svh, 220px);
    --ab-panel-height: clamp(278px, 42svh, 292px);

    position: relative !important;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
  }

  /* ---------------------------------------------------------------
     HERO TITLE
     --------------------------------------------------------------- */

  .ab-copy {
    position: absolute !important;
    left: 21px !important;
    right: 12px !important;
    top: var(--ab-copy-top) !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .ab-eyebrow {
    margin: 0 0 8px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .33em !important;
  }

  .ab-copy h1,
  .ab-hero[data-slide="0"] .ab-copy h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px .1em 0 !important;
    font-size: clamp(29px, 8.15vw, 32px) !important;
    line-height: .89 !important;
    letter-spacing: -.035em !important;
    overflow: visible !important;
  }

  .ab-hero[data-slide="1"] .ab-copy h1 {
    font-size: clamp(27px, 7.65vw, 30px) !important;
    line-height: .9 !important;
  }

  /*
   * Keep the title animation masks, but leave generous room for the period
   * and the final letters of REGENERATION.
   */
  .ab-title-line {
    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
    padding-right: .7em !important;
    margin-right: -.7em !important;
    padding-bottom: .1em !important;
    margin-bottom: -.1em !important;
  }

  .ab-title-line__inner {
    display: block !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  .ab-lead,
  .ab-cta {
    display: none !important;
  }

  /* ---------------------------------------------------------------
     GLASS PRODUCT PANEL
     --------------------------------------------------------------- */

  .ab-panel {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: var(--ab-panel-top) !important;
    bottom: auto !important;
    width: auto !important;
    height: var(--ab-panel-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;

    /*
     * The panel itself never moves. GSAP continues animating only its
     * internal text/product elements.
     */
    transform: none !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
    will-change: auto !important;
    contain: layout paint !important;
    z-index: 12 !important;
  }

  .ab-product-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 54px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px 6px !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  .ab-product-count {
    margin: 0 0 5px !important;
    gap: 8px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  .ab-product-count::after {
    width: 26px !important;
  }

  .ab-product-info h2 {
    max-width: calc(100% - 80px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.08 !important;
    letter-spacing: .02em !important;
  }

  .ab-product-desc,
  .ab-product-rule,
  .ab-stat,
  .ab-meta {
    display: none !important;
  }

  /* ---------------------------------------------------------------
     PRODUCT + PEDESTAL
     --------------------------------------------------------------- */

  .ab-stage {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 52px !important;
    bottom: 50px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .ab-platform {
    position: absolute !important;
    left: 50% !important;
    bottom: -27px !important;
    width: 164px !important;
    height: 132px !important;
    transform: translateX(-50%) !important;
    background-position: center bottom !important;
    background-size: contain !important;
  }

  .ab-stage::before {
    display: none !important;
  }

  .ab-product-main {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    translate: none !important;
    transform-origin: 50% 100% !important;
    z-index: 3 !important;
  }

  /*
   * Académie jars contain different transparent spacing than Derm Acte
   * bottles, so each brand gets its own optical contact point.
   */
  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 91px !important;
    max-height: 96px !important;
    margin-bottom: 45px !important;
  }

  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 70px !important;
    max-height: 98px !important;
    margin-bottom: 56px !important;
  }

  /* ---------------------------------------------------------------
     PANEL CONTROLS
     --------------------------------------------------------------- */

  .ab-panel-arrows {
    position: absolute !important;
    left: 11px !important;
    right: auto !important;
    top: 51% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    z-index: 6 !important;
  }

  .ab-panel-arrows button {
    width: 28px !important;
    height: 28px !important;
  }

  .ab-panel-arrows svg {
    width: 14px !important;
    height: 10px !important;
  }

  .ab-thumbs {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 50px !important;
    padding: 4px 7px 5px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 5px !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  .ab-thumb {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 41px !important;
    padding: 3px 4px 4px !important;
    display: grid !important;
    grid-template-rows: 22px 1fr !important;
  }

  .ab-thumb img {
    width: 26px !important;
    max-height: 22px !important;
  }

  .ab-thumb span {
    gap: 1px !important;
    min-width: 0 !important;
  }

  .ab-thumb b {
    font-size: 6.6px !important;
    line-height: 1 !important;
  }

  .ab-thumb span span {
    font-size: 6.1px !important;
    line-height: 1.02 !important;
    overflow: hidden !important;
  }

  /*
   * Brand selector stays aligned with the top-right of the fixed panel.
   */
  .ab-slide-indicator {
    position: absolute !important;
    right: 28px !important;
    top: calc(var(--ab-panel-top) + 10px) !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 16 !important;
  }

  .ab-slide-indicator span {
    display: block !important;
    order: 2 !important;
    width: 18px !important;
    height: 1px !important;
    background: rgba(255, 250, 244, .42) !important;
  }

  .ab-slide-indicator button {
    padding: 0 0 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    border-bottom: 1px solid transparent !important;
  }

  .ab-slide-indicator button:first-child {
    order: 1 !important;
  }

  .ab-slide-indicator button:last-child {
    order: 3 !important;
  }

  .ab-slide-indicator button::after {
    display: none !important;
  }

  .ab-slide-indicator button.is-active {
    border-bottom-color: currentColor !important;
  }

  /* ---------------------------------------------------------------
     SCROLL CONTROL
     --------------------------------------------------------------- */

  .ab-scroll {
    left: 50% !important;
    top: calc(var(--ab-panel-top) + var(--ab-panel-height) + 8px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    gap: 2px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 14 !important;
  }

  .ab-scroll i {
    width: 13px !important;
    height: 21px !important;
  }

  .ab-scroll i::before {
    top: 4px !important;
    width: 3px !important;
    height: 4px !important;
  }

  .ab-scroll svg {
    width: 9px !important;
    height: 5px !important;
  }

  .ab-stamp {
    display: none !important;
  }

  .ab-bg__image[data-slide-bg="1"] {
    object-position: 71% center !important;
  }
}

/* Narrow phones */
@media (max-width: 370px) {
  .ab-hero {
    --ab-copy-top: 77px;
    --ab-panel-top: 194px;
    --ab-panel-height: 272px;
  }

  .ab-copy h1,
  .ab-hero[data-slide="0"] .ab-copy h1 {
    font-size: 28px !important;
  }

  .ab-hero[data-slide="1"] .ab-copy h1 {
    font-size: 26px !important;
  }

  .ab-panel {
    left: 12px !important;
    right: 12px !important;
  }

  .ab-platform {
    width: 154px !important;
    height: 124px !important;
  }

  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 86px !important;
    max-height: 91px !important;
    margin-bottom: 42px !important;
  }

  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 66px !important;
    max-height: 93px !important;
    margin-bottom: 52px !important;
  }
}

/* ================================================================
   MOBILE V7 — taller luxury panel and larger product presentation
   Append after the V6 rules. No JavaScript or swipe changes.
   ================================================================ */
@media (max-width: 1050px) {

  .ab-hero {
    /* Longer glass panel while keeping the existing top position. */
    --ab-panel-height: clamp(326px, 48svh, 344px);
  }

  .ab-panel {
    height: var(--ab-panel-height) !important;
  }

  /* Slightly taller information header for a more premium rhythm. */
  .ab-product-info {
    height: 59px !important;
    padding: 11px 15px 7px !important;
  }

  .ab-product-count {
    margin-bottom: 6px !important;
    font-size: 9px !important;
  }

  .ab-product-info h2 {
    max-width: calc(100% - 84px) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /*
   * More vertical room for the hero product.
   * The bottom value reserves the taller thumbnail footer.
   */
  .ab-stage {
    top: 57px !important;
    bottom: 72px !important;
  }

  /* Slightly larger and more substantial glass pedestal. */
  .ab-platform {
    bottom: -25px !important;
    width: 178px !important;
    height: 143px !important;
  }

  /* Académie jars */
  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 108px !important;
    max-height: 114px !important;
    margin-bottom: 51px !important;
  }

  /* Derm Acte bottles */
  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 82px !important;
    max-height: 116px !important;
    margin-bottom: 62px !important;
  }

  /* Slightly larger arrows, still visually light. */
  .ab-panel-arrows {
    left: 12px !important;
    top: 50% !important;
    gap: 7px !important;
  }

  .ab-panel-arrows button {
    width: 31px !important;
    height: 31px !important;
  }

  /*
   * Taller thumbnail showcase.
   * Products are now large enough to read as curated mini product cards.
   */
  .ab-thumbs {
    height: 72px !important;
    padding: 6px 8px 7px !important;
    gap: 6px !important;
  }

  .ab-thumb {
    height: 59px !important;
    padding: 5px 5px 6px !important;
    grid-template-rows: 35px 1fr !important;
  }

  .ab-thumb img {
    width: 39px !important;
    max-height: 35px !important;
  }

  .ab-thumb b {
    font-size: 7.2px !important;
    line-height: 1 !important;
  }

  .ab-thumb span span {
    font-size: 6.8px !important;
    line-height: 1.05 !important;
  }

  /* Follow the new, taller panel height. */
  .ab-scroll {
    top: calc(var(--ab-panel-top) + var(--ab-panel-height) + 9px) !important;
  }
}

/* Fine tuning for narrow iPhones */
@media (max-width: 370px) {
  .ab-hero {
    --ab-panel-height: 316px;
  }

  .ab-platform {
    width: 168px !important;
    height: 135px !important;
  }

  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 101px !important;
    max-height: 107px !important;
    margin-bottom: 48px !important;
  }

  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 77px !important;
    max-height: 109px !important;
    margin-bottom: 58px !important;
  }

  .ab-thumbs {
    height: 68px !important;
  }

  .ab-thumb {
    height: 55px !important;
    grid-template-rows: 32px 1fr !important;
  }

  .ab-thumb img {
    width: 36px !important;
    max-height: 32px !important;
  }
}

/* ================================================================
   MOBILE V8 FINAL
   Larger pedestal products, premium thumbnail cards, neutral slide 01.
   No JavaScript, swipe or slider logic changes.
   ================================================================ */
@media (max-width: 1050px) {

  .ab-hero {
    /*
     * Extra panel depth is used only for the product presentation.
     * Existing title and panel top positions remain unchanged.
     */
    --ab-panel-height: clamp(392px, 56svh, 412px);
  }

  .ab-panel {
    height: var(--ab-panel-height) !important;

    /* Remove the bronze cast from the glass itself. */
    background:
      linear-gradient(180deg,
        rgba(241, 237, 233, .13),
        rgba(110, 101, 95, .10)) !important;
  }

  /* ---------------------------------------------------------------
     MAIN PRODUCT AREA
     --------------------------------------------------------------- */

  .ab-product-info {
    height: 61px !important;
    padding: 12px 15px 7px !important;
  }

  .ab-product-count {
    margin-bottom: 6px !important;
    font-size: 9px !important;
  }

  .ab-product-info h2 {
    max-width: calc(100% - 90px) !important;
    font-size: 10.3px !important;
    line-height: 1.1 !important;
  }

  .ab-stage {
    top: 59px !important;
    bottom: 150px !important;
  }

  /*
   * Larger pedestal. Its width and highlight remain balanced with the
   * larger product without making the panel feel crowded.
   */
  .ab-platform {
    bottom: -27px !important;
    width: 190px !important;
    height: 153px !important;
  }

  /*
   * The visible bottom of each PNG must meet the optical top surface of
   * the pedestal. Reduced margin-bottom lowers the product; increased
   * dimensions create the stronger high-end product focus.
   */

  /* Académie jars and serums */
  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 174px !important;
    max-height: 182px !important;
    margin-bottom: 28px !important;
  }

  /* Derm Acte bottles and tubes */
  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 146px !important;
    max-height: 182px !important;
    margin-bottom: 30px !important;
  }

  /* ---------------------------------------------------------------
     THUMBNAIL PRODUCT CARDS
     --------------------------------------------------------------- */

  .ab-thumbs {
    height: 116px !important;
    padding: 8px 8px 9px !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  .ab-thumb {
    height: 91px !important;
    min-height: 81px !important;
    padding: 6px 5px 7px !important;
    grid-template-rows: 43px minmax(28px, 1fr) !important;
    align-items: start !important;
    overflow: hidden !important;
  }

  .ab-thumb img {
    width: 62px !important;
    height: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .ab-thumb>span {
    min-width: 0 !important;
    height: 100% !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  .ab-thumb b {
    font-size: 7.5px !important;
    line-height: 1 !important;
  }

  .ab-thumb span span {
    display: block !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /*
   * Product cards remain readable even when a title needs three or four
   * short lines. Slightly reduce only the very longest fourth card label.
   */
  .ab-thumb:nth-child(4) span span {
    font-size: 6.7px !important;
  }

  /* Follow the final panel height. */
  .ab-scroll {
    top: calc(var(--ab-panel-top) + var(--ab-panel-height) + 10px) !important;
  }

  /* ---------------------------------------------------------------
     NEUTRAL ACADÉMIE BACKGROUND TREATMENT
     --------------------------------------------------------------- */

  .ab-bg__image[data-slide-bg="0"] {
    object-position: 68% center !important;
  }

  /*
   * The new background is already neutral. Replace the old warm screen
   * overlay with a restrained ivory/greige wash.
   */
  .ab-hero[data-slide="0"] .ab-bg__wash {
    background:
      linear-gradient(90deg,
        rgba(248, 246, 243, .15) 0%,
        rgba(238, 235, 232, .07) 38%,
        rgba(97, 91, 87, .025) 100%) !important;
    mix-blend-mode: normal !important;
    opacity: .78 !important;
  }

  .ab-hero[data-slide="0"] .ab-bg__vignette {
    background:
      linear-gradient(180deg,
        rgba(47, 43, 40, .03),
        transparent 22%,
        transparent 76%,
        rgba(38, 34, 32, .10)) !important;
  }
}

/* iPhone SE / very narrow devices */
@media (max-width: 370px) {
  .ab-hero {
    --ab-panel-height: 352px;
  }

  .ab-platform {
    width: 180px !important;
    height: 145px !important;
  }

  .ab-hero[data-slide="0"] .ab-product-main {
    max-width: 116px !important;
    max-height: 124px !important;
    margin-bottom: 35px !important;
  }

  .ab-hero[data-slide="1"] .ab-product-main {
    max-width: 90px !important;
    max-height: 124px !important;
    margin-bottom: 44px !important;
  }

  .ab-thumbs {
    height: 90px !important;
  }

  .ab-thumb {
    height: 75px !important;
    min-height: 75px !important;
    grid-template-rows: 39px minmax(27px, 1fr) !important;
  }

  .ab-thumb img {
    width: 46px !important;
    height: 39px !important;
    max-height: 39px !important;
  }

  .ab-thumb span span {
    font-size: 6.6px !important;
  }
}


/* ================================================================
   MOBILE — smooth hero-to-content exit
   Append this at the very end of the current hero-mobile.css.
   Does not alter the normal hero layout.
   ================================================================ */
@media (max-width: 920px) {

  .ab-hero.is-content-scrolling {
    pointer-events: none !important;
  }

  /*
   * JavaScript adds this class only after the hero UI has faded to opacity: 0.
   * Removing the large live blur while the hero scrolls off-screen saves a
   * substantial GPU repaint on iPhone without producing a visible flash.
   */
  .ab-hero.is-content-scrolling .ab-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .ab-hero.is-content-scrolling .ab-panel::before,
  .ab-hero.is-content-scrolling .ab-panel::after,
  .ab-hero.is-content-scrolling .ab-panel__shine {
    opacity: 0 !important;
  }

  .ab-hero.is-content-scrolling .ab-stamp__circle,
  .ab-hero.is-content-scrolling .ab-scroll i::before {
    animation-play-state: paused !important;
  }
}