/**
 * Homepage Builder - shared base.
 *
 * Token precedence (see inc/homepage-builder/design.php):
 *   theme defaults  ->  design preset  ->  global overrides  ->  section overrides
 * The Homepage Builder prints --hb-* custom properties on .hb-home (preset +
 * overrides). Anything it does not set falls back to the theme's own tokens, so
 * an unset colour simply inherits the theme.
 */

.hb-home {
    --_text: var(--hb-text, var(--color-text, #232323));
    --_bg: var(--hb-bg, #fff);
    --_surface: var(--hb-surface, #f6f6f4);
    --_accent: var(--hb-accent, var(--color-black, #202020));
    --_accent-text: var(--hb-accent-text, #fff);
    --_btn: var(--hb-btn, var(--color-black, #202020));
    --_btn-text: var(--hb-btn-text, #fff);
    --_muted: #6b6b6b;
    --_line: rgba(0, 0, 0, .12);
    --_gutter: var(--gutter, clamp(14px, 2.4vw, 56px));

    color: var(--_text);
    background: var(--_bg);
    font-size: var(--hb-body-size, 1rem);
    overflow-x: clip; /* nothing inside may cause sideways scrolling */
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .hb-home {
        --_muted: color-mix(in srgb, var(--_text) 64%, transparent);
        --_line: color-mix(in srgb, var(--_text) 14%, transparent);
    }
}

.hb-home *, .hb-home *::before, .hb-home *::after { box-sizing: border-box; }
.hb-home img { max-width: 100%; height: auto; }

/* ---- Sections --------------------------------------------------------- */
.hb-section {
    padding-block: var(--hb-space, clamp(44px, 6vw, 88px));
    background: var(--hb-sec-bg, transparent);
    color: var(--hb-sec-text, inherit);
}
.hb-space--none     { padding-block: 0; }
.hb-space--compact  { padding-block: calc(var(--hb-space, 64px) * .6); }
.hb-space--spacious { padding-block: calc(var(--hb-space, 64px) * 1.4); }

.hb-bg--surface { --hb-sec-bg: var(--_surface); }
.hb-bg--dark    { --hb-sec-bg: #131313; --hb-sec-text: #fff; --_muted: rgba(255, 255, 255, .7); --_line: rgba(255, 255, 255, .2); --_btn: #fff; --_btn-text: #111; --_text: #fff; }
.hb-bg--accent  { --hb-sec-bg: var(--_accent); --hb-sec-text: var(--_accent-text); --_muted: inherit; --_btn: var(--_accent-text); --_btn-text: var(--_accent); --_text: var(--_accent-text); }
.hb-bg--custom  { --_text: var(--hb-sec-text); --_btn: var(--hb-sec-text); --_btn-text: var(--hb-sec-bg); }

.hb-container {
    width: 100%;
    max-width: var(--hb-width, none);
    margin-inline: auto;
    padding-inline: var(--_gutter);
}

/* ---- Typography ------------------------------------------------------- */
.hb-title,
.hb-banner__title,
.hb-story__title {
    margin: 0;
    font-family: var(--hb-font-head, var(--font-heading-family, inherit));
    font-weight: var(--hb-head-weight, 500);
    text-transform: var(--hb-head-transform, none);
    letter-spacing: var(--hb-head-tracking, .01em);
    line-height: 1.12;
    color: inherit;
}
.hb-home .hb-title { font-size: calc(var(--hb-head-scale, 1) * clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem)); }

.hb-eyebrow {
    margin: 0 0 .9rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hb-sec-text, var(--_accent));
    opacity: .9;
}
.hb-lead { margin: .7rem 0 0; max-width: 60ch; color: var(--_muted); line-height: 1.65; }

.hb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: clamp(24px, 3.2vw, 44px);
}
.hb-head__text { min-width: 0; }

.hb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 10px; /* touch target */
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    line-height: 1.2;
}
.hb-link i { transition: transform .2s ease; }
.hb-link:hover i { transform: translateX(3px); }

.hb-tag {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 6px 12px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: var(--hb-radius-btn, 2px);
}

/* ---- Buttons ---------------------------------------------------------- */
.hb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.6vw, 32px); }

.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 clamp(20px, 2.4vw, 32px);
    border: 1px solid var(--_btn);
    border-radius: var(--hb-radius-btn, 2px);
    font-family: var(--font-body-family, inherit);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hb-btn--primary { background: var(--_btn); color: var(--_btn-text); }
.hb-btn--primary:hover { background: transparent; color: var(--_btn); }
.hb-btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.hb-btn--secondary:hover { background: var(--_btn); color: var(--_btn-text); border-color: var(--_btn); }

.hb-btn-outline .hb-btn--primary { background: transparent; color: var(--_btn); }
.hb-btn-outline .hb-btn--primary:hover { background: var(--_btn); color: var(--_btn-text); }

.hb-btn-text .hb-btn { min-height: 44px; padding: 0; border-width: 0 0 1px; border-radius: 0; background: transparent; color: inherit; }
.hb-btn-text .hb-btn--primary:hover { background: transparent; opacity: .7; }
.hb-btn-text .hb-btn--secondary { opacity: .75; }

.hb-home a:focus-visible,
.hb-home .hb-btn:focus-visible,
.hb-home .hb-reviews__track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .55);
}

/* ---- Product card tuning inside the builder --------------------------- */
.hb-home .product-card__media { border-radius: var(--hb-radius, 4px); }

/* ---- Editor-only hints ------------------------------------------------ */
.hb-editor-note p {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px dashed var(--_line);
    border-radius: 4px;
    font-size: .8rem;
    color: var(--_muted);
}
.hb-preview-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    padding: 10px var(--gutter, 16px);
    background: #1d2327;
    color: #fff;
    font-size: 13px;
}
.hb-preview-bar a { color: #8cc4ff; }

@media (prefers-reduced-motion: reduce) {
    .hb-home *, .hb-home *::before, .hb-home *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}