/* ==========================================================================
 * Aragold Homepage v2 — stiluri pentru toate secțiunile `[hp-*]`
 *
 * Source design: Figma `gDuDag6hHwlm2PBNGRTSML`, frame `336:971` "Desktop - 1440"
 *
 * Convention: each section is wrapped in `<section class="hp-section hp-{name}">`
 * Tokens scoped la `.hp-section` (NU pollutează --header-* globale).
 * ========================================================================== */

.hp-section {
    --hp-text: #010F1C;
    --hp-text-muted: #6B7280;
    --hp-accent: #BD844C;
    --hp-bg: #FFFFFF;
    --hp-surface: #FAF7F2;
    --hp-border: #E5E7EB;
    --hp-track: #D3D8DD;
    --hp-thumb: #010F1C;
    --hp-radius-card: 8px;
    --hp-radius-pill: 22px;
    --hp-section-py: 64px;
    --hp-container: 1232px;
    --hp-font: 'Poppins', -apple-system, Roboto, Helvetica, sans-serif;

    position: relative;
    padding-block: var(--hp-section-py);
    background: var(--hp-bg);
    font-family: var(--hp-font);
    color: var(--hp-text);
}

.hp-section .hp-container {
    max-width: var(--hp-container);
    margin-inline: auto;
    padding-inline: 16px;
}

/* ========== Section header (title + Vezi toate link) ========== */
.hp-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hp-section-header__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-section-header__subtitle {
    color: var(--hp-accent); /* #BD844C gold paritate Figma */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none; /* mixed-case Figma (era uppercase) */
}

.hp-section-header__title {
    color: var(--hp-text);
    font-family: var(--hp-font);
    font-size: 32px;
    font-weight: 500; /* Figma medium 36 — pe desktop scale-uim */
    line-height: 1.25;
    margin: 0;
}

.hp-section-header__title--small {
    font-size: 20px;
    font-weight: 600;
}

.hp-section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hp-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.hp-section-header__link:hover {
    color: var(--hp-accent);
}

.hp-section-header__link svg {
    width: 14px;
    height: 14px;
}

/* ========== Scrollbar (Swiper) — black thumb 52px on grey track ========== */
/* .hp-scrollbar = scrollbar Swiper unified pentru toate carouselele
 * (homepage hp-section + PDP pp-related). Fallback values pentru contexte
 * unde --hp-* tokens nu sunt definite (ex: .pp-related fara .hp-section). */
.hp-scrollbar {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: 24px;
    background: var(--hp-track, #D3D8DD);
    border-radius: var(--hp-radius-pill, 22px);
    overflow: hidden;
}

.hp-scrollbar .swiper-scrollbar-drag {
    height: 4px !important;
    min-width: 52px !important;
    background: var(--hp-thumb, #010F1C) !important;
    border-radius: var(--hp-radius-pill, 22px) !important;
}

/* ========== Categorii ========== */
.hp-categories .swiper {
    overflow: hidden;
    position: relative; /* anchor pentru .hp-categories__nav absolute */
}

/* Sageti prev/next — cerere client 2026-05-09. Stil rotund, alb cu border
 * subtle, hover gold (--hp-accent). NU stroke albastru (memory rule). */
.hp-categories__nav {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hp-border, #E5E7EB);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--hp-text, #010F1C);
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    width: 36px;
    z-index: 10;
}
.hp-categories__nav:hover,
.hp-categories__nav:focus-visible {
    border-color: var(--hp-accent, #BD844C);
    color: var(--hp-accent, #BD844C);
    outline: none;
}
.hp-categories__nav--prev { left: 8px; }
.hp-categories__nav--next { right: 8px; }
.hp-categories__nav.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.hp-categories__nav.swiper-button-lock {
    display: none; /* Hide cand toate slide-urile incap (no overflow) */
}

.hp-categories .swiper-wrapper {
    align-items: stretch;
}

.hp-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border: 1px solid var(--hp-border);
    border-radius: 6px;
    background: var(--hp-bg);
    text-decoration: none;
    color: inherit;
    height: 188px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hp-category-card:hover {
    border-color: var(--hp-accent);
    transform: translateY(-2px);
}

.hp-category-card__image {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 4px;
}

.hp-category-card__placeholder {
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-surface);
    color: var(--hp-accent);
    border-radius: 4px;
}

.hp-category-card__name {
    color: var(--hp-text);
    font-family: var(--hp-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 128px;
}

.hp-category-card--more .hp-category-card__placeholder {
    background: #BD844C;       /* gold (Figma 419:2275) */
    border: none;
    color: #FFFFFF;
}
.hp-category-card__more-icon {
    width: 56px;
    height: 56px;
    color: #FFFFFF;
    display: block;
}
.hp-category-card__name--more {
    color: #000000;
    font-family: var(--hp-font, 'Poppins'), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* Hover lift pe carduri (translateY -2/-4px) era taiat de overflow:hidden pe
 * swiper. Schimbam la x-only hidden ca sa pastram clipping orizontal pentru
 * carusel dar sa permitem cardul sa se ridice in afara container-ului fara crop.
 * Padding-top mic compenseaza vizual ca sa nu se atinga de heading. */
.hp-categories__swiper,
.hp-products .swiper,
.hp-blog .swiper,
.pp-related-swiper.swiper {
    /* overflow-x:hidden + overflow-y:visible computeaza la auto (CSS spec
     * nu permite visible mixed cu non-visible). Folosim overflow-x: clip
     * (Chrome 90+ / Firefox 81+ / Safari 14+) → permite y:visible curat. */
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.pp-related-swiper.swiper-wrapper,
.pp-related .swiper-wrapper {
    align-items: stretch;
}

/* Generic "Vezi mai multe" tile pentru products + blog carousels.
 * Fill 100% height of swiper-slide → match cu cardul vecin (product/post).
 * Stretch slide-uri: swiper default lasa fiecare slide la inaltimea proprie;
 * fortam stretch pe wrapper + height auto pe slide ca tile-ul nostru sa
 * primeasca aceeasi inaltime ca produsul/postul. */
.hp-products .swiper-wrapper,
.hp-blog .swiper-wrapper {
    align-items: stretch;
}
.hp-products .swiper-slide,
.hp-blog .swiper-slide {
    height: auto;
}
/* ==========================================================================
 * "Vezi mai multe" tile card-style (Figma 419:1939 desktop / 418:1765 mobile).
 * Paritate completa cu .hp-product-card visual: bg #FFF, radius 10px,
 * shadow subtle, height match cu siblings. Image area aurie #BD844C cu icon.
 * ========================================================================== */
.hp-more-card {
    display: flex;
    flex-direction: column;
    /* gap 10px paritate cu .hp-product-card — fara asta, info-ul e lipit de
     * media (more-card avea gap:normal=0 vs product-card gap:10px), iar textul
     * "Explorează categoria" aparea cu 10px mai sus decat titlul produsului
     * vecin. Total spacing media→text: 10px gap + 12px info padding = 22px. */
    gap: 10px;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 3px rgba(130, 130, 130, 0.07);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
    height: 100%;
}
.hp-more-card:hover {
    box-shadow: 0 4px 14px rgba(11, 6, 70, 0.06);
    color: inherit;
    text-decoration: none;
}
.hp-more-card__media {
    aspect-ratio: 1 / 1;
    background: #BD844C;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}
.hp-more-card__icon {
    width: 56px;
    height: 56px;
    color: #FFFFFF;
    display: block;
}
.hp-more-card__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 12px paritate cu .hp-product-card__info compact context (homepage-v2.css
     * line ~644) — text-ul "Explorează categoria" se aliniaza vertical cu titlul
     * produsului din cardul vecin. Inainte 8px → diferenta de 14px (cerere user). */
    padding: 12px;
    flex: 1 1 auto;
}
.hp-more-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    color: #010F1C;
    font-family: var(--hp-font, 'Poppins'), sans-serif;
}
.hp-more-card__title {
    /* Paritate exacta cu .hp-product-card__title (Poppins 13/500/1.35, #010F1C).
     * font-family explicit fortat — Shofy parent aplica `p { font-family: Jost }`
     * cu specificitate mai mare, blocand inheritance-ul prin .hp-more-card__content. */
    font-family: var(--hp-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--hp-text, #010F1C);
    margin: 0;
    /* Rezerva 2 randuri ca pe .hp-product-card__title — astfel "+N produse"
     * se aliniaza vertical cu pretul produsului din cardul vecin. */
    min-height: 2.7em;
}
.hp-more-card__count {
    /* Paritate cu .hp-product-card__price (Poppins 13/500/1.4, #010F1C). */
    font-family: var(--hp-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hp-text, #010F1C);
    margin: 0;
}
.hp-more-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010F1C;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px;
    font-family: var(--hp-font, 'Poppins'), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: auto;
    transition: background 0.15s ease;
}
.hp-more-card:hover .hp-more-card__btn {
    background: #BD844C;
    color: #FFFFFF;
}

/* Variant in caruselul blog: match inaltime cu .hp-blog-card vecin (500px).
 * Default more-card (in products) e ~532; aici reducem spacing-ul intern
 * cu 32px pentru paritate. Tipografie se aliniaza la blog-card (14/1.3). */
.hp-blog .hp-more-card { gap: 0; }
.hp-blog .hp-more-card__info {
    padding: 8px;
    gap: 8px;
}
.hp-blog .hp-more-card__content { gap: 4px; }
.hp-blog .hp-more-card__title {
    font-size: 14px;
    line-height: 1.3;
    min-height: 2.6em;
}
.hp-blog .hp-more-card__count { font-size: 12px; }

/* Mobile breakpoint — icon mai mic, font scaled (Figma 418:1765 spec). */
@media (max-width: 575.98px) {
    .hp-more-card__icon {
        width: 56px;
        height: 56px;
    }
    .hp-more-card__title {
        font-size: 13px;
        font-weight: 500;
    }
    .hp-more-card__count {
        font-size: 12px;
        font-weight: 400;
    }
}

.hp-more-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 40px 20px;
    border: 1px dashed var(--hp-border);
    border-radius: 8px;
    background: var(--hp-bg);
    color: var(--hp-text);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}
.hp-more-tile:hover {
    background: var(--hp-surface);
    border-color: var(--hp-accent);
    transform: translateY(-2px);
}
.hp-more-tile__icon {
    color: var(--hp-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-more-tile__label {
    font-family: var(--hp-font);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--hp-text);
    line-height: 1.4;
}

/* ========== Banner ========== */
.hp-banner {
    padding-block: 64px 0;
}

/* ========== Stick existing newsletter widget (.pp-subscribe) la footer
 * Default avea margin-top:56px care creează gap între blog și subscribe.
 * Eliminăm pentru un look continuum cu footer-ul. */
.pp-subscribe {
    margin-top: 0 !important;
}

.hp-banner__image {
    display: block;
    width: 100%;
    max-width: var(--hp-container);
    height: 650px;
    object-fit: cover;
    border-radius: var(--hp-radius-card);
    margin-inline: auto;
    background: var(--hp-surface);
}

/* ========== Products carousel (Best Sellers + Top sellers + Aur + Argint) ========== */
.hp-products .swiper {
    overflow: hidden;
}

/* Hero-style products carusel — background distinctiv (Spec Figma).
   Selectorul e pe CLASA hero (style="hero" in shortcode admin) ⇒ user
   controleaza care carusel primeste bg prin setarea stilului in admin,
   fara dependinta de data-key (care variaza intre instante). */
.hp-section.hp-products.hp-products--hero {
    background: #EFF1F5;
}

/* Card v2 — paritate Figma 53:2 (Best Sellers): border #CED4DA + radius 10
 * Image cu bg-cover, badge "-X%" top-left + heart/eye actions top-right,
 * info area (titlu + pret), ATC button full-width navy. */
.hp-product-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--card-bg, var(--hp-bg));
    border: 1px solid var(--card-border, #CED4DA);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
}

/* Hover: doar shadow discret — fara border-color change, fara translate
 * (translate cauza perceptie de crop pe imagine, in plus aducea jitter). */
.hp-product-card:hover {
    box-shadow: 0 4px 14px rgba(11, 6, 70, 0.06);
}

.hp-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--card-media-bg, var(--hp-surface));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.hp-product-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.hp-product-card__badges {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    pointer-events: none;
}
.hp-product-card__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--hp-font, 'Poppins'), sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #FFFFFF;
}
.hp-product-card__discount {
    position: static;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    background: var(--card-badge-discount-bg, var(--hp-discount-bg, #4477DF));
    color: #FFFFFF;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0;
}

.hp-product-card__actions {
    position: absolute;
    top: 16px;
    right: 5px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-product-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--card-bg, #FFFFFF);
    border: 0;
    border-radius: 6px;
    color: var(--card-text, var(--hp-text));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.hp-product-card:hover .hp-product-card__action:hover {
    background: var(--card-cta-hover-bg, var(--hp-accent));
    color: var(--card-cta-text, #FFFFFF);
}

.hp-product-card__info {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-product-card__title-link {
    text-decoration: none;
    color: inherit;
    display: block;
    /* shofy/bootstrap aplica 14px pe <a> implicit; forteaza 13px medium
     * pentru paritate cu .hp-product-card__title parent. */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.hp-product-card__title-link:hover,
.hp-product-card__title-link:focus {
    color: inherit;
    text-decoration: none;
}

.hp-product-card__title {
    color: var(--card-text, var(--hp-text));
    font-family: var(--hp-font); /* forteaza Poppins peste shofy parent care aplica Jost pe h3 */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Rezerva spatiu pentru 2 randuri indiferent daca titlul are 1 sau 2 randuri,
     * ca toate cardurile din carusel sa aiba inaltime egala. line-height (1.35)
     * × 2 = 2.7em. Paritate cu pagina de categorie (Shofy default). */
    min-height: 2.7em;
}

/* Card e <article> dupa fix ATC — restaurez text-decoration: none + color
 * inherit pentru anchor-urile interne (media + title) */
a.hp-product-card__media,
a.hp-product-card__title-link {
    color: inherit;
    text-decoration: none;
}

.hp-product-card__price {
    color: var(--card-text, var(--hp-text));
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.hp-product-card__price-old {
    color: var(--card-text-muted, var(--hp-text-muted));
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 6px;
}

.hp-product-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--card-cta-bg, var(--hp-text));
    color: var(--card-cta-text, #FFFFFF);
    border: none;
    padding: 8px;
    margin: 0 8px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}

.hp-product-card__cta:hover {
    background: var(--card-cta-hover-bg, var(--hp-accent));
    color: var(--card-cta-text, #FFFFFF);
}

/* Hero variant — slightly bigger cards (Best Sellers, 5 cards × 334×457) */
.hp-products--hero .hp-product-card {
    /* defaults — Swiper handles sizing via slidesPerView=5 */
}

/* Compact variant — Top sellers / Aur / Argint (9 cards in carousel × 287×410)
 * + Hero variant — Cele mai populare produse (4.2 cards × 334×457)
 * + pp-related (PDP) care foloseste acelasi card partial intr-un Swiper
 * unificat, dar nu are wrapper-ul .hp-products--compact (e .pp-related).
 * Toate carouselele de produse au padding 12px (paritate user spec). */
.hp-products--compact .hp-product-card__info,
.hp-products--hero .hp-product-card__info,
.pp-related .hp-product-card__info {
    padding: 12px;
}

/* ========== About Unity ========== */
.hp-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hp-about__images {
    position: relative;
    aspect-ratio: 625 / 618;
}

.hp-about__image-main {
    width: 70%;
    height: 91%;
    object-fit: cover;
    border-radius: var(--hp-radius-card);
    background: var(--hp-surface);
}

.hp-about__image-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 55%;
    object-fit: cover;
    border-radius: var(--hp-radius-card);
    background: var(--hp-surface);
    box-shadow: 0 12px 32px rgba(11, 6, 70, 0.08);
}

.hp-about__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hp-about__subtitle {
    color: var(--hp-accent);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none; /* paritate Figma "Unity Collection" mixed-case */
}

.hp-about__title {
    color: var(--hp-text);
    font-size: 36px;
    font-weight: 500; /* Medium per Figma 53:70 */
    line-height: 1.25;
    margin: 0;
}

.hp-about__body {
    color: var(--hp-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.hp-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 14px 28px;
    background: var(--hp-text);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.hp-about__cta:hover {
    background: var(--hp-accent);
}

/* ========== Blog ========== */
.hp-blog .swiper {
    overflow: hidden;
}

/* Blog card v2 — paritate Figma 371:1567:
 * white bg + shadow subtil + rounded 10 + outlined button "Citeste mai mult". */
.hp-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 3px rgba(130, 130, 130, 0.07);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(130, 130, 130, 0.12);
}

.hp-blog-card__image {
    width: 100%;
    aspect-ratio: 1 / 1; /* Figma 320:320 square */
    object-fit: cover;
    background: var(--hp-surface);
    margin: 0;
    border-radius: 0; /* parent overflow:hidden + border-radius gestioneaza */
}

.hp-blog-card__meta {
    color: #727578; /* paritate Figma */
    font-size: 12px;
    margin: 0;
    padding: 8px 8px 0;
}

.hp-blog-card__title {
    color: var(--hp-text);
    font-family: var(--hp-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    padding: 2px 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Rezerva 2 randuri ca CTA-ul "Citeste mai mult" sa fie aliniat la
     * acelasi Y pe toate cardurile, indiferent daca titlul are 1 sau 2 randuri.
     * 2 linii × 14px × 1.3 = 36.4px → 38px in render real (cu glyph metrics).
     * Folosim valoarea fix pentru match perfect (em rotunjeste inconsistent). */
    min-height: 38px;
}

.hp-blog-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 8px 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid #010F1C;
    border-radius: 8px;
    color: #010F1C;
    font-family: var(--hp-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.hp-blog-card__cta:hover {
    background: #010F1C;
    color: #fff;
}

/* ========== Reviews placeholder ========== */
.hp-reviews-placeholder {
    padding-block: 48px;
}

.hp-reviews-placeholder__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--hp-text-muted);
    font-size: 14px;
}

.hp-reviews-placeholder__star {
    color: var(--hp-accent);
    font-size: 18px;
}

/* ========== Newsletter ========== */
.hp-newsletter {
    background: var(--hp-accent);
    color: #FFFFFF;
    padding-block: 48px;
}

.hp-newsletter__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: var(--hp-container);
    margin-inline: auto;
    padding-inline: 16px;
}

.hp-newsletter__title {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.hp-newsletter__heading {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.hp-newsletter__form {
    display: flex;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
}

.hp-newsletter__input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: var(--hp-text);
    font-size: 14px;
    outline: none;
}

.hp-newsletter__submit {
    padding: 14px 28px;
    background: var(--hp-text);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.hp-newsletter__submit:hover {
    background: var(--hp-accent);
    filter: brightness(0.9);
}

/* ========== Responsive (basic stacking) ========== */
@media (max-width: 991px) {
    .hp-section {
        --hp-section-py: 48px;
    }
    .hp-about__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hp-about__title {
        font-size: 28px;
    }
    .hp-newsletter__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .hp-banner__image {
        height: 320px;
    }
}

@media (max-width: 767px) {
    /* Mobile: section header CENTRAT DOAR pentru hero products (Best Sellers, Figma 53:2)
     * Compact (Top sellers / Aur / Argint) ramane inline (paritate Figma 371:1153). */
    .hp-products--hero .hp-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: center;
    }
    .hp-products--hero .hp-section-header__titles {
        align-items: center;
        gap: 3px;
    }
    .hp-products--hero .hp-section-header__link {
        align-self: flex-end;
        font-size: 14px;
    }
    /* Compact products: header inline NU centrat (paritate Figma "Sectiune") */
    .hp-products--compact .hp-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .hp-section-header__title {
        font-size: 30px;
        line-height: 1.25;
    }
    .hp-section-header__title--small {
        font-size: 20px; /* paritate Figma 371:732 — 20px SemiBold */
        font-weight: 600;
    }
    /* Categorii (Figma 371:730) + Blog (Figma 371:1567): header inline, NU centrat
     * — title left + Vezi toate right (paritate Figma small section header) */
    .hp-categories .hp-section-header,
    .hp-blog .hp-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .hp-banner__image {
        height: 220px;
    }
}