/* ===========================================================================
   Fiori — Storefront styles. Builds on theme.css tokens (doc 05). Tokens only —
   no hard-coded brand colors. RTL-aware via logical properties. Mobile-first.
   Design refresh pass 1: deeper rose, white cards on a soft-pink page, larger
   radii, softer warm shadows.
   =========================================================================== */

/* ---- Header ------------------------------------------------------------- */
.btn-icon {
    width: 40px; height: 40px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text); background: transparent; border: 0; font-size: 18px;
    transition: background-color .2s ease, color .2s ease;
}
.btn-icon:hover { background: var(--c-blush); color: var(--c-rose-deep); }
.icon-badge {
    position: absolute; top: 2px; inset-inline-end: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
    background: var(--c-rose-strong); color: var(--c-surface); font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.header-search { position: relative; max-width: 320px; width: 100%; }
.header-search .form-control { border-radius: var(--radius-pill); padding-inline-end: 44px; background: var(--c-bg); }
.header-search .btn-icon { position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%); }
.header-icons .lang-switch { white-space: nowrap; }
@media (max-width: 991.98px) {
    .header-search { max-width: 100%; margin-top: var(--sp-3); }
}

/* ---- Layout safety ------------------------------------------------------ */
/* Below sm the container is fluid with 12px padding, but a `.g-5` row pulls
   -24px per side and pushes the page 12px wide (horizontal scroll on phones).
   Cap large gutters on the smallest screens; desktop rhythm is untouched. */
@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ---- Section scaffolding (surfaces + rhythm live in theme.css) ---------- */
.section-eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .16em;
    color: var(--c-rose-ink); font-weight: 600; font-size: 13px; margin-bottom: var(--sp-2);
}
.section-link { color: var(--c-rose-ink); font-weight: 500; }
.section-link:hover { color: var(--c-rose-deep); }

/* ---- Hero slider --------------------------------------------------------- */
.hero-slider { position: relative; }
.hero-slide {
    background: linear-gradient(160deg, var(--c-blush) 0%, var(--c-blush-deep) 100%);
    padding-block: var(--section-y);
}
.hero-slide:nth-child(2) { background: linear-gradient(160deg, var(--c-blush-deep) 0%, var(--c-rose-beige) 100%); }
.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: 32rem; }
.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: 62%; 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);
}
.carousel-indicators [data-bs-target] { background-color: var(--c-rose-strong); }

/* ---- Category (collection) cards ---------------------------------------- */
.collection-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);
    background-size: cover; background-position: center;
}
.collection-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--c-text); }
.collection-card__label { font-size: 22px; font-weight: 600; }
.tint-blush { background-color: var(--c-blush); }
.tint-beige { background-color: var(--c-rose-beige); }
.tint-cream { background-color: var(--c-cream); }

/* ---- Product card -------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); align-items: stretch; }
@media (min-width: 768px)  { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Full-bleed tinted image area on top, floating heart, white body, and a
   price / square-add footer row. */
.product-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Ratio box: the image is positioned out of flow so it can never stretch the
   box to its own intrinsic ratio (see .media-box in theme.css). */
.product-card__media {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ratio-card); background: var(--c-blush);
}
.product-card__imglink { position: absolute; inset: 0; display: block; }
.product-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
.product-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-rose-beige); font-size: 40px; }
.product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; }
.product-card__name { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.35; }
.product-card__name a { color: var(--c-text); }
.product-card__name a:hover { color: var(--c-rose-deep); }
.product-card__caption { font-size: 12.5px; color: var(--c-muted); line-height: 1.4; }
/* Bilingual name block: English on top, Arabic smaller + muted underneath. */
.product-card__name-ar {
    font-size: 13px; color: var(--c-muted); line-height: 1.5;
    font-family: var(--font-ar); display: block;
}
.product-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3);
}
/* Small SQUARE rose add-to-cart icon button (not a full-width bar). */
.btn-add-square {
    width: 40px; height: 40px; min-height: 0; flex: 0 0 auto; padding: 0;
    border-radius: var(--radius-sm); border: 1px solid var(--c-rose-strong);
    background: var(--c-rose-strong); color: var(--c-surface);
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.btn-add-square:hover { background: var(--c-rose-deep); border-color: var(--c-rose-deep); color: var(--c-surface); box-shadow: var(--shadow-rose); transform: translateY(-1px); }
.btn-add-square--ghost { background: var(--c-surface); color: var(--c-rose-ink); border-color: var(--c-border-strong); }
.btn-add-square--ghost:hover { background: var(--c-blush); color: var(--c-rose-deep); border-color: var(--c-rose); box-shadow: none; }

.price-block { display: flex; align-items: baseline; gap: var(--sp-2); }
.price-now { color: var(--c-rose-strong); font-weight: 700; font-size: 16px; }
.price-was { color: var(--c-muted); font-size: 13px; }

.badge-sale {
    position: absolute; top: var(--sp-3); inset-inline-start: var(--sp-3);
    background: var(--c-rose-strong); color: var(--c-surface); font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-pill);
}
.badge-oos {
    position: absolute; bottom: var(--sp-3); inset-inline-start: var(--sp-3);
    background: var(--c-surface); color: var(--c-muted); font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--c-border);
}
.wishlist-heart {
    position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3);
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: var(--c-surface); color: var(--c-rose-deep); box-shadow: var(--shadow-sm);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.wishlist-heart:hover, .wishlist-heart.is-active { background: var(--c-rose-strong); color: var(--c-surface); }

/* ---- Carousels (horizontal scroll) -------------------------------------- */
/* stretch: every card in a row is as tall as the tallest, whatever the copy. */
.scroll-row { display: flex; align-items: stretch; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3); scroll-snap-type: x mandatory; }
.scroll-row > * { flex: 0 0 70%; scroll-snap-align: start; }
@media (min-width: 576px) { .scroll-row > * { flex-basis: 45%; } }
@media (min-width: 768px) { .scroll-row > * { flex-basis: 31%; } }
@media (min-width: 1200px) { .scroll-row > * { flex-basis: 23%; } }
.scroll-nav { display: flex; gap: var(--sp-2); }

/* ---- Why Fiori (trust badges) ------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { text-align: center; }
.trust-item__icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--sp-3);
    background: var(--c-blush); color: var(--c-rose-deep); display: grid; place-items: center; font-size: 26px;
}
.trust-item__title { font-weight: 600; }
.trust-item__text { color: var(--c-muted); font-size: 14px; }

/* ---- Reviews / testimonials --------------------------------------------- */
.review-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); height: 100%;
}
.stars { color: var(--c-rose-strong); letter-spacing: 2px; }
.stars .bi-star { color: var(--c-border-strong); }
.review-author { font-weight: 600; }

/* ---- Instagram strip ----------------------------------------------------- */
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (min-width: 768px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }
.insta-tile {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ratio-card); border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--c-blush), var(--c-rose-beige));
    display: grid; place-items: center; color: var(--c-surface); font-size: 22px;
}
.insta-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---- Newsletter band ----------------------------------------------------- */
.newsletter-band {
    background: var(--c-rose-strong); color: var(--c-surface);
    border-radius: var(--radius-xl); padding: var(--sp-12);
    box-shadow: var(--shadow-md);
}
.newsletter-band .section-title { color: var(--c-surface); }
.newsletter-band .section-title::after { background: var(--c-surface); }
.newsletter-band .form-control { border: 0; }
.newsletter-band .btn { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface); }
.newsletter-band .btn:hover { background: var(--c-rose-deep); border-color: var(--c-rose-deep); }

/* ---- Breadcrumb / page head --------------------------------------------- */
.page-head { background: var(--c-blush); padding-block: var(--sp-12); }
.breadcrumb-soft { font-size: 13px; color: var(--c-muted); }
.breadcrumb-soft a { color: var(--c-muted); }
.breadcrumb-soft a:hover { color: var(--c-rose-deep); }

/* ---- Shop filters -------------------------------------------------------- */
.shop-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.filter-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.filter-group { margin-bottom: var(--sp-5); }
.filter-group__title { font-weight: 600; font-size: 14px; margin-bottom: var(--sp-2); }

/* ---- Product page -------------------------------------------------------- */
.gallery-main {
    aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--c-blush); box-shadow: var(--shadow-sm);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main__placeholder { display: grid; place-items: center; height: 100%; color: var(--c-rose-beige); font-size: 64px; }
.gallery-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.gallery-thumb {
    width: 68px; height: 68px; border-radius: var(--radius-xs); overflow: hidden;
    border: 2px solid transparent; cursor: pointer; background: var(--c-blush); padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--c-rose-strong); }

.product-title { font-size: clamp(24px, 3vw, 34px); margin-bottom: var(--sp-2); }
.product-caption { color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.product-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0; }
.product-price .price-now { font-size: 28px; }
.product-price .price-was { font-size: 16px; }
.discount-badge { background: var(--c-rose-strong); color: var(--c-surface); font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: var(--radius-pill); }

.scent-selector { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.scent-chip {
    border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
    border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px; transition: all .2s ease;
}
.scent-chip:hover { border-color: var(--c-rose); }
.scent-chip.is-active { background: var(--c-blush-deep); border-color: var(--c-rose); color: var(--c-rose-ink); }
.scent-chip.is-oos { opacity: .55; }
.scent-chip__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-rose-beige); }

.stock-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 12px; }
.stock-pill--in { background: var(--c-success-bg); color: var(--c-success-ink); }
.stock-pill--out { background: var(--c-blush); color: var(--c-muted); }

.buy-actions { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0; }
.buy-actions .btn { flex: 1 1 auto; }

.trust-icons { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-5) 0; }
.trust-icons span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: 13px; }

/* The active underline is drawn as a pseudo-element rather than a bottom border:
   Bootstrap's own `.nav-tabs .nav-link.active { border-color: … }` competes at
   the same specificity, and a pseudo-element sidesteps that fight entirely. */
.product-tabs .nav-link { position: relative; color: var(--c-muted); font-weight: 500; border: 0; background: transparent; }
.product-tabs .nav-link::after {
    content: ""; position: absolute; inset-inline: 12%; bottom: 0; height: 2px;
    border-radius: 2px; background: var(--c-rose-strong);
    transform: scaleX(0); transition: transform .25s ease;
}
.product-tabs .nav-link:hover { color: var(--c-rose-ink); }
.product-tabs .nav-link:hover::after { transform: scaleX(.5); }
.product-tabs .nav-link.active { color: var(--c-rose-ink); background: transparent; }
.product-tabs .nav-link.active::after { transform: scaleX(1); }
.tab-body { padding: var(--sp-5) 0; color: var(--c-text); line-height: 1.8; }

.notify-box { background: var(--c-blush); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-5); margin: var(--sp-4) 0; }

.rating-summary { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; }
.rating-big { font-size: 48px; font-weight: 700; color: var(--c-text); line-height: 1; }
.rating-bars { flex: 1 1 260px; }
.rating-bar { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
.rating-bar__track { flex: 1 1 auto; height: 8px; background: var(--c-border); border-radius: var(--radius-pill); overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--c-rose-strong); }

/* ---- Scent landing ------------------------------------------------------- */
.scent-hero {
    --scent-theme: var(--c-rose);
    --scent-accent: var(--c-rose-deep);
    background: linear-gradient(160deg, color-mix(in srgb, var(--scent-theme) 30%, var(--c-surface)), var(--scent-theme));
    color: var(--c-text); padding-block: var(--section-y); text-align: center;
    background-size: cover; background-position: center;
}
.scent-hero__title { font-size: clamp(32px, 5vw, 48px); }
/* Banner image is passed in as --bg-image; a light wash keeps text readable. */
.scent-hero--banner { background-image: linear-gradient(var(--scrim-light), var(--scrim-light)), var(--bg-image); }

/* ---- Bundle page --------------------------------------------------------- */
.bundle-item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.bundle-item:last-child { border-bottom: 0; }
.bundle-item__img { width: 64px; height: 64px; border-radius: var(--radius-xs); object-fit: cover; background: var(--c-blush); }
.bundle-summary { background: var(--c-blush); border-radius: var(--radius-md); padding: var(--sp-6); }
.save-line { color: var(--c-success); font-weight: 600; }

/* ---- Toast -------------------------------------------------------------- */
.fiori-toast {
    position: fixed; inset-inline: 0; bottom: var(--sp-6); margin: 0 auto; width: max-content; max-width: 90%;
    background: var(--c-text); color: var(--c-surface); padding: 10px 20px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg); z-index: 1080; opacity: 0; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.fiori-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Soft alerts (shared with admin) ------------------------------------ */
.alert-soft-success { background: var(--c-success-bg); border: 1px solid var(--c-success-border); color: var(--c-success-ink); border-radius: var(--radius-sm); }
.alert-soft-error   { background: var(--c-error-bg);   border: 1px solid var(--c-error-border);   color: var(--c-error-ink);   border-radius: var(--radius-sm); }

/* ---- Cart lines ---------------------------------------------------------- */
.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "img info remove" "img qty total";
    gap: var(--sp-2) var(--sp-3);
    align-items: center;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__img { grid-area: img; width: 72px; height: 72px; border-radius: var(--radius-xs); overflow: hidden; background: var(--c-blush); display: block; }
.cart-line__img { position: relative; }
.cart-line__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cart-line__info { grid-area: info; }
.cart-line__name { font-weight: 600; color: var(--c-text); }
.cart-line__name:hover { color: var(--c-rose-deep); }
.cart-line__price { grid-area: price; display: none; }
.cart-line__qty { grid-area: qty; }
.cart-line__qty input { width: 76px; }
.cart-line__total { grid-area: total; text-align: end; }
.cart-line__remove { grid-area: remove; text-align: end; }
@media (min-width: 768px) {
    .cart-line {
        grid-template-columns: 72px 1fr 110px 90px 110px 44px;
        grid-template-areas: "img info price qty total remove";
    }
    .cart-line__price { display: block; }
}

/* ---- Account area -------------------------------------------------------- */
.account-nav { display: flex; flex-direction: column; gap: 4px; }
.account-nav__link {
    display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4);
    border-radius: var(--radius-sm); color: var(--c-text); font-weight: 500; border: 0; background: transparent;
}
.account-nav__link:hover { background: var(--c-blush); color: var(--c-rose-deep); }
.account-nav__link.is-active { background: var(--c-blush-deep); color: var(--c-rose-ink); }
.account-nav__link i { width: 20px; text-align: center; }
.account-nav__link--logout { color: var(--c-error); cursor: pointer; }
.account-nav__link--logout:hover { background: var(--c-error-bg); }

.kpi-card.text-decoration-none { color: var(--c-text); }
.kpi-card.text-decoration-none:hover { box-shadow: var(--shadow-md); }

.wishlist-btn { flex: 0 0 auto !important; }
.wishlist-btn.is-active { background: var(--c-rose-strong); border-color: var(--c-rose-strong); color: var(--c-surface); }

/* ===========================================================================
   HOMEPAGE (design pass 2) — section-by-section to the approved mockup.
   =========================================================================== */

/* ---- Announcement bar: 3 items with tiny icons, evenly spread ----------- */
.announcement-bar__list {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(var(--sp-4), 6vw, var(--sp-16)); flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0;
}
.announcement-bar__item { display: inline-flex; align-items: center; gap: 6px; }
.announcement-bar__item i { font-size: 13px; }
/* One message is plenty on a phone. */
@media (max-width: 575.98px) { .announcement-bar__item:nth-child(n+2) { display: none; } }

/* ---- Header: centered logo, nav row underneath -------------------------- */
.site-header__top {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--sp-3); padding-block: var(--sp-4);
}
.site-header__side { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.site-header__side--end { justify-content: flex-end; }
.site-header__brand { justify-self: center; font-size: 26px; letter-spacing: .12em; }
.site-header__nav { border-top: 1px solid var(--c-border); }
.site-header__nav .navbar-nav { justify-content: center; gap: var(--sp-2); }
.site-header__nav .nav-link {
    position: relative; padding-block: var(--sp-3); font-size: 15px;
}
.site-header__nav .nav-link::after {
    content: ""; position: absolute; inset-inline: 20%; bottom: 6px; height: 2px;
    border-radius: 2px; background: var(--c-rose-strong);
    transform: scaleX(0); transition: transform .25s ease;
}
.site-header__nav .nav-link:hover::after { transform: scaleX(.6); }
.site-header__nav .nav-link.is-active { color: var(--c-rose-ink); }
.site-header__nav .nav-link.is-active::after { transform: scaleX(1); }
.site-header__nav .dropdown-toggle::after { margin-inline-start: 6px; border-top-color: currentColor; }
.dropdown-menu {
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: var(--sp-2);
}
.dropdown-item { border-radius: var(--radius-xs); padding: 8px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-blush); color: var(--c-rose-deep); }
@media (max-width: 991.98px) {
    .site-header__top { grid-template-columns: auto 1fr auto; }
    .site-header__brand { font-size: 20px; }
    .site-header__nav .navbar-nav { justify-content: flex-start; }
    .site-header__nav .nav-link::after { display: none; }
}

/* ---- Hero block ---------------------------------------------------------- */
.hero-block {
    background: linear-gradient(160deg, var(--c-blush) 0%, var(--c-blush-deep) 100%);
    padding-block: var(--section-y);
}
.hero-block .hero-title { font-weight: 600; line-height: 1.2; }
.hero-title__accent { color: var(--c-rose-strong); display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-media {
    position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--c-surface);
    box-shadow: var(--shadow-lg); aspect-ratio: var(--ratio-wide);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 991.98px) {
    .hero-block { text-align: center; }
    .hero-block .hero-subtitle { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-media { margin-top: var(--sp-8); aspect-ratio: 16 / 10; }
}

/* ---- Full-bleed hero banner -------------------------------------------- */
/* Artwork that already contains its own logo/headline: shown edge to edge at
   its natural aspect ratio. Never cropped and never overlaid, so the Arabic
   headline stays whole down to the smallest screen. */
.hero-banner { display: block; width: 100%; background: var(--c-blush); }
.hero-banner__link { display: block; }
.hero-banner__img { display: block; width: 100%; height: auto; }
.hero-banner__cta { text-align: center; padding: var(--sp-6) var(--sp-4) 0; }

/* Dots — rendered only when the builder holds more than one hero block. */
.hero-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.hero-dots [data-bs-target] {
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
    background: var(--c-rose-beige); opacity: .55; transition: opacity .2s ease, width .2s ease;
}
.hero-dots [data-bs-target].active { background: var(--c-rose-strong); opacity: 1; width: 26px; border-radius: var(--radius-pill); }

/* ---- Collection cards (3-up, split text / image) ------------------------ */
.collection-card--split {
    display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
    gap: var(--sp-3); aspect-ratio: auto; min-height: 190px;
    border-radius: var(--radius-lg); padding: var(--sp-6);
    box-shadow: var(--shadow-sm); color: var(--c-text); height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.collection-card--split:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--c-text); }
.collection-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.collection-card__title { font-size: 20px; font-weight: 600; margin: 0; }
.collection-card__caption { font-size: 13px; color: var(--c-muted); margin: 0; }
.collection-card__cta {
    margin-top: var(--sp-2); background: var(--c-surface); color: var(--c-rose-ink);
    border-radius: var(--radius-pill); padding: 7px 16px; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; gap: 6px;
    transition: background-color .2s ease, color .2s ease;
}
.collection-card--split:hover .collection-card__cta { background: var(--c-rose-strong); color: var(--c-surface); }
.collection-card__media {
    position: relative; overflow: hidden; align-self: center;
    aspect-ratio: var(--ratio-card); border-radius: var(--radius-md);
    background: var(--c-surface);
}
.collection-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
.collection-card__media i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: var(--c-rose-beige); }

/* ---- Carousel (best sellers) with round arrows on both sides ------------ */
.carousel-shell { position: relative; }
/* Proximity (not mandatory) snapping: friendlier with the arrow buttons'
   programmatic scrollBy, while still settling nicely after a swipe. */
.carousel-shell .scroll-row { scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x proximity; }
.carousel-shell .scroll-row::-webkit-scrollbar { display: none; }
.carousel-arrow {
    position: absolute; top: 38%; z-index: 2;
    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, opacity .2s ease;
}
.carousel-arrow:hover:not(:disabled) { background: var(--c-rose-strong); color: var(--c-surface); }
.carousel-arrow:disabled { opacity: .35; cursor: default; }
/* Nothing to scroll (fewer cards than fit) — hide the arrows rather than
   leaving dead disabled buttons on screen. JS toggles .is-static. */
.carousel-shell.is-static .carousel-arrow { display: none; }
.carousel-arrow--prev { inset-inline-start: calc(var(--sp-6) * -1); }
.carousel-arrow--next { inset-inline-end: calc(var(--sp-6) * -1); }
@media (max-width: 1199.98px) {
    .carousel-arrow--prev { inset-inline-start: calc(var(--sp-2) * -1); }
    .carousel-arrow--next { inset-inline-end: calc(var(--sp-2) * -1); }
}
@media (max-width: 767.98px) { .carousel-arrow { display: none; } }

/* ---- Offer banner (rose band + countdown) ------------------------------- */
.offer-band {
    background: var(--c-rose-strong); color: var(--c-on-rose);
    border-radius: var(--radius-xl); padding: clamp(var(--sp-6), 4vw, var(--sp-12));
    box-shadow: var(--shadow-md); overflow: hidden;
}
.offer-band__title { color: var(--c-on-rose); font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; margin: 0 0 var(--sp-3); }
.offer-band__text { color: var(--c-on-rose); opacity: .92; }
.offer-band__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--ratio-wide); background: var(--c-on-rose-soft); }
.offer-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.offer-band .btn-on-rose {
    background: var(--c-surface); color: var(--c-rose-ink);
    border: 1px solid var(--c-surface); border-radius: var(--radius-btn);
}
.offer-band .btn-on-rose:hover { background: transparent; color: var(--c-on-rose); border-color: var(--c-on-rose-border); box-shadow: none; }

.countdown { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.countdown__box {
    background: var(--c-on-rose-soft); border: 1px solid var(--c-on-rose-border);
    border-radius: var(--radius-md); min-width: 68px; padding: var(--sp-3) var(--sp-2);
    text-align: center; color: var(--c-on-rose);
}
.countdown__num { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__label { display: block; font-size: 11px; opacity: .85; margin-top: 2px; }
@media (max-width: 991.98px) { .countdown { justify-content: center; } .offer-band { text-align: center; } }

/* ---- Trust badges: one soft-pink strip with hairline separators --------- */
.trust-strip {
    background: var(--c-blush); border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-4);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) 0;
}
@media (min-width: 768px)  { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .trust-strip { grid-template-columns: repeat(var(--trust-cols, 4), 1fr); } }
.trust-strip__item { text-align: center; padding-inline: var(--sp-4); }
.trust-strip__item + .trust-strip__item { border-inline-start: 1px solid var(--c-border-strong); }
@media (max-width: 767.98px) { .trust-strip__item:nth-child(odd) { border-inline-start: 0; } }
.trust-strip__icon { font-size: 26px; color: var(--c-rose-strong); line-height: 1; display: block; margin-bottom: var(--sp-2); }
.trust-strip__title { font-weight: 600; font-size: 15px; }
.trust-strip__text { color: var(--c-muted); font-size: 13px; }

/* ---- Testimonials -------------------------------------------------------- */
.testimonial-card {
    background: var(--c-blush); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-6);
    height: 100%; position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
}
.testimonial-card__quote {
    position: absolute; top: var(--sp-4); inset-inline-end: var(--sp-5);
    font-size: 34px; color: var(--c-rose); opacity: .35; line-height: 1;
}
.testimonial-card__body { color: var(--c-text); margin: 0; flex: 1 1 auto; }
.testimonial-card__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    background: var(--c-rose-strong); color: var(--c-surface);
    display: grid; place-items: center; font-weight: 600; font-size: 15px;
}
.testimonial-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.testimonial-card__name { font-weight: 600; font-size: 14px; }

/* Carousel dots (testimonials + any scroll row) */
.dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.dots__dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: var(--c-rose-beige); opacity: .55; cursor: pointer;
    transition: opacity .2s ease, width .2s ease, background-color .2s ease;
}
.dots__dot.is-active { background: var(--c-rose-strong); opacity: 1; width: 26px; border-radius: var(--radius-pill); }

/* ---- Instagram ----------------------------------------------------------- */
.insta-handle {
    display: inline-flex; align-items: center; gap: 8px; margin: var(--sp-8) auto 0;
    background: var(--c-rose-strong); color: var(--c-surface);
    border: 1px solid var(--c-rose-strong); border-radius: var(--radius-pill);
    padding: 9px 22px; font-weight: 600; font-size: 14px;
    transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.insta-handle:hover { background: var(--c-rose-deep); border-color: var(--c-rose-deep); color: var(--c-surface); box-shadow: var(--shadow-rose); transform: translateY(-1px); }

/* ---- Footer -------------------------------------------------------------- */
.footer-blurb { color: var(--c-muted); max-width: 26rem; }
.footer-contact { color: var(--c-muted); }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.footer-contact i { color: var(--c-rose-ink); margin-top: 3px; }
.footer-contact a { color: var(--c-muted); }
.footer-contact a:hover { color: var(--c-rose-deep); }
.site-header__logo { max-height: 60px; width: auto; display: block; }
.site-footer .footer-social .btn-icon {
    background: var(--c-surface); box-shadow: var(--shadow-xs); color: var(--c-rose-ink);
}
.site-footer .footer-social .btn-icon:hover { background: var(--c-rose-strong); color: var(--c-surface); }
.footer-newsletter { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.footer-newsletter .form-control { flex: 1 1 160px; min-width: 0; }
.footer-newsletter .form-control { border-radius: var(--radius-pill); padding-inline: var(--sp-4); }
.footer-newsletter .btn { border-radius: var(--radius-pill); white-space: nowrap; }
.back-to-top {
    position: fixed; inset-inline-end: var(--sp-6); bottom: var(--sp-6); z-index: 1030;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-rose-deep); box-shadow: var(--shadow-md);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
    cursor: pointer; opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease, background-color .2s ease, color .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--c-rose-strong); color: var(--c-surface); }


/* ===========================================================================
   PRODUCT PAGE (design pass 3)
   =========================================================================== */

/* ---- Gallery: vertical thumb strip beside a large framed image ---------- */
.pdp-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pdp-main {
    position: relative; aspect-ratio: var(--ratio-detail); border-radius: var(--radius-lg);
    background: var(--c-blush); overflow: hidden; box-shadow: var(--shadow-sm);
}
.pdp-main__img { position: absolute; inset: 0; }
.pdp-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pdp-main__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-rose-beige); font-size: 64px; }
.pdp-main .badge-sale { top: var(--sp-4); inset-inline-start: var(--sp-4); font-size: 13px; padding: 4px 12px; }

.pdp-thumbs { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pdp-thumbs__track {
    display: flex; flex-direction: column; gap: var(--sp-2);
    overflow-y: auto; overflow-x: hidden; max-height: 340px; width: 100%;
    scroll-behavior: smooth; scrollbar-width: none;
}
.pdp-thumbs__track::-webkit-scrollbar { display: none; }
.pdp-thumb {
    flex: 0 0 auto; width: 76px; height: 76px; padding: 0; overflow: hidden;
    border: 2px solid transparent; border-radius: var(--radius-sm);
    background: var(--c-blush); cursor: pointer;
}
.pdp-thumb { position: relative; }
.pdp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pdp-thumb.is-active { border-color: var(--c-rose-strong); }
.pdp-thumbs .carousel-arrow { position: static; width: 32px; height: 32px; font-size: 14px; }
.pdp-thumbs.is-static .carousel-arrow { display: none; }
@media (max-width: 767.98px) {
    /* Horizontal strip under the image on phones. */
    .pdp-gallery { grid-template-columns: minmax(0, 1fr); }
    .pdp-thumbs { flex-direction: row; order: 2; }
    .pdp-thumbs__track { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
    .pdp-main { order: 1; }
}

/* ---- Info column --------------------------------------------------------- */
.pdp-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-rose-strong); color: var(--c-surface);
    border-radius: var(--radius-pill); padding: 4px 12px;
    font-size: 12px; font-weight: 600; margin-bottom: var(--sp-3);
}
.pdp-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; margin: 0; line-height: 1.2; }
.pdp-title-ar { font-family: var(--font-ar); font-size: 19px; color: var(--c-muted); margin: 4px 0 0; }
.pdp-rating { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; font-size: 14px; }
.pdp-rating__value { font-weight: 600; }
.pdp-rating__count { color: var(--c-muted); }
.pdp-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0; }
.pdp-price .price-now { font-size: clamp(28px, 3.4vw, 34px); font-weight: 700; }
.pdp-lede { color: var(--c-muted); margin-bottom: var(--sp-5); }

/* 4 benefit icons, hairline-separated from the rest */
.pdp-benefits {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
    border-block: 1px solid var(--c-border); padding-block: var(--sp-5); margin-block: var(--sp-5);
}
.pdp-benefit { text-align: center; }
.pdp-benefit__icon { font-size: 22px; color: var(--c-rose-strong); display: block; margin-bottom: 6px; }
.pdp-benefit__text { font-size: 12px; color: var(--c-muted); line-height: 1.4; }

/* Per-unit scent selection (shown when the qty stepper goes above 1) */
.scent-units { margin: var(--sp-4) 0; }
.scent-units__row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.scent-units__label { flex: 0 0 88px; font-size: 13px; color: var(--c-muted); }
.scent-units__row .form-select { flex: 1 1 auto; min-width: 0; }

/* Buy-X-get-Y progress bar (product page + cart) */
.promo-progress {
    background: var(--c-blush); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-4) 0;
}
.promo-progress[hidden] { display: none; }
.promo-progress__head {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 14px; font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-3);
}
.promo-progress__head i { color: var(--c-rose-strong); font-size: 16px; }
.promo-progress__track {
    height: 8px; border-radius: var(--radius-pill); background: var(--c-surface);
    overflow: hidden;
}
.promo-progress__fill {
    display: block; height: 100%; border-radius: var(--radius-pill);
    background: var(--c-rose-strong); transition: width .3s ease;
}
.promo-progress__name { font-size: 12px; color: var(--c-muted); margin-top: var(--sp-2); }
.promo-progress.is-earned .promo-progress__head { color: var(--c-success-ink); }
.promo-progress.is-earned .promo-progress__fill { background: var(--c-success); }

.pdp-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.pdp-stock--in { color: var(--c-success-ink); }
.pdp-stock--out { color: var(--c-muted); }

/* Quantity stepper */
.qty-stepper {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-btn);
    background: var(--c-surface); overflow: hidden; height: 52px;
}
.qty-stepper button {
    width: 42px; height: 100%; border: 0; background: transparent;
    color: var(--c-rose-ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.qty-stepper button:hover { background: var(--c-blush); }
.qty-stepper button:disabled { opacity: .4; cursor: default; background: transparent; }
.qty-stepper input {
    width: 44px; height: 100%; border: 0; text-align: center; background: transparent;
    color: var(--c-text); font-weight: 600; font-size: 15px; -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; margin: var(--sp-5) 0 var(--sp-3); }
.pdp-actions .btn { flex: 1 1 190px; min-height: 52px; }
.pdp-wishlist-link {
    display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0;
    color: var(--c-muted); font-size: 14px; padding: 0; cursor: pointer;
}
.pdp-wishlist-link:hover, .pdp-wishlist-link.is-active { color: var(--c-rose-deep); }

/* ---- Tabs: centred with a rose underline on the active one -------------- */
.product-tabs .nav-tabs { border-bottom: 1px solid var(--c-border); justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.product-tabs .nav-link { padding: var(--sp-3) var(--sp-4); font-size: 15px; }

/* ---- Description panel: 3 columns --------------------------------------- */
.pdp-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
@media (max-width: 991.98px) { .pdp-panels { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }
.pdp-panel__title { font-size: 18px; font-weight: 600; margin-bottom: var(--sp-4); }

/* Bundle / routine cross-sell card */
.bundle-cross {
    background: var(--c-blush); border-radius: var(--radius-md);
    padding: var(--sp-6); text-align: center; height: 100%;
}
.bundle-cross__imgs { display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bundle-cross__img {
    width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--c-surface); display: grid; place-items: center; color: var(--c-rose-beige); font-size: 26px;
}
.bundle-cross__img { position: relative; }
.bundle-cross__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bundle-cross__name { font-weight: 600; margin-bottom: var(--sp-2); }
.bundle-cross__price { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* Key ingredients list */
.ingredient-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-3); }
.ingredient-row + .ingredient-row { border-top: 1px solid var(--c-border); }
.ingredient-row__img {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    background: var(--c-blush); display: grid; place-items: center; color: var(--c-rose-strong); font-size: 20px;
}
.ingredient-row__img img { width: 100%; height: 100%; object-fit: cover; }
.ingredient-row__name { font-weight: 600; font-size: 15px; }
.ingredient-row__text { color: var(--c-muted); font-size: 13px; line-height: 1.6; }

/* How-to-use timeline */
.howto-steps { position: relative; }
.howto-step { position: relative; display: flex; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.howto-step:last-child { padding-bottom: 0; }
.howto-step::before {
    content: ""; position: absolute; top: 34px; bottom: 0;
    inset-inline-start: 16px; width: 1px; background: var(--c-border-strong);
}
.howto-step:last-child::before { display: none; }
.howto-step__num {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-rose-strong); color: var(--c-surface);
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.howto-step__text { color: var(--c-muted); font-size: 14px; line-height: 1.7; padding-top: 5px; }
.howto-step__text i { color: var(--c-rose-strong); margin-inline-end: 6px; }
/* An optional per-step image sits where the icon would, at the same footprint,
   so a mixed list of icon and image steps stays on one alignment. */
.howto-step__img {
    width: 22px; height: 22px; border-radius: var(--radius-xs);
    object-fit: cover; margin-inline-end: 6px; vertical-align: -4px;
}

/* Full lists inside the Description / Ingredients / How-to-use tabs */
.tab-ingredients, .tab-steps { margin: 0; padding-inline-start: var(--sp-5); color: var(--c-muted); font-size: 14px; line-height: 1.8; }
.tab-ingredients { list-style: disc; }
.tab-ingredients strong { color: var(--c-text); }
.tab-steps li { margin-bottom: var(--sp-2); }

/* ---- Results / before-after --------------------------------------------- */
.result-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%;
}
/* Before/after pair: two ratio boxes side by side. Each keeps its own
   aspect-ratio, so halving the width halves the height and the card's total
   footprint matches a single-image card — no layout shift between the two. */
.result-card__pair { display: flex; }
.result-card__pair .result-card__media { flex: 1 1 50%; min-width: 0; }
.result-card__pair .result-card__media + .result-card__media { border-inline-start: 1px solid var(--c-surface); }
.result-card__media { position: relative; overflow: hidden; aspect-ratio: var(--ratio-wide); background: var(--c-blush); }
.result-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.result-card__tag {
    position: absolute; bottom: var(--sp-3); inset-inline-end: var(--sp-3);
    background: var(--c-surface); color: var(--c-rose-ink); border-radius: var(--radius-pill);
    padding: 3px 10px; font-size: 11px; font-weight: 600; box-shadow: var(--shadow-xs);
}
.result-card__body { padding: var(--sp-4); }
.result-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---- Reviews section ----------------------------------------------------- */
.review-summary-card {
    background: var(--c-blush); border-radius: var(--radius-md);
    padding: var(--sp-6); text-align: center; height: 100%;
}
.review-summary-card .rating-big { font-size: 54px; }
.review-summary-card .rating-bar__track { background: var(--c-surface); }
.review-item {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.review-item__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.review-item__name { font-weight: 600; }
.review-item__date { color: var(--c-muted); font-size: 12px; }
.review-item__thumb {
    width: 56px; height: 56px; border-radius: var(--radius-xs); object-fit: cover;
    background: var(--c-blush); margin-top: var(--sp-3);
}

/* ---- Sticky product bar -------------------------------------------------- */
.pdp-sticky {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1040;
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg); padding: var(--sp-3) var(--sp-4);
}
.pdp-sticky[hidden] { display: none; }
.pdp-sticky__inner { display: flex; align-items: center; gap: var(--sp-3); }
.pdp-sticky__thumb {
    width: 48px; height: 48px; border-radius: var(--radius-xs); object-fit: cover;
    background: var(--c-blush); flex: 0 0 auto;
}
.pdp-sticky__meta { min-width: 0; flex: 1 1 auto; }
.pdp-sticky__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky__price { color: var(--c-rose-strong); font-weight: 700; font-size: 15px; }
.pdp-sticky .qty-stepper { height: 44px; }
.pdp-sticky__add { flex: 0 1 260px; }
.pdp-sticky__icon {
    width: 44px; height: 44px; flex: 0 0 auto; 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; cursor: pointer;
}
.pdp-sticky__icon:hover, .pdp-sticky__icon.is-active { background: var(--c-rose-strong); color: var(--c-surface); }
.pdp-sticky__close { font-size: 20px; line-height: 1; }
body.has-pdp-sticky { padding-bottom: 88px; }
@media (max-width: 767.98px) {
    .pdp-sticky__meta, .pdp-sticky__thumb, .pdp-sticky__close { display: none; }
    .pdp-sticky__add { flex: 1 1 auto; }
}
/* The generic back-to-top sits above the sticky bar on a product page. */
body.has-pdp-sticky .back-to-top { bottom: 104px; }

/* ---- Marketing popups ---------------------------------------------------- */
.fiori-popup-ov {
    position: fixed; inset: 0; z-index: 1080; display: none;
    align-items: center; justify-content: center;
    background: var(--scrim); padding: var(--sp-4);
}
.fiori-popup-ov.is-open { display: flex; }
.fiori-popup {
    background: var(--c-surface); color: var(--c-text); border-radius: var(--radius-md);
    max-width: 460px; width: 100%; overflow: hidden; box-shadow: var(--shadow-lg);
    position: relative; animation: fiori-pop .25s ease;
}
@keyframes fiori-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.fiori-popup__img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.fiori-popup__body { padding: var(--sp-6); text-align: center; }
.fiori-popup__body h3 { margin: 0 0 var(--sp-2); }
.fiori-popup__close {
    position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-2);
    border: 0; background: var(--c-surface); color: var(--c-text);
    width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
    cursor: pointer; box-shadow: var(--shadow-sm);
}
.fiori-popup__close:hover { background: var(--c-blush); color: var(--c-rose-deep); }
.fiori-popup__coupon {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    border: 2px dashed var(--c-rose); border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0;
    font-weight: 700; letter-spacing: 1px; color: var(--c-rose-ink);
}
.fiori-popup__news { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.fiori-popup__news .form-control { flex: 1; }

/* ---- CMS block helpers (dynamic image set inline as --bg-image) --------- */
.has-bg-image {
    background-image: linear-gradient(var(--scrim), var(--scrim)), var(--bg-image);
    background-size: cover;
    background-position: center;
}
.text-on-dark, .text-on-dark .section-title { color: var(--c-surface); }
.text-on-dark .section-title::after { background: var(--c-surface); }

/* ---- Empty state --------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--sp-16) var(--sp-6); }
.empty-state__icon { font-size: 44px; color: var(--c-rose-beige); }