/* ============================================================
   QIRTAJ LUXURY DESIGN SYSTEM
   Minimalist Luxury — Arabic RTL — Mobile First
   ============================================================ */

/* ── 1. CSS Variables ──────────────────────────────────────── */
:root {
  --clr-black:      #111111;
  --clr-white:      #FFFFFF;
  --clr-bg:         #F9F9F7;
  --clr-gold:       #D4AF37;
  --clr-gold-light: #E8CC6A;
  --clr-gray-100:   #F5F5F3;
  --clr-gray-200:   #EBEBEB;
  --clr-gray-400:   #AAAAAA;
  --clr-gray-600:   #666666;

  --ff-ar:  'Cairo', sans-serif;
  --ff-en:  'Plus Jakarta Sans', sans-serif;

  --ease:       cubic-bezier(.4,0,.2,1);
  --dur:        0.28s;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.14);
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:     var(--ff-ar);
  color:           var(--clr-black);
  background:      var(--clr-white);
  line-height:     1.75;
  font-weight:     300;
  overflow-x:      hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }

img { max-width: 100%; display: block; }

/* Override Bootstrap green remnants */
.custom-bg-pry,
.custom-btn-pry       { background-color: var(--clr-black) !important; border-color: var(--clr-black) !important; }
.custom-btn-pry:hover { background-color: #333 !important; }
.btn-outline-success  { color: var(--clr-black) !important; border-color: var(--clr-black) !important; }
.btn-outline-success:hover { background-color: var(--clr-black) !important; color: var(--clr-white) !important; }
.text-success         { color: var(--clr-black) !important; }

/* ── 3. Announcement Bar ───────────────────────────────────── */
.ann-bar {
  background: var(--clr-black);
  color:      var(--clr-gold);
  text-align: center;
  padding:    0 16px;
  height:     40px;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  position:   relative;
  z-index:    1002;
  overflow:   hidden;
}

.ann-bar span {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}

@keyframes ticker {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(100%); }
}

@media (min-width: 768px) {
  .ann-bar span { animation: none; white-space: normal; }
}

/* ── 4. Luxury Navbar ──────────────────────────────────────── */
.lux-nav {
  background:    var(--clr-white);
  border-bottom: 1px solid var(--clr-gray-200);
  height:        68px;
  position:      sticky;
  top:           0;
  z-index:       1001;
  transition:    box-shadow var(--dur) var(--ease);
}

.lux-nav.scrolled { box-shadow: var(--shadow-md); }

.lux-nav .navbar-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.lux-nav .navbar-brand img { height: 42px; width: auto; }

.lux-nav .brand-name {
  font-size:      1rem;
  font-weight:    600;
  color:          var(--clr-black);
  letter-spacing: 0.06em;
}

.lux-nav .nav-link {
  color:          var(--clr-black) !important;
  font-size:      0.82rem;
  font-weight:    400;
  padding:        6px 12px !important;
  letter-spacing: 0.05em;
  position:       relative;
}

.lux-nav .nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  inset-inline-start: 12px;
  inset-inline-end:   12px;
  height:     1px;
  background: var(--clr-black);
  transform:  scaleX(0);
  transition: transform var(--dur) var(--ease);
  transform-origin: right;
}

.lux-nav .nav-link:hover::after,
.lux-nav .nav-link.active::after { transform: scaleX(1); }

.lux-nav .dropdown-menu {
  border:        none;
  border-radius: 0;
  box-shadow:    var(--shadow-md);
  min-width:     160px;
  padding:       8px 0;
}

.lux-nav .dropdown-item {
  font-size:  0.82rem;
  padding:    10px 20px;
  color:      var(--clr-black);
  transition: background var(--dur);
}

.lux-nav .dropdown-item:hover { background: var(--clr-bg); color: var(--clr-black); }

/* Navbar Icons */
.nav-icons { display: flex; align-items: center; gap: 14px; }

.nav-icons a {
  color:    var(--clr-black);
  font-size: 1.25rem;
  position: relative;
  line-height: 1;
  transition: opacity var(--dur);
}

.nav-icons a:hover { opacity: 0.55; }

.cart-badge {
  position:       absolute;
  top:            -7px;
  inset-inline-start: -7px;
  background:     var(--clr-black);
  color:          var(--clr-white);
  font-size:      0.6rem;
  width:          17px;
  height:         17px;
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-weight:    700;
  line-height:    1;
}

.lux-nav .navbar-toggler {
  border: none;
  padding: 4px 8px;
  color: var(--clr-black);
}
.lux-nav .navbar-toggler:focus { box-shadow: none; }

/* Search overlay */
.search-overlay {
  position:    fixed;
  inset:       0;
  background:  rgba(17,17,17,.96);
  z-index:     2000;
  display:     flex;
  align-items: center;
  justify-content: center;
  opacity:     0;
  pointer-events: none;
  transition:  opacity var(--dur) var(--ease);
}

.search-overlay.open { opacity: 1; pointer-events: auto; }

.search-overlay form {
  width:        90%;
  max-width:    600px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  display:      flex;
  align-items:  center;
  gap:          12px;
}

.search-overlay input {
  flex:       1;
  background: transparent;
  border:     none;
  outline:    none;
  font-size:  1.5rem;
  color:      var(--clr-white);
  font-family: var(--ff-ar);
  padding:    12px 0;
  caret-color: var(--clr-gold);
}

.search-overlay input::placeholder { color: rgba(255,255,255,.35); }

.search-overlay .close-search {
  color:     var(--clr-gold);
  font-size: 1.5rem;
  cursor:    pointer;
  background: none;
  border:    none;
}

/* ── 5. Hero Section ───────────────────────────────────────── */
.hero {
  position:    relative;
  min-height:  75vh;
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  /* background:  var(--clr-bg); */
  overflow:    hidden;
}

.hero__bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* opacity:    0.30; */
}

.hero__content {
  position:   relative;
  z-index:    2;
  text-align: right;
  padding:    40px 5% 40px 5%;
  max-width:  700px;
}

.hero__eyebrow {
  font-size:      0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* color:          var(--clr-gray-600); */
  margin-bottom:  20px;
  display:        block;
}

.hero__title {
  font-size:      clamp(2.2rem, 7vw, 5rem);
  font-weight:    200;
  letter-spacing: 0.04em;
  line-height:    1.1;
  color:          var(--clr-white);
  margin-bottom:  16px;
}

.hero__sub {
  font-size:      clamp(0.85rem, 2vw, 1rem);
  color:          var(--clr-gold);
  font-weight:    300;
  letter-spacing: 0.06em;
  margin-bottom:  36px;
}

/* ── 6. Buttons ────────────────────────────────────────────── */
.btn-lux {
  display:         inline-block;
  padding:         14px 44px;
  background:      var(--clr-black);
  color:           var(--clr-white);
  font-size:       0.78rem;
  font-weight:     500;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  border:          1px solid var(--clr-black);
  cursor:          pointer;
  transition:      background var(--dur) var(--ease), color var(--dur);
  white-space:     nowrap;
}

.btn-lux:hover { background: #333; color: var(--clr-white); }

.btn-lux-outline {
  display:         inline-block;
  padding:         12px 40px;
  background:      transparent;
  color:           var(--clr-black);
  font-size:       0.78rem;
  font-weight:     500;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  border:          1px solid var(--clr-black);
  cursor:          pointer;
  transition:      all var(--dur) var(--ease);
}

.btn-lux-outline:hover { background: var(--clr-black); color: var(--clr-white); }

.btn-lux-gold {
  display:         inline-block;
  padding:         12px 40px;
  background:      var(--clr-gold);
  color:           var(--clr-black);
  font-size:       0.78rem;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  border:          none;
  cursor:          pointer;
  transition:      background var(--dur);
}

.btn-lux-gold:hover { background: var(--clr-gold-light); color: var(--clr-black); }

/* ── 7. Section Headings ───────────────────────────────────── */
.sec-label {
  display:        block;
  font-size:      0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--clr-gray-400);
  text-align:     center;
  margin-bottom:  10px;
}

.sec-title {
  font-size:      clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight:    200;
  letter-spacing: 0.05em;
  color:          var(--clr-black);
  text-align:     center;
  margin-bottom:  0;
}

.sec-rule {
  width:          36px;
  height:         1px;
  background:     var(--clr-gold);
  margin:         14px auto 44px;
}

/* ── 8. Product Card ───────────────────────────────────────── */
.pro-card {
  position:   relative;
  cursor:     pointer;
  background: var(--clr-white);
}

.pro-card__img-wrap {
  position:   relative;
  overflow:   hidden;
  background: var(--clr-bg);
  aspect-ratio: 3 / 4;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.pro-card__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  padding:    16px;
  transition: transform 0.55s var(--ease);
}

.pro-card:hover .pro-card__img-wrap img { transform: scale(1.05); }

/* Hover action bar */
.pro-card__actions {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  background: rgba(17,17,17,.92);
  display:    flex;
  gap:        1px;
  padding:    0;
  transform:  translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.pro-card:hover .pro-card__actions { transform: translateY(0); }

.pro-card__btn {
  flex:           1;
  padding:        10px 4px;
  font-size:      0.7rem;
  letter-spacing: 0.07em;
  font-weight:    500;
  text-align:     center;
  cursor:         pointer;
  border:         none;
  transition:     background var(--dur);
  font-family:    var(--ff-ar);
}

.pro-card__btn--white {
  background: var(--clr-white);
  color:      var(--clr-black);
}
.pro-card__btn--white:hover { background: var(--clr-gray-100); }

.pro-card__btn--dark {
  background: transparent;
  color:      var(--clr-white);
}
.pro-card__btn--dark:hover { background: rgba(255,255,255,.08); }

/* Badges */
.pro-card__discount {
  position:       absolute;
  top:            10px;
  inset-inline-end: 10px;
  background:     var(--clr-black);
  color:          var(--clr-gold);
  font-size:      0.68rem;
  padding:        3px 9px;
  font-weight:    700;
  letter-spacing: 0.04em;
  z-index:        2;
}

.pro-card__sold-out {
  position:   absolute;
  inset:      0;
  background: rgba(255,255,255,.65);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    3;
  font-size:  0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color:      var(--clr-gray-600);
  text-transform: uppercase;
}

/* Info */
.pro-card__body { padding: 14px 0 6px; }

.pro-card__name {
  font-size:      0.85rem;
  font-weight:    500;
  color:          var(--clr-black);
  text-align:     center;
  margin-bottom:  4px;
  letter-spacing: 0.02em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.pro-card__price {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--clr-black);
  text-align:  center;
}

.pro-card__price-old {
  font-size:           0.72rem;
  color:               var(--clr-gray-400);
  text-decoration:     line-through;
  text-align:          center;
  display:             block;
}

.pro-card__test {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            5px;
  font-size:      0.65rem;
  color:          var(--clr-gray-400);
  margin-top:     6px;
  letter-spacing: 0.05em;
}

.pro-card__test i { color: var(--clr-gold); font-size: 0.75rem; }

/* ── 9. Test-Free Banner ───────────────────────────────────── */
.test-banner {
  background: var(--clr-black);
  padding:    32px 24px;
  text-align: center;
  margin:     48px 0;
}

.test-banner__title {
  color:          var(--clr-gold);
  font-size:      clamp(0.9rem, 2vw, 1.1rem);
  font-weight:    400;
  letter-spacing: 0.1em;
  margin-bottom:  8px;
}

.test-banner__sub {
  font-size:  0.8rem;
  color:      rgba(255,255,255,.65);
  margin:     0;
  max-width:  600px;
  margin-inline: auto;
}

/* ── 10. Agencies ──────────────────────────────────────────── */
.agencies {
  background: var(--clr-bg);
  padding:    60px 0;
}

.agency-item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  filter:          grayscale(100%);
  opacity:         0.5;
  transition:      filter var(--dur), opacity var(--dur);
}

.agency-item:hover { filter: grayscale(0%); opacity: 1; }

.agency-item img { max-height: 80px; width: auto; }

/* ── 11. Footer ────────────────────────────────────────────── */
.lux-footer {
  background: var(--clr-black);
  color:      rgba(255,255,255,.6);
  padding:    64px 0 0;
}

.lux-footer__head {
  color:          var(--clr-white);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  18px;
}

.lux-footer__rule {
  width:      22px;
  height:     1px;
  background: var(--clr-gold);
  margin-bottom: 18px;
}

.lux-footer a {
  color:          rgba(255,255,255,.5);
  font-size:      0.8rem;
  display:        block;
  margin-bottom:  10px;
  letter-spacing: 0.02em;
  transition:     color var(--dur);
}

.lux-footer a:hover { color: var(--clr-gold); }

.lux-footer__contact p {
  font-size:  0.8rem;
  margin-bottom: 10px;
  display:    flex;
  align-items: flex-start;
  gap:        10px;
  line-height: 1.5;
}

.lux-footer__contact i { color: var(--clr-gold); margin-top: 2px; flex-shrink: 0; }

.lux-footer__social { display: flex; gap: 10px; margin-top: 16px; }

.lux-footer__social a {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border:          1px solid rgba(255,255,255,.2);
  font-size:       1rem;
  transition:      border-color var(--dur), color var(--dur);
  margin-bottom:   0;
}

.lux-footer__social a:hover {
  border-color: var(--clr-gold);
  color:        var(--clr-gold) !important;
}

.lux-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding:    20px 0;
  margin-top: 48px;
  text-align: center;
  font-size:  0.72rem;
  color:      rgba(255,255,255,.3);
  letter-spacing: 0.04em;
}

/* ── 12. Product Detail Modal ──────────────────────────────── */
.pro-modal .modal-content {
  border-radius: 0;
  border:        none;
  box-shadow:    var(--shadow-lg);
}

.pro-modal .modal-header {
  background:    var(--clr-black);
  color:         var(--clr-white);
  padding:       16px 24px;
  border-radius: 0;
  border:        none;
}

.pro-modal .modal-title {
  font-size:      0.85rem;
  letter-spacing: 0.1em;
  font-weight:    400;
}

.pro-modal .btn-close { filter: invert(1); opacity: 0.7; }

.pro-modal .modal-body { padding: 24px; }

.pro-modal .modal-footer {
  border-top: 1px solid var(--clr-gray-200);
  padding:    14px 24px;
}

/* Product info rows */
.info-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         10px 0;
  border-bottom:   1px solid var(--clr-gray-200);
  font-size:       0.82rem;
}

.info-row:last-child { border-bottom: none; }

.info-row__label { color: var(--clr-gray-600); }
.info-row__value { font-weight: 500; color: var(--clr-black); }

/* ── 13. Order Modal / Form ────────────────────────────────── */
.order-modal .modal-content {
  border-radius: 0;
  border:        none;
  box-shadow:    var(--shadow-lg);
}

.order-modal .modal-header {
  background:    var(--clr-black);
  color:         var(--clr-white);
  padding:       16px 24px;
  border:        none;
}

.order-modal .modal-title {
  font-size:      0.85rem;
  letter-spacing: 0.1em;
  font-weight:    400;
}

.order-modal .btn-close { filter: invert(1); opacity: 0.7; }

.order-form .form-control {
  border:         1px solid var(--clr-gray-200);
  border-radius:  0;
  padding:        10px 14px;
  font-size:      0.83rem;
  font-family:    var(--ff-ar);
  transition:     border-color var(--dur);
}

.order-form .form-control:focus {
  box-shadow:    none;
  border-color:  var(--clr-black);
}

.order-form label {
  font-size:      0.74rem;
  letter-spacing: 0.07em;
  color:          var(--clr-gray-600);
  margin-bottom:  4px;
  display:        block;
}

.order-form .total-box {
  background:  var(--clr-bg);
  padding:     14px 16px;
  font-size:   0.85rem;
  font-weight: 600;
  display:     flex;
  justify-content: space-between;
  align-items: center;
}

.order-form .total-box .total-val {
  font-size:  1.1rem;
  font-weight: 700;
  color:      var(--clr-black);
}

/* Toggle checkboxes */
.toggle-group {
  display:     flex;
  gap:         20px;
  flex-wrap:   wrap;
  margin:      12px 0;
}

.toggle-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   0.8rem;
  cursor:      pointer;
}

.toggle-item input[type="checkbox"] {
  width:           16px;
  height:          16px;
  accent-color:    var(--clr-black);
  cursor:          pointer;
}

/* ── 14. Cart Page ─────────────────────────────────────────── */
.cart-wrap { min-height: 60vh; padding: 40px 0; }

.cart-item {
  display:     flex;
  align-items: center;
  gap:         20px;
  padding:     20px 0;
  border-bottom: 1px solid var(--clr-gray-200);
}

.cart-item__img {
  width:         90px;
  min-width:     90px;
  height:        120px;
  object-fit:    contain;
  background:    var(--clr-bg);
  padding:       8px;
}

.cart-item__info { flex: 1; }

.cart-item__name {
  font-size:   0.9rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.cart-item__price { font-size: 0.82rem; color: var(--clr-gray-600); }

.qty-ctrl {
  display:     flex;
  align-items: center;
  border:      1px solid var(--clr-gray-200);
  width:       fit-content;
}

.qty-ctrl button {
  background: none;
  border:     none;
  width:      32px;
  height:     32px;
  font-size:  1rem;
  cursor:     pointer;
  transition: background var(--dur);
  line-height: 1;
}

.qty-ctrl button:hover { background: var(--clr-bg); }

.qty-ctrl span {
  min-width:  36px;
  text-align: center;
  font-size:  0.85rem;
  font-weight: 500;
}

.cart-remove {
  color:      var(--clr-gray-400);
  font-size:  1.1rem;
  cursor:     pointer;
  transition: color var(--dur);
  background: none;
  border:     none;
  padding:    4px;
}

.cart-remove:hover { color: #c00; }

.cart-summary {
  background: var(--clr-bg);
  padding:    28px;
}

.cart-summary__row {
  display:         flex;
  justify-content: space-between;
  font-size:       0.85rem;
  padding:         8px 0;
  border-bottom:   1px solid var(--clr-gray-200);
}

.cart-summary__total {
  display:         flex;
  justify-content: space-between;
  font-size:       1rem;
  font-weight:     700;
  padding-top:     14px;
}

/* ── 15. Checkout ──────────────────────────────────────────── */
.checkout-wrap { padding: 48px 0; }

.checkout-step__num {
  width:           32px;
  height:          32px;
  background:      var(--clr-black);
  color:           var(--clr-white);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.78rem;
  font-weight:     700;
  flex-shrink:     0;
}

.order-summary-item {
  display:         flex;
  justify-content: space-between;
  font-size:       0.82rem;
  padding:         8px 0;
  border-bottom:   1px solid var(--clr-gray-200);
}

/* ── 16. Admin Sidebar ─────────────────────────────────────── */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  width:      240px;
  min-width:  240px;
  background: var(--clr-black);
  display:    flex;
  flex-direction: column;
  flex-shrink: 0;
}

.admin-sidebar__logo {
  padding:       24px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.admin-sidebar__logo h4 {
  color:          var(--clr-gold);
  font-size:      0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin:         0;
}

.admin-sidebar__logo p {
  color:     rgba(255,255,255,.35);
  font-size: 0.7rem;
  margin:    4px 0 0;
}

.admin-sidebar .nav-link {
  color:          rgba(255,255,255,.55) !important;
  padding:        13px 24px !important;
  font-size:      0.82rem;
  letter-spacing: 0.03em;
  display:        flex;
  align-items:    center;
  gap:            12px;
  transition:     all var(--dur);
  border-right:   3px solid transparent;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color:          var(--clr-white) !important;
  background:     rgba(255,255,255,.05);
  border-right-color: var(--clr-gold);
}

.admin-sidebar .nav-link i { font-size: 1.1rem; opacity: 0.8; }

/* Admin topbar */
.admin-topbar {
  background:    var(--clr-white);
  border-bottom: 1px solid var(--clr-gray-200);
  padding:       14px 28px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.admin-topbar h5 {
  font-size:      0.9rem;
  font-weight:    500;
  margin:         0;
  color:          var(--clr-black);
  letter-spacing: 0.04em;
}

/* Stat cards */
.stat-card {
  background:  var(--clr-white);
  border:      1px solid var(--clr-gray-200);
  padding:     22px;
  display:     flex;
  align-items: center;
  gap:         16px;
}

.stat-card__icon {
  width:           44px;
  height:          44px;
  background:      var(--clr-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  color:           var(--clr-gold);
  flex-shrink:     0;
}

.stat-card__value {
  font-size:  1.8rem;
  font-weight: 200;
  color:      var(--clr-black);
  line-height: 1;
}

.stat-card__label {
  font-size:      0.68rem;
  color:          var(--clr-gray-400);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top:     4px;
}

/* Admin table */
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.adm-table th {
  background:     var(--clr-black);
  color:          var(--clr-white);
  padding:        11px 14px;
  font-weight:    400;
  letter-spacing: 0.07em;
  font-size:      0.72rem;
  white-space:    nowrap;
}

.adm-table td {
  padding:       11px 14px;
  border-bottom: 1px solid var(--clr-gray-200);
  vertical-align: middle;
  white-space:   nowrap;
}

.adm-table tr:hover td { background: var(--clr-bg); }

.adm-table .new-row td { border-right: 3px solid var(--clr-gold); }

/* ── 17. Utilities ─────────────────────────────────────────── */
.bg-lux-bg    { background-color: var(--clr-bg)    !important; }
.bg-lux-black { background-color: var(--clr-black) !important; }
.clr-gold     { color: var(--clr-gold) !important; }

.grayscale { filter: grayscale(100%); opacity: 0.5; }

/* Alert overrides */
.alert-success {
  background:   #f0faf5;
  border-color: #b6e8d0;
  color:        #1a6641;
}

/* ── Page Banner (category pages) ─────────────────────────── */
.page-banner {
  position:        relative;
  min-height:      220px;
  background-size: cover;
  background-position: center;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--clr-black);
}
.page-banner__overlay {
  position: absolute;
  inset:    0;
  background: rgba(17,17,17,.65);
}
.page-banner__content {
  position:   relative;
  z-index:    1;
  text-align: center;
  color:      var(--clr-black);
  padding:    0 20px;
}
.page-banner__title {
  font-size:   clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 300;
  color:       var(--clr-white);
  margin:      10px 0 0;
  letter-spacing: 0.04em;
}
.page-banner__content .sec-label { color: var(--clr-gold); }

/* ── Luxury Pagination ─────────────────────────────────────── */
.lux-pagination { margin-top: 40px; }
.lux-pagination .page-link {
  border:        1px solid var(--clr-gray-200);
  color:         var(--clr-black);
  border-radius: 0;
  font-size:     0.82rem;
  padding:       8px 16px;
  transition:    all 0.2s;
  font-family:   var(--ff-ar);
}
.lux-pagination .page-link:hover,
.lux-pagination .page-item.active .page-link {
  background:   var(--clr-black);
  border-color: var(--clr-black);
  color:        var(--clr-white);
}

/* Scrollbar */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--clr-bg); }
::-webkit-scrollbar-thumb  { background: var(--clr-gray-200); }

/* ── 18. Responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
  .admin-sidebar { display: none; }
  .admin-shell   { display: block; }
}

@media (max-width: 767px) {
  .hero { min-height: 55vh; }

  .pro-card__actions { transform: none; }

  .cart-item { flex-wrap: wrap; }
  .cart-item__img { width: 70px; min-width: 70px; height: 95px; }
}

@media (max-width: 480px) {
  .pro-card__name { font-size: 0.78rem; }
  .pro-card__price { font-size: 0.78rem; }
  .sec-title { font-size: 1.4rem; }
}