/* ═══════════════════════════════════════════════════════════
   AURIA — MOBILE · TABLET · CROSS-BROWSER
   Loads last. Must win over theme/pages/shop/product CSS.
   ═══════════════════════════════════════════════════════════ */

/* ── Base: all viewports (safe defaults) ── */
*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden; /* Safari < 16 fallback */
  overflow-x:clip;
  scroll-padding-top:88px;
}
/* Quiet focus on touch devices */
@media (pointer:coarse){
  :focus-visible{outline-width:2px;outline-offset:2px}
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  min-width:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Prevent horizontal page scroll from absolute FX */
body.is-locked{
  overflow:hidden !important;
  position:fixed;
  width:100%;
  left:0;right:0;
  /* top set by JS from scrollY */
}
img,video,canvas,svg{max-width:100%;height:auto}
iframe,embed,object{max-width:100%}
table{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}
/* iOS: stop auto-zoom on focus (needs ≥16px) */
@media (max-width:960px){
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=search],
  input[type=password],
  input[type=number],
  input[type=url],
  select,
  textarea{
    font-size:16px !important;
  }
}

/* Safe areas (notch / home indicator) */
.topbar,.header,.footer,.nl-pop,.minicart__panel,.drawer__panel{
  padding-left:max(0px, env(safe-area-inset-left, 0px));
  padding-right:max(0px, env(safe-area-inset-right, 0px));
}
.minicart__panel,.drawer__panel{
  padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
  height:100%;
  height:100dvh;
  max-height:-webkit-fill-available;
}
.pdp-sticky{
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
}

/* Touch: larger hit targets */
@media (pointer:coarse){
  .icon-btn,.burger,.nav a,.btn,.pdp-gallery__nav,.pdp-qty-btn{
    min-height:44px;
  }
  .nav a{min-height:44px;display:inline-flex;align-items:center}
  /* Kill hover-only FX that stick on touch */
  .btn--magnetic:hover,
  [data-magnetic]:hover{transform:none !important}
}

/* Hover FX only where real hover exists */
@media (hover:none),(pointer:coarse){
  .pcard:hover,.bcard:hover,.pdp-life__card:hover,.pdp-rev:hover,
  .pdp-trust__item:hover,.mkt-card:hover{
    transform:none !important;
  }
  .hero__img,.swish video,[data-parallax-img]{
    transform:none !important;
    animation:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ≤1100 — tablet landscape / small laptop
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .wrap{width:min(100% - 36px, 1200px)}
  .footer__grid{grid-template-columns:1.2fr 1fr 1fr 1fr !important;gap:24px}
  .mkt-split,.mkt-split--rev{gap:28px}
}

/* ═══════════════════════════════════════════════════════════
   ≤960 — phones + tablets portrait (primary mobile)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:960px){
  :root{
    --section-y:56px;
    --blend-h:64px;
    --max:100%;
  }

  .wrap{width:min(100% - 28px, 100%) !important}

  /* Top bar */
  .topbar{
    font-size:9px;letter-spacing:.08em;padding:8px 12px;line-height:1.35;
    white-space:normal;text-align:center;
  }

  /* Header — burger · logo · icons */
  .header{position:-webkit-sticky;position:sticky;top:0;z-index:50}
  .header__bar{min-height:64px !important;padding:6px 0 !important}
  .logo img{height:50px !important;max-height:50px !important;max-width:min(148px,38vw) !important}
  .icon-btn{width:44px;height:44px}
  .burger{display:flex !important;width:44px;height:44px}
  .header__nav{display:none !important}
  .drawer__panel{width:min(100%, min(360px, 92vw));padding:18px 18px 28px}
  .nav--mobile{list-style:none;margin:0;padding:0}
  .nav--mobile a{
    display:flex;align-items:center;
    padding:14px 0;font-size:13px;min-height:48px;
    letter-spacing:.12em;text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.06);
    text-decoration:none;color:#F7F3EA;
  }
  .drawer .btn--block{width:100%;min-height:48px;text-align:center}

  /* Hero — copy sits higher (not stuck to bottom) */
  .hero{
    --hero-h:auto !important;
    height:auto !important;
    min-height:100vh !important;
    min-height:100svh !important;
    max-height:none !important;
    align-items:stretch;
  }
  .hero__grid{
    height:auto !important;
    min-height:100vh;
    min-height:100svh;
    grid-template-columns:1fr !important;
    /* Was flex-end — text sat too low on phones */
    align-items:center !important;
    justify-items:center;
    /* Extra top for header; more bottom so block sits optically higher */
    padding:max(96px, 16vh) 0 max(120px, 18vh) !important;
    width:min(100% - 24px, 100%) !important;
  }
  .hero__copy,.hero__lockup{
    max-width:min(100%,380px) !important;
    margin-inline:auto;
    margin-top:-6vh !important; /* nudge lockup up a touch */
    padding:0 !important;
  }
  .lockup{max-width:100% !important;margin-bottom:6px}
  .lockup__mark-img,.lockup__mark img{width:46px !important}
  .lockup__brand{
    font-size:clamp(1.5rem, 7.5vw, 2.05rem) !important;
    letter-spacing:.1em !important;
    text-indent:.1em !important;
    white-space:nowrap;
  }
  .lockup__product{font-size:9px !important;letter-spacing:.12em !important;gap:6px !important}
  .lockup__tag{font-size:9px !important;letter-spacing:.08em !important}
  .lockup__lede{
    font-size:13px !important;line-height:1.5 !important;
    max-width:30ch !important;margin-bottom:8px !important;
  }
  .lockup__made{font-size:1.05rem !important}
  .lockup__uk svg{width:28px !important;height:auto}
  .hero__lockup .hero__actions,
  .hero__actions{
    flex-direction:column !important;
    width:100%;max-width:300px;gap:8px !important;
    margin-bottom:6px !important;
  }
  .hero__lockup .hero__actions .btn,
  .hero__actions .btn{
    width:100% !important;max-width:300px;
    min-height:46px;padding:12px 18px !important;font-size:10px !important;
  }
  .hero__stats{
    max-width:300px;gap:6px 8px !important;padding-top:8px !important;
  }
  .hero__stats dt{font-size:1.05rem !important}
  .hero__stats dd{font-size:8px !important}
  .hero__scroll{bottom:12px !important;font-size:8px}
  /* Bottle a little higher so copy clears the vessel */
  .hero__img{object-position:center 22% !important}

  /* Brand bar styles live in theme.css (readable mobile cards) */

  /* Homepage sections → single column */
  .atelier__grid,.formula__grid,.storyband__grid,
  .frames__grid,.ritual__steps,.purity__grid{grid-template-columns:1fr !important}
  .atelier,.formula,.purity,.storyband{padding-top:var(--section-y);padding-bottom:var(--section-y)}
  .atelier__stage{max-width:360px;margin:0 auto 24px}
  .atelier__cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .atelier__cta .btn{width:100%;max-width:300px;text-align:center}
  .display,.display--sm,.display--atelier,.display--light{
    font-size:clamp(1.7rem, 7vw, 2.35rem) !important;
    word-wrap:break-word;overflow-wrap:break-word;
  }

  /* Swish / cinerama / finale */
  .swish{
    min-height:100vh !important;
    min-height:100svh !important;
    max-height:none;
  }
  .swish__content{
    padding:clamp(40px,7vh,64px) 12px !important;
    max-width:100%;
    align-items:center !important;
  }
  .swish__stage{
    padding:20px 14px 18px !important;
    width:100%;
  }
  .swish__title{
    font-size:clamp(2rem, 9vw, 2.75rem) !important;
    max-width:11ch !important;
    margin-bottom:14px !important;
  }
  .swish__t-rule{margin:10px auto 8px !important;width:48px !important}
  .swish__kicker{margin-bottom:14px !important}
  .swish__actions{flex-direction:column;align-items:center}
  .swish__actions .btn{width:min(100%,300px);min-height:48px}
  .swish__text{font-size:14px !important;max-width:30ch !important;margin-bottom:20px !important}
  .cinerama{min-height:min(70vh, 520px) !important}
  .cinerama__copy{
    margin-inline:auto !important;
    max-width:min(100% - 24px, 480px) !important;
    padding:40px 0 !important;
  }
  .finale{min-height:min(70vh, 520px) !important;padding:64px 16px !important}
  .finale__actions{flex-direction:column;align-items:center}
  .finale__actions .btn{width:min(100%,280px);min-height:48px}
  .finale__title{font-size:clamp(1.85rem, 8vw, 2.7rem) !important}
  .finale__specs{justify-content:center;flex-wrap:wrap}

  .ritual__connector{display:none}
  .ritual__bar{flex-direction:column;gap:12px;align-items:stretch}
  .ritual__bar .btn{width:100%}
  .frames{padding:56px 0 64px !important}
  .frame{max-width:400px;margin-inline:auto;width:100%;aspect-ratio:4/5}
  .voices__track{grid-template-columns:1fr !important;gap:14px}
  .service__grid{grid-template-columns:1fr 1fr !important;gap:12px}
  .nlband__inner{grid-template-columns:1fr !important;gap:20px;text-align:center}
  .nl{flex-direction:column;width:100%}
  .nl input[type=email],.nl .btn{width:100%;min-height:48px}
  .storyband__visual{max-width:320px;margin:24px auto 0}
  .check-list{grid-template-columns:1fr !important}
  .purity__grid{grid-template-columns:1fr 1fr !important;gap:10px}

  .btn{min-height:46px;padding:12px 20px}
  .btn--lg{min-height:48px}

  /* Footer */
  .footer__grid{grid-template-columns:1fr 1fr !important;gap:24px}
  .footer__brand,.footer__col--nl{grid-column:1 / -1}
  .footer__base-inner{flex-direction:column;text-align:center;gap:10px}
  .footer__nl{flex-direction:column}
  .footer__nl input,.footer__nl .btn{width:100%;min-height:48px}

  .blend::after{height:64px !important}
  .blend--wave::before{height:32px !important}

  /* ── Marketing pages ── */
  .page-hero{padding:clamp(28px,6vw,48px) 0 22px}
  .page-hero__lede{font-size:14px;padding:0 4px}
  .mkt-split,.mkt-split--rev{grid-template-columns:1fr !important;gap:24px;padding:28px 0}
  .mkt-values,.mkt-grid3{grid-template-columns:1fr !important}
  .mkt-step{grid-template-columns:44px 1fr !important}
  .mkt-cta__actions{flex-direction:column;align-items:center}
  .mkt-cta__actions .btn{width:min(100%,300px);min-height:48px}
  .faq-list{padding:20px 0}
  .faq-item__q{min-height:48px;padding:14px 16px;font-size:14px}
  .contact-grid{grid-template-columns:1fr !important;gap:20px}
  .contact-form input,.contact-form textarea{min-height:48px}
  .contact-form textarea{min-height:140px}

  /* Blog */
  .blog-grid{grid-template-columns:1fr !important;gap:16px}
  .post-feature{padding:0 0 8px}
  .post-nav{flex-direction:column;gap:12px}

  /* Shop */
  .shop-head{padding:28px 0 20px}
  .shop-body{padding:24px 0 64px}
  .woocommerce ul.products,
  .products{grid-template-columns:1fr !important;gap:16px !important}
  .shop-page--showcase .pcard{grid-template-columns:1fr !important}
  .shop-page--showcase .pcard__media{
    min-height:0 !important;aspect-ratio:1/1.08;max-height:340px;
    border-right:0 !important;
  }
  .shop-page--showcase .pcard__body{padding:22px 18px 28px !important}
  .shop-page--showcase .pcard__title{font-size:clamp(1.7rem,7vw,2.15rem) !important}
  .shop-page--showcase .pcard__actions .btn{min-height:52px}
  .pcard__actions{flex-direction:column}
  .pcard__actions .btn{width:100%;min-height:48px;justify-content:center}
  .shop-toolbar{flex-direction:column;align-items:stretch}
  .shop-toolbar .woocommerce-ordering select{width:100%;min-height:44px}
  .shop-reassure__grid{grid-template-columns:1fr 1fr !important}
  .shop-head__trust{gap:6px}
  .shop-head__trust li{font-size:9px;padding:7px 10px}

  /* Cart / checkout / account */
  .page-entry--woo{padding:12px 0 72px !important;max-width:100% !important}
  .woocommerce-cart table.shop_table,
  .woocommerce-checkout table.shop_table{font-size:13px}
  .woocommerce-cart .cart-collaterals .cart_totals{max-width:none !important;width:100% !important}
  .woocommerce-checkout .col2-set{grid-template-columns:1fr !important}
  .woocommerce-account .woocommerce{grid-template-columns:1fr !important;gap:16px}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li{flex:1 1 auto}
  .woocommerce-account .woocommerce-MyAccount-navigation a{
    text-align:center;padding:12px 10px;min-height:44px;
  }
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tr{
    display:block;margin-bottom:14px;
    border:1px solid rgba(196,163,90,.16);border-radius:4px;background:#fff;
  }
  .woocommerce table.shop_table_responsive td{
    display:block;text-align:right !important;padding:10px 14px !important;
  }
  .woocommerce table.shop_table_responsive td::before{
    content:attr(data-title);
    float:left;font-weight:600;text-transform:uppercase;
    font-size:10px;letter-spacing:.08em;color:#8F7340;
  }

  /* Minicart full-bleed on small screens */
  .minicart__panel{width:min(100%,100%) !important}

  /* Newsletter popup */
  .nl-pop{padding:12px;align-items:flex-end}
  .nl-pop__panel{grid-template-columns:1fr !important;max-height:min(92dvh, 720px);overflow:auto}
  .nl-pop__visual{min-height:140px !important;max-height:160px !important}
  .nl-pop__form input[type=email],.nl-pop__row .btn{min-height:50px;width:100%}

  /* Product page */
  .pdp-hero{padding:16px 0 32px}
  .pdp-hero__grid{grid-template-columns:1fr !important;gap:20px}
  .pdp-gallery{position:static !important}
  .pdp-gallery__stage{
    max-width:100%;aspect-ratio:1 / 1.05;margin:0 auto;
  }
  .pdp-gallery__thumbs{
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;gap:8px;
  }
  .pdp-gallery__thumb{
    flex:0 0 68px;width:68px;height:80px;scroll-snap-align:start;
  }
  .pdp-gallery__nav{opacity:.92 !important;width:40px;height:40px}
  .pdp-title{font-size:clamp(1.7rem, 7vw, 2.2rem) !important}
  .pdp-form .cart{flex-direction:column;align-items:stretch !important}
  .pdp-form .quantity{width:100%;justify-content:center}
  .pdp-form .single_add_to_cart_button,
  .pdp-form button.button.alt{width:100% !important;min-height:52px !important}
  .pdp-trust{grid-template-columns:1fr 1fr !important}
  .pdp-promise__row{grid-template-columns:1fr 1fr !important;gap:14px}
  .pdp-promise__item{border-right:0 !important}
  .pdp-hero2{min-height:min(72svh, 520px) !important}
  .pdp-hero2__title{font-size:clamp(1.8rem, 8vw, 2.5rem) !important}
  .pdp-hero2__actions{flex-direction:column;align-items:center}
  .pdp-hero2__actions .btn{width:min(100%,300px);min-height:48px}
  .pdp-life__grid,.pdp-reviews__grid{grid-template-columns:1fr !important}
  .pdp-specs__grid,.pdp-faq__grid{grid-template-columns:1fr !important}
  .pdp-band{min-height:auto}
  .pdp-band__copy{padding:48px 0;max-width:100%}
  .pdp-acc summary{min-height:48px;padding:16px 4px}
  .pdp-finale__inner{grid-template-columns:1fr !important;text-align:center}
  .pdp-finale__copy{text-align:center}
  .pdp-finale__text{margin-inline:auto}
  .pdp-finale__bottle{max-width:280px;margin-inline:auto;min-height:200px}
  body.single-product{padding-bottom:80px}

  /* History */
  .hist-hero{min-height:min(88svh, 720px) !important}
  .hist-nav__track{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;justify-content:flex-start;gap:4px;
    scrollbar-width:none;
  }
  .hist-nav__btn{flex:0 0 auto;white-space:nowrap;min-height:40px;font-size:11px}
  .hist-era__grid,.hist-intro__grid{grid-template-columns:1fr !important}
  .hist-title{font-size:clamp(2.1rem, 10vw, 3rem) !important}

  /* Particles / FX — contain overflow */
  .hero__flakes,.swish__particles,.swish__sparks,.finale__particles,
  .pdp-hero2__particles{overflow:hidden !important;pointer-events:none}
  [data-reveal],.lockup{will-change:auto}

  /* 404 / empty */
  .page-hero .mkt-cta__actions{flex-direction:column;align-items:center}
}

/* ═══════════════════════════════════════════════════════════
   ≤720 — large phones
   ═══════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .service__grid{grid-template-columns:1fr !important}
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review{padding:16px !important}
  .pdp-sticky__name{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════
   ≤560 — small phones
   ═══════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .wrap{width:min(100% - 20px, 100%) !important}
  .topbar{font-size:8px;letter-spacing:.05em;padding:7px 8px}

  .hero{min-height:100svh !important}
  .hero__grid{
    min-height:100svh;
    align-items:center !important;
    padding:max(84px, 14vh) 0 max(110px, 17vh) !important;
  }
  .hero__copy,.hero__lockup{margin-top:-8vh !important}
  .lockup__brand{font-size:1.45rem !important;letter-spacing:.08em !important}
  .lockup__lede{font-size:12.5px !important}
  .hero__img{object-position:center 18% !important}

  .purity__grid{grid-template-columns:1fr !important}
  .footer__grid{grid-template-columns:1fr !important}

  .sheet__row{flex-direction:column;align-items:flex-start;gap:4px}
  .sheet__row strong{text-align:left}

  .swish__ribbon,.swish__streak{opacity:.3 !important}
  .swish__particles i:nth-child(n+16){display:none !important}
  .pdp-hero2__particles i:nth-child(n+12){display:none !important}

  /* Gradient text fallback if clip fails */
  .display em,
  .pdp-hero2__line--em{
    -webkit-text-fill-color:currentColor;
  }
  .pdp-hero2__line--em{
    color:#E8A0AE;
    background:none;
    -webkit-text-fill-color:#E8A0AE;
  }
}

/* ═══════════════════════════════════════════════════════════
   Landscape phones
   ═══════════════════════════════════════════════════════════ */
@media (max-height:480px) and (orientation:landscape){
  .hero{min-height:100vh !important;min-height:100svh !important}
  .hero__grid{min-height:100svh;padding:12px 0 36px !important}
  .lockup__lede,.hero__stats,.hero__scroll{display:none !important}
  .swish{min-height:100svh !important}
  .drawer__panel,.minicart__panel{overflow-y:auto}
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],.lockup,[data-anim]{opacity:1 !important;transform:none !important}
}

/* ═══════════════════════════════════════════════════════════
   Print
   ═══════════════════════════════════════════════════════════ */
@media print{
  .topbar,.header,.drawer,.minicart,.nl-pop,.pdp-sticky,
  .scroll-progress,.burger,.footer__nl,.hero__scroll{display:none !important}
  body{background:#fff;color:#000}
  a{text-decoration:underline}
  .pdp-gallery__stage,.pcard{box-shadow:none !important}
}