/* Rainori mobile storefront refinements, loaded after the shared cart styles. */
@media (max-width: 760px) {
  html { scroll-padding-top: 112px; }
  body { overflow-x: clip; }
  html body .rainori-season-banner,
  html body:has(.rainori-homepage) .rainori-season-banner {
    position: sticky; top: 0; z-index: 102; height: 52px; min-height: 52px;
  }
  body .rainori-season-banner button {
    display: grid; width: 100%; height: 52px; min-height: 52px;
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 5px 12px;
    font-size: 10px;
  }
  body .rainori-season-copy {
    display: grid; min-width: 0; gap: 2px; justify-content: start; text-align: left;
  }
  body .rainori-season-copy strong { font-size: 11px; white-space: nowrap; }
  body .rainori-season-copy > span {
    overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
  }
  body .rainori-season-countdown { gap: 2px; }
  body .rainori-season-unit { min-width: 25px; }
  body .rainori-season-unit b { min-width: 24px; height: 24px; font-size: 13px; }

  html body header.shell.nav,
  html body:has(.rainori-homepage) header.shell.nav {
    position: sticky; top: 52px; z-index: 100; display: grid; width: 100%;
    height: 57px; min-height: 57px; grid-template-columns: 44px 1fr 44px;
    padding: 0 12px; background: #fbf9f4; border-bottom: 1px solid rgba(48,45,38,.11);
  }
  body header.shell.nav > .hamb {
    display: grid; width: 44px; height: 44px; place-items: center; padding: 0;
  }
  body header.shell.nav .brand {
    grid-column: 2; width: 130px; height: 53px; justify-self: center;
  }
  body header.shell.nav .brand img { width: 124px; max-height: 45px; }
  body header.shell.nav .navlinks {
    top: 100%; right: -12px; left: -12px; z-index: 105; padding: 12px 20px 18px;
    background: #fbf9f4; border-color: rgba(48,45,38,.14);
    box-shadow: 0 14px 24px rgba(36,35,31,.08);
  }
  body header.shell.nav .navlinks a {
    display: flex; width: 100%; min-height: 48px; align-items: center;
    border-bottom: 1px solid rgba(48,45,38,.08); font-size: 13px;
  }
  body header.shell.nav .navtools { grid-column: 3; gap: 0; }
  body header.shell.nav .rainori-contact-link { display: none !important; }
  body header.shell.nav .cart { width: 44px; height: 44px; }

  .rh-wrap, .rh-hero-inner, .rh-wide-story, .rh-celebration-inner,
  body:has(.rainori-homepage) .footer-grid { width: calc(100% - 24px); }
  .rh-hero {
    position: relative; display: block; width: 100%; height: calc(100svh - 109px);
    min-height: 650px; max-height: 920px; margin: 0; overflow: hidden;
    background: #f0eee9;
  }
  .rh-hero::before {
    display: block; z-index: 1;
    background: linear-gradient(180deg,#f0eee9 0%,#f0eee9 30%,rgba(240,238,233,.94) 39%,rgba(240,238,233,.42) 57%,rgba(240,238,233,0) 73%);
  }
  .rh-hero-image {
    position: absolute; inset: auto 0 0; z-index: 0; order: initial;
    width: 100%; height: 72%; aspect-ratio: auto; object-fit: cover;
    object-position: 80% center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
  }
  .rh-hero-inner {
    position: static; z-index: auto; display: flex; height: 100%;
    align-items: flex-start; padding-top: 24px;
  }
  .rh-hero-copy {
    position: static; z-index: 2; width: 100%; min-height: 0;
    gap: 15px; padding: 0 0 180px; color: #171719;
  }
  .rh-hero h1, .rh-hero-proof, .rh-hero-copy > p { color: #171719; }
  .rh-hero h1 {
    max-width: 366px; font-size: 40px; font-weight: 600; letter-spacing: -1.2px;
    line-height: 1.2; text-wrap: balance;
  }
  .rh-hero-proof { gap: 8px; font-size: 14px; line-height: 1.35; }
  .rh-hero-stars { color: #9a8057; }
  .rh-hero-copy > p { max-width: 38ch; font-size: 16px; line-height: 24px; }
  .rh-hero .rh-button {
    min-width: 180px; min-height: 48px; border-color: #171719; border-radius: 3px;
    background: #171719; font-size: 14px;
  }
  .rh-anniversary {
    position: absolute; top: auto; right: 12px; bottom: 13px; left: 12px;
    z-index: 3; width: auto; gap: 10px; padding: 12px;
    border: 1px solid rgba(77,67,52,.1); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(30,27,22,.16);
  }
  .rh-anniversary svg { width: 52px; }
  .rh-anniversary > span { gap: 2px; font-size: 13px; line-height: 1.35; }
  .rh-anniversary > span > strong { font-size: 16px; }

  .rh-shelf-section, .rh-reviews, .rh-categories, .rh-social, .rh-newsletter { height: auto; }
  .rh-shelf-section { padding-block: 40px; }
  .rh-section-heading, .rh-social-heading { align-items: flex-start; gap: 10px; }
  .rh-section-heading h2, .rh-review-heading h2, .rh-story-copy h2,
  .rh-arrivals-copy h2, .rh-formula-copy h2, .rh-wide-copy h2,
  .rh-brand-quote h2 { font-size: 32px; line-height: 1.18; letter-spacing: -.8px; }
  .rh-section-heading { margin-bottom: 22px; }
  .rh-shop-all { min-height: 38px; }
  .rh-product-list { gap: 12px; }
  .rh-product-list .product-card { flex: 0 0 calc((100% - 12px) / 2); }
  .rh-product-list .product-image-wrap { height: auto; aspect-ratio: 4 / 5; }
  /* Labels belong below the photo on a narrow screen, never over the product. */
  #app .rh-product-list .product-image-wrap,
  #app .product-image-wrap:has(> .rainori-black-friday-saving) {
    display: flex;
    flex-direction: column;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }
  #app .rh-product-list .product-image-wrap > img,
  #app .product-image-wrap:has(> .rainori-black-friday-saving) > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
  }
  #app .rh-product-badges {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 8px;
  }
  #app .rh-product-badges > span {
    max-width: 100%;
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #app .product-image-wrap > .rainori-black-friday-saving {
    position: static;
    align-self: flex-start;
    max-width: 100%;
    margin: 8px 0 0;
    font-size: 10px;
    line-height: 1.35;
  }
  .rh-product-list .product-caption strong { font-size: 16px; line-height: 1.12; }
  .rh-product-list .product-type, .rh-product-list .product-variant { font-size: 11px; line-height: 1.4; }
  .rh-reviews { padding-block: 38px; }
  .rh-review { flex-basis: calc(100vw - 24px); grid-template-columns: minmax(94px,31%) minmax(0,1fr); }
  .rh-categories { padding-block: 40px; }
  .rh-category-grid { grid-template-columns: 1fr; gap: 12px; }
  .rh-category { height: clamp(300px,88vw,410px); }
  .rh-category > span { right: 16px; bottom: 16px; left: 16px; }
  .rh-category strong { font-size: 23px; }
  .rh-wide-story { height: auto; grid-template-columns: 1fr; gap: 0; }
  .rh-wide-image { height: clamp(280px,85vw,420px); }
  .rh-wide-copy { padding: 25px 8px 30px; }
  .rh-story-grid { grid-template-columns: 1fr; gap: 18px; padding-block: 38px; }
  .rh-story-copy { padding: 0; }
  .rh-story-copy p { font-size: 15px; }
  .rh-home-video-comfort, .rh-home-video-toiletry { width: min(100%,360px); }
  .rh-formula-section { padding-block: 24px; }
  .rh-formula { grid-template-columns: 1fr; gap: 12px; }
  .rh-formula-copy { padding: 26px 8px 31px; }
  .rh-arrivals { height: auto; padding-block: 30px; }
  .rh-arrivals-inner { height: auto; grid-template-columns: 1fr; gap: 18px; }
  .rh-arrivals-copy { padding: 0; }
  .rh-arrivals-image { height: clamp(280px,82vw,390px); }
  .rh-brand-quote { height: auto; padding-block: 38px; }
  .rh-brand-quote-inner { grid-template-columns: 1fr; gap: 22px; }
  .rh-brand-quote-copy { padding: 0; }
  .rh-brand-quote-photo { width: min(100%,360px); height: auto; }
  .rh-celebration { height: auto; padding-block: 14px; }
  .rh-celebration-inner { height: auto; grid-template-columns: 1fr; }
  .rh-celebration-image { height: clamp(270px,78vw,370px); }
  .rh-celebration-copy { padding: 24px 18px 28px; }
  .rh-social { padding-block: 38px; }
  .rh-social-card { flex-basis: min(280px,76vw); height: min(420px,115vw); }
  .rh-newsletter { padding-block: 34px; }
  .rh-newsletter-inner { grid-template-columns: 1fr; gap: 18px; }

  .catalog-intro-image-only { height: clamp(360px,115.4vw,520px); min-height: 0; max-height: none; }
  .catalog-intro-image-only .catalog-intro-image { object-position: 58% center; }
  .catalog-intro-tagline {
    right: 14px; bottom: 22px; left: 14px;
    font-size: clamp(29px,8vw,38px); line-height: 1.1;
  }
  .catalog-intro-bestseller {
    position: relative; display: block; height: 100svh; min-height: 650px;
    max-height: 920px; background: #f0eee9; color: #171719;
  }
  .catalog-intro-bestseller::after {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,#f0eee9 0%,#f0eee9 30%,rgba(240,238,233,.93) 40%,rgba(240,238,233,.4) 58%,rgba(240,238,233,0) 74%);
    content: ""; pointer-events: none;
  }
  .catalog-intro-bestseller .catalog-intro-image {
    position: absolute; inset: auto 0 0; z-index: 0; width: 100%;
    height: 72%; object-position: 68% center;
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 24%);
    mask-image: linear-gradient(to bottom,transparent 0%,#000 24%);
  }
  .catalog-intro-copy {
    position: relative; z-index: 2; display: flex; width: 100%; height: 100%;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 26px 12px 190px; color: #171719;
  }
  .catalog-intro-proof, .catalog-intro-copy h1, .catalog-intro-description { color: #171719; }
  .catalog-intro-proof { margin-bottom: 12px; font-size: 10px; }
  .catalog-intro-proof::before { color: #9a8057; }
  .catalog-intro-copy h1 {
    max-width: 12ch; margin-bottom: 12px; font-size: 40px; line-height: 1.2;
    letter-spacing: -1.2px; text-wrap: balance;
  }
  .catalog-intro-description { max-width: 38ch; font-size: 16px; line-height: 24px; }
  .catalog-intro-cta {
    width: auto; min-width: 205px; min-height: 48px; margin-top: 18px;
    padding-inline: 16px; border-color: #171719; background: #171719; color: #fff;
  }
  .catalog-intro-reviews {
    position: absolute; right: 12px; bottom: 13px; left: 12px; z-index: 3;
    gap: 10px; margin: 0; padding: 11px 12px; border-radius: 8px;
    background: #fbf9f4; color: #302f2b; box-shadow: 0 8px 28px rgba(30,27,22,.16);
  }
  .catalog-intro-laurel { flex-basis: 54px; width: 54px; height: 54px; }
  .catalog-intro-reviews strong { font-size: 14px; }
  .catalog-intro-reviews > span > span { font-size: 11px; }
  .rainori-catalog-page .travel-products.section.shell {
    width: calc(100% - 24px); padding: 34px 0 54px;
  }
  .rainori-catalog-page .travel-products > .collection-hero { margin-bottom: 24px; }
  .rainori-catalog-page .collection-hero h1 { font-size: 32px; line-height: 1.18; }
  .rainori-catalog-page .collection-hero > p:last-child { font-size: 15px; }
  .rainori-catalog-page #products-start .all-products {
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 12px;
  }
  .rainori-catalog-page #products-start .all-products > .product-card:last-child:nth-child(odd) {
    grid-column: auto; width: auto; justify-self: stretch;
  }
  .rainori-catalog-page #products-start .product-image-wrap { aspect-ratio: 4 / 5; border-radius: 6px; }
  .rainori-catalog-page #products-start .product-card .product-caption { gap: 5px; padding-top: 9px; }
  .rainori-catalog-page #products-start .product-caption strong {
    font-size: 16px; line-height: 1.12; letter-spacing: -.3px;
  }
  .rainori-catalog-page #products-start .product-caption .price { font-size: 15px; }
  .rainori-catalog-page #products-start .rainori-black-friday-saving {
    top: 7px; left: 7px; padding: 5px 7px; font-size: 9px;
  }
  .page-hero { padding: 42px 0 44px; }
  .page-hero h1 { font-size: 39px; line-height: 1.06; }
  .page-hero p { font-size: 15px; }

  .rainori-about-page { overflow: visible; }
  .about-wrap { width: calc(100% - 24px); }
  .about-hero-band { padding: 12px 0 22px; }
  .about-hero { grid-template-columns: 1fr; height: auto; border-radius: 5px; }
  .about-hero-copy { padding: 25px 12px 22px; }
  .about-hero h1 { font-size: 38px; line-height: 1.16; }
  .about-hero-copy > p:not(.about-kicker) { font-size: 15px; }
  .about-hero-image { height: clamp(250px,80vw,340px); }
  .about-story { grid-template-columns: 1fr; gap: 23px; padding-bottom: 42px; }
  .about-story-image { height: clamp(250px,78vw,350px); }
  .about-campaign { min-height: 360px; }
  .about-campaign-copy { padding: 27px 20px; }
  .about-benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
  .about-benefit img { height: auto; aspect-ratio: 4 / 5; }
  .about-guide-inner { grid-template-columns: 1fr; gap: 22px; }
  .about-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-stat:nth-child(2) { border-right: 0; }
  .about-stat:nth-child(-n+2) { border-bottom: 1px solid var(--about-line); }
  .about-ugc-card { flex-basis: min(440px,calc(100vw - 24px)); }
  .about-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
  .about-product-grid .product-image-wrap { height: auto; aspect-ratio: 4 / 5; }
  .about-join { grid-template-columns: 1fr; }
  .about-join-image { height: clamp(250px,78vw,340px); min-height: 0; }
  .about-phenomenon-card { flex-basis: min(280px,76vw); }
  .about-newsletter-fields { gap: 0; }
  .rainori-about { padding: 44px 16px 64px; }
  .rainori-about-intro { margin-bottom: 32px; text-align: left; }
  .rainori-about-intro h1 { font-size: clamp(36px,10vw,48px); }
  .rainori-about-list { gap: 18px; }
  .rainori-about-scene, .rainori-about-scene:nth-child(even) { grid-template-columns: 1fr; }
  .rainori-about-scene:nth-child(even) > img,
  .rainori-about-scene:nth-child(even) > .rainori-about-copy { order: initial; }
  .rainori-about-scene img { aspect-ratio: 4 / 5; }
  .rainori-about-copy { padding: 24px 18px 27px; }
  .rainori-about-copy h2 { font-size: 32px; }
  .about-sections { grid-template-columns: 1fr; margin-bottom: 48px; }
  .about-block.wide { grid-column: auto; }
  .about-intro { padding: 48px 0 30px; }
  .principles { grid-template-columns: 1fr; }
  .home-facts { padding: 45px 0; }
  .facts-layout { grid-template-columns: 1fr; gap: 18px; }

  .contact-page, .policy-page {
    width: calc(100% - 24px); padding-top: 42px; padding-bottom: 58px;
  }
  .contact-intro { grid-template-columns: 1fr; gap: 18px; }
  .contact-page h1, .policy-page h1 { font-size: 38px; line-height: 1.12; }
  .contact-lede { font-size: 16px; }
  .contact-primary, .contact-details { grid-template-columns: 1fr; }
  .contact-primary { margin-top: 34px; }
  .contact-card { padding: 24px 18px; }
  .contact-card a { font-size: 22px; overflow-wrap: anywhere; }
  .contact-details { margin-top: 34px; }
  .contact-details div, .contact-details div:nth-child(even) {
    padding: 18px 0; border-left: 0;
  }
  .policy-body { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
  .policy-body table { display: block; max-width: 100%; overflow-x: auto; }

  .detail:not(.rainori-product-detail) {
    width: 100%; grid-template-columns: 1fr; gap: 18px; padding: 18px 12px 52px;
  }
  .detail-gallery { min-width: 0; }
  .detail-gallery .main-image, .detail-gallery img {
    height: auto; max-height: 72svh; aspect-ratio: 4 / 5;
    object-fit: contain; background: #f2eee6;
  }
  .detail-info { min-width: 0; padding: 0 4px; }
  .detail-info h1 { font-size: 34px; line-height: 1.12; }
  .detail-info .lede { font-size: 15px; }
  .detail-info .actions { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
  .detail-info .actions .btn { min-height: 48px; padding-inline: 12px; }
  .detail-info .qty { width: 112px; min-height: 48px; }
  .detail-info .qty button { width: 36px; min-height: 46px; }
  .detail-thumbnails { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .detail-thumbnail { min-height: 70px; }
  .rainori-product-hero { height: auto; min-height: 0; overflow: visible; }
  .rainori-product-film { height: min(112vw,470px); min-height: 340px; }
  .rainori-product-film-frame { aspect-ratio: 4 / 5; }
  .rainori-purchase-panel {
    width: 100%; height: auto; overflow: visible; padding: 25px 16px 30px;
  }
  .rainori-purchase-panel h1 { max-width: 20ch; font-size: clamp(30px,8vw,36px); }
  .rainori-purchase-panel .rainori-color-options { grid-template-columns: repeat(auto-fit,minmax(68px,1fr)); }
  .rainori-buy-row { grid-template-columns: minmax(94px,112px) minmax(0,1fr); }
  .rainori-product-information { grid-template-columns: 1fr; padding: 28px 16px 42px; }
  .rainori-product-meta { grid-column: auto; }
  button.rainori-purchase-jump[data-purchase-jump] {
    top: calc(52px + 57px + 8px); right: 8px;
  }
  body:has(.rainori-homepage) .footer { padding: 38px 0 24px !important; }
  body:has(.rainori-homepage) .footer-grid { grid-template-columns: 1fr; gap: 23px; }
  body:has(.rainori-homepage) .footer-grid > div:first-child { grid-column: auto; }
  body:has(.rainori-homepage) .fine { margin-top: 30px; }
  .footer .shell { padding-inline: 12px; }
  .footer a { min-height: 34px; }
  .rainori-socials a {
    display: inline-flex !important; width: 42px; height: 42px; align-items: center;
  }
}

@media (max-width: 420px) {
  .rh-wrap, .rh-hero-inner, .rh-wide-story, .rh-celebration-inner,
  body:has(.rainori-homepage) .footer-grid { width: calc(100% - 24px); }
  .rh-hero { height: calc(100svh - 109px); min-height: 650px; }
  .rh-hero-copy { gap: 15px; padding-bottom: 176px; }
  .rh-hero h1 { font-size: 40px; }
  .rh-hero-copy > p { font-size: 16px; line-height: 24px; }
  .rh-section-heading h2, .rh-review-heading h2, .rh-story-copy h2,
  .rh-arrivals-copy h2, .rh-formula-copy h2, .rh-wide-copy h2,
  .rh-brand-quote h2 { font-size: 30px; }
  .catalog-intro-copy { padding: 24px 12px 184px; }
  .catalog-intro-copy h1 { font-size: 40px; }
  .catalog-intro-reviews { right: 12px; left: 12px; }
  .catalog-intro-image-only { height: clamp(360px,115.4vw,520px); min-height: 0; }
  .rainori-catalog-page .travel-products.section.shell { width: calc(100% - 24px); }
  .rainori-catalog-page #products-start .product-caption strong { font-size: 15px; }
  .rainori-catalog-page #products-start .rainori-black-friday-saving {
    max-width: calc(100% - 12px); font-size: 8px;
  }
  .about-benefit-grid { grid-template-columns: 1fr; }
  .detail-info .actions { grid-template-columns: 96px minmax(0,1fr); }
  .detail-info .qty { width: 96px; }
  .detail-info .qty button { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-vip-track, .rh-product-list .product-image-wrap img,
  .rainori-product-film-track { animation: none !important; transition: none !important; }
}