:root {
    /* Blue */
    --bs-blue: #0d6efd;
    --bs-blue-100: #cfe2ff;
    --bs-blue-200: #9ec5fe;
    --bs-blue-300: #6ea8fe;
    --bs-blue-400: #3d8bfd;
    --bs-blue-500: #0d6efd;
    --bs-blue-600: #0a58ca;
    --bs-blue-700: #084298;
    --bs-blue-800: #052c65;
    --bs-blue-900: #031633;
    /* Indigo */
    --bs-indigo: #6610f2;
    --bs-indigo-100: #e0cffc;
    --bs-indigo-200: #c29ffa;
    --bs-indigo-300: #a370f7;
    --bs-indigo-400: #8540f5;
    --bs-indigo-500: #6610f2;
    --bs-indigo-600: #520dc2;
    --bs-indigo-700: #3d0a91;
    --bs-indigo-800: #290661;
    --bs-indigo-900: #140330;
    /* Purple */
    --bs-purple: #6f42c1;
    --bs-purple-100: #e2d9f3;
    --bs-purple-200: #c5b3e6;
    --bs-purple-300: #a98eda;
    --bs-purple-400: #8c68cd;
    --bs-purple-500: #6f42c1;
    --bs-purple-600: #59359a;
    --bs-purple-700: #432874;
    --bs-purple-800: #2c1a4d;
    --bs-purple-900: #160d27;
    /* Pink */
    --bs-pink: #d63384;
    --bs-pink-100: #f7d6e6;
    --bs-pink-200: #efadce;
    --bs-pink-300: #e685b5;
    --bs-pink-400: #de5c9d;
    --bs-pink-500: #d63384;
    --bs-pink-600: #ab296a;
    --bs-pink-700: #801f4f;
    --bs-pink-800: #561435;
    --bs-pink-900: #2b0a1a;
    /* Red */
    --bs-red: #dc3545;
    --bs-red-100: #f8d7da;
    --bs-red-200: #f1aeb5;
    --bs-red-300: #ea868f;
    --bs-red-400: #e35d6a;
    --bs-red-500: #dc3545;
    --bs-red-600: #b02a37;
    --bs-red-700: #842029;
    --bs-red-800: #58151c;
    --bs-red-900: #2c0b0e;
    /* Orange */
    --bs-orange: #fd7e14;
    --bs-orange-100: #ffe5d0;
    --bs-orange-200: #fecba1;
    --bs-orange-300: #feb272;
    --bs-orange-400: #fd9843;
    --bs-orange-500: #fd7e14;
    --bs-orange-600: #ca6510;
    --bs-orange-700: #984c0c;
    --bs-orange-800: #653208;
    --bs-orange-900: #331904;
    /* Yellow */
    --bs-yellow: #ffc107;
    --bs-yellow-100: #fff3cd;
    --bs-yellow-200: #ffe69c;
    --bs-yellow-300: #ffda6a;
    --bs-yellow-400: #ffcd39;
    --bs-yellow-500: #ffc107;
    --bs-yellow-600: #cc9a06;
    --bs-yellow-700: #997404;
    --bs-yellow-800: #664d03;
    --bs-yellow-900: #332701;
    /* Green */
    --bs-green: #198754;
    --bs-green-100: #d1e7dd;
    --bs-green-200: #a3cfbb;
    --bs-green-300: #75b798;
    --bs-green-400: #479f76;
    --bs-green-500: #198754;
    --bs-green-600: #146c43;
    --bs-green-700: #0f5132;
    --bs-green-800: #0a3622;
    --bs-green-900: #051b11;
    /* Teal */
    --bs-teal: #20c997;
    --bs-teal-100: #d2f4ea;
    --bs-teal-200: #a6e9d5;
    --bs-teal-300: #79dfc1;
    --bs-teal-400: #4dd4ac;
    --bs-teal-500: #20c997;
    --bs-teal-600: #1aa179;
    --bs-teal-700: #13795b;
    --bs-teal-800: #0d503c;
    --bs-teal-900: #06281e;
    /* Cyan */
    --bs-cyan: #0dcaf0;
    --bs-cyan-100: #cff4fc;
    --bs-cyan-200: #9eeaf9;
    --bs-cyan-300: #6edff6;
    --bs-cyan-400: #3dd5f3;
    --bs-cyan-500: #0dcaf0;
    --bs-cyan-600: #0aa2c0;
    --bs-cyan-700: #087990;
    --bs-cyan-800: #055160;
    --bs-cyan-900: #032830;
    /* Gray */
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
}

/* ============================================
   BACKGROUND COLORS - bg-*
   ============================================ */

/* Blue */
.bg-blue-100 {
    background-color: var(--bs-blue-100) !important;
}

.bg-blue-200 {
    background-color: var(--bs-blue-200) !important;
}

.bg-blue-300 {
    background-color: var(--bs-blue-300) !important;
}

.bg-blue-400 {
    background-color: var(--bs-blue-400) !important;
}

.bg-blue-500 {
    background-color: var(--bs-blue-500) !important;
}

.bg-blue-600 {
    background-color: var(--bs-blue-600) !important;
}

.bg-blue-700 {
    background-color: var(--bs-blue-700) !important;
}

.bg-blue-800 {
    background-color: var(--bs-blue-800) !important;
}

.bg-blue-900 {
    background-color: var(--bs-blue-900) !important;
}

/* Indigo */
.bg-indigo-100 {
    background-color: var(--bs-indigo-100) !important;
}

.bg-indigo-200 {
    background-color: var(--bs-indigo-200) !important;
}

.bg-indigo-300 {
    background-color: var(--bs-indigo-300) !important;
}

.bg-indigo-400 {
    background-color: var(--bs-indigo-400) !important;
}

.bg-indigo-500 {
    background-color: var(--bs-indigo-500) !important;
}

.bg-indigo-600 {
    background-color: var(--bs-indigo-600) !important;
}

.bg-indigo-700 {
    background-color: var(--bs-indigo-700) !important;
}

.bg-indigo-800 {
    background-color: var(--bs-indigo-800) !important;
}

.bg-indigo-900 {
    background-color: var(--bs-indigo-900) !important;
}

/* Purple */
.bg-purple-100 {
    background-color: var(--bs-purple-100) !important;
}

.bg-purple-200 {
    background-color: var(--bs-purple-200) !important;
}

.bg-purple-300 {
    background-color: var(--bs-purple-300) !important;
}

.bg-purple-400 {
    background-color: var(--bs-purple-400) !important;
}

.bg-purple-500 {
    background-color: var(--bs-purple-500) !important;
}

.bg-purple-600 {
    background-color: var(--bs-purple-600) !important;
}

.bg-purple-700 {
    background-color: var(--bs-purple-700) !important;
}

.bg-purple-800 {
    background-color: var(--bs-purple-800) !important;
}

.bg-purple-900 {
    background-color: var(--bs-purple-900) !important;
}

/* Pink */
.bg-pink-100 {
    background-color: var(--bs-pink-100) !important;
}

.bg-pink-200 {
    background-color: var(--bs-pink-200) !important;
}

.bg-pink-300 {
    background-color: var(--bs-pink-300) !important;
}

.bg-pink-400 {
    background-color: var(--bs-pink-400) !important;
}

.bg-pink-500 {
    background-color: var(--bs-pink-500) !important;
}

.bg-pink-600 {
    background-color: var(--bs-pink-600) !important;
}

.bg-pink-700 {
    background-color: var(--bs-pink-700) !important;
}

.bg-pink-800 {
    background-color: var(--bs-pink-800) !important;
}

.bg-pink-900 {
    background-color: var(--bs-pink-900) !important;
}

/* Red */
.bg-red-100 {
    background-color: var(--bs-red-100) !important;
}

.bg-red-200 {
    background-color: var(--bs-red-200) !important;
}

.bg-red-300 {
    background-color: var(--bs-red-300) !important;
}

.bg-red-400 {
    background-color: var(--bs-red-400) !important;
}

.bg-red-500 {
    background-color: var(--bs-red-500) !important;
}

.bg-red-600 {
    background-color: var(--bs-red-600) !important;
}

.bg-red-700 {
    background-color: var(--bs-red-700) !important;
}

.bg-red-800 {
    background-color: var(--bs-red-800) !important;
}

.bg-red-900 {
    background-color: var(--bs-red-900) !important;
}

/* Orange */
.bg-orange-100 {
    background-color: var(--bs-orange-100) !important;
}

.bg-orange-200 {
    background-color: var(--bs-orange-200) !important;
}

.bg-orange-300 {
    background-color: var(--bs-orange-300) !important;
}

.bg-orange-400 {
    background-color: var(--bs-orange-400) !important;
}

.bg-orange-500 {
    background-color: var(--bs-orange-500) !important;
}

.bg-orange-600 {
    background-color: var(--bs-orange-600) !important;
}

.bg-orange-700 {
    background-color: var(--bs-orange-700) !important;
}

.bg-orange-800 {
    background-color: var(--bs-orange-800) !important;
}

.bg-orange-900 {
    background-color: var(--bs-orange-900) !important;
}

/* Yellow */
.bg-yellow-100 {
    background-color: var(--bs-yellow-100) !important;
}

.bg-yellow-200 {
    background-color: var(--bs-yellow-200) !important;
}

.bg-yellow-300 {
    background-color: var(--bs-yellow-300) !important;
}

.bg-yellow-400 {
    background-color: var(--bs-yellow-400) !important;
}

.bg-yellow-500 {
    background-color: var(--bs-yellow-500) !important;
}

.bg-yellow-600 {
    background-color: var(--bs-yellow-600) !important;
}

.bg-yellow-700 {
    background-color: var(--bs-yellow-700) !important;
}

.bg-yellow-800 {
    background-color: var(--bs-yellow-800) !important;
}

.bg-yellow-900 {
    background-color: var(--bs-yellow-900) !important;
}

/* Green */
.bg-green-100 {
    background-color: var(--bs-green-100) !important;
}

.bg-green-200 {
    background-color: var(--bs-green-200) !important;
}

.bg-green-300 {
    background-color: var(--bs-green-300) !important;
}

.bg-green-400 {
    background-color: var(--bs-green-400) !important;
}

.bg-green-500 {
    background-color: var(--bs-green-500) !important;
}

.bg-green-600 {
    background-color: var(--bs-green-600) !important;
}

.bg-green-700 {
    background-color: var(--bs-green-700) !important;
}

.bg-green-800 {
    background-color: var(--bs-green-800) !important;
}

.bg-green-900 {
    background-color: var(--bs-green-900) !important;
}

/* Teal */
.bg-teal-100 {
    background-color: var(--bs-teal-100) !important;
}

.bg-teal-200 {
    background-color: var(--bs-teal-200) !important;
}

.bg-teal-300 {
    background-color: var(--bs-teal-300) !important;
}

.bg-teal-400 {
    background-color: var(--bs-teal-400) !important;
}

.bg-teal-500 {
    background-color: var(--bs-teal-500) !important;
}

.bg-teal-600 {
    background-color: var(--bs-teal-600) !important;
}

.bg-teal-700 {
    background-color: var(--bs-teal-700) !important;
}

.bg-teal-800 {
    background-color: var(--bs-teal-800) !important;
}

.bg-teal-900 {
    background-color: var(--bs-teal-900) !important;
}

/* Cyan */
.bg-cyan-100 {
    background-color: var(--bs-cyan-100) !important;
}

.bg-cyan-200 {
    background-color: var(--bs-cyan-200) !important;
}

.bg-cyan-300 {
    background-color: var(--bs-cyan-300) !important;
}

.bg-cyan-400 {
    background-color: var(--bs-cyan-400) !important;
}

.bg-cyan-500 {
    background-color: var(--bs-cyan-500) !important;
}

.bg-cyan-600 {
    background-color: var(--bs-cyan-600) !important;
}

.bg-cyan-700 {
    background-color: var(--bs-cyan-700) !important;
}

.bg-cyan-800 {
    background-color: var(--bs-cyan-800) !important;
}

.bg-cyan-900 {
    background-color: var(--bs-cyan-900) !important;
}

/* Gray */
.bg-gray-100 {
    background-color: var(--bs-gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--bs-gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--bs-gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--bs-gray-400) !important;
}

.bg-gray-500 {
    background-color: var(--bs-gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--bs-gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--bs-gray-700) !important;
}

.bg-gray-800 {
    background-color: var(--bs-gray-800) !important;
}

.bg-gray-900 {
    background-color: var(--bs-gray-900) !important;
}

/* ============================================
   TEXT COLORS - text-*
   ============================================ */

/* Blue */
.text-blue-100 {
    color: var(--bs-blue-100) !important;
}

.text-blue-200 {
    color: var(--bs-blue-200) !important;
}

.text-blue-300 {
    color: var(--bs-blue-300) !important;
}

.text-blue-400 {
    color: var(--bs-blue-400) !important;
}

.text-blue-500 {
    color: var(--bs-blue-500) !important;
}

.text-blue-600 {
    color: var(--bs-blue-600) !important;
}

.text-blue-700 {
    color: var(--bs-blue-700) !important;
}

.text-blue-800 {
    color: var(--bs-blue-800) !important;
}

.text-blue-900 {
    color: var(--bs-blue-900) !important;
}

/* Indigo */
.text-indigo-100 {
    color: var(--bs-indigo-100) !important;
}

.text-indigo-200 {
    color: var(--bs-indigo-200) !important;
}

.text-indigo-300 {
    color: var(--bs-indigo-300) !important;
}

.text-indigo-400 {
    color: var(--bs-indigo-400) !important;
}

.text-indigo-500 {
    color: var(--bs-indigo-500) !important;
}

.text-indigo-600 {
    color: var(--bs-indigo-600) !important;
}

.text-indigo-700 {
    color: var(--bs-indigo-700) !important;
}

.text-indigo-800 {
    color: var(--bs-indigo-800) !important;
}

.text-indigo-900 {
    color: var(--bs-indigo-900) !important;
}

/* Purple */
.text-purple-100 {
    color: var(--bs-purple-100) !important;
}

.text-purple-200 {
    color: var(--bs-purple-200) !important;
}

.text-purple-300 {
    color: var(--bs-purple-300) !important;
}

.text-purple-400 {
    color: var(--bs-purple-400) !important;
}

.text-purple-500 {
    color: var(--bs-purple-500) !important;
}

.text-purple-600 {
    color: var(--bs-purple-600) !important;
}

.text-purple-700 {
    color: var(--bs-purple-700) !important;
}

.text-purple-800 {
    color: var(--bs-purple-800) !important;
}

.text-purple-900 {
    color: var(--bs-purple-900) !important;
}

/* Pink */
.text-pink-100 {
    color: var(--bs-pink-100) !important;
}

.text-pink-200 {
    color: var(--bs-pink-200) !important;
}

.text-pink-300 {
    color: var(--bs-pink-300) !important;
}

.text-pink-400 {
    color: var(--bs-pink-400) !important;
}

.text-pink-500 {
    color: var(--bs-pink-500) !important;
}

.text-pink-600 {
    color: var(--bs-pink-600) !important;
}

.text-pink-700 {
    color: var(--bs-pink-700) !important;
}

.text-pink-800 {
    color: var(--bs-pink-800) !important;
}

.text-pink-900 {
    color: var(--bs-pink-900) !important;
}

/* Red */
.text-red-100 {
    color: var(--bs-red-100) !important;
}

.text-red-200 {
    color: var(--bs-red-200) !important;
}

.text-red-300 {
    color: var(--bs-red-300) !important;
}

.text-red-400 {
    color: var(--bs-red-400) !important;
}

.text-red-500 {
    color: var(--bs-red-500) !important;
}

.text-red-600 {
    color: var(--bs-red-600) !important;
}

.text-red-700 {
    color: var(--bs-red-700) !important;
}

.text-red-800 {
    color: var(--bs-red-800) !important;
}

.text-red-900 {
    color: var(--bs-red-900) !important;
}

/* Orange */
.text-orange-100 {
    color: var(--bs-orange-100) !important;
}

.text-orange-200 {
    color: var(--bs-orange-200) !important;
}

.text-orange-300 {
    color: var(--bs-orange-300) !important;
}

.text-orange-400 {
    color: var(--bs-orange-400) !important;
}

.text-orange-500 {
    color: var(--bs-orange-500) !important;
}

.text-orange-600 {
    color: var(--bs-orange-600) !important;
}

.text-orange-700 {
    color: var(--bs-orange-700) !important;
}

.text-orange-800 {
    color: var(--bs-orange-800) !important;
}

.text-orange-900 {
    color: var(--bs-orange-900) !important;
}

/* Yellow */
.text-yellow-100 {
    color: var(--bs-yellow-100) !important;
}

.text-yellow-200 {
    color: var(--bs-yellow-200) !important;
}

.text-yellow-300 {
    color: var(--bs-yellow-300) !important;
}

.text-yellow-400 {
    color: var(--bs-yellow-400) !important;
}

.text-yellow-500 {
    color: var(--bs-yellow-500) !important;
}

.text-yellow-600 {
    color: var(--bs-yellow-600) !important;
}

.text-yellow-700 {
    color: var(--bs-yellow-700) !important;
}

.text-yellow-800 {
    color: var(--bs-yellow-800) !important;
}

.text-yellow-900 {
    color: var(--bs-yellow-900) !important;
}

/* Green */
.text-green-100 {
    color: var(--bs-green-100) !important;
}

.text-green-200 {
    color: var(--bs-green-200) !important;
}

.text-green-300 {
    color: var(--bs-green-300) !important;
}

.text-green-400 {
    color: var(--bs-green-400) !important;
}

.text-green-500 {
    color: var(--bs-green-500) !important;
}

.text-green-600 {
    color: var(--bs-green-600) !important;
}

.text-green-700 {
    color: var(--bs-green-700) !important;
}

.text-green-800 {
    color: var(--bs-green-800) !important;
}

.text-green-900 {
    color: var(--bs-green-900) !important;
}

/* Teal */
.text-teal-100 {
    color: var(--bs-teal-100) !important;
}

.text-teal-200 {
    color: var(--bs-teal-200) !important;
}

.text-teal-300 {
    color: var(--bs-teal-300) !important;
}

.text-teal-400 {
    color: var(--bs-teal-400) !important;
}

.text-teal-500 {
    color: var(--bs-teal-500) !important;
}

.text-teal-600 {
    color: var(--bs-teal-600) !important;
}

.text-teal-700 {
    color: var(--bs-teal-700) !important;
}

.text-teal-800 {
    color: var(--bs-teal-800) !important;
}

.text-teal-900 {
    color: var(--bs-teal-900) !important;
}

/* Cyan */
.text-cyan-100 {
    color: var(--bs-cyan-100) !important;
}

.text-cyan-200 {
    color: var(--bs-cyan-200) !important;
}

.text-cyan-300 {
    color: var(--bs-cyan-300) !important;
}

.text-cyan-400 {
    color: var(--bs-cyan-400) !important;
}

.text-cyan-500 {
    color: var(--bs-cyan-500) !important;
}

.text-cyan-600 {
    color: var(--bs-cyan-600) !important;
}

.text-cyan-700 {
    color: var(--bs-cyan-700) !important;
}

.text-cyan-800 {
    color: var(--bs-cyan-800) !important;
}

.text-cyan-900 {
    color: var(--bs-cyan-900) !important;
}

/* Gray */
.text-gray-100 {
    color: var(--bs-gray-100) !important;
}

.text-gray-200 {
    color: var(--bs-gray-200) !important;
}

.text-gray-300 {
    color: var(--bs-gray-300) !important;
}

.text-gray-400 {
    color: var(--bs-gray-400) !important;
}

.text-gray-500 {
    color: var(--bs-gray-500) !important;
}

.text-gray-600 {
    color: var(--bs-gray-600) !important;
}

.text-gray-700 {
    color: var(--bs-gray-700) !important;
}

.text-gray-800 {
    color: var(--bs-gray-800) !important;
}

.text-gray-900 {
    color: var(--bs-gray-900) !important;
}

/* ============================================
   BORDER COLORS - border-*
   ============================================ */

.border-blue-500 {
    border-color: var(--bs-blue-500) !important;
}

.border-indigo-500 {
    border-color: var(--bs-indigo-500) !important;
}

.border-purple-500 {
    border-color: var(--bs-purple-500) !important;
}

.border-pink-500 {
    border-color: var(--bs-pink-500) !important;
}

.border-red-500 {
    border-color: var(--bs-red-500) !important;
}

.border-orange-500 {
    border-color: var(--bs-orange-500) !important;
}

.border-yellow-500 {
    border-color: var(--bs-yellow-500) !important;
}

.border-green-500 {
    border-color: var(--bs-green-500) !important;
}

.border-teal-500 {
    border-color: var(--bs-teal-500) !important;
}

.border-cyan-500 {
    border-color: var(--bs-cyan-500) !important;
}

.border-gray-100 {
    border-color: var(--bs-gray-100) !important;
}

.border-gray-200 {
    border-color: var(--bs-gray-200) !important;
}

.border-gray-300 {
    border-color: var(--bs-gray-300) !important;
}

.border-gray-400 {
    border-color: var(--bs-gray-400) !important;
}

.border-gray-500 {
    border-color: var(--bs-gray-500) !important;
}

.border-gray-600 {
    border-color: var(--bs-gray-600) !important;
}

.border-gray-700 {
    border-color: var(--bs-gray-700) !important;
}

.border-gray-800 {
    border-color: var(--bs-gray-800) !important;
}

.border-gray-900 {
    border-color: var(--bs-gray-900) !important;
}

.thumbnails-wrapper {
    width: 100%;
    overflow: hidden;
}

.thumbnails-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    scrollbar-width: thin;
}

.thumbnail-item {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
}

.thumbnail-image {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
}

.thumbnail-image.active {
    border-color: var(--bs-primary);
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */

.min-w-0 {
    min-width: 0;
}

@media (min-width: 992px) {
    .position-lg-sticky {
        position: sticky;
        top: 1rem;
    }
}

.product-gallery-card .carousel-inner img {
    border-radius: .5rem;
}

/* انتخاب رنگ */
.color-option {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--bs-gray-300);
    background-color: #fff;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .95rem;
}

.color-option:hover {
    border-color: var(--bs-primary);
}

.color-option.active {
    border-color: var(--bs-primary);
    background-color: var(--bs-gray-100);
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .15);
}

.color-dot {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: middle;
}

/* شمارنده تعداد */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-gray-300);
    border-radius: .5rem;
    overflow: hidden;
    background-color: #fff;
}

.qty-stepper .btn {
    border: 0;
    border-radius: 0;
    padding: .375rem .7rem;
    background-color: var(--bs-gray-100);
}

.qty-stepper .btn:disabled {
    opacity: .45;
}

.qty-stepper .form-control {
    width: 4rem;
    border: 0;
    border-inline: 1px solid var(--bs-gray-300);
    border-radius: 0;
    box-shadow: none;
    padding-inline: .25rem;
    -moz-appearance: textfield;
}

.qty-stepper .form-control::-webkit-outer-spin-button,
.qty-stepper .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper-sm .btn {
    padding: .25rem .55rem;
}

.qty-stepper-sm .form-control {
    width: 3.25rem;
}

/* ============================================
   CART OFFCANVAS
   ============================================ */

.store-cart-offcanvas {
    --bs-offcanvas-width: 32rem;
}

@media (max-width: 575.98px) {
    .store-cart-offcanvas {
        --bs-offcanvas-width: 100%;
    }
}

.offcanvas-footer {
    padding: 1rem;
}

.cart-line-image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .5rem;
}

.cart-line-title {
    overflow-wrap: anywhere;
}

/* ============================================
   AUTH / CHECKOUT MODALS
   ============================================ */

.auth-tabs .nav-link {
    border: 1px solid var(--bs-gray-300);
    background-color: #fff;
    color: var(--bs-gray-700);
}

.auth-tabs .nav-link.active {
    border-color: var(--bs-primary);
}

.checkout-steps {
    gap: .5rem;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: .5rem;
    color: var(--bs-gray-600);
    font-size: .875rem;
    flex: 1 1 auto;
}

.checkout-step .step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--bs-gray-200);
    font-size: .8rem;
    flex: 0 0 1.5rem;
}

.checkout-step.active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
}

.checkout-step.active .step-index {
    background-color: var(--bs-primary);
    color: #fff;
}

.checkout-step.done {
    border-color: var(--bs-green-300);
    color: var(--bs-green-700);
}

.checkout-step.done .step-index {
    background-color: var(--bs-green-500);
    color: #fff;
}

@media (max-width: 575.98px) {
    .checkout-step {
        font-size: .75rem;
        padding: .3rem .4rem;
    }

    .checkout-step .step-title {
        display: none;
    }
}

.payment-method {
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.payment-method:hover {
    border-color: var(--bs-primary) !important;
}

/* ============================================
   FONT – Yekan
   فونت یکان از کتابخانه‌ی فونت آروان تهیه و در wwwroot/assets/fonts قرار گرفته است
   تا سایت بدون وابستگی به سرویس بیرونی هم درست نمایش داده شود.
   ============================================ */
@font-face {
    font-family: 'Yekan';
    src: url('/assets/fonts/Yekan.woff2') format('woff2'),
         url('/assets/fonts/Yekan.woff') format('woff'),
         url('/assets/fonts/Yekan.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

/* فونت پیش‌فرض بوت‌استرپ و همه‌ی اجزای سایت به یکان تغییر می‌کند. */
:root {
    --ml-font-family: 'Yekan', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    --bs-body-font-family: 'Yekan', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    --bs-body-font-size: 1rem;
}

body,
button,
input,
select,
textarea,
optgroup,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal,
.tooltip,
.popover {
    font-family: var(--ml-font-family);
}

body {
    line-height: 1.9;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */
.store-footer {
    background-color: var(--bs-gray-100);
}

.store-footer .footer-link {
    color: var(--bs-gray-700);
    text-decoration: none;
    display: inline-block;
    padding: .15rem 0;
}

.store-footer .footer-link:hover {
    color: var(--bs-primary);
}

.store-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--bs-gray-300);
    color: var(--bs-gray-700);
    text-decoration: none;
    font-size: 1.1rem;
}

.store-social-link:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ============================================
   PRODUCT LIST / CARDS
   ============================================ */
.product-card {
    transition: box-shadow .18s ease-in-out, transform .18s ease-in-out;
}

.product-card:hover {
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.product-card-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .5rem .5rem 0 0;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.product-price-old {
    color: var(--bs-gray-500);
    text-decoration: line-through;
    font-size: .9rem;
}

/* ============================================
   SUPPORT TICKETS
   ============================================ */
.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.ticket-bubble {
    border-radius: 1rem;
    padding: .85rem 1rem;
    max-width: 100%;
    border: 1px solid var(--bs-gray-200);
}

.ticket-bubble-customer {
    background-color: var(--bs-gray-100);
    border-start-start-radius: .2rem;
}

.ticket-bubble-staff {
    background-color: var(--bs-blue-100);
    border-color: var(--bs-blue-200);
}

.ticket-meta {
    font-size: .78rem;
    color: var(--bs-gray-600);
}

.ticket-bubble-body {
    white-space: pre-line;
    word-break: break-word;
}

/* ============================================
   CONTACT / ABOUT
   ============================================ */
.contact-card .icon-circle,
.about-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
    font-size: 1.3rem;
    flex: 0 0 3rem;
}

.about-hero-image {
    width: 100%;
    border-radius: .75rem;
    object-fit: cover;
}

.about-timeline {
    position: relative;
    padding-inline-start: 1.5rem;
    border-inline-start: 2px solid var(--bs-gray-300);
}

.about-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.about-timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.9rem;
    top: .35rem;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

/* ============================================
   CART DISCOUNT ROW
   ============================================ */
.discount-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background-color: var(--bs-green-100);
    border: 1px solid var(--bs-green-300);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .85rem;
    color: var(--bs-green-700);
}