/* ==========================================================================
   theme_1 — "Arogya" (prestige herbal care, Herba-inspired editorial layout)
   Jainath Organic storefront theme. Fully self-hosted & CSP-safe:
   local WOFF2 fonts, no remote images in CSS, no inline styles.
   Author: storefront theme build (Sprint — theme_1)
   ========================================================================== */

/* ---- Fonts (self-hosted latin subsets; CSP: no Google Fonts) ---- */
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  --clay:      #f6f3ea;
  --cream:     #f8f5ec;
  --cream-2:   #efe9d8;
  --paper:     #ffffff;
  --forest:    #0d2f24;
  --forest-2:  #14382c;
  --forest-3:  #1b4335;
  --leaf:      #2f8059;
  --leaf-soft: #e3ece1;
  --gold:      #c9a15a;
  --gold-2:    #e3c78d;
  --ink:       #17261e;
  --muted:     #65756b;
  --line:      rgba(13, 47, 36, .12);
  --line-soft: rgba(255, 255, 255, .16);
  --radius:    20px;
  --radius-sm: 13px;
  --shadow:    0 22px 50px -26px rgba(13, 47, 36, .35);
  --grain-soft: #257c55;
  --fh: 'Inter Tight', 'Manrope', system-ui, sans-serif;
  --fb: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1180px;
}

/* ==========================================================================
   1. Theme chrome (GLOBAL — every page wearing theme_1 renders these)
   Custom site-header + site-footer the theme always ships. The shared storefront
   shell loads arogya.css on every themed page and renders the theme's own
   header.php/footer.php partials, so the chrome below is identical everywhere:
   desktop main-nav, mobile hamburger menu, gold/forest identity, footer-grid.
   ========================================================================== */
body[data-theme="theme_1"]{
  font-family: var(--fb);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-theme="theme_1"] h1,
body[data-theme="theme_1"] h2,
body[data-theme="theme_1"] h3,
body[data-theme="theme_1"] h4,
body[data-theme="theme_1"] h5,
body[data-theme="theme_1"] h6{ font-family: var(--fh); }
body[data-theme="theme_1"] .aro-container{ width: min(var(--container), 100% - 40px); margin-inline: auto; }

.aro-skip{
  position: absolute; top: -80px; left: 12px; z-index: 1400;
  padding: 10px 16px; border-radius: 999px;
  background: var(--gold); color: #1c1a10; font-family: var(--fh); font-size: .85rem; font-weight: 700;
  transition: top .2s ease;
}
.aro-skip:focus{ top: 12px; }

/* ---- Global chrome buttons (theme header / mobile-menu / footer CTAs live OUTSIDE
       .aro-home so these rotate unscoped on every themed page) ---- */
.btn{
  --btn-bg: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ --btn-bg: var(--gold); color: #1c1a10; box-shadow: 0 16px 30px -16px rgba(201,161,90,.6); }
.btn-gold:hover{ --btn-bg: var(--gold-2); }
.btn-ghost{ --btn-bg: transparent; color: #fff; border-color: var(--line-soft); }
.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); }
.btn-arr::after{
  content: "";
  width: 16px; height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e3c78d" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
  transition: transform .25s ease;
}
.btn-arr:hover::after{ transform: translateX(4px); }

.site-header{
  position: sticky; top: 0;
  z-index: 1200;
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-2) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -24px rgba(7, 25, 18, .6);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow: 0 18px 40px -20px rgba(7, 25, 18, .72); }
.site-header .top-strip{ background: rgba(7, 25, 18, .35); }
.site-header .strip-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 9px;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.site-header .strip-note{ display: inline-flex; align-items: center; gap: 8px; }
.site-header .strip-note svg{ color: var(--gold-2); flex: 0 0 auto; }
.site-header .strip-meta{ display: inline-flex; align-items: center; gap: 14px; }
.site-header .strip-meta a{ color: rgba(255, 255, 255, .78); transition: color .2s ease; }
.site-header .strip-meta a:hover{ color: var(--gold-2); }

.site-header .header-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding-block: 18px;
}
.site-header .brand{
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; flex: 0 0 auto;
}
.site-header .brand-mark{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold), var(--gold-2));
  color: var(--forest);
  box-shadow: 0 8px 18px -8px rgba(201, 161, 90, .75);
}
.site-header .brand-text{
  font-family: var(--fh); font-weight: 800; font-size: 1.2rem; letter-spacing: -.015em;
  line-height: 1.1;
}
.site-header .brand-text small{
  display: block;
  font-family: var(--fb); font-weight: 600; font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-2); margin-top: 2px;
}

.site-header .main-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-header .main-nav a{
  position: relative;
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--fh); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  color: rgba(255, 255, 255, .86);
  transition: color .2s ease, background .2s ease;
}
.site-header .main-nav a::after{
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 5px;
  height: 2px; border-radius: 2px; background: var(--gold-2);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-header .main-nav a:hover, .site-header .main-nav a:focus-visible{ color: var(--gold-2); background: rgba(227, 199, 141, .1); }
.site-header .main-nav a.is-active{ color: var(--gold-2); }
.site-header .main-nav a.is-active::after{ transform: scaleX(1); }

.site-header .header-actions{ display: flex; align-items: center; gap: 10px; }
.site-header .header-actions .btn{ padding: 13px 22px; font-size: .86rem; }
.site-header .header-actions .d-none-cta{ display: inline-flex; }
.site-header .icon-btn{
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.site-header .icon-btn:hover{ background: rgba(227, 199, 141, .16); color: var(--gold-2); border-color: rgba(227, 199, 141, .4); transform: translateY(-1px); }
.site-header .cart-count{
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold); color: #1c1a10;
  font-family: var(--fh); font-weight: 800; font-size: .66rem; line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5);
}
.site-header .nav-toggle{
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  cursor: pointer; padding: 0;
}
.site-header .nav-toggle span{
  width: 19px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .28s ease, opacity .2s ease;
}
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.site-header .mobile-menu{
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.site-header .mobile-menu.open{ max-height: 520px; }
.site-header .mobile-menu ul{ list-style: none; margin: 0; padding: 4px 0 14px; display: grid; gap: 2px; }
.site-header .mobile-menu a{
  display: block; padding: 13px 6px;
  font-family: var(--fh); font-weight: 600; font-size: 1rem;
  color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.site-header .mobile-menu a:hover, .site-header .mobile-menu a.is-active{ color: var(--gold-2); }
.site-header .mobile-menu-cta{ display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 18px; }
.site-header .mobile-menu-cta .btn{ flex: 1 1 150px; }

/* ---- Footer chrome ---- */
.site-footer{
  background: linear-gradient(180deg, #0a241b 0%, var(--forest) 100%);
  color: rgba(255, 255, 255, .74);
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 60px;
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-block: 64px 52px;
}
.site-footer .footer-about .brand{
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
}
.site-footer .footer-about .brand-mark{
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold), var(--gold-2));
  color: var(--forest);
}
.site-footer .footer-about .brand-text{
  font-family: var(--fh); font-weight: 800; font-size: 1.1rem; letter-spacing: -.015em; line-height: 1.1;
}
.site-footer .footer-about .brand-text small{
  display: block; font-family: var(--fb); font-weight: 600; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-2); margin-top: 2px;
}
.site-footer .footer-about p{
  margin: 18px 0 22px; max-width: 34ch; font-size: .92rem; line-height: 1.7; color: rgba(255, 255, 255, .66);
}
.site-footer .social-row{ display: flex; gap: 10px; }
.site-footer .social-row a{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--gold-2);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-footer .social-row a:hover{ background: var(--gold); color: var(--forest); transform: translateY(-2px); }
.site-footer .footer-col h4{
  font-family: var(--fh); font-weight: 700; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 20px;
}
.site-footer .footer-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.site-footer .footer-col a{ color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .94rem; transition: color .2s ease, padding-left .2s ease; }
.site-footer .footer-col a:hover{ color: var(--gold-2); padding-left: 3px; }
.site-footer .contact-item li{
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .92rem; color: rgba(255, 255, 255, .74); line-height: 1.5;
}
.site-footer .contact-item svg{ flex: 0 0 auto; color: var(--gold-2); margin-top: 2px; }
.site-footer .contact-item a{ color: inherit; }
.site-footer .footer-bottom{
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .84rem; color: rgba(255, 255, 255, .5);
}
.site-footer .footer-bottom .nc-attribution{
  color: rgba(255, 255, 255, .34); text-decoration: none; font-weight: 600;
  transition: color .2s ease;
}
.site-footer .footer-bottom .nc-attribution:hover{ color: var(--gold-2); }
.site-footer .footer-bottom .footer-policy{
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, .34); font-weight: 600;
}
.site-footer .footer-bottom .footer-policy a{
  color: rgba(255, 255, 255, .6); text-decoration: none;
  transition: color .2s ease;
}
.site-footer .footer-bottom .footer-policy a:hover{ color: var(--gold-2); }
.site-footer .footer-bottom .footer-policy span{ color: rgba(255, 255, 255, .22); }

/* ---- Base (homepage content only; scoped so it never leaks into other pages) ---- */
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.aro-home{ font-family: var(--fb); font-size: 16px; line-height: 1.65; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.aro-home img{ max-width: 100%; display: block; }
.aro-home a{ color: inherit; text-decoration: none; }
.aro-home button{ font-family: inherit; cursor: pointer; }
.aro-home ul{ list-style: none; margin: 0; padding: 0; }
.aro-home h1, .aro-home h2, .aro-home h3, .aro-home h4{ font-family: var(--fh); line-height: 1.12; margin: 0; font-weight: 700; }
.aro-home p{ margin: 0 0 1rem; }
.aro-home :focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.aro-home ::selection{ background: var(--gold); color: #fff; }

.aro-home .aro-container{ width: min(var(--container), 100% - 40px); margin-inline: auto; }
.aro-home .section-pad{ padding-block: clamp(64px, 9vw, 104px); }
.aro-home .sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.aro-home .aro-skip{
  position: absolute; top: -80px; left: 12px; z-index: 1300;
  padding: 10px 16px; border-radius: 999px;
  background: var(--forest); color: #fff; font-family: var(--fh); font-size: .85rem; font-weight: 700;
  transition: top .2s ease;
}
.aro-home .aro-skip:focus{ top: 12px; }
.aro-home .center{ text-align: center; }
.aro-home .center-self{ justify-content: center; }
.aro-home .mt-md{ margin-top: 18px; }
.aro-home .d-none-cta{ display: inline-flex; }
.aro-home .orb-placeholder, .aro-home .img-ph{ display: grid; place-items: center; height: 100%; width: 100%; }
.aro-home .orb-placeholder{ font-size: 4rem; color: var(--gold-2); }
.aro-home .img-ph{ font-size: 5rem; color: var(--leaf); }

.aro-home .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fh);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--leaf);
}
.aro-home .eyebrow::before{ content: ""; width: 26px; height: 2px; background: var(--gold); }
.aro-home .eyebrow.on-dark{ color: var(--gold-2); }

.aro-home .section-head{ margin-bottom: 40px; }
.aro-home .section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.02em; margin-top: 10px; }
.aro-home .section-head p{ color: var(--muted); max-width: 560px; margin: 14px 0 0; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.aro-home .btn{
  --btn-bg: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--btn-bg);
  color: #fff;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
  line-height: 1;
  white-space: nowrap;
}
.aro-home .btn:hover{ transform: translateY(-2px); }
.aro-home .btn-dark{ box-shadow: 0 16px 30px -18px rgba(13,47,36,.55); }
.aro-home .btn-dark:hover{ background: var(--forest-3); }
.aro-home .btn-arr::after{
  content: "";
  width: 16px; height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e3c78d" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
  transition: transform .25s ease;
}
.aro-home .btn-arr:hover::after{ transform: translateX(4px); }
.aro-home .btn-gold{ --btn-bg: var(--gold); color: #1c1a10; box-shadow: 0 16px 30px -16px rgba(201,161,90,.6); }
.aro-home .btn-gold:hover{ --btn-bg: var(--gold-2); }
.aro-home .btn-ghost{ --btn-bg: transparent; color: #fff; border-color: var(--line-soft); }
.aro-home .btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); }
.aro-home .btn-ghost.on-light{ color: var(--forest); border-color: var(--line); }
.aro-home .btn-ghost.on-light:hover{ background: var(--leaf-soft); }
.aro-home .btn-lg{ padding: 18px 34px; font-size: 1rem; }

/* ==========================================================================
   3. Hero
   ========================================================================== */
.aro-home .hero{
  position: relative;
  padding: clamp(96px, 12vw, 124px) 0 clamp(118px, 15vw, 150px);
  color: #fff;
  background:
    radial-gradient(900px 640px at 78% 8%, rgba(47,128,89,.42), transparent 62%),
    radial-gradient(700px 560px at 4% 92%, rgba(201,161,90,.20), transparent 60%),
    linear-gradient(160deg, #0d2f24 0%, #14382c 55%, #0b2a21 100%);
  overflow: hidden;
}
.aro-home .hero::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}
.aro-home .hero-grid{ position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 60px); align-items: center; }
.aro-home .hero h1{
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  margin: 20px 0 22px;
}
.aro-home .hero h1 em{ font-style: italic; font-weight: 600; color: var(--gold-2); }
.aro-home .hero-sub{ max-width: 500px; font-size: clamp(1rem, 1.7vw, 1.08rem); color: rgba(255,255,255,.78); margin-bottom: 30px; }
.aro-home .hero-cta{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.aro-home .hero-trust{ display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.8); font-size: .86rem; }
.aro-home .avatar-row{ display: flex; }
.aro-home .avatar-row span{
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--forest);
  display: grid; place-items: center;
  font-family: var(--fh); font-weight: 800; font-size: .72rem; color: #fff;
  background: linear-gradient(145deg, var(--leaf), var(--forest-3));
  margin-left: -8px;
}
.aro-home .avatar-row span:first-child{ margin-left: 0; }
.aro-home .stars{ color: var(--gold-2); letter-spacing: 2px; font-size: .82rem; }
.aro-home .hero-trust strong{ color: #fff; }

.aro-home .hero-media{ position: relative; display: grid; place-items: center; }
.aro-home .hero-orb{
  position: relative;
  width: min(430px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.16), transparent 46%),
    linear-gradient(150deg, var(--leaf), #1c5b40 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 90px -40px rgba(0,0,0,.65);
  overflow: hidden;
  will-change: transform;
}
.aro-home .hero-orb img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .9; }
.aro-home .hero-orb::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, transparent 42%, rgba(13,47,36,.45) 100%);
}
.aro-home .hero-ring{
  position: absolute; inset: -34px;
  border: 1.5px dashed rgba(227,199,141,.5);
  border-radius: 50%;
  animation: spin 44s linear infinite;
  pointer-events: none;
}
.aro-home .hero-ring::before{
  content: "✿"; position: absolute; top: 20px; left: 20%;
  color: var(--gold-2); font-size: 1.1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.aro-home .float-chip{
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  font-family: var(--fh); font-weight: 600; font-size: .82rem;
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.6);
  animation: floaty 5.5s ease-in-out infinite;
}
.aro-home .float-chip b{ display: block; font-size: 1rem; font-weight: 800; color: var(--gold-2); line-height: 1.05; }
.aro-home .float-chip small{ font-weight: 600; color: rgba(255,255,255,.75); }
.aro-home .float-chip svg{ flex: 0 0 20px; }
.aro-home .chip-a{ top: 6%; left: -2%; }
.aro-home .chip-b{ bottom: 12%; right: -4%; animation-delay: -2.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.aro-home .hero-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.aro-home .hero-chip{
  font-family: var(--fh); font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-2);
  border: 1px solid rgba(227,199,141,.38);
  background: rgba(227,199,141,.08);
  border-radius: 999px;
  padding: 7px 13px;
  display: inline-flex; align-items: center; gap: 7px;
}
.aro-home .hero-chip::before{ content: "✓"; font-size: .68rem; }

/* ==========================================================================
   5. Marquee
   ========================================================================== */
.aro-home .marquee{ background: var(--forest); border-block: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 18px 0; }
.aro-home .marquee-track{ display: flex; gap: 0; width: max-content; animation: scrollx 30s linear infinite; }
.aro-home .marquee:hover .marquee-track{ animation-play-state: paused; }
.aro-home .marquee span{
  display: inline-flex; align-items: center; gap: 34px;
  font-family: var(--fh); font-weight: 600; font-size: .86rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.66);
  padding-right: 34px;
}
.aro-home .marquee span::after{ content: "✦"; color: var(--gold); font-size: .7rem; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ==========================================================================
   6. Feature cards
   ========================================================================== */
.aro-home .features{ background: var(--clay); }
.aro-home .features-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aro-home .feature-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.aro-home .feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.aro-home .feature-ico{
  flex: 0 0 52px; width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--leaf-soft); color: var(--leaf);
}
.aro-home .feature-card h3{ font-size: 1.06rem; margin-bottom: 6px; }
.aro-home .feature-card p{ margin: 0; font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   7. Shop / products
   ========================================================================== */
.aro-home .shop{ background: var(--cream); }
.aro-home .head-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.aro-home .head-row .section-head{ margin-bottom: 0; }
.aro-home .text-link{ font-family: var(--fh); font-weight: 700; font-size: .9rem; color: var(--leaf); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.aro-home .text-link::after{ content: "→"; transition: transform .2s ease; }
.aro-home .text-link:hover::after{ transform: translateX(4px); }

.aro-home .product-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.aro-home .product-card{
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .28s ease, box-shadow .28s ease;
  display: flex; flex-direction: column;
}
.aro-home .product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.aro-home .product-thumb{ position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--leaf-soft); }
.aro-home .product-thumb img{ width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .6s ease; }
.aro-home .product-card:hover .product-thumb img{ transform: scale(1.06); }
.aro-home .product-badges{ position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.aro-home .badge-chip{
  font-family: var(--fh); font-weight: 700; font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  background: var(--forest); color: var(--gold-2);
}
.aro-home .product-body{ padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.aro-home .prod-cat{ font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.aro-home .product-name{ font-size: 1.04rem; font-weight: 700; line-height: 1.3; }
.aro-home .rating{ display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.aro-home .rating .stars{ color: var(--gold); font-size: .74rem; letter-spacing: 1px; }
.aro-home .price-row{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.aro-home .price{ font-family: var(--fh); font-weight: 800; font-size: 1.32rem; color: var(--forest); }
.aro-home .price-del{ font-size: .9rem; color: var(--muted); text-decoration: line-through; }
.aro-home .buy{
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--fh); font-weight: 700; font-size: .82rem;
  color: var(--leaf); display: inline-flex; align-items: center; gap: 6px;
}
.aro-home .buy::after{ content: "→"; transition: transform .2s ease; }
.aro-home .buy:hover::after{ transform: translateX(4px); }
.aro-home .empty-note{ text-align: center; color: var(--muted); padding: 60px 20px; background: var(--leaf-soft); border-radius: var(--radius); }

/* 7b. Picked for You (recommendations band between Categories and Story) */
.aro-home .picks{ background: linear-gradient(180deg, var(--leaf-soft) 0%, #eef3ec 100%); }
.aro-home .picks .product-card{ background: var(--paper); }
.aro-home .picks .eyebrow{ color: var(--leaf); }

/* ==========================================================================
   8. Categories
   ========================================================================== */
.aro-home .categories{ background: var(--cream); }
.aro-home .cat-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.aro-home .cat-card{
  position: relative;
  border-radius: var(--radius);
  padding: 26px 22px;
  min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .28s ease;
}
.aro-home .cat-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.aro-home .cat-card.tint-green{ --tint: #2f8059; }
.aro-home .cat-card.tint-terra{ --tint: #b9643c; }
.aro-home .cat-card.tint-sand{ --tint: #c9a15a; }
.aro-home .cat-card.tint-blue{ --tint: #3d6b93; }
.aro-home .cat-card{
  background: var(--tint);
  background:
    radial-gradient(320px 200px at 120% -20%, color-mix(in srgb, var(--tint) 60%, transparent), transparent 70%),
    linear-gradient(160deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 68%, #0d2f24) 100%);
  color: #fff;
}
.aro-home .cat-card::after{
  content: attr(data-initial);
  position: absolute; top: 18px; right: 16px;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  font-family: var(--fh); font-weight: 800; font-size: 1.35rem;
}
.aro-home .cat-card .cat-name{ font-family: var(--fh); font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em; }
.aro-home .cat-card p{ margin: 0; font-size: .84rem; color: rgba(255,255,255,.8); }
.aro-home .cat-card .cat-go{ margin-top: 6px; font-family: var(--fh); font-weight: 700; font-size: .78rem; color: var(--gold-2); }

/* ==========================================================================
   9. Story / about
   ========================================================================== */
.aro-home .story{ background: var(--paper); }
.aro-home .story-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.aro-home .story-media{ position: relative; }
.aro-home .story-img{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/4.5;
}
.aro-home .story-img img{ width: 100%; height: 100%; object-fit: cover; }
.aro-home .story-emoji-tag{
  position: absolute; right: -18px; bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  background: var(--forest); color: #fff;
  padding: 16px 22px; border-radius: 18px;
  box-shadow: 0 26px 50px -24px rgba(13,47,36,.6);
}
.aro-home .story-emoji-tag b{ font-family: var(--fh); font-size: 1.15rem; font-weight: 800; display: block; line-height: 1.1; }
.aro-home .story-emoji-tag small{ color: rgba(255,255,255,.7); font-size: .76rem; }
.aro-home .story-emoji-tag .big{ font-size: 2rem; }
.aro-home .checklist{ display: grid; gap: 10px; margin: 22px 0 30px; }
.aro-home .checklist li{ display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--ink); }
.aro-home .checklist svg{ flex: 0 0 auto; color: var(--leaf); margin-top: 3px; }
.aro-home .stats-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 26px; }
.aro-home .stat b{ font-family: var(--fh); font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; color: var(--forest); }
.aro-home .stat small{ display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.aro-home .stat .suffix{ color: var(--gold); }

/* ==========================================================================
   10. How-to / accordion
   ========================================================================== */
.aro-home .howto{ background: var(--forest); color: #fff; position: relative; overflow: hidden; }
.aro-home .howto::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 480px at 100% 0%, rgba(47,128,89,.3), transparent 60%);
  pointer-events: none;
}
.aro-home .howto .aro-container{ position: relative; }
.aro-home .howto .section-head p{ color: rgba(255,255,255,.65); }
.aro-home .howto .section-head h2{ color: #fff; }
.aro-home .faq-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aro-home details.faq{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.aro-home details.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-family: var(--fh); font-weight: 700; font-size: 1rem;
  cursor: pointer; list-style: none;
}
.aro-home details.faq summary::-webkit-details-marker{ display: none; }
.aro-home details.faq summary::after{
  content: "+"; flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(227,199,141,.16); color: var(--gold-2);
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  transition: transform .25s ease, background .25s ease;
}
.aro-home details.faq[open] summary::after{ transform: rotate(45deg); background: var(--gold); color: var(--forest); }
.aro-home details.faq .faq-body{ padding: 0 24px 22px; color: rgba(255,255,255,.72); font-size: .94rem; }
.aro-home details.faq .faq-body p{ margin: 0; }

/* ==========================================================================
   11. Testimonials slider
   ========================================================================== */
.aro-home .testimonials{ background: var(--cream); }
.aro-home .testi-shell{ position: relative; max-width: 900px; margin-inline: auto; }
.aro-home .testi-viewport{ overflow: hidden; border-radius: var(--radius); }
.aro-home .testi-track{ display: flex; transition: transform .55s cubic-bezier(.33,1,.68,1); }
.aro-home .testi-card{
  flex: 0 0 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 40px 40px;
  text-align: center;
}
.aro-home .testi-card .quote-mark{ font-family: Georgia, serif; font-size: 3.4rem; line-height: 0; color: var(--gold); display: block; margin-bottom: 8px; }
.aro-home .testi-card blockquote{ font-family: var(--fh); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; line-height: 1.5; margin: 0 0 26px; letter-spacing: -.01em; }
.aro-home .testi-person{ display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.aro-home .testi-avatar{
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fh); font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(145deg, var(--leaf), var(--forest-3));
}
.aro-home .testi-person b{ display: block; font-family: var(--fh); font-size: .96rem; }
.aro-home .testi-person small{ color: var(--muted); font-size: .8rem; }
.aro-home .testi-person .stars{ color: var(--gold); font-size: .7rem; letter-spacing: 1px; display: block; margin-top: 2px; }
.aro-home .testi-nav{ display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.aro-home .testi-dots{ display: flex; gap: 8px; }
.aro-home .testi-dots button{
  width: 9px; height: 9px; border-radius: 999px; border: 0;
  background: rgba(13,47,36,.22); transition: width .25s ease, background .25s ease; padding: 0;
}
.aro-home .testi-dots button.on{ width: 28px; background: var(--leaf); }
.aro-home .testi-arrow{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper); color: var(--forest);
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.aro-home .testi-arrow:hover{ background: var(--forest); color: #fff; border-color: var(--forest); }

/* ==========================================================================
   12. Newsletter CTA
   ========================================================================== */
.aro-home .cta-band{
  position: relative;
  background: linear-gradient(150deg, #0d2f24 0%, #1b4335 60%, #14402f 100%);
  color: #fff;
  overflow: hidden;
}
.aro-home .cta-band::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(3px 3px at 24px 30px, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  pointer-events: none;
}
.aro-home .cta-inner{ position: relative; text-align: center; max-width: 620px; margin-inline: auto; }
.aro-home .cta-inner h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.02em; margin: 14px 0 12px; }
.aro-home .cta-inner p{ color: rgba(255,255,255,.72); margin-bottom: 30px; }
.aro-home .newsletter-form{ display: flex; gap: 10px; max-width: 460px; margin-inline: auto; }
.aro-home .newsletter-form input[type="email"]{
  flex: 1; min-width: 0;
  padding: 16px 22px;
  border: 1.5px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: var(--fb);
  font-size: .95rem;
  outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.aro-home .newsletter-form input[type="email"]::placeholder{ color: rgba(255,255,255,.5); }
.aro-home .newsletter-form input[type="email"]:focus{ border-color: var(--gold); background: rgba(255,255,255,.12); }
.aro-home #newsletterMsg{ margin-top: 14px; font-size: .9rem; min-height: 1.2em; }
.aro-home #newsletterMsg .text-success{ color: #8fd3a8; }
.aro-home #newsletterMsg .text-danger{ color: #f2a9a0; }
.aro-home #newsletterMsg .text-muted{ color: rgba(255,255,255,.55); }
.aro-home .cta-trust{ display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 28px; color: rgba(255,255,255,.7); font-size: .8rem; }
.aro-home .cta-trust span{ display: inline-flex; align-items: center; gap: 8px; }
.aro-home .cta-trust svg{ color: var(--gold-2); }

/* ==========================================================================
   14. Reveal animation & utility
   ========================================================================== */
.aro-home [data-reveal]{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.6,.36,1); }
.aro-home [data-reveal].in{ opacity: 1; transform: none; }
.aro-home .product-grid [data-reveal]:nth-child(2), .aro-home .feature-card[data-reveal]:nth-child(2), .aro-home .cat-card[data-reveal]:nth-child(2){ transition-delay: .08s; }
.aro-home .product-grid [data-reveal]:nth-child(3), .aro-home .feature-card[data-reveal]:nth-child(3), .aro-home .cat-card[data-reveal]:nth-child(3){ transition-delay: .16s; }
.aro-home .product-grid [data-reveal]:nth-child(4), .aro-home .feature-card[data-reveal]:nth-child(4), .aro-home .cat-card[data-reveal]:nth-child(4){ transition-delay: .24s; }

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
.aro-home .product-grid{ grid-template-columns: repeat(3, 1fr); }
.aro-home .hero-grid{ grid-template-columns: 1fr; gap: 70px; }
.aro-home .hero-media{ order: -1; }
.aro-home .hero-orb{ width: min(400px, 78%); }
.aro-home .float-chip.chip-a{ left: 2%; }
.aro-home .float-chip.chip-b{ right: 2%; }
.aro-home .story-grid{ grid-template-columns: 1fr; gap: 60px; }
.aro-home .stats-row{ grid-template-columns: repeat(3, 1fr); }
.aro-home .features-grid{ grid-template-columns: repeat(2, 1fr); }

/* theme chrome: shrink nav + footer on tablets */
.site-footer .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
.site-header .main-nav a{ padding: 10px 10px; font-size: .86rem; }
.site-header .header-actions .btn{ padding: 12px 18px; }
}
@media (max-width: 860px) {
/* theme chrome: switch to the hamburger + mobile menu */
.site-header .main-nav{ display: none; }
.site-header .nav-toggle{ display: flex; }
.site-header .mobile-menu.open ul{ display: grid; }
.site-header .header-inner{ gap: 12px; }
.site-header .header-actions .btn{ display: none; }
}
@media (max-width: 760px) {
.aro-home .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aro-home .features-grid{ grid-template-columns: 1fr; }
.aro-home .faq-grid{ grid-template-columns: 1fr; }
.aro-home .section-pad{ padding-block: 60px; }
.aro-home .hero{ padding: 100px 0 84px; }
.aro-home .hero h1{ font-size: clamp(2.2rem, 8.5vw, 3rem); }
.aro-home .newsletter-form{ flex-direction: column; }
.aro-home .testi-card{ padding: 36px 22px 30px; }
.aro-home .head-row{ flex-direction: column; align-items: flex-start; gap: 14px; }
.aro-home .cat-grid{ grid-template-columns: repeat(2, 1fr); }

/* theme chrome: single-column footer + slimmer chrome on phones */
.site-footer .footer-grid{ grid-template-columns: 1fr; gap: 34px; }
.site-footer { margin-top: 40px; }
.site-header .header-inner{ padding-block: 14px; }
.site-header .brand-text{ font-size: 1.05rem; }
.site-header .brand-mark{ width: 40px; height: 40px; }
.site-header .strip-meta{ display: none; }
.site-header .strip-inner{ justify-content: center; text-align: center; }
.site-footer .footer-bottom{ justify-content: center; text-align: center; }
.site-footer .footer-about p{ max-width: 100%; }
}
@media (max-width: 480px) {
.aro-home .cat-grid{ grid-template-columns: 1fr; }
.aro-home .float-chip{ padding: 10px 12px; font-size: .74rem; }
}

@media (max-width: 560px) {
.aro-home .d-none-cta{ display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.aro-home [data-reveal]{ opacity: 1; transform: none; }
}