/*
Theme Name: Granzia
Theme URI: https://granzia.example
Author: Granzia
Author URI: https://granzia.example
Description: قالب ووردبريس عربي بالكامل (RTL) لمتجر أجهزة طبية منزلية - خط GE SS Two، Shortcodes وGutenberg blocks وCustom Post Types.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: granzia
Tags: rtl-language-support, e-commerce, custom-menu, featured-images, translation-ready
*/

/* The real GE SS Two faces serve everything EXCEPT the ASCII digits
   (U+0030-0039) — those are excluded so the font's Arabic-Indic digit glyphs
   never render. The Latin digit override below (or the Arial stack fallback)
   handles 0-9 instead. */
@font-face {
  font-family: "GE SS Two";
  src: url("assets/fonts/GE-SSTwo-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0-2F, U+003A-10FFFF;
}

@font-face {
  font-family: "GE SS Two";
  src: url("assets/fonts/GE-SSTwo-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0-2F, U+003A-10FFFF;
}

@font-face {
  font-family: "GE SS Two";
  src: url("assets/fonts/GE-SSTwo-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0-2F, U+003A-10FFFF;
}

@font-face {
  font-family: "GE SS Two";
  src: url("assets/fonts/GE-SSTwo-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0-2F, U+003A-10FFFF;
}

/* Latin digit override: the digit range was excluded from every real GE SS Two
   face (here and in quiz.css), so these are the only family faces covering 0-9.
   Explicit weights (a weight *range* breaks local() matching in some browsers)
   keep digit weight close to the surrounding text. If a local font is missing,
   the element's own stack (…, Arial, sans-serif) still yields a Latin digit. */
@font-face { font-family: "GE SS Two"; src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto"), local("DejaVu Sans"); unicode-range: U+0030-0039; font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto"), local("DejaVu Sans"); unicode-range: U+0030-0039; font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto"), local("DejaVu Sans"); unicode-range: U+0030-0039; font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GE SS Two"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Arial"), local("Roboto"); unicode-range: U+0030-0039; font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-primary: "GE SS Two";

  /* ===== Theme primary palette — overridable per product category =====
     Override --primary (+ derived) inline per page to re-skin the whole site.
     Every blue token below derives from it, so all the existing var(--blue-*)
     usages re-color automatically (same approach as product-detail-pink.css). */
  --primary: #002f87;        /* main brand blue */
  --primary-dark: #002363;   /* darker shade (headings, hovers) */
  --primary-deep: #00256b;   /* deepest shade */
  --primary-soft: #e8eef9;   /* light tint (soft backgrounds) */
  --primary-ink: #002363;    /* text-on-light ink */
  --accent: #4ad0ff;         /* accent (bullets, highlights) */
  --footer-bg: #004189;      /* footer background (themed per category) */
  --logo-filter: none;       /* header logo tint — recolored per category color */

  --blue-700: var(--primary);
  --blue-800: var(--primary-dark);
  --blue-850: var(--primary-deep);
  --blue-900: var(--primary-dark);
  --blue-050: #e2e8f0;
  --pink-050: #ffeff0;
  --white-93: rgba(255, 255, 255, 0.93);
  --white-90: rgba(255, 255, 255, 0.9);
  --hero-blue-tint: rgba(0, 47, 135, 0.15);
  --mobile-benefit-text: #782e3f;
  --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.04);
  --announcement-desktop-width: 1280px;
  --announcement-mobile-width: 343px;
  --hero-desktop-width: 1440px;
  --hero-mobile-width: 375px;
  --search-desktop-width: 386px;
  --search-mobile-width: 341px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  background: #fff;
  color: var(--blue-800);
  direction: rtl;
  text-align: start;
  /* `clip` hides horizontal overflow like `hidden` but, unlike `hidden`, does NOT
     create a scroll container — so position:sticky (header + landing hero) works. */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
}

.announcement {
  width: 100%;
  margin: 0;
  background: var(--blue-700);
  height: 40px;
  color: #fff;
  overflow: hidden;
  border-radius: 0;
}

.announcement__inner {
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  direction: rtl;
}

.desktop-announcement {
  width: 100%;
  max-width: none;
  padding-inline: 24px;
  box-sizing: border-box;
}

.mobile-announcement {
  display: none;
  width: 100%;
  max-width: none;
  padding-inline: 16px;
  box-sizing: border-box;
}

.announcement__messages {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.desktop-announcement .announcement__messages {
  width: 1232px;
}

.mobile-announcement .announcement__messages {
  width: 295px;
}

.announcement__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.announcement__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

.announcement__content.is-changing {
  opacity: 0;
  transform: translateX(-12px);
}

.announcement__icon {
  flex: 0 0 auto;
  /* Icons ship with a dark-navy (var(--blue-700)) fill; the bar is dark blue, so force
     them white to stay visible on the announcement background. */
  filter: brightness(0) invert(1);
}

.announcement__text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.announcement__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.site-header {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0;
}

/* While the account dropdown is open, lift the header's whole stacking context
   above page sections (kept below mini-cart 1000 / quick-view 1100). */
.site-header.account-open {
  z-index: 900;
}

/* The condensed header's backdrop-filter makes .header-desktop the containing
   block + a stacking context for the absolute dropdown — which moves & hides it.
   Drop the filter while the menu is open so the dropdown anchors to its toggle. */
.site-header.account-open .header-desktop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Smart sticky header (desktop): the promo top bar (.announcement, above) scrolls
   away; the main header pins. Scrolling down → translucent/blurred (.is-condensed);
   scrolling up or near the top → opaque/full. Toggled in main.js. */
@media (min-width: 769px) {
  .site-header {
    position: sticky;
    top: 0;
    /* keep the original z-index:10 so search (60) / mini-cart (1000) / quick-view
       (1100) still layer above the now-sticky header. */
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  .site-header.is-condensed .header-desktop {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }
}

.header-desktop,
.header-mobile {
  width: 100%;
  max-width: none;
  margin: 0;
  /* --header-bg is set inline per category (Step 4) when "header" is opted in. */
  background: var(--header-bg, var(--white-93));
  backdrop-filter: blur(6px);
}

.header-desktop {
  display: block;
  min-height: 116px;
  box-shadow: var(--shadow-header);
}

.header-desktop__top {
  width: 100%;
  box-sizing: border-box;
  height: 72px;
  margin-inline: auto;
  padding-block: 10px;
  padding-inline: 24px;
  border-bottom: 1px solid var(--blue-050);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 476px;
  flex-direction: row-reverse;
}

.header-desktop__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 200px;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.header-account {
  position: relative;
  display: inline-flex;
}

.header-account__toggle {
  cursor: pointer;
}

.header-account__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  z-index: 20;
  width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border: 1px solid rgba(0, 37, 107, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0, 37, 107, 0.12);
  direction: rtl;
}

.header-account__menu[hidden] {
  display: none;
}

.header-account__menu a,
.header-account__menu-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 16px;
  color: var(--blue-850);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: right;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-account__menu-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  color: currentColor;
}

.header-account__menu-icon img,
.header-account__menu-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.header-account__menu a:hover,
.header-account__menu a:focus-visible {
  background: rgba(0, 47, 135, 0.06);
  color: var(--blue-700);
}

.header-desktop__brand-search {
  width: 604px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-direction: row-reverse;
}

.header-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
}

.header-desktop__actions .header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding: 0;
  line-height: 1;
}

.header-desktop__actions .header-icon img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  transform: none;
}

.header-desktop__actions .header-icon--count::before,
.header-desktop__actions .header-icon--count::after,
.header-desktop__actions .header-count::before,
.header-desktop__actions .header-count::after {
  content: none !important;
  display: none !important;
}

.header-desktop__actions .header-count {
  position: absolute;
  top: -7px;
  inset-inline-end: -8px;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
  background: #ff7b83;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
  padding: 0;
}

.search-desktop {
  width: var(--search-desktop-width);
  height: 40px;
  border: 1.10138px solid var(--blue-050);
  border-radius: 99px;
  background: #fff;
  padding-block: 9px;
  padding-inline: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  column-gap: 10px;
}

.site-header.search-is-open .header-desktop__top {
  justify-content: space-between;
  gap: 40px;
}

.site-header.search-is-open .header-desktop__brand-search {
  width: min(1023px, calc(100vw - 337px));
}

.site-header.search-is-open .search-desktop {
  width: min(805px, calc(100vw - 555px));
}

/* While search is open, lift the header (and its search field) above the
   open search surface so the field stays visible/clickable. Scoped to the
   search state so it never covers the menu drawer / mini-cart. */
.site-header.search-is-open {
  z-index: 100001;
}

.search-desktop input,
.search-mobile input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  color: var(--blue-850);
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  text-align: start;
  flex: 1 1 auto;
  min-width: 0;
}

.search-desktop input::placeholder,
.search-mobile input::placeholder {
  color: var(--blue-850);
}

.search-desktop__icon,
.search-mobile__icon {
  width: 23.989px;
  height: 23.989px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.home-search {
  position: relative;
  z-index: 60;
  width: 100%;
  pointer-events: none;
}

.home-search[hidden] {
  display: none;
}

body.search-open .home-search {
  pointer-events: auto;
}

body.search-open {
  overflow: hidden;
}

.home-search__surface {
  position: fixed;
  top: 112px;
  inset-inline: 0;
  z-index: 99999;
  width: 100%;
  min-height: calc(100vh - 112px);
  padding-block: 24px 28px;
  padding-inline: max(80px, calc((100vw - 770px) / 2));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  background: #fff;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08);
  direction: ltr;
}

.home-search__close {
  position: absolute;
  top: 24px;
  inset-inline-end: max(24px, calc((100vw - 1280px) / 2 + 24px));
  z-index: 100000;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.home-search__close img {
  width: 20px;
  height: 20px;
}

.home-search__popular {
  width: 285px;
  flex: 0 0 285px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: #0d0702;
  direction: ltr;
}

.home-search__popular h2 {
  margin: 0 0 4px;
  color: #0d0702;
  font-family: var(--font-primary);
  font-size: 18px;            /* Figma lg/medium 18/28 */
  font-weight: 500;
  line-height: 28px;
}

.home-search__popular button {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #414141;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.home-search__popular button img {
  width: 24px;               /* Figma MagnifyingGlass 24px */
  height: 24px;
  opacity: 0.55;
  filter: grayscale(1);
}

.home-search__results {
  width: 446px;
  flex: 0 0 446px;
  direction: rtl;
}

.home-search__grid {
  display: grid;
  grid-template-columns: repeat(3, 138px);
  gap: 16px;
}

.home-search__card {
  width: 138px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* Figma items-start */
  gap: 4px;                  /* Figma gap-4 (was 8) */
  color: #0d0702;
  text-align: right;
}

.home-search__card[hidden] {
  display: none;
}

.home-search__photo {
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0.76px solid #eaecf2;   /* Figma border 0.76px #eaecf2 */
  border-radius: 3px;             /* Figma 3.041px */
  background: #fff;
}

.home-search__photo img {
  width: 138px;
  height: 138px;
  object-fit: contain;            /* Figma object-contain (was cover) */
}

.home-search__title {
  width: 138px;
  color: #0d0702;
  font-size: 16px;
  font-weight: 300;               /* Figma base/light */
  line-height: 24px;
  text-align: right;
}

.home-search__empty {
  margin: 28px 0 0;
  color: #414141;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.brand-desktop {
  width: 186px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Single-color icons + logo are painted via CSS mask: the SVG supplies the
   shape, background-color supplies the EXACT color (no hue-rotate approximation).
   Default primary = navy; on a themed category it becomes that category's color. */
.g-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--g-icon) center / contain no-repeat;
  mask: var(--g-icon) center / contain no-repeat;
}

/* Header action icons, search and account-menu icons. --header-icon is set inline
   per category (Step 4) when "icons" is opted in; otherwise the site primary. */
.header-icon,
.search-desktop__icon,
.search-mobile__icon,
.header-account__menu-icon {
  color: var(--header-icon, var(--primary));
}

/* The logo mark (single colour). --logo-color is set inline only in the category
   "recolor" logo mode; the default keeps the site brand blue regardless of theme. */
.g-logo {
  background-color: var(--logo-color, #002f87);
}

.header-desktop__bottom {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: row-reverse;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  direction: rtl;
}

body.search-open .header-desktop__bottom {
  display: none;   /* collapse the nav row so the surface opens flush below the header */
}

body.search-open .header-desktop {
  min-height: 0;   /* drop the leftover nav-band height so the panel sits flush under the search row */
}

.header-desktop__bottom a {
  position: relative;
  min-height: 32px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --header-text is set inline per category (Step 4) when "header" is opted in. */
  color: var(--header-text, var(--blue-850));
  transition: color 0.2s ease;
}

.header-desktop__bottom a::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--blue-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.header-desktop__bottom a:hover,
.header-desktop__bottom a:focus-visible,
.header-desktop__bottom a[aria-current="page"] {
  color: var(--blue-700);
}

.header-desktop__bottom a:hover::after,
.header-desktop__bottom a:focus-visible::after,
.header-desktop__bottom a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-nav__distributors {
  width: 71px;
}

.header-nav__warranty {
  width: 60px;
}

.header-desktop__separator {
  width: 1px;
  height: 20px;
  background: var(--blue-050);
}

.header-mobile {
  display: none;
  min-height: 110px;
  border-bottom: 1px solid var(--blue-050);
  background: var(--header-bg, var(--white-90));
  backdrop-filter: blur(4px);
}

.header-mobile__top {
  width: 100%;
  box-sizing: border-box;
  height: 58px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
}

.header-mobile__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 50px;
}

.brand-mobile {
  width: 149.565px;
  height: 40px;
}

.header-mobile__search {
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 16px;
  padding-bottom: 12px;
}

.search-mobile {
  width: var(--search-mobile-width);
  height: 40px;
  margin-inline: auto;
  border: 1.10138px solid var(--blue-050);
  border-radius: 99px;
  background: #fff;
  padding-block: 9px;
  padding-inline: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  direction: rtl;
  column-gap: 10px;
}

.header-count--mobile {
  top: 6px;
  inset-inline-end: 8px;
  font-size: 7px;
  line-height: 9px;
}

.hero-desktop {
  width: 100%;
  height: 550px;
  margin: 0 !important;
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 0 !important;
}

.categories-page {
  background: #fff;
}

.categories-page__hero {
  width: 100%;
  height: 188px;
  display: grid;
  place-items: center;
  background: #eaf7ff;
}

.categories-page__hero h1 {
  margin: 0;
  color: var(--blue-850);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.categories-page__body {
  width: 100%;
  padding: 48px 24px 48px;
}

.categories-page__grid {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 240px);
  justify-content: center;
  gap: 40px 20px;
  direction: rtl;            /* RTL: first category starts top-right */
}

.categories-page__card {
  width: 240px;
  min-height: 365px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #0d0702;
  text-align: center;
  direction: rtl;
}

/* Image wrapper: clips the hover zoom so the scaled image can't spill out
   of the card (keeps the rounded corners too). */
.categories-page__media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.categories-page__card img {
  display: block;
  width: 240px;
  height: 303px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.categories-page__card:hover .categories-page__media img {
  transform: scale(1.08);
}

.categories-page__name {
  width: 240px;
  margin-top: 12px;
  color: #0d0702;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.categories-page__count {
  width: 240px;
  margin-top: 2px;
  color: #8a8a8a;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.plp-page {
  background: #fff;
}

.plp-hero {
  width: 100%;
  height: 188px;
  display: grid;
  place-items: center;
  background: #eaf7ff;
}

.plp-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.plp-hero h1 {
  margin: 0;
  color: var(--blue-850);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.plp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 20px;
}

.plp-content {
  width: 100%;
  padding: 24px 0 48px;
}

.plp-category-strip {
  width: 100%;
  margin-inline: 0;
  padding-bottom: 24px;
  padding-inline: 64px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  direction: rtl;
}

.plp-category {
  width: 150px;
  min-height: 202px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #0d0702;
  text-align: center;
  direction: rtl;
}

.plp-category img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
  box-sizing: border-box;
}

.plp-category--active img {
  border: 2px solid #48c8ff;
}

.plp-category--active,
.plp-category--active .plp-category__name {
  width: 150px;
}

.plp-category__name {
  width: 164px;
  margin-top: 8px;
  color: #0d0702;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.plp-category--active .plp-category__name {
  color: var(--blue-700);
}

.plp-category__count {
  color: #8a8a8a;
  font-size: 14px;
  line-height: 20px;
}

.plp-layout {
  width: 100%;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 307px 1084px;
  justify-content: space-between;
  gap: 0;
  direction: rtl;
}

.plp-products,
.plp-filter {
  direction: rtl;
}

.plp-filter {
  order: -1;
}

.plp-products {
  width: 1084px;
  padding-left: 64px;
  box-sizing: border-box;
}

.plp-toolbar {
  height: 36px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.plp-sort {
  position: relative;
  width: 163px;
  height: 36px;
  color: var(--blue-850);
  direction: rtl;
}

.plp-sort summary {
  width: 100%;
  height: 100%;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  direction: rtl;
}

.plp-sort summary::-webkit-details-marker {
  display: none;
}

.plp-sort summary img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

.plp-sort__menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 20;
  width: 288px;
  padding: 8px 0;
  border: 1px solid rgba(0, 37, 107, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0, 37, 107, 0.12);
  direction: rtl;
}

.plp-sort__menu button {
  width: 100%;
  min-height: 40px;
  padding: 10px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--blue-850);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.plp-sort__menu button:hover,
.plp-sort__menu button:focus-visible {
  background: rgba(0, 47, 135, 0.06);
  color: var(--blue-700);
}

.plp-sort__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  color: currentColor;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.plp-toolbar p {
  margin: 0;
  color: var(--blue-850);
  font-size: 16px;
  line-height: 24px;
  direction: rtl;
}

.plp-mobile-controls {
  display: none;
}

.plp-grid {
  display: grid;
  grid-template-columns: repeat(4, 243px);   /* Figma PLP 4 cols x243 (was 3x306) */
  gap: 24px 16px;                              /* row 24, col 16 (Figma) */
  direction: rtl;                             /* RTL: first product starts top-right */
}

/* PLP product cards are 243 wide (narrower than home 306) */
.plp-grid .fp-card--desktop {
  width: 243px;
  min-height: 451px;                           /* Figma PLP card h451 */
}
.plp-grid .fp-card--desktop .fp-media-frame {
  height: 243px;
}
/* Figma PLP desktop shows 8 cards (4x2) */
.plp-grid .fp-card:nth-child(n+9) { display: none; }

.plp-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.plp-pagination a,
.plp-pagination span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--blue-850);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.plp-pagination a.is-active {
  border: 1px solid #48c8ff;
}

.plp-filter {
  width: 307px;
  padding-top: 8px;
  padding-right: 64px;
  box-sizing: border-box;
  color: #0d0702;
}

.plp-toggle {
  min-height: 32px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  color: #0d0702;
  font-size: 16px;
  line-height: 24px;
  direction: rtl;
}

.plp-toggle input {
  position: absolute;
  opacity: 0;
}

.plp-toggle span {
  position: relative;
  width: 33px;
  height: 20px;
  flex: 0 0 33px;
  border-radius: 999px;
  background: #e5e5e5;
}

.plp-toggle span::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.plp-toggle input:checked + span {
  background: #48c8ff;
}

.plp-toggle input:checked + span::after {
  right: 15px;
}

.plp-filter__group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.plp-filter__group h2 {
  margin: 0 0 12px;
  color: #0d0702;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plp-filter__group h2::after {
  content: "-";
  color: #0d0702;
  font-size: 22px;
  font-weight: 700;
}

.plp-filter__group label {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #6f6f6f;
  font-size: 14px;
  line-height: 20px;
  direction: rtl;
}

.plp-filter__group label span {
  color: #9aa8bd;
  font-family: Arial, Helvetica, sans-serif;
}

.plp-filter__group input {
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  border: 1px solid #d8e0ed;
  border-radius: 3px;
  background: #fff;
  flex: 0 0 18px;
  order: -1;
}

.plp-filter__group input[type="radio"] { border-radius: 50%; }
.plp-filter__group input:checked {
  border-color: var(--blue-700);
  background: var(--blue-700);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ---- Sub-category chips ---------------------------------------------------- */
.plp-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  direction: rtl;
}
.plp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--blue-050);
  border-radius: 999px;
  background: #fff;
  color: var(--blue-850);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.plp-chip:hover { border-color: var(--blue-700); }
.plp-chip.is-active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
}
.plp-chip__count {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  opacity: .7;
}

/* ---- Price inputs + reset + loading --------------------------------------- */
.plp-price-inputs {
  display: flex;
  gap: 10px;
  direction: rtl;
}
.plp-price-inputs label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6f6f6f;
}
.plp-price-inputs input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d8e0ed;
  border-radius: 8px;
  background: #fff;
  color: var(--blue-850);
  font-family: inherit;
  font-size: 14px;
}
.plp-price-apply,
.plp-filter__reset {
  margin-top: 12px;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--blue-700);
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.plp-price-apply:hover,
.plp-filter__reset:hover { background: var(--blue-800); }
.plp-filter__reset {
  background: #fff;
  color: var(--blue-700);
}
.plp-filter__reset:hover { background: var(--blue-050); }

.plp-grid.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.plp-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  color: #6f6f6f;
  font-size: 16px;
}

.plp-range {
  display: flex;
  justify-content: space-between;
  color: #6f6f6f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  direction: ltr;
}

.plp-range__track {
  position: relative;
  height: 24px;
  margin-top: 8px;
}

.plp-range__track::before,
.plp-range__track span {
  content: "";
  position: absolute;
  top: 10px;
  height: 4px;
  border-radius: 999px;
}

.plp-range__track::before {
  inset-inline: 0;
  background: #e2e8f0;
}

.plp-range__track span {
  right: 48px;
  width: 64px;
  background: #5573d6;
}

.plp-filter .fp-stars,
.plp-filter__stars {
  color: #d8547d;
}

.cart-page {
  min-height: 767px;
  padding-top: 32px;
  background: #f5f5f5;
  direction: rtl;
}

.cart-shell {
  width: 100%;
  height: 699px;
  margin: 0 auto 36px;
}

.cart-heading {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--blue-850);
}

.cart-heading h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.cart-heading span {
  margin-top: 4px;
  color: #6f6f6f;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.cart-layout {
  width: 1304px;
  height: 643px;
  margin-top: 24px;
  margin-inline-start: -12px;
  display: grid;
  grid-template-columns: 440px 828px;
  gap: 36px;
  direction: ltr;
}

.cart-summary-panel,
.cart-items-panel {
  background: #fff;
  border-radius: 8px;
  direction: rtl;
}

.cart-summary-panel {
  width: 440px;
  height: 643px;
  padding: 24px;
}

.cart-items-panel {
  width: 828px;
  min-height: 608px;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: hidden;
  border-radius: 8px;
}

.cart-shipping-note {
  width: 392px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3f3e3e;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.cart-shipping-note svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--blue-700);
}

.cart-shipping-progress {
  position: relative;
  width: 392px;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efff;
}

.cart-shipping-progress span {
  position: absolute;
  top: 0;
  right: 0;
  width: 279px;
  height: 4px;
  border-radius: 999px;
  background: #2f62df;
}

.cart-order-summary {
  width: 392px;
  height: 196px;
  margin-top: 16px;
}

.cart-order-summary h2 {
  margin: 0 0 8px;
  color: var(--blue-850);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.cart-discount {
  width: 392px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #3f3e3e;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.cart-summary-list {
  margin: 0;
}

.cart-summary-list div {
  width: 392px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-summary-list dt,
.cart-summary-list dd {
  margin: 0;
  color: #3f3e3e;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.cart-summary-list dd {
  direction: ltr;
}

.cart-summary-list div + div {
  margin-top: 0;
}

.cart-total {
  width: 392px;
  height: 52px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 6px;
}

.cart-total__label {
  color: #3f3e3e;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.cart-total__tax {
  color: #6f6f6f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.cart-total strong {
  color: var(--blue-850);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
  direction: ltr;
}

.cart-checkout {
  width: 392px;
  height: 48px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.cart-valu {
  width: 392px;
  height: 56px;
  margin-top: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.cart-valu p {
  width: 329.5px;
  margin: 0;
  color: #3f3e3e;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.cart-valu a {
  color: var(--blue-700);
  font-weight: 500;
}

.cart-valu__logo {
  color: #00b3ad;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.cart-points {
  width: 392px;
  height: 84px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #eef3fa;
}

.cart-points__top {
  height: 24px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
}

.cart-points__icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f9e8ef;
  color: #c04a65;
  font-size: 16px;
}

.cart-points__top span {
  color: #3f3e3e;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cart-points__top strong {
  color: var(--blue-850);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cart-points p {
  margin: 12px 0 0;
  color: #3f3e3e;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cart-services {
  width: 392px;
  height: 83px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 120px);
  justify-content: space-between;
}

.cart-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--blue-700);
  text-align: center;
}

.cart-service svg {
  width: 30px;
  height: 30px;
  color: var(--blue-700);
}

.cart-service span {
  color: #3f3e3e;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cart-item {
  position: relative;
  width: 828px;
  height: 150px;
  padding: 0 0 24px;
  display: grid;
  grid-template-columns: 647px 171px;
  direction: ltr;
}

.cart-item + .cart-item {
  border-top: 1px solid #e6e6e6;
  padding-top: 12px;
}

.cart-item__image {
  grid-column: 2;
  grid-row: 1;
  width: 171px;
  height: 126px;
  object-fit: cover;
  object-position: center;
}

.cart-item__content {
  grid-column: 1;
  grid-row: 1;
  width: 647px;
  height: 126px;
  padding: 8px 12px 0 8px;
  direction: rtl;
}

.cart-item__top {
  width: 627px;
  height: 48px;
  display: grid;
  grid-template-columns: 72px 454px;
  align-items: start;
  justify-content: space-between;
  direction: ltr;
}

.cart-item__actions {
  width: 72px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.cart-icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  color: #3f3e3e;
  cursor: pointer;
}

.cart-icon-button svg {
  width: 20px;
  height: 20px;
}

.cart-item__copy {
  width: 454px;
  direction: rtl;
}

.cart-item__category {
  margin: 0;
  color: #8a8a8a;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.cart-item h2 {
  margin: 4px 0 0;
  color: #3f3e3e;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
}

.cart-item__bottom {
  width: 627px;
  height: 38px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 113px 280px;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.cart-item__prices {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  direction: rtl;
}

.cart-item__prices span,
.cart-item__prices del {
  color: var(--blue-850);
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
}

.cart-item__prices del {
  color: #a0a0a0;
  text-decoration: line-through;
}

.cart-item__prices em {
  color: #c04a65;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 13px;
  direction: ltr;
}

.cart-qty {
  grid-column: 1;
  width: 113px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  color: #3f3e3e;
  direction: ltr;
}

.cart-qty button {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cart-qty button {
  width: 38px;
  height: 36px;
  color: var(--blue-850);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.cart-qty span {
  color: #3f3e3e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.mini-cart-overlay {
  --mini-cart-blue: var(--blue-700);
  --mini-cart-blue-dark: #001640;
  --mini-cart-text: #000;
  --mini-cart-muted: #71717b;
  --mini-cart-border: #e5e5e5;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  direction: rtl;
}

.mini-cart-overlay:target,
.mini-cart-overlay.is-open {
  display: block;
}

body.mini-cart-open {
  overflow: hidden;
}

body.quick-view-open {
  overflow: hidden;
}

.mini-cart-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 22, 35, 0.42);
}

.mini-cart {
  position: absolute;
  top: 0;
  left: 0;
  width: 385px;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--mini-cart-text);
  box-shadow: none;
}
.mini-cart__top { flex: 0 0 auto; }

.mini-cart__top {
  width: 385px;
  height: 282px;
  padding: 0 24px;
}

.mini-cart__header {
  width: 337px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  padding: 0;
  border-bottom: 1px solid #e7e5e4;
}

.mini-cart__close,
.mini-cart__success-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #222;
}

.mini-cart__close {
  cursor: pointer;
}

.mini-cart__success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  direction: ltr;
}

.mini-cart__success h2 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  direction: rtl;
}

.mini-cart__success-icon {
  color: #468500;
}

.mini-cart__success-icon img,
.mini-cart__close img,
.mini-cart__truck img,
.mini-cart__icon-button img,
.mini-cart__qty img {
  width: 100%;
  height: 100%;
}

.mini-cart__shipping {
  width: 337px;
  height: 60px;
  padding: 16px 0 0;
  background: #fff;
}

.mini-cart__shipping-row {
  height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  padding: 0 8px;
  color: #171717;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  direction: ltr;
}

.mini-cart__shipping-row > span:first-child {
  width: 295px;
  direction: rtl;
  text-align: right;
}

.mini-cart__truck {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--mini-cart-blue-dark);
}

.mini-cart__progress {
  position: relative;
  width: 337px;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dde9ff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04));
}

.mini-cart__progress span {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 224px;
  border-radius: inherit;
  background: linear-gradient(90deg, #7da3eb 0%, #0b4ac1 100%);
}

/* Mini-cart product card — matches Figma "Product card - My cart" (8926:49028):
   flex content (right-aligned, RTL) on the inline side, fixed 95px image on the
   far right; gaps 16/8/8; badge 12px, name 14px, price 20px / strike 16px. */
.mini-cart__item {
  display: flex;
  direction: ltr;            /* content first (left), image second (right) */
  align-items: stretch;
  min-height: 134px;
  margin-top: 16px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.mini-cart__content-region {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 0;     /* Figma: pr-8 py-8 */
  direction: rtl;
}

.mini-cart__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mini-cart__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  direction: ltr;            /* badge left, category right */
}

.mini-cart__discount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 0 4px 0 4px;  /* bottom-left + top-right (Figma) */
  background: #3a58ad;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.mini-cart__category {
  margin: 0 0 0 auto;          /* sits at the right whether alone or beside the badge */
  min-width: 0;
  color: #71717b;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-cart__item-title {
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  direction: rtl;
  display: -webkit-box;        /* 2 lines max, never rides onto the image */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-cart__prices {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  direction: rtl;              /* red price on the right, strike to its left */
}

.mini-cart__prices strong {
  color: #c10007;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.mini-cart__prices del {
  color: #a1a1a1;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: line-through;
  white-space: nowrap;
}

.mini-cart__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  direction: ltr;             /* trash+heart left, qty right (Figma) */
}

.mini-cart__actions-region {
  display: flex;
  gap: 8px;
}

.mini-cart__icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mini-cart-border);
  border-radius: 4px;
  color: #262626;
  cursor: pointer;
}

.mini-cart__icon-button img { width: 20px; height: 20px; }

.mini-cart__qty {
  height: 32px;
  display: flex;
  align-items: center;
  border: 1px solid var(--mini-cart-border);
  border-radius: 4px;
  overflow: hidden;
}

.mini-cart__qty button,
.mini-cart__qty span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #5f5c5c;
  font-family: "Cairo", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.mini-cart__qty button { cursor: pointer; }
.mini-cart__qty button img { width: 16px; height: 16px; }
.mini-cart__qty span { background: #f5f5f5; }

.mini-cart__image-region {
  flex: 0 0 95px;
  width: 95px;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0 8px 8px 0;  /* right-side corners (image sits on the right) */
}

.mini-cart__item-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-width: none;
}

/* Sticky footer: a flex child pinned to the drawer bottom (was absolute @860px). */
.mini-cart__bottom {
  position: static;
  flex: 0 0 auto;
  width: auto;
  padding: 16px 24px;
  border-top: 1px solid #d4d4d4;
  background: #fff;
}

.mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  direction: rtl;
}

.mini-cart__total-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.mini-cart__total-title {
  color: var(--mini-cart-blue-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.mini-cart__total-note {
  color: rgba(0, 37, 107, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.mini-cart__total-price {
  color: var(--mini-cart-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  direction: ltr;
  white-space: nowrap;
}

.mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  direction: rtl;
}

.mini-cart__button {
  min-height: 46px;
  padding: 11px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid var(--mini-cart-blue);
  border-radius: 999px;
  color: var(--mini-cart-blue);
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.mini-cart__button--primary {
  color: #fff;
  background: var(--mini-cart-blue);
}

.mini-cart-overlay--pink,
.mini-cart-pink .mini-cart-overlay {
  --mini-cart-primary: #c04a65;
  --mini-cart-primary-dark: #8f2f48;
  --mini-cart-accent: #d8547d;
  --mini-cart-sale: #c04a65;
}

.mini-cart-overlay--pink .mini-cart__progress,
.mini-cart-pink .mini-cart-overlay .mini-cart__progress {
  background: #fde2e8;
}

.mini-cart-overlay--pink .mini-cart__success-icon,
.mini-cart-pink .mini-cart-overlay .mini-cart__success-icon {
  color: #c04a65;
}

.mini-cart-overlay--pink .mini-cart__qty span,
.mini-cart-pink .mini-cart-overlay .mini-cart__qty span {
  background: #fff4f6;
}

@media (max-width: 767px) {
  .mini-cart-overlay:not(.is-open):not(:target) {
    display: none !important;
  }
}

.quick-view-overlay {
  --quick-view-accent: var(--blue-700);
  --quick-view-accent-rgb: 0, 47, 135;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(13, 22, 35, 0.42);
  direction: ltr;
}

.quick-view-overlay.is-open {
  display: flex;
}

.quick-view-overlay.quick-view-overlay--pink {
  --quick-view-accent: #c04a65;
  --quick-view-accent-rgb: 192, 74, 101;
}

.quick-view-modal {
  position: relative;
  width: 932px;
  height: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  color: #000;
}

.quick-view-modal__main {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
  direction: ltr;
}

.quick-view-info,
.quick-view-gallery {
  flex: 1 1 0;
  min-width: 0;
}

.quick-view-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  direction: rtl;
  text-align: right;
}

.quick-view-info__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.quick-view-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.quick-view-title {
  width: 100%;
  margin: 0;
  color: #000;
  font-family: var(--font-primary), Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: right;
  white-space: pre-wrap;
}

.quick-view-rating {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  opacity: 0.8;
  color: #525252;
  direction: ltr;
}

.quick-view-rating__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.quick-view-stars {
  display: flex;
  align-items: center;
}

.quick-view-stars img {
  width: 24px;
  height: 24px;
}

.quick-view-price {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #c10007;
  font-family: var(--font-primary), Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
}

.quick-view-price del {
  color: #a1a1a1;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: line-through;
}

.quick-view-price strong {
  color: #c10007;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.quick-view-description {
  width: 100%;
  margin: 0;
  color: #525252;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: right;
  white-space: pre-wrap;
}

.quick-view-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.quick-view-favorite {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border: 1px solid #d4d4d4;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.quick-view-favorite img {
  width: 20px;
  height: 20px;
}

/* Compare button mirrors the favourite button. */
.quick-view-compare {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border: 1px solid #d4d4d4;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.quick-view-compare img { width: 20px; height: 20px; }

/* Active (in-list) heart/compare: navy fill. */
.quick-view-favorite.is-active,
.quick-view-compare.is-active {
  background: #002b5c;
  border-color: #002b5c;
}
.quick-view-favorite.is-active img,
.quick-view-compare.is-active img {
  filter: brightness(0) invert(1);
}

/* Variation selectors inside the quick view (shown before the buttons). */
.quick-view-variation { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.quick-view-variation__label { font-size: 14px; font-weight: 600; color: #002b5c; }
.quick-view-variation__select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  color: #002b5c;
  cursor: pointer;
}
.quick-view-variations.is-invalid .quick-view-variation__select { border-color: #d33; }

.quick-view-quantity {
  display: flex;
  gap: 12px;
  align-items: center;
  direction: ltr;
}

.quick-view-quantity__label {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
  white-space: nowrap;
}

.quick-view-stepper {
  width: 134px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d4d4d4;
  border-radius: 99px;
  background: #fff;
  direction: ltr;
}

.quick-view-stepper button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.quick-view-stepper img {
  display: block;
  width: 16px;
  height: 16px;
}

.quick-view-stepper span {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  color: #000;
  font-family: "Cairo", var(--font-primary), Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.quick-view-buttons {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-end;
  direction: ltr;
}

.quick-view-button {
  height: 48px;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  border: 1px solid var(--quick-view-accent);
  border-radius: 99px;
  color: var(--quick-view-accent);
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.quick-view-button img {
  width: 18px;
  height: 18px;
}

.quick-view-button--primary {
  border-width: 1.5px;
  color: #fff;
  background: var(--quick-view-accent);
}

.quick-view-divider {
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}

.quick-view-payments {
  width: 100%;
  height: 46px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08);
}

.quick-view-payments img {
  display: block;
  object-fit: contain;
  max-width: none;
}

.quick-view-payment {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.quick-view-payment > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.quick-view-payment__mini {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
}

.quick-view-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  direction: rtl;
}

.quick-view-gallery__wrap {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: flex-end;
  direction: ltr;
  width: 100%;
}

.quick-view-thumbs {
  width: 88px;
  height: 267.163px;
  display: flex;
  flex-direction: column;
  gap: 6.081px;
  align-items: flex-start;
  justify-content: flex-start;
}

.quick-view-thumb {
  width: 85px;
  height: 88px;
  overflow: hidden;
  border: 0.76px solid #eaecf2;
  border-radius: 3.041px;
  background: #fff;
}

.quick-view-thumb.is-active {
  border-color: #002b5c;
  border-width: 1.5px;
}

.quick-view-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-view-photo {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 0.76px solid #eaecf2;
  border-radius: 3.041px;
  background: #fff;
}

.quick-view-photo > img {
  width: 100%;
  height: auto;
  display: block;
}

.quick-view-carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 284px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
}

.quick-view-carousel button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}

.quick-view-carousel img {
  width: 24px;
  height: 24px;
}

.quick-view-expand {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 20px;
  height: 20px;
  display: block;
}

.quick-view-expand img {
  width: 20px;
  height: 20px;
}

.quick-view-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.quick-view-close img {
  width: 24px;
  height: 24px;
}

/* Tablet/mobile: fluid modal, stacked layout (image on top), no clipping. */
@media (max-width: 980px) {
  .quick-view-overlay {
    align-items: center;
    padding: 16px;
    overflow: auto;
  }

  .quick-view-modal {
    width: 95vw;
    height: auto;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* column-reverse → gallery (image) on top, info below */
  .quick-view-modal__main {
    flex-direction: column-reverse;
    align-items: stretch;
    overflow: visible;
  }

  .quick-view-info,
  .quick-view-gallery {
    flex: 1 1 auto;
    width: 100%;
  }

  .quick-view-gallery { align-items: center; }
  .quick-view-gallery__wrap { width: 100%; justify-content: center; }

  .quick-view-photo {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-width: 0;
  }

  .quick-view-thumbs { height: auto; }
}

/* Phones: stack the buttons, keep favourite + quantity tidy on one row. */
@media (max-width: 600px) {
  .quick-view-modal { padding: 16px; gap: 12px; }

  .quick-view-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .quick-view-button {
    width: 100%;
    flex: 0 0 auto;
    padding: 10px 16px;
  }

  .quick-view-controls {
    flex-wrap: wrap;
    gap: 12px;
  }

  .quick-view-close { top: 10px; left: 10px; }
}

.favorites-page {
  min-height: 777px;
  background: #fff;
  direction: rtl;
}

.favorites-hero {
  width: 100%;
  height: 188px;
  display: grid;
  place-items: center;
  background: #eaf7ff;
}

.favorites-hero__inner {
  width: 294px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.favorites-hero h1 {
  width: 294px;
  margin: 0;
  color: var(--blue-850);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.favorites-breadcrumb {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #a0a0a0;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  direction: rtl;            /* RTL: الرئيسيه first (right) → current page last (left) */
}

.favorites-breadcrumb a,
.favorites-breadcrumb span {
  color: inherit;
}

.favorites-breadcrumb span:last-child {
  color: #6f6f6f;
  font-size: 16px;
  line-height: 24px;
}

.favorites-content {
  width: 1283px;
  height: 565px;
  margin: 24px auto 0;
}

.favorites-count {
  width: auto;
  height: 28px;
  margin: 0 0 24px;
  color: var(--blue-850);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: right;
}

.favorites-grid {
  width: 1283px;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 237.4px);
  gap: 24px;
  direction: rtl;                             /* RTL: first product starts top-right */
}

.favorites-card.fp-card {
  width: 237.4px;
  min-height: 513px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.favorites-card .fp-media {
  height: 275px;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.favorites-card .fp-media-frame {
  width: 100%;
  height: 243px;
  padding: 0;
  background: #fff;
}

.favorites-card .fp-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorites-card__remove {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--blue-850);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.favorites-card .fp-actions {
  height: 32px;
  padding-inline: 22.7px;
  background: #fff;
}

.favorites-card .fp-body {
  height: 166px;
  padding: 16px 0 0;
}

.favorites-card .fp-rating {
  width: 157px;
  height: 24px;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 0 auto;
  direction: ltr;
}

.favorites-card .fp-count {
  color: #6d6d6d;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.favorites-card .fp-stars {
  color: #c04a65;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 24px;
}

.favorites-card .fp-name {
  width: 237.4px;
  min-height: 48px;
  margin: 14px 0 0;
  color: #6d6d6d;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
}

.favorites-card .fp-price {
  min-height: 28px;
  margin: 14px 0 0 auto;
  gap: 4px;
}

.favorites-card .fp-currency {
  color: var(--blue-850);
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
}

.favorites-card .fp-amount {
  color: var(--blue-850);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.favorites-card__tags {
  width: 237.4px;
  height: 24px;
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  direction: ltr;
}

.favorites-card__tags span {
  width: 104px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f5f5f5;
  color: #403e3e;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
}

.favorites-card .fp-cta {
  width: 237.4px;
  min-height: 40px;
  margin: 16px 0 0;
  border-radius: 999px;
  background: var(--blue-700);
  font-size: 16px;
  line-height: 24px;
}

.hero-desktop__image {
  width: 100%;
  height: 550px;
}

.hero-desktop__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-desktop__content {
  position: absolute;
  top: 179px;
  inset-inline-start: 80px;
  width: 505px;
  text-align: start;
}

.hero-desktop__content h1,
.hero-mobile__content h1 {
  margin: 0;
  color: var(--blue-800);
  font-weight: 700;
}

.hero-desktop__content h1 {
  font-size: 30px;
  line-height: 36px;
  margin-bottom: 8px;
}

.hero-desktop__content p,
.hero-mobile__content p {
  margin: 0;
}

.hero-desktop__content p {
  width: 505px;
  color: rgba(0, 37, 107, 0.8);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 99px;
  background: var(--blue-700);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.hero-cta--desktop {
  width: 166px;
  flex: 0 0 166px;
  margin-top: 24px;
}

.hero-desktop__benefits {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 52px;
  background: var(--hero-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  direction: rtl;
}

.hero-benefit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-700);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  direction: rtl;
}

.hero-desktop__benefits {
  gap: 56px;
}

.hero-mobile {
  display: none;
  width: 100%;
  height: 442px;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.hero-mobile__image {
  width: 100%;
  height: 442px;
}

.hero-mobile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mobile__content {
  position: absolute;
  top: 24px;
  inset-inline-start: 46px;
  width: 284px;
  text-align: center;
}

.hero-services-desktop,
.hero-services-mobile {
  /* Match the original design: the trust bar IS visible under the hero on
     desktop. (-desktop shows on desktop, -mobile is hidden here and swapped in
     by responsive.css at ≤767px — same pattern as every other section.) */
  background: var(--hero-blue-tint);
  margin: 0 !important;
  border-top: none !important;
}
.hero-services-mobile { display: none; } /* hidden on desktop; responsive.css shows it ≤767 */

.hero-services-desktop {
  width: 100%;
  height: auto;
  border-radius: 0;
  margin-top: -1px !important;
  padding-block: 18px !important;
  padding-inline: 24px;
  box-sizing: border-box;
}

.hero-services-mobile {
  width: 100%;
  min-height: 24px;
  border-radius: 0;
  margin-top: -1px !important;
  padding-block: 18px !important;
  padding-inline: 16px;
  box-sizing: border-box;
}

.hero-services__inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  direction: rtl;
}

.hero-services__inner--desktop {
  max-width: 100%;
  min-height: 32px;
  margin: 0 auto;
  gap: 72px;
}

.hero-services__inner--mobile {
  width: 100%;
  min-height: 24px;
  margin: 0 auto;
  justify-content: flex-start;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.hero-services__inner--mobile::-webkit-scrollbar {
  display: none;
}

.hero-services__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 12px;
  line-height: 1;
  color: var(--blue-800);
  white-space: nowrap;
}

.hero-services__item--desktop {
  min-height: 32px;
}

.hero-services__item--mobile {
  min-height: 24px;
  flex: 0 0 auto;
}

.hero-services__item img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-services__label {
  margin: 0;
  color: var(--blue-800);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.hero-services__item--desktop .hero-services__label {
  font-size: 18px;
  line-height: 28px;
}

.hero-services__item--mobile .hero-services__label {
  font-size: 14px;
  line-height: 20px;
}

.hero-mobile__content h1 {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 8px;
}

.hero-mobile__content p {
  width: 284px;
  color: rgba(0, 37, 107, 0.8);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

.hero-cta--mobile {
  width: 134px;
  margin-top: 16px;          /* Figma: subtitle ends ~136, CTA top 152 = 16px gap */
  margin-inline: auto;
}

.benefits-strip-desktop,
.categories-desktop {
  display: block;
}

.benefits-strip-mobile,
.categories-mobile {
  display: none;
}

.benefits-strip-desktop {
  width: 100%;
  height: auto;
  margin: 0 auto !important;
  padding: 40px 24px 32px !important;
}

.benefits-strip__inner {
  width: 100%;
  height: 112px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  direction: ltr;
}

.benefits-strip__card {
  width: 275px;
  min-width: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.benefits-strip__card img {
  margin-bottom: 14px;
}

.benefits-strip__title,
.benefits-strip__description,
.benefits-strip__mobile-description,
.categories__title,
.categories__label {
  margin: 0;
}

.benefits-strip__title {
  max-width: 220px;
  color: var(--blue-800);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
}

.benefits-strip__description {
  max-width: 252px;
  margin-top: 6px;
  color: rgba(0, 37, 107, 0.7);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  text-align: center;
}

.benefits-strip__metric-row {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  direction: ltr;
}

.benefits-strip__metric {
  color: var(--blue-800);
  font-size: 28px;
  line-height: 28px;
  font-weight: 700;
}

.benefits-strip__metric-label {
  color: var(--blue-800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.benefits-strip__divider {
  width: 1px;
  height: 50px;
  background: rgba(0, 37, 107, 0.12);
  flex: 0 0 1px;
}

.categories-desktop {
  width: 100%;
  min-height: 403px;
  margin-inline: auto;
  padding: 24px 24px;
  direction: rtl;
}

.categories__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
}

.categories__header--desktop {
  width: 100%;
  height: 36px;
  margin-inline: auto;
}

.categories__title {
  color: var(--blue-800);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  text-align: right;
}

.categories__all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  font-weight: 700;
}

.categories__all-link--desktop {
  width: 116px;
  height: 32px;
  gap: 0;
  font-size: 18px;
  line-height: 28px;
}

.categories__all-link--desktop img,
.categories__all-link--mobile img {
  flex: 0 0 auto;
}

.categories__grid--desktop {
  width: 100%;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  direction: rtl;
}

.categories__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categories__card--desktop {
  width: 205px;
}

.categories__card--mobile {
  width: 169px;
  min-width: 169px;
  scroll-snap-align: start;
}

/* Wrapper clips the hover zoom on home category cards (matches /categories/). */
.categories__media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.categories__image {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.categories__card:hover .categories__media .categories__image {
  transform: scale(1.08);
}

.categories__card--desktop .categories__image {
  width: 205px;
  height: 259px;
}

.categories__card--mobile .categories__image {
  width: 169px;
  height: 213px;
}

.categories__label {
  margin-top: 12px;
  color: #001640;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
}

.benefits-strip-mobile {
  width: 341px;
  min-height: 312px;
  margin: 0 auto !important;
  padding-top: 40px !important;
}

.benefits-strip__mobile-grid {
  width: 341px;
  display: grid;
  grid-template-columns: repeat(2, 115px);
  justify-content: space-between;
  row-gap: 32px;
  column-gap: 64px;
  padding-inline: 16px;
}

.benefits-strip__mobile-card {
  width: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.benefits-strip__mobile-card img {
  margin-bottom: 14px;
}

.benefits-strip__mobile-heading {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefits-strip__mobile-metric {
  color: var(--blue-800);
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
}

.benefits-strip__mobile-label {
  margin-top: 2px;
  color: var(--blue-800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.benefits-strip__mobile-description {
  margin-top: 6px;
  color: rgba(0, 37, 107, 0.7);
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
}

.categories-mobile {
  width: 375px;
  min-height: 320px;
  margin: 32px auto 0;
  padding-inline: 16px;
  direction: rtl;
}

.categories__header--mobile {
  width: 343px;
  height: 32px;
  margin-inline: auto;
}

.categories__header--mobile .categories__title {
  font-size: 24px;
  line-height: 32px;
}

.categories__all-link--mobile {
  width: 85px;
  height: 20px;
  gap: 0;
  font-size: 14px;
  line-height: 20px;
}

.categories__scroller {
  width: 343px;
  margin-top: 16px;
  display: flex;
  gap: 12px;
  direction: rtl;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories__scroller::-webkit-scrollbar {
  display: none;
}

.categories__pagination {
  width: 343px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.categories__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 47, 135, 0.31);
  transition: width 200ms ease, background-color 200ms ease;
}

.categories__dot--active {
  width: 29px;
  border-radius: 24px;
  background: var(--blue-700);
}

.promo-banners-desktop,
.featured-products-desktop {
  display: block;
}

.promo-banners-mobile,
.featured-products-mobile {
  display: none;
}

.promo-banners-desktop {
  width: 100%;
  min-height: 192px;
  margin-inline: auto;
  padding: 24px 24px;
}

.promo-banners__desktop-row {
  width: 100%;
  min-height: 144px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
}

.promo-banners__desktop-card {
  display: block;
  flex: 1 1 0;
  width: auto;
  height: 144px;
  overflow: hidden;
}

.featured-products-desktop {
  width: 100%;
  min-height: 621px;
  margin-inline: auto;
  padding: 24px 24px;
  background: #fff;
}

.promo-banners-mobile {
  width: 375px;
  min-height: 166px;
  margin: 32px auto 0;
}

.promo-banners__mobile-top,
.promo-banners__mobile-bottom {
  display: block;
  overflow: hidden;
  width: 375px;
}

.promo-banners__mobile-top {
  height: 80px;
}

.promo-banners__mobile-bottom {
  height: 70px;
  margin-top: 16px;
}

.featured-products-mobile {
  width: 375px;
  min-height: 976px;
  margin: 32px auto 0;
  padding-inline: 16px;
  background: #fff;
}

.promo-banners__desktop-card img,
.promo-banners__mobile-top img,
.promo-banners__mobile-bottom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fp-header {
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
}

.fp-header--desktop {
  height: 36px;
}

.fp-header--mobile {
  width: 343px;
  height: 32px;
}

.fp-title {
  margin: 0;
  color: var(--blue-800);
  font-weight: 700;
  text-align: right;
}

.fp-header--desktop .fp-title {
  font-size: 30px;
  line-height: 36px;
}

.fp-header--mobile .fp-title {
  font-size: 24px;
  line-height: 32px;
}

.fp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-700);
  font-weight: 500;
}

.fp-link--desktop {
  height: 32px;
  font-size: 20px;
  line-height: 1.2;
}

.fp-link--mobile {
  gap: 3px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

.fp-tabs {
  display: flex;
  align-items: center;
  direction: rtl;
}

.fp-tabs--desktop {
  width: 100%;
  height: 38px;
  margin: 20px auto 0;
  gap: 16px;
}

.fp-tabs--mobile {
  width: 343px;
  height: 32px;
  margin: 16px auto 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fp-tabs--mobile::-webkit-scrollbar {
  display: none;
}

.fp-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding-inline: 18px;
  border: 1px solid #d6dfef;
  border-radius: 999px;
  background: #fff;
  color: #2f436e;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.fp-tab--mobile {
  min-height: 32px;
  padding-inline: 14px;
  font-size: 14px;
}

.fp-tab--active {
  border-color: var(--blue-700);
  background: var(--blue-700);
  color: #fff;
}

.fp-grid {
  direction: rtl;
}

.fp-grid--desktop {
  width: 100%;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.fp-grid--mobile {
  width: 343px;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 167px);
  justify-content: space-between;
  row-gap: 16px;
  align-items: stretch;
}

.fp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f1f5f9;   /* Figma: color/slate/100 — unified across all cards */
  border-radius: 6px;          /* Figma: rounded-[6px] */
  box-shadow: none;            /* Figma: no shadow */
  overflow: hidden;
}

.fp-card[hidden] {
  display: none !important;
}

.fp-card--desktop {
  width: 306px;
  min-height: 427px;
}

.fp-card--mobile {
  width: 167px;
  min-height: 416px;
}

.fp-card--discount.fp-card--desktop {
  min-height: 427px;
}

.fp-card--discount.fp-card--mobile {
  min-height: 416px;
}

.fp-media {
  position: relative;
  width: 100%;
  background: #fbfcfe;
}

.fp-media-frame {
  position: relative;
  width: 100%;
  height: 243px;
  overflow: hidden;
  background: #fbfcfe;
}

/* Desktop hover: cross-fade to the secondary (first gallery) image. */
.fp-media-img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fp-card--desktop:hover .fp-media-img--hover { opacity: 1; }

.fp-card--mobile .fp-media-frame {
  height: 180px;
}

.fp-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.fp-card--desktop .fp-media-frame {
  padding: 8px 10px 6px;
}

.fp-card--desktop .fp-media-frame img {
  object-position: center center;
}

.fp-card--mobile .fp-media-frame {
  padding: 8px 8px 6px;
}

.fp-badge {
  position: absolute;
  top: 16px;
  inset-inline-start: auto;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 78px;
  height: 26px;
  padding: 0 12px;
  border-radius: 0 12px 12px 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

.fp-badge--left {
  inset-inline-start: 0;
  inset-inline-end: auto;
  border-radius: 12px 0 0 12px;
}

.fp-badge--best {
  background: var(--primary);
}

.fp-badge--limited {
  background: #f08c1a;
}

.fp-badge--featured {
  background: var(--primary);
}

.fp-badge--new {
  background: #17a56b;
}

.fp-discount {
  position: absolute;
  top: 14px;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: #f0445b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  z-index: 2;
}

.fp-discount--right {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.fp-card--discount .fp-badge--left {
  top: 72px;
}

.fp-card--featured-discount .fp-badge--left {
  top: 72px;
}

.fp-card--mobile .fp-badge {
  top: 10px;
  min-width: 72px;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
}

.fp-card--mobile .fp-discount {
  top: 10px;
  width: 42px;
  height: 42px;
  font-size: 11px;
}

.fp-card--mobile.fp-card--discount .fp-badge--left {
  top: 58px;
}

.fp-card--mobile.fp-card--featured-discount .fp-badge--left {
  top: 58px;
}

.fp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding-inline: 8px;
  gap: 0;
  color: #6f7f9e;
}

.fp-actions--mobile {
  padding-inline: 8px;
}

.fp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  /* Mask icons take the active theme colour (navy default, category/landing tint). */
  color: var(--primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.fp-action img {
  display: block;
  width: 18px;
  height: 18px;
}

/* Favourited heart = fixed red/pink so it stays distinct from the theme colour. */
.fp-wishlist.is-active { color: #e0245e; }

.fp-divider {
  width: 1px;
  height: 15px;
  background: #d8e0ed;
  flex: 0 0 auto;
}

.fp-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding-top: 12px;
  padding-inline: 16px;
  box-sizing: border-box;
}

.fp-body--mobile {
  padding-top: 8px;
  padding-inline: 12px;
}

.fp-rating {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  height: 24px;
  margin-inline-start: auto;
  direction: rtl;
  color: #8c98ad;
}

.fp-rating--mobile {
  width: 100%;
  height: 20px;
  gap: 4px;
}

.fp-count {
  font-size: 12px;
  line-height: 1;
}

.fp-stars {
  color: #f4ae2b;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.03em;
}

.fp-count--mobile {
  font-size: 11px;
}

.fp-stars--mobile {
  font-size: 12px;
}

.fp-name {
  width: 100%;
  margin: 10px 0 0;
  color: var(--blue-800);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: right;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 48px;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.fp-name--mobile {
  width: 100%;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  min-height: 40px;
  overflow-wrap: anywhere;
}

.fp-price,
.fp-prices {
  margin: 10px 0 0 auto;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  direction: rtl;
  flex-wrap: nowrap;
  max-width: 100%;
}

.fp-price--primary {
  width: auto;
  min-height: 28px;
}

.fp-price--mobile.fp-price--primary {
  width: auto;
  min-height: 24px;
}

.fp-prices--discount {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  direction: rtl;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 28px;
  height: 28px;
  margin-top: 10px;
}

.fp-prices--mobile {
  min-height: 24px;
  gap: 8px;
}

.fp-currency {
  color: #667796;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.fp-currency--mobile {
  font-size: 10px;
}

.fp-amount {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--blue-800);
}

.fp-amount--mobile {
  font-size: 15px;
}

.fp-price--old .fp-amount {
  color: #b5bfd0;
  text-decoration: line-through;
}

.fp-price--old .fp-currency {
  color: #9eabbe;
}

.fp-price--sale .fp-amount,
.fp-price--sale .fp-currency {
  color: #ef4454;
}

.fp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  min-height: 36px;
  margin: 14px 20px 14px;
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

button.fp-cta { -webkit-appearance: none; appearance: none; }
.fp-cta.is-loading { opacity: .6; pointer-events: none; }

.fp-cta--mobile {
  width: calc(100% - 24px);
  min-height: 34px;
  margin: 14px auto 12px;
  font-size: 14px;
}

.promo-cta-desktop,
.solutions-desktop {
  display: block;
}

.promo-cta-mobile,
.solutions-mobile {
  display: none;
}

.promo-cta-desktop {
  width: 100%;
  min-height: 441px;
  margin-inline: auto;
  padding: 0 24px;
}

.promo-cta__row--desktop {
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 20px;
  direction: rtl;
}

.promo-cta__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.promo-cta__card--desktop {
  position: relative !important;
  width: 630px !important;
  height: 393px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  flex: 0 0 630px !important;
}

.promo-cta__card--mobile {
  width: 343px;
  height: 301px;
  border-radius: 16px;
}

.promo-cta__bg {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: cover;        /* Figma: bg covers its (oversized) box, no distortion */
}

.promo-cta__card--quiz .promo-cta__bg {
  width: 112.20%;
  height: 111.79%;
  left: -6.10%;
  top: -0.10%;
}

.promo-cta__card--compare.promo-cta__card--desktop .promo-cta__bg {
  width: 120.62%;
  height: 120.18%;
  left: -20.63%;
  top: -9.01%;
}

.promo-cta__card--compare.promo-cta__card--mobile .promo-cta__bg {
  width: 127.07%;
  height: 127.06%;
  left: -27.01%;
  top: -4.52%;
}

.promo-cta__card--quiz.promo-cta__card--mobile .promo-cta__bg {
  width: 117.36%;
  height: 125.55%;
  left: -8.62%;
  top: -3.77%;
}

.promo-card__content {
  position: absolute;
  z-index: 1;
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.promo-cta__content {
  position: absolute;
}

/* Row container (golden source) */
.promo-cta__row--desktop {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  padding: 64px 24px 0 !important;
  direction: ltr !important;
}

/* الصورة — تملأ الكارت (object-fit cover) */
.promo-cta__card--desktop .promo-cta__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

.promo-cta__content--desktop {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  left: unset !important;
  transform: none !important;
  width: 360px !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-end !important;
}

.promo-cta__title--desktop-compare {
  color: #002363 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  text-align: right !important;
  margin: 0 !important;
}

.promo-cta__title--desktop-quiz {
  color: #002f87 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  text-align: right !important;
  margin: 0 !important;
}

.promo-cta__text--desktop-compare,
.promo-cta__text--desktop-quiz {
  color: #002f87 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  text-align: right !important;
  margin: 0 !important;
  white-space: normal !important;
}

.promo-card__btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;
  margin-inline-start: auto !important;
  height: 38px !important;
  padding: 8px 32px !important;
  border: 1px solid #002f87 !important;
  border-radius: 99px !important;
  color: #002f87 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Desktop = button on the right; Mobile = button centered (matches the centered
   title/description on mobile). Both cards (compare + events) share these classes. */
.promo-cta__card--mobile .promo-card__btn {
  align-self: center !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.promo-cta__content--mobile {
  top: 16px;
  right: 24px;
}

.promo-cta__card--compare .promo-cta__content--desktop {
  width: 347px;
  max-width: 347px;
}

.promo-cta__card--quiz .promo-cta__content--desktop {
  width: 295px;
  max-width: 295px;
}

.promo-cta__card--compare .promo-cta__content--mobile,
.promo-cta__card--quiz .promo-cta__content--mobile {
  width: 295px;
  max-width: 295px;
}

.promo-card__content h3,
.promo-card__content p {
  margin: 0;
  width: 100%;
  text-align: right;
}

.promo-cta__title {
  color: var(--blue-700);
  font-weight: 700;
}

.promo-cta__content--desktop .promo-cta__title {
  font-size: 24px;
  line-height: 32px;
}

.promo-cta__title--mobile-compare {
  color: var(--blue-800);
  font-size: 18px;
  line-height: 28px;
}

.promo-cta__title--mobile-quiz {
  color: var(--blue-700);
  font-size: 16px;
  line-height: 24px;
}

.promo-cta__text {
  color: var(--blue-700);
  font-weight: 500;
}

.promo-cta__content--desktop .promo-cta__text {
  font-size: 16px;
  line-height: 24px;
}

.promo-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 156px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--blue-700);
  border-radius: 99px;
  color: var(--blue-700);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: transparent;
  box-sizing: border-box;
  direction: rtl;
  gap: 8px;
}

.promo-card__btn {
  position: absolute;
  right: 0;
  margin: 0;
}

.promo-cta__button-label {
  position: static;
  line-height: 24px;
  white-space: nowrap;
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  direction: rtl;
}

.promo-cta-mobile {
  width: 375px;
  min-height: 650px;
  margin: 0 auto;
  padding: 16px 16px 0;
  box-sizing: border-box;
}

.promo-cta__card--mobile + .promo-cta__card--mobile {
  margin-top: 16px;
}

.promo-cta__text--mobile-compare {
  color: rgba(0, 37, 107, 0.8);
  font-size: 14px;
  line-height: 20px;
}

.promo-cta__text--desktop-quiz {
  white-space: nowrap;
  max-width: none;
}

.promo-cta__text--mobile-quiz {
  color: var(--blue-700);
  font-size: 13px;
  line-height: 20px;
  white-space: normal;
  width: 295px;
}

.promo-cta__button--desktop-compare {
  width: 161px;
  top: 70px;
  margin-right: 0 !important;
  margin-left: auto !important;
}

.promo-cta__button--desktop-quiz {
  width: 156px;
  top:70px;
}

.promo-cta__button--mobile-compare {
  width: 180px;
  top: 76px;
}

.promo-cta__button--mobile-quiz {
  width: 156px;
  top: 74px;
}

.solutions-desktop {
  width: 100%;
  min-height: 650px;
  margin-inline: auto;
  padding: 24px 24px 0;
}

.solutions-mobile {
  width: 375px;
  min-height: 489px;
  margin: 0 auto;
  padding: 16px 16px 0;
  box-sizing: border-box;
}

.solutions__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.solutions__header--desktop {
  width: 100%;
  height: 36px;
  margin-inline: auto;
}

.solutions__header--mobile {
  width: 343px;
  height: 32px;
  margin-inline: auto;
}

.solutions__title {
  margin: 0;
  width: 100%;
  margin-inline-start: auto;
  color: var(--blue-800);
  font-weight: 700;
  text-align: right;
}

.solutions__header--desktop .solutions__title {
  font-size: 30px;
  line-height: 36px;
}

.solutions__header--mobile .solutions__title {
  font-size: 24px;
  line-height: 32px;
}

.solutions__viewport--desktop {
  width: 100%;
  margin: 24px auto 0;
  overflow: hidden;
}

.solutions__viewport--mobile {
  width: 343px;
  margin: 16px auto 0;
  overflow: hidden;
}

.solutions__scroller {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  direction: ltr;
}

.solutions__scroller::-webkit-scrollbar {
  display: none;
}

.solutions__scroller--desktop {
  gap: 16px;
  scroll-snap-type: x mandatory;
}

.solutions__scroller--mobile {
  gap: 12px;
  scroll-snap-type: x proximity;
}

.solutions__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #dfe7f2;
  flex: 0 0 auto;
  scroll-snap-align: end;
}

.solutions__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 99, 0) 46%, rgba(0, 35, 99, 0.12) 72%, rgba(0, 35, 99, 0.28) 100%);
  pointer-events: none;
}

.solutions__card--desktop-wide {
  width: 697px;
  height: 521px;
}

.solutions__card--desktop-narrow {
  width: 577px;
  height: 521px;
}

.solutions__card--mobile {
  width: 228px;
  height: 387px;
}

.solutions__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.solutions__card--desktop-heating .solutions__image {
  position: absolute;
  top: -11.42%;
  left: 0;
  width: 100%;
  height: 133.78%;
  object-fit: fill;
}

.solutions__card--mobile-sleep .solutions__image {
  position: absolute;
  top: 0;
  left: -20.74%;
  width: 169.74%;
  height: 100%;
  object-fit: fill;
}

.solutions__card--mobile-heating .solutions__image {
  position: absolute;
  top: 0;
  left: -40.35%;
  width: 169.74%;
  height: 100%;
  object-fit: fill;
}

.solutions__card--mobile-mother .solutions__image {
  object-fit: contain;
}

.solutions__overlay {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  inset-inline: 0;
}

.solutions__overlay--desktop {
  bottom: 31px;
  gap: 10px;
}

.solutions__overlay--mobile {
  bottom: 20px;
  gap: 10px;
}

.solutions__headline-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 198px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(0, 35, 99, 0.14);
  flex-direction: row-reverse;
}

.solutions__headline {
  color: var(--blue-800);
  font-weight: 700;
  display: block;
  text-align: center;
}

.solutions__overlay--desktop .solutions__headline {
  font-size: 16px;
  line-height: 24px;
}

.solutions__overlay--mobile .solutions__headline {
  font-size: 15px;
  line-height: 22px;
}

.solutions__label {
  display: block;
  color: #fff;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 35, 99, 0.28);
}

.solutions__overlay--desktop .solutions__label {
  width: min(100%, 260px);
  font-size: 14px;
  line-height: 20px;
}

.solutions__overlay--mobile .solutions__label {
  width: min(100%, 190px);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.solutions__chevron {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.solutions__chevron::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--blue-700);
  border-right: 1.5px solid var(--blue-700);
  transform: rotate(45deg);
}

.solutions__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  direction: ltr;
}

.solutions__dots--desktop {
  width: 100%;
  height: 5px;
  margin: 16px auto 0;
}

.solutions__dots--mobile {
  width: 343px;
  height: 6px;
  margin: 16px auto 0;
}

.solutions__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 47, 135, 0.31);
  transition: width 200ms ease, border-radius 200ms ease, background-color 200ms ease;
}

.solutions__dots--desktop .solutions__dot {
  width: 5px;
  height: 5px;
}

.solutions__dot--active {
  width: 29px;
  border-radius: 24px;
  background: var(--blue-700);
}

.hotspot-discovery-desktop {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 24px 24px;
  direction: rtl;
}

.hotspot-discovery-mobile {
  display: none;
  width: 375px;
  margin: 32px auto 0;
  padding-inline: 16px;
  direction: rtl;
}

.hotspot-discovery__header {
  display: flex;
  justify-content: flex-end;
  direction: rtl;
}

.hotspot-discovery__header--desktop,
.hotspot-discovery__viewport--desktop,
.hotspot-discovery__dots--desktop {
  width: 100%;
  margin-inline: auto;
}

.hotspot-discovery__header--mobile,
.hotspot-discovery__viewport--mobile,
.hotspot-discovery__dots--mobile {
  width: 343px;
  margin-inline: auto;
}

.hotspot-discovery__title {
  margin: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
  display: block;
  width: 100%;
  color: var(--blue-800);
  font-weight: 700;
  text-align: right;
}

.hotspot-discovery__header--desktop .hotspot-discovery__title {
  font-size: 30px;
  line-height: 36px;
}

.hotspot-discovery__header--mobile .hotspot-discovery__title {
  font-size: 24px;
  line-height: 32px;
}

.hotspot-discovery__viewport--desktop {
  margin-top: 24px;
  overflow: hidden;
  position: relative;
}

.hotspot-discovery__viewport--mobile {
  margin-top: 16px;
  overflow: hidden;
  position: relative;
}

.hotspot-discovery__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  direction: rtl;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
}

.hotspot-discovery__track::-webkit-scrollbar {
  display: none;
}

.hotspot-discovery__track--mobile {
  gap: 12px;
}

.hotspot-discovery__card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  scroll-snap-align: start;
}

.hotspot-discovery__card--desktop {
  width: 615.9417px;
  height: 427.0267px;
}

.hotspot-discovery__card--desktop:first-child {
  width: 617.9095px;
}

.hotspot-discovery__card--mobile {
  width: 313px;
  height: 217px;
}

.hotspot-discovery__card--mobile:first-child {
  width: 314px;
}

.hotspot-discovery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotspot-discovery__spot {
  position: absolute;
  left: calc(var(--spot-x) - 9px);
  top: calc(var(--spot-y) - 9px);
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  opacity: 0.88;
  transition: transform 240ms ease, opacity 240ms ease, box-shadow 240ms ease;
}

.hotspot-discovery__spot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  background: transparent;
  transition: transform 240ms ease, opacity 240ms ease, box-shadow 240ms ease;
}

.hotspot-discovery__spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.22);
  transition: box-shadow 240ms ease, transform 240ms ease, opacity 240ms ease;
}

.hotspot-discovery__spot:hover::after,
.hotspot-discovery__spot:focus-visible::after,
.hotspot-discovery__spot:active::after {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.14);
  transform: scale(1.06);
}

.hotspot-discovery__spot:hover::before,
.hotspot-discovery__spot:focus-visible::before,
.hotspot-discovery__spot:active::before {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
}

.hotspot-discovery__spot:hover,
.hotspot-discovery__spot:focus-visible,
.hotspot-discovery__spot:active {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.24);
}

.hotspot-discovery__spot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hotspot-discovery__spot--mobile {
  left: calc(var(--spot-x) - 8px);
  top: calc(var(--spot-y) - 8px);
  width: 16px;
  height: 16px;
}

.hotspot-discovery__spot--mobile::before {
  inset: -3px;
}

.hotspot-discovery__popup {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  direction: ltr;
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  will-change: left, top, opacity, transform;
}

.hotspot-discovery__popup.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hotspot-discovery__popup--desktop {
  width: 267px;
  min-height: 100px;
}

.hotspot-discovery__popup--mobile {
  width: 267px;
  min-height: 100px;
}

.hotspot-discovery__popup-copy {
  width: 169px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
}

.hotspot-discovery__popup-title {
  width: 100%;
  color: #000;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: right;
}

.hotspot-discovery__popup-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.hotspot-discovery__popup-arrow-circle {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--blue-700);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hotspot-discovery__popup-arrow {
  position: relative;
  width: 18px;
  height: 18px;
}

.hotspot-discovery__popup-arrow::before {
  content: "";
  position: absolute;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
}

.hotspot-discovery__popup-price {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  direction: ltr;
  color: var(--blue-700);
  white-space: nowrap;
}

.hotspot-discovery__popup-currency {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
}

.hotspot-discovery__popup-amount {
  font-family: "Poppins", var(--font-primary);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.hotspot-discovery__popup-media {
  width: 62px;
  height: 76px;
  flex: 0 0 62px;
  border-radius: 20px;
  overflow: hidden;
}

.hotspot-discovery__popup-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotspot-discovery__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.hotspot-discovery__dots--desktop {
  margin-top: 16px;
}

.hotspot-discovery__dots--mobile {
  margin-top: 16px;
}

.hotspot-discovery__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 47, 135, 0.31);
}

.hotspot-discovery__dot--active {
  width: 29px;
  background: var(--blue-700);
}

.doctors-strip-desktop {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 24px 24px 0;
  background: transparent;
}

.doctors-strip-mobile {
  display: none;
  width: 375px;
  margin: 32px auto 0;
  padding-inline: 16px;
}

.doctors-strip__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                /* Figma: image → name gap */
  flex: 0 0 auto;
}

.doctors-strip__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;      /* Figma: Component 13 rounded-[8px] */
}

.doctors-strip__card--desktop {
  width: 249.6px;
}

.doctors-strip__card--mobile {
  width: 193px;
}

.doctors-strip__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Doctor name under the card — Figma: 16px Bold, #002363, centered */
.doctors-strip__name {
  width: 100%;
  text-align: center;
  font-family: 'GE SS Two', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #002363;
}

.doctors-strip__card--desktop .doctors-strip__image {
  height: 397px;
}

.doctors-strip__card--mobile .doctors-strip__image {
  height: 326px;
}

.doctors-strip__marquee {
  width: 100%;
  overflow: hidden;
}

.doctors-strip__grid {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.doctors-strip__grid--desktop {
  width: 100%;
  justify-content: space-between;
}

.doctors-strip__grid--mobile {
  width: 343px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;
}

.doctors-strip__grid--mobile::-webkit-scrollbar {
  display: none;
}

.doctors-strip__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(25, 31, 51, 0.34);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}

.doctors-strip__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #fff;
  transform: translate(-36%, -50%);
}

.doctors-strip__card:hover .doctors-strip__play,
.doctors-strip__card:focus-within .doctors-strip__play {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.doctors-strip__card:not(:hover):not(:focus-within) .doctors-strip__play {
  transform: translate(-50%, -50%) scale(0.92);
}

.doctors-strip__dots {
  width: 343px;
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.doctors-strip__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 47, 135, 0.31);
}

.doctors-strip__dot--active {
  width: 29px;
  background: var(--blue-700);
}

.prebuy-content-desktop {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 24px 24px;
}

.prebuy-content-mobile {
  display: none;
  width: 375px;
  margin: 32px auto 0;
  padding-inline: 16px;
}

.prebuy-content__header--desktop {
  width: 100%;
  margin-inline: auto;
  direction: rtl;
}

.prebuy-content__header--mobile {
  width: 343px;
  margin-inline: auto;
  direction: rtl;
}

.prebuy-content__title {
  margin: 0;
  color: var(--blue-800);
  font-weight: 700;
  text-align: right;
}

.prebuy-content__header--desktop .prebuy-content__title {
  font-size: 30px;
  line-height: 36px;
}

.prebuy-content__header--mobile .prebuy-content__title {
  font-size: 24px;
  line-height: 32px;
}

.prebuy-content__subtitle {
  margin: 8px 0 0;
  color: var(--blue-800);
  font-weight: 500;
  text-align: right;
}

.prebuy-content__header--desktop .prebuy-content__subtitle {
  font-size: 18px;
  line-height: 28px;
}

.prebuy-content__header--mobile .prebuy-content__subtitle {
  font-size: 16px;
  line-height: 24px;
}

.prebuy-content__row--desktop {
  width: 100%;
  margin: 16px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.prebuy-content__scroller {
  width: 343px;
  margin: 16px auto 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.prebuy-content__scroller::-webkit-scrollbar {
  display: none;
}

.prebuy-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 314px;
  border-radius: 8px;
  background: #fff;
}

.prebuy-card--desktop {
  height: 360px;
}

.prebuy-card--mobile {
  height: 360px;
}

.prebuy-card__image-wrap {
  position: relative;
  width: 314px;
  height: 224px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.prebuy-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prebuy-card__tag {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 99px;
  background: #e2e8f0;
  color: rgba(0, 37, 107, 0.7);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.prebuy-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 314px;
  padding: 12px 8px;
  align-items: flex-end;
}

.prebuy-card__date {
  margin: 0;
  width: 100%;
  color: rgba(9, 8, 50, 0.6);
  font-family: "MadaniArabic-Regular", var(--font-primary);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  text-align: right;
}

.prebuy-card__title {
  margin: 0;
  width: 298px;
  color: #090832;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: right;
}

.prebuy-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
  gap: 6px;
  color: var(--blue-700);
  font-family: "MadaniArabic-Regular", var(--font-primary);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  direction: rtl;
  text-align: right;
  width: 100%;
}

.prebuy-card__cta::after {
  content: "\2190";
  width: auto;
  height: auto;
  flex: 0 0 auto;
  color: currentColor;
  font-size: 18px;
  line-height: 24px;
}

.prebuy-content__dots {
  width: 343px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.prebuy-content__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 47, 135, 0.31);
}

.prebuy-content__dot--active {
  width: 29px;
  background: var(--blue-700);
}

.trust-proof-desktop {
  display: block;
  width: 100%;
  padding: 24px 0 32px;
  background: var(--blue-050);
  overflow: hidden;
}

.trust-proof-mobile {
  display: none;
  width: 100%;
  margin: 0 auto;
  padding: 16px 0 24px;
  background: var(--blue-050);
  overflow: hidden;
}

.trust-proof__header--desktop {
  width: 100%;
  margin: 0 auto;
  direction: rtl;
}

.trust-proof__header--mobile {
  width: 343px;
  margin: 0 auto;
  direction: rtl;
}

.trust-proof__title {
  margin: 0;
  color: var(--blue-800);
  text-align: right;
}

.trust-proof__header--desktop .trust-proof__title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

.trust-proof__header--mobile .trust-proof__title {
  display: block;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.trust-proof__rows--desktop {
  width: 100%;
  margin: 24px auto 0;
}

.trust-proof__rows--mobile {
  width: 100%;
  margin: 16px auto 0;
}

.trust-proof__row {
  display: flex;
  overflow: hidden;
  width: 100%;
  direction: ltr;
  justify-content: flex-start;
}

.trust-proof__row + .trust-proof__row {
  margin-top: 12px;
}

.trust-proof__row--desktop {
  height: 210px;
}

.trust-proof__row--mobile {
  height: 210px;
}

.trust-proof__track {
  display: flex;
  width: max-content;
  height: 210px;
  will-change: transform;
  flex-wrap: nowrap;
  direction: ltr;
  justify-content: flex-start;
  align-items: stretch;
}

.trust-proof__group {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
  width: max-content;
  flex-wrap: nowrap;
  direction: ltr;
  justify-content: flex-start;
}

.trust-proof__track--forward {
  animation: trust-proof-marquee-forward 34s linear infinite;
}

.trust-proof__track--reverse {
  animation: trust-proof-marquee-reverse 34s linear infinite;
}

.trust-proof__card {
  display: flex;
  flex: 0 0 auto;
  width: 437px;
  height: 210px;
  direction: ltr;
  border-radius: 24px;
  overflow: hidden;
  background: #f6f8ff;
}

.trust-proof__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 219px;
  width: 219px;
  height: 210px;
  padding: 20px 22px 20px 24px;
  text-align: right;
}

.trust-proof__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  justify-content: flex-start;
  color: var(--blue-700);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.trust-proof__verified-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue-700);
}

.trust-proof__verified-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 4px;
  height: 2px;
  border-right: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(45deg);
}

.trust-proof__stars {
  display: flex;
  gap: 2px;
  margin-top: 18px;
}

.trust-proof__stars span {
  position: relative;
  width: 28px;
  height: 28px;
}

.trust-proof__stars span::before {
  content: "★";
  position: absolute;
  inset: 0;
  color: #ff7e84;
  font-size: 25px;
  line-height: 28px;
  text-align: center;
}

.trust-proof__body {
  margin: 18px 0 0;
  width: 100%;
  color: #6c7685;
  font-size: 14px;
  line-height: 1.48;
  font-weight: 300;
  text-align: center;
}

.trust-proof__name {
  margin: auto 0 0;
  width: 100%;
  color: #101010;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

.trust-proof__media {
  display: block;
  flex: 0 0 218px;
  width: 218px;
  height: 210px;
  object-fit: cover;
}

.trust-proof__row--mobile .trust-proof__card {
  width: 375px;
}

.trust-proof__row--mobile .trust-proof__copy {
  flex-basis: 219px;
  width: 219px;
  padding: 18px 18px 18px 20px;
}

.trust-proof__row--mobile .trust-proof__body {
  font-size: 13px;
  line-height: 1.5;
}

.trust-proof__row--mobile .trust-proof__name {
  font-size: 14px;
}

.trust-proof__row--mobile .trust-proof__media {
  flex-basis: 156px;
  width: 156px;
}

.trust-proof__row:hover .trust-proof__track,
.trust-proof__row:focus-within .trust-proof__track {
  animation-play-state: paused;
}

@keyframes trust-proof-marquee-forward {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes trust-proof-marquee-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.faq-desktop {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 34px 24px 0;
}

.faq-mobile {
  display: none;
  width: 375px;
  margin: 0 auto;
  padding: 32px 16px 0;
}

.faq__inner--desktop {
  width: 100%;
  margin-inline: auto;
}

.faq__inner--mobile {
  width: 343px;
  margin-inline: auto;
}

.faq__title {
  margin: 0;
  color: var(--blue-800);
  font-weight: 700;
  text-align: right;
}

.faq__inner--desktop .faq__title {
  font-size: 30px;
  line-height: 36px;
}

.faq__inner--mobile .faq__title {
  font-size: 24px;
  line-height: 32px;
}

.faq__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;                 /* Figma: container gap-[6px] */
}

.faq__list--desktop {
  width: 100%;
}

.faq__list--mobile {
  width: 343px;
}

.faq__item {
  border-bottom: 1px solid #d9dde4;
}

/* Figma: the open item becomes a filled, rounded card (#f8fafc / slate-50). */
.faq__item[open],
.faq__item.is-open {
  background: #f8fafc;
  border-radius: 16px;
  border-bottom: 0;
}

.faq__question {
  position: relative;
  display: block;
  list-style: none;
  margin: 0;
  padding: 16px 60px 16px 20px;
  color: #090832;
  font-family: var(--font-primary);
  font-weight: 500;
  text-align: right;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::before,
.faq__question::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: #090832;
  transition: transform 0.2s ease;
}

.faq__question::before {
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  right: 20px;
}

.faq__question::after {
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
  right: 26px;
}

.faq__item.is-open .faq__question::before,
.faq__item[open] .faq__question::before {
  transform: translateY(-50%) rotate(-45deg);
}

.faq__item.is-open .faq__question::after,
.faq__item[open] .faq__question::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__item--desktop .faq__question {
  min-height: 56px;
  font-size: 16px;          /* Figma: text-base/medium (16px) */
  line-height: 24px;
}

.faq__item--mobile .faq__question {
  min-height: 40px;
  padding: 8px 40px 8px 12px;
  font-size: 16px;
  line-height: 24px;
}

.faq__answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 20px 28px;     /* Figma: open answer row pb-[28px] */
  transition: height 0.32s ease, opacity 0.24s ease;
  will-change: height, opacity;
}

.faq__answer p {
  margin: 0;
  color: #606971;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: right;
}

.faq__item.is-open .faq__answer,
.faq__item[open] .faq__answer {
  opacity: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  color: #fff;
  width: 100%;
  max-width: 100%;
}

.site-footer-desktop {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-top: 96px;
  padding: 48px 24px 24px;
  box-sizing: border-box;
}

.site-footer-mobile {
  display: none;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-top: 48px;
  padding: 0;                  /* padding now lives on __inner--mobile (24/20/18) */
  box-sizing: border-box;
}

.site-footer__inner--desktop {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.site-footer__inner--mobile {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 24px 20px 18px;     /* Figma: 24 top / 20 horizontal / 18 bottom */
  box-sizing: border-box;
}

/* Accordion "+" icon (Figma plus, 24px white) */
.footer-accordion-icon {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  color: #fff;
}

/* Mobile legal links row */
.site-footer__legal-links--mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  direction: rtl;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.site-footer__legal-links--mobile a { color: #fff; text-decoration: none; }
.site-footer__legal-links--mobile .site-footer__legal-divider { color: #fff; }

.site-footer__top {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 308px) minmax(0, 100px) minmax(0, 96px) minmax(0, 154px) minmax(0, 296px);
  column-gap: 81.5px;
  align-items: start;
  /* The columns total 1280px but the inner container is full-width, so
     distribute the slack: newsletter (col 1) hugs the left edge and the
     brand (col 5) hugs the right edge — matching the .site-footer__middle
     row below, so the logo lines up exactly above the tax/registration block. */
  justify-content: space-between;
}

.site-footer__column,
.site-footer__brand,
.site-footer__newsletter,
.site-footer__legal,
.site-footer__middle,
.site-footer__bottom,
.site-footer__mobile-accordions,
.site-footer__mobile-payments,
.site-footer__mobile-copyright {
  direction: rtl;
}

.site-footer__title {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: right;
}

.site-footer__title--medium {
  font-weight: 500;
}

.site-footer__title--mobile-newsletter {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.site-footer__newsletter .site-footer__title {
  margin-bottom: 8px;
}

.site-footer__paragraph {
  margin: 0;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: right;
}

.site-footer__paragraph--small {
  font-size: 14px;
  line-height: 20px;
}

.site-footer__newsletter .site-footer__paragraph {
  margin-top: 0;
}

.site-footer__brand .site-footer__paragraph {
  margin-top: 28px;
}

.site-footer__subscribe {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 0;
  margin-top: 24px;
}

.site-footer__subscribe-field input {
  width: 226.205px;
  height: 42.18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0 16px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}

.site-footer__subscribe-field input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__subscribe-button {
  flex: 0 0 auto;
  width: 81.795px;
  height: 42.18px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: #fff;
  color: #004189;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.site-footer__column--support {
  grid-column: 2;
}

.site-footer__column--account {
  grid-column: 3;
}

.site-footer__column--about {
  grid-column: 4;
}

.site-footer__column a,
.site-footer__legal a,
.site-footer__mobile-row {
  color: #fff;
  font-family: var(--font-primary);
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: right;
}

.site-footer__brand {
  direction: rtl;
  display: flex;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
  justify-self: end;
  grid-column: 5;
  width: 100%;
  max-width: 296px;
  min-width: 0;
}

.site-footer__newsletter {
  justify-self: start;
  grid-column: 1;
  width: 100%;
  max-width: 308px;
  min-width: 0;
}

.site-footer__brand-logo {
  display: block;
  margin: 0 0 0 auto;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.site-footer__brand-rule {
  width: 160px;
  height: 1px;
  margin-top: 8px;
  margin-right: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.18);
}

.site-footer__social {
  display: flex;
  direction: ltr;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
  align-self: flex-end;
  width: 100%;
  margin-inline-start: auto;
}

.site-footer__social a,
.site-footer__social img,
.site-footer__social-row,
.site-footer__payment-strip,
.site-footer__registration-icon {
  display: block;
}

.site-footer__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.site-footer__legal--bottom {
  margin-top: 0;
  justify-content: flex-end;
  justify-self: end;
}

.site-footer__legal a {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.site-footer__divider {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.42);
}

.site-footer__middle {
  display: flex;
  direction: ltr;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
}

.site-footer__certifications {
  display: flex;
  direction: rtl;
  align-items: flex-start;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}

.site-footer__registration {
  display: flex;
  direction: rtl;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  text-align: right;
  justify-content: flex-start;
}

.site-footer__registration-copy {
  display: flex;
  flex-direction: column;
  direction: rtl;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  width: 140px;
  text-align: right;
}

.site-footer__registration-label,
.site-footer__registration-number {
  display: block;
  color: #fff;
  font-family: var(--font-primary);
  width: 100%;
  white-space: nowrap;
  text-align: right;
  direction: rtl;
}

.site-footer__registration-label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
}

.site-footer__registration-number {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}

.site-footer__registration-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  direction: ltr;
  align-items: center;
  column-gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__locale {
  display: flex;
  direction: ltr;
  align-items: center;
  width: 89.925px;
  height: 22px;
  color: #fff;
  font-family: "Cairo Play", var(--font-primary);
  font-size: 10.5px;
  line-height: 15.75px;
  font-weight: 400;
  gap: 3px;
}

.site-footer__locale-divider {
  width: 1px;
  height: 16px;
  margin-inline: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.site-footer__copyright {
  margin: 0;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  justify-self: center;
}

.site-footer__brand--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 100%;          /* override desktop base max-width:296 */
  margin-inline: auto;
}

/* center the logo on mobile (overrides the desktop margin-left:auto) */
.site-footer__brand--mobile .site-footer__brand-logo {
  display: block;
  margin-inline: auto;
}

.site-footer__brand--mobile .site-footer__paragraph {
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

/* center the social-row strip on mobile (was left-aligned at content edge) */
.site-footer__brand--mobile .site-footer__social-row {
  display: block;
  margin-inline: auto;
}

.site-footer__legal--mobile {
  margin-top: 40px;
  gap: 16px;
}

.site-footer__legal--mobile a {
  font-size: 14px;
  line-height: 20px;
}

.site-footer__newsletter--mobile {
  margin-top: 40px;
  width: 100%;
  max-width: 335px;          /* override desktop base max-width:308 */
  margin-inline: auto;       /* override justify-self:start (right in RTL) */
  justify-self: center;
}

.site-footer__subscribe--mobile {
  margin-top: 0;
  width: 100%;
  max-width: 335px;
  margin-inline: auto;
  display: flex;
}

/* let the email field flex-fill instead of its fixed desktop width */
.site-footer__subscribe--mobile .site-footer__subscribe-field {
  flex: 1 1 auto;
}
.site-footer__subscribe--mobile .site-footer__subscribe-field input {
  width: 100%;
}

.site-footer__subscribe--mobile .site-footer__subscribe-field input {
  width: 253.705px;
}

.site-footer__social-row {
  margin-top: 16px;
  width: 100%;
  max-width: 335.5px;
  height: 38px;
}

.site-footer__mobile-accordions {
  margin-top: 40px;
}

.site-footer__mobile-row {
  display: flex;
  width: 100%;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.site-footer__mobile-row + .site-footer__mobile-row {
  margin-top: 12px;
}

.site-footer__mobile-row img {
  transform: rotate(90deg);
  opacity: 0.8;
}

.site-footer__payment-strip {
  flex: 0 0 auto;
}

.site-footer__locale:first-child {
  justify-content: flex-start;
}

.site-footer__locale:last-child {
  justify-content: flex-end;
}

.site-footer__mobile-payments {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.site-footer__mobile-payments .site-footer__payment-strip {
  margin-inline: auto;
}

.site-footer__locale--mobile {
  width: auto;
  justify-content: center;
  margin-top: 24px;
  margin-inline: auto;         /* center the standalone Eg | English row */
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 999px;
  background: transparent;     /* the SVG carries its own green circle */
  margin: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.whatsapp-float img {
  display: block;
  width: 56px;
  height: 56px;
}

@media (max-width: 767px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }

  .whatsapp-float img {
    width: 48px;
    height: 48px;
  }

  /* Lift the WhatsApp icon above the sticky add-to-cart bar (82px) only
     while that bar is showing, so they never overlap. */
  body.pdp-sticky-on .whatsapp-float {
    bottom: calc(16px + 82px + 12px);
  }
}

.site-footer__mobile-copyright {
  margin-top: 16px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__mobile-copyright .site-footer__copyright {
  font-size: 12px;
  line-height: 16px;
}

/* ===================== Search page (standalone) ===================== */
.search-page {
  background: #ececec;            /* Figma page bg #ececec */
  min-height: calc(100vh - 168px);
}
.search-page__surface {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  background: rgba(255, 255, 255, 0.93);   /* Figma translucent surface */
  backdrop-filter: blur(3px);
  direction: ltr;
  padding-block: 24px 40px;
  padding-inline: max(80px, calc((100vw - 770px) / 2));
  min-height: 300px;
}
@media (max-width: 767px) {
  /* Search mobile — exact Figma (8608:49324): popular(14/12) + grid 3x87, gap16, photo 87x87 */
  .search-page { min-height: calc(100vh - 120px); }
  .search-page__surface {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-inline: 16px;
    padding-block: 20px 32px;
  }
  .search-page__surface .home-search__popular { width: 303px; max-width: 100%; flex: 0 0 auto; }
  .search-page__surface .home-search__popular h2 { font-size: 14px; line-height: 20px; }
  .search-page__surface .home-search__popular button { font-size: 12px; line-height: 16px; gap: 4px; }
  .search-page__surface .home-search__popular button img { width: 16px; height: 16px; }
  .search-page__surface .home-search__results { width: auto; flex: 0 0 auto; }
  .search-page__surface .home-search__grid {
    grid-template-columns: repeat(3, 87px);
    gap: 16px;
  }
  .search-page__surface .home-search__card { width: 87px; min-height: 0; gap: 4px; }
  .search-page__surface .home-search__photo,
  .search-page__surface .home-search__photo img { width: 87px; height: 87px; }
  .search-page__surface .home-search__photo { border: 0.76px solid #eaecf2; border-radius: 3px; }
  .search-page__surface .home-search__title { width: 87px; font-size: 12px; line-height: 16px; text-align: right; }
}

/* ===================== Comparison page ===================== */
.compare-page { background: #fff; }
.compare-hero {
  width: 100%;
  height: 248px;
  overflow: hidden;
  background: #0b3aa6;
}
.compare-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.compare-wrap {
  margin: 0 auto;
  padding: 36px 24px 72px;
}
.compare-title {
  margin: 0 0 28px;
  text-align: center;
  color: var(--blue-800);            /* Figma var(--blue-800) */
  font-size: 30px;           /* Figma 3xl 30/36 Medium */
  line-height: 36px;
  font-weight: 500;
}
.compare-selectors {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  direction: ltr;
}
.compare-select { position: relative; display: block; }
.compare-select::after {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -6px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  pointer-events: none;
}
.compare-select select {
  width: 100%;
  height: 40px;              /* Figma dropdown h40 (was 48) */
  padding: 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  font-family: inherit;
  font-size: 15px;
  appearance: none;
  cursor: pointer;
}
.compare-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.compare-vs {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-700);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  direction: rtl;            /* RTL: label column on the right, products fill left */
}
.compare-table tr { border-bottom: 1px solid #eef1f5; }
.compare-table th {
  text-align: right;
  vertical-align: middle;
  width: 190px;              /* Figma label column 190 */
  padding: 20px 8px;
  color: var(--blue-700);
  font-size: 15px;
  font-weight: 700;
}
.compare-table td {
  text-align: center;
  vertical-align: middle;
  padding: 20px 16px;
  color: #334155;
  font-size: 14px;
  line-height: 22px;
}
.compare-actions {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
  direction: rtl;
}
.compare-actions::before { content: ""; }
.compare-add {
  height: 52px;              /* Figma CTA h52 (was 44) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: var(--blue-700);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
@media (max-width: 767px) {
  /* Comparison mobile — exact Figma (8608:49860): banner h100, content x20,
     STACKED table rows (label full-width on top, 2 value cols below) */
  .compare-hero { height: 100px; }
  .compare-wrap { padding: 24px 20px 48px; }
  .compare-title { font-size: 24px; line-height: 32px; margin-bottom: 20px; }

  /* table -> stacked: label spans full width, two values side-by-side under it */
  .compare-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    padding: 16px 0;
  }
  .compare-table th {
    grid-column: 1 / -1;
    width: auto;
    padding: 0 0 8px;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
  }
  .compare-table td {
    width: auto;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .compare-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
  .compare-actions::before { display: none; }
}

/* ===================== FAQ page ===================== */
.faq-page { background: #fff; }
.faq-page__hero {
  background: #eaf6ff;        /* align to Figma band */
  padding: 52px 16px;
  text-align: center;
}
.faq-page__hero h1 {
  margin: 0;
  color: var(--blue-800);            /* Figma var(--blue-800) */
  font-size: 30px;           /* Figma 3xl 30/36 */
  line-height: 36px;
  font-weight: 700;
}
.faq-page__list {
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.faq-page__item { border-bottom: 1px solid #e2e8f0; }
.faq-page__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.faq-page__row::-webkit-details-marker { display: none; }
.faq-page__thumb {
  flex: 0 0 62px;            /* Figma desktop thumb 62x62 (was 52) */
  width: 62px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}
.faq-page__thumb img { width: 100%; height: 100%; object-fit: cover; }
.faq-page__title {
  flex: 1 1 auto;
  text-align: right;
  color: var(--blue-700);
  font-size: 18px;
  font-weight: 700;
}
.faq-page__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  transition: transform 200ms ease;
}
.faq-page__item[open] .faq-page__chevron { transform: rotate(180deg); }
.faq-page__answer {
  padding: 0 68px 18px 32px;
  color: #475569;
  font-size: 15px;
  line-height: 24px;
  text-align: right;
}
@media (max-width: 767px) {
  /* FAQ mobile — exact Figma (8608:49536 / row 7985:6780):
     chevron(24) left · title 18/28 var(--blue-800) + thumb 26x26 right · gap 8 */
  .faq-page__hero { padding: 32px 16px; }
  .faq-page__hero h1 { font-size: 24px; line-height: 32px; }
  .faq-page__list { padding: 20px 16px 48px; }
  .faq-page__row { gap: 8px; }
  .faq-page__thumb { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 6px; }
  .faq-page__title { flex: 0 1 auto; font-size: 18px; line-height: 28px; color: var(--blue-800); }
  .faq-page__chevron { margin-inline-start: auto; }   /* push chevron to the far (left) edge */
  .faq-page__answer { padding: 0 42px 16px 8px; font-size: 16px; line-height: 24px; }
}

/* ===================== City accordion (Distributors / Pharmacies) ===================== */
.city-list-page { background: #fff; }
.city-list__hero {
  background: #eaf6ff;            /* Figma band bg */
  padding: 52px 16px;
  text-align: center;
}
.city-list__hero h1 {
  margin: 0;
  color: var(--blue-800);
  font-size: 30px;           /* Figma desktop 3xl 30/36 Bold */
  line-height: 36px;
  font-weight: 700;
}
.city-list__list {
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 24px 64px;
}
.city-list__item { border-bottom: 1px solid #e2e8f0; }
.city-list__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}
.city-list__row::-webkit-details-marker { display: none; }
.city-list__name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--blue-800);
  font-size: 20px;           /* Figma desktop row xl 20/28 Bold */
  line-height: 28px;
  font-weight: 700;
}
.city-list__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  transition: transform 200ms ease;
}
.city-list__item[open] .city-list__chevron { transform: rotate(180deg); }
.city-list__branches {
  margin: 0;
  padding: 0 20px 18px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.city-list__branches li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.city-list__branch-name { color: #0f172a; font-size: 15px; font-weight: 700; }
.city-list__branch-addr { color: #64748b; font-size: 14px; }
@media (max-width: 767px) {
  /* Distributors/Pharmacies mobile — exact Figma (8608:49567 / 8608:49597):
     title xl 20/28 var(--blue-800) Medium · rows h28, pitch 68, name lg 18/28 · chevron left */
  .city-list__hero { padding: 36px 16px; }
  .city-list__hero h1 { font-size: 20px; line-height: 28px; font-weight: 500; }
  .city-list__list { padding: 24px 16px 48px; }
  .city-list__row { gap: 8px; padding: 20px 0; }
  .city-list__name { font-size: 18px; line-height: 28px; font-weight: 500; }
}

/* ===================== Mobile menu drawer (Figma 8608:49320) ===================== */
.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.menu-drawer-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.menu-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 303px;
  max-width: 85vw;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms ease;
  direction: rtl;
}
.menu-drawer-overlay.is-open .menu-drawer { transform: translateX(0); }
.menu-drawer__header {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  border-bottom: 1px solid #cad5e2;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-drawer__title { color: var(--blue-800); font-size: 16px; font-weight: 500; }
.menu-drawer__close { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.menu-drawer__search { position: relative; margin: 16px; height: 40px; }
.menu-drawer__search input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1.101px solid rgba(0, 37, 107, 0.2);
  border-radius: 99px;
  padding: 0 16px 0 40px;
  font-family: inherit;
  font-size: 14px;
  color: var(--blue-800);
  text-align: right;
}
.menu-drawer__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; }
.menu-drawer__links { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-direction: column; }
.menu-drawer__links li { border-bottom: 1px solid #eef2f7; }
.menu-drawer__links a:focus { outline: none; }
.menu-drawer__links a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.menu-drawer__links a,
.menu-drawer__footer a {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RTL → packs content to the right */
  gap: 6px;
  min-height: 40px;
  color: var(--blue-800);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  text-decoration: none;
}
.menu-drawer__footer { margin-top: 8px; padding: 8px 16px 0; border-top: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.menu-drawer__footer a { min-height: 36px; }
body.menu-open { overflow: hidden; }

/* ===================== Verification (OTP) page — Figma 8608:49461 ===================== */
.verify-page { background: #fff; padding: 40px 16px 64px; display: flex; justify-content: center; }
.verify-card { width: 100%; max-width: 343px; direction: rtl; text-align: right; }
.verify-head h1 { margin: 0; color: var(--blue-800); font-size: 24px; font-weight: 700; line-height: 28px; }
.verify-sub { margin: 12px 0 0; color: #475569; font-size: 16px; line-height: 20px; }
.verify-change { display: inline-block; margin-top: 8px; color: var(--blue-700); font-size: 16px; line-height: 21px; font-weight: 500; text-decoration: none; }
.verify-form { margin-top: 32px; display: flex; flex-direction: column; }
.verify-otp {
  width: 100%; height: 48px; box-sizing: border-box;
  border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: var(--blue-800);
  font-family: inherit; font-size: 22px; letter-spacing: 12px; text-align: center;
}
.verify-resend { margin: 16px 0 0; color: #64748b; font-size: 14px; line-height: 16px; text-align: center; }
.verify-resend a { color: var(--blue-700); font-weight: 500; text-decoration: none; }
.verify-cta {
  margin-top: 32px; height: 48px; border: 0; border-radius: 99px;
  background: var(--blue-700); color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
}
.verify-next { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.verify-next h2 { margin: 0; color: var(--blue-800); font-size: 20px; font-weight: 700; line-height: 28px; }
.verify-next p { margin: 12px 0 0; color: #475569; font-size: 16px; line-height: 24px; }

/* ===================== Add-warranty modal — Figma 8608:49325 ("اضافة ضمان") ===================== */
.warranty-overlay { position: fixed; inset: 0; z-index: 100002; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 200ms ease; }
.warranty-overlay.is-open { visibility: visible; opacity: 1; }
.warranty-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.warranty-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 420px; max-width: calc(100vw - 24px); max-height: calc(100vh - 48px);
  overflow-y: auto; background: #fff; border-radius: 16px; direction: rtl; text-align: right;
}
.warranty-modal__head { position: sticky; top: 0; background: #eaf6ff; border-bottom: 1px solid #cad5e2; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.warranty-modal__head h2 { margin: 0; color: var(--blue-800); font-size: 20px; font-weight: 500; }
.warranty-modal__close { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.warranty-modal__body { padding: 20px; }
.warranty-terms { margin-bottom: 24px; }
.warranty-terms__title { display: flex; align-items: center; gap: 8px; color: var(--blue-800); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.warranty-terms p { margin: 0 0 12px; color: #475569; font-size: 14px; line-height: 24px; }
.warranty-terms ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.warranty-terms li { position: relative; padding-right: 16px; color: #334155; font-size: 14px; line-height: 20px; }
.warranty-terms li::before { content: "•"; position: absolute; right: 0; color: var(--blue-700); }
.warranty-brand { text-align: center; margin-bottom: 16px; }
.warranty-brand strong { display: block; color: var(--blue-700); font-size: 22px; font-weight: 700; }
.warranty-brand span { color: #64748b; font-size: 14px; }
.warranty-form { display: flex; flex-direction: column; gap: 16px; }
.warranty-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.warranty-field { display: flex; flex-direction: column; gap: 6px; }
.warranty-field label { color: #334155; font-size: 14px; }
.warranty-field input,
.warranty-field select { height: 48px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--blue-800); background: #fff; }
.warranty-upload { border: 1px dashed #cbd5e1; border-radius: 10px; padding: 16px; text-align: center; color: #64748b; cursor: pointer; }
.warranty-upload svg { margin: 0 auto 8px; display: block; }
.warranty-upload b { display: block; color: #334155; font-size: 14px; font-weight: 500; }
.warranty-upload span { font-size: 12px; }
.warranty-submit { margin-top: 8px; height: 48px; border: 0; border-radius: 10px; background: #25d366; color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.warranty-submit img { width: 20px; height: 20px; }
.warranty-note { margin: 8px 0 0; text-align: center; color: #64748b; font-size: 12px; }
body.warranty-open { overflow: hidden; }

/* The themed Arabic empty-cart state (woocommerce/cart/cart-empty.php) replaces
   WooCommerce's default English "cart is empty" notice — hide the duplicate. */
.woocommerce-info.cart-empty,
p.cart-empty.woocommerce-info {
  display: none !important;
}

/* ===== Checkout (classic) — Granzia themed, RTL ===== */
.checkout-page { background: #fff; direction: rtl; }
.checkout-page .checkout-shell { width: 100%; max-width: calc(100% - 32px); margin: 32px auto 64px; }
.checkout-heading h1 { margin: 0 0 24px; color: var(--blue-900, var(--blue-800)); font-size: 28px; font-weight: 700; text-align: right; }
.checkout-cols { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
@media (max-width: 992px) { .checkout-cols { grid-template-columns: 1fr; } }

/* Field blocks */
.woocommerce-checkout .checkout-main h3,
.woocommerce-checkout #order_review_heading { color: var(--blue-800); font-size: 18px; font-weight: 700; margin: 0 0 16px; text-align: right; }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce-checkout .form-row { margin: 0 0 16px; display: flex; flex-direction: column; }
.woocommerce-checkout .form-row label { margin: 0 0 6px; color: #334155; font-size: 14px; font-weight: 600; text-align: right; }
.woocommerce-checkout .form-row .required { color: #db2c34; text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  font-family: inherit;
  direction: rtl;
  text-align: right;
}
.woocommerce-checkout .form-row textarea { height: 96px; padding: 12px 16px; resize: vertical; }
.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--blue-700, var(--blue-700)); }

/* Order summary box */
.checkout-aside { position: sticky; top: 24px; }
.woocommerce-checkout #order_review { border: 1px solid #eef1f5; border-radius: 12px; padding: 20px; background: #fafbfc; }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; direction: rtl; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 10px 4px; text-align: right; font-size: 14px; color: #334155; border-bottom: 1px solid #eef1f5; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: 16px; font-weight: 700; color: var(--blue-800); border-bottom: 0; }
.woocommerce-checkout-review-order-table .product-name { font-weight: 600; color: #1f2937; }
.woocommerce-checkout-review-order-table .product-total { white-space: nowrap; }

/* Payment methods */
.woocommerce-checkout #payment { background: transparent; margin-top: 16px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 12px; padding: 0; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 8px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.woocommerce-checkout #payment ul.payment_methods li label { margin: 0; font-weight: 600; color: #1f2937; }
.woocommerce-checkout #payment .payment_box { flex: 1 1 100%; margin: 8px 0 0; padding: 10px 0 0; background: transparent; color: #64748b; font-size: 13px; }
.woocommerce-checkout #payment .payment_box::before { display: none; }

/* Place order button — theme navy pill */
.woocommerce-checkout #place_order,
.woocommerce-checkout .checkout-button.button {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0 24px;
  border: 0;
  border-radius: 99px;
  background: var(--blue-700, var(--blue-700));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-checkout #place_order:hover { filter: brightness(1.05); }

/* Coupon + login toggles */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle { margin-bottom: 16px; text-align: right; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #db2c34; }

/* ===== Checkout column placement (explicit grid) ===== */
.checkout-cols {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 32px !important;
  align-items: start !important;
}

.checkout-main {
  grid-column: 1 !important;
}

.checkout-aside {
  grid-column: 2 !important;
}

/* المعلومات الإضافية تبقى تحت بيانات الفوتورة */
.woocommerce-additional-fields {
  grid-column: unset !important;
}

.checkout-cols {
  display: grid !important;
  grid-template-columns: 1.5fr 380px !important;
  gap: 24px !important;
  align-items: start !important;
}

.checkout-main {
  width: 100% !important;
}

.checkout-main .woocommerce-billing-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.checkout-main .form-row {
  flex: 1 1 100% !important;
  margin: 0 !important;
  width: 100% !important;
}

.checkout-main .form-row-first,
.checkout-main .form-row-last {
  flex: 1 1 calc(50% - 8px) !important;
  width: auto !important;
  float: none !important;
}

.checkout-main input.input-text,
.checkout-main select:not(.select2-hidden-accessible),
.checkout-main .select2-container {
  width: 100% !important;
}

/* ===== Mini-cart: flex column — header+shipping fixed, items scroll, footer
   (total + buttons) pinned to the bottom (replaces the Figma absolute coords). */
.mini-cart {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mini-cart__top { height: auto; flex: 0 0 auto; }
.mini-cart__items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 12px;
  display: flex;
  flex-direction: column;
}
.mini-cart__bottom {
  position: static;
  inset: auto;
  height: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px 22px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}
.mini-cart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-cart__empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }

/* ===========================================================================
 * Contact page ([granzia_contact]) — themed, RTL.
 * ======================================================================== */
.gz-contact { direction: rtl; text-align: right; background: #f6f8fc; padding: 40px 0 72px; }
.gz-contact__container { width: 1100px; max-width: calc(100% - 32px); margin: 0 auto; }
.gz-contact__head { text-align: center; margin-bottom: 32px; }
.gz-contact__head h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; color: var(--primary-dark, #002363); }
.gz-contact__head p { margin: 0; color: #5a6473; font-size: 16px; line-height: 1.8; }
.gz-contact__grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }

.gz-contact__info { display: flex; flex-direction: column; gap: 12px; }
.gz-contact__item {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border: 1px solid #e7ecf5; border-radius: 14px;
  background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
a.gz-contact__item:hover { border-color: var(--primary, #002f87); box-shadow: 0 8px 22px rgba(0,47,135,.08); }
.gz-contact__icon {
  flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: var(--primary-soft, #e8eef9); color: var(--primary, #002f87);
}
.gz-contact__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gz-contact__label { font-size: 13px; color: #8a93a6; }
.gz-contact__value { font-size: 15px; font-weight: 700; color: var(--primary-dark, #002363); word-break: break-word; }

.gz-contact__form {
  background: #fff; border: 1px solid #e7ecf5; border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.gz-contact__field { display: flex; flex-direction: column; gap: 6px; }
.gz-contact__field label { font-size: 14px; font-weight: 600; color: #3d4658; }
.gz-contact__field input, .gz-contact__field textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid #d9e0ec; border-radius: 10px; background: #fff;
  font-size: 15px; color: #2c3441; direction: rtl; text-align: right; font-family: inherit;
}
.gz-contact__field input:focus, .gz-contact__field textarea:focus {
  outline: none; border-color: var(--primary, #002f87); box-shadow: 0 0 0 3px rgba(0,47,135,.12);
}
.gz-contact__field textarea { resize: vertical; min-height: 120px; }
.gz-contact__submit {
  align-self: flex-start; padding: 13px 32px; border: 0; border-radius: 999px;
  background: var(--primary, #002f87); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.gz-contact__submit:hover { background: var(--primary-dark, #002363); }
.gz-contact__submit:disabled { opacity: .6; cursor: default; }
.gz-contact__status { margin: 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.gz-contact__status.is-ok { background: #ecf8f1; color: #1f7a45; border: 1px solid #b7e2c8; }
.gz-contact__status.is-err { background: #fdecec; color: #b3261e; border: 1px solid #f3c0bc; }

@media (max-width: 860px) {
  .gz-contact__grid { grid-template-columns: 1fr; }
}

/* Live-search additions: product price, hint, "view all" link */
.home-search__card { text-decoration: none; }
.home-search__price { color: var(--primary, #002f87); font-weight: 700; font-size: 14px; }
.home-search__hint { margin: 8px 0; color: #8a93a6; font-size: 14px; text-align: center; }
.home-search__all {
  display: inline-block; margin: 12px auto 0; padding: 10px 24px; border-radius: 999px;
  background: var(--primary, #002f87); color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none; text-align: center;
}
.home-search__all:hover { background: var(--primary-dark, #002363); }

/* Promo/Quiz CTA mobile cards — enforce Figma bg framing at ≤768px */
@media (max-width: 768px) {
  .promo-cta__card--mobile {
    height: 301px !important;
    max-height: 301px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .promo-cta__card--mobile .promo-cta__bg {
    position: absolute !important;
    inset: unset !important;
    object-fit: cover !important;
  }

  .promo-cta__card--quiz.promo-cta__card--mobile .promo-cta__bg {
    width: 117.36% !important;
    height: 125.55% !important;
    left: -8.62% !important;
    top: -3.77% !important;
  }
}

/* الكارت التاني - نفس قيم الكارت الأول بالظبط */
.promo-cta__card--quiz.promo-cta__card--mobile {
  height: 301px !important;
  overflow: hidden !important;
}

/* الصورة - القيم بالظبط من الفجما */
.promo-cta__card--quiz.promo-cta__card--mobile .promo-cta__bg {
  position: absolute !important;
  width: 117.36% !important;
  height: 125.55% !important;
  left: -8.62% !important;
  top: -3.77% !important;
  object-fit: fill !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

/* المحتوى - متوسط أفقياً، من أعلى 16px */
.promo-cta__card--quiz .promo-cta__content--mobile {
  position: absolute !important;
  top: 16px !important;
  left: 50% !important;
  right: unset !important;
  transform: translateX(-50%) !important;
  width: 295px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}

.promo-cta__card--quiz .promo-cta__content--mobile h3 {
  text-align: center !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  color: #002f87 !important;
  width: 100% !important;
}

.promo-cta__card--quiz .promo-cta__content--mobile p {
  text-align: center !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: #002f87 !important;
  width: 100% !important;
  white-space: normal !important;
}

/* الزرار */
.promo-cta__button--mobile-quiz {
  position: static !important;
  width: auto !important;
  padding: 8px 40px !important;
  height: 38px !important;
  border: 1px solid #002f87 !important;
  border-radius: 99px !important;
  color: #002f87 !important;
  font-size: 16px !important;
  background: transparent !important;
}

/* كارت المقارنة موبايل — قيم الفجما بالظبط (div + background-image) */
.promo-cta__card--compare.promo-cta__card--mobile {
  height: 301px !important;
  width: 343px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.promo-cta__card--compare.promo-cta__card--mobile .promo-cta__bg {
  position: absolute !important;
  width: 127.07% !important;
  height: 127.06% !important;
  left: -27.02% !important;
  top: -4.52% !important;
  /* PHP لا يُنفَّذ في ملف CSS — نشير لأصل الثيم مباشرة (نسبيًا لـ style.css بالجذر) */
  background-image: url('assets/img/cta/cta-mobile-compare-bg.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* المحتوى — من الفجما: left:24px, top:16px, width:295px, centered */
.promo-cta__card--compare .promo-cta__content--mobile {
  position: absolute !important;
  top: 16px !important;
  left: 24px !important;
  right: unset !important;
  transform: none !important;
  width: 295px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}

.promo-cta__card--compare .promo-cta__content--mobile h3 {
  color: #002363 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.promo-cta__card--compare .promo-cta__content--mobile p {
  color: rgba(0, 37, 107, 0.8) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  width: 254px !important;
  text-align: center !important;
  white-space: normal !important;
}

.promo-cta__button--mobile-compare {
  position: static !important;
  padding: 8px 40px !important;
  height: 38px !important;
  border: 1px solid #002f87 !important;
  border-radius: 99px !important;
  color: #002f87 !important;
  font-size: 16px !important;
  background: transparent !important;
  width: auto !important;
}

/* ── Mobile horizontal-overflow guard (<=768px) ───────────────── */
@media (max-width: 768px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .site-main,
  .woocommerce,
  .woocommerce-page,
  .product-page,
  .single-product {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ── Single-product horizontal-overflow fix ───────────────────── */
.single-product .site-main,
.woocommerce-page.single-product,
.product-type-simple,
.woocommerce div.product {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  body.single-product {
    overflow-x: hidden !important;
  }
  .single-product * {
    max-width: 100% !important;
  }
}

/* ── Features/trust bars: seamless RTL marquee (right → left) ──────────
   granzia_marquee (main.js) clones items to fill ≥2× the container, then
   adds .is-marquee. The track is exactly two identical halves, so
   translateX(-50%) loops seamlessly. Without JS the bar stays static. */
.landing-trust.is-marquee,
.hero-services.is-marquee {
  overflow: hidden !important;
}
.landing-trust__list.is-marquee,
.hero-services__inner.is-marquee {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  direction: ltr !important;          /* predictable -50% math (text stays RTL per item) */
  animation: trustScroll 25s linear infinite !important;
  will-change: transform;
}
.landing-trust__list.is-marquee .landing-trust__item,
.hero-services__inner.is-marquee .hero-services__item {
  flex: 0 0 auto !important;
}
.landing-trust__list.is-marquee:hover,
.hero-services__inner.is-marquee:hover {
  animation-play-state: paused;
}
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-trust__list.is-marquee,
  .hero-services__inner.is-marquee { animation: none !important; }
}



/* ---------------------------------------------------------------------------
 * Home traits bar — uses the landing .landing-trust structure (so the shared
 * marquee in main.js animates it) but styled with the HOME theme colors.
 * (On the landing page, landing.css loads after and keeps its pink styling.)
 * ------------------------------------------------------------------------- */
.landing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 24px;
  background: var(--hero-blue-tint, #eef3fb);
}
.landing-trust__list {
  display: flex;
  align-items: center;
  gap: 72px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #002363;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}
.landing-trust__item img { display: block; width: 32px; height: 32px; }
@media (max-width: 767px) {
  .landing-trust { padding: 8px 16px; }
  .landing-trust__list { gap: 28px; }
  .landing-trust__item img { width: 24px; height: 24px; }
}

/* ===== Order received / Thank You (woocommerce/checkout/thankyou.php) ===== */
.gz-thankyou { max-width: 640px; margin: 48px auto; padding: 0 16px; text-align: center; direction: rtl; font-family: var(--font-primary); color: var(--primary, #002f87); }
.gz-thankyou__check { width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: #28a745; display: grid; place-items: center; }
.gz-thankyou__title { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.gz-thankyou__meta { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; color: #4b5563; font-size: 15px; margin: 0 0 28px; }
.gz-thankyou__card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px 22px; margin: 0 0 16px; text-align: right; }
.gz-thankyou__card h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--primary-deep, #00256b); }
.gz-thankyou__items { list-style: none; margin: 0; padding: 0; }
.gz-thankyou__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.gz-thankyou__item-name { flex: 1; font-weight: 500; }
.gz-thankyou__item-qty { color: #6b7280; }
.gz-thankyou__item-price { font-weight: 700; white-space: nowrap; }
.gz-thankyou__total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; font-size: 18px; }
.gz-thankyou__total strong { color: var(--primary, #002f87); }
.gz-thankyou__address p { margin: 0; line-height: 1.9; color: #374151; }
.gz-thankyou__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.gz-thankyou__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .15s; }
.gz-thankyou__btn--primary { background: var(--primary, #002f87); color: #fff; }
.gz-thankyou__btn--primary:hover { background: var(--primary-dark, #002363); }
.gz-thankyou__btn--ghost { background: #fff; color: var(--primary, #002f87); border: 1.5px solid var(--primary, #002f87); }
.gz-thankyou__btn--ghost:hover { background: var(--primary-soft, #e8eef9); }
@media (max-width: 600px) { .gz-thankyou { margin: 28px auto; } .gz-thankyou__title { font-size: 22px; } .gz-thankyou__actions { flex-direction: column; } .gz-thankyou__btn { width: 100%; } }

/* Step 8 — announcement arrows follow right=next / left=prev (LTR-style). */
.announcement__inner { display: flex; align-items: center; }
.announcement__arrow--next { order: -1; }
.announcement__arrow--prev { order: 1; }

/* Step 1 — review card linked to its product. */
.trust-proof__card--link { cursor: pointer; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.trust-proof__card--link:hover { box-shadow: 0 12px 28px rgba(0,37,107,.12); transform: translateY(-2px); }
.trust-proof__product { margin: 8px 0 0; color: var(--blue-700); font-size: 13px; font-weight: 700; }

/* ===== Checkout enhancements (redesign) ===== */
/* Summary on the RIGHT, billing on the LEFT (RTL). */
.checkout-cols { grid-template-columns: 400px 1fr; }
.checkout-aside { order: -1; }

/* Place-order button = solid navy primary. */
.woocommerce-checkout #place_order {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.woocommerce-checkout #place_order:hover { background: var(--blue-800); }

/* Payment methods — clear cards. */
.woocommerce-checkout .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.woocommerce-checkout .wc_payment_methods li { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; background: #fff; }
.woocommerce-checkout .wc_payment_methods li label { color: var(--blue-850); font-weight: 600; }
.woocommerce-checkout .payment_box { background: #f6f8fc; border-radius: 8px; padding: 12px; font-size: 13px; color: #475569; }

/* Accepted-payments row. */
.checkout-payments { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1f5; text-align: center; }
.checkout-payments__title { margin: 0 0 8px; color: #64748b; font-size: 13px; }
.checkout-payments__badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.checkout-payments__badges span { padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--blue-850); background: #fff; }

@media (max-width: 992px) {
  .checkout-cols { grid-template-columns: 1fr; }
  .checkout-aside { order: 0; position: static; }
  /* Sticky "إتمام الطلب" at the bottom on mobile. */
  .woocommerce-checkout #place_order {
    position: sticky;
    bottom: 8px;
    z-index: 30;
    box-shadow: 0 6px 20px rgba(0,37,107,.25);
  }
}

/* ===== Home hero parallax (same effect as the landing's sticky hero) =====
   Pin the Elementor section that holds .hero-slider; the sections after it
   scroll up and cover it (z-index + opaque background). Design unchanged. */
.home .elementor-section:has(.hero-slider),
.home .elementor-top-section:has(.hero-slider),
.home .e-con:has(.hero-slider),
.home section:has(> .hero-slider),
.home section:has(.hero-slider) {
  position: sticky;
  top: 0;
  z-index: 0;
}
.home .elementor-section:has(.hero-slider) ~ .elementor-section,
.home .elementor-top-section:has(.hero-slider) ~ .elementor-top-section,
.home .e-con:has(.hero-slider) ~ .e-con,
.home section:has(.hero-slider) ~ section {
  position: relative;
  z-index: 1;
  background: #fff;
}