:root {
  --bg:    #050507;
  --coal:  #0a0a0e;
  --panel: #0e0e14;
  --p2:    #13131c;
  --snow:  #F2F1F6;
  --mist:  rgba(242,241,246,.62);
  --dim:   rgba(242,241,246,.34);
  --ac:    #00C2D4;
  --as:    rgba(0,194,212,.12);
  --gold:  #FFD166;
  --gs:    rgba(255,209,102,.12);
  --l1:    rgba(242,241,246,.07);
  --l2:    rgba(242,241,246,.14);
  --r:     16px;
  --rsm:   10px;
  --ease:  cubic-bezier(.22,1,.36,1);
  --tr:    all .28s cubic-bezier(.22,1,.36,1);
  --color-primary:         #00C2D4 !important;
  --color-primary-dark:    #009bae !important;
  --color-primary-light:   #33cfe0 !important;
  --color-primary-reverse: #050507 !important;
}

html[data-theme="titanium"] {
  --bg:    #F2F2F7;
  --coal:  #E5E5EA;
  --panel: #FFFFFF;
  --p2:    #F7F7FA;
  --snow:  #111118;
  --mist:  rgba(17,17,24,.68);
  --dim:   rgba(17,17,24,.42);
  --ac:    #0099B0;
  --as:    rgba(0,153,176,.13);
  --gold:  #9B7000;
  --gs:    rgba(155,112,0,.13);
  --l1:    rgba(0,0,0,.07);
  --l2:    rgba(0,0,0,.13);
  --color-primary:         #0099B0 !important;
  --color-primary-dark:    #007A8E !important;
  --color-primary-light:   #33ADBF !important;
  --color-primary-reverse: #F2F2F7 !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--snow) !important;
  font-family: 'Almarai','Tajawal',system-ui,sans-serif !important;
  line-height: 1.75 !important;
  overflow-x: hidden !important;
  transition: background .5s var(--ease), color .5s var(--ease);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.s-block--banners img,
.s-block--banners { visibility: hidden; }

.container { max-width: 1280px !important; padding-inline: 1.25rem !important; }

header, #header, .store-header, [data-testid="store-header"] {
  background: rgba(5,5,7,.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--l1) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  transition: background .4s var(--ease) !important;
}

html[data-theme="titanium"] header,
html[data-theme="titanium"] #header,
html[data-theme="titanium"] .store-header {
  background: rgba(242,242,247,.92) !important;
}

header::before, #header::before, .store-header::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ac) 50%, var(--gold));
}

header img, .logo img, #logo img {
  height: 44px !important;
  object-fit: contain !important;
}

nav a, .header a, .link--primary {
  color: var(--mist) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--tr) !important;
  position: relative !important;
}

nav a:hover, .link--primary:hover { color: var(--snow) !important; }

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; right: 0;
  width: 0; height: 1px;
  background: var(--ac);
  transition: width .35s var(--ease);
}
nav a:hover::after { width: 100%; }

.cart-button, .wishlist-button, .user-button,
[class*="header__icon"], [class*="header-icon"] {
  width: 42px !important; height: 42px !important;
  border: 1px solid var(--l1) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--mist) !important;
  display: grid !important;
  place-items: center !important;
  transition: var(--tr) !important;
}

.cart-button:hover, .wishlist-button:hover, .user-button:hover {
  color: var(--ac) !important;
  border-color: var(--as) !important;
  transform: translateY(-2px) !important;
}

.cart-count, [class*="cart-badge"], [class*="cart__count"] {
  background: var(--gold) !important;
  color: var(--bg) !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
}

.s-product-card, salla-product-card, custom-salla-product-card,
.product-card, .s-product-card-entry {
  background: var(--panel) !important;
  border: 1px solid var(--l2) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s !important;
  overflow: hidden !important;
}

/* reset inner elements — no individual borders */
.s-product-card-image,
.s-product-card-content,
.s-product-card-content-main,
.s-product-card-content-sub,
.s-product-card-content-footer {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.s-product-card:hover, salla-product-card:hover,
.product-card:hover, [class*="product-card"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,.5) !important;
  border-color: var(--ac) !important;
}

.s-product-card img, [class*="product-card"] img {
  transition: transform .6s var(--ease) !important;
}

.s-product-card:hover img, [class*="product-card"]:hover img {
  transform: translateY(-8px) scale(1.04) !important;
}

.s-product-card [class*="image"],
[class*="product-card"] [class*="image"],
[class*="product-card"] .product-image {
  background: radial-gradient(58% 55% at 50% 46%, var(--as), transparent 74%) !important;
}

.s-product-card [class*="price"],
[class*="product-card"] [class*="price"],
.s-product-card-price, .s-product-card-sale-price h4,
[class*="product-price"], [class*="sale-price"],
[class*="current-price"], .price, .s-price {
  color: var(--gold) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

.s-product-card [class*="name"], .s-product-card [class*="title"],
[class*="product-card"] [class*="name"], [class*="product-card"] [class*="title"] {
  color: var(--snow) !important;
  font-weight: 800 !important;
}

.s-product-card [class*="add"],
[class*="product-card"] [class*="add-to-cart"],
[class*="product-card"] .btn {
  border: 1px solid var(--l2) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--snow) !important;
  font-weight: 800 !important;
  transition: var(--tr) !important;
}

.s-product-card [class*="add"]:hover,
[class*="product-card"] [class*="add-to-cart"]:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important;
  color: var(--bg) !important;
}

.promotion-title, [class*="badge"], [class*="label--"] {
  background: rgba(14,14,20,.88) !important;
  border: 1px solid var(--as) !important;
  color: var(--ac) !important;
  font-weight: 800 !important;
  font-size: .75rem !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px) !important;
}

[class*="sale"], [class*="discount"] {
  background: var(--gs) !important;
  border: 1px solid rgba(255,209,102,.3) !important;
  color: var(--gold) !important;
}

[class*="section-title"], [class*="block-title"],
[class*="section__title"], .s-block__title h2 {
  font-weight: 800 !important;
  color: var(--snow) !important;
  position: relative !important;
  padding-bottom: .5rem !important;
}

[class*="section-title"]::after, [class*="block-title"]::after,
.s-block__title h2::after {
  content: '';
  display: block;
  width: 36px; height: 2px;
  background: linear-gradient(to left, var(--gold), var(--ac));
  border-radius: 2px;
  margin-top: 8px;
}

[class*="view-all"], .sec-link, [class*="section__link"] {
  color: var(--ac) !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  border-bottom: 1px solid transparent !important;
  transition: var(--tr) !important;
}

[class*="view-all"]:hover, .sec-link:hover {
  border-color: var(--ac) !important;
}

[class*="category-card"], [class*="cat-card"], [class*="category-tile"] {
  background: var(--panel) !important;
  border: 1px solid var(--l1) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
  position: relative !important;
}

[class*="category-card"]:hover, [class*="cat-card"]:hover {
  transform: translateY(-5px) !important;
  border-color: var(--l2) !important;
}

[class*="category-card"]::after, [class*="cat-card"]::after {
  content: '';
  position: absolute; bottom: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  opacity: 0;
  transition: opacity .35s;
}

[class*="category-card"]:hover::after { opacity: 1; }

h1.text-xl, h1.text-2xl, h1.md\:text-2xl {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: var(--snow) !important;
  line-height: 1.45 !important;
}

.text-red-800, p.text-red-800, [class*="product-price"] {
  color: var(--gold) !important;
  font-weight: 800 !important;
}

[class*="regular-price"], [class*="old-price"], del, s {
  color: var(--dim) !important;
  font-size: .9em !important;
}

.product__description, [class*="product__description"] {
  background: var(--p2) !important;
  border: 1px solid var(--l1) !important;
  border-radius: var(--rsm) !important;
  padding: 1.25rem 1.5rem !important;
  font-size: .95rem !important;
  line-height: 2 !important;
  color: var(--mist) !important;
  border-right: 2px solid var(--ac) !important;
  border-left: none !important;
}

.details-slider, [class*="product-slider"], [class*="product__gallery"] {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  border: 1px solid var(--l1) !important;
  background: var(--panel) !important;
}

.btn--wishlist, [class*="wishlist-btn"], [class*="favorite-btn"] {
  border-radius: 11px !important;
  width: 38px !important; height: 38px !important;
  background: rgba(13,13,18,.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--l1) !important;
  color: var(--mist) !important;
  transition: var(--tr) !important;
}

.btn--wishlist:hover { color: var(--ac) !important; border-color: var(--as) !important; }

[class*="product-option"], [class*="option-item"] {
  border: 1px solid var(--l1) !important;
  border-radius: var(--rsm) !important;
  background: rgba(242,241,246,.03) !important;
  color: var(--mist) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  transition: var(--tr) !important;
}

[class*="product-option"]:hover, [class*="option-item"]:hover {
  border-color: var(--as) !important;
  color: var(--snow) !important;
}

[class*="product-option"].active, [class*="option-item"].selected {
  background: var(--as) !important;
  border-color: var(--ac) !important;
  color: var(--ac) !important;
}

.btn, button[class*="btn"], [class*="button--primary"] {
  border-radius: 9999px !important;
  font-weight: 800 !important;
  transition: var(--tr) !important;
}

.btn-primary, [class*="btn--primary"], salla-add-product-button {
  background: var(--snow) !important;
  color: var(--bg) !important;
  border: none !important;
}

.btn-primary:hover, [class*="btn--primary"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.2) !important;
}

.btn-secondary, [class*="btn--secondary"] {
  background: transparent !important;
  color: var(--snow) !important;
  border: 1px solid var(--l2) !important;
}

.btn-secondary:hover { border-color: var(--ac) !important; color: var(--ac) !important; }

[class*="shipping-bar"], .progress-bg-wrap {
  background: rgba(242,241,246,.06) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}

.progress-bg, [class*="shipping-bar__progress"], [class*="progress-fill"] {
  background: linear-gradient(to left, var(--ac), var(--gold)) !important;
  border-radius: 9999px !important;
}

.breadcrumbs a, salla-breadcrumb a {
  color: var(--dim) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  transition: var(--tr) !important;
}

.breadcrumbs a:hover, salla-breadcrumb a:hover { color: var(--ac) !important; }
.breadcrumbs span, salla-breadcrumb span { color: var(--mist) !important; }

input, textarea, select, [class*="form-input"] {
  background: rgba(242,241,246,.04) !important;
  border: 1px solid var(--l2) !important;
  border-radius: var(--rsm) !important;
  color: var(--snow) !important;
  transition: var(--tr) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--as) !important;
}

input::placeholder, textarea::placeholder { color: var(--dim) !important; }
label, [class*="form-label"] { color: var(--mist) !important; font-weight: 700 !important; font-size: .88rem !important; }

#cart-gifting, [id*="cart"] .bg-white,
[class*="cart-item"], [class*="cart__item"] {
  background: var(--panel) !important;
  border: 1px solid var(--l1) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

[class*="cart-total"], [class*="cart__total"], [class*="order-summary"] {
  background: var(--p2) !important;
  border: 1px solid var(--l2) !important;
  border-radius: var(--r) !important;
}

[class*="announcement"], [class*="alert-bar"], [class*="notice-bar"] {
  background: linear-gradient(90deg, var(--coal), var(--as), var(--coal)) !important;
  color: var(--snow) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--l1) !important;
  padding: .55rem 1rem !important;
  font-size: .85rem !important;
  text-align: center !important;
}

.product-sku, [class*="product-sku"] { color: var(--ac) !important; font-weight: 700 !important; font-size: .88rem !important; }
.out-of-stock, [class*="out-of-stock"] { background: rgba(239,68,68,.08) !important; border: 1px solid rgba(239,68,68,.25) !important; border-radius: var(--rsm) !important; color: #ff6b6b !important; font-weight: 700 !important; }
[class*="in-stock"] { color: var(--ac) !important; font-weight: 700 !important; }

salla-comments { margin-top: 2rem !important; display: block !important; }
salla-rating-stars { display: block !important; margin-bottom: .85rem !important; }

[class*="review-card"], [class*="comment-card"] {
  background: var(--panel) !important;
  border: 1px solid var(--l1) !important;
  border-radius: var(--r) !important;
  transition: var(--tr) !important;
}

[class*="review-card"]:hover, [class*="comment-card"]:hover {
  transform: translateY(-4px) !important;
  border-color: var(--l2) !important;
}

[class*="star"], [class*="rating"] svg { color: var(--gold) !important; fill: var(--gold) !important; }

footer, #footer, [class*="footer"] {
  background: var(--coal) !important;
  color: var(--mist) !important;
  border-top: 1px solid var(--l1) !important;
}

footer a, #footer a, [class*="footer"] a {
  color: var(--mist) !important;
  font-size: .88rem !important;
  transition: var(--tr) !important;
}

footer a:hover, #footer a:hover { color: var(--ac) !important; transform: translateX(-4px) !important; }
footer h3, footer h4, #footer h3, #footer h4 { color: var(--snow) !important; font-weight: 800 !important; font-size: .88rem !important; margin-bottom: 1.25rem !important; }

[class*="social"] a, [class*="footer-social"] a {
  width: 40px !important; height: 40px !important;
  border: 1px solid var(--l1) !important;
  border-radius: 11px !important;
  display: grid !important; place-items: center !important;
  transition: var(--tr) !important;
}

[class*="social"] a:hover { border-color: var(--as) !important; color: var(--ac) !important; transform: translateY(-3px) !important; }

[class*="payment-method"], [class*="payment-icon"] {
  border: 1px solid var(--l1) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--dim) !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  transition: var(--tr) !important;
}

[class*="filter-tab"], [class*="product-tab"], [class*="tab-item"] {
  border: 1px solid var(--l1) !important;
  border-radius: 9999px !important;
  color: var(--mist) !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  transition: var(--tr) !important;
  background: transparent !important;
}

[class*="filter-tab"].active, [class*="tab-item"].active, [class*="tab-item"].on {
  background: var(--snow) !important;
  color: var(--bg) !important;
  border-color: var(--snow) !important;
}

.bg-white, [class*="card-white"] { background: var(--panel) !important; }
.bg-gray-50, .bg-gray-100 { background: var(--p2) !important; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--p2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--panel); }

::selection { background: var(--ac) !important; color: var(--bg) !important; }

@media (max-width: 768px) {
  h1.text-xl, h1.text-2xl { font-size: 1.25rem !important; line-height: 1.5 !important; }
  [class*="product-card"] { border-radius: 13px !important; }
  .sticky-product-bar { border-radius: var(--rsm) var(--rsm) 0 0 !important; background: var(--p2) !important; backdrop-filter: blur(16px) !important; border-top: 1px solid var(--l2) !important; }
}

@media (max-width: 480px) { :root { --r: 14px; --rsm: 8px; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }



h4.s-product-card-price,
.s-product-card-price {
  opacity: 1 !important;
  color: var(--gold) !important;
  font-weight: 800 !important;
}

/* ── titanium light overrides ── */
html[data-theme="titanium"] .s-product-card:hover,
html[data-theme="titanium"] salla-product-card:hover,
html[data-theme="titanium"] .product-card:hover,
html[data-theme="titanium"] [class*="product-card"]:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.10) !important;
}

html[data-theme="titanium"] input,
html[data-theme="titanium"] textarea,
html[data-theme="titanium"] select,
html[data-theme="titanium"] [class*="form-input"] {
  background: rgba(0,0,0,.04) !important;
}

html[data-theme="titanium"] .btn--wishlist,
html[data-theme="titanium"] [class*="wishlist-btn"],
html[data-theme="titanium"] [class*="favorite-btn"] {
  background: rgba(242,242,247,.9) !important;
}

html[data-theme="titanium"] .promotion-title,
html[data-theme="titanium"] [class*="badge"],
html[data-theme="titanium"] [class*="label--"] {
  background: rgba(242,242,247,.95) !important;
}