/* Notched — Wix-style variation button-boxes + colour swatches on product pages. Pairs with woo-variations.js. Brand tokens: gold #AA7D44, text #141C19. */ /* ── Single Product template (Elementor 1707) layout tweaks ────────────────── Core product section: drop the bottom padding. */ .elementor-1707 .elementor-element.elementor-element-sfd0a283 { padding-bottom: 0 !important; } /* Mobile: smaller product title (was ~5rem). */ @media (max-width: 767px) { .elementor-1707 .elementor-widget-woocommerce-product-title h1, .elementor-1707 .elementor-widget-woocommerce-product-title .product_title { font-size: 2.5rem !important; line-height: 1.05 !important; } } /* Anti-FOUC: before woo-variations.js converts the dropdowns to swatches, take the native (kept for WooCommerce's logic) but keep it accessible. */ .aew-swatch-source { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* The WC variations table → make each row a clean stacked label + controls. */ .variations, table.variations { width: 100%; border: 0; margin-bottom: 0 !important; } /* "Clear" reset link → brand green. */ .woocommerce div.product form.cart .variations .reset_variations, .reset_variations { color: var(--notched-secondary-bg, #2A4F41) !important; } /* WooCommerce hides "Clear" with visibility:hidden (still reserves space → a gap). Collapse it with display:none while hidden so it takes no space until shown. */ .woocommerce div.product form.cart .variations .reset_variations[style*="visibility: hidden"], .reset_variations[style*="visibility: hidden"] { display: none !important; } .variations tr, table.variations tr { display: block; margin-bottom: 22px; } /* No gap after the last variation row. */ .variations tr:last-child, table.variations tr:last-child { margin-bottom: 0; } /* Kill the kit's zebra striping behind alternating variation rows. */ .variations tbody > tr:nth-child(odd) > td, .variations tbody > tr:nth-child(odd) > th, table.variations tbody > tr:nth-child(odd) > td, table.variations tbody > tr:nth-child(odd) > th { background-color: transparent !important; } /* Kill the row-hover highlight on variation rows. */ .variations tbody > tr:hover > td, .variations tbody > tr:hover > th, table.variations tbody > tr:hover > td, table.variations tbody > tr:hover > th { background-color: transparent !important; } .variations td, .variations th, table.variations td, table.variations th { display: block; padding: 0; border: 0; width: auto; } .variations .label label, table.variations .label label { display: block; margin: 0 0 10px; font-family: "Teko", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--notched-text, #141C19); } /* WooCommerce's "Clear" link under a chosen variation */ .variations .reset_variations { font-size: 13px; } /* ── Swatch container ── */ .aew-swatches { display: flex; flex-wrap: wrap; gap: 10px; } /* ── Box buttons (sizes / timber / power / end-cut) ── */ .aew-swatch--box { appearance: none; cursor: pointer; padding: 10px 16px; min-width: 56px; background: #fff; border: 1px solid #BFC0BF; border-radius: 8px; font-family: "Lato", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--notched-text, #141C19); text-align: center; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* High specificity + !important so hover/active beat the kit's generic `.elementor-kit-7 button` styling (solid gold bg on every button). */ .aew-swatches .aew-swatch.aew-swatch--box { background-color: #fff !important; background-image: none !important; color: var(--notched-text, #141C19) !important; border: 1px solid #BFC0BF !important; } .aew-swatches .aew-swatch.aew-swatch--box:hover { border-color: var(--notched-cta, #AA7D44) !important; color: var(--notched-cta, #AA7D44) !important; } .aew-swatches .aew-swatch.aew-swatch--box.is-active { background-color: var(--notched-cta, #AA7D44) !important; border-color: var(--notched-cta, #AA7D44) !important; color: #fff !important; } /* ── Colour swatches (stain / roof) ── */ .aew-swatches--color { gap: 12px; } /* High specificity + !important so the swatch's own --sw colour always wins over theme/Elementor/WC generic