/* ============================================================
   product.css - استایل کامل صفحه محصول
   کاملاً هماهنگ با پالت رنگی و متغیرهای متمرکز
   ============================================================ */

#product-product {
    padding-top: var(--padding-3xl);
    padding-bottom: var(--padding-3xl);
    margin: 0 auto;
    max-width: 92%;
    background: transparent;
    overflow-x: hidden;
}

/* ============================================================
   مسیر راهنما
   ============================================================ */

#product-product .breadcrumb {
    background: var(--color-bg-white);
    border-radius: var(--radius);
    padding: var(--padding-md) var(--padding-xl);
    margin-bottom: var(--margin-xl);
    box-shadow: var(--shadow-base);
    border: 1px solid var(--color-border);
}

#product-product .breadcrumb li {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

#product-product .breadcrumb li a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

#product-product .breadcrumb li a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ============================================================
   3 ستون
   ============================================================ */

.product-main-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 var(--margin-xl) 0;
    gap: var(--gap-xl);
}

.product-main-row [class*="col-"] {
    padding: 0;
    flex: 1;
}

.product-main-row .col-sm-4 { flex: 0 0 calc(33.333% - var(--gap-xl)); }
.product-main-row .col-sm-5 { flex: 0 0 calc(41.666% - var(--gap-xl)); }
.product-main-row .col-sm-3 { flex: 0 0 calc(25% - var(--gap-xl)); }

/* ============================================================
   ستون‌ها
   ============================================================ */

.product-column {
    background: var(--color-bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-base);
    height: 100%;
    overflow: hidden;
    transition: all var(--transition-base);
}

.product-column:hover {
    box-shadow: var(--shadow-hover);
}

.product-column-header {
    padding: var(--padding-xl) var(--padding-xl);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.product-column-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: var(--height-4xl);
    height: var(--height-4xl);
    background: var(--color-glass-white);
    border-radius: 50%;
    transform: rotate(15deg);
}

.product-column-header i {
    font-size: var(--font-size-xl);
    color: var(--color-text-white);
    position: relative;
    z-index: 1;
}

.product-column-header span {
    position: relative;
    z-index: 1;
}

.product-column-images .product-column-header {
    background: var(--gradient-primary);
    border-bottom: 3px solid var(--color-primary-light);
    box-shadow: var(--shadow-primary);
}

.product-column-details .product-column-header {
    background: var(--gradient-primary);
    border-bottom: 3px solid var(--color-primary-light);
    box-shadow: var(--shadow-primary);
}

.product-column-actions .product-column-header {
    background: var(--gradient-primary);
    border-bottom: 3px solid var(--color-primary-light);
    box-shadow: var(--shadow-primary);
}

.product-column-body {
    padding: var(--padding-xl);
}

/* ============================================================
   گالری تصاویر
   ============================================================ */

.thumbnails {
    list-style: none;
    padding: 0;
    margin: 0;
}

.thumbnails > li { margin-bottom: var(--margin-lg); }

.thumbnails .thumbnail {
    display: block;
    padding: var(--padding-md);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.thumbnails .thumbnail:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-base);
}

.thumbnails .thumbnail img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.image-additional {
    display: inline-block;
    width: 22%;
    margin-left: 2%;
}

.image-additional .thumbnail { padding: var(--padding-sm); }

/* ============================================================
   عنوان محصول
   ============================================================ */

#product-product h1 {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--margin-sm) 0;
    line-height: var(--line-height-tight);
}

.product-title-main {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--margin-sm) 0;
    line-height: var(--line-height-tight);
}

.product-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: 0 0 var(--margin-lg) 0;
}

/* ============================================================
   جدول اطلاعات محصول
   ============================================================ */

.product-meta {
    list-style: none;
    padding: 0;
    margin: var(--margin-lg) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-white);
}

.product-meta li {
    display: flex;
    align-items: stretch;
    min-height: var(--height-lg);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--duration-fast) ease;
}

.product-meta li:last-child {
    border-bottom: none;
}

.product-meta .meta-label {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--padding-lg);
    background: var(--gradient-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    border-left: 1px solid var(--color-glass-white);
}

.product-meta .meta-value {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 var(--padding-xl);
    direction: rtl;
    color: var(--color-text-dark) !important;
    background: var(--color-bg-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-normal);
    text-align: right;
    overflow-wrap: anywhere;
}

.product-meta .meta-value a {
    color: var(--color-text-dark) !important;
    font-weight: var(--font-weight-bold) !important;
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.product-meta .meta-value a:hover {
    color: var(--color-link) !important;
    text-decoration: underline;
}

.product-meta .meta-value a:not(:last-child)::after {
    content: " - ";
    color: var(--color-text-light);
    margin: 0 var(--margin-md);
    font-weight: var(--font-weight-regular);
}

.product-meta li:hover .meta-value {
    background: var(--color-bg-soft);
}

.product-meta .meta-value strong {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-bold) !important;
}

/* ============================================================
   قیمت و ربان تخفیف
   ============================================================ */

.product-price-box {
    position: relative;
    background: linear-gradient(135deg, var(--color-bg-soft) 0%, var(--color-bg-white) 100%);
    border-radius: var(--radius-xl);
    padding: var(--padding-lg) var(--padding-xl);
    margin-bottom: var(--margin-xl);
    border: 2px solid var(--color-primary-light);
    box-shadow: var(--shadow-primary);
    transition: all var(--duration-base) ease;
    overflow: visible;
}

.product-price-box:hover {
    box-shadow: var(--shadow-primary-hover);
    border-color: var(--color-primary);
}

.discount-ribbon {
    display: inline-block;
    background: var(--gradient-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--margin-lg);
    box-shadow: var(--shadow-primary);
    letter-spacing: 0.5px;
}

.discount-ribbon .ribbon-percent {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-extrabold);
}

.price-with-discount {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-md);
    padding-left: var(--padding-lg);
}

.price-row {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: wrap;
}

.price-current {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
}

.price-special {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary-light);
}

.price-old {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    text-decoration: line-through;
}

.price-tax,
.price-points {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--margin-md);
    padding: var(--padding-sm) 0;
    border-top: 1px dashed var(--color-border);
    padding-left: var(--padding-sm);
}

.price-tax i,
.price-points i {
    margin-left: var(--margin-md);
    color: var(--color-text-light);
}

.price-discounts {
    margin-top: var(--margin-lg);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--color-border);
}

.price-discounts div {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--padding-sm) var(--padding-base);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--margin-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-discounts div:last-child {
    margin-bottom: 0;
}

.price-discounts .discount-qty {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.price-discounts .discount-price {
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   فرم و گزینه‌ها
   ============================================================ */

#product .form-group { margin-bottom: var(--margin-lg); }

#product .form-group label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--margin-sm);
}

#product .form-control {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--padding-lg) var(--padding-xl);
    font-size: var(--font-size-base);
    width: 100%;
    background: var(--color-bg-white);
    transition: all var(--transition-base);
}

#product .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

#product .radio,
#product .checkbox { padding: var(--padding-sm) 0; }

#product .radio label,
#product .checkbox label {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

#product input[type="radio"],
#product input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: var(--height-lg);
    height: var(--height-lg);
    cursor: pointer;
}

.radio label img,
.checkbox label img {
    max-width: var(--height-lg);
    border-radius: var(--radius-sm);
}

/* ============================================================
   امتیاز
   ============================================================ */

.rating {
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    padding: var(--padding-lg) var(--padding-xl);
    border: 1px solid var(--color-border);
    margin-bottom: var(--margin-lg);
}

.rating-stars {
    display: flex;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-sm);
}

.rating .fa {
    font-size: var(--font-size-lg);
    color: var(--color-gray-400);
}

.rating .fa-star { color: var(--color-warning); }

.rating p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.rating p a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

.rating p a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ============================================================
   موجودی
   ============================================================ */

.stock-status-box {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    border-radius: var(--radius-lg);
    padding: var(--padding-md) var(--padding-lg);
    margin-bottom: var(--margin-lg);
}

.stock-status-box.in-stock {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-light);
}

.stock-status-box.in-stock .stock-status-icon {
    background: var(--color-success);
    color: var(--color-text-white);
}

.stock-status-box.in-stock .stock-status-value {
    color: var(--color-success);
}

.stock-status-box.out-of-stock {
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger-light);
}

.stock-status-box.out-of-stock .stock-status-icon {
    background: var(--color-danger);
    color: var(--color-text-white);
}

.stock-status-box.out-of-stock .stock-status-value {
    color: var(--color-danger);
}

.stock-status-icon {
    width: var(--height-lg);
    height: var(--height-lg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.stock-status-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stock-status-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.minimum-alert {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
    border-radius: var(--radius-base);
    padding: var(--padding-base) var(--padding-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--margin-lg);
}

/* ============================================================
   تعداد و دکمه خرید
   ============================================================ */

.quantity-group label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: var(--margin-md);
}

.quantity-input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-white);
    transition: all var(--transition-base);
}

.quantity-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.qty-btn {
    width: var(--height-xl);
    height: var(--height-xl);
    border: none;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.qty-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.quantity-input {
    width: var(--height-2xl);
    height: var(--height-xl);
    border: none;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background: transparent;
    outline: none;
    padding: 0;
}

.add-to-cart-btn {
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--padding-xl) var(--padding-xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    box-shadow: var(--shadow-button);
    transition: all var(--transition-base);
    width: 100%;
    margin-bottom: var(--margin-lg);
}

.add-to-cart-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-button-hover);
    background: var(--gradient-primary-hover);
}

.add-to-cart-btn:disabled {
    opacity: var(--opacity-60);
    cursor: not-allowed;
    transform: none !important;
}

.add-to-cart-btn i { margin-left: var(--margin-base); }

.related-card-actions .btn-cart {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    box-shadow: var(--shadow-primary);
}

.related-card-actions .btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover);
    background: var(--gradient-primary-hover);
}

/* ============================================================
   دکمه‌های عملیات
   ============================================================ */

.quick-actions {
    display: flex;
    gap: var(--gap-base);
}

.quick-action-btn {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--padding-lg);
    font-size: var(--font-size-lg);
    cursor: pointer;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-base);
}

.quick-action-btn .fa-heart { color: var(--color-danger); }
.quick-action-btn .fa-exchange { color: var(--color-link); }

/* ============================================================
   تب‌ها
   ============================================================ */

.product-tabs-row {
    background: var(--color-bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-base);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: var(--margin-xl);
}

.nav-tabs {
    border-bottom: 2px solid var(--color-border);
    padding: 0 var(--padding-xl);
    margin: 0;
}

.nav-tabs > li { margin-bottom: -2px; }

.nav-tabs > li > a {
    border: none;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    padding: var(--padding-xl) var(--padding-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    background: transparent;
    transition: all var(--transition-base);
}

.nav-tabs > li > a:hover {
    color: var(--color-link);
    background: var(--color-bg-soft);
}

.nav-tabs > li.active > a {
    color: var(--color-link);
    border-bottom: 2px solid var(--color-primary);
}

.tab-content { padding: var(--padding-xl) var(--padding-xl); }

.tab-content p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

/* ============================================================
   جدول ویژگی‌ها
   ============================================================ */

.table-bordered {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    overflow: hidden;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    width: 100%;
}

.table-bordered thead tr { 
    background: var(--gradient-primary);
}

.table-bordered thead td {
    font-weight: var(--font-weight-bold);
    padding: var(--padding-xl) var(--padding-xl);
    border-color: var(--color-primary-dark);
    color: var(--color-text-white);
}

.table-bordered tbody td {
    padding: var(--padding-md) var(--padding-xl);
    border-color: var(--color-border);
}

.table-bordered tbody tr:nth-child(odd) { 
    background: var(--color-pink-light);
}

.table-bordered tbody tr:nth-child(even) { 
    background: var(--color-bg-soft);
}

.table-bordered tbody tr:hover td { 
    background: var(--color-pink-medium);
}

/* ============================================================
   محصولات مرتبط
   ============================================================ */

.related-products-wrapper {
    background: var(--color-bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-base);
    border: 1px solid var(--color-border);
    padding: var(--padding-xl) var(--padding-xl);
    margin-bottom: var(--margin-xl);
}

.related-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    margin: 0 0 var(--margin-xl) 0;
    padding-right: var(--padding-md);
    border-right: 4px solid var(--color-primary-light);
}

.related-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.related-item {
    padding: 0 var(--padding-base);
    margin-bottom: var(--margin-xl);
}

.related-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-base);
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.related-card-image {
    background: var(--color-bg-soft);
    overflow: hidden;
    position: relative;
    padding-top: 100%;
}

.related-card-image a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-lg);
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--duration-slow) ease;
}

.related-card:hover .related-card-image img { transform: scale(1.05); }

.related-card-image .sale {
    position: absolute;
    top: var(--padding-lg);
    right: var(--padding-lg);
    background: var(--gradient-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--padding-sm) var(--padding-xl);
    border-radius: var(--radius-xl);
    z-index: 2;
    box-shadow: var(--shadow-primary);
}

.related-card-body {
    padding: var(--padding-xl) var(--padding-lg) var(--padding-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.related-card-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    line-height: var(--line-height-tight);
    height: var(--height-lg);
    overflow: hidden;
}

.related-card-name a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.related-card-name a:hover { color: var(--color-link); }

.related-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--margin-sm) 0;
    line-height: var(--line-height-normal);
    height: var(--height-md);
    overflow: hidden;
}

.related-card-rating {
    display: flex;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-sm);
}

.related-card-rating .fa {
    font-size: var(--font-size-sm);
    color: var(--color-border);
}

.related-card-rating .fa-star { color: var(--color-warning); }

.related-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-sm) var(--gap-base);
    margin: var(--margin-sm) 0 var(--margin-base);
}

.related-card-price .price-current {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.related-card-price .price-special {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-light);
}

.related-card-price .price-old {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.related-card-price .price-tax {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    width: 100%;
}

.related-card-actions {
    display: flex;
    gap: var(--gap-md);
    margin-top: auto;
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--color-border);
}

.related-card-actions button {
    flex: 1;
    border: none;
    border-radius: var(--radius-base);
    padding: var(--padding-base) var(--padding-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
}

.related-card-actions button:hover { transform: translateY(-2px); }

.related-card-actions .btn-wishlist:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.related-card-actions .btn-compare:hover {
    background: var(--color-bg-soft);
    color: var(--color-link);
}

/* ============================================================
   برچسب‌ها
   ============================================================ */

.product-tags-row {
    background: var(--color-bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-base);
    border: 1px solid var(--color-border);
    padding: var(--padding-lg) var(--padding-xl);
    margin-bottom: var(--margin-xl);
}

.product-tags-row p {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
}

.product-tags-row p a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

.product-tags-row p a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ============================================================
   ریسپانسیو - تبلت بزرگ
   ============================================================ */

@media (max-width: var(--breakpoint-lg)) {
    .product-main-row [class*="col-"] {
        flex: 0 0 100% !important;
    }
    
    .product-column { margin-bottom: var(--margin-lg); }
    .product-column-body { padding: var(--padding-lg); }
    .product-tabs-row { border-radius: var(--radius-xl); }
    
    .related-products-wrapper {
        border-radius: var(--radius-xl);
        padding: var(--padding-xl) var(--padding-lg);
    }
    
    .product-tags-row {
        border-radius: var(--radius-xl);
        padding: var(--padding-xl) var(--padding-xl);
    }
    
    .nav-tabs { padding: 0 var(--padding-lg); }
    
    .nav-tabs > li > a {
        padding: var(--padding-md) var(--padding-lg);
        font-size: var(--font-size-sm);
    }
    
    .tab-content { padding: var(--padding-xl) var(--padding-lg); }
    
    .product-meta li .meta-label {
        flex: 0 0 90px;
        min-width: 90px;
        padding: var(--padding-md) var(--padding-lg);
        font-size: var(--font-size-xs);
    }
    
    .product-meta li .meta-value {
        padding: var(--padding-md) var(--padding-xl);
        font-size: var(--font-size-sm);
    }
    
    .product-meta li {
        min-height: var(--height-base);
    }
}

/* ============================================================
   ریسپانسیو - تبلت
   ============================================================ */

@media (max-width: var(--breakpoint-md)) {
    #product-product {
        padding-top: var(--padding-2xl);
        max-width: 95%;
    }
    
    .product-column { border-radius: var(--radius-xl); }
    
    .product-column-header {
        padding: var(--padding-lg) var(--padding-lg);
        font-size: var(--font-size-sm);
    }
    
    .product-column-body { padding: var(--padding-xl); }
    
    .price-current,
    .price-special { font-size: var(--font-size-3xl); }
    .price-old { font-size: var(--font-size-lg); }
    .price-with-discount { padding-left: var(--padding-base); }
    .product-price-box { padding: var(--padding-md) var(--padding-lg); }
    
    .image-additional { width: 18%; }
    
    .nav-tabs > li > a {
        padding: var(--padding-lg) var(--padding-xl);
        font-size: var(--font-size-sm);
    }
    
    .tab-content { padding: var(--padding-lg) var(--padding-xl); }
    
    .add-to-cart-btn {
        font-size: var(--font-size-md);
        padding: var(--padding-md) var(--padding-xl);
    }
    
    .related-item { padding: 0 var(--padding-md); }
    .related-card-body { padding: var(--padding-md) var(--padding-xl) var(--padding-xl); }
    .related-card-name { font-size: var(--font-size-sm); height: var(--height-base); }
    .related-card-actions .btn-text { display: none; }
    
    .product-meta li {
        flex-direction: column;
        align-items: stretch;
        min-height: var(--height-md);
    }
    
    .product-meta li .meta-label {
        flex: none;
        min-width: auto;
        padding: var(--padding-md) var(--padding-md);
        font-size: var(--font-size-xs);
        justify-content: center;
        text-align: center;
        border-left: none;
        border-bottom: 1px solid var(--color-glass-white);
        align-items: center;
    }
    
    .product-meta li .meta-value {
        padding: var(--padding-md) var(--padding-md);
        font-size: var(--font-size-sm);
        justify-content: center;
        text-align: center;
        align-items: center;
        min-height: var(--height-md);
        font-weight: var(--font-weight-bold) !important;
    }
    
    .product-meta li:hover .meta-value {
        background: var(--color-bg-soft);
    }
    
    #product-product h1 {
        font-size: var(--font-size-xl) !important;
    }
}

/* ============================================================
   ریسپانسیو - موبایل
   ============================================================ */

@media (max-width: var(--breakpoint-sm)) {
    #product-product {
        padding-top: var(--padding-xl);
        max-width: 100%;
        padding-left: var(--padding-lg);
        padding-right: var(--padding-lg);
    }
    
    .product-column { border-radius: var(--radius-lg); }
    
    .product-column-header {
        padding: var(--padding-base) var(--padding-xl);
        font-size: var(--font-size-sm);
    }
    
    .product-column-body { padding: var(--padding-md); }
    
    .price-current,
    .price-special { font-size: var(--font-size-xl); }
    .price-old { font-size: var(--font-size-md); }
    .price-with-discount { padding-left: var(--padding-md); }
    .product-price-box { padding: var(--padding-lg) var(--padding-xl); }
    
    .discount-ribbon {
        font-size: var(--font-size-sm);
        padding: var(--padding-xs) var(--padding-xl);
    }
    
    .discount-ribbon .ribbon-percent { font-size: var(--font-size-sm); }
    
    .image-additional { width: 22%; }
    .image-additional .thumbnail { padding: var(--padding-xs); }
    
    #product .form-control { padding: var(--padding-base) var(--padding-md); font-size: var(--font-size-sm); }
    .quantity-input { width: var(--height-2xl); height: var(--height-lg); font-size: var(--font-size-sm); }
    .qty-btn { width: var(--height-base); height: var(--height-lg); font-size: var(--font-size-sm); }
    
    .add-to-cart-btn {
        font-size: var(--font-size-base);
        padding: var(--padding-lg) var(--padding-lg);
        border-radius: var(--radius-base);
    }
    
    .quick-action-btn { padding: var(--padding-base); font-size: var(--font-size-base); }
    .rating { padding: var(--padding-base) var(--padding-md); }
    .rating .fa { font-size: var(--font-size-base); }
    .rating p { font-size: var(--font-size-sm); }
    
    .stock-status-box { padding: var(--padding-base) var(--padding-md); }
    .stock-status-icon { width: var(--height-md); height: var(--height-md); font-size: var(--font-size-base); }
    
    .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-sm);
        padding: 0 var(--padding-lg);
    }
    
    .nav-tabs > li { flex: 1; min-width: var(--height-2xl); text-align: center; }
    
    .nav-tabs > li > a {
        font-size: var(--font-size-xs);
        padding: var(--padding-base) var(--padding-base);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    
    .tab-content { padding: var(--padding-md) var(--padding-lg); }
    .tab-content p { font-size: var(--font-size-sm); }
    
    .related-products-wrapper {
        border-radius: var(--radius-lg);
        padding: var(--padding-xl) var(--padding-lg);
    }
    
    .related-item { padding: 0 var(--padding-sm); }
    .related-title { font-size: var(--font-size-xl); }
    .related-card-body { padding: var(--padding-lg) var(--padding-lg) var(--padding-md); }
    .related-card-name { font-size: var(--font-size-sm); height: var(--height-md); }
    .related-card-desc { font-size: var(--font-size-xs); height: var(--height-xl); }
    .related-card-price .price-current,
    .related-card-price .price-special { font-size: var(--font-size-base); }
    .related-card-actions button { font-size: var(--font-size-xs); padding: var(--padding-sm) var(--padding-xs); }
    
    .product-tags-row {
        padding: var(--padding-md) var(--padding-xl);
        border-radius: var(--radius-lg);
    }
    
    .product-tags-row p { font-size: var(--font-size-sm); }
    .table-bordered { font-size: var(--font-size-sm); }
    .table-bordered thead td,
    .table-bordered tbody td { padding: var(--padding-base) var(--padding-md); }
    
    #product-product h1 {
        font-size: var(--font-size-xl) !important;
    }
}

/* ============================================================
   ریسپانسیو - موبایل خیلی کوچک
   ============================================================ */

@media (max-width: var(--breakpoint-xs)) {
    #product-product {
        padding-top: var(--padding-lg);
        padding-left: var(--padding-md);
        padding-right: var(--padding-md);
    }
    
    .product-title-main { font-size: var(--font-size-lg); }
    .product-subtitle { font-size: var(--font-size-sm); }
    .product-column { border-radius: var(--radius-base); }
    .product-column-body { padding: var(--padding-lg); }
    
    .price-current,
    .price-special { font-size: var(--font-size-xl); }
    .price-old { font-size: var(--font-size-base); }
    .price-with-discount { padding-left: var(--padding-sm); }
    
    .quick-action-btn { padding: var(--padding-md); font-size: var(--font-size-sm); }
    .rating .fa { font-size: var(--font-size-sm); }
    .rating p { font-size: var(--font-size-xs); }
    
    .nav-tabs > li > a {
        font-size: var(--font-size-xs);
        padding: var(--padding-md) var(--padding-sm);
    }
    
    .related-card-name { font-size: var(--font-size-xs); height: var(--height-xl); }
    .related-card-desc { font-size: var(--font-size-xs); height: var(--height-xl); }
    .related-card-price .price-current,
    .related-card-price .price-special { font-size: var(--font-size-sm); }
    .related-card-actions button { font-size: var(--font-size-xs); padding: var(--padding-xs) var(--padding-xs); }
    
    .product-tags-row {
        padding: var(--padding-md) var(--padding-xl);
        border-radius: var(--radius-lg);
    }
    
    .product-tags-row p { font-size: var(--font-size-sm); }
    .table-bordered { font-size: var(--font-size-sm); }
    .table-bordered thead td,
    .table-bordered tbody td { padding: var(--padding-base) var(--padding-md); }
    
    #product-product h1 {
        font-size: var(--font-size-lg) !important;
    }
}