/*
 * Catalog pages (product detail, shop, category). Loaded by those pages only (@push('styles')).
 * Everything the demo's shop.html / product.html drew with inline styles or injected from its script
 * (swatches, price box, spec box, price filter, active-filter chips, empty state, list view) lives here as classes,
 * plus the WooCommerce brand-thumbnail widget rules that the theme CSS does not carry.
 */

/* ---------- product page: variations ---------- */
.cv-detail-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cv-detail-swatch {
  padding: 6px 13px; border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; font-size: 13px;
  cursor: pointer; margin: 0; transition: all .15s; color: #333; line-height: 1.3;
}
.cv-detail-swatch.selected, .cv-detail-swatch:hover { border-color: #F2AB1F; background: #fff4ef; color: #8a5200; font-weight: 600; }
.cv-detail-select { max-width: 280px; }
.variations th.label label { text-transform: uppercase; }
.variations .reset_variations { visibility: visible; margin-left: 8px; }
#cv-single-variation { display: block; margin-bottom: 14px; padding: 10px 14px; background: #fff8f6; border-radius: 8px; border: 1px solid #fde0d9; }
#cv-variation-price { font-size: 1.15rem; font-weight: 700; color: #8a5200; }
#cv-variation-price del { color: #999; font-weight: 400; margin-right: 8px; }
#cv-variation-price ins { text-decoration: none; }
#cv-variation-price .discount-badge { background: #D9552E; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
#cv-variation-sku { font-size: 12.5px; color: #555; margin-top: 4px; }
#cv-variation-sku .cv-stock { font-weight: 600; }
#cv-variation-sku .cv-stock.is-in { color: #2e7d32; }
#cv-variation-sku .cv-stock.is-out { color: #e53935; }
.single_add_to_cart_button:disabled, .ux-buy-now-button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- product page: description ---------- */
.cv-product-specs { background: #f9fafb; border: 1px solid #ececec; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; }
.cv-product-specs__title { margin: 0 0 8px; font-weight: 700; color: #222; text-transform: uppercase; font-size: 13.5px; }
.cv-product-specs table { width: 100%; margin: 0; font-size: 13.5px; border-collapse: collapse; }
.cv-product-specs td { padding: 5px 0; color: #666; }
.cv-product-specs .cv-spec-label { width: 160px; }
.cv-product-specs .cv-spec-value { font-weight: 600; color: #222; }
.cv-product-specs .cv-spec-brand { color: #B86E00; }
.cv-product-description img { max-width: 100%; height: auto; }

/* ---------- product page: reviews ---------- */
#review_form_wrapper.mfp-hide { display: none; }
#review_form_wrapper.mfp-hide.cv-open { display: block !important; margin: 20px 0; border: 1px solid #ececec; max-width: none; }
.cv-review-message { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; }
.cv-review-message.is-ok { background: #eef8f0; color: #1b5e20; }
.cv-review-message.is-error { background: #fdecea; color: #b71c1c; }
.cv-review-message[hidden] { display: none; }
#review_form .form_row_reviews { display: flex; flex-wrap: wrap; gap: 10px; }
#review_form .form_row_reviews p { flex: 1 1 160px; margin: 0 0 10px; }
.cv-review-list { list-style: none; margin: 20px 0 0; padding: 0; }
.cv-review { padding: 14px 0; border-top: 1px solid #ececec; margin-left: 0; }
.cv-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; }
.cv-review__stars { color: #f5a623; letter-spacing: 1px; }
.cv-review__stars .is-off { color: #ddd; }
.cv-review__head time { color: #999; font-size: 12.5px; }
.cv-review__text { margin: 6px 0 0; white-space: pre-line; }
.star-average { font-size: 1.6rem; margin-bottom: 8px; }
.star-average strong { color: #f5a623; }

/* ---------- shop / category: sidebar ---------- */
.cv-price-filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cv-price-filter__inputs { display: flex; gap: 8px; align-items: center; }
.cv-price-filter__inputs input { margin: 0; height: 36px; font-size: 13px; border-radius: 6px; }
.cv-price-filter__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-price-filter .cv-price-quick { margin: 0; border-radius: 6px; }
.cv-price-filter .cv-price-apply { margin: 4px 0 0; border-radius: 8px; background: #F2AB1F; }
.widget_brand_thumbnails ul.brand-thumbnails li { text-align: center; margin-bottom: 10px; }
.widget_brand_thumbnails ul.brand-thumbnails li a { display: block; border: 1px solid #eee; border-radius: 8px; padding: 6px; background: #fff; }
.widget_brand_thumbnails ul.brand-thumbnails li.current-brand a { border-color: #F2AB1F; }
.widget_brand_thumbnails ul.brand-thumbnails img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.widget_brand_thumbnails .cv-brand-name { font-size: 12px; font-weight: 700; color: #333; margin-top: 4px; }
.widget_brand_thumbnails .cv-brand-name span { color: #B86E00; }

/* ---------- shop / category: toolbar, chips, grid ---------- */
.cv-active-filters-wrap { margin-bottom: 14px; }
.cv-active-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: #fff; padding: 10px 14px; border-radius: 10px; border: 1px solid #eee; }
.cv-active-filters__count { font-size: 13.5px; color: #444; }
.cv-active-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cv-active-filters__chips #cv-reset-all-filters { font-size: 12.5px; color: #e53935; font-weight: 600; margin-left: 6px; }
.cv-pill { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #e0e0e0; background: #f8f9fa; color: #444; }
.cv-pill.active { background: #F2AB1F; color: #fff; border-color: #F2AB1F; }
.cv-term-description { margin-bottom: 14px; }
.products .cv-empty.col { flex-basis: 100%; max-width: 100%; padding: 40px 20px; background: #fff; border-radius: 12px; }
.cv-empty__text { font-size: 16px; color: #666; margin-bottom: 14px; }
.cv-empty .cv-empty__reset { border-radius: 8px; background: #F2AB1F; }

/* list view of the grid (the demo's "Hiển thị" toggle) */
.products.cv-list-view .product-small.col { flex-basis: 100%; max-width: 100%; }
.products.cv-list-view .product-small .col-inner { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.products.cv-list-view .product-small .box { display: flex; gap: 18px; align-items: center; }
.products.cv-list-view .product-small .box-image { width: 140px; flex: 0 0 140px; }
.products.cv-list-view .product-small .box-text { flex: 1; min-width: 0; text-align: left; padding: 0; }
.products.cv-list-view .product-small .box-text .buy-now-btn { margin: 6px 0 0; }

@media (max-width: 549px) {
  #cv-single-variation { padding: 8px 12px; }
  .cv-product-specs .cv-spec-label { width: 110px; }
  .products.cv-list-view .product-small .box-image { width: 96px; flex-basis: 96px; }
}

/* Brand description on archives */
  overflow: hidden;
  zoom: 1;
}

  width: 25%;
  float: right;
}

  width: 72%;
  float: left;
}

/* Brand description widget */
  box-sizing: border-box; /* Opera/IE 8+ */
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 0 1em;
}

/* Brand thumbnails widget */
ul.brand-thumbnails {
  margin-left: 0;
  margin-bottom: 0;
  clear: both;
  list-style: none;
}

ul.brand-thumbnails:before {
  clear: both;
  content: "";
  display: table;
}

ul.brand-thumbnails:after {
  clear: both;
  content: "";
  display: table;
}

ul.brand-thumbnails li {
  float: left;
  margin: 0 3.8% 1em 0;
  padding: 0;
  position: relative;
  width: 22.05%; /* 4 columns */
}

ul.brand-thumbnails.fluid-columns li {
  width: auto;
}

ul.brand-thumbnails:not(.fluid-columns) li.first {
  clear: both;
}

ul.brand-thumbnails:not(.fluid-columns) li.last {
  margin-right: 0;
}

ul.brand-thumbnails.columns-1 li {
  width: 100%;
  margin-right: 0;
}

ul.brand-thumbnails.columns-2 li {
  width: 48%;
}

ul.brand-thumbnails.columns-3 li {
  width: 30.75%;
}

ul.brand-thumbnails.columns-5 li {
  width: 16.95%;
}

ul.brand-thumbnails.columns-6 li {
  width: 13.5%;
}

.brand-thumbnails li img { /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

@media screen and (max-width: 768px) {
  ul.brand-thumbnails:not(.fluid-columns) li {
    width: 48% !important;
  }
  ul.brand-thumbnails:not(.fluid-columns) li.first {
    clear: none;
  }
  ul.brand-thumbnails:not(.fluid-columns) li.last {
    margin-right: 3.8%;
  }
  ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd) {
    clear: both;
  }
  ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even) {
    margin-right: 0;
  }
}
/* Brand thumbnails description */
.brand-thumbnails-description li {
  text-align: center;
}

.brand-thumbnails-description li .term-thumbnail img {
  display: inline;
}

.brand-thumbnails-description li .term-description {
  margin-top: 1em;
  text-align: left;
}

/* the label of the cart / buy buttons is an editable span: keep it in the text flow next to the button icon */
.single_add_to_cart_button > span, .ux-buy-now-button > span { display: inline; }

/* zoom lightbox of the product gallery */
.cv-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; }
.cv-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; background: #fff; border-radius: 4px; }
.cv-lightbox__btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #222; font-size: 28px; line-height: 44px; padding: 0; margin: 0; cursor: pointer; }
.cv-lightbox__btn.is-close { top: 16px; right: 16px; }
.cv-lightbox__btn.is-prev { left: 16px; top: 50%; margin-top: -22px; }
.cv-lightbox__btn.is-next { right: 16px; top: 50%; margin-top: -22px; }

/* review form submit: a button (its label is an editable region), drawn like the plugin's input#submit */
.woocommerce #review_form #respond p.form-submit button#submit {
  background-color: #81b441; color: #fff; border: 0; width: auto; margin: 0 auto; padding: 10px 30px;
  text-transform: uppercase; height: 40px; min-height: inherit; line-height: inherit;
}