/* ==========================================================
 * Your Step - black & white theme over Chameleon 1.8 (ocStore 3)
 * Version 2 (2026-10-25). CSS only, no markup changes.
 * Rollback: delete this block from the custom CSS field, clear cache.
 * ========================================================== */

/* 1. Your Step palette */
:root {
  --ys-black: #171717;
  --ys-text: #171717;
  --ys-muted: #6f6f6f;
  --ys-line: #ececec;
  --ys-soft: #f7f7f7;
  --ys-white: #ffffff;
}

/* 2. Override Chameleon color variables.
 *    html:root beats :root, so it works regardless of load order. */
html:root {
  /* Primary buttons (checkout, forms) */
  --btn-primary-bg: var(--ys-black);
  --btn-primary-color: var(--ys-white);
  --btn-primary-bg-h: #000;
  --btn-primary-color-h: var(--ys-white);

  /* Buy button in product cards and lists */
  --btn-add-to-cart-bg: var(--ys-black);
  --btn-add-to-cart-border-color: var(--ys-black);
  --btn-add-to-cart-color: var(--ys-white);
  --btn-add-to-cart-bg-h: #000;
  --btn-add-to-cart-color-h: var(--ys-white);
  /* "Already in cart" state - light button */
  --btn-add-to-cart-bg-active: var(--ys-soft);
  --btn-add-to-cart-color-active: var(--ys-black);
  --btn-add-to-cart-bg-active-h: var(--ys-line);
  --btn-add-to-cart-color-active-h: var(--ys-black);

  /* Buy button on product page */
  --btn-add-to-cart-pp-bg: var(--ys-black);
  --btn-add-to-cart-pp-color: var(--ys-white);
  --btn-add-to-cart-pp-bg-h: #000;
  --btn-add-to-cart-pp-color-h: var(--ys-white);

  /* "Notify when in stock" */
  --btn-notify-stock-color: var(--ys-black);
  --btn-notify-stock-color-h: var(--ys-white);
  --btn-notify-stock-bg-h: var(--ys-black);

  /* Counters (cart, wishlist, compare, viewed) */
  --cart-total-bg: var(--ys-black);
  --cart-total-color: var(--ys-white);
  --wishlist-total-bg: var(--ys-black);
  --wishlist-total-color: var(--ys-white);
  --compare-total-bg: var(--ys-black);
  --compare-total-color: var(--ys-white);
  --viewed-total-bg: var(--ys-black);
  --viewed-total-color: var(--ys-white);

  --chm-btn-white-color-h: var(--ys-black);

  /* Product page button "in cart" state */
  --btn-add-to-cart-pp-bg-active: var(--ys-white);
  --btn-add-to-cart-pp-color-active: var(--ys-black);
  --btn-add-to-cart-pp-bg-active-h: var(--ys-soft);
  --btn-add-to-cart-pp-color-active-h: var(--ys-black);
  --btn-notify-stock-bg: var(--ys-white);

  /* Main scheme color (Chameleon "theme_2" = blue #4A86C7) */
  --main-bg: var(--ys-black);
  --main-text-color: var(--ys-black);
  --primary-bg: var(--ys-black);

  /* Menu (burger) button next to the logo + mobile menu icons */
  --btn-menu-bg: var(--ys-black);
  --btn-menu-bg-h: #000;
  --btn-menu-color: var(--ys-white);
  --btn-menu-color-h: var(--ys-white);
  --mob-menu-svg-color: var(--ys-black);
  --mob-menu-gh-bg: rgba(23, 23, 23, .08);

  /* Newsletter button and ribbons */
  --btn-newsletter-bg: var(--ys-black);
  --btn-newsletter-hover: #000;
  --ribbon-bg: var(--ys-black);
  --ribbon-bg-after: #000;
}

/* 3. Text and links (Chameleon default is blue #0f4b82 / #05335e) */
body {
  color: var(--ys-text);
}

/* "body a" is stronger than the theme's plain "a", so it wins
   even if the custom CSS field is printed before the theme stylesheet */
body a {
  color: var(--ys-text);
}

body a:hover,
body a:focus {
  color: var(--ys-muted);
}

/* Other blue accents found in the theme stylesheet */
body .btn-link,
.header-search .search_autocomplete .search-view-all-result,
.header-search .ajaxadvance .highlight,
.header-cart-product-item:hover .header-cart-product-name a,
.breadcrumb > li a:hover span {
  color: var(--ys-black) !important;
}

.swiper-scrollbar-drag {
  background: var(--ys-black) !important;
}

/* Visible keyboard focus (accessibility) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ys-black);
  outline-offset: 2px;
}

/* 4. Product cards */
.product-thumb,
.no-slider .product-thumb {
  box-shadow: 0 0 0 1px var(--ys-line); /* thin grey frame instead of bluish #EAEDF7 */
}

body .product-thumb .product-name a {
  color: var(--ys-text);
}

.product-thumb .product-name a:hover {
  color: var(--ys-muted);
}

.price,
.price-new {
  color: var(--ys-black);
  font-weight: 600;
}

.price-old {
  color: var(--ys-muted);
}

/* 5. Wishlist / compare: active state black instead of green #00AC45 */
.btn-wishlist.is-active .btn-icon-wishlist,
.btn-compare.is-active .btn-icon-compare {
  background: var(--ys-black);
}

/* 6. Form fields: black focus ring instead of light blue #CBDBF8 */
.form-control:focus,
select:focus,
input:focus,
textarea:focus {
  border-color: var(--ys-black);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, .2) !important;
}

/* 7. Category menu: active item (Chameleon default blue #4A71B1) */
.mod-categories .mc-item.is-active-item a {
  color: var(--ys-black) !important;
  font-weight: 600;
}

/* 8. Sliders: active dot (Chameleon default orange #E6952E) */
.swiper-pagination-bullet-active {
  background: var(--ys-black) !important;
}

/* 9. Floating bar viewed / wishlist / compare (#2F4050 -> black) */
.fixed-goods-bar {
  background: var(--ys-black);
}

.fixed-goods-bar [class*="-total"] {
  background: var(--ys-white);
  color: var(--ys-black);
}

/* 10. Breadcrumbs */
body .breadcrumb a {
  color: var(--ys-text);
}

.breadcrumb li:last-child,
.breadcrumb li:last-child a {
  color: var(--ys-muted);
}

/* 11. Side cart: "Checkout" button text was cut off.
   Let the buttons grow to fit and wrap to 2 lines if still too narrow. */
.header-cart-fix-right .chm-btn,
.header-cart-fix-right .btn {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 46px;
  padding: 10px 16px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
}

/* 12. Product page "In cart" button: theme keeps white text from the
   product-page rule on a light background, so it is invisible. */
#product .cart .btn-general.is-active:not(.btn-notify-stock),
#popup-quickview .cart .btn-general.is-active:not(.btn-notify-stock),
.add-to-cart-footer .btn-general.is-active,
#product-options.product-thumb .btn-general.is-active {
  background: var(--ys-white) !important;
  border-color: var(--ys-black) !important;
  color: var(--ys-black) !important;
}

#product .cart .btn-general.is-active .icon-cart-add,
#popup-quickview .cart .btn-general.is-active .icon-cart-add,
.add-to-cart-footer .btn-general.is-active .icon-cart-add,
#product-options.product-thumb .btn-general.is-active .icon-cart-add {
  background: var(--ys-black) !important;
}

/* 13. Bluish light grey #F7F8FB -> neutral grey */
#top,
#top .container,
header .btn-language-top,
header .btn-currency-top,
.header-search .form-control,
.header-search .form-control:focus,
.header-search .button_search,
.header-search .categories,
.btn-default,
.chm-btn-grey,
.btn-quickview,
.btn-remove,
.btn-wishlist,
.btn-compare,
.btn-fastorder,
.view-box,
.view-box-rs,
.mod-categories .mc-item > span,
.swiper-scrollbar,
.swiper-slideshow-arrow,
.promo-slider__arrow,
.pagination > li > a,
.pagination > li > span,
#phone .drop-icon-info {
  background-color: var(--ys-soft) !important;
}

/* 14. Size / option tiles: selected state black instead of light blue */
#product input[type="radio"]:checked + label,
#product input[type="radio"]:checked + span,
#product input[type="checkbox"]:checked + label,
#product input[type="checkbox"]:checked + span {
  border-color: var(--ys-black) !important;
  box-shadow: 0 0 0 1px var(--ys-black) !important;
}

/* 15. Product cards in home page sliders: keep price + cart button at the
   bottom of every card (category pages already do this). */
.product-thumb .caption {
  flex-grow: 1;
}

.product-thumb .price-actions-box {
  margin-top: auto;
}

/* 16. Category filter as a drop-down.
   Works together with yourstep-filter.js, which adds the classes
   .ys-filter / .ys-filter-open. Without the JS nothing changes. */
.ys-filter {
  border: 1px solid var(--ys-line);
  border-radius: 10px;
  box-shadow: none;
  margin-bottom: 20px;
}

.ys-filter > .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: var(--ys-white);
  color: var(--ys-black);
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 16px;
}

.ys-filter > .panel-heading::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}

.ys-filter.ys-filter-open > .panel-heading::after {
  transform: rotate(-135deg);
}

.ys-filter:not(.ys-filter-open) > .list-group,
.ys-filter:not(.ys-filter-open) > .panel-footer {
  display: none;
}

/* Filter values as small tiles instead of a long checkbox list */
.ys-filter [id^="filter-group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ys-filter .checkbox {
  margin: 0;
}

.ys-filter .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ys-line);
  border-radius: 8px;
  background: var(--ys-soft);
}

.ys-filter .checkbox input[type="checkbox"] {
  position: static;
  margin: 0;
  accent-color: var(--ys-black);
}

.ys-filter .checkbox label:has(input:checked) {
  border-color: var(--ys-black);
  background: var(--ys-white);
}

.ys-filter > .list-group > a.list-group-item {
  font-weight: 600;
  color: var(--ys-black);
}