:root {
  --primary: #d98b2b;
  --primary-dark: #a86410;
  --secondary: #fff6ea;
  --dark: #22160f;
  --muted: #6b625d;
  --border: #ead7c1;
  --white: #ffffff;
  --success: #1f8a54;
  --danger: #cc3f3f;
  --shadow: 0 12px 35px rgba(34, 22, 15, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--dark);
  background: #fffdf9;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button {
  font: inherit;
}
.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}
.badge {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(217,139,43,0.12);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 8px 0;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.7;
}
.muted { color: var(--muted); }
.text-right { text-align: right; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.25s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #f0a444);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(217, 139, 43, 0.26);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dark);
}
.btn-dark {
  background: var(--dark);
  color: #fff;
}
.btn-light {
  background: #fff;
  color: var(--dark);
}
.topbar {
  background: var(--dark);
  color: #fff;
  padding: 10px 0;
  font-size: 14px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  background: rgba(255, 253, 249, 0.9);
  border-bottom: 1px solid rgba(234, 215, 193, 0.75);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.brand {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.brand span { color: var(--primary); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 600;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
}
.icon-count {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.hero {
  padding: 62px 0 40px;
  background:
    radial-gradient(circle at top left, rgba(217,139,43,0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(34,22,15,0.06), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #fff5ea 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
  margin: 12px 0 18px;
}
.hero p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 26px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.stat-card, .glass-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(234, 215, 193, 0.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass-card h4 {
  color: #1a1a2e !important;
  margin: 0;
}
.glass-card p,
.glass-card .muted {
  color: #4a4a4a !important;
  margin: 0;
}
.stat-card {
  padding: 18px;
}
.stat-card strong {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
}
.hero-visual {
  position: relative;
  min-height: 540px;
}
.bottle-stage {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(160deg, #fff 0%, #f6e1c2 45%, #e3a351 100%);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(34, 22, 15, 0.14);
}
.bottle-stage::before,
.bottle-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.bottle-stage::before {
  width: 220px;
  height: 220px;
  top: -50px;
  right: -40px;
}
.bottle-stage::after {
  width: 150px;
  height: 150px;
  bottom: 30px;
  left: -30px;
}
.bottle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 330px;
  transform: translate(-50%, -45%);
  border-radius: 38px 38px 28px 28px;
  background: url('/assets/images/products/single.png') center center/cover no-repeat;
  box-shadow: 0 35px 55px rgba(0,0,0,0.18);
}
.bottle::before {
  display: none;
}
.bottle::after {
  display: none;
}
.floating-card {
  position: absolute;
  padding: 18px;
}
.floating-card h4,
.floating-card p { margin: 0; }
.floating-card h4 {
  color: #1a1a2e !important;
}
.floating-card p,
.floating-card .muted {
  color: #4a4a4a !important;
}
.float-top-right { right: 20px; top: 20px; width: 210px; }
.float-bottom-left { left: 18px; bottom: 22px; width: 220px; }
.page-banner {
  padding: 50px 0 34px;
  background: linear-gradient(180deg, #fff8f0 0%, #fffdf9 100%);
  border-bottom: 1px solid var(--border);
}
.page-banner h1 {
  margin: 10px 0 12px;
  font-size: clamp(34px, 5vw, 58px);
}
.page-banner p { margin: 0; color: var(--muted); max-width: 720px; line-height: 1.8; }
.breadcrumbs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}
.section { padding: 70px 0; }
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.category-card,
.product-card,
.deal-card,
.info-card,
.form-card,
.account-card,
.summary-card,
.table-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.category-card {
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.category-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff0db, #ffe0b7);
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--primary-dark);
}
.product-card {
  overflow: hidden;
}
.product-thumb {
  height: 270px;
  background: linear-gradient(135deg, #fff8f0 0%, #f4d2a0 100%);
  position: relative;
  display: grid;
  place-items: center;
}
.product-thumb .mini-bottle {
  width: 130px;
  height: 190px;
  border-radius: 24px 24px 16px 16px;
  background: linear-gradient(180deg, #3b2618, #c37924);
  position: relative;
  box-shadow: 0 24px 35px rgba(0,0,0,0.17);
}
.product-thumb .mini-bottle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  width: 56px;
  height: 36px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #37251a, #8b550f);
}
.product-thumb .mini-bottle::after {
  content: "IH";
  position: absolute;
  inset: 48px 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.9);
  font-weight: 900;
  font-size: 34px;
}
.product-body {
  padding: 16px 16px 18px;
}
.rating {
  color: #e0a119;
  font-size: 11px;
}
.product-title {
  font-size: 16px;
  margin: 8px 0 6px;
  line-height: 1.3;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
}
.price {
  font-size: 20px;
  font-weight: 800;
}
.old-price {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 12px;
}
.card-actions {
  display: flex;
  gap: 8px;
}
.card-actions .btn { 
  flex: 1; 
  font-size: 13px;
  padding: 10px 12px;
}
.banner-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.promo-panel {
  padding: 28px;
  min-height: 260px;
  border-radius: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.promo-panel:first-child {
  background: linear-gradient(135deg, #22160f 0%, #8f5f1f 100%);
}
.promo-panel:last-child {
  background: linear-gradient(135deg, #d98b2b 0%, #7b4308 100%);
}
.promo-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  right: -30px;
  bottom: -30px;
}
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature-card {
  padding: 24px;
  text-align: center;
}
.feature-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff0db, #ffe2b6);
  color: var(--primary-dark);
  font-size: 28px;
}
.newsletter {
  padding: 40px;
  background: linear-gradient(135deg, #22160f 0%, #5f3d1b 100%);
  color: #fff;
  border-radius: 32px;
}
.newsletter-form {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.newsletter-form input {
  flex: 1;
  min-width: 240px;
  border: 0;
  border-radius: 999px;
  padding: 16px 20px;
}
.filters-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 30px;
}
.sidebar-filter,
.product-detail-layout,
.cart-layout,
.checkout-layout,
.account-layout {
  align-items: start;
}
.filter-block, .form-card, .summary-card, .table-card, .account-card { padding: 22px; }
.filter-block + .filter-block { margin-top: 18px; }
.filter-block h4 { margin: 0 0 14px; }
.checkbox-list li + li { margin-top: 12px; }
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.toolbar-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.field, .form-control {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.form-group + .form-group { margin-top: 16px; }
.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
.product-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.product-gallery {
  padding: 28px;
}
.gallery-main {
  height: 420px;
  border-radius: 16px;
  background: #f9f9f9;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-main .hero-bottle {
  width: 220px;
  height: 320px;
  border-radius: 32px 32px 20px 20px;
  background: linear-gradient(180deg, #281a12, #c17926);
  position: relative;
  box-shadow: 0 32px 42px rgba(0,0,0,0.2);
}
.gallery-main .hero-bottle::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 54px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #37261a, #875313);
}
.gallery-main .hero-bottle::after {
  content: "IBRAHIM\A HASHMI";
  white-space: pre;
  position: absolute;
  inset: 92px 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 1px;
}
.thumb-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.thumb {
  height: 120px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8f0 0%, #f4d2a0 100%);
  border: 1px solid var(--border);
}
.product-info {
  padding: 10px 0;
}
.inline-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  margin: 14px 0 22px;
}
.option-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.option-pill {
  min-width: 70px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  background: #fff;
}
.option-pill.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
.qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.qty-wrap button {
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.qty-wrap input {
  width: 50px;
  border: 0;
  text-align: center;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}

.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.share-facebook {
  background: linear-gradient(135deg, #1877f2, #0d5bbf);
}

.share-facebook:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

.share-twitter {
  background: linear-gradient(135deg, #1da1f2, #0c85d0);
}

.share-twitter:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(29, 161, 242, 0.4);
}

.share-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.share-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.share-instagram {
  background: linear-gradient(135deg, #e1306c, #833ab4);
}

.share-instagram:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4);
}

.share-copy {
  background: linear-gradient(135deg, #6c757d, #495057);
}

.share-copy:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.cart-layout,
.checkout-layout,
.account-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 30px;
}
.table-card table {
  width: 100%;
  border-collapse: collapse;
}
.table-card th,
.table-card td {
  padding: 16px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.product-inline {
  display: flex;
  gap: 14px;
}
.product-inline .tiny-thumb {
  width: 82px;
  height: 96px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8f0 0%, #f4d2a0 100%);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}
.summary-total {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 12px;
  font-size: 22px;
  font-weight: 800;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: end;
}

.form-grid-2 .form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.form-grid-2 .label {
  margin-bottom: 8px;
  font-weight: 700;
}

.form-grid-2 .field {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
}
.payment-method {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.payment-method + .payment-method { margin-top: 12px; }
.auth-wrap {
  max-width: 572px;
  margin: 0 auto;
}
.auth-top {
  text-align: center;
  margin-bottom: 24px;
}
.split-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.auth-art {
  background: linear-gradient(145deg, #22160f 0%, #85541c 100%);
  color: #fff;
  padding: 50px;
  position: relative;
  overflow: hidden;
}
.auth-art::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -50px;
  bottom: -40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.auth-panel {
  display: grid;
  place-items: center;
  padding: 44px 24px;
  background: #fffaf4;
}
.account-sidebar ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--muted);
}
.account-sidebar ul li a.active,
.account-sidebar ul li a:hover {
  background: #fff5e9;
  color: var(--dark);
}
.order-badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef9f2;
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}
.footer {
  background: #1c120d;
  color: #f6e9dd;
  padding: 64px 0 26px;
  margin-top: 70px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 24px;
}
.footer h4 { margin-top: 0; color: #fff; }
.footer p,
.footer li,
.footer a { color: #d9c8b7; line-height: 1.8; }
.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mobile-toggle { display: none; }
.helper-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--primary);
  background: #fff5e9;
  color: var(--muted);
  border-radius: 10px;
}
@media (max-width: 1100px) {
  .hero-grid,
  .product-detail-layout,
  .cart-layout,
  .checkout-layout,
  .account-layout,
  .filters-layout,
  .footer-grid,
  .banner-promo,
  .split-auth { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .hero-visual { min-height: 460px; }
}
@media (max-width: 768px) {
  .mobile-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 10px);
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: start;
  }
  .nav-links.show { display: flex; }
  .hero-stats,
  .grid-4,
  .grid-3,
  .grid-2,
  .features,
  .form-grid-2,
  .thumb-list { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .hero { padding-top: 36px; }
  .gallery-main { height: 380px; }
  
  /* Mobile product card adjustments */
  .product-card {
    margin-bottom: 16px;
  }
  .product-thumb {
    height: 220px;
  }
  .product-thumb .mini-bottle {
    width: 100px;
    height: 150px;
    border-radius: 20px 20px 14px 14px;
  }
  .product-thumb .mini-bottle::before {
    width: 44px;
    height: 28px;
    top: -20px;
    border-radius: 8px 8px 5px 5px;
  }
  .product-thumb .mini-bottle::after {
    inset: 36px 12px 14px;
    font-size: 26px;
  }
  .product-body {
    padding: 14px 14px 16px;
  }
  .rating {
    font-size: 10px;
  }
  .product-title {
    font-size: 14px;
    margin: 6px 0 4px;
    line-height: 1.2;
  }
  .price-row {
    margin: 8px 0 12px;
    gap: 10px;
  }
  .price {
    font-size: 18px;
  }
  .old-price {
    font-size: 11px;
  }
  .card-actions {
    gap: 6px;
  }
  .card-actions .btn {
    font-size: 12px;
    padding: 8px 10px;
  }
  .badge {
    font-size: 11px;
    padding: 6px 10px;
  }
}
  @media (max-width: 480px) {
  .product-thumb { height: 200px; }
  .navbar-inner { position: relative; }
  .nav-actions .btn-dark { display: none; }
}

/* ================================================================
   TYPOGRAPHY SYSTEM — unified scale for the entire site
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: Inter, Arial, sans-serif;
  line-height: 1.2;
  color: var(--dark);
  margin-top: 0;
}
p { margin-top: 0; }

/* ================================================================
   UTILITY
   ================================================================ */
.section-pt0 { padding-top: 0 !important; }
.desktop-only { display: inline-flex; }
@media (max-width: 768px) { .desktop-only { display: none !important; } }

/* ================================================================
   TOPBAR — animated delivery text
   ================================================================ */
.topbar-delivery {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeInSlide 1s ease-out;
}
.topbar-delivery .fa-truck {
  color: #25d366;
  font-size: 15px;
  animation: truckMove 2s ease-in-out infinite;
}
.topbar-delivery-msg {
  background: linear-gradient(90deg, #25d366, #128c7e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-size: 13px;
  animation: textGlow 3s ease-in-out infinite;
}
.topbar-contact {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes truckMove {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}
@keyframes textGlow {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.2); }
}

/* ================================================================
   NAVBAR BRAND / LOGO
   ================================================================ */
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-circle {
  width: 45px;
  height: 45px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}
.logo-circle img {
  height: 30px;
  max-width: 30px;
  width: auto;
  object-fit: contain;
}
.logo-fallback {
  width: 45px;
  height: 45px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.brand-name-col {
  display: flex;
  flex-direction: column;
}
.brand-name-text {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.brand-tagline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.brand-tagline-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1a1a2e, transparent);
  min-width: 28px;
}
.brand-tagline-text {
  font-size: 10px;
  font-weight: 700;
  color: #8b4513;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav-admin-link { color: var(--primary) !important; font-weight: 600; }
.nav-admin-link i { margin-right: 4px; }
.profile-pic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
}
.profile-icon {
  position: relative;
  transition: transform 0.3s ease;
}
.profile-icon:hover { transform: translateY(-2px); }
.profile-icon img { transition: border-color 0.3s, box-shadow 0.3s; }
.profile-icon:hover img {
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .icon-btn, .profile-icon { width: 40px; height: 40px; }
  .profile-pic { width: 26px; height: 26px; }
  .icon-count {
    position: absolute;
    top: -4px; right: -4px;
    font-size: 10px;
    min-width: 16px;
  }
}
@media (max-width: 480px) {
  .icon-btn, .profile-icon { width: 36px; height: 36px; }
}

/* ================================================================
   FLASH MESSAGES
   ================================================================ */
.flash-message {
  position: relative;
  padding: 14px 46px 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  animation: flashIn 0.35s ease;
  border-left-width: 4px;
  border-left-style: solid;
}
.flash-message[data-type="success"] {
  border-color: var(--success);
  background: #eefaf3;
  color: var(--success);
}
.flash-message[data-type="error"] {
  border-color: var(--danger);
  background: #fff0f0;
  color: var(--danger);
}
.flash-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 2px;
}
.flash-close:hover { opacity: 1; }
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #f0e4d4;
  padding: 64px 0 0;
  margin-top: 80px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

/* Footer brand column */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.footer-logo-circle {
  width: 56px;
  height: 56px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}
.footer-logo-circle img {
  height: 36px;
  max-width: 36px;
  width: auto;
  object-fit: contain;
}
.footer-logo-fallback {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, #8b4513 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.footer-brand-name {
  margin: 0 0 3px;
  font-size: 21px;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.footer-brand-name span { color: var(--primary); }
.footer-brand-sub {
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
.footer-desc {
  color: #bbb;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 24px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social-link {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.3s, transform 0.2s;
}
.footer-social-link:hover {
  background: var(--primary);
  transform: translateY(-2px);
  color: #fff;
}

/* Footer column heading */
.footer-col-heading {
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 10px;
  position: relative;
}
.footer-col-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--primary);
}

/* Footer link list */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: 11px; }
.footer-links a {
  color: #bbb;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
}
.footer-links a:hover { color: #fff; }
.footer-links .link-arrow {
  color: var(--primary);
  font-size: 12px;
}

/* Footer contact items */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.footer-contact-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 15px;
  flex-shrink: 0;
}
.footer-contact-icon--wa {
  background: rgba(37,211,102,0.18);
  color: #25d366;
}
.footer-contact-label {
  font-size: 11px;
  color: #777;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-contact-value {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.25s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-contact-value:hover { color: #fff; }
.footer-contact-value--wa:hover { color: #25d366; }

/* Footer bottom bar */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-copy { color: #777; font-size: 14px; }
.footer-legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-legal a {
  color: #777;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.25s;
}
.footer-legal a:hover { color: #ccc; }
.footer-credit { color: #777; font-size: 14px; }
.footer-credit .heart { color: #e74c3c; }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer { padding-top: 46px; margin-top: 50px; }
}

/* ================================================================
   WHATSAPP FLOATING BALLOON
   ================================================================ */
.wa-balloon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}
.wa-popup {
  position: absolute;
  bottom: 72px;
  right: 0;
  background: #fff;
  padding: 16px 20px;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.18);
  min-width: 252px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.wa-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wa-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wa-popup-dot {
  width: 8px;
  height: 8px;
  background: #25d366;
  border-radius: 50%;
  animation: waPulse 2s infinite;
}
.wa-popup-title {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}
.wa-popup-body {
  color: #666;
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}
.wa-popup-arrow {
  position: absolute;
  bottom: -8px;
  right: 22px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
.wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.wa-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.45);
}
.wa-btn i {
  color: #fff;
  font-size: 28px;
  z-index: 2;
  position: relative;
}
.wa-btn-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes waPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes ping {
  75%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 768px) {
  .wa-balloon { bottom: 20px; right: 20px; }
  .wa-btn { width: 52px; height: 52px; }
  .wa-btn i { font-size: 24px; }
  .wa-popup { min-width: 210px; right: -8px; padding: 12px 15px; }
}

/* ================================================================
   NOTIFICATION DROPDOWN
   ================================================================ */
.notif-wrapper { position: relative; }
.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  z-index: 1001;
  overflow: hidden;
  border: 1px solid var(--border);
}
.notif-head {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.notif-head h3 {
  margin: 0;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}
.notif-view-all {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.notif-view-all:hover { color: #fff; }
.notif-list {
  max-height: 380px;
  overflow-y: auto;
}
.notif-heading-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.notif-heading-item:hover { background: #fafafa; }
.notif-heading-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--dark);
}
.notif-heading-left i { color: var(--primary); }
.notif-badge {
  background: var(--primary);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.notif-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #f8f9fa;
}
.notif-clear-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.notif-clear-btn:hover { opacity: 0.88; }
.notif-empty, .notif-loading {
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 768px) { .notif-dropdown { width: 300px; } }

/* ================================================================
   WISHLIST ALERT
   ================================================================ */
.wishlist-alert {
  position: absolute;
  top: -34px;
  right: -8px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255,107,107,0.4);
  animation: slideDown 0.3s ease-out;
  z-index: 1001;
}
.wishlist-alert::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 18px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ee5a5a;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   PRODUCT DETAIL PAGE
   ================================================================ */
.product-title  { font-size: 42px; font-weight: 800; margin: 14px 0 8px; line-height: 1.15; }
.price-big      { font-size: 40px; font-weight: 800; color: var(--primary); }
.price-row      { align-items: flex-end; }
.stock-info     { margin-top: 8px; font-size: 14px; color: var(--muted); }
.desc-text      { line-height: 1.9; color: var(--muted); }
.form-mt        { margin-top: 32px; }
.btn-block      { width: 100%; }
.share-buttons  { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.specs-mt       { margin-top: 24px; }

/* Rating summary */
.rating-avg       { font-size: 48px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.stars-row        { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.star-gold        { color: #ffc107; font-size: 24px; }
.star-empty       { color: #e0e0e0; font-size: 24px; }
.star-sm-gold     { color: #ffc107; font-size: 16px; }
.star-sm-empty    { color: #e0e0e0; font-size: 16px; }
.rating-count     { color: var(--muted); font-size: 15px; }
.rating-bar-row   { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rating-bar-label { width: 58px; font-size: 14px; color: var(--muted); }
.rating-bar-wrap  { flex: 1; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.rating-bar-fill  { height: 100%; background: #ffc107; }
.rating-bar-pct   { width: 40px; text-align: right; color: var(--muted); font-size: 13px; }

/* Review form */
.review-form-max   { max-width: 600px; }
.review-label      { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.rating-input-row  { display: flex; gap: 8px; font-size: 24px; }
.star-rating       { cursor: pointer; color: #e0e0e0; transition: color 0.2s; }
.star-rating.active, .star-rating:hover { color: #ffc107; }
.field-full        { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; }
.field-full:focus  { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,69,19,0.1); }
.review-login-prompt  { text-align: center; padding: 40px; }
.review-login-icon    { font-size: 48px; margin-bottom: 16px; opacity: 0.5; color: var(--muted); }

/* Review grid and cards */
.review-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.review-card     { transition: transform 0.3s, box-shadow 0.3s; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important; }
.review-stars    { display: flex; gap: 4px; margin-bottom: 8px; }
.review-meta     { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.badge--verified { background: #28a745; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.review-text     { font-size: 14px; line-height: 1.6; color: var(--dark); margin: 0; }

/* ================================================================
   AUTH PAGES
   ================================================================ */
.auth-art-heading  { font-size: 56px; line-height: 1.05; margin: 18px 0; font-weight: 800; }
.auth-art-desc     { font-size: 17px; line-height: 1.8; color: #ead8c9; max-width: 520px; }
.auth-feature-list { margin-top: 40px; }
.auth-feature-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.auth-feature-icon {
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-feature-icon i { font-size: 20px; color: #fff; }
.auth-feature-text  { color: #ead8c9; font-size: 16px; }
.badge--light       { background: rgba(255,255,255,0.14); color: #fff; }
.auth-inner-error   { background: #fee; border: 1px solid #fcc; padding: 12px; margin-bottom: 16px; border-radius: 6px; color: #c33; font-size: 14px; }

/* 2FA form */
.twofa-icon-wrap { text-align: center; padding: 20px 0; }
.twofa-icon {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.twofa-icon i     { font-size: 28px; color: #fff; }
.code-input       { letter-spacing: 12px; font-size: 32px; text-align: center; font-weight: 700; }
.countdown-wrap   { text-align: center; margin: 15px 0; color: var(--muted); font-size: 13px; }
.countdown-val    { color: var(--primary); font-weight: 700; }
.resend-wrap      { display: none; text-align: center; margin: 15px 0; }
.resend-btn       { background: var(--primary); color: #fff; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: opacity 0.2s; }
.resend-btn:hover { opacity: 0.88; }
.auth-register-link { text-align: center; margin-top: 18px; font-size: 14px; }

/* ================================================================
   CHECKOUT SUCCESS PAGE
   ================================================================ */
.success-wrap       { max-width: 800px; margin: 0 auto; }
.success-card       { text-align: center; padding: 50px 40px; background: linear-gradient(135deg, #f8fff8, #f0f9ff); border: 2px solid var(--success) !important; }
.success-icon       { font-size: 80px; color: var(--success); margin-bottom: 20px; line-height: 1; }
.success-title      { margin-bottom: 10px; color: var(--success); }
.success-order-line { font-size: 20px; color: var(--dark); margin-bottom: 30px; font-weight: 500; }
.success-order-line strong { color: var(--primary); font-size: 22px; }
.order-meta-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; text-align: left; }
.order-meta-card    { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; }
.order-meta-label   { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.order-meta-val     { font-size: 16px; font-weight: 600; color: var(--dark); }
.order-meta-val--success { color: var(--success); }
.order-meta-val--primary { color: var(--primary); font-size: 18px; }
.delivery-address-card { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; margin-bottom: 30px; text-align: left; }
.delivery-address-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.delivery-address-body  { font-size: 15px; font-weight: 500; color: var(--dark); }
.whats-next-card    { background: linear-gradient(135deg, #e8f5e8, #f0f9ff); border: 1px solid var(--success) !important; padding: 20px; border-radius: 8px; text-align: left; margin-bottom: 30px; }
.whats-next-title   { font-size: 16px; font-weight: 600; margin-bottom: 15px; color: var(--success); }
.whats-next-item    { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.whats-next-check   { color: var(--success); font-size: 18px; flex-shrink: 0; }

/* ================================================================
   HOME PAGE — minor fixes
   ================================================================ */
.section-pt0 { padding-top: 0 !important; }
.card-pad     { padding: 28px; }
.card-pad-lg  { padding: 32px; }
.grid-gap-lg  { gap: 32px; }
.align-end    { align-items: flex-end; }

/* ================================================================
   RELATED PRODUCTS SLIDER
   ================================================================ */
.related-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 80px 0;
}
.related-header        { text-align: center; margin-bottom: 50px; }
.related-header h2     { font-size: 34px; font-weight: 700; margin-bottom: 12px; }
.related-header p      { color: var(--muted); font-size: 17px; max-width: 580px; margin: 0 auto; }
.slider-outer          { position: relative; overflow: hidden; border-radius: 12px; }
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.2s, transform 0.2s;
}
.slider-nav-btn:hover  { background: var(--primary-dark); transform: translateY(-50%) scale(1.1); }
.slider-nav-btn--prev  { left: 16px; }
.slider-nav-btn--next  { right: 16px; }
.slider-track          { display: flex; transition: transform 0.5s ease; gap: 30px; padding: 0 80px; }
.product-slide         { min-width: 280px; max-width: 280px; }
.prod-slide-card       { overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; border-radius: 12px; }
.prod-slide-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; }
.prod-slide-img-wrap {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex; align-items: center; justify-content: center;
}
.prod-slide-img        { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 8px; }
.prod-slide-placeholder {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 30px;
}
.prod-slide-badge      {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 8px;
}
.prod-slide-badge-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
.prod-slide-badge-dot--ok  { background: linear-gradient(135deg, #28a745, #20c997); box-shadow: 0 2px 8px rgba(40,167,69,0.3); }
.prod-slide-badge-dot--oos { background: linear-gradient(135deg, #dc3545, #c82333); box-shadow: 0 2px 8px rgba(220,53,69,0.3); }
.prod-slide-body       { padding: 20px; }
.prod-slide-name       { margin: 0 0 10px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.prod-slide-name a     { color: var(--dark); text-decoration: none; transition: color 0.2s; }
.prod-slide-name a:hover { color: var(--primary); }
.prod-slide-desc       { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.prod-slide-rating     { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.prod-slide-stars      { display: flex; gap: 2px; }
.prod-slide-star       { font-size: 14px; }
.prod-slide-rcount     { color: var(--muted); font-size: 12px; }
.prod-slide-price      { margin-bottom: 18px; }
.prod-slide-price-main { font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.prod-slide-price-old  { font-size: 14px; color: var(--muted); text-decoration: line-through; margin-bottom: 2px; }
.prod-slide-price-save { font-size: 13px; color: #28a745; font-weight: 600; }
.prod-slide-price-na   { font-size: 17px; font-weight: 700; color: var(--dark); }
.prod-slide-actions    { display: grid; gap: 10px; }
.slider-indicators     { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.slider-indicator {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #dee2e6;
  cursor: pointer;
  transition: background 0.3s;
  border: none;
}
.slider-indicator.active { background: var(--primary); }
.related-cta           { text-align: center; margin-top: 46px; }

/* Review card footer */
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f8f9fa;
  margin-top: 12px;
}
.review-footer-meta    { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }

/* Empty reviews state */
.no-reviews-wrap   { text-align: center; padding: 60px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; }
.no-reviews-icon   { width: 80px; height: 80px; background: linear-gradient(135deg, #e9ecef, #dee2e6); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--muted); font-size: 30px; }
.no-reviews-title  { margin-bottom: 10px; font-size: 20px; font-weight: 600; }

/* ================================================================
   CHECKOUT SUCCESS — SUPPORT CARD
   ================================================================ */
.support-card         { background: linear-gradient(135deg, #fff8f0, #f4f4f4); margin-top: 28px; }
.support-header       { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.support-header-icon  { font-size: 32px; line-height: 1; }
.support-header h3    { margin: 0; color: var(--primary); }
.support-header p     { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.support-grid         { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.support-item         { text-align: center; padding: 15px; background: #fff; border-radius: 8px; }
.support-item-icon    { font-size: 24px; margin-bottom: 8px; }
.support-item-label   { font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.support-item a       { color: var(--primary); text-decoration: none; font-weight: 500; font-size: 14px; }
.support-item-val     { color: var(--dark); font-size: 14px; }
.success-actions      { margin-top: 40px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* ================================================================
   HOME / PRODUCT CARD ENHANCEMENTS
   ================================================================ */
.product-thumb img  { width: 100%; height: 200px; object-fit: cover; }
.card-rating        { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-rating-stars  { display: flex; gap: 2px; }
.card-rating-label  { color: var(--muted); font-size: 12px; font-weight: 500; }
.form-inline        { display: inline; }

/* ================================================================
   REGISTER FORM EXTRAS
   ================================================================ */
.phone-input-row    { display: flex; gap: 10px; align-items: stretch; }
.phone-code-select  { max-width: 120px; }
.field-full-flex    { flex: 1; }
.field-hint         { color: var(--muted); font-size: 12px; margin-top: 5px; display: block; }
.reg-disabled-body  { text-align: center; padding: 40px 0; }

/* ================================================================
   ACCOUNT — SHARED COMPONENTS
   ================================================================ */
.acc-overview-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 50px; }
.acc-overview-card   { padding: 30px; text-align: center; background: linear-gradient(135deg, #fff8f0, #f9f9f9); }
.acc-icon            { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), #8b4513); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #fff; font-size: 32px; }
.acc-icon--sm        { width: 60px; height: 60px; font-size: 24px; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); color: #666; }
.acc-icon--lg        { width: 100px; height: 100px; font-size: 40px; }
.acc-icon--neutral   { background: linear-gradient(135deg, #e9ecef, #dee2e6); color: #6c757d; }
.acc-card-title      { color: var(--primary); margin-bottom: 10px; font-size: 24px; }
.acc-section-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.acc-section-title   { color: var(--primary); font-size: 32px; margin-bottom: 10px; }
.acc-order-list      { display: grid; gap: 20px; }
.acc-order-card      { padding: 25px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #fff, #f8f9fa); }
.acc-order-info      { flex: 1; }
.acc-order-meta-row  { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.acc-order-icon      { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), #8b4513); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.acc-order-num       { margin: 0; color: var(--dark); font-size: 18px; font-weight: 600; }
.acc-order-date      { margin: 0; color: var(--muted); font-size: 14px; }
.acc-order-totals    { display: flex; gap: 20px; align-items: center; }
.acc-order-amount    { color: var(--dark); font-weight: 600; }
.acc-order-actions   { display: flex; gap: 10px; }
.badge-status        { color: #fff; }
.badge-status--done  { background: #28a745 !important; }
.badge-status--ship  { background: #007bff !important; }
.badge-status--pend  { background: #ffc107 !important; }
.acc-wishlist-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.acc-wishlist-card   { padding: 20px; text-align: center; background: linear-gradient(135deg, #fff, #f8f9fa); }
.acc-wishlist-name   { margin: 0 0 10px; color: var(--dark); font-size: 16px; font-weight: 600; }
.acc-wishlist-price  { margin: 0 0 15px; color: var(--muted); font-size: 14px; }
.acc-quick-actions   { margin-top: 50px; text-align: center; }
.acc-quick-title     { color: var(--primary); margin-bottom: 20px; font-size: 24px; }
.acc-quick-row       { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.acc-empty-card      { padding: 60px; text-align: center; background: linear-gradient(135deg, #f8f9fa, #e9ecef); }

/* ================================================================
   ACCOUNT — PROFILE PAGE
   ================================================================ */
.profile-grid            { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.profile-card-body       { padding: 40px; }
.profile-header          { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.profile-avatar          { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.profile-avatar-img      { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary); }
.profile-avatar-placeholder { width: 100px; height: 100px; background: linear-gradient(135deg, var(--primary), #8b4513); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; border: 4px solid var(--primary); }
.profile-avatar-upload   { position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); font-size: 14px; }
.profile-header-title    { margin: 0; color: var(--primary); font-size: 28px; }
.profile-header-sub      { margin: 5px 0 0; color: var(--muted); }
.profile-section         { margin-bottom: 30px; }
.profile-section-title   { color: var(--primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.profile-form-grid       { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 20px; align-items: end; }
.profile-form-grid .form-group { margin: 0; }
.profile-input-group     { display: flex; gap: 10px; align-items: stretch; }
.profile-input-group .field { flex: 1; }
.field-readonly          { background: #f8f9fa !important; cursor: not-allowed; }
.verify-ok               { color: #28a745; display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.verify-warn             { color: #ffc107; display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.pending-request-box     { margin-top: 10px; padding: 10px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; color: #856404; }
.pending-request-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.pending-request-detail  { font-size: 14px; }
.notify-list             { display: grid; gap: 15px; }
.notify-item             { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.notify-checkbox         { width: 18px; height: 18px; flex-shrink: 0; }
.notify-desc             { font-size: 14px; color: var(--muted); }
.profile-form-footer     { display: flex; gap: 15px; justify-content: flex-end; margin-top: 10px; }
.modal-overlay           { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; }
.modal-inner             { background: #fff; padding: 30px; border-radius: 12px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-title             { margin: 0 0 20px; color: var(--primary); }
.modal-preview-wrap      { margin-bottom: 20px; position: relative; max-height: 400px; overflow: hidden; }
.modal-preview-img       { max-width: 100%; display: block; }
.modal-actions           { display: flex; gap: 10px; justify-content: flex-end; }
.profile-card-body       { padding: 40px; }
.profile-header          { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.profile-header-title    { margin: 0; color: var(--primary); font-size: 28px; }
.profile-header-sub      { margin: 5px 0 0; color: var(--muted); }

/* Avatar */
.profile-avatar          { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.profile-avatar-img      { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary); }
.profile-avatar-placeholder { width: 100px; height: 100px; background: linear-gradient(135deg, var(--primary), #8b4513); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; border: 4px solid var(--primary); }
.profile-avatar-upload   { position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); font-size: 14px; }

/* Profile sections */
.profile-section         { margin-bottom: 30px; }
.profile-section-title   { color: var(--primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.profile-input-group     { display: flex; gap: 10px; align-items: stretch; }
.profile-input-group .field { flex: 1; }
.field-readonly          { background: #f8f9fa !important; cursor: not-allowed; }
.field-hint              { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.verify-ok               { color: #28a745; display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; }
.verify-warn             { color: #ffc107; display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; }
.pending-request-box     { margin-top: 10px; }
.pending-request-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 14px; }
.pending-request-detail  { font-size: 14px; }

/* Inline notification checkboxes (form) */
.notify-list             { display: grid; gap: 15px; }
.notify-item             { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.notify-checkbox         { width: 18px; height: 18px; }
.notify-desc             { font-size: 14px; color: var(--muted); }

/* Profile form footer */
.profile-form-footer     { display: flex; gap: 15px; }
.profile-form-grid       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Account icon helpers */
.acc-icon                { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.acc-icon--lg            { width: 80px; height: 80px; font-size: 32px; }
.acc-icon--neutral       { background: linear-gradient(135deg, #e9ecef, #dee2e6); color: #6c757d; width: 80px; height: 80px; margin: 0 auto; }

/* Empty state card */
.acc-empty-card          { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); }

/* Utility */
.btn-block               { width: 100%; }
.muted                   { color: var(--muted); }

.profile-upload-form     { margin-bottom: 30px; }
.profile-main-form       { display: grid; gap: 20px; }

/* ================================================================
   ACCOUNT — STAT / INFO CARDS (overview tiles)
   ================================================================ */
.acc-stat-list           { display: grid; gap: 20px; }
.acc-stat-card           { padding: 20px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; }
.acc-stat-row            { display: flex; justify-content: space-between; align-items: center; }
.acc-stat-title          { margin: 0; color: var(--dark); font-size: 16px; font-weight: 600; }
.acc-stat-sub            { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.acc-stat-sub--sm        { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.acc-stat-icon           { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), #8b4513); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.acc-stat-icon--danger   { background: linear-gradient(135deg, #dc3545, #c82333); }
.acc-stat-icon--success  { background: linear-gradient(135deg, #28a745, #20c997); }
.acc-stat-icon--warn     { background: linear-gradient(135deg, #ffc107, #fd7e14); }
.acc-stat-icon--info     { background: linear-gradient(135deg, #6c757d, #495057); }

/* ================================================================
   ACCOUNT — SECTION CARD HEADERS
   ================================================================ */
.section-card-header     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; }
.section-card-title-row  { display: flex; align-items: center; gap: 15px; }
.section-icon            { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; }
.section-icon--primary   { background: linear-gradient(135deg, var(--primary), #8b4513); }
.section-icon--danger    { background: linear-gradient(135deg, #dc3545, #c82333); }
.section-icon--info      { background: linear-gradient(135deg, #17a2b8, #138496); }
.section-card-h2         { margin: 0; color: var(--primary); font-size: 28px; }
.section-card-sub        { color: var(--muted); font-size: 16px; margin-top: 8px; }

/* ================================================================
   ACCOUNT — MODALS (shared)
   ================================================================ */
.modal-header            { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.modal-h3                { margin: 0; color: var(--primary); font-size: 20px; display: flex; align-items: center; gap: 10px; }
.modal-close-btn         { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; }
.modal-footer            { display: flex; gap: 10px; margin-top: 10px; }
.modal-footer .btn       { flex: 1; }

/* ================================================================
   ACCOUNT — ALERT MESSAGES
   ================================================================ */
.alert-msg               { display: none; padding: 15px; border-radius: 8px; margin-top: 15px; }
.alert-msg-row           { display: flex; align-items: center; gap: 10px; }
.alert-msg-icon          { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; }
.alert-msg-title         { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.alert-msg-text          { margin: 0; font-size: 12px; }
.alert-success           { background: linear-gradient(135deg, #d4edda, #c3e6cb); border: 1px solid #c3e6cb; color: #155724; }
.alert-success .alert-msg-icon { background: linear-gradient(135deg, #28a745, #20c997); }
.alert-error             { background: linear-gradient(135deg, #f8d7da, #f5c6cb); border: 1px solid #f5c6cb; color: #721c24; }
.alert-error .alert-msg-icon { background: linear-gradient(135deg, #dc3545, #c82333); }

/* ================================================================
   ACCOUNT — INFO / NOTE BOXES
   ================================================================ */
.info-box                { padding: 20px; border-radius: 8px; }
.info-box--blue          { background: linear-gradient(135deg, #d1ecf1, #bee5eb); border: 1px solid #bee5eb; color: #0c5460; }
.info-box--green         { background: linear-gradient(135deg, #d4edda, #c3e6cb); border: 1px solid #c3e6cb; color: #155724; }
.info-box--yellow        { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
.info-box-title          { margin: 0 0 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.info-box-text           { margin: 0; font-size: 13px; line-height: 1.5; }

/* ================================================================
   ACCOUNT — SECURITY / 2FA TOGGLE OPTIONS
   ================================================================ */
.toggle-option           { display: flex; align-items: center; padding: 15px; border: 2px solid #e9ecef; border-radius: 8px; cursor: pointer; transition: border-color 0.2s; }
.toggle-option:hover     { border-color: #28a745; }
.toggle-option input[type="radio"] { margin-right: 12px; }
.toggle-option-body      { flex: 1; }
.toggle-option-label     { font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.toggle-option-desc      { font-size: 12px; color: var(--muted); }
.toggle-option-list      { display: grid; gap: 10px; }
.security-setting-row    { padding: 15px; background: #f8f9fa; border-radius: 8px; }
.security-setting-row--primary { border-left: 4px solid var(--primary); }
.security-setting-row--warn    { border-left: 4px solid #ffc107; }
.security-row-inner      { display: flex; justify-content: space-between; align-items: center; }
.security-row-sub        { font-size: 14px; color: var(--muted); margin-top: 5px; }

/* ================================================================
   ACCOUNT — PASSWORD FIELD WITH TOGGLE
   ================================================================ */
.pwd-field-wrap          { position: relative; }
.pwd-field-wrap .field   { padding-right: 50px; }
.pwd-toggle-btn          { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.strength-bars           { display: flex; gap: 4px; margin-bottom: 5px; }
.strength-bar            { height: 4px; flex: 1; background: #e9ecef; border-radius: 2px; }
.strength-text           { color: var(--muted); font-size: 12px; }
.pwd-reqs-box            { padding: 15px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 8px; border: 1px solid #e9ecef; }
.pwd-reqs-title          { margin: 0 0 10px; color: var(--dark); font-size: 13px; font-weight: 600; }
.pwd-reqs-list           { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.req--fail               { color: #dc3545; }
.req--pass               { color: #28a745; }

/* ================================================================
   ACCOUNT — ADDRESS CARDS
   ================================================================ */
.addr-list               { display: grid; gap: 20px; }
.addr-card               { padding: 25px; background: linear-gradient(135deg, #fff, #f8f9fa); border: 1px solid #e9ecef; border-radius: 12px; position: relative; }
.addr-badge-wrap         { position: absolute; top: -10px; right: 20px; }
.addr-badge-default      { background: linear-gradient(135deg, var(--primary), #8b4513); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.addr-grid               { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.addr-name               { margin: 0 0 5px; color: var(--dark); font-size: 18px; font-weight: 600; }
.addr-phone              { margin: 0; color: var(--muted); font-size: 14px; }
.addr-lines              { color: var(--dark); line-height: 1.6; margin-bottom: 15px; }
.addr-lines p            { margin: 0; }
.addr-type-badge         { background: #f8f9fa; color: var(--dark); padding: 4px 8px; border-radius: 12px; font-size: 12px; text-transform: capitalize; display: inline-block; }
.addr-actions            { display: flex; flex-direction: column; gap: 8px; }
.addr-form               { margin: 0; }
.addr-name-wrap          { margin-bottom: 15px; }
.btn-danger-outline      { color: #dc3545; border-color: #dc3545; }
.btn-danger-outline:hover { background: #dc3545 !important; color: #fff !important; }
.btn-addr-action         { padding: 8px 12px; font-size: 12px; }

/* ================================================================
   ACCOUNT — NOTIFICATION TOGGLE ROWS
   ================================================================ */
.notify-channel-row      { display: flex; align-items: center; padding: 15px; border: 2px solid #e9ecef; border-radius: 8px; cursor: pointer; }
.notify-channel-row input[type="checkbox"] { margin-right: 12px; }
.notify-channel-body     { flex: 1; }
.notify-channel-title    { font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.notify-channel-sub      { font-size: 12px; color: var(--muted); }
.text-danger             { color: #dc3545; }
.text-success            { color: #28a745; }
.text-warn               { color: #ffc107; }
.text-info               { color: #17a2b8; }
.text-fw600              { font-weight: 600; }
.section-icon--success   { background: linear-gradient(135deg, #28a745, #20c997); }
.section-icon--warn      { background: linear-gradient(135deg, #ffc107, #e0a800); }
.section-pt-0            { padding-top: 0 !important; }
.form-grid-2col          { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.acc-2fa-actions         { margin-top: 15px; display: flex; gap: 8px; }
.acc-2fa-enable          { margin-top: 15px; }
.acc-btn-enable2fa       { background: linear-gradient(135deg, #28a745, #20c997); border: none; font-size: 13px; padding: 8px 16px; }
.modal-form-grid         { display: grid; gap: 20px; }
.modal-inner--sm         { max-width: 500px; }
.acc-btn-change-pwd      { background: linear-gradient(135deg, #dc3545, #c82333) !important; border: none !important; }
.acc-btn-configure-notif { background: linear-gradient(135deg, #17a2b8, #138496) !important; border: none !important; }
.text-whatsapp           { color: #25d366; }
.text-primary            { color: var(--primary); }

/* ================================================================
   ACCOUNT — QUICK ACTIONS SIDE PANEL
   ================================================================ */
.side-quick-actions      { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e9ecef; }
.side-quick-title        { color: var(--primary); margin-bottom: 20px; font-size: 20px; }
.side-quick-list         { display: grid; gap: 10px; }
.btn-text-left           { text-align: left !important; }

/* ================================================================
   SHOP — SIDEBAR FILTER
   ================================================================ */
.search-container { display: flex; align-items: center; }
.search-container .field { flex: 1; }

.sidebar-filter { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); padding: 24px; position: sticky; top: 20px; }
.filter-block { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f0f0f0; }
.filter-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-block h4 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.filter-header { cursor: pointer; user-select: none; padding: 8px 0; transition: color 0.3s ease; }
.filter-header:hover { color: var(--primary); }
.filter-toggle { font-size: 12px; color: #999; transition: transform 0.3s ease; }
.filter-header:hover .filter-toggle { color: var(--primary); }

.checkbox-list li { margin-bottom: 12px; }
.checkbox-list label { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; font-size: 14px; color: #4a4a4a; }
.checkbox-list label:hover { background: #f8f9fa; color: var(--primary); }
.checkbox-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.radio-list li { margin-bottom: 12px; }
.radio-list label { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; font-size: 14px; color: #4a4a4a; }
.radio-list label:hover { background: #f8f9fa; color: var(--primary); }
.radio-list input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

.price-slider-container { padding: 10px 0; }
.price-display { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: #1a1a2e; }
.slider-wrapper { position: relative; height: 40px; }
.price-slider { position: relative; width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; top: 50%; transform: translateY(-50%); }
.slider-track { position: absolute; width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; }
.slider-range { position: absolute; height: 6px; background: linear-gradient(90deg, var(--primary), #d4af37); border-radius: 3px; }
.slider-thumb { position: absolute; width: 20px; height: 20px; background: #fff; border: 3px solid var(--primary); border-radius: 50%; cursor: pointer; top: 50%; transform: translate(-50%,-50%); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.slider-thumb:hover { transform: translate(-50%,-50%) scale(1.2); box-shadow: 0 4px 12px rgba(212,175,55,0.4); }
.slider-thumb:active { transform: translate(-50%,-50%) scale(1.1); }

/* ================================================================
   SHOP — VARIANT BADGES
   ================================================================ */
.variant-info { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.variant-size { background: linear-gradient(135deg, var(--primary), #d4af37); color: white; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.variant-stock { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; }
.variant-stock.in-stock { background: #e8f5e9; color: #2e7d32; }
.variant-stock.out-of-stock { background: #ffebee; color: #c62828; }

/* ================================================================
   SHOP — INFINITE SCROLL / LOAD MORE
   ================================================================ */
.load-indicator { margin: 20px 0; text-align: center; padding: 40px 20px; }
.load-indicator-inner { display: inline-block; padding: 20px; border-radius: 8px; }
.load-indicator-inner--loading { background: var(--primary); color: #fff; }
.load-indicator-inner--done { background: #f8f9fa; color: var(--muted); border: 1px solid #e9ecef; }
.load-more-container { text-align: center; padding: 30px 0; margin: 20px 0; }
.load-more-btn { padding: 15px 30px !important; font-size: 16px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.load-more-btn:hover { transform: translateY(-2px); }

/* ================================================================
   SHOP — SCOPED PRODUCT CARD OVERRIDES (inside .filters-layout)
   ================================================================ */
.filters-layout .product-card { background: #fff; border: 1px solid #e9ecef; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); height: 100%; display: flex; flex-direction: column; }
.filters-layout .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.filters-layout .product-thumb { height: 180px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.filters-layout .product-thumb img { height: 180px; }
.filters-layout .product-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.filters-layout .product-title { font-size: 16px; font-weight: 600; min-height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.filters-layout .product-body p { font-size: 12px; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.filters-layout .price { font-size: 18px; }
.filters-layout .card-actions { margin-top: auto; }
.filters-layout .rating { font-size: 11px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }

/* Grid layout for shop page */
.filters-layout .grid-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 30px; }
@media (max-width: 1200px) { .filters-layout .grid-3 { grid-template-columns: repeat(3,1fr); gap: 20px; } }
@media (max-width: 768px) {
  .filters-layout { flex-direction: column; }
  .filters-layout aside { order: 2; }
  .filters-layout main { order: 1; }
  .sidebar-filter { position: relative; }
  .filter-block { border-bottom: 1px solid #e9ecef; padding-bottom: 15px; margin-bottom: 15px; }
  .filter-block:last-child { border-bottom: none; }
  .checkbox-list input[type="checkbox"] { min-width: 18px; min-height: 18px; }
  .filter-header { padding: 10px 0; }
  .filter-content { padding-left: 10px; }
  .filters-layout .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; }
}
@media (max-width: 480px) {
  .filters-layout .product-thumb { height: 160px; }
  .filters-layout .product-thumb img { height: 160px; }
  .filters-layout .product-body { padding: 12px; }
  .filters-layout .product-title { font-size: 15px; }
  .filters-layout .grid-3 { grid-template-columns: repeat(2,1fr) !important; gap: 15px !important; }
}