/* ============ Luminous theme — CUM DERMA ============ */

body.cd-body {
    background: var(--cd-bg);
    color: var(--cd-text);
    font-family: var(--cd-body-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .cd-logo-text {
    font-family: var(--cd-heading-font);
}

.cd-container {
    max-width: var(--cd-container);
    margin-inline: auto;
    padding-inline: 20px;
    width: 100%;
}
.cd-narrow { max-width: 860px; }
.cd-rounded { border-radius: var(--cd-radius); }

/* ---------- Announcement bar ---------- */
.cd-announcement {
    background: var(--cd-primary);
    color: #fff;
    font-size: .8rem;
    letter-spacing: .08em;
    overflow: hidden;
    white-space: nowrap;
}
.cd-marquee {
    display: inline-flex;
    gap: 4rem;
    padding-block: .5rem;
    animation: cd-marquee 30s linear infinite;
    will-change: transform;
}
.cd-marquee span { padding-inline-end: 4rem; }
.cd-marquee:hover { animation-play-state: paused; }
@keyframes cd-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
[dir="rtl"] @keyframes cd-marquee { to { transform: translateX(50%); } }

/* ---------- Header ---------- */
.cd-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--cd-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: transform .35s ease, box-shadow .35s ease;
}
.cd-header.cd-header-hidden { transform: translateY(-100%); }
.cd-header.cd-header-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.07); }
.cd-logo-text {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--cd-primary);
}
.cd-logo { text-decoration: none; }
.cd-nav { gap: 2rem; }
.cd-nav-link {
    color: var(--cd-text);
    text-decoration: none;
    font-size: .92rem;
    letter-spacing: .04em;
    position: relative;
    padding-block: .4rem;
}
.cd-nav-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: var(--cd-accent);
    transition: width .3s ease;
}
.cd-nav-link:hover::after { width: 100%; }
.cd-icon-btn {
    background: none;
    border: 0;
    color: var(--cd-text);
    padding: .5rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.cd-lang-switch {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cd-primary);
    text-decoration: none;
    border: 1px solid var(--cd-primary);
    border-radius: 99px;
    padding: .2rem .7rem;
}
.cd-cart-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    background: var(--cd-accent);
    color: #fff;
    font-size: .65rem;
    min-width: 17px;
    height: 17px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    font-weight: 600;
    transition: transform .2s;
}
.cd-cart-badge.cd-bump { animation: cd-bump .45s ease; }
@keyframes cd-bump {
    30% { transform: scale(1.4); }
}
.cd-burger {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.cd-burger::before, .cd-burger::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}
.cd-burger::before { top: -6px; }
.cd-burger::after { top: 6px; }
.cd-mobile-link {
    color: var(--cd-text);
    text-decoration: none;
    font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.cd-btn-primary {
    background: var(--cd-primary);
    color: #fff;
    border: 1px solid var(--cd-primary);
    border-radius: var(--cd-radius);
    letter-spacing: .06em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s;
}
.cd-btn-primary:hover {
    background: color-mix(in srgb, var(--cd-primary) 88%, #000);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15,61,62,.25);
}
.cd-btn-outline {
    border: 1px solid var(--cd-primary);
    color: var(--cd-primary);
    border-radius: var(--cd-radius);
    letter-spacing: .06em;
    transition: all .25s ease;
}
.cd-btn-outline:hover { background: var(--cd-primary); color: #fff; }
.cd-btn-add {
    background: var(--cd-primary);
    color: #fff;
    border-radius: var(--cd-radius);
    font-size: .82rem;
    letter-spacing: .1em;
    padding-block: .6rem;
    transition: background .25s;
}
.cd-btn-add:hover { background: var(--cd-accent); color: #fff; }
.cd-btn-add.cd-added { background: var(--cd-accent); color: #fff; }

/* ---------- Hero ---------- */
.cd-hero {
    position: relative;
    padding-block: clamp(3rem, 8vw, 7rem);
    overflow: hidden;
}
.cd-hero-rays {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 75% 20%, color-mix(in srgb, var(--cd-accent) 16%, transparent), transparent 70%),
        radial-gradient(50% 60% at 15% 85%, color-mix(in srgb, var(--cd-primary) 8%, transparent), transparent 70%);
    animation: cd-rays 9s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes cd-rays {
    from { opacity: .55; }
    to { opacity: 1; }
}
.cd-hero-kicker {
    color: var(--cd-accent);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.cd-hero-title {
    font-size: clamp(2.2rem, 5.4vw, 4rem);
    line-height: 1.12;
    color: var(--cd-primary);
    font-weight: 600;
}
.cd-mask { display: block; overflow: hidden; }
.cd-mask > span { display: inline-block; }
.cd-hero-desc {
    max-width: 460px;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--cd-text) 70%, transparent);
    margin-block: 1.4rem 2rem;
}
.cd-hero-visual img { max-height: 520px; }
.cd-float { animation: cd-float 7s ease-in-out infinite; }
@keyframes cd-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ---------- Sections ---------- */
.cd-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cd-section-tinted { background: color-mix(in srgb, var(--cd-primary) 4%, var(--cd-bg)); }
.cd-section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    color: var(--cd-primary);
    text-align: center;
    margin-bottom: 2.2rem;
    font-weight: 600;
}
.cd-section-title.text-start { text-align: start; }
.cd-section-desc {
    text-align: center;
    max-width: 620px;
    margin: -1.4rem auto 2.4rem;
    color: color-mix(in srgb, var(--cd-text) 65%, transparent);
}
.cd-page-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: var(--cd-primary);
    font-weight: 600;
}
.cd-sub-title { font-size: 1.15rem; color: var(--cd-primary); font-weight: 600; }
.cd-page-head { padding-bottom: 1.5rem; }

/* ---------- Product cards ---------- */
.cd-product-card, .cd-bundle-card {
    background: #fff;
    border-radius: var(--cd-radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cd-product-card:hover, .cd-bundle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(15,61,62,.14);
}
.cd-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--cd-primary) 4%, #fff);
    overflow: hidden;
}
.cd-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .45s ease, transform .6s ease;
}
.cd-card-img-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.cd-card-media:hover .cd-card-img-hover { opacity: 1; }
.cd-card-media:hover .cd-card-img:not(.cd-card-img-hover) { transform: scale(1.04); }
.cd-badge-oos {
    position: absolute;
    top: .8rem;
    inset-inline-start: .8rem;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: .7rem;
    padding: .25rem .6rem;
    border-radius: 99px;
}
.cd-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-grow: 1;
}
.cd-card-title {
    color: var(--cd-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .98rem;
}
.cd-card-title:hover { color: var(--cd-primary); }
.cd-card-tagline {
    font-size: .8rem;
    color: color-mix(in srgb, var(--cd-text) 55%, transparent);
}
.cd-card-price { font-weight: 600; margin-top: auto; padding-block: .3rem; }
.cd-price-was {
    color: color-mix(in srgb, var(--cd-text) 45%, transparent);
    font-weight: 400;
    margin-inline-end: .5rem;
    font-size: .9em;
}
.cd-price-now { color: var(--cd-primary); font-weight: 700; }

/* ---------- Bundles ---------- */
.cd-bundle-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    gap: 2px;
}
.cd-bundle-collage img { width: 100%; height: 100%; object-fit: cover; }
.cd-bundle-collage img:first-child { grid-row: span 2; }
.cd-bundle-pricing { margin-top: auto; padding-top: .3rem; }
.cd-save-strip {
    background: color-mix(in srgb, var(--cd-accent) 16%, #fff);
    color: color-mix(in srgb, var(--cd-accent) 60%, #000);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 6px;
    padding: .3rem .6rem;
    text-align: center;
    margin-block: .4rem;
}
.cd-save-strip-lg { font-size: .95rem; padding: .6rem; }
.cd-was-now-save .cd-wns-row {
    display: flex;
    justify-content: space-between;
    padding-block: .35rem;
    border-bottom: 1px dashed rgba(0,0,0,.12);
    letter-spacing: .08em;
    font-size: .9rem;
}
.cd-wns-now { font-size: 1.25rem !important; color: var(--cd-primary); }
.cd-bundle-hero-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
}
.cd-bundle-hero-collage img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--cd-radius);
}
.cd-includes-list { list-style: none; padding: 0; margin: 0; }
.cd-includes-list li {
    display: flex;
    justify-content: space-between;
    padding-block: .55rem;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.cd-includes-list a { color: var(--cd-text); text-decoration: none; }
.cd-includes-list a:hover { color: var(--cd-primary); }
.cd-includes-price { color: color-mix(in srgb, var(--cd-text) 55%, transparent); }
.cd-routine {
    background: #fff;
    border-radius: var(--cd-radius);
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.cd-routine-title { font-weight: 700; color: var(--cd-primary); margin-bottom: .4rem; }
.cd-routine-steps { margin: 0; padding-inline-start: 1.2rem; }

/* ---------- Collage / trust ---------- */
.cd-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.cd-collage-main { grid-column: 2 / 9; border-radius: var(--cd-radius); width: 100%; }
.cd-collage-small { border-radius: var(--cd-radius); width: 100%; }
.cd-collage-small-1 { grid-column: 9 / 12; align-self: start; margin-top: 8%; }
.cd-collage-small-2 { grid-column: 9 / 11; align-self: end; }
.cd-collage-small-3 { grid-column: 1 / 2; align-self: center; }
.cd-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    align-items: center;
}
.cd-trust-badge {
    color: var(--cd-text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .1em;
    position: relative;
    padding-block: .5rem;
}
.cd-trust-badge img { max-height: 46px; filter: grayscale(1); opacity: .75; transition: all .3s; }
.cd-trust-badge:hover img { filter: none; opacity: 1; }
.cd-trust-badge::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    height: 1.5px;
    width: 0;
    background: var(--cd-accent);
    transition: width .4s ease;
}
.cd-trust-badge:hover::after { width: 100%; }

/* ---------- Product page ---------- */
.cd-breadcrumb {
    font-size: .82rem;
    margin-bottom: 1.5rem;
    color: color-mix(in srgb, var(--cd-text) 55%, transparent);
}
.cd-breadcrumb a { color: inherit; text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--cd-primary); }
.cd-product-gallery {
    border-radius: var(--cd-radius);
    overflow: hidden;
    background: #fff;
}
.cd-gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cd-product-title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--cd-primary); font-weight: 600; }
.cd-product-tagline { color: color-mix(in srgb, var(--cd-text) 60%, transparent); font-size: 1.05rem; }
.cd-product-size {
    display: inline-block;
    font-size: .8rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 99px;
    padding: .15rem .7rem;
}
.cd-product-price .cd-price-now { font-size: 1.5rem; }
.cd-accordion .accordion-button {
    background: transparent;
    font-weight: 600;
    color: var(--cd-primary);
    box-shadow: none;
}
.cd-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

/* ---------- Cart / drawers ---------- */
.cd-cart-drawer { max-width: 420px; }
.cd-cart-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: calc(var(--cd-radius) * .6);
    background: #fff;
}
.cd-cart-name { font-weight: 600; font-size: .92rem; }
.cd-cart-price { font-size: .85rem; color: color-mix(in srgb, var(--cd-text) 60%, transparent); }
.cd-qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0,0,0,.2);
    background: #fff;
    border-radius: 6px;
    line-height: 1;
}
.cd-remove-btn { background: none; border: 0; color: #b33; }
.cd-order-summary {
    background: #fff;
    border-radius: var(--cd-radius);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.cd-payment-option {
    background: #fff;
    border: 1px solid var(--cd-primary);
    border-radius: var(--cd-radius);
    padding: .9rem 1.2rem;
}
.cd-thanks-check {
    width: 72px;
    height: 72px;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--cd-primary);
    color: #fff;
    font-size: 2rem;
    display: grid;
    place-items: center;
    animation: cd-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cd-pop { from { transform: scale(0); } }

/* ---------- Toast ---------- */
.cd-toast {
    position: fixed;
    top: -80px;
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: 90vw;
    background: var(--cd-primary);
    color: #fff;
    padding: .7rem 1.6rem;
    border-radius: 99px;
    z-index: 2000;
    letter-spacing: .1em;
    font-size: .82rem;
    transition: top .45s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.cd-toast.cd-show { top: 18px; }

/* ---------- Footer ---------- */
.cd-footer {
    background: var(--cd-primary);
    color: rgba(255,255,255,.85);
    margin-top: 3rem;
}
.cd-footer .cd-logo-text { color: #fff; }
.cd-footer-logo { filter: brightness(0) invert(1); }
.cd-footer-head {
    color: var(--cd-accent);
    letter-spacing: .14em;
    font-size: .8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.cd-footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cd-footer-links a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    position: relative;
}
.cd-footer-links a:hover { color: #fff; }
.cd-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: .8rem;
    color: rgba(255,255,255,.6);
}
.cd-social {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: .7rem;
    letter-spacing: .05em;
    transition: all .25s;
}
.cd-social:hover { background: var(--cd-accent); border-color: var(--cd-accent); color: #fff; }
.cd-footer-tag { font-size: .9rem; color: rgba(255,255,255,.7); }

/* ---------- WhatsApp FAB ---------- */
.cd-whatsapp-fab {
    position: fixed;
    bottom: 22px;
    inset-inline-end: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 1500;
    box-shadow: 0 8px 24px rgba(37,211,102,.4);
    transition: transform .25s;
}
.cd-whatsapp-fab:hover { transform: scale(1.08); color: #fff; }

/* ---------- Reveal animations (progressive enhancement) ---------- */
[data-reveal], [data-reveal-scale], .cd-stagger > * { opacity: 1; }
.cd-anim-ready [data-reveal] { opacity: 0; transform: translateY(24px); }
.cd-anim-ready [data-reveal-scale] { opacity: 0; transform: scale(.96); }
.cd-anim-ready [data-hero] { opacity: 0; transform: translateY(26px); }
.cd-anim-ready .cd-mask > span { transform: translateY(110%); }
.cd-anim-ready .cd-mask > span[data-hero] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .cd-hero { text-align: center; }
    .cd-hero-desc { margin-inline: auto; }
    .cd-hero .d-flex { justify-content: center; }
    .cd-float { animation: none; }
    .cd-collage { grid-template-columns: repeat(6, 1fr); }
    .cd-collage-main { grid-column: 1 / 5; }
    .cd-collage-small-1 { grid-column: 5 / 7; }
    .cd-collage-small-2 { grid-column: 5 / 7; }
    .cd-collage-small-3 { display: none; }
    .cd-sticky-add {
        position: sticky;
        bottom: 12px;
        z-index: 100;
        box-shadow: 0 10px 26px rgba(15,61,62,.35);
    }
}

.cd-rich-text ul { padding-inline-start: 1.2rem; }
.cd-empty { color: color-mix(in srgb, var(--cd-text) 55%, transparent); }

/* ============ Motion upgrade: preloader, flying elements, effects ============ */

/* ---------- Preloader ---------- */
.cd-preloader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: var(--cd-bg);
    display: grid;
    place-content: center;
    gap: 1.2rem;
    transition: opacity .5s ease, visibility .5s;
}
.cd-preloader.cd-done { opacity: 0; visibility: hidden; }
.cd-preloader-logo {
    font-family: var(--cd-heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--cd-primary);
    animation: cd-preloader-pulse 1.2s ease-in-out infinite;
}
@keyframes cd-preloader-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
.cd-preloader-bar {
    width: 160px;
    height: 2px;
    background: rgba(0,0,0,.08);
    border-radius: 99px;
    overflow: hidden;
    margin-inline: auto;
}
.cd-preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    background: var(--cd-accent);
    border-radius: 99px;
    animation: cd-preloader-slide .9s ease-in-out infinite;
}
@keyframes cd-preloader-slide {
    from { transform: translateX(-160px); }
    to { transform: translateX(160px); }
}
[dir="rtl"] .cd-preloader-bar span {
    animation-name: cd-preloader-slide-rtl;
}
@keyframes cd-preloader-slide-rtl {
    from { transform: translateX(160px); }
    to { transform: translateX(-160px); }
}
/* No-JS safety: preloader melts away on its own even if JS never runs */
.cd-preloader { animation: cd-preloader-auto 2.2s forwards; }
@keyframes cd-preloader-auto {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---------- Hero flying decor ---------- */
.cd-hero-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.cd-hero-decor > span { position: absolute; will-change: transform; }

.cd-blob {
    border-radius: 50%;
    filter: blur(46px);
    opacity: .5;
}
.cd-blob-1 {
    width: 340px; height: 340px;
    background: color-mix(in srgb, var(--cd-accent) 32%, transparent);
    top: -60px; inset-inline-end: 8%;
    animation: cd-drift-a 16s ease-in-out infinite alternate;
}
.cd-blob-2 {
    width: 260px; height: 260px;
    background: color-mix(in srgb, var(--cd-primary) 18%, transparent);
    bottom: -50px; inset-inline-start: 4%;
    animation: cd-drift-b 20s ease-in-out infinite alternate;
}
@keyframes cd-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-50px, 40px) scale(1.15); }
}
@keyframes cd-drift-b {
    from { transform: translate(0, 0) scale(1.1); }
    to { transform: translate(60px, -35px) scale(.95); }
}

.cd-ring {
    border: 1.5px solid color-mix(in srgb, var(--cd-accent) 55%, transparent);
    border-radius: 50%;
}
.cd-ring-1 {
    width: 110px; height: 110px;
    top: 16%; inset-inline-start: 12%;
    animation: cd-float-slow 9s ease-in-out infinite alternate, cd-spin 30s linear infinite;
    border-style: dashed;
}
.cd-ring-2 {
    width: 54px; height: 54px;
    bottom: 20%; inset-inline-end: 16%;
    animation: cd-float-slow 7s ease-in-out infinite alternate-reverse;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }

.cd-leaf {
    color: var(--cd-accent);
    font-size: 1.1rem;
    opacity: .8;
    animation: cd-sparkle 3.4s ease-in-out infinite;
}
.cd-leaf-1 { top: 24%; inset-inline-end: 30%; }
.cd-leaf-2 { top: 62%; inset-inline-start: 22%; font-size: .8rem; animation-delay: 1.1s; }
.cd-leaf-3 { top: 12%; inset-inline-start: 42%; font-size: .7rem; animation-delay: 2.2s; }
@keyframes cd-sparkle {
    0%, 100% { opacity: .15; transform: scale(.7) rotate(0deg); }
    50% { opacity: .9; transform: scale(1.15) rotate(35deg); }
}

.cd-drop {
    width: 14px; height: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cd-primary) 35%, transparent), color-mix(in srgb, var(--cd-accent) 45%, transparent));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: .5;
}
.cd-drop-1 { top: 40%; inset-inline-end: 6%; animation: cd-float-slow 8s ease-in-out infinite alternate; }
.cd-drop-2 { top: 70%; inset-inline-start: 40%; width: 9px; height: 13px; animation: cd-float-slow 6s ease-in-out infinite alternate-reverse; }

@keyframes cd-float-slow {
    from { transform: translateY(0); }
    to { transform: translateY(-26px); }
}

/* ---------- Section ambient sparkles (injected by JS) ---------- */
.cd-ambient {
    position: absolute;
    pointer-events: none;
    color: var(--cd-accent);
    animation: cd-sparkle 4s ease-in-out infinite;
    z-index: 1;
}
.cd-section { position: relative; }

/* ---------- Fly-to-cart ---------- */
.cd-fly-img {
    position: fixed;
    z-index: 6000;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(15,61,62,.35);
}

/* ---------- Magnetic buttons ---------- */
.cd-btn-primary, .cd-btn-outline, .cd-btn-add { will-change: transform; }

/* ---------- Word reveal for section titles ---------- */
.cd-anim-ready .cd-section-title .cd-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px) rotate(2deg);
}

/* ---------- Shine sweep on primary buttons ---------- */
.cd-btn-primary { position: relative; overflow: hidden; }
.cd-btn-primary::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: inset-inline-start .6s ease;
}
.cd-btn-primary:hover::after { inset-inline-start: 130%; }

/* ---------- Card image shine on hover ---------- */
.cd-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.cd-product-card:hover .cd-card-media::after,
.cd-bundle-card:hover .cd-card-media::after { transform: translateX(120%); }

/* ---------- Reduced motion & mobile ---------- */
@media (prefers-reduced-motion: reduce) {
    .cd-preloader { display: none; }
    .cd-hero-decor { display: none; }
    .cd-ambient { display: none; }
}
@media (max-width: 767px) {
    .cd-blob { filter: blur(30px); }
    .cd-blob-1 { width: 200px; height: 200px; }
    .cd-blob-2 { width: 150px; height: 150px; }
    .cd-ring-1 { width: 70px; height: 70px; }
}

/* ---------- Client-notes additions ---------- */
.cd-card-size {
    font-size: .72rem;
    color: color-mix(in srgb, var(--cd-text) 55%, transparent);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 99px;
    padding: .05rem .55rem;
    width: fit-content;
}
.cd-bundle-marketing {
    color: var(--cd-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cd-bundle-items-list {
    font-size: .78rem;
    color: color-mix(in srgb, var(--cd-text) 65%, transparent);
}
.cd-wns-mini { font-size: .85rem; display: flex; gap: .35rem; align-items: baseline; }
.cd-wns-mini span:first-child {
    font-size: .68rem;
    letter-spacing: .1em;
    color: color-mix(in srgb, var(--cd-text) 50%, transparent);
}
.cd-qty-picker {
    border: 1px solid rgba(0,0,0,.18);
    border-radius: var(--cd-radius);
    background: #fff;
    padding-inline: .3rem;
    gap: .1rem;
}
.cd-qty-input {
    width: 44px;
    border: 0;
    text-align: center;
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
}
.cd-qty-input::-webkit-outer-spin-button, .cd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
a.cd-announcement { color: #fff; }
a.cd-announcement:hover { color: #fff; }

/* ============ 13/9 client notes: hero lineup, about sections, collage & footer polish ============ */

/* ---------- Hero beauty-shot lineup ---------- */
.cd-hero-lineup {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(.4rem, 1.6vw, 1.2rem);
    padding-bottom: 34px;
    min-height: 380px;
}
.cd-lineup-item {
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .35s ease;
    animation: cd-float 7s ease-in-out infinite;
}
.cd-lineup-item img {
    width: clamp(64px, 7.5vw, 110px);
    aspect-ratio: 1 / 2.4;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(60, 20, 22, .28));
    -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(0,0,0,.14));
}
.cd-lineup-item:hover { transform: translateY(-10px) scale(1.04); z-index: 2; }
/* Staggered heights + offset float phases, tallest in the middle */
.cd-lineup-1 { margin-bottom: 6px;  animation-delay: 0s; }
.cd-lineup-2 { margin-bottom: 34px; animation-delay: -1.4s; }
.cd-lineup-3 { margin-bottom: 58px; animation-delay: -2.8s; }
.cd-lineup-3 img { width: clamp(76px, 8.6vw, 128px); }
.cd-lineup-4 { margin-bottom: 30px; animation-delay: -4.2s; }
.cd-lineup-5 { margin-bottom: 2px;  animation-delay: -5.6s; }
.cd-lineup-surface {
    position: absolute;
    bottom: 18px;
    inset-inline: 6%;
    height: 26px;
    background: radial-gradient(50% 100% at 50% 50%, rgba(60, 20, 22, .18), transparent 75%);
    filter: blur(4px);
    z-index: 0;
}
@media (max-width: 767px) {
    .cd-hero-lineup { min-height: 250px; padding-bottom: 22px; }
    .cd-lineup-item { animation: none; }
}

/* ---------- About sections ---------- */
.cd-badge-pill {
    display: inline-block;
    background: color-mix(in srgb, var(--cd-primary) 8%, transparent);
    color: var(--cd-primary);
    border: 1px solid color-mix(in srgb, var(--cd-primary) 25%, transparent);
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .3rem 1rem;
}
.cd-about-hero { padding-bottom: 2rem; }
.cd-about-desc {
    font-size: 1.08rem;
    color: color-mix(in srgb, var(--cd-text) 75%, transparent);
    margin-block: 1.2rem 1.6rem;
}
.cd-about-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}
.cd-highlight-chip {
    background: #fff;
    border-radius: 99px;
    padding: .45rem 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cd-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cd-about-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cd-radius);
    box-shadow: 0 16px 40px rgba(60, 20, 22, .16);
}
.cd-about-p {
    font-size: 1.02rem;
    line-height: 1.9;
    color: color-mix(in srgb, var(--cd-text) 80%, transparent);
}
.cd-value-card {
    background: #fff;
    border-radius: var(--cd-radius);
    padding: 2rem 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform .3s ease, box-shadow .3s ease;
    text-align: start;
}
.cd-value-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(60, 20, 22, .12); }
.cd-value-num {
    font-family: var(--cd-heading-font);
    color: var(--cd-accent);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .6rem;
}
.cd-value-title { font-size: 1.1rem; color: var(--cd-primary); font-weight: 700; }
.cd-value-text { color: color-mix(in srgb, var(--cd-text) 70%, transparent); font-size: .95rem; margin: 0; }

/* ---------- Collage distribution fix ---------- */
.cd-collage { align-items: center; }
.cd-collage-main {
    grid-column: 1 / 8;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.cd-collage-small { aspect-ratio: 1; object-fit: cover; }
.cd-collage-small-1 { grid-column: 8 / 11; align-self: end; margin-top: 0; }
.cd-collage-small-2 { grid-column: 8 / 13; grid-row: 1; align-self: start; aspect-ratio: 16 / 11; margin-top: 6%; }
.cd-collage-small-3 { display: none; }
@media (max-width: 767px) {
    .cd-collage { grid-template-columns: repeat(6, 1fr); gap: .6rem; }
    .cd-collage-main { grid-column: 1 / 7; }
    .cd-collage-small-1 { grid-column: 1 / 4; }
    .cd-collage-small-2 { grid-column: 4 / 7; grid-row: auto; margin-top: 0; aspect-ratio: 1; }
}

/* ---------- Footer polish ---------- */
.cd-footer { margin-top: 4rem; }
.cd-footer .cd-container { padding-block: 3.5rem 0; }
.cd-footer-links a { font-size: .92rem; transition: padding-inline-start .25s ease, color .25s; }
.cd-footer-links a:hover { padding-inline-start: 6px; color: var(--cd-accent); }
.cd-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    padding-bottom: 1.6rem;
}
.cd-footer-logo { filter: brightness(0) invert(1); opacity: .95; }

/* Single-bundle spotlight on home */
.cd-bundle-spotlight { max-width: 560px; margin-inline: auto; }

/* ---------- Reviews ---------- */
.cd-stars { color: #cbbfae; letter-spacing: 2px; }
.cd-star-on { color: #E0A426; }
.cd-review-card {
    background: #fff;
    border-radius: var(--cd-radius);
    padding: 1.2rem 1.3rem;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cd-review-comment { margin-block: .6rem; font-size: .95rem; }
.cd-review-img {
    width: 84px; height: 84px;
    object-fit: cover;
    border-radius: calc(var(--cd-radius) * .6);
}
.cd-review-date { font-size: .75rem; color: color-mix(in srgb, var(--cd-text) 45%, transparent); margin-top: .5rem; }
.cd-review-form {
    background: #fff;
    border-radius: var(--cd-radius);
    padding: 1.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.cd-review-offer {
    background: color-mix(in srgb, var(--cd-accent) 12%, #fff);
    border-radius: calc(var(--cd-radius) * .7);
    padding: .6rem .9rem;
    font-size: .9rem;
    color: color-mix(in srgb, var(--cd-accent) 70%, #000);
}
/* Star rating input: reversed radio row so hover/checked highlights leftwards */
.cd-star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.cd-star-input input { position: absolute; opacity: 0; width: 0; }
.cd-star-input label { font-size: 1.7rem; color: #cbbfae; cursor: pointer; transition: color .15s, transform .15s; }
.cd-star-input label:hover { transform: scale(1.15); }
.cd-star-input input:checked ~ label,
.cd-star-input label:hover,
.cd-star-input label:hover ~ label { color: #E0A426; }

/* ---- Egyptian Drug Authority registration badge ---- */
.cd-eda-badge {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: .35rem 0 1rem;
    padding: .55rem .95rem;
    border: 1px solid color-mix(in srgb, var(--cd-primary) 22%, transparent);
    background: color-mix(in srgb, var(--cd-primary) 6%, #fff);
    border-radius: 999px;
    color: var(--cd-primary);
}
.cd-eda-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.cd-eda-text { display: flex; flex-direction: column; line-height: 1.3; }
.cd-eda-text strong { font-size: .84rem; font-weight: 700; }
.cd-eda-text span { font-size: .78rem; opacity: .85; letter-spacing: .02em; }
@media (max-width: 480px) {
    .cd-eda-badge { width: 100%; justify-content: center; }
}

/* ============ Home banner styles 2 & 3 (selectable in Home Builder) ============ */

/* ---------- Style 2: gallery shelf — one measured row over a hairline ---------- */
.cd-hero-shelf {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(.9rem, 3.5vw, 2.8rem);
    padding-top: 1.5rem;
}
.cd-shelf-item { position: relative; text-decoration: none; }
.cd-shelf-item img {
    width: clamp(58px, 7.5vw, 110px);
    filter: drop-shadow(0 22px 18px rgba(60, 20, 22, .28));
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .55s;
}
.cd-shelf-item:hover img {
    transform: translateY(-12px);
    filter: drop-shadow(0 34px 24px rgba(60, 20, 22, .34));
}
.cd-shelf-name {
    position: absolute;
    inset-inline: 50%;
    bottom: -1.8rem;
    transform: translateX(50%);
    width: max-content;
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--cd-primary);
    opacity: 0;
    transition: opacity .35s;
}
[dir="ltr"] .cd-shelf-name { transform: translateX(-50%); }
.cd-shelf-item:hover .cd-shelf-name { opacity: 1; }
.cd-shelf-line {
    display: block;
    height: 1px;
    max-width: 82%;
    margin: 1.6rem auto 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cd-primary) 45%, transparent), transparent);
}

/* ---------- Style 3: fanned arc — tilted cards like a hand of cards ---------- */
.cd-hero-arc {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-block: 1.6rem 1.2rem;
}
.cd-arc-item {
    display: grid;
    place-items: center;
    background: var(--cd-surface);
    border-radius: calc(var(--cd-radius) + 6px);
    padding: 1rem .8rem;
    width: clamp(88px, 10.5vw, 148px);
    aspect-ratio: 3 / 4;
    box-shadow: 0 14px 30px rgba(60, 20, 22, .16);
    margin-inline: -12px;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
    z-index: 1;
}
.cd-arc-item img { max-width: 100%; max-height: 100%; }
.cd-arc-item:nth-child(1) { transform: rotate(13deg) translateY(26px); }
.cd-arc-item:nth-child(2) { transform: rotate(6.5deg) translateY(8px); }
.cd-arc-item:nth-child(3) { transform: rotate(0) translateY(0); }
.cd-arc-item:nth-child(4) { transform: rotate(-6.5deg) translateY(8px); }
.cd-arc-item:nth-child(5) { transform: rotate(-13deg) translateY(26px); }
.cd-arc-item:hover {
    transform: rotate(0) translateY(-12px) scale(1.06);
    z-index: 3;
    box-shadow: 0 24px 46px rgba(60, 20, 22, .26);
}

@media (max-width: 640px) {
    .cd-hero-shelf { gap: .7rem; }
    .cd-arc-item { margin-inline: -18px; }
    .cd-arc-item:nth-child(1), .cd-arc-item:nth-child(5) { display: none; }
    .cd-arc-item:nth-child(2) { transform: rotate(7deg) translateY(10px); }
    .cd-arc-item:nth-child(4) { transform: rotate(-7deg) translateY(10px); }
}

/* ============ Home banner styles 4-6: spotlight, statement, poster ============ */

/* ---------- Style 4: single product spotlight with halo ---------- */
.cd-hero-spot { position: relative; display: inline-block; padding: 2rem 2.5rem 0; }
.cd-spot-halo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(380px, 78%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--cd-primary) 14%, transparent), transparent 68%);
    z-index: 0;
}
.cd-spot-halo::after {
    content: "";
    position: absolute;
    inset: -8%;
    border: 1px dashed color-mix(in srgb, var(--cd-primary) 35%, transparent);
    border-radius: 50%;
    animation: cd-spot-spin 40s linear infinite;
}
@keyframes cd-spot-spin { to { transform: rotate(360deg); } }
.cd-spot-link { position: relative; z-index: 1; display: inline-block; }
.cd-spot-img {
    max-height: 440px;
    max-width: 100%;
    filter: drop-shadow(0 34px 30px rgba(60, 20, 22, .3));
}
.cd-spot-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.1rem;
    background: var(--cd-surface);
    border-radius: 99px;
    padding: .5rem 1.3rem;
    box-shadow: 0 10px 26px rgba(60, 20, 22, .14);
}
.cd-spot-name { font-weight: 700; color: var(--cd-primary); }
.cd-spot-price b { color: var(--cd-primary); }
.cd-spot-price .cd-price-was { margin-inline-end: .4rem; }

/* ---------- Style 5: statement — big centered typography, no products ---------- */
.cd-hero-style-statement { text-align: center; padding-block: clamp(4rem, 9vw, 7.5rem); }
.cd-hero-style-statement .cd-hero-title { font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.15; }
.cd-hero-style-statement .cd-hero-desc { max-width: 56ch; }
.cd-hero-style-statement .cd-hero-kicker {
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--cd-primary) 30%, transparent);
    border-radius: 99px;
    padding: .3rem 1.1rem;
}

/* ---------- Style 6: poster — full-bleed photo with overlay text ---------- */
.cd-hero-style-poster {
    position: relative;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: clamp(440px, 62vh, 640px);
    padding-block: clamp(3rem, 7vw, 5rem);
    color: #fff;
}
.cd-poster-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--cd-primary), color-mix(in srgb, var(--cd-primary) 55%, #000)); }
.cd-poster-bg img { width: 100%; height: 100%; object-fit: cover; }
.cd-poster-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 8, 9, .25), rgba(20, 8, 9, .55));
}
.cd-hero-style-poster .cd-container { position: relative; z-index: 1; }
.cd-hero-style-poster .cd-hero-kicker { color: #F1DDBF; letter-spacing: .22em; }
.cd-hero-style-poster .cd-hero-title { color: #fff; text-shadow: 0 3px 22px rgba(0, 0, 0, .35); }
.cd-hero-style-poster .cd-hero-desc { color: rgba(255, 255, 255, .88); }
.cd-hero-style-poster .cd-btn-outline { border-color: rgba(255, 255, 255, .75); color: #fff; }
.cd-hero-style-poster .cd-btn-outline:hover { background: #fff; border-color: #fff; color: var(--cd-primary); }

@media (max-width: 640px) {
    .cd-spot-img { max-height: 320px; }
    .cd-hero-style-poster { min-height: 380px; }
}

/* ---------- EDA registration badge in the footer ---------- */
.cd-footer-eda {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    font-size: .85rem;
}
.cd-footer-eda .cd-eda-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--cd-accent); }
.cd-footer-eda strong { display: block; font-size: .84rem; }
.cd-footer-eda > span > span { font-size: .76rem; opacity: .8; letter-spacing: .03em; }

/* Footer EDA badge sits in the contact column, aligned with the links */
.cd-footer .cd-footer-eda { text-align: start; }