/* ============================================================
   OORA — Custom Theme (built on EasyOrders "pearl" base theme)
   FILE: style.css
   PART 1 / N — Foundations: Palette, Typography, Buttons, Header
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETTE OVERRIDE
   The base theme injects merchant colors as CSS vars on :root
   (see --ft-bg, --body-text, --product-price-text, etc. in the
   live page <style>). We override them here so OORA's identity
   wins regardless of whatever is saved in the dashboard palette.
   ------------------------------------------------------------ */
:root {
  /* --- OORA brand tokens (source of truth) --- */
  --oora-bg: #050505;
  --oora-bg-elevated: #111111;
  --oora-card: #181818;
  --oora-border: rgba(255, 255, 255, 0.08);

  --oora-gold: #D4AF37;
  --oora-gold-light: #F2D57B;
  --oora-gold-dark: #A67C00;

  --oora-white: #FFFFFF;
  --oora-gray: #BDBDBD;

  /* --- 8px spacing scale --- */
  --oora-space-1: 8px;
  --oora-space-2: 16px;
  --oora-space-3: 24px;
  --oora-space-4: 32px;
  --oora-space-6: 48px;
  --oora-space-8: 64px;
  --oora-space-10: 80px;
  --oora-space-12: 120px;

  /* --- radius --- */
  --oora-radius-sm: 12px;
  --oora-radius-md: 18px;
  --oora-radius-lg: 28px;
  --oora-radius-pill: 999px;

  /* --- motion --- */
  --oora-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --oora-dur-fast: 200ms;
  --oora-dur-base: 320ms;
  --oora-dur-slow: 500ms;

  /* --- shadows (soft, never heavy) --- */
  --oora-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --oora-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --oora-shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.18);

  /* --- Overriding the store's own theme variables so every
     component that already reads them (buttons, badges, prices)
     falls in line with OORA without us having to fight every
     individual class. Fallbacks keep this safe if a var is
     ever unset by the dashboard. --- */
  --ft-bg: var(--oora-bg) !important;
  --ft-text: var(--oora-gray) !important;
  --hd-bg: rgba(5, 5, 5, 0.85) !important;
  --hd-text: var(--oora-white) !important;
  --ann-bg: var(--oora-bg) !important;
  --ann-text: var(--oora-gold) !important;
  --body-bg: var(--oora-bg) !important;
  --body-text: var(--oora-gray) !important;
  --input-bg: var(--oora-bg-elevated) !important;
  --input-text: var(--oora-white) !important;
  --input-border: var(--oora-border) !important;
  --buy-btn-bg: var(--oora-gold) !important;
  --buy-btn-text: #141218 !important;
  --buy-btn-border: var(--oora-gold) !important;
  --crt-btn-bg: transparent !important;
  --crt-btn-text: var(--oora-gold) !important;
  --crt-btn-border: var(--oora-gold) !important;
  --checkout-form-bg: var(--oora-bg-elevated) !important;
  --checkout-heading-text: var(--oora-white) !important;
  --product-name-text: var(--oora-white) !important;
  --product-price-text: var(--oora-gold) !important;
  --product-sale-price-text: var(--oora-gold-light) !important;
  --product-badge-bg: var(--oora-gold) !important;
  --product-badge-text: #141218 !important;

  /* NOTE: we intentionally do NOT override --color-primary /
     --color-a11y here. Those two variables are consumed by many
     unrelated Tailwind "skin" utility classes across the store
     (including large layout panels like the checkout page), not
     just buttons — overriding them globally painted the entire
     checkout form gold as an unwanted side effect. All of our
     buttons already get their gold styling directly from their
     own class selectors below (.checkout_btn, .add_to_cart_btn,
     .ab-fixed-buy-btn), so hijacking this shared variable was
     unnecessary. Leaving it untouched avoids collateral damage
     to parts of the store we haven't inspected yet. */
}

/* ------------------------------------------------------------
   2. TYPOGRAPHY
   English: Inter · Arabic: IBM Plex Sans Arabic · fallback system-ui
   The base theme force-sets font-family on many tags via an
   inline <style> block — we override with higher specificity
   further down using html/body scoping, which safely wins
   because it's loaded after that inline style in the DOM.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Jost:wght@300;400;500&display=swap');

html[lang="ar"] body,
html[lang="ar"] body * {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important;
}

body,
body * {
  font-family: "Inter", system-ui, sans-serif;
}

body {
  background: var(--oora-bg) !important;
  color: var(--oora-gray) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--oora-white);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

::selection {
  background: var(--oora-gold);
  color: #141218;
}

/* Respect reduced motion, per accessibility requirement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   3. ANNOUNCEMENT BAR  (.ab-announce)
   ------------------------------------------------------------ */
.ab-announce {
  background: var(--oora-bg) !important;
  border-bottom: 1px solid var(--oora-border);
  padding: 10px 0;
}

.ab-ann-marquee-item {
  color: var(--oora-gold) !important;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.ab-ann-marquee-sep {
  color: var(--oora-gold-dark) !important;
  opacity: 0.6;
}

/* ------------------------------------------------------------
   4. HEADER  (.ab-header / .ab-nav / .ab-logo / .ab-cart-count)
   ------------------------------------------------------------ */
.ab-header {
  background: var(--hd-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--oora-border);
  transition: background var(--oora-dur-base) var(--oora-ease);
}

.ab-header.scrolled {
  background: rgba(5, 5, 5, 0.95) !important;
  box-shadow: var(--oora-shadow-sm);
}

.ab-nav a {
  color: var(--oora-gray);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color var(--oora-dur-fast) var(--oora-ease);
  position: relative;
}

.ab-nav a:hover {
  color: var(--oora-gold);
}

/* Elegant underline-on-hover instead of a flat color swap only */
.ab-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--oora-gold);
  transition: width var(--oora-dur-base) var(--oora-ease);
}

.ab-nav a:hover::after {
  width: 100%;
}

.ab-logo img {
  filter: none !important; /* let the real OORA logo show its own colors */
  max-height: 44px;
  width: auto;
}

.ab-icon-btn {
  color: var(--oora-white);
  transition: color var(--oora-dur-fast) var(--oora-ease), transform var(--oora-dur-fast) var(--oora-ease);
}

.ab-icon-btn:hover {
  color: var(--oora-gold);
  transform: translateY(-1px);
}

.ab-cart-count {
  background: var(--oora-gold) !important;
  color: #141218 !important;
  border: none !important;
  font-weight: 700;
  font-size: 10px;
}

.ab-hamburger {
  color: var(--oora-white);
}

/* Mobile menu panel */
.ab-mobile-menu {
  background: var(--oora-bg) !important;
  border-left: 1px solid var(--oora-border);
}

.ab-mobile-nav a span {
  color: var(--oora-gray);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.ab-mobile-nav a:hover span {
  color: var(--oora-gold);
}

.ab-mobile-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------
   5. BUTTONS
   Every state required by the master spec: primary (gold
   gradient), secondary (outline), ghost, text, disabled,
   loading. Targets the real classes found on the live store:
   .checkout_btn (Buy now), .add_to_cart_btn, .ab-fixed-buy-btn
   ------------------------------------------------------------ */

/* --- Primary: Buy Now / Checkout --- */
.checkout_btn,
.ab-fixed-buy-btn,
.rnw-btn {
  background: linear-gradient(135deg, var(--oora-gold-light) 0%, var(--oora-gold) 55%, var(--oora-gold-dark) 100%) !important;
  color: #141218 !important;
  border: none !important;
  border-radius: var(--oora-radius-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px !important;
  box-shadow: var(--oora-shadow-gold);
  transition: transform var(--oora-dur-fast) var(--oora-ease), box-shadow var(--oora-dur-fast) var(--oora-ease), filter var(--oora-dur-fast) var(--oora-ease);
}

.checkout_btn:hover,
.ab-fixed-buy-btn:hover,
.rnw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.28);
  filter: brightness(1.05);
}

.checkout_btn:active,
.ab-fixed-buy-btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.checkout_btn:disabled,
.ab-fixed-buy-btn:disabled {
  background: var(--oora-card) !important;
  color: var(--oora-gray) !important;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Loading state — apply .is-loading via JS when a request is in flight */
.checkout_btn.is-loading,
.ab-fixed-buy-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.checkout_btn.is-loading::after,
.ab-fixed-buy-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(20, 18, 24, 0.35);
  border-top-color: #141218;
  border-radius: 50%;
  animation: oora-spin 700ms linear infinite;
}

@keyframes oora-spin {
  to { transform: rotate(360deg); }
}

/* --- Secondary: Add to cart (outline) --- */
.add_to_cart_btn {
  background: transparent !important;
  color: var(--oora-gold) !important;
  border: 1px solid var(--oora-gold) !important;
  border-radius: var(--oora-radius-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13px !important;
  transition: background var(--oora-dur-fast) var(--oora-ease), color var(--oora-dur-fast) var(--oora-ease);
}

.add_to_cart_btn:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

.add_to_cart_btn:disabled {
  border-color: var(--oora-border) !important;
  color: var(--oora-gray) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Ghost / text buttons used across the theme (view all, prev/next) --- */
.ab-plist-viewall-btn,
.ab-pgrid-viewall-btn,
.ab-featured-hero-cta {
  color: var(--oora-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color var(--oora-dur-fast) var(--oora-ease);
}

.ab-plist-viewall-btn:hover,
.ab-pgrid-viewall-btn:hover {
  border-color: var(--oora-gold);
}

.ab-plist-arrow,
.ab-slider-arrow {
  background: var(--oora-card) !important;
  border: 1px solid var(--oora-border) !important;
  color: var(--oora-white) !important;
  border-radius: 50%;
  transition: background var(--oora-dur-fast) var(--oora-ease), border-color var(--oora-dur-fast) var(--oora-ease);
}

.ab-plist-arrow:hover,
.ab-slider-arrow:hover {
  background: var(--oora-gold) !important;
  border-color: var(--oora-gold) !important;
  color: #141218 !important;
}

/* --- Quantity stepper --- */
.quantity_btn_container {
  border-color: var(--oora-border) !important;
  border-radius: var(--oora-radius-sm) !important;
  background: var(--oora-card) !important;
}

.quantity_btn_container button {
  background: transparent !important;
  color: var(--oora-white) !important;
}

.quantity_btn_container button:hover {
  background: rgba(212, 175, 55, 0.12) !important;
}

.quantity_btn_container p {
  color: var(--oora-white) !important;
}

/* ============================================================
   PART 2 / N — Product Cards, Hero, Categories, Footer
   ============================================================ */

/* ------------------------------------------------------------
   6. PRODUCT CARDS
   Three card families share the same visual language:
   .ab-plist-card (carousels), .ab-featured-card (featured
   layout), .ab-pgrid-card (grid). We style them together via
   a shared selector list, then handle their small structural
   differences separately.
   ------------------------------------------------------------ */
.ab-plist-card,
.ab-featured-card,
.ab-pgrid-card {
  background: var(--oora-card);
  border: 1px solid var(--oora-border);
  border-radius: var(--oora-radius-md);
  overflow: hidden;
  transition: transform var(--oora-dur-base) var(--oora-ease),
              border-color var(--oora-dur-base) var(--oora-ease),
              box-shadow var(--oora-dur-base) var(--oora-ease);
}

.ab-plist-card:hover,
.ab-featured-card:hover,
.ab-pgrid-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: var(--oora-shadow-md);
}

.ab-plist-media,
.ab-featured-media,
.ab-pgrid-media {
  background: var(--oora-bg-elevated);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.ab-plist-img-primary,
.ab-featured-img-primary,
.ab-pgrid-img-primary,
.ab-plist-img-hover,
.ab-featured-img-hover,
.ab-pgrid-img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--oora-dur-base) var(--oora-ease), transform var(--oora-dur-slow) var(--oora-ease);
}

.ab-plist-card:hover .ab-plist-img-primary,
.ab-featured-card:hover .ab-featured-img-primary,
.ab-pgrid-card:hover .ab-pgrid-img-primary {
  transform: scale(1.04);
}

.ab-plist-info,
.ab-featured-info,
.ab-pgrid-info {
  padding: var(--oora-space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ab-plist-name,
.ab-featured-name,
.ab-pgrid-name {
  color: var(--oora-white);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  /* keep card heights predictable — clamp long product names */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ab-plist-price,
.ab-featured-price,
.ab-pgrid-price {
  color: var(--oora-gold) !important;
  font-weight: 700;
  font-size: 14px;
}

.ab-price-old {
  color: var(--oora-gray) !important;
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 12px;
}

/* Sale / custom badges */
.ab-plist-badge,
.ab-featured-badge,
.ab-pgrid-badge {
  border-radius: var(--oora-radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.ab-sale-badge {
  background: var(--oora-gold) !important;
  color: #141218 !important;
}

.ab-out-of-stock-badge {
  background: var(--oora-bg-elevated) !important;
  color: var(--oora-gray) !important;
  border: 1px solid var(--oora-border);
}

/* Quick add-to-cart button that appears over the media on hover */
.ab-plist-add-btn,
.ab-featured-add-btn,
.ab-pgrid-add-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--oora-gold) !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--oora-dur-fast) var(--oora-ease), transform var(--oora-dur-fast) var(--oora-ease);
}

.ab-plist-card:hover .ab-plist-add-btn,
.ab-featured-card:hover .ab-featured-add-btn,
.ab-pgrid-card:hover .ab-pgrid-add-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Color / image swatches */
.ab-plist-swatch,
.ab-featured-swatch,
.ab-pgrid-swatch {
  border: 1px solid var(--oora-border);
  box-shadow: 0 0 0 2px var(--oora-card);
}

/* Section headers used above every product row */
.ab-plist-title,
.ab-pgrid-title,
.ab-categories-title {
  color: var(--oora-white);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  position: relative;
  padding-bottom: var(--oora-space-1);
}

/* thin gold rule under every section title — the page's one
   recurring signature element, tying every block together */
.ab-plist-title::after,
.ab-pgrid-title::after,
.ab-categories-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--oora-gold);
}

/* ------------------------------------------------------------
   7. HERO  (.rnw-hero — used on the homepage banner)
   ------------------------------------------------------------ */
.rnw-hero {
  background-color: var(--oora-bg) !important;
}

.rnw-hero__kicker {
  color: var(--oora-gold) !important;
}

.rnw-hero__title {
  font-family: "Jost", "Inter", system-ui, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  /* shiny gold gradient text */
  background: linear-gradient(
    100deg,
    var(--oora-gold-dark) 0%,
    var(--oora-gold) 25%,
    var(--oora-gold-light) 45%,
    #fffbea 52%,
    var(--oora-gold-light) 59%,
    var(--oora-gold) 75%,
    var(--oora-gold-dark) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oora-gold); /* fallback for browsers without background-clip support */

  animation: oora-title-shine 6s linear infinite;
}

@keyframes oora-title-shine {
  0%   { background-position: 0% 0%; }
  100% { background-position: -220% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .rnw-hero__title {
    animation: none;
    background-position: 30% 0%;
  }
}

.rnw-hero__lede {
  color: var(--oora-gray) !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

/* ------------------------------------------------------------
   8. CATEGORIES  (.ab-categories / .ab-cat-card)
   ------------------------------------------------------------ */
.ab-cat-card {
  border-radius: var(--oora-radius-md);
  overflow: hidden;
  position: relative;
  transition: transform var(--oora-dur-base) var(--oora-ease);
}

.ab-cat-card:hover {
  transform: translateY(-4px);
}

.ab-cat-image-wrapper {
  background: var(--oora-card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}

.ab-cat-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.05) 55%);
}

.ab-cat-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--oora-dur-slow) var(--oora-ease);
}

.ab-cat-card:hover .ab-cat-image-wrapper img {
  transform: scale(1.05);
}

.ab-cat-label {
  position: absolute;
  left: var(--oora-space-2);
  bottom: var(--oora-space-2);
  z-index: 1;
  color: var(--oora-white);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   9. FOOTER  (.ab-footer)
   ------------------------------------------------------------ */
.ab-footer {
  background: var(--oora-bg) !important;
  border-top: 1px solid var(--oora-border);
  padding-top: var(--oora-space-6);
}

.ab-footer-heading {
  color: var(--oora-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--oora-space-2);
}

.ab-footer-links a {
  color: var(--oora-gray);
  font-size: 13.5px;
  line-height: 2.1;
  transition: color var(--oora-dur-fast) var(--oora-ease);
}

.ab-footer-links a:hover {
  color: var(--oora-gold);
}

.ab-footer-contact-item {
  color: var(--oora-gray);
  font-size: 13.5px;
}

.ab-footer-contact-item:hover {
  color: var(--oora-gold);
}

.ab-footer-social-img {
  background-color: var(--oora-gray) !important;
  transition: background-color var(--oora-dur-fast) var(--oora-ease);
}

.ab-footer-social-icons a:hover .ab-footer-social-img {
  background-color: var(--oora-gold) !important;
}

.ab-footer-bottom {
  border-top: 1px solid var(--oora-border);
  margin-top: var(--oora-space-4);
  padding-top: var(--oora-space-2);
}

.ab-footer-copy,
.ab-footer-powered {
  color: var(--oora-gray);
  font-size: 12px;
  opacity: 0.7;
}

.ab-footer-powered a {
  color: var(--oora-gold);
}

/* ============================================================
   PART 3 / 3 — Product Details Page, Reviews, Sticky Buy Bar
   ============================================================ */

/* ------------------------------------------------------------
   10. GALLERY  (.ab-gallery)
   ------------------------------------------------------------ */
.ab-gallery-slider {
  background: var(--oora-bg-elevated);
  border-radius: var(--oora-radius-md);
  overflow: hidden;
}

.ab-gallery-main-media {
  object-fit: cover;
}

.ab-gallery-thumb {
  border-radius: var(--oora-radius-sm);
  overflow: hidden;
  border: 1px solid var(--oora-border);
  opacity: 0.6;
  transition: opacity var(--oora-dur-fast) var(--oora-ease), border-color var(--oora-dur-fast) var(--oora-ease);
}

.ab-gallery-thumb:hover {
  opacity: 0.85;
}

.ab-gallery-thumb.ab-active {
  opacity: 1;
  border-color: var(--oora-gold);
}

.ab-gallery-zoom,
.ab-dg-arrow {
  background: rgba(5, 5, 5, 0.6) !important;
  color: var(--oora-white) !important;
  border: 1px solid var(--oora-border);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background var(--oora-dur-fast) var(--oora-ease);
}

.ab-gallery-zoom:hover,
.ab-dg-arrow:hover {
  background: var(--oora-gold) !important;
  color: #141218 !important;
}

.ab-gallery-dot {
  background: var(--oora-border) !important;
}

.ab-gallery-dot.ab-active {
  background: var(--oora-gold) !important;
}

.ab-dg-counter {
  background: rgba(5, 5, 5, 0.7);
  color: var(--oora-white);
  border-radius: var(--oora-radius-pill);
  font-size: 11px;
  padding: 4px 10px;
}

/* Lightbox / zoom modal */
.ab-lightbox-backdrop,
.ab-dg-modal {
  background: rgba(5, 5, 5, 0.94) !important;
}

.ab-lightbox-close,
.ab-dg-modal-close {
  color: var(--oora-white) !important;
}

/* ------------------------------------------------------------
   11. PRODUCT INFO  (.ab-pd — name, price, rating)
   ------------------------------------------------------------ */
.ab-pd-name {
  color: var(--oora-white);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.3;
}

.ab-pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

.ab-pd-price,
.ab-pd-price-sale {
  color: var(--oora-gold) !important;
  font-size: 24px;
  font-weight: 700;
}

.ab-pd-price-old {
  color: var(--oora-gray) !important;
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 15px;
}

.ab-pd-divider {
  height: 1px;
  background: var(--oora-border);
  margin: var(--oora-space-2) 0;
}

.ab-pd-star-filled,
.ab-pd-star-half {
  color: var(--oora-gold) !important;
}

.ab-pd-star-empty {
  color: var(--oora-border) !important;
}

.ab-pd-reviews-count {
  color: var(--oora-gray);
  font-size: 13px;
}

/* ------------------------------------------------------------
   12. URGENCY WIDGETS
   Fake countdown / fake stock bar / fake visitor counter.
   Styled to feel like refined product intel, not a garish
   marketing pop-up — small caps, quiet gold accents only.
   ------------------------------------------------------------ */
.ab-fake-counter {
  background: var(--oora-card);
  border: 1px solid var(--oora-border);
  border-radius: var(--oora-radius-sm);
  padding: var(--oora-space-2);
}

.ab-fc-title {
  color: var(--oora-gray);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ab-fc-num {
  color: var(--oora-gold);
  font-weight: 700;
  font-size: 18px;
}

.ab-fc-label {
  color: var(--oora-gray);
  font-size: 9.5px;
  text-transform: uppercase;
}

.ab-fc-sep {
  color: var(--oora-border);
}

.ab-fake-stock {
  margin-top: var(--oora-space-2);
}

.ab-fs-text {
  color: var(--oora-gray);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.ab-fs-bar {
  height: 4px;
  background: var(--oora-border);
  border-radius: var(--oora-radius-pill);
  overflow: hidden;
}

.ab-fs-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--oora-gold-dark), var(--oora-gold));
  border-radius: var(--oora-radius-pill);
}

.ab-fake-visitor {
  color: var(--oora-gray);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ab-fv-count {
  color: var(--oora-gold);
  font-weight: 700;
}

/* ------------------------------------------------------------
   13. DESCRIPTION ACCORDION  (.lq-desc-accordion)
   ------------------------------------------------------------ */
.lq-desc-item {
  border-top: 1px solid var(--oora-border);
}

.lq-desc-toggle {
  color: var(--oora-white);
  font-size: 15px;
  font-weight: 600;
  padding: var(--oora-space-2) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
}

.lq-desc-toggle:hover {
  color: var(--oora-gold);
}

.lq-desc-chevron {
  border-color: currentColor;
  transition: transform var(--oora-dur-base) var(--oora-ease);
}

.lq-desc-toggle[aria-expanded="true"] .lq-desc-chevron {
  transform: rotate(180deg);
}

.lq-desc-content,
.ql-editor {
  color: var(--oora-gray);
  font-size: 14px;
  line-height: 1.8;
  padding-bottom: var(--oora-space-2);
}

.ql-editor h2,
.ql-editor h3 {
  color: var(--oora-white);
  margin-top: var(--oora-space-2);
}

/* ------------------------------------------------------------
   14. REVIEWS  (.ab-reviews)
   ------------------------------------------------------------ */
.ab-reviews-title {
  color: var(--oora-white);
  font-size: 22px;
  font-weight: 600;
}

.ab-reviews-avg-stars .ab-pd-star-filled,
.ab-reviews-avg-stars .ab-pd-star-half {
  color: var(--oora-gold) !important;
}

.ab-reviews-count {
  color: var(--oora-gray);
  font-size: 13px;
}

.ab-reviews-write-btn {
  background: transparent;
  border: 1px solid var(--oora-gold);
  color: var(--oora-gold);
  border-radius: var(--oora-radius-pill);
  padding: 10px 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--oora-dur-fast) var(--oora-ease);
}

.ab-reviews-write-btn:hover {
  background: rgba(212, 175, 55, 0.1);
}

.ab-review-card {
  background: var(--oora-card);
  border: 1px solid var(--oora-border);
  border-radius: var(--oora-radius-sm);
  padding: var(--oora-space-2);
}

.ab-review-author {
  color: var(--oora-white);
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}

.ab-review-comment {
  color: var(--oora-gray);
  font-size: 13.5px;
  line-height: 1.6;
}

.verified-badge {
  background: rgba(212, 175, 55, 0.12);
  color: var(--oora-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--oora-radius-pill);
}

.ab-review-read-more {
  color: var(--oora-gold);
  font-size: 12.5px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   15. STICKY BUY BAR  (.ab-fixed-buy — mobile)
   ------------------------------------------------------------ */
.ab-fixed-buy {
  background: rgba(5, 5, 5, 0.92) !important;
  border-top: 1px solid var(--oora-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ab-fixed-buy-name {
  color: var(--oora-white);
  font-size: 13px;
}

.ab-fixed-buy-price {
  color: var(--oora-gold) !important;
  font-weight: 700;
}

.ab-fixed-buy-price-old {
  color: var(--oora-gray) !important;
  text-decoration: line-through;
  opacity: 0.55;
}

.ab-fixed-buy-qty {
  border: 1px solid var(--oora-border);
  border-radius: var(--oora-radius-sm);
}

.ab-fixed-buy-qty-btn {
  color: var(--oora-white);
}

.ab-fixed-buy-qty-value {
  color: var(--oora-white);
}

/* ------------------------------------------------------------
   16. BREADCRUMBS
   ------------------------------------------------------------ */
.ab-breadcrumbs-list {
  color: var(--oora-gray);
  font-size: 12.5px;
}

.ab-breadcrumbs-item a {
  color: var(--oora-gray);
  transition: color var(--oora-dur-fast) var(--oora-ease);
}

.ab-breadcrumbs-item a:hover {
  color: var(--oora-gold);
}

.ab-breadcrumbs-sep {
  color: var(--oora-border);
  margin: 0 6px;
}

.ab-breadcrumbs-current {
  color: var(--oora-white);
}

/* ------------------------------------------------------------
   17. RESPONSIVE FINE-TUNING
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .ab-pd-name {
    font-size: 20px;
  }

  .ab-pd-price,
  .ab-pd-price-sale {
    font-size: 20px;
  }

  .ab-plist-title,
  .ab-pgrid-title,
  .ab-categories-title {
    font-size: 19px;
  }

  .checkout_btn,
  .add_to_cart_btn {
    font-size: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* prevent the sticky mobile buy bar from covering content */
  body {
    padding-bottom: 76px;
  }
}

/* Never allow horizontal scroll, per spec */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Visible keyboard focus everywhere, per accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--oora-gold);
  outline-offset: 2px;
}

/* ============================================================
   PART 4 — Checkout Page
   The checkout form itself is built with hardcoded Tailwind
   gray/black utility classes (text-gray-900, text-black, etc.)
   rather than the theme's CSS variables, so darkening the form
   background via --checkout-form-bg alone would make its text
   invisible. We scope fixes to .checkout_form / .checkout_buy_now
   only, so the Order Summary panel (which stays light) is
   untouched.
   ------------------------------------------------------------ */
.checkout_bg_left,
.checkout_bg_right {
  background: var(--oora-bg) !important;
}

/* Order Summary text — make everything readable white on the
   now-black background, but don't touch the trash/delete icon's
   red color (that's a deliberate warning color, not a text color) */
.checkout_order_summary,
.checkout_order_summary * {
  color: var(--oora-white) !important;
}

.checkout_order_summary button.custom-trash-btn svg,
.checkout_order_summary button.custom-trash-btn svg path,
[data-cart="item-remove"] svg,
[data-cart="item-remove"] svg path {
  color: #ef4444 !important;
  fill: #ef4444 !important;
  opacity: 1 !important;
}

.checkout_order_summary [data-invoice="invoice-total-value"],
.checkout_order_summary [data-invoice="invoice-total-label"] {
  color: var(--oora-gold) !important;
}

.checkout_order_summary .divide-gray-200 > *,
.checkout_order_summary .border-gray-200,
.checkout_order_summary .border-t {
  border-color: var(--oora-border) !important;
}

.checkout_order_summary [data-cart="item-image-wrapper"] {
  width: 140px !important;
  height: 140px !important;
  border-color: var(--oora-border) !important;
}

.checkout_order_summary [data-cart="item-image"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.checkout_form #contact-info-heading,
.checkout_form label,
form.checkout_form label,
.checkout_form span.text-gray-700 {
  color: var(--oora-white) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--oora-white) !important;
}

/* Defensive catch-all: force ANY leftover light Tailwind
   background/border utility inside the checkout form to match
   the dark brand, regardless of which exact gray/white shade
   class is used underneath. */
.checkout_form [class*="bg-gray-"],
.checkout_form [class*="bg-white"],
.checkout_form [class*="bg-slate-"],
.checkout_form [class*="bg-neutral-"] {
  background-color: var(--oora-bg) !important;
}

.checkout_form [class*="border-gray-"],
.checkout_form [class*="divide-gray-"] {
  border-color: var(--oora-border) !important;
}

.checkout_form [class*="text-gray-"],
.checkout_form [class*="text-black"] {
  color: var(--oora-white) !important;
}

.checkout_form .global_input,
.checkout_form .global_textarea {
  background: var(--oora-bg) !important;
  color: var(--oora-white) !important;
  border: 1px solid var(--oora-border) !important;
  border-radius: var(--oora-radius-sm) !important;
}

.checkout_form .global_input::placeholder,
.checkout_form .global_textarea::placeholder {
  color: var(--oora-gray) !important;
  opacity: 0.6;
}

/* Governorate dropdown (react-select) */
.checkout_form .select__control {
  background: var(--oora-bg) !important;
  border-color: var(--oora-border) !important;
  border-radius: var(--oora-radius-sm) !important;
}

.checkout_form .select__single-value,
.checkout_form .select__placeholder {
  color: var(--oora-white) !important;
}

.checkout_form .select__indicator-separator {
  background-color: var(--oora-border) !important;
}

.checkout_form .select__indicator svg {
  fill: var(--oora-gray) !important;
}

/* Payment method cards */
.checkout_form .payment_card {
  background: var(--oora-card) !important;
  border-color: var(--oora-border) !important;
}

.checkout_form button.payment_card:hover {
  border-color: var(--oora-border) !important;
}

.checkout_form button.payment_card.border-blue-600,
.checkout_form button.payment_card.border-blue-600:hover {
  border-color: var(--oora-gold) !important;
}

.checkout_form .payment_card_name {
  color: var(--oora-white) !important;
}

.checkout_form .payment_card_description {
  color: var(--oora-gray) !important;
}

.checkout_form .radio_container {
  border-color: var(--oora-border) !important;
}

.checkout_form div.radio_circle.bg-blue-500 {
  background-color: var(--oora-gold) !important;
}

.checkout_form .payment_card:not(.border-blue-600) .radio_circle {
  background-color: transparent !important;
}

/* Checkout page's own Buy Now button (different class from the
   product page's .checkout_btn, but same visual treatment) */
button.checkout_buy_now {
  background: linear-gradient(135deg, var(--oora-gold-light) 0%, var(--oora-gold) 55%, var(--oora-gold-dark) 100%) !important;
  color: #141218 !important;
  border: none !important;
  border-radius: var(--oora-radius-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--oora-shadow-gold);
  transition: transform var(--oora-dur-fast) var(--oora-ease), box-shadow var(--oora-dur-fast) var(--oora-ease);
}

button.checkout_buy_now:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.28);
}

/* (Order Summary text colors are handled above, since the panel
   is black to match the rest of the checkout page.) */