.cta_separator {
	display     : flex;
	align-items : center;
	text-align  : center;
	padding     : 0.5em 1.3em;
}

.sub-advantages--text .sub-advantages--title {
	display       : block;
	font-size     : calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
	font-weight   : 600;
	line-height   : 1.17em;
	margin-top    : 0;
	margin-bottom : 0.5em;
}

.sub-advantages--text {
	font-size : calc(12px + (13 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.sub-advantages--content--list li:before {
	content       : "";
	font-family   : "Font Awesome 5 Free";
	font-weight   : 900;
	padding-right : 0;
}

.subscribe--container input {
	cursor : pointer;
}

.modal_abo {
	font-size     : 1.25rem;
	font-weight   : 700;
	margin-bottom : 10px;
}

/*.btn-subscription-modal,*/
.btn-subscription {
	/*display: block;*/
	/*float: right;*/
	border              : 0;
	/*text-transform: uppercase;*/
	border-radius       : 0;
	/*font-size: 14px;*/
	/*cursor: pointer;*/
	text-align          : center;
	/*transition: all 0.3s;*/

	background          : linear-gradient(to right, var(--secondary-color) 50%, var(--color-primary) 50%) border-box, linear-gradient(#FFF, #FFF) padding-box left;
	background-size     : 200% 100%;
	background-position : right bottom;
	transition          : all .5s ease;
	color               : white;
	padding             : 0.5em 1em;
	overflow            : hidden;
}

.btn-subscription-modal {
	font-weight : 700;
	background  : transparent;
	color       : var(--color-product);
	border      : 1px solid var(--color-product);
	overflow    : hidden;
	cursor      : pointer;
	transition  : all .3s ease-in-out;
	/*padding     : 1.25em 0.93em;*/
	padding     : .75em 0.93em;
}

.btn-subscription-modal {
	font-weight : 700;
	background  : transparent;
	color       : var(--color-product);
	border      : 1px solid var(--color-product);
	overflow    : hidden;
	cursor      : pointer;
	transition  : all .35s ease-in-out;
	/*padding     : 1.25em 0.93em;*/
	padding     : .75em 0.93em;
}

.btn-subscription-modal:hover {
	background : var(--color-product);
	color      : #fff;
}

@media (min-width : 1024px) {
	.btn-subscription-modal {
		padding : 1.25em 0.93em;
	}
}

/*.btn-subscription-modal:hover {*/
/*	background : var(--color-product);*/
/*	color      : white;*/
/*}*/

.btn-subscription {
	/*padding: 4px 25px;*/
	/*background: #01b6ef;*/
	/*box-shadow: 2px 3px 0 #3af3c7;*/
	/*color: #fff;*/

	background          : linear-gradient(to right, var(--color-secondary) 50%, var(--color-primary) 50%) border-box, linear-gradient(#FFF, #FFF) padding-box left;
	background-size     : 200% 100%;
	background-position : right bottom;
	transition          : all .5s ease;
	color               : white;
	padding             : 0.5em 1em;
	overflow            : hidden;
}

.btn-subscription:hover {
	/*background: #3af3c7;*/
	/*-webkit-box-shadow: 2px 3px 0 #01b6ef;*/
	/*box-shadow: 2px 3px 0 #01b6ef;*/

	background-position : left bottom;
	color               : white;
}

.no-select {
	padding-top : 10px;
	color       : red;
	visibility  : hidden !important;
	opacity     : 0 !important;
	transition  : opacity 0.3s, visibility 0s linear .3s;
}

.no-select.active {
	visibility : visible !important;
	opacity    : 1 !important;
	transition : opacity 0.3s;
}

#subscribe-modal {
	/*display         : none;*/
	position        : fixed;
	z-index         : 9999;
	top             : 0;
	left            : 0;
	right           : 0;
	bottom          : 0;
	width           : 100%;
	height          : 100%;

	opacity         : 0;
	visibility      : hidden;
	display         : flex;
	justify-content : center;
	align-items     : center;
	transition      : all 0s;
	text-align      : center;
}

#subscribe-modal {
	transition : opacity 0.2s 0s;
}

#subscribe-modal * {
	visibility : hidden;
	/*transition : all 0s 0.2s;*/
}

#subscribe-modal.showModal,
#subscribe-modal.showModal * {
	opacity    : 1;
	visibility : visible;
  transition: 0.3s ease;
}

.subscribe-modal--container p {
	font-size   : calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
	font-weight : 700;
}

.subscribe-modal--bg {
	position   : absolute;
	background : #7a7a7a;
	z-index    : 1;
	opacity    : 0;
	overflow   : hidden;
	top        : 0;
	left       : 0;
	right      : 0;
	bottom     : 0;
	height     : 100%;
	width      : 100%;

	transition : all 0.2s;
}

#subscribe-modal.showModal .subscribe-modal--bg {
	opacity : 0.5;
}

.subscribe-modal--container {
	position      : relative;
	z-index       : 2;
	border        : 1px solid #dcdcdc;
	padding       : 50px 60px;
	max-width     : 100%;
	max-height    : 95%;
	transform     : scale(0.8);
	opacity       : 0;
	transition    : all 0.2s;
	overflow      : auto;
	border-radius : 10px;
	background    : var(--color-white-default);
	box-shadow    : 0 4px 20px 0 rgba(0, 0, 0, 0.06);
	min-width     : 750px
}

.showModal .subscribe-modal--container {
	transform : scale(1);
	opacity   : 1;
}

.subscribe-modal--container .close_btn {
	position      : absolute;
	top           : -11px;
	right         : -11px;
	background    : #fff;
	padding       : 4px;
	border-radius : 50%;
	border        : 2px solid #333;
	cursor        : pointer;
}

.subscribe-modal--container #btn-subscription {
	float : none;
}

/* Interval locked (cart already has a subscription) */
.interval-locked {
	display         : flex;
	align-items     : center;
	padding         : 12px 20px;
	margin          : 20px 0 8px;
	border-radius   : 50px;
	background      : #FBF6F2;
	border          : 2px solid #d0c9c4;
	font-weight     : 600;
	color           : var(--color-secondary);
	opacity         : 0.8;
	cursor          : not-allowed;
}

.interval-locked__label::before {
	content      : "🔒 ";
	font-style   : normal;
	margin-right : 4px;
}

.interval-locked-info {
	font-size    : 0.8rem;
	color        : #7a6f68;
	margin-bottom: 16px;
	padding      : 0 4px;
}

.interval-locked--recap {
	margin  : 0;
	padding : 6px 14px;
	font-size: 0.9rem;
}

/* Interval custom dropdown */
.interval-dropdown {
	position : relative;
	margin   : 20px 0;
}

.interval-dropdown-trigger {
	width           : 100%;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 12px 20px;
	border-radius   : 50px;
	background      : #FBF6F2;
	border          : 2px solid transparent;
	cursor          : pointer;
	font-weight     : 600;
	color           : var(--color-secondary);
	transition      : background 0.2s;
}

.interval-dropdown-trigger:hover {
	background : #e8e8ec;
}

.interval-dropdown-trigger svg {
	transition  : transform 0.2s;
	flex-shrink : 0;
}

.interval-dropdown.open .interval-dropdown-trigger svg {
	transform : rotate(180deg);
}

.interval-options-list {
	display        : none;
	flex-direction : column;
	gap            : 8px;
	margin-top     : 8px;
}

.interval-dropdown.open .interval-options-list {
	display : flex;
  background: #FBF6F2;
  color: var(--color-secondary);
  overflow: hidden;
  border-radius: 12px;
}

button.interval-dropdown-trigger:focus {
  outline: none!important;
}

.interval-option-item {
  padding: 10px 0;
  transition: 0.3s ease;
  font-weight: 600;
}

.interval-option-item:hover {
  background: #F5F5F7;
}

.interval-option {
	padding       : 12px 20px;
	border-radius : 50px;
	background    : #F5F5F7;
	cursor        : pointer;
	font-weight   : 600;
	text-align    : center;
	transition    : background 0.2s, color 0.2s;
	border        : 2px solid transparent;
	color         : var(--color-secondary);
}

.interval-option:hover {
	background : #e8e8ec;
}

.interval-option.selected {
	background : var(--color-primary);
	color      : #fff;
}

input.btn-subscription {
	padding       : .7em .7em;
	border-radius : 5px;
	width         : 75%;
	font-weight   : bold;
}

.advantage--content {
	/*display         : flex;*/
	/*justify-content : space-between;*/
	border-top : 1px dotted #01b6ef;
}

.advantage--content > div {
	/*width : 50%;*/
	max-width : 70%;
}

div.intro {
	padding-top : 10px;
}

.advantage--content ul li {
	list-style : inside;
}

ul.advantage--content--list {
	padding-top : 15px;
}

.sub-interval-fix {
	font-size : 15px;
	margin    : 10px;
}

.sub-interval-fix span {
	font-weight : bold;
}

.sub-advantages {
	width : 100%;
}

.modal_abo_title {
	font-size       : 28px;
	font-style      : normal;
	font-weight     : 700;
	line-height     : normal;
	letter-spacing  : .56px;
	text-transform  : uppercase;
	max-width       : 550px;
	text-align      : center;
	display         : flex;
	margin          : 0 auto;
	justify-content : center;
  color: var(--color-secondary);
}

@media (min-width : 1024px) {
	.sub-advantages {
		margin : 1rem auto;
	}
}

/* Price tiers styling */
.subscription__price-tiers-info {
	margin        : 20px 0;
	padding       : 15px;
	background    : #f8f9fa;
	border-radius : 8px;
	border-left   : 4px solid var(--color-primary);
}

.subscription__price-tiers-info h4 {
	margin-top    : 0;
	margin-bottom : 10px;
	color         : var(--color-primary);
	font-size     : 1.1rem;
}

.price-tiers-list {
	list-style : none;
	padding    : 0;
	margin     : 0;
}

.price-tiers-list li {
	padding       : 8px 0;
	border-bottom : 1px solid #e0e0e0;
	font-size     : 0.95rem;
}

.price-tiers-list li:last-child {
	border-bottom : none;
}

.tier-discount {
	color       : #28a745;
	font-weight : bold;
	margin-left : 5px;
}

/* Dynamic price display */
.subscription__dynamic-price {
	text-align : center;
}

.subscription__unit-price-display,
.subscription__total-price-display {
	display         : flex;
	justify-content : center;
	align-items     : center;
	gap             : 5px;
}

.subscription__total-price-display strong {
	color     : var(--color-secondary);
	font-size : 1.1em;
  font-weight: 600;
}

#subscription-savings-display {
	display    : block;
	margin-top : 5px;
	font-style : italic;
}

/* NEW MULTI-STEP SUBSCRIPTION MODAL STYLES */

/* Initial Choice Step */
.subscription-choice-container {
	display        : flex;
	flex-direction : column;
	gap            : 20px;
	margin         : 30px 0 0;
	align-items    : center;
}

@media (min-width : 768px) {
	.subscription-choice-container {
		flex-direction  : row;
		justify-content : center;
		align-items     : initial;
	}
}

.subscription-choice-btn {
	display        : flex;
	flex           : 1 0 auto;
	padding        : 30px 20px;
	border-radius  : 10px;
	cursor         : pointer;
	transition     : all 0.3s ease;
	text-align     : center;
	max-width      : 100%;
	border         : 1px solid #D9D9D9;
	background     : #F5F5F7;
	flex-direction : column;
}

@media (min-width : 768px) {
	.subscription-choice-btn {
		max-width : 300px;
	}
}

.subscription-choice-btn:hover {
	border-color : var(--color-primary);
	background   : #f8f9fa;
	transform    : translateY(-5px);
	box-shadow   : 0 5px 15px rgba(0, 0, 0, 0.1);
}

.subscription-choice-btn .choice-icon {
	margin-bottom : 15px;
	color         : var(--color-primary);
}

.subscription-choice-btn h3 {
	color          : var(--color-primary);
	font-size      : 18.061px;
	font-style     : normal;
	font-weight    : 700;
	line-height    : 22.32px;
	letter-spacing : 0.361px;
	text-transform : uppercase;
	margin         : 0;
	padding-bottom : 10px;
}

.subscription-choice-btn p {
	color          : #29496F;
	text-align     : center;
	font-size      : 15px;
	font-style     : normal;
	font-weight    : 500;
	line-height    : 110%;
	letter-spacing : 0.45px;
	margin         : 0 0 15px 0;
}

.subscription-choice-btn p.btn.btn-primary {
	color          : var(--color-white-default);
	text-align     : center;
	font-size      : 16px;
	font-style     : normal;
	font-weight    : 700;
	line-height    : normal;
	letter-spacing : 0.48px;
	padding        : 15px 30px;
	text-transform : initial;
	margin         : auto 0 0 0;
}

.subscription-choice-btn p.btn.btn-primary:hover {
  color: var(--color-primary) !important;
}

/* Step Indicator */
.step-indicator {
	display         : flex;
	justify-content : center;
	align-items     : center;
	margin          : 20px 0;
	flex-wrap       : wrap;
	border-radius   : 10px;
	background      : #FBF6F2;
	gap             : 20px;
	padding         : 20px 0;
}

.step-container {
	display     : flex;
	align-items : center;
	gap         : 20px;
}

.step-number {
	width           : 30px;
	height          : 30px;
	border-radius   : 50%;
	background      : var(--color-secondary);
	opacity         : 0.5 !important;
	color           : var(--color-white-default);
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	font-weight     : 700;
	font-size       : 0.9rem;
}

.step-container.active .step-number {
	background : var(--color-primary);
	color      : #fff;
	opacity    : 1 !important;
}

.step-container.active .step-separator {
	color : var(--color-primary);
}

.strep-name-container:first-child {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 5px;
	color          : var(--color-primary);
}

.step-number.completed {
	background : #28a745;
	color      : #fff;
}

.step-label {
	text-align  : center;
	font-size   : 15px;
	font-style  : normal;
	font-weight : 500;
	line-height : 22px;
	color       : var(--color-secondary);
	opacity     : 0.5 !important;
	margin      : 0 5px;
}

.step-container.active .step-label {
	color   : var(--color-primary);
	opacity : 1 !important;
}

.step-container.completed .step-number {
  background: var(--color-primary);
  opacity : 1 !important;
}

.step-container.completed .step-label {
  color: var(--color-primary);
  opacity : 1 !important;
}

.step-container.completed .step-separator {
  color: var(--color-primary);
}

.step-separator {
	color  : #999;
	margin : 0 5px;
}

/* Step Title */
.subscription__step-title {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 5px;
	margin          : 20px 0;
	text-align      : center;
	font-size       : 20px;
	font-style      : normal;
	font-weight     : 900;
	line-height     : normal;
	letter-spacing  : 0.4px;
  color: var(--color-secondary);
}

.btn-subscription.btn-next-step:hover {
  border : 1px solid var(--color-primary) !important;
}

.subscription__step-title_number {
	color : var(--color-secondary);
}

/* Step Navigation */
.btn-back-step {
	background    : transparent;
	border        : none;
	color         : var(--color-primary);
	cursor        : pointer;
	font-size     : 1rem;
	font-weight   : 600;
	padding       : 5px 10px;
	margin-bottom : 15px;
	transition    : all 0.2s ease;
	display       : inline-block;
}

.btn-back-step:hover {
	color           : var(--color-secondary);
	text-decoration : underline;
}

/* Subscription Recap */
.subscription-recap {
	background    : #FBF6F2;
	border        : 1px solid #D9D9D9;
	border-radius : 8px;
	padding       : 20px 30px 25px;
	margin        : 20px 0;
	display       : flex;
	align-items   : flex-start;
}

.subscription-recap_image .lozad {
	mix-blend-mode : darken;
	max-width      : 90px;
}

.subscription-recap_details {
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
}

#recap-product-name, #recap-product-name-add {
	color          : var(--color-secondary);
	font-size      : 16px;
	font-style     : normal;
	font-weight    : 600;
	line-height    : normal;
	letter-spacing : 0.28px;
}

.subscription-recap_details label {
	display : none;
}

.subscription__quantity-input {
	display     : flex;
	align-items : center;
}

#recap-frequency-input {
	height : 100%;
}

.recap-product-options {
	margin-top : 10px;
	display    : flex;
	gap        : 5px;
}

.recap-detail-group {
	margin-bottom  : 10px;
	display        : flex;
	flex-direction : column;
}

.recap-existing-products-wrapper {
	margin : 20px 0 15px;
}

#recap-existing-products {
	margin-top     : 12px;
	display        : flex;
	flex-direction : column;
	gap            : 8px;
}

.recap-existing-product-item {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	background      : #f5f5f5;
	padding         : 8px 12px;
	border-radius   : 6px;
	font-size       : 0.85rem;
}

.recap-existing-product-name {
	color : #333;
}

.recap-existing-product-qty {
	color       : #666;
	font-weight : 600;
}

.recap-existing-product-item.recap-existing-empty {
	justify-content : center;
	color           : #777;
	font-style      : italic;
}

#recap-total-price,
#recap-total-price-add {
	color       : var(--color-primary);
	font-size   : 16px;
	font-style  : normal;
	font-weight : 500;
	line-height : normal;
}

#recap-frequency-input option {
  color : var(--color-secondary);
}

#recap-unit-price,
#recap-unit-price-add {
	color       : var(--color-secondary);
	font-size   : 12px;
	font-style  : normal;
	font-weight : 400;
	line-height : normal;
}

.recap-product-prices {
	display     : flex;
	align-items : baseline;
	gap         : 8px;
}

.recap-item {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	padding         : 12px 0;
	border-bottom   : 1px solid #e0e0e0;
}

.recap-item:last-child {
	border-bottom : none;
}

.recap-item strong {
	color       : #333;
	font-weight : 600;
}

.recap-item span {
	color       : #666;
	font-weight : 400;
}

.recap-total {
	margin-top  : 10px;
	padding-top : 15px;
	border-top  : 2px solid var(--color-primary);
}

.recap-total strong {
	font-size : 1.2rem;
	color     : var(--color-primary);
}

.recap-total span {
	font-size   : 1.3rem;
	font-weight : 700;
	color       : var(--color-primary);
}

/* Subscription List (for add to existing flow) */
.subscription-list {
	margin : 20px 0;
}

.subscription-list p {
	font-size     : 1rem;
	margin-bottom : 15px;
	font-weight   : 600;
}

#subscription-list-items {
	display        : flex;
	flex-direction : column;
	gap            : 15px;
}

.subscription-item {
	background    : #fff;
	border        : 2px solid #e0e0e0;
	border-radius : 8px;
	padding       : 15px;
	cursor        : pointer;
	transition    : all 0.3s ease;
}

.subscription-item:hover,
.subscription-item.selected {
	border-color : var(--color-primary);
	background   : #f8f9fa;
	box-shadow   : 0 3px 10px rgba(0, 0, 0, 0.1);
}

.subscription-item-header {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	margin-bottom   : 10px;
	gap             : 10px;
}

.subscription-item-header strong {
	font-size : 1.1rem;
	color     : var(--color-primary);
}

.subscription-interval {
	background    : var(--color-secondary);
	color         : #fff;
	padding       : 3px 10px;
	border-radius : 15px;
	font-size     : 0.85rem;
	font-weight   : 600;
}

.subscription-item-products {
	margin : 10px 0;
}

.product-mini {
	font-size : 0.9rem;
	color     : #666;
	padding   : 5px 0;
}

.subscription-item-footer {
	margin-top  : 10px;
	padding-top : 10px;
	border-top  : 1px solid #e0e0e0;
	font-size   : 0.9rem;
	color       : #888;
	display     : flex;
	align-items : center;
	gap         : 10px;
}

.subscription-status {
	margin-left : auto;
	font-weight : 600;
	font-size   : 0.9rem;
}

.subscription-status.status-active {
	color : #2e8540;
}

.subscription-status.status-paused {
	color : #f08c00;
}

.paused-subscriptions-help {
	font-size : 0.9rem;
	color     : #6c757d;
	margin    : 12px 0 20px;
}

.paused-subscriptions-title {
	font-weight : 600;
	margin-top  : 24px;
}

.subscription-paused-list .subscription-item-paused {
	background : #fafafa;
	border     : 1px dashed #e0e0e0;
}

.next-delivery {
	font-style : italic;
}

.no-subscriptions,
.loading-subscriptions,
.error-subscriptions {
	text-align : center;
	padding    : 30px;
	color      : #666;
	font-size  : 1rem;
}

.error-subscriptions {
	color : #dc3545;
}

/* No Subscriptions Container */
.no-subscriptions-container {
	text-align     : center;
	padding        : 40px 20px;
	background     : #f8f9fa;
	border-radius  : 10px;
	margin         : 20px 0;
	display        : flex;
	flex-direction : column;
	align-items    : center;
}

.no-subscriptions-icon {
	font-size     : 4rem;
	margin-bottom : 20px;
}

.no-subscriptions-container h3 {
	font-size     : 1.5rem;
	font-weight   : 700;
	color         : var(--color-primary);
	margin-bottom : 15px;
}

.no-subscriptions-container p {
	font-size     : 1rem;
	color         : #666;
	margin-bottom : 25px;
	line-height   : 1.5;
}

.btn-create-first-subscription {
	padding       : 12px 30px;
	font-size     : 1.1rem;
	font-weight   : 600;
	background    : var(--color-primary);
	color         : #fff;
	border        : none;
	border-radius : 5px;
	cursor        : pointer;
	transition    : all 0.3s ease;
}

.btn-create-first-subscription:hover {
	background : var(--color-secondary);
	transform  : translateY(-2px);
	box-shadow : 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Login Required */
.login-required {
	text-align : center;
	padding    : 30px;
}

.login-required p {
	margin-bottom : 20px;
	font-size     : 1.1rem;
	color         : #666;
}

.login-required .btn-primary {
	padding     : 12px 30px;
	font-size   : 1.1rem;
	font-weight : 600;
}

/* Hide/Show Steps */
.subscription-step {
	display : block;
}

.subscription-step.hidden {
	display : none;
}

/* Responsive adjustments */
@media (max-width : 767px) {
	.subscribe-modal--container {
		min-width : 85%;
		max-width : 85%;
		padding   : 50px 30px;
	}

	.step-number {
		width     : 25px;
		height    : 25px;
		font-size : 0.8rem;
	}

	.subscription-choice-btn {
		padding : 20px 15px;
	}

	.recap-item {
		flex-direction : column;
		align-items    : flex-start;
		gap            : 5px;
	}

	.subscription__step-title {
		flex-direction : column;
		gap            : 8px;
		margin         : 25px 0 15px;
	}

	.recap-product-options {
		flex-direction : column;
		align-items    : flex-start;
	}

	.recap-product-options .subscription__quantity-selector {
		margin : 0;
	}

	#recap-product-name, #recap-product-name-add {
		text-align : left;
	}
}

/* Quantity Selector for Add Flow */
.subscription__quantity-selector-wrapper .subscription__quantity-selector {
	display         : flex;
	justify-content : center;
	align-items     : center;
	gap             : 10px;
	margin          : 0;
}

.subscription__quantity-selector button {
	width         : 40px;
	height        : 40px;
	border-radius : 5px;
	border        : 1px solid var(--color-primary);
	background    : #fff;
	color         : var(--color-secondary);
	cursor        : pointer;
	transition    : all 0.2s ease;
}

.subscription__quantity-selector button:hover {
	background : var(--color-primary);
	color      : #fff;
}

.subscription__quantity-input input {
	width         : 80px;
	text-align    : center;
	padding       : 10px;
	border        : 2px solid var(--color-primary);
	border-radius : 5px;
	font-size     : 1.1rem;
	font-weight   : 600;
}


/* Price Tiers Progress Bar Styling */
.subscription__price-tiers-progress {
	margin        : 30px 0;
	padding       : 15px 50px 30px;
	background    : #fff;
	border-radius : 20px;
	border        : 1px solid #D9D9D9;
}

.subscription__price-tiers-progress h4 {
	margin-top     : 0;
	margin-bottom  : 20px;
	color          : var(--color-primary);
	text-transform : initial;
	text-align     : center;
	font-size      : 15px;
	font-style     : italic;
	font-weight    : 400;
	opacity        : 0.7 !important;
	line-height    : normal;
}

.price-tiers-progress-container {
	position : relative;
	padding  : 40px 0 0;
}

.price-tiers-progress-bar {
	position   : relative;
	height     : 4px;
	background : #e0e0e0;
	width      : 75%;
}

.price-tiers-progress-bar_container {
	display : flex;
	width   : 100%;
}

.price-tiers-progress-bar_start {
	height     : 4px;
	width      : var(--edge);
	background : var(--color-secondary);
}

.price-tiers-progress-bar {
	position   : relative;
	height     : 4px;
	background : #e0e0e0;
	width      : var(--middle);
}

.price-tiers-progress-bar_end {
	position   : relative;
	height     : 4px;
	width      : var(--edge);
	background : #e0e0e0;
}


.price-tiers-progress-fill-end {
	position      : absolute;
	top           : 0;
	left          : 0;
	height        : 100%;
	background    : var(--color-secondary);
	border-radius : 10px;
	width         : 0;
	transition    : width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-tiers-progress-fill {
	position      : absolute;
	top           : 0;
	left          : 0;
	height        : 100%;
	background    : var(--color-secondary);
	border-radius : 10px;
	width         : 0;
	transition    : width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-tiers-dots {
	position        : absolute;
	top             : 0;
	left            : 0;
	width           : 100%;
	height          : 100%;
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	pointer-events  : none;
}

.price-tier-dot-wrapper {
	position        : relative;
	display         : flex;
	align-items     : center;
	justify-content : center;
	z-index         : 3;
}

.milestone-dot-svg {
	transition : transform 0.3s ease;
}

.price-tier-milestone.active .milestone-dot-svg circle,
.price-tier-milestone.reached .milestone-dot-svg circle {
	fill : var(--color-secondary);
}

.price-tier-milestone.active .milestone-dot-svg {
	transform : scale(1.3);
}

.price-tiers-milestones {
	display         : flex;
	justify-content : space-between;
	position        : relative;
	padding         : 0 20px;
}

.price-tier-milestone {
	position       : relative;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	flex           : 1;
	min-width      : 80px;
}

.price-tier-milestone:not(:last-child) {
	margin-right : 10px;
}

.milestone-marker {
	position  : absolute;
	top       : -54px;
	left      : 50%;
	transform : translateX(-50%);
	z-index   : 2;
}

.milestone-info {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	margin-top     : 10px;
	text-align     : center;
}

.milestone-quantity {
	text-align      : center;
	font-size       : 17.492px;
	font-style      : normal;
	font-weight     : 700;
	line-height     : normal;
	letter-spacing  : 0.35px;
	color           : var(--color-primary);
	width           : 45px;
	height          : 35px;
	display         : flex;
	align-items     : center;
	justify-content : center;
	border-radius   : 7px;
	min-width       : 50px;
	transition      : all 0.3s ease;
	border          : 1px solid #D9D9D9;
}

.interval-locked-info {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}
@media (max-width : 460px) {
	.price-tiers-progress-container {
		display               : grid;
		grid-template-columns : auto 1fr;
		padding               : 0 0 0 20px;
		gap                   : 15px;
	}

	.price-tiers-progress-bar_container {
		flex-direction : column;
		align-items    : center;
	}

	.price-tiers-progress-bar_start {
		width  : 4px;
		height : var(--edge);
	}

	.price-tiers-progress-bar {
		width  : 4px;
		height : var(--middle);
	}

	.price-tiers-progress-bar_end {
		width  : 4px;
		height : var(--edge);
	}

	.price-tiers-progress-fill, .price-tiers-progress-fill-end {
		height : 0;
		width  : 100%;
	}

	.price-tiers-dots {
		flex-direction : column;
	}

	.price-tiers-milestones {
		flex-direction : column;
		align-items    : flex-start;
		padding        : 10px 0;
		gap            : 5px;
	}

	.price-tier-milestone {
		display         : flex;
		flex-direction  : row;
		align-items     : center;
		justify-content : center;
		gap             : 20px;
	}

	.milestone-marker {
		position  : initial;
		transform : initial;
	}

	.milestone-info {
		display        : flex;
		flex-direction : row;
		align-items    : baseline;
		margin-top     : 0;
		text-align     : center;
		white-space    : nowrap;
		gap            : 5px;
	}

	.milestone-info_discount {
		display : none;
	}
}

@media (max-width : 360px) {
	.milestone-info_text {
		display : none;
	}
}

.price-tier-milestone.active .milestone-quantity {
	color : var(--color-secondary);
}

.milestone-price {
	color          : var(--color-primary);
	opacity        : 0.5 !important;
	text-align     : center;
	font-size      : 19.966px;
	font-style     : normal;
	font-weight    : 500;
	line-height    : normal;
	letter-spacing : 0.399px;
	transition     : all 0.3s ease;
}

.milestone-info_text, .milestone-info_discount {
	color          : var(--color-primary);
	font-size      : 12px;
	font-style     : normal;
	font-weight    : 500;
	line-height    : normal;
	letter-spacing : 0.22px;
	text-align     : center;
	opacity        : 0.5 !important;
}

.price-tier-milestone.reached .milestone-price, .price-tier-milestone.reached .milestone-info_text, .price-tier-milestone.reached .milestone-info_discount {
	opacity : 1 !important;
}

.milestone-price.price-with-promo {
	color       : var(--color-secondary) !important;
	font-weight : 700 !important;
}

.milestone-price-regular {
	text-decoration : line-through;
	color           : var(--color-primary);
	opacity         : 0.4 !important;
	font-size       : 14px;
	margin-left     : 5px;
	font-weight     : 400;
}

.price-tier-milestone.reached.has-active-promo .milestone-price-regular {
	opacity : 0.6 !important;
}

.subscription-step-buttons {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 8px;
}

.subscription-step-buttons .btn.btn-primary,
.btn.btn-primary.btn-auth-submit,
.btn.btn-primary.btn-show-register-full,
.btn.btn-primary.btn-create-first-subscription {
	margin          : 0;
	height          : 50px;
	display         : flex;
	gap             : 15px;
	align-items     : center;
	justify-content : center;
	text-align      : center;
	font-size       : 16px;
	font-style      : normal;
	font-weight     : 700;
	line-height     : normal;
	letter-spacing  : 0.48px;
	border-radius   : 4px;
	border          : none;
	box-shadow      : none;
	text-transform  : initial;
}


.subscription-step-buttons .btn.btn-primary {
	width     : 180px;
	max-width : 180px;
}

.btn.btn-primary.btn-back-step {
	background : #fff;
	color      : var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

/* Responsive for progress bar */
@media (max-width : 767px) {
	.price-tier-milestone {
		min-width : auto;
	}

	.subscription__price-tiers-progress {
		padding : 15px;
	}

	.milestone-quantity {
		font-size : 0.9rem;
		padding   : 4px 8px;
	}

	.milestone-price {
		font-size : 0.85rem;
	}
}

/* Authentication Step Styles */
.subscription-auth-container {
	margin : 30px auto;
}

/* Two boxes layout */
.auth-boxes-wrapper {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : 30px;
	margin                : 30px 0;
}

.auth-boxes-wrapper:has(.auth-box-simple-form.hidden) {
	display         : flex;
	justify-content : center;
}

@media (max-width : 767px) {
	.auth-boxes-wrapper {
		grid-template-columns : 1fr;
		gap                   : 20px;
	}
}

.auth-box {
	background     : #F5F5F7;
	border         : 1px solid #D9D9D9;
	border-radius  : 10px;
	padding        : 30px 25px;
	display        : flex;
	flex-direction : column;
}

.auth-box-header {
	text-align    : center;
	margin-bottom : 25px;
}

.auth-box-header h3 {
	color          : var(--color-primary);
	font-size      : 20px;
	font-weight    : 700;
	margin         : 0 0 10px 0;
	text-transform : uppercase;
	letter-spacing : 0.4px;
}

.auth-box-header p {
	color       : #29496F;
	font-size   : 14px;
	font-weight : 400;
	margin      : 0;
	line-height : 1.4;
}

/* Simple form (email only for registration) */
.auth-box-simple-form {
	display        : flex;
	flex-direction : column;
	gap            : 15px;
	height         : 100%;
}

.btn.btn-primary.btn-show-register-full {
	margin-top : auto;
}

.auth-box-simple-form .form-group {
	margin-bottom : 0;
}

.auth-box-simple-form input {
	width            : 100%;
	padding          : 12px 15px;
	border           : 2px solid #e0e0e0;
	border-radius    : 5px;
	font-size        : 1rem;
	transition       : border-color 0.3s ease;
	box-sizing       : border-box;
	background-color : #fff;
}

.auth-box-simple-form input:focus {
	outline      : none;
	border-color : var(--color-primary);
}

.btn-show-register-full {
	width         : 100%;
	padding       : 15px;
	font-size     : 1rem;
	font-weight   : 700;
	background    : var(--color-primary);
	color         : #fff;
	border        : none;
	border-radius : 5px;
	cursor        : pointer;
	transition    : all 0.3s ease;
}

.btn-show-register-full:hover {
	background : var(--color-secondary);
	transform  : translateY(-2px);
	box-shadow : 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Full form (hidden initially) */
.auth-box-full-form {
	display : block;
}

.auth-box-full-form.hidden {
	display : none;
}

/* Forgot password link */
.forgot-password-link {
	display         : block;
	text-align      : center;
	margin-top      : 15px;
	color           : var(--color-primary);
	font-size       : 0.9rem;
	text-decoration : underline;
	transition      : color 0.3s ease;
}

.forgot-password-link:hover {
	color : var(--color-secondary);
}

.subscription-auth-form .form-group {
	margin-bottom : 20px;
	text-align    : left;
}

.subscription-auth-form label {
	display : none;
}

.subscription-auth-form label.checkbox-label, .form-group_id-gender label {
	display : block;
}

.form-group_id-gender label {
	text-align  : left;
	font-size   : .9rem;
	line-height : 1.4;
}

.subscription-auth-form input[type="text"],
.subscription-auth-form input[type="email"],
.subscription-auth-form input[type="password"] {
	width            : 100%;
	padding          : 12px 15px;
	border           : 2px solid #e0e0e0;
	border-radius    : 5px;
	font-size        : 1rem;
	transition       : border-color 0.3s ease;
	box-sizing       : border-box;
	background-color : #fff;
}

.subscription-auth-form input:focus {
	outline      : none;
	border-color : var(--color-primary);
}

.checkbox-label {
	display     : flex;
	align-items : flex-start;
	cursor      : pointer;
	font-size   : 0.9rem;
	line-height : 1.4;
}

.checkbox-label input[type="checkbox"] {
	margin-right : 10px;
	margin-top   : 3px;
	cursor       : pointer;
	width        : 18px;
	height       : 18px;
	flex-shrink  : 0;
}

.auth-error-message {
	background    : #f8d7da;
	color         : #721c24;
	border        : 1px solid #f5c6cb;
	border-radius : 5px;
	padding       : 12px 15px;
	margin-bottom : 20px;
	text-align    : center;
	font-size     : 0.9rem;
}

.auth-error-message.hidden {
	display : none;
}

.btn-auth-submit {
	width         : 100%;
	padding       : 15px;
	font-size     : 1.1rem;
	font-weight   : 700;
	background    : var(--color-primary);
	color         : #fff;
	border        : none;
	border-radius : 5px;
	cursor        : pointer;
	transition    : all 0.3s ease;
	margin-top    : 10px;
}

.btn-auth-submit:hover:not(:disabled) {
	background : var(--color-secondary);
	transform  : translateY(-2px);
	box-shadow : 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-auth-submit:disabled {
	opacity : 0.6;
	cursor  : not-allowed;
}

.subscriptions__wrapper {
  display     : grid;
  align-items : flex-start;
  border-radius: 0 0 16px 16px;
  border-bottom: 1px solid rgba(32, 37, 74, 0.15);
  border-right: 1px solid rgba(32, 37, 74, 0.15);
  border-left: 1px solid rgba(32, 37, 74, 0.15);
  padding: 16px;
}

.buy-once__wrapper:has(.selected__atc),.subscriptions__wrapper:has(.selected__atc) {
  background: rgba(224, 48, 102, 0.10);
}

.buy-once__wrapper:has(.selected__atc) span.t-items ,.subscriptions__wrapper:has(.selected__atc) span.t-items {
  font-weight: 600;
}

.subscription-content-container {
  border-radius : 9px 9px 0 0;
  padding       : 1em;
}

.subscribe--container {
  width : 100%;
}


/*********************************************************
/ Subscription QTY
/*********************************************************/

.subscription__quantity-selector {
  display       : inline-flex;
  background    : white;
  border-radius : 4px;
  border        : 1px solid #aeaeae;
  margin        : 0 10px;
}

.subscription__quantity-selector .btn {
  background : transparent;
  padding    : 0 1rem;
  border     : none;
}

.subscription__total-price-display {
  color          : var(--color-secondary);
  text-align     : center;
  font-size      : 20px;
  font-style     : normal;
  font-weight    : 600;
  line-height    : normal;
  letter-spacing : 0.4px;
}

.subscription__unit-price-display {
  color          : var(--color-secondary);
  font-size      : 12px;
  font-style     : normal;
  font-weight    : 800;
  line-height    : 18.277px;
  letter-spacing : .24px;
  align-items    : flex-end;
}

.subscription__quantity-selector input.input-group {
  border         : none;
  text-align     : center;
  width          : 2.5rem;
  height         : 1.9rem;
  padding        : 0 0.5rem;
  font-size      : 1.25rem;
  line-height    : 1.1em;
  letter-spacing : 0.01em;
}

.subscription__quantity-selector .input-group-btn-vertical {
  display : none;
}

.subscription-content-inner {
  position : relative;
}

.subscription__quantity-selector-wrapper {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 25px;
}

.subscription__quantity-title_step {
  color : var(--color-secondary);
}

.subscription__quantity-select {
  display     : flex;
  align-items : center;
}

.subscription__add-qty:focus,.subscription__remove-qty:focus {
  outline : none !important;
  border: none !important;
}

.subscription-step-buttons {
  margin-top: 20px;
}

.sub-interval-fix {
  color          : var(--color-secondary);
  text-align     : center;
  font-size      : 20px;
  font-style     : normal;
  font-weight    : 600;
  line-height    : normal;
  letter-spacing : 0.4px;
}

.subscription__price-right-container {
  display        : flex;
  align-items    : center;
  gap: 5px;
}

.price-product-abon {
  color: #E03066;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
}

.subscription__price-right-container  .price-product {
  color: #20254A;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-decoration-line: line-through;
  opacity: 0.4;
}

.subscription-content_container .product-unit-price {
  color          : var(--color-secondary);
  font-family    : var(--main-font), sans-serif;
  font-size      : 12px;
  font-style     : normal;
  font-weight    : 400;
  line-height    : 20px; /* 166.667% */
  letter-spacing : 0.24px;
}

.subscriptions__wrapper:has(.selected__atc) {
  /*background: rgba(224, 48, 102, 0.10);*/
}

.btn-subscription-modal.btn-primary {
  display: block;
  margin: 0 auto;
  border: 5px;
  background: #E03066;
}


/* RESPONSIVE*/

@media screen and (max-width : 1023px) {
  .subscriptions__wrapper {
    grid-template-columns : 1fr;
  }

  .subscription-content-inner {
    border-radius : 10px;
    border        : 1px solid midnightblue;
    background    : white;
    padding       : 20px;
    margin-top: 10px;
  }

  .subscriptions__wrapper .subscription-price-info-container {
    text-align : center;
    margin-top : 1em;
  }

  .subscriptions__wrapper .custom-radio {
    display : none;
  }

  .subscriptions__wrapper > .subscriptions__actions,
  .subscriptions__wrapper > .sub-advantages {
    grid-column : 1/-1;
  }

  #btn-subscription-modal {
    margin : 1em 0;
  }

  .subscriptions__wrapper > .sub-advantages {
    margin-top : 1.25rem;
  }

  .delivery_date {
    margin-top: unset !important;
  }

  .purchase-options__wrapper {
    margin-top: 15px;
  }
}


/*@media (min-width : 1024px) {*/

  .subscriptions__wrapper > .sub-advantages {
    grid-column : 1/-1;
  }

  .subscriptions__wrapper > .product__delivery-min {
    width       : 4.75rem;
    margin-left : 1.9rem;
  }

  .subscriptions__wrapper > .product__delivery-min {
    grid-column   : 3;
    grid-row      : 1/3;
    margin-bottom : auto;
  }


  .subscription__price .divided-format__price {
    justify-content : flex-start;
  }

  .subscription-content-container {
    grid-column : 1/-1;
    padding     : 1em 5em;
    /*display: flex;*/
    /*justify-content: space-evenly;*/
  }

  .subscription-info-container {
    display               : flex;
    align-items           : center;
    justify-items         : center;
    padding               : 20px 0 20px;
    border-radius         : 10px;
    gap: 10px;
    /*padding: 1.15rem 1.8rem 1.25rem;*/
  }

  .subscription-reassurance__item {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 5px;
    justify-content: center;
  }

  .subscription-reassurance__item img {
    height: 34px;
    object-fit: contain;
  }

  .subscription-reassurance__item p {
    color: #E03066;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.3px;
  }

  p.warning-info {
    color: #20254A;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
  }

  .subscription-content-inner.selected__atc {
    cursor : pointer;
  }

  .subscription-content-inner .product__delivery-min {
    width       : 4.75rem;
    margin-left : 2.05rem;
  }

  .subscriptions__wrapper .subscription__price {
    display       : flex;
    align-items   : center;
    justify-items : left;
    grid-column   : 1/5;
    grid-row      : 1;
    margin        : 0 2em;
  }

  .subscriptions__wrapper .subscriptions__actions {
    grid-column : 1/5;
    padding     : 1rem 0 0 0;
  }

  .subscriptions__wrapper .custom-radio {
    grid-column  : 1;
    margin-left  : 1em;
    margin-right : 1.25em;
  }

  .subscriptions__wrapper .separator {
    grid-column      : 1/5;
    grid-row         : 2;
    height           : 1px;
    width            : 100%;
    background-color : #e1e1e5;
    margin-top       : 1em;
  }

/*}*/

@media (min-width : 1199px) {
  .product__images__wrapper .sub-product-icon {
    position : absolute;
    right    : .625rem;
    top      : 3rem;
    width    : 80px;
    height   : 80px;
    z-index  : 2;
  }

}

@media (max-width : 1199px) {
  .product__images__wrapper .sub-product-icon {
    position : absolute;
    right    : 1.5rem;
    bottom   : 1.5rem;
    width    : 80px;
    height   : 80px;
    z-index  : 2;
  }
}


/* Responsive adjustments for auth form */
@media (max-width : 767px) {
	.subscription-auth-container {
		max-width : 100%;
		margin    : 20px 0;
	}

	.auth-tab {
		padding   : 10px 20px;
		font-size : 1rem;
	}

	.subscription-auth-form input {
		padding : 10px 12px;
	}
}

/* Radio group for gender selection */
.radio-group {
	display : flex;
	gap     : 15px;
	margin  : 8px 0;
}

.radio-inline {
	display     : flex;
	align-items : center;
	cursor      : pointer;
	font-weight : normal;
	margin      : 0;
}

.radio-inline input[type="radio"] {
	margin-right : 8px;
	cursor       : pointer;
	width        : 18px;
	height       : 18px;
}

.required {
	color : #dc3545;
}

.optional {
	color       : #666;
	font-size   : 0.9em;
	font-weight : normal;
}

/* Date input styling */
.subscription-auth-form input[type="date"] {
	width            : 100%;
	padding          : 12px 15px;
	border           : 2px solid #e0e0e0;
	border-radius    : 5px;
	font-size        : 1rem;
	transition       : border-color 0.3s ease;
	box-sizing       : border-box;
	background-color : #fff;
}

.subscription-auth-form input[type="date"]:focus {
	outline      : none;
	border-color : var(--color-primary);
}

/* ── subscription__price-right-container layout & responsive ── */

/* Layout de base (desktop) */
.subscriptions__wrapper-title__container {
  display     : flex;
  align-items : center;
  gap         : 10px;
  cursor      : pointer;
}

.abon__wrapper-title__inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex            : 1;
  gap             : 10px;
  flex-wrap       : wrap;
}

/* Tablet (768px – 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .abon__wrapper-title__inner {
    gap : 8px;
  }

  .price-product-abon,
  .subscription__price-right-container .price-product {
    font-size : 15px;
  }
}

/* Mobile (≤ 767px) */
@media screen and (max-width: 767px) {
  .subscriptions__wrapper-title__container {
    gap         : 8px;
    align-items : flex-start;
  }

  .abon__wrapper-title__inner {
    align-items    : flex-start;
    gap            : 4px;
  }

  .subscription__price-right-container {
    gap : 6px;
  }

  .price-product-abon,
  .subscription__price-right-container .price-product {
    font-size   : 14px;
    line-height : 20px;
  }

  /*.subscription-info-container {*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*  gap: 7px;*/
  /*}*/

  /*.subscription-reassurance__item img {*/
  /*  margin: 0 auto;*/
  /*  display: block;*/
  /*}*/
}
/* ────────────────────────────────────────────────────────────── */