/* ============================================
   NOMA BAKERY - Main Stylesheet
   Inspired by Al Hatab Foods design
   ============================================ */

/* --- CSS Variables --- */
:root {
  --color-primary: #b8860b;
  --color-primary-dark: #8b6508;
  --color-primary-light: #d4a017;
  --color-accent: #e8b830;
  --color-accent-light: #f0d060;
  --color-bg: #F7F3EA;
  --color-bg-alt: #F7F3EA;
  --color-text: #513B1A;
  --color-text-light: #513B1A;
  --color-white: #ffffff;
  --color-dark: #1a1a1a;
  --font-en: 'Playfair Display', 'Georgia', serif;
  --font-en-body: 'Lato', 'Helvetica Neue', sans-serif;
  --font-ar: 'Tajawal', 'Arial', sans-serif;
  --transition: all 0.3s ease;
  /* Warm, brown-tinted, two-layer elevation (cream brand) */
  --shadow: 0 1px 2px rgba(81,59,26,0.06), 0 8px 24px rgba(81,59,26,0.08);
  --shadow-hover: 0 2px 4px rgba(81,59,26,0.08), 0 16px 40px rgba(81,59,26,0.14);
  --radius: 12px;
  /* Metallic gold for FILLS & long hairlines only (text/borders stay flat) */
  --gradient-gold: linear-gradient(135deg, #f3d98a 0%, #d4a017 45%, #b8860b 100%);
  --gold-inlay: inset 0 0 0 1px rgba(232,184,48,0.35);
  /* Vertical-rhythm tokens */
  --section-y: 100px;
  --section-y-sm: 64px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Reserve the (thin) scrollbar gutter so locking page scroll doesn't shift the layout. */
  scrollbar-gutter: stable;
}

/* Lenis smooth (inertia) scrolling — required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  font-family: var(--font-en-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  overflow-x: hidden;
}

body.rtl {
  font-family: var(--font-ar);
  direction: rtl;
  text-align: right;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul { list-style: none; }

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Header / Navbar --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  transition: var(--transition);
}

.header.scrolled {
  box-shadow: 0 2px 30px rgba(0,0,0,0.1);
}

/* When the cart/account panel is open, blur the navbar but keep its normal white background
   (don't change its colour) so it blurs with the page without going dark. 4px matches the
   open overlay's stronger blur. */
.header.header-blurred {
  filter: blur(4px);
}

/* Fog over the page (below the navbar) while hovering the nav items.
   z-index sits below the header (1000) so the navbar stays crisp on top. */
.nav-fog {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}
.nav-fog.active {
  opacity: 1;
  visibility: visible;
}

.nav {
  display: flex;
  align-items: center;
  padding: 12px 30px 12px 15px;
  gap: 20px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-en);
}

.logo-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  color: #513B1A;
  letter-spacing: 1px;
}

.rtl .logo-text {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

.logo-tagline {
  font-size: 0.7rem;
  color: var(--color-text-light);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rtl .logo-tagline {
  letter-spacing: 0;
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links > li {
  position: relative;
}

.nav-links a,
.nav-links .nav-dropdown-toggle {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

.nav-links a::after,
.nav-links .nav-dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #E8B830;
  transition: var(--transition);
}

/* --- Nav Dropdown --- */
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle .arrow-down {
  font-size: 0.6rem;
  transition: var(--transition);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 100;
  margin-top: 12px;
}

.rtl .nav-dropdown {
  left: auto;
  right: 0;
}

.nav-links > li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links > li:hover .arrow-down {
  transform: rotate(180deg);
}

.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: var(--transition);
}

.nav-dropdown a::after {
  display: none;
}

.nav-dropdown a.active {
  color: var(--color-primary);
  font-weight: 700;
  border-left: 3px solid #E8B830;
  padding-left: 17px;
}

.rtl .nav-dropdown a.active {
  border-left: none;
  border-right: 3px solid #E8B830;
  padding-left: 20px;
  padding-right: 17px;
}

.nav-dropdown-toggle.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #E8B830;
}

.rtl .nav-dropdown-toggle.active::after {
  left: auto;
  right: 0;
}

.nav-dropdown-toggle.active {
  font-weight: 700;
}

.nav-dropdown a:hover {
  background: #F7F3EA;
  color: var(--color-primary);
  padding-left: 24px;
}

.rtl .nav-dropdown a:hover {
  padding-left: 20px;
  padding-right: 24px;
}

.rtl .nav-links a::after,
.rtl .nav-links .nav-dropdown-toggle::after {
  left: auto;
  right: 0;
  height: 1.5px;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links > li:hover .nav-dropdown-toggle::after {
  width: 100%;
}

.nav-links a.active {
  font-weight: 700;
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.nav-logo-right {
  display: flex;
  align-items: center;
}

.nav-logo-right .logo-img {
  width: 50px;
  height: 50px;
}

.rtl .nav-actions {
  margin-left: 0;
  margin-right: auto;
}

/* Arabic (RTL) logo: a tiny rightward nudge in the header — applies on desktop and mobile. */
.rtl .logo { transform: translateX(4px); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: #513B1A;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
  text-decoration: none;
}

.lang-toggle:hover {
  background: transparent;
  color: #E8B830;
}

.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #513B1A;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
}

.nav-icon-btn:hover {
  background: transparent;
  color: #E8B830;
}

.nav-icon-btn svg {
  width: 22px;
  height: 22px;
}

.cart-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
}

.rtl .cart-badge {
  right: auto;
  left: -3px;
  top: -3px;
  padding: 0 4px;
  min-width: 20px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
}

/* --- Cart Sidebar --- */
/* Freeze page scrolling while the cart/account drawer is open (the drawer scrolls internally). */
html.panel-scroll-lock,
html.panel-scroll-lock body {
  overflow: hidden;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Fade the blur/dark down to 0 on close (instead of display:none) so the backdrop-filter
     doesn't "ghost" — i.e. leave the page looking blurred/dark after the cart is closed. */
  transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}
.cart-overlay.active {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  z-index: 2000;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transition: right 1s ease;
  display: flex;
  flex-direction: column;
}
.cart-sidebar.active { right: 0; }

.rtl .cart-sidebar {
  right: auto;
  left: -500px;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  transition: left 1s ease;
}
.rtl .cart-sidebar.active { left: 0; right: auto; }

.cart-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid #f0ebe0;
}

.cart-sidebar-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #513B1A;
}

.cart-sidebar-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #513B1A;
  padding: 4px;
  line-height: 1;
}

.cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
}

.cart-sidebar-empty {
  text-align: center;
  color: rgba(81,59,26,0.5);
  padding: 40px 0;
  font-size: 0.95rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #f0ebe0;
  position: relative;
}

.cart-item-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: #513B1A;
  margin-bottom: 4px;
}

.cart-item-price {
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-sar-symbol {
  height: 18px;
  width: auto;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #f0ebe0;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #513B1A;
  transition: 0.2s;
}

.cart-qty-btn:hover {
  background: #F7F3EA;
  border-color: #b8860b;
}

.cart-qty-value {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 20px;
  text-align: center;
  color: #513B1A;
}

.cart-item-remove {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: tan;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: 0.2s;
}

.cart-item-remove:hover {
  color: #e53e3e;
}

.cart-sidebar-footer {
  padding: 24px 30px;
  border-top: 1px solid #f0ebe0;
}

.cart-sidebar-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  font-weight: 700;
  color: #513B1A;
  margin-bottom: 16px;
}

.cart-sidebar-total-amount {
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.5rem;
}

.cart-sidebar-total-amount .cart-sar-symbol {
  height: 24px;
}

.rtl .cart-item-price {
  font-size: 1.2rem;
}

.rtl .cart-sar-symbol {
  height: 21px;
}

.rtl .cart-sidebar-total-amount {
  font-size: 1.7rem;
}

.rtl .cart-sidebar-total-amount .cart-sar-symbol {
  height: 28px;
}

.rtl .cart-qty-btn {
  width: 32px;
  height: 32px;
  font-size: 1.15rem;
}

.rtl .cart-qty-value {
  font-size: 1.1rem;
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #513B1A;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
}

.cart-checkout-btn:hover {
  background: #d4b068;
}

.cart-checkout-btn:disabled,
.cart-checkout-btn:disabled:hover {
  background: #F7F3EA;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Account Modal */
.account-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Fade the blur/dark down to 0 on close (instead of display:none) so the backdrop-filter
     doesn't "ghost" — i.e. leave the page looking blurred/dark after the account modal is closed. */
  transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}
.account-overlay.active {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Account panel: a full-height side drawer that slides in exactly like the cart. */
.account-modal {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  z-index: 2000;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transition: right 1s ease;
  display: flex;
  flex-direction: column;
}
.account-modal.active { right: 0; }

.rtl .account-modal {
  right: auto;
  left: -500px;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  transition: left 1s ease;
}
.rtl .account-modal.active { left: 0; right: auto; }

.account-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid #f0ebe0;
}

.account-modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #513B1A;
}

.account-modal-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #513B1A;
  line-height: 1;
}

.account-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
}

.account-form-group {
  margin-bottom: 16px;
}

.account-form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #513B1A;
  margin-bottom: 6px;
}

.account-form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #f0ebe0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: 0.2s;
  box-sizing: border-box;
}

.account-form-group input:focus {
  outline: none;
  border-color: #b8860b;
}

/* Typed text color for all inputs across the site */
input,
textarea,
select {
  color: #513B1A;
}

.account-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #513B1A;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
  margin-top: 20px;
  /* Modal buttons are built after the gold-sheen script captures the page's gold
     elements, so they never receive an animated --gold-scroll. Pin it to the cart
     checkout button's rich tone so the gradient renders the same. */
  --gold-scroll: 8%;
}

.account-btn:hover {
  background: #d4b068;
}

/* Account Settings "Save Changes": empty (light) until a field has content, then fills to gold — like the cart checkout button. */
.account-settings-save:disabled,
.account-settings-save:disabled:hover {
  background: #F7F3EA;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.account-signin-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(81,59,26,0.5);
  line-height: 1.5;
}

/* Account dashboard: settings entry button, back link, delete button */
/* Matches the "Sign in with Email" button style */
.account-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border: 1px solid #f0ebe0;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #513B1A;
  cursor: pointer;
  transition: 0.2s;
}

.account-nav-btn svg {
  width: 20px;
  height: 20px;
}

.account-nav-btn:hover {
  background: #F7F3EA;
  border-color: var(--color-primary);
}


.account-settings-back {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 2px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: rgba(81,59,26,0.5);
  cursor: pointer;
  transition: var(--transition);
}

.account-settings-back svg {
  width: 16px;
  height: 16px;
}

.account-settings-back:hover {
  color: var(--color-primary);
}

.rtl .account-settings-back svg {
  transform: scaleX(-1);
}

.account-delete-btn {
  display: block;
  width: 100%;
  padding: 13px;
  margin-top: 12px;
  background: none;
  border: 1px solid #e3b1b1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
  transition: var(--transition);
}

.account-delete-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

/* Delete-account confirmation popup (confirm -> phone -> code) */
.delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background 0.25s ease;
}

.delete-overlay.active {
  background: rgba(0,0,0,0.5);
  opacity: 1;
  visibility: visible;
}

.delete-dialog {
  position: relative;
  width: 400px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 26px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.25);
  text-align: center;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s ease;
}

.delete-overlay.active .delete-dialog {
  transform: translateY(0) scale(1);
}

.delete-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.rtl .delete-close {
  right: auto;
  left: 16px;
}

.delete-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fdecec;
  color: #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon svg {
  width: 28px;
  height: 28px;
}

.delete-title {
  font-family: var(--font-en);
  font-size: 1.35rem;
  color: var(--color-text);
  margin: 0 0 10px;
}

.rtl .delete-title {
  font-family: var(--font-ar);
}

.delete-text {
  font-size: 0.95rem;
  color: #777;
  line-height: 1.6;
  margin: 0 0 22px;
}

.delete-text strong {
  color: var(--color-text);
}

.delete-dialog .account-form-group {
  text-align: left;
  margin-bottom: 22px;
}

.rtl .delete-dialog .account-form-group {
  text-align: right;
}

.delete-actions {
  display: flex;
  gap: 12px;
}

.delete-btn-cancel,
.delete-btn-danger {
  flex: 1;
  padding: 13px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.delete-btn-cancel {
  background: #fff;
  border: 1px solid #f0ebe0;
  color: var(--color-text);
}

.delete-btn-cancel:hover {
  background: #F7F3EA;
  border-color: var(--color-primary);
}

.delete-btn-danger {
  background: #c0392b;
  border: 1px solid #c0392b;
  color: #fff;
}

.delete-btn-danger:hover {
  background: #a93226;
  border-color: #a93226;
}

.delete-resend {
  margin-top: 16px;
}

.account-toggle {
  display: none;
}

.account-social-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.account-social-btn.account-email-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  color: #513B1A;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
  margin-bottom: 0;
}

.account-social-btn.account-email-toggle:hover {
  background: #F7F3EA;
  border-color: #b8860b;
}

.account-social-btn.account-email-toggle svg {
  width: 20px;
  height: 20px;
}

.account-signup-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.98rem;
  color: #888;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.account-signup-link strong {
  color: var(--color-primary);
  font-weight: 700;
}

.account-signup-link:hover strong {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Sign Up page */
.signup-subtitle {
  text-align: center;
  color: #777;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: -6px 0 28px;
}

.signup-form .checkout-btn-primary {
  width: 100%;
  margin-top: 4px;
}

.signup-signin-link {
  text-align: center;
  color: #888;
  font-size: 0.95rem;
  margin: 22px 0 0;
}

.signup-signin-link a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.signup-signin-link a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Passwordless / OTP sign-up bits (shared by the page and the modal form) */
.signup-field-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: rgba(81,59,26,0.5);
  line-height: 1.5;
}

.otp-code-input {
  text-align: center;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  font-size: 1.35rem;
  font-weight: 700;
}

.signup-otp-sent {
  text-align: center;
  color: rgba(81,59,26,0.5);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 22px;
}

.signup-otp-sent strong {
  color: var(--color-text);
}

.signup-otp-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: #ccc;
}

.signup-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition);
}

.signup-link-btn:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.signup-terms {
  text-align: center;
  font-size: 0.8rem;
  color: #aaa;
  line-height: 1.5;
  margin: 18px 0 0;
}

.signup-terms a {
  color: var(--color-primary);
  text-decoration: none;
}

.signup-terms a:hover {
  text-decoration: underline;
}

.account-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}

.account-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 2px;
  color: #999;
  font-size: 0.85rem;
}

.account-or-divider::before,
.account-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

.account-social-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
}

.account-social-circle:hover {
  background: #F7F3EA;
  border-color: #b8860b;
}

.account-social-circle svg {
  width: 26px;
  height: 26px;
}

.account-phone-input {
  display: flex;
  gap: 8px;
}

.account-phone-prefix {
  width: 68px !important;
  min-width: 68px;
  max-width: 68px;
  padding: 12px 2px;
  flex-shrink: 0;
  border: 1px solid #f0ebe0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #F7F3EA;
  color: #513B1A;
  font-weight: 600;
  text-align: center;
}

.account-phone-prefix:focus {
  outline: none;
  border-color: #b8860b;
}

.account-phone-input input[type="tel"] {
  flex: 1;
  min-width: 0;
}

.rtl .account-phone-input {
  direction: ltr;
}

/* Tax-invoice link on the account's order cards: a real button, so it is
   obviously clickable — gold pill that fills on hover. */
.account-order-invoice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1.5px solid #b8860b;
  border-radius: 999px;
  color: #8a6a34;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.account-order-invoice:hover {
  background: #b8860b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* Sold-out products (flagged manually in the admin): the add-to-basket
   button becomes an inert gray label. pointer-events guards the click even
   before the JS handlers check the class. */
.btn-add-cart.sold-out {
  background: #b9b0a1 !important;
  border-color: #b9b0a1 !important;
  color: #fff !important;
  cursor: not-allowed;
  pointer-events: none;
  /* Longer labels (e.g. "ترقبوا الإطلاق قريبًا") stay on one line at the
     same text size as the normal add-to-basket label. */
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}

/* A single sold-out gift-wrap choice (ribbon color) */
.gift-option.sold-out {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The +966 prefix box inside page forms (B2B / careers): the generic
   `.form-group input` rules (18px side padding, white background) would
   squeeze the text to "+96" and lose the cream sign-in look — restore it.
   Vertical padding stays 14px so the box matches its neighbor's height. */
.form-group .account-phone-input .account-phone-prefix {
  padding: 14px 2px;
  background: #F7F3EA;
  color: #513B1A;
  font-weight: 600;
  text-align: center;
}

.rtl .account-social-icons {
  flex-direction: row-reverse;
}

/* Cart Notification */
.cart-notification {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: #513B1A;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  z-index: 3000;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: top 0.4s ease;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .cart-notification {
    padding: 10px 18px;
    font-size: 0.85rem;
    border-radius: 6px;
  }
  .cart-notification-check {
    font-size: 1rem;
  }
}

.cart-notification.active {
  top: 20px;
}

.cart-notification-check {
  color: #e8b830;
  font-size: 1.2rem;
}

.nav-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.nav-logo-center img {
  height: 60px;
  width: auto;
  display: block;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 4px;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-text);
  transition: var(--transition);
  border-radius: 1px;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Hero Section --- */
.hero {
  height: calc(100vh - 120px);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  overflow: hidden;
  padding-top: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
  text-align: center;
  color: var(--color-white);
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 40px 20px;
  margin-bottom: 40px;
}

.rtl .hero-content {
  margin-bottom: 0;
}

.hero-badge {
  display: inline-block;
  padding: 0 0 0 2px;
  border: none;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  animation: fadeInDown 0.8s ease;
  position: relative;
  z-index: 1;
}

.hero-badge-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.hero-badge-divider .line-h {
  width: 60px;
  height: 1.5px;
  background: var(--color-accent);
}

.hero-badge-divider .line-v {
  width: 3px;
  height: 14px;
  background: var(--color-accent);
}

.rtl .hero-badge {
  letter-spacing: 0;
  padding: 0;
  font-size: 1rem;
}

.hero h1 {
  font-family: var(--font-en);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.rtl .hero h1 {
  font-family: var(--font-ar);
  font-size: 3.5rem;
}

.hero h1 span {
  color: #ffffff;
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 550px;
  margin: 0 auto 36px;
  line-height: 1.8;
  animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: -16px;
  animation: fadeInUp 0.8s ease 0.6s both;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #513B1A;
}

.btn-primary:hover {
  background: #d4b068;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(200,164,94,0.4);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.4);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* --- Hero Video / Image Slideshow Background --- */
.hero-video {
  background: var(--color-dark);
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-bg-image.hero-bg-active {
  opacity: 1;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-video-bg.hero-bg-active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-video .hero-content {
  z-index: 2;
}

.hero-video .hero-scroll {
  z-index: 2;
}

/* Hero Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-arrow:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

.hero-arrow-left { left: 24px; }
.hero-arrow-right { right: 24px; }

.rtl .hero-arrow-left { left: auto; right: 24px; }
.rtl .hero-arrow-right { right: auto; left: 24px; }

/* Hero Bottom Nav (dots + scroll arrow) */
.hero-bottom-nav {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-dots {
  display: flex;
  gap: 12px;
  direction: ltr;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: var(--transition);
}

.hero-dot.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.25);
}

.hero-dot:hover {
  background: rgba(255,255,255,0.6);
}

.hero-scroll-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: background 0.3s ease, border-color 0.3s ease;
  position: relative;
  display: block;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.hero-scroll-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

.hero-scroll-arrow:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

/* Hero controls pop-up entrance on page load (homepage hero only) */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heroNavIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hero-video .hero-arrow,
.hero-video .hero-bottom-nav {
  opacity: 0;
}
.hero-video.hero-ready .hero-arrow {
  animation: heroFadeIn 0.7s ease 0.8s forwards;
}
.hero-video.hero-ready .hero-bottom-nav {
  animation: heroNavIn 0.7s ease 1s forwards;
}

@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (max-width: 768px) {
  .hero-arrow { display: none; }
  /* Dots + scroll arrow lifted clear of the screen edge on ALL mobile heroes
     (home AR+EN and the Our Story hero alike). */
  .hero-bottom-nav { bottom: 48px; }
}


/* --- Section Base --- */
.section {
  padding: 100px 0;
}

/* Arabic checkout pages wrap the progress bar in a .section, which adds its 100px
   top padding on top of the progress bar's own header-clearance — trim it back so
   the steps sit a bit higher. */
.section:has(.checkout-progress) {
  padding-top: 50px;
}

/* Tighten the gap below the progress bar on the Arabic address & payment pages,
   but not the confirmation page (its section contains .order-success). */
.section:has(.checkout-progress):not(:has(.order-success)) .checkout-progress {
  margin-bottom: 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

/* All products hidden: only the "coming soon" heading remains — drop the
   header's bottom margin and rebalance the section padding so the text sits
   visually centered in the white area (the following section contributes
   ~100px of its own top padding below us). */
.products-empty .section-header {
  margin-bottom: 0;
}

/* Home page products section (normally 50px top / 60px bottom) */
.products-section.products-empty {
  padding-top: 20px;
  padding-bottom: 0;
}

/* Our Products page section (normally 100px top / 100px bottom) */
.products-page-section.products-empty {
  padding-top: 45px;
  padding-bottom: 15px;
}

.about-preview-logo {
  display: block;
  margin: 0 auto 20px;
  height: 140px;
  width: auto;
}

.section-label {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #513B1A;
  font-weight: 600;
  margin-bottom: 12px;
}

.rtl .section-label {
  letter-spacing: 0;
}

.section-title {
  font-family: var(--font-en);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: #513B1A;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.rtl .section-title {
  font-family: var(--font-ar);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* --- About Preview (Homepage) --- */
.about-preview {
  background: var(--color-bg);
  padding-top: 90px;
  padding-bottom: 90px;
}


.about-preview .section-header {
  margin-bottom: 48px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow), var(--gold-inlay);
}

.about-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.about-image:hover img {
  transform: scale(1.05);
}

.about-image .badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.rtl .about-image .badge {
  right: auto;
  left: 20px;
}

.about-text h2 {
  font-family: var(--font-en);
  font-size: 2.4rem;
  color: #513B1A;
  margin-bottom: 20px;
  line-height: 1.25;
}

.rtl .about-text h2 {
  font-family: var(--font-ar);
}

.about-text p {
  color: var(--color-text-light);
  margin-bottom: 16px;
  line-height: 1.8;
}

.about-text .btn {
  margin-top: 12px;
}

.btn-green {
  background-color: #a3760a;
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, var(--color-primary-dark) 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
  color: var(--color-white);
}

.btn-green:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45,80,22,0.3);
}

/* --- Stats --- */
.stats {
  background: var(--color-primary-dark);
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.stat-item {
  color: var(--color-white);
}

.stat-number {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
}

/* --- Products Section --- */
.products-section {
  background: var(--color-white);
  padding-top: 50px;
  padding-bottom: 60px;
  scroll-margin-top: 33px;
}

.products-section .section-header { margin-bottom: 30px; }

/* Flex (not a fixed 3-column grid) so that when a product is hidden in the
   admin and only 1–2 cards remain, they sit centered instead of leaving an
   empty slot on one side. */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.products-grid .product-card {
  flex: 1 1 240px;
  max-width: 300px;
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(184,134,11,0.12);
  transition: var(--transition);
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-accent);
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.product-image.product-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.product-image.product-slider img:first-of-type {
  position: relative;
}

.product-image.product-slider img.active {
  opacity: 1;
  z-index: 1;
}

.product-size-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rtl .product-size-badge {
  left: auto;
  right: 16px;
  letter-spacing: 0;
}

/* Order / Delivery Partners */
.order-section {
  background: var(--color-bg);
}

.order-section .section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.order-partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.order-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 30px 20px;
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition);
}

.order-partner-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-8px);
}

.order-partner-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 0;
}

.order-partner-card span {
  font-size: 1rem;
  font-weight: 600;
  color: #513B1A;
}

.order-partner-card.coming-soon {
  pointer-events: none;
  position: relative;
}

.order-partner-card.coming-soon img {
  opacity: 0.3;
  filter: grayscale(100%);
}

.order-partner-card.coming-soon span {
  opacity: 0.4;
}

.order-partner-card.coming-soon::after {
  content: 'Coming Soon';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, var(--color-primary-dark) 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
  color: var(--color-white);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.rtl .order-partner-card.coming-soon::after {
  content: 'قريباً';
}

.product-info {
  padding: 16px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: space-between;
}

.product-name {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  color: #513B1A;
  margin-bottom: 8px;
}

.rtl .product-name {
  font-family: var(--font-ar);
}

.product-desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.6;
  flex: 1;
}

.product-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 6px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.product-price .sar-symbol {
  width: 21px;
  height: 21px;
}

.rtl .product-price {
  font-size: 1.5rem;
}

.rtl .product-price .sar-symbol {
  width: 24px;
  height: 24px;
}

.btn-add-cart {
  display: inline-block;
  text-align: center;
  margin-top: 8px;
  font-size: 0.9rem;
  padding: 8px 24px;
  width: 160px;
  align-self: center;
}

/* --- Saudi Made Banner --- */
.saudi-made {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  padding: 50px 0;
  text-align: center;
  color: var(--color-white);
}

.saudi-made-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.saudi-made-badge {
  display: block;
  margin: 20px auto 0;
  height: 75px;
  width: auto;
}

.saudi-made h3 {
  font-family: var(--font-en);
  font-size: 1.5rem;
  color: var(--color-white);
}

.rtl .saudi-made h3 {
  font-family: var(--font-ar);
}

.saudi-made p {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}

/* Cursor-following gold glow for every gold-gradient section (saudi-made, CTA, promise).
   A .gold-glow-layer div is injected by main.js; it fades in under the cursor and hides
   while the cursor is over text/buttons/images. Light gold, since the bg is already gold. */
.saudi-made,
.cta-section,
.promise-section {
  position: relative;
  overflow: hidden;
}
.gold-glow-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), rgba(243, 217, 138, 0.45), transparent 72%);
}
.cursor-active > .gold-glow-layer { opacity: 1; }
.saudi-made > .container,
.cta-section > .container,
.promise-section > .container {
  position: relative;
  z-index: 1;
}

/* Every gold-gradient section reacts to scroll — a very subtle gold sheen slides across the
   gradient as you scroll (--gold-scroll set per section in main.js). `section.` keeps the
   specificity above each section's own `background` rule regardless of source order. */
section.saudi-made,
section.cta-section,
section.promise-section {
  background-image: linear-gradient(135deg, #a3760a 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, #a3760a 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
}

/* --- CTA Section --- */
.cta-section {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  padding: 96px 0;
  text-align: center;
  color: var(--color-white);
}

.cta-section h2 {
  font-family: var(--font-en);
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.rtl .cta-section h2 {
  font-family: var(--font-ar);
}

.cta-section p {
  color: rgba(255,255,255,0.8);
  margin-bottom: 32px;
  font-size: 1.1rem;
}

/* --- Footer --- */
.footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.7);
  padding: 0;
  position: relative;
}

.footer .container {
  max-width: 100%;
  padding: 0 15px;
}

.footer-top {
  padding: 40px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
}

.footer .logo-text {
  color: var(--color-white);
}

.footer-tagline {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rtl .footer-tagline {
  letter-spacing: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  gap: 60px;
  padding: 40px 0;
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 1.1rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-col ul li {
  margin-bottom: 15px;
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
}

.footer-col ul li a {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}

.footer-col ul li a:hover {
  color: var(--color-accent);
}

.footer-col-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-legal-logos {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 16px;
  align-items: flex-start;
}

.footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  justify-content: flex-start;
  /* Desktop: two per row, aligned to the column edge like the other footer columns
     (left on en, right on ar) so the icons line up under the heading. */
  max-width: 112px;
}

@media (max-width: 768px) {
  /* Phone: four per row — STC Pay · Apple Pay · Tabby · Tamara, then Visa · Mastercard · mada — centered. */
  .footer-payment-icons {
    max-width: 224px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

.payment-icon {
  width: 48px;
  height: 30px;
  border-radius: 4px;
  display: block;
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  text-decoration: none;
}

.legal-badge img {
  height: 2.8rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.legal-badge img[src$="VAT.webp"] {
  height: 2.8rem;
  transform: scale(1.35);
  transform-origin: center;
}

.legal-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.legal-badge-label {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
}

/* Legal badges: ONLY the logos are interactive. The SBC logo links to the
   official verification page; the VAT logo opens the enlarge lightbox. The
   text labels beside them are plain — no hover, not clickable. */
.legal-badge-link,
.legal-badge-link img,
.legal-badge-zoom {
  cursor: pointer;
}
.legal-badge-zoom {
  transition: filter 0.25s ease;
}
.legal-badge-zoom:hover {
  filter: brightness(1.35);
}

/* VAT badge lightbox: click shows the mark (later: the certificate) large,
   on a white card over a dimmed page. Click anywhere to close. */
.vat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(30, 24, 12, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.vat-lightbox .vat-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 34px 28px 24px;
  max-width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.vat-modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  background: none;
  border: none;
  color: #c0392b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.vat-modal-title {
  font-size: 0.85rem;
  color: #8a7c63;
  margin-bottom: 4px;
}
.vat-modal-number {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c2418;
  margin-bottom: 16px;
}
.vat-lightbox .vat-modal img {
  max-width: 100%;
  max-height: 62vh;
}

/* SBC logo: keeps its own colors; while the mouse rests on the badge it
   gets a little lighter — the same feel as the social icons' hover. */
.legal-badge-link img {
  transition: filter 0.25s ease;
}
.legal-badge-link:hover img {
  filter: brightness(1.35);
}

.legal-badge-number {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
}

.rtl .footer-col-right {
  align-items: flex-start;
  justify-self: start;
}

.rtl .footer-saudi-made {
  order: 2;
  align-self: flex-start;
}

.rtl .footer-social-icons {
  order: -1;
}

.footer-saudi-made {
  width: 170px;
  height: auto;
  position: absolute;
  bottom: 75px;
  right: 30px;
}

.rtl .footer-saudi-made {
  right: auto;
  left: 30px;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  position: absolute;
  top: 40px;
  right: 30px;
}

.rtl .footer-social-icons {
  right: auto;
  left: 30px;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
}

.footer-social-icons a svg {
  width: 30px;
  height: 30px;
}

.footer-social-icons a:hover {
  color: var(--color-white);
}

.footer-social-img {
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: var(--transition);
}

.footer-social-icons a:hover .footer-social-img {
  opacity: 1;
}

.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
}

/* --- Breadcrumb Route Bar --- */
.breadcrumb-bar {
  background: #F7F3EA;
  padding: 25px 0 10px;
  margin-top: 70px;
  line-height: 1;
  position: relative;
  z-index: 950; /* above the nav-hover fog (900) so routes don't blur, below the navbar (1000) so it tucks under it */
}



.breadcrumb-bar .container {
  max-width: 100%;
  padding: 0 30px 0 24px;
}

.breadcrumb-bar nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: rgba(81,59,26,0.6);
}

.breadcrumb-bar a {
  color: rgba(81,59,26,0.6);
  transition: var(--transition);
}

.breadcrumb-bar a:hover {
  color: #513B1A;
}

.breadcrumb-bar .separator {
  color: rgba(81,59,26,0.35);
  font-size: 0.7rem;
}

.breadcrumb-bar .current {
  color: rgba(81,59,26,0.85);
}

/* --- Page Banner (inner pages) --- */
.page-banner {
  background: #8b6508 center/cover no-repeat;
  padding: 150px 0 170px;
  text-align: center;
  color: var(--color-white);
  position: relative;
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.breadcrumb-bar + .page-banner {
  padding-top: 180px;
}

.page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.page-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.page-banner-video {
  background: #000;
  height: calc(100vh - 100px);
  min-height: 400px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-banner-scroll-arrow {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: background 0.3s ease, border-color 0.3s ease;
  animation: bounceArrow 2s infinite;
  display: block;
  font-size: 0;
  color: transparent;
  overflow: hidden;
  text-decoration: none;
}

.page-banner-scroll-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -65%) rotate(45deg);
}

.page-banner-scroll-arrow:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

.page-banner-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-banner-video::before {
  z-index: 1;
}

.page-banner h1 {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  animation: fadeInUp 0.8s ease both;
}

.rtl .page-banner h1 {
  font-family: var(--font-ar);
}

.breadcrumb {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

.breadcrumb a {
  color: var(--color-accent);
}

.breadcrumb a:hover {
  color: var(--color-white);
}

/* --- Our Story Page --- */
.story-section {
  background: var(--color-white);
}

.story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.story-block:last-child {
  margin-bottom: 0;
}

.story-block.reverse {
  direction: ltr;
}

.story-block.reverse .story-img {
  order: 2;
}

.rtl .story-block.reverse .story-img {
  order: 0;
}

.rtl .story-block.reverse {
  direction: rtl;
}

.story-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow), var(--gold-inlay);
}

.story-img img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.story-text h2 {
  font-family: var(--font-en);
  font-size: 2rem;
  color: #513B1A;
  margin-bottom: 16px;
}

.rtl .story-text h2 {
  font-family: var(--font-ar);
}

.story-text p {
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 14px;
}

/* --- Values Section --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.value-card {
  background: var(--color-white);
  padding: 40px 30px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.value-card:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.value-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

.value-icon svg {
  width: 34px;
  height: 34px;
  stroke: var(--color-white);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card h3 {
  font-family: var(--font-en);
  font-size: 1.2rem;
  color: #513B1A;
  margin-bottom: 15px;
}

.rtl .value-card h3 {
  font-family: var(--font-ar);
}

.value-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* --- Contact Page --- */
.contact-section {
  background: var(--color-white);
}

.contact-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.contact-info-card {
  background: #F7F3EA;
  padding: 40px 30px;
  border-radius: var(--radius);
  border: 2px solid #F7F3EA;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.contact-info-card:hover {
  box-shadow: none;
  transform: none;
  border-color: #F7F3EA;
}

.contact-icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.6rem;
}

.contact-icon svg {
  display: block;
  margin: auto;
}

.contact-info-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #513B1A;
  margin-bottom: 0;
}

.contact-info-card p {
  font-size: 1rem;
  color: var(--color-primary-dark);
  font-weight: 500;
}

.contact-details-section {
  background: #F7F3EA;
  padding: 40px 0;
}

.contact-details-row {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
  color: var(--color-text);
}

.contact-detail-label {
  font-weight: 700;
  color: #513B1A;
  font-size: 1rem;
}

.contact-detail-divider {
  color: rgba(81,59,26,0.2);
  font-weight: 300;
}

.form-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin: 2rem 0 1rem;
  padding-top: 1rem;
}

/* Custom confirmation dialog (on-brand replacement for the native confirm popup) */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.confirm-overlay.active {
  opacity: 1;
  visibility: visible;
}
.confirm-modal {
  background: var(--color-white);
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s ease;
}
.confirm-overlay.active .confirm-modal {
  transform: translateY(0) scale(1);
}
.confirm-message {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 28px;
}
.rtl .confirm-message {
  font-family: var(--font-ar);
}
.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.confirm-actions .btn {
  min-width: 130px;
  justify-content: center;
}
/* Cancel button: dark text + brown border so it's visible on the white modal */
.confirm-cancel.btn-outline {
  color: var(--color-text);
  border-color: rgba(81, 59, 26, 0.35);
}
.confirm-cancel.btn-outline:hover {
  background: rgba(81, 59, 26, 0.06);
  border-color: var(--color-text);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* Required-field asterisk (added next to B2B form labels via main.js) */
.required-star {
  color: #e53e3e;
  font-weight: 700;
}

/* On-brand inline form error (replaces the native validation bubble).
   Single source of truth: the message is hidden until JS adds the .show class. */
.field-error {
  display: none;
  color: #c0392b;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 6px 0 0;
  text-align: left;
  direction: ltr;
}
.rtl .field-error {
  text-align: right;
  direction: rtl;
}
.field-error.show {
  display: block;
}
.input-error {
  border-color: #c0392b !important;
}

/* International phone input (intl-tel-input) — full width, and kept LTR even on RTL pages */
.iti {
  width: 100%;
  direction: ltr;
}
.iti input,
.iti input[type="tel"] {
  direction: ltr;
  text-align: left;
}
.iti__selected-flag {
  direction: ltr;
}
.iti__country-list {
  z-index: 10;
  text-align: left;
  left: 0;
  right: auto;
  max-height: 320px;
}

/* Thicker gold scrollbar — ONLY for the phone country dropdown, not the page scrollbar */
.iti__country-list::-webkit-scrollbar {
  width: 8px;
}
.iti__country-list::-webkit-scrollbar-track {
  background: rgba(184, 134, 11, 0.12);
}
.iti__country-list::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 0;
  min-height: 60px;
}
.iti__country-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
@supports (-moz-appearance: none) {
  .iti__country-list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) rgba(184, 134, 11, 0.12);
  }
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-white);
  transition: var(--transition);
  color: var(--color-text);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Compact 2-line textarea (e.g. optional delivery notes) */
.form-group textarea.notes-compact {
  min-height: auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Contact note (shows the account number on the address page) */
.contact-note {
  margin: 0 0 22px;
  padding: 12px 14px;
  background: #faf7f0;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.5;
}

.contact-note strong {
  color: var(--color-primary-dark);
}

/* "Do you have WhatsApp?" yes/no question */
.whatsapp-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-icon {
  width: 20px;
  height: 20px;
  color: #25D366;
  flex-shrink: 0;
  transform: translateY(3px);
}

.whatsapp-hint {
  margin: 6px 0 12px;
  font-size: 0.82rem;
  color: rgba(81,59,26,0.45);
  line-height: 1.5;
}

.city-note {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* Form validation error focus ring (see the consolidated .field-error/.input-error rules above) */
.input-error:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12) !important;
}

.yesno-options {
  display: flex;
  gap: 10px;
}

.yesno-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: 1.5px solid #F0EBE0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
}

.yesno-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.yesno-option:hover {
  background: #F7F3EA;
  border-color: #E4D2A6;
}

.yesno-option:has(input:checked) {
  border-color: var(--color-primary);
  background: #F7F3EA;
  color: var(--color-primary-dark);
}

/* Gift-wrapping options (product detail pages) */
.product-gift {
  margin: 4px 0 20px;
}
.product-gift-title {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  font-size: 1rem;
}
.gift-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gift-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid #F0EBE0;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
}
.gift-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gift-option:hover {
  background: #F7F3EA;
  border-color: #E4D2A6;
}
.gift-option:has(input:checked) {
  border-color: var(--color-primary);
  background: #F7F3EA;
}
.gift-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(81,59,26,0.15);
}
.gift-swatch-red { background: #c0392b; }
.gift-swatch-brown { background: #6b4423; }
.gift-swatch-none {
  background: transparent;
  border: 1.5px dashed #C9BCA4;
}
.gift-option-price {
  margin-inline-start: auto;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
}
.gift-sar {
  height: 0.8em;
  width: auto;
}
/* Arabic: the badge is forced LTR for "+﷼١٠", which flips its auto-margin to the wrong
   side — push it to the far (left) end of the option row on RTL pages. */
.rtl .gift-option-price {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* "Save for next time" checkbox (address + payment pages) */
.save-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
}

.save-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #E0D6C8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.save-option input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: #B8860B;
}

.save-option input[type="checkbox"]:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -1px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.save-option span { line-height: 1.4; color: var(--color-text); }

/* Required policy-agreement checkbox in the sign-in / sign-up forms (styled like .save-option) */
.account-agreement {
  margin: 2px 0 14px;
}
.account-agree-option {
  align-items: flex-start;
  font-size: 0.85rem;
}
.account-agree-option span a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
}
.account-agreement .field-error {
  margin-top: 8px;
}

/* Agreement checkbox inside the B2B / careers contact forms. It sits in a .form-group, whose
   base rules (`.form-group input` full width+padding, `.form-group label` display:block) would
   otherwise inflate the box and break it out of the row — override them here so it stays a small
   square sitting next to the text, exactly like the sign-in consent box. */
.form-agreement {
  margin-bottom: 20px;
}
.form-agreement .save-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.85rem;
}
.form-agreement .save-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
}
.form-agreement .field-error {
  margin-top: 8px;
}

/* --- Products Page --- */
.products-page-section {
  background: var(--color-white);
}

.product-detail-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(525px, auto);
  gap: 0;
  margin-bottom: 40px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.product-detail-card:hover {
  box-shadow: var(--shadow-hover);
}

.product-detail-card:last-child {
  margin-bottom: 0;
}

.product-detail-card:nth-child(even) {
  direction: ltr;
}

.product-detail-card:nth-child(even) .product-detail-img {
  order: 2;
}

.rtl .product-detail-card:nth-child(even) {
  direction: rtl;
}

.rtl .product-detail-card:nth-child(even) .product-detail-img {
  order: 0;
}

.product-detail-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--gold-inlay);
}

.product-detail-img img {
  width: 100%;
  height: 100%;
  min-height: 350px;
  /* Photos fill the frame top-to-bottom (the nutrition-facts label below is
     the one exception — it stays fully visible via its contain override). */
  object-fit: cover;
  background: #fffcf4;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.product-detail-img img:first-of-type {
  position: relative;
  /* The photos carry extra cream padding top/bottom (see images/): default
     the frame to the original SQUARE crop; when longer text (EN) stretches
     the frame taller, the stretch only reveals that padding — the product
     itself is never cropped. */
  aspect-ratio: 1 / 1;
}

/* The nutrition-facts label is a table, so show it in full (never cropped/zoomed like the photos).
   Give it the card background so its box covers the whole frame — then the cross-fade matches the
   photos (the previous slide is covered, not left lingering in the contain letterbox margins). */
.product-detail-img img[src*="nutrition_facts"] {
  object-fit: contain;
  background: var(--color-bg);
}
/* While that contained label is the active slide, drop the gold inlay border — otherwise it
   frames the empty space around the image. */
.product-detail-img:has(img[src*="nutrition_facts"].active) {
  box-shadow: none;
}

/* Desktop only (not iPad/tablet): widen the image column to 55% of the card's width and
   shrink the text column to 45% (the image takes width from the text side). */
@media (min-width: 1025px) {
  .product-detail-card {
    grid-template-columns: 55% 45%;
  }
}

.product-detail-img img.active {
  opacity: 1;
  z-index: 1;
}

.product-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.product-slider-arrow:hover {
  background: rgba(0,0,0,0.7);
}

.product-slider-prev {
  left: 12px;
}

.product-slider-next {
  right: 12px;
}

body.rtl .product-slider-prev {
  left: auto;
  right: 12px;
}

body.rtl .product-slider-next {
  right: auto;
  left: 12px;
}

body.rtl .product-slider-dots {
  left: 50%;
  right: auto;
  direction: ltr;
}

.product-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  z-index: 2;
}

.product-slider-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: var(--transition);
}

.product-slider-dot.active {
  background: #fff;
}

.product-detail-info {
  padding: 50px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.product-detail-info .product-size-badge {
  position: static;
  display: inline-block;
  width: fit-content;
  margin-bottom: 16px;
}

.product-detail-info h2 {
  font-family: var(--font-en);
  font-size: 2rem;
  color: #513B1A;
  margin-bottom: 16px;
}

.rtl .product-detail-info h2 {
  font-family: var(--font-ar);
}

.product-detail-info p {
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 12px;
}

.product-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-direction: row-reverse;
  margin-top: auto;
  padding-top: 20px;
}

.rtl .product-detail-actions {
  flex-direction: row-reverse;
  padding-top: 20px;
  gap: 20px;
}

.rtl .product-detail-actions .product-price {
  font-size: 2.3rem;
}

.rtl .product-detail-actions .product-price .sar-symbol {
  width: 30px;
  height: 30px;
}

.rtl .product-detail-actions .btn-add-cart {
  font-size: 1.2rem;
  padding: 14px 36px;
}

.product-detail-actions .product-price {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.3rem;
}

.product-detail-actions .product-price .sar-symbol {
  width: 30px;
  height: 30px;
}

.product-detail-actions .btn-add-cart {
  margin-top: 0;
  align-self: auto;
  font-size: 1.1rem;
  padding: 12px 32px;
  width: auto;
}

.product-features {
  list-style: none;
  /* .product-detail-info is a flex column (no margin-collapsing), so the gap above the list is
     the paragraph's 12px + this 12px = 24px. Match it below: 20px + the gift section's 4px = 24px. */
  margin: 12px 0 20px;
}

.product-features li {
  padding: 4px 0;
  color: var(--color-text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 11px;
}

.product-features li::before {
  content: '✓';
  color: #513B1A;
  font-weight: 700;
}

/* --- Map Section --- */
.map-section {
  padding: 0;
}

.map-section iframe {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* Scroll animations */
.fade-in {
  /* Reveal is handled by js/luxury-animations.js. This class is kept inert
     so any element still carrying it can never be hidden. */
  opacity: 1;
  transform: none;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* --- Mobile Menu Overlay --- */
.mobile-menu {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
  padding-top: 90px; /* clear the fixed header so the first item isn't tucked under the nav bar */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 1s ease;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu a {
  font-size: 1.3rem;
  font-weight: 600;
  color: #513B1A;
  padding: 10px 20px;
}

.mobile-menu a:hover {
  color: var(--color-primary);
}

.mobile-menu a.active {
  color: #513B1A;
  border-bottom: 2px solid #E8B830;
  font-weight: 600;
}

.mobile-menu .lang-toggle {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .contact-details-row {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .contact-detail-item {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .contact-detail-divider {
    display: none;
  }
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .footer-social { justify-content: center; }
  .rtl .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-col-right { align-items: center; gap: 6px; display: flex; flex-direction: column; }
  .rtl .footer-col-right { align-items: center; justify-self: center; }
  .footer-social-icons { justify-content: center; position: static; order: 1; gap: 14px; }
  .footer-social-icons a svg { width: 32px; height: 32px; }
  .rtl .footer-social-icons { position: static; }
  .footer-saudi-made { position: static; margin-top: 4px; margin-bottom: -30px; align-self: center; order: 2; transform: translateY(10px); }
  .rtl .footer-saudi-made { position: static; align-self: center; }
  .footer-legal-logos { align-items: center; }
  .legal-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .legal-badge-text { align-items: center; }

  .nav-links { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 1024px) {
  .product-detail-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .product-detail-card:nth-child(even) .product-detail-img {
    order: 0;
  }
  .product-detail-img {
    max-height: none;
    width: 100%;
    aspect-ratio: auto;
  }
  .product-detail-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .product-detail-info {
    padding: 30px 24px 30px;
  }
  .hero h1 { font-size: 3rem; }
  .rtl .hero h1 { font-size: 2.8rem; }
  .section-title { font-size: clamp(1.8rem, 5vw, 2.2rem); }
  .about-grid { gap: 40px; }

  .contact-detail-item {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .contact-detail-divider {
    display: none;
  }
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .footer-social { justify-content: center; }
  .rtl .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-col-right { align-items: center; gap: 6px; display: flex; flex-direction: column; }
  .rtl .footer-col-right { align-items: center; justify-self: center; }
  .footer-social-icons { justify-content: center; position: static; order: 1; gap: 14px; }
  .footer-social-icons a svg { width: 32px; height: 32px; }
  .rtl .footer-social-icons { position: static; }
  .footer-saudi-made { position: static; margin-top: 4px; margin-bottom: -30px; align-self: center; order: 2; transform: translateY(10px); }
  .rtl .footer-saudi-made { position: static; align-self: center; }
  .footer-legal-logos { align-items: center; }
  .legal-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .legal-badge-text { align-items: center; }
}

@media (max-width: 768px) {
  .cart-sidebar { width: 100%; max-width: 100vw; right: -100%; }
  .cart-sidebar.active { right: 0; }
  .rtl .cart-sidebar { left: -100%; }
  .rtl .cart-sidebar.active { left: 0; right: auto; }

  /* Account panel matches the cart drawer on mobile */
  .account-modal { width: 100%; max-width: 100vw; right: -100%; }
  .account-modal.active { right: 0; }
  .rtl .account-modal { left: -100%; }
  .rtl .account-modal.active { left: 0; right: auto; }

  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* Tighten the mobile header spacing so the full logo + all actions (incl. the language label) fit. */
  .nav { padding-left: 14px; padding-right: 14px; gap: 12px; }
  .nav-actions { gap: 10px; }
  /* Phones (both languages): compact language label with the globe sized to match the cart/account
     icons + tighter padding, so cart · language · account read as one even, aligned row. */
  .lang-toggle { font-size: 0.8rem; text-transform: none; letter-spacing: 0; gap: 4px; padding: 6px 2px; }
  .lang-toggle svg { width: 22px; height: 22px; }
  /* Arabic logo: nudge a little to the left on mobile (overrides the desktop +4px rightward nudge). */
  .rtl .logo { transform: translateX(-11px); }

  /* Fit the hero to the VISIBLE screen on entry: svh excludes the browser's
     address bar, and 110px accounts for the header + breadcrumb above the
     hero. The vh line is the fallback for older browsers. Content spacing is
     compressed below so text, buttons, AND the scroll arrow all fit. */
  .hero { height: auto; min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); padding-bottom: 60px; box-sizing: border-box; }
  /* Match the home hero exactly on mobile: same height + same arrow lift. */
  .story-hero { height: calc(100vh - 110px); height: calc(100svh - 110px); min-height: 0; }
  /* Our Story hero: same compact treatment as the home hero on phones. */
  .story-hero h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .rtl .story-hero h1 { font-size: 1.8rem; }
  .story-hero p { font-size: 0.95rem; line-height: 1.7; }
  .story-hero .container { padding: 0 24px; }
  .hero-content { padding: 10px 20px 0; margin-bottom: 0; }
  .hero h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .rtl .hero h1 { font-size: 1.8rem; }
  .hero-badge { margin-bottom: 6px; }
  .hero-badge-divider { margin-bottom: 12px; }
  /* !important beats the inline font-size on the hero paragraph markup. */
  .hero p { font-size: 0.92rem !important; margin: 0 auto 14px; line-height: 1.65; }
  .hero-btns { flex-direction: column; align-items: center; margin-top: 0; gap: 10px; }
  .hero-btns .btn { padding: 12px 30px; font-size: 0.9rem; }

  .about-grid,
  .story-block,
  .contact-cards-row,
  .product-detail-card {
    grid-template-columns: 1fr;
  }

  .contact-details-row {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .contact-detail-item {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }

  .contact-detail-divider {
    display: none;
  }

  .story-block.reverse .story-img,
  .product-detail-card:nth-child(even) .product-detail-img {
    order: 0;
  }

  .products-grid .product-card { flex-basis: 100%; max-width: none; }
  .order-partners-grid { grid-template-columns: 1fr; max-width: 300px; gap: 14px; }
  .order-partner-card {
    aspect-ratio: auto;
    padding: 20px;
  }
  .order-partner-card img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .section { padding: 60px 0; }
  .section-title { font-size: clamp(1.8rem, 5vw, 2.2rem); }

  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .footer-social { justify-content: center; }
  .rtl .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .footer-col-right { align-items: center; gap: 6px; display: flex; flex-direction: column; }
  .rtl .footer-col-right { align-items: center; justify-self: center; }
  .footer-social-icons { justify-content: center; position: static; order: 1; gap: 14px; }
  .footer-social-icons a svg { width: 32px; height: 32px; }
  .rtl .footer-social-icons { position: static; }
  .footer-saudi-made { position: static; margin-top: 4px; margin-bottom: -30px; align-self: center; order: 2; transform: translateY(10px); }
  .rtl .footer-saudi-made { position: static; align-self: center; }
  .footer-legal-logos { align-items: center; }
  .legal-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .legal-badge-text { align-items: center; }

  .page-banner {
    padding: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .breadcrumb-bar + .page-banner { padding-top: 0; }
  .page-banner h1 { font-size: 2.2rem; margin-bottom: 0; }

  .product-detail-info { padding: 30px 24px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .rtl .hero h1 { font-size: 1.8rem; }
  .stat-number { font-size: 2.2rem; }
  .logo-text { font-size: 1.2rem; }
}

/* ============================================
   LUXURIOUS OUR STORY PAGE (no product photos)
   ============================================ */
.story-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
}

.story-hero {
  background: #000;
  height: calc(100vh - 120px);
  min-height: 400px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
}

.story-hero .container {
  position: relative;
  z-index: 2;
}

.story-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.story-hero::after {
  display: none;
}

.story-hero .section-label {
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}

.story-hero h1 {
  font-family: var(--font-en);
  font-size: 3.5rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.rtl .story-hero h1 {
  font-family: var(--font-ar);
}

.story-hero p {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  line-height: 1.8;
}

.story-gold-line {
  width: 60px;
  height: 1.5px;
  background: var(--color-accent);
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}

/* Our Story hero pop-up entrance on page load */
.story-hero .section-label {
  animation: fadeInDown 0.8s ease both;
}
.story-hero .story-gold-line {
  animation: fadeInUp 0.8s ease 0.15s both;
}
.story-hero h1 {
  animation: fadeInUp 0.8s ease 0.3s both;
}
.story-hero p {
  animation: fadeInUp 0.8s ease 0.45s both;
}
.story-hero .hero-bottom-nav {
  animation: heroNavIn 0.8s ease 0.9s both;
}

/* Story Timeline */
.story-timeline {
  background: var(--color-white);
  padding: 100px 0;
  position: relative;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-accent), var(--color-primary), var(--color-accent));
}

.timeline-item {
  padding: 40px 0;
  position: relative;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(200,164,94,0.2);
}

.timeline-content {
  width: 42%;
  padding: 30px 35px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(200,164,94,0.15);
  transition: var(--transition);
}

.timeline-content:hover {
  box-shadow: none;
  border-color: rgba(200,164,94,0.15);
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-left: 0;
  margin-right: auto;
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
  margin-right: 0;
}

.timeline-content h3 {
  font-family: var(--font-en);
  font-size: 1.3rem;
  color: #513B1A;
  margin-bottom: 8px;
}

.rtl .timeline-content h3 {
  font-family: var(--font-ar);
}

.timeline-content .timeline-label {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.rtl .timeline-content .timeline-label {
  letter-spacing: 0;
}

.timeline-content p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Luxury text blocks */
.luxury-text-section {
  padding: 100px 0;
  background: var(--color-bg);
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 15px;
  }
  #about-section {
    scroll-margin-top: 15px;
  }
  #story-content {
    scroll-margin-top: 0;
  }
}

.luxury-text-block {
  max-width: 750px;
  margin: 0 auto 60px;
  text-align: center;
}

.luxury-text-block:last-child {
  margin-bottom: 0;
}

.gold-divider {
  width: 60px;
  height: 1.5px;
  background: var(--color-accent);
  margin: 0 auto 16px;
}

.luxury-text-block .gold-divider {
  width: 60px;
  height: 1.5px;
  background: var(--color-accent);
  margin: 0 auto 20px;
}

.luxury-text-block h2 {
  font-family: var(--font-en);
  font-size: 2rem;
  color: #513B1A;
  margin-bottom: 16px;
}

.rtl .luxury-text-block h2 {
  font-family: var(--font-ar);
}

.luxury-text-block p {
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 2;
}

/* Promise section with dark bg */
.promise-section {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  padding: 80px 0;
  text-align: center;
  color: var(--color-white);
  position: relative;
}

.promise-section::before,
.promise-section::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--color-accent);
}

.promise-section::before { top: 0; }
.promise-section::after { bottom: 0; }

.promise-section h2 {
  font-family: var(--font-en);
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--color-white);
}

.rtl .promise-section h2 {
  font-family: var(--font-ar);
}

.promise-section p {
  max-width: 650px;
  margin: 0 auto;
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  line-height: 1.9;
}

/* ============================================
   B2B PAGE
   ============================================ */
.b2b-section { background: var(--color-white); padding: 64px 0; }
.b2b-section .section-header { margin-bottom: 40px; }

.b2b-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 0;
}

.b2b-card {
  background: var(--color-bg);
  padding: 40px 30px;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid transparent;
  transition: var(--transition);
}

.b2b-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* The shopping-cart glyph (handle on the left) reads right-of-centre — nudge it left to optically centre it in the circle. */
.b2b-icon-cart svg {
  transform: translateX(-3px);
}

.b2b-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
  color: var(--color-white);
}

.b2b-icon svg {
  width: 34px;
  height: 34px;
  stroke: var(--color-white);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b2b-card h3 {
  font-family: var(--font-en);
  font-size: 1.2rem;
  color: #513B1A;
  margin-bottom: 15px;
}

.rtl .b2b-card h3 {
  font-family: var(--font-ar);
}

.b2b-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

.b2b-cta-box {
  background: var(--color-bg);
  border: 1px solid rgba(200,164,94,0.2);
  border-radius: var(--radius);
  padding: 50px;
  text-align: center;
}

.b2b-cta-box h3 {
  font-family: var(--font-en);
  font-size: 1.5rem;
  color: #513B1A;
  margin-bottom: 12px;
}

.rtl .b2b-cta-box h3 {
  font-family: var(--font-ar);
}

.b2b-cta-box p {
  color: var(--color-text-light);
  margin-bottom: 24px;
}

/* ============================================
   WORK WITH US / CAREERS PAGE
   ============================================ */
.careers-section { background: var(--color-white); padding-top: 50px; }

.careers-section .section-header {
  margin-bottom: 16px;
}

.careers-intro {
  max-width: 700px;
  margin: 0 auto 60px;
  text-align: center;
}

.careers-intro p {
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 1.9;
}

.hiring-notice {
  max-width: 700px;
  margin: 0 auto 60px;
  text-align: center;
  background: #c0392b;
  border-radius: 8px;
  padding: 24px 32px;
}

.hiring-notice p {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 500;
  margin: 0;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.perk-card {
  background: var(--color-bg);
  padding: 35px 25px;
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
}

/* Informational "squares" are static — hovering them does nothing. Only genuinely interactive
   cards (product cards, delivery-partner links) keep their hover lift. */
.perk-card:hover {
  box-shadow: none;
  transform: none;
}

.perk-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.6rem;
  color: var(--color-white);
}

.perk-icon svg {
  width: 34px;
  height: 34px;
  stroke: var(--color-white);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perk-card h3 {
  font-family: var(--font-en);
  font-size: 1.1rem;
  color: #513B1A;
  margin-bottom: 8px;
}

.rtl .perk-card h3 {
  font-family: var(--font-ar);
}

.perk-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Rewards "Why Join": match the 50px top spacing of the other content sections */
.rewards-benefits { padding-top: 50px; }
/* Rewards "Why Join" benefit cards on a white surface */
.rewards-benefits .perk-card { background: var(--color-white); }

.careers-form-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.careers-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: var(--color-white);
  padding: 50px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.careers-form-wrapper h3 {
  font-family: var(--font-en);
  font-size: 1.5rem;
  color: #000000;
  margin-bottom: 8px;
  text-align: center;
}

.rtl .careers-form-wrapper h3 {
  font-family: var(--font-ar);
}

.careers-form-wrapper > p {
  text-align: center;
  color: #000000;
  margin-bottom: 30px;
}

.careers-form-wrapper .form-group label,
.careers-form-wrapper .form-group input,
.careers-form-wrapper .form-group textarea,
.careers-form-wrapper .form-group select {
  color: #000000;
}

.careers-form-wrapper .form-group input::placeholder,
.careers-form-wrapper .form-group textarea::placeholder {
  color: rgba(0,0,0,0.5);
}

.careers-form-wrapper .form-section-title {
  color: #000000;
}

/* Mobile dropdown */
.mobile-menu .mobile-section-title {
  font-size: 0.75rem;
  color: var(--color-text-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .timeline::before { left: 20px; }
  .timeline-dot { left: 20px; }
  .timeline-content { width: calc(100% - 50px); margin-left: 50px !important; margin-right: 0 !important; }
  .story-hero h1 { font-size: 2.4rem; }
  .b2b-grid, .perks-grid { grid-template-columns: 1fr; }
  .careers-form-wrapper { padding: 30px 20px; }
  .b2b-cta-box { padding: 30px 20px; }
}

@media (max-width: 480px) {
  .story-hero h1 { font-size: 2rem; }
}

/* --- Legal Content (Terms & Privacy) --- */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease 0.15s both;
}

.legal-content h3 {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  color: #513B1A;
  margin: 36px 0 12px;
}

.legal-content h3:first-child {
  margin-top: 0;
}

.legal-content p {
  color: rgba(81,59,26,0.8);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-content ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-content ul li {
  color: rgba(81,59,26,0.8);
  line-height: 1.8;
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--color-primary);
  transition: var(--transition);
}

.legal-content a:hover {
  color: var(--color-primary-dark);
}

.rtl .legal-content h3 {
  font-family: var(--font-ar);
}

.rtl .legal-content ul {
  padding-left: 0;
  padding-right: 24px;
}

/* --- Rewards FAQ (native accordion, no JS) --- */
.rewards-faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(184,134,11,0.18);
}
.faq-item summary {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rtl .faq-item summary { font-family: var(--font-ar); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
  margin: 0 0 20px;
  color: rgba(81,59,26,0.8);
  line-height: 1.9;
}
.faq-item p a { color: var(--color-primary); text-decoration: underline; }
.faq-item p a:hover { color: var(--color-primary-dark); }

/* --- Error Pages --- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px 60px;
}

.error-content {
  max-width: 500px;
}

.error-code {
  font-family: var(--font-ar);
  font-size: 8rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.3;
}

.error-title {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 700;
  color: #513B1A;
  margin-bottom: 16px;
}

.error-desc {
  font-size: 1.05rem;
  color: rgba(81,59,26,0.7);
  line-height: 1.7;
  margin-bottom: 32px;
}

.error-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 30px;
  font-family: var(--font-en-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.rtl .error-btn {
  font-family: var(--font-ar);
}

.error-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(184,134,11,0.3);
}

.error-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  color: var(--color-primary);
  opacity: 0.5;
}

.rtl .error-title {
  font-family: var(--font-ar);
}

/* --- Cookie Consent Banner --- */
/* --- Cookie consent: centered modal with a blurred backdrop (like sign-in) --- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}
.cookie-modal.active {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cookie-modal-box {
  background: #fff;
  border-radius: 18px;
  padding: 34px 32px 28px;
  max-width: 430px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(60,45,20,0.28);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cookie-modal.active .cookie-modal-box { transform: translateY(0) scale(1); }

.cookie-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(184,134,11,0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-modal-icon svg { width: 28px; height: 28px; }

.cookie-modal-title {
  font-family: var(--font-en);
  font-size: 1.5rem;
  color: #513B1A;
  margin: 0 0 10px;
}
.rtl .cookie-modal-title { font-family: var(--font-ar); }

.cookie-modal-text {
  font-size: 0.94rem;
  color: #6b5b3e;
  line-height: 1.7;
  margin: 0 0 22px;
}
.rtl .cookie-modal-text { font-family: var(--font-ar); }
.cookie-modal-text a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}

.cookie-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cookie-btn {
  flex: 1;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  font-family: inherit;
}
.rtl .cookie-btn { font-family: var(--font-ar); }

.cookie-btn-accept { background: var(--color-primary); color: #fff; }
.cookie-btn-accept:hover { background: var(--color-primary-dark); }

.cookie-btn-decline {
  background: transparent;
  color: #513B1A;
  border: 1.5px solid #e0d6c8;
}
.cookie-btn-decline:hover { border-color: #513B1A; }

@media (max-width: 480px) {
  .cookie-modal-actions { flex-direction: column-reverse; }
}

/* ============================================================
   LUXURY POLISH — global additive refinements
   (accessibility, motion restraint, gold material, micro-detail)
   ============================================================ */

/* --- Accessibility: respect reduced-motion everywhere --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .hero-scroll-arrow,
  .page-banner-scroll-arrow { animation: none !important; }
}

/* --- Keyboard focus: one tasteful, on-brand gold ring --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.cart-checkout-btn:focus-visible,
.account-btn:focus-visible,
.checkout-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232,184,48,0.45);
}

/* --- Selection + branded scrollbar --- */
::selection { background: var(--color-accent); color: #513B1A; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: rgba(247,243,234,0.9); }
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: #B8860B; }
/* Firefox has no ::-webkit-scrollbar. Declaring scrollbar-color globally makes
   Chrome/Edge IGNORE every ::-webkit-scrollbar rule above (width + hover colour),
   so it is scoped to Firefox only. */
@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--color-accent) rgba(247,243,234,0.9); }
}

/* --- Page loader: branded logo intro that fades out once loaded --- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  /* No-JS / stuck failsafe: always clears itself after 5s */
  animation: loaderFailsafe 0s linear 5s forwards;
}
.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}
.page-loader-logo {
  width: 200px;
  height: auto;
  animation: loaderPulse 2.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.93); }
}
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* --- Tactile press feedback (esp. touch, where hover doesn't exist) --- */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.product-card:active { transform: translateY(-4px); }
.cart-qty-btn:active,
.hero-dot:active { transform: scale(0.9); }
.cart-checkout-btn:active,
.account-btn:active,
.checkout-btn-primary:active { transform: translateY(0) scale(0.98); }

/* Slightly slower hover/press transition on the inner-page banner scroll-down arrow */
.page-banner-scroll-arrow { transition: background 2s ease, border-color 2s ease; }

/* --- Sticky header gracefully condenses on scroll --- */
.nav { transition: padding 0.35s ease; }
.logo-img { transition: width 0.35s ease, height 0.35s ease; }
.header.scrolled {
  background: rgba(247,243,234,0.9);
}
.header.scrolled .nav { padding-top: 6px; padding-bottom: 6px; }
.header.scrolled .logo-img { width: 48px; height: 48px; }

/* --- Gold as real material: metallic sheen on fills & long hairlines --- */
/* --- Refined display-heading weight (Playfair 600 reads "patisserie") --- */
.hero h1,
.story-hero h1,
.about-text h2,
.cta-section h2,
.luxury-text-block h2,
.story-text h2,
.promise-section h2,
.product-detail-info h2 {
  font-weight: 600;
}
/* Tajawal 600 isn't loaded — keep Arabic headings at their loaded 700 */
body.rtl .hero h1,
body.rtl .story-hero h1,
body.rtl .about-text h2,
body.rtl .cta-section h2,
body.rtl .luxury-text-block h2,
body.rtl .story-text h2,
body.rtl .promise-section h2,
body.rtl .product-detail-info h2 {
  font-weight: 700;
}

/* --- A confident CTA is surrounded by silence --- */
.about-text .btn { margin-top: 32px; }

/* --- OpenType polish: ligatures/kerning + aligned numerals on money --- */
body { font-feature-settings: "liga" 1, "kern" 1; }
.cart-sidebar-total-amount,
.order-summary-row,
.order-total,
.product-price,
.stat-number { font-variant-numeric: tabular-nums; }

/* --- Forms: softer placeholders + a clear (on-brand) error state --- */
input::placeholder,
textarea::placeholder { color: rgba(81,59,26,0.45); }
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}

/* --- Mobile: 44px minimum tap targets + notch-safe insets --- */
@media (pointer: coarse) {
  .hero-dot, .product-slider-dot { position: relative; }
  .hero-dot::before,
  .product-slider-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .cart-qty-btn { width: 40px; height: 40px; }
}
@supports (padding: env(safe-area-inset-top)) {
  .header { padding-top: env(safe-area-inset-top); }
  .cart-sidebar-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* --- Account Dashboard (signed-in state) --- */
.account-dashboard {
  padding: 8px 0;
}

.account-dashboard-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0ebe0;
  margin-bottom: 20px;
}

.account-dashboard-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(184,134,11,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.account-dashboard-avatar svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.account-dashboard-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.account-dashboard-email {
  font-size: 0.85rem;
  color: rgba(81,59,26,0.6);
  margin-top: 4px;
}

.account-orders-section {
  margin-bottom: 20px;
}

.account-orders-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-orders-title svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* Order & Settings pages: heading icons match their heading text. */
.account-order-view .account-orders-title svg,
.account-settings-view .account-orders-title svg {
  color: inherit;
}

.account-order-card {
  background: var(--color-bg);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-order-info {
  flex: 1;
}

.account-order-id {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.account-order-date {
  font-size: 0.8rem;
  color: rgba(81,59,26,0.6);
  margin-top: 2px;
}

.account-order-items {
  font-size: 0.8rem;
  color: rgba(81,59,26,0.7);
  margin-top: 4px;
}

.account-order-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.account-order-points svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.account-order-points-expiry {
  font-size: 0.72rem;
  color: rgba(81,59,26,0.6);
  margin-top: 2px;
}

.account-order-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.account-order-status.on-the-way {
  background: rgba(184,134,11,0.15);
  color: #8b6508;
}

.account-order-status.delivered {
  background: #E6ECDA;
  color: #2d5016;
}

.account-order-status.preparing {
  background: rgba(184,134,11,0.15);
  color: #8b6508;
}

.account-orders-empty {
  text-align: center;
  color: rgba(81,59,26,0.5);
  font-size: 0.9rem;
  padding: 20px 0;
}

/* ===== Noma Rewards points ===== */
.account-points-card {
  display: block;
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 4px;
  background: #F7F3EA;
  border: 1px solid rgba(184,134,11,0.3);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: 0.2s;
}

.account-points-card:hover {
  border-color: var(--color-primary);
}

.account-points-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.account-points-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(81,59,26,0.7);
}

.account-points-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.account-points-unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(81,59,26,0.6);
}

.account-points-track {
  position: relative;
  direction: ltr;
  margin: 0 26px 54px;
}

.account-points-bar {
  height: 8px;
  background: rgba(184,134,11,0.18);
  border-radius: 4px;
  overflow: hidden;
}

.account-points-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.account-points-tier {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.6em;
  font-size: 0.62rem;
  line-height: 1.3;
  text-align: center;
  color: rgba(81,59,26,0.5);
  pointer-events: none;
}

.account-points-tier-name {
  margin-top: 1px;
}

.account-points-tier-dot {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid rgba(184,134,11,0.4);
}

.account-points-tier-pts {
  margin-top: 6px;
  font-weight: 700;
}

.account-points-tier.reached {
  color: var(--color-primary);
}

.account-points-tier.reached .account-points-tier-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-bg);
}

.account-points-goal {
  margin-top: 8px;
  font-size: 0.8rem;
  color: rgba(81,59,26,0.7);
}

/* Noma Rewards bar on the payment page */
.payment-rewards {
  position: relative;
  margin: 48px 0 30px;
  padding: 18px 18px 16px;
  background: #F7F3EA;
  border: 1px solid rgba(184,134,11,0.25);
  border-radius: 12px;
}
.payment-rewards::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -32px;
  border-top: 1.5px solid var(--color-accent);
}
.payment-rewards:empty { display: none; }

/* Confirmation page: the rewards bar follows the order summary, so keep its divider tight under the Total. */
.order-success .order-summary-table .grand-total td { padding-bottom: 8px; }
#confirmationRewards { margin-top: 36px; }
#confirmationRewards::before { top: -32px; }

.payment-reward-claims { margin-top: 18px; }

.payment-rewards-claim-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.payment-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #f0ebe0;
}

.payment-reward-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.payment-reward-row-pts { color: rgba(81,59,26,0.6); font-size: 0.8rem; }

.payment-reward-gift {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.payment-reward-add {
  flex-shrink: 0;
  padding: 7px 20px;
  border: none;
  border-radius: 999px;
  background-color: #a3760a;
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, var(--color-primary-dark) 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s;
}
.payment-reward-add:hover { filter: brightness(1.05); }

.payment-reward-added-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.payment-reward-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #E6ECDA;
  border: 1px solid rgba(76,175,80,0.4);
  border-radius: 10px;
}

.payment-reward-applied-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2d5016;
}
.payment-reward-applied-text .payment-reward-gift { color: #2d5016; }

.payment-reward-remove {
  flex-shrink: 0;
  padding: 6px 16px;
  border: 1px solid rgba(76,175,80,0.5);
  border-radius: 999px;
  background: transparent;
  color: #2d5016;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.payment-reward-remove:hover { background: rgba(76,175,80,0.14); }

/* Free reward item line: same size & weight as the regular item rows, just green */
.order-summary-table .order-summary-reward-row td { color: #2d5016; }
.order-summary-table .order-summary-reward-row .price { color: #2d5016; }

/* Points earned banner on the order-confirmation page */
.order-points-earned {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 8px 18px;
  background: rgba(184,134,11,0.12);
  border-radius: 30px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
}

.order-points-earned svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.order-points-earned strong { color: var(--color-primary-dark); }

/* Redeemed free-reward banner (green) */
.order-free-reward { background: rgba(76,175,80,0.12); color: #2d5016; }
.order-free-reward svg { color: #4CAF50; }
.order-free-reward strong { color: #2d5016; }

/* Earned-points banner: cream background, with a clear gap below the reward banner above it */
.order-points-earned:not(.order-free-reward) { background: #EDE3C9; }
.order-free-reward + .order-points-earned { margin-top: 16px; }

/* Rewards page balance card */
.rewards-points-section {
  padding: 40px 0 0;
}

.rewards-points-card {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 1.5px solid rgba(184,134,11,0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rewards-points-star {
  width: 42px;
  height: 42px;
  color: var(--color-accent);
}

.rewards-points-label {
  display: block;
  font-size: 0.95rem;
  color: rgba(81,59,26,0.7);
  margin-top: 8px;
}

.rewards-points-value {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  margin: 4px 0;
}

.rewards-points-unit {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(81,59,26,0.6);
}

.rewards-points-note {
  font-size: 0.9rem;
  color: rgba(81,59,26,0.7);
  margin: 8px 0 0;
}

.account-signout-btn {
  display: block;
  width: 100%;
  padding: 13px;
  margin-top: 12px;
  background: none;
  border: 1px solid #e3b1b1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
  transition: var(--transition);
}

.account-signout-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

/* --- Address Map --- */
.map-container {
  margin-bottom: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid #e0d6c8;
  position: relative;
}

.address-map {
  width: 100%;
  height: 300px;
}

/* Transient notice when the pin is placed outside the Riyadh delivery area. */
.map-bounds-note {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100; /* above Leaflet's internal panes */
  background: #fff;
  color: #b23a2c;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1.5px solid #e0d6c8;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* Cloudflare Turnstile (bot check) — sits between the agreement row and the
   submit button; height reserved so the form doesn't jump when it loads. */
.noma-turnstile {
  margin-bottom: 18px;
  min-height: 65px;
}

.noma-turnstile iframe {
  max-width: 100%;
}

/* Step-level errors (OTP cooldown, too many requests…) shown right under the
   bot-check box; pulled up against it, with air before the submit button. */
.turnstile-error {
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Pre-launch teaser inside the account modal (sign-in disabled). */
.account-prelaunch {
  text-align: center;
  padding: 26px 10px 34px;
}

.account-prelaunch-title {
  font-family: var(--font-serif, serif);
  font-size: 1.5rem;
  color: #b8860b;
  margin-bottom: 12px;
}

.account-prelaunch-text {
  color: #6b5b3e;
  line-height: 1.8;
}

/* Notice shown in place of the delivery pickers when the owner closes
   delivery ordering from the admin panel. */
.delivery-closed-note {
  background: #f7f3ea;
  border: 1.5px solid #e0d6c8;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 24px;
  color: #6b5b3e;
  font-weight: 600;
  text-align: center;
}

/* Submit button while the bot check hasn't passed yet — looks disabled but
   still accepts the click so the form can explain what's missing. Same look
   as the site's other disabled buttons (cream fill, white text). */
.ts-locked,
.ts-locked:hover {
  background: #F7F3EA !important;
  border-color: #F7F3EA !important;
  color: #fff !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Checkout Flow --- */
.checkout-section {
  padding: 40px 0 80px;
  background: var(--color-bg);
}

.checkout-form-card {
  max-width: 580px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}

.checkout-form-card h2 {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.rtl .checkout-form-card h2 {
  font-family: var(--font-ar);
}

.checkout-form-card h2.card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-heading-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  color: inherit;
}

.summary-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.summary-heading-row h2 {
  margin-bottom: 0;
}

.checkout-form-card .summary-heading-row .order-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
}

.checkout-form-card .subtitle {
  font-size: 0.95rem;
  color: rgba(81,59,26,0.7);
  margin-bottom: 28px;
}

.checkout-form-card .form-group {
  margin-bottom: 20px;
}

.checkout-form-card .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.checkout-form-card .form-group input,
.checkout-form-card .form-group select,
.checkout-form-card .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e0d6c8;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: var(--transition);
}

.checkout-form-card .form-group input:focus,
.checkout-form-card .form-group select:focus,
.checkout-form-card .form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}

/* Custom on-brand delivery calendar (replaces the native blue popup) */
.delivery-date-group { position: relative; }
.delivery-date-group input[readonly] { cursor: pointer; background: #fff; }
.noma-cal {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  width: 300px;
  max-width: 92vw;
  background: #fff;
  border: 1.5px solid #e0d6c8;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(81, 59, 25, 0.18);
  padding: 14px;
}
.noma-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.noma-cal-title {
  font-weight: 700;
  color: #513b19;
  font-size: 0.95rem;
}
.noma-cal-nav {
  background: none;
  border: none;
  color: #b8860b;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.noma-cal-nav:hover { background: #f7f3ea; }
.noma-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.noma-cal-dow {
  font-size: 0.58rem;
  color: #8a7c63;
  padding: 4px 0 6px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
}
.noma-cal-day {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: #2c2418;
  padding: 7px 0;
  border-radius: 8px;
  cursor: pointer;
}
.noma-cal-day:hover:not(:disabled) { background: #f7f3ea; }
.noma-cal-day.sel {
  background: #b8860b;
  color: #fff;
  font-weight: 700;
}
.noma-cal-day:disabled {
  color: #cfc5ac;
  cursor: default;
}

/* Time-slot dropdown: same card, single-column list */
.noma-drop {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  /* Slim on-brand scrollbar, inset from the rounded corners */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #b8860b transparent;
}
.noma-drop::-webkit-scrollbar { width: 7px; }
.noma-drop::-webkit-scrollbar-track {
  background: transparent;
  /* keep the thumb travel inside the card's 12px rounded corners */
  margin: 12px 0;
}
.noma-drop::-webkit-scrollbar-thumb {
  background: #b8860b;
  border-radius: 999px;
}
.noma-drop-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: #2c2418;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
}
.noma-drop-item:hover { background: #f7f3ea; }
.noma-drop-item.sel {
  background: #b8860b;
  color: #fff;
  font-weight: 700;
}

/* On-brand replacement for native <select>s (B2B / careers forms) */
.noma-select-display {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8860b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.rtl .noma-select-display { background-position: left 16px center; }
/* Mirror the validation error border onto the visible box when the hidden
   select is flagged invalid */
select.input-error + .noma-select-display { border-color: #c0392b !important; }

/* Delivery slot picker: keep the native date/time controls on-brand — same
   height as the text fields, gold accent in the calendar popup, pointer
   cursors, and a light popup even if the OS is in dark mode. */
.checkout-form-card .form-group input[type="date"],
.checkout-form-card .form-group select {
  min-height: 47px;
  cursor: pointer;
  color-scheme: light;
  accent-color: #b8860b;
}
.checkout-form-card .form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
/* The dd / mm / yyyy segments never highlight blue — not on hover, not while
   focused/edited. The segments keep the plain field look in every state. */
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-day-field,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-month-field,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-year-field,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-text,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-day-field:hover,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-month-field:hover,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-year-field:hover,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-day-field:focus,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-month-field:focus,
.checkout-form-card .form-group input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
  outline: none !important;
  box-shadow: none !important;
}
.checkout-form-card .form-group input[type="date"]::selection {
  background: transparent;
}
.rtl .checkout-form-card .form-group input[type="date"] {
  text-align: right;
}

.checkout-form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkout-form-card .checkout-phone-input {
  display: flex;
  gap: 8px;
}

.checkout-form-card .checkout-phone-prefix {
  width: 70px !important;
  text-align: center;
  background: var(--color-bg) !important;
  font-weight: 600;
}

.checkout-btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  gap: 16px;
}

.checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  font-family: var(--font-en-body);
}

.rtl .checkout-btn {
  font-family: var(--font-ar);
}

.checkout-btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.checkout-btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45,80,22,0.3);
}

.checkout-btn-back {
  background: transparent;
  border: 1.5px solid #F0EBE0;
  color: var(--color-text);
}

.checkout-btn-back:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Add to Basket, Proceed to Payment, Continue — match the "Read Our Story" (.btn-green)
   metallic gold sheen + white text. (--gold-scroll is animated in main.js.) */
.btn-add-cart,
.cart-checkout-btn,
.account-btn,
.checkout-btn-primary {
  background-color: #a3760a;
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, var(--color-primary-dark) 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
  color: var(--color-white);
}
.btn-add-cart:hover,
.cart-checkout-btn:hover,
.account-btn:hover,
.checkout-btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45,80,22,0.3);
}

/* Checkout Progress Bar */
.checkout-progress {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 500px;
  margin: 0 auto 40px;
  padding-top: 100px;
  position: relative;
}

.checkout-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.checkout-step::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #D4B483;
}

.checkout-step:last-child::after {
  display: none;
}

.rtl .checkout-step::after {
  left: auto;
  right: 50%;
}

.checkout-step.completed::after {
  background: #513B1A;
}

.checkout-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #D4B483;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #D4B483;
  background: #fff;
  position: relative;
  z-index: 1;
  font-family: var(--font-ar);
}

.checkout-step.active .checkout-step-number {
  border-color: var(--color-text);
  background: #4CAF50;
  color: #fff;
}

.checkout-step.completed .checkout-step-number {
  border-color: var(--color-text);
  background: #4CAF50;
  color: #fff;
}

.checkout-step-label {
  font-size: 0.78rem;
  margin-top: 8px;
  color: #D4B483;
  font-weight: 500;
}

.checkout-step.active .checkout-step-label,
.checkout-step.completed .checkout-step-label {
  color: var(--color-text);
  font-weight: 600;
}

/* Checkout Sign-in */
.checkout-or-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: rgba(81,59,26,0.5);
  font-size: 0.85rem;
}

.checkout-or-divider::before,
.checkout-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0d6c8;
}

.checkout-or-divider span {
  padding: 0 16px;
}

.checkout-social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.checkout-social-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #e0d6c8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  transition: var(--transition);
}

.checkout-social-circle:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(184,134,11,0.15);
}

.checkout-social-circle svg {
  width: 22px;
  height: 22px;
}

.checkout-email-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid #e0d6c8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  transition: var(--transition);
  font-family: inherit;
}

.checkout-email-toggle:hover {
  border-color: var(--color-primary);
}

.checkout-email-toggle svg {
  width: 20px;
  height: 20px;
}

/* Order Confirmation */
.order-success {
  text-align: center;
  padding: 0 0 20px;
}

/* Confirmation page: pull the success block up closer to the progress bar */
.checkout-section:has(.order-success) {
  padding-top: 0;
}

/* The order summary sits inside the centered success block — keep its heading and
   table aligned like the payment page (start-aligned), not centered. */
.order-success .checkout-form-card {
  text-align: start;
  margin-top: 28px;
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .order-success .checkout-form-card { animation: none; }
}

.order-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #4CAF50;
  background-image: linear-gradient(135deg, #43a047 0%, #4CAF50 50%, #66bb6a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.order-success-icon svg {
  width: 64px;
  height: 64px;
  color: #ffffff;
}

.order-success h2 {
  margin-bottom: 12px;
}

.order-success .order-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 16px 0;
}

.order-summary-card {
  border: 1px solid #e0d6c8;
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 28px;
  text-align: left;
}

.rtl .order-summary-card {
  text-align: right;
}

.order-summary-card h3 {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
}

.rtl .order-summary-card h3 {
  font-family: var(--font-ar);
}

.order-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0ebe0;
  font-size: 0.95rem;
}

.order-summary-row:last-child {
  border-bottom: none;
}

/* Drop the faint line on the row right above the gold total line (VAT row),
   so the gold line is the only divider under it. */
.order-summary-row:has(+ .order-summary-total) {
  border-bottom: none;
}

.order-summary-total {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 2px solid var(--color-primary);
  padding-top: 12px;
  margin-top: 4px;
}

.order-summary-row .cart-sar-symbol {
  height: 14px;
  width: auto;
  vertical-align: middle;
  margin-left: 2px;
}

.rtl .order-summary-row .cart-sar-symbol {
  margin-left: 0;
  margin-right: 2px;
}

/* Line items: lay out like the total rows so the SAR symbol sits next to the price */
.order-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.95rem;
}

.order-summary-row .cart-sar-symbol,
.order-summary-item .cart-sar-symbol {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-left: 0;
  margin-right: 2px;
}

.rtl .order-summary-item .cart-sar-symbol {
  margin-left: 0;
  margin-right: 2px;
}

/* Keep each price + its SAR symbol together on one line, with the symbol on the
   left of the number (RTL flow). On Arabic pages the content is already RTL, so
   this matches it; on English pages it moves the symbol from the right to the left. */
.order-summary-item span:last-child,
.order-summary-row span:last-child {
  white-space: nowrap;
  direction: rtl;
}

/* Order summary shown inside the payment card — golden divider above its heading */
.order-summary-heading {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1.5px solid var(--color-accent);
}

/* Order summary as a table (Item / Quantity / Price) */
.order-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--color-text);
}

.order-summary-table th {
  text-align: start;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(81,59,26,0.6);
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--color-accent);
}

.order-summary-table td {
  padding: 10px 0;
  border-bottom: 1px solid #f0ebe0;
  vertical-align: middle;
}

.order-summary-table tbody tr:last-child td {
  border-bottom: none;
}

/* Quantity column centered */
.order-summary-table th:nth-child(2),
.order-summary-table tbody td:nth-child(2) {
  text-align: center;
}

/* Price column: outer edge, with the SAR symbol on the left of the number */
.order-summary-table th:last-child {
  text-align: end;
}

.order-summary-table .price {
  white-space: nowrap;
  direction: rtl;
  color: var(--color-text);
}

body:not(.rtl) .order-summary-table .price {
  text-align: right;
}

.rtl .order-summary-table .price {
  text-align: left;
}

.order-summary-table .cart-sar-symbol {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-left: 0;
  margin-right: 2px;
}

/* Totals (footer): label spans the first two columns */
.order-summary-table tfoot td {
  padding: 9px 0;
  border-bottom: 1px solid #f0ebe0;
}

.order-summary-table tfoot tr:first-child td {
  padding-top: 14px;
  border-top: 1px solid var(--color-accent);
}

/* The VAT row needs no bottom line — the gold line below it (above the total) is the divider */
.order-summary-table tfoot tr:has(+ .grand-total) td {
  border-bottom: none;
}

.order-summary-table tfoot .grand-total td {
  font-weight: 700;
  font-size: 1.05rem;
  padding-top: 12px;
  border-top: 1.5px solid var(--color-accent);
  border-bottom: none;
}

/* Payment summary in payment page */
.payment-summary {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0d6c8;
}

.payment-summary h3 {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
}

.rtl .payment-summary h3 {
  font-family: var(--font-ar);
}

@media (max-width: 768px) {
  .checkout-form-card {
    padding: 24px 20px;
  }
  .checkout-form-card .form-row {
    grid-template-columns: 1fr;
  }
  .checkout-btn-row {
    flex-direction: column;
  }
  .checkout-btn {
    width: 100%;
    justify-content: center;
  }
  .checkout-step-label {
    font-size: 0.7rem;
  }
}

/* Gold icon backgrounds catch the subtle scroll sheen. Placed at the end so it overrides
   each element's own gold background regardless of source order. */
.value-icon,
.perk-icon,
.b2b-icon,
.contact-icon {
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 42%, #b8870c 52%, var(--color-primary) 62%, var(--color-primary-dark) 100%);
  background-size: 250% 250%;
  background-position: var(--gold-scroll, 50%) var(--gold-scroll, 50%);
}

/* --- Footer accordion on mobile: titled columns collapse to their titles;
   tapping expands smoothly (no divider lines). The title-less column (Saudi
   Made + social icons) always stays visible; expanded content keeps its
   original flex layouts. Desktop keeps the open grid. --- */
@media (max-width: 768px) {
  .footer-col h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
    padding: 12px 0;
  }
  .footer-col h4::after {
    content: '+';
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.45s ease;
  }
  .footer-col.open h4::after { transform: rotate(45deg); }
  /* Smooth open/close: children of titled columns collapse via max-height
     (keeps their own display/flex styles intact). */
  .footer-col:has(> h4) > :not(h4) {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 0.7s ease, opacity 0.55s ease, margin 0.7s ease;
  }
  .footer-col.open > :not(h4) {
    max-height: 520px;
    opacity: 1;
    margin-top: 10px;
  }
}