/* ============================================================
   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.) */

/* ============================================================
   FIX (28 Jul 2026) — WHITE 15px STRIP ON THE LEFT EDGE
   ------------------------------------------------------------
   Cause: the Pearl theme stylesheet was updated by EasyOrders on
   26 Jul 2026 and now ships this rule:

       @media (min-width:980px){
         html{ overflow-y:scroll; scrollbar-gutter:stable both-edges }
       }

   "both-edges" reserves scrollbar width on BOTH sides. The right
   side holds the real scrollbar; the left side is an empty 15px
   gutter that belongs to <html>. Since the dark colour (#050505)
   is painted on <body> and <html> stays white, that gutter shows
   up as a white strip down the whole page.

   Why the selector is html:root and not plain html:
   this file is loaded BEFORE the theme stylesheet, so on equal
   specificity the theme wins. html:root (0,0,1,1) outranks the
   theme's html (0,0,0,1), so we win on specificity, not order.
   No !important needed.

   Scoped to the same 980px breakpoint => mobile is untouched.
   ============================================================ */

html:root {
  background-color: #050505;
}

@media (min-width: 980px) {
  html:root {
    scrollbar-gutter: stable;
  }
}

/* ============================================================
   FIX (07 Aug 2026) — ORDER SUMMARY UNREADABLE BELOW 1024px
   ------------------------------------------------------------
   Symptom: on phones and portrait tablets the Order Summary half
   of /checkout renders as a blank near-white block. The product
   thumbnail is the only thing the customer can see in it. The
   form half is fine, and desktop is fine.

   Cause: the Pearl theme stylesheet hardcodes the panel's
   background instead of routing it through a theme variable.

       [theme style.css, no media query]
       .checkout_bg_right.checkout_bg_right,
       .checkout_order_summary.checkout_order_summary
         { background:#f2f2f2; padding-block:25px }

       [theme style.css, desktop only]
       @media (min-width:1024px){
         .checkout_order_summary.checkout_order_summary
           { background:0 0!important }
       }

   background:0 0 is the minified form of transparent.

   Compare with the two selectors right next to it, which DO read
   the variable and therefore already follow the OORA dark theme:

       .checkout_bg_left.checkout_bg_left
         { background: var(--checkout-form-bg, #f2f2f2) }
       .checkout_form
         { background: var(--checkout-form-bg, #f2f2f2)!important }

   .checkout_order_summary is the one selector EasyOrders left
   without the var(), so --checkout-form-bg (set in Part 1 of this
   file) cannot reach it. Its #f2f2f2 is only cancelled at 1024px
   and above.

   Meanwhile Part 4 of this file forces every bit of text in that
   panel to white, with no breakpoint:

       .checkout_order_summary,
       .checkout_order_summary *
         { color: var(--oora-white) !important }

   Net result below 1024px: #FFFFFF text on #F2F2F2. Measured
   contrast ratio 1.12:1 against a 4.5:1 minimum — the text is
   rendered, it is simply invisible. The product image is not
   text, so it is the only element that survives. At 1024px and
   above the theme turns the panel transparent, the #050505 body
   shows through, and the same white text reads normally, which is
   why the desktop layout never broke.

   Also note the two black background halves are Tailwind
   "hidden lg:block", so they are display:none below 1024px and
   cannot supply the dark backdrop there either.

   Fix: give the panel the brand background directly, so it no
   longer depends on the theme variable it cannot see, nor on the
   body showing through it.

   Why there is no media query on the fix:
     - Below 1024px the theme rule is (0,2,0) with NO !important,
       so this rule wins on !important alone.
     - At 1024px and above the theme rule is (0,2,0) WITH
       !important and loads after this file, so the theme keeps
       winning and the panel stays transparent exactly as it is
       today.
     - Even if that load order ever flipped, the painted colour
       would be var(--oora-bg) over a .checkout_bg_right that Part
       4 already forces to var(--oora-bg), over a body that is
       var(--oora-bg). Identical pixels either way.
   Result: no breakpoint to keep in sync, and no way for this rule
   to change the desktop rendering.

   The doubled class matches the theme's own specificity. The
   descendant selectors mirror the defensive catch-all already
   used for .checkout_form, so a light Tailwind background class
   added inside this panel later cannot reintroduce the bug.
   ============================================================ */

.checkout_order_summary.checkout_order_summary,
.checkout_order_summary [class*="bg-white"],
.checkout_order_summary [class*="bg-gray-"],
.checkout_order_summary [class*="bg-slate-"],
.checkout_order_summary [class*="bg-neutral-"] {
  background-color: var(--oora-bg) !important;
}