/* ============================================================
   EARDROP — Main Stylesheet
   ============================================================ */

/* Inter, self-hosted (variable font, weights 400-900). Served from the theme
   instead of Google Fonts so no visitor data goes to a third party. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: optional;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: optional;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --accent:        #2563eb;
    --accent-dark:   #1d4ed8;
    --accent-light:  #dbeafe;
    --bg:            #ffffff;
    --bg-alt:        #f8fafc;
    --bg-dark:       #0c1445;
    --text:          #111827;
    --text-muted:    #6b7280;
    --border:        #e5e7eb;
    --radius:        12px;
    --radius-lg:     20px;
    --shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg:     0 8px 32px rgba(0,0,0,.12);
    --font:          'Inter', system-ui, -apple-system, sans-serif;
    --header-h:      68px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* Keep the hidden attribute working on images (e.g. the mini-cart's spare image copy) */
img[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font); }

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── TYPOGRAPHY ─────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── BUTTONS ────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    transition: all .18s ease;
    border: 2px solid transparent;
    white-space: nowrap;
}
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.35); }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent-light); }

.btn-ghost {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.3);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.22); }

.btn-white {
    background: #fff;
    color: var(--accent);
    border-color: #fff;
}
.btn-white:hover { background: var(--accent-light); }

/* ── SECTION COMMON ────────────────────────────── */
.section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.final-cta .section-header { margin-bottom: 24px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { color: var(--text-muted); font-size: 18px; max-width: 560px; margin: 0 auto; }
.section-cta { text-align: center; }
.section-label {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}

/* ── LANG SWITCHER ─────────────────────────────── */
.lang-switcher {
    position: relative;
    flex-shrink: 0;
}
.lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.lang-current:hover { background: var(--bg-alt); }
.lang-flag { font-size: 15px; line-height: 1; }
.lang-caret { color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.lang-switcher.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 200;
}
.lang-switcher.open .lang-menu { display: flex; }
.lang-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    border-radius: calc(var(--radius) - 4px);
    transition: background .15s;
}
.lang-menu-option:hover { background: var(--bg-alt); }
.lang-menu-option.is-active { color: var(--accent); font-weight: 700; background: var(--accent-light); }

/* ── HEADER ────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
    transition: box-shadow .2s;
}
.site-header.scrolled { box-shadow: var(--shadow); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 32px;
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }

.primary-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
    min-width: 0;
}
.nav-list { display: flex; gap: 4px; }
.nav-collections-link { flex-shrink: 0; }
.nav-list li a {
    display: block;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 8px;
    transition: all .15s;
}
.nav-list li a:hover, .nav-list li.current-menu-item a { color: var(--text); background: var(--bg-alt); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    width: 40px;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .2s;
}

/* ── HERO ───────────────────────────────────────── */
.hero {
    background: linear-gradient(160deg, #0c1445 0%, #1e3a8a 60%, #1e40af 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

.hero-bg-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    pointer-events: none;
}
.hero-bg-waves svg { width: 100%; height: 100%; }

.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content { color: #fff; text-align: center; min-width: 0; }
.hero-visual { min-width: 0; }

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.hero-title {
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-sub {
    color: #93c5fd;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .hero-sub-secondary { display: none; }
    .hero-sub-primary { display: none; }
}
.hero-sub-mobile-only { display: none; }
@media (max-width: 700px) {
    .hero-sub-mobile-only { display: block; }
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; justify-content: center; }
.hero-sub-link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.4);
    transition: border-color .15s;
}
.hero-sub-link:hover { border-bottom-color: #fff; }

.hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.15);
    justify-content: center;
}
.stat { display: flex; flex-direction: column; }
.stat strong { font-size: 22px; font-weight: 800; color: #fff; }
.stat span { font-size: 13px; color: #93c5fd; }
.stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

/* Audio Player Mock */
.audio-player {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.player-track-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.player-flag { width: 32px; height: auto; border-radius: 3px; flex-shrink: 0; display: block; }
.player-direction-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.player-direction-arrow {
    background: rgba(147,197,253,.25);
    border: none;
    color: #fff;
    font-size: 15px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, transform .15s;
    padding: 0 14px;
    font-family: var(--font);
}
.player-direction-arrow:hover { background: rgba(147,197,253,.42); transform: scale(1.08); }
.player-direction-arrow .player-flag { width: 30px; border-radius: 2px; flex-shrink: 0; }
.player-word { font-size: 24px; font-weight: 800; color: #fff; }
.player-translation { font-size: 15px; color: #93c5fd; }

.player-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 60px;
    margin-bottom: 20px;
}
.bar {
    flex: 1;
    background: linear-gradient(to top, rgba(37,99,235,.6), rgba(99,102,241,.8));
    border-radius: 2px;
    min-height: 8px;
    animation: wavePulse 1.5s ease-in-out infinite;
}
.bar:nth-child(odd) { animation-delay: .2s; }
.bar:nth-child(3n) { animation-delay: .4s; }

@keyframes wavePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; height: 40% !important; }
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.player-btn {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    transition: background .15s;
}
.player-btn:hover { background: rgba(255,255,255,.2); }
.player-play {
    background: var(--accent) !important;
    padding: 10px 24px;
}
.player-controls-left { flex: 1; }
.player-counter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 13px;
    font-weight: 600;
    color: #93c5fd;
}
.player-packs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.player-pack {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,.08);
    color: #93c5fd;
    transition: all .15s;
    cursor: pointer;
}
.player-pack.active {
    background: var(--accent);
    color: #fff;
}

/* ── HOW IT WORKS ────────────────────────────────── */
.how-it-works { background: var(--bg-alt); }

/* One card with the three steps, same look as the checkout's "How it works" */
.steps-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.steps-card ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps-card li { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-align: center; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.steps-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eff6ff;
    font-size: 22px;
    line-height: 1;
}
.steps-card strong { color: var(--text); }
@media (max-width: 600px) {
    .steps-card { padding: 22px 20px; }
    .steps-card ol { grid-template-columns: 1fr; gap: 12px; }
    .steps-card li { flex-direction: row; gap: 12px; text-align: left; }
    .steps-card-icon { flex-shrink: 0; width: 40px; height: 40px; font-size: 18px; }
}

/* ── HERO MOMENTS (auto-rotator) ───────────────── */
.hero-rotator {
    margin: 48px auto 0;
    overflow: hidden;
    max-width: 460px;
}
.hero-rotator-track {
    display: flex;
    transition: transform .5s ease;
}
.hero-moment {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.35;
    color: #e2e8f0;
    backdrop-filter: blur(8px);
}
.hero-moment span { font-size: 22px; line-height: 1; flex-shrink: 0; }
@media (max-width: 860px) { .listen-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .listen-card { flex-basis: 100%; } }

/* ── PACK TYPES ─────────────────────────────────── */
.pack-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pack-type-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    position: relative;
    transition: all .2s;
}
.pack-type-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.pack-type-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
}

.pack-type-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}
.pack-type-card h3 { margin-bottom: 12px; }
.pack-type-card p { color: var(--text-muted); margin-bottom: 20px; font-size: 15px; line-height: 1.7; }

.pack-type-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }

.tag {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
}

.pack-type-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
}
.pack-type-price del {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 6px;
}
.pack-type-price ins {
    text-decoration: none;
}

/* Sale countdown banner (homepage collections, shop, product page) */
.sale-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 18px;
    font-weight: 600;
    border: 2px solid var(--accent-dark);
    box-shadow: var(--shadow-lg);
    animation: sale-banner-pulse 2s ease-out infinite;
    text-align: center;
}
.sale-banner[hidden] {
    display: none;
}
@keyframes sale-banner-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(29, 78, 216, .55), var(--shadow-lg); }
    70%  { box-shadow: 0 0 0 10px rgba(29, 78, 216, 0), var(--shadow-lg); }
    100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
    .sale-banner { animation: none; }
}
.sale-banner__timer {
    font-weight: 800;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}
.pack-type-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    transition: all .18s ease;
}
.pack-type-link:hover {
    gap: 10px;
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37, 99, 235, .35);
}

/* ── FEATURED PRODUCTS ─────────────────────────── */
.featured-products { background: var(--bg-alt); }

/* ── LANGUAGES ─────────────────────────────────── */
.lang-cards {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
}

.lang-card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
}
.lang-flags { font-size: 32px; margin-bottom: 16px; }
.lang-card h3 { margin-bottom: 12px; }
.lang-card p { color: var(--text-muted); margin-bottom: 20px; line-height: 1.7; }
.lang-badge {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
}

.lang-swap {
    font-size: 32px;
    color: var(--text-muted);
    padding: 0 24px;
    flex-shrink: 0;
}

.coming-soon-langs { text-align: center; }
.coming-langs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.coming-langs span {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
}

/* ── PRICING BANNER ─────────────────────────────── */
.pricing-banner { background: var(--bg); }

.pricing-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
    border-radius: var(--radius-lg);
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.price-example { border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; }
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #93c5fd;
    font-size: 15px;
}
.price-row strong { color: #fff; font-size: 18px; font-weight: 700; }

/* ── AUDIO FORMAT ─────────────────────────────── */
.audio-format { background: var(--bg-alt); }

.format-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.format-block {
    padding: 20px 24px;
    border-radius: var(--radius);
    text-align: center;
    min-width: 120px;
}
.format-block .format-label { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.format-block .format-time { font-size: 20px; font-weight: 700; }

.format-block.silence { background: var(--bg); border: 1px dashed var(--border); color: var(--text-muted); }
.format-block.word { border: none; }
.format-block.pt { background: #eff6ff; color: var(--accent); }
.format-block.en { background: #f0fdf4; color: #16a34a; }

.format-arrow { font-size: 20px; color: var(--border); padding: 0 12px; }

/* ── SHOP LAYOUT ─────────────────────────────── */
.shop-banner {
    background: linear-gradient(135deg, #0c1445 0%, #1e3a8a 100%);
    color: #fff;
    padding: 60px 0 40px;
}
.shop-title { color: #fff; margin: 8px 0 0; }
.shop-description { color: #93c5fd; margin-top: 8px; }

.shop-container { padding-top: 40px; padding-bottom: 80px; }

.shop-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}

.cat-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    background: #fff;
    transition: all .15s;
}
.cat-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.cat-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.shop-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.shop-empty h2 { margin: 16px 0 12px; }

/* ── GENERIC PAGE CONTENT (legal pages, etc.) ─── */
.page-title { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.page-content { font-size: 16px; line-height: 1.75; color: var(--text); }
.page-content h2 { font-size: 22px; font-weight: 700; margin: 2em 0 .6em; }
.page-content h2:first-child { margin-top: 0; }
.page-content h3 { font-size: 18px; font-weight: 700; margin: 1.6em 0 .5em; }
.page-content p { margin: 0 0 1.2em; }
.page-content ul, .page-content ol { margin: 0 0 1.2em; padding-left: 1.4em; list-style: revert; }
.page-content li { margin-bottom: .4em; }
.page-content a { color: var(--accent); text-decoration: underline; }
.page-content a.btn-primary { color: #fff; text-decoration: none; }

/* ── CART / CHECKOUT / MY ACCOUNT ──────────────── */
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 15px;
}
.woocommerce table.shop_table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    padding: 0 14px 12px;
    border-bottom: 2px solid var(--border);
}
.woocommerce table.shop_table td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.woocommerce table.cart td.product-thumbnail img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg-alt);
}
.woocommerce table.cart td.product-name a { color: var(--text); font-weight: 600; }
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity { display: none; }
.woocommerce table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-muted) !important;
    font-size: 18px;
    line-height: 1;
    transition: all .15s ease;
}
.woocommerce table.cart td.product-remove a.remove:hover { background: #fef2f2; color: #dc2626 !important; }

.woocommerce table.shop_table tr.cart-subtotal th,
.woocommerce table.shop_table tr.cart-subtotal td,
.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td {
    padding: 14px 4px;
}
.woocommerce table.shop_table tr.cart-subtotal td,
.woocommerce table.shop_table tr.order-total td { text-align: right; }
.woocommerce table.shop_table tr.order-total { font-size: 18px; font-weight: 800; }

.cart-collaterals { display: flex; justify-content: flex-end; margin-top: 24px; }
.cart_totals {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
}
.cart_totals h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.cart_totals table.shop_table { margin: 8px 0 0; }
.wc-proceed-to-checkout { margin-top: 20px; }

.woocommerce .coupon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.woocommerce .coupon .input-text,
.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce select,
.woocommerce textarea {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    border: 2px solid var(--accent);
    background: #fff;
    color: var(--accent) !important;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--accent-light);
}
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
}
.woocommerce table.shop_table tr.actions td.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: none;
}

@media (max-width: 700px) {
    .woocommerce table.shop_table tr.actions td.actions { flex-direction: column; align-items: stretch; }
    .cart-collaterals { justify-content: stretch; }
    .cart_totals { max-width: none; }
}

/* ── SINGLE PRODUCT ─────────────────────────── */
.single-product-container { padding: 40px 24px 80px; }

/* Product card: info on the left, buy box on the right. The buy box carries
   the navy-to-blue gradient of the page headers (.page-hero) */
.single-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: center;
    margin: 24px 0 0;
    padding: 40px;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.product-title-row { grid-column: 1 / -1; }
.product-title-row .product_title { color: var(--bg-dark); margin: 0; }

/* Product image (the collection tile) as a third column on the left */
.single-product-layout:has(.product-image) { grid-template-columns: 110px minmax(0, 1fr) 300px; }
.product-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }


/* "How each track works": the homepage steps card's layout inside a product section */
.product-section--steps h2 { margin: 0 0 20px; }
.track-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.track-steps li { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-align: center; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.track-steps strong { color: var(--text); }
.track-steps .steps-card-icon { background: #fff; }
/* Tablet: the image moves above the intro, buy box stays on the right */
@media (max-width: 1024px) {
    .single-product-layout:has(.product-image) { grid-template-columns: minmax(0, 1fr) 300px; }
    .single-product-layout:has(.product-image) .product-image { grid-column: 1; width: 90px; }
    .single-product-layout:has(.product-image) .product-info { grid-column: 1; }
    .single-product-layout:has(.product-image) .product-buy-box { grid-column: 2; grid-row: 2 / span 2; }
}
/* Phone: everything in one column */
@media (max-width: 768px) {
    .single-product-layout:has(.product-image) { grid-template-columns: 1fr; }
    .single-product-layout:has(.product-image) .product-buy-box { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) {
    .track-steps { grid-template-columns: 1fr; gap: 12px; }
    .track-steps li { flex-direction: row; gap: 12px; text-align: left; }
    .track-steps .steps-card-icon { flex-shrink: 0; width: 40px; height: 40px; font-size: 18px; }
}

.product-buy-box {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #1e3a8a 100%);
    border-radius: var(--radius);
    padding: 24px;
    color: #fff;
}

.product-buy-box .price {
    display: block;
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}

.product-buy-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.product-buy-box .single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    transition: all .18s ease;
}
.product-buy-box .single_add_to_cart_button:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
}

/* ── PRODUCT SECTIONS ────────────────────────── */
/* WooCommerce's product tabs, rendered as stacked cards (single-product.php) */
.product-section {
    margin-top: 24px;
    padding: 28px 32px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
}
/* The description card is white, like the product card above it */
.product-section.product-section--description { background: #fff; }
/* Keep the denser content white on the tinted cards */
.product-section .verb-example-table-wrap,
.product-section #review_form_wrapper textarea,
.product-section #review_form_wrapper input[type="text"],
.product-section #review_form_wrapper input[type="email"],
.product-section #review_form_wrapper select { background: #fff; }

.related-products-section { margin-top: 64px; }
.related-products-section .related > h2 { margin-bottom: 24px; }
/* Each language has one other collection, so the related card takes the full width at every screen size.
   .related in the selector outweighs the shop grid's .woocommerce ul.products (3 columns, 2 on phones). */
.related-products-section .related ul.products { grid-template-columns: minmax(0, 556px); } /* half the 1112px content width; on narrower screens it shrinks to fit */

/* Review submit: an <input>, so it doesn't pick up the site font like <button> does */
#review_form .form-submit { margin-top: 16px; }
#review_form .form-submit .btn { font-family: var(--font); cursor: pointer; }

/* Review form star picker. WooCommerce's JS turns the rating <select> into
   five "N of 5 stars" links; its own stylesheet (switched off in this theme)
   normally draws them as stars, so this does the same. Hovering previews a
   rating, a click keeps it (.selected on the p, .active on the link). */
.comment-form-rating p.stars { margin: 4px 0 8px; }
.comment-form-rating p.stars span { display: inline-flex; gap: 4px; }
.comment-form-rating p.stars a {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 28px;
    line-height: 1;
    overflow: hidden;
    text-indent: -999em;
    text-decoration: none;
}
.comment-form-rating p.stars a::before {
    content: '★';
    position: absolute;
    inset: 0;
    text-indent: 0;
    color: #d1d5db;
    transition: color .1s;
}
.comment-form-rating p.stars:hover a::before,
.comment-form-rating p.stars.selected:not(:hover) a::before { color: #f59e0b; }
.comment-form-rating p.stars:hover a:hover ~ a::before,
.comment-form-rating p.stars.selected:not(:hover) a.active ~ a::before { color: #d1d5db; }

.product-section h2 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--accent);
}

.product-section ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 24px;
    padding: 0;
    margin: 0;
}

.product-section ul li {
    font-size: 14px;
    color: var(--text);
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pack-list-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.product-section p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 14px;
}

.product-section ul.sentence-packs-list {
    margin-top: 24px;
}

.product-section ul.verb-list li {
    justify-content: flex-start;
    font-style: italic;
}

/* Example-sentence table (verb collection products) */
.product-section h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 32px 0 4px;
    color: var(--text);
}
/* The collapsible verb list / example sentences: their card is the
   surrounding .product-section */
.verb-example-details summary,
.verb-list-details summary {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    list-style: revert;
}
.verb-example-details summary:hover,
.verb-list-details summary:hover { color: var(--accent-dark); }
.verb-example-details[open] summary,
.verb-list-details[open] summary { margin-bottom: 12px; }
.verb-example-details p { margin: 0 0 12px; }
.verb-list-details ul.sentence-packs-list {
    margin-top: 0;
    display: block;
}
.verb-list-details ul.sentence-packs-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.verb-list-details .pack-list-count { white-space: normal; text-align: right; }
.verb-example-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
}
.verb-example-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.verb-example-table th,
.verb-example-table td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.verb-example-table td:nth-child(3),
.verb-example-table td:nth-child(4) {
    white-space: normal;
}
.verb-example-table thead th {
    background: var(--accent-light, #dbeafe);
    color: var(--accent-dark, #1d4ed8);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.verb-example-table tbody tr:last-child td { border-bottom: none; }
.verb-example-table tbody tr:nth-child(even) { background: #f9fafb; }

/* Verb groups (Infinitive product) */
.verb-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 28px;
}

.verb-group h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.verb-group ul {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset !important;
    gap: 0 !important;
    margin-top: 0 !important;
}

.verb-group ul li {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.vg-pt {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.vg-en {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.verb-more {
    margin-top: 20px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    font-style: italic;
}

@media (max-width: 700px) {
    .verb-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .verb-groups { grid-template-columns: 1fr; }
}

/* ── FOOTER ──────────────────────────────────── */
.site-footer {
    background: #0c1445;
    color: #93c5fd;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    padding: 72px 24px 60px;
}

.footer-logo { margin-bottom: 16px; }
.footer-tagline { color: #93c5fd; font-size: 15px; line-height: 1.7; max-width: 280px; }

.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: .04em; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 15px; color: #93c5fd; transition: color .15s; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid #1e3a8a;
    font-size: 14px;
    color: #93c5fd;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: #93c5fd; transition: color .15s; }
.footer-legal a:hover { color: #fff; }
.footer-credit { padding: 0 24px 20px; text-align: center; font-size: 13px; }
.footer-credit a { color: #93c5fd; transition: color .15s; }
.footer-credit a:hover { color: #fff; }

/* ── WOOCOMMERCE BASE ─────────────────────────── */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .2s;
}
.woocommerce ul.products li.product:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--bg-alt);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    padding: 16px 20px 8px;
}
.woocommerce ul.products li.product .loop-product-desc {
    padding: 0 20px 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}
.woocommerce ul.products li.product .price {
    padding: 0 20px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
}
.woocommerce ul.products li.product .button {
    display: block;
    margin: 16px 20px 20px;
    background: var(--accent);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition: background .15s;
    border: none;
}
.woocommerce ul.products li.product .button:hover { background: var(--accent-dark); }

/* Add-to-cart buttons for collections already in the cart (toggled by main.js) */
.add_to_cart_button.disabled { opacity: .45; pointer-events: none; cursor: default; }

/* "Go to checkout" (WooCommerce's added_to_cart link) takes the add-to-cart
   button's place as an outlined button, sized to match each context */
.add_to_cart_button:has(+ .added_to_cart) { display: none; }
.added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.added_to_cart::before { content: '✓'; }
.added_to_cart:hover { background: var(--accent-light); color: var(--accent-dark); }
.main-pack-card__footer .added_to_cart { padding: 8px 20px; font-size: 14px; }
.product-buy-box .added_to_cart { width: 100%; padding: 14px 0; font-size: 16px; }
.woocommerce ul.products li.product .added_to_cart { display: flex; margin: 16px 20px 20px; padding: 10px 18px; font-size: 15px; }

/* Word count badge on product cards */
.product-word-count {
    display: block;
    padding: 2px 20px 10px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Word count on single product page */
.product-word-count-single {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ── MAIN PACK CARDS (shop page) ─────────────────── */
.main-packs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 40px 0;
}

.main-pack-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.main-pack-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.main-pack-card__body {
    padding: 28px 28px 20px;
    flex: 1;
}

.main-pack-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.main-pack-card__title a {
    color: var(--text);
}
.main-pack-card__title a:hover { color: var(--accent); }
/* Whole card links to the product: the title link's ::after covers the card,
   and the footer buttons sit above it so they stay clickable */
.main-pack-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.main-pack-card__footer .button,
.main-pack-card__footer .added_to_cart { position: relative; z-index: 1; }

.main-pack-card__count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.main-pack-card__desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Product short descriptions (shop card, product card, related card): spaced
   paragraphs, with the bold opening line in the main text colour */
.main-pack-card__desc p,
.woocommerce-product-details__short-description p,
.loop-product-desc p { margin: 0 0 .8em; }
.main-pack-card__desc p:last-child,
.woocommerce-product-details__short-description p:last-child,
.loop-product-desc p:last-child { margin-bottom: 0; }
.main-pack-card__desc strong,
.woocommerce-product-details__short-description strong,
.loop-product-desc strong { color: var(--text); font-size: 1.1em; font-weight: 700; }
/* The emphasised line (e.g. "The strongest foundation...") as a blue tagline */
.main-pack-card__desc em,
.woocommerce-product-details__short-description em,
.loop-product-desc em { font-style: normal; font-weight: 600; color: var(--accent); }

.main-pack-card__footer {
    padding: 20px 28px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.main-pack-card__price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
}
.main-pack-card__price .woocommerce-Price-amount { color: inherit; }

.main-pack-card__btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--accent);
    color: #fff !important;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s;
    white-space: nowrap;
    border: none;
}
.main-pack-card__btn:hover { background: var(--accent-dark); }

@media (max-width: 700px) {
    .main-packs-grid { grid-template-columns: 1fr; }
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
}
.woocommerce-breadcrumb a { color: var(--text-muted); transition: color .15s; }
.woocommerce-breadcrumb a:hover { color: var(--text); }

/* Ordering */
.woocommerce-ordering select {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    background: #fff;
    color: var(--text);
}

/* Pagination */
.woocommerce-pagination ul {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 48px;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--text-muted);
    transition: all .15s;
}
.woocommerce-pagination ul li a:hover { border-color: var(--accent); color: var(--accent); }
.woocommerce-pagination ul li span.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Flash messages */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border: none;
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 15px;
}
.woocommerce-message { background: #d1fae5; color: #065f46; }
.woocommerce-info { background: var(--accent-light); color: var(--accent-dark); }
.woocommerce-error { background: #fee2e2; color: #991b1b; }

/* Cart drawer (WooCommerce Mini-Cart block, header.php + parts/mini-cart.html).
   WooCommerce's own mini-cart-contents.css loads before this file, so equal
   specificity is enough to win; the rows are styled rather than their cells,
   whose background WooCommerce forces with !important. */
.wc-block-mini-cart__drawer.wc-block-components-drawer { background: #eff6ff; }

.wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
    margin: 0;
    padding: 22px 56px 22px 24px;
    background: linear-gradient(135deg, var(--bg-dark) 0%, #1e3a8a 100%);
    color: #fff;
    font-size: 1.3rem;
    -webkit-mask-image: none;
    mask-image: none;
}
/* The close button's colour is "inherit !important", so set it on its wrapper */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper { color: #fff; }
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close { opacity: .85; }

.wc-block-mini-cart__drawer .wc-block-mini-cart__items { padding: 20px 16px 0; }
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items,
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items tbody { display: block; }
/* Each product as a card */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items table.wc-block-cart-items .wc-block-cart-items__row {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__items table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__items table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
    color: var(--accent);
    font-weight: 700;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    padding: 20px 24px 24px;
    background: #fff;
    border-top: 1px solid #bfdbfe;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
    flex: 1;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background .18s, border-color .18s;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Empty cart: "Start shopping" in the same button style */
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    border-radius: var(--radius);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:focus {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Cart & Checkout */
.woocommerce .cart-collaterals { margin-top: 40px; }
.woocommerce .checkout_coupon, .woocommerce form.login { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }

/* Text fields only: a full-width checkbox pushes its label (e.g. the terms checkbox) onto the next line */
.woocommerce form .form-row input:not([type="checkbox"]):not([type="radio"]),
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    transition: border-color .15s;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

/* Checkout page on the cart drawer's light blue, so the white cards stand out */
body.woocommerce-checkout { background: #eff6ff; }

/* "Where should we send your collection?" (the billing section) as a card */
.woocommerce-checkout .woocommerce-billing-fields {
    padding: 24px;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
}
/* It sits between the "Your order" card and payment (moved there in functions.php) */
.woocommerce-checkout #order_review .woocommerce-billing-fields { margin: 24px 0; }
/* 🎁 gift-code box right under "Your order", always open (functions.php). A dashed
   blue border, like a voucher, so it stands out from the plain white cards. */
.woocommerce-checkout .eardrop-coupon {
    margin-top: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
}
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-title { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-row { display: flex; gap: 10px; }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
}
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-apply {
    flex-shrink: 0;
    padding: 12px 22px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-apply:hover { background: var(--accent-dark); }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-message:empty { display: none; }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-message { margin-top: 12px; }
.woocommerce-checkout .eardrop-coupon .eardrop-coupon-message > * { margin: 0; }
/* "How it works": three steps under the email field, in the same card. Side by side,
   stacked (icon left of the text) on phones. */
.woocommerce-checkout .checkout-steps { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dbeafe; }
.woocommerce-checkout .checkout-steps .checkout-steps-title { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--text); }
.woocommerce-checkout .checkout-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.woocommerce-checkout .checkout-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.woocommerce-checkout .checkout-steps .checkout-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    font-size: 20px;
    line-height: 1;
}
.woocommerce-checkout .checkout-steps strong { color: var(--text); }
@media (max-width: 600px) {
    .woocommerce-checkout .checkout-steps ol { grid-template-columns: 1fr; gap: 12px; }
    .woocommerce-checkout .checkout-steps li { flex-direction: row; gap: 12px; text-align: left; }
    .woocommerce-checkout .checkout-steps .checkout-step-icon { flex-shrink: 0; width: 38px; height: 38px; font-size: 18px; }
}
/* "Your order" as the same card: the heading and the order table are separate elements, so the
   heading is the top half and the table the bottom half. The table needs the separate border
   model (with no spacing, so it looks the same) for its padding to apply. */
.woocommerce-checkout #order_review_heading {
    margin-bottom: 0;
    padding: 24px 24px 0;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    margin-top: 0;
    padding: 16px 24px 24px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.woocommerce button.button.alt,
.woocommerce #payment #place_order {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 14px 32px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 16px;
    border: none;
    transition: background .15s;
    width: 100%;
}
.woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover { background: var(--accent-dark) !important; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 420px; margin: 0; width: 100%; }
    .pack-type-grid { grid-template-columns: 1fr 1fr; }
    .player-packs { grid-template-columns: repeat(2, 1fr); }
    .pricing-card { grid-template-columns: 1fr; gap: 32px; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .section { padding: 64px 0; }
    .pack-type-grid { grid-template-columns: 1fr; }
    .lang-cards { flex-direction: column; }
    .lang-swap { transform: rotate(90deg); padding: 16px 0; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .woocommerce ul.products { grid-template-columns: 1fr 1fr; }
    .single-product-layout { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
    .product-section { padding: 20px; }
}

/* Hamburger nav kicks in for tablet widths too, not just phones */
@media (max-width: 1024px) {
    .primary-nav { display: none; }
    .primary-nav.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        background: #fff;
        padding: 20px;
        box-shadow: var(--shadow-lg);
    }
    .nav-list { flex-direction: column; }
    .primary-nav.open .lang-switcher { align-self: stretch; }
    .primary-nav.open .lang-current { width: 100%; justify-content: space-between; }
    .primary-nav.open .lang-menu { position: static; margin-top: 8px; }
    .primary-nav.open .lang-menu-option { justify-content: flex-start; text-align: left; }
    .primary-nav.open:has(.lang-switcher.open) { max-height: none; }
    .primary-nav.open .nav-collections-link { width: 100%; justify-content: center; }
    .menu-toggle { display: flex; }
}

@media (max-width: 480px) {
    .hero-ctas { flex-direction: column; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .woocommerce ul.products { grid-template-columns: 1fr; }
    .footer-links { grid-template-columns: 1fr; }
    .player-track-info { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .audio-player { padding: 18px; }
    .player-word { font-size: 19px; }
    .player-translation { font-size: 13px; }
    .player-waveform { height: 44px; margin-bottom: 14px; }
    .player-controls { gap: 8px; }
    .player-btn { padding: 7px 12px; font-size: 12px; }
    .player-play { padding: 9px 18px; }
    .player-counter { font-size: 12px; }
    .hero-rotator { margin-top: 18px; max-width: 100%; }
    .hero-moment { padding: 12px 14px; font-size: 13px; gap: 10px; }
    .hero-moment span { font-size: 18px; }
}

/* ── HOW IT WORKS HERO ───────────────── */
.hiw-hero {
    position: relative;
    background: linear-gradient(135deg, #0c1445 0%, #1e3a8a 100%);
    overflow: hidden;
    padding: 72px 0 88px;
    text-align: center;
}
.hiw-hero-mark {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 420px;
    height: 380px;
    opacity: 0.12;
    pointer-events: none;
}
.hiw-hero-mark svg { width: 100%; height: 100%; }
.hiw-hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.hiw-hero-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(255,255,255,0.15);
    font-size: 28px; margin-bottom: 20px;
}
.hiw-hero-title { color: #ffffff; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.hiw-hero-sub { color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0 auto; }
@media(max-width:640px){ .hiw-hero{padding:58px 0 70px;} .hiw-hero-title{font-size:30px;} .hiw-hero-mark{width:280px;height:260px;} }
@media(max-width:480px){ .hiw-hero-mark{width:120px;height:109px;top:-10px;right:0px;} }

/* Checkout only asks for an email, so the billing address block on the order-received page is just "N/A" */
.woocommerce-order-received .woocommerce-customer-details { display: none; }

/* Payment method box on checkout */
.payment-method-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}
.woocommerce-checkout-payment {
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Player promo callout */
.player-promo-card {
    position: relative;
    background: linear-gradient(135deg, var(--accent-light), #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "text media" "cta media";
    align-items: center;
    gap: 20px;
    text-align: left;
}
.player-promo-text { grid-area: text; }
.player-promo-media { grid-area: media; }
.player-promo-cta { grid-area: cta; }
.player-promo-badge {
    position: absolute;
    top: -14px;
    right: 32px;
    z-index: 1;
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.player-promo-media img {
    max-width: 100%;
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.player-promo-cta {
    display: table;
    margin: 0 auto;
}
.player-promo-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.player-promo-card h2 { font-size: 28px; margin: 0 0 12px; }
.player-promo-card p { font-size: 17px; color: var(--text-muted); margin: 0 0 28px; }
@media (max-width: 860px) {
    .player-promo-card {
        grid-template-columns: 1fr;
        grid-template-areas: "text" "media" "cta";
        text-align: center;
    }
    .player-promo-card p { margin-left: auto; margin-right: auto; max-width: 480px; }
}
.listening-moments { background: color-mix(in srgb, var(--accent-light) 50%, #fff); padding: 50px 0; }
.listening-moments .hero-rotator { margin: 0 auto; }
.listening-moments .hero-moment {
    background: #fff;
    border-color: var(--border);
    color: var(--text);
    backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    justify-content: center;
}


/* Player demo hero (top of the eardrop-player / leitor-eardrop page) */
.player-demo-hero {
    position: relative;
    background: linear-gradient(160deg, #0c1445 0%, #1e3a8a 60%, #1e40af 100%);
    overflow: hidden;
    padding: 72px 20px 88px;
    text-align: center;
}
.player-demo-hero-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.player-demo-hero h1 { color: #fff; font-size: 34px; line-height: 1.2; margin: 0; }
.player-demo-hero p { color: rgba(255,255,255,.75); font-size: 16px; margin: 0 0 20px; }
.player-demo-hero .audio-player { width: 100%; margin-bottom: 28px; }
.player-demo-hero .btn { margin-top: 4px; }

/* Make the "New" promo tag noticeably more attention-grabbing without
   changing its size — a soft pulsing glow instead. */
.player-promo-tag, .player-promo-badge {
    animation: playerPromoTagPulse 2.2s ease-in-out infinite;
}
@keyframes playerPromoTagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
    50% { box-shadow: 0 0 0 9px rgba(37,99,235,0); }
}

.player-demo-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.player-demo-hero .player-promo-tag { margin-bottom: 4px; }

.install-steps {
    counter-reset: install-step;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.install-steps li {
    position: relative;
    padding-left: 40px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}
.install-steps li::before {
    counter-increment: install-step;
    content: counter(install-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── PAGE HERO (About, Privacy Policy, Terms, and PT equivalents) ── */
body:has(.page-hero) .page-title{display:none;}
.page-hero{position:relative;background:linear-gradient(135deg, #0c1445 0%, #1e3a8a 100%);overflow:hidden;padding:72px 0 88px;text-align:center;margin-top:-60px;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);}
.page-hero-waves{position:absolute;bottom:0;left:0;width:100%;height:300px;pointer-events:none;}
.page-hero-waves svg{width:100%;height:100%;}
.page-hero-mark{position:absolute;top:-60px;right:-60px;width:420px;height:380px;opacity:0.12;pointer-events:none;}
.page-hero-mark svg{width:100%;height:100%;}
.page-hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 24px;}
.page-hero-title{color:#ffffff;font-size:40px;font-weight:800;letter-spacing:-0.02em;margin-bottom:16px;}
.page-hero-sub{color:rgba(255,255,255,0.85);font-size:18px;line-height:1.6;max-width:560px;margin:0 auto;}
/* Product page: the hero sits directly under the header, outside any padded container */
.page-hero--product{margin-top:0;}
.page-hero--product .page-hero-inner{max-width:960px;}
.page-hero--product .page-hero-title{margin-bottom:0;}
.page-hero--product .page-hero-title span{white-space:nowrap;}
@media(max-width:640px){.page-hero{padding:58px 0 70px;}.page-hero-title{font-size:30px;}.page-hero-mark{width:280px;height:260px;}}
@media(max-width:480px){.page-hero-mark{width:120px;height:109px;top:-10px;right:0px;}}

/* ── PARTNER (homepage, English only) ─────────── */
.partner-section { padding: 0 0 64px; }
.partner-card { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 12px 28px; max-width: 860px; margin: 0 auto; padding: 20px 28px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.partner-logo { display: flex; align-items: center; justify-content: center; height: 72px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.partner-logo img { max-width: 159px; height: auto; display: block; }
.partner-label { grid-column: 1 / -1; justify-self: start; margin: 0; }
.partner-text h2 { font-size: 20px; margin-bottom: 4px; }
.partner-text p { color: var(--text-muted); font-size: 15px; line-height: 1.5; margin-bottom: 6px; }
.partner-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.partner-link:hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 700px) {
    .partner-section { padding-bottom: 48px; }
    .partner-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 20px 16px; }
    .partner-logo { width: 180px; }
}

/* ── AD VIDEO (homepage) ──────────────────────── */
/* Box shape follows the same media rules as the <source> picks, so the space is reserved before the video loads */
.ad-video { position: relative; margin: 0 auto 32px; max-width: 960px; aspect-ratio: 16 / 9; background: var(--bg-dark); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.ad-video-player { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-aspect-ratio: 5/4) { .ad-video { aspect-ratio: 1 / 1; max-width: min(640px, 75vh); } }
@media (max-aspect-ratio: 3/4) { .ad-video { aspect-ratio: 9 / 16; max-width: min(480px, calc(80vh * 9 / 16)); } }

/* ── FINAL CTA: two cards (player / shop) ─────── */
/* Same look as How it works: grey band, white cards that lift on hover */
.final-cta { background: var(--bg-alt); }
.final-cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto; }
.final-cta-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 32px; text-align: center; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.final-cta-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.final-cta-card p { color: var(--text-muted); font-size: 18px; line-height: 1.7; margin: 0; }
.final-cta + .partner-section { padding-top: 64px; }
@media (max-width: 700px) {
    .final-cta-cards { grid-template-columns: 1fr; }
    .final-cta + .partner-section { padding-top: 48px; }
}