/*
 * Zippo site colour scheme (source: zippo-redesign/style.css).
 * Loaded last. Holds the brand tokens used by custom.css, redesign.css and colors/zippo.css,
 * and overrides the Electro/Bootstrap rules in style.css that hard-code the old yellow (#fed700),
 * blue links (#0062bd) and blue-grey ink (#333e48). Change the palette here, not in style.css.
 */
:root {
  --zp-primary: #a63235;
  --zp-primary-dark: #852729;
  --zp-primary-darker: #6e2123;
  --zp-primary-soft: #f9e9e8;
  --zp-primary-tint: #fdf6f5;
  --zp-primary-rgb: 166, 50, 53;
  --zp-on-primary: #fff;

  --zp-ink: #242424;
  --zp-ink-strong: #080808;
  --zp-text: #414141;
  --zp-muted: #666;
  --zp-line: #e9e6e3;
  --zp-line-strong: #d6d3d0;

  --zp-surface: #f8f8f7;
  --zp-surface-warm: #f1efeb;
  --zp-paper: #eeebe5;
  --zp-sand: #eee7df;

  /* Bootstrap / Electro variables that style.css reads */
  --bs-primary: var(--zp-primary);
  --bs-ec-primary: var(--zp-primary);
  --bs-ec-primary-d: var(--zp-primary-dark);
  --bs-dark: var(--zp-ink);
}

/* ---------- Base text & links ---------- */
body { color: var(--zp-ink); }
a { color: var(--zp-ink); }
a:hover { color: var(--zp-primary); }
::selection { background: var(--zp-primary-soft); color: var(--zp-ink-strong); }

/* Electro's blue product / widget links */
.woocommerce-loop-product__title,
.product_list_widget a,
.product_list_widget .product-title,
.sidebar .product_list_widget li > a,
.sidebar .product_list_widget li > a .product-title,
.product-categories-menu-list .category a,
.brand-with-category .categories ul a,
.brand-with-category .categories .view-all,
.handheld-footer .handheld-widget-menu ul a,
.handheld-footer.v2 .handheld-widget-menu .menu a,
.table-compare .product-title,
.accessories .accessory-checkbox,
ul.dokan-seller-wrap li.dokan-single-seller .dokan-store-caption h3 a,
.dokan-product-listing .dokan-product-listing-area p a,
.dokan-report-wrap #dokan_tabs_container table tbody tr th a { color: var(--zp-ink); }
a:hover .woocommerce-loop-product__title,
.woocommerce-loop-product__link:hover .woocommerce-loop-product__title,
.product_list_widget a:hover,
.product_list_widget a:hover .product-title,
.sidebar .product_list_widget li > a:hover,
.product-categories-menu-list .category a:hover { color: var(--zp-primary); }
.accessories .accessory-checkbox .product-title { border-bottom-color: var(--zp-ink); }

/* ---------- Bootstrap components (style.css hard-codes #fed700 here) ---------- */
.btn-primary,
.btn-ec-primary,
.btn-primary:disabled, .btn-primary.disabled,
.btn-ec-primary:disabled, .btn-ec-primary.disabled {
  color: var(--zp-on-primary);
  background-color: var(--zp-primary);
  border-color: var(--zp-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-ec-primary:hover, .btn-ec-primary:focus, .btn-ec-primary:active, .btn-ec-primary.active,
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary {
  color: var(--zp-on-primary);
  background-color: var(--zp-primary-dark);
  border-color: var(--zp-primary-dark);
}
.btn-ec-primary-d,
.btn-ec-primary-d:disabled, .btn-ec-primary-d.disabled,
.btn-ec-primary-d:hover, .btn-ec-primary-d:focus, .btn-ec-primary-d:active, .btn-ec-primary-d.active,
.btn-check:checked + .btn-ec-primary-d, .btn-check:active + .btn-ec-primary-d {
  color: var(--zp-on-primary);
  background-color: var(--zp-primary-dark);
  border-color: var(--zp-primary-dark);
}
.btn-ec-primary-d:hover, .btn-ec-primary-d:active { background-color: var(--zp-primary-darker); border-color: var(--zp-primary-darker); }
/* The site uses .btn-warning as a primary CTA (custom.css sets its base colours). */
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning {
  color: var(--zp-on-primary) !important;
  background-color: var(--zp-primary-dark) !important;
  border-color: var(--zp-primary-dark) !important;
}
.btn-outline-ec-primary-d,
.btn-outline-ec-primary-d:disabled, .btn-outline-ec-primary-d.disabled { color: var(--zp-primary-dark); border-color: var(--zp-primary-dark); }
.btn-outline-ec-primary-d:hover, .btn-outline-ec-primary-d:active, .btn-outline-ec-primary-d.active,
.btn-check:checked + .btn-outline-ec-primary-d { color: var(--zp-on-primary); background-color: var(--zp-primary-dark); border-color: var(--zp-primary-dark); }
.text-ec-primary-d { color: var(--zp-primary-dark) !important; }
.bg-ec-primary-d { background-color: var(--zp-primary-dark) !important; color: var(--zp-on-primary); }
.border-ec-primary-d { border-color: var(--zp-primary-dark) !important; }
/* Electro's round cart-icon badge switches to the primary colour on hover. */
.button:hover::before,
li.product:hover .button::before,
li.product:hover .added_to_cart::before { color: var(--zp-on-primary); }

.btn-outline-primary,
.btn-outline-ec-primary,
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-outline-ec-primary:disabled, .btn-outline-ec-primary.disabled {
  color: var(--zp-primary);
  border-color: var(--zp-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-ec-primary:hover, .btn-outline-ec-primary:active, .btn-outline-ec-primary.active,
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-ec-primary {
  color: var(--zp-on-primary);
  background-color: var(--zp-primary);
  border-color: var(--zp-primary);
}
.btn-primary:focus, .btn-ec-primary:focus,
.btn-outline-primary:focus, .btn-outline-ec-primary:focus,
.btn-close:focus,
.form-check-input:focus,
.form-control:focus,
.form-select:focus { box-shadow: 0 0 0 .25rem rgba(var(--zp-primary-rgb), .2); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus { border-color: rgba(var(--zp-primary-rgb), .5); }

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--zp-primary);
  border-color: var(--zp-primary);
}
input[type=checkbox],
input[type=radio],
input[type=range],
progress { accent-color: var(--zp-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--zp-primary); }
.form-range::-moz-range-thumb { background-color: var(--zp-primary); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active,
.progress-bar { color: var(--zp-on-primary); background-color: var(--zp-primary); }
.list-group-item.active { border-color: var(--zp-primary); }

.text-primary, .text-ec-primary { color: var(--zp-primary) !important; }
.bg-primary, .bg-ec-primary { background-color: var(--zp-primary) !important; color: var(--zp-on-primary); }
.border-primary, .border-ec-primary { border-color: var(--zp-primary) !important; }

/* ---------- Electro / WooCommerce bits not covered by colors/zippo.css ---------- */
.electro-navbar-inner .navbar-search { border-color: var(--zp-primary); }
.star-rating span:before,
p.stars a,
#reviews:not(.electro-advanced-reviews) .product-rating .product-rating-details table tr .rating-number a .rating-star:before { color: var(--zp-primary); }
p.available-on-backorder, .available-on-backorder span,
p.pre-order, .pre-order span { color: var(--zp-primary); }
article.post .entry-content .page-links > span { background-color: var(--zp-primary); color: var(--zp-on-primary); }
.widget.dokan-best-seller-widget ul.dokan-best-sellers > li i,
.widget.dokan-best-seller-widget ul.dokan-feature-sellers > li i,
.widget.dokan-feature-seller-widget ul.dokan-feature-sellers > li i { color: var(--zp-primary); }
.mas-product:hover .mas-add-to-cart a { background-color: var(--zp-primary) !important; color: var(--zp-on-primary) !important; }

/* Blog "Xem thêm": Electro makes this a dark button; keep it dark in the brand ink. */
article.post .post-readmore .btn-primary { color: #fff; background-color: var(--zp-ink); border-color: var(--zp-ink); }
article.post .post-readmore .btn-primary:hover { color: #fff; background-color: var(--zp-primary); border-color: var(--zp-primary); }

/* ---------- Header ---------- */
/* The redesign keeps the header white on every breakpoint; red is used for accents only. */
.handheld-header-v2,
.handheld-header-v2.stuck,
.mobile-header-v2,
.mobile-header-v2.stuck {
  background-color: #fff;
  border-bottom: 1px solid var(--zp-line);
}
/* colors/zippo.css paints these white for a red bar; the bar is white here. */
.handheld-header-v2 .handheld-header-links > ul li > a,
.handheld-header-v2 .off-canvas-navigation-wrapper .navbar-toggler,
.handheld-header-v2 .off-canvas-navigation-wrapper button,
.handheld-header-v2 .off-canvas-navigation-wrapper.toggled .navbar-toggler,
.handheld-header-v2 .off-canvas-navigation-wrapper.toggled button,
.mobile-header-v2-inner .handheld-header-links > ul li > a,
.mobile-header-v2 .off-canvas-navigation-wrapper .navbar-toggler,
.mobile-header-v2 .off-canvas-navigation-wrapper button { color: var(--zp-ink); }
.handheld-header-v2 .handheld-header-links .cart .count,
.handheld-header-v2 .handheld-header-links .count,
.header-icon-counter,
.navbar-mini-cart .cart-items-count,
.header-icon .header-icon-counter {
  background-color: var(--zp-primary);
  color: var(--zp-on-primary);
}
.header-logo svg ellipse,
.footer-logo svg ellipse { fill: var(--zp-primary); }

/* ---------- Footer ---------- */
.site-footer .footer-bottom-widgets { background-color: #fff; border-top: 1px solid var(--zp-line); }
.site-footer .copyright-bar { background-color: #fff; border-top: 1px solid var(--zp-line); color: #888; }
.site-footer .widget-title { color: var(--zp-ink-strong); }
.site-footer .menu a,
.site-footer .footer-address { color: var(--zp-text); }
.site-footer .menu a:hover { color: var(--zp-primary); }
.footer-call-us .call-us-icon i,
.footer-call-us .call-us-number { color: var(--zp-primary); }

/* ---------- Focus ring ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible { outline: 2px solid var(--zp-primary); outline-offset: 2px; }