/* Shed City Product Configurator – loaded only on configured product pages.

   ISOLATION: the root class .scc-ui is on the product form (size buttons, option groups) and on the "Your selection"
   panel. Hello Elementor's reset.css gives every button a #c36 border/text and, on :hover/:focus, a #c36 background
   at specificity (0,2,0). Button rules here are written ".scc-ui button.scc-x" (0,2,1) and set every property the theme
   sets, so theme hover/focus colours never reach the configurator. Keep that pattern for new buttons. */
.scc-ui { --scc-ink: #231f1c; --scc-ink-2: #4b443e; --scc-muted: #6b625a; --scc-line: #ddd2c0; --scc-cream: #f5efe4; --scc-cream-2: #ebe2d2; --scc-red: #a9362f; --scc-red-dark: #87281f; --scc-ok: #1d5b2c; --scc-focus: #1f6feb; }
.scc { margin: 0; color: var(--scc-ink); } /* option groups follow the size price directly, as on the 2026 site */
/* Neutral reset anchored on the root IDs (#scc-form, #scc-sum): (1,1,1) also outranks Elementor Pro's add-to-cart widget
   rule "… form.cart button:where(:not(:first-child)) { margin-inline-start: 10px }" (0,4,3). */
:is(#scc-form, #scc-sum) button:is(.scc-size, .scc-group__btn, .scc-step__btn, .scc-sum__bar, .scc-sum__rm, .scc-sum__dec, .scc-sum__fix, .scc-sum__go) {
	box-sizing: border-box; margin: 0; margin-inline: 0; white-space: normal; text-transform: none; letter-spacing: normal; text-decoration: none; box-shadow: none; font-family: inherit;
}
.scc-ui button:is(.scc-size, .scc-group__btn, .scc-step__btn, .scc-sum__bar, .scc-sum__rm, .scc-sum__dec, .scc-sum__fix, .scc-sum__go):focus { outline: none; }
.scc-ui button:is(.scc-size, .scc-group__btn, .scc-step__btn, .scc-sum__bar, .scc-sum__rm, .scc-sum__dec, .scc-sum__fix, .scc-sum__go):focus-visible { outline: 3px solid var(--scc-focus); outline-offset: 2px; }
.scc[hidden], .scc-group[hidden], .scc-sum[hidden] { display: none !important; }
/* Only one configurator per page: YITH's container stays empty here */
#yith-wapo-container, #wapo-total-price-table { display: none !important; }
/* Visually hidden (WooCommerce's own size select stays in the form). Sizes win over theme and WooCommerce select widths; no transition, so a theme's `transition: all` on selects can't animate it from full width. */
.scc-sr { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; transition: none !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scc-preview-note { padding: .5rem .75rem; background: #fff6d6; border: 1px dashed #b88a00; border-radius: 8px; font-size: .9rem; }
/* Named for screen readers; the 2026 site's option list has no visible heading. */
.scc-heading { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.scc-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; margin: .4rem 0 .2rem; }
.scc-ui button.scc-size { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: .35rem; border: 1.5px solid var(--scc-line); border-radius: 8px; background: #fff; color: var(--scc-ink); line-height: 1.15; cursor: pointer; }
/* Hover before selected, so a hovered selected size stays red. Selected = aria-checked only. */
.scc-ui button.scc-size:hover { border-color: var(--scc-ink-2); background: var(--scc-cream); color: var(--scc-ink); }
.scc-ui button.scc-size[aria-checked="true"] { background: var(--scc-red); border-color: var(--scc-red); color: #fff; }
.scc-size__name { font-weight: 700; }
.scc-size__price { font-size: .78rem; color: var(--scc-muted); }
.scc-ui button.scc-size[aria-checked="true"] .scc-size__price { color: #fff; }

.scc-group { border: 1px solid var(--scc-line); border-radius: 10px; background: #fff; margin-bottom: .7rem; }
.scc-group.has-choice { border-color: #9cc6a5; }
.scc-group.is-invalid { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.scc-group__h { margin: 0; font-size: inherit; }
.scc-ui button.scc-group__btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; min-height: 93px; padding: .5rem 2.4rem .5rem 1rem; /* 95px boxes, as the 2026 site's option groups */ border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; position: relative; color: inherit; }
.scc-ui button.scc-group__btn:hover .scc-group__title { text-decoration: underline; text-underline-offset: 3px; }
/* YITH's chevron on the 2026 site: 7px, #555, 28px in from the card edge; its header grows 25px when open, so it drops 12.5px. */
.scc-group__btn::after { content: ""; position: absolute; right: 28px; top: 50%; box-sizing: content-box; width: 7px; height: 7px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: translateY(-4.55px) rotate(45deg); }
.scc-group__btn[aria-expanded="true"]::after { top: calc(50% + 12.5px); transform: translateY(-2.45px) rotate(225deg); }
.scc-group__title { flex: 0 0 auto; max-width: 100%; font-weight: 800; font-size: 1.05rem; }
.scc-group__status { flex: 0 1 auto; min-width: 0; font-family: var(--scr-font, inherit); font-size: .82rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scc-group__status.is-opt { background: var(--scc-cream); color: var(--scc-muted); }
.scc-group__status.is-req { background: #fde9d9; color: #7a2e00; }
.scc-group__status.is-set { background: #e3f2e6; color: var(--scc-ok); }
.scc-group__status.is-set::before { content: "✓ "; }
/* The 2026 site's open group (YITH's box): 10px under the header, options inset 12px + the card's 16px / 14.4px padding. */
.scc-group__panel { padding: 10px 28px 26.4px 16px; }
.scc-group__help p { margin: 0 0 .9em; }
.scc-group__help img { vertical-align: baseline; }
.scc-choices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; }
.scc-type-quantity .scc-choices { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.scc-choice { display: flex; flex-direction: column; gap: .35rem; padding: .6rem; border: 1.5px solid var(--scc-line); border-radius: 8px; cursor: pointer; position: relative; }
.scc-choice input[type="radio"], .scc-choice input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--scc-red); }
.scc-choice:has(input:checked) { border-color: var(--scc-red); box-shadow: 0 0 0 1px var(--scc-red); }
.scc-choice:has(input:focus-visible) { outline: 3px solid var(--scc-focus); outline-offset: 2px; }
.scc-choice__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.scc-choice__text { display: flex; flex-direction: column; }
.scc-choice__label { font-weight: 600; }
.scc-choice__price { font-size: .88rem; color: var(--scc-ok); }
.scc-choice__help { font-size: .82rem; color: var(--scc-muted); }
.scc-choice__price b { font-weight: 700; }

/* Pick-one, toggle and swatch groups as YITH draws them on the 2026 site: 4 tiles per row (swatches 5), 2 at ≤768px. */
.scc-type-single .scc-choices, .scc-type-toggle .scc-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scc-type-swatch .scc-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 768px) { :is(.scc-type-single, .scc-type-toggle, .scc-type-swatch) .scc-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Pick-one and toggle: no box; photo (4:3) on top, then the control with the name and its price on the line below. */
:is(.scc-type-single, .scc-type-toggle) .scc-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start; gap: 10px 6.4px; padding: 0; border: 0; border-radius: 0; line-height: 17px; }
:is(.scc-type-single, .scc-type-toggle) .scc-choice:has(input:checked) { box-shadow: none; }
:is(.scc-type-single, .scc-type-toggle) .scc-choice .scc-choice__img { grid-row: 1; grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 0; }
:is(.scc-type-single, .scc-type-toggle) .scc-choice > input { grid-column: 1; }
:is(.scc-type-single, .scc-type-toggle) .scc-choice > .scc-choice__text { grid-column: 2; }
/* A long name ("No shingles, Metal Roof, price will be…") takes two columns instead of wrapping in a narrow tile. */
.scc-choices .scc-choice--long { grid-column: span 2; }
.scc-choices .scc-choice--long .scc-choice__img { max-width: calc(50% - 5px); }
:is(.scc-type-single, .scc-type-toggle) .scc-choice input:is([type="radio"], [type="checkbox"]) { width: 13px; height: 13px; margin: 3.4px 0 0; }
:is(.scc-type-single, .scc-type-toggle, .scc-type-swatch) .scc-choice__label { font-weight: 400; }
:is(.scc-type-single, .scc-type-swatch) .scc-choice__price { margin-top: 1.6px; font-size: .8em; line-height: 1; }
.scc-choice__price .scc-inc { font-weight: 600; }
/* Toggle: checkbox, then the name with its price running on after it. */
.scc-type-toggle .scc-choice { column-gap: 15px; }
.scc-type-toggle .scc-choice input[type="checkbox"] { margin-top: 2px; }
.scc-type-toggle .scc-choice__text { display: block; }
.scc-type-toggle .scc-choice__price { margin-left: .3em; font-size: .8em; }
/* Selected photo: red frame and a check badge, as the redesign marks YITH's selected option. */
.scc-choice:has(.scc-choice__img):has(input:checked) .scc-choice__img { outline: 3px solid var(--scc-red); outline-offset: -3px; }
:is(.scc-type-single, .scc-type-toggle) .scc-choice:has(.scc-choice__img):has(input:checked)::after { content: "✓"; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--scc-red); color: #fff; font: 700 13px/22px var(--scr-font, inherit); text-align: center; }
/* Swatch: outlined box, centred swatch, name and price; the radio stays in the page for keyboards and screen readers. */
.scc-type-swatch .scc-choice { align-items: center; gap: 0; padding: 10px; border: 1px solid #7a7a7a; border-radius: 5px; text-align: center; line-height: 17px; }
.scc-type-swatch .scc-choice:has(input:checked) { border-color: var(--scc-red); box-shadow: none; }
.scc-type-swatch .scc-choice input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.scc-type-swatch .scc-choice .scc-choice__img { aspect-ratio: auto; border-radius: 0; margin-bottom: 9px; } /* YITH's inline image leaves a line gap under it */
/* Name and price share a line when they fit ("Tan (+$289.80)"), as YITH's label_price row does. */
.scc-type-swatch .scc-choice__text { flex-flow: row wrap; justify-content: center; align-items: center; column-gap: 5px; }
.scc-type-swatch .scc-choice__price { line-height: 1.6; }
/* Quantity cards as YITH draws them on the 2026 site: dotted box, name with its unit price inline, and the stepper
   beside it when both fit ("6ft $96.00"), otherwise on the next line. */
.scc-choice--qty { cursor: default; flex-flow: row wrap; align-items: center; gap: 8px 16px; padding: 18px 12px; border: 1px dotted #ccc; border-radius: 0; }
.scc-choice--qty .scc-choice__text { display: block; flex: 1 0 auto; }
.scc-choice--qty .scc-choice__label { display: inline; font-weight: 400; }
.scc-choice--qty .scc-choice__price { display: inline; margin-left: .3em; font-size: .8em; font-weight: 700; }
.scc-choice--qty .scc-step { align-self: center; }
.scc-step { display: inline-flex; border: 1.5px solid var(--scc-line); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.scc-ui button.scc-step__btn { width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--scc-cream); color: var(--scc-ink); font-weight: 700; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.scc-ui button.scc-step__btn:hover { background: var(--scc-cream-2); color: var(--scc-ink); }
.scc-step input { width: 3.2rem; padding: 4px; border: 0; border-inline: 1.5px solid var(--scc-line); border-radius: 0; color: #000; font-size: 14px; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.scc-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.scc-err { color: #b3261e; font-weight: 700; margin: .2rem 1rem .5rem; }

.scc-sum { position: fixed; right: 16px; bottom: 16px; z-index: 990; width: min(24rem, calc(100vw - 32px)); background: #fff; border: 1px solid var(--scc-line); border-radius: var(--scr-radius-lg, 16px); box-shadow: var(--scr-shadow-lg, 0 18px 40px rgba(35,31,28,.14)); font-family: var(--scr-font, inherit); overflow: hidden; color: var(--scc-ink); }
.scc-ui button.scc-sum__bar { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 52px; padding: .55rem .9rem; border: 0; border-radius: 0; background: var(--scr-pine, #22302a); color: #fff; font: inherit; cursor: pointer; text-align: left; }
.scc-sum__label { font-weight: 700; }
.scc-sum__count { font-size: .82rem; opacity: .85; }
.scc-sum__count.is-warn { opacity: 1; background: #fde9d9; color: #7a2e00; padding: .05rem .45rem; border-radius: 999px; font-weight: 700; }
.scc-sum__total { margin-left: auto; font-weight: 800; font-size: 1.15rem; }
.scc-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; }
.scc-sum.is-open .scc-sum__chev { transform: rotate(45deg); margin-top: -4px; }
.scc-sum__body { display: none; max-height: min(60vh, 34rem); overflow-y: auto; padding: .8rem .9rem .9rem; }
.scc-sum.is-open .scc-sum__body { display: block; }
.scc-sum__title { margin: 0 0 .5rem; font-family: var(--scr-display, inherit); font-weight: 800; font-size: 1rem; }
.scc-sum__list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.scc-sum__list li { display: grid; grid-template-columns: 1fr auto minmax(32px, auto); gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--scc-line); font-size: .95rem; }
.scc-sum__list li.is-missing { grid-template-columns: 1fr auto; color: #7a2e00; font-weight: 600; }
.scc-sum__name { min-width: 0; overflow-wrap: anywhere; }
.scc-sum__price { text-align: right; white-space: nowrap; color: var(--scc-muted); font-size: .9rem; }
.scc-sum__price b { color: var(--scc-ink); font-weight: 700; }
.scc-inc { color: var(--scc-ok); font-weight: 700; }
.scc-sum__act { display: flex; gap: .3rem; justify-content: flex-end; }
.scc-ui button:is(.scc-sum__rm, .scc-sum__dec) { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--scc-line); background: #fff; color: var(--scc-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.scc-ui button.scc-sum__dec:hover { border-color: var(--scc-ink); background: #fff; color: var(--scc-ink); }
.scc-ui button.scc-sum__rm:hover { border-color: var(--scc-red); background: #fff; color: var(--scc-red); }
.scc-ui button.scc-sum__fix { border: 1.5px solid #7a2e00; border-radius: 999px; background: #fff; color: #7a2e00; padding: .2rem .8rem; min-height: 32px; font: inherit; font-weight: 700; cursor: pointer; }
.scc-ui button.scc-sum__fix:hover { background: #fde9d9; color: #7a2e00; }
.scc-sum__totals { display: grid; grid-template-columns: 1fr auto; row-gap: .2rem; margin: 0; }
.scc-sum__totals dt { color: var(--scc-muted); }
.scc-sum__totals dd { margin: 0; text-align: right; padding-left: .8rem; font-weight: 600; }
.scc-sum__totals s { color: var(--scc-muted); font-weight: 400; }
.scc-sum__totals .scc-g { color: var(--scc-ink); font-weight: 800; font-size: 1.15rem; padding-top: .3rem; border-top: 2px solid var(--scc-ink); margin-top: .2rem; }
.scc-sum__note { margin: .55rem 0 .6rem; font-size: .82rem; color: var(--scc-muted); }
.scc-ui button.scc-sum__go { width: 100%; min-height: 46px; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--scc-red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.scc-ui button.scc-sum__go:hover { background: var(--scc-red-dark); color: #fff; }
/* Desktop: over the gallery column (configurator.js sets the variables from the gallery's position). */
@media (min-width: 1025px) { .scc-sum { right: auto; left: var(--scc-sum-left, 16px); width: min(26rem, var(--scc-sum-w, 24rem)); } }
/* Phones/tablets: a bar above the call bar; tap to expand */
@media (max-width: 1024px) {
	.scc-sum { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; border-bottom: 0; }
	.scc-sum__body { max-height: 62vh; }
	body.scc-sum-on { padding-bottom: 60px !important; }
}
@media (max-width: 767px) {
	.scc-sum { bottom: calc(64px + env(safe-area-inset-bottom)); }
	body.scc-sum-on { padding-bottom: 124px !important; }
}
@media (prefers-reduced-motion: reduce) { .scc-sum__chev { transition: none; } }
@media print { .scc-sum { display: none !important; } }
/* One purchase button: while Your selection is shown and open, its own "Add to cart" submits through WooCommerce's
   button, which stays in the page but hidden. 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). */
body.scc-sum-on.scc-sum-open form.scc--one-cta .single_add_to_cart_button { display: none !important; }

/* Cart-quantity stepper next to "Add to cart" (child theme qty-stepper.js): same theme-reset leak (magenta text/border,
   magenta fill on focus). Isolated like the rest; 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(--scc-line); background: var(--scc-cream); color: var(--scc-ink); font-family: inherit; font-size: 22px; line-height: 1; white-space: normal; }
form.variations_form.cart button.qty-stepper-btn:hover { background: var(--scc-cream-2); color: var(--scc-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(--scc-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; }
/* Selected-size price under the size grid: the child theme colours it #958e09 (3.4:1, fails WCAG AA). */
#scc-form .woocommerce-variation-price .price, #scc-form .woocommerce-variation-price .amount { color: var(--scc-ink); }