KUBE — Apple-Inspired Custom CSS
   ط«ظٹظ... ظ†ظ...ظˆ — ط2ط ̄
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* ── ط®ط· Tajawal ظ...ظ† Google ── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* ── ظ...طھط؛ظٹط±ط§طھ ط§ظ„ط£ظ„ظˆط§ظ† ── */
:root {
  --kube-bg: #ffffff;
  --kube-fg: #1d1d1f;
  --kube-muted: #6e6e73;
  --kube-light: #f5f5f7;
  --kube-border: #d2d2d7;
  --kube-gold: #b8860b;
  --kube-gold-light: #e8c870;
}

/* ── ط§ظ„ط®ط· ط§ظ„ط1ط§ظ... ── */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, select, textarea {
  font-family: 'Tajawal', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── ط§ظ„ط®ظ„ظپظٹط© ط§ظ„ط1ط§ظ...ط© ── */
body {
  background-color: var(--kube-bg) !important;
  color: var(--kube-fg) !important;
}

/* ── ط§ظ„ظ†ط§ظپ ط ̈ط§ط± ── */
header, .header, nav, .navbar, .site-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid var(--kube-border) !important;
  box-shadow: none !important;
}

/* ط§ط3ظ... ط§ظ„ظ...طھط¬ط± ظپظٹ ط§ظ„ظ†ط§ظپ */
.header__logo, .site-header__logo, .navbar-brand, header .logo {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: var(--kube-fg) !important;
}

/* ط±ظˆط§ط ̈ط· ط§ظ„ظ†ط§ظپ */
header a, nav a, .navbar a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--kube-fg) !important;
  opacity: 0.85;
  transition: opacity 0.2s !important;
  text-decoration: none !important;
}
header a:hover, nav a:hover { opacity: 1 !important; }

/* ── ط§ظ„ظ‡ظٹط±ظˆ ── */
.hero, .hero-section, .banner, .slider {
  background-color: var(--kube-light) !important;
  text-align: center !important;
}

.hero h1, .hero-title, .banner h1, .banner__title {
  font-size: clamp(40px, 7vw, 80px) !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  line-height: 1.05 !important;
  color: var(--kube-fg) !important;
}

.hero p, .hero-subtitle, .banner p, .banner__subtitle {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--kube-muted) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  line-height: 1.65 !important;
}

/* ── ط§ظ„ط£ط2ط±ط§ط± ── */
button, .btn, .button, a.btn, input[type="submit"],
.add-to-cart, .btn-primary {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 980px !important;
  padding: 13px 30px !important;
  font-size: 15px !important;
  transition: background 0.2s, transform 0.15s !important;
  border: none !important;
  cursor: pointer !important;
}

/* ط2ط± ط±ط¦ظٹط3ظٹ — ط£ط3ظˆط ̄ */
.btn-primary, .add-to-cart, button[type="submit"],
.cart__checkout, .product__add-to-cart {
  background: var(--kube-fg) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .add-to-cart:hover {
  background: #3a3a3c !important;
  transform: scale(0.98) !important;
}

/* ط2ط± ط«ط§ظ†ظˆظٹ */
.btn-secondary, .btn-outline {
  background: transparent !important;
  color: var(--kube-fg) !important;
  border: 1px solid var(--kube-border) !important;
}

/* ── ظƒط±ظˆطھ ط§ظ„ظ...ظ†طھط¬ط§طھ ── */
.product-card, .product-item, .card, .product__card,
[class*="product-card"], [class*="product-item"] {
  background: var(--kube-bg) !important;
  border: 0.5px solid var(--kube-border) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s !important;
}
.product-card:hover, .product-item:hover, .card:hover {
  transform: translateY(-6px) !important;
  border-color: #b0b0b5 !important;
}

/* طμظˆط±ط© ط§ظ„ظ...ظ†طھط¬ */
.product-card img, .product-item img, .card img {
  background: var(--kube-light) !important;
  transition: background 0.2s !important;
}

/* ط§ط3ظ... ط§ظ„ظ...ظ†طھط¬ */
.product-card h3, .product-item h3, .product__title,
.product-card .title, .card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kube-fg) !important;
  letter-spacing: -0.2px !important;
}

/* ظˆطμظپ ط§ظ„ظ...ظ†طھط¬ */
.product-card p, .product-item p, .product__desc {
  font-size: 13px !important;
  color: var(--kube-muted) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}

/* ط3ط1ط± ط§ظ„ظ...ظ†طھط¬ */
.price, .product-price, .product__price,
[class*="price"] {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--kube-fg) !important;
}

/* ── ط£ظ‚ط3ط§ظ... ط§ظ„ظƒط§طھظٹظ‚ظˆط±ظٹط2 ── */
.category-card, .collection-card, [class*="category"],
.categories .item {
  background: var(--kube-light) !important;
  border: 0.5px solid var(--kube-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.category-card:hover, .collection-card:hover {
  transform: scale(1.02) !important;
  background: var(--kube-bg) !important;
}

.category-card h3, .collection-card h3,
.category-card .title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kube-fg) !important;
}

/* ── ط§ظ„ط1ظ†ط§ظˆظٹظ† ط§ظ„ط1ط§ظ...ط© ── */
h1 { font-size: clamp(32px, 5vw, 64px) !important; font-weight: 800 !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; }
h2 { font-size: clamp(24px, 4vw, 48px) !important; font-weight: 700 !important; letter-spacing: -1px !important; line-height: 1.1 !important; }
h3 { font-size: clamp(18px, 2.5vw, 28px) !important; font-weight: 600 !important; letter-spacing: -0.3px !important; }

/* ── ط§ظ„ظپظˆطھط± ── */
footer, .footer, .site-footer {
  background: var(--kube-light) !important;
  border-top: 0.5px solid var(--kube-border) !important;
  color: var(--kube-muted) !important;
  box-shadow: none !important;
}

footer h4, footer h3, .footer h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kube-fg) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
}

footer a, .footer a {
  font-size: 13px !important;
  color: var(--kube-muted) !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
footer a:hover, .footer a:hover {
  color: var(--kube-fg) !important;
}

/* ── ط§ظ„ط¥ظ†ط ̈ظˆطھ ظˆط§ظ„ظپظˆط±ظ... ── */
input, select, textarea {
  border: 0.5px solid var(--kube-border) !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 15px !important;
  background: var(--kube-bg) !important;
  color: var(--kube-fg) !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--kube-fg) !important;
}

/* ── ط§ظ„ظپط§طμظ„ ط ̈ظٹظ† ط§ظ„ط£ظ‚ط3ط§ظ... ── */
hr, .divider {
  border: none !important;
  border-top: 0.5px solid var(--kube-border) !important;
}

/* ── ط§ظ„ط ̈ط§ط ̄ط¬ط§طھ ظˆط§ظ„طھط§ظ‚ط§طھ ── */
.badge, .tag, .label, [class*="badge"] {
  border-radius: 980px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  letter-spacing: 0.5px !important;
}

/* ط ̈ط§ط ̄ط¬ ط§ظ„طھط®ظپظٹط¶ */
.badge-sale, .discount-badge, .sale-badge {
  background: #1d1d1f !important;
  color: #ffffff !important;
}

/* ── ط§ظ„ظ...ظˆط ̈ط§ظٹظ„ ── */
@media (max-width: 768px) {
  h1 { font-size: clamp(28px, 8vw, 48px) !important; letter-spacing: -1px !important; }
  h2 { font-size: clamp(22px, 6vw, 36px) !important; }
  .hero h1, .banner h1 { font-size: clamp(32px, 8vw, 52px) !important; }
}