:root {
	--main-bg-white-1: #f9f9f9;
    --main-bg-white-2: #f5f5f5;
    --main-bg-gold-1: #bd9c4f;
    --main-color-gold-1: #bd9c4f;
    --main-bg-black-1: #222222;
	}  
	  

	 /* Счётчик над товарами */
    .cart-count-badge {
    display: inline-block;
    background: #e91e63;
    color: white;
    font-size: 8px;
    font-weight: 500;
    padding: 4px 4px;
    border-radius: 100px;
    position: absolute;
    top: 34px;
    right: 40px;
    aspect-ratio: 1 / 1;
    min-width: 16px;
    text-align: center;
    }
    
    
	
	.products {
    padding-bottom: 120px; padding-top: 40px;
    
    
    display: grid;
    /*
	grid-template-columns: repeat(4, calc(25% - 12px));
	*/
	grid-template-columns: repeat(5, calc(20% - 13px));
    gap: 36px 16px;
    margin-bottom: 36px;
	}
	 
	 
    .product {
 
    }
    
    /*
    .product img {
    object-fit: cover;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
    }
    */
    
    .product_name {
	    font-size: 16px; line-height: 18px; font-weight: 400; text-align: left; padding-bottom: 8px;
	    /* Переносы */
		word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;
		/* Скрыть текст за строкой */
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    
    .wrap_price {
	    display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center;
	    gap: 10px; margin-bottom: 8px;
    }
    
    .product_price {
		font-size: 16px; line-height: 22px; font-weight: 500; text-align: left; color: #e72222;
    }
    
	.product_old_price {
		font-size: 14px; line-height: 18px; font-weight: 400; text-align: left; text-decoration: line-through; color: #8a8a8a;
    }
    
    
    .add-to-cart {
	    width: 100%; height: 40px; border: unset;
	    border-radius: 8px; -webkit-border-radius: 8px;
	    transition: 0.3s ease;
	    
	    background: -webkit-linear-gradient(135deg, rgb(31, 178, 31), rgb(0, 101, 0));
		background: -moz-linear-gradient(135deg, rgb(31, 178, 31), rgb(0, 101, 0));
		background: linear-gradient(135deg, rgb(31, 178, 31), rgb(0, 101, 0));
		color: white; font-weight: 600; font-size: 14px;
		
		
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;

    }
    .add-to-cart:hover {cursor: pointer; opacity: 0.6;}
    .add-to-cart:active {transform: scale(1.04); transition: 0.15s ease;}
    .svg_icon_added {width: 100%; max-width: 18px; object-fit: unset; margin-bottom: unset; height: unset; }
    
    
    .overlay_1 {
	    /* background: rgba(0, 0, 0, 0.50); width: 100%; height: 100%; position: fixed; z-index: 2; */
	    width: 100%; height: 100%; position: fixed; top: 0px; z-index: 5; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); display: none;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* CART */
    
    .cart_wrap {
	    display: flex;
		justify-content: center; /* Horizontal */
		align-items: center;    /* Vertical */
		/* height: 100vh;   */       /* Needed for vertical centering */
		display: none;
    }
    
    .cart {
      /*border: 1px solid #ccc; */
      padding: 10px; 
      width: 100%;
      max-width: 800px;
      color: var(--main-bg-black-1);
      background: white;
     /* position: absolute; */ top: 1%; z-index: 6;
      
      
       position: fixed;
	   top: 0;
	  /* left: 0; */
	   width: 100%;
	   height: 100%; /* На весь экран */
    }
    
    .cart_inside_fixed {
  height: 100%; /* Ограничиваем высоту, чтобы контент не влезал, было 80% */
  overflow-y: auto; /* Добавляем вертикальный скролл */
  background: white;
    }
    
    .cart h2 {text-align: center; font-size: 30px;}
    .cart-item {
      display: flex;
      align-items: center;
      gap: 10px;
	  border-bottom: 1px solid #ccc;
	  padding: 10px 20px 10px 10px;
    }
    .cart-item img {
	  /*  
      width: 50px;
      height: 50px;
      */
      object-fit: cover;
	  border-radius: 8px;
	  -webkit-border-radius: 8px;
	  
	width: 100%; max-width: 70px; min-width: 60px;
    height: auto;
    }
    .cart-item-info {
      flex: 1;
    }
    .artikul_inside_basket {
	 display: block; font-size: 12px; color: gray;
    }
    .artikul_inside_basket strong {
	    
    }
    
    .controls {
	display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: center;
	width: 140px;
    }
    
    .controls button {
    /* margin: 0 5px; */
    width: 26px;
    height: 26px;
    border: unset;
    border: 1px solid #e7e7e7;
    border-radius: 50px;
	font-size: 14px;
    transition: 0.3s ease;
    
    
    background: -webkit-linear-gradient(135deg, rgb(255, 255, 255), rgb(229, 229, 229));
	background: -moz-linear-gradient(135deg, rgb(255, 255, 255), rgb(229, 229, 229));
	background: linear-gradient(135deg, rgb(255, 255, 255), rgb(229, 229, 229));
    }
    .controls button:hover {cursor: pointer; opacity: 0.6; transform: scale(1.1);}
    
    .controls .remove-item {}
    .controls .svg_remove_item {width: 100%; max-width: 20px; transition: 0.3s ease; opacity: 0.4; margin-left: 12px;}
    .controls .svg_remove_item:hover {cursor: pointer; opacity: 0.6; transform: scale(1.1);}
    
    
    .item_quantity_inside_basket {
	    width: 100%; max-width: 38px; text-align: center; font-size: 14px; /* display: none; */
    }
    
    
    
    
    .total {
      font-weight: bold;
      margin: 15px 0;
      text-align: right;
      padding-right: 20px;
    }
    .total::before {
      content: "Товаров: " attr(data-count) " шт. • ";
      color: #555;
    }
    .order-form {
      margin-top: 20px;
      padding: 15px;
      /* border: 1px dashed #aaa; */
      background: #f9f9f9;
    }
    .order-form input[type=text], .order-form input[type=tel], .order-form input[type=email],
    .order-form select, .order-form textarea {
      width: 100%; min-height: 45px;
      padding: 8px;
      box-sizing: border-box;
    }
    .order-form label {
      font-weight: bold; font-size: 14px; margin: 14px 0px 4px 0px; display: block;
    }
    .contact-options {
      margin: 10px 0px 15px 0px;
    }
    .contact-options strong {font-weight: bold; font-size: 14px; margin: 14px 0px 4px 0px; display: block;
    }
    .contact-options .grid_4 {grid-row-gap: 0px;}
    .contact-options label {
      display: block;
      margin: 5px 0;
      font-weight: normal;
      text-align: center;
    }
    
    
    
    
    
    
    
    #wrap_agree_and_submit {
	    
    }

    
    #agree {
      margin: 10px 10px 10px 0px;
      width: 100%; max-width: 20px; aspect-ratio: 1;
      
      width: 20px; height: 20px;
    }
    
    #agree:hover {cursor: pointer;}
    
    label.wrap_agree_label {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: unset;
    
 
    }
    
    #agree-label {
      display: inline-block;
      cursor: pointer;
     /* border-bottom: 2px solid #d32f2f; */
      transition: border-color 0.3s;
	  font-size: 12px; font-weight: 400;
	  

    }
    #agree:checked + #agree-label {
     /* border-color: #388e3c; */
    }
    
    a.a_agree_label {
	color: var(--main-bg-black-1);	
	background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    font-weight: 600;
    transition: background-size .25s, color .25s;
    position: relative;
    background-position: bottom right;
    text-decoration: none;
    }
    
    a.a_agree_label:hover {
    background-size: 100% 1px;
    background-position: bottom left;
    }
    
    
    .submit-btn {
      background: #007cba;
      color: white;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      border-radius: 8px;
      transition: 0.3s ease;
      
    background: -webkit-linear-gradient(105deg, rgb(142, 193, 38), rgb(0, 123, 36));
    background: -moz-linear-gradient(105deg, rgb(142, 193, 38), rgb(0, 123, 36));
    background: linear-gradient(105deg, rgb(142, 193, 38), rgb(0, 123, 36));
    }
    .submit-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .submit-btn:enabled:hover {
	cursor: pointer;
    transform: translate(0px, -4px);
    opacity: 0.6;
    }
    
    
    
    #send-status {
      margin-top: 10px;
      font-weight: bold;
    }
    .empty-cart {
      text-align: center;
      color: #777;
      font-style: italic;
      padding: 20px;
    }
   
    
    
    .grid_2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 10px; /* grid-row-gap: 10px; */}
    .grid_3 {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: 10px; /* grid-row-gap: 10px; */}
    .grid_4 {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: 10px; /* grid-row-gap: 10px; */}
    .grid_4_1_1_05_05 {display: grid; grid-template-columns: 1fr 1fr 0.5fr 0.5fr; grid-template-rows: 1fr; grid-column-gap: 10px; /* grid-row-gap: 10px; */}
    .basket_form_element {}
    .basket_form_element label {}
    
    .basket_form_element input,
    .basket_form_element select,
    .cart textarea {border: unset; border: 1px solid rgba(69, 69, 69, 0.24); border-radius: 8px;}
    
    .basket_form_element .label_text {font-size: 14px; line-height: 14px; width: 100%; padding-left: 8px; text-align: left; font-weight: 500;}
    .basket_form_element .label_text .little_label_span {font-size: 12px; font-weight: 400; display: block;}
    .basket_form_element .svg_form_contact {}
    
    .contact-options .svg_form_contact {
	    width: 100%; max-width: 32px; aspect-ratio: 1; margin: 0 auto; display: block;
    }
    .contact-options .basket_form_element label {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%; max-width: 200px;
    height: 50px;
    border: 1px solid rgba(127, 127, 127, 0.34);
    
    padding: 8px 10px;
	border-radius: 12px;
	transition: 0.3s ease;
	
	/* чиним на safari некорректное отображение вариантов связи, картинки отъезжали влево */
	  display: grid; 
  grid-template-columns: 1fr 4fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2px 4px; 
  grid-template-areas: 
    ". . ."; 
    
    
    }
    .contact-options .basket_form_element label:hover {cursor: pointer; transform: translate(0px, -4px); background-color: white;}
    .contact-options .basket_form_element label input {width: 100%; max-width: 20px; aspect-ratio: 1;}
    
    #customer-comment {resize: none;}