/* ==========================================================================
   VIKA — Product detail (Shop/Detail, DetailAr, DetailEn, DetailRu)
   Two page structures share this file:
     A) rich page   (Detail.cshtml)           .product-detail-container …
     B) simple page (DetailAr / En / Ru)      .product-container …
   Direction-neutral; identical file in css/RTL and css/LTR.
   Relies on vika.css, vika-inner.css, vika-bs.css, shop-styles-*.css (search + autocomplete)
   ========================================================================== */

/* ---------- shared shell ---------- */
.detail-search { width: min(100% - 2 * var(--sp-5), 1400px); margin: var(--sp-5) auto 0; position: relative; z-index: 3; }
.product-detail-container, .product-container {
  width: min(100% - 2 * var(--sp-5), 1400px); margin-inline: auto; padding-block: var(--sp-5) var(--sp-9); position: relative; z-index: 1;
}
.product-container { width: min(100% - 2 * var(--sp-5), 1280px); }
.product-detail-container > .breadcrumb, .product-container > .breadcrumb { justify-content: flex-start; flex-wrap: wrap; font-size: 0.8rem; margin-block-end: var(--sp-5); }
.product-container .breadcrumb a, .product-detail-container .breadcrumb a { color: var(--fg-muted); transition: color var(--t-fast); }
.product-container .breadcrumb a:hover, .product-detail-container .breadcrumb a:hover { color: var(--accent); }
.breadcrumb-separator { color: var(--fg-faint); }
.breadcrumb .current { color: var(--fg) !important; }

.section-title { font-size: 1rem; font-weight: 500; color: var(--accent); letter-spacing: 0.04em; margin-block-end: var(--sp-4); text-align: start; }
.product-detail-container .section-title, .product-container .section-title { padding-block-end: var(--sp-3); border-block-end: 1px solid var(--glass-border); }
.product-title { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 500; line-height: 1.5; text-align: start; }
.product-category { font-size: 0.85rem; }
.product-category i { color: var(--accent); }
.product-description .desc_text, .product-description .desc-text { color: var(--fg-muted); font-size: 0.94rem; line-height: 2; white-space: pre-line; text-align: justify; }

/* ---------- gallery ---------- */
.product-gallery { margin-block-end: var(--sp-5); }
.gallery-main { margin: 0 0 var(--sp-3); }
.main-image-container { aspect-ratio: 1; max-height: 640px; border: 1px solid var(--glass-border); background: var(--c-ink-soft); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.4); overflow: hidden; }
.main-image-container img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--t-slow); }
.main-image-container:hover img { transform: scale(1.04); }
/* simple pages: <div class="gallery-main"><img class="gallery-main"> */
.product-container .gallery-main {  overflow: hidden; }
.product-container .gallery-main img { display: block; width: 100%; height: clamp(280px, 38vw, 480px); object-fit: contain; padding: var(--sp-3); }

.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.gallery-thumbnails .thumbnail { flex: 0 0 auto; width: 76px; height: 76px; border: 1px solid var(--glass-border); background: var(--c-ink-soft); opacity: 0.65; cursor: pointer; overflow: hidden; transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.gallery-thumbnails .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbnails .thumbnail:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumbnails .thumbnail.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.action-buttons-gallery .d-flex { flex-wrap: wrap; }
.action-buttons-gallery .btn { padding: 0.65rem 1rem; font-size: 0.8rem; }
.favorite-button.active, .favorite-button.favorited { background: oklch(65% 0.18 25 / 0.15); }
.compare-count { margin-inline-start: var(--sp-2); }
.three-d-section .three-d-container { padding: var(--sp-5); }
.three-d-image-wrapper img { max-width: 100%; max-height: 200px; }

/* ================= A) rich page ================= */
.product-detail-content { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 4.6fr) minmax(0, 3fr); gap: var(--sp-6); align-items: start; }
.product-action-column { position: sticky; inset-block-start: 84px; }

.attribute-group { padding-block-end: var(--sp-3); }
.attribute-label { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.9rem; font-weight: 500; color: var(--fg); cursor: pointer; margin-block-end: var(--sp-3); }
.attribute-label .collapse-icon { color: var(--accent); font-size: 0.7rem; }
.collapsible-content { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.collapsible-content.collapsed, .collapsible-header.collapsed + .collapsible-content { display: none; }
.selection-required { font-size: 0.75rem; font-weight: 300; color: oklch(78% 0.13 70); margin-inline-start: auto; }
.attribute-option { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.5rem 1rem; font-size: 0.85rem; cursor: pointer; color: var(--fg-muted); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.attribute-option:hover { border-color: var(--accent); color: var(--accent); }
.attribute-option.selected, .attribute-option.active { border-color: var(--accent); color: var(--c-ink-deep); background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright)); }
.attribute-option.disabled, .attribute-option.unavailable { opacity: 0.35; pointer-events: none; text-decoration: line-through; }
.attributes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.attribute-item { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 !important; }
.attribute-name { font-size: 0.78rem; letter-spacing: 0.04em; }
.attribute-value { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: 0.88rem; color: var(--fg); }
.attribute-unit { color: var(--fg-faint); }
.selection-progress, #selection-progress { margin-block-start: var(--sp-4); }

.action-card { padding: var(--sp-5); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.35); }
.price-display { padding-block-end: var(--sp-4); margin-block-end: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.current-price { font-size: 1.7rem; font-weight: 500; color: var(--accent); line-height: 1.4; }
.original-price { font-size: 0.88rem; color: var(--fg-faint); }
.variant-sku { font-size: 0.78rem; color: var(--fg-faint); }
.variation-summary, .selected-attributes { font-size: 0.85rem; }
.no-variation-warning { padding: var(--sp-3) var(--sp-4); font-size: 0.82rem; color: oklch(86% 0.1 80); border: 1px solid oklch(75% 0.13 70 / 0.5); background: oklch(75% 0.13 70 / 0.08); }
.quantity-selector { display: flex; align-items: center; gap: 0; }
.quantity-btn { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; color: var(--fg); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast); }
.quantity-btn:hover { border-color: var(--accent); color: var(--accent); }
.quantity-input { width: 64px; height: 42px; text-align: center; font-size: 0.95rem; color: var(--fg); background: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border); border-inline: 0; border-radius: 0; -moz-appearance: textfield; }
.quantity-input::-webkit-outer-spin-button, .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-input:focus { outline: none; border-color: var(--accent); }
.action-card .btn { width: 100%; justify-content: center; padding: 0.9rem; margin-block-start: var(--sp-3); }
.btn-action { width: 100%; justify-content: center; margin-block-start: var(--sp-3); }

/* tabs */
.product-bottom-sections { margin-block-start: var(--sp-8); }
.tabs-header { background: var(--glass-bg) !important; border: 1px solid var(--glass-border); border-block-end: 0; padding: 0 !important; }
.nav-tabsX, .product-nav { display: flex; flex-wrap: wrap; gap: 0; }
.nav-tabsX .nav-link { padding: var(--sp-4) var(--sp-6); font-size: 0.88rem; color: var(--fg-muted) !important; border-block-end: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.nav-tabsX .nav-link:hover { color: var(--accent) !important; }
.nav-tabsX .nav-link.active { color: var(--accent) !important; border-block-end-color: var(--accent); background: oklch(74% 0.09 85 / 0.06); }
.product-tabs .tab-content { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; }
.tab-scroll-body { padding-inline-end: var(--sp-2); }
.full-description { color: var(--fg-muted); font-size: 0.95rem; line-height: 2.1; }
.full-description img { max-width: 100%; height: auto; }
.full-description h2, .full-description h3, .full-description h4 { color: var(--fg); margin-block: var(--sp-5) var(--sp-3); }
.full-description a { color: var(--accent); }
.full-description table { width: 100%; border-collapse: collapse; }
.full-description td, .full-description th { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-border); }
.full-description [style*="color"] { color: inherit !important; }
.full-description [style*="background"] { background: transparent !important; }
.selected-variation-card { border: 1px solid oklch(74% 0.09 85 / 0.35); }
.variation-detail-item { gap: var(--sp-3); padding-block: var(--sp-2); font-size: 0.88rem; }
.detail-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--glass-border); color: var(--accent); }
.variations-table-container h5 { font-size: 0.95rem; font-weight: 500; }
.variations-summary { border: 1px solid var(--glass-border); }

/* reviews */
.compact-reviews-summary { border: 1px solid var(--glass-border); }
.compact-add-review h5 { font-size: 0.95rem; font-weight: 500; color: var(--accent); }
.compact-add-review form { border: 1px solid var(--glass-border); }
.average-rating { color: var(--accent) !important; font-family: var(--font-en); }
.stars .star { font-size: 1.15rem; }
.compact-rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.compact-star-label-btn { font-size: 1.6rem; line-height: 1; cursor: pointer; padding-inline: 2px; transition: color var(--t-fast), transform var(--t-fast); }
.compact-star-label-btn:hover { transform: scale(1.15); }
.compact-rating-input input:checked ~ label, .compact-rating-input label:hover, .compact-rating-input label:hover ~ label { color: var(--accent) !important; }
.reviews-filter .form-select { min-width: 170px; }
.compact-reviews-list { display: flex; flex-direction: column; gap: var(--sp-3); }
/* review cards are rendered by product-reviews.js: cover the common class names */
.compact-review, .compact-review-card, .compact-review-item, .review-item, .review-card {
  padding: var(--sp-4) var(--sp-5); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast);
}
.compact-review:hover, .compact-review-card:hover, .compact-review-item:hover, .review-item:hover, .review-card:hover { border-color: oklch(74% 0.09 85 / 0.4); }
.review-header, .compact-review-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-block-end: var(--sp-2); }
.review-author, .reviewer-name, .compact-review-author { font-weight: 500; color: var(--fg); font-size: 0.92rem; }
.review-date, .compact-review-date { font-size: 0.75rem; color: var(--fg-faint); }
.review-title, .compact-review-title { font-size: 0.95rem; font-weight: 500; margin-block-end: var(--sp-2); }
.review-text, .review-comment, .compact-review-text, .compact-review-comment { font-size: 0.88rem; line-height: 1.9; color: var(--fg-muted); }
.review-rating, .compact-review-rating { color: var(--accent); letter-spacing: 2px; }
.verified-badge, .review-verified { font-size: 0.7rem; padding: 0.15rem 0.6rem; color: oklch(85% 0.1 150); border: 1px solid oklch(70% 0.12 150 / 0.5); }

/* ================= B) simple page (Ar / En / Ru) ================= */
.product-container > .row { align-items: flex-start; }
.product-info { text-align: start; }
.variants-section { margin-block-start: var(--sp-6); }
.variants-section h3, .selected-variant-details h3 { font-size: 1.1rem; font-weight: 500; color: var(--accent); margin-block-end: var(--sp-4); }
.variant-list { display: grid; gap: var(--sp-3); }
.variant-item { padding: var(--sp-4) var(--sp-5); cursor: pointer; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.variant-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.variant-item.active { border-color: var(--accent); background: oklch(74% 0.09 85 / 0.1); box-shadow: 0 0 0 1px var(--accent); }
.variant-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.variant-name { font-size: 0.95rem; font-weight: 500; margin: 0; }
.variant-attributes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.attribute-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.3rem 0.8rem; font-size: 0.78rem; color: var(--fg-muted); background: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border); }
.color-swatch { width: 14px; height: 14px; border: 1px solid oklch(100% 0 0 / 0.35); display: inline-block; flex: 0 0 auto; }
.info-section { margin-block-start: var(--sp-7); padding: var(--sp-6); color: var(--fg-muted); line-height: 2; background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.info-section:empty { display: none; }
.info-section img { max-width: 100%; height: auto; }
.info-section [style*="color"] { color: inherit !important; }
.info-section [style*="background"] { background: transparent !important; }
.info-section a { color: var(--accent); }
.selected-variant-details { width: 100%; }
.variant-image { text-align: center; }
.variant-image img { max-width: 100%; max-height: 300px; object-fit: contain; padding: var(--sp-3); background: var(--c-ink-soft); border: 1px solid var(--glass-border); }
.variant-specifications h5, .variant-description h5 { font-size: 1rem; font-weight: 500; color: var(--fg); margin-block-end: var(--sp-3); }
.variant-details-box { padding: var(--sp-5); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); }

/* related products (both structures) */
.related-products { margin-block-start: var(--sp-8); }
.related-products .section-title { font-size: 1.3rem; border-block-end: 1px solid var(--glass-border); }
.related-products-grid, .row-related { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); margin: 0; }
.related-products-grid > *, .row-related > * { width: auto; max-width: none; padding: 0; margin-bottom: 30px; }
.related-product-card { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; transition: transform var(--t-med), border-color var(--t-med); }
.related-product-card:hover { transform: translateY(-6px); border-color: oklch(74% 0.09 85 / 0.45) !important; }
.related-product-card .product-image { aspect-ratio: 1; overflow: hidden; background: var(--c-ink-soft); }
.related-product-card .product-image img { width: 100%; height: 100% !important; object-fit: cover; }
.related-product-card .product-name { font-size: 0.92rem; }
.product-spec {
    font-size: 0.78rem;
    text-align: center;
}
.product-price { color: var(--fg); text-align:center; }
.product-price .sale-price { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .product-detail-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .product-action-column { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767px) {
  .product-detail-content { grid-template-columns: 1fr; gap: var(--sp-5); }
  .nav-tabsX .nav-link { padding: var(--sp-3) var(--sp-4); font-size: 0.8rem; }
  .gallery-thumbnails .thumbnail { width: 62px; height: 62px; }
  .info-section { padding: var(--sp-4); }
}