@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@500;600;700;800&display=swap');

/* Native cross-document page transitions: clicking an internal link crossfades
   into the next page instead of an instant snap. Zero JS, so it can never break
   back/forward, middle-click/new-tab, bfcache, or reduced-motion — unsupported
   browsers (this rule needs Chromium or Safari 18.2+) just navigate normally
   with no visual difference from before, and browsers that DO support it already
   skip/simplify the effect automatically under prefers-reduced-motion. */
@view-transition {
  navigation: auto;
}

:root {
  /* Brand blues lifted from the Alifaye mark: deep navy wordmark + sky-blue droplet/tagline */
  --primary: #17568f;
  --primary-dark: #0f4573;
  --primary-ink: #0b3457;
  --accent: #2ba9e0;
  --accent-light: #e8f7fd;
  --primary-light: #eaf2fa;
  --deal: #e35a2b;
  --deal-light: #fdece3;
  --success: #1e824c;
  --success-light: #e5f5ec;
  --gold: #c8992f;
  --bg: #ffffff;
  --surface-alt: #f5f8fb;
  --text: #101b2b;
  --text-muted: #5c6b7e;
  --border: #e4e9f0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 61, 102, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(15, 61, 102, 0.18);
  --shadow-lg: 0 20px 45px -12px rgba(15, 61, 102, 0.22);
  --font-display: 'Baloo 2', 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --header-h: 72px;
}

html[dir="rtl"] {
  --font-display: 'Cairo', sans-serif;
  --font-heading: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: -4px; }

/* ---------- Motion system ----------
   Two techniques, both safe-by-default:
   1. Hero entrance: a pure-CSS keyframe animation with `both` fill mode, so
      it plays once on load and always lands on the final visible state —
      works identically with or without JS.
   2. Scroll-reveal (`.reveal`): the *hidden* starting state is applied only
      by site.js, right before it starts observing. If JS fails to load or
      IntersectionObserver is unsupported, elements simply never get hidden
      in the first place and render normally. CSS alone never hides content. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow, .hero h1, .hero p.lead, .hero-ctas, .hero-stat-card {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-eyebrow { animation-delay: 0.02s; }
.hero h1 { animation-delay: 0.1s; }
.hero p.lead { animation-delay: 0.2s; }
.hero-ctas { animation-delay: 0.3s; }
.hero-stat-card:nth-child(1) { animation-delay: 0.32s; }
.hero-stat-card:nth-child(2) { animation-delay: 0.42s; }
.hero-stat-card:nth-child(3) { animation-delay: 0.52s; }

.reveal { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

@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; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: 64px; /* room for the mobile sticky bar */
  animation: pageFadeIn 0.4s ease-out both;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* Universal fallback for browsers without the @view-transition rule above
   (Firefox, older Safari) — every page still fades in on load, just without
   the old page crossfading out first. animation-fill-mode: both means a
   bfcache-restored page (back/forward) is left sitting at the finished,
   fully-visible state rather than replaying from invisible. */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0 0 8px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; color: var(--primary-ink); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.section { padding-block: 40px; }
.section-alt { background: var(--surface-alt); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.section-header h2 { font-size: 24px; }
.section-header p { color: var(--text-muted); margin: 4px 0 0; font-size: 14px; }
.section-header .view-all { font-weight: 600; color: var(--primary); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  background: var(--primary);
  color: #fff;
  min-height: 44px;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.btn:hover { background: var(--primary-dark); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.97); }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-whatsapp { background: #25d366; }
.btn-whatsapp:hover { background: #1eb856; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; min-height: 36px; font-size: 13px; }
.btn:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px -6px rgba(15, 61, 102, 0.14); border-bottom-color: transparent; }
.header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}
/* Brand lockup — placeholder built from the logo's own structure (rounded
   mark + two-line wordmark, navy over sky-blue) until the real logo file is
   dropped in at /images/logo.png, at which point this becomes a single <img>. */
.brand-lockup { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px 13px 13px 3px;
  background: linear-gradient(135deg, var(--accent), var(--primary) 75%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--primary-ink); }
.brand-tagline-word { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--accent); letter-spacing: 0.02em; }
.brand-lockup.on-dark .brand-name { color: #fff; }
.brand-lockup.on-dark .brand-tagline-word { color: var(--accent); }

.header-search { flex: 1; max-width: 480px; display: none; }
@media (min-width: 760px) { .header-search { display: block; } }
.header-search form { display: flex; }
.header-search input {
  flex: 1;
  border: 1px solid var(--border);
  border-inline-end: none;
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
}
.header-search button {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  padding: 0 18px;
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}

.header-nav { display: none; gap: 22px; margin-inline-start: auto; }
@media (min-width: 900px) { .header-nav { display: flex; } }
.header-nav a { position: relative; font-weight: 600; font-size: 14px; color: var(--text); padding-block: 4px; }
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
.header-nav a:hover, .header-nav a.active { color: var(--primary); }
.header-nav a:hover::after, .header-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
@media (min-width: 900px) { .header-actions { margin-inline-start: 0; } }
.lang-switch { font-size: 13px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; transition: color 0.15s ease, border-color 0.15s ease; }
.lang-switch:hover { color: var(--primary); border-color: var(--primary); }

.cart-link { position: relative; font-size: 22px; transition: transform 0.15s ease; }
.cart-link:hover { transform: translateY(-1px); }
.cart-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -10px;
  background: var(--deal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.category-strip { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; border-top: 1px solid var(--border); scrollbar-width: none; }
.category-strip::-webkit-scrollbar { display: none; }
.category-strip a {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.category-strip a:hover, .category-strip a.active { background: var(--primary); color: #fff; }
.category-strip a:hover { transform: translateY(-1px); }

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 60;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
@media (min-width: 900px) { .mobile-bar { display: none; } }
.mobile-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
}
.mobile-bar a.active, .mobile-bar a:hover { color: var(--primary); }
.mobile-bar .whatsapp-tab { color: #1eb856; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 160% at 100% 0%, var(--accent) 0%, transparent 45%),
    linear-gradient(160deg, var(--primary-ink), var(--primary) 75%);
  padding-block: 52px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 40px; } }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  font-size: 32px;
  max-width: 520px;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) { .hero h1 { font-size: 46px; } }
.hero p.lead { color: rgba(255, 255, 255, 0.82); font-size: 17px; max-width: 440px; margin-bottom: 26px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn:not(.btn-whatsapp) { background: #fff; color: var(--primary-ink); }
.hero .btn:not(.btn-whatsapp):hover { background: var(--accent-light); }

.hero-stats { position: relative; display: grid; gap: 14px; }
.hero-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-lg);
}
.hero-stat-card:nth-child(2) { margin-inline-start: 28px; }
.hero-stat-card:nth-child(3) { margin-inline-start: 14px; }
.hero-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stat-icon svg { width: 22px; height: 22px; }
.hero-stat-card b { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--primary-ink); }
.hero-stat-card span { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 859px) {
  .hero-stats { display: none; }
}

/* ---------- Category grid (home) ---------- */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .category-grid { grid-template-columns: repeat(6, 1fr); } }
.category-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.category-tile:hover { color: var(--primary); border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-tile-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.category-tile:hover .category-tile-icon { background: var(--primary); color: #fff; }
.category-tile-icon .icon { width: 22px; height: 22px; }

/* ---------- Product grid & card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.product-card .thumb {
  aspect-ratio: 1/1;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.product-card:hover .thumb img { transform: scale(1.06); }
.product-card:hover .thumb-placeholder .icon { transform: scale(1.08); }
.thumb-placeholder .icon { transition: transform 0.3s ease; }
.thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--accent-light), var(--surface-alt));
  color: var(--primary);
}
.thumb-placeholder .icon { width: 34px; height: 34px; opacity: 0.75; }
.pd-gallery-main .thumb-placeholder .icon { opacity: 0.8; }
.product-card .badge-offer {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--deal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.product-card .body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .cat { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.product-card .name { font-weight: 600; font-size: 14px; line-height: 1.4; min-height: 2.8em; }
.product-card .name-ar { font-size: 13px; color: var(--text-muted); }
.product-card .unit { font-size: 12px; color: var(--text-muted); }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.product-card .price { font-weight: 700; font-size: 16px; color: var(--text); }
.product-card .price.has-discount { color: var(--deal); }
.product-card .price-was { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.product-card .add-form { margin-top: auto; padding-top: 10px; }
.product-card .out-of-stock-tag { font-size: 12px; color: var(--deal); font-weight: 600; }

/* ---------- Filters / listing ---------- */
.listing-layout { display: grid; gap: 24px; }
@media (min-width: 860px) { .listing-layout { grid-template-columns: 220px 1fr; } }
.filter-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.filter-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 10px; }
.filter-card label { display: block; font-size: 14px; margin-bottom: 8px; }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.listing-count { color: var(--text-muted); font-size: 14px; }

/* ---------- Forms (shared: contact, b2b) ---------- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.form-field textarea { min-height: 100px; resize: vertical; }
.form-grid-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.form-success { background: var(--success-light); color: var(--success); padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; }
.form-errors { background: var(--deal-light); color: var(--deal); padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; }
.form-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.form-alert.alert-success { background: var(--success-light); color: var(--success); }
.form-alert.alert-error { background: var(--deal-light); color: var(--deal); }

/* ---------- Info tiles (Why choose us / delivery) ---------- */
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.info-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.info-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.info-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.info-tile h3 { font-size: 15.5px; }
.info-tile p { font-size: 13.5px; color: var(--text-muted); margin: 0; }

.delivery-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.delivery-stats .stat { background: #fff; border-radius: var(--radius); padding: 24px 20px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.delivery-stats .stat b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--primary); }
.delivery-stats .stat span { font-size: 12.5px; color: var(--text-muted); }

.testimonial-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.testimonial-card .stars { color: var(--gold); margin-bottom: 10px; display: flex; gap: 2px; }
.testimonial-card p { font-size: 14px; color: var(--text); margin: 0 0 10px; }
.testimonial-card .who { font-size: 13px; font-weight: 600; color: var(--text-muted); }

.map-embed { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Product detail ---------- */
.pd-grid { display: grid; gap: 32px; margin-bottom: 40px; }
@media (min-width: 860px) { .pd-grid { grid-template-columns: 1fr 1fr; } }
.pd-gallery-main { aspect-ratio: 1/1; background: var(--surface-alt); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s ease; }
.pd-thumbs { display: flex; gap: 8px; }
.pd-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.pd-thumbs img:hover { transform: translateY(-2px); }
.pd-thumbs img.active { border-color: var(--primary); }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin: 14px 0; }
.pd-price { font-size: 28px; font-weight: 700; font-family: var(--font-display); color: var(--text); }
.pd-price.has-discount { color: var(--deal); }
.pd-price-was { font-size: 18px; color: var(--text-muted); text-decoration: line-through; }
.pd-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.qty-stepper button { width: 38px; height: 38px; border: none; background: var(--surface-alt); font-size: 18px; }
.qty-stepper input { width: 48px; text-align: center; border: none; font-size: 15px; -moz-appearance: textfield; }
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Cart page ---------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table td { padding: 14px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-item-info { display: flex; gap: 12px; align-items: center; }
.cart-item-thumb { width: 56px; height: 56px; border-radius: 8px; background: var(--surface-alt); overflow: hidden; flex-shrink: 0; }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: calc(var(--header-h) + 16px); }
.cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.cart-summary .row.total { font-weight: 700; font-size: 17px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 6px; }
.cart-notice { background: var(--primary-light); color: var(--primary-dark); font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.empty-cart { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-cart-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-cart-icon .icon { width: 32px; height: 32px; }
.status-pill {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ---------- Offers page ---------- */
.offer-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.offer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }
.offer-card .thumb img { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.offer-card:hover .thumb img { transform: scale(1.08); }
.offer-card .thumb { width: 90px; height: 90px; border-radius: 10px; background: var(--surface-alt); flex-shrink: 0; overflow: hidden; }
.offer-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .offer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- B2B page ---------- */
.b2b-hero {
  background: radial-gradient(120% 160% at 100% 0%, var(--accent) 0%, transparent 45%),
    linear-gradient(160deg, var(--primary-ink), var(--primary) 75%);
  color: #fff;
  padding-block: 48px;
}
.b2b-hero h1, .b2b-hero h2 { color: #fff; font-family: var(--font-display); font-weight: 800; }
.b2b-hero p { color: rgba(255, 255, 255, 0.82); max-width: 640px; font-size: 16px; }
.b2b-hero .hero-eyebrow, .b2b-hero h1, .b2b-hero h2, .b2b-hero p { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.b2b-hero .hero-eyebrow { animation-delay: 0.02s; }
.b2b-hero h1, .b2b-hero h2 { animation-delay: 0.1s; }
.b2b-hero p { animation-delay: 0.2s; }
.b2b-supply-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .b2b-supply-grid { grid-template-columns: repeat(4, 1fr); } }
.supply-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.supply-chip:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.supply-chip .icon { width: 26px; height: 26px; color: var(--primary); }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-ink); color: #a9c0d6; padding-block: 48px 22px; margin-top: 56px; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.site-footer h4 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.site-footer > .container > div > p { font-size: 13.5px; line-height: 1.7; color: #9db4cc; }
.site-footer a { color: #c3d5e8; font-size: 13.5px; display: block; margin-bottom: 10px; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--accent); }
.site-footer .logo { color: #fff; margin-bottom: 12px; font-size: 22px; }
.site-footer .logo span { color: var(--accent); }
.footer-contact-line { display: flex; align-items: center; gap: 9px; }
.footer-contact-line .icon { width: 16px; height: 16px; color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 34px; padding-top: 20px; font-size: 12px; text-align: center; color: #7590ab; }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; font-weight: 700; color: var(--primary); }
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; }
.error-page .code { font-family: var(--font-display); font-size: 64px; color: var(--primary); }