/* UrfaX custom layer, loads AFTER the existing theme CSS.
   Style reference: clean Arabic perfume store (white cards, brand-colour outlines,
   centred titles with line-dot-line divider, solid brand footer).
   To change the main colour edit --ux-primary and the two tints below it. */

/* Arabic font: loaded by a <link> in Header Code (see README), not @import. */

:root {
  --ux-primary: #7B1E2B;        /* main brand colour (burgundy from the logo) */
  --ux-primary-dark: #30090C;   /* deep shade, footer bottom strip */
  --ux-tint: #F7ECEE;           /* light tint, announcement bar and soft fills */
  --ux-muted: #A9737B;          /* subtitles */
  --ux-text: #1E1416;
  --ux-sale: #DC2626;           /* discount and sale price */
  --ux-border: var(--ux-primary);
  --ux-radius: 10px;
  --ux-btn-radius: 12px;
  --ux-font: "Jost", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;

  /* feed the theme's own variables */
  --hd-bg: #fff;
  --hd-text: var(--ux-primary);
  --ft-bg: var(--ux-primary);
  --ft-text: #fff;
  --ann-bg: var(--ux-tint);
  --ann-text: var(--ux-primary);
  --kalles-highlight: var(--ux-primary);
  --product-sale-badge-bg: var(--ux-primary);
  --product-sale-badge-text: #fff;
  --product-sale-price-text: var(--ux-sale);
  --product-name-text: var(--ux-primary);
  --buy-btn-bg: var(--ux-primary);
  --buy-btn-text: #fff;
  --crt-btn-bg: #fff;
  --crt-btn-text: var(--ux-primary);
  --pd-name-color: var(--ux-primary);
  --pd-price-color: var(--ux-sale);
  --pd-star-color: #F5A524;
}

/* ---------- Fonts (Latin Jost, Arabic IBM Plex Sans Arabic) ---------- */
html body,
html body :is(span, strong, a, h1, h2, h3, h4, h5, h6, p, li, button, label, input, textarea, dd, dt) {
  font-family: var(--ux-font) !important;
}
body { color: var(--ux-text); background: #fff; }

/* ---------- Announcement bar ---------- */
.ab-announce {
  background: var(--ux-tint) !important;
  color: var(--ux-primary) !important;
  font-weight: 500;
  font-size: 13px;
}
.ab-announce a, .ab-ann-marquee-item, .ab-ann-simple, .ab-ann-slide { color: var(--ux-primary) !important; }

/* ---------- Header ---------- */
.ab-header {
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px -12px rgba(0,0,0,.18);
}
.ab-header .ab-icon-btn, .ab-header .ab-hamburger, .ab-header .ab-nav a, .ab-header .ab-dropdown-trigger {
  color: var(--ux-primary) !important;
}
.ab-header .ab-nav a { font-weight: 500; }
.ab-header .ab-nav a:hover { opacity: .75; }
.ab-header [class*="badge"], .ab-header .ab-cart-count, .ab-header .ab-icon-btn span:not(:empty) {
  background: var(--ux-sale) !important;
  color: #fff !important;
}

/* ---------- Hero ---------- */
.rnw-hero__overlay { background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 65%) !important; }
.ab-rtl .rnw-hero__overlay, [dir="rtl"] .rnw-hero__overlay { background: linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 65%) !important; }
.rnw-hero__kicker { letter-spacing: .12em; font-weight: 500; opacity: .9; }
.rnw-hero__title {
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  font-size: clamp(34px, 5.2vw, 64px) !important;
}
.rnw-hero__lede { font-size: clamp(14px, 1.4vw, 17px) !important; opacity: .95; }
.rnw-btn {
  background: #fff !important;
  color: var(--ux-primary) !important;
  border: 0 !important;
  border-radius: var(--ux-btn-radius) !important;
  padding: 12px 30px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rnw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(0,0,0,.5); }

/* ---------- Section titles: centred, brand colour, line-dot-line divider ---------- */
:is(.ab-plist-title, .ab-pgrid-title, .ab-featured-section-title, .ab-categories-title,
    .ab-comparison-title, .rp-title, .sr-title, .ab-reviews-title, .home_section_top_title,
    .category_section_header_title, .blog-home-title) {
  color: var(--ux-primary) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-inline: auto !important;
}
:is(.ab-plist-title, .ab-pgrid-title, .ab-featured-section-title, .ab-comparison-title,
    .rp-title, .sr-title, .ab-reviews-title, .home_section_top_title, .blog-home-title):not(:empty)::after {
  content: "";
  display: block;
  width: 200px;
  height: 12px;
  margin: 14px auto 0;
  background:
    radial-gradient(circle at center, transparent 3.5px, var(--ux-primary) 4px, var(--ux-primary) 5.5px, transparent 6px) center / 12px 12px no-repeat,
    linear-gradient(var(--ux-primary), var(--ux-primary)) left center / 84px 1.5px no-repeat,
    linear-gradient(var(--ux-primary), var(--ux-primary)) right center / 84px 1.5px no-repeat;
}
.ab-categories-title:empty { display: none !important; }
:is(.ab-plist-subtitle, .ab-pgrid-subtitle, .ab-featured-subtitle, .rp-sub, .sr-sub, .blog-home-subtitle) {
  color: var(--ux-muted) !important;
  text-align: center !important;
}
.ab-plist-header { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
.ab-plist-viewall-btn {
  color: var(--ux-primary) !important;
  border: 1px solid var(--ux-primary) !important;
  border-radius: var(--ux-btn-radius) !important;
  padding: 6px 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  background: transparent !important;
}
.ab-plist-viewall-btn:hover { background: var(--ux-primary) !important; color: #fff !important; }
.ab-plist-arrow {
  border-color: var(--ux-primary) !important;
  color: var(--ux-primary) !important;
  background: #fff !important;
}
.ab-plist-arrow:hover { background: var(--ux-primary) !important; color: #fff !important; }

/* ---------- Categories: round images with name underneath ---------- */
.ab-categories { padding-block: 10px 30px; }
.ab-categories-track {
  justify-content: center !important;
  gap: clamp(14px, 3vw, 40px) !important;
  flex-wrap: wrap !important;
}
.ab-categories .ab-cat-card {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: clamp(96px, 13vw, 150px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  overflow: visible !important;
  color: var(--ux-primary) !important;
  text-align: center;
  box-shadow: none !important;
}
.ab-categories .ab-cat-card img {
  width: clamp(96px, 13vw, 150px) !important;
  height: clamp(96px, 13vw, 150px) !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--ux-primary);
  transition: transform .35s ease;
}
.ab-categories .ab-cat-card:hover img { transform: scale(1.06); }
.ab-categories .ab-cat-card:hover { transform: none !important; }
.ab-categories .ab-cat-card::before, .ab-categories .ab-cat-card::after { display: none !important; }
.ab-categories .ab-cat-copy {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  padding: 0 !important;
  background: none !important;
  color: var(--ux-primary) !important;
  text-align: center;
}
.ab-categories .ab-cat-label {
  color: var(--ux-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.ab-categories .ab-cat-kicker {
  color: var(--ux-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  order: 2;
}

/* ---------- Product cards (grid, list slider, featured) ---------- */
:is(.ab-pgrid-card, .ab-plist-card, .ab-featured-card, .ab-featured-row-card) {
  background: #fff !important;
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
:is(.ab-pgrid-card, .ab-plist-card, .ab-featured-card):hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.35) !important;
}
:is(.ab-pgrid-media, .ab-plist-media, .ab-featured-media) {
  background: #fff !important;
  border-radius: 0 !important;
}
:is(.ab-pgrid-media, .ab-plist-media, .ab-featured-media) img { object-fit: contain !important; }
:is(.ab-pgrid-info, .ab-plist-info, .ab-featured-info) {
  padding: 12px 14px 14px !important;
  text-align: start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 1 auto;
}
:is(.ab-pgrid-name, .ab-plist-name, .ab-featured-name) {
  color: var(--ux-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: start !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:is(.ab-pgrid-price-row, .ab-plist-price-row, .ab-featured-price-row) {
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap;
}
:is(.ab-pgrid-price, .ab-plist-price, .ab-featured-price, .ab-price-sale) {
  color: var(--ux-sale) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.ab-price-old {
  color: #8A8A8A !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}
/* sale / custom badges: solid brand block in the corner */
:is(.ab-pgrid-badge, .ab-plist-badge, .ab-featured-badge, .ab-sale-badge, .ab-product-custom-badge) {
  background: var(--ux-primary) !important;
  color: #fff !important;
  border-radius: 0 0 8px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.ab-rtl :is(.ab-pgrid-badge, .ab-plist-badge, .ab-featured-badge, .ab-sale-badge, .ab-product-custom-badge) { border-radius: 0 0 0 8px !important; }
.ab-out-of-stock-badge { background: #6B6B6B !important; color: #fff !important; }

/* add-to-cart: always visible, outlined, full width at the bottom of the card */
:is(.ab-pgrid-add-btn, .ab-plist-add-btn, .ab-featured-add-btn, .ab-featured-row-btn-add) {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  width: auto !important;
  margin: auto 14px 14px !important;
  padding: 9px 16px !important;
  background: #fff !important;
  color: var(--ux-primary) !important;
  border: 1px solid var(--ux-primary) !important;
  border-radius: var(--ux-btn-radius) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s ease, color .2s ease !important;
}
:is(.ab-pgrid-add-btn, .ab-plist-add-btn, .ab-featured-add-btn, .ab-featured-row-btn-add):hover {
  background: var(--ux-primary) !important;
  color: #fff !important;
}
/* wishlist / quick view: small round white buttons on the image */
.ab-card-actions :is(.ab-card-cart-btn, .ab-quick-view-btn, .ab-wishlist-btn) {
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--ux-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* load more */
.ab-pgrid-load-more {
  color: var(--ux-primary) !important;
  border: 1px solid var(--ux-primary) !important;
  border-radius: var(--ux-btn-radius) !important;
  background: #fff !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 34px !important;
}
.ab-pgrid-load-more:hover { background: var(--ux-primary) !important; color: #fff !important; }

/* ---------- Featured hero, editorial, comparison, reviews ---------- */
.ab-featured-hero-cta, .editorial-feature__link, .ab-pgrid-hero-cta {
  color: var(--ux-primary) !important;
  background: #fff !important;
  border-radius: var(--ux-btn-radius) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.editorial-feature__link { background: transparent !important; padding: 0 !important; }
.editorial-feature { --ed-accent: var(--ux-primary) !important; }
.editorial-feature__title { color: var(--ux-primary) !important; font-weight: 700 !important; }
.editorial-feature__eyebrow { color: var(--ux-muted) !important; letter-spacing: .08em; }
.editorial-feature__media img { border-radius: var(--ux-radius); }

.ab-review-card, .rp-card, .sr-card {
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: var(--ux-radius) !important;
  overflow: hidden;
}

/* ---------- Newsletter ---------- */
.newsletter-luxe__title { color: var(--ux-primary) !important; font-weight: 700 !important; }
.newsletter-luxe__submit {
  background: var(--ux-primary) !important;
  color: #fff !important;
  border-radius: var(--ux-btn-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* ---------- Product page ---------- */
.ab-pd-price, .ab-pd-price-sale { color: var(--ux-sale) !important; font-weight: 700 !important; }
.ab-pd-price-old { color: #8A8A8A !important; text-decoration: line-through !important; }
.ab-pd-sale-badge { background: var(--ux-primary) !important; color: #fff !important; border-radius: 6px !important; }
.p_details_container h1 { color: var(--ux-primary) !important; font-weight: 700 !important; }
.p_details_container button[type="submit"],
.ab-fixed-buy button,
.p_details_container .buy_now_btn {
  border-radius: var(--ux-btn-radius) !important;
  font-weight: 700 !important;
}

/* ---------- Footer: solid brand colour ---------- */
.ab-footer {
  background: var(--ux-primary) !important;
  color: #fff !important;
}
.ab-footer :is(a, p, span, li, h3, h4, .ab-footer-heading--column, .ab-footer-newsletter-title) { color: #fff !important; }
.ab-footer a:hover { opacity: .8; }
.ab-footer-bottom { background: var(--ux-primary-dark) !important; border-top: 0 !important; }
.ab-footer-subscribe-bar { border-radius: var(--ux-btn-radius) !important; overflow: hidden; }
.ab-footer-subscribe-submit { color: var(--ux-primary) !important; font-weight: 700 !important; }
.ab-footer-social a, .ab-footer-social-icons a { border-color: rgba(255,255,255,.55) !important; }

/* ---------- Fixes after live test ---------- */
/* sections that set their own serif font */
html body :is(.rnw-hero, .editorial-feature, .newsletter-luxe, .ab-reviews, .rp, .sr) :is(h1, h2, h3, p, a, span, button) {
  font-family: var(--ux-font) !important;
}
/* scrolling text band: soft brand tint like a top bar, not solid black */
.ab-marquee-track { background: var(--ux-tint) !important; }
.ab-marquee-item {
  color: var(--ux-primary) !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.ab-marquee-content [class*="sep"], .ab-marquee-content [class*="dot"] { color: var(--ux-primary) !important; background-color: var(--ux-primary) !important; }
.ab-marquee-band, .ab-marquee-wrapper { padding-block: 0 !important; }
/* add-to-cart icon next to its text */
:is(.ab-pgrid-add-btn, .ab-plist-add-btn, .ab-featured-add-btn, .ab-featured-row-btn-add) { justify-content: center !important; gap: 8px !important; }
:is(.ab-pgrid-add-btn, .ab-plist-add-btn, .ab-featured-add-btn, .ab-featured-row-btn-add) > * { margin: 0 !important; position: static !important; }
/* newsletter block: light tint instead of black */
.newsletter-luxe { background: var(--ux-tint) !important; border-radius: var(--ux-radius); }
.newsletter-luxe__body, .newsletter-luxe__fine, .newsletter-luxe__fine a { color: #5a4a4d !important; }
.newsletter-luxe__input {
  background: #fff !important;
  color: var(--ux-text) !important;
  border: 1px solid var(--ux-primary) !important;
  border-radius: var(--ux-btn-radius) !important;
}
.newsletter-luxe__input::placeholder { color: #9b8b8e !important; }
/* category "Shop" label: upright, small */
.ab-categories .ab-cat-kicker { font-style: normal !important; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .rnw-hero__title { font-size: 32px !important; }
  .rnw-btn { padding: 10px 24px !important; font-size: 15px !important; }
  .ab-categories-track { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; padding-inline: 4px; scrollbar-width: none; }
  .ab-categories-track::-webkit-scrollbar { display: none; }
  .ab-categories .ab-cat-card, .ab-categories .ab-cat-card img { width: 92px !important; }
  .ab-categories .ab-cat-card img { height: 92px !important; }
  .ab-categories-track { gap: 18px !important; padding-inline: 16px !important; }
  .ab-categories .ab-cat-label { font-size: 13px !important; white-space: normal !important; overflow-wrap: anywhere; max-width: 92px; }
  :is(.ab-pgrid-info, .ab-plist-info, .ab-featured-info) { padding: 10px 10px 12px !important; }
  :is(.ab-pgrid-name, .ab-plist-name, .ab-featured-name) { font-size: 13px !important; }
  :is(.ab-pgrid-add-btn, .ab-plist-add-btn, .ab-featured-add-btn) { margin: auto 10px 10px !important; font-size: 13px !important; padding: 8px 10px !important; }
  :is(.ab-plist-title, .ab-pgrid-title, .ab-featured-section-title, .ab-comparison-title, .rp-title, .sr-title):not(:empty)::after { width: 160px; background-size: 12px 12px, 64px 1.5px, 64px 1.5px; }
}