/* SAMECOM packs — a premium "build your pack" configurator. Mobile first. */

.samecom-pack {
	--samecom-pack-radius: 18px;
	--samecom-pack-gap: 18px;
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 18px 0 96px;
}

/* ---------------------------------------------------------------- hero */
.samecom-pack__hero { display: flex; flex-direction: column; gap: 18px; }
.samecom-pack__hero-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--samecom-pack-radius); display: block; }
.samecom-pack__badge {
	display: inline-block; padding: 6px 14px; border-radius: 999px;
	background: var(--samecom-primary, #c9080b); color: #fff; font-weight: 800; font-size: .78rem;
	letter-spacing: .04em; text-transform: uppercase;
}
.samecom-pack__title { margin: 10px 0 4px; font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.12; }
.samecom-pack__offer { margin: 0 0 6px; font-weight: 700; color: var(--samecom-primary, #c9080b); }
.samecom-pack__offer span { color: var(--samecom-muted, #6b7280); font-weight: 600; }
.samecom-pack__offer span::before { content: " — "; }
.samecom-pack__excerpt { margin: 0; color: var(--samecom-muted, #6b7280); font-size: 1.02rem; }
.samecom-pack__offer-text { color: var(--samecom-muted, #6b7280); font-size: .95rem; }
.samecom-pack__headline-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
.samecom-pack__headline-price del { color: var(--samecom-muted, #6b7280); font-size: 1.05rem; }
.samecom-pack__headline-price strong { font-size: 1.9rem; color: var(--samecom-primary, #c9080b); font-variant-numeric: tabular-nums; }
.samecom-pack__headline-saving {
	padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700;
	background: color-mix(in srgb, var(--samecom-success, #15803d) 12%, #fff); color: var(--samecom-success, #15803d);
}
.samecom-pack__countdown { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .92rem; }
.samecom-pack__countdown-label { color: var(--samecom-muted, #6b7280); }
.samecom-pack__countdown-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.samecom-pack__notice {
	margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 600;
	background: color-mix(in srgb, var(--samecom-danger, #d63638) 10%, #fff); color: var(--samecom-danger, #d63638);
}

/* ---------------------------------------------------------------- nav */
.samecom-pack__nav { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.samecom-pack__nav-link {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	padding: 8px 14px; border-radius: 999px; border: 1px solid var(--samecom-border, #e5e7eb);
	background: #fff; text-decoration: none; color: inherit; font-size: .88rem; font-weight: 600;
}
.samecom-pack__nav-link:hover { border-color: var(--samecom-primary, #c9080b); color: var(--samecom-primary, #c9080b); }
.samecom-pack__nav-index {
	width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
	background: var(--samecom-soft, #f3f4f6); font-size: .74rem; font-weight: 800;
}
.samecom-pack__description { color: var(--samecom-muted, #6b7280); }

/* ---------------------------------------------------------------- layout */
.samecom-pack__layout { display: flex; flex-direction: column; gap: 22px; }
.samecom-pack__products { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------------------------------------------------------------- product */
.samecom-pack__product {
	display: flex; flex-direction: column; gap: 16px;
	border: 1px solid var(--samecom-border, #e5e7eb); border-radius: var(--samecom-pack-radius);
	padding: 14px; background: #fff; scroll-margin-top: 90px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.samecom-pack__product.is-unavailable { opacity: .62; }
.samecom-pack__figure { position: relative; margin: 0; }
.samecom-pack__image {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
	border-radius: 14px; background: var(--samecom-soft, #f3f4f6);
	transition: opacity .18s ease;
}
.samecom-pack__image--empty { display: block; }
.samecom-pack__image.is-swapping { opacity: .25; }
.samecom-pack__flag {
	position: absolute; inset-inline-start: 10px; inset-block-start: 10px;
	padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
	background: rgba(17, 24, 39, .82); color: #fff;
}
.samecom-pack__thumbs { position: relative; display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.samecom-pack__thumb {
	flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border-radius: 10px; cursor: pointer;
	border: 2px solid var(--samecom-border, #e5e7eb); background: #fff; overflow: hidden;
}
.samecom-pack__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.samecom-pack__thumb.is-active { border-color: var(--samecom-primary, #c9080b); }

.samecom-pack__product-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.samecom-pack__product-name { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 9px; }
.samecom-pack__product-name a { color: inherit; text-decoration: none; }
.samecom-pack__product-name a:hover { color: var(--samecom-primary, #c9080b); }
.samecom-pack__product-index {
	width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
	background: var(--samecom-primary, #c9080b); color: #fff; font-size: .78rem; font-weight: 800;
}
.samecom-pack__product-excerpt { margin: 0; color: var(--samecom-muted, #6b7280); font-size: .92rem; }
.samecom-pack__product-price { margin: 2px 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.samecom-pack__product-price del { color: var(--samecom-muted, #6b7280); font-size: .9rem; }
.samecom-pack__product-price strong { font-size: 1.12rem; color: var(--samecom-primary, #c9080b); }
.samecom-pack__price-note { font-size: .76rem; color: var(--samecom-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.samecom-pack__stock { margin: 0; font-size: .85rem; font-weight: 600; color: var(--samecom-success, #15803d); }
.samecom-pack__stock::before { content: "✓ "; }
.samecom-pack__stock.is-out { color: var(--samecom-danger, #d63638); }
.samecom-pack__stock.is-out::before { content: ""; }

/* ---------------------------------------------------------------- rows */
.samecom-pack__rows { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.samecom-pack__row {
	border: 1px solid var(--samecom-border, #e5e7eb); border-radius: 14px; padding: 12px;
	background: var(--samecom-soft, #f9fafb);
	opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.samecom-pack__row.is-ready { opacity: 1; transform: none; }
.samecom-pack__row.is-flagged { box-shadow: 0 0 0 3px color-mix(in srgb, var(--samecom-primary, #c9080b) 35%, transparent); }
.samecom-pack__row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.samecom-pack__row-title { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--samecom-muted, #6b7280); }
.samecom-pack__row-state { font-size: .8rem; font-weight: 600; color: var(--samecom-muted, #6b7280); }
.samecom-pack__row-state.is-ok { color: var(--samecom-success, #15803d); }
.samecom-pack__row-state.is-low { color: #b45309; }
.samecom-pack__row-remove {
	margin-inline-start: auto; border: 0; background: transparent; cursor: pointer;
	min-width: 36px; min-height: 36px; border-radius: 9px; font-size: 1.2rem; line-height: 1;
	color: var(--samecom-muted, #6b7280);
}
.samecom-pack__row-remove:hover { background: rgba(0, 0, 0, .05); color: var(--samecom-danger, #d63638); }

.samecom-pack__group { margin-bottom: 10px; }
.samecom-pack__group-label {
	display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .06em; color: var(--samecom-muted, #6b7280);
}
.samecom-pack__options { display: flex; flex-wrap: wrap; gap: 8px; }
.samecom-pack__option {
	position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	min-height: 46px; padding: 8px 14px; font: inherit; font-size: .9rem; font-weight: 650;
	border: 2px solid var(--samecom-border, #e5e7eb); border-radius: 12px; background: #fff; color: inherit;
	transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.samecom-pack__option:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--samecom-primary, #c9080b) 45%, var(--samecom-border, #e5e7eb)); }
.samecom-pack__option:focus-visible { outline: 3px solid color-mix(in srgb, var(--samecom-primary, #c9080b) 45%, transparent); outline-offset: 2px; }
.samecom-pack__options--visual { gap: 10px; }
.samecom-pack__options--visual .samecom-pack__option { flex-direction: column; gap: 6px; width: 104px; padding: 8px; text-align: center; }
.samecom-pack__option img { width: 84px; height: 84px; object-fit: cover; border-radius: 9px; display: block; }
.samecom-pack__options:not(.samecom-pack__options--visual) .samecom-pack__option img { width: 30px; height: 30px; }
.samecom-pack__option-blank {
	width: 84px; height: 84px; border-radius: 9px; display: block;
	background: repeating-linear-gradient(45deg, var(--samecom-soft, #f3f4f6), var(--samecom-soft, #f3f4f6) 7px, #fff 7px, #fff 14px);
}
.samecom-pack__option-text { word-break: break-word; }
.samecom-pack__option-check {
	position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
	width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
	background: var(--samecom-primary, #c9080b); color: #fff; font-size: .7rem; font-weight: 800;
	opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease;
}
/* On a text-only option the badge sits beside the label, never on top of it. */
.samecom-pack__options:not(.samecom-pack__options--visual) .samecom-pack__option-check {
	inset-block-start: 50%; transform: translateY(-50%) scale(.7);
}
.samecom-pack__options:not(.samecom-pack__options--visual) .samecom-pack__option.is-selected {
	padding-inline-end: 34px;
}
.samecom-pack__options:not(.samecom-pack__options--visual) .samecom-pack__option.is-selected .samecom-pack__option-check {
	transform: translateY(-50%) scale(1);
}
.samecom-pack__option.is-selected {
	border-color: var(--samecom-primary, #c9080b);
	background: color-mix(in srgb, var(--samecom-primary, #c9080b) 7%, #fff);
}
.samecom-pack__option.is-selected .samecom-pack__option-check { opacity: 1; transform: scale(1); }
.samecom-pack__option:disabled, .samecom-pack__option.is-unavailable { cursor: not-allowed; opacity: .4; }
.samecom-pack__option.is-unavailable .samecom-pack__option-text { text-decoration: line-through; }

.samecom-pack__row-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.samecom-pack__row-price { font-weight: 700; font-size: .95rem; }
.samecom-pack__qty { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; background: #fff; border: 1px solid var(--samecom-border, #e5e7eb); border-radius: 12px; padding: 3px; }
.samecom-pack__qty-btn {
	min-width: 42px; min-height: 42px; border: 0; border-radius: 9px; background: transparent;
	font-size: 1.1rem; cursor: pointer; color: inherit;
}
.samecom-pack__qty-btn:hover:not(:disabled) { background: var(--samecom-soft, #f3f4f6); }
.samecom-pack__qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.samecom-pack__qty-input {
	width: 52px; min-height: 42px; text-align: center; border: 0; background: transparent;
	font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
	transition: transform .16s ease;
}
.samecom-pack__qty-input.is-bumped { transform: scale(1.14); }
.samecom-pack__qty-input::-webkit-outer-spin-button,
.samecom-pack__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.samecom-pack__add-row {
	align-self: flex-start; margin-top: 4px; min-height: 46px; padding: 10px 18px; cursor: pointer;
	border: 2px dashed color-mix(in srgb, var(--samecom-primary, #c9080b) 45%, var(--samecom-border, #e5e7eb));
	border-radius: 12px; background: transparent; color: var(--samecom-primary, #c9080b);
	font: inherit; font-weight: 700;
}
.samecom-pack__add-row:hover { background: color-mix(in srgb, var(--samecom-primary, #c9080b) 6%, #fff); }

/* ---------------------------------------------------------------- summary */
.samecom-pack__summary { min-width: 0; }
.samecom-pack__summary-inner {
	border: 1px solid var(--samecom-border, #e5e7eb); border-radius: var(--samecom-pack-radius);
	padding: 18px; background: #fff; box-shadow: 0 6px 24px rgba(16, 24, 40, .06);
}
.samecom-pack__summary-title { margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--samecom-muted, #6b7280); }
.samecom-pack__progress { margin-bottom: 14px; }
.samecom-pack__progress[hidden] { display: none; }
.samecom-pack__progress-text { margin: 0 0 6px; font-size: .88rem; font-weight: 700; }
.samecom-pack__progress-bar { height: 8px; border-radius: 999px; background: var(--samecom-soft, #f3f4f6); overflow: hidden; }
.samecom-pack__progress-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--samecom-primary, #c9080b); transition: width .28s ease; }
.samecom-pack__empty { margin: 0; color: var(--samecom-muted, #6b7280); font-size: .9rem; }
.samecom-pack__empty[hidden] { display: none; }
.samecom-pack__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.samecom-pack__line { display: flex; align-items: center; gap: 10px; }
.samecom-pack__line img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; flex: none; }
.samecom-pack__line div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.samecom-pack__line-name { font-size: .88rem; font-weight: 650; }
.samecom-pack__line-detail { font-size: .8rem; color: var(--samecom-muted, #6b7280); }
.samecom-pack__line-total { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.samecom-pack__totals { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--samecom-border, #e5e7eb); }
.samecom-pack__total-row { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; font-size: .92rem; }
.samecom-pack__total-row dt, .samecom-pack__total-row dd { margin: 0; }
.samecom-pack__total-row dd { font-variant-numeric: tabular-nums; }
.samecom-pack__total-row--saving { color: var(--samecom-success, #15803d); font-weight: 700; }
.samecom-pack__total-row--saving[hidden] { display: none; }
.samecom-pack__total-row--final { align-items: baseline; margin-top: 10px; }
.samecom-pack__total-row--final strong { font-size: 1.45rem; color: var(--samecom-primary, #c9080b); }
.samecom-pack__message { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .88rem; font-weight: 600; }
.samecom-pack__message[hidden] { display: none; }
.samecom-pack__message.is-success { background: color-mix(in srgb, var(--samecom-success, #15803d) 12%, #fff); color: var(--samecom-success, #15803d); }
.samecom-pack__message.is-warning { background: #fef3c7; color: #92400e; }
.samecom-pack__message.is-error { background: color-mix(in srgb, var(--samecom-danger, #d63638) 12%, #fff); color: var(--samecom-danger, #d63638); }
.samecom-pack__cta {
	width: 100%; min-height: 52px; margin-top: 14px; cursor: pointer; border: 0; border-radius: 14px;
	background: var(--samecom-primary, #c9080b); color: #fff; font: inherit; font-size: 1rem; font-weight: 800;
	transition: transform .12s ease, filter .16s ease;
}
.samecom-pack__cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.samecom-pack__cta:disabled { opacity: .5; cursor: not-allowed; }
.samecom-pack__cta.is-loading { opacity: .7; }
.samecom-pack__summary-note { margin: 10px 0 0; font-size: .82rem; color: var(--samecom-muted, #6b7280); text-align: center; }

/* ---------------------------------------------------------------- sticky bar */
.samecom-pack__sticky {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
	display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
	border-block-start: 1px solid var(--samecom-border, #e5e7eb);
	box-shadow: 0 -4px 20px rgba(16, 24, 40, .08);
}
.samecom-pack__sticky[hidden] { display: none; }
.samecom-pack__sticky-info { display: flex; flex-direction: column; min-width: 0; }
.samecom-pack__sticky-total { font-size: 1.1rem; font-weight: 800; color: var(--samecom-primary, #c9080b); font-variant-numeric: tabular-nums; }
.samecom-pack__sticky-saving { font-size: .78rem; color: var(--samecom-success, #15803d); font-weight: 700; }
.samecom-pack__cta--sticky { width: auto; margin: 0; margin-inline-start: auto; padding-inline: 26px; min-height: 48px; }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 720px) {
	.samecom-pack__product { display: grid; grid-template-columns: 300px 1fr; gap: 22px; padding: 18px; }
	.samecom-pack__product-media { grid-column: 1; }
	.samecom-pack__product-body { grid-column: 2; }
}
@media (min-width: 1040px) {
	.samecom-pack__hero { flex-direction: row; align-items: center; gap: 30px; }
	.samecom-pack__hero-media { flex: 0 0 46%; }
	.samecom-pack__layout { flex-direction: row; align-items: flex-start; gap: 26px; }
	.samecom-pack__products { flex: 1; }
	.samecom-pack__summary { flex: 0 0 340px; position: sticky; top: 24px; }
	.samecom-pack { padding-bottom: 40px; }
	.samecom-pack__sticky { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.samecom-pack *, .samecom-pack *::before, .samecom-pack *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.samecom-pack__row { opacity: 1; transform: none; }
}