/* Shed configurator UX (made-to-order product pages). Loaded only there, with configurator.js.

   ISOLATION (2026-10-05). Every control here lives under the root class .scr-cfg (added by configurator.js to the
   product form and to the "Your selection" panel). Hello Elementor's reset.css styles ALL buttons:
     button, [type="button"]             { color:#c36; border:1px solid #c36; padding:.5rem 1rem; white-space:nowrap; display:inline-block }
     button:hover, button:focus,
     [type="button"]:hover, [type="button"]:focus { background-color:#c36; color:#fff }   ← specificity (0,2,0)
   Single-class rules like .scr-size (0,1,0) lost to those state rules, which produced the magenta size hover, the
   magenta accordion header (focused after YITH's reload) and the magenta × in the panel. Rules for our buttons are
   therefore written as ".scr-cfg button.scr-x" (0,2,1): they set every property the theme sets, in every state, so the
   theme's hover/focus colours can never apply. No !important needed. Write new button rules the same way.

   Second leak found the same day: Elementor Pro's add-to-cart widget CSS
     :is(… .elementor-widget-wc-add-to-cart) form.cart button:where(:not(:first-child)) { margin-inline-start: var(--button-spacing,10px) }
   (specificity (0,4,3)) pushed every configurator button after the first 10px right (size grid rows misaligned,
   accordion headers offset). The neutral reset below is therefore anchored on the two root IDs that configurator.js
   sets (#scr-cfg-form on the product form, #scr-sum on the panel): (1,1,1) outranks any theme/widget rule. */

/* Neutral starting point for every configurator button (theme and widget rules neutralised). */
:is(#scr-cfg-form, #scr-sum) button:is(.scr-size, .scr-gh, .scr-step__btn, .scr-sum__bar, .scr-sum__rm, .scr-sum__fix, .scr-sum__go) {
	box-sizing: border-box; margin: 0; white-space: normal; text-transform: none; letter-spacing: normal;
	margin-inline: 0; text-decoration: none; box-shadow: none; font-family: inherit;
}

.scr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scr-orig[hidden] { display: none !important; }

/* ---------- Size buttons ---------- */
.scr-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; margin: .4rem 0 .2rem; }
.scr-cfg button.scr-size {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
	min-height: 52px; padding: .35rem .3rem; border: 1.5px solid var(--scr-line); border-radius: 8px;
	background: #fff; color: var(--scr-ink); font: inherit; line-height: 1.15; cursor: pointer;
	transition: border-color .12s, background-color .12s;
}
.scr-size__name { font-weight: 700; font-size: .98rem; }
.scr-size__price { font-size: .78rem; color: var(--scr-muted); }
.scr-size__price s { opacity: .8; }
/* States. "Selected" comes only from aria-checked (one source of truth, set by syncSizes). Order matters: selected is
   declared after hover so a hovered selected size stays red. */
.scr-cfg button.scr-size:hover { border-color: var(--scr-ink-2); background: var(--scr-cream); color: var(--scr-ink); }
.scr-cfg button.scr-size[aria-checked="true"] { border-color: var(--scr-red); background: var(--scr-red); color: #fff; }
.scr-cfg button.scr-size[aria-checked="true"] .scr-size__price { color: #fff; }
.scr-cfg button.scr-size[aria-disabled="true"] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
/* Keyboard focus: an outline, independent of hover/selected (a focused selected size keeps its red). */
.scr-cfg button:is(.scr-size, .scr-gh, .scr-step__btn, .scr-sum__bar, .scr-sum__rm, .scr-sum__fix, .scr-sum__go):focus { outline: none; }
.scr-cfg button:is(.scr-size, .scr-gh, .scr-step__btn, .scr-sum__bar, .scr-sum__rm, .scr-sum__fix, .scr-sum__go):focus-visible,
.scr-cfg .yith-wapo-option .label[role="radio"]:focus-visible {
	outline: 3px solid var(--scr-focus); outline-offset: 2px;
}
/* The child theme's grid is replaced by .scr-sizes */
body.scr .size-buttons-grid { display: none !important; }

/* Cart-quantity stepper next to "Add to cart" (child theme qty-stepper.js). Its .qty-stepper-btn rules (0,1,0) lost the
   same way to the theme reset (magenta text/border; magenta fill on focus). Same isolation; 44px targets. */
/* Scoped on form.variations_form.cart (in the HTML from the start), not the JS-added root ID: the child theme's script can
   create these buttons before our ID exists, which showed the theme's magenta for a moment. */
form.variations_form.cart button.qty-stepper-btn {
	transition: none; box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; border: 1.5px solid var(--scr-line);
	background: var(--scr-cream); color: var(--scr-ink); font-family: inherit; font-size: 22px; line-height: 1; white-space: normal;
}
form.variations_form.cart button.qty-stepper-btn:hover { background: var(--scr-cream-2); color: var(--scr-ink); }
form.variations_form.cart button.qty-stepper-btn:focus { outline: none; }
form.variations_form.cart button.qty-stepper-btn:focus-visible { outline: 3px solid var(--scr-focus); outline-offset: 2px; }
form.variations_form.cart button.qty-stepper-minus { border-radius: 8px 0 0 8px; }
form.variations_form.cart button.qty-stepper-plus { border-radius: 0 8px 8px 0; }
form.variations_form.cart div.quantity input.qty { min-height: 44px; }

/* ---------- Accordion headers ---------- */
body.scr .yith-wapo-addon .wapo-addon-title { margin: 0 !important; }
/* YITH puts the title in a flex row (.addon-header). A flex item defaults to min-width:auto, so a long one-line status
   made the h3 wider than the card. Let it shrink. */
.scr-cfg .yith-wapo-addon .addon-header > .wapo-addon-title { flex: 1 1 auto; min-width: 0; }
.scr-cfg button.scr-gh {
	display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; max-width: 100%; min-height: 44px;
	padding: .2rem 2rem .2rem 0; background: none; border: 0; border-radius: 0; color: inherit; text-align: left; cursor: pointer;
}
.scr-cfg button.scr-gh:hover .scr-gh__title { text-decoration: underline; text-underline-offset: 3px; }
.scr-gh__title { flex: 0 0 auto; max-width: 100%; font-family: var(--scr-display); font-weight: 800; font-size: 1.05rem; color: var(--scr-ink); }
.scr-gh__status {
	flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-family: var(--scr-font); font-size: .82rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
}
.scr-gh__status.is-opt { color: var(--scr-muted); background: var(--scr-cream); }
.scr-gh__status.is-req { color: #7a2e00; background: #fde9d9; }
.scr-gh__status.is-set { color: #1d5b2c; background: #e3f2e6; }
.scr-gh__status.is-set::before { content: "✓ "; }
body.scr .yith-wapo-addon.scr-has-choice { border-color: #9cc6a5 !important; }
body.scr .yith-wapo-addon.scr-invalid { border-color: #b3261e !important; box-shadow: 0 0 0 1px #b3261e; }

/* Selected option: clearer than a border tint */
body.scr .yith-wapo-option.selected { position: relative; }
body.scr .yith-wapo-addon-type-label .yith-wapo-option.selected .image::after,
body.scr .yith-wapo-addon-type-radio .yith-wapo-option.selected .image-container::after {
	content: "✓"; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--scr-red); color: #fff; font: 700 13px/22px var(--scr-font); text-align: center;
}
body.scr .yith-wapo-option .image-container, body.scr .yith-wapo-option .image { position: relative; }
body.scr .yith-wapo-option.selected .image img { outline: 3px solid var(--scr-red); outline-offset: -3px; }
/* Metal Roof swatches: YITH adds its own teal "selected" border + check badge (front.css, accent rgb(3,191,172)), so the
   selected tile showed two checks in two colours. Keep ours; turn YITH's off. Same selectors as YITH's plus .scr-cfg. */
.scr-cfg .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display { border-color: var(--scr-red); }
.scr-cfg .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display::after { content: none; }

/* YITH option tiles: presentation only (no option data changed).
   - The price / "Included" note sits inside the label as <small>; it went beside short names (Black, T111) and under
     longer ones (Light Brown). Always put it on its own line.
   - Pictures in pick-one groups came in different proportions (T111 smaller): same 4:3 frame for all.
   - Options with a long label (configurator.js adds .scr-opt--long, > 40 characters) take two grid columns instead of
     wrapping into a narrow tile ("No shingles, Metal Roof, price will be calculated…"). */
.scr-cfg .yith-wapo-addon .yith-wapo-option .yith-wapo-label .option-price { display: block; margin-top: .1rem; }
.scr-cfg .yith-wapo-addon-type-radio .yith-wapo-option .image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scr-cfg .yith-wapo-addon .options .yith-wapo-option.scr-opt--long { grid-column: span 2; }
.scr-cfg .yith-wapo-addon .options .yith-wapo-option.scr-opt--long .image-container { max-width: calc(50% - 5px); }
.scr-cfg .yith-wapo-addon-type-radio .yith-wapo-option .radio-button-container { display: flex; align-items: flex-start; gap: .4rem; }
.scr-cfg .yith-wapo-addon-type-radio .yith-wapo-option .radio-button-container .radiobutton { flex: none; margin-top: .2em; }

/* Messages */
.scr-err { margin: .4rem 0 .2rem; color: #b3261e; font-weight: 700; }
.scr-err::before { content: "! "; }
.scr-hint { margin: 0 0 .6rem; padding: .5rem .7rem; border-left: 4px solid var(--scr-tan); background: var(--scr-cream); font-size: .92rem; }
.scr-errsum { margin: .6rem 0; padding: .7rem .9rem; border: 2px solid #b3261e; border-radius: var(--scr-radius); background: #fdecea; color: #6b140f; font-weight: 600; }
.scr-errsum p { margin: 0; }

/* ---------- Quantity steppers (44px targets) ---------- */
.scr-step { display: inline-flex; align-items: stretch; border: 1.5px solid var(--scr-line); border-radius: 8px; overflow: hidden; background: #fff; }
.scr-cfg button.scr-step__btn { width: 44px; padding: 0; border-radius: 0; min-height: 44px; border: 0; background: var(--scr-cream); color: var(--scr-ink); font: 700 1.25rem/1 var(--scr-font); cursor: pointer; }
.scr-cfg button.scr-step__btn:hover { background: var(--scr-cream-2); color: var(--scr-ink); }
.scr-step .input-number, .scr-step .quantity { margin: 0 !important; display: flex; }
body.scr .scr-step input[type="number"] {
	width: 3.2rem !important; min-height: 44px; margin: 0 !important; border: 0 !important; border-inline: 1.5px solid var(--scr-line) !important;
	border-radius: 0 !important; text-align: center; font-weight: 700; -moz-appearance: textfield;
}
.scr-step input[type="number"]::-webkit-inner-spin-button, .scr-step input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Quantity cards need room for − [n] + (YITH's inline grid squeezes them to 50% on phones) */
body.scr .yith-wapo-addon-type-number .options { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)) !important; }
/* Old child-theme steppers never get built now; hide any leftovers */
body.scr .wapo-stepper-btn { display: none !important; }

/* WooCommerce's variation box is no longer the floating panel */
body.scr.single-product .woocommerce-variation.single_variation { position: static !important; width: auto !important; max-width: none !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
body.scr.single-product .woocommerce-variation.single_variation::before { content: none !important; }

/* ---------- Summary panel ---------- */
.scr-sum {
	position: fixed; right: 16px; bottom: 16px; z-index: 990; width: min(24rem, calc(100vw - 32px));
	background: #fff; border: 1px solid var(--scr-line); border-radius: var(--scr-radius-lg); box-shadow: var(--scr-shadow-lg);
	font-family: var(--scr-font); color: var(--scr-ink); overflow: hidden;
}
.scr-sum[hidden] { display: none; }
.scr-cfg button.scr-sum__bar {
	display: flex; border-radius: 0; align-items: center; gap: .6rem; width: 100%; min-height: 52px; padding: .55rem .9rem;
	background: var(--scr-pine); color: #fff; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.scr-sum__label { font-weight: 700; }
.scr-sum__count { font-size: .82rem; opacity: .85; }
.scr-sum__count.is-warn { opacity: 1; background: #fde9d9; color: #7a2e00; padding: .05rem .45rem; border-radius: 999px; font-weight: 700; }
.scr-sum__total { margin-left: auto; font-weight: 800; font-size: 1.15rem; }
.scr-sum__chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); margin: 4px 2px 0; transition: transform .15s; }
.scr-sum.is-open .scr-sum__chev { transform: rotate(45deg); margin-top: -4px; }
.scr-sum__body { display: none; max-height: min(60vh, 34rem); overflow-y: auto; padding: .8rem .9rem .9rem; }
.scr-sum.is-open .scr-sum__body { display: block; }
.scr-sum__title { margin: 0 0 .5rem; font-family: var(--scr-display); font-weight: 800; font-size: 1rem; }
.scr-sum__list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.scr-sum__list li { display: grid; grid-template-columns: 1fr auto 32px; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--scr-line); font-size: .95rem; }
.scr-sum__name { min-width: 0; overflow-wrap: anywhere; }
.scr-sum__price { text-align: right; white-space: nowrap; color: var(--scr-muted); font-size: .9rem; }
.scr-sum__price .scr-amt { color: var(--scr-ink); font-weight: 700; }
.scr-inc { color: #1d5b2c; font-weight: 700; }
.scr-cfg button.scr-sum__rm { padding: 0; width: 32px; height: 32px; border: 1px solid var(--scr-line); border-radius: 50%; background: #fff; color: var(--scr-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.scr-cfg button.scr-sum__rm:hover { border-color: var(--scr-red); background: #fff; color: var(--scr-red); }
.scr-sum__list li.is-missing { grid-template-columns: 1fr auto; color: #7a2e00; font-weight: 600; }
.scr-sum__list li.is-missing .scr-sum__name::after { content: " — not chosen yet"; font-weight: 400; }
.scr-cfg button.scr-sum__fix { border: 1.5px solid #7a2e00; background: #fff; color: #7a2e00; border-radius: 999px; padding: .2rem .8rem; min-height: 32px; font: inherit; font-weight: 700; cursor: pointer; }
.scr-sum__totals { display: grid; grid-template-columns: 1fr auto; row-gap: .2rem; margin: 0; }
.scr-sum__totals dd { padding-left: .8rem; }
.scr-sum__totals dt { color: var(--scr-muted); }
.scr-sum__totals dd { margin: 0; text-align: right; font-weight: 600; }
.scr-sum__totals s { color: var(--scr-muted); font-weight: 400; }
.scr-sum__totals .scr-sum__grand { color: var(--scr-ink); font-weight: 800; font-size: 1.15rem; padding-top: .3rem; border-top: 2px solid var(--scr-ink); margin-top: .2rem; }
.scr-sum__note { margin: .55rem 0 .6rem; font-size: .82rem; color: var(--scr-muted); }
.scr-cfg button.scr-sum__go { padding: 0 1rem; width: 100%; min-height: 46px; border: 0; border-radius: 999px; background: var(--scr-red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.scr-cfg button.scr-sum__go:hover { background: var(--scr-red-dark); color: #fff; }

@media (min-width: 1025px) {
	.scr-sum { right: auto; left: var(--scr-sum-left, 16px); width: min(26rem, var(--scr-sum-w, 24rem)); }
}
/* Phones/tablets: a bar above the call bar; tap to expand */
@media (max-width: 1024px) {
	.scr-sum { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; border-bottom: 0; }
	.scr-sum__body { max-height: 62vh; }
	body.scr-sum-on { padding-bottom: 60px !important; }
}
@media (max-width: 767px) {
	.scr-sum { bottom: calc(64px + env(safe-area-inset-bottom)); }
	body.scr.scr-sum-on { padding-bottom: 124px !important; }
	.scr-nav-open .scr-sum { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scr-sum__chev, .scr-size { transition: none; } }
@media print { .scr-sum { display: none !important; } }

/* Contrast (axe, WCAG AA): child theme / YITH greens #28a745 (3.1:1) and the variation price #958e09 (3.4:1) */
body.scr .yith-wapo-addon .option-price, body.scr .yith-wapo-addon .option-price .amount, body.scr .yith-price-included { color: #1d5b2c !important; }
body.scr.single-product .woocommerce-variation-price .price, body.scr.single-product .woocommerce-variation-price .amount { color: var(--scr-ink) !important; }

/* One purchase button (2026-10-05). Once a size is picked, the Your selection panel has its own "Add to cart", which
   submits the form through WooCommerce's button. So WooCommerce's button is hidden while the panel shows and is open
   (body.scr-sum-on.scr-sum-open): open by default beside the options on desktop, a collapsed bar on phones/tablets
   until tapped. It stays in the page as the submit target, and it shows before a size is picked, while the panel is
   collapsed, and whenever the script doesn't run (the classes come from configurator.js). !important: the child theme
   forces the button to inline-block !important. */
body.scr-sum-on.scr-sum-open #scr-cfg-form.scr-cfg--one-cta .single_add_to_cart_button { display: none !important; }