@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap");

/* Viora "arch" design, step 1. Load AFTER your current style.css.
   If you installed viora-theme.css / viora-theme.js before, remove them first.
   Change the colors here only. Palettes: emerald (default), night-rose, pearl-black. */
:root {
  --vx-d: #0A2F27;   /* darkest */
  --vx-m: #1A6554;   /* brand */
  --vx-a: #C9A45C;   /* accent */
  --vx-as: #EBD9AE;  /* soft accent */
  --vx-p: #EEF2EF;   /* page tint */
  --vx-ink: #10201C;
  --vx-ph: #e2ebe5;
  --ann-bg: var(--vx-m);
  --ft-bg: var(--vx-d);
}
/* night-rose:  --vx-d:#1B1425; --vx-m:#3B2A52; --vx-a:#D9A58F; --vx-as:#F2D6C8; --vx-p:#F5F0F3; --vx-ink:#1d1624; --vx-ph:#ece2e9; */
/* pearl-black: --vx-d:#121212; --vx-m:#2B2B2B; --vx-a:#CDB687; --vx-as:#EDE0C4; --vx-p:#F3F3F1; --vx-ink:#161616; --vx-ph:#e8e7e3; */

html body .ab-theme { background: var(--vx-p); color: var(--vx-ink); }
html body .ab-announce { color: var(--vx-as); }

/* Hero: soft rounded bottom (arch shape comes in step 2) */
html body .ab-slider {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  overflow: hidden;
}

/* Section titles: Amiri + a gold line that fades toward the "view all" link */
html body .ab-plist-header { align-items: center; gap: 12px; padding-top: 12px; }
html body .ab-plist-title {
  flex: 0 0 auto;
  font-family: "Amiri", serif;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  color: var(--vx-ink);
  letter-spacing: 0;
}
html body .ab-plist-header::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(270deg, var(--vx-a), transparent);
}
html body .ab-plist-actions { order: 2; }
html body .ab-plist-arrows { display: none !important; }
html body .ab-plist-viewall-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--vx-m);
  font-weight: 700;
  text-decoration: none;
}

/* Product lists: 2 columns, 4 items, second column slightly lower */
html body .ab-plist-track {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px 14px;
  overflow: visible !important;
  transform: none !important;
}
html body .ab-plist-card { width: auto !important; min-width: 0; }
html body .ab-plist-card:nth-child(n+5) { display: none !important; }
html body .ab-plist-card:nth-child(even) { margin-top: 30px; }
html body .ab-plist-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
  background: var(--vx-ph);
}
html body .ab-plist-media img { width: 100%; height: 100%; object-fit: cover; }
html body .ab-plist-name { color: var(--vx-ink); line-height: 1.55; }
html body .ab-plist-price { color: var(--vx-ink); font-weight: 800; }

/* Featured block: same arch frame */
html body .ab-featured-media { overflow: hidden; border-radius: 999px 999px 8px 8px; }

/* "Our features": flat rows with gold hairlines instead of colored cards */
html body .icon-container {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vx-a) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .icon-text-container p {
  font-family: "Amiri", serif;
  font-size: 22px;
  color: var(--vx-m) !important;
}
html body .icon-text-container span { color: var(--vx-ink) !important; }

/* Promo band */
html body .promo-box {
  background: var(--vx-m) !important;
  border-radius: 0 !important;
}
html body .promo-box h2 {
  font-family: "Amiri", serif;
  color: var(--vx-as) !important;
}

/* Footer */
html body .ab-footer-heading {
  font-family: "Amiri", serif;
  font-size: 22px;
  color: var(--vx-as);
  letter-spacing: 0;
}
html body .ab-footer-links a:hover { color: var(--vx-as); }

/* ===== v2: category tiles (حقائب / أحذية ...) as arches, text at the bottom ===== */
html body .ab-featured-hero {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
}
html body .ab-featured-hero-overlay {
  opacity: 1 !important;
  background: linear-gradient(0deg, color-mix(in srgb, var(--vx-d) 88%, transparent) 0, transparent 58%) !important;
}
html body .ab-featured-hero-content {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 14px 28px !important;
  text-align: center;
}
html body .ab-featured-hero-subtitle {
  margin: 0;
  font-family: "Amiri", serif;
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 700;
  color: var(--vx-as);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
html body .ab-featured-hero-cta {
  background: var(--vx-a);
  color: var(--vx-d);
  border: 0;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 800;
}

/* ===== v2: section headings made in the designer (categories, reviews, features) ===== */
html body .home_section_container h3 {
  font-family: "Amiri", serif !important;
  font-size: clamp(28px, 7vw, 36px) !important;
  font-weight: 700 !important;
  color: var(--vx-ink) !important;
  letter-spacing: 0;
}
html body .home_section_container p.description {
  color: var(--vx-m) !important;
}