@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ─────────────────────────────────────────────────────────────────────────── */
/* Design tokens — v44 redesign (prototype :root)                              */
/* Consumed by cart-* / checkout-* / and future new-UI pages.                  */
/* Colors and spacing are the single source of truth here; do not hardcode.    */
/* ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* ─────────────────────────────────────────────────────────────────────── */
  /* UNIVERSAL TOKENS — shared by all brands.                                */
  /* Brand-specific tokens (colors, surfaces, borders, button geometry)     */
  /* live in `inforeisen/tokens.css` (siteId=1) and `oponytomy/tokens.css`  */
  /* (siteId=2); one of them loads right after this file via styles.ftlh.  */
  /* ─────────────────────────────────────────────────────────────────────── */

  /* border-module: neutral rgba grey used as generic divider, brand-agnostic */
  --border-module:rgba(107,114,128,.4);

  /* radii scale */
  --radius-sm:8px;
  --radius-lg:8px;
  --radius-pill:100px;

  /* spacing scale */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:40px;

  /* typography */
  --font-mono:'JetBrains Mono', monospace;
  --font-body:'Outfit', sans-serif;

  /* shared (brand-agnostic) surfaces — design system §2.3, §3 */
  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.08);
  --chip-tooltip-bg: #323744;
}


.section {
        padding: 32px 0;
    }
	
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	background: var(--bg-input, #ffffff);
	@media screen and (max-width: 768px) {
		padding: 32px 5px 32px 15px; 
	}
}
	
.banner-slideshow {
	display: block;                                                                                     
	width: 700px;                                                                                                                
	height: 200px; 
	margin: 0 auto;
	padding: 35px 0;
	@media screen and (max-width: 740px) {
			display: none;
		}                                                                                                 
                                                                                                        
}                                                                                                                      
.banner-slide {                                                                                                        
	display: none;                                                                                                       
	width: 100%;                                                                                                         
	}                                                                                                                      
.banner-slide--active {                                                                                                
	display: block;                                                                                                      
	}                                                                                                                      
                                                                                                                    
a.banner-slide--active {
 	cursor: pointer;
	}

.banner-slide__title {
	margin: 12px 16px 8px;
	font-size: 18px;
	font-weight: 600;
}
.banner-slide__tire {
	display: flex;
    align-items: center;
	align-content: center;
	gap: 8px;
	padding: 2px 4px 4px 4px;
	

}
.banner-tire {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 160px;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.banner-tire__img {
	width: auto;
	max-width: 100%;
	height: 100px;
	object-fit: contain;
	display: block;
}
.banner-tire__brand {
	font-weight: 800;
	font-size: 20px;
}
.banner-tire__name {
	font-size: 12px;
	color: #555;
	text-align: center;
}
.banner-tire__meta {
	font-size: 12px;
	color: #777;
	margin-top: 2px;
}
.banner-tire__price {
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
}


.banner-tire{
	display: flex;
	flex-direction: column;
	min-width: 224px;
	height: 200px;
	border: 1px solid #ddd8d4;
	border-radius: 4px;
	background: var(--bg-input, #ffffff);
	box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	padding: 12px 8px 8px 8px;
	position: relative;

}

.banner-tire {
	transition: border-color 0.3s ease;
}

.banner-tire:hover,
.banner-tire.active {
	border: 1px solid var(--Old-Blue, rgba(56, 109, 148, 0.95));
}

.b2b-results.from-banner .b2b-results__row {
	border: 1px solid var(--Old-Blue, rgba(56, 109, 148, 0.95));
	transition: border-color 0.3s ease;
}

.banner-tire__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	
	border-bottom: 0.5px solid var(--border-surface, #e5e7eb);
	overflow: hidden;
}

.banner-tire__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 206px;
	padding-bottom: 8px;
}

.banner-tire__brand-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--Secondary-black, var(--text-on-light, #323744));
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
}

.banner-tire__specs-right {
	display: flex;
	align-items: flex-end;
	font-family: 'JetBrain Mono', monospace;
	font-size: 16px;
	font-weight: 600;
	flex-direction: column;
	color: var(--text-muted, #6b7280);
}


.banner-tire__image-container {
	display: flex;
	justify-content: start;
	align-items: center;
	flex: 1;
	position: relative;
	width: 170px;
    left: -33px;
    bottom: 6px;
	
}

.banner-tire__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.bunner_season_icon{
	width: 20px;
}


.banner-tire__info {
	
	flex-direction: row;
	gap: 8px;
}

.banner-tire__attributes {
	display: flex;
	gap: 8px;
	align-items: center;
}

.banner-tire__attribute-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.banner-tire__attribute-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.banner-tire__certifications {
	display: flex;
	gap: 4px;
}

.banner-tire__badge {
	background-color: #e8e1d7;
	border: 0.4px solid var(--text-subtle, #9ca3af);
	border-radius: 4px;
	padding: 4px 6px;
	font-family: 'JetBrain Mono', monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--text-on-light, #323744);
	white-space: nowrap;
}

.banner-tire__eu-labels {
	position: absolute;
  	bottom: 57px;
  	right: 5px;
  	text-align: right;

}

.banner-tire__eu-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.banner-tire__eu-badge {
	background-color: var(--text-on-light, #323744);
	border-radius: 3px;
	width: 20px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrain Mono', monospace;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;

}
.banner-tire__eu-noise{
	color:  var(--text-on-light, #323744);
	text-align: center;
	font-family: "JetBrains Mono";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.banner-tire__eu-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	object-fit: contain;
}

.banner-tire__footer {
	display: flex;
	height: 46px;
	padding-top: 10px;
	justify-content: space-between;
	justify-content: end;
	align-items: center;
	width: 224px;
}

.banner-tire__price-button {
	background-color: #d75831;
	border: none;
	border-radius: 0;
	padding: 8px 6px;
	width: 96px;
	height: 40px;
	display: flex;
	justify-content: end;
	gap: 4px;
	cursor: pointer;
	opacity: 0.94;
	transition: opacity 0.2s ease;
	position: relative;
	align-items: baseline;
}

.banner-tire__price-button:hover {
	opacity: 1;
}

.banner-tire__price-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 28px;
	color: #ffffff;
	margin: 0;

}

.banner-tire__price-unit {
	font-size: 20px;
	color: #ffffff;
	
}

.header_container{
	position: relative;
	max-width: 100%;
	height: auto;
	padding: 35px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.16)!important;
	background: var(--bg-page, #d2d8db);
}

/* Only ROLE_USER sees the banner-slideshow — keep the 360px reserve for them. */
.header_container--with-banner{
	height: 360px;

	@media screen and (max-width: 740px) {
		height: 100%;
	}
}
.header_container-wheel{
	display: block;
	position: absolute;
	right: 0px;
	bottom: -20px;
	@media screen and (max-width: 576px) {
		bottom: -10px;
	}
	@media screen and (max-width: 480px) {
			display: none;
		}
}

.header_container-wheel img{
	@media screen and (max-width: 1200px) {
		width: 140px;
		
	}

	@media screen and (max-width: 992px) {
		width: 125px;
	}
	@media screen and (max-width: 700px) {
		width: 100px;
	}

	@media screen and (max-width: 576px) {
			width: 65px;
	}
}

.header {
	background: var(--color-white);
	border-radius: 16px;
	max-width: 1100px;
	box-sizing: border-box;
	margin: 0 auto;
}

.header__inner {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	padding: 0  100px 0 16px;
	gap: 24px;
	z-index: 3;
}

.header__logo1 img {
	height: 30px;
	display: block;
	max-width: 140px;
}
.header__logo2{
	  display: block;
	  max-width: 140px;
}

/* Mobile: логотип ≥100px, якщо влазить. Admin/transit мають inline
   `style="max-width: 70px"` на <img> (header.ftlh) — inline перемагає,
   тож админська чапка лишається компактною.
   Також знімаємо десктопні 100px правого паддінгу на .header__inner
   і фіксимо .header__burger (у нього `width: 30%; margin-right: -70px`
   з дизайну під той паддінг — на вузьких вьюпортах flex-shrink чавив
   його майже в нуль, іконка «зникала»). */
@media (max-width: 720px) {
	.header__inner {
		height: auto;
		min-height: 60px;
		padding: 0 16px;
		gap: 12px;
	}

	.header__actions {
		gap: 12px;
	}

	.header__logo1 img,
	.header__logo2 img {
		display: block;
		width: 100px;
		height: auto;
		max-width: 100px;
	}

	.header__logo2 {
		max-width: 100px;
	}

	.header__burger {
		width: auto;
		margin-right: 0;
		padding: 8px;
		flex: 0 0 auto;
	}

	.header__burger img {
		width: 22px;
		height: auto;
		display: block;
	}
}

.header__menu {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-direction: row;
}

@media (max-width: 720px) {
	.header__menu {
		display: none;
	}
}
.dropdown-menu{
	display: none;
}

.header__link{
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--color-brand-dark);
	text-decoration: none;
	@media screen and (max-width: 768px) {
			font-size: 14px;
			font-weight: 400;
		  }
}

.header__link:hover, 
.header__link::focus, 
.header__link::active,
.header__link--active,
.header__link--active:hover, 
.header__link--active:focus, 
.header__link--active:active  {
	color: var(--color-secondary-black)!important;
}

.header__link--active{
	color: var(--color-secondary-black);
	text-decoration: none;
	
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 16px
}

.header__langs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase
}

.header__lang--active {
	color: var(--color-secondary-dark);
	font-weight: 600
}
.header__lang--active:hover, 
.header__lang--active:focus,
.header__lang--active:active,
.header__lang:hover, 
.header__lang:focus, 
.header__lang:active{
	color: var(--color-secondary-dark)!important;
	background-color: white;
	border: none;
}

.header__lang {
	color: var(--color-secondery-grey);
	text-decoration: none;
}

.header__lang-divider {
	color: var(--color-secondery-grey);
}

.header__cart {
	position: relative;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px
}

.header__cart-icon {
	width: 18px;
	height: 18px;
	display: block
}

.header__cart-badge {
	display: flex;
	position: absolute;
	left: 20px;
	top: 0px;
	width: 18px;
	height: 18px;
	background: var(--accent-primary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	padding: 0 0 1px 1px;

}
.hide {
	display: none;
}
.header__cart-text{
	color: var(--color-white);
	text-align: center;
	font-size: 8px;
	font-style: normal;
	font-weight: 700;

}
.header__account {
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 5;
	text-decoration: none;
	color: var(--color-secondary-black);
}

.header__account-icon {
	width: 18px;
	height: 18px
}

.header__account-label {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--color-secondary-black);
}

.header__account-label:hover,
.header__account-label:focus,
.header__account-label:active,
.header__account:hover,
.header__account:focus,
.header__account:active{
	color: var(--color-secondary-black)!important;
	text-decoration: none;
	background-color: white;
	border: none!important;
	
}
/* header dropdown */
.dropdown {
  position: relative;
}

.dropdown > a {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dropdown-menu {
  position: absolute;
  top: 20px;
  left: -5px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-surface, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  padding: 6px 0;
  display: none;
  z-index: 50;
  white-space: nowrap;
}


.dropdown.open .dropdown-menu {
  display: block;
}


.dropdown-menu .header__link,
.dropdown-menu .header__link--active { 
  display: block;
  padding: 8px 16px;
  color: var(--color-secondary-black);
  text-decoration: none;
  font-size: 14px;
}
.dropdown-menu .header__link:hover,
.dropdown-menu .header__link:focus {
  background: #f6f6f6;
  outline: none;
}


.dropdown > a::after {
  content: '⌄';
  font-size: 14px;
  margin-left: 6px;
  opacity: 0.9;
  transition: transform .18s;
  
}
.dropdown.open > a::after { transform: rotate(-180deg); }



/* MOBIL MENU   */

.header__burger {
	display: inline-flex;
	background: transparent;
	border: 0;
	align-items: center;
	margin-right: -70px;
	cursor: pointer;
	width: 30%;
}

.header__burger svg {
	width: 22px;
	height: 22px;
	display: block;
}

.header__burger:active {
	border: none;
	outline: none;
}

.mobile-menu {
	position: absolute;
	top: 13px;
	right: 0;
	width: 350px;
	height: 100vh;
	background-color: var(--bg-input, #ffffff);
	box-shadow: 2px 0 18px rgba(15, 23, 42, 0.08);
	border-right: 1px solid  var(--border-surface, #E5E7EB);;
	transform: translateX(100%);
	transition: transform 0.3s;
	display: none;
	pointer-events: auto;
	overflow: auto;
	z-index: 50;
	padding: 24px 40px;
}


.menu-btn-close {
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
}

.mobile-menu__list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mobile-menu__item {
	padding: 12px 8px;
	border-radius: 8px;
	color: var(--black, #0A0A0A);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu.is-open {
	pointer-events: auto;
	display: block;
	transform: translateX(0);
}


.mobile-menu.is-open .mobile-menu__panel {
	transform: translateX(0);
}

@media (min-width:720px) {
	.mobile-menu {
		display: none;
	}

	.header__burger {
		display: none;
	}
}



/*`  HERO SECTION */

.hero-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	
	position: absolute;
	left: 161px;
	bottom: 99px;
	@media screen and (max-width: 1010px) {
		left: 131px;
		bottom: 71px;
	}
	@media screen and (max-width: 910px) {
		left: 121px;
		bottom: 71px;
	}
	@media screen and (max-width: 820px) {
		left: 101px;
		bottom: 71px;
	}
	@media screen and (max-width: 730px) {
	  	left: 60px;
	  	bottom: 71px;
	 }
	 @media screen and (max-width: 576px) {
		left: 48px;
		bottom: 36px;
	}
	@media screen and (max-width: 430px) {
		left: 30px;
		bottom: 36px;
	}
	
}

.hero-pretitle {
	color: var(--color-old-blue);
	font-size: var(--font-size-body-m);
	line-height:var(--line-height-body-m);
	font-weight: var(--font-weight-regular);
	margin: 0;
	
	
	@media screen and (max-width: 820px) {
		font-size: 14px;
		font-weight: 400;
	  }
	  @media screen and (max-width: 730px) {
	  		font-size: 13px;
	  		font-weight: 400;
	  	  }
	 @media screen and (max-width: 576px) {
		font-size: 12px;
		font-weight: 400;
	  }
	@media screen and (max-width: 430px) {
		font-size: 11px;
		font-weight: 400;
	  	}
	  
}

.hero-title {
	color: var(--color-secondary-black);
	font-size: 32px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1px;
	margin: 0;
	@media screen and (max-width: 820px) {
			font-size: 28px;
			font-weight: 500;
		  }
  	@media screen and (max-width: 576px) {
		font-size: 20px;
		font-weight: 500;
    }
  	@media screen and (max-width: 430px) {
	  	font-size: 18px;
	  	font-weight: 400;
		letter-spacing: 0.5;
    }
}
.btn{
	display: flex;
		width:100%;
		max-width:120px;
		min-width: 100px;
		height: 32px;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		border: 1px solid var(--color-old-blue);
		background: #FFF;
		color: var(--color-old-blue);
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 18px;
	
}

.btn_second{
	border: 1px solid var(--color-old-blue);
	background: #FFF;
	color: var(--color-old-blue);
}

.btn_main{
	max-width: 120px;
	border: none;
	background:var(--color-old-blue);
	color: var(--color-white);
	
}
.btn_danger{
	
	border: 1px solid #FF5E5E;
	color: #FF5E5E;
}
.disabled{

	border: 1px solid #bbbbbb;
	color: #bbbbbb;
}
.long{
	max-width:100%;
}

.filter_holder{
	display: flex;
	flex-direction: row;
	gap: 50px;
	@media screen and (max-width: 760px) {
				gap: 10px;
			}
	@media screen and (max-width: 480px) {
			flex-direction: column;
		
		}
}
.filter_holder_row{
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	gap: 10px;
	
}
.filter_holder_column{
	display: flex;
	flex-direction: row;
	gap: 10px;
	@media screen and (max-width: 748px) {
		gap: 5px;
	}
}
.row{
	position: relative;
}


.col{
	display: flex;
}
.input__control, .select_control {
	position: relative;
	    flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding: 6px 12px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius:  0 4px 4px 0;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		@media screen and (max-width: 748px) {
				font-size: 12px;
			}
}
	
.select_control {
	color: #757575
}
.input__control:active,
.input__control:focus,
.input__control:focus-visible,
.select_control:active,
.select_control:focus
.select_control:focus-visible{
	border-color: #757575 ;
	outline: none;
}
	
.cart_save{
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 20px 0 30px 0;
}
.form-check{
	padding-bottom: 20px;
}

.input-group-text{
	display: flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius:  4px 0 0 4px;
	
	@media screen and (max-width: 748px) {
		font-size: 14px;
	}
}

.withount_gap{
	margin-right: -10px;
}

.input__control::placeholder{ 
	@media screen and (max-width: 748px) {
	  font-size: 12px;
	}
}



.search_panel{
	display: flex;
	padding: 4px 24px;
	justify-content: flex-end;
	align-items: flex-end;
	align-self: stretch;
	border-radius: 8px;
	opacity: 0.8;
	background: #EAECEF;
	margin: 0 auto 16px;
	height: 32px;
	

}
.search_panel_btn{

	width: 100px;
	
	color: var(--black, #0A0A0A);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	text-decoration-line: underline;

}
.search_panel_holder{
	display: none;
}
.search_panel_holder.open{
	display: block;
}

.container_noresults{
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	height: 100px;
}


/*    CART    */
.checkout_container{
	max-width: 1300px;
	margin: 30px auto;
	padding: 0 20px;
	border: 1px #cccccc solid;
	background: var(--bg-input, #ffffff);
}
.checkout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	height: 40px;
	color: var(--color-brand-dark);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: #fff;
	border-bottom: 1px solid var(--border-surface, #E5E7EB);
	padding: 0 20px;
	font-size: 14px;

}

.checkout-header__right {
	display: flex;
	gap: 24px;
	align-items: center;
}

.checkout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	
	border-bottom: 1px solid var(--border-surface, #E5E7EB);
}

.checkout-row__left {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.checkout-row__title {
	color: #0A0A0A;
	font-weight: 600;
	
}

.checkout-row__subtitle {
	color: var(--text-muted, #6B7280);
	font-weight: 500;
	font-size: 14px;
}

.checkout-row__right {
	display: flex;
	gap: 24px;
	align-items: center;
}

.checkout-col {
	width: 100px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow: hidden;
}

.checkout-col--qty {
	min-width: 60px;
	
}
.btn-reduce,
.btn-increase{
	display: inline-block;
	padding: 0 5px;
}
.btn_qty:hover,
.btn_qty:active{
	transform: scale(1.1);
	color: #000000;
}
.checkout-subtotal{
	display: flex;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
}

.checkout-col_total {
	width: 130px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
}
.checkout-col_netto {
	width: 100px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
	font-weight: 400;
}

.cart_price_title{
	text-transform: lowercase;
	font-size: 10px;
}

.checkout-row__remove-btn {
	background: transparent;
	border: 0;
	padding: 6px;
	display: inline-flex;
	align-items: center;
}

.checkout-row__remove-btn img {
	width: 18px;
}

.checkout-row__remove-btn img:hover,
.checkout-row__remove-btn img:active{
	transform: scale(1.1);
}

.align-center{
	display: flex;
	align-content: center;
	  justify-content: center;
	  margin: 20px 0;
}

@media (max-width:640px) {

	.checkout-header__inner,
	.checkout-row {
		padding: 10px 12px;
	}

	.checkout-header__right {
		gap: 12px;
	}

	.checkout-row__right {
		gap: 12px;
	}
}
.note_holder{
	display: flex;
	padding: 25px 64px;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}
.note_title{
	display: flex;
	padding-bottom: 8px;
	align-items: center;
	gap: 4px;
}
.note_icon{
	display: flex;
	width: 18px;
	height: 18px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	aspect-ratio: 1/1;
}
.note_title_text{
	color: var(--black, #0A0A0A);
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: 18px; 
}
.note_body{
	width: 100%;
	height: 30px;
	border: none;
	border-bottom: 1px solid var(--Stroke-grey, var(--border-surface, #E5E7EB));
	resize: none;
}
.note_body:active, 
.note_body:focus,
.note_body:focus-visible{
	border:none;
	border-bottom: 1px solid var(--Stroke-grey, var(--border-surface, #E5E7EB));
	outline: none;
}


.cart_addres_title{
	padding: 20px 0;
	    font-size: 18px;
	    font-weight: 600;
	}
	
	
.order_desc{
	
	  max-width: 300px;
	  width: 200px;
}
.order_ean{
	max-width: 130px;
	min-width: 130px;
	font-size: 14px;
	font-weight: 500;
}
.order_adress{
	margin: 20px 0;
}
.order_title{
	text-align: center;
	font-weight: 700;
	padding-top: 15px;
	margin-bottom: -15px;
	
}


/* TIERS */
.num{
	max-width: 30px;
}
.medium{
	max-width: 60px;
}

.lond_col{
	min-width: 120px;
}

/* ── Bootstrap utilities & components required by catalog_images ─────────── */
.container_images{
	
	.ci-result pre {
	    white-space: pre-wrap;
	    font-size: 0.9rem;
	}
	
	.ci-limit-input {
	    width: 180px;
	}
	
	.ci-options-section {
	    margin-bottom: 1rem;
	}
	
	
	
	/* Grid */
	.col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; padding-right: 12px; padding-left: 12px; }
	.offset-md-2 { margin-left: 16.6667%; }
	
	/* Card */
	.card {
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    min-width: 0;
	    word-wrap: break-word;
	    background-color: #fff;
	    background-clip: border-box;
	    border: 1px solid rgba(0,0,0,.125);
	    border-radius: 0.375rem;
	}
	.card-header {
	    padding: 0.5rem 1rem;
	    background-color: rgba(0,0,0,.03);
	    border-bottom: 1px solid rgba(0,0,0,.125);
	}
	.card-header:first-child { border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0; }
	.card-body { flex: 1 1 auto; padding: 1rem 1rem; }
	
	/* Form */
	.form-label { margin-bottom: 0.5rem; display: inline-block; }
	.form-text { margin-top: 0.25rem; font-size: 0.875em; }
	.form-control {
	    display: block;
	    width: 100%;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.5;
	    color: #212529;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #ced4da;
	    border-radius: 0.375rem;
	    box-sizing: border-box;
	}
	.form-control:focus {
	    border-color: #86b7fe;
	    outline: 0;
	    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
	}
	.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; }
	.form-check .form-check-input { float: left; margin-left: -1.5em; }
	.form-check-input {
	    width: 1em;
	    height: 1em;
	    margin-top: 0.25em;
	    vertical-align: top;
	    appearance: none;
	    background-color: #fff;
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: contain;
	    border: 1px solid rgba(0,0,0,.25);
	    border-radius: 0.25em;
	    cursor: pointer;
	}
	.form-check-input:checked {
	    background-color: #0d6efd;
	    border-color: #0d6efd;
	    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	}
	.form-check-label { cursor: pointer; }
	
	/* Buttons */
	.btn {
		max-width: 200px;
	    display: inline-block;
	    font-weight: 400;
	    line-height: 1.5;
	    text-align: center;
	    text-decoration: none;
	    vertical-align: middle;
	    cursor: pointer;
	    user-select: none;
	    background-color: transparent;
	    border: 1px solid transparent;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    border-radius: 0.375rem;
	    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
	.btn:disabled { opacity: .65; pointer-events: none; }
	.btn-outline-success {
	    color:var(--color-old-blue);
	    border-color:var(--color-old-blue);
	}
	.btn-outline-success:hover {
	    color: #fff;
	    background-color:var(--color-old-blue);
	    border-color:var(--color-old-blue);
	}
	
	/* Spinner */
	.spinner-border {
	    display: inline-block;
	    width: 2rem;
	    height: 2rem;
	    vertical-align: -0.125em;
	    border: 0.25em solid currentcolor;
	    border-right-color: transparent;
	    border-radius: 50%;
	    animation: spinner-border .75s linear infinite;
	}
	.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }
	@keyframes spinner-border { to { transform: rotate(360deg); } }
	
	/* Display utilities */
	.d-none  { display: none !important; }
	.d-block { display: block !important; }
	
	/* Text utilities */
	.fw-bold     { font-weight: 700 !important; }
	.text-center { text-align: center !important; }
	.text-muted  { color: #6c757d !important; }
	
	/* Spacing utilities (t=top, b=bottom, s=start/left, e=end/right) */
	.mt-1 { margin-top: 0.25rem !important; }
	.mt-2 { margin-top: 0.5rem !important; }
	.mt-3 { margin-top: 1rem !important; }
	.mt-4 { margin-top: 1.5rem !important; }
	.mt-5 { margin-top: 3rem !important; }
	.mb-1 { margin-bottom: 0.25rem !important; }
	.mb-2 { margin-bottom: 0.5rem !important; }
	.mb-3 { margin-bottom: 1rem !important; }
	.mb-4 { margin-bottom: 1.5rem !important; }
	.mb-5 { margin-bottom: 3rem !important; }
	.ms-1 { margin-left: 0.25rem !important; }
	.ms-2 { margin-left: 0.5rem !important; }
	.ms-3 { margin-left: 1rem !important; }
	.ms-4 { margin-left: 1.5rem !important; }
	.ms-auto { margin-left: auto !important; }
	.me-1 { margin-right: 0.25rem !important; }
	.me-2 { margin-right: 0.5rem !important; }
	.p-1 { padding: 0.25rem !important; }
	.p-2 { padding: 0.5rem !important; }
	.p-3 { padding: 1rem !important; }

	
/* ─────────────────────────────────────────────────────────────────────────── */

}


/* ─────────────────────────────────────────────────────────────────────────── */
/* B2B CART — v44 redesign                                                     */
/* Prototype: https://designby-lyana.github.io/tior-prototype/?v=44 (#screenCart) */
/* Figma:     unFtURcfGKl6diAdIRZwih node 5381-14034                            */
/* Scope:     used by /b/cart?ui=v2 → layouts/new/b2b/b2b_cart_v2.ftlh          */
/* Design tokens live at the top of this file (see :root block near line 5).   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Respect the HTML `hidden` attribute on cart blocks that also carry a
   `display:flex`-style rule (otherwise author `display:` beats UA default). */
.cart-empty[hidden],
.cart-summary-card[hidden],
.cart-items-card[hidden],
.cart-clear-all[hidden]{ display:none !important; }

/* Padding + max-width parity with /b/search .tior-search-page + __inner
   (see b2b_filters.css). Mobile 16/12, tablet+ 24/clamp(16..80). */
.cart-content{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 12px;
  box-sizing: border-box;
  display:flex; flex-direction:column; gap:var(--space-lg);
}
@media (min-width: 670px){
  .cart-content{
    padding: 24px clamp(16px, calc(16px + (80px - 16px) * ((100vw - 670px) / (1280px - 670px))), 80px);
  }
}
.cart-header{ display:flex; flex-direction:column; gap:6px; }
/* ── Universal back breadcrumb ────────────────────────────────────────────
   Single class for every "« Powrót" / back link across the new UI. Replaces
   the legacy .cart-back / .checkout-back / .pwd-back / .tior-search-page__back
   classes. The "«" arrow is injected via ::before, so templates just pass
   the label text. */
.od-breadcrumb{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-on-light);
  text-decoration:none; cursor:pointer;
}
.od-breadcrumb::before{
  content:"«";
  font-size:18px;
  line-height:1;
}
.od-breadcrumb:hover{ color:var(--text-default); }

.cart-title-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-md);
}
.cart-clear-all{
  font-family:var(--font-body); font-size:16px;
  color:var(--accent-primary); text-decoration:none;
  cursor:pointer; flex:none;
}
.cart-clear-all:hover{ color:var(--accent-pressed); }
.cart-title{
  font-family:var(--font-body); font-weight:700;
  font-size:24px; color:var(--text-default);
  margin:0;
}

/* Two-column wrapper — no-op on mobile, side-by-side on tablet+ (see media queries
   at the bottom of the cart section). */
.cart-two-col{ display:block; }

.cart-items-card{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  margin-bottom: 16px;
}
/* Mobile layout: flat 2×2 grid.
   Row 1: [icon + product info ............] [trash]
   Row 2: [qty stepper ..................] [prices stacked right] */
.cart-item{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "product remove"
    "qty     right";
  padding:var(--space-lg);
  gap:var(--space-sm);
  align-items:center;
}
.cart-item + .cart-item{
  border-top:1px solid var(--border-surface);
}
.cart-item-product{
  grid-area:product;
  display:flex; align-items:flex-start; gap:var(--space-sm);
  min-width:0;
}
.cart-item-icon{ font-size:18px; flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{
  font-family:var(--font-body); font-weight:500;
  font-size:16px; color:var(--text-default);
  margin:0;
}
.cart-item-size{
  font-family:var(--font-mono); font-size:16px;
  color:var(--text-muted); margin-top:2px;
}
.cart-item .qty-stepper{
  grid-area:qty; justify-self:start;
  /* Cart-scoped override — prototype #screenCart values (120×40, тонший border,
     без внутрішнього padding), картка на /search лишається зі своїми токенами. */
  width:120px;
  min-width:120px;
  border-width:1px;
  padding:.5px;
}
.cart-item .qty-btn{ width:22px; font-size:14px; font-weight:700; }
.cart-item-unit{
  font-family:var(--font-body); font-weight:400;
  font-size:16px; color:var(--text-muted);
  text-align:right; margin-bottom:2px;
}
.cart-item-total{
  font-family:var(--font-body); font-weight:700;
  font-size:18px; color:var(--text-on-light);
  white-space:nowrap;
}
.cart-right{
  grid-area:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.cart-item .cart-item-remove{
  grid-area:remove;
  align-self:start;
  justify-self:end;
}

.cart-summary-card{
  background:#fff;
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  overflow:hidden;
}
.cart-summary-header{
  background:var(--bg-surface-light, #fafafa);
  border-bottom:1px solid #939496;
  padding:12px 16px;
  min-height:54px;
  display:flex; align-items:center;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.cart-summary-title{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; line-height:18px; color:var(--text-default);
  margin:0; flex:1;
}
.cart-summary-body{
  padding:24px 0 0;
  display:flex; flex-direction:column; gap:16px;
}
.cart-summary-rows{
  display:flex; flex-direction:column; gap:8px;
  padding:0 16px;
}
.cart-summary-meta{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
}
.cart-summary-row{
  display:flex; justify-content:space-between; align-items:center;
  height:18px;
}
.cart-summary-label{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
  flex:0 0 80px;
}
.cart-summary-value{
  font-family:var(--font-body); font-weight:400;
  font-size:16px; line-height:18px; color:#111827;
}
.cart-summary-total-label{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
  white-space:nowrap;
}
.cart-summary-total-value{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; line-height:18px; color:#111827;
}
.cart-summary-actions{
  padding:0 20px var(--space-xl);
  display:flex; flex-direction:column; gap:var(--space-sm);
}
.btn-cart-primary{
  appearance:none; border:none; width:100%; height:var(--btn-cta-height);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  border-radius:var(--btn-cta-radius); cursor:pointer;
  text-decoration:none; box-sizing:border-box;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-cart-primary:hover,
.btn-cart-primary:visited,
.btn-cart-primary:focus{ color:var(--text-inverted); text-decoration:none; }
.btn-cart-primary:hover{ filter:brightness(1.06); }
.btn-cart-primary:active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-cart-primary:disabled{
  background:var(--text-subtle, #9ca3af); cursor:not-allowed;
  filter:none;
}
.btn-cart-primary:disabled:hover{ filter:none; }
.btn-cart-secondary{
  appearance:none; width:100%; height:var(--btn-cta-height);
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--accent-primary);
  color:var(--accent-pressed); font-family:var(--font-body);
  font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  border-radius:var(--btn-cta-radius); cursor:pointer;
  text-decoration:none; box-sizing:border-box;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-cart-secondary:hover,
.btn-cart-secondary:visited,
.btn-cart-secondary:focus{ color:var(--accent-pressed); text-decoration:none; }
.btn-cart-secondary:hover{ background:#f0f9fa; }
.btn-cart-secondary:active{ transform:scale(.985); }

/* qty stepper — design system §9.3 (2026-08-10 pill-outline редизайн).
   Один компонент, два місця застосування — картка товару (Search) і кошик;
   значення нижче — джерело правди для обох. */
.qty-stepper{
  display:flex; align-items:center; justify-content:space-between;
  box-sizing:border-box;
  flex:none;
  width:var(--qty-stepper-width);
  min-width:calc(var(--qty-stepper-width) - 20px);
  height:var(--qty-stepper-height);
  /* 2026-08-12: прибрано `padding:0 var(--space-xs)` (додавалось 08-11 щоб +/-
     не липли до бордера). Прототип каже кнопки повинні заповнювати всю ширину
     до pill-краю, щоб hover-tint досягав border-у зліва/справа. Символи +/-
     лишаються оптично інсетнутими за рахунок centered-flex всередині 28px
     кнопки — до pill-краю ~14px нейтрального простору. */
  background:var(--bg-input);
  border:1.5px solid var(--border-default);
  border-radius:var(--qty-stepper-radius);
  overflow:hidden;
}
.qty-btn{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:none; padding:0; margin:0;   /* захист від browser-default button styling */
  width:var(--qty-btn-width); height:100%;
  flex:none;
  background:transparent;
  color:var(--text-on-light);
  font-family:var(--font-body);
  font-size:var(--qty-btn-font-size);
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.qty-btn:hover{ background:var(--border-subtle); }
.qty-btn:active{ background:transparent; color:var(--accent-primary); }
/* focus-ring-inset — виняток з канону (§3): контейнер має overflow:hidden,
   зовнішнє кільце було б обрізане. */
.qty-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring-inset); }
.qty-btn:disabled{ color:var(--text-muted); cursor:not-allowed; }
.qty-value{
  flex:1; text-align:center;
  font-family:var(--font-body);
  font-size:var(--qty-value-font-size);
  font-weight:var(--qty-value-weight);
  line-height:1;
  color:var(--text-on-light);
  background:transparent;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}

/* chip / Rozmiar — статичний бейдж-тег розміру шини (design system §9.6).
   Не інтерактивний (без hover/active/focus). Бренд-специфіка через токени:
   IF — світлий фон (--bg-chip #ddd8d4) + темний текст (--text-on-light #323744).
   OP — темний фон (--bg-chip #282424) + світлий текст (--text-inverted #FAFAFA;
   переопрацьовано в oponytomy/overrides.css, бо на OP --text-on-light теж #282424).
   font-family: fallback-ланцюг — home-scoped --font-family-mono (в межах Home),
   інакше OP-scoped --font-mono, інакше хардкод-стек. */
.chip-rozmiar{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:var(--chip-radius);
  font-family:var(--font-family-mono, var(--font-mono, 'JetBrains Mono', ui-monospace, monospace));
  font-weight:700;
  font-size:14px;
  background:var(--bg-chip);
  color:var(--text-on-light);
}

/* delete button — inline flex child at the right end of .cart-item-top */
.cart-item-remove{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--text-muted);
  transition:color 140ms ease;
}
.cart-item-remove:hover{ color:var(--text-default); }
.cart-item-remove svg{ display:block; }

/* Clear-cart confirmation modal — prototype v46+ */
.cart-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:9998;
  display:none; align-items:center; justify-content:center;
}
.cart-modal-backdrop.is-open{ display:flex; }
.cart-modal{
  background:#fff; border-radius:12px; padding:24px;
  max-width:320px; width:calc(100% - 48px);
  font-family:var(--font-body);
  display:flex; flex-direction:column; gap:16px;
}
.cart-modal-title{
  font-size:16px; font-weight:600; line-height:1.4;
  color:var(--text-default);
}
.cart-modal-actions{ display:flex; justify-content:flex-end; gap:12px; }
.btn-modal-cancel{
  height:44px; padding:0 20px;
  background:none; border:1px solid var(--border-default);
  border-radius:8px;
  font-family:var(--font-body); font-size:16px; color:var(--text-default);
  cursor:pointer;
}
.btn-modal-cancel:hover{ background:var(--bg-surface-light); }
.btn-modal-confirm{
  height:44px; padding:0 20px;
  background:var(--accent-primary); border:none;
  border-radius:8px;
  font-family:var(--font-body); font-size:16px; color:#fff; font-weight:500;
  cursor:pointer;
}
.btn-modal-confirm:hover{ filter:brightness(1.06); }
.btn-modal-confirm:active{ background:var(--accent-pressed); transform:scale(.985); }

/* guest activation block — shown to unauthenticated visitors on /b/cart */
.cart-guest-activate{
  padding:64px 0;
  display:flex; flex-direction:column; gap:var(--space-md);
}
.cart-guest-title{
  font-family:var(--font-body); font-weight:700;
  font-size:24px; color:var(--text-default); margin:0;
}
.cart-guest-text{
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  color:var(--text-muted); margin:0 0 var(--space-sm);
}
.cart-guest-actions{ display:flex; flex-direction:column; gap:var(--space-sm); }
.btn-cart-guest-primary{
  width:100%; height:48px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent-primary); border:none;
  border-radius:var(--radius-lg);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--text-inverted, #fffaf2); text-decoration:none; cursor:pointer;
  box-sizing:border-box;
}
.btn-cart-guest-primary:hover{ filter:brightness(1.06); }
.btn-cart-guest-secondary{
  width:100%; height:48px;
  background:none; border:1.5px solid var(--accent-primary);
  border-radius:var(--radius-lg);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--accent-primary); cursor:pointer;
}
.btn-cart-guest-secondary:hover{ background:#f0f9fa; }

/* empty state — Section 8 */
.cart-empty{
  display:flex; flex-direction:column; align-items:center;
  padding:60px 24px 40px; text-align:center; gap:24px;
}
.cart-empty-icon{
  width:56px; height:56px; border-radius:50%;
  background:#e8eef0;
  display:flex; align-items:center; justify-content:center;
}
.cart-empty-title{
  font-family:var(--font-mono); font-weight:700; font-size:20px;
  color:var(--text-on-light, #323744); margin:0 0 12px;
}
.cart-empty-text{
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  color:var(--text-muted); margin:0;
}
.cart-empty-actions{
  display:flex; flex-direction:column; gap:12px; width:100%;
}

/* ── Tablet+ layout — Figma 5381:14153 ─────────────────────────────────────
   Items card and summary card sit side-by-side. Summary is a fixed-width
   sidebar; items card grows to fill the rest. Item row becomes a single
   5-column grid matching the header row above it. */
@media (min-width: 720px){
  .cart-two-col{
    display:flex;
    align-items:flex-start;
    gap:var(--space-xl);
  }
  .cart-two-col > .cart-items-card{
    flex:1 1 0;
    min-width:0;
  }
  .cart-two-col > .cart-summary-card{
    flex:none;
    width:216px;
    position:sticky;
    top:var(--space-xl);
  }

  /* Flatten item to a single row: [product | qty | unit | total | remove] */
  .cart-item{
    grid-template-columns:1fr 72px 90px 90px 20px;
    grid-template-areas:"product qty unit total remove";
    padding:var(--space-sm) var(--space-lg);
    gap:var(--space-xs);
    align-items:center;
  }
  .cart-item-product{ align-items:center; }
  /* Compact stepper on tablet+ per Figma 5381:14067 — 72×26 with a white
     interior (mobile keeps the prototype's 120×40 grey pill). */
  .cart-item .qty-stepper{
    justify-self:center;
    width:72px; min-width:72px; height:26px;
    background:var(--bg-input);
    border-width:1.5px;
    padding:0 var(--space-xs);
  }
  .cart-item .qty-btn{ width:var(--qty-btn-width); font-size:12px; }
  .cart-item .qty-value{ font-size:16px; }
  /* Lift .cart-right's children into the item grid so they occupy their own cells. */
  .cart-right{ display:contents; }
  .cart-item-unit{
    grid-area:unit;
    text-align:center;
    font-weight:400; font-size:16px; line-height:18px;
    color:var(--text-muted);
    margin-bottom:0;
    white-space:nowrap;
  }
  /* On tablet+ the unit-price cell is only 56px — hide the "/ szt." suffix to
     match Figma (5381:14037, 5381:14153) which shows just the amount. */
  .cart-item-unit-suffix{ display:none; }
  .cart-item-total{
    grid-area:total;
    text-align:center;
    font-weight:400; font-size:16px; line-height:18px;
    color:var(--text-on-light, var(--text-on-light, #323744));
  }
  .cart-item .cart-item-remove{
    grid-area:remove;
    align-self:center;
    justify-self:center;
  }
}

/* ── Desktop — Figma 5381:14037 ─────────────────────────────────────────────
   Wider summary sidebar; header row is hidden per the desktop mock. */
@media (min-width: 1024px){
  .cart-two-col > .cart-summary-card{ width:320px; }
  .cart-item{ gap:var(--space-lg); }
}

/* ==== Checkout v2 (2026-07-08) — reuses design tokens from cart v2 ==== */

/* ── Root container (prototype: .checkout-content) ──
   Padding + max-width parity with /b/search .tior-search-page + __inner
   (see b2b_filters.css). Mobile 16/12, tablet+ 24/clamp(16..80). */
.checkout-root{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 12px;
  box-sizing: border-box;
  display:flex; flex-direction:column; gap:var(--space-lg);
}
@media (min-width: 670px){
  .checkout-root{
    padding: 24px clamp(16px, calc(16px + (80px - 16px) * ((100vw - 670px) / (1280px - 670px))), 80px);
  }
}

/* ── Top-bar block (back + steps + title). Named `.checkout-topbar` — NOT
   `.checkout-header` — because the legacy cart (b2b_cart_new.ftlh) and order
   detail (b2b_order_detail.ftlh) already use `.checkout-header` for their
   flex-row column headers (line ~1059) and the flex-column layout here would
   otherwise clobber their layout via cascade order. ── */
.checkout-topbar{
  display:flex; flex-direction:column; gap:0;
}

/* ── Progress steps row ── */
.checkout-steps{
  display:flex; align-items:center; gap:0;
  margin-bottom:var(--space-sm);
}
.step-circle{
  width:32px; height:32px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:400; font-size:22px;
  line-height:18px; flex:none; cursor:pointer;
  transition:opacity 140ms ease;
}
.step-circle:hover{ opacity:.8; }
.step-circle.active{ background:var(--text-on-light); color:var(--text-inverted); }
.step-circle.inactive{ background:rgba(11,12,12,0.48); color:var(--bg-chip); }
.step-circle.done{ background:rgba(11,12,12,0.48); color:var(--bg-chip); }
.step-line{
  flex:1; height:1px; background:var(--text-subtle, #9ca3af);
  margin:0 4px;
}
.checkout-title{
  font-family:var(--font-body); font-weight:700;
  font-size:24px; color:var(--text-default);
  margin:0;
}
/* ── New shared progress bar (Figma 5381:14516) ─────────────────────────────
   Horizontal 3-step panel that sits above the two-column body. Replaces the
   compact `.checkout-steps` that used to live inside every step's topbar. */
.checkout-progress{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-3xl);
  display:flex; align-items:center; justify-content:center;
  gap:0;
  width:100%;
  box-sizing:border-box;
}
.checkout-progress-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-xs);
  flex:none;
  min-width:133px;
  padding:0 var(--space-lg);
  cursor:pointer;   /* 2026-08-11: clickable — переходить на крок через goto-step */
}
.checkout-progress-label{
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  line-height:15.84px; text-transform:uppercase; letter-spacing:0;
  color:var(--text-placeholder, var(--text-placeholder, #9ba3af));
  white-space:nowrap;
}
.checkout-progress-item.is-active .checkout-progress-label{ color:var(--text-default); }
/* is-completed: пройдений крок (або крок 1, що не вимагає дій) — solid чорний.
   Правило написане ПІСЛЯ is-active, щоб при обох класах (крок 1 при завантаженні)
   completed вигравав каскадом. */
.checkout-progress-item.is-completed .checkout-progress-label{ color:var(--text-default); }
.checkout-progress-circle{
  width:32px; height:32px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,12,12,0.48); color:var(--text-inverted);
  font-family:var(--font-mono); font-weight:400; font-size:22px; line-height:18px;
  transition:background 140ms ease;
}
/* Current step — half-tone (2026-08-11 TZ: current ≠ solid fill). */
.checkout-progress-item.is-active .checkout-progress-circle{ background:rgba(11,12,12,0.72); }
/* Completed step — solid чорний (перекриває is-active, якщо обидва класи є). */
.checkout-progress-item.is-completed .checkout-progress-circle{ background:var(--text-on-light); }
.checkout-progress-divider{
  flex:1 1 0;
  min-width:24px;
  height:1px;
  background:var(--text-subtle, #9ca3af);
}

/* ── Two-column body wrapper ─────────────────────────────────────────────────
   Base (mobile) = display:contents so the wrapper is a layout no-op and the
   current wizard behavior (only .is-active visible under .checkout-root) is
   preserved. Media queries below promote it to a real flex/grid at tablet+. */
.checkout-two-col{ display:contents; }
.checkout-main-card{ display:contents; }
.checkout-side-card{ display:contents; }
.checkout-main-divider{ display:none; }

/* ── Mobile-only overrides ──────────────────────────────────────────────────
   Restore the compact wizard chrome that was there before the desktop/tablet
   restructure: progress bar reduces to just circles + lines (no var(--bg-surface-light, #fafafa) panel,
   no labels, no wide padding), and the new orange subtitle is dropped because
   it was designed for the desktop hero, not the mobile step page. */
@media (max-width: 719px){
  .checkout-progress{
    background:none;
    padding:0;
    margin-bottom:var(--space-sm);
    justify-content:flex-start;
    width:auto;
  }
  .checkout-progress-item{
    min-width:0;
    padding:0;
    flex-direction:row;
  }
  .checkout-progress-label{ display:none; }
  .checkout-progress-divider{
    min-width:0;
    margin:0 4px;
  }
}

/* ── Error banner ── */
.checkout-banner-error{
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  font-family:var(--font-body); font-size:14px; color:#b91c1c;
  line-height:1.5;
}

/* ── Wizard step panels (.checkout-step / .checkout-step.is-active) ── */
.checkout-step{ display:none; }
.checkout-step.is-active{ display:contents; }

/* ── Delivery / checkout card ── */
.checkout-card{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  display:flex; flex-direction:column; gap:var(--space-lg);
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
}

/* ── Section title (mono uppercase) ── */
.section-title{
  display:flex; align-items:center; gap:var(--space-sm);
  font-family:var(--font-mono); font-weight:700; font-size:16px;
  letter-spacing:0; line-height:15.84px; text-transform:uppercase;
  color:var(--text-default);
}
.section-title svg{ width:20px; height:20px; flex:none; color:var(--text-muted); }

/* ── Delivery options ── */
.delivery-options{ display:flex; flex-direction:column; gap:0; }
.delivery-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:12px var(--space-lg);
  cursor:pointer;
  transition:border-color 140ms ease;
  margin-bottom:var(--space-sm);
}
.delivery-option:last-child{ margin-bottom:0; }
.delivery-option.selected{ background:#f0f6f4; border:1.5px solid #056b4b; }
.delivery-option-top{
  display:flex; align-items:center; gap:10px;
  margin-bottom:4px;
}
.delivery-option-name{
  font-family:var(--font-body); font-weight:500;
  font-size:16px; color:var(--text-default);
}
.delivery-option-details{
  display:flex; justify-content:space-between;
  padding-left:24px;
}
.delivery-date{ font-family:var(--font-body); font-size:14px; color:var(--text-muted); }
.delivery-price{ font-family:var(--font-body); font-size:14px; color:var(--accent-primary); font-weight:500; }

/* ── Radio control (shared by delivery + address + payment) ── */
.radio{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-default);
  flex:none; display:flex; align-items:center; justify-content:center;
  transition:border-color 140ms ease;
}
.delivery-option.selected .radio{ border-color:var(--text-on-light); }
.radio-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-primary);
  display:none;
}
.delivery-option.selected .radio-dot{ display:block; background:var(--text-on-light); }

/* ── Address option (list item inside checkout delivery address card) ── */
.address-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  cursor:pointer;
  transition:border-color 140ms ease, background 140ms ease;
  background:var(--bg-input);
}
.address-option.selected{ background:#f0f6f4; border:1.5px solid #056b4b; }
.address-option.selected .radio{ border-color:var(--text-on-light); }
.address-option.selected .radio-dot{ display:block; background:var(--text-on-light); }
.address-name{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; color:var(--text-default);
  display:flex; align-items:center; gap:6px;
}
.address-name svg{ width:18px; height:18px; color:var(--accent-primary); flex:none; }
.address-phone{
  font-family:var(--font-body); font-size:14px;
  color:var(--text-muted);
}

/* ── Add address button ── */
.btn-addr-add{
  appearance:none; flex:1; height:34px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-size:14px;
  color:var(--text-default); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color 140ms ease;
}
.btn-addr-add:hover{ border-color:var(--accent-primary); }

/* ── Next step button ── */
.btn-checkout-next{
  appearance:none; width:100%; height:var(--btn-cta-height);
  border:none; border-radius:var(--btn-cta-radius);
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-checkout-next:not(:disabled):hover{ filter:brightness(1.06); }
.btn-checkout-next:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-checkout-next:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}

/* ── Address bottom sheet ── */
.addr-sheet-backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.32); z-index:1000;
  pointer-events:none;
}
.addr-sheet-backdrop.is-open{ display:block; pointer-events:auto; }

.addr-sheet{
  display:none; position:fixed;
  bottom:0; left:50%; transform:translateX(-50%);
  width:390px; max-width:100%;
  background:var(--bg-input);
  border-radius:16px 16px 0 0;
  z-index:1001;
  flex-direction:column; gap:var(--space-lg);
  padding:var(--space-md) var(--space-xl) var(--space-2xl);
  box-sizing:border-box;
  max-height:90vh; overflow-y:auto;
}
.addr-sheet.is-open{ display:flex; pointer-events:auto; }

/* Panel element inside .addr-sheet (wraps form content) */
.addr-sheet-panel{
  display:flex; flex-direction:column; gap:var(--space-md);
  width:100%;
}

.addr-field{
  display:flex; flex-direction:column; gap:var(--space-xs);
}
.addr-field label{
  font-family:var(--font-mono); font-weight:700; font-size:11px;
  letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted);
}
.addr-field input, .addr-field select{
  appearance:none; width:100%;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  padding:10px var(--space-md);
  font-family:var(--font-body); font-size:16px;
  color:var(--text-default);
  outline:none; box-sizing:border-box;
  transition:border-color 140ms ease;
}
.addr-field input::placeholder{ color:var(--text-placeholder); }
.addr-field input:focus{ border-color:var(--accent-primary); border-width:1.5px; }

.addr-sheet-actions{
  display:flex; flex-direction:column; gap:var(--space-sm);
  margin-top:var(--space-sm);
}
.btn-addr-cancel{
  appearance:none; width:100%; height:44px;
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--text-muted); cursor:pointer;
  transition:border-color 140ms ease, color 140ms ease;
}
.btn-addr-cancel:hover{ border-color:var(--text-muted); color:var(--text-default); }
.btn-addr-save{
  appearance:none; width:100%; height:44px;
  border:none; border-radius:var(--radius-lg);
  background:var(--accent-primary); color:var(--bg-input);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-addr-save:not(:disabled):hover{ filter:brightness(1.06); }
.btn-addr-save:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-addr-save:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}
.addr-sheet-error{
  font-family:var(--font-body); font-size:14px; color:#b91c1c;
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-md);
  display:none;
}
.addr-sheet-error.is-visible{ display:block; }

/* ── Address sheet header (Task 8c) ── */
.addr-sheet-handle{
  width:40px; height:4px; background:var(--border-default);
  border-radius:2px; margin:0 auto 8px;
}
.addr-sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.addr-sheet-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:16px; text-transform:uppercase;
  color:var(--text-default); margin:0;
}
.addr-sheet-close{
  appearance:none; background:none; border:none;
  font-size:20px; color:var(--text-muted); cursor:pointer; padding:4px;
  line-height:1;
}
.addr-sheet-close:hover{ color:var(--text-default); }

/* ── Prototype form fields: .adres-field / .adres-label / .adres-input ── */
.adres-field{ display:flex; flex-direction:column; gap:4px; }
.adres-label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted);
}
.adres-input{
  height:44px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--bg-input); font-family:var(--font-body); font-size:15px;
  color:var(--text-default);
  appearance:none; width:100%; outline:none;
  transition:border-color 140ms ease;
}
.adres-input::placeholder{ color:var(--text-placeholder); }
.adres-input:focus{ outline:none; border-color:var(--accent-primary); }

/* ── Grid rows for zip+city (1fr : 1.6fr) and contact+phone (1.3fr : 1fr) ── */
.adres-grid-zip-city{
  display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-sm);
}
.adres-grid-contact-phone{
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-sm);
}

/* ── Address card company line — font inherited from .address-option-text ── */
.address-contact{
  margin-top:12px;
}

/* ── Payment options ── */
.pay-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  cursor:pointer;
  margin-bottom:var(--space-sm);
  transition:border-color 140ms ease, background 140ms ease;
  background:var(--bg-input);
}
.pay-option:last-child{ margin-bottom:0; }
.pay-option.pay-selected{ background:#f0f6f4; border:1.5px solid #056b4b; }
.pay-option-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.pay-option-top{
  display:flex; align-items:center; gap:10px;
  margin-bottom:4px;
}
.pay-option-name{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-on-light); font-weight:400;
}
.pay-option-desc{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-muted); line-height:1.6;
  padding-left:24px;
}
.pay-option-desc strong{ color:var(--text-default); font-weight:700; }
.pay-radio{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-default);
  flex:none; display:flex; align-items:center; justify-content:center;
  transition:border-color 140ms ease;
}
.pay-option.pay-selected .pay-radio{ border-color:var(--text-on-light); }
.pay-radio-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--text-on-light);
  display:none;
}
.pay-option.pay-selected .pay-radio-dot{ display:block; }
/* Single-option variant: no choice to make, so hide the radio widget entirely. */
.pay-option.pay-option-single .pay-radio{ display:none; }
.pay-badge{
  border:1px solid #056b4b;
  border-radius:var(--radius-sm);
  padding:2px 8px;
  font-family:var(--font-body); font-size:12px;
  color:#15803d; font-weight:500;
  margin-left:auto;
  margin-right:var(--space-sm);
}

/* ── Summary: brutto total ── */
.sum-brutto{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 var(--space-md);
}
.sum-brutto-label{
  font-family:var(--font-body); font-weight:500; font-size:14px;
  line-height:18px;
  color:var(--text-muted);
}
.sum-brutto-value{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  line-height:20px;
  color:#111827;
}

/* ── Summary rows ── */
.sum-rows{ display:flex; flex-direction:column; gap:var(--space-md); }
.sum-row{
  display:flex; align-items:flex-start; gap:2px;
  padding:0;
}
.sum-row-label{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); flex:0 0 auto; line-height:18px;
  white-space:nowrap;
}
.sum-row-value{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:#111827; flex:1; text-align:right;
  line-height:18px; word-break:break-word;
}
.sum-row-value.accent{ color:var(--accent-primary); font-weight:500; }
.sum-row-value a{ color:var(--accent-primary); text-decoration:underline; cursor:pointer; }
.sum-section-title{
  display:flex; align-items:center; gap:var(--space-sm);
  font-family:var(--font-mono); font-weight:700; font-size:16px;
  letter-spacing:0; line-height:15.84px; text-transform:uppercase;
  color:var(--text-default);
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--border-surface);
}
.sum-section-title svg{ width:18px; height:18px; flex:none; color:var(--accent-primary); }

/* ── Summary: delivery address expandable row ── */
.addr-row-wrap{ display:flex; flex-direction:column; }
.addr-row-top{ display:flex; align-items:flex-start; gap:2px; padding:0; }
.addr-label{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); flex:0 0 auto; white-space:nowrap; line-height:18px;
}
.addr-value-col{ flex:1; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:0; }
.addr-name{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:16px;
  color:var(--text-default); line-height:18px; text-align:right;
}
.addr-toggle-btn{
  font-family:var(--font-body); font-weight:400; font-size:14px;
  color:var(--accent-primary); line-height:18px; text-align:right;
  background:none; border:none; padding:0; cursor:pointer; display:block;
  text-transform:capitalize;
}
.addr-expanded{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 280ms ease;
  margin-bottom:0;
}
.addr-expanded.open{ grid-template-rows:1fr; }
.addr-expanded-inner{ min-height:0; overflow:hidden; }
.addr-expanded-box{
  background: var(--bg-accent-tint-soft, rgba(0,95,110,0.06));
  border-radius:3px;
  padding:8px var(--space-md);
  margin-bottom:var(--space-md);
}
.addr-expanded-text{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); line-height:18px; text-align:right;
}

/* ── Summary: note textarea ── */
.sum-note{
  display:flex; flex-direction:column; gap:4px;
}
.sum-note-title{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); margin-bottom:var(--space-sm);
  display:flex; align-items:center; gap:6px;
}
.sum-note-title svg{ width:16px; height:16px; color:var(--text-muted); flex:none; }
.sum-note-text{
  width:100%; box-sizing:border-box;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  padding:var(--space-md);
  outline:none;
  font-family:var(--font-body); font-size:16px; font-weight:400;
  color:var(--text-muted); line-height:18px;
  resize:vertical; overflow-y:auto;
  min-height:calc(4 * 18px + 2 * 12px);
  max-height:calc(8 * 18px + 2 * 12px);
  transition:border-color 140ms ease;
}
.sum-note-text::placeholder{ color:var(--text-muted); font-style:normal; font-weight:400; }
.sum-note-text:focus{ border-color:var(--accent-primary); }

/* ── Summary: terms checkbox row ── */
.sum-checkbox-row{
  display:flex; align-items:flex-start; gap:var(--space-sm);
  padding:var(--space-md) 0;
}
.sum-checkbox{
  width:16px; height:16px; min-width:16px; min-height:16px;
  border:1.5px solid var(--border-module);
  border-radius:2px; flex:none; margin-top:2px;
  cursor:pointer; appearance:none;
  display:flex; align-items:center; justify-content:center;
  transition:background 140ms ease, border-color 140ms ease;
}
.sum-checkbox:checked{ background:var(--accent-primary); border-color:var(--accent-primary); }
.sum-checkbox:checked::after{ content:'✓'; color:var(--bg-input); font-size:10px; line-height:1; }
.sum-checkbox-label{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:var(--text-muted); line-height:18px; cursor:pointer;
}

/* ── Confirm button ── */
.btn-confirm{
  appearance:none; width:100%; height:var(--btn-cta-height);
  border:none; border-radius:var(--btn-cta-radius);
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-confirm:not(:disabled):hover{ filter:brightness(1.06); }
.btn-confirm:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-confirm:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}

/* ── Summary: consent text under submit ── */
.checkout-consent-text{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:var(--text-muted); line-height:18px; text-align:center;
  margin-top:var(--space-sm);
}
.checkout-consent-text span{ text-decoration:underline; cursor:pointer; }

/* ── Summary: submit-blocked hint ── */
.checkout-step-hint{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:#b3261e; line-height:18px; text-align:center;
  margin-top:var(--space-sm);
}
.checkout-step-hint[hidden]{ display:none; }

/* ── Tablet+ (Figma 5381:14696) ─────────────────────────────────────────────
   All 3 checkout-step sections become visible together. Delivery + Payment
   sit side-by-side inside .checkout-main-card, Summary is a separate card
   below (tablet) or beside (desktop). The wizard Next buttons disappear —
   user submits from the Summary card's confirm button. */
@media (min-width: 720px){
  .checkout-two-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-xl);
  }
  .checkout-main-card{
    display:flex;
    align-items:stretch;
    gap:var(--space-xl);
    padding:0 var(--space-lg);
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
    width:100%;
    box-sizing:border-box;
  }
  /* On tablet the summary card drops below Delivery+Payment and centers.
     Width matches roughly one of the two inner columns (~half of main-card). */
  .checkout-side-card{
    display:block;
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
    width:calc(50% - var(--space-xl) / 2);
    box-sizing:border-box;
    padding:0 var(--space-xl);
  }
  /* Force every step visible regardless of the wizard's hidden attr. Include
     the .is-active variant so it overrides the base `display: contents` rule
     that has higher specificity than the plain-tag one. */
  .checkout-step,
  .checkout-step[hidden],
  .checkout-step.is-active{
    display:flex;
    flex-direction:column;
    gap:var(--space-3xl);
  }
  .checkout-main-card > .checkout-step[data-step="1"],
  .checkout-main-card > .checkout-step[data-step="2"]{
    flex:1 1 0;
    min-width:0;
    padding:var(--space-xl) var(--space-md);
  }
  .checkout-side-card > .checkout-step[data-step="3"]{
    padding:var(--space-xl) 0;
    gap:var(--space-lg);
  }
  /* Vertical divider between Delivery (step 1) and Payment (step 2). */
  .checkout-main-divider{
    display:block;
    width:1px;
    background:var(--text-subtle, #9ca3af);
    margin:var(--space-3xl) var(--space-xs);
    flex:none;
  }
  /* Wizard nav buttons collapse — form is submitted from the summary card. */
  .btn-checkout-next{ display:none !important; }

  /* Cards inside a step lose their own drop-shadow — they're already inside
     a shadowed .checkout-main-card / .checkout-side-card. */
  .checkout-main-card .checkout-card,
  .checkout-side-card .checkout-card{
    background:transparent;
    box-shadow:none;
    padding:0;
  }
}

/* ── Desktop (Figma 5381:14506) ─────────────────────────────────────────────
   Two-column body: main card (Delivery + Payment) fixed at 800px, summary
   card grows to fill the rest. */
@media (min-width: 1024px){
  .checkout-two-col{
    flex-direction:row;
    align-items:stretch;
    justify-content:center;
  }
  /* Three equal-width columns: main-card holds Delivery + Payment (so flex:2),
     side-card holds Summary (flex:1). align-items:stretch above equalises height. */
  .checkout-main-card{
    flex:2 1 0;
    min-width:0;
    width:auto;
    max-width:none;
  }
  .checkout-side-card{
    flex:1 1 0;
    min-width:0;
    width:auto;
    max-width:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .step-circle,
  .delivery-option,
  .radio, .radio-dot,
  .address-option,
  .pay-option, .pay-radio, .pay-radio-dot,
  .addr-expanded,
  .sum-checkbox,
  .sum-note-text,
  .btn-checkout-next,
  .btn-confirm,
  .btn-addr-save,
  .btn-addr-cancel,
  .addr-sheet{ transition:none !important; }
}

/* ── Task 12: Checkout success screen (prototype-matching layout) ─────── */
.checkout-success-root{
  max-width:480px; margin:0 auto; padding:60px 24px 40px;
  display:flex; flex-direction:column; align-items:center; box-sizing:border-box;
}
.checkout-success-card{
  width:100%; display:flex; flex-direction:column; align-items:center;
}

/* Green circle with white checkmark */
.checkout-success-check{
  width:48px; height:48px; background:#1e6b3c; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}

/* "Zamówienie #{id}\npotwierdzone" — monospace bold */
.checkout-success-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:20px; line-height:24px;
  color:var(--text-on-light); text-align:center;
  margin:0 0 52px 0;
}

/* Delivery info row (icon + labels) */
.checkout-success-eta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:40px; color:var(--text-on-light);
}
.checkout-success-eta-body{ display:flex; flex-direction:column; gap:2px; }
.checkout-success-eta-label{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:18px;
  color:var(--text-muted);
}
.checkout-success-eta-value{
  font-family:var(--font-heading, var(--font-body)); font-weight:600; font-size:18px; line-height:18px;
  color:var(--text-on-light);
}

/* Two-button stack: primary + secondary */
.checkout-success-actions{
  width:100%; display:flex; flex-direction:column; gap:16px;
}

/* Support card (below the success card) */
.checkout-success-support{
  width:100%; margin-top:60px; padding:18px 12px; box-sizing:border-box;
}
.checkout-success-support-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  color:var(--text-on-light);
}
.checkout-success-support-title{
  font-family:var(--font-heading, var(--font-body));
  font-weight:600; font-size:18px; color:var(--text-on-light);
}
.checkout-success-support-text{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:18px;
  color:var(--text-muted); margin:0 0 16px 0;
}
.checkout-support-phone{
  display:block; font-family:var(--font-heading, var(--font-body));
  font-weight:600; font-size:18px; color:var(--text-default);
  text-decoration:none; margin:0 0 2px 0;
}
.checkout-support-phone:hover{ color:var(--accent-primary); }
.checkout-support-email{
  display:block; font-family:var(--font-body);
  font-weight:500; font-size:16px; color:var(--text-default);
  text-decoration:none; margin:2px 0 2px 0;
  word-break:break-all;
}
.checkout-support-email:hover{ color:var(--accent-primary); }
.checkout-success-support-hours{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); margin:0;
}

/* ── Address card layout — matches prototype ─────────────────────────────── */

/* Top row: badge (left) + edit/delete icons (right) */
.address-option-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; min-height:24px;
}
.address-option-icons{
  display:flex; align-items:center; gap:4px;
}

/* Radio + pin + name row */
.address-option-radio-row{
  display:flex; align-items:center; gap:10px;
}

/* Address text block: indented to align with name after the 16px pin + 6px gap.
   Font/color/line-height applied here so children inherit — matches prototype .address-text. */
.address-option-text{
  font-family:var(--font-body); font-size:14px;
  color:var(--text-muted); line-height:1.6;
  padding-left:24px;
}

/* Base icon button */
.addr-icon{
  appearance:none; border:none; background:transparent;
  padding:4px; cursor:pointer; color:var(--text-muted);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  transition:color 140ms ease, background 140ms ease;
}
.addr-icon:hover{ color:var(--text-default); background:var(--border-default); }
.addr-icon-delete:hover{ color:#b91c1c; }

/* Two-button row below address card list */
.address-actions{
  display:flex; gap:var(--space-md); margin-top:var(--space-md);
}
.address-actions .btn-addr-add{ flex:1; }

/* "Wybierz" button — same neutral style as .btn-addr-add (matches prototype) */
.btn-addr-sel{
  appearance:none; flex:1; height:34px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-size:14px;
  color:var(--text-default); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color 140ms ease;
}
.btn-addr-sel:hover{ border-color:var(--accent-primary); }

/* Empty-state hint inside #addrList */
.addr-empty-hint{
  font-family:var(--font-body); font-size:14px; color:var(--text-muted);
  padding:var(--space-md) 0; text-align:center;
}

/* ── Address pick sheet (analogous to .addr-sheet) ── */
.addr-pick-sheet-backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.32); z-index:1000;
}
.addr-pick-sheet-backdrop.is-open{ display:block; }

.addr-pick-sheet{
  display:none; position:fixed;
  bottom:0; left:50%; transform:translateX(-50%);
  width:390px; max-width:100%;
  background:var(--bg-input);
  border-radius:16px 16px 0 0;
  z-index:1001;
  flex-direction:column;
  padding:var(--space-md) var(--space-xl) var(--space-2xl);
  box-sizing:border-box;
  max-height:70vh; overflow-y:auto;
}
.addr-pick-sheet.is-open{ display:flex; }

.addr-pick-panel{
  display:flex; flex-direction:column; gap:12px; width:100%;
}

/* Grip / handle at top of the bottom-sheet (visual affordance) */
.addr-pick-handle{
  width:40px; height:4px; background:var(--border-surface);
  border-radius:2px; margin:0 auto 8px;
}

/* Header row: title on the left, close X on the right */
.addr-pick-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}

.addr-pick-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:16px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-default);
}

.addr-pick-close{
  appearance:none; background:none; border:none;
  font-size:20px; color:var(--text-muted); cursor:pointer; padding:4px;
  line-height:1;
}
.addr-pick-close:hover{ color:var(--text-default); }

.addr-pick-list{
  display:flex; flex-direction:column; gap:var(--space-sm);
}

.addr-pick-item{
  background:var(--bg-surface-light);
  border:1.5px solid transparent;
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  cursor:pointer;
  transition:border-color 150ms ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  display:flex; align-items:flex-start; gap:var(--space-md);
}
.addr-pick-item:hover{ border-color:var(--accent-primary); }
.addr-pick-item.selected{ border-color:var(--accent-primary); }
.addr-pick-item.selected .addr-pick-radio{ border-color:var(--accent-primary); }
.addr-pick-item.selected .addr-pick-radio-dot{ display:block; }

.addr-pick-radio{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-surface);
  flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 150ms;
}
.addr-pick-radio-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-primary); display:none;
}

.addr-pick-item-body{ flex:1; min-width:0; }
.addr-pick-item-badge{ margin-bottom:4px; }
.addr-pick-item-name{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  color:var(--text-default);
  display:flex; align-items:center; gap:6px;
}
.addr-pick-item-name svg{ width:16px; height:16px; color:var(--accent-primary); flex:none; }
.addr-pick-item-detail{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-muted); margin-top:2px;
}

/* Shared default-address chip — mirrors prototype .firma-badge-default */
.firma-badge-default{
  display:inline-block;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  color:#1e6b3c; background:#e8f4ed;
  border:1px solid #a8d4b8; border-radius:var(--radius-sm);
  padding:2px 10px;
}


/* SHELVED 2026-07-23: .cart-item-price-lock + .cart-flash / .cart-flash-warn
   classes belonged to the guest-cart / ATC drawer feature; removed with the
   shelve. */