/* V14 — Mobile Atelier Rescue Pass
   Purpose: kill the mobile slab, restore legibility, make the header/logo feel like a storybook display surface,
   and keep product buying paths thumb-friendly on iOS/Android. */
:root{
  --cc-v14-ink:#12070D;
  --cc-v14-soft:#FFF4FA;
  --cc-v14-pink:#E95A96;
  --cc-v14-blush:#F9D2E7;
  --cc-v14-hot:#FF4FA9;
}

/* Universal protection against accidental horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden;}
body{overscroll-behavior-x:none;}
img,svg,video,canvas{max-width:100%;}

@media (max-width: 820px){
  html{background:#12070D !important;}
  body{
    width:100% !important;
    min-width:0 !important;
    background:
      radial-gradient(circle at 10% -5%, rgba(255,244,250,.24), transparent 28%),
      radial-gradient(circle at 92% 2%, rgba(233,90,150,.33), transparent 27%),
      radial-gradient(circle at 50% 18%, rgba(249,210,231,.18), transparent 32%),
      linear-gradient(180deg,#12070D 0%,#28101D 34%,#FFF3FA 74%,#FFF4FA 100%) !important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
  .page-shell{width:100% !important;max-width:100vw !important;overflow-x:hidden !important;}

  /* Header becomes a real mobile app/storefront display top, not a white display slab. */
  .site-header.statement-header,
  .statement-header{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px !important;
    padding:calc(12px + env(safe-area-inset-top)) 10px 12px !important;
    border-radius:0 0 28px 28px !important;
    gap:8px !important;
    border:0 !important;
    outline:0 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 14% 10%, rgba(255,255,255,.34), transparent 18%),
      radial-gradient(circle at 84% 7%, rgba(233,90,150,.52), transparent 23%),
      radial-gradient(circle at 50% 130%, rgba(255,244,250,.20), transparent 35%),
      linear-gradient(135deg,#12070D 0%,#2B1020 42%,#E95A96 100%) !important;
    box-shadow:0 18px 38px rgba(18,7,13,.26), inset 0 -1px 0 rgba(255,244,250,.18) !important;
  }
  .statement-header::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    opacity:.42 !important;
    pointer-events:none !important;
    background:
      radial-gradient(circle at 14% 34%, rgba(255,255,255,.90) 0 1.1px, transparent 2.4px),
      radial-gradient(circle at 42% 18%, rgba(249,210,231,.86) 0 1.2px, transparent 2.5px),
      radial-gradient(circle at 72% 38%, rgba(255,255,255,.80) 0 1.1px, transparent 2.2px),
      linear-gradient(110deg, transparent 0 37%, rgba(255,255,255,.18) 48%, transparent 59%);
    background-size:112px 82px,132px 90px,148px 104px,100% 100% !important;
  }
  .statement-header::after{
    content:"" !important;
    position:absolute !important;
    right:-28px !important;
    bottom:-34px !important;
    width:112px !important;
    height:112px !important;
    opacity:.24 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:url('../images/editorial/baby-cheeky-peek.webp') center/contain no-repeat !important;
    filter:drop-shadow(0 10px 18px rgba(18,7,13,.30)) !important;
  }
  .statement-header > *{position:relative;z-index:1;}

  .hero-wordmark{
    width:min(94vw, 390px) !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:9px 12px !important;
    border-radius:24px !important;
    border:1px solid rgba(255,244,250,.62) !important;
    outline:1px dashed rgba(255,244,250,.26) !important;
    outline-offset:-6px !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(255,255,255,.74), transparent 32%),
      radial-gradient(circle at 88% 20%, rgba(255,79,169,.32), transparent 28%),
      linear-gradient(135deg,rgba(255,244,250,.20),rgba(249,210,231,.08) 48%,rgba(18,7,13,.18)) !important;
    box-shadow:0 14px 28px rgba(18,7,13,.22), inset 0 1px 0 rgba(255,255,255,.35) !important;
    backdrop-filter:blur(14px) saturate(1.25) !important;
  }
  .hero-wordmark::before{
    content:"" !important;
    left:10px !important;
    bottom:6px !important;
    width:46px !important;
    opacity:.20 !important;
    background:url('../images/editorial/cc-resin-mark.webp') center/contain no-repeat !important;
  }
  .hero-wordmark::after{
    inset:6px !important;
    opacity:.26 !important;
    border-color:rgba(255,244,250,.38) !important;
  }
  .hero-wordmark img{
    display:block !important;
    width:min(100%, 340px) !important;
    max-width:340px !important;
    max-height:78px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 5px 7px rgba(18,7,13,.44)) drop-shadow(0 0 12px rgba(255,244,250,.20)) !important;
  }
  .header-subtitle{
    margin:0 !important;
    max-width:calc(100vw - 28px) !important;
    white-space:normal !important;
    font-size:.62rem !important;
    line-height:1.2 !important;
    letter-spacing:.13em !important;
    color:#FFF4FA !important;
    background:rgba(18,7,13,.34) !important;
    border:1px solid rgba(255,244,250,.20) !important;
    border-radius:999px !important;
    padding:.34rem .62rem !important;
    text-shadow:0 1px 8px rgba(18,7,13,.42) !important;
  }

  /* Top nav should swipe like an app rail, not wrap into a messy header. */
  .statement-nav{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:4px 2px 7px !important;
    margin:0 auto !important;
    border:0 !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .statement-nav::-webkit-scrollbar{display:none;}
  .statement-nav a{
    flex:0 0 auto !important;
    scroll-snap-align:start;
    min-height:38px !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    font-size:.76rem !important;
    line-height:1 !important;
    color:#FFF4FA !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,244,250,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
    text-shadow:none !important;
  }
  .statement-nav a::after{display:none !important;}

  /* LANGUAGES rail: horizontal, readable, and not a slab. */
  .language-switcher{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    margin:1px auto 0 !important;
    padding:7px 8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border-radius:18px !important;
    border:1px solid rgba(255,244,250,.32) !important;
    background:rgba(18,7,13,.42) !important;
    box-shadow:0 8px 20px rgba(18,7,13,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
    backdrop-filter:blur(16px) saturate(1.25) !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .language-switcher::-webkit-scrollbar{display:none;}
  .language-switcher-label{
    position:sticky;
    left:0;
    z-index:2;
    flex:0 0 auto !important;
    color:#FFF4FA !important;
    background:rgba(18,7,13,.66) !important;
    border:1px solid rgba(255,244,250,.20) !important;
    border-radius:999px !important;
    padding:.44rem .62rem !important;
    font-size:.62rem !important;
    line-height:1 !important;
    letter-spacing:.10em !important;
    text-shadow:none !important;
  }
  .language-switcher a{
    flex:0 0 auto !important;
    min-height:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.43rem .68rem !important;
    font-size:.72rem !important;
    line-height:1 !important;
    color:#12070D !important;
    background:rgba(255,244,250,.94) !important;
    border:1px solid rgba(18,7,13,.16) !important;
    box-shadow:0 4px 10px rgba(18,7,13,.12) !important;
  }

  .statement-main{padding-top:0 !important;}
  .home-showcase.statement-home-showcase{padding:0 !important;}
  .home-shell-centered,
  .surface-wide{
    width:100% !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:0 10px 12px !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .home-shell-centered::before,
  .home-shell-centered::after{display:none !important;}

  /* Main hero: readable storybook panel, but not a billboard slab. */
  .hero-stack.text-card,
  .hero-stack{
    width:100% !important;
    margin:10px auto 12px !important;
    padding:18px 12px 20px !important;
    border-radius:28px !important;
    outline:1px dashed rgba(233,90,150,.26) !important;
    outline-offset:-7px !important;
    background:
      radial-gradient(circle at 13% 10%, rgba(255,255,255,.88), transparent 25%),
      radial-gradient(circle at 86% 2%, rgba(249,183,217,.48), transparent 24%),
      linear-gradient(135deg,rgba(255,244,250,.96),rgba(249,210,231,.84) 52%,rgba(255,255,255,.94)) !important;
    box-shadow:0 16px 36px rgba(91,37,58,.14), inset 0 1px 0 rgba(255,255,255,.62) !important;
  }
  .hero-stack.text-card::before{
    width:96px !important;
    left:-20px !important;
    bottom:-22px !important;
    opacity:.11 !important;
  }
  .hero-stack.text-card::after{inset:8px !important;opacity:.30 !important;}
  .hero-kicker{font-size:.68rem !important;letter-spacing:.14em !important;color:#9F195B !important;}
  .hero-title-centered,
  .hero-title{
    font-size:clamp(2.05rem, 11.5vw, 3.35rem) !important;
    line-height:.94 !important;
    letter-spacing:-.045em !important;
    color:#12070D !important;
    margin:0 !important;
  }
  .hero-title-centered .hero-title-accent,
  .hero-title-accent{
    display:block !important;
    margin-top:.18rem !important;
    font-size:clamp(1rem, 5.3vw, 1.35rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    color:#9F195B !important;
  }
  .hero-text-centered,
  .hero-text,
  .section-lede,
  .surface-note{
    font-size:.96rem !important;
    line-height:1.48 !important;
    color:#210B16 !important;
  }
  .hero-overdrive-note{
    width:100% !important;
    border-radius:18px !important;
    font-size:.84rem !important;
    line-height:1.28 !important;
    padding:.62rem .72rem !important;
    color:#12070D !important;
    background:rgba(255,255,255,.74) !important;
  }
  .hero-actions,
  .hero-actions-centered,
  .surface-actions,
  .product-surface-actions,
  .card-actions,
  .button-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:10px !important;
    justify-items:stretch !important;
  }
  .cta-slab,
  .ghost-slab,
  .cta-wow,
  .mega-button{
    width:100% !important;
    min-height:50px !important;
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:.86rem 1rem !important;
    border-radius:16px !important;
    font-size:.94rem !important;
    line-height:1.05 !important;
    text-align:center !important;
  }
  .feature-chips,
  .feature-chips-centered,
  .tag-row{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    gap:8px !important;
    padding-bottom:2px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .feature-chips::-webkit-scrollbar,.tag-row::-webkit-scrollbar{display:none;}
  .status-tag{flex:0 0 auto !important;font-size:.70rem !important;min-height:30px !important;}

  .dark-band,
  .statement-band,
  .section,
  .sparkle-impact-lane,
  .creation-mini-cta,
  .collection-block,
  .light-panel,
  .lucky-panel,
  .localized-seo-intro{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:18px 12px !important;
    border-radius:26px !important;
  }
  .ornament-title,
  .split-intro h2,
  .section h2,
  .impact-title{
    font-size:clamp(1.75rem, 8.8vw, 2.55rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }
  .split-intro,
  .split-intro-center{text-align:center !important;justify-content:center !important;}

  /* Product surfaces: one-card-per-row, large image runway, thumb-friendly buy path. */
  .best-grid,
  .catalog-grid,
  .catalog-grid-checkout,
  .catalog-grid-premium,
  .comment-grid,
  .steps-grid,
  .giving-org-grid,
  .checkout-grid-6,
  .footer-grid-tight,
  .contact-grid,
  .faq-layout{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .product-card.product-surface,
  .product-card.product-surface.product-showroom-surface,
  .product-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    border-radius:24px !important;
    padding:10px !important;
    outline:0 !important;
    box-shadow:0 14px 32px rgba(91,37,58,.13) !important;
  }
  .product-card.product-surface::after{inset:8px !important;opacity:.42 !important;}
  .product-stage,
  .product-runway-stage,
  .hero-product-stage-centered{
    min-height:205px !important;
    height:auto !important;
    aspect-ratio:1 / .88 !important;
    border-radius:22px !important;
    border-right:0 !important;
    border-bottom:0 !important;
    display:grid !important;
    place-items:center !important;
    padding:12px !important;
  }
  .product-stage img,
  .product-runway-stage img,
  .hero-product-stage-centered img{
    width:auto !important;
    max-width:90% !important;
    max-height:220px !important;
    object-fit:contain !important;
  }
  .product-body.text-card,
  .product-showroom-body.text-card,
  .product-body,
  .product-showroom-body{
    padding:14px !important;
    border-radius:18px !important;
    color:#12070D !important;
  }
  .product-card.product-surface .product-body h3,
  .product-card.product-surface .product-showroom-body h3,
  .product-card h3{
    font-size:clamp(1.45rem, 7.2vw, 2.15rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.025em !important;
    color:#12070D !important;
  }
  .product-card p,
  .product-body p,
  .product-showroom-body p{font-size:.92rem !important;line-height:1.38 !important;color:#210B16 !important;}
  .surface-topline,
  .price-row,
  .surface-price-row{display:flex !important;flex-wrap:wrap !important;gap:8px !important;align-items:center !important;}
  .surface-facts{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;padding:0 !important;}
  .surface-facts li{font-size:.82rem !important;line-height:1.22 !important;}

  .sparkle-impact-lane .impact-content,
  .impact-content-expanded,
  .creation-mini-cta-inner,
  .helper-panel,
  .about-hero-big,
  .about-orbit-grid,
  .email-lane{grid-template-columns:1fr !important;gap:16px !important;text-align:center !important;}
  .impact-metrics{grid-template-columns:1fr !important;gap:10px !important;}
  .giving-org-card{text-align:left !important;}
  html[dir='rtl'] .giving-org-card{text-align:right !important;}

  .mobile-quickbar{
    left:10px !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:8px !important;
    border-radius:22px !important;
    background:rgba(18,7,13,.82) !important;
    border:1px solid rgba(255,244,250,.18) !important;
    box-shadow:0 16px 36px rgba(18,7,13,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
    backdrop-filter:blur(16px) saturate(1.25) !important;
    z-index:40 !important;
  }
  .mobile-quickbar a{
    width:auto !important;
    min-height:46px !important;
    padding:.7rem .55rem !important;
    border-radius:16px !important;
    font-size:.78rem !important;
    line-height:1.08 !important;
  }
  .site-footer{padding-bottom:110px !important;}
  .footer-contact-rail{width:calc(100vw - 20px) !important;display:grid !important;grid-template-columns:1fr !important;text-align:center !important;}
}

@media (max-width: 380px){
  .hero-wordmark img{max-height:68px !important;}
  .hero-title-centered,.hero-title{font-size:clamp(1.9rem, 10.8vw, 2.75rem) !important;}
  .statement-nav a{font-size:.72rem !important;padding-inline:11px !important;}
  .language-switcher a{font-size:.68rem !important;padding-inline:.58rem !important;}
  .product-stage,.product-runway-stage{min-height:185px !important;}
}