/* Aeglera shared styles: theme tokens, dark mode, phone layout, cart, checkout, policies */

/* ============================================================ Tokens */
:root {
    --aeg-bg: #F8F7F4;
    --aeg-surface: #FFFFFF;
    --aeg-surface-2: #F1F0EC;
    --aeg-primary: #1E1E1E;
    --aeg-secondary: #6B6B6B;
    --aeg-border: #D6D6D2;
    --aeg-accent: #7A8F7A;
    --aeg-accent-text: #7A8F7A;
    --aeg-on-accent: #F8F7F4;
    --aeg-error: #B5483B;
    --aeg-error-bg: #FBF1EF;
    --aeg-overlay: rgba(30, 30, 30, 0.4);
    --aeg-toast-bg: #1E1E1E;
    --aeg-toast-text: #F8F7F4;
    --aeg-toast-link: #B9CBB9;
    --aeg-gutter: 20px;
    color-scheme: light;
}

html.dark {
    --aeg-bg: #121412;
    --aeg-surface: #1A1D1A;
    --aeg-surface-2: #232723;
    --aeg-primary: #ECEAE4;
    --aeg-secondary: #A9ABA5;
    --aeg-border: #323832;
    --aeg-accent: #7A8F7A;
    --aeg-accent-text: #9DB39D;
    --aeg-on-accent: #F8F7F4;
    --aeg-error: #E58B80;
    --aeg-error-bg: #2B1D1B;
    --aeg-overlay: rgba(0, 0, 0, 0.6);
    --aeg-toast-bg: #ECEAE4;
    --aeg-toast-text: #1E1E1E;
    --aeg-toast-link: #4F654F;
    color-scheme: dark;
}

/* ============================================================ Dark mode
   The pages use Tailwind colour classes; these re-map them in dark mode.
   `html.dark .x` outranks Tailwind's `.x`, whatever order the CSS loads in. */
html.dark body { background-color: #121412; color: #ECEAE4; }
html.dark .header-scrolled { background-color: #121412; box-shadow: 0 1px 0 #262A26; }

html.dark .bg-aeglera-bg,
html.dark .hover\:bg-aeglera-bg:hover { background-color: rgb(18 20 18 / var(--tw-bg-opacity, 1)); }
html.dark .bg-white,
html.dark .hover\:bg-white:hover { background-color: rgb(26 29 26 / var(--tw-bg-opacity, 1)); }
html.dark .bg-aeglera-primary { background-color: rgb(11 12 11 / var(--tw-bg-opacity, 1)); }
html.dark .bg-aeglera-border { background-color: rgb(50 56 50 / var(--tw-bg-opacity, 1)); }

html.dark .text-aeglera-primary,
html.dark .hover\:text-aeglera-primary:hover { color: rgb(236 234 228 / var(--tw-text-opacity, 1)); }
html.dark .text-aeglera-secondary { color: rgb(169 171 165 / var(--tw-text-opacity, 1)); }
html.dark .text-aeglera-accent,
html.dark .hover\:text-aeglera-accent:hover { color: rgb(157 179 157 / var(--tw-text-opacity, 1)); }
html.dark .text-aeglera-highlight { color: rgb(214 166 137 / var(--tw-text-opacity, 1)); }
html.dark .text-aeglera-border { color: rgb(90 96 90 / var(--tw-text-opacity, 1)); }

html.dark .border-aeglera-border { border-color: rgb(50 56 50 / var(--tw-border-opacity, 1)); }
html.dark .border-aeglera-primary { border-color: rgb(236 234 228 / var(--tw-border-opacity, 1)); }

/* Text on sage (accent) sections and buttons stays light in both themes */
html.dark .bg-aeglera-accent .text-aeglera-accent,
html.dark .bg-aeglera-accent.text-aeglera-accent { color: #F8F7F4; }

/* Footer social circles: a light tint on the dark footer */
html.dark #footer .bg-aeglera-bg.bg-opacity-10 { background-color: rgba(236, 234, 228, 0.1); }
html.dark #footer .bg-aeglera-bg.bg-opacity-10:hover { background-color: rgba(236, 234, 228, 0.2); }

/* Page-specific bits */
html.dark .routine-tab.active { color: #ECEAE4; }
html.dark .bg-aeglera-accent .bg-aeglera-bg.text-aeglera-accent { color: #B9CBB9; }

/* Logo: dark ink in light mode, cream ink in dark mode */
.aeg-logo-dark { display: none; }
html.dark .aeg-logo-light { display: none; }
html.dark .aeg-logo-dark { display: inline-block; }

/* Product photos are shot on light backgrounds — soften them slightly at night */
html.dark main img:not(.aeg-logo-light):not(.aeg-logo-dark),
html.dark section img { filter: brightness(0.92); }

/* ============================================================ Phone layout
   One consistent gutter, scaled headings and calmer spacing below 640px. */
@media (max-width: 639px) {
    html :is(section, footer, main).px-8,
    html :is(section, footer, main).px-6,
    html #header > div,
    html #mobile-menu > nav,
    html .aeg-admin-wrap {
        padding-left: var(--aeg-gutter);
        padding-right: var(--aeg-gutter);
    }

    html section.py-24 { padding-top: 64px; padding-bottom: 64px; }
    html section.py-20 { padding-top: 56px; padding-bottom: 56px; }
    html footer.py-16 { padding-top: 48px; padding-bottom: 40px; }
    html :is(section, main).pt-32 { padding-top: 112px; }
    html section.pb-20, html main.pb-24 { padding-bottom: 56px; }
    html .min-h-\[700px\] { min-height: 0; }

    html .text-7xl { font-size: 2.75rem; line-height: 1.1; }
    html .text-6xl { font-size: 2.5rem; line-height: 1.1; }
    html .text-5xl { font-size: 2.125rem; line-height: 1.15; }
    html .text-4xl { font-size: 1.875rem; line-height: 1.2; }
    html .text-xl { font-size: 1.125rem; line-height: 1.6; }
    html :is(h1, h2, h3) { overflow-wrap: break-word; }

    html .p-12 { padding: 28px; }
    html .p-10 { padding: 24px; }
    html .p-8 { padding: 24px; }

    html .gap-16 { gap: 40px; }
    html .gap-12 { gap: 32px; }
    html .mb-16 { margin-bottom: 40px; }
    html .mt-16 { margin-top: 40px; }
    html .mb-12 { margin-bottom: 32px; }
    html .mt-12 { margin-top: 32px; }
    html .mb-10 { margin-bottom: 28px; }

    html .h-\[600px\], html .h-\[500px\] { height: 340px; }
    /* Fixed-height text sections (e.g. About hero) must grow with their content */
    html section.h-\[600px\], html section.h-\[500px\] { height: auto; }
    /* Keep prices on one line in narrow rows */
    html #bundle-offer .justify-between > span:last-child { white-space: nowrap; padding-left: 12px; }
    html .max-h-\[600px\] { max-height: 340px; }
    html .h-96 { height: 300px; }
    html .h-80 { height: 260px; }

    /* Full-width call-to-action buttons */
    html section a.px-10, html section button.px-10,
    html section a.px-8.py-4, html section button.px-8.py-4 { display: flex; justify-content: center; width: 100%; }
}

/* ============================================================ Header buttons */
.aeg-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--aeg-primary);
    background: transparent;
    border: 1px solid var(--aeg-border);
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease;
}
.aeg-cart-btn:hover { border-color: var(--aeg-accent); color: var(--aeg-accent-text); }
.aeg-cart-btn svg { width: 18px; height: 18px; }
.aeg-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--aeg-accent);
    color: #fff;
    font: 600 11px/20px 'Inter', sans-serif;
    text-align: center;
}
.aeg-cart-count[data-empty="true"] { display: none; }

.aeg-theme-icon-sun { display: none; }
html.dark .aeg-theme-icon-sun { display: block; }
html.dark .aeg-theme-icon-moon { display: none; }

@media (max-width: 639px) {
    #header .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 10px; }
    .aeg-cart-btn { width: 42px; height: 42px; }
    #mobile-menu-toggle { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================ Cart drawer */
.aeg-overlay {
    position: fixed;
    inset: 0;
    background: var(--aeg-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    z-index: 90;
}
.aeg-overlay.is-open { opacity: 1; pointer-events: auto; }

.aeg-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    background: var(--aeg-bg);
    color: var(--aeg-primary);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 380ms;
    z-index: 100;
    font-family: 'Inter', sans-serif;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
}
.aeg-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); }

.aeg-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--aeg-gutter);
    border-bottom: 1px solid var(--aeg-border);
}
.aeg-drawer__title { font: 600 26px 'Playfair Display', serif; }
.aeg-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--aeg-primary);
    cursor: pointer;
    font-size: 26px;
}
.aeg-icon-btn:hover { color: var(--aeg-accent-text); }

.aeg-drawer__body { flex: 1; overflow-y: auto; padding: 4px var(--aeg-gutter); }

.aeg-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--aeg-border);
}
.aeg-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--aeg-border);
}
.aeg-item__name { font: 600 16px 'Playfair Display', serif; line-height: 1.3; }
.aeg-item__name a { color: inherit; text-decoration: none; }
.aeg-item__meta { font-size: 13px; color: var(--aeg-secondary); margin-top: 2px; }
.aeg-item__price { font-weight: 600; font-size: 15px; text-align: right; white-space: nowrap; }
.aeg-item__remove {
    margin-top: 8px;
    padding: 4px 0;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--aeg-secondary);
    text-decoration: underline;
    cursor: pointer;
}
.aeg-item__remove:hover { color: var(--aeg-error); }

.aeg-qty {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--aeg-border);
    background: var(--aeg-surface);
}
.aeg-qty button {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--aeg-primary);
}
.aeg-qty button:hover:not(:disabled) { color: var(--aeg-accent-text); }
.aeg-qty button:disabled { opacity: 0.35; cursor: default; }
.aeg-qty span { min-width: 28px; text-align: center; font-size: 14px; font-weight: 500; }

.aeg-empty { text-align: center; padding: 64px 8px; color: var(--aeg-secondary); }
.aeg-empty svg { width: 40px; height: 40px; color: var(--aeg-border); margin: 0 auto 16px; }
.aeg-empty p { margin-bottom: 24px; }

.aeg-drawer__foot { padding: 18px var(--aeg-gutter) 22px; border-top: 1px solid var(--aeg-border); background: var(--aeg-surface); }

.aeg-free { font-size: 13px; color: var(--aeg-secondary); margin-bottom: 14px; }
.aeg-free strong { color: var(--aeg-primary); }
.aeg-free__bar { height: 4px; background: var(--aeg-border); margin-top: 8px; overflow: hidden; }
.aeg-free__bar span { display: block; height: 100%; background: var(--aeg-accent); transition: width 300ms ease; }

.aeg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--aeg-secondary); padding: 4px 0; }
.aeg-row--total { font-size: 18px; font-weight: 600; color: var(--aeg-primary); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--aeg-border); }

/* ============================================================ Buttons */
.aeg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 28px;
    background: var(--aeg-accent);
    color: var(--aeg-on-accent);
    border: 1px solid transparent;
    font: 500 16px 'Inter', sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 300ms ease, border-color 300ms ease;
}
.aeg-btn:hover { opacity: 0.9; }
.aeg-btn:disabled { opacity: 0.55; cursor: wait; }
.aeg-btn--block { width: 100%; margin-top: 16px; }
.aeg-btn--ghost { background: transparent; color: var(--aeg-primary); border-color: var(--aeg-border); }
.aeg-btn--ghost:hover { border-color: var(--aeg-accent); opacity: 1; }
.aeg-btn--whatsapp { background: #1FA855; color: #fff; }
.aeg-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.aeg-note { font-size: 12px; color: var(--aeg-secondary); text-align: center; margin-top: 12px; }

/* ============================================================ Toast */
.aeg-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    max-width: calc(100% - 2 * var(--aeg-gutter));
    padding: 14px 18px;
    background: var(--aeg-toast-bg);
    color: var(--aeg-toast-text);
    font: 400 14px 'Inter', sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms ease;
    z-index: 110;
}
.aeg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aeg-toast button {
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--aeg-toast-link);
    font: 600 14px 'Inter', sans-serif;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

[data-add-to-cart].is-added { opacity: 0.85; }

/* ============================================================ Forms (checkout) */
.aeg-field { margin-bottom: 20px; }
.aeg-label { display: block; font: 500 14px 'Inter', sans-serif; color: var(--aeg-primary); margin-bottom: 8px; }
.aeg-label small { font-weight: 400; color: var(--aeg-secondary); }
.aeg-input {
    width: 100%;
    padding: 13px 16px;
    background: var(--aeg-surface);
    border: 1px solid var(--aeg-border);
    color: var(--aeg-primary);
    font: 400 16px 'Inter', sans-serif; /* 16px stops iOS zooming into fields */
    border-radius: 0;
    transition: border-color 200ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.aeg-input::placeholder { color: var(--aeg-secondary); opacity: 0.7; }
select.aeg-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E8A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.aeg-input:focus { outline: none; border-color: var(--aeg-accent); box-shadow: 0 0 0 3px rgba(122, 143, 122, 0.18); }
.aeg-input[readonly] { background: var(--aeg-surface-2); color: var(--aeg-secondary); }
.aeg-error { display: none; font-size: 13px; color: var(--aeg-error); margin-top: 6px; }
.aeg-field.has-error .aeg-error { display: block; }
.aeg-field.has-error .aeg-input { border-color: var(--aeg-error); }
.aeg-hint { font: 400 12px 'Inter', sans-serif; color: var(--aeg-secondary); margin-top: 6px; }

.aeg-pay {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--aeg-border);
    background: var(--aeg-surface);
    cursor: pointer;
    margin-bottom: 12px;
}
.aeg-pay input { margin-top: 3px; accent-color: var(--aeg-accent); width: 18px; height: 18px; flex-shrink: 0; }
.aeg-pay.is-selected { border-color: var(--aeg-accent); }
.aeg-pay.is-disabled { cursor: not-allowed; opacity: 0.55; }
.aeg-pay__title { font-weight: 600; font-size: 15px; color: var(--aeg-primary); }
.aeg-pay__desc { font-size: 13px; color: var(--aeg-secondary); margin-top: 2px; }
.aeg-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--aeg-bg);
    border: 1px solid var(--aeg-border);
    color: var(--aeg-secondary);
    vertical-align: middle;
}

.aeg-alert {
    padding: 14px 16px;
    font-size: 14px;
    border: 1px solid var(--aeg-error);
    color: var(--aeg-error);
    background: var(--aeg-error-bg);
    margin-bottom: 20px;
}

/* Tailwind display classes (grid, flex) would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================ Policy pages */
.aeg-prose { font-family: 'Inter', sans-serif; color: var(--aeg-secondary); font-size: 16px; line-height: 1.75; }
.aeg-prose h2 { font: 600 26px/1.3 'Playfair Display', serif; color: var(--aeg-primary); margin: 44px 0 12px; }
.aeg-prose h3 { font: 600 17px 'Inter', sans-serif; color: var(--aeg-primary); margin: 24px 0 6px; }
.aeg-prose p { margin: 0 0 14px; }
.aeg-prose ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
.aeg-prose ol { list-style: decimal; padding-left: 22px; margin: 0 0 14px; }
.aeg-prose li { margin-bottom: 6px; }
.aeg-prose strong { color: var(--aeg-primary); font-weight: 600; }
.aeg-prose a { color: var(--aeg-accent-text); text-decoration: underline; }
.aeg-prose a:hover { color: var(--aeg-primary); }
.aeg-prose table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15px; }
.aeg-prose th, .aeg-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--aeg-border); }
.aeg-prose th { color: var(--aeg-primary); font-weight: 600; background: var(--aeg-surface); }
@media (max-width: 639px) {
    .aeg-prose h2 { font-size: 23px; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .aeg-drawer, .aeg-overlay, .aeg-toast { transition: none; }
}