/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/

/* === SKU: clear stock + clear active selection === */

.sku-props__value{
  position: relative;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

/* ---- IN STOCK (non-active) ---- */
.sku-props__value--in-stock:not(.sku-props__value--active):not(.sku-props__value--missing){
  border-color: var(--theme-base-color);
  /* fallback */
  background-color: #fff;
  /* modern browsers: soft brand tint */
  background: color-mix(in srgb, var(--theme-base-color) 14%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-base-color) 55%, transparent) inset;
}

/* small marker (status) */
.sku-props__value--in-stock:not(.sku-props__value--missing)::after{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--theme-base-color);
  position: absolute;
  right: 7px;
  top: 7px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---- OUT OF STOCK (non-active) ---- */
.sku-props__value--out-of-stock:not(.sku-props__value--active):not(.sku-props__value--missing){
  border-color: color-mix(in srgb, var(--stroke_black) 35%, transparent);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 8px,
      rgba(255,255,255,.0) 8px,
      rgba(255,255,255,.0) 16px
    );
  opacity: .75;
}

/* small marker (status) */
.sku-props__value--out-of-stock:not(.sku-props__value--missing)::after{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stroke_black) 55%, #fff);
  position: absolute;
  right: 7px;
  top: 7px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---- ACTIVE (selected now): always obvious ---- */
.sku-props__value--active:not(.sku-props__value--missing){
  transform: translateY(-1px);
  z-index: 2;
  box-shadow:
    0 0 0 2px var(--theme-base-color) inset,
    0 8px 18px rgba(0,0,0,.10);
}

/* ACTIVE + IN STOCK */
.sku-props__value--active.sku-props__value--in-stock:not(.sku-props__value--missing){
  background: var(--theme-base-color);
  color: var(--white_text_black_reverse);
}

/* ACTIVE + OUT OF STOCK (still looks selected, but keeps “not available” meaning) */
.sku-props__value--active.sku-props__value--out-of-stock:not(.sku-props__value--missing){
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-base-color) 28%, #fff) 0,
      color-mix(in srgb, var(--theme-base-color) 28%, #fff) 10px,
      #fff 10px,
      #fff 20px
    );
  color: var(--text_black);
  opacity: 1;
}

/* keep missing as-is (Bitrix disables these) */
.sku-props__value--missing{
  opacity: .45;
}





.radio-cards{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 540px){ .radio-cards{ grid-template-columns:1fr; } }

.radio-card{ position:relative; cursor:pointer; }
.radio-card input{ position:absolute; opacity:0; pointer-events:none; }
.radio-card__box{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  transition:.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.radio-card__icon{ font-size:20px; line-height:1; }
.radio-card__title{ font-weight:600; }
.radio-card__hint{ display:block; font-weight:500; opacity:.7; font-size:12px; }
.radio-card__hint a{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }

.radio-card:hover .radio-card__box{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.radio-card input:checked + .radio-card__box{
  border-color:var(--brand, #cd9c5a);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand, #cd9c5a) 18%, transparent);
  background:linear-gradient(180deg, #fff, #fafaff);
}
.radio-card input:focus-visible + .radio-card__box{
  outline:2px solid color-mix(in srgb, var(--brand, #cd9c5a) 65%, #fff 0%); outline-offset:2px;
}