/*
 Theme Name:  Woodmart Child
 Description:  Woodmart Child Theme
 Author:    XTemos
 Author URI:  http://xtemos.com
 Template:   woodmart
 Version:    1.0.1
 Text Domain:  woodmart
*/

/* ============================================================
   VIGA-MAX - Child Theme custom styles
   Identity: black #000000 / gold #C9A227 / red #E30613
   Font: Cairo. Everything here is generic and reusable:
   no brand, category or product name is hard-coded.
   ============================================================ */

/* ---------- 1. Base: black background, light text ---------- */
html,
body {
  background: #000000;
  overflow-x: clip;
}

body {
  color: #FFFFFF;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.website-wrapper {
  background: linear-gradient(180deg, #000000 0%, #0E0E0E 55%, #000000 100%);
}

.main-page-wrapper,
.site-content {
  background: transparent;
}

/* Alternate Elementor sections: very dark charcoal (only where
   Elementor did not set its own background). */
.elementor-section-wrap > .elementor-top-section:nth-child(even) {
  background-color: #0B0B0B;
}

/* Faint circuit-board grid behind sections (gold lines, 3% opacity). */
.elementor-section {
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- 2. Typography: sizes and contrast ---------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: #FFFFFF;
  font-family: 'Cairo', sans-serif;
}

h1, .elementor-widget-heading h1 {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.25;
}

h2, .elementor-widget-heading h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 19px; font-weight: 700; }

p, li, span, div { color: inherit; }

/* Secondary / meta text: never darker than #CCCCCC on black. */
.wd-entities-title,
.product-title,
.widget-title,
.entry-meta,
.breadcrumbs,
.wd-breadcrumbs,
.post-info,
.meta-post-categories,
.comments-count {
  color: #E8E8E8;
}

/* ---------- 3. Links and buttons ---------- */
a { color: #C9A227; }
a:hover, a:focus { color: #E5C04A; }

/* Main menu links: white, gold on hover. */
.wd-nav-main a,
.wd-header-nav a,
.main-nav a {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
}
.wd-nav-main a:hover,
.wd-header-nav a:hover,
.main-nav a:hover { color: #C9A227; }

/* Primary buttons: gold gradient, black text, hover glow + lift. */
.btn,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor-button,
.wd-btn,
.single_add_to_cart_button,
.wc-forward,
.checkout-button {
  background: linear-gradient(135deg, #D8B23A 0%, #C9A227 55%, #A8861B 100%);
  color: #000000;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor-button:hover,
.wd-btn:hover,
.single_add_to_cart_button:hover,
.wc-forward:hover,
.checkout-button:hover {
  color: #000000;
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.55);
  transform: translateY(-2px);
}

/* ---------- 4. Header, top bar, mobile toolbar ---------- */
.whb-top-bar,
.wd-header-top-bar {
  background: #000000 !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
}

.whb-top-bar a,
.whb-top-bar .wd-nav a,
.whb-top-bar .wd-nav > li > a {
  color: #C9A227 !important;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
}

.whb-top-bar .wd-nav a:hover {
  color: #E5C04A !important;
  text-shadow: 0 0 10px rgba(201, 162, 39, 0.6);
}

/* Gold dot separators between top-bar links. */
.whb-top-bar .wd-nav > li:not(:last-child) {
  border-inline-end: 1px solid rgba(201, 162, 39, 0.35);
}

/* Underline that draws in on top-bar link hover. */
.whb-top-bar .wd-nav a { position: relative; }
.whb-top-bar .wd-nav a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 0;
  height: 1px;
  width: 0;
  background: #E5C04A;
  transition: width 0.3s ease;
}
.whb-top-bar .wd-nav a:hover::after { width: 100%; }

/* Shipping message: soft gold glow + slow shimmer sweep (4-6s). */
.viga-topbar-shipping {
  display: inline-block;
  color: #C9A227;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.45);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .viga-topbar-shipping {
    background: linear-gradient(100deg, #C9A227 20%, #F0D878 40%, #C9A227 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: viga-shimmer 5s linear infinite;
  }
}
@keyframes viga-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Header rows and dropdowns stay black with light text. */
.whb-header,
.whb-row,
.wd-header {
  background-color: #000000;
}
.wd-dropdown,
.wd-search-dropdown,
.wd-dropdown-results {
  background: #111111;
  color: #FFFFFF;
}

/* Mobile sticky toolbar: black, gold top border, light icons. */
.wd-toolbar,
.wd-sticky-nav {
  background: #000000;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
}
.wd-toolbar a { color: #E5E5E5; }
.wd-toolbar a:hover,
.wd-toolbar .wd-active { color: #C9A227; }

/* ---------- 5. Hero / slider: sci-fi electronics layer ---------- */
.wd-slider-wrapper {
  position: relative;
  overflow: hidden;
}

/* Subtle radial gold glow drifting across the hero (10s, very slow). */
.wd-slider-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.10) 0%, transparent 65%);
  animation: viga-glow-drift 10s ease-in-out infinite alternate;
}
@keyframes viga-glow-drift {
  from { transform: translateX(-2%) scale(1); opacity: 0.7; }
  to { transform: translateX(2%) scale(1.06); opacity: 1; }
}

/* Hero titles: white with gold text-glow, readable over light images. */
.wd-slide-title,
.wd-slider-title,
.wd-slide .title {
  color: #FFFFFF;
  text-shadow: 0 0 18px rgba(201, 162, 39, 0.45), 0 2px 14px rgba(0, 0, 0, 0.7);
}
.wd-slide-subtitle,
.wd-slide .subtitle {
  color: #E8E8E8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Gentle dark gradient at the top of slides so titles stay readable. */
.wd-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%);
}

/* Animated scan line under the hero title. */
.wd-slide-title {
  position: relative;
  padding-bottom: 16px;
}
.wd-slide-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 120px;
  background: linear-gradient(90deg, transparent, #C9A227, transparent);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.8);
  animation: viga-scan 5s ease-in-out infinite alternate;
}
@keyframes viga-scan {
  from { width: 60px; opacity: 0.6; }
  to { width: 150px; opacity: 1; }
}

/* Faint gold light-sweep across slide images (12s cycle, long pause). */
.wd-slide .wd-slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(201, 162, 39, 0.12) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: viga-sweep 12s ease infinite;
}
@keyframes viga-sweep {
  0% { transform: translateX(-120%); }
  30% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* HUD corner brackets around hero content (gold, low opacity). */
.wd-slide-content { position: relative; }
.wd-slide-content::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 34px;
  height: 34px;
  border-top: 1px solid rgba(201, 162, 39, 0.7);
  border-left: 1px solid rgba(201, 162, 39, 0.7);
  pointer-events: none;
}
.wd-slide-content::after {
  content: "";
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.7);
  border-right: 1px solid rgba(201, 162, 39, 0.7);
  pointer-events: none;
}

/* ---------- 6. Section titles and circuit dividers ---------- */
/* Gold circuit-node dot before section titles (consistent). */
.elementor-widget-heading .elementor-heading-title::before,
.wd-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-end: 10px;
  border-radius: 50%;
  background: #C9A227;
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.9);
  vertical-align: middle;
}

/* Glowing circuit divider: 1px gold line + glowing node at one end. */
.wd-copyrights {
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 -1px 12px rgba(201, 162, 39, 0.18);
  position: relative;
}
.wd-copyrights::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C9A227;
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.9);
}

/* Product-tab pills stay readable on black. */
.wd-nav-tabs a,
.wd-products-tabs .wd-tab-title a,
.products-tabs-title a {
  color: #E8E8E8;
  background: #1A1A1A;
}
.wd-nav-tabs li.active a,
.wd-nav-tabs a:hover,
.wd-products-tabs .wd-tab-title.active a {
  color: #C9A227;
  border-color: #C9A227;
}

/* ---------- 7. Product cards (light card on black) ---------- */
.product-grid-item .product-wrapper,
.woocommerce ul.products li.product .product-wrapper,
.wd-product .product-wrapper {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #EFEDE8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-grid-item:hover .product-wrapper,
.woocommerce ul.products li.product:hover .product-wrapper,
.wd-product:hover .product-wrapper {
  transform: translateY(-6px);
  border-color: #C9A227;
  box-shadow: 0 14px 32px rgba(201, 162, 39, 0.28), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Inner glow at the top edge on hover. */
.product-grid-item .product-wrapper::before,
.wd-product .product-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.9), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-grid-item:hover .product-wrapper::before,
.wd-product:hover .product-wrapper::before { opacity: 1; }

/* Faint gold light-sweep over the product image on hover. */
.product-grid-item .product-wrapper::after,
.wd-product .product-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 42%, rgba(201, 162, 39, 0.10) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.product-grid-item:hover .product-wrapper::after,
.wd-product:hover .product-wrapper::after { transform: translateX(120%); }

/* Image zoom on hover (image swap itself is a WoodMart setting). */
.product-wrapper .product-image-wrap img,
.product-wrapper img.attachment-woocommerce_thumbnail {
  transition: transform 0.3s ease;
}
.product-grid-item:hover .product-wrapper .product-image-wrap img,
.wd-product:hover .product-wrapper img.attachment-woocommerce_thumbnail {
  transform: scale(1.05);
}

/* Card text: dark on the light card, always readable. */
.product-wrapper .wd-entities-title,
.product-wrapper .wd-entities-title a {
  color: #1A1A1A;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
}
.product-wrapper .wd-entities-title a:hover { color: #C9A227; }

.product-wrapper .wd-product-cats,
.product-wrapper .wd-product-cats a,
.product-wrapper .product-category {
  color: #8A8A8A;
  font-size: 13px;
}

/* Prices on cards: gold, bold, larger than the old price. */
.product-wrapper .price,
.wd-product .price {
  color: #C9A227;
  font-size: 19px;
  font-weight: 700;
}
.product-wrapper .price del,
.wd-product .price del {
  color: #9A9A9A;
  font-size: 14px;
  font-weight: 400;
}
.product-wrapper .price ins,
.wd-product .price ins { text-decoration: none; }

/* Discount / sale badge: red with a soft red-gold glow. */
.product-labels .label-sale,
.product-labels .onsale,
.onsale {
  background: #E30613;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(227, 6, 19, 0.55), 0 0 6px rgba(201, 162, 39, 0.35);
}

/* Add to Cart on the card: gold glow on hover, like a lit control. */
.product-wrapper .add_to_cart_button:hover,
.product-wrapper .wd-add-btn a:hover {
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.6);
}

/* "Order on WhatsApp" card button (number read from Store Settings). */
.viga-wa-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.viga-wa-order:hover {
  background: #1EBE5B;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.55);
}

/* Out-of-stock overlay on the card image. */
.viga-out-of-stock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  z-index: 5;
  pointer-events: none;
}
.viga-out-of-stock span {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(201, 162, 39, 0.7);
  padding: 8px 16px;
  border-radius: 999px;
}

/* Star rating stays visible on the light card. */
.product-wrapper .star-rating { color: #C9A227; }

/* ---------- 8. Categories cards (light cards on black) ---------- */
.wd-categories .wd-cat,
.wd-categories .category-grid-item,
.category-grid-item .wd-cat {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #EFEDE8;
  border-top: 3px solid #C9A227;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  animation: viga-fade-up 0.6s ease both;
}
.wd-categories .wd-cat:nth-child(2) { animation-delay: 0.08s; }
.wd-categories .wd-cat:nth-child(3) { animation-delay: 0.16s; }
.wd-categories .wd-cat:nth-child(4) { animation-delay: 0.24s; }
.wd-categories .wd-cat:nth-child(5) { animation-delay: 0.32s; }
@keyframes viga-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.wd-categories .wd-cat:hover,
.wd-categories .category-grid-item:hover,
.category-grid-item .wd-cat:hover {
  transform: translateY(-6px);
  border-color: #C9A227;
  box-shadow: 0 14px 32px rgba(201, 162, 39, 0.28), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Slow shimmer sweep across the category card on hover. */
.wd-categories .wd-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(201, 162, 39, 0.10) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.wd-categories .wd-cat:hover::after { transform: translateX(120%); }

.wd-categories .wd-cat-image img,
.category-grid-item .wd-cat-image img {
  transition: transform 0.3s ease;
}
.wd-categories .wd-cat:hover .wd-cat-image img,
.category-grid-item .wd-cat:hover .wd-cat-image img { transform: scale(1.06); }

/* Category name: bold black, turns gold on hover. */
.wd-categories .wd-cat-title,
.category-grid-item .wd-cat-title {
  color: #1A1A1A;
  font-size: 19px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  transition: color 0.3s ease;
}
.wd-categories .wd-cat:hover .wd-cat-title,
.category-grid-item .wd-cat:hover .wd-cat-title { color: #C9A227; }

/* Product count in gold below the name. */
.wd-categories .wd-cat-count,
.category-grid-item .wd-cat-count {
  color: #C9A227;
  font-size: 14px;
  font-weight: 700;
}

/* "Shop now" arrow that appears on hover. */
.wd-categories .wd-cat-info::after,
.category-grid-item .wd-cat-info::after {
  content: "تسوق الآن ←";
  display: block;
  margin-top: 6px;
  color: #C9A227;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wd-categories .wd-cat:hover .wd-cat-info::after,
.category-grid-item .wd-cat:hover .wd-cat-info::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 9. Shop: filters, sort, results (dark, visible) ---------- */
.woocommerce-result-count,
.woocommerce-ordering,
.wd-shop-ordering {
  color: #E8E8E8;
}

.woocommerce-ordering select,
.woocommerce .per-page select,
.wd-shop-ordering select,
.woocommerce-ordering .orderby {
  background-color: #1A1A1A;
  color: #FFFFFF;
  border: 1px solid #333333;
  border-radius: 8px;
}

/* Sidebar widgets on black: light labels, gold counts. */
.widget_product_categories a,
.widget_layered_nav a,
.wd-widget a,
.shop-sidebar a,
.wd-shop-sidebar a {
  color: #E8E8E8;
}
.widget_product_categories a:hover,
.widget_layered_nav a:hover { color: #C9A227; }
.widget_product_categories .count,
.widget_layered_nav .count,
.wd-widget .count {
  color: #C9A227;
  font-weight: 700;
}
.widget-title,
.wd-widget-title {
  color: #FFFFFF;
}

/* Price filter slider: gold range and handles, visible on black. */
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: #333333;
}
.widget_price_filter .ui-slider-range {
  background: #C9A227;
}
.widget_price_filter .ui-slider-handle {
  background: #C9A227;
  border: 2px solid #000000;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.6);
}
.widget_price_filter .price_label,
.widget_price_filter .price_slider_amount {
  color: #E8E8E8;
}

/* Off-canvas filter drawer (mobile/tablet) is dark with light text. */
.wd-off-canvas,
.wd-sidebar-opener,
.shop-sidebar {
  background: #111111;
  color: #FFFFFF;
}

/* ---------- 10. Forms, tables, notices, cart, checkout, Quick View ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: #1A1A1A;
  color: #FFFFFF;
  border: 1px solid #333333;
  border-radius: 8px;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #C9A227;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
  outline: none;
}
::placeholder { color: #BBBBBB; }
select option { background: #1A1A1A; color: #FFFFFF; }
label, .woocommerce-form__label { color: #E8E8E8; }

.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table,
.woocommerce-account table {
  background: #111111;
  color: #FFFFFF;
  border-color: #222222;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: #222222;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #111111;
  color: #FFFFFF;
  border-top-color: #C9A227;
}
.woocommerce-message::before,
.woocommerce-info::before { color: #C9A227; }

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content {
  background: #111111;
  color: #FFFFFF;
}

/* Quick View modal: dark with light text. */
.mfp-bg { background: #000000; opacity: 0.85; }
.wd-quick-view,
.wd-quick-view .product {
  background: #111111;
  color: #FFFFFF;
}
.wd-quick-view .price { color: #C9A227; }
.wd-quick-view .price del { color: #BBBBBB; }
.wd-quick-view .product_title { color: #FFFFFF; }

/* Prices on dark surfaces: gold bold, old price light grey struck. */
.woocommerce .price,
.single-product .price {
  color: #C9A227;
  font-size: 19px;
  font-weight: 700;
}
.woocommerce .price del { color: #BBBBBB; }

/* ---------- 11. Footer ---------- */
.wd-footer,
.site-footer,
.wd-prefooter {
  background: #000000;
  color: #E5E5E5;
}
.wd-footer p,
.wd-footer li,
.wd-footer span { color: #E5E5E5; }
.wd-footer .widget-title,
.wd-footer h5,
.wd-footer h4 { color: #FFFFFF; }
.wd-footer a { color: #E5E5E5; }
.wd-footer a:hover { color: #C9A227; }

/* Footer credit / signature line (bottom bar, centred). */
.viga-credit {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(201, 162, 39, 0.35);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  padding: 6px 10px;
}
.viga-credit:hover {
  transform: translateY(-2px);
  text-shadow: 0 0 22px rgba(201, 162, 39, 0.65);
}
.viga-credit-name {
  color: #C9A227;
  font-weight: 700;
}
.viga-credit:hover .viga-credit-name { color: #E5C04A; }
.viga-credit-heart {
  color: #E30613;
  display: inline-block;
  animation: viga-heart 2.4s ease-in-out infinite;
}
@keyframes viga-heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.viga-credit-phone {
  color: #C9A227;
  font-weight: 700;
}
.viga-credit-phone:hover {
  color: #E5C04A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 12. Responsive sizes ---------- */
@media (max-width: 1024px) {
  h2, .elementor-widget-heading h2 { font-size: 26px; }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1, .elementor-widget-heading h1 { font-size: 30px; }
  h2, .elementor-widget-heading h2 { font-size: 24px; }
  .product-wrapper .wd-entities-title,
  .product-wrapper .wd-entities-title a { font-size: 15px; }
  .product-wrapper .price,
  .wd-product .price { font-size: 17px; }
  .wd-categories .wd-cat-title,
  .category-grid-item .wd-cat-title { font-size: 17px; }
  /* Top bar on mobile: shipping message centred, menu hidden. */
  .whb-top-bar .wd-nav { display: none !important; }
  .whb-top-bar .viga-topbar-shipping {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ---------- 13. Reduced motion: ambient animation off ---------- */
@media (prefers-reduced-motion: reduce) {
  .viga-topbar-shipping,
  .wd-slider-wrapper::after,
  .viga-credit-heart,
  .wd-slide .wd-slide-bg::after,
  .wd-slide-title::after,
  .wd-categories .wd-cat {
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   FIXES - 2026-10-27 (shop sidebar contrast, badges, transitions)
   ============================================================ */

/* ---------- Shop sidebar: dark panel (was white, light text invisible) ---------- */
.sidebar-container,
.wd-sidebar,
.shop-sidebar,
.wd-shop-sidebar,
.woocommerce .wd-sidebar {
	background-color: #111111 !important;
}
.wd-sidebar .widget,
.sidebar-container .widget {
	background-color: transparent !important;
	border-color: rgba(201, 162, 39, 0.25) !important;
}
.wd-sidebar .widget-title,
.sidebar-container .widget-title {
	color: #FFFFFF !important;
}
.wd-sidebar .widget a,
.wd-sidebar .widget,
.sidebar-container .widget a,
.sidebar-container .widget {
	color: #E8E8E8;
}
.wd-sidebar .widget a:hover,
.sidebar-container .widget a:hover {
	color: #C9A227;
}
/* Price filter text + slider labels inside the dark sidebar */
.wd-sidebar .price_slider_amount,
.wd-sidebar .widget_price_filter .price_label,
.sidebar-container .widget_price_filter .price_label {
	color: #E8E8E8 !important;
}
.wd-sidebar .widget_price_filter input[type="text"] {
	background-color: #1A1A1A !important;
	color: #FFFFFF !important;
	border-color: #333333 !important;
}
/* Layered-nav count pills stay gold on dark */
.wd-sidebar .count,
.sidebar-container .count {
	color: #C9A227 !important;
}

/* ---------- Product badges: keep sale / hot labels fully inside the image ---------- */
.product-labels,
.wd-product-labels,
.product-element-top .product-labels {
	top: 12px !important;
}
.product-labels .onsale,
.product-labels .label-sale,
.wd-product-labels .onsale {
	box-shadow: 0 4px 14px rgba(227, 6, 19, 0.45);
}

/* ---------- Smooth 0.3s transitions on every interactive element ---------- */
a, button, input, select, textarea,
.btn, .button, .wd-btn, .wd-button,
.menu-item > a, .wd-nav > li > a,
.product-wrapper, .wd-product, .wd-cat-item,
.widget a, .viga-fabs a, .wd-tools-element > a {
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
/* ---------- Results count: always visible, light text on black ---------- */
.woocommerce-result-count {
	display: block !important;
	color: #E8E8E8 !important;
	font-size: 15px;
	font-family: 'Cairo', sans-serif;
}

/* ---------- FIXES 2 - 2026-10-27: correct selectors found in parent templates ---------- */
/* Category cards: real classes are .wd-cat / .wd-cats / .wd-cat-content / .wd-cat-count
   (NOT .wd-cat-item). Title is h3.wd-entities-title inside .wd-cat-content, NOT inside the link.
   High-specificity chains beat the theme color-scheme-light rule. */
.wd-cats .wd-cat.color-scheme-light .wd-cat-content .wd-entities-title,
.wd-cats .wd-cat.color-scheme-dark .wd-cat-content .wd-entities-title,
.wd-cat.color-scheme-light .wd-entities-title,
.wd-cat.color-scheme-dark .wd-entities-title,
.wd-cat .wd-entities-title,
.wd-cats .wd-entities-title,
.wd-cat-content .wd-entities-title {
    color: #1A1A1A !important;
}
.wd-cat .wd-cat-count,
.wd-cat .wd-cat-count a {
    color: #C9A227 !important;
}
/* Shop sidebar: high-specificity dark panel (WoodMart sets a white bg) */
.shop-content-area aside.wd-sidebar.sidebar-container,
aside.wd-sidebar.sidebar-container {
    background-color: #111111 !important;
}
.wd-sidebar .widget-area,
aside.wd-sidebar.sidebar-container .widget-area {
    background-color: #111111 !important;
}
.wd-sidebar .widget-area .widget {
    background-color: transparent !important;
}
/* Transitions also cover the real .wd-cat class */
.wd-cat,
.wd-cats .wd-cat {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
/* ============================================================
   FIXES 3 - 2026-10-27: hover action icons visible on white images
   The Quick View / Compare / Wishlist round buttons are white-on-white
   on the light product images, so they are nearly invisible and hard
   to hit. Give them a dark background with gold icons and a shadow;
   gold background with black icon on hover.
   ============================================================ */
.wd-buttons .wd-action-btn > a,
.wd-buttons .wd-action-btn a,
.product-wrapper .wd-buttons a,
.wd-product .wd-buttons a {
  background-color:#111111 !important;
  color:#C9A227 !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.45) !important;
}
.wd-buttons .wd-action-btn > a:hover,
.wd-buttons .wd-action-btn a:hover,
.product-wrapper .wd-buttons a:hover,
.wd-product .wd-buttons a:hover {
  background-color:#C9A227 !important;
  color:#000000 !important;
  box-shadow:0 4px 16px rgba(201,162,39,0.55) !important;
}

/* ============================================================
FIXES 4 - 2026-10-27: contrast fixes found in live review
- Blog post titles were light grey on white cards (nearly
  invisible). Force dark titles on the white blog cards.
- Single-product tabs: inactive tabs white-on-white on the
  white pill. Force dark text; active tab gold with black text.
- Promo/hero slide subtitles: faint on light slide images.
  White text + dark shadow so they stay readable.
============================================================ */
.wd-post .wd-entities-title a,
.wd-post .wd-post-title a,
.blog-post-loop .wd-entities-title a,
.elementor-widget-wd_blog .wd-entities-title a,
.wd-blog-holder .wd-entities-title a{color:#1A1A1A!important;}
.wd-post .wd-entities-title a:hover,
.blog-post-loop .wd-entities-title a:hover{color:#C9A227!important;}
.wd-post .wd-post-meta,
.wd-post .wd-post-meta a{color:#666666!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a{color:#1A1A1A!important;background-color:#F7F5F0!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a{color:#000000!important;background-color:#C9A227!important;border-color:#C9A227!important;}
.wd-slide .wd-slide-subtitle,
.wd-slide .wd-slide-title{text-shadow:0 1px 10px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.9)!important;}
.wd-slide .wd-slide-subtitle{color:#FFFFFF!important;}
/* ============================================================
FIXES 5 - 2026-10-27: blog card meta + category pill contrast
- "Posted by" label stayed light grey on the white blog card
  (nested spans did not inherit the meta colour). Force every
  meta descendant dark; author link near-black.
- Category pill (REVIEWS) renders gold-on-gold: global link
  colour is gold and the pill background is gold. Force black
  text on the gold pill.
============================================================ */
.wd-post .wd-post-meta,
.wd-post .wd-post-meta *,
.wd-post .wd-meta-author,
.wd-post .wd-meta-author *{color:#555555!important;}
.wd-post .wd-post-meta a{color:#1A1A1A!important;}
.wd-post .wd-post-meta a:hover{color:#C9A227!important;}
.wd-post .wd-post-cat a,
.wd-post .wd-post-category a,
.wd-post .wd-post-cat a:hover,
.wd-post .wd-post-category a:hover{color:#000000!important;}

/* ============================================================
FIXES 6 - 2026-10-27: WoodMart builder product tabs (real markup
from woocommerce/single-product/tabs/tabs-tabs.php)
- Nav is ul.wd-nav.wd-nav-tabs > li > a.wd-nav-link > span.wd-tabs-title
  (FIXES 4 targeted the plain WooCommerce ul.tabs, which is not
  what WoodMart renders). Inactive tab titles were white on the
  white pill; active tab was a demo purple pill.
- Delivery info headings (extra content block) were dark purple
  on black; force light text there.
============================================================ */
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a.wd-nav-link,
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a.wd-nav-link .wd-tabs-title,
.wd-nav-tabs li a.wd-nav-link,
.wd-nav-tabs li a.wd-nav-link .wd-tabs-title{color:#1A1A1A!important;}
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a.wd-nav-link,
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a.wd-nav-link .wd-tabs-title,
.wd-nav-tabs li.active a.wd-nav-link,
.wd-nav-tabs li.active a.wd-nav-link .wd-tabs-title{color:#000000!important;background-color:#C9A227!important;}
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a.wd-nav-link:hover,
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a.wd-nav-link:hover .wd-tabs-title{color:#C9A227!important;}
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a.wd-nav-link:hover,
.woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a.wd-nav-link:hover .wd-tabs-title{color:#000000!important;}
.woocommerce-tabs .wd-accordion-title .wd-accordion-title-text{color:#1A1A1A!important;}
.wd-product-extra-content,
.wd-product-extra-content *{color:#E5E5E5!important;}
.wd-product-extra-content strong,
.wd-product-extra-content b{color:#FFFFFF!important;}
.wd-product-extra-content a{color:#C9A227!important;}
/* ============================================================
FIXES 7 - 2026-10-27: product hover action buttons (Quick View /
Wishlist / Compare) were in the DOM but never visible and never
clickable on the custom loop layout (2132): the theme's hover rule
does not reveal them for this layout, so they stay hidden and the
product image link covers them (clicking the eye navigated to the
product page). Force the buttons container and the buttons
themselves visible, on top of the image link, when the card is
hovered (or focused). Colours stay as FIXES 3 set them.
============================================================ */
.product-grid-item:hover .wd-buttons,
.product-wrapper:hover .wd-buttons,
.wd-product:hover .wd-buttons,
.product-element-top:hover .wd-buttons,
.product-grid-item:focus-within .wd-buttons,
.product-wrapper:focus-within .wd-buttons {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}
.product-grid-item:hover .wd-buttons .wd-action-btn,
.product-wrapper:hover .wd-buttons .wd-action-btn,
.wd-product:hover .wd-buttons .wd-action-btn,
.product-element-top:hover .wd-buttons .wd-action-btn,
.product-grid-item:focus-within .wd-buttons .wd-action-btn,
.product-wrapper:focus-within .wd-buttons .wd-action-btn,
.product-grid-item:hover .wd-quick-view,
.product-grid-item:hover .wd-wishlist-btn,
.product-grid-item:hover .wd-compare-btn,
.product-wrapper:hover .wd-quick-view,
.product-wrapper:hover .wd-wishlist-btn,
.product-wrapper:hover .wd-compare-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* PROBE 2026-10-27 (diagnostic, remove after test): force the hover
buttons container always visible with a red background, to test
whether the .wd-buttons selector matches the live markup at all. */
.wd-buttons {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #E30613 !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 120px !important;
  height: 40px !important;
  z-index: 9999 !important;
}
/* PROBE2 2026-10-27 (diagnostic, remove after test): a red bar at the
very top of every page proves the tail of this stylesheet is parsed
and loaded. If it does NOT appear, the file has a syntax break above
or the stylesheet is not loaded on that page. */
body {
  border-top: 25px solid #E30613 !important;
}

/* PROBE3 2026-10-27 (diagnostic, remove after test): find the hover
buttons structure via :has(). The compare link href is the same on
every card (/compare/), so its parent (button div) and grandparent
(buttons container) can be found without knowing their class names. */
*:has(> a[href$="/compare/"]) {
  outline: 4px solid #E30613 !important;
}
*:has(> * > a[href$="/compare/"]) {
  outline: 4px solid #C9A227 !important;
}
/* ============================================================
FIXES 8 - 2026-10-27 (test): the theme renders NO .wd-buttons wrapper
in the custom loop layout (2132) - the three action buttons are direct
children of the image wrapper (PROBE3 proved it: gold outline = image
wrapper, red square = compare button div). Reveal them via :has() /
sibling selectors anchored on the compare link (stable /compare/ href
on every card). Scoped to main so the header icons are untouched.
============================================================ */
main *:has(> a[href$="/compare/"]),
main *:has(> a[href$="/compare/"]) + *,
main *:has(> a[href$="/compare/"]) + * + * {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}
main *:has(> a[href$="/compare/"]) a,
main *:has(> a[href$="/compare/"]) + * a,
main *:has(> a[href$="/compare/"]) + * + * a {
  color: #111111 !important;
}

/* PROBE4 2026-10-27 (diagnostic, remove after test): colour each of
the three FIXES 8 targets differently so I can see which elements the
sibling selectors actually hit and where they sit on the card. */
main *:has(> a[href$="/compare/"]) {
  background: #E30613 !important;
}
main *:has(> a[href$="/compare/"]) + * {
  background: #C9A227 !important;
}
main *:has(> a[href$="/compare/"]) + * + * {
  background: #2563EB !important;
}
/* ============================================================
FIXES 8b - 2026-10-27: un-stack the three buttons into a vertical
column at the top-right of the image (they all sit at the same spot
without the theme's .wd-buttons flex column). Also restores the white
backgrounds PROBE4 overrode, forces the icon glyphs dark (the theme
paints them white, invisible on white buttons), and gives the buttons
a gold hover. Quick View popup already verified working 04:23 UTC.
============================================================ */
main *:has(> a[href$="/compare/"]) {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: #FFFFFF !important;
}
main *:has(> a[href$="/compare/"]) + * {
  position: absolute !important;
  top: 60px !important;
  right: 10px !important;
  background: #FFFFFF !important;
}
main *:has(> a[href$="/compare/"]) + * + * {
  position: absolute !important;
  top: 110px !important;
  right: 10px !important;
  background: #FFFFFF !important;
}
main *:has(> a[href$="/compare/"]) a::before,
main *:has(> a[href$="/compare/"]) + * a::before,
main *:has(> a[href$="/compare/"]) + * + * a::before,
main *:has(> a[href$="/compare/"]) a *,
main *:has(> a[href$="/compare/"]) + * a *,
main *:has(> a[href$="/compare/"]) + * + * a * {
  color: #111111 !important;
}
main *:has(> a[href$="/compare/"]):hover,
main *:has(> a[href$="/compare/"]) + *:hover,
main *:has(> a[href$="/compare/"]) + * + *:hover {
  background: #C9A227 !important;
}

/* ============================================================
FIXES 8c - 2026-10-27: the three buttons are now a column, but their
icons still paint white (theme rule, not the link colour). Force the
glyph dark on the button divs themselves, their ::before and every
descendant (incl. SVG fill), so the icons show on the white buttons.
============================================================ */
main *:has(> a[href$="/compare/"])::before,
main *:has(> a[href$="/compare/"]) + *::before,
main *:has(> a[href$="/compare/"]) + * + *::before,
main *:has(> a[href$="/compare/"]) *,
main *:has(> a[href$="/compare/"]) + * *,
main *:has(> a[href$="/compare/"]) + * + * * {
  color: #111111 !important;
}
main *:has(> a[href$="/compare/"]) svg,
main *:has(> a[href$="/compare/"]) + * svg,
main *:has(> a[href$="/compare/"]) + * + * svg,
main *:has(> a[href$="/compare/"]) svg *,
main *:has(> a[href$="/compare/"]) + * svg *,
main *:has(> a[href$="/compare/"]) + * + * svg * {
  fill: #111111 !important;
}
/* ============================================================
FIXES 8d - 2026-10-27: the theme paints the action icons WHITE, so
white buttons hide them. Use near-black buttons (white icons show
clearly) with the gold hover from FIXES 8b.
============================================================ */
main *:has(> a[href$="/compare/"]),
main *:has(> a[href$="/compare/"]) + *,
main *:has(> a[href$="/compare/"]) + * + * {
  background: #111111 !important;
}

/* ============================================================
FIXES 8e - 2026-10-27: sibling chains break on cards with a sale/hot
badge ("ساخن"): the badge/labels wrapper sits between the compare
button and the quick-view button, so "+ *" hit the badge (empty black
circle) and the wishlist button stayed hidden. Anchor each button by
its own link instead (compare /wishlist/ hrefs are the same on every
card), and neutralise the labels wrapper.
============================================================ */
main *:has(> a[href$="/compare/"]),
main *:has(+ *:has(> a[href$="/wishlist/"])),
main *:has(> a[href$="/wishlist/"]) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  pointer-events: auto !important; z-index: 10 !important;
  background: #111111 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  position: absolute !important;
}
main *:has(> a[href$="/compare/"]) { top: 10px !important; right: 10px !important; }
main *:has(+ *:has(> a[href$="/wishlist/"])) { top: 60px !important; right: 10px !important; }
main *:has(> a[href$="/wishlist/"]) { top: 110px !important; right: 10px !important; }
main *:has(> a[href$="/compare/"]):hover,
main *:has(+ *:has(> a[href$="/wishlist/"])):hover,
main *:has(> a[href$="/wishlist/"]):hover { background: #C9A227 !important; }
/* Labels/badge wrapper right after compare (badged cards only): it is
NOT the quick-view button, so undo the button styling. It holds no link,
so it cannot receive clicks. */
main *:has(> a[href$="/compare/"]) + *:not(:has(+ *:has(> a[href$="/wishlist/"]))) {
  width: auto !important; height: auto !important;
  background: transparent !important; border-radius: 0 !important;
  box-shadow: none !important; display: block !important;
  pointer-events: none !important;
}
/* PROBE5 - 2026-10-27 DIAGNOSTIC ONLY, remove after reading:
(a) wishlist button div = BLUE background
(b) element immediately before the wishlist div (should be quick-view) = GREEN outline
(c) element right after compare that is NOT before wishlist (should be the badge wrapper) = MAGENTA outline */
main *:has(> a[href$="/wishlist/"]) { background: #2563EB !important; }
main *:has(+ *:has(> a[href$="/wishlist/"])) { outline: 5px solid #00FF00 !important; }
main *:has(> a[href$="/compare/"]) + *:not(:has(+ *:has(> a[href$="/wishlist/"]))) { outline: 5px solid #FF00FF !important; }

/* ============================================================
FIXES 8f - 2026-10-27: PROBE5 proved :has() with a leading sibling
combinator (+ ...) does NOT work here - any rule containing it is
dropped whole (that is why FIXES 8e changed nothing). Use only
:has(> ...) child anchors, each button in its OWN rule so one bad
selector cannot kill the others.
============================================================ */
main *:has(> a[href$="/compare/"]) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; pointer-events: auto !important; z-index: 10 !important;
  background: #111111 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; position: absolute !important;
  top: 10px !important; right: 10px !important;
}
main *:has(> a[href$="/wishlist/"]) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; pointer-events: auto !important; z-index: 10 !important;
  background: #111111 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; position: absolute !important;
  top: 110px !important; right: 10px !important;
}
main *:has(> a[href*="/product/"]:not(:has(img))):not(h3) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; pointer-events: auto !important; z-index: 10 !important;
  background: #111111 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; position: absolute !important;
  top: 60px !important; right: 10px !important;
}
main *:has(> a[href$="/compare/"]):hover { background: #C9A227 !important; }
main *:has(> a[href$="/wishlist/"]):hover { background: #C9A227 !important; }
main *:has(> a[href*="/product/"]:not(:has(img))):not(h3):hover { background: #C9A227 !important; }
/* Badge/labels wrapper: the element right after compare with NO direct
link child (badged cards only). Undo the button styling. */
main *:has(> a[href$="/compare/"]) + *:not(:has(> a)) {
  width: auto !important; height: auto !important; background: transparent !important;
  border-radius: 0 !important; box-shadow: none !important; display: block !important;
  pointer-events: none !important;
}
/* PROBE6 diagnostic: quick-view links (class contains "quick") = green outline */
main a[class*="quick"] { outline: 4px solid #00FF00 !important; }
/* ============================================================
FIXES 8g - 2026-10-27: PROBE6 proved the quick-view links carry a
class containing "quick" (green outlines). Use that simple class
anchor for the quick-view button div - the href-based anchor in 8f
did not match, so on badged cards quick-view still sat at the bottom
on top of the wishlist button. This moves it to the middle slot.
============================================================ */
main *:has(> a[class*="quick"]) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; pointer-events: auto !important; z-index: 10 !important;
  background: #111111 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; position: absolute !important;
  top: 60px !important; right: 10px !important;
}
main *:has(> a[class*="quick"]):hover { background: #C9A227 !important; }

/* ============================================================
CLEANUP 2026-10-27: neutralise the PROBE diagnostic rules.
The editor only appends, so the probe rules stay in the file but are
made inert by these later overrides (same specificity, later wins):
- PROBE2 red top bar -> border-top: 0
- PROBE3 red/gold outlines on compare links -> outline: none
- PROBE6 green outline on quick-view links -> outline: none
PROBE / PROBE4 / PROBE5 are already inert: PROBE (.wd-buttons) matches
nothing in the live markup, PROBE4/PROBE5a backgrounds are overridden
by the FIXES 8d/8f dark #111111 backgrounds, and PROBE5b/c selectors
with a leading sibling combinator are dropped whole. The permanent
product-card action-button fix is FIXES 8d + 8f + 8g above.
============================================================ */
body { border-top: 0 !important; }
*:has(> a[href$="/compare/"]) { outline: none !important; }
*:has(> * > a[href$="/compare/"]) { outline: none !important; }
main a[class*="quick"] { outline: none !important; }
/* ============================================================
FIXES 9 - 2026-10-27: cart + checkout white cards have white
headings/labels (the theme's heading colour is white for the black
background, but WoodMart renders these two pages as WHITE cards).
Found live 04:47-04:48 UTC: cart "Your order qualifies for free
shipping!" + "إجمالي سلة المشتريات" heading white-on-white;
checkout "Billing Details" + "Your Order" headings and all billing
field labels white-on-white. Scope is narrow on purpose: only the
standard WooCommerce wrappers for these two pages, so headings that
sit on the black page background (e.g. "هل تودّ الشحن لعنوان
مختلف؟") are NOT touched.
============================================================ */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-billing-fields h4,
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-checkout-review-order h3,
.woocommerce-checkout .woocommerce-checkout-review-order h4,
.woocommerce-checkout #order_review_heading {
  color: #1A1A1A !important;
}
.wd-free-shipping-progress-bar,
.wd-free-shipping-progress-bar *,
.woocommerce-cart .wd-progress-msg,
.woocommerce-checkout .wd-progress-msg {
  color: #1A1A1A !important;
}

/* ============================================================
FIXES 9b - 2026-10-27: FIXES 9 fixed the checkout billing labels
and the cart totals heading (verified live), but the "Billing
Details" / "Your Order" headings sit OUTSIDE the standard
WooCommerce wrappers, so those selectors missed them - and the
free-shipping notice uses a different WoodMart class. This block
uses :has(> ...) parent anchors (proven pattern from FIXES 8) to
find the direct parent of the billing fields / order table and
darken only its direct headings, plus more class candidates for
the free-shipping notice.
============================================================ */
.woocommerce-checkout *:has(> .woocommerce-billing-fields) > h3,
.woocommerce-checkout *:has(> .woocommerce-billing-fields) > h4,
.woocommerce-checkout *:has(> .woocommerce-checkout-review-order-table) > h3,
.woocommerce-checkout *:has(> .woocommerce-checkout-review-order-table) > h4,
.woocommerce-checkout *:has(> #order_review) > h3,
.woocommerce-checkout *:has(> #order_review) > h4,
.woocommerce-checkout .wd-checkout-title {
  color: #1A1A1A !important;
}
.wd-shipping-progress-bar,
.wd-shipping-progress-bar *,
.free-shipping-progress-bar,
.free-shipping-progress-bar *,
.wd-progress-bar-label,
.woocommerce-cart .wd-progress-bar-wrap,
.woocommerce-cart .wd-progress-bar-wrap *,
.woocommerce-checkout .wd-progress-bar-wrap,
.woocommerce-checkout .wd-progress-bar-wrap * {
  color: #1A1A1A !important;
}
/* ============================================================
FIXES 9c - 2026-10-27: My Account navigation menu is white-on-white
on its white card (found in the final audit, ?v=acc1). The account
nav uses standard WooCommerce markup, so its links can be darkened
safely - scoped to .woocommerce-MyAccount-navigation only.
============================================================ */
.woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a:visited {
  color: #1A1A1A !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #000000 !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #C9A227 !important;
}
/* -------------------------------------------------------------------/* Card batch + Hot Deals. */
.product-wrapper .product-image-wrap{position:relative;overflow:hidden;}
.product-wrapper .product-image-wrap::after{content:"عرض سريع";position:absolute;left:0;right:0;bottom:0;z-index:5;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));color:#C9A227;font-weight:700;font-size:13px;text-align:center;transform:translateY(102%);transition:transform .3s ease;}
.product-wrapper:hover .product-image-wrap::after{transform:translateY(0);}
@media (hover:none){.product-wrapper .product-image-wrap::after{display:none;}}
@media (prefers-reduced-motion:reduce){.product-wrapper .product-image-wrap::after{transition:none;}}
.product-wrapper .product-image-wrap img{transition:transform .3s ease,opacity .3s ease;}
.elementor-countdown-item,.wd-timer{background:#111!important;border:1px solid #C9A227!important;border-radius:12px!important;box-shadow:0 0 12px rgba(201,162,39,.35);padding:10px 12px;min-width:64px;text-align:center;}
.elementor-countdown-digits,.wd-timer .timer-value{color:#fff!important;font-size:26px;font-weight:800;line-height:1.1;}
.elementor-countdown-label,.wd-timer .timer-label{color:#C9A227!important;font-size:12px;font-weight:700;}/*------ * "Order on WhatsApp" button on the single product page (2026-10-27). * The PHP hook wraps the card button ([viga_wa_order], class * .viga-wa-order) in .viga-wa-order-single; this enlarges it to match * the Add to Cart button and adds the gold #C9A227 store accent. * ------------------------------------------------------------------------- */.viga-wa-order-single{ margin-top:14px;}.viga-wa-order-single .viga-wa-order{  display:flex; width:100%; justify-content:center; margin-top:0;  padding:14px 20px; font-size:16px;  border:1px solid #C9A227; box-shadow:0 0 0 1px rgba(201,162,39,0.25);}.viga-wa-order-single .viga-wa-order:hover{  box-shadow:0 0 16px rgba(201,162,39,0.6), 0 0 14px rgba(37,211,102,0.55);}@media (max-width:480px){  .viga-wa-order-single .viga-wa-order{ padding:12px 16px; font-size:15px;}}

/* Top bar shipping message: centred, larger, bolder. Shimmer and glow kept. */ .whb-top-bar{text-align:center;} .whb-top-bar .viga-topbar-shipping{font-sie:16px;font-weight:700;text-align:center;} @media (max-width:768px){.whb-top-bar .viga-topbar-shipping{font-size:15px;}} @media (max-width:480px){.whb-top-bar .viga-topbar-shipping{font-size:14px;}} @media (prefers-reduced-motion:reduce){.whb-top-bar .viga-topbar-shipping{animation:none;}}
/* WhatsApp order from the cart. */.viga-wa-order-cart{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin-top:10px;padding:14px 20px;font-size:16px;}.viga-wa-order-cart svg{width:20px;height:20px;flex:none;}.viga-wa-order-cartpage{margin-top:12px;}.viga-wa-order-minicart{margin-top:10px;padding:12px 16px;font-size:15px;}@media (max-width:480px){.viga-wa-order-cart{padding:12px 16px;font-size:15px;}}/* Single product: gold Add to Cart stacked above green WhatsApp, equal size. */.single-product form.cart{flex-wrap:wrap;}.single-product form.cart .single_add_to_cart_button{flex:1 1 100%;display:flex;width:100%;}justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:16px;font-weight:700;font-family:'Cairo',sans-serif;color:#000000;background:#C9A227;border:1px solid #C9A227;border-radius:999px;box-shadow:0 0 0 1px rgba(201,162,39,0.25);}.single-product form.cart .single_add_to_cart_button:hover{background:#D9B64A;box-shadow:0 0 16px rgba(201,162,39,0.6);}.single-product form.cart .single_add_to_cart_button::before{content:"\1F6D2";font-size:18px;line-height:1;}@media (max-width:480px){.single-product form.cart .single_add_to_cart_button{padding:12px 16px;font-size:15px;}}.single-product form.cart .single_add_to_cart_button{justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:16px;font-weight:700;font-family:'Cairo',sans-serif;color:#000000;background:#C9A227;border:1px solid #C9A227;border-radius:999px;box-shadow:0 0 0 1px rgba(201,162,39,0.25);}@media (max-width:480px){.single-product form.cart .single_add_to_cart_button{padding:12px 16px;font-size:15px;}}
/* Top bar: hide the empty secondary-menu placeholder. */
.whb-top-bar .wd-header-nav,.whb-top-bar nav[aria-label="التنقل الثانوي"]{display:none!important;}

/* ============================================================
FIXES 10 - 2026-10-27: single-product Add to Cart - REAL SVG icon
+ text "أضف للسلة" (owner flag 2026-10-27 21:00 EEST).
- The old icon was only a CSS ::before emoji (content:"\1F6D2"):
  it is not in the button markup, so curl shows no icon and some
  phones never render it. It is switched off below; the icon is now
  a real inline <svg class="viga-atc-icon"> injected inside the
  button (server-side output filter + JS fallback in functions.php).
- Agreed look, locked in: flat gold #C9A227, black text, full width
  of the summary column, same pill radius / padding as the green
  WhatsApp button, gold glow on hover.
============================================================ */
/* 1. Kill the old ::before emoji icon (replaced by the real SVG). */
.single-product form.cart .single_add_to_cart_button::before,
.woodmart-sticky-add-to-cart .single_add_to_cart_button::before,
.wd-sticky-add-to-cart .single_add_to_cart_button::before {
  content: none !important;
  display: none !important;
}
/* 2. Lock the agreed styling with higher specificity + !important so
   the theme can no longer override it. */
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
body.single-product div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 20px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #000000 !important;
  background: #C9A227 !important;
  background-image: none !important;
  border: 1px solid #C9A227 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(201,162,39,0.25) !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover,
body.single-product div.product form.cart .single_add_to_cart_button:hover,
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:focus-visible,
body.single-product div.product form.cart .single_add_to_cart_button:focus-visible {
  background: #D9B64A !important;
  color: #000000 !important;
  border-color: #D9B64A !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.35), 0 10px 28px rgba(201,162,39,0.55) !important;
  transform: translateY(-2px);
}
/* 3. The real cart icon: inline SVG, same colour as the text. */
.single_add_to_cart_button .viga-atc-icon,
button.single_add_to_cart_button svg.viga-atc-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  color: #000000 !important;
  vertical-align: middle;
}
.single_add_to_cart_button .viga-atc-icon * {
  stroke: currentColor !important;
}
/* 4. Sticky add-to-cart bar button: same gold/black/icon, but keep the
   bar's own layout (no forced full width). */
.wd-sticky-add-to-cart .single_add_to_cart_button,
.woodmart-sticky-add-to-cart .single_add_to_cart_button {
  background: #C9A227 !important;
  background-image: none !important;
  color: #000000 !important;
  border: 1px solid #C9A227 !important;
}
.wd-sticky-add-to-cart .single_add_to_cart_button:hover,
.woodmart-sticky-add-to-cart .single_add_to_cart_button:hover {
  background: #D9B64A !important;
  color: #000000 !important;
  box-shadow: 0 0 16px rgba(201,162,39,0.6) !important;
}
/* 5. Small phones: keep the icon + text on one tidy row. */
@media (max-width: 480px) {
  body.single-product div.product form.cart .single_add_to_cart_button {
    padding: 12px 16px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
  .single_add_to_cart_button .viga-atc-icon {
    width: 18px !important;
    height: 18px !important;
  }
}/* WhatsApp button inside the sticky add-to-cart bar. */.wd-sticky-btn-cart:has(>.viga-wa-order-sticky){display:flex;align-items:center;gap:8px}.wd-sticky-btn .viga-wa-order-sticky{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0;padding:0 16px;min-height:42px;border-radius:8px;background:#25D366;color:#fff;font-size:14px;font-weight:700;white-space:nowrap}.wd-sticky-btn .viga-wa-order-sticky:hover{background:#1EB856;box-shadow:0 0 14px rgba(37,211,102,.55)}@media (max-width:767px){.wd-sticky-btn .viga-wa-order-sticky{padding:0 10px;font-size:13px;min-height:38px}} /* Product card: full-width text Add to Cart stacked above WhatsApp, equal size. */ .product-wrapper .wd-add-btn,.wd-product .wd-add-btn{display:block!important;width:100%!important;margin-top:8px!important;} .product-wrapper .wd-add-btn a,.wd-product .wd-add-btn a{display:flex!important;width:100%!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:42px!important;padding:0 16px!important;border-radius:8px!important;background:#C9A227!important;background-image:none!important;color:#000000!important;font-size:14px!important;font-weight:700!important;font-family:'Cairo',sans-serif!important;border:1px solid #C9A227!important;text-align:center!important;box-shadow:none!important;} .product-wrapper .wd-add-btn a:hover,.wd-product .wd-add-btn a:hover{background:#D9B64A!important;color:#000000!important;border-color:#D9B64A!important;box-shadow:0 0 16px rgba(201,162,39,0.6)!important;} .product-wrapper .viga-wa-order,.wd-product .viga-wa-order{display:flex!important;width:100%!important;justify-content:center!important;min-height:42px!important;padding:0 16px!important;border-radius:8px!important;font-size:14px!important;margin-top:8px!important;} @media(max-width:480px){.product-wrapper .wd-add-btn a,.wd-product .wd-add-btn a,.product-wrapper .viga-wa-order,.wd-product .viga-wa-order{font-size:13px!important;padding:0 10px!important;min-height:40px!important;}} /* Product card: show the button label next to the cart icon (WoodMart renders icon-only). */ .product-wrapper .wd-add-btn a.add_to_cart_button::after,.wd-product .wd-add-btn a.add_to_cart_button::after{content:"  السلة";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} .product-wrapper .wd-add-btn a.product_type_variable::after,.wd-product .wd-add-btn a.product_type_variable::after{content:" الخيارات";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} @media(max-width:480px){.product-wrapper .wd-add-btn a.add_to_cart_button::after,.wd-product .wd-add-btn a.add_to_cart_button::after,.product-wrapper .wd-add-btn a.product_type_variable::after,.wd-product .wd-add-btn a.product_type_variable::after{font-size:13px!important;}} /* Product card: full label via ::after; hide WoodMart short label. */ .product-type-simple .product-wrapper .wd-add-btn a,.product-type-variable .product-wrapper .wd-add-btn a{font-size:0!important;} .product-type-simple .product-wrapper .wd-add-btn a::after{content:"  السلة";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} .product-type-variable .product-wrapper .wd-add-btn a::after{content:" الخيارات";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} @media(max-width:480px){.product-type-simple .product-wrapper .wd-add-btn a::after,.product-type-variable .product-wrapper .wd-add-btn a::after{font-size:13px!important;}} /* Product card: full label via ::after using href (add-to-cart = simple). */ .product-wrapper .wd-add-btn a{font-size:0!important;} .product-wrapper .wd-add-btn a[href*="add-to-cart"]::after{content:"  السلة";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} .product-wrapper .wd-add-btn a:not([href*="add-to-cart"])::after{content:" الخيارات";font-size:14px!important;font-weight:700!important;color:#000000!important;font-family:'Cairo',sans-serif!important;} @media(max-width:480px){.product-wrapper .wd-add-btn a[href*="add-to-cart"]::after,.product-wrapper .wd-add-btn a:not([href*="add-to-cart"])::after{font-size:13px!important;}} /* Product card: full label via Unicode escapes (Arabic typing truncates in editor). */ .product-wrapper .wd-add-btn a[href*="add-to-cart"]::after{content:"\625\636\627\641\629\20\625\644\649\20\627\644\633\644\629";} .product-wrapper .wd-add-btn a:not([href*="add-to-cart"])::after{content:"\62A\62D\62F\64A\62F\20\627\644\62E\64A\627\631\627\62A";}
/* ============================================================
   FIXES 11 - 2026-10-27: hover slide-up overlay bar + auto image
   rotation on the homepage Elementor loop cards (layout 2132).
   - The earlier "Card batch" bar targeted .product-image-wrap,
     which does NOT exist in the custom loop markup (selector
     mismatch), so it never rendered. Anchor on the PROVEN :has()
     selector instead: the image wrapper is the direct parent of
     the compare button div (PROBE3 / FIXES 8).
   - Scoped to body.home so the shop standard loop (which HAS a
     .wd-buttons wrapper) is untouched; the shop keeps the
     .product-image-wrap rule from the Card batch block.
   - Auto-rotation: if the wrapper holds a 2nd image (theme hover
     image), crossfade it in on a slow timer; the animation is
     removed on hover so the theme hover gallery takes over, and
     disabled for reduced motion / touch.
   ============================================================ */
body.home main *:has(> * > a[href$="/compare/"]) {
  position: relative !important;
  overflow: hidden !important;
}
body.home main *:has(> * > a[href$="/compare/"])::after {
  content: "عرض سريع";
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, #D8B23A 0%, #C9A227 55%, #A8861B 100%) !important;
  color: #000000 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  transform: translateY(102%) !important;
  transition: transform 0.35s ease !important;
  pointer-events: none !important;
}
body.home main *:has(> * > a[href$="/compare/"]):hover::after,
body.home main .product-wrapper:hover *:has(> * > a[href$="/compare/"])::after,
body.home main .product-grid-item:hover *:has(> * > a[href$="/compare/"])::after {
  transform: translateY(0) !important;
}
@media (hover: none) {
  body.home main *:has(> * > a[href$="/compare/"])::after {
    display: none !important;
  }
}
@keyframes viga-autocycle {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
body.home main *:has(> * > a[href$="/compare/"]):has(img:nth-of-type(2)) img:nth-of-type(2) {
  animation: viga-autocycle 9s ease-in-out infinite;
}
body.home main .product-grid-item:nth-child(even) *:has(> * > a[href$="/compare/"]) img:nth-of-type(2) {
  animation-delay: -4.5s;
}
body.home main *:has(> * > a[href$="/compare/"]):hover img:nth-of-type(2),
body.home main .product-grid-item:hover *:has(> * > a[href$="/compare/"]) img:nth-of-type(2) {
  animation: none !important;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  body.home main *:has(> * > a[href$="/compare/"]) img:nth-of-type(2) {
    animation: none !important;
  }
  body.home main *:has(> * > a[href$="/compare/"])::after {
    transition: none !important;
  }
}