/* ===========================================================================
   Fiori — Theme & Design Tokens (doc 05_DESIGN_SYSTEM)
   Luxury minimal · feminine · premium · soft. Rose / nude / cream only.
   Design refresh pass 1: deeper warm rose, soft-pink page background,
   larger radii, generous rhythm. All colors come from CSS variables —
   never hard-code a hex elsewhere.
   =========================================================================== */

:root {
    /* Brand — rose (deep + warm) */
    --c-rose:        #E8899A; /* primary rose — accents, active states */
    --c-rose-strong: #E07B8E; /* solid buttons, prices, sale badges */
    --c-rose-deep:   #D06B7E; /* hover / active / emphasis */
    --c-rose-ink:    #B85A6C; /* rose text on light surfaces (readable) */
    --c-rose-beige:  #D8B9A8; /* Rose Beige — secondary surface */
    --c-blush:       #FBE9EC; /* soft pink surface — tinted sections & panels */
    --c-blush-deep:  #F8DCE1; /* stronger pink tint — announcement bar, chips */
    --c-cream:       #FAF2EA; /* Soft Cream — secondary surface */

    /* Surfaces */
    --c-bg:      #FDF4F5; /* page background — very light warm pink */
    --c-surface: #FFFFFF; /* cards + white sections */
    --c-warm-white: var(--c-surface); /* legacy alias — prefer --c-surface */

    /* Text & lines */
    --c-text:          #3D2B2B; /* dark warm brown */
    --c-muted:         #8B7472; /* warm grey-brown — secondary text */
    --c-border:        #F2DFE3; /* very light warm pink hairline */
    --c-border-strong: #E9CDD4; /* input borders, stronger dividers */

    /* Semantic (muted to fit the palette) */
    --c-success:        #6B8E7B;
    --c-success-bg:     #EEF4F0;
    --c-success-border: #D3E2D9;
    --c-success-ink:    #3F6B53;
    --c-error:          #B5524E;
    --c-error-bg:       #FBECEB;
    --c-error-border:   #EFCFCD;
    --c-error-ink:      #97413E;
    --c-warning:        #C99A5B;

    /* Image ratios — one box shape per context, applied everywhere so a grid
       never mixes portrait and square sources. Full-bleed hero banners are the
       deliberate exception and keep their natural ratio. */
    --ratio-card: 1 / 1;      /* product / category / bundle / scent / insta */
    --ratio-detail: 1 / 1;    /* product gallery main image */
    --ratio-wide: 4 / 3;      /* hero side image, before/after cards */

    /* Radius — larger & softer; pill is for chips/badges only */
    --radius-xs:   8px;
    --radius-sm:  10px;
    --radius-btn: 12px;
    --radius-md:  18px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-pill: 999px;

    /* Shadows (soft, low-opacity, warm-toned) */
    --shadow-xs:   0 1px 4px   rgba(157, 106, 118, .05);
    --shadow-sm:   0 2px 10px  rgba(157, 106, 118, .06);
    --shadow-md:   0 10px 28px rgba(157, 106, 118, .10);
    --shadow-lg:   0 20px 48px rgba(157, 106, 118, .13);
    --shadow-rose: 0 8px 20px  rgba(224, 123, 142, .30);
    --focus-ring:  0 0 0 .2rem rgba(232, 137, 154, .30);
    --scrim:       rgba(61, 43, 43, .45);   /* dark overlay on imagery */
    --scrim-light: rgba(255, 255, 255, .35); /* light wash on imagery */

    /* On-rose (content sitting on a solid rose band) */
    --c-on-rose:        #FFFFFF;
    --c-on-rose-soft:   rgba(255, 255, 255, .18); /* translucent tiles/boxes */
    --c-on-rose-border: rgba(255, 255, 255, .38);

    /* Spacing scale (4px base) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
    --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

    /* Generous vertical rhythm for sections */
    --section-y:       clamp(56px, 7vw, 104px);
    --section-y-tight: clamp(40px, 5vw, 72px);

    /* Decorative leaf/sprig accent used under section titles (CSS mask) */
    --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Crect x='0' y='6.4' width='23' height='1.2' rx='.6' opacity='.5'/%3E%3Crect x='41' y='6.4' width='23' height='1.2' rx='.6' opacity='.5'/%3E%3Cpath d='M32 1.4c2.7 2.5 4 4.5 4 6s-1.3 3.7-4 5.2c-2.7-1.5-4-3.7-4-5.2s1.3-3.5 4-6Z'/%3E%3C/svg%3E");

    /* Typography */
    --font-en: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-ar: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif;

    /* Bootstrap bridge: map a few Bootstrap variables to brand tokens */
    --bs-body-color: var(--c-text);
    --bs-body-bg: var(--c-bg);
    --bs-border-color: var(--c-border);
    --bs-link-color: var(--c-rose-ink);
    --bs-link-hover-color: var(--c-rose-deep);
}

/* ---- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-en);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
body.locale-ar { font-family: var(--font-ar); }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; color: var(--c-text); }
a { color: var(--c-rose-ink); text-decoration: none; }
a:hover { color: var(--c-rose-deep); }

.text-muted-soft { color: var(--c-muted) !important; }
.text-rose { color: var(--c-rose-ink) !important; }

hr { border-color: var(--c-border); opacity: 1; }

::selection { background: var(--c-blush-deep); color: var(--c-text); }

:focus-visible { outline: 2px solid var(--c-rose); outline-offset: 2px; }

/* ---- Media boxes --------------------------------------------------------
   A ratio box owns its height (aspect-ratio) and the image is taken OUT of the
   layout flow. Without this the child's `height:100%` resolves against an auto
   height, the image falls back to its intrinsic size and stretches the box —
   which is why cards used to inherit each photo's own ratio. Reserving the box
   this way also means zero layout shift while images load. */
.media-box {
    position: relative;
    overflow: hidden;
    background: var(--c-blush);
    aspect-ratio: var(--ratio-card);
}
.media-box > img,
.media-box > a > img,
.media-box > picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.media-box > a { position: absolute; inset: 0; display: block; }
.media-box--wide { aspect-ratio: var(--ratio-wide); }

/* ---- Buttons ------------------------------------------------------------- */
/* Softly rounded rectangles — NOT pills. Pills only via .btn-pill / chips. */
.btn {
    border-radius: var(--radius-btn);
    min-height: 46px;
    font-weight: 600;
    padding: .65rem 1.6rem;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-sm { min-height: 38px; border-radius: var(--radius-sm); padding: .35rem 1rem; font-size: 14px; }
.btn-lg { min-height: 52px; padding: .8rem 2rem; font-size: 17px; }
.btn-pill { border-radius: var(--radius-pill); }

.btn-rose {
    background: var(--c-rose-strong);
    border: 1px solid var(--c-rose-strong);
    color: var(--c-surface);
    box-shadow: var(--shadow-xs);
}
.btn-rose:hover, .btn-rose:focus {
    background: var(--c-rose-deep);
    border-color: var(--c-rose-deep);
    color: var(--c-surface);
    box-shadow: var(--shadow-rose);
    transform: translateY(-1px);
}
.btn-rose:focus-visible { box-shadow: var(--shadow-rose), var(--focus-ring); }
.btn-rose:disabled, .btn-rose.disabled { background: var(--c-rose); border-color: var(--c-rose); opacity: .55; box-shadow: none; transform: none; }

.btn-outline-rose {
    background: var(--c-surface);
    border: 1px solid var(--c-rose);
    color: var(--c-rose-ink);
}
.btn-outline-rose:hover, .btn-outline-rose:focus {
    background: var(--c-rose-strong);
    border-color: var(--c-rose-strong);
    color: var(--c-surface);
    box-shadow: var(--shadow-rose);
    transform: translateY(-1px);
}
.btn-outline-rose:focus-visible { box-shadow: var(--focus-ring); }

.btn-soft {
    background: var(--c-blush);
    border: 1px solid var(--c-border);
    color: var(--c-rose-ink);
}
.btn-soft:hover { background: var(--c-blush-deep); color: var(--c-rose-deep); }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select {
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
}
.form-control::placeholder { color: var(--c-muted); opacity: .8; }
.form-control:focus, .form-select:focus {
    border-color: var(--c-rose);
    box-shadow: var(--focus-ring);
}
.form-label { font-weight: 500; font-size: 14px; margin-bottom: var(--sp-2); }
.form-check-input:checked { background-color: var(--c-rose-strong); border-color: var(--c-rose-strong); }
.form-check-input:focus { border-color: var(--c-rose); box-shadow: var(--focus-ring); }

/* ---- Cards --------------------------------------------------------------- */
.card, .surface-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.surface-card { padding: var(--sp-6); transition: transform .25s ease, box-shadow .25s ease; }
.surface-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---- Badges & chips (pill, small) --------------------------------------- */
.badge-rose {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--c-rose-strong); color: var(--c-surface);
    border-radius: var(--radius-pill); padding: 3px 10px;
    font-size: 12px; font-weight: 600; line-height: 1.5;
}
.badge-soft {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--c-blush-deep); color: var(--c-rose-ink);
    border-radius: var(--radius-pill); padding: 3px 10px;
    font-size: 12px; font-weight: 600; line-height: 1.5;
}

/* ---- Announcement bar ---------------------------------------------------- */
.announcement-bar {
    background: var(--c-blush-deep);
    color: var(--c-rose-ink);
    letter-spacing: .02em;
    font-size: 13px;
}
.announcement-bar i { font-size: 14px; opacity: .9; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}
.brand-mark {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-rose-ink);
    text-transform: uppercase;
}
.navbar .nav-link { color: var(--c-text); font-weight: 500; }
.navbar .nav-link:hover { color: var(--c-rose-deep); }
.lang-switch { white-space: nowrap; }

/* ---- Sections: page is soft pink, every other section is white ---------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

main > .section { background: var(--c-bg); }
main > .section:nth-of-type(even) { background: var(--c-surface); }
/* Explicit surface modifiers always win over the alternation. */
main > .section.section--surface { background: var(--c-surface); }
main > .section.section--bg      { background: var(--c-bg); }
main > .section.section--cream   { background: var(--c-cream); }
main > .section.section--blush   { background: var(--c-blush); }
main > .section.section--plain   { background: transparent; }

/* ---- Section heading + decorative sprig --------------------------------- */
.section-head { text-align: center; margin-bottom: var(--sp-12); }
.section-title {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
.section-head .section-title::after,
.section-sprig::after {
    content: "";
    display: block;
    width: 72px; height: 14px;
    margin: var(--sp-3) auto 0;
    background: var(--c-rose);
    -webkit-mask: var(--sprig) center / contain no-repeat;
    mask: var(--sprig) center / contain no-repeat;
}
.section-head .section-subtitle { color: var(--c-muted); margin: var(--sp-3) auto 0; max-width: 40rem; }

/* ---- Hero ---------------------------------------------------------------- */
.hero {
    background: linear-gradient(160deg, var(--c-blush) 0%, var(--c-blush-deep) 100%);
    padding-block: var(--section-y);
}
.hero-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-rose-ink);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: var(--sp-3);
}
.hero-title {
    font-size: clamp(32px, 5vw, 44px);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-4);
}
.hero-subtitle { color: var(--c-muted); font-size: 18px; max-width: 30rem; }
.hero-visual {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero-orb {
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--c-blush), var(--c-rose-beige) 70%, var(--c-rose-strong) 100%);
    box-shadow: var(--shadow-md);
}

/* ---- Round carousel / scroll arrows ------------------------------------- */
.round-arrow {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-rose-deep);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); font-size: 18px; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.round-arrow:hover { background: var(--c-rose-strong); color: var(--c-surface); transform: translateY(-2px); }
.carousel-control-prev, .carousel-control-next { width: 8%; opacity: 1; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background-color: var(--c-surface); box-shadow: var(--shadow-md);
    background-size: 40% 40%;
}

/* ---- Misc surfaces ------------------------------------------------------- */
.foundation-note {
    display: inline-block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: var(--sp-3) var(--sp-6);
    color: var(--c-muted);
    box-shadow: var(--shadow-sm);
}

/* ---- Category cards (rose/beige/cream tints only) ------------------------ */
.category-card {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
    color: var(--c-text);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--c-text); }
.category-card__label { font-size: 22px; font-weight: 600; }
.tint-blush { background: var(--c-blush); }
.tint-beige { background: var(--c-rose-beige); }
.tint-cream { background: var(--c-cream); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
    background: var(--c-blush);
    border-top: 1px solid var(--c-border);
}
.footer-heading {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    color: var(--c-text);
}
.footer-links a { color: var(--c-muted); display: inline-block; padding: var(--sp-1) 0; }
.footer-links a:hover { color: var(--c-rose-deep); }
.footer-divider { border-color: var(--c-border); opacity: 1; }

/* ---- Error page ---------------------------------------------------------- */
.error-page { padding-block: var(--section-y); }
.error-code {
    font-size: clamp(64px, 14vw, 120px);
    font-weight: 700;
    color: var(--c-rose-beige);
    line-height: 1;
}

/* ---- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}