/* ============================================================================
 * heho.css — ELECdirect / Hehocom design tokens for the Hummingbird theme.
 * Authored by Hehocom — https://hehocom.fr
 *
 * Strategy:
 *   - Global tokens defined as CSS custom properties on :root
 *     (regular palette by default — primary brand color #AC0424).
 *   - Pro palette is opt-in via [data-heho-theme="pro"] scope.
 *   - All sizing/spacing in rem (base = 16px = 1rem). Colors stay as hex.
 *   - Component styles live in dedicated sibling files and are pulled in
 *     here via @import (see below). Keep this file lean — tokens, light
 *     resets and a couple of helpers only.
 *
 * Note on breakpoints: CSS variables cannot be used inside @media queries
 * (per current spec). Breakpoint values are listed below as comments and
 * must be repeated literally inside @media rules.
 *
 * Breakpoints (px):
 *   xs:   480
 *   sm:   625
 *   md:   768
 *   lg:   991
 *   xl:  1024
 *   xxl: 1200
 *   wide:1378
 *   max: 1400
 * ========================================================================== */

/* @import rules MUST come first — fonts, then component sheets. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap");
@import url("imports/buttons.css");
@import url("imports/product-card.css");
@import url("imports/netreviews-rating.css");
@import url("imports/product-reviews.css");
@import url("imports/rating-stars.css");
@import url("imports/header.css");
@import url("imports/custom_hehoblocks.css");
@import url("imports/forms.css");
@import url("imports/registration.css");
@import url("imports/login.css");
@import url("imports/account.css");
@import url("imports/footer.css");
@import url("imports/cart.css");
@import url("imports/checkout.css");
@import url("imports/minicart.css");
@import url("imports/product-page.css");
@import url("imports/bundle-product.css");
@import url("imports/bundle-product-list.css");
@import url("imports/category.css");
@import url("imports/helpers.css");
@import url("imports/product-pack.css");
@import url("imports/product-accessories.css");
@import url("imports/product-lot-packs.css");
@import url("imports/layout.css");
@import url("imports/wishlist.css");

:root {
    /* ── Brand — Regular (default) ─────────────────────────────────────── */
    --heho-color-primary: #AC0424;
    --heho-color-primary-hover: #8E031D;
    --heho-color-primary-dark: #A50823;
    --heho-color-primary-light-1: #D48191;
    --heho-color-primary-light-2: #FFEDED;
    --heho-color-primary-light-3: #FFF4F4;

    /* Variants used for skewed bars / accents in the legacy theme */
    --heho-color-accent-red-1: #AA0B26;
    --heho-color-accent-red-2: #A50823;
    --heho-color-accent-red-3: #A90222;
    --heho-color-accent-red-4: #AA1729;

    /* ── Neutrals ──────────────────────────────────────────────────────── */
    --heho-color-text: #010101;
    --heho-color-text-muted: #666666;
    --heho-color-text-faded: #B1AEAE;
    --heho-color-bg: #FFFFFF;
    --heho-color-bg-soft: #F5F5F5;
    --heho-color-bg-dark: #252525;
    --heho-color-bg-banner: #393535;
    --heho-color-border: #E5E5E5;
    --heho-color-border-light: #EDEDED;
    --heho-color-border-medium: #CCCCCC;

    /* Page chrome */
    --heho-color-bg-page: #F4F4F4;        /* product page grey shell */
    --heho-color-text-dark: #333333;      /* card titles, secondary headings */
    --heho-color-star: #FF931E;           /* NetReviews orange */
    --heho-color-success-pulse: rgba(0, 218, 127, 0.3);

    /* ── Status / feedback ────────────────────────────────────────────── */
    --heho-color-success: #5CB85C;
    --heho-color-success-bright: #00D423;
    --heho-color-info: #4CBB6C;
    --heho-color-warning: #F0AD4E;
    --heho-color-danger: #FF4657;

    /* ── Typography ───────────────────────────────────────────────────── */
    --heho-font-primary: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --heho-font-secondary: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    --heho-font-size-xs:   0.75rem;   /* 12px */
    --heho-font-size-sm:   0.875rem;  /* 14px */
    --heho-font-size-base: 1rem;      /* 16px */
    --heho-font-size-md:   1.125rem;  /* 18px */
    --heho-font-size-lg:   1.25rem;   /* 20px */
    --heho-font-size-xl:   1.5rem;    /* 24px */
    --heho-font-size-2xl:  1.875rem;  /* 30px */
    --heho-font-size-3xl:  2.25rem;   /* 36px */
    --heho-font-size-4xl:  2.5rem;    /* 40px */

    --heho-font-weight-regular:  400;
    --heho-font-weight-medium:   500;
    --heho-font-weight-semibold: 600;
    --heho-font-weight-bold:     700;
    --heho-font-weight-black:    800;

    --heho-line-height-tight: 1.2;
    --heho-line-height-base:  1.5;
    --heho-line-height-loose: 1.7;

    /* ── Layout ───────────────────────────────────────────────────────── */
    --heho-container-max:        96rem;   /* 1536px */
    --heho-container-padding-x:  1rem;    /* 16px  */
    --heho-container-padding-x-lg: 1.5rem;/* 24px  */

    /* ── Spacing scale (rem) ──────────────────────────────────────────── */
    --heho-space-1:  0.25rem;   /* 4px  */
    --heho-space-2:  0.5rem;    /* 8px  */
    --heho-space-3:  0.75rem;   /* 12px */
    --heho-space-4:  1rem;      /* 16px */
    --heho-space-5:  1.25rem;   /* 20px */
    --heho-space-6:  1.5rem;    /* 24px */
    --heho-space-7:  1.875rem;  /* 30px */
    --heho-space-8:  2.5rem;    /* 40px */
    --heho-space-9:  3rem;      /* 48px */
    --heho-space-10: 4rem;      /* 64px */
    --heho-space-11: 5rem;      /* 80px */
    --heho-space-12: 6rem;      /* 96px */

    /* ── Radii ────────────────────────────────────────────────────────── */
    --heho-radius-xs:   0.1875rem;  /* 3px  — checkboxes */
    --heho-radius-sm:   0.3125rem;  /* 5px  — buttons, secondary */
    --heho-radius-md:   0.625rem;   /* 10px — cards, inputs, modals */
    --heho-radius-lg:   0.9375rem;  /* 15px — payment cards */
    --heho-radius-pill: 100vmax;

    /* ── Icon sizes ───────────────────────────────────────────────────── */
    --heho-icon-size-sm: 1.25rem;   /* 20px */
    --heho-icon-size-md: 3.125rem;  /* 50px */
    --heho-icon-size-lg: 4rem;      /* 64px */

    /* ── Borders ──────────────────────────────────────────────────────── */
    --heho-border-thin:   0.0625rem;  /* 1px */
    --heho-border-medium: 0.125rem;   /* 2px */
    --heho-border-thick:  0.1875rem;  /* 3px */

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --heho-shadow-sm:   0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
    --heho-shadow-md:   0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    --heho-shadow-card: 0 0 1.5625rem rgba(28, 28, 28, 0.39);

    /* ── Transitions ──────────────────────────────────────────────────── */
    --heho-transition-fast: 150ms ease;
    --heho-transition-base: 200ms ease;
    --heho-transition-slow: 400ms ease;

    /* ── Z-index scale ────────────────────────────────────────────────── */
    --heho-z-base:    1;
    --heho-z-dropdown: 100;
    --heho-z-sticky:  500;
    --heho-z-overlay: 900;
    --heho-z-modal:  1000;

    /* ── Bootstrap bridge ─────────────────────────────────────────────────
     * Hummingbird is themed via Bootstrap 5 CSS variables (--bs-*).
     * Map the brand primary onto the bs tokens so every stock component
     * (badges, buttons, links, alerts, etc.) inherits ELECdirect red.
     */
    --bs-primary:           #AC0424;
    --bs-primary-rgb:       172, 4, 36;
    --bs-link-color:        #AC0424;
    --bs-link-color-rgb:    172, 4, 36;
    --bs-link-hover-color:  #8E031D;
}

[data-heho-theme="pro"] {
    --bs-primary:           #207F99;
    --bs-primary-rgb:       32, 127, 153;
    --bs-link-color:        #207F99;
    --bs-link-color-rgb:    32, 127, 153;
    --bs-link-hover-color:  #1A6A80;
}

/* ── Pro palette (opt-in) ───────────────────────────────────────────────
 * Apply `data-heho-theme="pro"` on any wrapper to switch its subtree to
 * the professional brand color #207F99.
 */
[data-heho-theme="pro"] {
    --heho-color-primary: #207F99;
    --heho-color-primary-hover: #1A6A80;
    --heho-color-primary-dark: #1A6A80;
    --heho-color-primary-light-1: #A3CCD8;
    --heho-color-primary-light-2: #F0FCFF;
    --heho-color-primary-light-3: #F0FCFF;

    --heho-color-accent-red-1: #1A6A80;
    --heho-color-accent-red-2: #1A6A80;
    --heho-color-accent-red-3: #1A6A80;
    --heho-color-accent-red-4: #1A6A80;
}

/* ── Lightweight base resets — make tokens take effect ─────────────── */
body {
    font-family: var(--heho-font-primary);
    color: var(--heho-color-text);
}

a {
    color: var(--heho-color-primary);
    transition: color var(--heho-transition-fast);
}

a:hover {
    color: var(--heho-color-primary-hover);
}

* {
    letter-spacing: 0.025rem;
}

/* ── Reusable helpers ─────────────────────────────────────────────────
 * Kept minimal — block styles live in their own module CSS files.
 */
.heho-container {
    max-width: var(--heho-container-max);
    margin-inline: auto;
    padding-inline: var(--heho-container-padding-x);
}

@media (min-width: 992px) {
    .heho-container {
        padding-inline: var(--heho-container-padding-x-lg);
    }
}

#center-column {
    padding-inline: 1.25rem;
}

.text-center-col {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 56rem;
}

/* ── Shared keyframes (used by stock pulse, sticky banner reveal, etc.) ── */
@keyframes heho-pulse {
    0%   { transform: scale(0.8); opacity: 1;   }
    100% { transform: scale(2.4); opacity: 0;   }
}

@keyframes heho-bounce-status {
    0%, 100% { transform: translateY(0);     }
    50%      { transform: translateY(-2px);  }
}