/* ═══════════════════════════════════════════════════
   Sjolie Pro Tools v2.7.3  —  Brand Stylesheet
   ═══════════════════════════════════════════════════ */

:root {
    --sj-gold:       #C8A96E;
    --sj-gold-light: #D4BA85;
    --sj-gold-dark:  #A8894E;
    --sj-charcoal:   #2D2926;
    --sj-warm-white: #FAF7F2;
    --sj-warm-bg:    #F5F0E8;
    --sj-olive:      #B8A472;
    --sj-violet:     #8E7BA6;
    --sj-radius:     12px;
    --sj-shadow:     0 2px 12px rgba(45,41,38,.08);
    --sj-transition: .3s cubic-bezier(.4,0,.2,1);
    --sj-glow-gold:  0 0 12px rgba(200,169,110,.35);
    --sj-glow-cyan:  0 0 10px rgba(100,200,220,.2);
}

/* ── Reset / Wrap ──────────────────────────────────── */
.sjolie-wrap { font-family:'Inter',sans-serif; color:var(--sj-charcoal); max-width:960px; margin:0 auto; padding:24px 16px; }
.sjolie-wrap *,.sjolie-wrap *::before,.sjolie-wrap *::after { box-sizing:border-box; }
/* Strip WoodMart theme :is(.btn,button,...) defaults — specificity 0,1,1 beats WoodMart 0,1,0 */
.sjolie-wrap button,
.sjolie-wrap [type="button"],
.sjolie-wrap [type="submit"] {
    --btn-bgcolor: transparent;
    background: transparent;
    border: none;
    border-radius: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    cursor: pointer;
}
/* ── Typography ────────────────────────────────────── */
.sjolie-landing-title,.sjolie-section-title {
    font-family:'Playfair Display',serif; font-weight:700; font-size:2rem;
    text-align:center; margin:0 0 8px; color:var(--sj-charcoal);
}
.sjolie-landing-sub { text-align:center; color:#6B6560; margin:0 0 32px; font-size:.95rem; }
.sjolie-step-heading {
    font-family:'Playfair Display',serif; font-weight:600; font-size:1.35rem;
    margin:0 0 16px; text-align:center;
}
.sjolie-step-sub { text-align:center; color:#6B6560; margin:0 0 20px; font-size:.9rem; }

/* ── Landing Cards ─────────────────────────────────── */
.sjolie-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sjolie-tool-card {
    background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    padding:40px 28px; text-align:center; cursor:pointer;
    transition:transform var(--sj-transition), box-shadow var(--sj-transition);
    box-shadow:var(--sj-shadow);
}
.sjolie-tool-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(45,41,38,.12); }
a.sjolie-tool-card-link { text-decoration:none; color:inherit; display:block; }
.sjolie-card-icon { font-size:2.4rem; margin-bottom:12px; }
.sjolie-tool-card h3 { font-family:'Playfair Display',serif; font-weight:600; font-size:1.3rem; margin:0 0 8px; }
.sjolie-tool-card p { color:#6B6560; font-size:.88rem; margin:0 0 16px; line-height:1.5; }
.sjolie-wrap .sjolie-card-btn {
    display:inline-block; padding:10px 24px; border-radius:999px;
    background:var(--sj-gold); color:#fff; font-weight:600; font-size:.85rem;
    transition:background var(--sj-transition);
}
.sjolie-wrap .sjolie-tool-card:hover .sjolie-card-btn { background:var(--sj-gold-dark); }

/* ── Toolbar (Back to Tools + Reset) ───────────────── */
.sjolie-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; }
.sjolie-wrap .sjolie-back-to-tools,.sjolie-wrap .sjolie-reset-mix {
    padding:8px 20px; border-radius:999px; font-size:.82rem; cursor:pointer;
    font-family:'Inter',sans-serif; border:1px solid #CCC5B8; background:transparent;
    color:#6B6560; transition:all var(--sj-transition);
}
.sjolie-wrap .sjolie-back-to-tools:hover { border-color:var(--sj-gold); color:var(--sj-gold); }
.sjolie-wrap .sjolie-reset-mix { border-color:#D4A0A0; color:#9A5A5A; }
.sjolie-wrap .sjolie-reset-mix:hover { background:#9A5A5A; color:#fff; border-color:#9A5A5A; }

/* ── Big Watermark Step Number ─────────────────────── */
.sjolie-quiz { position:relative; overflow:hidden; }
.sjolie-big-step-num {
    font-family:'Playfair Display',serif; font-size:8rem; font-weight:800;
    color:rgba(200,169,110,.07); line-height:1; text-align:center;
    margin-bottom:-40px; user-select:none; transition:all .5s;
    pointer-events:none;
}
.sjolie-title-underline {
    width:60px; height:3px; margin:0 auto 12px;
    background:linear-gradient(90deg,var(--sj-gold),var(--sj-gold-light));
    border-radius:2px;
}

/* ── Progress Circles ─────────────────────────────── */
.sjolie-progress-row {
    display:flex; align-items:center; justify-content:center;
    gap:0; margin-bottom:32px;
}
.sjolie-prog-circle {
    width:36px; height:36px; border-radius:50%;
    border:2px solid #E8E2D8; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; color:#B8B0A4;
    transition:all .4s cubic-bezier(.4,0,.2,1);
}
.sjolie-prog-circle.active {
    border-color:var(--sj-gold); color:var(--sj-gold);
    box-shadow:0 0 0 4px rgba(200,169,110,.12); transform:scale(1.1);
}
.sjolie-prog-circle.done {
    border-color:var(--sj-gold); background:var(--sj-gold); color:#fff;
}
.sjolie-prog-connector {
    width:50px; height:2px; background:#E8E2D8;
    position:relative; overflow:hidden;
}
.sjolie-prog-connector::after {
    content:''; position:absolute; top:0; left:0;
    width:0; height:100%; background:var(--sj-gold);
    transition:width .5s cubic-bezier(.4,0,.2,1);
}
.sjolie-prog-connector.filled::after { width:100%; }

/* ── Option Buttons (Editorial Cards) ─────────────── */
.sjolie-options { display:flex; flex-direction:column; gap:10px; max-width:540px; margin:0 auto 20px; }
.sjolie-wrap .sjolie-option-btn {
    background:var(--sj-warm-bg); border:2px solid #E8E2D8; border-radius:16px;
    padding:18px 22px; cursor:pointer;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    font-family:'Inter',sans-serif; color:var(--sj-charcoal);
    display:flex; align-items:center; gap:16px;
    position:relative; z-index:1;
    box-shadow:0 2px 8px rgba(45,41,38,.04); text-align:left;
}
.sjolie-wrap .sjolie-option-btn:hover {
    border-color:var(--sj-gold); transform:translateY(-3px) scale(1.01);
    box-shadow:0 8px 24px rgba(200,169,110,.15); z-index:5;
}
.sjolie-opt-icon {
    width:44px; height:44px; border-radius:12px;
    background:linear-gradient(135deg,var(--sj-warm-white),#F0EBE2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; flex-shrink:0; transition:all .35s;
}
.sjolie-opt-content { flex:1; }
.sjolie-opt-label { font-size:.92rem; color:var(--sj-charcoal); font-weight:500; margin-bottom:2px; }
.sjolie-opt-desc { font-size:.75rem; color:#B8B0A4; }
.sjolie-opt-check {
    width:24px; height:24px; border-radius:50%;
    border:2px solid #E8E2D8; display:flex; align-items:center; justify-content:center;
    transition:all .35s; flex-shrink:0; font-size:.7rem; color:transparent;
}
/* Selected */
.sjolie-wrap .sjolie-option-btn.selected {
    border-color:var(--sj-gold); background:linear-gradient(135deg,#FFF8EC,#FFF3E0);
    box-shadow:0 4px 16px rgba(200,169,110,.15); z-index:5;
}
.sjolie-wrap .sjolie-option-btn.selected .sjolie-opt-icon {
    background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-light));
}
.sjolie-wrap .sjolie-option-btn.selected .sjolie-opt-icon span { filter:brightness(10); }
.sjolie-wrap .sjolie-option-btn.selected .sjolie-opt-check {
    border-color:var(--sj-gold); background:var(--sj-gold); color:#fff;
}
/* Bounce on select */
@keyframes sjSelectBounce {
    0% { transform:scale(1); } 30% { transform:scale(1.03); }
    60% { transform:scale(.98); } 100% { transform:scale(1); }
}
.sjolie-wrap .sjolie-option-btn.sjolie-just-selected { animation:sjSelectBounce .4s cubic-bezier(.4,0,.2,1); }

/* ── Confetti ─────────────────────────────────────── */
.sjolie-confetti {
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:100; overflow:hidden;
}
.sjolie-confetti-piece {
    position:absolute; width:8px; height:8px; border-radius:2px;
    animation:sjConfettiFall 1s ease-out forwards; opacity:0;
}
@keyframes sjConfettiFall {
    0% { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
    100% { transform:translateY(200px) rotate(720deg) scale(0); opacity:0; }
}

/* ── Suggested Badge ──────────────────────────────── */
.sjolie-suggested-badge {
    display:block; max-width:fit-content; margin:0 auto 24px; padding:6px 18px; border-radius:999px;
    background:#FFF8EC; border:1px solid #EED89C;
    color:#A8894E; font-size:.78rem; font-weight:600;
    text-align:center;
}
/* Floating tooltip centered above the suggested swatch */
.sjolie-suggest-tooltip {
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    margin-bottom:22px; white-space:nowrap;
    background:linear-gradient(135deg, #FFF8EC, #FFF3E0);
    border:1.5px solid var(--sj-gold); border-radius:10px;
    padding:5px 12px; text-align:center;
    box-shadow:0 2px 12px rgba(200,169,110,.2);
    z-index:20;
    animation:sjTooltipFloat 2s ease-in-out infinite;
}
.sjolie-suggest-tip-line1 {
    display:block; font-family:'Playfair Display',serif; font-weight:700;
    font-size:.76rem; color:var(--sj-charcoal); margin-bottom:1px;
}
.sjolie-suggest-tip-line2 {
    display:block; font-size:.62rem; color:#A8894E; font-weight:500;
}
/* Arrow floats independently above the swatch */
.sjolie-suggest-tip-arrow {
    position:absolute; top:-4px; left:50%; transform:translateX(-50%);
    font-size:1.1rem; color:var(--sj-gold); line-height:1;
    z-index:21; pointer-events:none;
    animation:sjTipArrowBounce 1s ease-in-out infinite;
}
@keyframes sjTooltipFloat {
    0%, 100% { transform:translateX(-50%) translateY(0); }
    50% { transform:translateX(-50%) translateY(-3px); }
}
@keyframes sjTipArrowBounce {
    0%, 100% { transform:translateX(-50%) translateY(0); }
    50% { transform:translateX(-50%) translateY(4px); }
}

/* ── Swatches (rounded square with labels) ────────── */
.sjolie-swatches { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:16px auto 24px; padding-top:95px; }
.sjolie-swatch-wrap { text-align:center; }
.sjolie-wrap .sjolie-swatch {
    width:120px; height:120px; border-radius:22px; border:3px solid #F0EBE2;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .4s cubic-bezier(.4,0,.2,1);
    box-shadow:0 4px 12px rgba(0,0,0,.08); margin-bottom:8px;
    padding:0; min-height:0;
}
.sjolie-swatch span { font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.sjolie-swatch-label { font-size:.78rem; color:#B8B0A4; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.sjolie-wrap .sjolie-swatch:hover { transform:translateY(-4px) scale(1.08); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.sjolie-wrap .sjolie-swatch.suggested {
    border-color:var(--sj-gold); border-width:3px;
    animation:sjSwatchGlow 1.5s ease-in-out infinite;
    transform:scale(1.08);
    z-index:5; position:relative; overflow:visible;
}
@keyframes sjSwatchGlow {
    0%, 100% { box-shadow:0 0 0 4px rgba(200,169,110,.25), 0 0 20px rgba(200,169,110,.3), 0 0 40px rgba(200,169,110,.1); }
    50%      { box-shadow:0 0 0 6px rgba(200,169,110,.35), 0 0 30px rgba(200,169,110,.45), 0 0 60px rgba(200,169,110,.2); }
}
/* Sparkle particles on suggested swatch */
.sjolie-swatch-sparkle {
    position:absolute; pointer-events:none; z-index:10;
    font-size:12px; line-height:1;
    animation:sjSparkleFloat var(--spark-dur, 1.2s) ease-out forwards;
}
@keyframes sjSparkleFloat {
    0%   { transform:translate(0,0) scale(.4) rotate(0deg); opacity:0; }
    15%  { opacity:1; transform:translate(var(--spark-x, 5px), var(--spark-y, -5px)) scale(1) rotate(45deg); }
    50%  { opacity:.9; transform:translate(calc(var(--spark-x, 5px) * 1.5), calc(var(--spark-y, -5px) * 1.8)) scale(1.1) rotate(120deg); }
    100% { opacity:0; transform:translate(calc(var(--spark-x, 5px) * 2), calc(var(--spark-y, -5px) * 2.5)) scale(.3) rotate(200deg); }
}
.sjolie-wrap .sjolie-swatch.selected {
    border-color:var(--sj-gold); transform:translateY(-4px) scale(1.12);
    box-shadow:0 0 0 4px rgba(200,169,110,.25), 0 8px 24px rgba(200,169,110,.15);
}

/* ── Step morph transition ────────────────────────── */
@keyframes sjMorphIn {
    from { opacity:0; transform:translateY(20px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.sjolie-step.sjolie-morph-in { animation:sjMorphIn .45s ease-out; }

/* ── Back & Restart ────────────────────────────────── */
.sjolie-wrap .sjolie-back-btn,.sjolie-wrap .sjolie-restart-btn {
    display:inline-block; margin:16px 8px 0; padding:10px 22px; border-radius:999px;
    font-size:.85rem; cursor:pointer; font-family:'Inter',sans-serif; border:none;
    transition:all var(--sj-transition);
}
.sjolie-wrap .sjolie-back-btn { background:#fff; border:1px solid #E8E2D8; color:#8A847C; }
.sjolie-wrap .sjolie-back-btn:hover { border-color:var(--sj-gold); color:var(--sj-gold); }
.sjolie-wrap .sjolie-restart-btn { background:var(--sj-gold); color:#fff; font-weight:600; }
.sjolie-wrap .sjolie-restart-btn:hover { background:var(--sj-gold-dark); }

/* ── Product Cards ─────────────────────────────────── */
.sjolie-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; margin-bottom:16px; }
.sjolie-product-card {
    background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    padding:0; box-shadow:var(--sj-shadow); transition:transform var(--sj-transition), box-shadow var(--sj-transition);
    overflow:visible; position:relative; display:flex; flex-direction:column;
}
.sjolie-product-card:hover { transform:translateY(-3px); box-shadow:0 6px 24px rgba(45,41,38,.12); }

/* Card body: bottle on left, info on right — stretch to fill */
.sjolie-card-body { display:flex; align-items:stretch; gap:0; flex:1; min-height:0; }
.sjolie-bottle-img-wrap {
    flex:0 0 100px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #f8f4ee 0%, #f0eae0 100%); padding:16px 8px;
    border-right:1px solid #E8E2D8;
    border-radius:var(--sj-radius) 0 0 var(--sj-radius);
}
/* Popular card: bottle area has no top-left radius (banner is above) */
.sjolie-card-popular .sjolie-bottle-img-wrap { border-radius:0 0 0 var(--sj-radius); }
.sjolie-bottle-img { width:72px; height:auto; object-fit:contain; transition:transform .3s ease; }
.sjolie-product-card:hover .sjolie-bottle-img { transform:scale(1.06); }
.sjolie-card-info { flex:1; padding:20px 20px 18px 16px; min-width:0; display:flex; flex-direction:column; }
.sjolie-card-info .sjolie-product-desc { flex:1; }

.sjolie-product-badge {
    display:inline-block; padding:3px 12px; border-radius:999px; font-size:.7rem;
    font-weight:600; background:var(--sj-gold); color:#fff; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em;
    align-self:flex-start;
}
.sjolie-product-card h4 { font-family:'Playfair Display',serif; font-size:1.1rem; margin:0 0 4px; }
.sjolie-product-meta { font-size:.78rem; color:#8A847C; margin:0 0 8px; }
.sjolie-product-desc { font-size:.84rem; color:#5A5550; line-height:1.5; margin:0 0 12px; }
.sjolie-card-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; }
.sjolie-product-link {
    display:inline-block; padding:8px 18px; border-radius:999px; font-size:.8rem;
    background:var(--sj-charcoal); color:#fff; text-decoration:none; font-weight:500;
    transition:background var(--sj-transition);
}
.sjolie-product-link:hover { background:var(--sj-gold); }

/* ── Tan Results Scrolling Gallery ─────────────── */
.sjolie-tan-gallery {
    position:relative; margin:12px 0 8px; overflow:hidden; border-radius:10px;
    background:var(--sj-cream, #FAF7F2);
}
.sjolie-gallery-label {
    font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    color:var(--sj-gold-dark, #8B7340); padding:8px 12px 4px; font-family:'Inter',sans-serif;
}
.sjolie-gallery-track {
    display:flex; transition:transform .4s cubic-bezier(.4,0,.2,1); width:100%;
}
.sjolie-gallery-slide {
    flex:0 0 100%; min-width:100%;
}
.sjolie-gallery-slide img {
    width:100%; height:280px; object-fit:cover; display:block;
}
.sjolie-gallery-arrow {
    position:absolute !important; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.85) !important; border:1px solid rgba(200,169,110,.3) !important;
    color:var(--sj-charcoal, #1E1B19) !important; font-size:1.3rem; line-height:1;
    cursor:pointer; z-index:3; display:flex !important; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); transition:all .2s ease;
    padding:0 !important; margin:0 !important;
}
.sjolie-gallery-arrow:hover { background:rgba(255,255,255,1) !important; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.sjolie-gallery-prev { left:8px; }
.sjolie-gallery-next { right:8px; }
.sjolie-gallery-dots {
    display:flex; justify-content:center; gap:6px; padding:8px 0;
}
.sjolie-gallery-dot {
    width:7px; height:7px; border-radius:50%; background:rgba(200,169,110,.3);
    cursor:pointer; transition:all .2s ease;
}
.sjolie-gallery-dot.active { background:var(--sj-gold, #C8A96E); transform:scale(1.3); }

/* ── Most Popular Card Highlight ────────────────── */
.sjolie-card-popular {
    border:2px solid var(--sj-gold); box-shadow:0 0 0 3px rgba(200,169,110,.18), var(--sj-shadow);
    animation: sjolie-popular-glow 2.5s ease-in-out infinite;
    overflow:visible;
}
@keyframes sjolie-popular-glow {
    0%, 100% { box-shadow:0 0 0 3px rgba(200,169,110,.18), 0 2px 16px rgba(200,169,110,.12); }
    50%      { box-shadow:0 0 0 6px rgba(200,169,110,.28), 0 4px 24px rgba(200,169,110,.22); }
}
.sjolie-popular-banner {
    background:linear-gradient(90deg, #C8A96E 0%, #D4BA85 50%, #C8A96E 100%);
    background-size:200% 100%;
    animation: sjolie-banner-shimmer 3s ease-in-out infinite;
    padding:7px 16px; text-align:center; position:relative;
    overflow:visible;
    border-radius:var(--sj-radius) var(--sj-radius) 0 0;
}
@keyframes sjolie-banner-shimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}
.sjolie-popular-arrow {
    display:block; font-size:.6rem; line-height:1; color:#fff; margin-bottom:1px;
    animation: sjolie-arrow-bounce 1.2s ease-in-out infinite;
}
@keyframes sjolie-arrow-bounce {
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(3px); }
}
.sjolie-popular-text {
    font-size:.72rem; font-weight:700; color:#fff; text-transform:uppercase;
    letter-spacing:.06em;
}

/* Popular sparkles — fly upward from the gold banner */
.sjolie-popular-sparkle {
    position:absolute; pointer-events:none; z-index:5;
    animation: sjolie-popular-spark-up var(--spark-dur, .9s) ease-out forwards;
}
@keyframes sjolie-popular-spark-up {
    0%   { opacity:1; transform:translate(0, 0) scale(1); }
    70%  { opacity:.8; }
    100% { opacity:0; transform:translate(var(--spark-x, 0), var(--spark-y, -30px)) scale(.4); }
}

/* ── Gallery responsive adjustments ──────────────── */
@media (max-width:480px) {
    .sjolie-gallery-slide img { height:220px; }
    .sjolie-gallery-arrow { width:28px; height:28px; font-size:1.1rem; }
}

/* ── Responsive adjustments for product cards ────── */
@media (max-width:480px) {
    .sjolie-product-grid { grid-template-columns:1fr; }
    .sjolie-bottle-img-wrap { flex:0 0 80px; padding:12px 6px; }
    .sjolie-bottle-img { width:58px; }
    .sjolie-card-info { padding:14px 14px 14px 10px; }
}

/* ═══ Mixologist ═══════════════════════════════════ */

/* Solution Selectors */
.sjolie-mix-selectors { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.sjolie-mix-panel { background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius); padding:20px; }
.sjolie-mix-panel h4 { font-family:'Playfair Display',serif; text-align:center; margin:0 0 14px; font-size:1.05rem; }
.sjolie-bottle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sjolie-wrap .sjolie-bottle-btn {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    border:2px solid #E8E2D8; border-radius:999px; cursor:pointer;
    background:var(--sj-warm-white); transition:all var(--sj-transition); font-family:'Inter',sans-serif;
    font-size:.82rem; font-weight:500; color:var(--sj-charcoal);
    position:relative; overflow:visible;
}
.sjolie-wrap .sjolie-bottle-btn:hover { border-color:var(--sj-gold); background:#FBF7EF; transform:translateY(-1px); box-shadow:0 4px 12px rgba(200,169,110,.1); }
/* ── Selected: Original line (chocolate glow) ──── */
.sjolie-wrap .sjolie-bottle-btn.selected.sjolie-line-original {
    border-color:#8B6914; background:linear-gradient(135deg,#A0784C,#8B6914);
    color:#fff;
    animation:sjBottleGlowChocolate 2s ease-in-out infinite;
    box-shadow:0 0 8px rgba(139,105,20,.4), 0 0 20px rgba(160,120,76,.25);
}
/* ── Selected: Luxe line (violet glow) ──────── */
.sjolie-wrap .sjolie-bottle-btn.selected.sjolie-line-luxe {
    border-color:#7B5EA6; background:linear-gradient(135deg,#9B7EA6,#7B5EA6);
    color:#fff;
    animation:sjBottleGlowViolet 2s ease-in-out infinite;
    box-shadow:0 0 8px rgba(123,94,166,.4), 0 0 20px rgba(155,126,166,.25);
}
/* ── Selected: Rapid line (gold glow, fallback) ── */
.sjolie-wrap .sjolie-bottle-btn.selected.sjolie-line-rapid {
    border-color:var(--sj-gold); background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-dark));
    color:#fff;
    animation:sjBottleGlowGold 2s ease-in-out infinite;
    box-shadow:0 0 8px rgba(200,169,110,.4), 0 0 20px rgba(200,169,110,.25);
}
/* Glow keyframes */
@keyframes sjBottleGlowChocolate {
    0%, 100% { box-shadow:0 0 8px rgba(139,105,20,.4), 0 0 20px rgba(160,120,76,.2); }
    50%      { box-shadow:0 0 14px rgba(139,105,20,.6), 0 0 32px rgba(160,120,76,.35); }
}
@keyframes sjBottleGlowViolet {
    0%, 100% { box-shadow:0 0 8px rgba(123,94,166,.4), 0 0 20px rgba(155,126,166,.2); }
    50%      { box-shadow:0 0 14px rgba(123,94,166,.6), 0 0 32px rgba(155,126,166,.35); }
}
@keyframes sjBottleGlowGold {
    0%, 100% { box-shadow:0 0 8px rgba(200,169,110,.4), 0 0 20px rgba(200,169,110,.2); }
    50%      { box-shadow:0 0 14px rgba(200,169,110,.6), 0 0 32px rgba(200,169,110,.35); }
}
/* ── Bubbling chemical particles ─────────────────── */
.sjolie-bottle-bubble {
    position:absolute; bottom:0; pointer-events:none;
    width:6px; height:6px; border-radius:50%;
    z-index:10;
    animation:sjBubbleFloat var(--bub-dur, 1.4s) ease-out forwards;
}
@keyframes sjBubbleFloat {
    0%   { transform:translateY(0) translateX(0) scale(1); opacity:.7; }
    30%  { transform:translateY(-20px) translateX(var(--bub-drift, 3px)) scale(1.1); opacity:.85; }
    60%  { transform:translateY(-45px) translateX(calc(var(--bub-drift, 3px) * -0.5)) scale(.9); opacity:.6; }
    100% { transform:translateY(-70px) translateX(var(--bub-drift, 3px)) scale(.4); opacity:0; }
}
/* Vial container on selected buttons */
.sjolie-bottle-vial-wrap {
    margin-left:auto; flex-shrink:0; position:relative;
    width:22px; height:28px;
    opacity:0; transform:scale(.5);
    transition:opacity .3s ease, transform .3s ease;
}
.sjolie-bottle-btn.selected .sjolie-bottle-vial-wrap {
    opacity:1; transform:scale(1);
}
/* Glass vial shape */
.sjolie-bottle-vial-glass {
    position:absolute; bottom:0; left:3px;
    width:16px; height:22px;
    border:2px solid rgba(255,255,255,.7);
    border-radius:0 0 5px 5px;
    background:rgba(255,255,255,.15);
    overflow:hidden;
}
/* Vial neck */
.sjolie-bottle-vial-glass::before {
    content:''; position:absolute; top:-5px; left:2px;
    width:8px; height:5px;
    border:2px solid rgba(255,255,255,.7);
    border-bottom:none; border-radius:2px 2px 0 0;
}
/* Liquid fill inside vial */
.sjolie-bottle-vial-liquid {
    position:absolute; bottom:0; left:0; right:0;
    height:65%; border-radius:0 0 3px 3px;
    animation:sjVialBubble 1.2s ease-in-out infinite;
}
.sjolie-line-original .sjolie-bottle-vial-liquid {
    background:linear-gradient(180deg, rgba(200,169,110,.6), #A0784C);
}
.sjolie-line-luxe .sjolie-bottle-vial-liquid {
    background:linear-gradient(180deg, rgba(196,168,200,.6), #7B5EA6);
}
@keyframes sjVialBubble {
    0%, 100% { height:65%; } 50% { height:72%; }
}
/* Spill drip from vial top */
.sjolie-bottle-vial-spill {
    position:absolute; top:-2px; right:0;
    width:5px; height:8px; border-radius:0 0 3px 3px;
    animation:sjVialDrip 2s ease-in-out infinite;
}
.sjolie-line-original .sjolie-bottle-vial-spill { background:#A0784C; }
.sjolie-line-luxe .sjolie-bottle-vial-spill { background:#7B5EA6; }
@keyframes sjVialDrip {
    0%, 70% { height:0; opacity:0; }
    80% { height:10px; opacity:.8; }
    95% { height:14px; opacity:.4; }
    100% { height:16px; opacity:0; }
}
.sjolie-bottle-swatch { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.1); flex-shrink:0; }

/* Ratio */
.sjolie-ratio-section { background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius); padding:20px; margin-bottom:28px; }
.sjolie-ratio-section h4 { font-family:'Playfair Display',serif; text-align:center; margin:0 0 14px; font-size:1.05rem; }
.sjolie-preset-btns { display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.sjolie-wrap .sjolie-preset {
    padding:6px 16px; border-radius:999px; border:1px solid #E8E2D8; background:#fff;
    font-size:.78rem; cursor:pointer; font-family:'Inter',sans-serif; color:var(--sj-charcoal);
    transition:all var(--sj-transition);
}
.sjolie-wrap .sjolie-preset:hover,.sjolie-wrap .sjolie-preset.active { border-color:var(--sj-gold); background:var(--sj-gold); color:#fff; }
.sjolie-slider-wrap { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sjolie-slider-label { font-size:.82rem; font-weight:600; white-space:nowrap; min-width:52px; }
#sjolie-label-b { text-align:right; }
#sjolie-ratio { flex:1; accent-color:var(--sj-gold); height:6px; }
.sjolie-ratio-bar { height:12px; border-radius:6px; overflow:hidden; display:flex; }
.sjolie-ratio-fill-a { height:100%; transition:width var(--sj-transition); }
.sjolie-ratio-fill-b { height:100%; transition:width var(--sj-transition); }

/* Additives */
.sjolie-additives { background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius); padding:20px; margin-bottom:28px; }
.sjolie-additives h4 { font-family:'Playfair Display',serif; text-align:center; margin:0 0 14px; font-size:1.05rem; }
.sjolie-additive-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #ECE7DE; flex-wrap:wrap; gap:10px; }
.sjolie-additive-row:last-child { border-bottom:none; }
.sjolie-toggle-label { display:flex; align-items:center; gap:12px; cursor:pointer; }
.sjolie-toggle-text { font-size:.88rem; }

/* Toggle Switch */
.sjolie-toggle { position:relative; display:inline-block; width:44px; height:24px; }
.sjolie-toggle input { opacity:0; width:0; height:0; }
.sjolie-toggle-track {
    position:absolute; inset:0; border-radius:12px; background:#D5CEC4;
    transition:background var(--sj-transition); cursor:pointer;
}
.sjolie-toggle-track::after {
    content:''; position:absolute; left:3px; top:3px; width:18px; height:18px;
    border-radius:50%; background:#fff; transition:transform var(--sj-transition);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.sjolie-toggle input:checked + .sjolie-toggle-track { background:var(--sj-gold); }
.sjolie-toggle input:checked + .sjolie-toggle-track::after { transform:translateX(20px); }

/* Dose Control */
.sjolie-dose-control { display:flex; align-items:center; gap:8px; }
.sjolie-wrap .sjolie-dose-btn {
    width:28px; height:28px; border-radius:50%; border:1px solid #CCC5B8;
    background:#fff; cursor:pointer; font-size:1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; color:var(--sj-charcoal);
    transition:all var(--sj-transition);
}
.sjolie-wrap .sjolie-dose-btn:hover { border-color:var(--sj-gold); background:var(--sj-gold); color:#fff; }
#sjolie-dose-count { font-weight:600; min-width:16px; text-align:center; font-size:.9rem; }
.sjolie-dose-hint { font-size:.72rem; color:#8A847C; }

/* ── Mix Results — High-Tech Styling ──────────────── */
.sjolie-mix-results {
    background:linear-gradient(145deg, #1E1B19, #2D2926);
    border:1px solid rgba(200,169,110,.25);
    border-radius:var(--sj-radius);
    padding:28px;
    color:#E8E2D8;
    box-shadow:0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.sjolie-mix-results h4 {
    font-family:'Playfair Display',serif;
    text-align:center;
    margin:0 0 24px;
    font-size:1.2rem;
    color:var(--sj-gold);
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* DHA Hero Display */
.sjolie-dha-hero {
    text-align:center;
    margin-bottom:24px;
    padding:20px;
    background:rgba(200,169,110,.08);
    border:1px solid rgba(200,169,110,.15);
    border-radius:var(--sj-radius);
    position:relative;
    overflow:hidden;
}
.sjolie-dha-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, rgba(200,169,110,.08) 0%, transparent 70%);
    pointer-events:none;
}
.sjolie-dha-hero-label {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--sj-gold);
    margin-bottom:4px;
    font-weight:600;
}
.sjolie-dha-hero-value {
    font-family:'Playfair Display',serif;
    font-size:3rem;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    text-shadow:0 0 20px rgba(200,169,110,.3);
}
.sjolie-dha-hero-value span {
    font-size:1.4rem;
    font-weight:400;
    color:var(--sj-gold);
    margin-left:2px;
}
.sjolie-dha-hero-bar {
    margin-top:14px;
    height:8px;
    background:rgba(255,255,255,.08);
    border-radius:4px;
    overflow:hidden;
    position:relative;
}
.sjolie-dha-hero-fill {
    height:100%;
    border-radius:4px;
    background:linear-gradient(90deg, var(--sj-gold-light), var(--sj-gold), var(--sj-gold-dark));
    box-shadow:0 0 10px rgba(200,169,110,.4);
    transition:width var(--sj-transition);
}

/* Undertone Gauge — High-Tech */
.sjolie-gauge-row {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    padding:14px 16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
}
.sjolie-gauge-label {
    font-size:.78rem;
    font-weight:600;
    min-width:80px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--sj-gold);
}
.sjolie-gauge {
    flex:1;
    height:22px;
    border-radius:11px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
    position:relative;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.sjolie-gauge-fill {
    height:100%;
    border-radius:11px;
    transition:width var(--sj-transition), background var(--sj-transition);
}
.sjolie-undertone-gauge {
    background:linear-gradient(90deg,var(--sj-olive),var(--sj-violet));
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3), 0 0 8px rgba(142,123,166,.15);
    transition:background var(--sj-transition), box-shadow var(--sj-transition);
    overflow:visible;
    height:26px;
    border-radius:13px;
}
.sjolie-undertone-gauge .sjolie-gauge-fill {
    background:transparent;
    border-right:none;
    border-radius:0;
    box-shadow:none;
    position:relative;
    overflow:visible;
}
/* Sjolie spray gun marker — set dynamically via JS */
.sjolie-undertone-gauge .sjolie-gauge-fill::after {
    content:'';
    position:absolute;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:40px;
    background-image:var(--sj-marker-img);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 5px rgba(0,0,0,.4));
    z-index:2;
    transition:filter var(--sj-transition);
}
.sjolie-gauge-value {
    font-size:.85rem;
    font-weight:600;
    min-width:130px;
    text-align:right;
    color:#E8E2D8;
    font-variant-numeric:tabular-nums;
}

/* Best-For Section */
.sjolie-result-meta {
    margin-top:18px;
    font-size:.9rem;
    line-height:1.8;
    color:#C8C2B8;
}
.sjolie-result-meta strong { color:var(--sj-gold); }
.sjolie-seasonal-tip {
    margin-top:10px;
    padding:12px 16px;
    background:rgba(200,169,110,.08);
    border:1px solid rgba(200,169,110,.12);
    border-radius:8px;
    font-size:.84rem;
    color:#C8B888;
}

/* Skin Swatch Chips */
.sjolie-skin-chips { display:inline-flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sjolie-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px 6px 8px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#E8E2D8;
    backdrop-filter:blur(4px);
}
.sjolie-chip-swatch {
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.2);
    flex-shrink:0;
    box-shadow:0 0 4px rgba(0,0,0,.2);
}

/* Recipe Card */
.sjolie-recipe-card {
    margin-top:22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(200,169,110,.2);
    color:#E8E2D8;
    border-radius:var(--sj-radius);
    padding:22px;
}
.sjolie-recipe-card h5 { font-family:'Playfair Display',serif; font-size:1.05rem; margin:0 0 14px; color:var(--sj-gold); }
.sjolie-recipe-sub { font-size:.78rem; font-weight:400; color:#A09A92; }
.sjolie-recipe-card ul { list-style:none; padding:0; margin:0; }
.sjolie-recipe-card li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.06); }
.sjolie-recipe-card li:last-child { border-bottom:none; }
.sjolie-recipe-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Save Actions ─────────────────────────────────── */
.sjolie-recipe-actions {
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}
.sjolie-wrap .sjolie-recipe-actions button {
    flex:1;
    min-width:160px;
    padding:12px 20px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all var(--sj-transition);
    border:none;
}
.sjolie-wrap .sjolie-save-img-btn {
    background:var(--sj-gold);
    color:#fff;
}
.sjolie-wrap .sjolie-save-img-btn:hover { background:var(--sj-gold-dark); box-shadow:var(--sj-glow-gold); }

/* ── Save Modal ───────────────────────────────────── */
.sjolie-modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    backdrop-filter:blur(4px);
    opacity:0;
    transition:opacity .25s ease;
}
.sjolie-modal-overlay.active { opacity:1; }
.sjolie-modal {
    background:linear-gradient(145deg,#2D2926,#1E1B19);
    border:1px solid rgba(200,169,110,.3);
    border-radius:16px;
    padding:32px;
    max-width:420px;
    width:90%;
    color:#E8E2D8;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    transform:translateY(20px);
    transition:transform .25s ease;
}
.sjolie-modal-overlay.active .sjolie-modal { transform:translateY(0); }
.sjolie-modal h4 {
    font-family:'Playfair Display',serif;
    font-size:1.15rem;
    color:var(--sj-gold);
    margin:0 0 6px;
    text-align:center;
}
.sjolie-modal p {
    font-size:.82rem;
    color:#A09A92;
    text-align:center;
    margin:0 0 20px;
}
.sjolie-modal-field {
    width:100%;
    padding:12px 16px;
    border:1px solid rgba(200,169,110,.2);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:#E8E2D8;
    font-size:.9rem;
    font-family:'Inter',sans-serif;
    margin-bottom:12px;
    outline:none;
    transition:border-color var(--sj-transition);
}
.sjolie-modal-field:focus { border-color:var(--sj-gold); }
.sjolie-modal-field::placeholder { color:#6B6560; }
.sjolie-modal-actions {
    display:flex;
    gap:10px;
    margin-top:8px;
}
.sjolie-modal-actions button {
    flex:1;
    padding:12px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all var(--sj-transition);
    border:none;
}
.sjolie-modal-cancel {
    background:rgba(255,255,255,.08);
    color:#A09A92;
}
.sjolie-modal-cancel:hover { background:rgba(255,255,255,.12); }
.sjolie-modal-confirm {
    background:var(--sj-gold);
    color:#fff;
}
.sjolie-modal-confirm:hover { background:var(--sj-gold-dark); }
.sjolie-modal-status {
    text-align:center;
    font-size:.8rem;
    margin-top:10px;
    min-height:20px;
    color:var(--sj-gold);
}

/* ═══ Multi-Column Card Grid ═══════════════════════ */
.sjolie-card-grid-multi { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* ═══ Resource / Download Sections ═════════════════ */
.sjolie-resource-section { max-width:700px; margin:0 auto; }
.sjolie-resource-card {
    background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    padding:36px 30px; text-align:center; box-shadow:var(--sj-shadow);
}
.sjolie-resource-icon { font-size:2.8rem; margin-bottom:14px; }
.sjolie-resource-card h3 { font-family:'Playfair Display',serif; font-size:1.3rem; margin:0 0 10px; }
.sjolie-resource-card p { font-size:.9rem; color:#6B6560; line-height:1.6; margin:0 0 20px; max-width:520px; margin-left:auto; margin-right:auto; }
.sjolie-wrap .sjolie-resource-btn {
    display:inline-block; padding:12px 28px; border-radius:999px; font-size:.88rem;
    font-weight:600; text-decoration:none; color:#fff; background:var(--sj-gold);
    transition:all var(--sj-transition); font-family:'Inter',sans-serif; border:none;
}
.sjolie-wrap .sjolie-resource-btn:hover { background:var(--sj-gold-dark); box-shadow:var(--sj-glow-gold); }

/* ═══ Event Countdown Planner — Concept A (Vertical Timeline Stepper) ═══ */
.sjolie-event-planner { max-width:640px; margin:0 auto; position:relative; }

/* Header */
.sjolie-ep-header { text-align:center; margin-bottom:40px; }
.sjolie-ep-header .sjolie-section-title { margin-bottom:6px; }
.sjolie-ep-header .sjolie-landing-sub { font-size:.95rem; color:#8A847C; }
.sjolie-ep-header-bar {
    width:60px; height:3px; margin:14px auto 0;
    background:linear-gradient(90deg, var(--sj-gold), var(--sj-gold-light));
    border-radius:4px;
}

/* Vertical Stepper Rail */
.sjolie-ep-stepper-rail {
    position:absolute; left:24px; top:150px; bottom:0; width:2px;
    background:#E8E2D8;
}
.sjolie-ep-rail-fill {
    position:absolute; top:0; left:0; width:100%; height:0;
    background:linear-gradient(180deg, var(--sj-gold), var(--sj-gold-light));
    border-radius:2px;
    transition:height .6s cubic-bezier(.4,0,.2,1);
}

/* Steps */
.sjolie-ep-step {
    position:relative; padding-left:64px; margin-bottom:32px;
    opacity:0; transform:translateY(20px);
    transition:opacity .5s ease, transform .5s ease;
}
.sjolie-ep-visible { opacity:1; transform:translateY(0); }
.sjolie-ep-hidden { display:none; }

.sjolie-ep-dot {
    position:absolute; left:12px; top:18px;
    width:26px; height:26px; border-radius:50%;
    background:#fff; border:2px solid #E8E2D8;
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:700; color:#B0A99F;
    z-index:2; transition:all .4s ease;
}
.sjolie-ep-dot-active {
    border-color:var(--sj-gold); background:var(--sj-gold); color:#fff;
    box-shadow:0 0 16px rgba(200,169,110,.4);
}
.sjolie-ep-dot-done {
    border-color:var(--sj-gold); background:var(--sj-gold); color:#fff;
}
.sjolie-ep-dot-done::after { content:'\2713'; font-size:.8rem; }

.sjolie-ep-card {
    background:#fff; border:1px solid #E8E2D8; border-radius:16px;
    padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.04);
    transition:border-color .3s ease, box-shadow .3s ease;
}
.sjolie-ep-card-active {
    border-color:rgba(200,169,110,.4);
    box-shadow:0 4px 24px rgba(200,169,110,.1);
}

.sjolie-ep-step-label {
    font-size:.72rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.08em; color:var(--sj-gold); margin-bottom:6px;
}
.sjolie-ep-step-title {
    font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600;
    margin-bottom:18px; color:var(--sj-charcoal);
}

/* Event Type Cards */
.sjolie-ep-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sjolie-ep-type-card {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:22px 16px; border:2px solid #E8E2D8; border-radius:14px;
    background:#fff; cursor:pointer; transition:all .3s ease;
    position:relative; overflow:hidden;
}
.sjolie-ep-type-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 50% 0%, rgba(200,169,110,.08), transparent 70%);
    opacity:0; transition:opacity .3s ease;
}
.sjolie-ep-type-card:hover::before { opacity:1; }
.sjolie-ep-type-card:hover {
    border-color:var(--sj-gold); transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(200,169,110,.12);
}
.sjolie-ep-type-card.selected {
    border-color:var(--sj-gold); background:linear-gradient(135deg, #FBF7EF, #fff);
    box-shadow:0 6px 20px rgba(200,169,110,.15);
}
.sjolie-ep-type-card.selected .sjolie-ep-type-icon { transform:scale(1.15); }
.sjolie-ep-type-icon {
    font-size:2rem; transition:transform .3s ease; position:relative; z-index:1;
    display:inline-block;
}

/* Per-Type Selection Animations */
.sjolie-ep-type-card .sjolie-ep-particle {
    position:absolute; pointer-events:none; z-index:3;
    font-size:1rem; opacity:0;
}
.sjolie-ep-particle.heart-pop { animation:sjEpHeartPop .8s ease-out forwards; }
@keyframes sjEpHeartPop {
    0% { opacity:1; transform:translate(0,0) scale(.6) rotate(0deg); }
    100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--tr)); }
}

/* Vacation: plane flies */
.sjolie-ep-type-card[data-type="vacation"].selected .sjolie-ep-type-icon {
    animation:sjEpPlaneFly 1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes sjEpPlaneFly {
    0% { transform:translate(0,0) rotate(0deg) scale(1); }
    30% { transform:translate(40px,-20px) rotate(-15deg) scale(1.3); }
    50% { transform:translate(80px,-10px) rotate(-10deg) scale(.6); opacity:0; }
    51% { transform:translate(-60px,10px) rotate(10deg) scale(.6); opacity:0; }
    70% { opacity:1; transform:translate(-20px,5px) rotate(5deg) scale(1); }
    100% { transform:translate(0,0) rotate(0deg) scale(1.15); opacity:1; }
}
.sjolie-ep-type-card .sjolie-ep-vapor {
    position:absolute; pointer-events:none; z-index:2;
    width:6px; height:6px; border-radius:50%;
    background:rgba(200,169,110,.5);
    animation:sjEpVaporFade .6s ease-out forwards;
}
@keyframes sjEpVaporFade {
    0% { opacity:.8; transform:scale(1); }
    100% { opacity:0; transform:scale(2.5); }
}

/* Bodybuilding: flex pump */
.sjolie-ep-type-card[data-type="bodybuilding"].selected .sjolie-ep-type-icon {
    animation:sjEpFlexPump .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sjEpFlexPump {
    0% { transform:scale(1) rotate(0deg); }
    15% { transform:scale(1.4) rotate(-8deg); }
    30% { transform:scale(1.6) rotate(5deg); }
    45% { transform:scale(1.3) rotate(-3deg); }
    60% { transform:scale(1.5) rotate(2deg); }
    80% { transform:scale(1.2) rotate(0deg); }
    100% { transform:scale(1.15) rotate(0deg); }
}
.sjolie-ep-type-card .sjolie-ep-strength {
    position:absolute; pointer-events:none; z-index:2;
    width:3px; border-radius:2px;
    background:linear-gradient(to top, var(--sj-gold), transparent);
    animation:sjEpStrengthBurst .5s ease-out forwards;
    transform-origin:bottom center;
}
@keyframes sjEpStrengthBurst {
    0% { opacity:1; height:0; }
    50% { opacity:1; height:var(--h); }
    100% { opacity:0; height:var(--h); transform:translateY(var(--ty)); }
}

/* Custom: star spin */
.sjolie-ep-type-card[data-type="custom"].selected .sjolie-ep-type-icon {
    animation:sjEpStarSpin .8s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sjEpStarSpin {
    0% { transform:scale(1) rotate(0deg); }
    40% { transform:scale(1.5) rotate(180deg); }
    70% { transform:scale(1.3) rotate(300deg); }
    100% { transform:scale(1.15) rotate(360deg); }
}
.sjolie-ep-type-card .sjolie-ep-ministar {
    position:absolute; pointer-events:none; z-index:3;
    font-size:.75rem; opacity:0;
    animation:sjEpMiniStarBurst .7s ease-out forwards;
}
@keyframes sjEpMiniStarBurst {
    0% { opacity:1; transform:translate(0,0) scale(.5); }
    100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(1.3); }
}

/* Wedding: icon heartbeat pulse */
.sjolie-ep-type-card[data-type="wedding"].selected .sjolie-ep-type-icon {
    animation:sjEpRingPulse .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sjEpRingPulse {
    0% { transform:scale(1); }
    30% { transform:scale(1.5); }
    50% { transform:scale(1.2); }
    70% { transform:scale(1.4); }
    100% { transform:scale(1.15); }
}

.sjolie-ep-type-name {
    font-size:.88rem; font-weight:600; color:var(--sj-charcoal);
    position:relative; z-index:1;
}
.sjolie-ep-type-card.selected .sjolie-ep-type-name { color:var(--sj-gold); }

.sjolie-ep-type-check {
    position:absolute; top:10px; right:10px;
    width:22px; height:22px; border-radius:50%;
    background:var(--sj-gold); color:#fff; font-size:.7rem;
    display:flex; align-items:center; justify-content:center;
    transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sjolie-ep-type-card.selected .sjolie-ep-type-check { transform:scale(1); }

.sjolie-ep-custom-name-wrap { margin-top:14px; display:none; }
.sjolie-ep-custom-name-wrap.show { display:block; }
.sjolie-ep-custom-input {
    width:100%; padding:12px 16px; border:2px solid #E8E2D8;
    border-radius:10px; font-family:'Inter',sans-serif; font-size:.92rem;
    color:var(--sj-charcoal); outline:none; transition:border-color .3s ease;
}
.sjolie-ep-custom-input:focus { border-color:var(--sj-gold); }

/* Date Picker */
.sjolie-ep-date-wrap { text-align:center; }
.sjolie-ep-date-input {
    font-family:'Inter',sans-serif; font-size:1.05rem; padding:14px 24px;
    border:2px solid #E8E2D8; border-radius:12px; background:#fff;
    color:var(--sj-charcoal); cursor:pointer; width:100%; max-width:280px;
    text-align:center; outline:none;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.sjolie-ep-date-input:focus {
    border-color:var(--sj-gold); box-shadow:0 0 0 4px rgba(200,169,110,.1);
}

/* Client Name Input (Step 3) */
.sjolie-ep-client-step-wrap { text-align:center; }
.sjolie-ep-client-input {
    width:100%; max-width:380px; padding:14px 20px;
    border:2px solid #E8E2D8; border-radius:12px; background:#fff;
    font-family:'Inter',sans-serif; font-size:.95rem;
    color:var(--sj-charcoal); outline:none;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.sjolie-ep-client-input:focus {
    border-color:var(--sj-gold); box-shadow:0 0 0 4px rgba(200,169,110,.1);
}
.sjolie-ep-client-input::placeholder { color:#B0A99F; }
.sjolie-ep-client-hint { font-size:.78rem; color:#8A847C; margin-top:10px; }
.sjolie-event-planner .sjolie-ep-client-next-btn {
    display:inline-block; margin-top:18px; padding:12px 32px;
    background:var(--sj-gold); color:#fff; border:none; border-radius:12px;
    font-family:'Inter',sans-serif; font-size:.9rem; font-weight:600;
    cursor:pointer; transition:all .3s ease;
}
.sjolie-event-planner .sjolie-ep-client-next-btn:hover {
    background:#B89A5E; transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(200,169,110,.3);
}

/* Mode Cards */
.sjolie-ep-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sjolie-ep-mode-card {
    padding:22px 18px; border:2px solid #E8E2D8; border-radius:14px;
    background:#fff; cursor:pointer; text-align:left;
    transition:all .3s ease; position:relative;
}
.sjolie-ep-mode-card:hover {
    border-color:var(--sj-gold); transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(200,169,110,.1);
}
.sjolie-ep-mode-card.selected {
    border-color:var(--sj-gold); background:linear-gradient(135deg, #FBF7EF, #fff);
}
.sjolie-ep-mode-icon { font-size:1.5rem; margin-bottom:8px; display:block; }
.sjolie-ep-mode-name { font-weight:600; font-size:.92rem; margin-bottom:4px; color:var(--sj-charcoal); }
.sjolie-ep-mode-desc { font-size:.78rem; color:#8A847C; line-height:1.4; }
.sjolie-ep-mode-check {
    position:absolute; top:10px; right:10px;
    width:22px; height:22px; border-radius:50%;
    background:var(--sj-gold); color:#fff; font-size:.7rem;
    display:flex; align-items:center; justify-content:center;
    transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sjolie-ep-mode-card.selected .sjolie-ep-mode-check { transform:scale(1); }

/* Custom Fields */
.sjolie-ep-custom-fields {
    display:flex; flex-direction:column; gap:16px;
    max-width:380px; margin:0 auto;
}
.sjolie-ep-field-row {
    display:flex; align-items:center; gap:14px;
    background:#FAF8F5; padding:12px 16px; border-radius:12px;
    border:1px solid #E8E2D8;
}
.sjolie-ep-field-icon { font-size:1.2rem; flex-shrink:0; }
.sjolie-ep-field-label { flex:1; font-size:.9rem; font-weight:500; }
.sjolie-ep-field-input {
    width:64px; padding:8px; border:1px solid #E8E2D8; border-radius:8px;
    text-align:center; font-family:'Inter',sans-serif; font-size:.9rem;
    color:var(--sj-charcoal); outline:none;
}
.sjolie-ep-field-input:focus { border-color:var(--sj-gold); }
.sjolie-ep-field-suffix { font-size:.8rem; color:#8A847C; white-space:nowrap; }

.sjolie-event-planner .sjolie-ep-generate-btn {
    display:block; margin:20px auto 0; padding:14px 32px;
    background:var(--sj-gold); color:#fff; border:none; border-radius:12px;
    font-family:'Inter',sans-serif; font-size:.92rem; font-weight:600;
    cursor:pointer; transition:all .3s ease;
}
.sjolie-event-planner .sjolie-ep-generate-btn:hover {
    background:#B89A5E; transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(200,169,110,.3);
}

/* Results Panel */
.sjolie-ep-results-panel {
    background:linear-gradient(145deg, #1E1B19, #2D2926);
    border-radius:20px; padding:36px; color:#E8E2D8;
    border:1px solid rgba(200,169,110,.2);
    box-shadow:0 8px 40px rgba(0,0,0,.15);
    position:relative; overflow:hidden;
}
.sjolie-ep-results-panel::before {
    content:''; position:absolute; top:-60%; right:-20%;
    width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(200,169,110,.06), transparent 70%);
}
.sjolie-ep-results-header { text-align:center; margin-bottom:30px; position:relative; }
.sjolie-ep-results-title {
    font-family:'Playfair Display',serif; font-size:1.5rem;
    color:#fff; margin-bottom:8px;
}
.sjolie-ep-results-date { font-size:.88rem; color:var(--sj-gold); }

/* Countdown Ring */
.sjolie-ep-countdown-ring {
    width:120px; height:120px; margin:20px auto;
    position:relative; display:flex; align-items:center; justify-content:center;
}
.sjolie-ep-countdown-ring svg {
    position:absolute; inset:0; width:100%; height:100%;
    transform:rotate(-90deg);
}
.sjolie-ep-countdown-ring circle { fill:none; stroke-width:3; cx:60; cy:60; r:56; }
.sjolie-ep-countdown-ring .sjolie-ep-ring-bg { stroke:rgba(200,169,110,.15); }
.sjolie-ep-countdown-ring .sjolie-ep-ring-fill {
    stroke:var(--sj-gold); stroke-dasharray:352;
    stroke-dashoffset:352; stroke-linecap:round;
    transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.sjolie-ep-countdown-number {
    font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:700;
    color:#fff; position:relative;
}
.sjolie-ep-countdown-label {
    font-size:.78rem; color:var(--sj-gold); text-align:center;
    margin-top:-4px; letter-spacing:.04em;
}

/* Client name in results */
.sjolie-ep-results-client {
    text-align:center; margin-bottom:20px; position:relative;
}
.sjolie-ep-results-client-label {
    font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--sj-gold); margin-bottom:2px;
}
.sjolie-ep-results-client-value {
    font-family:'Playfair Display',serif; font-size:1.1rem; color:#fff;
}

/* Timeline items in results */
.sjolie-ep-timeline { position:relative; padding-left:44px; margin:28px 0; }
.sjolie-ep-timeline::before {
    content:''; position:absolute; left:17px; top:0; bottom:0; width:2px;
    background:rgba(200,169,110,.15);
}
.sjolie-ep-tl-item {
    position:relative; padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    opacity:0; transform:translateX(-10px);
    animation:sjEpTlSlide .4s ease forwards;
}
.sjolie-ep-tl-item:last-child { border-bottom:none; }
@keyframes sjEpTlSlide { to { opacity:1; transform:translateX(0); } }

.sjolie-ep-tl-dot {
    position:absolute; left:-36px; top:18px;
    width:28px; height:28px; border-radius:50%;
    background:rgba(200,169,110,.1); border:2px solid rgba(200,169,110,.25);
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
    z-index:1;
}
.sjolie-ep-tl-item.sjolie-ep-event-item .sjolie-ep-tl-dot {
    background:var(--sj-gold); border-color:var(--sj-gold-light);
    width:34px; height:34px; left:-39px;
    box-shadow:0 0 20px rgba(200,169,110,.4); font-size:1rem;
}
.sjolie-ep-tl-item.sjolie-ep-past-item .sjolie-ep-tl-label { color:#6B6560; text-decoration:line-through; }
.sjolie-ep-tl-item.sjolie-ep-today-item .sjolie-ep-tl-dot {
    background:var(--sj-gold); border-color:var(--sj-gold);
    box-shadow:0 0 14px rgba(200,169,110,.5);
}
.sjolie-ep-tl-label { font-weight:600; font-size:.95rem; color:#fff; margin-bottom:2px; }
.sjolie-ep-tl-date { font-size:.84rem; color:var(--sj-gold); margin-bottom:2px; }
.sjolie-ep-tl-note { font-size:.76rem; color:#A09A92; }

.sjolie-ep-tl-item.sjolie-ep-event-item {
    padding-top:22px; margin-top:8px; border-top:1px solid rgba(200,169,110,.15);
}
.sjolie-ep-tl-item.sjolie-ep-event-item .sjolie-ep-tl-label { font-size:1.1rem; color:var(--sj-gold); }

/* Tips */
.sjolie-ep-tips {
    margin:24px 0; padding:20px 24px;
    background:rgba(200,169,110,.06); border:1px solid rgba(200,169,110,.1);
    border-radius:14px;
}
.sjolie-ep-tips h5 {
    font-family:'Playfair Display',serif; font-size:1rem; color:var(--sj-gold);
    margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em;
}
.sjolie-ep-tip-item { font-size:.82rem; color:#C8C2B8; margin-bottom:8px; line-height:1.5; }

/* Rinse Guide */
.sjolie-ep-rinse {
    padding:20px 24px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
}
.sjolie-ep-rinse h5 {
    font-family:'Playfair Display',serif; font-size:1rem; color:var(--sj-gold);
    margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em;
}
.sjolie-ep-rinse-item {
    font-size:.82rem; color:#C8C2B8; padding:6px 0; line-height:1.5;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.sjolie-ep-rinse-item:last-child { border-bottom:none; }
.sjolie-ep-rinse-item strong { color:#E8E2D8; }

/* Save Button */
.sjolie-event-planner .sjolie-ep-save-btn {
    display:block; width:100%; max-width:300px; margin:28px auto 0;
    padding:14px 28px; font-family:'Inter',sans-serif; font-size:.92rem;
    font-weight:600; background:var(--sj-gold); color:#1E1B19;
    border:none; border-radius:12px; cursor:pointer;
    transition:all .3s ease;
}
.sjolie-event-planner .sjolie-ep-save-btn:hover {
    background:var(--sj-gold-light); transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(200,169,110,.3);
}

/* Reset button */
.sjolie-event-planner .sjolie-reset-event {
    padding:8px 16px; border:1px solid #E8E2D8; border-radius:8px;
    background:#fff; font-family:'Inter',sans-serif; font-size:.82rem;
    color:var(--sj-charcoal); cursor:pointer; transition:all .3s ease;
}
.sjolie-event-planner .sjolie-reset-event:hover { border-color:var(--sj-gold); color:var(--sj-gold); }

/* Responsive */
@media (max-width:600px) {
    .sjolie-ep-step { padding-left:52px; }
    .sjolie-ep-stepper-rail { left:16px; }
    .sjolie-ep-dot { left:4px; }
    .sjolie-ep-type-grid { grid-template-columns:1fr; }
    .sjolie-ep-mode-grid { grid-template-columns:1fr; }
    .sjolie-ep-results { padding:24px 18px; }
}

/* ═══ Representative Lookup ══════════════════════ */
.sjolie-rep-lookup { max-width:620px; margin:0 auto; }

/* Search Card */
.sjolie-rep-search-card {
    background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    padding:28px; text-align:center; box-shadow:var(--sj-shadow); margin-bottom:24px;
}
.sjolie-rep-search-row {
    display:flex; gap:12px; max-width:480px; margin:0 auto;
}
.sjolie-rep-search-field {
    flex:1; font-family:'Inter',sans-serif; font-size:.95rem; padding:14px 18px;
    border:2px solid #E8E2D8; border-radius:var(--sj-radius); background:#fff;
    color:var(--sj-charcoal); transition:border-color var(--sj-transition);
}
.sjolie-rep-search-field:focus { border-color:var(--sj-gold); outline:none; }
.sjolie-wrap .sjolie-rep-search-submit {
    white-space:nowrap; cursor:pointer; border:none;
    padding:14px 24px; font-size:.9rem;
    -webkit-tap-highlight-color:rgba(200,169,110,.3);
    touch-action:manipulation;
    -webkit-appearance:none;
    appearance:none;
    position:relative;
    z-index:1;
}
.sjolie-rep-search-hint {
    font-size:.78rem; color:#8A847C; margin:12px 0 0; }

/* Loading */
.sjolie-rep-loading {
    text-align:center; padding:40px 20px; color:#8A847C;
    font-family:'Inter',sans-serif; font-size:.9rem;
}
.sjolie-rep-spinner {
    width:36px; height:36px; margin:0 auto 14px;
    border:3px solid #E8E2D8; border-top-color:var(--sj-gold);
    border-radius:50%; animation:sjolieRepSpin .8s linear infinite;
}
@keyframes sjolieRepSpin { to { transform:rotate(360deg); } }

/* Result Panels */
.sjolie-rep-result-panel {
    background:linear-gradient(145deg, #1E1B19, #2D2926);
    border:1px solid rgba(200,169,110,.25);
    border-radius:var(--sj-radius);
    padding:32px;
    color:#E8E2D8;
    box-shadow:0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
    text-align:center;
}
.sjolie-rep-result-panel h4 {
    font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--sj-gold);
    margin:0 0 24px; text-transform:uppercase; letter-spacing:.06em;
}

/* Rep Card */
.sjolie-rep-card {
    display:flex; align-items:center; gap:24px;
    background:rgba(255,255,255,.04); border:1px solid rgba(200,169,110,.12);
    border-radius:var(--sj-radius); padding:24px 28px;
    text-align:left; max-width:420px; margin:0 auto;
}
.sjolie-rep-avatar {
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700;
    color:#1E1B19; flex-shrink:0;
    box-shadow:0 0 16px rgba(200,169,110,.3);
}
.sjolie-rep-info { flex:1; }
.sjolie-rep-name {
    font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:600;
    color:#fff; margin-bottom:10px;
}
.sjolie-rep-detail {
    font-size:.88rem; color:#C8C2B8; margin-bottom:6px;
    display:flex; align-items:center; gap:8px;
}
.sjolie-rep-detail:last-child { margin-bottom:0; }
.sjolie-rep-icon { font-size:1rem; color:var(--sj-gold); width:20px; text-align:center; }
.sjolie-rep-detail a {
    color:#C8C2B8; text-decoration:none; transition:color var(--sj-transition);
}
.sjolie-rep-detail a:hover { color:var(--sj-gold); }
.sjolie-rep-phone-hint {
    font-size:.72rem;
    color:#8A847C;
    font-style:italic;
    margin-top:4px;
    display:block;
}

/* Team Photo Card — Search Results (200×200 circle) */
.sjolie-rep-team-photo {
    text-align:center;
}
.sjolie-rep-team-img {
    width:200px;
    height:200px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 20px;
    display:block;
    border:3px solid rgba(200,169,110,.35);
    box-shadow:0 0 24px rgba(200,169,110,.2);
}
.sjolie-rep-team-name {
    font-family:'Playfair Display',serif;
    font-size:1.2rem;
    font-weight:600;
    color:#fff;
    margin-bottom:12px;
}
.sjolie-rep-team-contact {
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
}

/* No Rep Found */
.sjolie-rep-no-match-icon { font-size:2.4rem; margin-bottom:12px; }
.sjolie-rep-no-match h4 { color:#E8E2D8; }
.sjolie-rep-no-match p {
    font-size:.9rem; color:#A09A92; line-height:1.6; margin:0 auto 22px; max-width:400px;
}
.sjolie-wrap .sjolie-rep-cta-btn {
    display:inline-block; cursor:pointer; border:none; text-decoration:none;
    padding:14px 32px; font-size:.92rem; border-radius:999px;
    background:linear-gradient(135deg,var(--sj-gold-light),var(--sj-gold));
    color:#1E1B19; font-weight:600; letter-spacing:.03em;
    box-shadow:0 2px 12px rgba(200,169,110,.3);
    transition:all var(--sj-transition);
}
.sjolie-wrap .sjolie-rep-cta-btn:hover {
    background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-dark));
    box-shadow:0 4px 20px rgba(200,169,110,.45);
    transform:translateY(-1px); color:#1E1B19;
}

/* Error */
.sjolie-rep-error-panel {
    border-color:rgba(180,100,100,.25);
}
.sjolie-rep-error-panel p {
    font-size:.9rem; color:#D4A0A0; margin:0;
}

/* ═══ Responsive ═══════════════════════════════════ */
@media (max-width:640px) {
    .sjolie-card-grid { grid-template-columns:1fr; }
    .sjolie-card-grid-multi { grid-template-columns:1fr 1fr; }
    .sjolie-mix-selectors { grid-template-columns:1fr; }
    .sjolie-bottle-grid { grid-template-columns:1fr; }
    .sjolie-product-grid { grid-template-columns:1fr; }
    .sjolie-swatch { width:90px; height:90px; border-radius:18px; }
    .sjolie-big-step-num { font-size:5rem; margin-bottom:-25px; }
    .sjolie-wrap .sjolie-option-btn { padding:14px 16px; gap:12px; }
    .sjolie-opt-icon { width:36px; height:36px; border-radius:10px; font-size:.95rem; }
    .sjolie-prog-connector { width:36px; }
    .sjolie-landing-title,.sjolie-section-title { font-size:1.6rem; }
    .sjolie-dha-hero-value { font-size:2.2rem; }
    .sjolie-gauge-row { flex-wrap:wrap; }
    .sjolie-gauge-value { min-width:auto; text-align:left; }
    .sjolie-recipe-actions { flex-direction:column; }
    .sjolie-modal { padding:24px; }
    .sjolie-event-type-grid { grid-template-columns:1fr 1fr; }
    .sjolie-event-mode-grid { grid-template-columns:1fr; }
    .sjolie-event-results-panel { padding:20px; }
    .sjolie-rep-search-row { flex-direction:column; }
    .sjolie-rep-card { flex-direction:column; text-align:center; }
    .sjolie-rep-info { text-align:center; }
    .sjolie-rep-detail { justify-content:center; }
}
@media (max-width:420px) {
    .sjolie-card-grid-multi { grid-template-columns:1fr; }
    .sjolie-gg-hero-row { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════
   Glow & Grow Calculator
   ═══════════════════════════════════════════════════ */
.sjolie-gg-inputs { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }
.sjolie-gg-card {
    background:var(--sj-warm-white); border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    padding:28px 24px; box-shadow:var(--sj-shadow);
}
.sjolie-gg-card-title {
    font-family:'Playfair Display',serif; font-weight:600; font-size:1.15rem;
    margin:0 0 20px; color:var(--sj-charcoal); text-align:center;
}
.sjolie-gg-field { margin-bottom:18px; }
.sjolie-gg-field:last-child { margin-bottom:0; }
.sjolie-gg-field label {
    display:block; font-size:.82rem; font-weight:600; color:#6B6560;
    margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.sjolie-gg-input-wrap { position:relative; display:flex; align-items:center; }
.sjolie-gg-prefix {
    position:absolute; left:14px; font-size:.95rem; font-weight:600;
    color:var(--sj-gold); pointer-events:none;
}
.sjolie-gg-dollar .sjolie-gg-input { padding-left:30px; }
.sjolie-gg-input {
    width:100%; padding:12px 16px; border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    font-size:1rem; font-family:'Inter',sans-serif; color:var(--sj-charcoal);
    background:#fff; transition:border-color var(--sj-transition);
}
.sjolie-gg-input:focus { outline:none; border-color:var(--sj-gold); box-shadow:0 0 0 3px rgba(200,169,110,.15); }
.sjolie-gg-hint { display:block; font-size:.75rem; color:#A09A92; margin-top:4px; }

/* ── Pricing Tier Toggle ─────────────────────────── */
.sjolie-gg-pricing-toggle { display:flex; gap:10px; }
.sjolie-wrap .sjolie-gg-tier-btn {
    flex:1; padding:14px 16px; border:1px solid #E8E2D8; border-radius:var(--sj-radius);
    background:var(--sj-warm-white); cursor:pointer; text-align:center;
    transition:all var(--sj-transition); font-family:'Inter',sans-serif; color:#000; font-size:.88rem;
}
.sjolie-wrap .sjolie-gg-tier-btn strong {
    display:block; font-size:.88rem; color:var(--sj-charcoal); margin-bottom:2px;
}
.sjolie-gg-tier-btn span {
    display:block; font-size:.72rem; color:#A09A92; line-height:1.3;
}
.sjolie-wrap .sjolie-gg-tier-btn:hover { border-color:var(--sj-gold); background:#FBF7EF; }
.sjolie-wrap .sjolie-gg-tier-btn.selected {
    border-color:var(--sj-gold); background:var(--sj-gold);
}
.sjolie-wrap .sjolie-gg-tier-btn.selected strong { color:#fff; }
.sjolie-wrap .sjolie-gg-tier-btn.selected span { color:rgba(255,255,255,.8); }
.sjolie-gg-tier-detail {
    font-size:.75rem; color:#A09A92; margin-top:6px; text-align:center;
}

.sjolie-gg-slider-row { display:flex; align-items:center; gap:14px; }
.sjolie-gg-slider-row input[type="range"] { flex:1; accent-color:var(--sj-gold); }
.sjolie-gg-slider-value {
    min-width:70px; text-align:right; font-weight:600; font-size:.9rem; color:var(--sj-charcoal);
}

/* ── Results Dashboard ──────────────────────────── */
.sjolie-gg-results {
    background:linear-gradient(145deg,#1E1B19,#2D2926); border:1px solid rgba(200,169,110,.25);
    border-radius:var(--sj-radius); padding:36px 32px; color:#E8E2D8;
    box-shadow:0 4px 24px rgba(0,0,0,.15);
}
.sjolie-gg-results .sjolie-step-heading { color:#fff; margin-bottom:28px; }

.sjolie-gg-hero-row {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:28px;
}
.sjolie-gg-hero-stat {
    text-align:center; padding:20px 12px;
    background:rgba(255,255,255,.04); border:1px solid rgba(200,169,110,.12);
    border-radius:var(--sj-radius);
}
.sjolie-gg-hero-stat.sjolie-gg-hero-accent {
    background:rgba(200,169,110,.1); border-color:rgba(200,169,110,.3);
    position:relative; overflow:visible;
}

/* Floating dollar bills around Monthly Profit */
.sjolie-gg-bill {
    position:absolute; pointer-events:none; z-index:1;
    font-size:1.1rem; opacity:0;
    animation: sjolie-dollar-float var(--dollar-dur, 3s) ease-out forwards;
    animation-delay: var(--dollar-delay, 0s);
}
@keyframes sjolie-dollar-float {
    0%   { opacity:0; transform:translateY(0) translateX(var(--dollar-dx, 0px)) rotate(0deg) scale(.7); }
    15%  { opacity:.85; transform:translateY(-10px) translateX(var(--dollar-dx, 0px)) rotate(var(--dollar-rot, 10deg)) scale(1); }
    70%  { opacity:.6; }
    100% { opacity:0; transform:translateY(var(--dollar-dy, -120px)) translateX(var(--dollar-dx2, 5px)) rotate(var(--dollar-rot2, -15deg)) scale(.5); }
}
.sjolie-gg-hero-value {
    font-family:'Playfair Display',serif; font-weight:700; font-size:2rem;
    color:#fff; margin-bottom:4px;
}
.sjolie-gg-hero-accent .sjolie-gg-hero-value { color:var(--sj-gold); }
.sjolie-gg-hero-label { font-size:.78rem; color:#A09A92; text-transform:uppercase; letter-spacing:.05em; }

.sjolie-gg-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.sjolie-gg-detail-card {
    background:rgba(255,255,255,.04); border:1px solid rgba(200,169,110,.1);
    border-radius:var(--sj-radius); padding:20px;
}
.sjolie-gg-detail-card h5 {
    font-family:'Playfair Display',serif; font-weight:600; font-size:.95rem;
    color:var(--sj-gold); margin:0 0 14px; text-align:center;
}
.sjolie-gg-yearly-card { grid-column:1 / -1; }
.sjolie-gg-yearly-card .sjolie-gg-detail-list {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:8px 24px;
}
.sjolie-gg-detail-list { list-style:none; padding:0; margin:0; }
.sjolie-gg-detail-list li {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid rgba(200,169,110,.08);
    font-size:.88rem; color:#C8C2B8;
}
.sjolie-gg-detail-list li:last-child { border-bottom:none; }
.sjolie-gg-detail-list li span:last-child { font-weight:600; color:#E8E2D8; }
.sjolie-gg-detail-list li.sjolie-gg-total {
    border-top:1px solid rgba(200,169,110,.2); border-bottom:none; padding-top:10px; margin-top:4px;
}
.sjolie-gg-detail-list li.sjolie-gg-total span:last-child { color:var(--sj-gold); font-size:1rem; }
.sjolie-gg-detail-list li.sjolie-gg-roi span:last-child { color:#8FC49E; }

/* ── Motivational Callout ────────────────────────── */
.sjolie-gg-callout {
    text-align:center; padding:16px 24px; border-radius:var(--sj-radius);
    font-size:.9rem; line-height:1.5; color:#E8E2D8;
    border:1px solid rgba(200,169,110,.15); background:rgba(255,255,255,.03);
}
.sjolie-gg-callout-icon { font-size:1.1rem; margin-right:4px; }
.sjolie-gg-callout-great { border-color:rgba(143,196,158,.3); background:rgba(143,196,158,.08); }
.sjolie-gg-callout-good  { border-color:rgba(200,169,110,.3); background:rgba(200,169,110,.08); }
.sjolie-gg-callout-stretch { border-color:rgba(230,160,80,.3); background:rgba(230,160,80,.08); }
.sjolie-gg-callout-warn  { border-color:rgba(210,120,100,.3); background:rgba(210,120,100,.08); color:#E8B8B0; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width:680px) {
    .sjolie-gg-inputs { grid-template-columns:1fr; }
    .sjolie-gg-hero-row { grid-template-columns:1fr; }
    .sjolie-gg-detail-grid { grid-template-columns:1fr; }
    .sjolie-gg-yearly-card .sjolie-gg-detail-list { grid-template-columns:1fr; }
}

/* ===== SJOLIE SPRAY TAN TROUBLESHOOTER STYLES ===== */

#sjolie-troubleshooter {
	width: 100%;
	font-family: 'Inter', sans-serif;
	color: var(--sj-charcoal);
	position: relative;
	z-index: 1;
}

/* Step Container */
.sj-ts-step {
	display: none;
	opacity: 0;
	animation: sj-ts-fadeIn 0.6s ease-out forwards;
}

.sj-ts-step.sj-ts-active {
	display: block;
}

@keyframes sj-ts-fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== LANDING STEP ===== */
.sj-ts-landing {
	text-align: center;
	padding: 60px 40px;
}

.sj-ts-radar-container {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sj-ts-radar-ring {
	position: absolute;
	border: 3px solid var(--sj-gold);
	border-radius: 50%;
	opacity: 0.6;
	animation: sj-ts-radarPulse 2s ease-in-out infinite;
}

.sj-ts-radar-ring:nth-child(1) {
	width: 60px;
	height: 60px;
	animation-delay: 0s;
}

.sj-ts-radar-ring:nth-child(2) {
	width: 120px;
	height: 120px;
	animation-delay: 0.3s;
}

.sj-ts-radar-ring:nth-child(3) {
	width: 180px;
	height: 180px;
	animation-delay: 0.6s;
}

@keyframes sj-ts-radarPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.3;
	}
}

.sj-ts-radar-center {
	width: 20px;
	height: 20px;
	background: var(--sj-gold);
	border-radius: 50%;
	box-shadow: var(--sj-glow-gold);
	animation: sj-ts-glow 1.5s ease-in-out infinite;
}

@keyframes sj-ts-glow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(200, 169, 110, 0.6), 0 0 40px rgba(200, 169, 110, 0.3);
	}
	50% {
		box-shadow: 0 0 30px rgba(200, 169, 110, 0.8), 0 0 60px rgba(200, 169, 110, 0.5);
	}
}

.sj-ts-landing .sj-ts-title {
	font-family: 'Playfair Display', serif;
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--sj-charcoal);
	margin-bottom: 10px;
	letter-spacing: -1px;
}

.sj-ts-landing .sj-ts-subtitle {
	font-size: 1.1rem;
	color: var(--sj-gold);
	font-weight: 500;
	margin-bottom: 50px;
	letter-spacing: 2px;
}

.sj-ts-begin-btn {
	background: linear-gradient(135deg, var(--sj-gold) 0%, var(--sj-gold-light) 100%);
	color: white;
	border: none;
	padding: 16px 50px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 50px;
	cursor: pointer;
	transition: var(--sj-transition);
	box-shadow: var(--sj-shadow);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.sj-ts-begin-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(200, 169, 110, 0.5);
}

.sj-ts-begin-btn:active {
	transform: translateY(-1px);
}

/* ===== HEADER SECTION ===== */
.sj-ts-header-section {
	margin-bottom: 50px;
	text-align: center;
}

.sj-ts-progress-indicator {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 30px;
}

.sj-ts-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(200, 169, 110, 0.3);
	transition: var(--sj-transition);
}

.sj-ts-progress-dot.sj-ts-active {
	background-color: var(--sj-gold);
	width: 30px;
	border-radius: 4px;
}

.sj-ts-step-label {
	font-size: 0.85rem;
	color: var(--sj-gold);
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.sj-ts-step-title {
	font-family: 'Playfair Display', serif;
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--sj-charcoal);
	margin-bottom: 15px;
}

.sj-ts-step-description {
	font-size: 1rem;
	color: var(--sj-charcoal);
	opacity: 0.8;
	margin-bottom: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

/* ===== SYMPTOM CARDS ===== */
.sj-ts-symptoms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.sj-ts-symptom-card {
	background: linear-gradient(135deg, rgba(245, 240, 232, 0.9), rgba(250, 247, 242, 0.9));
	backdrop-filter: blur(10px);
	border: 2px solid rgba(200, 169, 110, 0.3);
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
	cursor: pointer;
	transition: var(--sj-transition);
	animation: sj-ts-slideInUp 0.5s ease-out forwards;
	opacity: 0;
}

@keyframes sj-ts-slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sj-ts-symptom-card:nth-child(1) { animation-delay: 0.1s; }
.sj-ts-symptom-card:nth-child(2) { animation-delay: 0.2s; }
.sj-ts-symptom-card:nth-child(3) { animation-delay: 0.3s; }
.sj-ts-symptom-card:nth-child(4) { animation-delay: 0.4s; }

.sj-ts-symptom-card:hover {
	transform: translateY(-8px);
	border-color: var(--sj-gold);
	box-shadow: 0 20px 40px rgba(200, 169, 110, 0.2);
}

.sj-ts-symptom-card.sj-ts-selected {
	background: linear-gradient(135deg, var(--sj-gold) 0%, var(--sj-gold-light) 100%);
	border-color: var(--sj-gold-dark);
	color: white;
}

.sj-ts-symptom-icon {
	font-size: 3rem;
	margin-bottom: 15px;
}

.sj-ts-symptom-card h3 {
	font-family: 'Playfair Display', serif;
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: inherit;
}

.sj-ts-symptom-card p {
	font-size: 0.9rem;
	color: inherit;
	opacity: 0.8;
}

/* ===== ANALYZING STEP ===== */
.sj-ts-analyzing-container {
	text-align: center;
	padding: 80px 40px;
	min-height: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.sj-ts-analyzing-title {
	font-family: 'Playfair Display', serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--sj-charcoal);
	margin-bottom: 50px;
	letter-spacing: 2px;
}

.sj-ts-progress-ring-container {
	position: relative;
	width: 160px;
	height: 160px;
	margin: 0 auto 50px;
}

.sj-ts-progress-ring {
	transform: rotate(-90deg);
	width: 160px;
	height: 160px;
}

.sj-ts-progress-ring-circle {
	transition: stroke-dashoffset 0.35s;
	transform-origin: 80px 80px;
	stroke: var(--sj-gold);
	fill: transparent;
	stroke-width: 3;
}

.sj-ts-particle-canvas {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

.sj-ts-scan-bar {
	width: 300px;
	height: 4px;
	background: rgba(200, 169, 110, 0.2);
	border-radius: 2px;
	margin: 0 auto 30px;
	overflow: hidden;
}

.sj-ts-scan-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--sj-gold), var(--sj-gold-light), var(--sj-gold));
	border-radius: 2px;
	animation: sj-ts-scanFill 2s ease-in-out forwards;
	box-shadow: 0 0 10px var(--sj-gold);
}

@keyframes sj-ts-scanFill {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.sj-ts-analyzing-text {
	font-size: 1rem;
	color: var(--sj-gold);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ===== DIAGNOSIS STEP ===== */
.sj-ts-diagnosis-container {
	padding: 40px 0;
}

.sj-ts-diagnosis-header {
	text-align: center;
	margin-bottom: 50px;
}

.sj-ts-diagnosis-header .sj-ts-step-title {
	margin-bottom: 15px;
}

.sj-ts-selected-symptom-display {
	display: inline-block;
	background: linear-gradient(135deg, var(--sj-gold) 0%, var(--sj-gold-light) 100%);
	color: white;
	padding: 8px 20px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 20px;
}

.sj-ts-intro-text {
	font-size: 1rem;
	color: var(--sj-charcoal);
	opacity: 0.8;
	max-width: 700px;
	margin: 0 auto 50px;
	line-height: 1.8;
}

.sj-ts-causes-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sj-ts-cause-card {
	background: linear-gradient(135deg, rgba(245, 240, 232, 0.7), rgba(250, 247, 242, 0.7));
	backdrop-filter: blur(10px);
	border: 2px solid rgba(200, 169, 110, 0.3);
	border-radius: 12px;
	overflow: hidden;
	animation: sj-ts-slideInUp 0.5s ease-out forwards;
	opacity: 0;
	transition: var(--sj-transition);
}

.sj-ts-cause-card:nth-child(1) { animation-delay: 0.1s; }
.sj-ts-cause-card:nth-child(2) { animation-delay: 0.2s; }
.sj-ts-cause-card:nth-child(3) { animation-delay: 0.3s; }
.sj-ts-cause-card:nth-child(4) { animation-delay: 0.4s; }

.sj-ts-cause-card:hover {
	border-color: var(--sj-gold);
	box-shadow: 0 10px 30px rgba(200, 169, 110, 0.15);
}

.sj-ts-cause-header {
	padding: 25px 30px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--sj-transition);
}

.sj-ts-cause-card.sj-ts-expanded .sj-ts-cause-header {
	background: linear-gradient(135deg, rgba(200, 169, 110, 0.1), rgba(200, 169, 110, 0.05));
	border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

.sj-ts-cause-header-left {
	flex: 1;
	text-align: left;
	display: flex;
	align-items: center;
}

.sj-ts-cause-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sj-gold);
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: 700;
	margin-right: 15px;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.sj-ts-cause-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--sj-charcoal);
}

.sj-ts-cause-toggle-icon {
	font-size: 1.5rem;
	color: var(--sj-gold);
	transition: transform var(--sj-transition);
	margin-left: auto;
	flex-shrink: 0;
}

.sj-ts-cause-card.sj-ts-expanded .sj-ts-cause-toggle-icon {
	transform: rotate(180deg);
}

.sj-ts-cause-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--sj-transition);
}

.sj-ts-cause-card.sj-ts-expanded .sj-ts-cause-content {
	max-height: 1000px;
}

.sj-ts-cause-body {
	padding: 0 30px 25px 30px;
}

.sj-ts-cause-description {
	font-size: 0.95rem;
	color: var(--sj-charcoal);
	line-height: 1.7;
	margin-bottom: 20px;
	opacity: 0.85;
}

.sj-ts-severity-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.sj-ts-severity-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sj-charcoal);
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-ts-severity-dots {
	display: flex;
	gap: 6px;
}

.sj-ts-severity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--sj-gold);
}

.sj-ts-severity-dot.sj-ts-empty {
	background-color: rgba(200, 169, 110, 0.2);
}

.sj-ts-solution-section {
	background: linear-gradient(135deg, rgba(200, 169, 110, 0.08), rgba(212, 186, 133, 0.05));
	border-left: 4px solid var(--sj-gold);
	padding: 20px;
	border-radius: 8px;
	margin-top: 15px;
}

.sj-ts-solution-label {
	font-weight: 700;
	color: var(--sj-gold);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.sj-ts-solution-text {
	font-size: 0.95rem;
	color: var(--sj-charcoal);
	line-height: 1.7;
}

/* ===== NAVIGATION ===== */
.sj-ts-nav-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
	padding-top: 30px;
	border-top: 2px solid rgba(200, 169, 110, 0.2);
}

.sj-ts-back-btn, .sj-ts-next-btn {
	padding: 12px 30px;
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: 50px;
	cursor: pointer;
	transition: var(--sj-transition);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
}

.sj-ts-back-btn {
	background: transparent;
	color: var(--sj-gold);
	border: 2px solid var(--sj-gold);
}

.sj-ts-back-btn:hover {
	background: var(--sj-gold);
	color: white;
}

.sj-ts-next-btn {
	background: linear-gradient(135deg, var(--sj-gold) 0%, var(--sj-gold-light) 100%);
	color: white;
	box-shadow: 0 10px 30px rgba(200, 169, 110, 0.3);
}

.sj-ts-next-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(200, 169, 110, 0.4);
}

.sj-ts-next-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.sj-ts-nav-spacer {
	width: 80px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.sj-ts-landing .sj-ts-title {
		font-size: 2.5rem;
	}

	.sj-ts-step-title {
		font-size: 2rem;
	}

	.sj-ts-symptoms-grid {
		grid-template-columns: 1fr;
	}

	.sj-ts-analyzing-container {
		min-height: 400px;
		padding: 40px 20px;
	}

	.sj-ts-analyzing-title {
		font-size: 1.8rem;
	}

	.sj-ts-scan-bar {
		width: 250px;
	}

	.sj-ts-cause-card {
		border-radius: 8px;
	}

	.sj-ts-cause-header {
		padding: 20px;
	}

	.sj-ts-cause-body {
		padding: 0 20px 20px 20px;
	}

	.sj-ts-nav-buttons {
		flex-direction: column;
		gap: 15px;
		border: none;
		padding-top: 0;
		margin-top: 40px;
	}

	.sj-ts-back-btn, .sj-ts-next-btn {
		width: 100%;
	}

	.sj-ts-nav-spacer {
		display: none;
	}

	.sj-ts-landing {
		padding: 40px 20px;
	}

	.sj-ts-radar-container {
		width: 150px;
		height: 150px;
	}

	.sj-ts-radar-ring {
		border-width: 2px;
	}

	.sj-ts-symptom-card {
		padding: 20px 15px;
	}
}

@media (max-width: 480px) {
	.sj-ts-landing .sj-ts-title {
		font-size: 2rem;
	}

	.sj-ts-step-title {
		font-size: 1.5rem;
	}

	.sj-ts-step-label {
		font-size: 0.75rem;
	}

	.sj-ts-cause-title {
		font-size: 1.1rem;
	}

	.sj-ts-cause-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.sj-ts-cause-toggle-icon {
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.sj-ts-scan-bar {
		width: 200px;
	}
}