@media (max-width:1024px){
 .desktop-nav{display:none}.menu-btn{display:grid}.hero-grid,.split,.blog-layout{grid-template-columns:1fr}
 .hero-media{min-height:480px}.cards{grid-template-columns:repeat(2,1fr)}.pill-grid{grid-template-columns:repeat(3,1fr)}
 .routine{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(3,1fr)}
 .shop-layout,.account-layout{grid-template-columns:1fr}.filter-box{position:static}.blog-grid{grid-template-columns:repeat(2,1fr)}
 .toc{position:static}.timeline{grid-template-columns:1fr}
}
@media (max-width:640px){
 .container-xl{width:min(calc(100% - 22px),var(--container))}.nav-wrap{min-height:68px;gap:10px}.brand{font-size:1.65rem}
 .icon-btn.hide-sm{display:none}.hero{padding:44px 0}.hero-grid{gap:28px}.hero-media{min-height:390px;border-radius:28px}
 .display{font-size:3.4rem}.section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:10px}
 .cards,.blog-grid,.pill-grid,.routine,.form-grid,.footer-grid{grid-template-columns:1fr}
 .split{gap:28px}.split-media img{height:380px}.page-hero{min-height:300px}.page-hero .container-xl{padding-bottom:38px}
 .cart-item{grid-template-columns:78px 1fr}.cart-item img{width:78px;height:78px}.cart-item>div:last-child{grid-column:2}
 .btn-row .btn{width:100%}.footer{padding-top:44px}
}

/* =========================================================
   FINAL RESPONSIVE HARDENING
   Shared overrides applied after all design styles.
========================================================= */

/* Prevent intrinsic grid/flex widths from forcing horizontal scroll. */
main,
section,
.container-xl,
.hero-grid > *,
.split > *,
.blog-layout > *,
.shop-layout > *,
.account-layout > *,
.form-grid > *,
.cards > *,
.blog-grid > *,
.footer-reference-grid > *,
.newsletter-editorial > *,
.teach-first-v2 > *,
.feature-led > *,
.quote-split > *,
.discovery-grid > *,
.discovery-strip > *,
.story-band > *,
.education-story > *,
.promise-editorial > *,
.image-caption-layout > * {
  min-width:0;
}

img,
video,
svg,
canvas,
iframe {
  max-width:100%;
}

img {
  height:auto;
}

input,
select,
textarea,
button {
  max-width:100%;
}

textarea {
  resize:vertical;
}

p,
li,
td,
th,
a,
button,
label,
.breadcrumbs,
.notice {
  overflow-wrap:anywhere;
}

.table-wrap {
  width:100%;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

.product-actions,
.btn-row,
.toolbar,
.tabs-row,
.active-filter-row,
.footer-social-row {
  min-width:0;
}

.product-actions .btn {
  min-width:0;
  white-space:normal;
  text-align:center;
}

.mobile-panel {
  max-height:calc(100dvh - 68px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

@media (max-width:1180px){
  .container-xl{
    width:min(calc(100% - 40px),var(--container));
  }

  .nav-wrap{
    gap:16px;
  }

  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:1024px){
  .desktop-nav{display:none}
  .menu-btn{display:grid}

  .hero-grid,
  .split,
  .blog-layout,
  .shop-layout,
  .account-layout,
  .discovery-grid,
  .discovery-strip,
  .story-band,
  .education-story,
  .promise-editorial,
  .newsletter-editorial,
  .teach-first-v2,
  .feature-led,
  .quote-split,
  .image-caption-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .hero-media{
    min-height:clamp(420px,62vw,560px);
  }

  .cards,
  .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pill-grid,
  .skin-type-ribbon{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .routine,
  .promise-grid,
  .home2-proof-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-grid,
  .footer-reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .filter-box,
  .toc{
    position:static;
    top:auto;
  }

  .timeline{
    grid-template-columns:minmax(0,1fr);
  }

  .split-media img,
  .story-band-media,
  .education-story-media,
  .teach-visual,
  .teach-visual img{
    min-height:0;
    height:clamp(400px,58vw,540px);
  }

  .section-head{
    align-items:flex-start;
  }
}

@media (max-width:768px){
  :root{
    --radius:22px;
  }

  .container-xl{
    width:min(calc(100% - 28px),var(--container));
  }

  .topbar{
    line-height:1.4;
  }

  .nav-wrap{
    min-height:70px;
    gap:10px;
  }

  .brand{
    margin-right:auto;
  }

  .nav-actions{
    gap:6px;
  }

  .icon-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }

  .hero{
    padding:42px 0 34px;
  }

  .hero-grid{
    gap:30px;
  }

  .display{
    font-size:clamp(2.8rem,12vw,4.5rem);
  }

  .section{
    padding:64px 0;
  }

  .section-head{
    display:block;
    margin-bottom:26px;
  }

  .section-head p{
    margin-top:10px;
  }

  .page-hero{
    min-height:300px;
  }

  .page-hero .container-xl{
    padding-bottom:36px;
  }

  .page-hero h1{
    font-size:clamp(2.6rem,11vw,4.6rem);
  }

  .form-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .toolbar{
    align-items:stretch;
  }

  .toolbar > *{
    flex:1 1 220px;
  }

  .shop-filter-main{
    grid-template-columns:minmax(0,1fr);
  }

  .shop-filter-main > *{
    min-width:0;
  }

  .shop-sort{
    width:100%;
  }

  .cart-item{
    grid-template-columns:84px minmax(0,1fr);
    align-items:start;
  }

  .cart-item img{
    width:84px;
    height:84px;
  }

  .cart-item > :last-child{
    grid-column:2;
    justify-self:start;
  }

  .timeline .step{
    min-width:0;
  }

  .footer-reference-bottom{
    align-items:flex-start;
  }
}

@media (max-width:640px){
  .container-xl{
    width:min(calc(100% - 22px),var(--container));
  }

  .nav-wrap{
    min-height:66px;
  }

  .brand{
    font-size:1.55rem;
  }

  .icon-btn.hide-sm{
    display:none;
  }

  .hero{
    padding:36px 0 28px;
  }

  .hero-media{
    min-height:360px;
    border-radius:24px;
  }

  .display{
    font-size:clamp(2.65rem,14vw,3.7rem);
    letter-spacing:-.035em;
  }

  .lead{
    font-size:1rem;
  }

  .section{
    padding:56px 0;
  }

  .cards,
  .blog-grid,
  .pill-grid,
  .routine,
  .promise-grid,
  .skin-type-ribbon,
  .home2-proof-grid,
  .footer-grid,
  .footer-reference-grid,
  .newsletter-benefits,
  .checkerboard,
  .stat-story,
  .horizontal-steps{
    grid-template-columns:minmax(0,1fr);
  }

  .cards{
    gap:16px;
  }

  .card-bodyx,
  .blog-card .inner{
    padding:18px;
  }

  .split{
    gap:24px;
  }

  .split-media img,
  .story-band-media,
  .education-story-media,
  .teach-visual,
  .teach-visual img{
    width:100%;
    height:360px;
    min-height:0 !important;
    object-fit:cover;
  }

  .page-hero{
    min-height:270px;
  }

  .page-hero .container-xl{
    padding-bottom:30px;
  }

  .btn-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  .btn-row .btn{
    width:100%;
  }

  .product-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  .product-actions .btn{
    width:100%;
  }

  .cart-item{
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }

  .cart-item img{
    width:72px;
    height:72px;
  }

  .qty{
    flex-wrap:wrap;
  }

  .table-wrap{
    border-radius:16px;
  }

  table{
    min-width:620px;
  }

  th,td{
    padding:13px;
  }

  .accordion-btn{
    gap:14px;
    align-items:flex-start;
  }

  .footer{
    padding-top:42px;
  }

  .footer-reference-newsletter{
    grid-column:auto;
  }

  .footer-line-form{
    min-width:0;
  }

  .footer-line-form input{
    min-width:0;
    width:100%;
  }

  .mosaic-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .concern-strip,
  .product-rail{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .concern-strip > *,
  .product-rail > *{
    scroll-snap-align:start;
  }
}

@media (max-width:480px){
  .container-xl{
    width:min(calc(100% - 18px),var(--container));
  }

  .topbar{
    font-size:.72rem;
    padding:6px 9px;
  }

  .brand{
    font-size:1.42rem;
  }

  .icon-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .hero-media{
    min-height:320px;
  }

  .display{
    font-size:clamp(2.35rem,13.5vw,3.2rem);
  }

  .section{
    padding:50px 0;
  }

  .section-head h2{
    font-size:clamp(2rem,10.5vw,3rem);
  }

  .page-hero h1{
    font-size:clamp(2.35rem,12vw,3.6rem);
  }

  .btn{
    min-height:44px;
    padding:11px 16px;
  }

  .notice{
    padding:14px;
  }

  .split-media img,
  .story-band-media,
  .education-story-media,
  .teach-visual,
  .teach-visual img{
    height:320px;
  }

  .footer-reference-grid{
    gap:24px;
  }
}

/* Touch devices should not depend on hover-only movement. */
@media (hover:none){
  .btn:hover,
  .cardx:hover,
  .blog-card:hover,
  .pill:hover,
  .routine-step:hover{
    transform:none;
  }
}

/* Keep content visible and stable for users who reduce motion. */
@media (prefers-reduced-motion:reduce){
  .reveal,
  .motion-fade,
  .motion-up,
  .motion-left,
  .motion-right,
  .motion-scale,
  [data-stagger] > *{
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================
   GLOBAL 30PX BOX PADDING STANDARD
   Consistent content-box spacing across every page/device.
   Intentionally excludes navigation controls, buttons and
   image-only media wrappers.
========================================================= */
:root{
  --box-padding:30px;
}

/* Core reusable boxed components */
.card-bodyx,
.blog-card .inner,
.pill,
.routine-step,
.filter-box,
.notice,
.account-nav,
.timeline .step,
.toc,
.cart-item,
.discovery-panel,
.promise-item,
.review-card,
.concern-tile,
.finder,
.newsletter-copy,
.newsletter-form-panel,
.teach-visual-card,
.feature-mini,
.stat-story-item,
.horizontal-step,
.check-tile,
.routine-card-body,
.shop-promo-strip,
.mobile-filter-panel,
.page-home2 .home2-proof-card{
  padding:var(--box-padding) !important;
}

/* Page-specific boxed content panels */
.page-categories .split > div:not(.split-media),
.page-deals .section:nth-of-type(2) .split > div:not(.split-media),
.page-deals .section:nth-of-type(4) .split > div:not(.split-media),
.page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media),
.page-cart .filter-box,
.page-checkout form,
.page-checkout .filter-box,
.page-account .account-layout > div:last-child,
.page-login form.cardx,
.page-register form.cardx,
.page-contact main > .section:nth-of-type(3) form,
.page-order-tracking .timeline .step{
  padding:var(--box-padding) !important;
}

/* Keep boxed accordion shells at the same inset without
   forcing padding onto the individual disclosure button. */
.page-faq .accordion-itemx{
  padding-inline:var(--box-padding) !important;
}

/* Product and editorial text boxes that are intentionally
   paired with edge-to-edge media. */
.story-band-copy,
.education-story-copy,
.editorial-overlay,
.feature-led-overlay{
  padding:var(--box-padding) !important;
}

/* Preserve the same 30px content padding on tablet/mobile.
   min-width:0 + border-box prevents overflow on narrow screens. */
@media (max-width:1024px){
  .card-bodyx,
  .blog-card .inner,
  .pill,
  .routine-step,
  .filter-box,
  .notice,
  .account-nav,
  .timeline .step,
  .toc,
  .cart-item,
  .discovery-panel,
  .promise-item,
  .review-card,
  .concern-tile,
  .finder,
  .newsletter-copy,
  .newsletter-form-panel,
  .teach-visual-card,
  .feature-mini,
  .stat-story-item,
  .horizontal-step,
  .check-tile,
  .routine-card-body,
  .shop-promo-strip,
  .mobile-filter-panel,
  .page-home2 .home2-proof-card,
  .page-categories .split > div:not(.split-media),
  .page-deals .section:nth-of-type(2) .split > div:not(.split-media),
  .page-deals .section:nth-of-type(4) .split > div:not(.split-media),
  .page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media),
  .page-checkout form,
  .page-account .account-layout > div:last-child,
  .page-login form.cardx,
  .page-register form.cardx,
  .page-contact main > .section:nth-of-type(3) form,
  .story-band-copy,
  .education-story-copy,
  .editorial-overlay,
  .feature-led-overlay{
    box-sizing:border-box;
    min-width:0;
    padding:30px !important;
  }
}

/* Very narrow phones still retain the requested 30px box
   padding; sizing safeguards keep inputs/media inside the box. */
@media (max-width:480px){
  .cardx,
  .blog-card,
  .filter-box,
  .notice,
  .cart-item,
  .toc,
  .account-nav,
  .timeline .step,
  form{
    max-width:100%;
    min-width:0;
  }

  .card-bodyx > *,
  .blog-card .inner > *,
  .filter-box > *,
  .notice > *,
  .cart-item > *,
  .toc > *,
  .account-nav > *,
  .timeline .step > *,
  form > *{
    min-width:0;
    max-width:100%;
  }
}

/* =========================================================
   MOBILE + TABLET RESPONSIVE CORRECTION
   Final cascade layer for the layouts shown in QA screenshots.
   Keeps requested 30px box padding while removing desktop-only
   widths, forced card heights and horizontal product overflow.
========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

main,
.site-header,
.footer,
.section,
.hero{
  width:100%;
  max-width:100%;
}

.container-xl{
  max-width:var(--container);
}

/* Never let a boxed component become wider than its parent. */
.cardx,
.blog-card,
.newsletter-copy,
.newsletter-form-panel,
.finder,
.filter-box,
.notice,
.account-nav,
.toc,
.cart-item,
.shop-promo-strip,
.promise-item,
.review-card,
.concern-tile{
  width:100%;
  max-width:100%;
}

/* Product cards: remove desktop rail/fixed-height behavior on
   responsive screens so cards grow only as much as content needs. */
@media (max-width:1024px){
  #productGrid,
  .product-rail#productGrid{
    display:grid !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    grid-auto-rows:auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    padding-inline:0 !important;
  }

  #productGrid .cardx[data-product],
  .page-shop #productGrid .cardx[data-product]{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    grid-template-rows:none !important;
  }

  #productGrid .cardx[data-product] > img,
  .page-shop #productGrid .cardx[data-product] > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1 / .82 !important;
    object-fit:cover !important;
    flex:0 0 auto !important;
  }

  #productGrid .card-bodyx,
  .page-shop #productGrid .card-bodyx{
    display:flex !important;
    flex-direction:column !important;
    grid-template-rows:none !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:30px !important;
  }

  #productGrid .card-bodyx h3,
  #productGrid .card-bodyx p,
  #productGrid .card-bodyx .price{
    min-height:0 !important;
  }

  #productGrid .card-bodyx p,
  .page-shop #productGrid .card-bodyx p{
    overflow:visible !important;
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
  }

  #productGrid .product-actions,
  .page-shop #productGrid .product-actions{
    width:100% !important;
    margin-top:18px !important;
    align-self:auto !important;
  }

  /* Newsletter / editorial panels from the screenshots. */
  .page-home1 .newsletter-editorial,
  .newsletter-editorial{
    width:min(calc(100% - 40px),var(--container)) !important;
    max-width:var(--container) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:20px !important;
  }

  .newsletter-copy,
  .newsletter-form-panel{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:30px !important;
  }

  .newsletter-benefits{
    width:100%;
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Hero should become a true stacked layout, not a squeezed
     desktop composition. */
  .page-home1 .hero-grid,
  .hero-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:30px !important;
  }

  .page-home1 .hero-grid > div:first-child{
    padding:0 !important;
  }

  .page-home1 .hero-media,
  .hero-media{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:clamp(360px,58vw,520px) !important;
  }

  .hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .split,
  .blog-layout,
  .shop-layout,
  .account-layout,
  .newsletter-editorial,
  .discovery-grid,
  .story-band,
  .education-story,
  .promise-editorial,
  .teach-first-v2,
  .feature-led,
  .quote-split,
  .image-caption-layout{
    width:100%;
    max-width:100%;
  }

  .product-actions{
    flex-wrap:wrap;
  }
}

@media (max-width:768px){
  .container-xl{
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }

  /* Mobile/tablet product list: exactly one card per row so no
     card edge or neighboring card can appear off-screen. */
  #productGrid,
  .product-rail#productGrid,
  .page-shop #productGrid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
  }

  #productGrid .cardx[data-product] > img,
  .page-shop #productGrid .cardx[data-product] > img{
    aspect-ratio:4 / 3 !important;
  }

  #productGrid .product-actions,
  .page-shop #productGrid .product-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(54px,.34fr) !important;
    gap:10px !important;
  }

  #productGrid .product-actions .btn,
  .page-shop #productGrid .product-actions .btn{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:48px !important;
  }

  .page-home1 .newsletter-editorial,
  .newsletter-editorial{
    width:calc(100% - 28px) !important;
  }

  .newsletter-copy h2,
  .newsletter-form-panel h2{
    overflow-wrap:normal;
    word-break:normal;
  }

  .newsletter-copy .lead,
  .newsletter-form-panel p{
    max-width:100%;
  }

  .page-home1 .hero-media,
  .hero-media{
    height:clamp(320px,72vw,440px) !important;
    border-radius:26px !important;
  }

  .display{
    font-size:clamp(2.45rem,10.5vw,4rem) !important;
    line-height:.98 !important;
  }

  .btn-row{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center;
  }

  .btn-row .btn{
    width:auto !important;
    flex:0 1 auto !important;
  }

  /* Stacked paired layouts on phones/tablets. */
  .split,
  .story-band,
  .education-story,
  .promise-editorial,
  .feature-led,
  .quote-split,
  .image-caption-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .page-product-details .section:first-of-type .split-media{
    position:static !important;
    top:auto !important;
  }

  /* Large media should not retain old fixed desktop heights. */
  .split-media,
  .split-media img,
  .story-band-media,
  .education-story-media,
  .teach-visual,
  .teach-visual img{
    max-width:100% !important;
  }

  .split-media img,
  .story-band-media,
  .education-story-media,
  .teach-visual img{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:4 / 3;
    object-fit:cover;
  }

  /* Forms and utility rows stay inside a 30px-padded box. */
  .form-controlx,
  input,
  select,
  textarea{
    width:100%;
    min-width:0;
  }

  .toolbar,
  .shop-filter-main,
  .active-filter-row{
    width:100%;
    max-width:100%;
  }

  .table-wrap{
    overflow-x:auto !important;
  }
}

@media (max-width:640px){
  .container-xl{
    width:calc(100% - 24px) !important;
  }

  .page-home1 .newsletter-editorial,
  .newsletter-editorial{
    width:calc(100% - 24px) !important;
    gap:16px !important;
  }

  .newsletter-copy,
  .newsletter-form-panel,
  .card-bodyx,
  .blog-card .inner,
  .pill,
  .routine-step,
  .filter-box,
  .notice,
  .account-nav,
  .timeline .step,
  .toc,
  .cart-item,
  .finder,
  .review-card,
  .concern-tile,
  .shop-promo-strip{
    padding:30px !important;
  }

  #productGrid .card-bodyx,
  .page-shop #productGrid .card-bodyx{
    padding:30px !important;
  }

  #productGrid .cardx[data-product] > img,
  .page-shop #productGrid .cardx[data-product] > img{
    aspect-ratio:1 / .78 !important;
  }

  .page-home1 .hero-media,
  .hero-media{
    height:clamp(300px,76vw,390px) !important;
  }

  .hero{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .section{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }

  /* Keep only the actions that are useful on a narrow header. */
  .nav-actions .hide-sm{
    display:none !important;
  }

  .nav-wrap{
    width:calc(100% - 20px) !important;
    gap:6px !important;
  }

  .nav-actions{
    gap:5px !important;
    flex:0 0 auto;
  }

  .brand{
    min-width:0;
    margin-right:auto;
  }

  .header-cta{height:38px !important;min-height:38px !important;padding:0 10px !important;font-size:.76rem !important}

  .icon-btn{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }

  .display{
    font-size:clamp(2.25rem,11.5vw,3.4rem) !important;
  }

  .btn-row{
    gap:10px !important;
  }
}

@media (max-width:420px){
  .container-xl,
  .page-home1 .newsletter-editorial,
  .newsletter-editorial{
    width:calc(100% - 20px) !important;
  }

  #productGrid .cardx[data-product] > img,
  .page-shop #productGrid .cardx[data-product] > img{
    aspect-ratio:1 / .72 !important;
  }

  #productGrid .product-actions,
  .page-shop #productGrid .product-actions{
    grid-template-columns:minmax(0,1fr) 58px !important;
  }

  .newsletter-copy,
  .newsletter-form-panel{
    border-radius:24px !important;
  }

  .btn-row .btn{
    width:100% !important;
    flex:1 1 100% !important;
  }
}


/* =========================================================
   DEALS PAGE — RESPONSIVE CORRECTION
   Final page-specific layer. Keeps the requested 30px content
   padding while removing fixed desktop sizing on smaller screens.
========================================================= */

.page-deals{
  overflow-x:clip;
}

.page-deals main,
.page-deals main > section,
.page-deals .container-xl,
.page-deals .section-head > *,
.page-deals .stat-story > *,
.page-deals .split > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Restore the Deals hero artwork. The shared theme clears the
   page-hero background for its animation layer, so Deals owns a
   complete gradient + image background instead of inheriting that
   desktop animation rule. */
.page-deals .page-hero{
  background-image:
    linear-gradient(90deg,rgba(21,18,20,.78),rgba(21,18,20,.24)),
    url('../images/backgrounds/deals-bg.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
}

.page-deals .page-hero::before,
.page-deals .page-hero::after{
  display:none !important;
}

/* Heading copy must wrap naturally instead of forcing page width. */
.page-deals .section-head h2,
.page-deals .section-head p,
.page-deals .stat-story-item h3,
.page-deals .stat-story-item p,
.page-deals .split h2,
.page-deals .split p{
  max-width:100%;
  word-break:normal;
  overflow-wrap:break-word;
}

/* Value cards */
.page-deals .stat-story{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:100%;
}

.page-deals .stat-story-item{
  min-width:0;
  min-height:0 !important;
  height:auto;
  padding:30px !important;
  box-sizing:border-box;
}

/* Campaign cards: make every Deals split section use the same
   reliable two-column shell on desktop. */
.page-deals main > .section:nth-of-type(n+3) .split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  width:100%;
  max-width:100%;
  min-height:0 !important;
  gap:0 !important;
  border:1px solid var(--border);
  border-radius:32px;
  overflow:hidden;
}

.page-deals main > .section:nth-of-type(n+3):not(:last-of-type) .split{
  background:var(--bg);
}

.page-deals main > .section:nth-of-type(n+3) .split > div:not(.split-media){
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:30px !important;
  box-sizing:border-box;
}

.page-deals main > .section:nth-of-type(n+3) .split-media{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:460px;
  height:auto;
  border-radius:0 !important;
  overflow:hidden;
}

.page-deals main > .section:nth-of-type(n+3) .split-media img{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover;
  border-radius:0 !important;
}

.page-deals main > .section:last-of-type .split{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.035);
}

.page-deals main > .section:last-of-type .lead{
  color:rgba(255,255,255,.78);
}


/* The split element is also a .container-xl. Earlier shared
   responsive rules set .split to width:100%, so restore the
   intended site gutters/max-width specifically on Deals. */
.page-deals main > .section:nth-of-type(n+3) .split.container-xl{
  width:min(calc(100% - 32px),var(--container)) !important;
  max-width:var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (max-width:1180px){
  .page-deals main > .section:nth-of-type(n+3) .split.container-xl{
    width:min(calc(100% - 40px),var(--container)) !important;
  }
}

/* Small desktop / landscape tablet */
@media (max-width:1024px){
  .page-deals .section-head{
    align-items:flex-start;
  }

  .page-deals .stat-story{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .page-deals .stat-story-item:first-child{
    grid-column:1 / -1;
  }

  .page-deals main > .section:nth-of-type(n+3) .split{
    grid-template-columns:minmax(0,1fr) !important;
    min-height:0 !important;
  }

  .page-deals main > .section:nth-of-type(n+3) .split-media{
    min-height:0;
    aspect-ratio:16 / 9;
  }

  .page-deals main > .section:nth-of-type(n+3) .split > div:not(.split-media){
    min-height:0;
    padding:30px !important;
  }
}

/* Tablet portrait */
@media (max-width:768px){
  .page-deals main > .section:nth-of-type(n+3) .split.container-xl{
    width:calc(100% - 28px) !important;
  }

  .page-deals .page-hero{
    min-height:300px !important;
  }

  .page-deals .page-hero .container-xl{
    padding-bottom:34px !important;
  }

  .page-deals .section-head{
    display:block;
    margin-bottom:28px;
  }

  .page-deals .section-head p{
    margin-top:12px;
  }

  .page-deals .stat-story{
    gap:16px;
  }

  .page-deals main > .section:nth-of-type(n+3) .split{
    border-radius:26px;
  }

  .page-deals main > .section:nth-of-type(n+3) .split-media{
    aspect-ratio:16 / 10;
  }

  .page-deals main > .section:nth-of-type(n+3) .split-media img{
    height:100% !important;
    min-height:0 !important;
  }
}

/* Phones */
@media (max-width:640px){
  .page-deals main > .section:nth-of-type(n+3) .split.container-xl{
    width:calc(100% - 24px) !important;
  }

  .page-deals .page-hero{
    min-height:270px !important;
  }

  .page-deals .page-hero h1{
    font-size:clamp(2.35rem,11vw,3.35rem) !important;
    line-height:1;
  }

  .page-deals .section-head h2,
  .page-deals .split h2{
    font-size:clamp(2rem,9.5vw,2.8rem);
    line-height:1.02;
  }

  .page-deals .stat-story{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .page-deals .stat-story-item:first-child{
    grid-column:auto;
  }

  .page-deals .stat-story-item,
  .page-deals main > .section:nth-of-type(n+3) .split > div:not(.split-media){
    padding:30px !important;
  }

  .page-deals main > .section:nth-of-type(n+3) .split{
    border-radius:24px;
  }

  .page-deals main > .section:nth-of-type(n+3) .split-media{
    width:100%;
    aspect-ratio:4 / 3;
  }

  .page-deals .lead{
    font-size:1rem;
    line-height:1.65;
  }
}

/* Narrow phones: keep 30px internal padding, but guarantee that
   every box and media area remains inside the viewport. */
@media (max-width:420px){
  .page-deals main > .section:nth-of-type(n+3) .split.container-xl{
    width:calc(100% - 20px) !important;
  }

  .page-deals .container-xl{
    width:calc(100% - 20px) !important;
  }

  .page-deals .stat-story,
  .page-deals .split,
  .page-deals .split-media{
    width:100%;
    max-width:100%;
  }

  .page-deals .stat-story-item,
  .page-deals main > .section:nth-of-type(n+3) .split > div:not(.split-media){
    padding:30px !important;
  }

  .page-deals .breadcrumbs{
    font-size:.82rem;
  }
}



/* =========================================================
   BLOG PAGE — RESPONSIVE CORRECTION
   Final page-specific layer. Removes desktop editorial sizing
   from tablet/mobile while preserving the 30px box standard.
========================================================= */

.page-blog{
  overflow-x:clip;
}

.page-blog main,
.page-blog main > section,
.page-blog .container-xl,
.page-blog .split > *,
.page-blog .blog-grid > *,
.page-blog .blog-card,
.page-blog .blog-card .inner{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Restore the Blog hero artwork. A shared animation layer clears
   page-hero background-image globally, so Blog owns its background. */
.page-blog .page-hero{
  background-image:
    linear-gradient(90deg,rgba(21,18,20,.78),rgba(21,18,20,.24)),
    url('../images/backgrounds/blog-bg.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
}

.page-blog .page-hero::before,
.page-blog .page-hero::after{
  display:none !important;
}

/* Preserve site gutters on split sections. Shared responsive rules
   set .split to width:100%, which otherwise makes these run edge-to-edge. */
.page-blog .split.container-xl{
  width:min(calc(100% - 32px),var(--container)) !important;
  max-width:var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Featured story */
.page-blog main > .section:nth-of-type(2) .split{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
  min-height:0 !important;
}

.page-blog main > .section:nth-of-type(2) .split > div:not(.split-media){
  min-width:0;
}

.page-blog main > .section:nth-of-type(2) .split-media{
  width:100%;
  min-width:0;
  min-height:0 !important;
  overflow:hidden;
}

.page-blog main > .section:nth-of-type(2) .split-media img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:clamp(420px,42vw,560px) !important;
  min-height:0 !important;
  object-fit:cover !important;
}

/* Journal toolbar */
.page-blog .toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  width:100%;
  max-width:100%;
}

.page-blog .toolbar .form-controlx{
  flex:0 1 360px;
  width:min(100%,360px);
  min-width:0;
  max-width:100% !important;
}

.page-blog .toolbar > div{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}

/* Magazine grid on wide screens; all cards are allowed to shrink. */
.page-blog .blog-grid{
  width:100%;
  max-width:100%;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr);
  gap:22px;
}

.page-blog .blog-card{
  width:100%;
  min-width:0;
  height:auto !important;
}

.page-blog .blog-card .inner{
  padding:30px !important;
}

.page-blog .blog-card .inner h3,
.page-blog .blog-card .inner p,
.page-blog .blog-card .inner a{
  max-width:100%;
  overflow-wrap:break-word;
}

/* Subscription block */
.page-blog main > .section:last-of-type .split{
  min-height:0 !important;
}

.page-blog main > .section:last-of-type form{
  width:100%;
  max-width:100%;
  min-width:0;
}

.page-blog main > .section:last-of-type form label,
.page-blog main > .section:last-of-type .form-controlx{
  width:100%;
  max-width:100%;
  min-width:0;
}

@media (max-width:1180px){
  .page-blog .split.container-xl{
    width:min(calc(100% - 40px),var(--container)) !important;
  }

  /* Remove the oversized editorial lead-card treatment before
     tablet widths; every card now has predictable proportions. */
  .page-blog .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:20px !important;
  }

  .page-blog .blog-card:first-child,
  .page-blog .blog-card:nth-child(4){
    grid-row:auto !important;
    grid-column:auto !important;
  }

  .page-blog .blog-card img,
  .page-blog .blog-card:first-child img{
    display:block;
    width:100% !important;
    height:clamp(230px,28vw,340px) !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }
}

@media (max-width:1024px){
  .page-blog main > .section:nth-of-type(2) .split,
  .page-blog main > .section:last-of-type .split{
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px !important;
  }

  .page-blog main > .section:nth-of-type(2) .split-media img{
    width:100% !important;
    height:clamp(340px,55vw,500px) !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }

  .page-blog main > .section:last-of-type form{
    padding:30px !important;
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--bg);
  }
}

@media (max-width:768px){
  .page-blog .split.container-xl{
    width:calc(100% - 28px) !important;
  }

  .page-blog .page-hero{
    min-height:300px !important;
  }

  .page-blog .page-hero .container-xl{
    padding-bottom:34px !important;
  }

  .page-blog .toolbar{
    align-items:stretch;
    gap:12px;
  }

  .page-blog .toolbar .form-controlx,
  .page-blog .toolbar > div{
    flex:1 1 100%;
    width:100% !important;
  }

  .page-blog .blog-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
  }

  .page-blog .blog-card img,
  .page-blog .blog-card:first-child img{
    height:clamp(250px,56vw,360px) !important;
    min-height:0 !important;
  }

  .page-blog main > .section:nth-of-type(2) .split-media img{
    height:clamp(300px,60vw,420px) !important;
  }
}

@media (max-width:640px){
  .page-blog .split.container-xl{
    width:calc(100% - 24px) !important;
  }

  .page-blog .page-hero{
    min-height:270px !important;
  }

  .page-blog .page-hero h1{
    font-size:clamp(2.35rem,11vw,3.35rem) !important;
    line-height:1;
  }

  .page-blog main > .section:nth-of-type(2) .split{
    gap:22px !important;
  }

  .page-blog main > .section:nth-of-type(2) .split-media{
    border-radius:24px !important;
  }

  .page-blog main > .section:nth-of-type(2) .split-media img{
    height:clamp(250px,68vw,350px) !important;
  }

  .page-blog .blog-card{
    border-radius:24px;
  }

  .page-blog .blog-card img,
  .page-blog .blog-card:first-child img{
    height:clamp(220px,62vw,330px) !important;
  }

  .page-blog .blog-card .inner,
  .page-blog main > .section:last-of-type form{
    padding:30px !important;
  }

  .page-blog .lead{
    font-size:1rem;
    line-height:1.65;
  }
}

@media (max-width:420px){
  .page-blog .container-xl,
  .page-blog .split.container-xl{
    width:calc(100% - 20px) !important;
  }

  .page-blog .blog-grid,
  .page-blog .blog-card,
  .page-blog .split,
  .page-blog .split-media{
    width:100%;
    max-width:100%;
  }

  .page-blog .blog-card img,
  .page-blog .blog-card:first-child img{
    height:clamp(205px,62vw,280px) !important;
  }

  .page-blog main > .section:nth-of-type(2) .split-media img{
    height:clamp(235px,66vw,310px) !important;
  }

  .page-blog .breadcrumbs{
    font-size:.82rem;
  }
}

/* =========================================================
   ACCOUNT PAGE — RESPONSIVE CORRECTION
   Keeps the account navigation and content panels aligned on
   desktop, then collapses them cleanly for tablet and mobile.
========================================================= */

.page-account{
  overflow-x:clip;
}

.page-account main,
.page-account main > section,
.page-account .container-xl,
.page-account .account-layout,
.page-account .account-layout > *,
.page-account .form-grid > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Restore Account hero artwork after the shared animated hero layer
   clears page-specific background images. */
.page-account .page-hero{
  background-image:
    linear-gradient(90deg,rgba(21,18,20,.78),rgba(21,18,20,.24)),
    url('../images/backgrounds/account-bg.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
}

.page-account .page-hero::before,
.page-account .page-hero::after{
  display:none !important;
}

/* Desktop account shell */
.page-account .account-layout{
  display:grid;
  grid-template-columns:minmax(230px,280px) minmax(0,1fr) !important;
  gap:24px 34px;
  width:min(calc(100% - 32px),1120px);
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  align-items:start;
}

.page-account .account-nav{
  grid-column:1;
  grid-row:1 / span 3;
  position:sticky;
  top:120px;
  width:100%;
  max-width:100%;
  padding:30px !important;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
}

.page-account .account-nav a{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}

.page-account .account-profile-panel,
.page-account .account-panel-section{
  grid-column:2;
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Correct the old :last-child rule that accidentally styled Account
   settings as the main profile card. */
.page-account .account-layout > .account-profile-panel{
  padding:30px !important;
  border:1px solid var(--border);
  border-radius:30px;
  background:var(--bg);
}

.page-account .account-layout > .account-panel-section{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.page-account .account-panel-section .notice{
  width:100%;
  margin:0;
  padding:30px !important;
  box-sizing:border-box;
}

.page-account .account-profile-panel h2,
.page-account .account-profile-panel p,
.page-account .notice{
  max-width:100%;
  overflow-wrap:break-word;
}

.page-account .account-profile-panel form,
.page-account .account-profile-panel .form-grid,
.page-account .account-profile-panel .field,
.page-account .account-profile-panel .form-controlx{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.page-account .account-profile-panel .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

@media (max-width:1024px){
  .page-account .account-layout{
    grid-template-columns:minmax(0,1fr) !important;
    width:min(calc(100% - 40px),1120px);
    gap:22px;
  }

  .page-account .account-nav,
  .page-account .account-profile-panel,
  .page-account .account-panel-section{
    grid-column:1;
    grid-row:auto;
  }

  .page-account .account-nav{
    position:static !important;
    top:auto !important;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:30px !important;
  }

  .page-account .account-nav a{
    display:flex;
    align-items:center;
    min-height:46px;
  }
}

@media (max-width:768px){
  .page-account .account-layout{
    width:calc(100% - 28px);
    gap:18px;
  }

  .page-account .page-hero{
    min-height:300px !important;
  }

  .page-account .page-hero .container-xl{
    padding-bottom:34px !important;
  }

  .page-account .account-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-account .account-profile-panel .form-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media (max-width:640px){
  .page-account .account-layout{
    width:calc(100% - 24px);
    gap:16px;
  }

  .page-account .page-hero{
    min-height:270px !important;
  }

  .page-account .page-hero h1{
    font-size:clamp(2.35rem,11vw,3.35rem) !important;
    line-height:1;
  }

  .page-account .account-nav,
  .page-account .account-profile-panel,
  .page-account .account-panel-section .notice{
    padding:30px !important;
  }

  .page-account .account-profile-panel h2{
    font-size:clamp(2rem,9.5vw,2.8rem);
    line-height:1.04;
  }

  .page-account .account-profile-panel .lead{
    font-size:1rem;
    line-height:1.65;
  }

  .page-account .account-profile-panel .btn{
    width:100%;
  }
}

@media (max-width:420px){
  .page-account .container-xl,
  .page-account .account-layout{
    width:calc(100% - 20px) !important;
  }

  .page-account .account-nav{
    grid-template-columns:minmax(0,1fr);
  }

  .page-account .account-nav,
  .page-account .account-profile-panel,
  .page-account .account-panel-section,
  .page-account .account-panel-section .notice{
    width:100%;
    max-width:100%;
  }

  .page-account .breadcrumbs{
    font-size:.82rem;
  }
}


/* =========================================================
   BOX TYPOGRAPHY ALIGNMENT — CSS ONLY
   Keeps HTML, JavaScript, content and page structure unchanged.
   Normalizes type scale, line-height, wrapping and alignment inside
   reusable boxed components across desktop, tablet and mobile.
========================================================= */

:is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .promise-item,
  .review-card,
  .editorial-overlay,
  .concern-tile,
  .skin-type-ribbon a,
  .finder,
  .feature-mini,
  .stat-story-item,
  .check-tile,
  .newsletter-copy,
  .newsletter-form-panel,
  .teach-visual-card,
  .feature-led-overlay,
  .mosaic-caption,
  .horizontal-step,
  .notice,
  .filter-box,
  .toc,
  .account-nav,
  .account-profile-panel,
  .cart-item,
  .home2-proof-card,
  .timeline .step,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx,
  .page-deals .split > div:not(.split-media),
  .page-categories .split > div:not(.split-media),
  .page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media)
){
  text-align:start;
  overflow-wrap:anywhere;
  word-break:normal;
}

:is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .promise-item,
  .review-card,
  .editorial-overlay,
  .concern-tile,
  .skin-type-ribbon a,
  .finder,
  .feature-mini,
  .stat-story-item,
  .check-tile,
  .newsletter-copy,
  .newsletter-form-panel,
  .teach-visual-card,
  .feature-led-overlay,
  .horizontal-step,
  .notice,
  .filter-box,
  .toc,
  .account-profile-panel,
  .cart-item,
  .home2-proof-card,
  .timeline .step,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx
) :is(h2,h3,h4,h5,h6){
  text-align:start;
  text-wrap:balance;
  overflow-wrap:anywhere;
  margin-top:0;
}

:is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .promise-item,
  .review-card,
  .editorial-overlay,
  .concern-tile,
  .skin-type-ribbon a,
  .finder,
  .feature-mini,
  .stat-story-item,
  .check-tile,
  .newsletter-copy,
  .newsletter-form-panel,
  .teach-visual-card,
  .feature-led-overlay,
  .horizontal-step,
  .notice,
  .filter-box,
  .toc,
  .account-profile-panel,
  .cart-item,
  .home2-proof-card,
  .timeline .step,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx
) p{
  font-size:clamp(.94rem,.16vw + .90rem,1rem);
  line-height:1.58;
  text-align:start;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}

/* Primary boxed headings */
:is(
  .discovery-panel,
  .finder,
  .newsletter-copy,
  .newsletter-form-panel,
  .account-profile-panel,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx,
  .page-deals .split > div:not(.split-media),
  .page-categories .split > div:not(.split-media),
  .page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media)
) h2{
  font-size:clamp(1.85rem,2.35vw,2.7rem) !important;
  line-height:1.08;
  letter-spacing:-.02em;
}

/* Card-sized headings */
:is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .promise-item,
  .review-card,
  .concern-tile,
  .feature-mini,
  .stat-story-item,
  .check-tile,
  .teach-visual-card,
  .horizontal-step,
  .notice,
  .filter-box,
  .toc,
  .home2-proof-card,
  .timeline .step
) h3{
  font-size:clamp(1.2rem,.55vw + 1.05rem,1.5rem);
  line-height:1.18;
  letter-spacing:-.012em;
  margin-bottom:.55em;
}

:is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .promise-item,
  .review-card,
  .feature-mini,
  .stat-story-item,
  .check-tile,
  .notice,
  .filter-box,
  .toc,
  .cart-item
) h4{
  font-size:clamp(1.04rem,.28vw + .98rem,1.22rem);
  line-height:1.24;
}

/* Product-card copy needs a tighter scale than editorial panels. */
.cardx .card-bodyx h3,
.page-shop #productGrid .card-bodyx h3{
  font-size:clamp(1.15rem,.4vw + 1.02rem,1.35rem) !important;
  line-height:1.2;
}

.cardx .card-bodyx p,
.page-shop #productGrid .card-bodyx p,
.page-wishlist .card-bodyx p,
.page-product-details .card-bodyx p{
  font-size:clamp(.9rem,.12vw + .87rem,.96rem) !important;
  line-height:1.55 !important;
}

.cardx .price{
  font-size:clamp(.98rem,.18vw + .94rem,1.08rem);
  line-height:1.3;
}

.cardx .rating{
  font-size:clamp(.78rem,.12vw + .76rem,.86rem);
  line-height:1.35;
}

/* Blog card text remains editorial, but no oversized titles in narrow cards. */
.blog-card .inner h3{
  font-size:clamp(1.25rem,.7vw + 1.05rem,1.58rem);
  line-height:1.16;
}

/* Labels, navigation items and helper text inside boxes. */
:is(
  .filter-box,
  .account-nav,
  .account-profile-panel,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx,
  .newsletter-form-panel
) :is(label,.field label){
  font-size:clamp(.88rem,.1vw + .86rem,.94rem);
  line-height:1.4;
}

.account-nav a{
  font-size:clamp(.9rem,.12vw + .87rem,.96rem);
  line-height:1.38;
  text-align:start;
}

.notice{
  font-size:clamp(.94rem,.12vw + .91rem,1rem);
  line-height:1.55;
}

.timeline .step{
  font-size:clamp(.88rem,.12vw + .85rem,.95rem);
  line-height:1.45;
}

/* Keep intentionally centered micro-cards centered. */
.pill,
.pill :is(strong,span,p){
  text-align:center;
}

/* Controls should stay legible and labels should not clip. */
.btn{
  font-size:clamp(.9rem,.12vw + .87rem,.96rem);
  line-height:1.25;
  text-align:center;
  white-space:normal;
}

.form-controlx,
.shop-search input,
.shop-sort,
.filter-dropdown summary{
  font-size:1rem;
  line-height:1.4;
}

/* Tablet */
@media (max-width:1024px){
  :is(
    .discovery-panel,
    .finder,
    .newsletter-copy,
    .newsletter-form-panel,
    .account-profile-panel,
    .page-checkout form,
    .page-login form.cardx,
    .page-register form.cardx,
    .page-deals .split > div:not(.split-media),
    .page-categories .split > div:not(.split-media),
    .page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media)
  ) h2{
    font-size:clamp(1.75rem,3.4vw,2.35rem) !important;
  }

  :is(
    .card-bodyx,
    .blog-card .inner,
    .routine-card-body,
    .promise-item,
    .review-card,
    .concern-tile,
    .feature-mini,
    .stat-story-item,
    .check-tile,
    .teach-visual-card,
    .horizontal-step,
    .notice,
    .filter-box,
    .toc,
    .home2-proof-card,
    .timeline .step
  ) h3{
    font-size:clamp(1.18rem,1.8vw,1.42rem);
  }
}

/* Mobile */
@media (max-width:640px){
  :is(
    .discovery-panel,
    .finder,
    .newsletter-copy,
    .newsletter-form-panel,
    .account-profile-panel,
    .page-checkout form,
    .page-login form.cardx,
    .page-register form.cardx,
    .page-deals .split > div:not(.split-media),
    .page-categories .split > div:not(.split-media),
    .page-bundles main > .section:nth-of-type(n+3) .split > div:not(.split-media)
  ) h2{
    font-size:clamp(1.65rem,7vw,2rem) !important;
    line-height:1.1;
  }

  :is(
    .card-bodyx,
    .blog-card .inner,
    .routine-card-body,
    .promise-item,
    .review-card,
    .concern-tile,
    .feature-mini,
    .stat-story-item,
    .check-tile,
    .teach-visual-card,
    .horizontal-step,
    .notice,
    .filter-box,
    .toc,
    .home2-proof-card,
    .timeline .step
  ) h3{
    font-size:clamp(1.15rem,5vw,1.32rem);
    line-height:1.2;
  }

  :is(
    .card-bodyx,
    .blog-card .inner,
    .routine-card-body,
    .discovery-panel,
    .promise-item,
    .review-card,
    .concern-tile,
    .finder,
    .feature-mini,
    .stat-story-item,
    .check-tile,
    .newsletter-copy,
    .newsletter-form-panel,
    .teach-visual-card,
    .horizontal-step,
    .notice,
    .filter-box,
    .toc,
    .account-profile-panel,
    .cart-item,
    .home2-proof-card,
    .timeline .step,
    .page-checkout form,
    .page-login form.cardx,
    .page-register form.cardx
  ) p{
    font-size:.94rem;
    line-height:1.55;
  }

  .cardx .card-bodyx h3,
  .page-shop #productGrid .card-bodyx h3{
    font-size:1.18rem !important;
  }

  .blog-card .inner h3{
    font-size:1.25rem;
  }

  .btn{
    font-size:.92rem;
  }
}


/* =========================================================
   DARK MODE TEXT SAFETY — CSS ONLY
   Keeps markup, JavaScript, content and component structure intact.
   Prevents dark-theme text from losing contrast or visually colliding
   with cards, overlays, controls and image-caption surfaces.
========================================================= */

html[data-theme="dark"]{
  color-scheme:dark;
}

/* Keep boxed content readable on dark surfaces. */
html[data-theme="dark"] :is(
  .cardx,
  .blog-card,
  .pill,
  .routine-card,
  .routine-card-body,
  .discovery-panel,
  .feature-mini,
  .review-card,
  .concern-tile,
  .stat-story-item,
  .check-tile,
  .notice,
  .filter-box,
  .toc,
  .account-nav,
  .account-profile-panel,
  .cart-item,
  .timeline .step,
  .teach-visual-card,
  .mosaic-caption,
  .page-checkout form,
  .page-login form.cardx,
  .page-register form.cardx
){
  color:var(--text);
}

/* Text is allowed to wrap naturally instead of running into adjacent content. */
html[data-theme="dark"] :is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .feature-mini,
  .review-card,
  .concern-tile,
  .stat-story-item,
  .check-tile,
  .notice,
  .filter-box,
  .toc,
  .account-nav,
  .account-profile-panel,
  .cart-item,
  .timeline .step,
  .teach-visual-card,
  .mosaic-caption,
  .newsletter-copy,
  .newsletter-form-panel
) :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,label,a){
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Muted copy remains visibly separate from headings without fading away. */
html[data-theme="dark"] :is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .feature-mini,
  .review-card,
  .concern-tile,
  .notice,
  .filter-box,
  .toc,
  .account-profile-panel,
  .cart-item,
  .timeline .step,
  .teach-visual-card,
  .mosaic-caption
) :is(p,.lead,small){
  color:var(--muted);
}

/* Headings, labels and prices stay fully legible in dark cards. */
html[data-theme="dark"] :is(
  .card-bodyx,
  .blog-card .inner,
  .routine-card-body,
  .discovery-panel,
  .feature-mini,
  .review-card,
  .concern-tile,
  .notice,
  .filter-box,
  .toc,
  .account-profile-panel,
  .cart-item,
  .timeline .step,
  .teach-visual-card,
  .mosaic-caption
) :is(h1,h2,h3,h4,h5,h6,strong,label,.price){
  color:var(--text);
}

/* Image overlays always use a high-contrast foreground. */
html[data-theme="dark"] :is(
  .page-hero,
  .editorial-overlay,
  .feature-led-overlay
){
  color:var(--white);
}

html[data-theme="dark"] :is(
  .editorial-overlay,
  .feature-led-overlay
) :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,a){
  color:inherit;
  position:relative;
  z-index:1;
}

/* Purpose-built black / brand panels keep their intended light text. */
html[data-theme="dark"] :is(
  .finder,
  .promise-band,
  .promise-item,
  .education-story-copy,
  .newsletter-form-panel,
  .home2-proof-card,
  .page-product-details .section:nth-of-type(2),
  .page-skin-guide main > .section:last-of-type,
  .page-deals main > .section:last-of-type
){
  color:var(--white);
}

html[data-theme="dark"] :is(
  .finder,
  .promise-band,
  .promise-item,
  .education-story-copy,
  .newsletter-form-panel,
  .home2-proof-card,
  .page-product-details .section:nth-of-type(2),
  .page-skin-guide main > .section:last-of-type,
  .page-deals main > .section:last-of-type
) :is(h1,h2,h3,h4,h5,h6,strong,label,.price){
  color:var(--white);
}

html[data-theme="dark"] :is(
  .finder,
  .promise-band,
  .promise-item,
  .education-story-copy,
  .newsletter-form-panel,
  .home2-proof-card,
  .page-product-details .section:nth-of-type(2),
  .page-skin-guide main > .section:last-of-type,
  .page-deals main > .section:last-of-type
) :is(p,.lead,small){
  color:rgba(255,255,255,.78);
}

/* Dark cards used as alternating accents. */
html[data-theme="dark"] .check-tile:nth-child(2),
html[data-theme="dark"] .check-tile:nth-child(3),
html[data-theme="dark"] .page-deals .stat-story-item:first-child{
  color:var(--white);
}

html[data-theme="dark"] .check-tile:nth-child(2) :is(h1,h2,h3,h4,h5,h6,p,strong,span),
html[data-theme="dark"] .check-tile:nth-child(3) :is(h1,h2,h3,h4,h5,h6,p,strong,span),
html[data-theme="dark"] .page-deals .stat-story-item:first-child :is(h1,h2,h3,h4,h5,h6,p,strong,span){
  color:inherit;
}

/* Inputs and dropdowns cannot inherit low-contrast foregrounds. */
html[data-theme="dark"] :is(
  .form-controlx,
  .shop-search input,
  .shop-sort,
  .filter-dropdown summary
){
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
  caret-color:var(--text);
}

html[data-theme="dark"] :is(
  .form-controlx,
  .shop-search input
)::placeholder{
  color:var(--muted);
  opacity:1;
}

html[data-theme="dark"] select.form-controlx option,
html[data-theme="dark"] .finder select option{
  background:var(--surface);
  color:var(--text);
}

/* Preserve contrast for controls intentionally placed on brand/dark panels. */
html[data-theme="dark"] .finder .form-controlx{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border-color:rgba(255,255,255,.28);
}

html[data-theme="dark"] .finder .form-controlx::placeholder{
  color:rgba(255,255,255,.72);
}

html[data-theme="dark"] .newsletter-form-panel .form-controlx{
  background:var(--bg);
  color:var(--text);
  border-color:var(--border);
}

/* Links/nav states remain distinct from surrounding dark text. */
html[data-theme="dark"] .account-nav a{
  color:var(--text);
}

html[data-theme="dark"] .account-nav a.active,
html[data-theme="dark"] .account-nav a:hover{
  background:color-mix(in srgb,var(--surface) 78%,var(--primary));
  color:color-mix(in srgb,var(--primary) 82%,var(--white));
}

html[data-theme="dark"] :is(.rating,.eyebrow){
  color:color-mix(in srgb,var(--primary) 82%,var(--white));
}

/* Avoid foreground text being visually covered by translucent caption layers. */
html[data-theme="dark"] :is(
  .editorial-overlay,
  .feature-led-overlay,
  .mosaic-caption,
  .teach-visual-card
){
  isolation:isolate;
}

html[data-theme="dark"] :is(
  .mosaic-caption,
  .teach-visual-card
){
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border-color:var(--border);
}

/* Small screens: keep dark-mode text from stacking on neighboring controls. */
@media (max-width:768px){
  html[data-theme="dark"] :is(
    .card-bodyx,
    .blog-card .inner,
    .account-profile-panel,
    .filter-box,
    .notice,
    .newsletter-copy,
    .newsletter-form-panel,
    .mosaic-caption,
    .teach-visual-card
  ) :is(h1,h2,h3,h4,h5,h6,p,label,.price){
    position:relative;
    float:none;
    inset:auto;
  }

  html[data-theme="dark"] :is(
    .btn,
    .filter-dropdown summary,
    .account-nav a
  ){
    white-space:normal;
    overflow-wrap:anywhere;
  }
}


/* FINAL THREE-BOX 2+1 RESPONSIVE FIX */
/* Any section in this project that contains exactly three visual cards keeps
   two cards on the first row and centers the third card underneath on tablet
   and mobile sizes. Existing desktop layouts and content remain unchanged. */
@media (max-width:1024px){
  .feature-led-side,
  .page-home2 .routine-panel.active,
  .page-home2 .blog-grid,
  .page-deals .stat-story{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:18px !important;
    align-items:stretch;
  }

  .feature-led-side > :nth-child(3):last-child,
  .page-home2 .routine-panel.active > :nth-child(3):last-child,
  .page-home2 .blog-grid > :nth-child(3):last-child,
  .page-deals .stat-story > :nth-child(3):last-child{
    grid-column:1 / -1 !important;
    width:calc(50% - 9px) !important;
    max-width:calc(50% - 9px) !important;
    justify-self:center !important;
  }

  /* Remove older special spanning behavior so the first two always stay
     together on the top row and the third is the centered lower card. */
  .page-deals .stat-story > :first-child{
    grid-column:auto !important;
  }
}

@media (max-width:640px){
  .feature-led-side,
  .page-home2 .routine-panel.active,
  .page-home2 .blog-grid,
  .page-deals .stat-story{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .feature-led-side > :nth-child(3):last-child,
  .page-home2 .routine-panel.active > :nth-child(3):last-child,
  .page-home2 .blog-grid > :nth-child(3):last-child,
  .page-deals .stat-story > :nth-child(3):last-child{
    width:calc(50% - 6px) !important;
    max-width:calc(50% - 6px) !important;
  }
}

/* HOME 1 — SKIN TYPE RIBBON TABLET BALANCE FIX
   Keep the existing five cards/content unchanged. On tablet, the first three
   stay in one equal row and the final two expand evenly across the second row,
   removing the unused third-cell gap. */
@media (min-width:641px) and (max-width:1024px){
  .page-home1 .skin-type-ribbon{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }

  .page-home1 .skin-type-ribbon > a:nth-child(-n+3){
    grid-column:span 2;
  }

  .page-home1 .skin-type-ribbon > a:nth-child(n+4){
    grid-column:span 3;
  }

  .page-home1 .skin-type-ribbon > a:nth-child(3){
    border-right:0;
  }
}

/* FINAL HEADER CLEANUP
   Keep the header light, compact and consistently aligned. */
.brand{
  font-size:1.6rem !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

.desktop-nav a,
.nav-dropdown > button{
  font-size:.82rem !important;
  font-weight:400 !important;
}

.header-cta,
.icon-btn{
  height:44px !important;
  min-height:44px !important;
  line-height:1 !important;
}

.header-cta{
  padding:0 16px !important;
  font-weight:400 !important;
}

.icon-btn{
  width:44px !important;
  min-width:44px !important;
  flex:0 0 44px !important;
  font-size:1.3rem !important;
  font-weight:400 !important;
}

@media (max-width:640px){
  .brand{font-size:1.48rem !important}
  .header-cta{height:40px !important;min-height:40px !important;padding:0 12px !important;font-size:.76rem !important}
  .icon-btn{width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important;flex-basis:40px !important;font-size:1.2rem !important}
}

@media (max-width:480px){
  .brand{font-size:1.4rem !important}
}

/* Lumera visual brand mark — responsive */
@media (max-width: 820px){
  .brand.brand-logo{width:154px;height:40px}
  .brand.brand-logo img{width:154px;height:40px}
}
@media (max-width: 520px){
  .brand.brand-logo{width:136px;height:36px}
  .brand.brand-logo img{width:136px;height:36px}
}

/* Routine builder: show product cards one by one on mobile */
@media (max-width:640px){
  .page-home2 .routine-panel.active{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .page-home2 .routine-panel.active > :nth-child(3):last-child{
    grid-column:auto !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
}

/* Home 2 blog cards: one per row on mobile */
@media (max-width:640px){
  .page-home2 .blog-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .page-home2 .blog-grid > :nth-child(3):last-child{
    grid-column:auto !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
}

/* Deals stat cards: one per row on mobile */
@media (max-width:640px){
  .page-deals .stat-story{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .page-deals .stat-story > *,
  .page-deals .stat-story > :nth-child(3):last-child,
  .page-deals .stat-story > :first-child{
    grid-column:auto !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
}

/* Feature-led side cards: one per row on mobile */
@media (max-width:640px){
  .feature-led-side{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .feature-led-side > *,
  .feature-led-side > :nth-child(3):last-child{
    grid-column:auto !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
}

/* Teach-first visual: image on top, card below it (no overlap) on mobile/tablet */
@media (max-width:1024px){
  .teach-visual{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-height:0 !important;
    height:auto !important;
    overflow:visible;
    background:none;
    border-radius:0;
  }
  .teach-visual img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:28px;
  }
  .teach-visual-card{
    position:static !important;
    left:auto;right:auto;bottom:auto;
    width:100%;
    max-width:100% !important;
    margin:0;
    padding:22px 20px;
  }
}


/* =========================================================
   HEADER QA FIXES
   - Nav bar actions: CTA + theme + RTL (+ menu button ≤1024px)
   - Search / wishlist / cart live in the menu panel on mobile
   - Mobile menu overlays the page instead of pushing the hero down
   ========================================================= */
.nav-dropdown-end .nav-dropdown-menu{left:auto;right:0}
html[dir="rtl"] .nav-dropdown-end .nav-dropdown-menu{right:auto;left:0}

.mobile-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.mobile-panel .mobile-quick a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;border:1px solid var(--border);border-radius:999px;font-size:.86rem}
.mobile-quick a span{font-size:1.1rem;line-height:1}
.mobile-panel .mobile-links a{display:block;padding:10px 0}
.mobile-panel .mobile-cta{display:none;margin-top:12px;width:100%;justify-content:center;color:var(--white)}

@media (max-width:1024px){
  .site-header{position:sticky}
  .mobile-panel{
    position:absolute;
    top:100%;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:14px max(20px, calc((100% - var(--container)) / 2)) 20px !important;
    background:var(--bg);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:0 24px 40px rgba(21,18,20,.12);
    max-height:calc(100dvh - 120px);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:1001;
  }
}

/* Keep theme + RTL visible on every width */
.nav-actions [data-rtl-toggle],
.nav-actions [data-theme-toggle]{display:grid !important}

@media (max-width:560px){
  .nav-actions .header-cta{display:none !important}
  .mobile-panel .mobile-cta{display:flex}
}

/* Footer bottom bar: copyright + legal links only */
.lm-footer-bottom{display:flex !important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px}
.lm-footer-legal a{color:inherit}
.lm-footer-legal a:hover{color:var(--primary)}
@media (max-width:1024px){
  .lm-footer-bottom{flex-direction:column;justify-content:center;text-align:center}
}

/* =========================================================
   QA ROUND 2
   - Search / wishlist / cart icons live in the header bar at every width
     (incl. 360px) alongside theme + RTL + menu
   - Header actions always right-aligned
   - Mobile menu (≤1024px) overlays content; hero never moves
   - overflow-x:clip keeps the sticky header working
   ========================================================= */
html,body{overflow-x:clip !important}
.nav-wrap{position:relative}
.nav-actions{margin-inline-start:auto;flex:0 0 auto;min-width:0}
.header-icon{text-decoration:none;color:var(--text)}
.header-icon svg{display:block;width:18px;height:18px}
.header-icon:hover{color:var(--primary);border-color:var(--primary)}

@media (max-width:1024px){
  .site-header{position:sticky !important;top:0}
  .mobile-panel{position:absolute !important;top:100% !important}
  .mobile-panel:not(.open){display:none !important}
}

@media (max-width:640px){
  .nav-wrap{gap:8px !important}
  .nav-actions{gap:6px !important}
  .nav-actions .icon-btn{width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;flex:0 0 36px !important;font-size:1.05rem !important}
  .header-icon svg{width:16px;height:16px}
}

@media (max-width:420px){
  .nav-wrap{width:calc(100% - 16px) !important;gap:6px !important}
  .brand.brand-logo{width:104px !important;height:28px !important;flex:0 1 104px;min-width:84px}
  .brand.brand-logo img{width:100% !important;height:auto !important;max-height:28px;object-fit:contain;object-position:left center}
  html[dir="rtl"] .brand.brand-logo img{object-position:right center}
  .nav-actions{gap:4px !important}
  .nav-actions .icon-btn{width:34px !important;min-width:34px !important;height:34px !important;min-height:34px !important;flex:0 0 34px !important;font-size:1rem !important}
  .header-icon svg{width:15px;height:15px}
}

@media (max-width:340px){
  .nav-actions{gap:3px !important}
  .nav-actions .icon-btn{width:31px !important;min-width:31px !important;height:31px !important;min-height:31px !important;flex:0 0 31px !important}
  .brand.brand-logo{width:88px !important;flex-basis:88px;min-width:72px}
}