/*!
 * Aurelia Research — homepage sections (plugin)
 * Everything is scoped to .ruo-home so it cannot collide with theme styles.
 * Header, footer, announcement bar and the 21+ / research-use gate ship with the theme.
 */
:root{--ink:#0D0E0E;
  --ink-2:#131414;
  --ink-3:#1B1C1C;
  --line:rgba(230,184,109,.22);
  --line-soft:rgba(241,237,228,.10);
  --gold:#E6B86D;
  --gold-deep:#A98952;
  --gold-dark:#8E7143;
  --cream:#F1EDE4;
  --cream-dim:rgba(241,237,228,.66);
  --grad-gold:linear-gradient(100deg,#8E7143 0%,#E6B86D 38%,#F3DEB4 55%,#C69B54 78%,#8E7143 100%);
  --serif:"Cormorant Garamond",Didot,"Bodoni MT",Georgia,serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mark:url("../img/icon-mark.webp");
  --wrap:1280px;
  --gut:28px;
  --hdr:76px;}
.ruo-home *{box-sizing:border-box}
.ruo-home{margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Lining figures: Cormorant's default old-style numerals dropped the 5 and 7
     in names like BPC-157 below the baseline. Inherits to card titles, prices
     and doses. */
  font-variant-numeric:lining-nums;}
.ruo-home img{max-width:100%;display:block}
.ruo-home a{color:inherit;text-decoration:none}
.ruo-home button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ruo-home .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ruo-home .eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;}
.ruo-home h1,.ruo-home h2,.ruo-home h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em;margin:0}
/* Raise the hyphen: Cormorant centres it at 211/1000, capitals want ~312. */
.ruo-home .ruo-hy{position:relative;bottom:.1em}
.ruo-home h1{font-size:clamp(38px,5.2vw,68px);line-height:1.04}
.ruo-home h2{font-size:clamp(28px,3.4vw,44px);line-height:1.12}
.ruo-home h3{font-size:20px;line-height:1.25}
.ruo-home p{margin:0 0 18px}
.ruo-home .lede{font-size:17px;color:var(--cream-dim);max-width:46ch}
.ruo-home .sec{padding:64px 0}
.ruo-home .sec-head{text-align:center;margin-bottom:34px}
.ruo-home .sec-head h2{margin-bottom:14px}
.ruo-home .rule{width:64px;height:1px;background:var(--grad-gold);margin:0 auto}
.ruo-home .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 30px;font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;border-radius:2px;transition:.22s ease;white-space:nowrap;}
.ruo-home .btn-gold{background:var(--grad-gold);color:#17130B;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.ruo-home .btn-gold:hover{filter:brightness(1.07)}
/* Removed the bespoke foil texture override so the hero Shop Now button
   matches the flat --grad-gold used by .btn-gold and the best-seller
   .rs-badge everywhere else, instead of looking inconsistent with them. */
.ruo-home .btn-ghost{border:1px solid var(--gold);color:var(--gold)}
.ruo-home .btn-ghost:hover{background:rgba(230,184,109,.10)}
.ruo-home .drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:.28s}
.ruo-home .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);
  background:var(--ink-2);border-left:1px solid var(--line-soft);
  transform:translateX(100%);transition:transform .3s ease;padding:18px 22px 30px;
  display:flex;flex-direction:column}
.ruo-home .drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.ruo-home .drawer-top img{height:34px}
.ruo-home .drawer-cart{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.ruo-home .drawer-cart svg{width:18px;height:18px}
.ruo-home .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.ruo-home .hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 42%,rgba(230,184,109,.16) 0%,rgba(13,14,14,0) 58%);
  pointer-events:none}
.ruo-home .hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:40px;padding-top:60px;padding-bottom:60px}
/* The tagline is set to break after "Purity." so it reads as two clean
   lines. The copy column tops out at 604px, and the line measures 9.84x the
   font size, so the cap is held below 604/9.84 to keep line one intact. */
/* 1.04 left barely 2px between the descenders of the first line and the caps
   and ascenders of the second, which in this serif reads as the two lines
   touching. 1.15 opens that to roughly 8px at the largest size. */
.ruo-home .hero h1{margin-bottom:22px;font-size:clamp(38px,4.5vw,58px);line-height:1.15}
.ruo-home .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.ruo-home .hero-media{display:flex;align-items:center;justify-content:center}
.ruo-home .fg-img{width:100%;height:auto;max-height:520px;object-fit:contain;background:none;
  /* Decorative artwork: not a link, nothing behind it. Inert so it cannot be
     dragged out on desktop or opened by the tap-and-hold menu on iOS. */
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
.ruo-home .bcard .bg{pointer-events:none;-webkit-user-drag:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none}
.ruo-home .ph{display:grid;place-items:center;gap:10px;background:#191A1A;
  border:1px dashed rgba(230,184,109,.34);border-radius:3px;padding:22px}
.ruo-home .mk{display:block;background:var(--mark) center/contain no-repeat;opacity:.85}
.ruo-home .ph .mk{width:96px;height:96px}
.ruo-home .ph span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,237,228,.45)}
.ruo-home .ph-hero{width:100%;aspect-ratio:1/.86;max-height:460px}
.ruo-home .trust{border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.ruo-home .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:34px;padding-bottom:34px}
.ruo-home .trust-i{text-align:center;padding:6px 22px;border-right:1px solid var(--line-soft)}
.ruo-home .trust-i:last-child{border-right:0}
.ruo-home .trust-i svg{width:30px;height:30px;color:var(--gold);margin:0 auto 12px;display:block}
.ruo-home .trust-i b{display:block;font-family:var(--serif);font-size:17px;font-weight:500;
  color:var(--gold);margin-bottom:5px}
.ruo-home .trust-i small{font-size:12.5px;color:var(--cream-dim);line-height:1.5;display:block}
.ruo-home .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:34px}
.ruo-home .chip{padding:8px 18px;border:1px solid var(--line-soft);border-radius:999px;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);transition:.2s}
.ruo-home .chip.on,.ruo-home .chip:hover{border-color:var(--gold);color:var(--gold)}
.ruo-home .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ruo-home .card{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform var(--aru-motion) var(--aru-ease),border-color var(--aru-motion) var(--aru-ease)}
.ruo-home .card:hover{border-color:var(--line);transform:translateY(-3px)}
.ruo-home .card:hover .price{color:var(--gold)}
.ruo-home .price{transition:color .2s}
.ruo-home .card-media{position:relative;width:100%;aspect-ratio:1/1.06;overflow:hidden;background:#0B0C0C}
.ruo-home .card-media img.shot{width:100%;height:100%;object-fit:cover}
.ruo-home .card-media .ph{position:absolute;inset:0;border:0;border-bottom:1px solid var(--line-soft);border-radius:0}
.ruo-home .card-media .ph .mk{width:54px;height:54px}
.ruo-home .card-body{padding:16px 16px 18px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:8px;flex:1}
.ruo-home .tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.ruo-home .card h3{font-size:21px}
.ruo-home .dose{font-size:12px;letter-spacing:.12em;color:var(--cream-dim)}
.ruo-home .purity{font-size:10px;letter-spacing:.1em;border:1px solid var(--line-soft);
  border-radius:999px;padding:3px 10px;color:var(--cream-dim)}
.ruo-home .card-foot{display:flex;align-items:center;justify-content:center;width:100%;
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(241,237,228,.06)}
.ruo-home .price{font-family:var(--serif);font-size:22px;color:var(--cream)}
.ruo-home .grid-cta{display:flex;justify-content:center;margin-top:32px}

/* Carousel progress rail: a minimal, decorative indicator that a product row
   scrolls further. Sits beneath .pgrid whenever it is actually scrollable
   (currently the mobile row layout); aurelia-carousel-rail.js toggles the
   [hidden] attribute after measuring scrollWidth vs clientWidth, so on any
   breakpoint where the grid is not overflowing it stays out of the layout
   entirely — no reserved space, no shift. */
.ruo-home .prail{position:relative;width:28px;height:2px;margin:24px auto 0}
.ruo-home .prail[hidden]{display:none}
.ruo-home .prail-track{position:absolute;inset:0;background:rgba(241,237,228,.16);border-radius:1px}
.ruo-home .prail-fill{position:absolute;top:0;left:0;height:100%;width:30%;
  background:var(--gold);border-radius:1px;transform:translateX(0);
  transition:transform .12s linear;will-change:transform,width}
.ruo-home .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ruo-home .bcard{position:relative;aspect-ratio:1/1;border-radius:var(--aru-card-radius,16px);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line-soft);display:flex}
.ruo-home .bcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ruo-home .bcard .ph{position:absolute;inset:0;border:0;border-radius:0;align-content:center;padding-bottom:34%}
.ruo-home .bcard .ph .mk{width:66px;height:66px}
.ruo-home .bcard .binner{position:relative;z-index:2;margin-top:auto;padding:22px;width:100%;
  background:linear-gradient(180deg,rgba(13,14,14,0) 0%,rgba(13,14,14,.88) 62%)}
.ruo-home .bcard h3{font-size:19px;margin-bottom:6px}
.ruo-home .bcard p{margin:0;font-size:13px;color:var(--cream-dim);line-height:1.5}
.ruo-home .bcard .num{position:absolute;top:16px;left:20px;z-index:2;font-family:var(--serif);
  font-size:13px;letter-spacing:.2em;color:var(--gold)}
.ruo-home .coa{background:var(--ink-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ruo-home .coa .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center;
  padding-top:80px;padding-bottom:80px}
.ruo-home .coa-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ruo-home .doc{background:var(--ink);border:1px solid var(--line-soft);border-radius:3px;padding:14px}
.ruo-home .doc-thumb{position:relative;aspect-ratio:1/1.28;background:#101111;overflow:hidden;
  border:1px solid rgba(241,237,228,.07);display:grid;place-items:center;gap:8px;margin-bottom:12px;
  padding:10px;text-align:center}
.ruo-home .doc-thumb img{position:absolute;inset:0;padding:0}
.ruo-home .doc-thumb .mk{width:38px;height:38px;opacity:.75}
.ruo-home .doc-thumb span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,237,228,.4)}
.ruo-home .doc b{display:block;font-size:13px;font-weight:400}
.ruo-home .doc small{display:block;font-size:11.5px;color:var(--cream-dim);margin:2px 0 10px}
.ruo-home .doc a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ruo-home .ruo{border:1px solid var(--line);border-radius:3px;padding:22px;text-align:center;
  background:rgba(230,184,109,.04)}
.ruo-home .ruo b{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:20px;color:var(--gold);font-weight:500}
.ruo-home .ruo svg{width:18px;height:18px}
.ruo-home .ruo p{margin:6px 0 0;font-size:13.5px;color:var(--cream-dim)}
.ruo-home .gate-box{width:min(520px,100%);background:var(--ink-2);border:1px solid var(--line);
  border-radius:4px;padding:38px 34px;text-align:center;max-height:92vh;overflow:auto}
.ruo-home .gate-box .mk{width:74px;height:74px;margin:0 auto 20px}
.ruo-home .gate-box h2{font-size:30px;margin-bottom:10px}
.ruo-home .gate-box>p{font-size:13.5px;color:var(--cream-dim);margin-bottom:24px}
.ruo-home .gate-exit{display:block;margin:14px auto 0;font-size:12px;color:rgba(241,237,228,.45);
  text-decoration:underline;text-underline-offset:3px}
.ruo-home .gate-fine{margin:20px 0 0;font-size:11px;line-height:1.6;color:rgba(241,237,228,.38)}
@media (max-width:1023px){
:root{--gut:22px}
.ruo-home .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:52px;padding-bottom:52px}
.ruo-home .hero-media{order:-1}
.ruo-home .fg-img{max-height:360px} /* tablet: keep the headline and CTAs above the fold */
.ruo-home .ph-hero{max-height:320px;aspect-ratio:1/.6}
.ruo-home .trust .wrap{grid-template-columns:repeat(2,1fr);row-gap:26px}
.ruo-home .trust-i:nth-child(2n){border-right:0}
.ruo-home .pgrid{grid-template-columns:repeat(3,1fr)}
.ruo-home .bento{grid-template-columns:repeat(2,1fr)}
.ruo-home .coa .wrap{grid-template-columns:1fr;gap:34px}
}
@media (max-width:767px){
:root{--gut:18px;--hdr:64px}
.ruo-home{font-size:15px}
.ruo-home .sec{padding:40px 0}
.ruo-home .hero .wrap{padding-top:22px;padding-bottom:26px;gap:18px}
.ruo-home .hero h1{font-size:clamp(26px,8.2vw,31px);line-height:1.15;margin-bottom:12px}
.ruo-home .hero .eyebrow{font-size:10.5px;margin-bottom:9px}
.ruo-home .hero .lede{font-size:14px;line-height:1.55}
.ruo-home .hero-cta{margin-top:18px;gap:10px;flex-wrap:nowrap}
.ruo-home .hero-cta .btn{flex:1 1 0;height:46px;padding:0 12px;font-size:11px;letter-spacing:.08em}
.ruo-home .ph-hero{max-height:210px;aspect-ratio:auto;height:210px;padding:12px}
.ruo-home .ph-hero .mk{width:64px;height:64px}
.ruo-home .fg-img{max-height:210px}
.ruo-home .trust .wrap{padding-top:26px;padding-bottom:26px;row-gap:22px}
.ruo-home .trust-i{padding:0 10px}
.ruo-home .trust-i svg{width:24px;height:24px;margin-bottom:8px}
.ruo-home .trust-i b{font-size:15px}
.ruo-home .trust-i small{font-size:11.5px}
.ruo-home .filters{gap:6px;margin-bottom:24px;flex-wrap:nowrap;overflow-x:auto;
    justify-content:flex-start;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ruo-home .filters::-webkit-scrollbar{display:none}
.ruo-home .chip{flex:0 0 auto}
.ruo-home .pgrid{grid-template-columns:repeat(2,1fr);gap:12px}
.ruo-home .card h3{font-size:17px}
.ruo-home .price{font-size:18px}
.ruo-home .card-body{padding:12px 10px 14px;gap:6px}
.ruo-home .bento{display:block}
.ruo-home .bcard{aspect-ratio:1/1;position:sticky;margin-bottom:18px;
    box-shadow:0 -14px 34px rgba(0,0,0,.55)}
.ruo-home .bcard:nth-child(1){top:calc(var(--hdr) + 12px)}
.ruo-home .bcard:nth-child(2){top:calc(var(--hdr) + 24px)}
.ruo-home .bcard:nth-child(3){top:calc(var(--hdr) + 36px)}
.ruo-home .bcard:nth-child(4){top:calc(var(--hdr) + 48px)}
.ruo-home .bento-spacer{height:8px}
.ruo-home .coa-docs{grid-template-columns:1fr;gap:12px}
.ruo-home .doc{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center}
.ruo-home .doc-thumb{margin:0;aspect-ratio:1/1.2}
.ruo-home .nform{flex-direction:column}
.ruo-home .nform .btn{width:100%}
.ruo-home .fcol-contact{grid-column:1 / -1}
.ruo-home .gate-box{padding:28px 20px}
.ruo-home .gate-box h2{font-size:25px}
}

/* WooCommerce price markup on the cards.
   get_price_html() appends a screen-reader-only span for variable products
   ("Price range: X through Y"). It must stay in the markup for assistive
   tech and stay out of sight for everyone else. */
.ruo-home .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.ruo-home .price{display:block;line-height:1.25}
.ruo-home .price del{font-family:var(--sans);font-size:.62em;color:rgba(241,237,228,.4);
  margin-right:6px;text-decoration:line-through}
.ruo-home .price ins{text-decoration:none;background:none;color:inherit}
.ruo-home .price .woocommerce-Price-currencySymbol{font-size:.78em;vertical-align:baseline}

/* Equal-height cards: reserve two lines for the title; a longer product name
   shows in full rather than being clipped. Matches the theme's shop cards. */
.ruo-home .pgrid > .card{height:100%}
.ruo-home .card h3{min-height:calc(2 * 1.25em);line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.ruo-home .card .dose{max-width:100%;overflow-wrap:break-word}
@media (max-width:399px){.ruo-home .card .dose{letter-spacing:.06em}}

/* ---------- hero search placement ---------- */
/* The wrapper takes its width from its widest child - the button row - so the
   field ends level with the COA Library button instead of running past it. */
.ruo-home .hero-actions{display:inline-flex;flex-direction:column;align-items:stretch;max-width:100%}
.ruo-home .hero-actions .ruo-search{width:100%}
/* The hero clips its overflow; the script lifts that only while the panel is open. */
.ruo-home .hero.ruo-open{overflow:visible;z-index:6}
@media (max-width:767px){
  .ruo-home .hero-actions{display:flex;width:100%}
}


/* ============ live-site delta ============ */

/* Supporting line under a section heading. */
.ruo-home .sec-sub{margin:14px auto 0;max-width:520px;font-size:14px;color:var(--cream-dim)}

/* --- Testing & verification: two pathways, not a sample certificate --- */
.ruo-home .vsec{padding:56px 0;border-top:1px solid var(--line-soft)}
.ruo-home .vpaths{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.ruo-home .vpath{padding:30px 30px 26px;border:1px solid var(--line-soft);border-radius:4px;
 background:var(--ink-2);display:flex;flex-direction:column;transition:border-color .24s}
.ruo-home .vpath:hover{border-color:var(--line)}
.ruo-home .vpath-1{background:linear-gradient(180deg,rgba(230,184,109,.05),rgba(230,184,109,0));
 border-color:var(--line)}
.ruo-home .vpath h3{font-size:21px;margin:0}
.ruo-home .vpath p{margin:10px 0 22px;font-size:14px;color:var(--cream-dim);flex:1}
.ruo-home .vlink{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
 font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);
 transition:color .2s,gap .2s}
.ruo-home .vlink:hover{color:var(--gold);gap:12px}
.ruo-home .vlink-primary{color:var(--gold)}

/* --- Research Use Only: a statement, not a warning box ---
   On the site's own ground, not a light card. The heading uses the display
   serif every other section heading uses, so it reads as part of the page
   rather than as a notice pasted onto it. */
.ruo-home .ruo{background:rgba(230,184,109,.04);border:1px solid var(--line);
 border-radius:4px;padding:22px 30px;text-align:center}
.ruo-home .ruo b{display:block;font-family:var(--serif);font-size:22px;line-height:1.3;
 font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--gold)}
.ruo-home .ruo p{margin:10px auto 0;max-width:560px;font-size:13px;line-height:1.6;
 color:var(--cream-dim)}

/* --- Stay informed: the newsletter capture -------------------------------
   Single owner for this section as of 2026-09-19. It previously had five
   competing layers: an earlier duplicate block in this file, two sandbox
   spacing overrides in aurelia/layout.php (homepage-flow and footer-refine)
   and two patches in the Customizer Additional CSS, all marked !important.
   Those were removed and folded in here, so the rules below are the whole of
   it and ordinary specificity is enough.

   The band is contained to 1100px rather than the 1280px page grid: at full
   width the copy and the field sat at opposite edges with a void between
   them. .wrap keeps its own --gut padding, so the inset still matches every
   other section once the screen is narrower than the cap. */
.ruo-home .news{background:transparent;border-top:0;padding:8px 0 32px;
 scroll-margin-top:calc(var(--hdr) + 16px)}
/* The hairline runs on the page grid rather than on the contained band, so it
   lines up with the cards above instead of floating inside them. --wrap is
   still 1280px out here; the band below narrows it to 1156px for itself. */
.ruo-home .news::before{content:"";display:block;height:1px;margin:0 auto 44px;
 width:calc(100% - 2 * var(--gut));max-width:calc(var(--wrap) - 2 * var(--gut));
 background:var(--line-soft)}
.ruo-home .news .wrap{--wrap:1156px;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:center;
 padding:0 var(--gut)}
.ruo-home .news-copy{min-width:0}
.ruo-home .news .eyebrow{margin:0 0 12px}
.ruo-home .news h2{font-family:var(--serif);font-size:clamp(26px,2.8vw,34px);
 line-height:1.2;font-weight:400;letter-spacing:.01em;text-transform:none;
 color:var(--cream);margin:0}
/* :not(.eyebrow) because the eyebrow is a <p> too, and a bare .news-copy p
   outranks .ruo-home .eyebrow and would repaint it in the body scale. */
.ruo-home .news-copy p:not(.eyebrow){max-width:44ch;margin:10px 0 0;font-size:14px;
 line-height:1.6;color:var(--cream-dim)}
/* row-gap is 0 and the rows below carry their own margins: a grid row-gap
   would still be charged for the empty status paragraph, growing the band by
   10px the moment the script appends it. */
.ruo-home .nform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;
 align-items:start}
.ruo-home .nform input[type=email]{min-width:0;width:100%;height:52px;
 padding:0 16px;font-size:14px;font-weight:300;color:var(--cream);background:rgba(241,237,228,.04);
 border:1px solid var(--line-soft);border-radius:var(--aru-control-radius,12px)}
.ruo-home .nform input::placeholder{color:rgba(241,237,228,.42)}
.ruo-home .nform input:focus{outline:none;border-color:var(--gold);
 background:rgba(241,237,228,.06)}
.ruo-home .nform input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ruo-home .nform .btn{white-space:nowrap}
/* The consent line and the polite status message are appended into .nform by
   the newsletter module in novamira-sandbox/aurelia/comms.php. Both are <p>,
   so they need their own scale rather than the copy column type scale. */
.ruo-home .news .rs-news-meta{grid-column:1/-1;margin:12px 0 0;font-size:11px;
 line-height:1.6;color:rgba(241,237,228,.52)}
.ruo-home .news .rs-news-meta a{color:rgba(241,237,228,.62);
 text-decoration:underline;text-underline-offset:3px;transition:color .18s}
.ruo-home .news .rs-news-meta a:hover{color:var(--gold)}
.ruo-home .news .rs-news-status{grid-column:1/-1;margin:8px 0 0;font-size:12px;
 line-height:1.5;color:var(--cream-dim)}
.ruo-home .news .rs-news-status:empty{margin:0}
.ruo-home .news .rs-news-status.is-error{color:#E1A098}
/* Invalid field: the contact form's and checkout's invalid treatment. */
.ruo-home .news .nform input[aria-invalid="true"],
.ruo-home .news .nform input[aria-invalid="true"]:focus{border-color:#E5685C;box-shadow:0 0 0 2px rgba(229,104,92,.14)}
.ruo-home .news .nform input[aria-invalid="true"]:focus-visible{outline-color:#E5685C}

/* --- section rhythm: tighter where people buy, looser where they read --- */
.ruo-home #products.sec{padding:56px 0 44px}

@media (max-width:1023px){
 .ruo-home .vpaths{grid-template-columns:1fr;gap:14px}
 .ruo-home .vsec{padding:44px 0}
 .ruo-home .news::before{margin-bottom:36px}
 .ruo-home .news .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
 .ruo-home .news-copy p:not(.eyebrow){max-width:54ch}
}

@media (max-width:767px){
 .ruo-home #products.sec{padding:36px 0 32px}
 .ruo-home .sec-sub{font-size:13.5px}
 /* Two cards in view and a sliver of the third, which is what tells a
    thumb there is more to the right. No arrows, no dots. */
 /* position:relative is load-bearing. WooCommerce adds a visually-hidden
    "Price range: X through Y" span per variable product, positioned absolute
    with left:auto - so it resolves to its static position, which out here is
    hundreds of pixels along the scrolled row. With no positioned ancestor it
    anchored to the page instead and dragged the document's width out with it,
    letting the whole page pan sideways into empty space. Making the rail the
    containing block keeps those spans inside it. */
 .ruo-home .pgrid{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain}
 .ruo-home .pgrid::-webkit-scrollbar{display:none}
 .ruo-home .pgrid > .card{flex:0 0 46%;scroll-snap-align:start}
 .ruo-home .vsec{padding:36px 0}
 .ruo-home .vpath{padding:22px 20px 20px}
 .ruo-home .vpath h3{font-size:19px}
 .ruo-home .ruo{padding:18px 20px}
 /* On a phone the notice reads as two lines, so the em dash that joined
    them is dropped rather than left dangling at a line end. */
 .ruo-home .ruo .ruo-sep{display:none}
 .ruo-home .ruo .ruo-line2{display:block}
 .ruo-home .news{padding:4px 0 24px}
 .ruo-home .news::before{margin-bottom:30px}
 .ruo-home .news .wrap{gap:22px}
 .ruo-home .nform{grid-template-columns:minmax(0,1fr)}
 /* iOS zooms the page when a focused field is under 16px, the same reason the
    quantity stepper is held at 16px on a phone. */
 .ruo-home .nform input[type=email]{font-size:16px}
 .ruo-home .nform .btn{width:100%;margin-top:12px}
 .ruo-home .news .rs-news-meta{margin-top:16px}
}

/* ---------- US / UK markets section ---------- */
.ruo-home .ruo-markets .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,4.4vw,72px);align-items:center}
.ruo-home .ruo-markets .mk-copy p{color:var(--cream-dim);line-height:1.72;margin:0 0 15px;max-width:52ch}
.ruo-home .ruo-markets .mk-copy p:last-child{margin-bottom:0}
.ruo-home .ruo-markets .mk-copy p b{color:var(--cream);font-weight:600}
.ruo-home .ruo-markets .mk-accent{color:var(--gold-deep)}
.ruo-home .ruo-markets .mk-card{background:linear-gradient(175deg,rgba(241,237,228,.045),transparent 52%),var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:28px 26px 24px;box-shadow:0 18px 44px rgba(0,0,0,.34)}
.ruo-home .ruo-markets .mk-card-lbl{margin:0 0 20px;text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);font-weight:500}
.ruo-home .ruo-markets .mk-grid{display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch}
.ruo-home .ruo-markets .mk-split{background:var(--line)}
.ruo-home .ruo-markets .mk-body{display:contents}
.ruo-home .ruo-markets .mk-opt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:6px 12px 10px;text-decoration:none;color:inherit;border-radius:10px;transition:background .18s}
.ruo-home .ruo-markets a.mk-opt:hover,.ruo-home .ruo-markets a.mk-opt:focus-visible{background:rgba(230,184,109,.07)}
.ruo-home .ruo-markets .mk-flag{width:30px;height:21px;display:block;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(241,237,228,.18)}
.ruo-home .ruo-markets .mk-flag svg{display:block;width:100%;height:100%}
.ruo-home .ruo-markets .mk-name{font-size:14px;font-weight:600;color:var(--cream);line-height:1.2}
.ruo-home .ruo-markets .mk-meta{font-size:11.5px;color:var(--cream-dim);line-height:1.5}
.ruo-home .ruo-markets .mk-state{margin-top:3px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;min-height:14px;display:block}
.ruo-home .ruo-markets .is-on{background:rgba(230,184,109,.055)}
.ruo-home .ruo-markets .is-on .mk-state{color:var(--cream-dim);font-weight:500}
.ruo-home .ruo-markets .is-on .mk-state::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:middle;position:relative;top:-1px}
.ruo-home .ruo-markets .mk-opt:not(.is-on) .mk-state{color:var(--gold)}
.ruo-home .ruo-markets .mk-rule{height:1px;background:var(--line);margin:20px 0 16px}
.ruo-home .ruo-markets .mk-foot{margin:0;text-align:center;font-size:12px;line-height:1.6;color:var(--cream-dim)}
@media (max-width:1023px){
.ruo-home .ruo-markets .wrap{grid-template-columns:1fr;gap:26px}
.ruo-home .ruo-markets .mk-copy p{max-width:none}
.ruo-home .ruo-markets .mk-card{max-width:520px;margin:0 auto;width:100%}
}
/*
 * Phones: the card is the whole control here — the two stores stay side by
 * side and everything is tightened so the section clears 80vh on a 390x844
 * and a 360x780 viewport. Stacking them was tried and made the section taller
 * than a screen.
 */
@media (max-width:767px){
.ruo-home .ruo-markets{padding:34px 0}
.ruo-home .ruo-markets .wrap{gap:20px}
.ruo-home .ruo-markets h2{margin-bottom:14px}
.ruo-home .ruo-markets .mk-copy p{line-height:1.6;margin:0 0 11px;font-size:14.5px}
.ruo-home .ruo-markets .mk-card{padding:18px 12px 16px}
.ruo-home .ruo-markets .mk-card-lbl{margin:0 0 14px}
.ruo-home .ruo-markets .mk-opt{gap:5px;padding:4px 7px 8px}
.ruo-home .ruo-markets .mk-flag{width:26px;height:18px}
.ruo-home .ruo-markets .mk-name{font-size:13px}
.ruo-home .ruo-markets .mk-meta{font-size:10.5px;line-height:1.45}
.ruo-home .ruo-markets .mk-state{font-size:9px;letter-spacing:.1em;margin-top:2px}
.ruo-home .ruo-markets .mk-rule{margin:14px 0 11px}
.ruo-home .ruo-markets .mk-foot{font-size:11px;line-height:1.5}
}
@media (max-width:399px){
.ruo-home .ruo-markets{padding:28px 0}
.ruo-home .ruo-markets .wrap{gap:16px}
.ruo-home .ruo-markets h2{font-size:26px;margin-bottom:11px}
.ruo-home .ruo-markets .mk-copy p{font-size:13.5px;line-height:1.55;margin:0 0 8px}
.ruo-home .ruo-markets .mk-card{padding:14px 9px 13px}
.ruo-home .ruo-markets .mk-card-lbl{margin:0 0 11px}
.ruo-home .ruo-markets .mk-opt{padding:4px 5px 7px;gap:4px}
.ruo-home .ruo-markets .mk-name{font-size:12.5px}
.ruo-home .ruo-markets .mk-meta{font-size:10px;line-height:1.4}
.ruo-home .ruo-markets .mk-rule{margin:11px 0 9px}
.ruo-home .ruo-markets .mk-foot{font-size:10.5px}
}