/* OULATASTORE — Find Your Scent quiz. Visual only. Dark theme, trust-bar neon-green accents, RTL-aware. */

/* FIX 3: force the ENTIRE scent-finder page dark, scoped to body.page-id-8809 ONLY.
   Astra paints body/containers/content box from the CSS var --ast-global-color-5/6/7,
   so per-element rules alone kept losing. We (a) redefine those vars dark on this page,
   which recolors every surface that reads them, AND (b) hard-set every wrapper background. */
body.page-id-8809{
  --ast-global-color-5:#050505 !important;
  --ast-global-color-6:#050505 !important;
  --ast-global-color-7:#050505 !important;
  --ast-global-color-subtle-background:#050505 !important;
  --ast-global-color-alternate-background:#050505 !important;
  background:#050505 !important;
}
body.page-id-8809 #page,
body.page-id-8809 .site,
body.page-id-8809 .site-content,
body.page-id-8809 #content,
body.page-id-8809 .ast-container,
body.page-id-8809 #primary,
body.page-id-8809 .content-area,
body.page-id-8809 .site-main,
body.page-id-8809 article,
body.page-id-8809 .ast-article-single,
body.page-id-8809 .ast-article-post,
body.page-id-8809 .ast-separate-container,
body.page-id-8809 .ast-plain-container,
body.page-id-8809 .entry-header,
body.page-id-8809 .entry-content,
body.page-id-8809 .elementor,
body.page-id-8809 .woocommerce{ background:#050505 !important; background-color:#050505 !important; }
/* Page title readable on dark */
body.page-id-8809 .entry-title,
body.page-id-8809 .entry-header .entry-title,
body.page-id-8809 .entry-header .entry-title a{ color:#F6F2EA !important; }

.ou-sf{
  --green:#C4FF55; --green-strong:#A6E63C;
  --ink:#F6F2EA; --bg:#050505; --panel:#0A0B0C; --muted:#B8B2A4; --line:rgba(196,255,85,.34);
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  max-width:860px; margin:0 auto; padding:38px 20px; box-sizing:border-box;
  border:1px solid rgba(196,255,85,.20); border-radius:16px;
}
.ou-sf *{ box-sizing:border-box; }
.ou-sf-title{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(26px,4vw,34px); text-align:center; color:var(--ink); margin:0 0 4px; letter-spacing:.01em;
}

/* progress */
.ou-sf-progress-track{ height:3px; background:rgba(196,255,85,.20); border-radius:2px; overflow:hidden; max-width:420px; margin:22px auto 8px; }
.ou-sf-progress-fill{ height:100%; width:25%; background:var(--green); border-radius:2px; transition:width .4s ease; }
.ou-sf-progress-label{ text-align:center; color:var(--muted); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 26px; }

/* steps */
.ou-sf-step{ display:none; }
.ou-sf-step.is-active{ display:block; animation:ou-sf-fade .4s ease; }
.ou-sf-q{ font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:clamp(19px,2.6vw,24px); text-align:center; color:var(--ink); margin:0 0 24px; }
.ou-sf-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:640px; margin:0 auto; }
.ou-sf-opts-3{ grid-template-columns:repeat(3,1fr); }
.ou-sf-opt{
  background:var(--panel); border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:15px; font-weight:600; line-height:1.35;
  padding:20px 16px; border-radius:12px; cursor:pointer; text-align:center; min-height:76px;
  transition:border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
/* FIX 1: label text ALWAYS ivory & readable in every state; the fill stays dark, never matches the text. */
.ou-sf .ou-sf-opt,
.ou-sf .ou-sf-opt:link,
.ou-sf .ou-sf-opt:visited,
.ou-sf .ou-sf-opt:hover,
.ou-sf .ou-sf-opt:focus,
.ou-sf .ou-sf-opt:focus-visible,
.ou-sf .ou-sf-opt:active,
.ou-sf .ou-sf-opt.is-selected{ color:#F6F2EA !important; }
.ou-sf .ou-sf-opt:hover,
.ou-sf .ou-sf-opt:focus,
.ou-sf .ou-sf-opt:focus-visible,
.ou-sf .ou-sf-opt:active,
.ou-sf .ou-sf-opt.is-selected{
  background:#12160a !important; border-color:var(--green) !important;
  box-shadow:0 0 0 1px var(--green), 0 10px 28px rgba(196,255,85,.28);
  transform:translateY(-2px); outline:none;
}

/* results */
.ou-sf-results-h{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(22px,3vw,27px); text-align:center; color:var(--ink); margin:6px 0 24px; }
.ou-sf-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ou-sf-card{ background:var(--panel); border:1px solid rgba(196,255,85,.28); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ou-sf-card-img{ display:flex; align-items:center; justify-content:center; background:#F6F2EA; aspect-ratio:1/1; padding:10px; }
.ou-sf-card-img img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ou-sf-card-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:9px; flex:1; }
.ou-sf-card-name{ font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; line-height:1.35; }
.ou-sf-card-name:hover{ color:var(--green); }
.ou-sf-card-price{ color:#6EC1E4; font-weight:700; font-size:15px; }
.ou-sf-card-price del{ color:var(--muted); font-weight:400; opacity:.7; margin-inline-end:6px; }
.ou-sf-card-price ins{ text-decoration:none; }
.ou-sf-add{
  margin-top:auto; display:block; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--green); color:#08130A; border:0; border-radius:9999px;
  padding:10px 12px; font-family:'Inter',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.02em;
  transition:background .18s;
}
.ou-sf-add:hover{ background:var(--green-strong); color:#08130A; }
.ou-sf-add.added{ opacity:.85; }
.ou-sf-add.loading{ opacity:.7; }
.ou-sf-actions{ text-align:center; margin-top:28px; }
.ou-sf-restart{
  background:transparent; border:1px solid var(--green); color:var(--green);
  border-radius:9999px; padding:11px 28px; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; cursor:pointer;
  transition:background .18s, color .18s;
}
.ou-sf-restart:hover{ background:var(--green); color:#08130A; }
.ou-sf-loading{ text-align:center; color:var(--muted); padding:34px 10px; font-size:15px; }

/* RTL */
.ou-sf[dir="rtl"] .ou-sf-title,
.ou-sf[dir="rtl"] .ou-sf-q,
.ou-sf[dir="rtl"] .ou-sf-results-h{ font-family:'Tahoma','Segoe UI',Arial,sans-serif; }
.ou-sf[dir="rtl"]{ text-align:right; }

/* responsive */
@media (max-width:760px){ .ou-sf-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ou-sf{ padding:26px 14px; } .ou-sf-opts, .ou-sf-opts-3{ grid-template-columns:1fr; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .ou-sf-step.is-active{ animation:none; }
  .ou-sf-progress-fill{ transition:none; }
  .ou-sf-opt{ transition:none; }
  .ou-sf .ou-sf-opt:hover, .ou-sf .ou-sf-opt:focus-visible, .ou-sf .ou-sf-opt:active, .ou-sf .ou-sf-opt.is-selected{ transform:none; }
}

@keyframes ou-sf-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* OULA price display normalization (2026-07-03): display-only for Scent Finder result cards. */
.ou-sf-card{
  display:flex !important;
  flex-direction:column !important;
}
.ou-sf-card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
.ou-sf-card-price{
  margin-top:auto !important;
  white-space:nowrap !important;
}
.ou-sf-card-price del{
  display:none !important;
}
.ou-sf-card-price ins{
  display:inline !important;
  text-decoration:none !important;
  background:transparent !important;
}