.com-cleverics-shop {
	--cs-accent: #0d6efd;
	--cs-text: #1f2937;
	--cs-muted: #6b7280;
	--cs-surface: #ffffff;
	--cs-border: #e5e7eb;
	--cs-radius: 0.75rem;
	--cs-danger: #b02a37;
	--cs-danger-bg: rgba(220, 53, 69, 0.1);
	--cs-success: #1b7f3b;
}

.com-cleverics-shop__card {
	max-width: 760px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
	color: var(--cs-text);
}

.com-cleverics-shop__badge {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.1);
	color: var(--cs-accent);
	font-size: 0.8rem;
	font-weight: 600;
}

.com-cleverics-shop__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.com-cleverics-shop__text {
	margin: 0;
	color: var(--cs-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* Product page
 * The product page visual design lives in product.css; the root container here
 * only needs to fill the whole width the Joomla template provides.
 */

.com-cleverics-shop-product {
	width: 100%;
	padding: 1.5rem 0;
}

.cs-section {
	margin-bottom: 2.5rem;
	padding: 1.75rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
}

.cs-section__title {
	margin: 0 0 1.25rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.cs-section__title h2 {
	padding-top: 0;
}

.cs-product__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.cs-product__header--with-image {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}
}

.cs-product__image {
	width: 100%;
	max-width: 300px;
	height: auto;
	border-radius: calc(var(--cs-radius) * 0.7);
	border: 1px solid var(--cs-border);
}

.cs-product__code {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.55rem;
	border-radius: 0.375rem;
	background: rgba(13, 110, 253, 0.08);
	color: var(--cs-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cs-product__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.2;
}

.cs-product__slogan {
	margin: 0 0 0.9rem;
	color: var(--cs-muted);
	font-size: 1.05rem;
	line-height: 1.55;
}

.cs-product__features {
	margin: 0 0 0.9rem;
	line-height: 1.55;
}

.cs-product__description {
	margin: 0 0 1.1rem;
	line-height: 1.65;
}

.cs-product__classifiers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
}

.cs-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--cs-border);
	background: #f8fafc;
	color: var(--cs-text);
	font-size: 0.8rem;
	font-weight: 500;
}

.cs-product__durations {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 0 0 1.25rem;
}

.cs-product__duration {
	margin: 0;
}

.cs-product__duration dt {
	font-size: 0.78rem;
	color: var(--cs-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cs-product__duration dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

.cs-product__prices {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-bottom: 1.25rem;
}

.cs-price {
	display: inline-flex;
	flex-direction: column;
}

.cs-price__label {
	font-size: 0.8rem;
	color: var(--cs-muted);
}

.cs-price__value {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cs-text);
}

.cs-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cs-product__order-button {
	font-weight: 600;
}

.cs-schedule {
	margin-bottom: 0;
}

.cs-schedule th {
	font-size: 0.82rem;
	color: var(--cs-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cs-order-form {
	max-width: 720px;
}

.cs-note {
	color: var(--cs-muted);
	line-height: 1.55;
}

.cs-reviews {
	display: grid;
	gap: 1rem;
}

.cs-review {
	padding: 1.25rem;
	border: 1px solid var(--cs-border);
	border-radius: calc(var(--cs-radius) * 0.7);
	background: #fafbfc;
}

.cs-review__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}

.cs-review__author {
	font-weight: 700;
}

.cs-review__company {
	color: var(--cs-muted);
}

.cs-review__nps {
	color: var(--cs-accent);
	font-weight: 600;
}

.cs-review__text {
	line-height: 1.6;
	white-space: pre-line;
}

.cs-notfound {
	padding: 2.5rem 2rem;
	text-align: center;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
}

.cs-notfound__title {
	margin: 0 0 0.75rem;
	font-size: 1.6rem;
}

.cs-notfound__text {
	margin: 0;
	color: var(--cs-muted);
}

/* Cart page */

.com-cleverics-shop-cart {
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.5rem 0;
}

.com-cleverics-shop__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.cs-cart__empty {
	text-align: center;
}

.cs-cart__message {
	display: none;
	margin: 0 0 1.25rem;
	padding: 0.7rem 0.9rem;
	border-radius: calc(var(--cs-radius) * 0.6);
	font-size: 0.95rem;
	line-height: 1.5;
}

.cs-cart__message--error {
	display: block;
	background: var(--cs-danger-bg);
	color: var(--cs-danger);
}

.cs-cart__message--success {
	display: block;
	background: rgba(27, 127, 59, 0.1);
	color: var(--cs-success);
}

.cs-cart__empty-links {
	display: grid;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

/* The cart page is a single vertical flow of three blocks: the composition,
 * the order summary and the order form. On wide screens the composition and
 * the summary sit side by side (the summary is the right card); on narrow
 * screens the summary drops after the composition and before the order form. */

.cs-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	align-items: start;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

@media (max-width: 991.98px) {
	.cs-cart__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cs-cart__main {
	min-width: 0;
}

/* Every cart line is its own card with two columns on wide screens and a
 * single column below the breakpoint: the description first, then the price,
 * the quantity field, the line total and the removal action. */

.cs-cart__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 1rem 1.5rem;
	margin-bottom: 1rem;
	padding: 1.25rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
}

.cs-cart__item:last-child {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.cs-cart__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cs-cart__item-info {
	min-width: 0;
	max-width: 90%;
}

.cs-cart__item-controls {
	display: grid;
	justify-items: end;
	gap: 0.5rem;
	text-align: right;
}

.cs-cart__item-price {
	color: var(--cs-text);
	line-height: 1.5;
}

.cs-cart__item-qty .cs-cart__qty-form {
	justify-content: flex-end;
}

.cs-cart__item-total {
	line-height: 1.5;
}

.cs-cart__item-delete .btn {
	padding: 0.25rem 0.375rem;
}

.cs-cart__product-types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.cs-cart__schedule {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4rem;
	margin-top: 0.4rem;
}

.cs-cart__qty {
	width: 4rem;
	text-align: right;
}

/* Order summary card: the buyer type switch (two buttons, one always active),
 * the totals and the clear action, aligned to the right edge. */

.cs-cart__summary {
	width: 100%;
}

.cs-cart__buyer-toggle {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.cs-cart__buyer-btn {
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--cs-border);
	border-radius: 3.5rem;
	background: var(--cs-surface);
	color: var(--cs-text);
	line-height: 1.5;
	font-size: .875em;
}

.cs-cart__buyer-btn:hover {
	border-color: var(--cs-muted);
	color: var(--cs-muted);
}

.cs-cart__buyer-btn.is-active {
    background: var(--cs-muted);
    border-color: var(--cs-muted);
	color: #fff;
}

.cs-cart__totals {
	display: grid;
	gap: 0.4rem;
	margin: 1rem 0 1.25rem;
}

.cs-cart__total-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	line-height: 1.5;
}

.cs-cart__total-line dt {
	font-weight: 300;
}

.cs-cart__total-line dd {
	margin: 0;
	font-weight: 300;
}

.cs-cart__total-line--final {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cs-border);
	font-size: 1.15rem;
}

.cs-cart__total-line--final dd {
	font-weight: 700;
}

.cs-cart__clear-form {
	display: flex;
	justify-content: center;
}

.cs-recommendations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.cs-recommendation {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem;
	border: 1px solid var(--cs-border);
	border-radius: calc(var(--cs-radius) * 0.7);
	background: #fafbfc;
}

.cs-recommendation__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cs-recommendation__name {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.cs-recommendation__slogan {
	margin: 0;
	color: var(--cs-muted);
	font-size: 0.92rem;
	line-height: 1.5;
	flex: 1 1 auto;
}

.cs-recommendation__form {
	margin-top: auto;
}

/* Checkout form */

.cs-cart__checkout {
	max-width: 860px;
}

.cs-checkout-form {
	max-width: 720px;
}

.cs-checkout-form .form-check-label a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cs-checkout__submit {
	font-weight: 600;
}

/* Public order page */

.com-cleverics-shop-order {
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem 0;
}

.cs-order__info {
	display: grid;
	gap: 0.6rem 2rem;
	margin: 0;
}

@media (min-width: 640px) {
	.cs-order__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cs-order__info-line {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin: 0;
	line-height: 1.5;
}

.cs-order__info-line dt {
	color: var(--cs-muted);
}

.cs-order__info-line dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.cs-order__product-code {
	font-size: 0.8rem;
}

.cs-order__totals {
	max-width: 420px;
	margin-left: auto;
}

.com-cleverics-shop-order-notfound {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 0;
}

.com-cleverics-shop-order-pay {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 0;
}