/* ARGANA customer-facing visual system.
   This layer is loaded last on storefront/customer pages so brand colors and Arabic prose alignment stay consistent across routes. */
:root{
  --argana-brand-green:#173f2a;
  --argana-brand-green-2:#24583c;
  --argana-brand-green-soft:#eaf0eb;
  --argana-brand-gold:#b98a2f;
  --argana-brand-cream:#fbf7ef;
  --argana-brand-cream-2:#f4ecde;
  --argana-brand-surface:#fffdf9;
  --argana-brand-ink:#18221b;
  --argana-brand-muted:#68736c;
  --argana-brand-line:#e7dfd0;
  --accent-primary:var(--argana-brand-green);
  --accent-secondary:var(--argana-brand-green-2);
  --accent-soft:var(--argana-brand-green-soft);
  --accent-hover:#102f1f;
  --accent-border:var(--argana-brand-line);
  --accent-focus:var(--argana-brand-gold);
}

/* Keep the default/male storefront on the actual ARGANA green/cream/gold identity.
   Audience-specific female presentation remains intentionally separate. */
html:not([data-audience="female"]){
  --green:var(--argana-brand-green);
  --green-2:var(--argana-brand-green-2);
  --green-3:var(--argana-brand-green-soft);
  --gold:var(--argana-brand-gold);
  --cream:var(--argana-brand-cream);
  --cream-2:var(--argana-brand-cream-2);
  --ink:var(--argana-brand-ink);
  --muted:var(--argana-brand-muted);
  --line:var(--argana-brand-line);
}
html:not([data-audience="female"]) .btn-primary,
html[data-audience="male"] .btn-primary,
html:not([data-audience="female"]) .product-page .btn:not(.btn-secondary),
html:not([data-audience="female"]) .routine-add,
html:not([data-audience="female"]) .support-chat-button,
html:not([data-audience="female"]) .support-chat-head{
  background:var(--argana-brand-green);
  color:#fff;
  border-color:var(--argana-brand-green);
}
html:not([data-audience="female"]) .btn-primary:hover,
html:not([data-audience="female"]) .btn-primary:focus-visible,
html[data-audience="male"] .btn-primary:hover,
html[data-audience="male"] .btn-primary:focus-visible,
html:not([data-audience="female"]) .product-page .btn:not(.btn-secondary):hover,
html:not([data-audience="female"]) .routine-add:hover,
html:not([data-audience="female"]) .routine-add:focus-visible,
html:not([data-audience="female"]) .support-chat-button:hover{
  background:var(--argana-brand-green-2);
  border-color:var(--argana-brand-green-2);
  color:#fff;
}
html:not([data-audience="female"]) .btn-secondary{
  background:var(--argana-brand-surface);
  color:var(--argana-brand-green);
  border-color:var(--argana-brand-line);
}
html:not([data-audience="female"]) .btn-secondary:hover,
html:not([data-audience="female"]) .btn-secondary:focus-visible{
  background:var(--argana-brand-green-soft);
  border-color:#cfdccf;
  color:var(--argana-brand-green);
}
html:not([data-audience="female"]) :where(.product-card,.routine-card,.content-card,.side-card,.account-card,.policy-card,.admin-box,.list-item){
  border-color:var(--argana-brand-line);
}
html:not([data-audience="female"]) :where(.routine-card,.account-card,.policy-card){
  background:var(--argana-brand-surface);
}
html:not([data-audience="female"]) :where(.routine-step,.stock-pill){
  color:var(--argana-brand-green);
}
html:not([data-audience="female"]) .routine-step{background:var(--argana-brand-green-soft)}
html:not([data-audience="female"]) :where(.price,.routine-total strong,.section-head h2,.routine-card h3){color:var(--argana-brand-green)}
html:not([data-audience="female"]) :where(.product-cat,.stars,.eyebrow:before){color:var(--argana-brand-gold)}

/* Arabic body copy: multiline prose is flush on both edges; the final line stays on the RTL start edge.
   Headings, controls, labels, prices and short status/UI text are deliberately outside this rule. */
:where(main,.footer,.modal,.cart-drawer,.support-chat-panel) p:not([role="status"]):not(.empty):not(.routine-status),
:where(main,.modal,.cart-drawer,.support-chat-panel) li{
  text-align:justify;
  text-align-last:right;
  text-justify:inter-word;
}
:where(.hero-copy,.story-copy,.routine-copy,.product-detail,.article,.policy-page,.account-main,.content-card,.side-card) p:not([role="status"]),
:where(.product-detail,.article,.policy-page,.account-main,.content-card,.side-card) li,
.product-desc,
.routines-note{
  text-align:justify;
  text-align-last:right;
  text-justify:inter-word;
}
:where([role="status"],.routine-status,.empty,.tag,.stock-pill,.product-cat,.rating-line,.price,.copyright){
  text-align:right;
  text-align-last:auto;
}
.copyright{text-align:center}

/* Homepage brand story + SEO care guide: render as one continuous brand panel instead of two repeated green blocks. */
#about{padding-bottom:0}
#about .brand-story{
  border-radius:28px 28px 0 0;
  min-height:300px;
}
#about .story-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#seoHomeGuide{
  padding-top:0;
  margin-top:0;
}
#seoHomeGuide .brand-story{
  display:block;
  min-height:0;
  border-radius:0 0 28px 28px;
  border-top:1px solid rgba(255,255,255,.13);
  background:var(--green);
  overflow:hidden;
}
#seoHomeGuide .story-copy{
  padding:28px 44px 38px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:36px;
  row-gap:12px;
}
#seoHomeGuide .story-copy>.eyebrow,
#seoHomeGuide .story-copy>h2{
  grid-column:1/-1;
}
#seoHomeGuide .story-copy>.eyebrow{
  color:#efd99f;
}
#seoHomeGuide .story-copy>h2{
  margin:0 0 2px;
  color:#fff;
  font-size:clamp(24px,2.5vw,30px);
  line-height:1.45;
}
#seoHomeGuide .story-copy>p{
  margin:0;
  color:#dfe9e2;
  line-height:1.95;
}
#seoHomeGuide .story-copy a{
  color:#f0d18a;
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
#seoHomeGuide .story-copy a:hover,
#seoHomeGuide .story-copy a:focus-visible{
  color:#fff0bd;
}
@media(max-width:700px){
  #about .brand-story{border-radius:22px 22px 0 0}
  #seoHomeGuide .brand-story{border-radius:0 0 22px 22px}
  #seoHomeGuide .story-copy{
    padding:24px 22px 30px;
    grid-template-columns:1fr;
    gap:12px;
  }
  #seoHomeGuide .story-copy>.eyebrow,
  #seoHomeGuide .story-copy>h2{grid-column:auto}
}