/* ============================================================
   6VALLEY — MASTER DESIGN SYSTEM
   Modern eCommerce UI — 2026 Redesign
   ============================================================ */

/* ─── GOOGLE FONTS ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ─── CSS CUSTOM PROPERTIES ───────────────────────────────── */
:root {
  --primary:          #0F172A;
  --primary-hover:    #1E293B;
  --accent:           #10B981;
  --accent-hover:     #059669;
  --accent-light:     rgba(16,185,129,.08);
  --gold:             #F59E0B;
  --danger:           #EF4444;
  --bg:               #F8FAFC;
  --bg-2:             #F1F5F9;
  --white:            #FFFFFF;
  --text:             #1E293B;
  --text-muted:       #64748B;
  --border:           #E2E8F0;
  --border-light:     #F1F5F9;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 25px -5px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 40px -10px rgba(0,0,0,.12);
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
  --font:       'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  background-color: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { transition: color var(--transition); }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

/* ─── TYPOGRAPHY SCALE ─────────────────────────────────────── */
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-28 { font-size: 28px !important; }
.fs-32 { font-size: 32px !important; }

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* Legacy aliases */
.tsb { font-weight: 600; }
.tb  { font-weight: 700; }
.twr { font-weight: 400; }
.rr  { font-weight: 400; }
.rb  { font-weight: 700; }

/* ─── SECTION HEADINGS ──────────────────────────────────────── */
.section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.section-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.section-view-all:hover { gap: 8px; }

/* ─── BUTTON SYSTEM ─────────────────────────────────────────── */
.btn {
  font-family: var(--font) !important;
  font-weight: 600;
  border-radius: var(--radius) !important;
  transition: all var(--transition) !important;
  letter-spacing: 0.2px;
}

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.18) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.24) !important;
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,.25) !important;
}
.btn-accent:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 4px 16px rgba(16,185,129,.35) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn-outline-accent {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
}
.btn-outline-accent:hover,
.btn-outline-accent:not(:disabled):not(.disabled):active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.btn-sm { padding: 6px 14px !important; font-size: 13px !important; }
.btn-md { padding: 9px 20px !important; font-size: 14px !important; }
.btn-lg { padding: 12px 28px !important; font-size: 16px !important; }

/* ─── CARD SYSTEM ───────────────────────────────────────────── */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white);
}

.card-hover {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border) !important;
}

/* ─── BADGE SYSTEM ──────────────────────────────────────────── */
.badge-accent {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.badge-danger {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.badge-gold {
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

/* ─── SKELETON LOADING ANIMATION ────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}

/* ─── COLORS & UTILITY ──────────────────────────────────────── */
.text-accent   { color: var(--accent)  !important; }
.text-primary  { color: var(--primary) !important; }
.text-muted-sm { color: var(--text-muted) !important; font-size: 13px; }
.bg-accent     { background: var(--accent) !important; }
.bg-primary-soft { background: rgba(15,23,42,.06) !important; }
.bg-accent-soft  { background: var(--accent-light) !important; }

/* ─── PAGE ITEM / PAGINATION ────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}
.page-link { color: var(--primary); border-radius: var(--radius) !important; }
.page-link:hover { color: var(--accent); }

/* ─── ACTIVE MENU ───────────────────────────────────────────── */
.active-menu { color: var(--accent) !important; }

/* ─── DROPDOWN ──────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  min-width: 200px !important;
  padding: 8px !important;
}
.dropdown-item {
  border-radius: var(--radius-sm) !important;
  padding: 9px 14px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.15s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ─── FORM CONTROLS ─────────────────────────────────────────── */
.form-control {
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  font-size: 14px;
  padding: 10px 16px;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
  outline: none;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── FOR PRODUCT DISCOUNT BADGE ────────────────────────────── */
.for-discoutn-value {
  background: var(--danger);
  color: #fff;
  border-radius: var(--radius-sm) 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
}

/* ─── PRODUCT CARD BASE ─────────────────────────────────────── */
.product-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--white);
  height: 100%;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md) !important;
}
.product-card .card-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ─── STAR RATING ────────────────────────────────────────────── */
.czi-star-filled { color: var(--gold) !important; }

/* ─── DISCOUNT TOP-LEFT BADGE POSITION ──────────────────────── */
.discount-top-f { position: absolute; }
html[dir="ltr"] .discount-top-f { left: 0; }
html[dir="rtl"] .discount-top-f { right: 0; }

/* ─── NAVBAR TOOL LABEL (CART/WISH COUNT) ───────────────────── */
.navbar-tool .navbar-tool-label {
  position: absolute;
  top: -.3125rem;
  right: -.3125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent) !important;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25rem;
}

/* ─── CHECK‌BOX ALPHANUMERIC ────────────────────────────────── */
.checkbox-alphanumeric::after, .checkbox-alphanumeric::before { content:''; display:table; }
.checkbox-alphanumeric::after { clear:both; }
.checkbox-alphanumeric input { left:-9999px; position:absolute; }
.checkbox-alphanumeric label {
  width:2.25rem; height:2.25rem; float:left; padding:.375rem 0;
  margin-right:.375rem; display:block; color:#818a91; font-size:.875rem;
  font-weight:400; text-align:center; background:transparent; text-transform:uppercase;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:all .25s ease; transform:scale(.95);
}
.checkbox-alphanumeric-circle label { border-radius:100%; }
.checkbox-alphanumeric label > img { max-width:100%; }
.checkbox-alphanumeric label:hover { cursor:pointer; border-color:var(--accent); }
.checkbox-alphanumeric input:checked ~ label { transform:scale(1.08); border-color:var(--accent) !important; }
.checkbox-alphanumeric--style-1 label { width:auto; padding-left:1rem; padding-right:1rem; }
.d-table.checkbox-alphanumeric--style-1 label { width:100%; }

/* ─── CHECKBOX COLOR ────────────────────────────────────────── */
.checkbox-color::after,.checkbox-color::before{content:'';display:table;}
.checkbox-color::after{clear:both;}
.checkbox-color input{left:-9999px;position:absolute;}
.checkbox-color label {
  width:2.25rem;height:2.25rem;float:left;padding:.375rem;margin-right:.375rem;
  display:block;font-size:.875rem;text-align:center;opacity:.7;
  border:2px solid var(--border);border-radius:50%;
  transition:all .25s ease;transform:scale(.95);
  box-shadow:var(--shadow-sm);border-radius:var(--radius-sm) !important;max-height:35px;
}
.checkbox-color label:hover{cursor:pointer;opacity:1;}
.checkbox-color input:checked ~ label{transform:scale(1.08);opacity:1;border:2px solid var(--gold) !important;}
.checkbox-color input:checked ~ label:after {
  content:"\2713";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.8);font-size:13px;
}

/* ─── STOCK OUT OVERLAY ──────────────────────────────────────── */
.stock-out {
  position:absolute; top:40% !important; color:#fff !important;
  font-weight:800; font-size:14px; letter-spacing:.5px;
}
html[dir="ltr"] .stock-out { left:30% !important; }
html[dir="rtl"] .stock-out { right:30% !important; }

/* ─── FEATURE SECTION HEADER ─────────────────────────────────── */
.feature_header span {
  font-weight:700; font-size:22px; text-transform:uppercase;
  background-color: var(--bg) !important;
}
html[dir="ltr"] .feature_header span { padding-right:15px; }
html[dir="rtl"] .feature_header span  { padding-left:15px; }

.view_border {
  margin-top:-53px; border-top:2px solid var(--border-light); margin-bottom:53px;
}

/* ─── BTN SCROLL TO TOP ──────────────────────────────────────── */
.btn-scroll-top {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:44px; height:44px; border-radius:50%;
  background:var(--primary); color:#fff !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  transition:all var(--transition);
  opacity:0; pointer-events:none;
}
.btn-scroll-top.shown { opacity:1; pointer-events:auto; }
.btn-scroll-top:hover { background:var(--accent); transform:translateY(-3px); }
.btn-scroll-top-tooltip { display:none; }

/* ─── SECTION GAP ────────────────────────────────────────────── */
.section-gap     { padding-top:48px; padding-bottom:48px; }
.section-gap-sm  { padding-top:28px; padding-bottom:28px; }
.section-gap-lg  { padding-top:72px; padding-bottom:72px; }
.mb-section      { margin-bottom:48px; }

/* ─── RESPONSIVE UTILITIES ───────────────────────────────────── */
.mobileshow { display: none; }
@media (max-width: 500px) { .mobileshow { display: block; } }

@media (max-width: 768px) {
  .feature_header { margin-top:0; display:flex; justify-content:flex-start !important; }
  .store-contents { justify-content:center; }
  .feature_header span { padding:0; font-size:20px; }
  .view_border { margin:16px 0; border-top:2px solid var(--border-light) !important; }
  .section-gap { padding-top:32px; padding-bottom:32px; }
}

/* ─── RADIO CUSTOM ───────────────────────────────────────────── */
[type="radio"] {
  border:0; clip:rect(0 0 0 0); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px;
}
[type="radio"] + span:after {
  content:''; display:inline-block; width:1.1em; height:1.1em;
  vertical-align:-.10em; border-radius:1em; border:.35em solid #fff;
  box-shadow:0 0 0 .10em var(--accent); margin-left:.75em; transition:.4s ease all;
}
[type="radio"]:checked + span:after {
  background:var(--accent); box-shadow:0 0 0 .10em var(--accent);
}

/* ─── SCROLL BAR CONTAINER ───────────────────────────────────── */
.scroll-bar {
  max-height: calc(100vh - 100px);
  overflow-y: auto !important;
}

/* ─── FLEX HELPERS ───────────────────────────────────────────── */
.flex-start   { display:flex; justify-content:flex-start; }
.flex-center  { display:flex; justify-content:center; }
.flex-around  { display:flex; justify-content:space-around; }
.flex-between { display:flex; justify-content:space-between; }
.row-reverse  { display:flex; flex-direction:row-reverse; }

/* ─── COUNT VALUE PILL ───────────────────────────────────────── */
.count-value {
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--accent) !important; color:#fff;
  font-size:.7rem; font-weight:700; text-align:center; line-height:1.25rem;
}