/* Rain of Soul - modernized content styling (used both inside .rios-content on translated
   pages and directly on native Elementor pages like the NO originals, which have no
   .rios-content wrapper - so the palette must live on :root, not scoped to .rios-content).

   COLOR SYSTEM (Task 17) - one clear hierarchy, reused everywhere, nothing else introduced:
   --rios-primary       Brand color. Deep forest green, drawn from the site's existing
                         logo/product palette. Used for links, headings accents, and as the
                         base of the primary CTA gradient.
   --rios-primary-dark   Darker shade of the brand color. Pairs with --rios-primary in the
                         primary CTA gradient and headings, and stands alone for hover states.
   --rios-accent         The ONE secondary hue on the site (warm amber) - reserved for
                         small, sparing highlights: pick badges, star ratings. Never used
                         for CTA buttons, so it can't compete with them for attention.
   --rios-bg-soft        Soft tinted background for callout sections (disclosure, banners,
                         alternating table rows) - visually separates content without adding
                         a hard border or a new color.
   --rios-border          Neutral hairline border color used on every card/table/box, so
                         edges read as "structure" rather than as decoration.
   --rios-text            Body text color - a near-black with a slight green cast, not pure
                         black, so long-form reading stays soft.

   CTA HIERARCHY:
   Primary CTA   (.rios-btn)         - solid --rios-primary -> --rios-primary-dark gradient,
                                        white text, pill shape, shadow. The one color on the
                                        page that's a solid fill - it's meant to catch the eye
                                        on a quick scan. Used for the single main "buy" action.
   Secondary CTA (.rios-btn-outline) - white fill, --rios-primary border and text. Same shape
                                        and size as the primary button so it reads as a button,
                                        but the outline (not a fill) keeps it a clear second
                                        choice next to a primary CTA.
   Information link (plain <a>)      - underlined --rios-primary text, no button chrome at
                                        all - reserved for inline references, never for a
                                        purchase action. */
:root { --rios-primary:#0d6e5c; --rios-primary-dark:#094f42; --rios-accent:#e8a33d; --rios-bg-soft:#f4f9f7; --rios-border:#dfeee9; --rios-text:#1c2b27; }
.rios-content { max-width: 780px; margin: 0 auto; color: var(--rios-text); font-size: 1.05rem; line-height: 1.7; }
.rios-content h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; margin-bottom: 0.6em; color: var(--rios-primary-dark); }
.rios-content h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 2.2em; margin-bottom: 0.6em; color: var(--rios-primary-dark); border-bottom: 2px solid var(--rios-border); padding-bottom: 0.3em; }
.rios-content h3 { font-size: 1.15rem; margin-top: 1.4em; margin-bottom: 0.4em; color: var(--rios-primary); }
.rios-content p { margin: 0 0 1.1em; }
.rios-content ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.rios-content li { margin-bottom: 0.5em; }
.rios-content a { color: var(--rios-primary); text-decoration: underline; text-decoration-color: var(--rios-border); text-underline-offset: 2px; }
.rios-content a:hover { color: var(--rios-primary-dark); }

.rios-disclosure { background: var(--rios-bg-soft); border-left: 3px solid var(--rios-primary); padding: 0.9em 1.1em; border-radius: 8px; font-size: 0.92rem; color: #3b524c; margin: 1.2em 0 1.8em; }
.rios-disclosure em { font-style: normal; }

.rios-cta-wrap { text-align: center; margin: 1.8em 0; }
.rios-btn { display: inline-block; background: linear-gradient(135deg, var(--rios-primary), var(--rios-primary-dark)) !important; color: #fff !important; font-weight: 600; font-size: 1.05rem; padding: 0.85em 1.9em; border-radius: 999px; text-decoration: none !important; box-shadow: 0 6px 18px rgba(13,110,92,0.28); transition: transform .15s ease, box-shadow .15s ease; }
/* Elementor's lazy-background-image optimization applies `background-image:none !important`
   to descendants of any 4th+ .e-con.e-parent section until scrolled into view, which strips this
   button's gradient. The selector below matches with equal-or-higher specificity to win the tie. */
.rios-btn.rios-btn.rios-btn.rios-btn.rios-btn.rios-btn.rios-btn { background-image: linear-gradient(135deg, var(--rios-primary), var(--rios-primary-dark)) !important; }
.rios-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,110,92,0.35); color:#fff !important; }
.rios-btn-outline { display: inline-block; background: #fff !important; color: var(--rios-primary-dark) !important; font-weight: 600; padding: 0.75em 1.6em; border-radius: 999px; border: 2px solid var(--rios-primary); text-decoration: none !important; }
.rios-btn-outline:hover { background: var(--rios-bg-soft) !important; }
.rios-btn-small { font-size: 0.92rem; padding: 0.55em 1.3em; }

.rios-banner { background: var(--rios-bg-soft); border: 1px solid var(--rios-border); border-radius: 16px; padding: 1.6em; text-align: center; margin: 2.2em 0; }
.rios-banner p { margin-bottom: 0.9em; font-size: 1.05rem; color: var(--rios-primary-dark); font-weight: 500; }

.rios-ingredient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1em; margin: 1.2em 0 1.8em; }
.rios-ingredient-card { background: var(--rios-bg-soft); border: 1px solid var(--rios-border); border-radius: 12px; padding: 1.1em 1.2em; overflow: hidden; text-align: center; }
.rios-ingredient-card h3 { margin-top: 0; font-size: 1.05rem; }
.rios-ingredient-card p { margin-bottom: 0; font-size: 0.95rem; text-align: left; }
.rios-ingredient-card img { display: block; width: calc(100% + 2.4em); height: 140px; margin: -1.1em -1.2em 1em; max-width: none; object-fit: cover; object-position: center center; }

.rios-hero-img { display: block; width: 100%; height: 340px; max-width: 100%; object-fit: cover; object-position: center center; border-radius: 18px; margin: 1.2em auto 1em; box-shadow: 0 8px 24px rgba(13,110,92,0.15); }
.rios-badges-row { display: flex; align-items: center; justify-content: center; gap: 1.6em; margin: 0.6em auto 1.6em; flex-wrap: wrap; text-align: center; }
.rios-badges-row img { display: inline-block; height: 56px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }

.rios-content img { max-width: 100%; }

.rios-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1em; margin: 1.5em 0 2em; list-style: none !important; padding-left: 0 !important; }
.rios-product-grid li { margin-bottom: 0 !important; }
.rios-product-card { display: block; background: #fff; border: 1px solid var(--rios-border); border-radius: 14px; padding: 1.3em 1.4em; text-decoration: none !important; box-shadow: 0 2px 10px rgba(13,110,92,0.06); transition: transform .15s ease, box-shadow .15s ease; height: 100%; }
.rios-product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13,110,92,0.14); }
.rios-product-card .rios-pname { display:block; font-weight: 700; font-size: 1.1rem; color: var(--rios-primary-dark) !important; margin-bottom: 0.3em; }
.rios-product-card .rios-pdesc { display:block; font-size: 0.92rem; color: #4a5f5a; text-decoration: none; }

.rios-faq details { background: #fff; border: 1px solid var(--rios-border); border-radius: 10px; padding: 0.2em 1.1em; margin-bottom: 0.7em; }
.rios-faq summary { cursor: pointer; font-weight: 600; padding: 0.8em 0; color: var(--rios-primary-dark); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rios-faq summary::-webkit-details-marker { display: none; }
.rios-faq summary::after { content: '+'; font-size: 1.4rem; color: var(--rios-primary); margin-left: 1em; }
.rios-faq details[open] summary::after { content: '\2212'; }
.rios-faq details p { padding-bottom: 0.9em; margin-bottom: 0; color: #3b524c; }

.rios-hero { text-align: center; padding: 0.2em 0 1.6em; margin-bottom: 0.2em; }
.rios-hero h1 { margin-bottom: 0.5em; }
.rios-hero-desc { font-size: 1.1rem; color: #3b524c; max-width: 620px; margin: 0 auto 1.5em; }
.rios-hero-cta { display: flex; align-items: center; justify-content: center; gap: 0.9em; flex-wrap: wrap; }
.rios-hero-cta .rios-btn, .rios-hero-cta .rios-btn-outline { margin: 0; }

.rios-picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.3em; margin: 1.2em 0 2em; }
.rios-pick-card { position: relative; background: #fff; border: 1px solid var(--rios-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(13,110,92,0.06); transition: transform .15s ease, box-shadow .15s ease; }
.rios-pick-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13,110,92,0.14); }
.rios-pick-badge { position: absolute; top: 0.85em; left: 0.85em; background: var(--rios-accent); color: #fff; font-size: 0.74rem; font-weight: 700; padding: 0.35em 0.8em; border-radius: 999px; letter-spacing: .02em; z-index: 2; text-transform: uppercase; }
.rios-pick-img-link { display: block; }
.rios-pick-img { display: block; width: 100%; height: 190px; margin: 0; max-width: 100%; object-fit: cover; object-position: center center; }
.rios-pick-body { padding: 1.2em 1.3em 1.4em; display: flex; flex-direction: column; flex: 1; }
.rios-pick-name { display: block; font-size: 1.15rem; font-weight: 700; color: var(--rios-primary-dark) !important; margin: 0 0 0.4em; text-decoration: none !important; }
.rios-pick-desc { font-size: 0.92rem; color: #4a5f5a; margin: 0 0 0.8em; }
.rios-pick-meta { font-size: 0.88rem; margin: 0 0 0.35em; color: var(--rios-text); }
.rios-pick-meta strong { color: var(--rios-primary-dark); }
.rios-pick-cta { margin-top: auto; padding-top: 1em; text-align: center; }

.rios-pick-box { background: var(--rios-bg-soft); border: 1px solid var(--rios-border); border-radius: 16px; padding: 1.5em 1.6em 1.7em; margin: 1.8em 0; }
.rios-pick-box-eyebrow { display: flex; align-items: center; gap: 0.4em; font-size: 0.82rem; font-weight: 700; color: var(--rios-primary-dark); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1.1em; }
.rios-pick-box-body { display: flex; gap: 1.4em; flex-wrap: wrap; align-items: flex-start; }
.rios-pick-box-img { width: 130px; height: 130px; object-fit: cover; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(13,110,92,0.12); }
.rios-pick-box-content { flex: 1; min-width: 220px; }
.rios-pick-box-name { font-size: 1.25rem; font-weight: 700; color: var(--rios-primary-dark); margin: 0 0 0.4em; }
.rios-pick-box-reason { font-size: 0.95rem; color: #3b524c; margin: 0 0 0.9em; }
.rios-pick-box-benefits { list-style: none; padding: 0; margin: 0 0 0.9em; }
.rios-pick-box-benefits li { display: flex; gap: 0.55em; font-size: 0.92rem; margin-bottom: 0.45em; color: var(--rios-text); }
.rios-pick-box-benefits li::before { content: '\2713'; color: var(--rios-primary); font-weight: 700; flex-shrink: 0; }
.rios-pick-box-audience { font-size: 0.88rem; margin: 0 0 1.1em; color: #3b524c; }
.rios-pick-box-audience strong { color: var(--rios-primary-dark); }

.rios-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5em 0 2em; border: 1px solid var(--rios-border); border-radius: 14px; }
.rios-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.92rem; }
.rios-compare-table th { background: var(--rios-primary-dark); color: #fff !important; text-align: left; padding: 0.9em 1em; font-weight: 600; white-space: nowrap; }
.rios-compare-table td { padding: 0.9em 1em; border-top: 1px solid var(--rios-border); vertical-align: middle; }
.rios-compare-table tbody tr:nth-child(even) td { background: var(--rios-bg-soft); }
.rios-compare-table .rios-compare-name { font-weight: 700; color: var(--rios-primary-dark) !important; text-decoration: none !important; white-space: nowrap; }
.rios-compare-stars { color: var(--rios-accent); letter-spacing: 1px; white-space: nowrap; }
.rios-compare-table td.rios-compare-cta { text-align: center; }
@media (max-width: 640px) {
	.rios-compare-table { font-size: 0.85rem; }
	.rios-compare-table th, .rios-compare-table td { padding: 0.7em 0.8em; }
}

.rios-why { background: #fff; border: 1px solid var(--rios-border); border-left: 4px solid var(--rios-primary); border-radius: 12px; padding: 1.4em 1.6em; margin: 1.8em 0; }
.rios-why p { margin: 0 0 0.9em; font-size: 0.96rem; color: var(--rios-text); }
.rios-why p:last-child { margin-bottom: 0; }
.rios-why strong { color: var(--rios-primary-dark); }

.rios-sticky-cta { display: none; }
@media (max-width: 768px) {
	.rios-sticky-cta.rios-sticky-visible {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.8em;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9999;
		background: var(--rios-primary-dark);
		padding: 0.75em 1em calc(0.75em + env(safe-area-inset-bottom));
		box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
		animation: rios-sticky-in .25s ease;
	}
}
.rios-sticky-cta .rios-sticky-link { flex: 1; display: flex; align-items: center; gap: 0.4em; color: #fff !important; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; }
.rios-sticky-cta .rios-sticky-close { flex-shrink: 0; background: none; border: none; color: #fff; opacity: 0.75; font-size: 1.4rem; line-height: 1; padding: 0 0.2em; cursor: pointer; }
@keyframes rios-sticky-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rios-sticky-cta.rios-sticky-visible { animation: none; } }

.rios-direct-answer { background: var(--rios-bg-soft); border-radius: 12px; padding: 1.2em 1.4em; margin: 1.2em 0 1.6em; }
.rios-direct-answer .rios-da-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rios-primary); margin-bottom: 0.5em; }
.rios-direct-answer p { margin: 0; font-size: 1.02rem; color: var(--rios-text); }

.rios-quick-overview { list-style: none; margin: 0 0 1.8em; padding: 0; }
.rios-quick-overview li { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.6em 0; border-bottom: 1px solid var(--rios-border); font-size: 0.95rem; }
.rios-quick-overview li:last-child { border-bottom: none; }
.rios-quick-overview .rios-qo-num { flex-shrink: 0; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--rios-primary); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.rios-side-cta { display: none; }
@media (min-width: 1400px) {
	.rios-side-cta.rios-side-visible {
		display: block;
		position: fixed;
		top: 50%; right: 28px;
		transform: translateY(-50%);
		width: 220px;
		background: #fff;
		border: 1px solid var(--rios-border);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(13,110,92,0.16);
		padding: 1em 1.1em 1.2em;
		z-index: 500;
		animation: rios-side-in .3s ease;
	}
}
.rios-side-cta .rios-side-eyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rios-primary); margin-bottom: 0.7em; }
.rios-side-cta .rios-side-close { background: none; border: none; color: #9aabA6; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0; }
.rios-side-cta .rios-side-img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 10px; margin-bottom: 0.7em; }
.rios-side-cta .rios-side-name { display: block; font-weight: 700; color: var(--rios-primary-dark); font-size: 1rem; margin-bottom: 0.35em; }
.rios-side-cta .rios-side-benefit { display: block; font-size: 0.82rem; color: #4a5f5a; margin-bottom: 0.9em; line-height: 1.4; }
.rios-side-cta .rios-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 0.7em 0.5em; font-size: 0.9rem; }
@keyframes rios-side-in { from { opacity: 0; transform: translateY(-50%) translateX(16px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
@media (prefers-reduced-motion: reduce) { .rios-side-cta.rios-side-visible { animation: none; } }

.rios-related { margin: 2.4em 0 1.4em; }
.rios-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1em; margin-top: 1em; }
.rios-related-card { display: block; background: #fff; border: 1px solid var(--rios-border); border-radius: 12px; padding: 1em 1.1em; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.rios-related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,110,92,0.1); }
.rios-related-card .rios-related-tag { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rios-accent); margin-bottom: 0.4em; }
.rios-related-card .rios-related-name { display: block; font-weight: 700; color: var(--rios-primary-dark) !important; margin-bottom: 0.3em; font-size: 0.96rem; }
.rios-related-card .rios-related-desc { display: block; font-size: 0.85rem; color: #4a5f5a; }

.rios-author-box { display: flex; gap: 1em; align-items: center; background: var(--rios-bg-soft); border: 1px solid var(--rios-border); border-radius: 14px; padding: 1em 1.3em; margin: 1.2em 0 1.6em; }
.rios-author-avatar { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--rios-primary), var(--rios-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.rios-author-info .rios-author-name { display: block; font-weight: 700; color: var(--rios-primary-dark); margin-bottom: 0.15em; font-size: 0.95rem; }
.rios-author-info .rios-author-bio { display: block; font-size: 0.84rem; color: #4a5f5a; }

.rios-breadcrumb { padding: 0.9em 0 0; margin: 0 0 0.2em; font-size: 0.82rem; color: #6b7f7a; overflow-x: auto; white-space: nowrap; }
.rios-breadcrumb, .rios-breadcrumb p { display: block; }
.rios-breadcrumb a { color: #6b7f7a !important; text-decoration: none !important; }
.rios-breadcrumb a:hover { color: var(--rios-primary) !important; text-decoration: underline !important; }