/* ═══════════════════════════════════════════════════════════════
   Cataliya Premium UI — custom.css
   Overrides Amerce template for a premium, happy, multilingual feel
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts: Nunito (Latin + Cyrillic) ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..900;1,200..900&display=swap&subset=latin,cyrillic,latin-ext');

/* ── Premium tokens ──────────────────────────────────────────── */
:root {
  --cus-font:        'Nunito', sans-serif;
  --cus-primary:     #E0720A;   /* warm orange — matches butterfly logo */
  --cus-primary-lt:  #FFF3E8;   /* peach tint for hover fills */
  --cus-gold:        #C9954A;   /* accent gold */
  --cus-gold-lt:     #FAF3E8;
  --cus-surface:     #FFFFFF;
  --cus-bg:          #F9F7F5;   /* warm off-white page bg */
  --cus-text:        #1A1310;
  --cus-text-2:      #5C504A;
  --cus-text-3:      #9E928C;
  --cus-line:        #EDE8E4;

  --cus-r-sm:  8px;
  --cus-r-md:  14px;
  --cus-r-lg:  20px;
  --cus-r-xl:  28px;
  --cus-r-pill: 999px;

  --cus-shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --cus-shadow-md:  0 6px 24px rgba(0,0,0,.09);
  --cus-shadow-lg:  0 16px 48px rgba(0,0,0,.12);
  --cus-shadow-card:0 4px 20px rgba(0,0,0,.08);
  --cus-shadow-lift: 0 12px 40px rgba(0,0,0,.14);

  --cus-ease:    cubic-bezier(.25,.46,.45,.94);
  --cus-spring:  cubic-bezier(.34,1.56,.64,1);
  --cus-dur:     .28s;
}

/* ── Base typography + smoothing ─────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family:             var(--cus-font) !important;
  background-color:        var(--cus-bg)   !important;
  color:                   var(--cus-text) !important;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  letter-spacing:          .01em;
}

h1, h2, h3, h4, h5, h6,
.s-title, .name-product, .tf-btn, .sect-heading {
  font-family: var(--cus-font) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

p, span, a, li, td, th, label, input, textarea, select, button {
  font-family: var(--cus-font) !important;
}

/* ── Primary color override ──────────────────────────────────── */
:root {
  --primary: var(--cus-primary) !important;
}
.text-primary  { color: var(--cus-primary) !important; }
.bg-primary    { background-color: var(--cus-primary) !important; }
a              { color: var(--cus-primary); }
a:hover        { color: var(--cus-gold); }

/* ── Page background ─────────────────────────────────────────── */
.main-content,
.wrapper,
.site-content { background-color: var(--cus-bg) !important; }

/* ── Header / Navbar ─────────────────────────────────────────── */
.header-style-1,
.header-style-2,
.header-wrapper,
header {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--cus-line);
  box-shadow: var(--cus-shadow-sm);
}

.nav-icon { transition: transform var(--cus-dur) var(--cus-ease); }
.nav-icon:hover { transform: scale(1.12); }

/* ── Buttons ─────────────────────────────────────────── */
.tf-btn,
.tf-btn.animate-btn,
button.tf-btn {
  font-family:     var(--cus-font) !important;
  font-weight:     600;
  font-size:       14px;
  letter-spacing:  .04em;
  border-radius:   var(--cus-r-pill) !important;
  padding:         11px 28px !important;
  background:      var(--cus-primary) !important;
  color:           #fff !important;
  border:          none !important;
  transition:      transform var(--cus-dur) var(--cus-spring),
                   box-shadow var(--cus-dur) var(--cus-ease),
                   background var(--cus-dur) var(--cus-ease) !important;
  box-shadow:      0 4px 14px rgba(224,114,10,.30) !important;
}
.tf-btn:hover,
.tf-btn.animate-btn:hover {
  background:  #c46008 !important;
  transform:   translateY(-2px) !important;
  box-shadow:  0 8px 24px rgba(224,114,10,.38) !important;
  color:       #fff !important;
}
.tf-btn:active {
  transform: translateY(0) scale(.97) !important;
}

/* outline variant */
.tf-btn.style-bg-white,
.tf-btn.style-outline,
.tf-btn[class*="outline"] {
  background:   transparent !important;
  color:        var(--cus-primary) !important;
  border:       2px solid var(--cus-primary) !important;
  box-shadow:   none !important;
}
.tf-btn.style-bg-white:hover,
.tf-btn.style-outline:hover {
  background:  var(--cus-primary) !important;
  color:       #fff !important;
}

/* ── Product cards ───────────────────────────────────────────── */
.card-product {
  background:    var(--cus-surface);
  border-radius: var(--cus-r-lg) !important;
  overflow:      hidden;
  box-shadow:    var(--cus-shadow-card);
  transition:    transform var(--cus-dur) var(--cus-spring),
                 box-shadow var(--cus-dur) var(--cus-ease);
  border:        1px solid var(--cus-line);
}
.card-product:hover {
  transform:  translateY(-6px);
  box-shadow: var(--cus-shadow-lift);
}

.card-product_wrapper {
  border-radius: var(--cus-r-lg) var(--cus-r-lg) 0 0;
  overflow: hidden;
}

.card-product_wrapper img {
  transition: transform .45s var(--cus-ease) !important;
}
.card-product:hover .card-product_wrapper img {
  transform: scale(1.05) !important;
}

.card-product_info {
  padding: 14px 16px 18px !important;
}

.name-product {
  font-weight: 600 !important;
  font-size:   14px !important;
  color:       var(--cus-text) !important;
  transition:  color var(--cus-dur) var(--cus-ease);
}
.name-product:hover { color: var(--cus-primary) !important; }

.price-new {
  font-weight: 700 !important;
  font-size:   15px !important;
  color:       var(--cus-primary) !important;
}
.price-old {
  color:           var(--cus-text-3) !important;
  text-decoration: line-through;
  font-size:       13px !important;
}

/* sale badge */
.product-badge_item.sale {
  background:    var(--cus-primary) !important;
  border-radius: var(--cus-r-pill) !important;
  font-weight:   700 !important;
  padding:       3px 10px !important;
}

/* ── Section headings ────────────────────────────────────────── */
.sect-heading.type-2,
.sect-heading {
  margin-bottom: 36px;
}

.s-title {
  font-size:   clamp(22px, 4vw, 32px) !important;
  font-weight: 700 !important;
  color:       var(--cus-text) !important;
  line-height: 1.25 !important;
}

.s-desc {
  font-size:   15px !important;
  color:       var(--cus-text-2) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

/* gold eyebrow accent */
.sect-heading .eyebrow,
.sect-heading small {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  font-size:     12px;
  font-weight:   700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:         var(--cus-gold);
  margin-bottom: 10px;
}
.sect-heading .eyebrow::before {
  content:    '';
  display:    inline-block;
  width:      28px;
  height:     2px;
  background: var(--cus-gold);
  border-radius: 2px;
}

/* ── Icon boxes (tf-icon-box) ────────────────────────────────── */
.tf-icon-box {
  padding:         28px 20px;
  background:      var(--cus-surface);
  border-radius:   var(--cus-r-lg);
  border:          1px solid var(--cus-line);
  box-shadow:      var(--cus-shadow-sm);
  transition:      transform var(--cus-dur) var(--cus-spring),
                   box-shadow var(--cus-dur) var(--cus-ease);
}
.tf-icon-box:hover {
  transform:  translateY(-4px);
  box-shadow: var(--cus-shadow-md);
}
.tf-icon-box .icon-box {
  width:           56px;
  height:          56px;
  border-radius:   var(--cus-r-md);
  background:      var(--cus-gold-lt);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 16px;
  font-size:       24px;
  color:           var(--cus-gold);
  transition:      background var(--cus-dur), transform var(--cus-dur) var(--cus-spring);
}
.tf-icon-box:hover .icon-box {
  background: var(--cus-gold);
  color:      #fff;
  transform:  scale(1.12) rotate(-4deg);
}

/* ── Swiper pagination ───────────────────────────────────────── */
.tf-sw-pagination .swiper-pagination-bullet {
  background:    var(--cus-line);
  opacity:       1;
  border-radius: var(--cus-r-pill);
  transition:    width var(--cus-dur), background var(--cus-dur);
}
.tf-sw-pagination .swiper-pagination-bullet-active {
  background: var(--cus-primary);
  width:      24px;
}

/* ── Hero sliders ────────────────────────────────────────────── */
.hero-slider .tf-banner-slide,
.banner-wrapper {
  border-radius: 0 0 var(--cus-r-xl) var(--cus-r-xl);
  overflow: hidden;
}

/* ── WOW / animate.css tweaks ────────────────────────────────── */
.wow { opacity: 0; }
.animated { opacity: 1; }

/* ── Flat spacing ────────────────────────────────────────────── */
.flat-spacing { padding-block: 64px !important; }
@media (max-width: 767px) {
  .flat-spacing { padding-block: 40px !important; }
}

/* ── Cart / wishlist sidebar ─────────────────────────────────── */
.offcanvas,
.modal-content {
  border-radius: var(--cus-r-xl) var(--cus-r-xl) 0 0 !important;
}
@media (min-width: 768px) {
  .offcanvas { border-radius: var(--cus-r-xl) 0 0 var(--cus-r-xl) !important; }
}

/* ── Form inputs ─────────────────────────────────────────────── */
.tf-field input,
.tf-field textarea,
.tf-field select,
input.tf-input,
textarea.tf-input {
  font-family:   var(--cus-font) !important;
  border-radius: var(--cus-r-md) !important;
  border:        1.5px solid var(--cus-line) !important;
  background:    var(--cus-surface) !important;
  color:         var(--cus-text) !important;
  transition:    border-color var(--cus-dur), box-shadow var(--cus-dur);
  font-size:     15px !important;
}
.tf-field input:focus,
.tf-field textarea:focus,
input.tf-input:focus {
  border-color: var(--cus-primary) !important;
  box-shadow:   0 0 0 3px rgba(224,114,10,.14) !important;
  outline:      none !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.tf-breadcrumb {
  background:    var(--cus-surface);
  border-bottom: 1px solid var(--cus-line);
  padding-block: 14px;
  font-size:     13px;
  font-weight:   500;
}
.tf-breadcrumb a { color: var(--cus-text-2); }
.tf-breadcrumb a:hover { color: var(--cus-primary); }
.tf-breadcrumb .current { color: var(--cus-text); }

/* ── Footer — matches header style ───────────────────────────── */
footer,
.footer {
  background:    rgba(255,255,255,.97) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top:    1px solid var(--cus-line) !important;
  box-shadow:    0 -2px 16px rgba(0,0,0,.06) !important;
  color:         var(--cus-text-2) !important;
  font-size:     14px;
  line-height:   1.75;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: var(--cus-text) !important;
  font-weight: 700 !important;
}
.footer a,
footer a {
  color:      var(--cus-text-2) !important;
  transition: color var(--cus-dur);
}
.footer a:hover,
footer a:hover { color: var(--cus-primary) !important; }

/* ── Dividers ────────────────────────────────────────────────── */
.line,
hr { border-color: var(--cus-line) !important; }

/* ── Scroll-reveal entry (for WOW.js + animate.css) ─────────── */
.fadeInUp  { animation-timing-function: var(--cus-ease) !important; }
.fadeInLeft  { animation-timing-function: var(--cus-ease) !important; }
.fadeInRight { animation-timing-function: var(--cus-ease) !important; }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 575px) {
  .s-title  { font-size: 20px !important; }
  .tf-btn   { padding: 10px 22px !important; }
  .card-product { border-radius: var(--cus-r-md) !important; }
}

/* ── reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT PAGE — Premium redesign
   ════════════════════════════════════════════════════════════════ */

/* ── Product section wrapper ─────────────────────────────────── */
.section-product-single {
  background: var(--cus-bg);
  padding-block: 40px 56px;
}

/* ── Gallery ─────────────────────────────────────────────────── */
.tf-product-media-wrap .flat-wrap-media-product {
  border-radius: var(--cus-r-xl);
  overflow: hidden;
  background: var(--cus-surface);
  box-shadow: var(--cus-shadow-md);
}
.tf-product-media-wrap .flat-wrap-media-product img {
  transition: transform .5s var(--cus-ease);
}
.tf-product-media-wrap .flat-wrap-media-product:hover img {
  transform: scale(1.03);
}
/* Thumbnails */
.tf-product-media-thumbs .swiper-slide .item {
  border-radius: var(--cus-r-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--cus-dur);
  cursor: pointer;
}
.tf-product-media-thumbs .swiper-slide-thumb-active .item {
  border-color: var(--cus-primary);
}

/* ── Product info panel ──────────────────────────────────────── */
.tf-product-info-list {
  background: var(--cus-surface);
  border-radius: var(--cus-r-xl);
  padding: 32px 36px !important;
  box-shadow: var(--cus-shadow-md);
  border: 1px solid var(--cus-line);
}
@media (max-width: 767px) {
  .tf-product-info-list { padding: 20px 18px !important; border-radius: var(--cus-r-lg) !important; }
}

/* ── Category eyebrow ────────────────────────────────────────── */
.product-infor-cate a {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:         var(--cus-gold) !important;
  text-decoration: none;
}
.product-infor-cate a::before {
  content:    '';
  display:    inline-block;
  width:      20px;
  height:     2px;
  background: var(--cus-gold);
  border-radius: 2px;
}

/* ── Product title ───────────────────────────────────────────── */
.product-infor-name {
  font-size:   clamp(22px, 3.5vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color:       var(--cus-text) !important;
  letter-spacing: -.02em !important;
}

/* ── Star rating row ─────────────────────────────────────────── */
.star-wrap .icon-Star,
.star-wrap .icon-Star-thin {
  color: #F5A623;
}
.star-wrap .icon-Star-thin { color: var(--cus-line); }

/* ── Meta chips (brand | sku | stock) ────────────────────────── */
.product-infor-meta {
  display:    flex;
  flex-wrap:  wrap;
  align-items:center;
  gap:        8px;
  padding:    10px 14px;
  background: var(--cus-bg);
  border-radius: var(--cus-r-md);
  border:     1px solid var(--cus-line);
}
.product-infor-meta .meta_brand a,
.product-infor-meta .meta_prd_code,
.product-infor-meta .meta_stock { font-size: 12px; font-weight: 600; }
.product-infor-meta .br-line.type-vertical {
  width: 1px; height: 14px;
  background: var(--cus-line);
  display: inline-block;
}
.product-infor-meta .text-success { color: #1E8E3E !important; }
.product-infor-meta .text-warning { color: #C07000 !important; }

/* ── Price ───────────────────────────────────────────────────── */
.product-infor-price {
  display:    flex;
  align-items:baseline;
  gap:        12px;
  flex-wrap:  wrap;
}
.product-infor-price .price-on-sale {
  font-size:   clamp(26px, 4vw, 34px) !important;
  font-weight: 800 !important;
  color:       var(--cus-text) !important;
  letter-spacing: -.02em;
  line-height: 1;
}
.product-infor-price .text-primary.price-on-sale {
  color: var(--cus-primary) !important;
}
.product-infor-price .text-decoration-line-through {
  font-size: 18px !important;
  color:     var(--cus-text-3) !important;
  font-weight: 400 !important;
}
.product-infor-price .badge-sale {
  background:    var(--cus-primary);
  border-radius: var(--cus-r-pill);
  padding:       3px 10px;
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.04em;
  vertical-align: middle;
}
.product-infor-price .br-line.type-vertical {
  display: none;
}

/* ── Short description ───────────────────────────────────────── */
.product-infor-desc {
  font-size:   14.5px !important;
  line-height: 1.75 !important;
  color:       var(--cus-text-2) !important;
}

/* ── Dividers inside info card ───────────────────────────────── */
.tf-product-info-list .br-line {
  border: none;
  border-top: 1px solid var(--cus-line);
  margin-block: 20px;
}

/* ── Attributes / variants ───────────────────────────────────── */
.tf-product-variant .variant-picker-label {
  padding: 8px 0;
  font-size: 13px;
}
.tf-product-variant .variant-picker-label .fw-medium {
  color: var(--cus-text-2);
}

/* ════════════════════════════════════════════════════════════════
   CTA Button hierarchy — The KEY fix
   ════════════════════════════════════════════════════════════════ */
.tf-product-total-quantity {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* 1. Telegram — PRIMARY hero button */
.tf-product-total-quantity .tf-btn.btn-fill {
  background:    var(--cus-primary) !important;
  border:        none !important;
  border-radius: var(--cus-r-pill) !important;
  padding:       15px 28px !important;
  font-size:     15px !important;
  font-weight:   700 !important;
  letter-spacing:.03em;
  color:         #fff !important;
  box-shadow:    0 6px 20px rgba(224,114,10,.35) !important;
  transition:    transform var(--cus-dur) var(--cus-spring),
                 box-shadow var(--cus-dur) var(--cus-ease) !important;
  width: 100%;
}
.tf-product-total-quantity .tf-btn.btn-fill:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(224,114,10,.45) !important;
}

/* 2. Add-to-cart row — qty + button side by side */
.tf-product-total-quantity form.d-flex {
  flex-direction: row !important;
  align-items:    stretch !important;
  gap:            10px !important;
}

/* Qty stepper — pill-shaped */
.tf-product-total-quantity form .d-flex.border {
  border: 1.5px solid var(--cus-line) !important;
  border-radius: var(--cus-r-pill) !important;
  background:    var(--cus-surface);
  padding:       0 14px !important;
  gap:           6px !important;
  min-width:     110px;
  justify-content: center;
  align-items: center;
  transition: border-color var(--cus-dur);
}
.tf-product-total-quantity form .d-flex.border:focus-within {
  border-color: var(--cus-primary) !important;
}
.tf-product-total-quantity form .d-flex.border .btn {
  font-size:  18px;
  font-weight:400;
  color:      var(--cus-text-2);
  line-height:1;
  padding:    0 !important;
  transition: color var(--cus-dur);
}
.tf-product-total-quantity form .d-flex.border .btn:hover {
  color: var(--cus-primary);
}
.tf-product-total-quantity form .d-flex.border input[type="number"] {
  border:      none !important;
  background:  transparent !important;
  box-shadow:  none !important;
  width:       36px !important;
  font-size:   15px !important;
  font-weight: 700 !important;
  text-align:  center;
  padding:     0 !important;
  color:       var(--cus-text) !important;
}

/* Add-to-cart button — SECONDARY pill */
.tf-product-total-quantity form .tf-btn.btn-stroke {
  background:    transparent !important;
  border:        2px solid var(--cus-primary) !important;
  border-radius: var(--cus-r-pill) !important;
  color:         var(--cus-primary) !important;
  font-size:     14px !important;
  font-weight:   700 !important;
  padding:       13px 22px !important;
  box-shadow:    none !important;
  transition:    background var(--cus-dur), color var(--cus-dur), transform var(--cus-dur) var(--cus-spring) !important;
}
.tf-product-total-quantity form .tf-btn.btn-stroke:hover {
  background: var(--cus-primary) !important;
  color:      #fff !important;
  transform:  translateY(-1px) !important;
}

/* 3. Wishlist — ghost / text button */
.tf-product-total-quantity > form:not(:has(.btn-fill)) .tf-btn.btn-stroke.w-100,
.tf-product-total-quantity > form .tf-btn.btn-stroke.w-100 {
  background:    transparent !important;
  border:        1.5px solid var(--cus-line) !important;
  border-radius: var(--cus-r-pill) !important;
  color:         var(--cus-text-2) !important;
  font-size:     13px !important;
  font-weight:   600 !important;
  padding:       11px 22px !important;
  box-shadow:    none !important;
  transition:    border-color var(--cus-dur), color var(--cus-dur) !important;
}
.tf-product-total-quantity > form .tf-btn.btn-stroke.w-100:hover {
  border-color: var(--cus-primary) !important;
  color:        var(--cus-primary) !important;
  background:   var(--cus-primary-lt) !important;
  transform:    none !important;
}
.tf-product-total-quantity > form .tf-btn.btn-stroke.w-100.active {
  color: var(--cus-primary) !important;
  border-color: var(--cus-primary) !important;
  background: var(--cus-primary-lt) !important;
}

/* 4. Browse More — tertiary text link */
.tf-product-total-quantity > a.tf-btn.btn-stroke.w-100 {
  background:    transparent !important;
  border:        none !important;
  box-shadow:    none !important;
  color:         var(--cus-text-3) !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  padding:       8px 0 !important;
  text-align:    center;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 0 !important;
}
.tf-product-total-quantity > a.tf-btn.btn-stroke.w-100:hover {
  color:           var(--cus-text) !important;
  transform:       none !important;
  text-decoration: underline;
}

/* ── Extra link row (Catalog link) ───────────────────────────── */
.tf-product-extra-link { margin-top: 4px; }
.product-extra-icon {
  display:    inline-flex;
  align-items:center;
  gap:        6px;
  font-size:  12px;
  font-weight:600;
  color:      var(--cus-text-3) !important;
  letter-spacing:.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--cus-dur);
}
.product-extra-icon:hover { color: var(--cus-primary) !important; }

/* ── Tabs section ────────────────────────────────────────────── */
.section-product-description {
  background: var(--cus-bg);
}
.tab-btn-wrap-v1 {
  border-bottom: 2px solid var(--cus-line) !important;
  gap: 4px;
  flex-wrap: wrap;
}
.tf-btn-tab {
  padding:       12px 20px !important;
  border-radius: var(--cus-r-md) var(--cus-r-md) 0 0 !important;
  border:        none !important;
  background:    transparent !important;
  color:         var(--cus-text-2) !important;
  font-weight:   600 !important;
  font-size:     14px !important;
  transition:    color var(--cus-dur), background var(--cus-dur) !important;
  position:      relative;
}
.tf-btn-tab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--cus-primary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform var(--cus-dur) var(--cus-ease);
}
.tf-btn-tab.active,
.tf-btn-tab:hover { color: var(--cus-primary) !important; background: var(--cus-primary-lt) !important; }
.tf-btn-tab.active::after { transform: scaleX(1); }

.tab-content_desc {
  padding-top: 28px;
  font-size:   15px;
  line-height: 1.8;
  color:       var(--cus-text-2);
}

/* ── Spec table ──────────────────────────────────────────────── */
.table-spec { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-spec tr:nth-child(odd) td { background: var(--cus-bg); }
.table-spec td {
  padding:     10px 16px;
  border-bottom: 1px solid var(--cus-line);
  font-size:   14px;
}
.table-spec .spec-label {
  width: 40%;
  color: var(--cus-text-2);
  font-weight: 600;
}
.table-spec .spec-value { color: var(--cus-text); font-weight: 500; }
.table-spec tr:first-child td:first-child { border-radius: var(--cus-r-md) 0 0 0; }
.table-spec tr:first-child td:last-child  { border-radius: 0 var(--cus-r-md) 0 0; }

/* ── Reviews section ─────────────────────────────────────────── */
#reviews { background: var(--cus-bg); }
.box-rating {
  background:    var(--cus-surface);
  border-radius: var(--cus-r-xl);
  padding:       28px 32px;
  border:        1px solid var(--cus-line);
  box-shadow:    var(--cus-shadow-sm);
}
.rating-ratio .text-display {
  font-size:   56px;
  font-weight: 800;
  line-height: 1;
  color:       var(--cus-text);
}
.rate-progress-star .progress {
  flex:          1;
  height:        6px;
  border-radius: var(--cus-r-pill);
  background:    var(--cus-line);
}
.rate-progress-star .progress-bar {
  background:    var(--cus-gold);
  border-radius: var(--cus-r-pill);
}
.box-comment .comment_info .avatar-initials {
  background: var(--cus-primary) !important;
  width:      44px !important;
  height:     44px !important;
  font-size:  16px !important;
  border-radius: var(--cus-r-md) !important;
}

/* ── FAQ accordion ───────────────────────────────────────────── */
.accordion-item_v2 {
  border-bottom: 1px solid var(--cus-line);
  padding-block: 4px;
}
.accordion-action {
  padding: 14px 0;
  font-size: 15px !important;
  color: var(--cus-text) !important;
  cursor: pointer;
}
.faq-content {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cus-text-2);
}