/* ==========================================================================
   Bellato KSA — Design System (base.css)
   Shared foundation for all pages (AR + EN). Uses CSS logical properties so
   the same rules mirror automatically for RTL. Language-specific tweaks live
   in style-ar.css / style-en.css.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Design Tokens                                                           */
/* -------------------------------------------------------------------------- */
:root {
  /* Brand colors (extracted from logo + PDF) */
  --navy:          #0D1F5D;
  --navy-700:      #16305B;
  --pink:          #ED4B74;   /* primary accent */
  --pink-600:      #e0355f;   /* hover */
  --pink-700:      #c72851;
  --pink-200:      #FFD3DE;
  --pink-100:      #FFE5EB;
  --pink-050:      #FFF5F6;   /* hero background */
  --pink-footer:   #FEEAEC;

  /* Category panel tints */
  --cream:         #FBF4E4;
  --panel-gray:    #ECEEF2;
  --blue-050:      #E7F3FB;

  /* Category accents */
  --c-stick:       #F5A623;
  --c-cup:         #ED4B74;
  --c-sandwich:    #0D1F5D;
  --c-multipack:   #2FA5E0;
  --c-tube:        #ED4B74;

  /* Neutrals / text */
  --ink:           #1c2333;
  --ink-strong:    #131a2b;
  --muted:         #7c8397;
  --line:          #eceef3;
  --white:         #ffffff;

  /* Typography (font family is set per-language in style-xx.css) */
  --font:          system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1:         clamp(2.6rem, 6vw, 5rem);
  --fs-h2:         clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3:         clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-lead:       clamp(1rem, 1.3vw, 1.12rem);
  --fs-body:       1rem;
  --fs-sm:         .875rem;

  /* Spacing scale */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4.5rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* Radii */
  --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(13,31,93,.06);
  --shadow:    0 12px 30px rgba(13,31,93,.10);
  --shadow-lg: 0 26px 60px rgba(13,31,93,.16);
  --shadow-pink: 0 12px 26px rgba(237,75,116,.34);

  /* Motion */
  --t: .38s cubic-bezier(.22,.61,.36,1);
  --t-fast: .25s ease;

  --container: 1200px;
}

/* -------------------------------------------------------------------------- */
/* 2. Reset & Base                                                            */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; color: var(--ink-strong); }

:focus-visible { outline: 3px solid rgba(237,75,116,.55); outline-offset: 3px; border-radius: 6px; }

::selection { background: var(--pink); color: #fff; }

/* -------------------------------------------------------------------------- */
/* 3. Layout helpers                                                          */
/* -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.section { padding-block: var(--section-y); }
.text-pink { color: var(--pink); }
.text-navy { color: var(--navy); }

/* -------------------------------------------------------------------------- */
/* 4. Buttons                                                                 */
/* -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--pink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .2px;
  box-shadow: var(--shadow-pink);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  will-change: transform;
}
.btn i { transition: transform var(--t-fast); }
.btn:hover { background: var(--pink-600); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(237,75,116,.42); }
.btn:hover i.bi-arrow-right { transform: translateX(4px); }
.btn:active { transform: translateY(-1px); }

.btn--navy { --btn-bg: var(--navy); --btn-fg:#fff; box-shadow: 0 12px 26px rgba(13,31,93,.28); }
.btn--navy:hover { background: var(--navy-700); box-shadow: 0 18px 34px rgba(13,31,93,.34); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--pink);
  border: 2px solid var(--pink); box-shadow: none;
}
.btn--ghost:hover { background: var(--pink); --btn-fg:#fff; }

/* directional arrow flips automatically in RTL */
[dir="rtl"] .btn i.bi-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .btn:hover i.bi-arrow-right { transform: scaleX(-1) translateX(4px); }

/* -------------------------------------------------------------------------- */
/* 5. Eyebrow pill + Section heading                                          */
/* -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  padding: .4rem 1.1rem;
  background: var(--pink-100); color: var(--pink-700);
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-sm);
}
.section-head { margin-bottom: var(--sp-6); }
.section-head.center { text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: .6rem; }

/* -------------------------------------------------------------------------- */
/* 6. Cards (generic elevated surface)                                        */
/* -------------------------------------------------------------------------- */
.card-soft {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.card-soft:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

/* -------------------------------------------------------------------------- */
/* 7. Header / Navbar                                                         */
/* -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,245,246,.85);
  backdrop-filter: blur(12px);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.scrolled { background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
}
.nav__logo img { height: 58px; width: auto; }

.nav__menu {
  display: flex; align-items: center; gap: .3rem;
  background: #fff; padding: .4rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.nav__menu > a, .nav__menu .nav__toggle {
  padding: .6rem 1.15rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; color: var(--ink);
  position: relative; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__menu > a:hover, .nav__menu .nav__toggle:hover { color: var(--pink); }
.nav__menu > a.active, .nav__menu .nav__toggle.active { background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }

.nav__actions { display: flex; align-items: center; gap: .35rem; }
.icon-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--navy); font-size: 1.15rem;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: #fff; color: var(--pink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.icon-btn .badge-count {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--pink); color: #fff;
  font-size: .68rem; font-weight: 700;
  border-radius: 999px; display: grid; place-items: center;
  border: 2px solid var(--pink-050);
}
/* equalise the optical size of the three glyphs (person is smaller, heart wider) */
.icon-btn .bi-person { font-size: 1.44rem; }
.icon-btn .bi-heart  { font-size: 1.08rem; }
/* Saudi Riyal symbol — masked SVG that inherits the surrounding text colour/size */
.riyal {
  display: inline-block; width: .92em; height: .92em;
  vertical-align: -.11em; margin-inline-start: .12em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.lang-switch {
  font-weight: 700; font-size: .9rem; color: var(--navy);
  padding: .45rem .8rem; border-radius: var(--r-pill);
  border: 1.5px solid rgba(13,31,93,.15);
  transition: all var(--t-fast);
}
.lang-switch:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.hamburger { display: none; width: 46px; height: 46px; border-radius: 12px; color: var(--navy); font-size: 1.5rem; }

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset-block: 0; inset-inline-end: 0;
  width: min(84vw, 340px);
  background: #fff; z-index: 2100;
  padding: 1.5rem 1.25rem;
  transform: translateX(110%);
  transition: transform var(--t);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
[dir="rtl"] .mobile-menu { transform: translateX(-110%); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.mobile-menu a { display: block; padding: .85rem .6rem; font-weight: 600; border-radius: 12px; border-bottom: 1px solid var(--line); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--pink); background: var(--pink-050); }
.backdrop {
  position: fixed; inset: 0; background: rgba(13,31,93,.45);
  backdrop-filter: blur(2px); z-index: 2000; opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.backdrop.show { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------------- */
/* 8. Hero slider                                                             */
/* -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--pink-050); overflow: hidden; }

/* -- Single-slide hero composition (mirrors the PDF hero artwork) ---------- */
.hero-stage {
  position: relative;
  min-height: var(--hero-h);
  padding-block: clamp(1rem, 3vw, 2rem);
}

/* giant faded ICE / CREAM watermark, split to both edges */
.hero-wm {
  position: absolute; z-index: 1;
  font-weight: 800; line-height: .8; letter-spacing: -5px;
  font-size: clamp(6rem, 15vw, 12.5rem);
  color: rgba(237,75,116,.15); pointer-events: none; user-select: none;
}
.hero-wm--ice   { inset-inline-start: 0; top: 22%; }
.hero-wm--cream { inset-inline-end: 0;   top: 32%; }

/* centered ice-cream cone (the hero centerpiece) */
.hero-cone {
  position: absolute; left: 50%; bottom: 0; z-index: 3;
  width: min(46%, 560px);
  transform: translateX(-50%);
  filter: drop-shadow(0 26px 38px rgba(237,75,116,.30));
  animation: conefloat 6s ease-in-out infinite;
}
@keyframes conefloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-16px); }
}

/* text pieces positioned around the cone */
.hero-tag {
  position: absolute; top: 15%; inset-inline-start: 0; z-index: 4;
  color: var(--pink); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 2rem);
}
.hero-love {
  position: absolute; top: 54%; inset-inline-end: 0; z-index: 4;
  color: var(--pink); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  text-align: end; white-space: nowrap;
}
.hero-reviews {
  position: absolute; top: 66%; inset-inline-start: 0; z-index: 4;
  display: flex; align-items: center; gap: .8rem;
}
.hero-reviews img { width: 96px; }
.hero-reviews b { color: var(--pink); font-size: 1.15rem; display:block; line-height:1; }
.hero-reviews span { font-size: .85rem; color: var(--ink); font-weight: 600; }
.hero-desc {
  position: absolute; top: 76%; inset-inline-start: 0; z-index: 4;
  max-width: 320px; color: var(--muted); font-size: .9rem; line-height: 1.6;
}

/* Semantic hero title — visible only on small screens; sr-only on desktop */
.hero-h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.hero-h1 .hh-tag   { display:block; color: var(--pink); font-weight: 700; font-size: 1.2rem; }
.hero-h1 .hh-title { display:block; color: var(--navy); font-weight: 800; font-size: clamp(2.4rem, 12vw, 3.2rem); line-height: 1; margin:.2rem 0; }
.hero-h1 .hh-love  { display:block; color: var(--pink); font-weight: 800; font-size: 1.4rem; }

.hero-float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-18px);} }

/* video slide */
.hero-slide--video .hero-slide__media { width: 100%; }
.video-poster {
  position: relative; width: min(100%, 620px); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/10;
}
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--pink);
  display: grid; place-items: center; font-size: 2rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t), background var(--t), color var(--t);
}
.play-btn::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.6); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0%{ transform: scale(.8); opacity: .8;} 100%{ transform: scale(1.4); opacity: 0;} }
.play-btn:hover { transform: scale(1.08); background: var(--pink); color: #fff; }

/* curved white divider at hero bottom */
.hero__wave { position: relative; z-index: 2; line-height: 0; margin-top: -2px; }
.hero__wave svg { width: 100%; height: auto; display: block; }

/* Swiper controls (shared) */
.swiper-button-next, .swiper-button-prev { color: var(--pink); }
.swiper-pagination-bullet { background: var(--navy); opacity: .25; width: 10px; height: 10px; transition: all var(--t); }
.swiper-pagination-bullet-active { background: var(--pink); opacity: 1; width: 28px; border-radius: 6px; }

/* -------------------------------------------------------------------------- */
/* 9. Stats                                                                   */
/* -------------------------------------------------------------------------- */
.stats { background: #fff; }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; text-align: center;
  /* faint decorative dots motif (echoes the PDF) */
  position: relative;
}
.stat { padding: 1rem .5rem; position: relative; }
.stat__num { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; color: var(--navy); line-height: 1; }
.stat__num .suf { color: var(--pink); }          /* +, K+, M+ are pink */
.stat__label { text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; font-weight: 700; color: var(--pink); margin-top: .55rem; }

/* centered pink accent bar beneath the row */
.stats__bar { width: 48px; height: 4px; background: var(--pink); border-radius: 4px; margin: 1.4rem auto 0; }

/* subtle scattered dots around the accent bar */
.stats__dots { position: relative; height: 0; }
.stats__dots::before {
  content: ""; position: absolute; left: 50%; top: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(245,166,35,.45); transform: translateX(-50%);
  box-shadow:
     70px -34px 0 -1px rgba(237,75,116,.30),
    -150px -8px 0 -2px rgba(245,166,35,.35),
     150px  6px 0 -1px rgba(47,165,224,.28),
    -70px  18px 0 -2px rgba(237,75,116,.25);
}

/* -------------------------------------------------------------------------- */
/* 10. About                                                                  */
/* -------------------------------------------------------------------------- */
.about { position: relative; }
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.about__media { position: relative; }
/* two-circle composition shown fully — no clip, no white border */
.about__img {
  width: 100%; max-width: 86%; height: auto; display: block;
  filter: drop-shadow(0 20px 38px rgba(13,31,93,.14));
}
/* mascot bear at the top-right corner of the whole section (fully visible) */
.about__bear {
  position: absolute; top: clamp(-18px, -0.6vw, 0px); inset-inline-end: clamp(0px, 3vw, 56px);
  width: clamp(108px, 12vw, 168px); z-index: 5; pointer-events: none;
  filter: drop-shadow(0 14px 20px rgba(13,31,93,.16));
  animation: floaty 7s ease-in-out infinite;
}
/* HACCP / ISO pill straddling the bottom of the big circle */
.about__badges {
  position: absolute; bottom: 4%; inset-inline-start: 50%; transform: translateX(-50%);
  background: #fff; padding: .6rem 1.3rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow); z-index: 4; }
[dir="rtl"] .about__badges { transform: translateX(50%); }
.about__badges img { height: 46px; }
.about__body h2 { font-size: var(--fs-h2); margin: .6rem 0 1rem; }
.about__body p { color: var(--muted); margin-bottom: 1rem; }

/* -------------------------------------------------------------------------- */
/* 11. Categories                                                             */
/* -------------------------------------------------------------------------- */
.cats { padding: 0; }
.cats__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.cat-card {
  position: relative; overflow: hidden;
  min-height: clamp(300px, 30vw, 390px);
  padding: 2.2rem 1.4rem;
  display: flex; flex-direction: column;
  transition: flex var(--t);
}
.cat-card__label { position: relative; z-index: 3; font-size: clamp(1.3rem,2vw,1.9rem); font-weight: 800; }
.cat-card__label::after { content: ""; display: block; width: 30px; height: 3px; border-radius: 2px; background: currentColor; margin-top: .7rem; opacity: .45; transition: width .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.cat-card:hover .cat-card__label::after { width: 66px; opacity: 1; }
.cat-card__shop { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-weight: 700; font-size: .9rem; color: var(--ink); transition: gap var(--t-fast), color var(--t-fast); }
.cat-card__shop i { transition: transform var(--t-fast); }
[dir="rtl"] .cat-card__shop i.bi-arrow-right { transform: scaleX(-1); }
/* Product is CENTRED at the bottom at rest; on hover it lifts + zooms with a
   blooming spotlight underneath — calm, premium, no lateral slide. */
.cat-card__img {
  position: absolute; bottom: 1.5rem; inset-inline-start: 50%;
  height: clamp(150px, 17vw, 215px); width: auto; max-width: 74%;
  object-fit: contain; object-position: center bottom;
  transform: translateX(-50%); transform-origin: center bottom; z-index: 2;
  filter: drop-shadow(0 14px 20px rgba(13,31,93,.16));
  transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
.cat-card:hover .cat-card__img {
  transform: translateX(-50%) translateY(-12px) scale(1.1);
  filter: drop-shadow(0 28px 34px rgba(13,31,93,.26));
}
.cat-card:hover .cat-card__shop { gap: .8rem; color: var(--pink); }
/* spotlight pedestal that blooms from the centre on hover */
.cat-card__glow {
  position: absolute; inset-inline-start: 50%; bottom: 4%;
  width: 78%; aspect-ratio: 1; transform: translateX(-50%) scale(.55);
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 66%);
  opacity: .35; transition: opacity .5s ease, transform .65s cubic-bezier(.34,1.4,.5,1);
  z-index: 1; pointer-events: none;
}
.cat-card:hover .cat-card__glow { opacity: 1; transform: translateX(-50%) scale(1.08); }
/* subtle depth gradient rising from the bottom, deepens on hover */
.cat-card::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(13,31,93,.10), transparent);
  opacity: 0; transition: opacity .5s ease; z-index: 0; pointer-events: none;
}
.cat-card:hover::before { opacity: 1; }

.cat--stick     { background: var(--cream);      color: var(--c-stick); }
.cat--cup       { background: var(--pink-050);    color: var(--c-cup); }
.cat--sandwich  { background: var(--panel-gray);  color: var(--c-sandwich); }
.cat--multipack { background: var(--blue-050);    color: var(--c-multipack); }
.cat--tube      { background: var(--pink-100);    color: var(--c-tube); }
.cat-card__shop, .cat-card__label { color: currentColor; }
.cat-card__label { color: currentColor; }

.cats__cta { display: flex; justify-content: center; padding: 2.5rem 0; background:#fff; }
/* mobile slider pagination dots (hidden on desktop) */
.cats__dots { display: none; }

/* -------------------------------------------------------------------------- */
/* 12. Al-Sabah banner                                                        */
/* -------------------------------------------------------------------------- */
.promo {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  /* exact PDF banner scene (bear + beach + popsicles + pink overlay), text removed */
  background: url("../images/banner-bg.webp") center center / cover no-repeat;
  background-color: #ec4b74; /* fallback while image loads / on ultra-wide crop */
}
.promo__inner { position: relative; z-index: 3; padding-block: clamp(3rem,7vw,5.5rem); max-width: 640px; margin-inline: auto; }
.promo__inner .eyebrow { background: rgba(255,255,255,.9); color: var(--pink-700); }
.promo__inner h2 { color: #fff; font-size: var(--fs-h2); margin: 1rem 0; }
.promo__inner p { color: rgba(255,255,255,.92); margin-bottom: 1.6rem; }
.app-badges { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.app-badges a { transition: transform var(--t); display:block; }
.app-badges a:hover { transform: translateY(-4px); }
.app-badges img { height: 48px; }

/* -------------------------------------------------------------------------- */
/* 13. Top products                                                           */
/* -------------------------------------------------------------------------- */
.products { background: #fff; }
/* stage wraps the slider + side arrows */
.products__stage { position: relative; }
/* keep every slide the same height and top-aligned so discs line up */
.products__slider .swiper-wrapper { align-items: flex-start; }
.products__slider .swiper-slide { height: auto; }
.product-card { text-align: center; padding: 1rem .5rem 1.5rem; }
.product-card__disc {
  --disc-fill: var(--pink-050); --disc-ring: rgba(237,75,116,.5);
  /* explicit equal width + height guarantees a perfect circle everywhere */
  width: min(230px, 58vw); height: min(230px, 58vw);
  margin-inline: auto; flex: none;
  border-radius: 50%;
  background: var(--disc-fill);
  border: 2px solid var(--disc-ring);
  display: grid; place-items: center; position: relative;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* per-flavor tint + ring (matches the PDF) */
.pc-cream .product-card__disc { --disc-fill:#FBF4E7; --disc-ring:#E9CE9A; }
.pc-pink  .product-card__disc { --disc-fill:#FCE7EF; --disc-ring:#F2A6C3; }
.pc-blue  .product-card__disc { --disc-fill:#E9F4FB; --disc-ring:#AAD5EF; }
.pc-gold  .product-card__disc { --disc-fill:#FBF3E1; --disc-ring:#E7C88F; }
.product-card__disc img {
  width: 78%; height: 78%; object-fit: contain; object-position: center;
  /* Catalog photos have a solid white/grey background — multiply blends that away
     into the tinted disc so only the product shows (no ugly white square). */
  mix-blend-mode: multiply;
  transition: transform var(--t);
}
.product-card:hover .product-card__disc { transform: translateY(-8px); box-shadow: var(--shadow); }
.product-card:hover .product-card__disc img { transform: scale(1.06); }
.product-card__name { font-weight: 700; color: var(--ink-strong); margin-top: 1.2rem; font-size: 1.05rem; }
.product-card__price { display: inline-block; margin-top: .6rem; padding: .3rem 1.1rem; background: var(--pink-100); color: var(--pink-700); border-radius: var(--r-pill); font-weight: 700; font-size: .85rem; }
.products__cta { display: flex; justify-content: center; margin-top: 2rem; }
/* side navigation arrows, vertically centered on the disc row */
.snav-btn {
  position: absolute; top: calc(1rem + min(120px, 32vw)); transform: translateY(-50%);
  z-index: 6; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem;
  transition: all var(--t);
}
.snav-prev { inset-inline-start: -6px; background: var(--pink-100); color: var(--pink); }
.snav-next { inset-inline-end: -6px;  background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }
.snav-btn:hover { transform: translateY(-50%) scale(1.08); }
.snav-prev:hover { background: var(--pink); color: #fff; box-shadow: var(--shadow-pink); }
.snav-next:hover { background: var(--pink-700); }
[dir="rtl"] .snav-btn i { transform: scaleX(-1); }

/* -------------------------------------------------------------------------- */
/* 14. Footer                                                                 */
/* -------------------------------------------------------------------------- */
.footer { position: relative; background: var(--pink-footer); color: var(--ink); }
/* white above the bumps; the pink bumps share the footer's exact colour */
.footer__wave { line-height: 0; background: #fff; }
.footer__wave svg { width: 100%; height: auto; display:block; }
.footer__grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 2.2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__logo img { height: 66px; width: auto; margin-bottom: 1.2rem; }
.footer p { color: #5b5b68; font-size: .92rem; max-width: 34ch; }
.footer h4 { color: var(--pink); font-size: 1.15rem; margin-bottom: 1.2rem; }
.footer__links a { display: block; color: #3d3d4a; padding: .34rem 0; font-size: .95rem; transition: color var(--t-fast), padding-inline-start var(--t-fast); }
.footer__links a:hover { color: var(--pink); padding-inline-start: 6px; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; color: #3d3d4a; font-size: .95rem; }
.footer__contact i { color: var(--pink); font-size: 1.1rem; margin-top: 2px; }
.footer__contact a { color: inherit; }
.footer__contact a:hover { color: var(--pink); }

/* App-store buttons (outlined white, matching the PDF footer) */
.store-btns { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.store-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; background: #fff;
  border: 1.5px solid #ecdfe3; border-radius: 12px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.store-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--pink); }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.05; text-align: start; }
.store-btn small { font-size: .58rem; letter-spacing: .3px; color: #555; text-transform: uppercase; }
.store-btn b { font-size: 1rem; color: #111; font-weight: 700; }
.footer__bottom { background: #fff; border-top: 1px solid rgba(13,31,93,.08); text-align: center; padding: 1.2rem; font-size: .85rem; color: var(--muted); }
.footer__bottom b { color: var(--pink); }

/* -------------------------------------------------------------------------- */
/* 15. Video Modal                                                            */
/* -------------------------------------------------------------------------- */
.video-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(13,31,93,.82); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
.video-modal.open { opacity: 1; visibility: visible; }
.video-modal__box {
  position: relative; width: min(960px, 100%); aspect-ratio: 16/9;
  background: #000; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-lg); transform: scale(.9); transition: transform var(--t);
}
.video-modal.open .video-modal__box { transform: scale(1); }
.video-modal__box video, .video-modal__box iframe { width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute; top: -14px; inset-inline-end: -14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 1.3rem;
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform var(--t-fast), background var(--t-fast); z-index: 2;
}
.video-modal__close:hover { background: var(--pink-700); transform: rotate(90deg); }
@media (max-width: 560px){ .video-modal__close { top: 8px; inset-inline-end: 8px; } }

/* -------------------------------------------------------------------------- */
/* 16. Back to top                                                            */
/* -------------------------------------------------------------------------- */
.to-top {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 900;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 1.3rem;
  display: grid; place-items: center; box-shadow: var(--shadow-pink);
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: all var(--t);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--pink-700); transform: translateY(-4px); }

/* -------------------------------------------------------------------------- */
/* 17. Scroll-reveal fallback (before AOS/when reduced motion)                */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------------------- */
/* 18. Responsive                                                             */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav__menu { display: none; }
  .hamburger { display: grid; }
  /* Hero collapses from absolute composition to a clean stacked column */
  .hero-stage {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-height: auto; gap: 1rem; padding-block: 1.5rem 0;
  }
  .hero-stage > * { position: static !important; transform: none !important; }
  .hero-wm, .hero-tag, .hero-love { display: none; }
  .hero-cone { order: 1; width: min(78%, 340px); animation: none; margin-inline: auto; }
  .hero-h1 { order: 2; width: auto; height: auto; clip: auto; white-space: normal; margin: 0; overflow: visible; }
  .hero-reviews { order: 3; justify-content: center; }
  .hero-desc { order: 4; max-width: 46ch; margin-inline: auto; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
  /* Categories become a sleek horizontal swipe slider on mobile */
  .cats__grid {
    display: flex; grid-template-columns: none;
    gap: .9rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1.1rem;
    padding: .4rem 1.1rem 1.1rem; scrollbar-width: none;
  }
  .cats__grid::-webkit-scrollbar { display: none; }
  .cat-card {
    flex: 0 0 100%; max-width: none;
    scroll-snap-align: center;
    min-height: 250px; padding: 1.6rem 1.4rem;
    border-radius: 24px; box-shadow: var(--shadow-sm);
  }
  .cat-card__img { height: clamp(130px, 34vw, 170px); }
  /* pagination dots */
  .cats__dots { display: flex; justify-content: center; gap: .45rem; padding: .2rem 0 .3rem; }
  .cats__dots button {
    width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
    border-radius: 999px; background: var(--pink-100);
    transition: width var(--t-fast), background var(--t-fast);
  }
  .cats__dots button.active { width: 26px; background: var(--pink); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Mobile header: drop the language switch (it lives in the drawer) and
     show all three action icons — cart, account, wishlist */
  .nav__actions { gap: .1rem; }
  .nav__actions .lang-switch { display: none; }
  .nav__actions .icon-btn { display: grid; }
  .icon-btn { width: 40px; height: 40px; }
  .hamburger { width: 42px; height: 42px; }
}
@media (max-width: 480px) {
  :root { --section-y: 3rem; }
  .nav__logo img { height: 46px; }
  .cats__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer .app-badges { justify-content: center; }
  .footer__contact li { justify-content: center; }
  .hero-title { letter-spacing: 0; }
  .to-top { bottom: 16px; inset-inline-end: 16px; }
}

/* -------------------------------------------------------------------------- */
/* 19. Internal pages (About & shared inner-page pieces)                      */
/* -------------------------------------------------------------------------- */
/* Internal page hero / banner */
.page-hero {
  position: relative; background: var(--pink-050);
  text-align: center; padding-block: clamp(3rem, 7vw, 5.5rem) 0; overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero .eyebrow { margin-bottom: .9rem; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); color: var(--navy); letter-spacing: -.5px; }
.breadcrumb-nav {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem;
  font-weight: 600; font-size: .95rem; color: var(--muted);
}
.breadcrumb-nav a:hover { color: var(--pink); }
.breadcrumb-nav .sep { color: var(--pink); font-size: .75rem; }
.breadcrumb-nav [aria-current] { color: var(--pink); }
/* floating decorative dots */
.page-hero::before, .page-hero::after { content:""; position:absolute; border-radius:50%; z-index:1; pointer-events:none; }
.page-hero::before { width:130px; height:130px; background:rgba(237,75,116,.10); top:14%; inset-inline-start:6%; }
.page-hero::after  { width:84px;  height:84px;  background:rgba(245,166,35,.16); bottom:30%; inset-inline-end:8%; }
.page-hero__wave { position:relative; z-index:2; margin-top: clamp(2rem,5vw,3.5rem); line-height:0; }
.page-hero__wave svg { width:100%; height:auto; display:block; }

/* Mission / Vision / Values cards */
.values__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.value-card { padding:2.4rem 1.8rem; text-align:center; }
.value-card__icon {
  width:74px; height:74px; border-radius:50%; margin:0 auto 1.3rem;
  display:grid; place-items:center; font-size:1.9rem;
  background:var(--pink-100); color:var(--pink);
  transition: transform var(--t), background var(--t), color var(--t);
}
.value-card:hover .value-card__icon { background:var(--pink); color:#fff; transform:rotate(-8deg) scale(1.06); }
.value-card h3 { color:var(--navy); font-size:1.25rem; margin-bottom:.7rem; }
.value-card p { color:var(--muted); font-size:.95rem; }

/* Commitment / quality section */
.commit { background:var(--pink-050); }
.commit__grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.commit__list { margin:1.4rem 0; }
.commit__list li { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1rem; color:var(--ink); font-weight:600; }
.commit__list i { color:var(--pink); font-size:1.35rem; margin-top:1px; }
.commit__badges { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.commit__badges img { height:64px; }
.commit__media { position:relative; display:grid; place-items:center; }
.commit__media .frame {
  width:min(100%,440px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fff, var(--pink-100));
  display:grid; place-items:center; box-shadow:var(--shadow-lg); border:10px solid #fff;
}
.commit__media .frame img { width:82%; filter:drop-shadow(0 18px 24px rgba(13,31,93,.18)); }
.commit__media .bear { position:absolute; bottom:-18px; inset-inline-end:2%; width:clamp(96px,12vw,140px); filter:drop-shadow(0 12px 16px rgba(13,31,93,.16)); animation:floaty 7s ease-in-out infinite; }

@media (max-width: 900px) {
  .values__grid { grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .commit__grid { grid-template-columns:1fr; }
  .commit__media { order:-1; }
}

/* -------------------------------------------------------------------------- */
/* 20. Products listing page                                                  */
/* -------------------------------------------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.filter-chip {
  padding:.6rem 1.4rem; border-radius:var(--r-pill);
  background:#fff; border:1.5px solid var(--line);
  font:inherit; font-weight:700; font-size:.9rem; color:var(--ink); cursor:pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.filter-chip:hover { border-color:var(--pink); color:var(--pink); }
.filter-chip.active { background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }

.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.product-tile { position:relative; overflow:hidden; }
.product-tile__media { position:relative; aspect-ratio:1 / .92; display:grid; place-items:center; overflow:hidden; }
.product-tile__media img { height:78%; width:auto; object-fit:contain; transition:transform var(--t); mix-blend-mode:multiply; }
.product-tile:hover .product-tile__media img { transform:scale(1.08) translateY(-4px); }
.product-tile__fav {
  position:absolute; top:.8rem; inset-inline-end:.8rem;
  width:38px; height:38px; border-radius:50%; background:#fff; color:var(--pink);
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(-6px); transition:all var(--t);
}
.product-tile:hover .product-tile__fav { opacity:1; transform:translateY(0); }
.product-tile__fav:hover { background:var(--pink); color:#fff; }
.product-tile__body { padding:1.2rem 1rem 1.5rem; text-align:center; }
.product-tile__cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--pink); }
.product-tile__name { color:var(--ink-strong); font-weight:700; font-size:1.05rem; margin:.35rem 0 .8rem; transition:color var(--t-fast); }
.product-tile:hover .product-tile__name { color:var(--pink); }
/* keep interactive controls above the card-wide click target */
.product-tile__fav { z-index:3; }
.product-tile__cart { position:relative; z-index:3; }
.product-tile__foot { display:flex; align-items:center; justify-content:center; gap:1rem; }
.product-tile__price { color:var(--navy); font-weight:800; font-size:1.05rem; }
.product-tile__cart { width:42px; height:42px; border-radius:50%; background:var(--pink-100); color:var(--pink); display:grid; place-items:center; font-size:1.05rem; transition:all var(--t-fast); }
.product-tile__cart:hover { background:var(--pink); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-pink); }
/* per-category tints */
.pt--stick .product-tile__media{ background:var(--cream); }      .pt--stick .product-tile__cat{ color:var(--c-stick); }
.pt--cup .product-tile__media{ background:var(--pink-050); }
.pt--sandwich .product-tile__media{ background:var(--panel-gray); } .pt--sandwich .product-tile__cat{ color:var(--navy); }
.pt--multipack .product-tile__media{ background:var(--blue-050); }  .pt--multipack .product-tile__cat{ color:var(--c-multipack); }
.pt--tube .product-tile__media{ background:var(--pink-100); }
.product-tile.is-hidden { display:none; }

@media (max-width:1024px){ .products-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .products-grid{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; } }

/* app-style extras for product tiles (badge + star rating) */
.product-tile__badge { position:absolute; top:.8rem; inset-inline-start:.8rem; padding:.3rem .8rem; border-radius:var(--r-pill); font-size:.66rem; font-weight:800; letter-spacing:.4px; color:#fff; z-index:2; }
.product-tile__badge--best { background:#8a5a2b; }
.product-tile__badge--popular { background:var(--pink); }
.product-tile__rating { display:flex; align-items:center; justify-content:center; gap:.3rem; font-size:.78rem; color:var(--muted); margin-bottom:.5rem; }
.product-tile__rating .stars { color:#F5A623; letter-spacing:-1px; }

/* -------------------------------------------------------------------------- */
/* 21. Product detail (PDP) — mirrors the app "Product Details" screen        */
/* -------------------------------------------------------------------------- */
.crumb { background:var(--pink-050); padding-block:1.1rem; }
.crumb .breadcrumb-nav { margin-top:0; }

.pdp__grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.pdp__gallery { position:relative; }
.pdp__stage {
  position:relative; aspect-ratio:1; border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #fff, var(--pink-050) 68%, var(--pink-100));
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
}
.pdp__stage img { width:76%; filter:drop-shadow(0 26px 34px rgba(13,31,93,.20)); animation:floaty 6s ease-in-out infinite; }
.pdp__badge { position:absolute; top:1.1rem; inset-inline-start:1.1rem; padding:.4rem 1rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:800; letter-spacing:.5px; color:#fff; background:var(--pink); z-index:2; }
.pdp__fav { position:absolute; top:1.1rem; inset-inline-end:1.1rem; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--pink); display:grid; place-items:center; font-size:1.2rem; box-shadow:var(--shadow); z-index:2; transition:background var(--t-fast), color var(--t-fast); }
.pdp__fav:hover { background:var(--pink); color:#fff; }

.pdp__cat { color:var(--pink); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; }
.pdp__title { color:var(--navy); font-size:clamp(1.9rem,3.5vw,2.8rem); margin:.4rem 0 .6rem; }
.pdp__rating { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; font-weight:600; color:var(--muted); }
.pdp__rating .stars { color:#F5A623; font-size:1rem; letter-spacing:-1px; }
.pdp__rating b { color:var(--ink-strong); }
.pdp__price { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--pink); margin-bottom:1rem; }
.pdp__price .old { color:var(--muted); font-size:.55em; text-decoration:line-through; margin-inline-start:.6rem; font-weight:600; }
.pdp__desc { color:var(--muted); max-width:52ch; margin-bottom:1.6rem; }
.pdp__label { font-weight:700; color:var(--navy); margin-bottom:.7rem; }
.pdp__row { margin-bottom:1.6rem; }
.size-chips { display:flex; gap:.7rem; flex-wrap:wrap; }
.size-chip { width:56px; height:56px; border-radius:16px; background:#f3f4f7; color:var(--ink); font:inherit; font-weight:700; border:2px solid transparent; cursor:pointer; transition:all var(--t-fast); }
.size-chip:hover { border-color:var(--pink); color:var(--pink); }
.size-chip.active { background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.qty { display:inline-flex; align-items:center; gap:.3rem; background:#f3f4f7; border-radius:var(--r-pill); padding:.35rem; }
.qty button { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.25rem; background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); transition:background var(--t-fast), color var(--t-fast); }
.qty button:hover { background:var(--pink); color:#fff; }
.qty__val { min-width:40px; text-align:center; font-weight:700; font-size:1.1rem; color:var(--navy); }
.pdp__actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:.5rem; }
.pdp__add { flex:1; min-width:200px; justify-content:center; }
.pdp__wish { width:54px; height:54px; border-radius:50%; background:var(--pink-100); color:var(--pink); display:grid; place-items:center; font-size:1.3rem; transition:background var(--t-fast), color var(--t-fast); flex:none; }
.pdp__wish:hover { background:var(--pink); color:#fff; }
.pdp__meta { margin-top:1.6rem; display:flex; flex-direction:column; gap:.45rem; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); padding-top:1.2rem; }
.pdp__meta b { color:var(--ink-strong); }

@media (max-width:900px){ .pdp__grid { grid-template-columns:1fr; } .pdp__gallery { max-width:460px; margin-inline:auto; } }

/* -------------------------------------------------------------------------- */
/* 22. Cart page — mirrors the app "My Cart" screen                           */
/* -------------------------------------------------------------------------- */
.cart-head { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.8rem; }
.cart-head h1 { color:var(--navy); font-size:clamp(1.8rem,3.5vw,2.4rem); }
.cart-count-label { color:var(--muted); font-weight:600; }

.cart__grid { display:grid; grid-template-columns:1.7fr 1fr; gap:2rem; align-items:start; }
.cart-item {
  position:relative; display:grid; grid-template-columns:96px 1fr auto; gap:1.3rem;
  align-items:center; padding:1.3rem 1.4rem; margin-bottom:1.2rem;
}
.cart-item__thumb { width:96px; height:96px; border-radius:18px; background:var(--pink-050); display:grid; place-items:center; overflow:hidden; }
.cart-item__thumb img { width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(13,31,93,.14)); }
.ci--cream .cart-item__thumb{ background:var(--cream); }
.ci--blue  .cart-item__thumb{ background:var(--blue-050); }
.ci--gray  .cart-item__thumb{ background:var(--panel-gray); }
.ci--pink  .cart-item__thumb{ background:var(--pink-100); }
.cart-item__name { color:var(--ink-strong); font-weight:700; font-size:1.05rem; }
.cart-item__size { color:var(--muted); font-size:.88rem; margin:.2rem 0 .8rem; }
.cart-item__price { align-self:end; color:var(--pink); font-weight:800; font-size:1.1rem; white-space:nowrap; }
.cart-item__del { position:absolute; top:1rem; inset-inline-end:1rem; width:36px; height:36px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; transition:background var(--t-fast), color var(--t-fast); }
.cart-item__del:hover { background:var(--pink); color:#fff; }

.promo-code { display:flex; gap:.7rem; margin:1.6rem 0; }
.promo-code__field { flex:1; display:flex; align-items:center; gap:.6rem; border:1.6px dashed var(--pink-200); border-radius:var(--r-pill); padding:0 1.2rem; background:#fff; }
.promo-code__field i { color:var(--pink); }
.promo-code input { flex:1; border:0; outline:0; background:transparent; font:inherit; padding:.85rem 0; color:var(--ink); }
.promo-code .btn { flex:none; }

.summary { padding:1.8rem; position:sticky; top:100px; }
.summary h3 { color:var(--navy); margin-bottom:1rem; }
.summary__row { display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; color:var(--muted); }
.summary__row .val { color:var(--ink-strong); font-weight:700; }
.summary__row .free { color:#1FA85B; font-weight:800; }
.summary__row--total { border-top:1px solid var(--line); margin-top:.4rem; padding-top:1rem; font-size:1.15rem; color:var(--navy); font-weight:800; }
.summary__row--total .val { color:var(--pink); }
.checkout-btn { width:100%; justify-content:center; margin-top:1.3rem; }

.cart-empty { text-align:center; padding:4rem 1rem; }
.cart-empty i { font-size:3rem; color:var(--pink); }
.cart-empty h3 { color:var(--navy); margin:1rem 0 .5rem; }
.cart-empty p { color:var(--muted); margin-bottom:1.5rem; }

@media (max-width:900px){ .cart__grid { grid-template-columns:1fr; } .summary { position:static; } }
@media (max-width:560px){
  .cart-item { grid-template-columns:72px 1fr; }
  .cart-item__thumb { width:72px; height:72px; }
  .cart-item__price { grid-column:1 / -1; align-self:auto; text-align:end; }
}

/* -------------------------------------------------------------------------- */
/* 23. Checkout page — mirrors the app "Checkout" screen                      */
/* -------------------------------------------------------------------------- */
.checkout__grid { display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; align-items:start; }
.co-label { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--navy); font-size:1.15rem; margin:2rem 0 1rem; }
.co-label:first-child { margin-top:0; }
.co-label i { color:var(--pink); font-size:1.25rem; }

.opt-card { position:relative; display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; margin-bottom:1rem; border:2px solid transparent; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
.opt-card:hover { border-color:var(--pink-200); }
.opt-card.selected { border-color:var(--pink); background:var(--pink-050); }
.opt-card__icon { width:56px; height:56px; border-radius:14px; background:var(--pink-100); color:var(--pink); display:grid; place-items:center; font-size:1.4rem; flex:none; }
.opt-card__body { flex:1; }
.opt-card__title { font-weight:700; color:var(--ink-strong); }
.opt-card__sub { color:var(--muted); font-size:.9rem; margin-top:.15rem; }
.opt-card__radio { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:none; transition:border-color var(--t-fast); }
.opt-card.selected .opt-card__radio { border-color:var(--pink); }
.opt-card.selected .opt-card__radio::after { content:""; width:12px; height:12px; border-radius:50%; background:var(--pink); }
.pay-logos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.pay-logos span { background:#fff; border:1px solid var(--line); border-radius:8px; padding:.28rem .55rem; font-size:.68rem; font-weight:800; color:var(--ink); letter-spacing:.3px; }
.confirm-btn { width:100%; justify-content:center; margin-top:1.3rem; }

@media (max-width:900px){ .checkout__grid { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------- */
/* 24. Order placed — mirrors the app "Order Placed" screen                   */
/* -------------------------------------------------------------------------- */
.order-done { text-align:center; max-width:560px; margin-inline:auto; }
.order-done__check {
  width:118px; height:118px; border-radius:50%; margin:0 auto 1.8rem;
  background:#22c55e; color:#fff; display:grid; place-items:center; font-size:3.4rem;
  box-shadow:0 18px 40px rgba(34,197,94,.35); animation:checkpop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes checkpop { 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.order-done h1 { color:var(--navy); font-size:clamp(2rem,5vw,2.8rem); }
.order-done__sub { color:var(--muted); margin-top:.7rem; }
.order-done__id { color:var(--pink); font-weight:800; margin-top:.4rem; letter-spacing:.3px; }
.order-eta { text-align:start; margin:2rem 0; padding:1.7rem 1.8rem; }
.order-eta__head { display:flex; align-items:center; gap:.7rem; font-weight:700; color:var(--navy); }
.order-eta__head .ic { width:44px; height:44px; border-radius:50%; background:var(--pink-100); color:var(--pink); display:grid; place-items:center; font-size:1.2rem; flex:none; }
.order-eta__time { color:var(--pink); font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800; margin:.7rem 0 .3rem; }
.order-eta__addr { color:var(--muted); font-size:.95rem; }
.order-done__actions { display:flex; flex-direction:column; gap:1rem; }
.order-done__actions .btn { width:100%; justify-content:center; }

/* -------------------------------------------------------------------------- */
/* 25. Auth (login / create account) — mirrors the app Login screens          */
/* -------------------------------------------------------------------------- */
.auth-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  max-width:1000px; margin-inline:auto;
  background:#fff; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
}
.auth-aside {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(2rem,4vw,3rem);
  background:radial-gradient(circle at 50% 35%, #fff, var(--pink-050) 60%, var(--pink-100));
}
.auth-aside img { width:min(78%,300px); filter:drop-shadow(0 22px 30px rgba(237,75,116,.28)); animation:floaty 6s ease-in-out infinite; }
.auth-aside h2 { color:var(--navy); margin-top:1.4rem; font-size:1.7rem; }
.auth-aside h2 span { color:var(--pink); }
.auth-aside p { color:var(--muted); margin-top:.5rem; max-width:34ch; }
.auth-form { padding:clamp(2rem,4vw,3.4rem); }
.auth-form h1 { color:var(--navy); font-size:clamp(1.7rem,3vw,2.2rem); }
.auth-form .sub { color:var(--muted); margin:.5rem 0 1.8rem; }
.field { margin-bottom:1.2rem; }
.field > label { display:block; font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.field__box { display:flex; align-items:center; gap:.6rem; background:#f5f6f8; border-radius:14px; padding:0 1rem; border:2px solid transparent; transition:border-color var(--t-fast), background var(--t-fast); }
.field__box:focus-within { border-color:var(--pink); background:#fff; }
.field__box > i { color:var(--muted); font-size:1.1rem; }
.field__box input { flex:1; border:0; background:transparent; padding:.95rem 0; font:inherit; outline:0; color:var(--ink); }
.field__box .eye { cursor:pointer; color:var(--muted); background:none; border:0; display:grid; place-items:center; }
.field__box .eye:hover { color:var(--pink); }
.auth-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.checkbox { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--ink); font-size:.92rem; }
.checkbox input { width:18px; height:18px; accent-color:var(--pink); }
.link-pink { color:var(--pink); font-weight:700; }
.link-pink:hover { color:var(--pink-700); }
.auth-btn { width:100%; justify-content:center; }
.auth-divider { text-align:center; color:var(--muted); font-size:.9rem; margin:1.5rem 0; position:relative; }
.auth-divider::before { content:""; position:absolute; top:50%; inset-inline:0; height:1px; background:var(--line); }
.auth-divider span { position:relative; background:#fff; padding:0 1rem; }
.btn-google { width:100%; justify-content:center; gap:.7rem; background:#fff; color:var(--ink-strong); border:1.5px solid var(--line); box-shadow:none; font-weight:700; }
.btn-google:hover { border-color:var(--pink); background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-google svg { width:20px; height:20px; }
.auth-foot { text-align:center; margin-top:1.4rem; color:var(--muted); }

@media (max-width:768px){
  .auth-wrap { grid-template-columns:1fr; max-width:460px; }
  .auth-aside { display:none; }
}

/* -------------------------------------------------------------------------- */
/* 26. Account / My Profile — mirrors the app "My Profile" screen             */
/* -------------------------------------------------------------------------- */
.profile-head { display:flex; align-items:center; gap:1.4rem; padding:1.8rem; margin-bottom:2rem; flex-wrap:wrap; }
.profile-avatar { width:88px; height:88px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:1.7rem; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--pink), var(--navy)); box-shadow:var(--shadow); }
.profile-info h1 { font-size:1.5rem; color:var(--navy); }
.profile-info .email { color:var(--muted); }
.profile-info .loc { display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9rem; margin-top:.25rem; }
.profile-info .loc i { color:var(--pink); }
.profile-head__actions { margin-inline-start:auto; display:flex; gap:.7rem; flex-wrap:wrap; }

.account-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.account-link { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; }
.account-link__icon { width:48px; height:48px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; font-size:1.2rem; flex:none; transition:background var(--t-fast), color var(--t-fast); }
.account-link:hover .account-link__icon { background:var(--pink); color:#fff; }
.account-link__label { flex:1; font-weight:700; color:var(--ink-strong); }
.account-link__chev { color:var(--muted); transition:color var(--t-fast); }
[dir="rtl"] .account-link__chev { transform:scaleX(-1); }
.account-link:hover .account-link__chev { color:var(--pink); }

@media (max-width:768px){
  .profile-head { flex-direction:column; text-align:center; }
  .profile-info .loc { justify-content:center; }
  .profile-head__actions { margin-inline-start:0; justify-content:center; width:100%; }
  .account-grid { grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------- */
/* 27. My Orders — mirrors the app "My Orders" screen                         */
/* -------------------------------------------------------------------------- */
.order-card { padding:1.5rem 1.6rem; margin-bottom:1.2rem; }
.order-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.order-card__no { font-weight:800; color:var(--ink-strong); }
.order-card__date { color:var(--muted); font-size:.88rem; margin-top:.2rem; }
.status { padding:.32rem .9rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:800; white-space:nowrap; }
.status--preparing { background:#FFF3E0; color:#E8930C; }
.status--delivered { background:#E4F7EC; color:#1FA85B; }
.status--cancelled { background:#FDE7EC; color:#E23b57; }
.order-thumbs { display:flex; align-items:center; gap:.6rem; margin:1.1rem 0; flex-wrap:wrap; }
.order-thumb { width:54px; height:54px; border-radius:12px; background:var(--pink-050); display:grid; place-items:center; overflow:hidden; flex:none; }
.order-thumb img { width:80%; height:80%; object-fit:contain; }
.order-thumbs .more { color:var(--muted); font-size:.88rem; font-weight:600; }
.order-card__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.order-card__price { color:var(--pink); font-weight:800; font-size:1.2rem; }
.order-card__actions { display:flex; gap:.7rem; flex-wrap:wrap; }
.btn--sm { padding:.6rem 1.3rem; font-size:.82rem; box-shadow:none; }

/* -------------------------------------------------------------------------- */
/* 28. Account dashboard layout (shared sidebar for all account pages)        */
/* -------------------------------------------------------------------------- */
.acct { display:grid; grid-template-columns:290px 1fr; gap:2rem; align-items:start; }
.acct-side { position:sticky; top:100px; }
.acct-side__profile { display:flex; align-items:center; gap:.9rem; padding:1.3rem; margin-bottom:1rem; }
.acct-side__avatar { width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--pink), var(--navy)); }
.acct-side__name { font-weight:700; color:var(--navy); }
.acct-side__email { color:var(--muted); font-size:.82rem; }
.acct-nav { padding:.6rem; }
.acct-nav a { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:12px; color:var(--ink); font-weight:600; transition:background var(--t-fast), color var(--t-fast); }
.acct-nav a i { font-size:1.15rem; color:var(--muted); width:22px; text-align:center; transition:color var(--t-fast); }
.acct-nav a:hover { background:var(--pink-050); color:var(--pink); }
.acct-nav a:hover i { color:var(--pink); }
.acct-nav a.active { background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.acct-nav a.active i { color:#fff; }
.acct-nav .sep { height:1px; background:var(--line); margin:.5rem .6rem; }
.acct-nav .logout, .acct-nav .logout i { color:var(--pink); }
.acct-content .section-title { color:var(--navy); margin-bottom:1.4rem; font-size:1.5rem; }
.info-card { padding:1.8rem; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.4rem; }

@media (max-width:900px){
  .acct { grid-template-columns:minmax(0,1fr); }
  .acct-side { position:static; min-width:0; }
  .acct-nav { display:flex; gap:.4rem; overflow-x:auto; min-width:0; }
  .acct-nav a { white-space:nowrap; flex:none; }
  .acct-nav .sep { display:none; }
  .info-grid { grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------- */
/* 29. Gallery + Lightbox                                                     */
/* -------------------------------------------------------------------------- */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery-item { position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:pointer; aspect-ratio:1; display:grid; place-items:center; background:var(--pink-050); box-shadow:var(--shadow-sm); transition:transform var(--t), box-shadow var(--t); }
.gallery-item img { width:82%; height:82%; object-fit:contain; transition:transform var(--t); filter:drop-shadow(0 12px 16px rgba(13,31,93,.14)); }
.gallery-item:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item__overlay { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.7rem; opacity:0; background:linear-gradient(180deg, rgba(237,75,116,0), rgba(237,75,116,.55)); transition:opacity var(--t); }
.gallery-item:hover .gallery-item__overlay { opacity:1; }
.gallery-item.is-hidden { display:none; }
.gi--cream { background:var(--cream); } .gi--blue { background:var(--blue-050); } .gi--gray { background:var(--panel-gray); } .gi--pink { background:var(--pink-100); }

/* Media card: tinted image box + caption underneath (no lightbox) */
.media-card { margin:0; display:flex; flex-direction:column; gap:.75rem; }
.media-card__box { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:transform var(--t), box-shadow var(--t); }
.media-card__box img { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(13,31,93,.14)); transition:transform var(--t); }
.media-card:hover .media-card__box { transform:translateY(-6px); box-shadow:var(--shadow); }
.media-card:hover .media-card__box img { transform:scale(1.06); }
.media-card__title { text-align:center; font-weight:700; color:var(--navy); font-size:1rem; }

.lightbox { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:1.5rem; background:rgba(13,31,93,.85); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox__stage { position:relative; width:min(90vw,620px); }
.lightbox__img { background:radial-gradient(circle at 50% 40%, #fff, var(--pink-050)); border-radius:var(--r-lg); padding:2.5rem; aspect-ratio:1; display:grid; place-items:center; box-shadow:var(--shadow-lg); transform:scale(.92); transition:transform var(--t); }
.lightbox.open .lightbox__img { transform:scale(1); }
.lightbox__img img { max-width:100%; max-height:70vh; object-fit:contain; }
.lightbox__cap { text-align:center; color:#fff; margin-top:1rem; font-weight:600; }
.lightbox__close { position:absolute; top:-14px; inset-inline-end:-14px; width:44px; height:44px; border-radius:50%; background:var(--pink); color:#fff; font-size:1.3rem; display:grid; place-items:center; box-shadow:var(--shadow); transition:transform var(--t-fast), background var(--t-fast); z-index:2; }
.lightbox__close:hover { background:var(--pink-700); transform:rotate(90deg); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--pink); font-size:1.3rem; display:grid; place-items:center; box-shadow:var(--shadow); transition:background var(--t-fast), color var(--t-fast); }
.lb-nav:hover { background:var(--pink); color:#fff; }
.lb-prev { inset-inline-start:max(18px,3vw); } .lb-next { inset-inline-end:max(18px,3vw); }
[dir="rtl"] .lb-nav i { transform:scaleX(-1); }

@media (max-width:768px){ .gallery-grid { grid-template-columns:repeat(2,1fr); } .lb-prev{inset-inline-start:8px;} .lb-next{inset-inline-end:8px;} }
@media (max-width:480px){ .gallery-grid { grid-template-columns:1fr 1fr; gap:.8rem; } }

/* -------------------------------------------------------------------------- */
/* 30. News & Events + Article (news-inner)                                   */
/* -------------------------------------------------------------------------- */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.news-card { overflow:hidden; display:flex; flex-direction:column; }
.news-card__media { position:relative; aspect-ratio:16/11; display:grid; place-items:center; overflow:hidden; background:var(--pink-050); }
.news-card__media img { width:74%; height:74%; object-fit:contain; transition:transform var(--t); filter:drop-shadow(0 12px 16px rgba(13,31,93,.14)); }
.news-card:hover .news-card__media img { transform:scale(1.07); }
.news-card__cat { position:absolute; top:.8rem; inset-inline-start:.8rem; background:var(--pink); color:#fff; padding:.3rem .85rem; border-radius:var(--r-pill); font-size:.66rem; font-weight:800; letter-spacing:.4px; }
.news-card__body { padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.news-card__date { display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.82rem; margin-bottom:.55rem; }
.news-card__date i { color:var(--pink); }
.news-card__title { color:var(--ink-strong); font-weight:700; font-size:1.1rem; line-height:1.35; margin-bottom:.6rem; transition:color var(--t-fast); }
.news-card:hover .news-card__title { color:var(--pink); }
.news-card__excerpt { color:var(--muted); font-size:.92rem; flex:1; }
.news-card__more { margin-top:1rem; color:var(--pink); font-weight:700; display:inline-flex; align-items:center; gap:.4rem; transition:gap var(--t-fast); }
.news-card:hover .news-card__more { gap:.7rem; }
[dir="rtl"] .news-card__more i.bi-arrow-right { transform:scaleX(-1); }

/* article (news-inner) */
.article { max-width:820px; margin-inline:auto; }
.article__hero { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/8; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #fff, var(--pink-050) 70%, var(--pink-100)); margin-bottom:1.8rem; }
.article__hero img { width:auto; height:80%; max-width:70%; object-fit:contain; filter:drop-shadow(0 20px 26px rgba(13,31,93,.18)); }
.article__meta { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.9rem; margin-bottom:.8rem; flex-wrap:wrap; }
.article__meta .cat { background:var(--pink-100); color:var(--pink-700); padding:.25rem .8rem; border-radius:var(--r-pill); font-weight:700; }
.article__meta .date { display:flex; align-items:center; gap:.4rem; } .article__meta .date i { color:var(--pink); }
.article__title { color:var(--navy); font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:1.2rem; line-height:1.2; }
.article__body p { color:var(--ink); margin-bottom:1.1rem; line-height:1.9; }
.article__body h2 { color:var(--navy); margin:1.6rem 0 .8rem; font-size:1.4rem; }
.article__body blockquote { border-inline-start:4px solid var(--pink); background:var(--pink-050); padding:1rem 1.4rem; border-radius:0 var(--r) var(--r) 0; color:var(--ink-strong); font-weight:600; margin:1.4rem 0; }
[dir="rtl"] .article__body blockquote { border-radius:var(--r) 0 0 var(--r); }
.article__share { display:flex; align-items:center; gap:.7rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.article__share span { font-weight:700; color:var(--navy); }
.article__share a { width:40px; height:40px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; transition:background var(--t-fast), color var(--t-fast); }
.article__share a:hover { background:var(--pink); color:#fff; }

@media (max-width:1024px){ .news-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .news-grid { grid-template-columns:1fr; max-width:400px; margin-inline:auto; } }

/* -------------------------------------------------------------------------- */
/* 31. Contact page                                                           */
/* -------------------------------------------------------------------------- */
.contact__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start; }
.contact-form { padding:2rem; }
.contact-form h2, .contact-info h2 { color:var(--navy); font-size:1.4rem; margin-bottom:1.3rem; }
.contact-form .field__box textarea { flex:1; border:0; background:transparent; outline:0; font:inherit; padding:.9rem 0; color:var(--ink); resize:vertical; min-height:120px; }
.contact-form .field__box--area { align-items:flex-start; }
.contact-form .field__box--area > i { margin-top:.9rem; }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-success { display:none; align-items:center; gap:.6rem; margin-top:1rem; padding:.9rem 1.2rem; background:#E4F7EC; color:#1FA85B; border-radius:12px; font-weight:600; }
.form-success.show { display:flex; }

.contact-info__card { display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 1.4rem; margin-bottom:1rem; }
.contact-info__icon { width:48px; height:48px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; font-size:1.2rem; flex:none; }
.contact-info__label { color:var(--muted); font-size:.82rem; }
.contact-info__value { color:var(--ink-strong); font-weight:700; }
.contact-info__value a { color:inherit; } .contact-info__value a:hover { color:var(--pink); }
.contact-socials { display:flex; gap:.7rem; margin-top:.3rem; }
.contact-socials a { width:44px; height:44px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; font-size:1.15rem; transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.contact-socials a:hover { background:var(--pink); color:#fff; transform:translateY(-3px); }

.contact-map { position:relative; height:340px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  background:
    radial-gradient(circle at 30% 40%, rgba(47,165,224,.10), transparent 40%),
    repeating-linear-gradient(0deg, rgba(13,31,93,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(13,31,93,.05) 0 1px, transparent 1px 40px),
    var(--pink-050);
  display:grid; place-items:center; text-align:center; }
.contact-map__pin { width:64px; height:64px; border-radius:50% 50% 50% 0; background:var(--pink); transform:rotate(-45deg); display:grid; place-items:center; box-shadow:var(--shadow); margin-bottom:1.4rem; animation:floaty 3s ease-in-out infinite; }
.contact-map__pin i { transform:rotate(45deg); color:#fff; font-size:1.5rem; }
.contact-map__label { position:absolute; bottom:1.2rem; inset-inline:1.2rem; background:#fff; border-radius:var(--r); padding:.9rem 1.2rem; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.contact-map__label b { color:var(--navy); }
.contact-map__label span { color:var(--muted); font-size:.88rem; }

@media (max-width:900px){ .contact__grid { grid-template-columns:1fr; } }
@media (max-width:480px){ .contact-form .form-row { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------- */
/* 32. FAQ accordion + CTA box                                                */
/* -------------------------------------------------------------------------- */
.faq { max-width:820px; margin-inline:auto; }
.faq-item { margin-bottom:1rem; overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; padding:1.2rem 1.4rem; display:flex; align-items:center; gap:1rem; font-weight:700; color:var(--navy); transition:color var(--t-fast); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .q { flex:1; }
.faq-item summary .ico { width:34px; height:34px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; font-size:1.1rem; flex:none; transition:transform var(--t), background var(--t-fast), color var(--t-fast); }
.faq-item[open] summary { color:var(--pink); }
.faq-item[open] summary .ico { background:var(--pink); color:#fff; transform:rotate(45deg); }
.faq-item__body { padding:0 1.4rem 1.4rem; color:var(--muted); line-height:1.85; }
.faq-item[open] .faq-item__body { animation:faqreveal .35s ease; }
@keyframes faqreveal { from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

.help-cta { text-align:center; max-width:640px; margin:2.5rem auto 0; padding:2.4rem; background:radial-gradient(circle at 50% 0%, var(--pink-050), #fff); }
.help-cta i.big { font-size:2.4rem; color:var(--pink); }
.help-cta h3 { color:var(--navy); margin:.8rem 0 .5rem; }
.help-cta p { color:var(--muted); margin-bottom:1.4rem; }

/* -------------------------------------------------------------------------- */
/* 33. Misc template pages (tabs, team, jobs, list, settings, notif, prose)   */
/* -------------------------------------------------------------------------- */
/* Tabs */
.tabs__nav { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:2rem; }
.tab-btn { padding:.7rem 1.5rem; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line); font:inherit; font-weight:700; color:var(--ink); cursor:pointer; transition:all var(--t-fast); }
.tab-btn:hover { border-color:var(--pink); color:var(--pink); }
.tab-btn.active { background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.tab-panel { display:none; animation:faqreveal .4s ease; }
.tab-panel.active { display:block; }

/* Team */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.team-card { text-align:center; padding:2rem 1.4rem; }
.team-card__avatar { width:96px; height:96px; border-radius:50%; margin:0 auto 1.1rem; display:grid; place-items:center; font-size:2rem; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--pink), var(--navy)); }
.team-card h3 { color:var(--navy); font-size:1.1rem; }
.team-card .role { color:var(--pink); font-weight:600; font-size:.88rem; margin:.2rem 0 .9rem; }
.team-card__socials { display:flex; gap:.5rem; justify-content:center; }
.team-card__socials a { width:36px; height:36px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; transition:all var(--t-fast); }
.team-card__socials a:hover { background:var(--pink); color:#fff; }

/* Jobs / careers */
.jobs { display:flex; flex-direction:column; gap:1rem; max-width:820px; margin-inline:auto; }
.job-card { display:flex; align-items:center; gap:1.2rem; padding:1.4rem 1.6rem; flex-wrap:wrap; }
.job-card__info { flex:1; min-width:220px; }
.job-card__info h3 { color:var(--navy); font-size:1.15rem; }
.job-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.job-chips span { background:var(--pink-050); color:var(--pink-700); border-radius:var(--r-pill); padding:.25rem .8rem; font-size:.76rem; font-weight:700; }
.perks-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem; }
.perk { text-align:center; padding:1.8rem 1.4rem; }
.perk i { font-size:1.9rem; color:var(--pink); }
.perk h3 { color:var(--navy); font-size:1.05rem; margin:.7rem 0 .4rem; }
.perk p { color:var(--muted); font-size:.9rem; }

/* List view */
.list-view { display:flex; flex-direction:column; gap:1.2rem; }
.list-item { display:flex; align-items:center; gap:1.3rem; padding:1.2rem 1.4rem; flex-wrap:wrap; }
.list-item__thumb { width:90px; height:90px; border-radius:16px; background:var(--pink-050); display:grid; place-items:center; overflow:hidden; flex:none; }
.list-item__thumb img { width:78%; height:78%; object-fit:contain; }
.list-item__body { flex:1; min-width:200px; }
.list-item__body h3 { color:var(--navy); font-size:1.1rem; }
.list-item__body p { color:var(--muted); font-size:.9rem; margin-top:.3rem; }

/* Settings toggles */
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.settings-row:last-child { border-bottom:0; }
.settings-row__label b { color:var(--ink-strong); display:block; }
.settings-row__label span { color:var(--muted); font-size:.85rem; }
.toggle { position:relative; width:52px; height:30px; flex:none; }
.toggle input { position:absolute; opacity:0; }
.toggle__track { position:absolute; inset:0; background:#d8dbe3; border-radius:999px; transition:background var(--t-fast); }
.toggle__track::after { content:""; position:absolute; top:3px; inset-inline-start:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--t); }
.toggle input:checked + .toggle__track { background:var(--pink); }
.toggle input:checked + .toggle__track::after { transform:translateX(22px); }
[dir="rtl"] .toggle input:checked + .toggle__track::after { transform:translateX(-22px); }

/* Notifications */
.notif-item { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 1.4rem; margin-bottom:.9rem; }
.notif-item__icon { width:44px; height:44px; border-radius:50%; background:var(--pink-050); color:var(--pink); display:grid; place-items:center; font-size:1.1rem; flex:none; }
.notif-item.unread { border-inline-start:4px solid var(--pink); }
.notif-item__body { flex:1; }
.notif-item__body b { color:var(--ink-strong); }
.notif-item__body p { color:var(--muted); font-size:.9rem; margin-top:.2rem; }
.notif-item__time { color:var(--muted); font-size:.78rem; white-space:nowrap; }

/* Prose (legal) */
.prose { max-width:820px; margin-inline:auto; }
.prose h2 { color:var(--navy); font-size:1.3rem; margin:1.6rem 0 .7rem; }
.prose p, .prose li { color:var(--ink); line-height:1.9; }
.prose ul { padding-inline-start:1.4rem; margin-bottom:1rem; list-style:disc; }
.prose p { margin-bottom:1rem; }

/* Search bar */
.searchbar { max-width:640px; margin:0 auto 2.5rem; display:flex; gap:.7rem; }
.searchbar__field { flex:1; display:flex; align-items:center; gap:.6rem; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:0 1.2rem; }
.searchbar__field:focus-within { border-color:var(--pink); }
.searchbar__field i { color:var(--muted); } .searchbar__field input { flex:1; border:0; outline:0; background:transparent; font:inherit; padding:.9rem 0; }

@media (max-width:1024px){ .team-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .team-grid { grid-template-columns:repeat(2,1fr); } .perks-grid { grid-template-columns:1fr; } }
@media (max-width:480px){ .team-grid { grid-template-columns:1fr; max-width:300px; margin-inline:auto; } }

/* -------------------------------------------------------------------------- */
/* 34. Header nav — dropdown (About) + mega menu (Products)                    */
/* -------------------------------------------------------------------------- */
.nav__item { position:relative; display:flex; align-items:center; }
.nav__menu .nav__toggle { display:inline-flex; align-items:center; gap:.4rem; }
.nav__toggle .bi-chevron-down { font-size:.68rem; margin-top:1px; transition:transform var(--t-fast); }
.nav__item:hover .nav__toggle .bi-chevron-down,
.nav__item:focus-within .nav__toggle .bi-chevron-down { transform:rotate(180deg); }
/* invisible hover-bridge so the gap between toggle and panel doesn't close it */
.nav__item::after { content:""; position:absolute; top:100%; inset-inline:-8px; height:.7rem; }

/* shared reveal for dropdown */
.dropdown {
  position:absolute; top:100%; inset-inline-start:0; margin-top:.55rem;
  min-width:236px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:1200;
}
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.dropdown a { display:flex; align-items:center; gap:.7rem; padding:.72rem .9rem; border-radius:12px; font-weight:600; font-size:.92rem; color:var(--ink); white-space:nowrap; background:none; box-shadow:none; }
.dropdown a i { color:var(--pink); font-size:1.05rem; width:20px; text-align:center; }
.dropdown a:hover { background:var(--pink-050); color:var(--pink); }

/* mega menu (Products) */
/* full-width mega: anchor to the sticky header, not the nav item */
.nav__item.has-mega { position:static; }
.mega {
  position:absolute; top:100%; left:0; right:0; width:auto;
  background:#fff; border-top:1px solid var(--line);
  border-radius:0 0 26px 26px; box-shadow:0 26px 44px -14px rgba(13,31,93,.20);
  padding:1.7rem 0 1.9rem;
  opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:1200;
}
.mega::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav__item:hover > .mega,
.nav__item:focus-within > .mega { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.mega__inner { max-width:1200px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.mega__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.mega__head h4 { margin:0; color:var(--navy); font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.mega__all { display:inline-flex; align-items:center; gap:.4rem; color:var(--pink); font-weight:700; font-size:.88rem; background:none; box-shadow:none; padding:0; }
.mega__all:hover { color:#c72851; }
.mega__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.mega__card { position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:1 / 1.16; box-shadow:var(--shadow-sm); transition:transform var(--t-fast), box-shadow var(--t-fast); }
.mega__card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.mega__card > img { width:100%; height:100%; object-fit:contain; padding:13% 14% 30%; transition:transform var(--t); }
.mega__card:hover > img { transform:scale(1.06); }
.mega__card::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; height:55%; background:linear-gradient(to top, rgba(13,31,93,.86), rgba(13,31,93,.34) 46%, rgba(13,31,93,0)); }
.mega__card-cap { position:absolute; inset-inline:0; inset-block-end:0; z-index:1; padding:.85rem 1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; color:#fff; }
.mega__card-cap b { font-weight:800; font-size:1.02rem; line-height:1.15; }
.mega__card-cap small { display:block; margin-top:2px; font-weight:500; font-size:.74rem; color:rgba(255,255,255,.82); }
.mega__card-cap i { flex:none; font-size:.9rem; opacity:.85; transition:transform var(--t-fast); }
.mega__card:hover .mega__card-cap i { transform:translateX(-5px); }
[dir="ltr"] .mega__card:hover .mega__card-cap i { transform:translateX(5px); }

/* Mobile: About/Products become tap accordions inside the drawer */
.mobile-menu .m-acc { border-bottom:1px solid var(--line); }
.mobile-menu .m-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:.85rem .6rem; font-weight:600; border-radius:12px; }
.mobile-menu .m-acc > summary::-webkit-details-marker { display:none; }
.mobile-menu .m-acc > summary .bi { font-size:.8rem; color:var(--muted); transition:transform var(--t-fast); }
.mobile-menu .m-acc[open] > summary { color:var(--pink); }
.mobile-menu .m-acc[open] > summary .bi { transform:rotate(180deg); color:var(--pink); }
.mobile-menu .m-acc__body { padding-inline-start:.6rem; }
.mobile-menu .m-acc__body a { font-size:.9rem; color:var(--muted); border-bottom:0; padding:.6rem .6rem; }
.mobile-menu .m-acc__body a:hover { color:var(--pink); }

@media (max-width:1160px){ .mega__grid { grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   Hero carousel — the brand slide plus admin-published banner slides.
   Controls only appear on .hero--multi, so a single-slide hero looks untouched.
   ========================================================================== */
/* 720, not 680: with cover the widest screens trim (1905/1425*680 - h)/2 off the top
   and bottom. At 720 that is ~95px, which clears the highest drawn element in the
   current banners (the bear's hat, ~80px down) and the lowest (the carpet). */
.hero { --hero-h: clamp(560px, 60vw, 720px); }
.hero--multi .hero__slider { position: relative; }

/* Every slide agrees on the brand slide's height (.hero-stage uses the same
   clamp), so fading between them does not resize the section. */
.hero__slider .swiper-slide { height: auto; }

/* --- Banner slides ------------------------------------------------------- */
/* A one-cell grid stacks photo, veil and copy on top of each other. Absolute
   positioning would work too, but stacking keeps every layer in flow, so the
   slide still has a real height even before Swiper measures it. */
.hero-slide--banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-h);
    overflow: hidden;
}

/* The photo and its wash are taken OUT of flow on purpose. Left in flow, a
   square image with height:100% resolves against a content-sized parent, falls
   back to auto, and stretches the slide to the image's own aspect ratio — a
   1280x1280 banner made the hero 1425px tall. Out of flow, the slide's height
   comes from min-height and the copy, and the photo simply fills whatever that is. */
.hero-banner__bg,
.hero-banner__veil {
    position: absolute;
    inset: 0;
}

.hero-banner__bg {
    width: 100%;
    height: 100%;
    /* Beats the global `img { max-width:100%; height:auto }` reset. */
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.hero-slide--banner.swiper-slide-active .hero-banner__bg {
    animation: heroKenBurns 14s ease-out both;
}

/* Legibility over an arbitrary photo: a directional wash, strongest on the side
   the copy sits, so light and dark images both read. */
.hero-banner__veil {
    background: linear-gradient(to left,
        rgba(255, 240, 243, .10) 0%,
        rgba(255, 240, 243, .70) 42%,
        rgba(255, 240, 243, .96) 72%);
}

/* Arabic is the default, and there its copy sits on the right — so the wash has
   to run the other way. Gradients have no logical-direction keyword, hence the
   explicit pair. */
[dir="rtl"] .hero-banner__veil {
    background: linear-gradient(to right,
        rgba(255, 240, 243, .10) 0%,
        rgba(255, 240, 243, .70) 42%,
        rgba(255, 240, 243, .96) 72%);
}

.hero-slide--banner .container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* The wave sits over the bottom of the hero — keep copy clear of it. */
    padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.hero-banner__copy { max-width: 34rem; }

.hero-banner__title {
    font-size: clamp(1.9rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.18;
    color: #1c1b2e;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.hero-banner__sub {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.7;
    color: #4a4857;
    margin: 0 0 1.6rem;
}

.hero-banner__cta { display: inline-flex; align-items: center; gap: .6rem; }
.hero-banner__cta i { font-size: 1.05em; }

/* Copy rises as its slide becomes active. */
.hero-slide--banner .hero-banner__copy > * {
    opacity: 0;
    transform: translateY(18px);
}

.hero-slide--banner.swiper-slide-active .hero-banner__copy > * {
    animation: heroRise .7s cubic-bezier(.2, .7, .3, 1) both;
}

.hero-slide--banner.swiper-slide-active .hero-banner__copy > *:nth-child(2) { animation-delay: .1s; }
.hero-slide--banner.swiper-slide-active .hero-banner__copy > *:nth-child(3) { animation-delay: .2s; }

@keyframes heroRise { to { opacity: 1; transform: none; } }
@keyframes heroKenBurns { from { transform: scale(1.08); } to { transform: scale(1); } }

/* --- Dots ---------------------------------------------------------------- */
.hero__pagination.swiper-pagination {
    position: absolute;
    bottom: clamp(2.5rem, 5vw, 3.75rem);
    inset-inline: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.hero__pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 !important;
    background: #d9c9ce;
    opacity: 1;
    border-radius: 99px;
    transition: width .3s ease, background .3s ease;
}

.hero__pagination .swiper-pagination-bullet-active {
    width: 30px;
    background: var(--rose, #ED4B74);
}

/* --- Arrows -------------------------------------------------------------- */
.hero__nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(28, 27, 46, .12);
    color: var(--rose, #ED4B74);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.hero__nav:hover { transform: scale(1.08); background: #fff; }
.hero__nav::after { font-size: 1.05rem; font-weight: 700; }
.hero__slider .hero__nav--prev {
    inset-inline-start: clamp(.75rem, 3vw, 2.5rem);
    inset-inline-end: auto;
}

.hero__slider .hero__nav--next {
    inset-inline-end: clamp(.75rem, 3vw, 2.5rem);
    inset-inline-start: auto;
}

/* Arrows are a pointer affordance; touch users swipe and get the dots. */
@media (max-width: 767.98px) {
    .hero__nav { display: none; }
    .hero { --hero-h: 460px; }
    .hero-banner__copy { max-width: none; text-align: center; margin-inline: auto; }
    .hero-banner__veil,
    [dir="rtl"] .hero-banner__veil { background: rgba(255, 240, 243, .86); }

    /* Paired with Swiper's autoHeight below 768px: an artwork slide takes the
       banner's own shape instead of stretching to the brand slide's height,
       which is what turned two thirds of the slide into blurred filler. */
    .hero-slide--art {
        min-height: 0;
        aspect-ratio: 1024 / 630;
    }

    /* The bands it was covering are gone, so it only softens the edges now. */
    .hero-slide--art .hero-banner__blur { opacity: .3; transform: scale(1.06); }

    .hero__pagination.swiper-pagination { bottom: .75rem; }

    /* THE fix that makes autoHeight work here. Swiper's autoheight rule is
       `transition-property: transform, height` on the wrapper, and the wrapper's
       height starts out as `auto` — not an animatable value, so the transition
       never resolves and the wrapper goes on painting the tallest slide's height.
       autoHeight was setting 368px correctly the whole time and nothing moved.
       Transition the transform only; the slide movement already carries the change. */
    .hero__slider.swiper-autoheight .swiper-wrapper { transition-property: transform; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner__bg { animation: none; }
    .hero-slide--banner .hero-banner__copy > * { opacity: 1; transform: none; animation: none; }
    .hero__nav { transition: none; }
}

/* --- Artwork-only slides -------------------------------------------------- */
/* The gallery banners are finished 1024x630 designs with their own typography.
   Cropping them to the hero's wider box would cut the artwork, so the sharp
   image is CONTAINed and a blown-up, blurred copy of itself fills the rest of
   the width — nothing of the design is lost and no bars appear. */
.hero-slide--art .hero-banner__blur,
.hero-slide--art .hero-banner__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

.hero-slide--art .hero-banner__blur {
    object-fit: cover;
    filter: blur(28px) saturate(1.15);
    transform: scale(1.12);
    opacity: .55;
}

.hero-slide--art .hero-banner__art {
    /* cover, not contain. The banners are 1425x680 (2.10:1) while the hero is nearer
       2.80:1, so contain left ~240px of the blurred backdrop showing down each side —
       read as empty margins rather than as artwork. Cover trims the top and bottom
       instead, which on this artwork is empty sky and ground; --hero-h below is set so
       the trim stays clear of anything drawn. */
    object-fit: cover;
    object-position: center;
    z-index: 2;
}

/* The whole slide is the link — there is no button to aim at. */
.hero-banner__hit {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.hero-slide--art.swiper-slide-active .hero-banner__art {
    animation: heroArtIn .8s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes heroArtIn {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide--art.swiper-slide-active .hero-banner__art { animation: none; }
}

/* NOTE: do not add `transition: height` here. The carousel root's CSS height is
   `auto` (Swiper's autoheight class) and the active slide's height is written
   onto it in px — auto is not an animatable value, so the transition never runs
   and the element simply keeps painting its previous height. The crossfade
   already carries the change. */

/* ============ Campaign announcement strip ============
   Sits above the sticky header, so it scrolls away once read instead of
   permanently eating vertical space. Rendered only while a campaign's date
   window is open, so nothing here needs a kill switch. */
.promo-strip {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-700) 45%, var(--pink-700) 100%);
  color: #fff;
  font-size: .92rem;
  position: relative;
  overflow: hidden;
}
/* A slow sheen — enough to catch the eye once, not enough to nag. */
.promo-strip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: promo-sheen 6s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes promo-sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .promo-strip::after { animation: none; opacity: 0; } }

.promo-strip__in {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .35rem .9rem;
  padding: .55rem 1rem;
  text-align: center;
}
.promo-strip__ic { color: var(--c-stick); font-size: 1.05rem; }
.promo-strip__name { font-weight: 800; letter-spacing: .2px; }
.promo-strip__perks { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .85rem; }
.promo-strip__perk { display: inline-flex; align-items: center; gap: .3rem; opacity: .95; }
.promo-strip__perk i { font-size: .95rem; color: var(--pink-200); }
/* Separate the perks from each other without a character that mirrors badly in RTL. */
.promo-strip__perks .promo-strip__perk + .promo-strip__perk {
  border-inline-start: 1px solid rgba(255,255,255,.35);
  padding-inline-start: .85rem;
}
@media (max-width: 575.98px) {
  .promo-strip { font-size: .82rem; }
  .promo-strip__in { padding: .5rem .75rem; gap: .2rem .6rem; }
  .promo-strip__perks .promo-strip__perk + .promo-strip__perk { border: 0; padding-inline-start: 0; }
}

/* Cart / checkout: the campaign replaces the "spend more for free delivery"
   nudge, which would otherwise be a lie while delivery is free for everyone. */
.free-ship-hint.campaign {
  background: linear-gradient(90deg, rgba(13,31,93,.06), rgba(237,75,116,.10));
  border: 1px dashed var(--pink-600);
  color: var(--navy);
  font-weight: 700;
}
.free-ship-hint.campaign i { color: var(--pink-600); }

/* Admin-uploaded category artwork is a product photo on a light backdrop, not a
   transparent cutout, so the cutout treatment would drop a grey rectangle onto the
   coloured panel. multiply alone is not enough — a silver backdrop multiplied into a
   cream panel still reads darker than the panel. So the photo is laid full-bleed
   against the bottom of the card: its left, right and bottom edges then coincide with
   the card's own edges, and only the top edge is left to hide, which the mask fades
   out. Harmless on a real transparent cutout. */
.cat-card__img--photo {
  mix-blend-mode: multiply;
  filter: none;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: none;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  /* Two fades intersected: the top edge, and both sides. The product is centred, so
     softening the sides costs nothing and clears the grey wash that the photo floor
     otherwise leaves in the bottom corners. Only the bottom edge stays solid, and it
     sits on the card bottom where there is no edge to give away. */
  -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to top, #000 62%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.cat-card:hover .cat-card__img--photo {
  transform: scale(1.06);
  filter: none;
}


/* Pack size next to the price, as the legacy store showed it ("/ 24 pcs"). */
.product-tile__pcs { color: var(--muted, #8a8fa3); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pdp__pcs { display: inline-flex; align-items: center; gap: .45rem; margin: .1rem 0 .9rem;
  padding: .4rem .8rem; border-radius: 999px; background: var(--pink-050, #fff5f6);
  color: var(--navy, #0D1F5D); font-size: .92rem; }
.pdp__pcs i { color: var(--pink, #ED4B74); }
/* legacy short descriptions are one paragraph per line */
.pdp__short { white-space: pre-line; line-height: 1.75; }
/* legacy full descriptions carry a nutrition-facts table */
.product-description table { width: 100%; max-width: 560px; border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; }
.product-description td, .product-description th { padding: .5rem .7rem; border-bottom: 1px solid rgba(13, 31, 93, .1); }
.product-description tr:first-child td { font-weight: 700; color: var(--navy, #0D1F5D); border-bottom-width: 2px; }
.product-description tr:nth-child(even) td { background: var(--pink-050, #fff5f6); }
.product-description td:not(:first-child) { white-space: nowrap; }
.product-description p { margin: 0 0 .5rem; }
.product-description { overflow-x: auto; }
/* regular price struck through while a store-wide campaign runs (as bellatoksa.com showed it) */
.product-tile__old, .product-card__old { color: var(--muted, #8a8fa3); font-size: .78em; font-weight: 600; text-decoration: line-through; margin-inline-start: .4rem; }

/* -------------------------------------------------------------------------- */
/* Small phones: keep the header on ONE row.                                   */
/* At 360px the logo (74) + location chip + 3 icons + menu (246) + gaps and    */
/* padding came to ~368px, so the bar wrapped onto two lines.                  */
/* -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .site-header .nav { flex-wrap: nowrap; gap: .5rem; padding-inline: 12px; padding-block: .55rem; }
  .site-header .nav__logo { flex-shrink: 0; }
  .site-header .nav__logo img { height: 42px; }
  .site-header .nav__actions { gap: 0; min-width: 0; }
  .site-header .icon-btn { width: 37px; height: 37px; }
  .site-header .hamburger { width: 38px; height: 38px; font-size: 1.4rem; }
  .site-header .loc-chip { min-width: 0; max-width: 96px; padding: .35rem .5rem; font-size: .78rem; gap: .25rem; }
}
/* very narrow phones (320–359px): the chip keeps only its pin */
@media (max-width: 359.98px) {
  .site-header .nav__logo img { height: 38px; }
  .site-header .loc-chip span { display: none; }
  .site-header .loc-chip { padding: .4rem; }
}

/* Long product names: let the breadcrumb wrap instead of running off a phone screen. */
.breadcrumb-nav { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 400px) {
  .product-description table { font-size: .85rem; }
  .product-description td, .product-description th { padding: .4rem .45rem; }
}