/*
 * Home page — boutique layout (loaded only by pages/home.php, scoped under
 * body.home-boutique so catalog/product/cart pages keep their own styling).
 *
 * Hero slider + typed tagline, typed "Les Catégories" title, round category
 * row, two rectangular category tiles, follow/contact block.
 */

body.home-boutique {
    --hb-text: #334155;
    --hb-heading: #1e293b;
    --hb-black: #000000;
    --hb-border: #D1D5DB;
    --hb-bg: #FFFFFF;
    --hb-cream: #F5F5DC;
    --hb-font: 'Poppins', sans-serif;
    --hb-display: 'Aboreto', sans-serif;
    background: var(--hb-bg);
    color: var(--hb-text);
    font-family: var(--hb-font);
    font-size: 16px;
    line-height: 1.65;
}

/* ---------- Header: logo left · menu centre · cart right ---------- */
body.home-boutique .main-header {
    background: var(--hb-bg);
    border-bottom: 1px solid var(--hb-border);
    backdrop-filter: none;
    box-shadow: none;
}
body.home-boutique .header-container {
    max-width: 1200px;
    min-height: 80px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
body.home-boutique .logo { justify-self: start; }
body.home-boutique .logo-img,
body.home-boutique .logo img {
    height: 55px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
body.home-boutique .main-nav { gap: 0; justify-self: center; }
body.home-boutique .nav-link {
    font-family: var(--hb-font);
    font-weight: 500;
    font-size: 16px;
    color: var(--hb-text);
    padding: 0 1em;
    line-height: 80px;
}
body.home-boutique .nav-link::after { display: none; }
body.home-boutique .nav-link:hover { color: var(--hb-black); }
body.home-boutique .header-actions { justify-self: end; gap: 10px; }
body.home-boutique .cart-icon {
    background: transparent;
    color: var(--hb-text);
    padding: 6px;
    border-radius: 0;
}
body.home-boutique .cart-icon:hover { background: transparent; color: var(--hb-black); }
body.home-boutique .cart-icon svg { width: 22px; height: 22px; }
body.home-boutique .mobile-menu-btn { color: var(--hb-black); }
body.home-boutique .mobile-nav { top: 70px; font-family: var(--hb-font); }

/* ---------- Hero slider ---------- */
.hb-hero {
    position: relative;
    overflow: hidden;
}
.hb-slider {
    position: relative;
    height: 521px;
    overflow: hidden;
}
.hb-track {
    display: flex;
    height: 100%;
    transition: transform 300ms ease;
    will-change: transform;
}
.hb-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #1a1a1a;
}
.hb-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.64;
}
.hb-slide-empty { background: linear-gradient(135deg, #3a3a3a, #111); }

/* ---------- Typed text (hero tagline + section title) ---------- */
.hb-typed {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
}
.hb-typed-text {
    position: relative;
    display: inline;
}
/* 1px caret at the end of the typed run. */
.hb-typed-text::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-inline-start: 2px;
    vertical-align: -0.08em;
    background: currentColor;
    animation: hb-caret 1s infinite;
}
.hb-typed.is-done .hb-typed-text::after { animation: none; opacity: 1; }
@keyframes hb-caret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.hb-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 171px;
    z-index: 2;
    padding: 0 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 86px;
    color: var(--hb-cream);
    transition: text-shadow 0.3s ease;
}
.hb-hero-text:hover { text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

/* ---------- Categories ---------- */
.hb-categories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 10px 0;
}
.hb-cat-title {
    font-family: var(--hb-display);
    font-size: 43px;
    color: var(--hb-black);
    padding: 10px 0 20px;
    min-height: calc(43px * 1.2 + 30px);
}

.hb-cat-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
}
.hb-cat {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #2b2b2b;
    background-position: center center;
    background-size: cover;
    text-decoration: none;
    isolation: isolate;
}
.hb-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #000;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.hb-cat-noimg { background-image: linear-gradient(135deg, #6b6158 0%, #2a2522 100%); }
.hb-cat-name {
    font-family: var(--hb-display);
    color: #FFFFFF;
    text-align: center;
    line-height: 1.3;
    padding: 0 12px;
    margin-bottom: -15px;
}

/* Round: equal circles sharing the row. */
/* Fixed-size circles that wrap onto extra rows, so a long category list
   never squeezes the circles into slivers. */
.hb-cat-row-round { flex-wrap: wrap; }
.hb-cat-round {
    flex: 0 0 170px;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    min-height: 164px;
    border-radius: 50%;
}
.hb-cat-round .hb-cat-name { font-size: 18px; }

/* Rectangles: two wide tiles. */
.hb-cat-rect {
    flex: 1 1 0;
    min-height: 223px;
    border-radius: 50px;
}
.hb-cat-rect .hb-cat-name { font-size: 1.7rem; }

/* Long names shrink inside desktop circles. */
@media (min-width: 768px) and (max-width: 1100px) {
    .hb-cat-round .hb-cat-name { font-size: 16px; }
}

/* ---------- Entrance animations (fadeInLeft / fadeInRight / fadeInUp) ---------- */
.hb-anim-pending { opacity: 0; }
.hb-anim { animation-duration: 1.25s; animation-fill-mode: both; }
.hb-anim-fadeInLeft  { animation-name: hb-fadeInLeft; }
.hb-anim-fadeInRight { animation-name: hb-fadeInRight; }
.hb-anim-fadeInUp    { animation-name: hb-fadeInUp; }
@keyframes hb-fadeInLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes hb-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes hb-fadeInUp    { from { opacity: 0; transform: translate3d(0, 100%, 0); }  to { opacity: 1; transform: none; } }
.hb-categories { overflow-x: clip; }

/* ---------- Follow / contact ---------- */
.hb-contact {
    max-width: 1060px;
    margin: 0 auto;
    padding: 50px 20px 40px;
    text-align: center;
}
.hb-contact-title {
    font-family: var(--hb-display);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.3;
    color: var(--hb-heading);
    margin: 0 0 16px;
}
.hb-contact-sub { margin-top: 28px; }
.hb-social {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.hb-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    color: #fff;
    transition: opacity 0.3s ease;
}
.hb-social-icon:hover { opacity: 0.9; color: #fff; }
.hb-social-icon svg { width: 25px; height: 25px; }
.hb-social-facebook  { background: #3b5998; }
.hb-social-instagram { background: #262626; }
.hb-social-tiktok    { background: #000; }
.hb-contact-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hb-text);
    font-size: 16px;
    direction: ltr;
}
.hb-contact-line svg { width: 18px; height: 18px; }
.hb-contact-line:hover { color: var(--hb-black); }

/* ---------- Footer: centred single copyright row ---------- */
body.home-boutique .main-footer { font-family: var(--hb-font); }

/* ---------- Mobile (≤ 767px) ---------- */
@media (max-width: 767px) {
    /* cart left · logo centre · menu toggle right */
    body.home-boutique .header-container {
        min-height: 70px;
        padding: 0 16px;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "cart logo menu";
    }
    body.home-boutique .main-nav { display: none; }
    body.home-boutique .header-actions { display: contents; }
    body.home-boutique .logo { grid-area: logo; justify-self: center; }
    body.home-boutique .cart-icon { grid-area: cart; justify-self: start; }
    body.home-boutique .mobile-menu-btn { grid-area: menu; justify-self: end; display: flex; }
    body.home-boutique .logo-img,
    body.home-boutique .logo img { height: 50px; }

    .hb-slider { height: 446px; }
    .hb-hero-text { top: 146px; font-size: 29px; }

    .hb-categories { padding: 10px 10px 0; }
    .hb-cat-title { font-size: 22px; padding: 0 0 14px; min-height: calc(22px * 1.2 + 14px); }

    .hb-cat-row { flex-wrap: wrap; gap: 10px; padding: 5px 0; }

    /* Two circles per row. */
    .hb-cat-round {
        flex: 0 0 45%;
        max-width: none;
        min-height: 0;
    }
    .hb-cat-round::before { opacity: 0.6; }
    .hb-cat-round .hb-cat-name { font-size: 13px; }

    /* Rectangles stack full width. */
    .hb-cat-rect {
        flex: 0 0 100%;
        min-height: 104px;
        border-radius: 30px;
    }
    .hb-cat-rect::before { opacity: 0.6; }
    .hb-cat-rect .hb-cat-name { font-size: 23px; }

    .hb-contact { padding-top: 96px; }
    .hb-contact-title { font-size: 25px; }
    .hb-contact-sub { font-size: 17px; line-height: 1.6; }
}

@media (hover: hover) {
    .hb-cat:hover::before { opacity: 0.5; }
}
@media (hover: hover) and (max-width: 767px) {
    .hb-cat:hover::before { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-track { transition: none; }
    .hb-anim { animation: none; }
    .hb-anim-pending { opacity: 1; }
    .hb-typed-text::after { animation: none; }
}

/* Dark theme (admin theme_mode = dark): keep the layout, flip the surfaces. */
:root[data-theme="dark"] body.home-boutique {
    --hb-bg: #121212;
    --hb-text: #d6d6d6;
    --hb-heading: #ececec;
    --hb-black: #ffffff;
    --hb-border: #2a2a2a;
}


/* ---------- RTL (Arabic) ----------
   Poppins / Aboreto / Georgia have no Arabic glyphs: switch the boutique
   fonts to Cairo. The hero track slides with translateX(-100% * i), which
   assumes slides laid out left-to-right, so pin it to LTR. */
[dir="rtl"] body.home-boutique {
    --hb-font: 'Cairo', sans-serif;
    --hb-display: 'Cairo', sans-serif;
}
[dir="rtl"] .hb-hero-text { font-family: 'Cairo', sans-serif; font-weight: 800; }
[dir="rtl"] .hb-cat-name,
[dir="rtl"] .hb-cat-title,
[dir="rtl"] .hb-contact-title { font-weight: 700; }
[dir="rtl"] .hb-track { direction: ltr; }
[dir="rtl"] .hb-slide { direction: rtl; }