/* ============================================================
   PACKAGE BUILDER — styles
   Extracted from TRNS_PKG.mvt (the <style> block + all inline
   style="" attributes that were previously scattered in the markup).
   ============================================================ */

body {background-color:#000}
:root {--default-content-width: 100rem;}
.pkg-wizard {
	--pkg-bg: #f6f7f9;
	--pkg-card-bg: #ffffff;
	--pkg-border: #e6e8ec;
	--pkg-muted: #6b7280;
	--pkg-faint: #9ca3af;
	--pkg-ink: #111827;
	--pkg-accent: #c8102e; /* theme-red */
	--pkg-accent-soft: #fdecef;
	--pkg-success: #16a34a;
	--pkg-success-soft: #dcfce7;
}
.pkg-wizard * { box-sizing: border-box; }

.pkg-shell { max-width: 1200px; margin: 0 auto; }

/* ---- Progress rail ---- */
.pkg-rail-wrap {
	position: sticky; top: 0; z-index: 30;
	background: rgba(246,247,249,.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--pkg-border);
	padding: .75rem 0;
	margin-bottom: 1.25rem;
}
.pkg-rail {
	display: flex; gap: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px .5rem;
}
.pkg-rail::-webkit-scrollbar { display: none; }
.pkg-rail__chip {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .5rem .875rem;
	border: 1px solid var(--pkg-border);
	border-radius: 999px;
	background: #fff;
	font-size: .875rem; font-weight: 500; color: var(--pkg-muted);
	white-space: nowrap;
	cursor: not-allowed;
	transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.pkg-rail__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #eef0f3; color: var(--pkg-muted);
	font-size: .75rem; font-weight: 700;
}
.pkg-rail__chip[data-state="done"]      { cursor: pointer; color: var(--pkg-ink); border-color: var(--pkg-success-soft); }
.pkg-rail__chip[data-state="done"] .pkg-rail__num { background: var(--pkg-success); color: #fff; }
.pkg-rail__chip[data-state="done"]:hover { border-color: var(--pkg-success); }
.pkg-rail__chip[data-state="current"]   { cursor: default; color: var(--pkg-ink); border-color: var(--pkg-accent); box-shadow: 0 0 0 3px var(--pkg-accent-soft); }
.pkg-rail__chip[data-state="current"] .pkg-rail__num { background: var(--pkg-accent); color: #fff; }
.pkg-rail__chip[data-state="skipped"]   { cursor: pointer; border-style: dashed; }
.pkg-rail__chip[data-state="upcoming"]  { opacity: .65; }

/* ---- Layout ---- */
.pkg-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 992px) {
	.pkg-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.pkg-card {
	background: var(--pkg-card-bg);
	border: 1px solid var(--pkg-border);
	border-radius: .75rem;
	height: fit-content;
}

/* ---- Step panel ---- */
.pkg-step { display: none; padding: 0 1.5rem 1.5rem 1.5rem; }
.pkg-step.is-active { display: block;scroll-margin-top: 80px; }
.pkg-eyebrow {
	font-size: .72rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--pkg-faint);
}
.pkg-step__title { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 0; line-height: 1.2; }

/* ---- Option row ---- */
.pkg-option {
	position: relative;
	display: grid;
	grid-template-columns: 28px 84px 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: .875rem 1rem;
	border: 1px solid var(--pkg-border);
	border-radius: .625rem;
	margin-bottom: .625rem;
	cursor: pointer;
	background: #fff;
	transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pkg-option:hover { border-color: #c9cfd8; }
.pkg-option:has(input[type=radio]:checked) {
	border-color: var(--pkg-accent);
	background: #fffafb;
	box-shadow: 0 0 0 3px var(--pkg-accent-soft);
}
.pkg-option__radio {
	width: 18px; height: 18px; margin: 0;
	accent-color: var(--pkg-accent);
}
.pkg-option__img {
	position: relative;
	width: 84px; height: 60px;
	display: flex; align-items: center; justify-content: center;
	background: #f1f3f5; border-radius: .5rem;
	overflow: visible;
}
.pkg-option__img > img { max-width: 100%; max-height: 100%; height: auto; width: auto; margin: 0; border-radius: .375rem; }
.pkg-option__zoom {
	position: absolute;
	left: calc(100% + 12px); top: 50%;
	transform: translateY(-50%);
	width: 320px; height: 320px;
	background: #fff;
	border: 1px solid var(--pkg-border);
	border-radius: .625rem;
	box-shadow: 0 12px 32px rgba(16,24,40,.18);
	padding: .5rem;
	display: none;
	align-items: center; justify-content: center;
	z-index: 50;
}
.pkg-option__zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; }
.pkg-option__img:hover .pkg-option__zoom { display: flex; }
@media (hover: none) { .pkg-option__zoom { display: none !important; } }
@media (max-width: 640px) { .pkg-option__zoom { display: none !important; } }
.pkg-option__name { font-weight: 600; font-size: .9375rem; color: var(--pkg-ink); margin: 0; line-height: 1.25; }
.pkg-option__sku  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--pkg-muted); margin: .125rem 0 0; }
.pkg-option__price { font-weight: 700; font-size: 1.0625rem; color: var(--pkg-ink); white-space: nowrap; }

.pkg-option__text { min-width: 0; }
.pkg-option__desc-toggle {
	background: none; border: 0; padding: .125rem 0; margin-top: .25rem;
	color: var(--pkg-muted); font-size: .75rem; font-weight: 600;
	cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
	text-decoration: underline;
	text-decoration-color: var(--pkg-border);
	text-underline-offset: 2px;
}
.pkg-option__desc-toggle:hover {
	color: var(--pkg-accent);
	text-decoration-color: var(--pkg-accent);
}
.pkg-option__desc-toggle-icon { font-size: .625rem; display: inline-block; }
/* Description text lives in the DOM as a hidden data carrier — its content
   is read by the modal opener and the Create PDF flow. Never rendered inline. */
.pkg-option__desc { display: none !important; }

/* ---- Description modal ---- */
.pkg-desc-modal {
	position: fixed; inset: 0;
	z-index: 70;
	display: none;
	align-items: center; justify-content: center;
	padding: 1rem;
}
.pkg-desc-modal.is-open { display: flex; }
.pkg-desc-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(16, 24, 40, .55);
}
.pkg-desc-modal__panel {
	position: relative;
	background: #fff;
	border-radius: .75rem;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	display: flex; flex-direction: column;
	box-shadow: 0 24px 48px rgba(16, 24, 40, .28);
	overflow: hidden;
}
.pkg-desc-modal__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--pkg-border);
}
.pkg-desc-modal__titlewrap { min-width: 0; }
.pkg-desc-modal__group {
	font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
	font-weight: 700; color: var(--pkg-muted);
}
.pkg-desc-modal__title {
	margin: .125rem 0 .125rem;
	font-size: 1.125rem; font-weight: 700; color: var(--pkg-ink);
	line-height: 1.25;
}
.pkg-desc-modal__sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem; color: var(--pkg-muted);
}
.pkg-desc-modal__close {
	flex: 0 0 auto;
	width: 32px; height: 32px; border-radius: 50%;
	background: #f1f3f5; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.125rem; color: var(--pkg-muted);
}
.pkg-desc-modal__close:hover { background: #e6e8ec; color: var(--pkg-ink); }
.pkg-desc-modal__body {
	padding: 1rem 1.25rem;
	overflow-y: auto;
	font-size: .9rem; color: var(--pkg-ink); line-height: 1.55;
	-webkit-overflow-scrolling: touch;
}
.pkg-desc-modal__body p { margin: 0 0 .75rem; }
.pkg-desc-modal__body p:last-child { margin-bottom: 0; }
.pkg-desc-modal__foot {
	padding: .75rem 1.25rem;
	border-top: 1px solid var(--pkg-border);
	display: flex; justify-content: flex-end;
}

.pkg-option[data-inactive="1"] {
	cursor: not-allowed;
	background: #fafbfc;
	opacity: .7;
}
.pkg-option[data-inactive="1"]:hover { border-color: var(--pkg-border); box-shadow: none; }
.pkg-option[data-inactive="1"] .pkg-option__name { color: var(--pkg-muted); }
.pkg-option[data-inactive="1"] .pkg-option__price { color: var(--pkg-muted); }
.pkg-option[data-inactive="1"] img { filter: grayscale(1); }
.pkg-option__badge {
	display: inline-block;
	margin-top: .25rem;
	padding: .125rem .5rem;
	font-size: .6875rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--pkg-muted);
	background: #eef0f3;
	border-radius: 999px;
}

/* ---- Summary rail ---- */
.pkg-summary { display: none; }
@media (min-width: 992px) {
	.pkg-summary { display: block; position: sticky; top: 80px; align-self: start; }
}
.pkg-summary__head {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 1rem 1.25rem .5rem;
}
.pkg-summary__title { font-weight: 700; font-size: 1rem; margin: 0; }
.pkg-summary__count { color: var(--pkg-muted); font-size: .8125rem; }
.pkg-summary__line {
	display: flex; align-items: center; gap: .5rem;
	padding: .5rem 1.25rem;
	border: 0; border-top: 1px solid var(--pkg-border);
	background: transparent; width: 100%; text-align: left;
	cursor: pointer; color: inherit; font: inherit;
	min-width: 0;
}
.pkg-summary__line:hover { background: #fafbfc; }
.pkg-summary__icon { flex: 0 0 18px; color: var(--pkg-muted); font-size: .8125rem; }
.pkg-summary__text {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 1px;
	font-size: .8125rem;
}
.pkg-summary__group {
	display: block;
	color: var(--pkg-muted); font-size: .68rem; text-transform: uppercase;
	letter-spacing: .06em; font-weight: 700;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkg-summary__product {
	display: block;
	color: var(--pkg-ink); font-weight: 500;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkg-summary__price { flex: 0 0 auto; font-weight: 600; font-size: .8125rem; }
.pkg-summary__line[data-state="skipped"] .pkg-summary__product { color: var(--pkg-faint); font-style: italic; }
.pkg-summary__line[data-state="current"] { background: var(--pkg-accent-soft); }
.pkg-summary__line[data-state="current"] .pkg-summary__group { color: var(--pkg-accent); }
.pkg-summary__running {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: .5rem 1.25rem;
	background: var(--pkg-accent-soft);
	border-bottom: 1px solid var(--pkg-border);
	font-size: .8125rem;
}
.pkg-summary__running-label { color: var(--pkg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.pkg-summary__running-amount { font-weight: 700; color: var(--pkg-ink); font-size: .9375rem; }
.pkg-summary__empty {
	padding: .875rem 1.25rem;
	color: var(--pkg-faint);
	font-size: .8125rem; font-style: italic;
	border-top: 1px solid var(--pkg-border);
}
.pkg-summary__total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 1rem 1.25rem; border-top: 1px solid var(--pkg-border);
}
.pkg-summary__total-amount { font-size: 1.25rem; font-weight: 700; }

/* ---- Nav row ---- */
.pkg-nav {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--pkg-border);
}
.pkg-nav__hint { color: var(--pkg-muted); font-size: .8125rem; display:none;}
.pkg-btn {
	display: inline-flex; align-items: center; gap: .375rem;
	padding: .5rem 1rem; border-radius: .5rem;
	font-size: .9375rem; font-weight: 600;
	border: 1px solid var(--pkg-border);
	background: #fff; color: var(--pkg-ink);
	cursor: pointer;
}
.pkg-btn:hover { border-color: #c9cfd8; }
.pkg-btn--primary {
	background: var(--pkg-accent); color: #fff; border-color: var(--pkg-accent);
}
.pkg-btn--primary:hover { filter: brightness(.95); }
.pkg-btn--ghost {
	background: transparent; border-color: transparent; color: var(--pkg-muted);
}
.pkg-btn--ghost:hover { background: #f1f3f5; color: var(--pkg-ink); border-color: var(--pkg-border); }
.pkg-btn[data-pkg-action="next-required"] { border-color: var(--pkg-border); }
.pkg-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pkg-nav__group { display: flex; gap: .5rem; align-items: center; }
.pkg-nav--top {
	border-top: 0;
	border-bottom: 1px solid var(--pkg-border);
	padding: .625rem 0 .875rem;
	margin-bottom: 1rem;
}
.pkg-nav--top .pkg-btn { padding: .375rem .75rem; font-size: .875rem; }

/* ---- Review ---- */
.pkg-review-row {
	display: grid;
	grid-template-columns: 72px 1fr auto auto;
	gap: 1rem; align-items: center;
	padding: 1rem 1.125rem;
	border-top: 1px solid var(--pkg-border);
}
.pkg-review-row:first-of-type { border-top: 0; }
.pkg-review-row__img {
	width: 72px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: #f1f3f5; border-radius: .5rem;
	color: var(--pkg-faint);
}
.pkg-review-row__img img { max-width: 100%; max-height: 100%; }
.pkg-review-row__group { color: var(--pkg-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pkg-review-row__name { font-weight: 600; }
.pkg-review-row__name--missing { color: #b45309; }
.pkg-review-row__sku { font-family: ui-monospace, monospace; font-size: .75rem; color: var(--pkg-muted); }
.pkg-review-row__price { font-weight: 700; }
.pkg-review-row__edit { background: none; border: 0; color: var(--pkg-accent); font-size: .8125rem; cursor: pointer; padding: .25rem .5rem; }
.pkg-review-row__edit:hover { text-decoration: underline; }
.pkg-review-total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 1.125rem 1.5rem;
	border-top: 2px solid var(--pkg-ink);
	font-size: 1.125rem; font-weight: 700;
}
.pkg-review-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: .75rem;
	/*padding: 1rem 1.5rem 1.5rem;*/
	padding: 0;
}

/* ---- Mobile bar ---- */
.pkg-mbar { display: none !important; }
.pkg-mobile-subtotal {
	display: none;
	justify-content: space-between; align-items: baseline;
	padding: .625rem 1rem;
	background: var(--pkg-accent-soft);
	border-bottom: 1px solid var(--pkg-border);
	/*border-top-left-radius: .75rem;
	border-top-right-radius: .75rem;*/
	font-size: .8125rem;
}
.pkg-mobile-subtotal__label { color: var(--pkg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.pkg-mobile-subtotal__amount { font-weight: 700; color: var(--pkg-ink); font-size: 1rem; }
.pkg-mobile-subtotal__count { color: var(--pkg-muted); margin-left: .375rem; font-size: .72rem; }
@media (max-width: 991.98px) { .pkg-mobile-subtotal { display: flex; } }
.pkg-mbar__total { font-weight: 700; }
.pkg-mbar__count { color: var(--pkg-muted); font-size: .8125rem; margin-left: .375rem; }
.pkg-mbar__nav { margin-left: auto; display: flex; gap: .5rem; }
@media (min-width: 992px) {
	.pkg-mbar { display: none; }
	body.has-pkg-wizard { padding-bottom: 0; }
}
@media (max-width: 991.98px) {
	.pkg-wizard { padding-bottom: 0; }
}

.pkg-start-over {
	background: none; border: 0; padding: 3px 0;
	color: var(--pkg-muted); font-size: .8125rem;
	cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;

	padding: .5rem 1rem;
   border-radius: .5rem;
   font-size: .9375rem;
   font-weight: 600;
   border: 1px solid var(--pkg-border);
}
.pkg-start-over:hover { /*color: var(--pkg-accent); text-decoration: underline;*/border-color: #c9cfd8;background-color:#f1f3f5; }

/* =========================================================
   Responsive — phone + small-tablet refinements
   ========================================================= */

/* Tablet & below: pull the shell in, tighten the rail, hide the
   desktop nav row (mobile bar takes over), reserve space at the
   bottom for the fixed bar. */
@media (max-width: 991.98px) {
	.pkg-shell { padding: 0; }
	.pkg-rail-wrap { padding: .625rem 0; margin-bottom: 1rem; }
	.pkg-step { padding: 1.25rem 1rem; }
	.pkg-step__title { font-size: 1.25rem; }
	.pkg-wizard { padding-bottom: 0; }
	/* Inline nav stays visible on mobile; tighten its padding. */
	.pkg-nav { padding: .875rem 1rem; gap: .5rem; }
}

/* Phone: stacked option rows, compact rail chips, single-row
   mobile bar that doubles as a summary toggle. */
@media (max-width: 640px) {
	#package_options { padding-left: .75rem; padding-right: .75rem; padding-top: 1.5rem; }
	.pkg-shell > div:first-child h2 { font-size: 1.375rem !important; line-height: 1.2; }
	.pkg-shell > div:first-child p { font-size: .875rem; }
	.pkg-step { padding: 1rem .875rem; }
	.pkg-step__title { font-size: 1.125rem; }
	.pkg-eyebrow { font-size: .6875rem; }

	/* Inline nav on phone: arrows only for Back/Next, just "Skip" for skip,
	   no hint (the affordance is visible in the buttons themselves). */
	.pkg-nav__label,
	.pkg-nav__label-extra,
	.pkg-nav__hint { display: none; }
	.pkg-nav { padding: .75rem .875rem; }
	.pkg-nav .pkg-btn { padding: .5rem .75rem; }

	/* Option row: image + radio rowspan left, name top-right, price below. */
	.pkg-option {
		grid-template-columns: 22px 56px 1fr;
		grid-template-rows: auto auto;
		column-gap: .625rem;
		row-gap: .125rem;
		padding: .625rem .75rem;
		align-items: center;
	}
	.pkg-option__radio { grid-row: 1 / span 2; align-self: center; }
	.pkg-option__img   { grid-row: 1 / span 2; width: 56px; height: 56px; align-self: center; }
	.pkg-option__name  { font-size: .875rem; line-height: 1.25; }
	.pkg-option__sku   { font-size: .6875rem; }
	.pkg-option__price { grid-column: 3; grid-row: 2; justify-self: start; font-size: 1rem; margin-top: .125rem; }

	/* Rail chips: tighter and truncate non-current labels. */
	.pkg-rail__chip { font-size: .8125rem; padding: .375rem .625rem; gap: .375rem; }
	.pkg-rail__num  { width: 18px; height: 18px; font-size: .6875rem; }
	.pkg-rail__chip > span:nth-child(2) {
		max-width: 100px;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.pkg-rail__chip[data-state="current"] > span:nth-child(2) { max-width: 180px; }

	/* Mobile bar: tighter; tap area is the total/count button. */
	.pkg-mbar { padding: .5rem .625rem; gap: .5rem; }
	.pkg-mbar__total { font-size: .9375rem; }
	.pkg-mbar__count { font-size: .75rem; }
	.pkg-mbar .pkg-btn { padding: .375rem .625rem; font-size: .8125rem; }
	.pkg-mbar__nav { gap: .25rem; }

	/* Review rows stack on phone. */
	.pkg-review-row {
		grid-template-columns: 64px 1fr auto;
		grid-template-rows: auto auto;
		column-gap: .75rem; row-gap: .25rem;
		padding: .75rem .875rem;
		align-items: center;
	}
	.pkg-review-row__img   { grid-row: 1 / span 2; width: 64px; height: 48px; }
	.pkg-review-row__price { grid-column: 2; grid-row: 2; justify-self: start; font-size: .9375rem; }
	.pkg-review-row__edit  { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
	.pkg-review-total      { padding: 1rem .875rem; font-size: 1rem; }
	.pkg-review-actions    { flex-direction: column-reverse; align-items: stretch; gap: .5rem; padding: 1rem .875rem 1.25rem; }
	.pkg-review-actions > .pkg-btn,
	.pkg-review-actions > div { width: 100%; max-width: none !important; justify-content: center; }
}

/* Very narrow (≤ 380px): hide the secondary count text, shrink buttons. */
@media (max-width: 380px) {
	.pkg-mbar__count { display: none; }
	.pkg-mbar__total { font-size: .875rem; }
	.pkg-mbar .pkg-btn { padding: .375rem .5rem; font-size: .75rem; }
	.pkg-sheet-toggle__icon { display: none; }
}

/* =========================================================
   Mobile summary sheet (slides up from the bottom bar)
   ========================================================= */
.pkg-sheet-toggle {
	display: inline-flex; align-items: center; gap: .375rem;
	background: none; border: 0; padding: 0;
	font: inherit; color: inherit; text-align: left;
	cursor: pointer;
}
.pkg-sheet-toggle:hover { color: var(--pkg-accent); }
.pkg-sheet-toggle__icon {
	color: var(--pkg-muted); font-size: .75rem;
	transition: transform .2s ease;
}
.pkg-sheet-toggle[aria-expanded="true"] .pkg-sheet-toggle__icon { transform: rotate(180deg); }

.pkg-sheet-backdrop {
	position: fixed; inset: 0;
	z-index: 55;
	background: rgba(16,24,40,.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.pkg-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.pkg-sheet {
	position: fixed; left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: #fff;
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 -8px 32px rgba(16,24,40,.18);
	max-height: 75vh;
	display: flex; flex-direction: column;
	transform: translateY(100%);
	transition: transform .25s ease;
}
.pkg-sheet.is-open { transform: translateY(0); }
.pkg-sheet__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: .875rem 1.25rem;
	border-bottom: 1px solid var(--pkg-border);
}
.pkg-sheet__title { font-weight: 700; font-size: 1rem; margin: 0; }
.pkg-sheet__sub   { color: var(--pkg-muted); font-size: .75rem; margin-top: .125rem; }
.pkg-sheet__close {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: #f1f3f5; border: 0;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 1.125rem; color: var(--pkg-muted);
}
.pkg-sheet__close:hover { background: #e6e8ec; color: var(--pkg-ink); }
.pkg-sheet__body  { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.pkg-sheet__total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--pkg-border);
	background: #fafbfc;
}
.pkg-sheet__total-amount { font-size: 1.125rem; font-weight: 700; }

/* Desktop hides the sheet and its backdrop entirely. */
@media (min-width: 992px) {
	.pkg-sheet, .pkg-sheet-backdrop { display: none !important; }
}

.package_description_toggle {
	display:none;
	margin-bottom:5px;
}
.package_description {
	display:block;
	padding: 10px;
	max-height: 300px;
	overflow-y: auto;
	border-left: 1px solid #e6e8ec;
}
.package_description_symbol {
	display:none;
	font-size: 12px;
	vertical-align: 3px;
}
@media (max-width: 766px) {
	.main_image_krecom_container {
		padding-right: 0 !important;
	}
}
@media (max-width: 766px) {
	.package_description_toggle {
		margin-top:15px;
	}
	.main_image_krecom_container {
		padding-right: 0 !important;
	}
}
@media (max-width: 766px) {
	.package_description_toggle {
		display:block;
	}
	.package_description {
		display: none;
	}
	.package_description.show_description {
		display: block;
	}
	.package_description_symbol {
		display:inline;
	}
	.package_description_symbol.hide_symbol {
		display:none;
	}
}

/* =========================================================
   Extracted inline styles (previously style="" attributes in
   the markup). Class names map 1:1 to the elements they came from.
   ========================================================= */

/* Hidden by default (was style="display:none;") — left product
   column and the (currently disabled) progress rail wrapper. */
.pkg-hide { display: none; }

/* Product name heading (was style="color:#fff;"). */
#js-product-name { color: #fff; }

/* Product header row above the description (was border-bottom + margin). */
.pkg-prod-header { border-bottom: 1px solid #e6e8ec; margin-bottom: 15px; }

/* Right-aligned wrapper around the "Start over" button. */
.pkg-text-right { text-align: right; }

/* "Make sure everything looks right…" review intro (was margin-bottom:0). */
.pkg-mb-0 { margin-bottom: 0; }

/* "Get Expert Advice" pill link (was font-size/padding/border-radius). */
.pkg-expert-advice { font-size: 0.8125rem; padding: 2px 8px; border-radius: 20px; }
/* svg.* raises specificity above the Tailwind .h-5 utility so the icon keeps
   its original 16px height (was an inline style="height:16px"). */
svg.pkg-expert-advice__icon { height: 16px; }