/* ====================================
   BOTICA LABS - MAIN STYLES
   ==================================== */

/* ====================================
   SKIP TO CONTENT (Accessibility)
   ==================================== */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-deep);
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* Focus styles for keyboard accessibility (WCAG 2.1 AA) */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    /* Brand color values live in the Apothecary Editorial theme block
       further down (search "APOTHECARY EDITORIAL THEME"). That later
       :root supersedes any colors set here, so only non-color tokens
       are defined in this block. */

    /* Typography */
    --font-serif: 'Marcellus', Georgia, serif;   /* carved Roman capitals tier (Brand Book F3) */
    --font-sans:  'Source Sans 3', Arial, sans-serif;   /* clarity tier: body, labels, UI */

    /* Spacing */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  1.5rem;
    --spacing-lg:  2rem;
    --spacing-xl:  3rem;
    --spacing-xxl: 4rem;

    /* Transitions */
    --transition: all 0.3s ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--color-cream);
    background-color: #EFE7D2;
    line-height: 1.6;
}

.page-wrap {
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--color-deep);
    border-left: 1px solid var(--color-gold);
    border-right: 1px solid var(--color-gold);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ====================================
   HEADER & NAVIGATION
   ==================================== */

.header {
    background-color: var(--color-forest);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.header-logo img {
    height: 120px;
    width: auto;
    object-fit: contain;
}

.header-logo span {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--color-gold);
    letter-spacing: 0.02em;
}

.nav {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-link {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cream);
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.language-selector {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    margin-left: var(--spacing-lg);
}

.lang-btn {
    background: none;
    border: 2px solid var(--color-muted);
    color: var(--color-cream);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    border-radius: 3px;
    transition: var(--transition);
}

.lang-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lang-btn.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-deep);
}

/* ====================================
   HERO
   ==================================== */

.hero {
    background: #F7F2E6;
    color: var(--color-cream);
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero::after {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.hero-logo-img {
    height: 238px;
    width: auto;
    max-width: 422px;
    object-fit: contain;
    margin-bottom: var(--spacing-lg);
    image-rendering: auto;
}

/* ====================================
   REUSABLE FRAME
   ==================================== */
.frame-beige {
    background-color: #f7f2e6;
    padding: 0.5rem;
    border-radius: 6px;
    display: block;
    margin: 0 auto 2rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
}

.hero-title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-cream);
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.85;
    margin-bottom: var(--spacing-xl);
    color: var(--color-cream);
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ====================================
   BUTTONS
   ==================================== */

.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-deep);
}

.btn-primary:hover {
    background-color: #8F3D2F;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 145, 77, 0.3);
}

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

.btn-outline:hover {
    background-color: var(--color-gold);
    color: var(--color-deep);
    transform: translateY(-2px);
}

/* ====================================
   SECTIONS — GENERAL
   ==================================== */

section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    animation: fadeInUp 0.6s ease-out;
}

.section-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-cream);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-subtitle {
    font-size: 1rem;
    color: var(--color-cream);
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    opacity: 0.7;
}

/* ====================================
   HOME — FEATURE CARDS
   ==================================== */

.features {
    background-color: var(--color-olive);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.card {
    background-color: var(--color-forest);
    border-radius: 4px;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    border-top: 3px solid transparent;
}

.card:hover {
    transform: translateY(-4px);
    border-top-color: var(--color-gold);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.card-img-wrap {
    width: 100%;
    height: auto;
    min-height: 260px;
    overflow: visible;
    position: relative;
    background-color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.card-img {
    position: absolute;
    display: block;
}

/* 2×2 grid image — show top-left cell only */
.card-img--tl {
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
}

/* 3-wide grid image — show center cell only */
.card-img--mid {
    width: 300%;
    height: 100%;
    top: 0;
    left: -100%;
}

/* Full image — centered, no crop */
.card-img--contain {
    position: static;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Never let <picture> break parent centering in content areas */
.card-img-wrap picture,
.hero picture,
.section-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Regular single image cards */
.card-img--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
}

.card-text {
    font-size: 0.9rem;
    color: var(--color-cream);
    opacity: 0.8;
    line-height: 1.6;
}

/* ====================================
   PRODUCT IMAGE CARDS
   ==================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.product-card {
    background-color: var(--color-forest);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: var(--transition);
    border-top: 3px solid var(--color-gold);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.product-card-img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background-color: var(--color-cream);
    padding: var(--spacing-md);
}

.product-card-body {
    padding: var(--spacing-lg);
}

.product-card-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
}

.product-card-text {
    font-size: 0.9rem;
    color: var(--color-cream);
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Page hero image sections */
.section-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

.section-image {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
}

@media (max-width: 700px) {
    .section-with-image {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   PLACEHOLDER CONTENT BLOCKS
   ==================================== */

.placeholder-block {
    background-color: var(--color-forest);
    border: 2px dashed rgba(112, 153, 89, 0.3);
    border-radius: 4px;
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
    color: var(--color-cream);
    opacity: 0.6;
    font-size: 0.9rem;
    margin: var(--spacing-lg) 0;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.placeholder-card {
    background-color: var(--color-forest);
    border: 2px dashed rgba(112, 153, 89, 0.3);
    border-radius: 4px;
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
    color: var(--color-cream);
    opacity: 0.6;
    font-size: 0.85rem;
}

/* ====================================
   ANIMATIONS
   ==================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====================================
   FOOTER
   ==================================== */

.footer {
    background-color: #1C1A17;
    color: var(--color-cream);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-logo {
    height: 200px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-sm);
}

.footer-brand {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
}

.footer-tagline {
    font-size: 0.85rem;
    opacity: 0.5;
    line-height: 1.7;
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--spacing-md);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-links a {
    color: var(--color-cream);
    text-decoration: none;
    font-size: 0.88rem;
    opacity: 0.6;
    transition: var(--transition);
}

.footer-links a:hover {
    opacity: 1;
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(247,242,230,0.08);
    padding-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer-copy {
    font-size: 0.78rem;
    opacity: 0.35;
}

.footer-sister {
    font-size: 0.78rem;
    opacity: 0.45;
}

.footer-sister a {
    color: var(--color-accent);
    text-decoration: none;
}

.footer-sister a:hover {
    text-decoration: underline;
}

/* ====================================
   HAMBURGER MENU
   ==================================== */
.hamburger-toggle { display: none; }
.hamburger-label { display: none; }

.hamburger-label {
    width: 36px;
    height: 36px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

.hamburger-label span,
.hamburger-label span::before,
.hamburger-label span::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-cream);
    border-radius: 2px;
    position: absolute;
    left: 6px;
    transition: all 0.3s ease;
}

.hamburger-label span { top: 17px; }
.hamburger-label span::before { content: ''; top: -7px; }
.hamburger-label span::after { content: ''; top: 7px; }

.hamburger-toggle:checked + .hamburger-label span { background: transparent; }
.hamburger-toggle:checked + .hamburger-label span::before { top: 0; transform: rotate(45deg); background: var(--color-accent); }
.hamburger-toggle:checked + .hamburger-label span::after { top: 0; transform: rotate(-45deg); background: var(--color-accent); }

/* ====================================
   FAQ ACCORDION
   ==================================== */
.faq-section { background-color: var(--color-olive); }

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(247,242,230,0.1);
}

.faq-item summary {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-cream);
    cursor: pointer;
    padding: var(--spacing-md) 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--color-gold);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item .faq-answer {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--color-cream);
    opacity: 0.8;
    padding-bottom: var(--spacing-md);
}

/* ====================================
   TRUST BADGES
   ==================================== */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    padding: var(--spacing-lg) 0;
}

.trust-badge {
    text-align: center;
    color: var(--color-gold);
}

.trust-badge-icon {
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
    display: block;
}

.trust-badge-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ====================================
   FOUNDER BIO
   ==================================== */
.founder-section {
    background-color: var(--color-olive);
    text-align: center;
}

.founder-name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--color-cream);
    margin-bottom: var(--spacing-xs);
}

.founder-role {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--spacing-md);
}

.founder-bio {
    max-width: 680px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-cream);
    opacity: 0.8;
}

/* ====================================
   NEWSLETTER SECTION
   ==================================== */
.newsletter-section {
    background-color: var(--color-olive);
    text-align: center;
}

.newsletter-inner {
    max-width: 560px;
    margin: 0 auto;
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 12px 16px;
    border: 2px solid var(--color-muted);
    border-radius: 4px;
    background: rgba(247,242,230,0.08);
    color: var(--color-cream);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--color-muted);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent);
}

.footer-newsletter {
    margin-top: var(--spacing-md);
}

.footer-newsletter a {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-newsletter a:hover {
    text-decoration: underline;
}

/* ====================================
   BLOG STYLES
   ==================================== */
.blog-section { background-color: var(--color-white); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.blog-card {
    background-color: var(--color-neutral, #FDFAEF);
    border-radius: 4px;
    padding: var(--spacing-xl) var(--spacing-lg);
    border-top: 3px solid var(--color-secondary);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.blog-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.blog-card-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-dark, #EFE7D2);
    margin-bottom: var(--spacing-sm);
}

.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-primary, #8F3D2F);
    opacity: 0.8;
    line-height: 1.6;
}

/* Blog article body */
.article-section { background-color: var(--color-white); }

.article-body {
    max-width: 720px;
    margin: 0 auto;
    color: var(--color-dark, #EFE7D2);
}

.article-body h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-dark, #EFE7D2);
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.article-body h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-dark, #EFE7D2);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.article-body p {
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: var(--spacing-md);
    opacity: 0.85;
}

.article-body ul, .article-body ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.article-body li {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-xs);
    opacity: 0.85;
}

.article-body a {
    color: var(--color-secondary);
    text-decoration: underline;
}

.article-body blockquote {
    border-left: 4px solid var(--color-gold);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    background: rgba(212,168,67,0.06);
    font-style: italic;
    font-size: 1.05rem;
}

.article-meta {
    font-size: 0.8rem;
    color: var(--color-secondary);
    opacity: 0.7;
    margin-bottom: var(--spacing-xl);
}

.article-author-box {
    background-color: var(--color-olive);
    border-radius: 6px;
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xxl);
    color: var(--color-cream);
}

.article-author-box h3 {
    color: var(--color-gold);
    margin-bottom: var(--spacing-xs);
}

.article-author-box p {
    opacity: 0.8;
    color: var(--color-cream);
}

.article-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl);
    background-color: var(--color-olive);
    border-radius: 6px;
}


/* ====================================
   APOTHECARY EDITORIAL THEME (merged from preview-theme.css)
   ==================================== */
/* ====================================
   BOTICA LABS — APOTHECARY EDITORIAL PREVIEW
   Same cream/green/terracotta family as Bistro,
   disposition inverted: light page + light header,
   deep forest-green jewel-box cards.
   Merge into styles.css after approval.
   ==================================== */

/* ---- Palette: 3 TESOROS · Templo Clasico (Brand Book F2, locked July 2026) ---- */
:root {
    --color-deep:      #F7F2E6;   /* cream: page ground, parchment, temple stone */
    --color-forest:    #8F3D2F;   /* clay deep: headlines, jewel-box cards, hovers */
    --color-olive:     #EFE7D2;   /* stone: section bands, cards */
    --color-secondary: #B0894A;   /* gold: hairlines, frames, seals. Metal, never text on cream */
    --color-accent:    #C05C4B;   /* terracota: primary buttons, price, warm lead */
    --color-gold:      #C9A24B;   /* bright gold: master metal on dark grounds only */
    --color-cream:     #F7F2E6;   /* cream: text on dark grounds */
    --color-muted:     rgba(46, 44, 41, 0.55);  /* muted ink */
    --color-charcoal:  #2E2C29;   /* ink: body text on cream */
    --color-blue:      #0097B2;   /* blue: links and UI at large sizes */
    --color-blue-deep: #015C6E;   /* blue deep: small link text */
    --color-turquoise: #0EC0DE;   /* the one sacred accent: one shape per screen, never text on cream */
}

/* ---- Page foundation ---- */
body {
    background-color: #EFE7D2;        /* slightly deeper cream so page edges read */
    color: #2E2C29;                    /* charcoal ink */
}

.page-wrap {
    background-color: #F7F2E6;
    border-left: 1px solid rgba(176, 137, 74, 0.35);
    border-right: 1px solid rgba(176, 137, 74, 0.35);
}

/* ---- Header — cream, apothecary ---- */
.header {
    background-color: #F7F2E6;
    box-shadow: 0 1px 0 rgba(176, 137, 74, 0.35), 0 4px 18px rgba(46, 44, 41, 0.06);
}

.header-logo span { color: #2E2C29; }

.nav-link { color: #2E2C29; }
.nav-link:hover,
.nav-link.active {
    color: #C05C4B;
    border-bottom-color: #C05C4B;
}

.lang-btn {
    border: 2px solid rgba(176, 137, 74, 0.55);
    color: #2E2C29;
}
.lang-btn:hover {
    border-color: #C05C4B;
    color: #C05C4B;
}
.lang-btn.active {
    background-color: #C05C4B;
    border-color: #C05C4B;
    color: #F7F2E6;
}

/* Hamburger lines (were cream — invisible on cream header) */
.hamburger-label span,
.hamburger-label span::before,
.hamburger-label span::after {
    background: #2E2C29;
}
.hamburger-toggle:checked + .hamburger-label span::before,
.hamburger-toggle:checked + .hamburger-label span::after {
    background: #C05C4B;
}

/* ---- Hero — clean cream ---- */
.hero {
    background: #F7F2E6;
    color: #2E2C29;
}
.hero-eyebrow { color: #8F3D2F; }
.hero-title   { color: #8F3D2F; }
.hero-subtitle { color: #2E2C29; opacity: 0.78; }

/* ---- Section headings on cream ---- */
.section-eyebrow  { color: #8F3D2F; }
.section-title    { color: #8F3D2F; }
.section-subtitle { color: #2E2C29; opacity: 0.7; }

/* ---- Alternating section bands ---- */
.features,
.faq-section,
.founder-section,
.newsletter-section {
    background-color: #EFE7D2;
}

/* ---- Feature cards — forest-green jewel boxes ---- */
.card {
    background-color: #8F3D2F;
    border-top: 3px solid transparent;
}
.card:hover {
    border-top-color: #C9A24B;
    box-shadow: 0 10px 28px rgba(46, 44, 41, 0.22);
}
.card-title { color: #C9A24B; }
.card-text  { color: #F7F2E6; opacity: 0.82; }

/* ---- Product cards — forest jewel boxes ---- */
.product-card {
    background-color: #8F3D2F;
    border-top: 3px solid #B0894A;
}
.product-card-title { color: #C9A24B; }
.product-card-text  { color: #F7F2E6; opacity: 0.78; }
.product-card-img   { background-color: #F7F2E6; }

/* Image wells stay cream */
.card-img-wrap { background-color: #F7F2E6; }

/* ---- Buttons ---- */
.btn-primary {
    background-color: #C05C4B;
    color: #F7F2E6;
}
.btn-primary:hover {
    background-color: #8F3D2F;
    box-shadow: 0 10px 20px rgba(192, 92, 75, 0.28);
}
.btn-outline {
    background-color: transparent;
    color: #C05C4B;
    border: 2px solid #C05C4B;
}
.btn-outline:hover {
    background-color: #C05C4B;
    color: #F7F2E6;
}

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid rgba(46, 44, 41, 0.14); }
.faq-item summary { color: #2E2C29; }
.faq-item summary::after { color: #C05C4B; }
.faq-item .faq-answer { color: #2E2C29; opacity: 0.78; }

/* ---- Founder ---- */
.founder-name { color: #2E2C29; }
.founder-role { color: #C05C4B; }
.founder-bio  { color: #2E2C29; opacity: 0.78; }

/* ---- Newsletter ---- */
.newsletter-form input[type="email"] {
    border: 2px solid rgba(176, 137, 74, 0.55);
    background: rgba(255, 255, 255, 0.5);
    color: #2E2C29;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(46, 44, 41, 0.5); }
.newsletter-form input[type="email"]:focus { border-color: #C05C4B; }

/* ---- Trust badges ---- */
.trust-badge { color: #C05C4B; }

/* ---- Placeholder blocks ---- */
.placeholder-block,
.placeholder-card {
    background-color: #EFE7D2;
    border: 2px dashed rgba(176, 137, 74, 0.4);
    color: #2E2C29;
}

/* ---- Blog cards ---- */
.blog-card { border-top: 3px solid #B0894A; }
.blog-card-tag   { color: #C05C4B; }
.blog-card-title { color: #2E2C29; }
.blog-card-excerpt { color: #8F3D2F; opacity: 0.78; }

/* ---- Article accent boxes — stay dark to pop on white article page ---- */
.article-author-box,
.article-cta {
    background-color: #8F3D2F;
    color: #F7F2E6;
}
.article-author-box h3 { color: #C9A24B; }
.article-author-box p  { color: #F7F2E6; opacity: 0.82; }
.article-body blockquote {
    border-left: 4px solid #B0894A;
    background: rgba(176, 137, 74, 0.08);
}
.article-body a { color: #C05C4B; }
.article-meta   { color: #B0894A; }

/* ---- Footer — stays deep, anchors the page ---- */
.footer { background-color: #1C1A17; }
.footer-links a:hover { color: #C9A24B; }
.footer-sister a { color: #C9A24B; }

/* ====================================
   PAGE-SPECIFIC CORRECTIONS
   (pages with their own inline <style> blocks)
   ==================================== */

/* Variables some pages reference but base CSS never defined.
   Without these they fell back to inherited values. */
:root {
    --color-white:   #FDFAEF;   /* near-white cream — light surfaces */
    --color-neutral: #FDFAEF;   /* light card surface */
    --color-dark:    #2E2C29;   /* charcoal — dark text on light */
    --color-primary: #8F3D2F;   /* forest — text/accent */
}

/* Dark forest boxes: set the box color so any text that
   inherits (no explicit color) reads light on dark. */
.adaptogen-card,
.playlist-card,
.recipe-card,
.comparison-card,
.comparison-table,
.verdict-list li,
.adaptogen-list-item,
.excalibur-card {
    color: var(--color-cream, #F7F2E6);
}

/* Secondary button — white label (sits on sage and on dark CTAs) */
.btn-secondary {
    background-color: #015C6E;
    color: #F7F2E6;
    border: 2px solid #015C6E;
}
.btn-secondary:hover {
    background-color: #014A58;
    border-color: #014A58;
    color: #F7F2E6;
}

/* Buttons inside article content must keep their own label color,
   not inherit the terracotta .article-body link style. */
.article-body a.btn,
.article-cta a.btn { text-decoration: none; }
.article-body a.btn-primary,  .article-cta a.btn-primary,
.article-body a.btn-secondary, .article-cta a.btn-secondary,
.article-body a.btn-outline,  .article-cta a.btn-outline { color: #F7F2E6; }

/* ====================================
   TYPE SCALE BUMP (+2pt on small text)
   body-prefixed to outrank page inline styles
   ==================================== */

/* Section + card descriptions */
body .section-subtitle      { font-size: 1.15rem; }
body .card-text             { font-size: 1.05rem; }
body .product-card-text     { font-size: 1.05rem; }

/* Adaptogens page descriptions */
body .info-inner p          { font-size: 1.15rem; }
body .adaptogen-bullets li  { font-size: 1.07rem; }
body .adaptogen-latin       { font-size: 0.95rem; }
body .adaptogen-tag         { font-size: 0.85rem; }
body .adaptogen-treasures   { font-size: 0.93rem; }

/* Recipes */
body .recipe-card p         { font-size: 1.07rem; }
body .recipe-card .recipe-tag { font-size: 0.85rem; }

/* Music */
body .playlist-card p       { font-size: 1.05rem; }
body .playlist-card .playlist-mood { font-size: 0.85rem; }
body .spotify-note          { font-size: 1rem; }

/* Blog */
body .blog-card-excerpt     { font-size: 1.07rem; }
body .blog-card-tag         { font-size: 0.85rem; }

/* FAQ + founder + badges */
body .faq-item .faq-answer  { font-size: 1.07rem; }
body .founder-bio           { font-size: 1.1rem; }
body .founder-role          { font-size: 0.9rem; }
body .trust-badge-label     { font-size: 0.85rem; }

/* Footer */
body .footer-tagline        { font-size: 1.15rem; }   /* "la sabiduría" +2pt */
body .footer-links a        { font-size: 1.03rem; }
body .footer-copy           { font-size: 0.93rem; }
body .footer-sister         { font-size: 0.93rem; }
body .footer-brand          { font-size: 1.72rem; }   /* 3 TESOROS +3pt */

/* ====================================
   PER-REQUEST SIZE BUMPS (+2pt)
   ==================================== */

/* Adaptogens — Excalibur / Lancelot / Morgana product text */
body .excalibur-eyebrow     { font-size: 0.85rem; }
body .excalibur-sub         { font-size: 1.25rem; }
body .excalibur-ingredients { font-size: 0.93rem; }
body .excalibur-bullets li  { font-size: 1.07rem; }

/* Shop section small text */
body .shop-card-category    { font-size: 0.85rem; }
body .shop-card-title       { font-size: 1.35rem; }
body .shop-card-links a     { font-size: 1.03rem; }

/* Our Story — all chapter text */
body .chapter-title         { font-size: 1.75rem; }
body .chapter-text          { font-size: 1.1rem; }

/* Home feature-card images — make the IMAGE itself ~1.5x bigger,
   filling the tile instead of floating with margins. */
body .cards-grid .card-img-wrap {
    min-height: 0;
    padding: 0.4rem;
}
body .cards-grid .card-img--contain {
    width: 100%;
    max-width: 340px;
    height: auto;
    max-height: none;
}

/* ====================================
   PATTERNED SIDE BORDERS + CENTERED CONTENT
   ==================================== */

/* Softened terracotta tile fills the area behind the page sheet */
body {
    position: relative;
    background-color: #EFE7D2;
}
/* The old Botica pattern tile is retired: generous negative space
   IS the premium signal (Brand Book F2 guardrails). */

/* Narrower cream sheet so the pattern shows on the sides; sits above the tile */
body .page-wrap {
    max-width: 1140px;
    position: relative;
    z-index: 1;
}

/* Condense the content column so information reads more centered.
   This narrows every section's content (and the cards inside) without
   changing column counts or breaking the balanced grids. */
body .container {
    max-width: 1040px;
}

/* Keep the home's 4 feature cards balanced (4-across) in the narrower
   column — they just get a touch tighter. Mobile rules in responsive.css
   still override this to 2 and 1 columns. */
/* Rule of 3: three cards, three pillars */
.cards-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ====================================
   POLISH PASS (v8) — typography ladder,
   hero rhythm, card framing, buttons,
   section bands. body-prefixed to win
   over earlier body-prefixed bumps.
   ==================================== */

/* ---- Section rhythm: uniform 5rem bands site-wide ---- */
body section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ---- Hero: frontispiece hierarchy, fixed rem rhythm ---- */
body .hero {
    min-height: 0;
    padding: 4.5rem var(--spacing-lg) 5.5rem;
}
body .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
}
body .hero picture {
    height: auto;
}
body .hero-logo-img {
    height: 225px;
    max-width: 450px;
    margin-bottom: 0;
}
body .hero-title {
    font-size: 3.3rem;
    line-height: 1.15;
    margin: 2.4rem 0 0;
}
body .hero-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.6;
    color: #2E2C29;
    opacity: 0.85;
    margin-top: 2.6rem;
    max-width: 36ch;
}
body .hero-quote-author {
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C05C4B;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    position: relative;
}
body .hero-quote-author::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 2px;
    /* The one sacred turquoise mark on this screen (Brand Book F2) */
    background: var(--color-turquoise);
}
body .hero-buttons {
    margin-top: 3rem;
    gap: 0.9rem;
}

/* ---- Type ladder ---- */
body .section-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    margin-bottom: 0.9rem;
}
body .section-title {
    font-size: 2.1rem;
    line-height: 1.3;
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Feature cards: equal botanical-plate frames ---- */
body .cards-grid {
    gap: 1.75rem;
}
body .card {
    padding: 1.4rem 1.4rem 2rem;
}
body .cards-grid .card-img-wrap {
    aspect-ratio: 1 / 1;
    padding: 0.9rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(176, 137, 74, 0.5);
}
body .cards-grid .card-img--contain {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
body .card-title {
    font-size: 1.4rem;
    margin: 1.4rem 0 0.5rem;
}
body .card-text {
    line-height: 1.65;
}
body .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(46, 44, 41, 0.16);
}

/* ---- Buttons: quieter confidence, equal heights ---- */
body .btn {
    border: 2px solid transparent;
    padding: 12px 32px;
    border-radius: 2px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
}
body .btn-secondary { border-color: #015C6E; }
body .btn-outline { border-color: #C05C4B; }
body .btn-outline:hover { border-color: #C05C4B; }
body .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(192, 92, 75, 0.28);
}
body .btn-secondary:hover,
body .btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

/* ---- Section rhythm: cream → beige → forest → footer ---- */
body .features {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
body .newsletter-section {
    background-color: #8F3D2F;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
body .newsletter-section .section-eyebrow { color: #C9A24B; }
body .newsletter-section .section-title {
    color: #F7F2E6;
    margin-bottom: 0;
}
body .newsletter-form { margin-top: 2.5rem; }

/* ---- Header refinements ---- */
body .header-inner {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
body .nav-link {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}
body .lang-btn {
    border-width: 1px;
    padding: 0.35rem 0.65rem;
    font-size: 0.72rem;
}

/* ---- Footer: match section breathing room ---- */
body .footer {
    padding: var(--spacing-xxl) 0 var(--spacing-lg);
}
body .footer-tagline { opacity: 0.65; }

/* ====================================
   POLISH PASS — OTHER PAGES (v8)
   Same ladder applied to the split
   heroes, page cards, and imagery.
   ==================================== */

/* .cta-section (app page) sets its own padding — align it to the band rhythm */
body .cta-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ---- Page heroes: eyebrow + subtitle join the ladder ---- */
body .hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    color: #C05C4B;
    margin-bottom: 0.9rem;
}
body .hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.65;
    opacity: 0.8;
    margin-bottom: 0;
    max-width: 44ch;
}

/* Split heroes are left-aligned: quote attribution rule sits left */
body .hero-split .hero-quote { margin-top: 1.8rem; }
body .hero-split .hero-quote-author::before {
    left: 0;
    transform: none;
}

/* ---- Imagery framing: one radius family (4px), calmer shadows ---- */
body .hero-page-img,
body .hero-sword-img,
body .excalibur-img,
body .dj-mix-img {
    border-radius: 4px;
}

body .adaptogen-card,
body .recipe-card,
body .playlist-card,
body .blog-card,
body .excalibur-card,
body .article-author-box,
body .article-cta {
    border-radius: 4px;
}

/* Card shadows were tuned for the old dark theme — soften on cream */
body .adaptogen-card,
body .recipe-card,
body .blog-card {
    box-shadow: 0 2px 10px rgba(46, 44, 41, 0.12);
}
body .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(46, 44, 41, 0.16);
}


/* ====================================
   3 TESOROS TYPOGRAPHY (Brand Book F3, pairing B locked)
   Tier 1 Kindred Modern lives inside the logo art.
   Tier 2 Marcellus: inscriptional Roman capitals for headlines.
   Tier 3 Source Sans 3: body, labels, UI.
   Marcellus ships one weight and no italic, so headings stay
   weight 400 and italics belong to the sans only.
   ==================================== */

body .hero-title,
body .section-title,
body .chapter-title {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body .hero-title { font-size: 2.7rem; line-height: 1.22; }
body .section-title { font-size: 1.8rem; line-height: 1.35; }

/* Quote: humanist italic from the sans tier, Marcellus has no italic */
body .hero-quote {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 1.3rem;
}

/* Card and product titles: Marcellus mixed case, single weight */
body .card-title,
body .product-card-title,
body .footer-brand {
    font-weight: 400;
}

/* ====================================
   PRE-DEPLOY POLISH (v11)
   A · sacred turquoise on inner heroes
   B · gold Rule-of-3 section marks
   C · home trust-seal band
   D · elevated WhatsApp order CTA
   ==================================== */

/* ---- A · The one sacred turquoise mark on split heroes ----
   Home carries its turquoise under the hero quote; the split
   heroes (Adaptogens/Shop/Story) had none, breaking the
   one-accent-per-screen rule by omission. One hairline each. */
body .hero-split .hero-eyebrow {
    position: relative;
    padding-bottom: 0.9rem;
}
body .hero-split .hero-eyebrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 2px;
    background: var(--color-turquoise);   /* Brand Book F2 sacred accent */
}
@media (max-width: 700px) {
    body .hero-split .hero-eyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---- B · Gold Rule-of-3 mark above section eyebrows ----
   Three gold dots = the treasures, cuerpo/mente/espiritu.
   Gold as seal/hairline (metal), never as text (Brand Book F2). */
body .section-eyebrow {
    position: relative;
    padding-top: 2.4rem;
}
body .section-eyebrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 7px;
    background-image:
        radial-gradient(circle, var(--color-secondary) 45%, transparent 50%),
        radial-gradient(circle, var(--color-secondary) 45%, transparent 50%),
        radial-gradient(circle, var(--color-secondary) 45%, transparent 50%);
    background-size: 7px 7px;
    background-position: left center, center center, right center;
    background-repeat: no-repeat;
    opacity: 0.85;
}
/* On the deep clay newsletter band, bright gold is the metal */
body .newsletter-section .section-eyebrow::before {
    background-image:
        radial-gradient(circle, var(--color-gold) 45%, transparent 50%),
        radial-gradient(circle, var(--color-gold) 45%, transparent 50%),
        radial-gradient(circle, var(--color-gold) 45%, transparent 50%);
    opacity: 1;
}

/* ---- C · Home trust-seal band ---- */
body .trust-section {
    background-color: #F7F2E6;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid rgba(176, 137, 74, 0.30);      /* gold hairlines */
    border-bottom: 1px solid rgba(176, 137, 74, 0.30);
}

/* ---- D · Elevated WhatsApp order CTA ----
   The #1 site action reads as THE action: WhatsApp glyph +
   bright-gold seal frame. Glyph is a mask so it inherits the
   button label colour and survives the i18n innerHTML swap. */
:root {
    --wa-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 2.1.55 4.06 1.6 5.83L2 22l4.4-1.15a9.9 9.9 0 0 0 5.64 1.72h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.16c-.24.68-1.42 1.32-1.95 1.36-.5.04-.97.24-3.27-.68-2.77-1.09-4.5-3.94-4.63-4.12-.13-.18-1.1-1.46-1.1-2.79 0-1.33.7-1.98.95-2.25.24-.27.53-.34.71-.34.18 0 .36.01.51.01.16.01.38-.06.6.46.24.55.82 1.9.89 2.04.07.14.12.3.02.48-.09.18-.14.29-.27.45-.14.16-.29.36-.41.48-.14.14-.28.29-.12.57.16.27.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.22 1.37.27.14.43.12.59-.07.16-.18.68-.79.86-1.06.18-.27.36-.23.6-.14.24.09 1.54.73 1.8.86.27.14.44.2.5.32.07.11.07.66-.17 1.34z'/%3E%3C/svg%3E");
}
body .btn-order {
    box-shadow: inset 0 0 0 1px var(--color-gold);   /* gold seal frame */
}
body .btn-order::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.55em;
    vertical-align: -0.16em;
    background-color: currentColor;
    -webkit-mask: var(--wa-glyph) center / contain no-repeat;
            mask: var(--wa-glyph) center / contain no-repeat;
}
body .btn-order:hover {
    box-shadow: inset 0 0 0 1px var(--color-gold), 0 6px 18px rgba(192, 92, 75, 0.32);
}

/* ====================================
   LABEL TIER +15% (v12)
   The small uppercase letter-spaced tier
   (eyebrows, promise line, buttons, nav,
   tags, seals) read too small on screen.
   All values = previous size × 1.15.
   ==================================== */

/* Eyebrows: 0.75 → 0.86rem */
body .hero-eyebrow,
body .section-eyebrow {
    font-size: 0.86rem;
}

/* Hero promise attribution: second bump, 0.86 → 0.95rem */
body .hero-quote-author {
    font-size: 0.95rem;
}

/* Buttons (Pedir Excalibur and siblings): 0.82 → 0.94rem */
body .btn {
    font-size: 0.94rem;
}

/* Header nav links: 0.8 → 0.92rem */
body .nav-link {
    font-size: 0.92rem;
}

/* Tags, seals, categories: 0.85 → 0.98rem */
body .adaptogen-tag,
body .recipe-card .recipe-tag,
body .playlist-card .playlist-mood,
body .blog-card-tag,
body .trust-badge-label,
body .shop-card-category,
body .excalibur-eyebrow {
    font-size: 0.98rem;
}

/* Founder role line: 0.9 → 1.04rem */
body .founder-role {
    font-size: 1.04rem;
}

/* Footer column headings: 0.72 → 0.83rem */
body .footer-heading {
    font-size: 0.83rem;
}

/* ====================================
   TRUST SEALS — SVG STAMPS (v13)
   Original line-drawn seals replace the
   emojis. Gold is the seal metal
   (Brand Book F2); labels keep terracotta.
   ==================================== */
.trust-badge-icon svg {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto;
    color: var(--color-secondary);   /* gold #B0894A on cream */
}

/* ====================================
   ROUNDED CORNERS (v14)
   No sharp corners on buttons, images,
   logos, or the cards that frame them.
   One radius family: 12px surfaces,
   14px cards, 16px standalone logos.
   ==================================== */

/* Buttons */
body .btn {
    border-radius: 12px;
}

/* Logos */
body .hero-logo-img,
body .header-logo img,
body .footer-logo {
    border-radius: 16px;
}

/* Images and image wells */
body .card-img-wrap,
body .cards-grid .card-img-wrap,
body .card-img,
body .product-card-img,
body .section-image,
body .hero-page-img,
body .hero-sword-img,
body .excalibur-img,
body .dj-mix-img,
body .frame-beige {
    border-radius: 12px;
}

/* Cards: outer radius slightly larger than the image wells inside */
body .card,
body .product-card,
body .shop-card,
body .adaptogen-card,
body .excalibur-card,
body .blog-card,
body .recipe-card,
body .playlist-card,
body .article-author-box,
body .article-cta {
    border-radius: 14px;
}