/* ─── Brand Fonts ───────────────────────────────────────────────────── */
@font-face {
    font-family: 'Strenuous';
    src: url('../fonts/Strenuous-Bl.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Strenuous';
    src: url('../fonts/Strenuous-3d.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BrightLine';
    src: url('../fonts/BrightLine7.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Linked';
    src: url('../fonts/Linked.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --nav-bg:       #0b302d;   /* abeto profundo */
    --green-dark:   #0b302d;   /* abeto profundo */
    --green-mid:    #00423d;   /* verde bosque */
    --olive:        #9c9e6f;   /* verde musgo */
    --olive-dark:   #0b302d;   /* abeto profundo — body text on light bg */
    --olive-light:  #d1d190;   /* oliva claro */
    --cream:        #fff1e2;   /* crema vainilla — main page background */
    --cream-dark:   #f0e2cb;   /* crema vainilla oscura */
    --text-light:   #fff1e2;   /* crema vainilla — text on dark bg */
    --text-muted:   rgba(11, 48, 45, 0.5);   /* olive-dark at 50% — secondary text on light bg */
    --gold:         #e99667;   /* salmón tostado */
    --salmon:       #fbc6b1;   /* melocotón claro */
    --product-card: #00423d;   /* verde bosque */
    --border-dark:  rgba(255,255,255,0.12);
    --border-light: rgba(0,0,0,0.15);

    --font-display: 'Strenuous', 'Barlow Condensed', sans-serif;
    --font-accent:  'BrightLine', sans-serif;
    --font-linked:  'Linked', cursive;
    --font-body:    'BrightLine', 'Inter', system-ui, sans-serif;

    --max-w:          1280px;
    --px:             clamp(1.5rem, 4vw, 4rem);
    --content-max:    var(--max-w);
    --olive-light-rgb: 209, 209, 144;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--olive-dark);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }

/* ─── Shared ────────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--olive-dark);
}
.section-title--light { color: var(--text-light); }

/* ─── Header / Nav ──────────────────────────────────────────────────── */
.header-controls {
    position: fixed;
    top: 1.5rem;
    right: var(--px);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-lang-switcher {
    display: contents;
}
.header-controls .lang-item {
    list-style: none;
}
.header-controls .lang-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-linked);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    border: 2px solid var(--olive-light);
    border-radius: 2px;
    color: var(--olive-light);
    text-decoration: none;
    text-shadow: none;
    background: transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.header-controls .lang-item a:hover {
    background: var(--olive-light);
    color: var(--olive-dark);
}
.header-controls .current-lang a {
    background: var(--olive-light);
    color: var(--olive-dark);
    font-weight: 400;
}
.header-controls .lang-item + .lang-item::before {
    content: none;
}

/* Cart icon */
.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--olive-light);
    text-decoration: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    transition: opacity 0.2s;
}
.header-cart:hover { opacity: 0.75; }
.header-cart__count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--olive-light);
    color: var(--olive-dark);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}
.nav-hamburger span {
    display: block;
    width: 28px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ─── Nav Panel (slide-in from right, page stays interactive) ────────── */
.nav-panel {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    background: var(--cream);
    border-radius: 20px;
    width: min(300px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.5rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 8px 48px rgba(0, 0, 0, 0.22);
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}
.nav-panel.is-open {
    transform: translateX(0);
    pointer-events: all;
}

.nav-panel__close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--olive-dark);
    padding: 0.2rem 0.3rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    transition: opacity 0.15s;
}
.nav-panel__close:hover { opacity: 0.5; }

.nav-panel__links {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}
.nav-panel__link {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--olive-dark);
    text-decoration: none;
    text-align: center;
    padding: 0.75rem 0;
    transition: color 0.15s;
    letter-spacing: 0.02em;
}
.nav-panel__link:hover { color: var(--olive); }

.nav-panel__rule {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
}

.nav-panel__media {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.nav-panel__img {
    width: 100%;
    border-radius: 10px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.nav-panel__cta {
    display: block;
    text-align: center;
    background: var(--nav-bg);
    color: white;
    font-family: var(--font-linked);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-panel__cta:hover { background: #0a2e24; }

/* ─── Cart Panel ──────────────────────────────────────────────────────── */
.cart-panel {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    background: var(--cream);
    border-radius: 20px;
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.5rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 8px 48px rgba(0, 0, 0, 0.22);
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}
.cart-panel.is-open {
    transform: translateX(0);
    pointer-events: all;
}
.cart-panel__items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-right: 0.25rem;
}
.cart-panel__items::-webkit-scrollbar { width: 3px; }
.cart-panel__items::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.cart-panel__empty {
    font-family: var(--font-body);
    font-size: 1.75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
}
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-item__img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.cart-item__info { min-width: 0; }
.cart-item__name {
    font-family: var(--font-linked);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--olive-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.cart-item__meta {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--olive);
    font-weight: 500;
}
.cart-item__price {
    font-family: var(--font-linked);
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--olive-dark);
    white-space: nowrap;
    text-align: right;
}
.cart-item__remove {
    display: block;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--olive-dark);
    opacity: 0.4;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 0.3rem;
    text-align: right;
    transition: opacity 0.15s;
    text-decoration: underline;
}
.cart-item__remove:hover { opacity: 1; }
.cart-panel__footer {
    border-top: 2px solid var(--olive-dark);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cart-panel__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--olive-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cart-panel__total span:last-child {
    font-family: var(--font-linked);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.lang-switcher-wrap { padding: 0 2rem 0.5rem; }

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.lang-switcher .lang-item a {
    font-family: var(--font-linked);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
    opacity: 0.4;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    transition: opacity 0.15s;
}
.lang-switcher .lang-item a:hover { opacity: 0.75; }
.lang-switcher .current-lang a { opacity: 1; }
.lang-switcher .lang-item + .lang-item a::before {
    content: '/';
    margin-right: 0.4rem;
    opacity: 0.4;
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.hero__logo {
    position: absolute;
    top: 1.5rem;
    left: var(--px);
    z-index: 10;
    display: inline-flex;
}
.hero__logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    background: var(--nav-bg);
}

.hero__beans {
    width: 100%;
    height: 65vh;
    min-height: 380px;
    max-height: 700px;
    overflow: hidden;
    flex-shrink: 0;
}
.hero__beans-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    display: block;
}

.hero__content {
    background: var(--cream);
    padding: 2.75rem var(--px) 3.5rem;
}
.hero__content-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    align-items: flex-end;
    gap: 3rem;
}

.hero__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
}

.hero__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1;
    text-transform: uppercase;
    border: 2px solid var(--olive-dark);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    border-radius: 2px;
}
.hero-btn--filled {
    background: var(--olive-dark);
    color: var(--olive-light);
}
.hero-btn--filled:hover {
    background: var(--green-mid);
    border-color: var(--green-mid);
}
.hero-btn--outline {
    background: transparent;
    color: var(--olive-dark);
}
.hero-btn--outline:hover {
    background: var(--olive-dark);
    color: var(--olive-light);
}

.hero__right {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.25rem;
}
.hero__subtitle {
    font-size: 1.25rem;
    color: var(--olive-dark);
    line-height: 1.55;
    opacity: 0.85;
}

/* ─── Features ──────────────────────────────────────────────────────── */
.features {
    background: var(--cream);
    padding: 4rem var(--px) 5rem;
}
.features__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* Portrait card */
.features__portrait-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 560px;
    align-self: stretch;
}
.features__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.features__portrait-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.features__portrait-title {
    font-family: var(--font-linked);
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}
.features__portrait-text {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.95);
    line-height: 1.6;
    text-align: justify;
}

/* Right cards column — stretch to match portrait height */
.features__cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-self: stretch;
}

.features__card {
    border-radius: 20px;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    min-height: 0;
}
.features__card--edu { background: #e99667; }   /* salmón tostado */
.features__card--div { background: #9b442f; }   /* arcilla */
.features__card--com { background: #0b302d; }   /* abeto profundo */

/* Photo blocks — rectangular, displayed inline in card flex row */
.features__photo {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
}
.features__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Text body inside each card */
.features__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.features__card-body--right { /* photo is before text */ }
.features__card-body--left  { /* photo is after text  */ }

.features__card-title {
    font-family: var(--font-linked);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}
.features__card-sub {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.72);
    font-style: italic;
}
.features__card-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.28);
    margin: 0.45rem 0;
}
.features__card-body p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.95);
    line-height: 1.55;
    text-align: justify;
}

/* ─── Blog Section ──────────────────────────────────────────────────── */
.blog-section {
    background: var(--cream);
    padding: 4rem var(--px) 5rem;
}
.blog-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-section__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
}
.blog-section__sub {
    font-size: 1.25rem;
    color: var(--olive-dark);
    opacity: 0.85;
    margin-top: 0.5rem;
}

/* Tab pills */
.blog-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.blog-tab {
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: 2px solid var(--olive-dark);
    background: transparent;
    color: var(--olive-dark);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    line-height: 1;
}
.blog-tab:hover,
.blog-tab--active {
    background: var(--olive-dark);
    color: var(--olive-light);
}
/* "Ver Blog" always filled */
.blog-tab--ver {
    background: var(--olive-dark);
    color: var(--olive-light);
    text-decoration: none;
}
.blog-tab--ver:hover { opacity: 0.85; }

/* Single card — always visible */
.blog-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--nav-bg);
    border-radius: 20px;
    overflow: visible;
}

/* Text side */
.blog-card__text {
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--text-light);
}
.blog-card__badge {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive-light);
}
.blog-card__title {
    font-family: var(--font-linked);
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: var(--olive-light);
}
.blog-card__excerpt {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.65;
    text-align: justify;
    flex: 1;
}
.blog-card__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.blog-btn {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.45);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.blog-btn--filled { background: rgba(255,255,255,0.1); }
.blog-btn--filled:hover,
.blog-btn--outline:hover {
    background: var(--olive-light);
    color: var(--olive-dark);
    border-color: var(--olive-light);
}

/* Media side */
.blog-card__media {
    padding: 1.5rem 1.5rem 1.5rem 0;
    display: flex;
    align-items: flex-end;
}

/* Folder — single combined image (folder + back tabs baked in) */
.blog-folder-front {
    position: relative;
    width: 100%;
}

.blog-folder-shape {
    width: 100%;
    display: block;
}

/* Post photo inset inside the folder body */
.blog-folder-photo {
    position: absolute;
    top: 9%;
    left: 4%;
    width: 92%;
    height: 87%;
    object-fit: cover;
    border-radius: 6px 14px 14px 14px;
    transition: opacity 0.25s ease;
    z-index: 1;
}

/* ─── About / Pasión Section ────────────────────────────────────────── */
.about-section {
    background: var(--cream);
    padding: 5.5rem 0 5rem;
    padding-top: 4rem;
}

.about-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 0 var(--px);
}

.about-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}

.about-header__title {
    font-family: var(--font-linked);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
}

.about-header__sub {
    font-size: 1.25rem;
    color: var(--olive-dark);
    opacity: 0.82;
    line-height: 1.65;
}

/* Tabs */
.about-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.about-tab {
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--olive-dark);
    border-radius: 8px;
    background: transparent;
    color: var(--olive-dark);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.about-tab:hover,
.about-tab--active {
    background: var(--olive-dark);
    color: var(--olive-light);
}

/* Peek slider */
.about-slider {
    overflow: hidden;
    margin-right: calc(-1 * var(--px));
}

.about-slider__track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Cream card — image left, text right. Next card peeks on right. */
.about-slide {
    flex: 0 0 calc(100% - 280px - 1.5rem);
    min-width: 0;
    display: grid;
    grid-template-columns: 42% 1fr;
    background: var(--cream);
    border-radius: 20px;
    border: 1px solid rgba(30, 42, 18, 0.1);
    overflow: hidden;
    min-height: 480px;
}

.about-slide__img-wrap {
    overflow: hidden;
}
.about-slide__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-slide__content {
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    color: var(--olive-dark);
}

/* Thin rule pushed to vertical centre by margin-top: auto */
.about-slide__rule {
    border: none;
    border-top: 1px solid rgba(30, 42, 18, 0.25);
    margin: auto 0 1.25rem 0;
}

.about-slide__title {
    font-family: var(--font-linked);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0em;
    color: var(--olive-dark);
    margin-bottom: 0.4rem;
}

.about-slide__sub {
    font-size: 1rem;
    color: var(--olive-dark);
}

/* Body pushed to the bottom */
.about-slide__body {
    font-size: 1.25rem;
    color: var(--olive-dark);
    line-height: 1.7;
    margin-top: auto;
    padding-top: 1.5rem;
}

@media (max-width: 900px) {
    .about-header { grid-template-columns: 1fr; gap: 1rem; }
    .about-slide {
        flex: 0 0 calc(100% - 160px - 1.5rem);
        grid-template-columns: 45% 1fr;
        min-height: 360px;
    }
}
@media (max-width: 640px) {
    .about-slide {
        flex: 0 0 calc(100% - 32px);
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .about-slide__img-wrap { aspect-ratio: 16 / 9; height: auto; }
    .about-slide__content { padding: 1.75rem 1.5rem; }
}

/* ─── Products Section ──────────────────────────────────────────────── */
.products-section {
    background: var(--cream);
    padding: 5rem var(--px);
}

.products-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}

.products-section__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    line-height: 0.92;
    color: var(--olive-dark);
    margin-bottom: 3rem;
    letter-spacing: 0em;
}

/* Grid — 3 equal columns; rows sized by card aspect-ratio */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Featured spans cols 1–2, row 1 — width = 2col+gap, stretches to row height */
.product-card--featured {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* Mediums column: col 3, row 1 — stacked flex */
.products-grid__mediums {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Small cards auto-place into row 2 (cols 1, 2, 3) */

/* Base card */
.product-card {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-light);
    transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-2px); }

/* ── Featured card ── */
.product-card--featured {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #6b8a90;
    justify-content: flex-end;
}
.product-card--featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 28%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.product-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    z-index: 1;
}
.product-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5cc46e;
    flex-shrink: 0;
}
.product-card--featured .product-card__info {
    position: relative;
    z-index: 1;
    padding: 0 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.product-card--featured .product-card__divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 0.75rem;
}
.product-card--featured .product-card__name {
    font-family: var(--font-linked);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1;
    color: white;
}
.product-card--featured .product-card__sub {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.2rem;
}

/* ── Medium + Small cards ── */
.product-card--medium,
.product-card--small {
    background: var(--product-card);
    padding: 1.25rem 1.25rem 1rem;
    overflow: hidden;
    position: relative;
}
/* Each medium card = 1 col × 1 col (square).
   Two stacked = 2col+gap tall → row 1 height = featured width → featured is square too. */
.product-card--medium {
    aspect-ratio: 1;
    width: 100%;
}

/* Each small card = 1 col × 1 col (square) → sets row 2 height */
.product-card--small {
    aspect-ratio: 1;
}

/* Price badge — top-left of medium/small cards */
.product-price-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--nav-bg);
    color: white;
    font-family: var(--font-linked);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0em;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    z-index: 1;
    line-height: 1;
}

.product-card__img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem 0.75rem;
    min-height: 0;
    overflow: hidden;
}
.product-card__img-wrap img {
    max-width: 95%;
    max-height: 74%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.product-card__info {
    flex-shrink: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.25);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.product-card__name {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1;
    color: white;
}
.product-card__sub {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.6);
}

/* ─── CTA Section ───────────────────────────────────────────────────── */
.cta-section {
    background: var(--nav-bg);
    padding: 7rem var(--px) 6rem;
    text-align: center;
}
.cta-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.cta-section__title {
    font-family: var(--font-display);
    font-size: clamp(5rem, 13vw, 11rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.88;
    color: var(--salmon);
    letter-spacing: -0.01em;
}
.cta-section__sub {
    font-family: var(--font-display);
    font-size: 3.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-top: 1.75rem;
}

/* ─── Footer ────────────────────────────────────────────────────────── */
#site-footer {
    background: var(--nav-bg);
}

/* Dark top: nav + rule + logo */
.footer-top {
    padding: 3.5rem var(--px) 5rem;
}
.footer-top__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* wp_nav_menu outputs <ul><li> — flatten to horizontal row */
.footer-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
}
.footer-nav ul li { list-style: none; }

.footer-nav a,
.footer-nav li a {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.15s;
}
.footer-nav a:hover,
.footer-nav li a:hover { color: var(--olive-light); }

.footer-rule {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 2rem;
}

.footer-logo-wrap {
    display: flex;
    justify-content: center;
    text-decoration: none;
}
.footer-logo-wrap img {
    height: 52px;
    width: auto;
}

/* Light bottom: roaster image full-width */
.footer-bottom {
    background: var(--cream-dark);
    padding-top: 6rem; /* ≈ nav-links height + logo height */
    overflow: hidden;
}
.footer-grinder {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* ─── Shop (Tienda) ─────────────────────────────────────────────────── */
#shop-page {
    background: var(--cream);
    min-height: 100vh;
}

.shop-hero {
    padding: 4rem var(--px) 2rem;
}

.shop-hero__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}

.shop-hero__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
    margin-bottom: 1rem;
}

.shop-hero__sub {
    font-size: 1.25rem;
    color: var(--olive-dark);
    opacity: 0.75;
    max-width: 340px;
    line-height: 1.55;
    margin-bottom: 1.75rem;
}

.shop-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.shop-filter {
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    border: none;
    cursor: pointer;
    background: var(--cream);
    color: var(--olive-dark);
    transition: background 0.15s, color 0.15s;
}

.shop-filter.is-active,
.shop-filter:hover {
    background: var(--olive-dark);
    color: var(--cream);
}

.shop-grid-wrap {
    padding: 0 var(--px) 5rem;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: var(--max-w);
    margin-inline: auto;
}

/* Featured: cols 1–2, row 1 — height = 2 mediums + gap */
.shop-card--featured {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* Mediums column: col 3, row 1 — stacked flex */
.shop-grid__mediums {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Smalls auto-place into row 2 */

/* Base card */
.shop-card {
    background: var(--olive);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1rem;
    position: relative;
    text-decoration: none;
    color: var(--text-light);
    transition: transform 0.2s;
}
.shop-card:hover { transform: translateY(-2px); }

/* Square medium cards — two stacked = featured height */
.shop-card--medium {
    aspect-ratio: 1;
    width: 100%;
}

/* Square small cards — set row 2 height */
.shop-card--small {
    aspect-ratio: 1;
}

.shop-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--nav-bg);
    color: white;
    font-family: var(--font-linked);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0em;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    z-index: 1;
    line-height: 1;
    white-space: nowrap;
}

.shop-card__img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem 0.75rem;
    min-height: 0;
    overflow: hidden;
}

.shop-card__img-wrap img {
    max-width: 95%;
    max-height: 74%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.shop-card__info {
    flex-shrink: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.shop-card__name {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1;
    color: var(--cream);
}

.shop-card--featured .shop-card__name {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 400;
}

.shop-card__sub {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.6);
}

.shop-card--hidden { display: none; }

/* ─── Blog Page (Diario del Café) ───────────────────────────────────── */
#blog-page {
    background: var(--cream);
    min-height: 100vh;
}

.blog-page-hero {
    padding: 4rem var(--px) 2.5rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

.blog-page-hero__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
    margin-bottom: 0.85rem;
}

.blog-page-hero__sub {
    font-size: 1.25rem;
    color: var(--olive-dark);
    opacity: 0.75;
    max-width: 380px;
    line-height: 1.55;
    margin-bottom: 1.75rem;
}

.blog-page-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-page-filter {
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    background: var(--cream);
    color: var(--olive-dark);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.blog-page-filter:hover { background: var(--olive-dark); color: var(--cream); }
.blog-page-filter--cta  { background: var(--olive-dark); color: var(--cream); }
.blog-page-filter--cta:hover { opacity: 0.85; }

/* Featured card */
.blog-feat-wrap {
    padding: 0 var(--px) 1rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

.blog-feat-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--olive-dark);
    border-radius: 20px;
    overflow: hidden;
    min-height: 400px;
}

.blog-feat-card--reverse { grid-template-columns: 1fr 1fr; direction: rtl; }
.blog-feat-card--reverse > * { direction: ltr; }

.blog-feat-card__text {
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    justify-content: center;
}

.blog-feat-badge {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive-light);
}

.blog-feat-title {
    font-family: var(--font-linked);
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: var(--olive-light);
}

.blog-feat-excerpt {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.65;
    text-align: justify;
    flex: 1;
    max-width: 44ch;
}

.blog-feat-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.blog-feat-card__media {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Post grid */
.blog-grid-wrap {
    padding: 0 var(--px) 1rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.blog-post-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--olive-dark);
    transition: transform 0.2s;
    border-radius: 16px;
    overflow: hidden;
    background: var(--cream-dark);
}

.blog-post-card:hover { transform: translateY(-3px); }

.blog-post-card__media {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
}

/* Reuse .blog-folder-front inside post card */
.blog-post-card__media .blog-folder-front {
    width: 100%;
    height: 100%;
}

.blog-post-card__media .blog-folder-shape {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-card__media .blog-folder-photo {
    top: 9%;
    left: 4%;
    width: 92%;
    height: 87%;
}

.blog-post-card__info {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.blog-post-card__title {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1.1;
    color: var(--olive-dark);
}

.blog-post-card__excerpt {
    font-size: 1.25rem;
    color: var(--olive-dark);
    opacity: 0.7;
    line-height: 1.55;
}

/* ─── Contact Page ───────────────────────────────────────────────────── */
#contacto-page {
    background: var(--cream);
    min-height: 100vh;
}

.contacto-hero {
    padding: 4rem var(--px) 3rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

.contacto-hero__title {
    font-family: var(--font-linked);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0em;
    color: var(--olive-dark);
    margin-bottom: 1rem;
}

.contacto-hero__sub {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 360px;
    line-height: 1.6;
}

.contacto-card-wrap {
    padding: 0 var(--px) 4rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

.contacto-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
    min-height: 480px;
}

.contacto-card__form-col {
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contacto-card__heading {
    font-family: var(--font-linked);
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    color: var(--olive-dark);
    margin-bottom: 0.25rem;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.contacto-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.contacto-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--olive-dark);
    opacity: 0.65;
}

.contacto-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(11,48,45,0.25);
    color: var(--olive-dark);
    font-family: var(--font-linked);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 0.4rem 0;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.contacto-input::placeholder {
    color: rgba(11,48,45,0.3);
}

.contacto-input:focus {
    border-bottom-color: var(--olive-dark);
}

.contacto-textarea {
    resize: vertical;
    min-height: 80px;
}

.contacto-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

.contacto-success {
    font-family: var(--font-linked);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--olive-dark);
    letter-spacing: 0em;
    text-transform: uppercase;
    padding: 2rem 0;
}

.contacto-card__media {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ─── Shared btn (non-hero) ─────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    border-radius: 2px;
}
.btn-outline-light { background: transparent; color: var(--text-light); border-color: var(--text-light); }
.btn-outline-light:hover { background: var(--text-light); color: var(--green-dark); }
.btn-ghost { background: transparent; color: var(--text-light); border-color: transparent; opacity: 0.7; }
.btn-ghost:hover { opacity: 1; border-color: var(--text-light); }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero__content-inner { grid-template-columns: 1fr; }
    .hero__right { padding-bottom: 0; }
    .features__inner { grid-template-columns: 1fr; }
    .blog-section__featured { grid-template-columns: 1fr; }
    .blog-featured__img { min-height: 220px; }
    .products-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .product-card--featured { grid-column: 1 / 3; grid-row: auto; min-height: 340px; }
    .products-grid__mediums { grid-column: 1 / 3; grid-row: auto; flex-direction: row; }
    .product-card--medium { flex: 1; }
    .shop-grid { grid-template-columns: 1fr 1fr; }
    .shop-card--featured { grid-column: 1 / 3; grid-row: auto; }
    .shop-grid__mediums { grid-column: 1 / 3; grid-row: auto; flex-direction: row; }
    .shop-card--medium { flex: 1; }
    .blog-feat-card { grid-template-columns: 1fr; }
    .blog-feat-card--reverse { direction: ltr; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .blog-card { grid-template-columns: 1fr; }
    .blog-card__media { display: none; }
    .contacto-card { grid-template-columns: 1fr; }
    .contacto-card__media { display: none; }
}
@media (max-width: 600px) {
    .hero__title { font-size: clamp(3rem, 14vw, 5rem); }
    .products-grid { grid-template-columns: 1fr; }
    .product-card--featured { grid-column: 1; }
    .products-grid__mediums { grid-column: 1; flex-direction: column; }
    .features__photo { width: 100px; height: 100px; }
    .shop-grid { grid-template-columns: 1fr; }
    .shop-card--featured { grid-column: 1; }
    .shop-grid__mediums { grid-column: 1; flex-direction: column; }
    .blog-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE POST  (single.php)
═══════════════════════════════════════════════════════════════════ */

/* Hero */
.single-post-hero {
    background: var(--cream);
    padding: 6rem var(--px) 4rem;
}
.single-post-hero__inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.single-post-hero__title {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    color: var(--olive-dark);
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
.single-post-hero__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.single-post-hero__date {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--olive-dark);
    opacity: 0.8;
}
.single-post-hero__cat {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--olive-dark);
    background: rgba(28, 42, 18, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.single-post-hero__cat:hover { background: rgba(28, 42, 18, 0.28); }

/* Content 2-col */
.single-post-content {
    background: var(--cream);
    padding: 4rem var(--px);
}
.single-post-content__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}

/* Sticky folder aside */
.single-post-aside {
    position: sticky;
    top: 2rem;
}
.single-post-folder {
    position: relative;
    width: 100%;
}
.single-post-folder .blog-folder-shape {
    display: block;
    width: 100%;
}
.single-post-folder .blog-folder-shape img {
    display: block;
    width: 100%;
    height: auto;
}
.single-post-folder .blog-folder-photo {
    position: absolute;
    top: 9%;
    left: 4%;
    width: 92%;
    height: 87%;
    object-fit: cover;
    z-index: 1;
}
.single-post-folder--empty {
    aspect-ratio: 4/3;
    background: var(--cream-dark);
    border-radius: 4px;
}

/* Article body */
.single-post-body__content {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--olive-dark);
}
.single-post-body__content h2 {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--olive-dark);
    margin: 2.5rem 0 1rem;
}
.single-post-body__content h3 {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.5vw, 1.6rem);
    color: var(--olive-dark);
    margin: 2rem 0 0.75rem;
}
.single-post-body__content p { margin: 0 0 1.25rem; }
.single-post-body__content a { color: var(--olive); text-decoration: underline; }
.single-post-body__content img { max-width: 100%; height: auto; border-radius: 4px; }
.single-post-body__content ul,
.single-post-body__content ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.single-post-body__content blockquote {
    border-left: 4px solid var(--olive);
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Post nav bar */
.single-post-nav {
    background: var(--cream);
    padding: 0 var(--px) 3.5rem;
}
.single-post-nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    border-top: 1px solid var(--cream-dark);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.single-post-nav__links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.single-post-nav__links .blog-btn {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 900px) {
    .single-post-content__inner {
        grid-template-columns: 1fr;
    }
    .single-post-aside {
        position: static;
        max-width: 340px;
        margin: 0 auto;
    }
}
@media (max-width: 600px) {
    .single-post-nav__inner { flex-direction: column; align-items: flex-start; }
    .single-post-nav__links { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE PRODUCT  (woocommerce/single-product.php)
═══════════════════════════════════════════════════════════════════ */

#single-product-page {
    background: var(--cream);
    color: var(--olive-dark);
}

/* Top 2-col wrap */
.sp-wrap {
    padding: 6rem var(--px) 4rem;
}
.sp-wrap__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Image column — folder frame */
.sp-folder {
    position: relative;
    width: 100%;
}
.sp-folder .blog-folder-shape {
    display: block;
    width: 100%;
}
.sp-folder .blog-folder-shape img {
    display: block;
    width: 100%;
    height: auto;
}

/* Carousel sits inside the folder photo area */
.sp-carousel {
    position: absolute;
    top: 9%;
    left: 4%;
    width: 92%;
    height: 87%;
    overflow: hidden;
    z-index: 1;
    border-radius: 2px;
}
.sp-carousel__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sp-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.sp-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sp-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(12, 56, 48, 0.72);
    color: var(--text-light);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}
.sp-carousel__btn:hover { background: rgba(12, 56, 48, 0.95); }
.sp-carousel__btn--prev { left: 0.6rem; }
.sp-carousel__btn--next { right: 0.6rem; }
.sp-carousel__dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.875rem;
}
.sp-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(11,48,45,0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.sp-carousel__dot.is-active {
    background: var(--olive-light);
    transform: scale(1.35);
}

/* Info column */
.sp-category {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.75rem;
}
.sp-title {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--olive-dark);
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
.sp-price {
    font-family: var(--font-linked);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--olive-dark);
    margin-bottom: 1.5rem;
    line-height: 1;
}
.sp-price .woocommerce-Price-amount { color: inherit; }
.sp-price del { opacity: 0.5; font-size: 0.7em; margin-right: 0.5rem; }
.sp-short-desc {
    font-family: var(--font-body);
    font-size: 1.4rem;
    line-height: 1.65;
    color: var(--olive-dark);
    opacity: 0.75;
    margin-bottom: 1rem;
}
.sp-short-desc p { margin: 0 0 0.75rem; }
.sp-long-desc {
    font-family: var(--font-body);
    font-size: 1.3rem;
    line-height: 1.75;
    color: var(--olive-dark);
    opacity: 0.75;
    margin-bottom: 2rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1rem;
}
.sp-long-desc p { margin: 0 0 0.75rem; }
.sp-long-desc p:last-child { margin-bottom: 0; }
.sp-long-desc ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.sp-long-desc li { margin-bottom: 0.35rem; }

/* Add to cart */
.sp-add-to-cart .cart { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sp-add-to-cart .qty {
    width: 64px;
    background: rgba(11,48,45,0.06);
    border: 1px solid rgba(11,48,45,0.2);
    border-radius: 24px;
    color: var(--olive-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.55rem 0.75rem;
    text-align: center;
}
.sp-add-to-cart .single_add_to_cart_button {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.08em;
    background: var(--salmon);
    color: var(--olive-dark);
    border: none;
    border-radius: 100px;
    padding: 0.75rem 2.25rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    flex: 1;
    min-width: 160px;
}
.sp-add-to-cart .single_add_to_cart_button:hover { opacity: 0.88; transform: translateY(-1px); }

/* Description section */
.sp-description-wrap {
    background: var(--product-card);
    padding: 3.5rem var(--px);
}
.sp-description-wrap__inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.sp-desc-heading {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--text-light);
    margin: 0 0 1.5rem;
}
.sp-desc-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 720px;
}
.sp-desc-body p { margin: 0 0 1rem; }
.sp-desc-placeholder {
    color: rgba(11,48,45,0.35);
    font-style: italic;
    font-size: 0.9rem;
}

/* Related products */
.sp-related-wrap {
    padding: 4rem var(--px);
    background: var(--cream-dark);
}
.sp-related-wrap__inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.sp-related-heading {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--olive-dark);
    margin: 0 0 2rem;
}
.sp-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.sp-related-grid .shop-card--small { background: var(--product-card); }
.sp-related-grid .shop-card__sub {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}
.sp-related-grid .shop-card__price {
    font-family: var(--font-linked);
    font-size: 1rem;
    color: var(--olive-dark);
    display: block;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 900px) {
    .sp-wrap__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .sp-folder { max-width: 480px; margin: 0 auto; }
    .sp-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sp-related-grid { grid-template-columns: 1fr; }
    .sp-add-to-cart .cart { flex-direction: column; align-items: stretch; }
    .sp-add-to-cart .qty { width: 100%; }
    .sp-carousel__btn { width: 30px; height: 30px; font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE  (archive.php)
═══════════════════════════════════════════════════════════════════ */

#archive-page {
    background: var(--cream);
}

/* Hero */
.archive-hero {
    padding: 6rem var(--px) 3.5rem;
}
.archive-hero__inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.archive-hero__title {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--olive-dark);
    line-height: 1.05;
    margin: 0 0 1rem;
}
.archive-hero__sub {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--olive-dark);
    opacity: 0.8;
    max-width: 560px;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}
.archive-hero__back {
    display: inline-flex;
}

/* Grid */
.archive-grid-wrap {
    padding: 3rem var(--px) 5rem;
}
.archive-grid-wrap__inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.archive-empty {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--olive-dark);
    opacity: 0.7;
    text-align: center;
    padding: 3rem 0;
}

/* Post card */
.blog-post-card {
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.blog-post-card__image-link {
    display: block;
    text-decoration: none;
}
.blog-post-card__folder {
    position: relative;
    width: 100%;
    margin: 0;
}
.blog-post-card__folder .blog-folder-shape {
    display: block;
    width: 100%;
}
.blog-post-card__folder .blog-folder-shape img {
    display: block;
    width: 100%;
    height: auto;
}
.blog-post-card__folder .blog-folder-photo {
    position: absolute;
    top: 9%;
    left: 4%;
    width: 92%;
    height: 87%;
    object-fit: cover;
    z-index: 1;
}
.blog-post-card__info {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blog-post-card__cat {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--olive);
    text-decoration: none;
}
.blog-post-card__cat:hover { color: var(--olive-dark); }
.blog-post-card__title {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--olive-dark);
    line-height: 1.2;
    margin: 0;
}
.blog-post-card__title a { color: inherit; text-decoration: none; }
.blog-post-card__title a:hover { color: var(--olive); }
.blog-post-card__excerpt {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--olive-dark);
    opacity: 0.75;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.blog-post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.blog-post-card__date {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--olive-dark);
    opacity: 0.6;
}
.blog-post-card__cta { font-size: 0.8rem; padding: 0.4rem 0.9rem; }

/* Pagination */
.archive-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}
.archive-pagination .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.archive-pagination .page-numbers {
    font-family: var(--font-linked);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--olive-dark);
    padding: 0.5rem 0.9rem;
    border: 2px solid var(--olive-dark);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
    background: var(--olive-dark);
    color: var(--cream);
}
.archive-pagination .page-numbers.dots { border-color: transparent; }

/* Responsive */
@media (max-width: 900px) {
    .archive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .archive-grid { grid-template-columns: 1fr; }
    .archive-hero__title { font-size: clamp(2rem, 10vw, 3.5rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   404  (404.php)
═══════════════════════════════════════════════════════════════════ */

#page-404 {
    background: var(--nav-bg);
    color: var(--text-light);
}
.e404-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem var(--px) 4rem;
}
.e404-content {
    text-align: center;
    max-width: 520px;
}
.e404-number {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20vw;
    line-height: 0.9;
    color: var(--olive-light);
    letter-spacing: -0.04em;
    user-select: none;
    margin-bottom: 1.5rem;
}
.e404-message {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--text-light);
    margin: 0 0 0.75rem;
}
.e404-sub {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 2.5rem;
    line-height: 1.6;
}
.e404-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .e404-number { font-size: 30vw; }
    .e404-actions { flex-direction: column; align-items: center; }
}

/* ─── WooCommerce variation form ─────────────────────────────────────────── */
.variations_form .variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
.variations_form .variations td,
.variations_form .variations th {
    padding: 0.5rem 0;
    text-align: left;
    vertical-align: top;
    border: none;
}
.variations_form .variations .label {
    padding-top: calc(0.5rem + 0.65rem); /* row-pad + select inner padding = aligns text with select text */
}
.variations_form .variations .label label {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--olive-dark);
    padding-right: 1.25rem;
    white-space: nowrap;
}
.variations_form .variations select {
    width: 100%;
    padding: 0.65rem 1rem;
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--text-light);
    background: rgba(0,0,0,0.45);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    cursor: pointer;
    appearance: auto;
    transition: border-color 0.2s;
}
.variations_form .variations select:focus {
    outline: none;
    border-color: var(--olive-light);
}
.variations_form .variations select option {
    background: #1a1a14;
    color: var(--text-light);
}
.single_variation_wrap {
    margin-top: 0.5rem;
}
.single_variation_wrap .woocommerce-variation-price {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--olive-light);
    margin-bottom: 1rem;
}
.single_variation_wrap .woocommerce-variation-price .price { color: inherit; }
.woocommerce-variation-add-to-cart {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.woocommerce-variation-add-to-cart .qty {
    width: 5rem;
    padding: 0.65rem 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    background: transparent;
    color: var(--text-light);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    text-align: center;
}
.woocommerce-variation-add-to-cart .qty:focus { outline: none; border-color: var(--olive-light); }
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex: 1;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-linked);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--olive-light);
    color: var(--olive-dark);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover { opacity: 0.85; }
.woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }
.reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--olive-dark);
    opacity: 0.55;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.15s;
}
.reset_variations:hover { opacity: 1; }
/* WC notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    list-style: none;
}
.woocommerce-message { background: rgba(var(--olive-light-rgb,139,137,99),0.15); border-left: 3px solid var(--olive-light); }
.woocommerce-error { background: rgba(180,60,60,0.12); border-left: 3px solid #c0392b; color: var(--text-light); }
.woocommerce-info { background: rgba(60,130,180,0.12); border-left: 3px solid #2980b9; }
.woocommerce-message a.button,
.woocommerce-message .button {
    margin-left: 1rem;
    padding: 0.4rem 1rem;
    font-family: var(--font-linked);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--olive-light);
    color: var(--olive-dark);
    border: none;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.woocommerce-message a.button:hover,
.woocommerce-message .button:hover { opacity: 0.8; }

/* WC notices container positioning */
.woocommerce-notices-wrapper { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--px); }

/* ─── WooCommerce Block Checkout & Cart — on-brand overrides ──────────── */

/* Page wrapper */
.woocommerce-page .entry-content,
.woocommerce-checkout .entry-content {
    padding: 0;
}

/* Root block */
.wc-block-checkout,
.wc-block-cart {
    font-family: var(--font-body) !important;
    color: var(--olive-dark) !important;
    --wc-block-components-form-input-background-color: #fff8f0;
    --wc-block-components-form-input-border-color: rgba(11,48,45,0.2);
    --wc-block-components-form-input-color: #0b302d;
    --wc-block-components-form-input-placeholder-color: rgba(11,48,45,0.4);
    --wc-block-components-button-background-color: #0b302d;
    --wc-block-components-button-color: #fff1e2;
}

/* ── Layout ── */
.wc-block-checkout .wc-block-checkout__main,
.wc-block-checkout .wp-block-woocommerce-checkout-fields-block {
    background: var(--cream);
    padding: 2rem;
}
.wc-block-checkout .wc-block-checkout__sidebar,
.wc-block-checkout .wp-block-woocommerce-checkout-totals-block {
    background: var(--cream-dark);
    padding: 2rem;
    margin-top: 5rem;
    border-radius: 16px;
}

/* ── Typography ── */
.wc-block-checkout *,
.wc-block-cart * {
    color: var(--olive-dark);
    font-family: var(--font-body);
}

/* Section headings */
.wc-block-components-checkout-step__title,
.wc-block-components-form-step__heading,
.wp-block-woocommerce-checkout-order-summary-block h2,
.wc-block-components-order-summary__title {
    font-family: var(--font-linked) !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--olive-dark) !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 1.25rem !important;
}

/* Labels */
.wc-block-components-label,
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label,
label {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(11,48,45,0.6) !important;
}

/* ── Inputs ── */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout select,
.wc-block-checkout textarea {
    background: #fff8f0 !important;
    color: var(--olive-dark) !important;
    border: 1.5px solid rgba(11,48,45,0.2) !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-size: 1.15rem !important;
    padding: 0.85rem 1rem !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-checkout input:focus,
.wc-block-checkout select:focus {
    outline: none !important;
    border-color: var(--olive-dark) !important;
    box-shadow: 0 0 0 3px rgba(11,48,45,0.08) !important;
}
.wc-block-components-text-input input::placeholder,
.wc-block-checkout input::placeholder {
    color: rgba(11,48,45,0.35) !important;
}

/* ── Checkbox & radio ── */
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control input[type="radio"] {
    accent-color: var(--olive-dark);
}

/* ── Payment section ── */
.wc-block-components-payment-method-label,
.wc-block-components-payment-method-label__name,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-payment-methods {
    background: transparent !important;
    color: var(--olive-dark) !important;
    border-color: rgba(11,48,45,0.15) !important;
}
.wc-block-components-radio-control-accordion-option--checked,
.wc-block-components-payment-method-tab--active {
    background: rgba(11,48,45,0.05) !important;
    border-color: var(--olive-dark) !important;
}
.wc-block-components-radio-control__input {
    accent-color: var(--olive-dark) !important;
}

/* ── Order summary ── */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    color: var(--olive-dark) !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__name {
    font-size: 1.1rem !important;
    color: var(--olive-dark) !important;
}
.wc-block-components-payment-method-label__name,
.wc-block-components-radio-control__label {
    font-size: 1.15rem !important;
    color: var(--olive-dark) !important;
}
.wc-block-components-order-summary-item__image img {
    border-radius: 8px;
}
.wc-block-components-totals-footer-item {
    border-top: 2px solid var(--olive-dark) !important;
    padding-top: 1rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-linked) !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--olive-dark) !important;
}

/* ── Coupon / promo ── */
.wc-block-components-totals-coupon__button,
.wc-block-checkout .wc-block-components-totals-coupon input {
    background: transparent !important;
    border-color: rgba(11,48,45,0.2) !important;
    color: var(--olive-dark) !important;
}

/* ── Place Order button ── */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-button,
.wp-block-woocommerce-checkout-actions-block button {
    background: var(--olive-dark) !important;
    color: var(--cream) !important;
    font-family: var(--font-linked) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 1rem 2rem !important;
    width: 100% !important;
    transition: opacity 0.2s !important;
    cursor: pointer !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover {
    opacity: 0.85 !important;
}
/* WC wraps button text in inner divs — must override each level */
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text,
.wc-block-components-checkout-place-order-button span {
    color: var(--cream) !important;
}

/* ── Secondary buttons / links ── */
.wc-block-components-button.outlined,
.wc-block-checkout a {
    color: var(--olive-dark) !important;
    text-decoration: underline !important;
}

/* ── Privacy / terms text ── */
.wc-block-checkout__privacy-policy,
.wc-block-checkout .wc-block-components-checkout-terms-block p {
    font-size: 0.8rem !important;
    color: rgba(11,48,45,0.55) !important;
}

/* ── Step number badge ── */
.wc-block-components-checkout-step__heading-step-number {
    background: var(--olive-dark) !important;
    color: var(--cream) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

/* ── Express payment (Google/Apple Pay banner) ── */
.wc-block-components-express-payment-continue-rule {
    color: rgba(11,48,45,0.45) !important;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
    background: rgba(11,48,45,0.15) !important;
}

/* ── Notices ── */
.wc-block-components-notice-banner {
    border-left-color: var(--olive-dark) !important;
    background: rgba(11,48,45,0.06) !important;
    color: var(--olive-dark) !important;
}

/* ── Spinner / loading ── */
.wc-block-checkout.is-loading {
    opacity: 0.6;
}

/* ── Cart page specifics ── */
.wc-block-cart__main {
    background: var(--cream);
}
.wc-block-cart__sidebar {
    background: var(--cream-dark);
    border-radius: 16px;
    padding: 1.5rem;
}
.wc-block-cart-items__header {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(11,48,45,0.5) !important;
    border-bottom: 1px solid rgba(11,48,45,0.12) !important;
}
.wc-block-cart-item__image img { border-radius: 8px; }
.wc-block-cart-item__prices .wc-block-components-product-price {
    color: var(--olive-dark) !important;
    font-family: var(--font-linked) !important;
    font-size: 1.2rem !important;
}
.wc-block-components-quantity-selector {
    border-color: rgba(11,48,45,0.2) !important;
    border-radius: 6px !important;
    background: #fff8f0 !important;
}
.wc-block-components-quantity-selector__button {
    color: var(--olive-dark) !important;
    background: transparent !important;
}
.wc-block-components-quantity-selector input {
    color: var(--olive-dark) !important;
    background: transparent !important;
}
.wc-block-cart__proceed-button button,
.wc-block-cart__submit-container button {
    background: var(--olive-dark) !important;
    color: var(--cream) !important;
    font-family: var(--font-linked) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 1rem 2rem !important;
    width: 100% !important;
    transition: opacity 0.2s !important;
}
.wc-block-cart__proceed-button button:hover { opacity: 0.85 !important; }

/* ─── Empty Cart Page ─────────────────────────────────────────────────────── */
.ec-page {
    background: var(--cream);
    min-height: 100vh;
}

/* Hero */
.ec-hero {
    text-align: center;
    padding: clamp(4rem, 10vw, 8rem) var(--px) 3rem;
    max-width: 720px;
    margin: 0 auto;
}
.ec-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.ec-hero__title {
    font-family: var(--font-linked);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--olive-dark);
    line-height: 1.05;
    margin: 0 0 1.5rem;
}
.ec-hero__sub {
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--olive-dark);
    opacity: 0.7;
    max-width: 560px;
    margin: 0 auto;
}

/* Product grid */
.ec-grid-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1rem var(--px) 5rem;
}
.ec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.ec-card {
    background: #fff8f0;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(11,48,45,0.07);
}
.ec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(11,48,45,0.12);
}
.ec-card__img-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream-dark);
}
.ec-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}
.ec-card:hover .ec-card__img { transform: scale(1.04); }
.ec-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}
.ec-card__name {
    font-family: var(--font-linked);
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--olive-dark);
    margin: 0;
    line-height: 1.15;
}
.ec-card__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--olive-dark);
    opacity: 0.65;
    margin: 0;
    flex: 1;
}
.ec-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(11,48,45,0.1);
}
.ec-card__price {
    font-family: var(--font-linked);
    font-size: 1.15rem;
    color: var(--olive-dark);
}
.ec-card__price .woocommerce-Price-amount { color: inherit; }
.ec-card__cta {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--olive-dark);
    background: var(--olive-light);
    padding: 0.4rem 0.85rem;
    border-radius: 100px;
    transition: background 0.15s;
}
.ec-card:hover .ec-card__cta { background: var(--olive); }

/* Why section */
.ec-why {
    background: var(--olive-dark);
    padding: clamp(3rem, 7vw, 6rem) var(--px);
    text-align: center;
}
.ec-why__title {
    font-family: var(--font-linked);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--cream);
    margin: 0 0 3rem;
}
.ec-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.ec-why__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ec-why__icon {
    font-size: 2.5rem;
    line-height: 1;
}
.ec-why__item h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olive-light);
    margin: 0;
}
.ec-why__item p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255,241,226,0.75);
    margin: 0;
}

@media (max-width: 600px) {
    .ec-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .ec-card__body { padding: 1rem; }
    .ec-card__name { font-size: 1.2rem; }
}

/* ─── Legal Pages (Privacy, Returns) ────────────────────────────────────── */
.legal-page {
    background: var(--cream);
    padding: 7rem var(--px) 5rem;
    min-height: 70vh;
}
.legal-wrap {
    max-width: 780px;
    margin: 0 auto;
}
.legal-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--olive-dark);
    margin: 0 0 2.5rem;
    line-height: 1.1;
}
.legal-content {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--olive-dark);
}
.legal-content h2 { display: none; } /* title already shown above */
.legal-content h3 {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--olive-dark);
    margin: 2rem 0 0.5rem;
}
.legal-content p { margin: 0 0 1rem; }
.legal-content ul { padding-left: 1.5rem; margin: 0 0 1rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--olive-dark); text-underline-offset: 3px; }
.legal-content strong { font-weight: 600; }

/* ─── My Account Page ────────────────────────────────────────────────────── */
.account-page {
    min-height: 80vh;
    background: var(--cream);
    padding: 6rem var(--px) 5rem;
}

.account-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.account-header {
    margin-bottom: 3rem;
}
.account-header__eyebrow {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 0.5rem;
}
.account-header__name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--olive-dark);
    margin: 0 0 0.5rem;
    line-height: 1;
}
.account-header__sub {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

/* ── WC Account layout ── */
.account-body .woocommerce {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── Sidebar navigation ── */
.account-body .woocommerce-MyAccount-navigation {
    background: var(--cream-dark);
    border-radius: 16px;
    padding: 1.5rem;
    position: sticky;
    top: 6rem;
}
.account-body .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.account-body .woocommerce-MyAccount-navigation li a {
    display: block;
    font-family: var(--font-linked);
    font-size: 1rem;
    font-weight: 400;
    color: var(--olive-dark);
    padding: 0.65rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.18s, color 0.18s;
}
.account-body .woocommerce-MyAccount-navigation li a:hover {
    background: var(--olive-dark);
    color: var(--cream);
}
.account-body .woocommerce-MyAccount-navigation li.is-active a,
.account-body .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    background: var(--olive-dark);
    color: var(--cream);
}
.account-body .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: rgba(11,48,45,0.45);
    font-size: 0.9rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(11,48,45,0.1);
}
.account-body .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: transparent;
    color: var(--olive-dark);
}

/* ── Content area ── */
.account-body .woocommerce-MyAccount-content {
    color: var(--olive-dark);
    font-family: var(--font-body);
}
.account-body .woocommerce-MyAccount-content p {
    color: var(--olive-dark);
    font-size: 1rem;
    line-height: 1.65;
}
.account-body .woocommerce-MyAccount-content a {
    color: var(--olive-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Orders table ── */
.account-body .woocommerce-orders-table,
.account-body table.woocommerce-MyAccount-orders {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.account-body .woocommerce-orders-table th,
.account-body table.woocommerce-MyAccount-orders th {
    font-family: var(--font-linked);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olive);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--olive-dark);
    text-align: left;
}
.account-body .woocommerce-orders-table td,
.account-body table.woocommerce-MyAccount-orders td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid rgba(11,48,45,0.12);
    vertical-align: middle;
    color: var(--olive-dark);
}
.account-body table.woocommerce-MyAccount-orders tr:last-child td {
    border-bottom: none;
}
.account-body .woocommerce-orders-table .button,
.account-body table.woocommerce-MyAccount-orders .button,
.account-body .woocommerce-MyAccount-content .button {
    display: inline-block;
    background: var(--olive-dark);
    color: var(--cream) !important;
    font-family: var(--font-linked);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: opacity 0.18s;
}
.account-body .woocommerce-MyAccount-content .button:hover { opacity: 0.8; }

/* ── Order status badges ── */
.account-body .woocommerce-order-status {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-family: var(--font-linked);
    letter-spacing: 0.05em;
    background: rgba(11,48,45,0.08);
    color: var(--olive-dark);
}
.account-body mark.order-status { background: transparent; }
.account-body .woocommerce-order-status.status-processing { background: rgba(156,158,111,0.2); color: var(--olive-dark); }
.account-body .woocommerce-order-status.status-completed  { background: rgba(11,48,45,0.12); }
.account-body .woocommerce-order-status.status-cancelled  { background: rgba(200,80,60,0.12); color: #a04030; }

/* ── Login form ── */
.account-body .woocommerce-form-login,
.account-body .woocommerce-form-register {
    background: var(--cream-dark);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 480px;
}
.account-body .woocommerce-form-login p,
.account-body .woocommerce-form-register p { margin-bottom: 1.25rem; }
.account-body .woocommerce-form__label {
    font-family: var(--font-linked);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--olive-dark);
    display: block;
    margin-bottom: 0.4rem;
}
.account-body .woocommerce-Input,
.account-body .woocommerce-Input--text,
.account-body .woocommerce-Input--email,
.account-body .woocommerce-Input--password {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(11,48,45,0.2);
    border-radius: 10px;
    background: var(--cream);
    color: var(--olive-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    box-sizing: border-box;
}
.account-body .woocommerce-Input:focus { outline: none; border-color: var(--olive-dark); }
.account-body .woocommerce-form-login__rememberme { font-size: 0.9rem; color: var(--olive-dark); }
.account-body .woocommerce-LostPassword a { font-size: 0.875rem; color: var(--olive); }
.account-body .woocommerce-form-login .woocommerce-button,
.account-body .woocommerce-form-register .woocommerce-button {
    background: var(--olive-dark);
    color: var(--cream);
    font-family: var(--font-linked);
    font-size: 1rem;
    letter-spacing: 0.06em;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: opacity 0.18s;
    width: 100%;
}
.account-body .woocommerce-form-login .woocommerce-button:hover { opacity: 0.85; }

/* ── Address sections ── */
.account-body .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.account-body .woocommerce-Address { background: var(--cream-dark); border-radius: 16px; padding: 1.75rem; }
.account-body .woocommerce-Address-title h3 {
    font-family: var(--font-linked);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--olive-dark);
    margin: 0 0 1rem;
}
.account-body address { font-style: normal; font-size: 0.95rem; line-height: 1.7; color: var(--olive-dark); }

/* ── Payment methods ── */
.account-body .woocommerce-PaymentMethod { padding: 1rem; border-bottom: 1px solid rgba(11,48,45,0.1); }
.account-body .woocommerce-PaymentMethod:last-child { border-bottom: none; }

/* ── Edit account form ── */
.account-body fieldset {
    border: 1.5px solid rgba(11,48,45,0.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.account-body fieldset legend {
    font-family: var(--font-linked);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--olive);
    padding: 0 0.5rem;
}
.account-body .woocommerce-EditAccountForm .form-row { margin-bottom: 1.25rem; }
.account-body .woocommerce-EditAccountForm label {
    font-family: var(--font-linked);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--olive-dark);
    display: block;
    margin-bottom: 0.4rem;
}
.account-body .woocommerce-EditAccountForm input[type="text"],
.account-body .woocommerce-EditAccountForm input[type="email"],
.account-body .woocommerce-EditAccountForm input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(11,48,45,0.2);
    border-radius: 10px;
    background: var(--cream-dark);
    color: var(--olive-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    box-sizing: border-box;
}

/* ── WC notices inside account ── */
.account-body .woocommerce-message {
    background: rgba(156,158,111,0.15);
    border-left: 4px solid var(--olive);
    padding: 1rem 1.25rem;
    border-radius: 0 10px 10px 0;
    margin-bottom: 1.5rem;
    color: var(--olive-dark);
    font-size: 0.95rem;
}
.account-body .woocommerce-error {
    background: rgba(200,80,60,0.08);
    border-left: 4px solid #c05040;
    padding: 1rem 1.25rem;
    border-radius: 0 10px 10px 0;
    margin-bottom: 1.5rem;
    color: var(--olive-dark);
    list-style: none;
}

/* ── Guest: dual column login/register ── */
.account-body .woocommerce > .u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .account-body .woocommerce { grid-template-columns: 1fr; }
    .account-body .woocommerce-MyAccount-navigation { position: static; }
    .account-body .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
    .account-body .woocommerce-MyAccount-navigation li a { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
    .account-body .woocommerce-Addresses { grid-template-columns: 1fr; }
    .account-body .woocommerce > .u-columns { grid-template-columns: 1fr; }
}

/* ─── Order Confirmation / Thank You Page ──────────────────────────────────── */

/* Hide the "Order Received" WP page title — our hero replaces it */
.woocommerce-order-received .legal-title { display: none !important; }

/* Lift h2 visibility inside our components (legal-content hides h2 by default) */
.sbarn-thankyou h2,
.sbarn-thankyou h2.sbarn-thankyou__card-title,
.sbarn-verify h2,
.sbarn-verify__title { display: block !important; }

/* Hide the generic WC "Thank you" paragraph that shows before verify/thankyou */
.woocommerce-order-received .woocommerce-order > p:first-child { display: none; }

.sbarn-thankyou {
    padding: 0;
}

/* ── Hero ── */
.sbarn-thankyou__hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.sbarn-thankyou__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--olive-dark);
    color: var(--cream);
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.sbarn-thankyou__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--olive-dark);
    line-height: 0.9;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
}

.sbarn-thankyou__sub {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Meta strip ── */
.sbarn-thankyou__meta {
    display: flex;
    flex-wrap: wrap;
    background: var(--olive-dark);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.sbarn-thankyou__meta-item {
    flex: 1 1 0;
    min-width: 110px;
    padding: 1.2rem 1.4rem;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sbarn-thankyou__meta-item:last-child { border-right: none; }

.sbarn-thankyou__meta-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,241,226,0.5);
}

.sbarn-thankyou__meta-value {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.3;
}

/* ── Cards ── */
.sbarn-thankyou__card {
    background: var(--cream-dark);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.sbarn-thankyou__card-title {
    font-family: var(--font-linked) !important;
    font-size: 1.7rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--olive-dark) !important;
    margin: 0 0 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(11,48,45,0.1) !important;
}

/* ── Items table ── */
.sbarn-thankyou__items {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 1.05rem;
}

.sbarn-thankyou__items thead th {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0 0.75rem;
    border-bottom: 1px solid rgba(11,48,45,0.12);
    text-align: left;
}

.sbarn-thankyou__items .ta-center { text-align: center; }
.sbarn-thankyou__items .ta-right  { text-align: right; }

.sbarn-thankyou__items tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(11,48,45,0.07);
}

.sbarn-thankyou__items tbody td {
    padding: 0.9rem 0;
    vertical-align: middle;
    color: var(--olive-dark);
}

.sbarn-thankyou__item-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.sbarn-thankyou__item-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cream);
}

.sbarn-thankyou__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbarn-thankyou__item-title {
    font-weight: 600;
    color: var(--olive-dark);
    line-height: 1.3;
}

.sbarn-thankyou__item-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.sbarn-thankyou__item-meta dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
.sbarn-thankyou__item-meta dt { font-weight: 600; }
.sbarn-thankyou__item-meta dt::after { content: ':'; }
.sbarn-thankyou__item-meta dd { margin: 0; }

/* Totals footer */
.sbarn-thankyou__items tfoot td,
.sbarn-thankyou__items tfoot th {
    padding: 0.5rem 0;
    color: var(--text-muted);
    font-size: 1rem;
    text-align: right;
    border-top: 1px solid rgba(11,48,45,0.06);
}
.sbarn-thankyou__items tfoot th { text-align: left; font-weight: 400; }

.sbarn-thankyou__items tfoot .sbarn-total--order_total td,
.sbarn-thankyou__items tfoot .sbarn-total--order_total th {
    color: var(--olive-dark);
    font-size: 1.2rem;
    font-weight: 700;
    border-top: 2px solid rgba(11,48,45,0.18);
    padding-top: 0.8rem;
}

/* ── Two-col: address + payment ── */
.sbarn-thankyou__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.sbarn-thankyou__two-col .sbarn-thankyou__card { margin-bottom: 0; }

.sbarn-thankyou__address {
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--olive-dark);
}

.sbarn-thankyou__payment-method {
    font-weight: 600;
    color: var(--olive-dark);
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
}
.sbarn-thankyou__payment-email {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

/* ── Shared buttons ── */
.sbarn-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.18s, transform 0.15s;
    line-height: 1;
}
.sbarn-btn:hover { opacity: 0.82; transform: translateY(-1px); text-decoration: none; }
.sbarn-btn--primary  { background: var(--olive-dark); color: var(--cream) !important; border-color: var(--olive-dark); }
.sbarn-btn--secondary { background: var(--cream-dark); color: var(--olive-dark) !important; border-color: rgba(11,48,45,0.2); }
.sbarn-btn--ghost    { background: transparent; color: var(--olive-dark) !important; border-color: var(--olive-dark); }

/* ── Actions row ── */
.sbarn-thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    padding: 0.5rem 0 3rem;
}

/* ── Failed state ── */
.sbarn-thankyou__failed {
    text-align: center;
    padding: 3rem 1rem;
}
.sbarn-thankyou__failed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #b03020;
    color: #fff;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.sbarn-thankyou__failed-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    color: #b03020;
    font-weight: 400;
    margin: 0 0 0.75rem;
}
.sbarn-thankyou__failed-msg {
    color: var(--text-muted);
    max-width: 460px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}
.sbarn-thankyou__failed .sbarn-thankyou__actions { justify-content: center; }

/* ── Verify email (guest) ── */
.sbarn-verify {
    padding: 1.5rem 0 3rem;
    text-align: center;
}
.sbarn-verify__icon {
    display: block;
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: var(--olive-dark);
}
.sbarn-verify__title {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--olive-dark) !important;
    margin: 0 0 0.75rem !important;
    line-height: 0.95 !important;
}
.sbarn-verify__sub {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}
.sbarn-verify__sub a { color: var(--olive-dark); }
.sbarn-verify__card {
    background: var(--cream-dark);
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
}
.sbarn-verify__error {
    background: rgba(176,48,32,0.08);
    border: 1px solid rgba(176,48,32,0.25);
    color: #8b2010;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
.sbarn-verify__field { margin-bottom: 1.25rem; }
.sbarn-verify__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.sbarn-verify__input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--cream);
    border: 1.5px solid rgba(11,48,45,0.2);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--olive-dark);
    box-sizing: border-box;
    transition: border-color 0.18s;
}
.sbarn-verify__input:focus {
    outline: none;
    border-color: var(--olive-dark);
    box-shadow: 0 0 0 3px rgba(11,48,45,0.08);
}
.sbarn-verify__submit { width: 100%; justify-content: center; }

/* ── Print receipt ── */
@media print {
    .site-header,
    .page-header,
    nav,
    .site-footer,
    .footer-bar,
    .sbarn-thankyou__actions,
    .sbarn-verify {
        display: none !important;
    }

    body, .legal-page { background: #fff !important; }

    .legal-page { padding: 1rem 0 !important; }
    .legal-title { font-size: 1.25rem !important; margin-bottom: 1rem !important; }

    .sbarn-thankyou__hero { padding: 1rem 0; }
    .sbarn-thankyou__check { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sbarn-thankyou__title { font-size: 2.5rem !important; }

    .sbarn-thankyou__meta {
        background: #1a1a1a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .sbarn-thankyou__meta-item { border-right-color: rgba(255,255,255,0.2) !important; }
    .sbarn-thankyou__meta-label { color: rgba(255,255,255,0.6) !important; }
    .sbarn-thankyou__meta-value { color: #fff !important; }

    .sbarn-thankyou__card { background: #f5f3ef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sbarn-thankyou__two-col { grid-template-columns: 1fr 1fr !important; }

    .sbarn-thankyou__item-img { background: #eee !important; }
    .sbarn-thankyou__items tfoot .sbarn-total--order_total td,
    .sbarn-thankyou__items tfoot .sbarn-total--order_total th { border-top-color: #333 !important; }
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sbarn-thankyou__meta { flex-direction: column; }
    .sbarn-thankyou__meta-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .sbarn-thankyou__meta-item:last-child { border-bottom: none; }
    .sbarn-thankyou__two-col { grid-template-columns: 1fr; }
    .sbarn-thankyou__actions { flex-direction: column; }
    .sbarn-thankyou__actions .sbarn-btn { width: 100%; justify-content: center; }
    .sbarn-thankyou__item-name-cell { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — phone portrait (≤ 600px)
   Comprehensive pass covering all sections not previously addressed
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ─── Header / nav-panel ─────────────────────────────────────── */
    .header-controls .lang-item a { font-size: 0.85rem; }

    /* ─── Hero ───────────────────────────────────────────────────── */
    .hero__beans    { height: 52vw; min-height: 220px; max-height: 340px; }
    .hero__subtitle { font-size: 1.05rem; }
    .hero__actions  { gap: 0.75rem; }
    .hero-btn       { font-size: 0.9rem; padding: 0.7rem 1.25rem; }

    /* ─── Features ───────────────────────────────────────────────── */
    .features__portrait-card { min-height: 300px; }
    .features__card           { padding: 1.25rem; gap: 1rem; }

    /* ─── Blog tabs (home) ───────────────────────────────────────── */
    .blog-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
        gap: 0;
    }
    .blog-tab { white-space: nowrap; flex-shrink: 0; }
    .blog-card__text    { padding: 2rem 1.5rem; }
    .blog-card__excerpt { font-size: 1rem; }

    /* ─── Blog feat card / blog page ─────────────────────────────── */
    .blog-feat-card__text   { padding: 2rem 1.5rem; }
    .blog-feat-excerpt      { font-size: 1rem; }
    .blog-post-card__excerpt { font-size: 1rem; }
    .blog-grid              { grid-template-columns: 1fr; }

    /* ─── About slider tabs ──────────────────────────────────────── */
    .about-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    .about-tab { white-space: nowrap; flex-shrink: 0; }
    .about-slide__content { padding: 1.75rem 1.25rem; }

    /* ─── CTA section ────────────────────────────────────────────── */
    .cta-section       { padding: 4rem var(--px) 3rem; }
    .cta-section__sub  { font-size: 1.75rem; letter-spacing: 0.12em; }

    /* ─── Footer ─────────────────────────────────────────────────── */
    .footer-top { padding: 2.5rem var(--px) 2.5rem; }
    .footer-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    .footer-bottom  { padding-top: 2.5rem; }

    /* ─── Cart panel ─────────────────────────────────────────────── */
    .cart-item__name             { font-size: 1.2rem; }
    .cart-item__price            { font-size: 1.1rem; }
    .cart-panel__total span:last-child { font-size: 1.5rem; }
    .cart-panel__empty           { font-size: 1.25rem; }
    .cart-panel                  { padding: 1.25rem 1.25rem 1.75rem; }

    /* ─── Single post ────────────────────────────────────────────── */
    .single-post-hero    { padding-top: 3.5rem; padding-bottom: 2rem; }
    .single-post-content { padding-top: 2rem; padding-bottom: 2rem; }

    /* ─── Single product ─────────────────────────────────────────── */
    .sp-wrap             { padding-top: 3.5rem; padding-bottom: 2rem; }
    .sp-description-wrap { padding-top: 2rem; padding-bottom: 2rem; }

    /* ─── Contact page ───────────────────────────────────────────── */
    .contacto-hero       { padding-top: 3.5rem; padding-bottom: 2rem; }
    .contacto-card__form-col { padding: 2rem 1.5rem; }

    /* ─── My Account — orders table horizontal scroll ────────────── */
    .account-body .woocommerce-MyAccount-content { overflow-x: auto; }
    .account-body table.woocommerce-MyAccount-orders { min-width: 480px; }

    /* ─── WC checkout: remove large sidebar top margin when stacked ─ */
    .wc-block-checkout .wc-block-checkout__sidebar { margin-top: 2rem; }

    /* ─── Empty cart ─────────────────────────────────────────────── */
    .ec-hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
}