/* ============================================
   VOZRAX LUXURY THEME — Design Layer
   Overrides Origins theme with black/gold luxury
   ============================================ */

:root {
  --vozrax-gold: #D4AF37;
  --vozrax-gold-light: #E8C766;
  --vozrax-gold-dark: #A88A2A;
  --vozrax-black: #0A0A0C;
  --vozrax-dark: #111113;
  --vozrax-gray: #1A1A1D;
  --vozrax-gray-light: #252528;
  --vozrax-white: #FFFFFF;
  --vozrax-light: #F5F5F7;
  --vozrax-muted: #A0A0A8;

  /* Override Origins tokens */
  --color-primary: 245, 245, 247;
  --color-secondary: #0A0A0C;
  --font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --gap-lg: 24px;
}

* {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
}

body {
  background: var(--vozrax-black) !important;
  color: var(--vozrax-light) !important;
}

/* ---------- HEADER ---------- */
yc-header,
#youcan-section--header,
.header-wrapper {
  background: rgba(10, 10, 12, 0.96) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
  color: var(--vozrax-light) !important;
  padding: 18px 5% !important;
}

yc-header a,
yc-header .links a,
yc-header .heading a {
  color: var(--vozrax-light) !important;
  font-weight: 500;
  transition: color .25s ease;
}

yc-header a:hover {
  color: var(--vozrax-gold) !important;
}

yc-header .heading a,
yc-header .logo-text,
yc-header .heading {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 3px;
  color: var(--vozrax-gold) !important;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
yc-announcement-bar,
#youcan-section--announcement-bar {
  background: linear-gradient(90deg, var(--vozrax-gold-dark), var(--vozrax-gold), var(--vozrax-gold-dark)) !important;
  color: var(--vozrax-black) !important;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ---------- BUTTONS ---------- */
.yc-btn,
button.yc-btn,
.btn {
  background: var(--vozrax-gold) !important;
  color: var(--vozrax-black) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 34px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.yc-btn:hover,
.btn:hover {
  background: var(--vozrax-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, .3);
}

.yc-btn.secondary {
  background: transparent !important;
  color: var(--vozrax-gold) !important;
  border: 1.5px solid var(--vozrax-gold) !important;
}

.yc-btn.secondary:hover {
  background: var(--vozrax-gold) !important;
  color: var(--vozrax-black) !important;
}

/* ---------- SECTIONS ---------- */
yc-section,
yc-section-head h2 {
  color: var(--vozrax-light);
}

yc-section-head h2 {
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -.5px;
  color: var(--vozrax-white) !important;
  margin-bottom: 12px;
}

yc-section-head p {
  color: var(--vozrax-muted) !important;
  font-size: 17px;
  max-width: 640px;
}

/* ---------- PRODUCT CARDS ---------- */
.product-card {
  background: var(--vozrax-gray) !important;
  border: 1px solid rgba(212, 175, 55, .16) !important;
  border-radius: 18px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--vozrax-gold) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
}

.product-card .img-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--vozrax-dark);
}

.product-card .img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-card:hover .img-link img {
  transform: scale(1.06);
}

.product-card .info {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.product-card .title {
  color: var(--vozrax-white) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: auto;
}

.product-card .price .current {
  color: var(--vozrax-gold) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.product-card .price .compare-at {
  color: var(--vozrax-muted) !important;
  font-size: 14px !important;
  text-decoration: line-through;
}

.product-card .badge span {
  background: var(--vozrax-gold) !important;
  color: var(--vozrax-black) !important;
  font-weight: 700;
  border-radius: 50px;
  padding: 5px 14px;
}

/* ---------- GRID ---------- */
.items-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--items-columns, 4), minmax(0, 1fr)) !important;
  gap: 26px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---------- COLLECTION CARDS ---------- */
.collection-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, .16);
}

.collection-card .title {
  color: var(--vozrax-white) !important;
  font-weight: 800 !important;
}

/* ---------- FOOTER ---------- */
yc-footer,
#youcan-section--footer,
.footer {
  background: var(--vozrax-black) !important;
  border-top: 1px solid rgba(212, 175, 55, .18) !important;
  color: var(--vozrax-muted) !important;
  padding: 60px 5% 40px !important;
}

yc-footer a,
.footer a {
  color: var(--vozrax-light) !important;
  transition: color .25s ease;
}

yc-footer a:hover,
.footer a:hover {
  color: var(--vozrax-gold) !important;
}

/* ---------- RTL ---------- */
[dir="rtl"] .product-card .title,
[dir="rtl"] .product-card .price,
[dir="rtl"] yc-section-head {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .items-grid {
  direction: rtl;
}

/* Mixed Arabic/English product titles */
.product-card .title,
.product-description,
.single-product .title {
  unicode-bidi: plaintext;
}

/* ---------- SINGLE PRODUCT ---------- */
.single-product .title,
.single-product h1 {
  color: var(--vozrax-white) !important;
  font-weight: 900 !important;
  unicode-bidi: plaintext;
}

.single-product .price .current {
  color: var(--vozrax-gold) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}

.single-product {
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- CART / DRAWER ---------- */
yc-cart-drawer,
.cart-drawer {
  background: var(--vozrax-dark) !important;
  color: var(--vozrax-light) !important;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--vozrax-black); }
::-webkit-scrollbar-thumb {
  background: var(--vozrax-gold-dark);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vozrax-gold); }

/* ---------- MOBILE ---------- */
@media (max-width: 1024px) {
  .items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 768px) {
  .items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  yc-header,
  #youcan-section--header {
    padding: 14px 4% !important;
  }

  yc-section-head h2 {
    font-size: 26px !important;
  }

  .product-card .info {
    padding: 12px 14px 16px;
    gap: 8px;
  }

  .product-card .title {
    font-size: 13.5px !important;
    min-height: 42px;
  }

  .product-card .price .current {
    font-size: 16px !important;
  }

  .yc-btn,
  .btn {
    padding: 11px 22px !important;
    font-size: 14px !important;
  }

  yc-footer,
  #youcan-section--footer {
    padding: 40px 5% 30px !important;
  }
}

/* ---------- ANIMATIONS ---------- */
@keyframes vozrax-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

yc-section {
  animation: vozrax-fade-up .6s ease both;
}


/* ============ FIX: yc-* custom elements default to white ============ */
yc-section, yc-section-head, yc-slider, yc-slider-item, yc-slider-footer,
yc-header, yc-footer, yc-announcement-bar, yc-cart-drawer, yc-breadcrumb,
yc-pagination, yc-empty, yc-quantity-control, yc-overlay {
  background-color: transparent;
  color: inherit;
}

/* collection / listing containers */
.single-collection, .product-listing, .products-area, .filter-area,
.collections-area, .page-wrapper, main, #main {
  background-color: transparent !important;
}

/* dropdown / select popovers (were white) */
yc-select-content, .yc-select-content, [class*="select-content"],
[class*="dropdown"], [class*="popover"] {
  background: #1A1A1D !important;
  color: #F5F5F7 !important;
  border: 1px solid rgba(212, 175, 55, .2) !important;
  border-radius: 12px !important;
}
yc-select-content *, [class*="select-content"] * { color: #F5F5F7 !important; }

/* add-to-cart / quick-view inside new theme cards */
.product-card .yc-btn, .product-card button,
.product-card yc-add-to-cart, .product-card [class*="add-to-cart"] {
  background: #D4AF37 !important;
  color: #0A0A0C !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
}

/* breadcrumb + sort row */
yc-breadcrumb a, .breadcrumb a { color: #A0A0A8 !important; }
yc-breadcrumb a:hover, .breadcrumb a:hover { color: #D4AF37 !important; }
yc-sort, yc-sort * , .sort-box, .sort-box * { color: #F5F5F7 !important; }

/* empty states */
yc-empty, .empty-page { color: #A0A0A8 !important; }


/* ============ MOBILE OVERFLOW + DRAWER + SLIDER FIXES ============ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* slider: keep items inside the viewport (was 760px right edge on 390px) */
yc-slider, .slider-area, .slider-box, .slider-inner,
yc-slider-item, yc-slider-content {
  max-width: 100% !important;
  overflow: hidden !important;
}
yc-slider-item {
  min-width: 0 !important;
  width: 100% !important;
}
yc-slider-content { position: relative !important; }
yc-slider img, .slider-inner img { max-width: 100% !important; }

/* off-canvas drawers must not extend the document */
.drawer-box, .menu-drawer, .cart-drawer, yc-drawer,
[class*="drawer-box"], [class*="menu-drawer"] {
  max-width: 100vw !important;
}
body:not(:has([data-visible="true"])) .drawer-box,
body:not(:has([data-visible="true"])) .menu-drawer {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* the fixed drawer that sits off-screen right */
.drawer-box.menu-drawer, .menu-drawer {
  right: 0 !important;
  left: auto !important;
}

/* ---------- PRODUCT PAGE (single-product) ---------- */
yc-product.single-product, .single-product {
  background: #0A0A0C !important;
  color: #F5F5F7 !important;
}
.single-product .title, .single-product h1, yc-product .title {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  unicode-bidi: plaintext !important;
  direction: rtl !important;
  text-align: right !important;
}
.single-product .price, yc-product .price, .single-product [class*="price"] {
  color: #D4AF37 !important;
  font-weight: 800 !important;
}
.single-product [class*="description"], yc-product [class*="description"] {
  color: #F5F5F7 !important;
  line-height: 1.85 !important;
}
.single-product [class*="description"] * { color: #F5F5F7 !important; }
.single-product [class*="description"] h1,
.single-product [class*="description"] h2,
.single-product [class*="description"] h3 { color: #fff !important; }
.single-product [class*="accordion"], yc-accordion, [class*="accordion"] {
  background: #1A1A1D !important;
  border: 1px solid rgba(212,175,55,.16) !important;
  border-radius: 16px !important;
  color: #F5F5F7 !important;
}
/* product media / gallery */
yc-product-media, [class*="product-media"], [class*="media-gallery"] {
  background: #111113 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
yc-product-media img, [class*="product-media"] img { border-radius: 14px !important; }
/* buy button / variants */
yc-product [class*="buy"], yc-buy-button, [class*="buy-button"],
yc-product-form button, .single-product button:not(.icon) {
  background: #D4AF37 !important;
  color: #0A0A0C !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}
/* variant pills */
[class*="variant"] [class*="option"], [class*="variant-option"] {
  background: #1A1A1D !important;
  color: #F5F5F7 !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  border-radius: 50px !important;
}
[class*="variant"] [class*="option"][data-selected="true"],
[class*="variant-option"][aria-checked="true"] {
  background: #D4AF37 !important;
  color: #0A0A0C !important;
}
/* quantity control */
yc-quantity-control, [class*="quantity"] {
  background: #1A1A1D !important;
  border: 1px solid rgba(212,175,55,.2) !important;
  border-radius: 50px !important;
  color: #F5F5F7 !important;
}

/* ---------- SEARCH / CART / MODALS ---------- */
yc-modal-content, [class*="modal-content"], yc-modal {
  background: #111113 !important;
  color: #F5F5F7 !important;
  border-radius: 18px !important;
}
yc-modal-content *, [class*="modal-content"] * { color: #F5F5F7 !important; }
yc-modal-content h1, yc-modal-content h2, yc-modal-content h3,
[class*="modal-content"] h1, [class*="modal-content"] h2, [class*="modal-content"] h3 { color: #fff !important; }

yc-cart-drawer, [class*="cart-drawer"], .cart-sidebar {
  background: #111113 !important;
  color: #F5F5F7 !important;
}

/* search input */
.search-bar input, [class*="search"] input {
  background: #1A1A1D !important;
  color: #F5F5F7 !important;
  border: 1px solid rgba(212,175,55,.2) !important;
}

/* ---------- HARD MOBILE PASS ---------- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  yc-slider, .slider-area, .slider-box, .slider-inner,
  yc-slider-item, yc-slider-content { max-width: 100vw !important; overflow: hidden !important; }
  yc-section, .youcan-section, main, #main { max-width: 100vw !important; overflow-x: hidden !important; }
  img { max-width: 100% !important; height: auto; }
  .items-grid, .product-grid { max-width: 100% !important; }
  .single-product { padding: 16px 12px !important; }
}


/* ============ FIX: keyword line white + empty buttons ============ */
/* the "كلمات مفتاحية:" meta paragraph ships with a white bg */
yc-product [class*="keyword"], yc-product p:has(> strong),
.single-product [class*="keyword"], .single-product p {
  background: transparent !important;
  color: #A0A0A8 !important;
}
/* any leftover inline white */
yc-product *[style*="background"],
.single-product *[style*="background"] {
  background-color: transparent !important;
}
yc-product [style*="#fff"], yc-product [style*="#FFF"],
yc-product [style*="white"], .single-product [style*="white"] {
  background-color: transparent !important;
  color: #F5F5F7 !important;
}

/* empty buy buttons must still show gold with a visible label */
yc-product-form button, yc-buy-button button, yc-product button[data-buy-button],
yc-product button.secondary, .single-product button.secondary {
  background: #D4AF37 !important;
  color: #0A0A0C !important;
  min-height: 48px !important;
  min-width: 180px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  border: none !important;
  position: relative !important;
}
/* if the inner span is empty, render a label via ::after */


/* ============ BUY BUTTON LABEL SAFETY NET ============ */
yc-product-form button[data-buy-button] {
  background: #D4AF37 !important;
  color: #0A0A0C !important;
  min-height: 48px !important;
  min-width: 170px !important;
  padding: 14px 30px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
yc-product-form button[data-buy-button] span { color: #0A0A0C !important; font-weight: 800 !important; }
/* (removed duplicate ::after labels — the snippet now renders real text) */


/* ============ CARD SPACING + NAME CLAMP + COUNTER ============ */
/* kill the big black gap: image wrapper was aspect-ratio 1/1 but card had extra height */
.product-card, [class*="product-card"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.product-card .img-link, [class*="product-card"] .img-link {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
.product-card img, [class*="product-card"] img {
  aspect-ratio: 1 / 1 !important;
  height: 100% !important;
  object-fit: cover !important;
}
.product-card .info, [class*="product-card"] .info {
  flex: 0 0 auto !important;
  padding: 14px 16px 16px !important;
  gap: 8px !important;
  min-height: 0 !important;
}
/* allow 3 lines so names aren't cut, with tighter line-height */
.product-card .title, [class*="product-card"] .title,
.product-card a[class*="title"] {
  min-height: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-card .price, [class*="product-card"] .price {
  margin-top: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
}
.product-card button, yc-product-form button[data-buy-button] {
  margin-top: 2px !important;
  min-height: 42px !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
}

/* the [0] counter next to the collection title */
[data-count] { display: none !important; }
.single-collection h1 span[data-count],
.product-listing h1 span[data-count] { display: none !important; }
h1 .h6, h1 [data-count] { display: none !important; }

/* mobile: tighten further */
@media (max-width: 768px) {
  .product-card .info { padding: 10px 11px 12px !important; gap: 6px !important; }
  .product-card .title { font-size: 12.5px !important; line-height: 1.4 !important; -webkit-line-clamp: 3 !important; }
  .product-card .price { font-size: 15.5px !important; }
  .product-card button, yc-product-form button[data-buy-button] { font-size: 12px !important; padding: 9px 12px !important; min-height: 38px !important; }
}


/* ============ FINAL: 3-line names + button/price polish ============ */
.product-card .title, [class*="product-card"] .title,
.product-card a[class*="title"] {
  -webkit-line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 63px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #FFFFFF !important;
}
.product-card .price .current, [class*="product-card"] .price .current {
  font-size: 18px !important; font-weight: 800 !important; color: #D4AF37 !important;
}
.product-card .price .compare-at, [class*="product-card"] .price .compare-at {
  font-size: 13px !important; color: #8A8A92 !important; text-decoration: line-through !important;
}
.product-card .info { gap: 7px !important; padding: 13px 15px 15px !important; }
@media (max-width: 768px) {
  .product-card .title { font-size: 12px !important; line-height: 1.45 !important; min-height: 52px !important; -webkit-line-clamp: 3 !important; }
  .product-card .info { gap: 5px !important; padding: 9px 10px 11px !important; }
  .product-card .price .current { font-size: 15px !important; }
  .product-card .price .compare-at { font-size: 11px !important; }
}


/* ============ CRITICAL: title display must be -webkit-box for line-clamp ============ */
.product-card .title, .product-card a[class*="title"], .product-card h3,
[class*="product-card"] .title, [class*="product-card"] a[class*="title"], [class*="product-card"] h3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 66px !important;
  max-height: 66px !important;
  height: auto !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  white-space: normal !important;
  word-break: break-word !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
}
@media (max-width: 768px) {
  .product-card .title, .product-card a[class*="title"], .product-card h3,
  [class*="product-card"] .title, [class*="product-card"] h3 {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    min-height: 55px !important;
    max-height: 55px !important;
    -webkit-line-clamp: 3 !important;
  }
}


/* ============ CART ICON + MOBILE FIXES ============ */
/* Make cart icon always visible */
yc-header .header-cart, #youcan-section--header .header-cart,
.header-wrapper .header-cart, .app-header .header-cart,
yc-header [class*="cart"], #youcan-section--header [class*="cart"]{
  display:flex!important;visibility:visible!important;opacity:1!important;
  align-items:center!important;justify-content:center!important;}

/* Cart icon styling */
yc-header .header-cart a, #youcan-section--header .header-cart a,
.header-wrapper .header-cart a, .app-header .header-cart a{
  display:inline-flex!important;align-items:center;gap:6px;
  color:#F5F5F7!important;font-size:13px!important;font-weight:700;
  text-decoration:none!important;padding:8px 14px!important;
  border:1px solid rgba(212,175,55,.3)!important;border-radius:50px!important;
  background:rgba(212,175,55,.08)!important;}

/* Cart count badge */
yc-header .header-cart .count, #youcan-section--header .header-cart .count,
.header-wrapper .header-cart .count, .app-header .header-cart .count,
yc-header [class*="cart-count"], #youcan-section--header [class*="cart-count"]{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:50%;
  background:#D4AF37;color:#0A0A0C;font-size:11px;font-weight:900;
  margin-inline-start:4px;}

/* Mobile: make add-to-cart buttons visible */
@media(max-width:820px){
  yc-product-form button.primary, .buy-button button.primary,
  [class*="buy-button"] button.primary, button.primary{
    display:inline-flex!important;visibility:visible!important;opacity:1!important;
    width:100%!important;max-width:100%!important;
    padding:14px 20px!important;font-size:14px!important;
    border-radius:50px!important;
    background:linear-gradient(135deg,#E8C766,#D4AF37)!important;
    color:#0A0A0C!important;font-weight:900!important;
    border:none!important;box-shadow:0 8px 24px rgba(212,175,55,.3)!important;
    position:static!important;transform:none!important;clip-path:none!important;}
  
  /* Mobile: related products add-to-cart */
  .items-grid button.secondary, .products-grid button.secondary,
  [class*="related"] button.secondary, [class*="product-card"] button.secondary{
    display:inline-flex!important;visibility:visible!important;opacity:1!important;
    width:100%!important;padding:10px 14px!important;font-size:12px!important;
    border-radius:50px!important;
    background:linear-gradient(135deg,#E8C766,#D4AF37)!important;
    color:#0A0A0C!important;font-weight:800!important;border:none!important;}
  
  /* Mobile: product image */
  yc-product-media .main-image img, .product-media .main-image img{
    width:100%!important;height:auto!important;max-height:340px!important;
    object-fit:contain!important;}
  
  /* Mobile: product info */
  yc-product-info, .product-info{padding:16px!important;}
  
  /* Mobile: hide empty buttons */
  button.icon[data-arrow], [class*="slider-arrows"]{
    display:none!important;}
}

/* Desktop: hide secondary buttons in related (they're redundant) */
@media(min-width:821px){
  .items-grid button.secondary, .products-grid button.secondary,
  [class*="related"] button.secondary{
    display:none!important;}
}


/* ============ COLLECTION PAGE FIXES ============ */
/* Make add-to-cart buttons visible on collection page */
.items-grid button, .products-grid button,
.product-card button, [class*="product-card"] button{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;
  align-items:center!important;justify-content:center!important;
  padding:10px 16px!important;font-size:12px!important;font-weight:800!important;
  border-radius:50px!important;
  background:linear-gradient(135deg,#E8C766,#D4AF37)!important;
  color:#0A0A0C!important;border:none!important;
  cursor:pointer!important;transition:.3s!important;}

/* Hide empty buttons */
.items-grid button:empty, .products-grid button:empty,
.product-card button:empty, [class*="product-card"] button:empty{
  display:none!important;}

/* Collection page product cards */
.items-grid .product-card, .products-grid .product-card,
[class*="product-card"]{
  display:flex!important;flex-direction:column!important;
  background:#17171B!important;border:1px solid rgba(212,175,55,.16)!important;
  border-radius:16px!important;overflow:hidden!important;
  transition:.3s!important;}

.items-grid .product-card:hover, .products-grid .product-card:hover,
[class*="product-card"]:hover{
  transform:translateY(-4px)!important;border-color:#D4AF37!important;
  box-shadow:0 16px 40px rgba(0,0,0,.5)!important;}

/* Collection page images */
.items-grid .product-card img, .products-grid .product-card img,
[class*="product-card"] img{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;
  object-fit:cover!important;display:block!important;}

/* Collection page title */
.items-grid .product-card .title, .products-grid .product-card .title,
[class*="product-card"] .title,
.items-grid .product-card h3, .products-grid .product-card h3{
  color:#F5F5F7!important;font-size:13px!important;font-weight:700!important;
  line-height:1.5!important;padding:10px 12px 4px!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;overflow:hidden!important;
  min-height:54px!important;}

/* Collection page price */
.items-grid .product-card .price, .products-grid .product-card .price,
[class*="product-card"] .price{
  color:#D4AF37!important;font-size:16px!important;font-weight:900!important;
  padding:0 12px 10px!important;}

/* Mobile collection page */
@media(max-width:820px){
  .items-grid, .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .items-grid .product-card, .products-grid .product-card{
    border-radius:12px!important;}
  .items-grid .product-card .title, .products-grid .product-card .title{
    font-size:11px!important;min-height:48px!important;}
  .items-grid .product-card .price, .products-grid .product-card .price{
    font-size:14px!important;}
  .items-grid button, .products-grid button{
    padding:8px 10px!important;font-size:11px!important;}
}


/* ============ FIX 1: STUCK BLUR OVERLAY ============ */
/* The theme's .overlay / yc-overlay carries backdrop-filter: blur().
   When a drawer is opened then closed, data-hidden can stay "false" and
   the overlay remains visible -> the whole page looks blurred and needs
   a stray click to clear. Neutralise the blur and hard-hide the overlay
   unless it is genuinely active. */
.overlay,
yc-overlay,
.drawer-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(6, 6, 8, .55) !important;
}

/* Only show when the theme explicitly marks it active */
.overlay:not([data-active]),
.drawer-overlay:not([data-active]),
yc-overlay:not([data-active]) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* the drawer containers must never blur the page behind them */
.drawer-container,
.drawer-box,
yc-drawer,
yc-drawer .drawer-container {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* body must never get stuck with overflow:hidden from a stale drawer */
body:not(:has(yc-drawer[data-hidden="false"])):not(:has(.drawer-box[data-active])) {
  overflow: auto !important;
  overscroll-behavior: auto !important;
}

/* ============ FIX 2: HAMBURGER BUTTON HAD 0x0 SIZE ============ */
/* .drawer-btn.icon was collapsing because the parent yc-drawer had no
   explicit size and the icon svg had no dimensions. Give it a real box. */
yc-drawer > .drawer-btn.icon,
.drawer-btn.icon,
button.drawer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(212, 175, 55, .1) !important;
  border: 1px solid rgba(212, 175, 55, .3) !important;
  color: #D4AF37 !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 20 !important;
}
yc-drawer > .drawer-btn.icon svg,
.drawer-btn.icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  stroke: currentColor !important;
}
/* yc-drawer itself must not be a zero-size wrapper */
yc-drawer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ============ FIX 3: SEARCH INPUT INVISIBLE ============ */
/* The header search-bar renders with data-expanded="false" and the input
   stays hidden. Make the search input usable on all viewports. */
.search-bar .search-input,
.search-bar input[name="q"],
.search-bar input[type="text"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
}
.search-bar[data-expanded="false"] .search-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 820px) {
  .search-bar .search-input {
    font-size: 14px !important;
    min-height: 40px !important;
  }
}
/* make the mobile search button open the field reliably */
.search-btn.icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: rgba(212, 175, 55, .1) !important;
  border: 1px solid rgba(212, 175, 55, .3) !important;
  color: #D4AF37 !important;
  cursor: pointer !important;
}

/* ============ FIX 4: CART PAGE EMPTY (items not rendering) ============ */
/* .cart list needs to be a real block layout; yc-cart-items must render. */
.cart,
.cart .content,
.cart .list,
yc-cart-items {
  display: block !important;
  background-color: transparent !important;
  color: #F5F5F7 !important;
}
.cart .list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.cart [class*="cart-item"],
.cart .item,
yc-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px !important;
  background: #17171B !important;
  border: 1px solid rgba(212, 175, 55, .16) !important;
  border-radius: 14px !important;
}
.cart [class*="cart-item"] img,
yc-cart-item img {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
/* cart summary + checkout must be visible and styled */
.cart [class*="summary"],
.cart .footer,
.cart [class*="cart-footer"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #17171B !important;
  border: 1px solid rgba(212, 175, 55, .16) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-top: 18px !important;
}
.cart a[href*="checkout"],
.cart button[class*="checkout"],
.cart [class*="checkout"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  padding: 15px 28px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 14px !important;
}

/* ============ FIX 5: DUPLICATE ADD-TO-CART ON CARDS ============ */
/* On the classic homepage each card is <a class="vz-card"> wrapping a
   .vz-card-cta span AND the theme injects its own yc-product-form button.
   Hide the theme's injected button inside our cards; keep our single CTA. */
.vz-card yc-product-form,
.vz-card button,
.vz-card .product-add-to-cart,
.vz-card [data-buy-button] {
  display: none !important;
}
.vz-card .vz-card-cta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* collection/related grids: exactly one add-to-cart per card */
.product-card yc-product-form + yc-product-form,
.product-card .secondary + .secondary,
.product-card button + button.secondary {
  display: none !important;
}

/* ============ FIX 6: RATINGS TAKING SPACE WITH NO DATA ============ */
/* Products have 0 reviews -> the rating block reserves height and shows
   empty stars. Hide it when there is no rating. */
yc-product-info .rating[data-rating="0"],
yc-product-info .rating:has(.average:empty),
yc-product-info .rating .stars:has(svg:only-child):has(+ .average:empty) {
  display: none !important;
}
yc-product-info .rating[data-rating="0"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============ PRODUCT PAGE: kill white surfaces ============ */
/* The theme's related-products / reviews sections ship --section-bg-color
   #FFFFFFFF (white) which punched a white block into the black storefront.
   Pin every page section to the VOZRAX dark palette. */
#youcan-section--related-products,
#youcan-section--product-reviews,
#youcan-section--single-product,
#youcan-section--upsell,
#youcan-section--page,
#youcan-section--list-collections,
#youcan-section--collection,
#youcan-section--search,
#youcan-section--cart,
#youcan-section--thank-you,
#youcan-section--products,
#youcan-section--products-by-collection,
#youcan-section--single-collection {
  --section-bg-color: #0A0A0C !important;
  --section-text-color: 245, 245, 247 !important;
  --section-arrows-background: #0A0A0C !important;
  --section-arrows-foreground: #F5F5F7 !important;
  background-color: #0A0A0C !important;
  color: #F5F5F7 !important;
}
#youcan-section--related-products yc-section,
#youcan-section--product-reviews yc-section,
#youcan-section--single-product yc-section {
  background-color: #0A0A0C !important;
  color: #F5F5F7 !important;
}
/* any yc-section that still resolves to a white background */
yc-section[style*="#FFFFFF"],
yc-section[style*="#ffffff"] {
  --section-bg-color: #0A0A0C !important;
  background-color: #0A0A0C !important;
  color: #F5F5F7 !important;
}
/* headings inside those sections must be light, not #121212 */
#youcan-section--related-products h1, #youcan-section--related-products h2,
#youcan-section--related-products h3, #youcan-section--related-products p,
#youcan-section--product-reviews h1, #youcan-section--product-reviews h2,
#youcan-section--product-reviews h3, #youcan-section--product-reviews p {
  color: #F5F5F7 !important;
}
#youcan-section--related-products .h3, #youcan-section--product-reviews .h3,
#youcan-section--related-products .h5, #youcan-section--product-reviews .h5 {
  color: #F5F5F7 !important;
}
/* gold accent on the section title */
#youcan-section--related-products .h3,
#youcan-section--related-products h2 {
  color: #D4AF37 !important;
}


/* ==================================================================
   UI GEOMETRY FIXES (measured live, 2026-10-11)
   ================================================================== */

/* ---- BUG 2: product "أضف إلى السلة" rendered 170x96 and the label was
   repeated (main button + sticky bar). Normalise it. ---- */
yc-product-form .buy-button button,
yc-product-form button.primary,
yc-product-form button[data-buy-button] {
  width: 100% !important;
  min-height: 52px !important;
  max-height: 56px !important;
  height: 52px !important;
  padding: 0 22px !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg,#E8C766,#D4AF37) !important;
  color: #0A0A0C !important;
  border: 0 !important;
  cursor: pointer !important;
}
yc-product-form .buy-button button span,
yc-product-form button.primary span {
  display: inline-block !important;
  white-space: nowrap !important;
}
/* hide the duplicated sticky-bar label when the main button is on screen */
.buy-button + .buy-button,
yc-product-form + yc-product-form .buy-button { display: none !important; }

/* ---- BUG 3: +/- quantity buttons were 86x46 solid gold.
   Make them 40x40 hairline circles. ---- */
yc-quantity-control,
.quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  height: 46px !important;
  padding: 0 !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(212,175,55,.24) !important;
  border-radius: 50px !important;
}
yc-quantity-control button,
.quantity button,
yc-quantity-control .yc-btn.icon,
.quantity .yc-btn.icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(212,175,55,.34) !important;
  color: #D4AF37 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: .2s ease !important;
}
yc-quantity-control button:hover,
.quantity button:hover {
  background: rgba(212,175,55,.14) !important;
  border-color: #D4AF37 !important;
}
yc-quantity-control button svg,
.quantity button svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  display: block !important;
}
yc-quantity-control .current-quantity,
.quantity .current-quantity {
  min-width: 30px !important;
  width: auto !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #F5F5F7 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
yc-quantity-control [data-current-quantity],
.quantity [data-current-quantity] { color: #F5F5F7 !important; }

/* ---- BUG 4: the search row — the form collapsed to 0 width and the 44px
   icon button floated on top of it. Rebuild as one pill. ---- */
@media(max-width:820px){
  yc-header .actions {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  yc-header .actions > .search-bar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(212,175,55,.24) !important;
    background: rgba(255,255,255,.04) !important;
  }
  yc-header .actions > .search-bar input,
  yc-header .actions > .search-bar .search-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    color: #F5F5F7 !important;
    font-size: 13.5px !important;
  }
  /* the standalone icon button is redundant once the field is visible */
  yc-header .actions > .search-btn.icon { display: none !important; }
  yc-header .actions > yc-drawer#cart { grid-column: 1 !important; grid-row: 1 !important; }
  yc-header .actions > .search-bar > svg {
    position: absolute !important;
    pointer-events: none !important;
    opacity: .5 !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* desktop: keep the field visible and inline, no floating icon */
@media(min-width:821px){
  yc-header .actions { display: flex !important; align-items: center !important; gap: 10px !important; }
  yc-header .actions > .search-bar {
    display: flex !important; align-items: center !important;
    width: 240px !important; min-width: 180px !important; height: 44px !important;
    padding: 0 14px !important; border-radius: 50px !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    background: rgba(255,255,255,.04) !important;
  }
  yc-header .actions > .search-bar input { width: 100% !important; min-width: 0 !important;
    background: transparent !important; border: 0 !important; outline: none !important;
    color: #F5F5F7 !important; font-size: 14px !important; }
  yc-header .actions > .search-bar > svg { display: none !important; }
}

/* ---- card CTA: one clean pill, never two labels ---- */
.vz-card-cta {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  background: linear-gradient(135deg,#E8C766,#D4AF37) !important;
  color: #0A0A0C !important;
}
.vz-card .vz-card-cta + .vz-card-cta,
.vz-card-cta span + span { display: none !important; }

/* ---- related products: tidy 4-up grid, dark, capped ---- */
#youcan-section--related-products .items-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 18px !important;
}
@media(max-width:1024px){
  #youcan-section--related-products .items-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media(max-width:820px){
  #youcan-section--related-products .items-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
}


/* ==================================================================
   PRODUCT GALLERY — thumbnails measured 12x12 px (unusable)
   The theme renders each thumbnail as a tiny <img> inside .image; pin a real
   tap target and make the strip readable.
   ================================================================== */
yc-product-media .image,
yc-product-media [class*="thumb"] {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.22) !important;
  background: #121215 !important;
  cursor: pointer !important;
}
yc-product-media .image img,
yc-product-media [class*="thumb"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* the main image keeps a square aspect */
yc-product-media .main-image,
yc-product-media [class*="main-image"] {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #121215 !important;
}
yc-product-media .main-image img,
yc-product-media [class*="main-image"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* tighter gallery block so the page doesn't open with a tall empty band */
yc-product-media {
  gap: 12px !important;
  padding: 0 !important;
}
@media (max-width: 820px) {
  yc-product-media .image,
  yc-product-media [class*="thumb"] {
    width: 56px !important; height: 56px !important;
    min-width: 56px !important; min-height: 56px !important;
  }
}


/* ==================================================================
   GALLERY CORRECTION — the previous block made the main image 388px inside a
   328px container (x=-35, clipped on both sides). Constrain everything to the
   gallery's own width and lay the thumbnails out as a tidy row.
   ================================================================== */
yc-product-media {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
}
yc-product-media .main-image,
yc-product-media [class*="main-image"],
yc-product-media > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #121215 !important;
  box-sizing: border-box !important;
}
yc-product-media .main-image img,
yc-product-media [class*="main-image"] img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
}
/* thumbnail strip: a real, scrollable row of 56px tiles */
yc-product-media [class*="thumb"],
yc-product-media .images,
yc-product-media .thumbnails {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 4px 0 !important;
  margin: 10px 0 0 !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}
yc-product-media [class*="thumb"]::-webkit-scrollbar { display: none !important; }
yc-product-media .image {
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.22) !important;
  background: #121215 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
yc-product-media .image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* nothing in the gallery may push the page wider than the viewport */
yc-product-media * { max-width: 100% !important; box-sizing: border-box !important; }
yc-product-media .image, yc-product-media .image * { max-width: 56px !important; }


/* ==================================================================
   GLOBAL HEADER LAYOUT — this file loads on EVERY page (head-config.liquid),
   unlike vozrax-home.css which only loads on the homepage. Measured:
   inner pages (collection/product/cart/search/cms) had a 567px header
   because the theme stacks logo + full nav + actions vertically there.
   ================================================================== */
@media (min-width: 821px) {
  yc-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 16px !important;
    padding: 10px 0 !important;
  }
  yc-header > .logo { flex: 0 0 auto !important; width: auto !important; }
  yc-header > .logo img { max-height: 52px !important; width: auto !important; }
  yc-header > .links { flex: 1 1 auto !important; min-width: 0 !important; }
  yc-header > .actions { flex: 0 0 auto !important; margin: 0 !important; }
  yc-header .links > ul {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  yc-header .links > ul > li > a.link {
    padding: 7px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    min-height: 36px !important;
  }
  /* hard cap: a theme update must not re-inflate the header */
  #youcan-section--header, yc-header { max-height: 150px !important; }
  #youcan-section--header { overflow: hidden !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}
/* mobile: one compact row (logo + burger + cart), search on its own line */
@media (max-width: 820px) {
  #youcan-section--header, yc-header { max-height: 230px !important; }
}


/* ==================================================================
   FOOTER LEGAL + PAYMENT ROW
   The privacy/terms pages existed with no link to them from the footer.
   ================================================================== */
.vz-foot-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px 24px !important;
  padding: 20px 0 !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(212,175,55,.16) !important;
}
.vz-foot-legal-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.vz-foot-legal-links a {
  color: #C8C8D0 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.vz-foot-legal-links a:hover { color: #D4AF37 !important; }
.vz-foot-sep { color: #55555C !important; font-size: 12px !important; }
.vz-foot-pay {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.vz-foot-pay-label {
  color: #8A8A92 !important;
  font-size: 12.5px !important;
  margin-inline-end: 4px !important;
}
.vz-pay-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(212,175,55,.26) !important;
  background: rgba(212,175,55,.06) !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
@media (max-width: 820px) {
  .vz-foot-legal {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .vz-foot-legal-links { justify-content: center !important; }
  .vz-foot-pay { justify-content: center !important; }
}


/* ==================================================================
   DUPLICATE FOOTER — the theme emits the footer section twice (same as the
   header). Measured: two visible 1033px footers, so every link and payment
   chip appeared twice. Collapse the sibling duplicate in CSS as a first line
   of defence; the inline JS does the same for robustness.
   ================================================================== */
/* only hide an explicit dupe marker or a sibling footer, and never hide the
   first one. The previous rule used `footer + footer` which the theme's
   markup (a wrapper div between them) did not match, so BOTH stayed visible;
   the [data-vz-dupe] rule then hid both once the JS tagged them. */
[data-vz-dupe="1"] { display: none !important; }
#youcan-section--footer ~ #youcan-section--footer { display: none !important; }
/* guarantee at least the first footer is always shown */
#youcan-section--footer:first-of-type,
footer:first-of-type { display: block !important; }


/* ==================================================================
   FOOTER PAYMENT CHIPS — the third chip wrapped to its own line on mobile
   (vision review: "cash on delivery wraps, row looks unbalanced").
   Shorten the label, tighten padding, and keep all three on one row.
   ================================================================== */
@media (max-width: 820px) {
  .vz-foot-pay {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .vz-foot-pay-label {
    display: none !important;   /* the chips are self-explanatory */
  }
  .vz-pay-chip {
    padding: 5px 9px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }
}
/* the longest chip gets a shorter label on the narrowest screens */
@media (max-width: 380px) {
  .vz-pay-chip {
    padding: 4px 7px !important;
    font-size: 10.5px !important;
  }
}


/* ==================================================================
   USER-REPORTED FIXES — 5 issues from live testing
   ================================================================== */

/* ---- 1. DUPLICATE "أضف إلى السلة" TEXT ----
   The theme renders the label twice: once as the span's text node and
   again via span[data-add-to-cart]::before { content: "أضف إلى السلة" }.
   Hide the pseudo-element; the real text node is enough. */
yc-product-form span[data-add-to-cart]::before,
.product-card span[data-add-to-cart]::before {
  content: none !important;
  display: none !important;
}

/* ---- 2. HERO TOO TALL ON MOBILE ----
   Measured 1111px on an 844px viewport — the hero alone is taller than
   the screen. Cap it and let the inner content scale down. */
@media (max-width: 820px) {
  .vz-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 0 34px !important;
  }
  .vz-hero-visual {
    max-width: 240px !important;
    margin: 0 auto 18px !important;
  }
  .vz-hero-visual .vz-hv-frame {
    aspect-ratio: 1 / 1 !important;
  }
  .vz-hero-inner {
    padding: 0 18px !important;
    text-align: center !important;
  }
  .vz-hero-inner h1 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.35 !important;
  }
  .vz-hero-inner p {
    font-size: 14.5px !important;
    line-height: 1.8 !important;
  }
}

/* ---- 3. HEADER SECTION SCROLL CONTAINER ----
   #youcan-section--header has overflow:hidden auto, which makes the
   header a scroll container — the logo, menu button and search appear to
   live on their own scrollable page. Remove the overflow. */
#youcan-section--header {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}
yc-header {
  overflow: visible !important;
  overflow-y: visible !important;
}

/* ---- 4. "عرض المزيد" (SHOW MORE) NOT EXPANDING ----
   The reviews section is overflow:hidden auto with clientHeight:144 but
   scrollHeight:986 — the button click does not expand it. Force the
   section to grow to fit its content when the button is present. */
.yc-section:has(button[data-show-more]),
yc-section:has(button[data-show-more]) {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
button[data-show-more] {
  display: none !important;   /* no longer needed once the section is open */
}

/* ---- 5. RATING BOX OVERFLOW ----
   The stars are 35px SVGs inside a 41px box — 2px of overflow that
   creates a phantom scrollbar. Shrink the stars to fit. */
.rating-box .stars label svg,
.rating-box .star svg {
  width: 28px !important;
  height: 28px !important;
}
.rating-box {
  overflow: visible !important;
  height: auto !important;
  min-height: 36px !important;
}


/* ==================================================================
   HERO CHILDREN — the theme sets fixed heights on .vz-hero-visual and
   .vz-hero-inner that override the parent's height:auto. Force them
   to shrink on mobile.
   ================================================================== */
@media (max-width: 820px) {
  .vz-hero-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 240px !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
  }
  .vz-hero-visual .vz-hv-frame {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  .vz-hero-inner {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    text-align: center !important;
  }
  .vz-hero-inner h1 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.35 !important;
  }
  .vz-hero-inner p {
    font-size: 14.5px !important;
    line-height: 1.8 !important;
  }
  .vz-hero-bg {
    padding: 0 !important;
  }
}

/* ---- show-more button: force hide ---- */
button[data-show-more],
.reviews-actions button[data-show-more] {
  display: none !important;
  visibility: hidden !important;
}

/* ---- reviews section: force expand ---- */
.yc-section:has(button[data-show-more]),
yc-section:has(button[data-show-more]),
section:has(button[data-show-more]) {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}


/* ==================================================================
   CHECKOUT PAGE FIXES — user reported: "الفونت اسود والبلوك رصاصي"
   The placeholder text is dark gray on dark charcoal = invisible.
   ================================================================== */

/* Fix input contrast */
input, select, textarea {
  color: #F5F5F7 !important;
  background-color: #1A1A1D !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
}

/* Fix placeholder visibility */
input::placeholder, textarea::placeholder {
  color: #A8A8B0 !important;
  opacity: 1 !important;
}

/* Fix select dropdown */
select {
  color: #F5F5F7 !important;
  background-color: #1A1A1D !important;
  appearance: auto !important;
}

/* Fix checkout labels */
label, .label, [class*="label"] {
  color: #F5F5F7 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Fix breadcrumb */
.breadcrumb, [class*="breadcrumb"], nav[aria-label*="breadcrumb"] {
  color: #A8A8B0 !important;
  font-size: 13px !important;
}
.breadcrumb a, [class*="breadcrumb"] a {
  color: #D4AF37 !important;
}

/* Fix checkout sections */
.checkout-section, .section, [class*="checkout"] {
  background-color: #0A0A0C !important;
  border: 1px solid rgba(212, 175, 55, 0.15) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* Fix checkout headings */
h1, h2, h3, h4, h5, h6 {
  color: #F5F5F7 !important;
}

/* Fix checkout buttons */
button, .yc-btn, [class*="btn"] {
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
}

/* Fix order summary */
.order-summary, [class*="summary"] {
  background-color: #111114 !important;
  border: 1px solid rgba(212, 175, 55, 0.15) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

/* Fix order summary text */
.order-summary span, .order-summary div, [class*="summary"] span, [class*="summary"] div {
  color: #C8C8D0 !important;
}

/* Fix order summary total */
.order-summary .total, [class*="summary"] .total, [class*="total"] {
  color: #D4AF37 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* ==================================================================
   PRODUCT CARD FIXES — user reported: "المقاسات مش مظبوطة والكلام متاكل"
   ================================================================== */

/* Fix product card title overflow */
.product-card .title, .product-card .link.title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: 40px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #F5F5F7 !important;
}

/* Fix product card price */
.product-card .price {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.product-card .price .current {
  color: #D4AF37 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.product-card .price .compare-at {
  color: #8A8A92 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
}

/* Fix add to cart button on cards */
.product-card button[data-buy-button], .product-card .add-to-cart {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  border: none !important;
  margin-top: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix variant/size selector */
.product-card select, .product-card .variant-selector, .product-card [class*="variant"] {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  background-color: #1A1A1D !important;
  color: #F5F5F7 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  margin-bottom: 10px !important;
}

/* Fix product card container */
.product-card {
  background-color: #111114 !important;
  border: 1px solid rgba(212, 175, 55, 0.12) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Fix product card image */
.product-card .img-link, .product-card img {
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* ==================================================================
   GENERAL UX IMPROVEMENTS
   ================================================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth !important;
}

/* Better focus styles */
*:focus {
  outline: 2px solid #D4AF37 !important;
  outline-offset: 2px !important;
}

/* Better button hover states */
button:hover, .yc-btn:hover, a:hover {
  transform: translateY(-1px) !important;
  transition: transform 0.2s ease !important;
}

/* Better card hover states */
.product-card:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

/* Fix body text color */
body {
  color: #C8C8D0 !important;
  line-height: 1.7 !important;
}

/* Fix links */
a {
  color: #D4AF37 !important;
  text-decoration: none !important;
}

/* Fix headings */
h1, h2, h3, h4, h5, h6 {
  color: #F5F5F7 !important;
  line-height: 1.4 !important;
}

/* Fix paragraphs */
p {
  color: #C8C8D0 !important;
  line-height: 1.8 !important;
}

/* Fix lists */
li {
  color: #C8C8D0 !important;
  line-height: 1.8 !important;
}

/* Fix spans */
span {
  color: inherit !important;
}

/* Fix divs */
div {
  color: inherit !important;
}


/* ==================================================================
   PLACEHOLDER FIX - higher specificity to override theme CSS
   ================================================================== */
html body input::placeholder,
html body textarea::placeholder,
html body input::-webkit-input-placeholder,
html body textarea::-webkit-input-placeholder,
html body input::-moz-placeholder,
html body textarea::-moz-placeholder {
  color: #A8A8B0 !important;
  opacity: 1 !important;
}

html body input,
html body select,
html body textarea {
  color: #F5F5F7 !important;
  background-color: #1A1A1D !important;
}


/* ==================================================================
   PLACEHOLDER FIX - aggressive override
   ================================================================== */
html body input::placeholder,
html body textarea::placeholder,
html body input::-webkit-input-placeholder,
html body textarea::-webkit-input-placeholder,
html body input::-moz-placeholder,
html body textarea::-moz-placeholder,
html body input:-ms-input-placeholder,
html body textarea:-ms-input-placeholder {
  color: #A8A8B0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #A8A8B0 !important;
}

html body input,
html body select,
html body textarea {
  color: #F5F5F7 !important;
  background-color: #1A1A1D !important;
  -webkit-text-fill-color: #F5F5F7 !important;
}


/* ==================================================================
   FINAL UX FIXES — 2026-10-12
   ================================================================== */

/* 1. Hide duplicate header navigation links */
#youcan-section--header + #youcan-section--header .links,
#youcan-section--header ~ #youcan-section--header .links {
  display: none !important;
}

/* 2. Fix search bar position on mobile */
@media (max-width: 820px) {
  yc-header .search-bar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    display: block !important;
  }
  yc-header .search-bar input {
    width: 100% !important;
    color: #F5F5F7 !important;
    background-color: #1A1A1D !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  yc-header .search-bar input::placeholder {
    color: #A8A8B0 !important;
    opacity: 1 !important;
  }
  yc-header .search-bar button {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #D4AF37 !important;
  }
}

/* 3. Fix product card title */
.vz-card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: 36px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #F5F5F7 !important;
}

/* 4. Fix ATA button on cards */
.vz-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  text-align: center !important;
  margin-top: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 5. Fix product card layout */
.vz-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.vz-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 10px !important;
}

.vz-card-price {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* 6. Fix header layout on mobile */
@media (max-width: 820px) {
  yc-header .logo {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
  yc-header .logo img {
    max-height: 36px !important;
  }
  yc-header .actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
  }
}

/* 7. Fix footer on mobile */
@media (max-width: 820px) {
  footer {
    padding: 20px 16px !important;
  }
  footer .links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  footer .links a {
    font-size: 12px !important;
    padding: 6px 8px !important;
    text-align: center !important;
  }
}

/* 8. Fix section spacing */
.vz-sec {
  padding: 40px 16px !important;
}

/* 9. Fix category grid */
.vz-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* 10. Fix category card */
.vz-cat-card {
  padding: 16px 12px !important;
  border-radius: 12px !important;
  text-align: center !important;
}

.vz-cat-card h3 {
  font-size: 14px !important;
  margin: 0 0 4px !important;
}

.vz-cat-card p {
  font-size: 12px !important;
  margin: 0 !important;
}


/* ==================================================================
   SEARCH BAR FIX — inside hidden drawer, needs to be hidden too
   ================================================================== */
yc-drawer#menu[data-hidden="true"] .search-bar,
yc-drawer#menu[data-hidden="true"] .search-bar * {
  display: none !important;
  visibility: hidden !important;
}

/* Also hide the search bar when menu is closed */
yc-drawer#menu:not([data-hidden="false"]) .search-bar {
  display: none !important;
}

/* ==================================================================
   PRODUCT CARD TITLE FIX — higher specificity
   ================================================================== */
.vz-card .vz-card-title,
a.vz-card .vz-card-title,
.vz-card-body .vz-card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: 36px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #F5F5F7 !important;
}

/* ==================================================================
   PRODUCT CARD ATA BUTTON FIX — higher specificity
   ================================================================== */
.vz-card .vz-card-cta,
a.vz-card .vz-card-cta,
.vz-card-body .vz-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  text-align: center !important;
  margin-top: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==================================================================
   SEARCH BAR FIX — hide search bar inside closed menu drawer
   ================================================================== */
yc-drawer#menu .search-bar {
  display: none !important;
}

/* Only show search bar when menu is open */
yc-drawer#menu[data-hidden="false"] .search-bar {
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
}

/* ==================================================================
   PRODUCT CARD TITLE FIX — force 2 lines max
   ================================================================== */
.vz-card .vz-card-title,
a.vz-card .vz-card-title,
.vz-card-body .vz-card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: #F5F5F7 !important;
}

/* ==================================================================
   PRODUCT CARD ATA BUTTON FIX — force visible
   ================================================================== */
.vz-card .vz-card-cta,
a.vz-card .vz-card-cta,
.vz-card-body .vz-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  text-align: center !important;
  margin-top: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==================================================================
   SEARCH BAR FIX — hide ALL search bars inside closed drawers
   ================================================================== */
yc-drawer[data-hidden="true"] .search-bar,
yc-drawer[data-hidden="true"] .search-bar,
.drawer-box .search-bar,
.menu-drawer .search-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Also hide via parent */
yc-drawer#menu[data-hidden="true"] * {
  visibility: hidden !important;
}

yc-drawer#menu[data-hidden="true"] .drawer-btn,
yc-drawer#menu[data-hidden="true"] .drawer-btn * {
  visibility: visible !important;
}


/* ==================================================================
   SEARCH BAR FIX — hide search bar inside closed drawer
   The search bar is inside yc-drawer#menu which has data-hidden="true"
   but the drawer's CSS doesn't properly hide its children.
   ================================================================== */
/* Search bar is inside menu drawer - hide the drawer content when closed,
   but keep the menu button visible */
yc-drawer#menu[data-hidden="true"] .drawer-box,
yc-drawer#menu[data-hidden="true"] .drawer-container {
  display: none !important;
  visibility: hidden !important;
}

yc-drawer#menu[data-hidden="false"] .drawer-box,
yc-drawer#menu[data-hidden="false"] .drawer-container {
  display: block !important;
  visibility: visible !important;
}

/* Also hide via parent */
yc-drawer#menu[data-hidden="true"] .drawer-box,
yc-drawer#menu[data-hidden="true"] .drawer-container {
  display: none !important;
  visibility: hidden !important;
}

/* Show when menu opens */
yc-drawer#menu[data-hidden="false"] .search-bar,
yc-drawer#menu[data-hidden="false"] .search-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

yc-drawer#menu[data-hidden="false"] .drawer-box,
yc-drawer#menu[data-hidden="false"] .drawer-container {
  display: block !important;
  visibility: visible !important;
}


/* ==================================================================
   SEARCH BAR — show in header on mobile (not hidden in drawer)
   ================================================================== */
@media (max-width: 820px) {
  yc-header .search-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 16px !important;
  }
  yc-header .search-bar input {
    width: 100% !important;
    color: #F5F5F7 !important;
    background-color: #1A1A1D !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  yc-header .search-bar input::placeholder {
    color: #A8A8B0 !important;
    opacity: 1 !important;
  }
  yc-header .search-bar button {
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #D4AF37 !important;
  }
}

/* ==================================================================
   HERO — make it a real hero with headline + CTA
   ================================================================== */
.vz-hero {
  position: relative !important;
  padding: 40px 16px 48px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.vz-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.vz-hero-inner h1 {
  font-size: clamp(28px, 7vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #F5F5F7 !important;
  margin: 0 0 16px !important;
  white-space: nowrap !important;
  width: 100% !important;
  display: block !important;
}

.vz-hero-inner .vz-lead {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #C8C8D0 !important;
  margin: 0 0 24px !important;
}

.vz-hero-cta {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.vz-hero-cta .vz-btn {
  flex: 1 !important;
  max-width: 200px !important;
  white-space: nowrap !important;
}

.vz-hero-cta .vz-btn {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.vz-hero-cta .vz-btn-gold {
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  border: none !important;
}

.vz-hero-cta .vz-btn-ghost {
  background: transparent !important;
  color: #D4AF37 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

.vz-hero-stats {
  display: flex !important;
  gap: 24px !important;
  justify-content: center !important;
  margin-top: 32px !important;
  flex-wrap: wrap !important;
}

.vz-hero-stats .vz-stat {
  font-size: 14px !important;
  color: #A8A8B0 !important;
}

.vz-hero-stats .vz-stat b {
  color: #D4AF37 !important;
  font-size: 18px !important;
  display: block !important;
}

/* ==================================================================
   PRODUCT CARDS — add rating stars
   ================================================================== */
.vz-card .vz-card-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 6px !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
}

.vz-card .vz-card-rating .stars {
  color: #D4AF37 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.vz-card .vz-card-rating .count {
  color: #8A8A92 !important;
  font-size: 11px !important;
}

/* ==================================================================
   PRODUCT GRID — show more products
   ================================================================== */
.vz-product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .vz-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .vz-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ==================================================================
   HERO — proper hero with headline + CTA (Amazon/Noon style)
   ================================================================== */
.vz-hero {
  position: relative !important;
  padding: 32px 16px 40px !important;
  text-align: center !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 600px !important;
}

.vz-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.vz-hero-visual {
  position: relative !important;
  z-index: 1 !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 auto 24px !important;
  flex-shrink: 0 !important;
}

.vz-hero-visual .vz-hv-frame {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
}

.vz-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
}

.vz-hero-inner .vz-eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #D4AF37 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 50px !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

.vz-hero-inner h1 {
  font-size: clamp(24px, 6vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: #F5F5F7 !important;
  margin: 0 0 12px !important;
  white-space: normal !important;
  width: 100% !important;
  display: block !important;
}

.vz-hero-inner .vz-lead {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #C8C8D0 !important;
  margin: 0 0 20px !important;
  max-width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.vz-hero-cta {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}

.vz-hero-cta .vz-btn {
  display: block !important;
  flex: 1 !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.vz-hero-cta .vz-btn-gold {
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  border: none !important;
}

.vz-hero-cta .vz-btn-ghost {
  background: transparent !important;
  color: #D4AF37 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

.vz-hero-stats {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}

.vz-hero-stats .vz-stat {
  font-size: 13px !important;
  color: #A8A8B0 !important;
  text-align: center !important;
}

.vz-hero-stats .vz-stat b {
  color: #D4AF37 !important;
  font-size: 16px !important;
  display: block !important;
  margin-bottom: 2px !important;
}

/* ==================================================================
   PRODUCT GRID — show products properly
   ================================================================== */
.vz-product-grid,
.product-grid,
.items-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .vz-product-grid,
  .product-grid,
  .items-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .vz-product-grid,
  .product-grid,
  .items-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==================================================================
   PRODUCT CARD — proper card with all info
   ================================================================== */
.vz-card {
  display: flex !important;
  flex-direction: column !important;
  background: #111114 !important;
  border: 1px solid rgba(212, 175, 55, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.vz-card:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.vz-card-media {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.vz-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.vz-card-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.vz-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 12px !important;
}

.vz-card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #F5F5F7 !important;
  margin-bottom: 8px !important;
}

.vz-card-price {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.vz-card-price .vz-now {
  color: #D4AF37 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.vz-card-price .vz-was {
  color: #8A8A92 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
}

.vz-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #E8C766, #D4AF37) !important;
  color: #0A0A0C !important;
  text-align: center !important;
  margin-top: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* ==================================================================
   SECTION HEADINGS — proper section titles
   ================================================================== */
.vz-sec {
  padding: 40px 16px !important;
}

.vz-sec-alt {
  background: #0D0D10 !important;
}

.vz-sec-head {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.vz-sec-head h2 {
  font-size: clamp(20px, 5vw, 28px) !important;
  font-weight: 900 !important;
  color: #F5F5F7 !important;
  margin: 0 0 8px !important;
}

.vz-sec-head p {
  font-size: 14px !important;
  color: #A8A8B0 !important;
  margin: 0 !important;
}

/* ==================================================================
   CATEGORY GRID — proper category tiles
   ================================================================== */
.vz-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .vz-cats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.vz-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 12px !important;
  border-radius: 16px !important;
  background: #111114 !important;
  border: 1px solid rgba(212, 175, 55, 0.12) !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.vz-cat-card:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
  transform: translateY(-2px) !important;
}

.vz-cat-card h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #F5F5F7 !important;
  margin: 0 0 4px !important;
}

.vz-cat-card p {
  font-size: 12px !important;
  color: #A8A8B0 !important;
  margin: 0 !important;
}

/* ==================================================================
   TRUST BADGES — proper trust signals
   ================================================================== */
.vz-trust {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .vz-trust {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.vz-trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 12px !important;
  border-radius: 12px !important;
  background: #111114 !important;
  border: 1px solid rgba(212, 175, 55, 0.12) !important;
  text-align: center !important;
}

.vz-trust-item .vz-trust-icon {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.vz-trust-item h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #F5F5F7 !important;
  margin: 0 0 4px !important;
}

.vz-trust-item p {
  font-size: 11px !important;
  color: #A8A8B0 !important;
  margin: 0 !important;
}

/* ==================================================================
   FOOTER — proper footer
   ================================================================== */
footer {
  background: #0A0A0C !important;
  padding: 32px 16px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
}

footer .footer-links {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

footer .footer-links a {
  font-size: 13px !important;
  color: #C8C8D0 !important;
  text-decoration: none !important;
  padding: 8px !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

footer .footer-links a:hover {
  color: #D4AF37 !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

footer .vz-foot-pay {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

footer .vz-pay-chip {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(212, 175, 55, 0.26) !important;
  background: rgba(212, 175, 55, 0.06) !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}