/* Build a System configurator — Variant B (long-form), aligned to mockup-configurator-b.html.
   Widget container should be FULL WIDTH (sections are full-bleed; inner content is centered). */
.pt-cfg-app {
	--red: #cc0000; --red-bright: #e60000; --red-a11y: #ff4444;
	--ink: #111; --black: #1a1a1a; --dark: #222; --gray: #333; --mid: #666; --light: #999;
	--border: #e5e5e5; --off: #f5f5f5; --off-light: #fafafa;
	font-family: Inter, system-ui, sans-serif; color: var(--gray);
}
.pt-cfg-app *, .pt-cfg-app *::before, .pt-cfg-app *::after { box-sizing: border-box; }

/* beat the site-wide button:hover so widget controls keep the brand treatment + readable text */
.pt-cfg-app .pt-cfg-tile:hover, .pt-cfg-app .pt-cfg-card:hover, .pt-cfg-app .pt-cfg-mat:hover, .pt-cfg-app .pt-cfg-hp__item:hover { background: #fff !important; border-color: var(--red) !important; color: var(--ink) !important; }
.pt-cfg-app .is-active.pt-cfg-tile, .pt-cfg-app .is-active.pt-cfg-card, .pt-cfg-app .is-active.pt-cfg-mat, .pt-cfg-app .is-active.pt-cfg-hp__item { background: #fff5f5 !important; border-color: var(--red) !important; }
.pt-cfg-app .pt-cfg-bedsize__btn:hover { background: #fff !important; border-color: var(--red) !important; color: var(--ink) !important; }
.pt-cfg-app .pt-cfg-bedsize__btn.is-active { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.pt-cfg-app .pt-cfg-card__btn:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.pt-cfg-app .is-active.pt-cfg-card .pt-cfg-card__btn { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.pt-cfg-app .pt-cfg-recap__cta:hover:not(:disabled) { background: var(--red-bright) !important; color: #fff !important; }
.pt-cfg-app [hidden] { display: none !important; }
.pt-cfg-app__loading, .pt-cfg-loading { color: var(--mid); padding: 24px 16px; text-align: center; }
.pt-cfg-error, .pt-cfg-empty { color: var(--red); padding: 16px; }
.pt-cfg-inner { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---- numbered section ---- */
.pt-cfg-step { padding: 48px 0; border-bottom: 1px solid var(--border); background: #fff; }
.pt-cfg-step[data-step="2"] { background: var(--off-light); }
.pt-cfg-step__head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.pt-cfg-step__num { font-size: 56px; font-weight: 900; line-height: .9; color: var(--red); flex: 0 0 auto; }
.pt-cfg-step__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--mid); margin: 4px 0 4px; }
.pt-cfg-step__title { font-size: 28px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; line-height: 1.05; }
.pt-cfg-step__desc { color: var(--gray); line-height: 1.6; margin: 0; max-width: 60ch; }

/* ---- generic tile ---- */
.pt-cfg-tile, .pt-cfg-card, .pt-cfg-mat, .pt-cfg-hp__item {
	background: #fff; border: 2px solid var(--border); cursor: pointer; font: inherit; color: var(--ink);
	text-align: left; padding: 0; transition: border-color .18s, box-shadow .18s, background .18s; overflow: hidden;
	/* These cards are <button>s, and a global sheet applies `white-space: nowrap` +
	   `display: inline-block` to every button. Both break card layouts, so reset them here. */
	white-space: normal; display: block; width: 100%;
}
.pt-cfg-tile:hover, .pt-cfg-card:hover, .pt-cfg-mat:hover, .pt-cfg-hp__item:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.is-active.pt-cfg-tile, .is-active.pt-cfg-card, .is-active.pt-cfg-mat, .is-active.pt-cfg-hp__item { border-color: var(--red); background: #fff5f5; }
.pt-cfg-mat:disabled, .pt-cfg-card:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pt-cfg-tile__media { display: block; aspect-ratio: 16/9; background: var(--off-light) center/cover no-repeat; }
.pt-cfg-card__media, .pt-cfg-mat__media { display: block; background: var(--off-light) center/contain no-repeat; }
.pt-cfg-card__media { aspect-ratio: 4/3; background-size: contain; }
.pt-cfg-mat__media { aspect-ratio: 4 / 3; }

/* ---- step 1: system tiles ---- */
.pt-cfg-systems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
.pt-cfg-systems .pt-cfg-tile__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.pt-cfg-tile__sel, .pt-cfg-tile__name, .pt-cfg-tile__desc { display: block; }
.pt-cfg-tile__sel { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; color: var(--red); margin: 0 0 3px; visibility: hidden; }
.is-active .pt-cfg-tile__sel { visibility: visible; }
.pt-cfg-tile__name { font-size: 18px; font-weight: 900; text-transform: uppercase; color: var(--ink); margin: 0 0 3px; }
.pt-cfg-tile__desc { font-size: 13px; color: var(--gray); margin: 0; }
.pt-cfg-tile__check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: transparent; }
.is-active .pt-cfg-tile__check { background: var(--red); border-color: var(--red); color: #fff; }
.pt-cfg-tile__check svg { width: 14px; height: 14px; }

/* ---- bed size + sliders panel ---- */
.pt-cfg-dims { background: var(--off-light); padding: 28px; }
.pt-cfg-dims__label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.pt-cfg-bedsize { display: flex; gap: 12px; margin-bottom: 24px; }
.pt-cfg-bedsize__btn { flex: 1; padding: 12px; text-align: center; border: 2px solid var(--border); background: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); cursor: pointer; transition: all .15s; }
.pt-cfg-bedsize__btn.is-active { border-color: var(--red); background: var(--red); color: #fff; }
.pt-cfg-sliders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pt-cfg-slider__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pt-cfg-slider__lab { font-size: 13px; font-weight: 700; color: var(--ink); }
.pt-cfg-slider__val { font-size: 18px; font-weight: 900; color: var(--red); }
.pt-cfg-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--border); outline: none; }
.pt-cfg-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.pt-cfg-slider input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 2px solid #fff; cursor: pointer; }
.pt-cfg-slider__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--mid); margin-top: 4px; }

/* ---- step 2: HP picker + housing cards ---- */
.pt-cfg-hp-panel { background: #fff; border: 1px solid var(--border); padding: 28px; margin-bottom: 24px; }
.pt-cfg-hp-panel__label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.pt-cfg-hp-panel__hint { font-size: 12px; color: var(--mid); margin: 0 0 18px; }
/* minmax(0,1fr), not 1fr: a plain 1fr track won't shrink below its content's min-content
   width, so the longer position names ("Mounted to cab shield above siderails") pushed past
   the card and were clipped by the shared overflow:hidden. */
.pt-cfg-hp { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
/* A global sheet sets `white-space: nowrap` on every [type=button]/button, which stops the
   position name wrapping no matter how narrow the track is. Override it here rather than
   globally — other buttons on the site may rely on that rule. */
/* Flex column so the note sits on the baseline of every card — the names wrap to different
   line counts, which otherwise leaves the "+4 FT" line at ragged heights across the row. */
.pt-cfg-app .pt-cfg-hp__item { padding: 0 0 12px; text-align: center; min-width: 0; white-space: normal !important; display: flex; flex-direction: column; height: 100%; }
.pt-cfg-hp__figure { display: block; aspect-ratio: 4 / 3; background: var(--off-light); overflow: hidden; }
.pt-cfg-hp__img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Scoped to .pt-cfg-app so these beat `.elementor-kit-28822 p { margin-block-end: 16px }`
   (specificity 0,1,1) — that rule was adding 16px under every <p> in the card, which read
   as stray padding around the note. Logical margins reset explicitly for the same reason. */
.pt-cfg-app .pt-cfg-hp__letter { font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--ink); margin: 10px 0 0; margin-block-end: 0; }
.pt-cfg-app .is-active .pt-cfg-hp__letter { color: var(--red); }
.pt-cfg-app .pt-cfg-hp__name { font-size: 11px; line-height: 1.35; color: var(--ink); margin: 5px 8px 0; margin-block-end: 0; overflow-wrap: break-word; hyphens: auto; }
.pt-cfg-app .is-active .pt-cfg-hp__name { color: var(--red); }
.pt-cfg-app .pt-cfg-hp__note { font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); margin: 7px 0 0; margin-block-end: 0; margin-top: auto; padding-top: 7px; }
.pt-cfg-app .is-active .pt-cfg-hp__note { color: var(--red); font-weight: 700; }
.pt-cfg-housings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-cfg-card { position: relative; }
.pt-cfg-card__badge { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--red); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 4px 8px; display: none; }
.is-active.pt-cfg-card .pt-cfg-card__badge { display: block; }
.pt-cfg-card__body { padding: 16px; }
.pt-cfg-card__name { font-size: 14px; font-weight: 900; text-transform: uppercase; color: var(--ink); margin: 0 0 4px; }
.pt-cfg-card__sku { font-size: 11px; color: var(--mid); margin: 0 0 10px; }
.pt-cfg-card__price { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 12px; }
.pt-cfg-card__price .woocommerce-Price-amount { font-weight: 900; }
.pt-cfg-card__btn { display: block; width: 100%; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 10px; }
.is-active.pt-cfg-card .pt-cfg-card__btn { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- step 3: material tiles ---- */
.pt-cfg-materials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-cfg-mat { display: block; }
.pt-cfg-mat__body { display: block; padding: 12px; }
.pt-cfg-mat__sel, .pt-cfg-mat__name, .pt-cfg-mat__meta, .pt-cfg-mat__price { display: block; }
.pt-cfg-mat__sel { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; color: var(--red); margin: 0 0 3px; visibility: hidden; }
.is-active .pt-cfg-mat__sel { visibility: visible; }
.pt-cfg-mat__name { font-size: 14px; font-weight: 900; text-transform: uppercase; color: var(--ink); margin: 0 0 2px; }
.pt-cfg-app .pt-cfg-mat__meta { font-size: 11px; color: var(--mid); margin: 0 0 6px; margin-block-end: 6px; }
/* Specs from Configurators → Tarp materials: weight · waterproof, then typical loads. */
.pt-cfg-app .pt-cfg-mat__specs { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin: 0 0 3px; margin-block-end: 3px; }
.pt-cfg-app .pt-cfg-mat__use { display: block; font-size: 11px; line-height: 1.35; color: var(--mid); margin: 0 0 8px; margin-block-end: 8px; }
.pt-cfg-mat__price { font-size: 16px; font-weight: 900; color: var(--ink); }
/* A <button> centres its content box vertically. Cards in one row are all the height of the
   tallest, so a card whose coverage line wraps drags every line in *its neighbours* down by half
   the difference — the row stops reading as a row. Lay the card out as a column instead and pin
   the price to the bottom edge. */
.pt-cfg-app .pt-cfg-mat { display: flex; flex-direction: column; }
.pt-cfg-app .pt-cfg-mat__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.pt-cfg-app .pt-cfg-mat__price { margin-top: auto; }

/* ---- final summary band ---- */
.pt-cfg-recap { background: var(--ink); border-top: 4px solid var(--red); border-bottom: 4px solid var(--red); padding: 48px 0; }
.pt-cfg-recap__top { text-align: center; margin-bottom: 28px; }
.pt-cfg-recap__bar { width: 48px; height: 4px; background: var(--red); margin: 0 auto 14px; }
.pt-cfg-recap__h { font-size: 28px; font-weight: 900; text-transform: uppercase; color: #fff; margin: 0 0 6px; }
.pt-cfg-recap__sub-intro { color: var(--light); font-size: 14px; margin: 0; }
.pt-cfg-recap__panel { background: var(--dark); border: 1px solid var(--gray); margin-bottom: 24px; }
.pt-cfg-recap__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.pt-cfg-recap__cell { padding: 20px; border-left: 1px solid var(--gray); }
.pt-cfg-recap__cell:first-child { border-left: 0; }
.pt-cfg-recap__cell-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--red-a11y); font-weight: 700; margin: 0 0 8px; }
.pt-cfg-recap__cell-main { color: #fff; font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.pt-cfg-recap__cell-sub { color: var(--light); font-size: 12px; margin: 0; }
.pt-cfg-recap__cell-sub .woocommerce-Price-amount { color: #fff; }
.pt-cfg-recap__foot { background: var(--ink); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gray); }
.pt-cfg-recap__foot-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--light); font-weight: 700; }
.pt-cfg-recap__total { font-size: 30px; font-weight: 900; color: #fff; }
.pt-cfg-recap__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pt-cfg-recap__cta { background: var(--red); color: #fff; border: 0; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .1em; padding: 16px 32px; cursor: pointer; }
.pt-cfg-recap__cta:disabled { opacity: .45; cursor: not-allowed; }
.pt-cfg-recap__cta:not(:disabled):hover { background: var(--red-bright); }
.pt-cfg-recap__hint { text-align: center; color: var(--light); font-size: 12px; margin: 18px 0 0; }
.pt-cfg-recap__hint a { color: var(--red-a11y); }

/* ---- floating mobile mini-bar ---- */
.pt-cfg-floating { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(17,17,17,.96); border-top: 2px solid var(--red); display: none; }
.pt-cfg-floating__inner { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-cfg-floating__count { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--red-a11y); font-weight: 700; margin: 0; }
.pt-cfg-floating__total { color: #fff; font-size: 14px; font-weight: 700; margin: 0; }
.pt-cfg-floating__cta { background: var(--red); color: #fff; border: 0; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; padding: 10px 16px; cursor: pointer; }

/* ---- review-order page (server-rendered shortcode) ---- */
.pt-review { font-family: Inter, system-ui, sans-serif; --red:#cc0000; --red-bright:#e60000; --ink:#111; --border:#e5e5e5; --mid:#666; --light:#999; --dark:#222; --off-light:#fafafa; }
.pt-review *, .pt-review *::before, .pt-review *::after { box-sizing: border-box; }
.pt-review__sec { padding: 44px 0; border-bottom: 1px solid var(--border); background: #fff; }
.pt-review__sec[data-step="2"] { background: var(--off-light); }
.pt-review__inner { display: flex; align-items: flex-start; gap: 24px; }
.pt-review__num { font-size: 52px; font-weight: 900; line-height: .9; color: var(--red); flex: 0 0 auto; }
.pt-review__body { flex: 1; min-width: 0; }
.pt-review__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pt-review__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--mid); margin: 0 0 4px; }
.pt-review__title { font-size: 26px; font-weight: 900; text-transform: uppercase; color: var(--ink); margin: 0; line-height: 1.05; }
.pt-review__note { font-size: 13px; color: var(--mid); margin: 6px 0 0; }
.pt-review__head-right { text-align: right; }
.pt-review__price { font-size: 22px; font-weight: 900; color: var(--ink); margin: 0; }
.pt-review__edit { color: var(--red); font-weight: 700; text-decoration: none; font-size: 14px; display: inline-block; margin-top: 4px; }
.pt-review__edit:hover { text-decoration: underline; }
.pt-review__detail { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.pt-review__media { aspect-ratio: 4 / 3; background: #fff center/contain no-repeat; border: 1px solid var(--border); }
.pt-review__media--cover { background-size: cover; border: 0; }
.pt-review__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0; }
.pt-review__specs > div { display: flex; flex-direction: column; }
.pt-review__specs dt { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; color: var(--mid); }
.pt-review__specs dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); font-size: 14px; }
.pt-review__band { background: var(--ink); border-top: 4px solid var(--red); border-bottom: 4px solid var(--red); padding: 44px 0; color: #fff; }
.pt-review__band-h { font-size: 24px; font-weight: 900; text-transform: uppercase; color: #fff; margin: 0 0 20px; }
.pt-review__lines { margin: 0 0 6px; }
.pt-review__lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--dark); }
.pt-review__lines dt { color: rgba(255,255,255,.7); margin: 0; } .pt-review__lines dd { margin: 0; color: #fff; font-weight: 700; }
.pt-review__lines dd .woocommerce-Price-amount { color: #fff; }
.pt-review__grand { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 22px; }
.pt-review__sub { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--light); }
.pt-review__total { font-size: 32px; font-weight: 900; color: #fff; } .pt-review__total .woocommerce-Price-amount { color: #fff; }
.pt-review__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pt-review__cta { background: var(--red); color: #fff !important; padding: 16px 32px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; display: inline-block; }
.pt-review__cta:hover { background: var(--red-bright); color: #fff !important; }
.pt-review__back { color: rgba(255,255,255,.85); text-decoration: underline; }
.pt-review--empty { text-align: center; padding: 48px 0; }

@media (max-width: 768px) {
	.pt-cfg-systems, .pt-cfg-sliders, .pt-cfg-housings, .pt-cfg-recap__grid { grid-template-columns: 1fr; }
	.pt-cfg-materials { grid-template-columns: repeat(2, 1fr); }
	.pt-cfg-hp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pt-cfg-recap__cell { border-left: 0; border-top: 1px solid var(--gray); }
	.pt-cfg-recap__cell:first-child { border-top: 0; }
	.pt-cfg-step__num, .pt-review__num { font-size: 40px; }
	.pt-cfg-floating { display: block; }
	.pt-review__inner { flex-direction: column; gap: 10px; }
	.pt-review__detail { grid-template-columns: 1fr; }
	.pt-review__specs { grid-template-columns: 1fr; }
}

/* "No stock tarp fits this setup" — shown when every material resolves unavailable, which
   happens on the catalogue's real gaps (automatic jumps 24ft -> 30ft, so 12ft and 28ft have
   nothing). Four cards reading "Unavailable" looked like a fault; this explains it instead. */
.pt-cfg-materials.is-empty { display: none; }
.pt-cfg-nomat {
	border: 1px solid var(--red);
	border-left-width: 4px;
	border-radius: 6px;
	padding: 18px 20px;
	background: #fff;
	margin: 0 0 8px;
}
.pt-cfg-nomat__title {
	margin: 0 0 6px;
	font: 700 16px/1.3 Inter, sans-serif;
	color: #111;
}
.pt-cfg-nomat__body {
	margin: 0 0 6px;
	font: 400 14px/1.6 Inter, sans-serif;
	color: #555;
}
.pt-cfg-nomat__body:last-child { margin-bottom: 0; }
.pt-cfg-nomat a { color: var(--red); font-weight: 700; }