/* Electrovo illuminated workshop — shared components. Tokens come from theme.json. */
:root {
  --ev-bg: var(--wp--preset--color--graphite, #090c12);
  --ev-surface: var(--wp--preset--color--surface, #101722);
  --ev-raised: var(--wp--preset--color--raised, #182231);
  --ev-text: var(--wp--preset--color--paper, #f5f7fa);
  --ev-muted: var(--wp--preset--color--muted, #bbc5d3);
  --ev-border: var(--wp--preset--color--line, #354356);
  --ev-orange: var(--wp--preset--color--orange, #ff8a1f);
  --ev-yellow: var(--wp--preset--color--yellow, #ffd447);
  --ev-blue: var(--wp--preset--color--blue, #19bfff);
  --ev-green: var(--wp--preset--color--green, #53e66b);
  --ev-violet: var(--wp--preset--color--violet, #bf70ff);
  --ev-action-ink: #11131a;
  --ev-radius: 12px;
  --ev-shadow: 0 18px 45px #00000035;
  --ink: var(--ev-text); --paper: var(--ev-bg); --blue: var(--ev-blue);
  --muted: var(--ev-muted); --line: var(--ev-border); --white: var(--ev-text);
  --ev-panel: var(--ev-raised);
  color-scheme: dark;
}
body { background: var(--ev-bg); color: var(--ev-text); }
a { color: var(--ev-blue); }
a:hover { color: #82ddff; }
::selection { background: var(--ev-yellow); color: var(--ev-action-ink); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ev-blue); outline-offset: 5px;
}
.site-header { background: #090c12f5; border-bottom-color: #334253; }
.header-inner { min-height: 88px; }
.wp-block-site-title:before {
  background: linear-gradient(155deg, transparent 0 12%, var(--ev-yellow) 12% 28%,
    transparent 28% 37%, var(--ev-orange) 37% 53%, transparent 53% 62%,
    var(--ev-blue) 62% 78%, transparent 78%);
}
.main-nav a { color: var(--ev-text); }
.main-nav a:hover { color: var(--ev-blue); }
.main-nav .nav-quote a,
.wp-block-button__link,
.ev-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  color: var(--ev-action-ink);
  background: linear-gradient(115deg, var(--ev-orange), #ffb332);
  border: 1px solid #ffb44d;
  border-radius: 7px;
  box-shadow: 0 3px 18px #ff8a1f13;
  font-weight: 700;
}
.main-nav .nav-quote a:hover,
.wp-block-button__link:hover,
.ev-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--ev-yellow); color: var(--ev-action-ink);
  box-shadow: 0 5px 23px #ff8a1f25;
}
.main-nav .nav-quote .wp-block-navigation-item__content,
.main-nav .nav-quote .wp-block-navigation-item__label { color: var(--ev-action-ink) !important; }
body .wp-block-button.is-style-outline .wp-block-button__link {
  background: #0d1924; color: var(--ev-text); border-color: #346b86; box-shadow: none;
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #142a3a; border-color: var(--ev-blue);
}
.ev-basket { color: var(--ev-text) !important; }
.ev-basket svg { color: var(--ev-blue); }
.ev-basket-count { background: #172c3e; color: #d8f4ff; border: 1px solid #31546e; }
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--ev-surface) !important; color: var(--ev-text) !important;
}
.eyebrow { color: var(--ev-blue); font-size: .75rem; letter-spacing: .14em; }
.shop-hero {
  background:
    radial-gradient(ellipse at 84% 54%, #138bcd19, transparent 48%),
    radial-gradient(ellipse at 53% 15%, #ff8a1f0c, transparent 43%), var(--ev-bg);
  border-bottom: 1px solid #263445;
  padding-top: 62px; padding-bottom: 45px;
}
.shop-hero h1 { color: var(--ev-text); font-weight: 650; }
.shop-hero h1 em { color: var(--ev-yellow); }
.shop-hero .hero-intro { color: var(--ev-muted); }
.hero-art { position: relative; isolation: isolate; }
.hero-art img { max-height: 410px; }
.hero-art figcaption { color: var(--ev-muted); font-size: .75rem; margin-top: -7px; }
.hero-footnote { color: var(--ev-muted); font-size: .7rem; letter-spacing: .025em; }
.config-section { background: linear-gradient(#101722, #090c12); border-top: 0; }
.section-tint { background: var(--ev-surface); border-color: #283445; }
.section-heading p, .split-intro p, .faq-layout p { color: var(--ev-muted); }
.process-grid { gap: 18px !important; }
.process-card {
  position: relative; height: 100%; padding: 25px 21px 24px;
  background: #131d2a; border: 1px solid #354356; border-radius: var(--ev-radius);
}
.process-card:after {
  content: ""; position: absolute; top: 27px; right: 22px; width: 25px; height: 25px;
  background: var(--ev-blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V3m-5 5 5-5 5 5M4 15v6h16v-6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.process-grid>.wp-block-column:nth-child(2) .process-card:after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Cpath d='M8 3v6m8 0v6m-6 0v6'/%3E%3C/g%3E%3C/svg%3E");
}
.process-grid>.wp-block-column:nth-child(3) .process-card:after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H5v18h14V7m-4-4v4h4M8 13l3 3 5-6'/%3E%3C/g%3E%3C/svg%3E");
}
.process-grid>.wp-block-column:nth-child(4) .process-card:after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4v10l-9 4-9-4V7Zm0 0 9 4 9-4M12 11v10M7 5l10 4'/%3E%3C/g%3E%3C/svg%3E");
}
.process-card .step-number {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  color: var(--ev-yellow) !important; background: #332717; border: 1px solid #72502d;
  border-radius: 8px; font-size: .8rem !important; margin-bottom: 18px;
}
.process-card h3 { margin-top: 0; }
.process-card p { color: var(--ev-muted); }
.application-card, .guide-card, .service-card {
  background: var(--ev-raised); border-color: var(--ev-border);
  border-radius: var(--ev-radius); box-shadow: var(--ev-shadow);
}
.application-card { border-top: 2px solid var(--ev-blue); }
.application-grid>.wp-block-column:nth-child(2) .application-card { border-top-color: var(--ev-orange); }
.application-grid>.wp-block-column:nth-child(3) .application-card { border-top-color: #a696c9; }
.application-card figure { background: #111a27; border-color: #34465d; }
.application-card p, .application-note, .material-copy p, .material-copy li { color: var(--ev-muted); }
.material-image { border-color: #39546e; border-radius: var(--ev-radius); box-shadow: var(--ev-shadow); }
.material-image img { background: var(--ev-surface); }
.material-image figcaption { color: var(--ev-muted); background: var(--ev-raised); font-size: .78rem; }
.plain-list, .plain-list li { border-color: var(--ev-border); }
.plain-list li:before { color: var(--ev-orange); }
.section-cta {
  background: radial-gradient(ellipse at 10% 70%, #ff8a1f13, transparent 60%),
    radial-gradient(ellipse at 95% 10%, #19bfff10, transparent 58%), var(--ev-raised);
  border-color: #4c4650;
}
.section-cta p { color: var(--ev-muted); }
.wp-block-details { border-color: var(--ev-border); }
.wp-block-details summary { color: var(--ev-text); }
.wp-block-details summary::marker { color: var(--ev-blue); }
.wp-block-details p { color: var(--ev-muted); }
.site-footer { background: #090c12; border-color: #2b3749; }
.site-footer a, .footer-intro, .footer-heading, .footer-bottom { color: var(--ev-muted); }
.site-footer a:hover { color: var(--ev-blue); }
.footer-bottom { border-color: var(--ev-border); }
.page-main {
  background: radial-gradient(ellipse 60% 260px at 5% 0, #ff8a1f08, transparent),
    radial-gradient(ellipse 60% 360px at 96% 0, #19bfff0a, transparent);
}
.page-title { color: var(--ev-text); }
.page-lead { color: var(--ev-muted); }
.breadcrumbs { color: var(--ev-muted); }
.breadcrumbs a { color: var(--ev-blue); }
.info-panel, .quote-aside {
  background: var(--ev-raised); border-color: var(--ev-border);
  border-top: 2px solid var(--ev-blue); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow);
}
.info-panel p, .quote-aside p { color: var(--ev-muted); }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0 45px; }
.service-card { border: 1px solid var(--ev-border); border-top: 2px solid var(--ev-blue); padding: 26px; }
.service-card:nth-child(2) { border-top-color: var(--ev-orange); }
.service-card:nth-child(4) { border-top-color: #a696c9; }
.page-main .service-card h3 { margin-top: 0; font-size: 1.25rem; }
.service-card p { color: var(--ev-muted); font-size: .95rem; margin-bottom: 0; }
.form-field input, .form-field select, .form-field textarea {
  background: #0d1622; color: var(--ev-text); border-color: #65778d;
}
.form-field input::placeholder { color: var(--ev-muted); }
.form-field :is(input,select,textarea):focus { border-color: var(--ev-blue); }
.form-required-note, .field-help, .form-privacy { color: var(--ev-muted); }
.electrovo-form fieldset { border-color: var(--ev-border); }
.electrovo-form legend span { color: var(--ev-yellow); background: #342716; }
.upload-field { background: var(--ev-raised); border-color: #658198; border-radius: var(--ev-radius); }
.upload-field p { color: var(--ev-muted); }
.upload-field input::file-selector-button { background: #122f43; border-color: var(--ev-blue); color: #e1f6ff; }
.field-error, .error-summary a { color: #ffd69e; }
.form-field [aria-invalid=true] { border: 2px solid var(--ev-orange); }
.error-summary { background: #322217; color: var(--ev-text); border-color: var(--ev-orange); }
.form-success { background: #10291d; color: var(--ev-text); border-color: var(--ev-green); }
.guide-card .wp-block-post-excerpt { color: var(--ev-muted); }
.guide-card h2 a { color: var(--ev-text); }
.guide-card .wp-block-post-excerpt__more-link { color: var(--ev-blue); }
.wp-block-table td, .wp-block-table th { border-color: #61738a; }
.wp-block-table thead { background: var(--ev-raised); }
.ev-shop-notice, .woocommerce-info { background: #112a3c; color: var(--ev-text); border-color: var(--ev-blue); }
.woocommerce table.shop_table { background: var(--ev-raised); border-color: #566a82; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: #566a82; }
.woocommerce :is(input.input-text,select,textarea) { background: #0d1622; color: var(--ev-text); border-color: #65778d; }
.woocommerce :is(form.login,form.register,form.checkout_coupon) { background: var(--ev-surface); border-color: var(--ev-border); }
.woocommerce-message { background: #10291d; color: var(--ev-text); border-top-color: var(--ev-green); }
.woocommerce-message::before { color: var(--ev-green); }
.woocommerce-info::before { color: var(--ev-blue); }
.woocommerce-error { background: #322217; color: var(--ev-text); border-top-color: var(--ev-orange); }
.woocommerce-error::before { color: var(--ev-orange); }
.woocommerce .woocommerce-breadcrumb a { color: var(--ev-blue); }
.woocommerce-privacy-policy-text, .woocommerce .woocommerce-breadcrumb { color: var(--ev-muted); }
.woocommerce .quantity .qty { background: var(--ev-raised); color: var(--ev-text); }
.woocommerce button.button:disabled { background: #293747; color: #c5d0df; border-color: #56667c; box-shadow: none; }

/* Same roles in the local model preview. A disabled ordering button stays visibly disabled. */
.ev-config { --panel: var(--ev-raised); --line: var(--ev-border); --muted: var(--ev-muted); --cyan: var(--ev-blue); color: var(--ev-text); }
.ev-config .ev-kicker { color: var(--ev-blue); font-size: .75rem; }
.ev-preview-badge { color: #d7f4ff; background: #112b3b; border-color: #34718e; }
.ev-config-grid { gap: 24px; }
.ev-viewer-panel, .ev-controls-panel { border-color: #41546c; border-radius: var(--ev-radius); box-shadow: var(--ev-shadow); }
.ev-viewer-panel { background: radial-gradient(ellipse at 35% 18%, #19bfff13, transparent 65%), #0d1521; }
.ev-viewer-top { background: #131e2c; border-color: var(--ev-border); }
.ev-view-tools { background: #0b1420; border-color: var(--ev-border); padding: 14px 12px; gap: 7px; }
.ev-view-tools button { background: #152b3c; border-color: #466981; color: #d8f1ff; min-width: 42px; min-height: 42px; font-size: .78rem; }
.ev-view-tools button:hover { border-color: var(--ev-blue); background: #183c54; }
.ev-view-tools button[aria-pressed=true] { background: #123a52; color: #e4f7ff; border-color: var(--ev-blue); box-shadow: inset 0 0 0 1px #19bfff25; }
.ev-config .ev-touch-help, .ev-orientation-note { font-size: .8rem; color: var(--ev-muted); }
.ev-model-stats { background: #101d2b; border-color: var(--ev-border); }
.ev-model-stats strong { font-size: .85rem; }
.ev-model-stats span { color: var(--ev-muted); }
.ev-fit-status { color: var(--ev-green); }
.ev-fit-status.oversize { color: var(--ev-yellow); }
.ev-local-note { border-color: var(--ev-border); }
.ev-local-note>span { color: var(--ev-blue); }
.ev-local-note strong { color: var(--ev-text); }
.ev-local-note p { color: var(--ev-muted); }
.ev-dropzone { background: #0f1d2b; border-color: #6486a0; }
.ev-dropzone.dragging { background: #15384c; border-color: var(--ev-blue); }
.ev-controls-panel .ev-file-label { font-size: 1.05rem; }
.ev-choose { background: #16374d; border-color: var(--ev-blue); color: #e4f7ff; font-size: .85rem; min-height: 44px; }
.ev-sample { color: #b9e9ff; min-height: 44px; font-size: .8rem; }
.ev-progress-wrap progress { accent-color: var(--ev-blue); }
.ev-config-status { color: #c4d9ec; }
.ev-config-error { border-color: var(--ev-orange); background: #322217; color: #ffdfaf; }
.ev-unit-panel, .ev-advanced { border-color: var(--ev-border); }
.ev-controls-panel select, .ev-controls-panel input[type=number] { background: #0d1622; color: var(--ev-text); border-color: #65778d; }
.ev-controls-panel select:disabled { background: #1b2a3b; color: var(--ev-muted); border-color: #53657c; }
.ev-config .ev-required, .ev-colours legend>span, .ev-price-summary>div span { color: var(--ev-muted); }
.ev-swatch { width: 38px; height: 38px; border-color: #60748c; }
.ev-swatch.selected { border-color: var(--ev-blue); box-shadow: 0 0 0 2px var(--ev-blue); }
.ev-config .ev-colour-name { color: var(--ev-text); }
.ev-advanced summary, .ev-price-summary>div strong { color: var(--ev-text); }
.ev-price-summary { border-top: 1px solid #536172; padding-top: 20px; }
.ev-price-summary>div strong { font-size: 1rem; }
.ev-price-summary .ev-add-basket { position: static; box-shadow: none; background: #293747; color: #c5d0df; border-color: #56667c; }
.ev-manual-quote { color: var(--ev-action-ink); background: var(--ev-orange); border-color: var(--ev-orange); font-size: .88rem; padding: 13px; }
.ev-manual-quote:hover { color: var(--ev-action-ink); background: var(--ev-yellow); border-color: var(--ev-yellow); }
.ev-mobile-action { background: #152130; border-color: #8b653e; }
.ev-mobile-action strong { color: var(--ev-text); }
.ev-mobile-action a { background: var(--ev-orange); color: var(--ev-action-ink); }
.ev-config :focus-visible { outline-color: var(--ev-blue); }
.ev-webgl-fallback { color: var(--ev-muted); }
.ev-webgl-fallback h3 { color: var(--ev-text); }

@media(max-width:1000px) {
  .header-inner { gap: 20px; }
  .hero-art img { max-height: 340px; }
  .ev-config-grid { gap: 16px; }
}
@media(max-width:781px) {
  .header-inner { min-height: 76px; }
  .process-grid { gap: 18px !important; }
  .service-grid { gap: 16px; }
}
@media(max-width:599px) {
  .header-inner { gap: 13px; }
  .shop-hero { padding-top: 35px; padding-bottom: 28px; }
  .shop-hero h1 { font-size: clamp(2.8rem,12vw,3.7rem); }
  .hero-art { display: block; margin-top: 12px !important; }
  .hero-art img { height: 170px; width: 100%; object-fit: contain; }
  .hero-art figcaption { margin-top: -3px; font-size: .72rem; }
  .hero-footnote { font-size: .68rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .process-card { padding: 23px; }
  .ev-controls-panel { padding: 20px 17px; }
  .ev-view-tools button { font-size: .75rem; padding: 9px; }
  .ev-colours legend>span { font-size: .72rem; }
  .ev-mobile-action { bottom: max(10px,env(safe-area-inset-bottom)); }
  .woocommerce table.shop_table_responsive tr td { background: var(--ev-raised) !important; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .wp-block-button__link:hover { transform: none; }
}
.service-grid>.service-card { margin: 0; }
.ev-config .ev-model-tag, .ev-config .ev-required { font-size: .72rem; }
.ev-controls-panel label, .ev-colours legend { font-size: .85rem; }
body.woocommerce-checkout #place_order, body.woocommerce-page .button.alt {
  background: var(--ev-orange); color: var(--ev-action-ink); border-color: var(--ev-orange);
}
/* Comfortable touch targets and native input sizing without mobile browser zoom. */
.ev-swatch { width: 44px; height: 44px; }
@media(max-width:599px) {
  .ev-controls-panel select, .ev-controls-panel input[type=number] { font-size: 16px; }
  .ev-mobile-action a { font-size: .85rem; }
}
/* Compact calls to action inside editorial pages; the wide homepage banner stays spacious. */
.wp-block-button__link { white-space: nowrap; }
.page-main .section-cta { padding: 36px; border-radius: var(--ev-radius); }
.page-main .section-cta h2 { font-size: clamp(1.9rem,3vw,2.55rem); }
.page-main .section-cta .wp-block-columns { flex-direction: column; gap: 24px !important; }
.page-main .section-cta .wp-block-column { flex-basis: auto !important; width: 100%; }
.page-main .section-cta .wp-block-buttons { justify-content: flex-start; }
body.woocommerce-checkout #place_order:disabled, body.woocommerce-page .button.alt:disabled {
  background: #293747; color: #c5d0df; border-color: #56667c; box-shadow: none;
}
@media(max-width:599px) { .page-main .section-cta { padding: 24px; } }

/* Supplied brand artwork: natural proportions, native editable image/logo blocks. */
.header-inner { min-height: 126px; }
.site-header .wp-block-site-logo { flex: 0 0 180px; margin: 0; }
.wp-block-site-logo a { display: inline-block; line-height: 0; border-radius: 4px; }
.site-header .wp-block-site-logo img { display: block; width: 180px; height: auto; }
.site-footer .wp-block-site-logo img { display: block; width: 180px; height: auto; }
.has-workshop-art {
  isolation: isolate; overflow: hidden; min-height: 548px;
  padding-top: 58px; padding-bottom: 22px; background: var(--ev-bg);
}
.has-workshop-art .workshop-backdrop {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  max-width: none !important; margin: 0 !important;
}
.has-workshop-art .workshop-backdrop img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.has-workshop-art:before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #090c12f5 0%, #090c12df 25%, #090c1270 48%, #090c1200 72%),
    linear-gradient(0deg, #090c12 0%, #090c1200 20%);
}
.has-workshop-art .hero-copy { position: relative; margin-top: 0; }
.has-workshop-art .hero-text { max-width: 515px; }
.has-workshop-art h1 { font-size: clamp(3.1rem,5.5vw,5.1rem); }
.has-workshop-art .hero-intro { color: var(--ev-text); line-height: 1.7; }
.has-workshop-art .hero-text .wp-block-buttons { gap: 12px; }
.has-workshop-art .hero-art-caption {
  position: relative; color: var(--ev-muted); font-size: .75rem; line-height: 1.6;
  margin-top: 22px; margin-bottom: 0;
}
.material-image img { display: block; width: 100%; height: auto; }
.application-card img { aspect-ratio: 13 / 8; object-fit: cover; }
@media(min-width:1600px) {
  .has-workshop-art { min-height: 600px; padding-top: 78px; }
}
@media(max-width:1100px) and (min-width:901px) {
  .site-header .wp-block-site-logo { flex-basis: 156px; }
  .site-header .wp-block-site-logo img { width: 156px; }
  .header-inner { gap: 14px; }
}
@media(max-width:900px) {
  .header-inner { min-height: 112px; }
  .site-header .wp-block-site-logo { flex-basis: 156px; }
  .site-header .wp-block-site-logo img { width: 156px; }
  .has-workshop-art { min-height: 520px; padding-top: 42px; }
  .has-workshop-art .hero-text { max-width: 450px; }
  .has-workshop-art:before { background: linear-gradient(90deg, #090c12fa 0%, #090c12e8 40%, #090c1260 75%, #090c1233); }
}
@media(max-width:599px) {
  .header-inner { min-height: 104px; gap: 10px; }
  .site-header .wp-block-site-logo { flex-basis: 140px; }
  .site-header .wp-block-site-logo img { width: 140px; }
  .has-workshop-art { display: flex; flex-direction: column; padding-top: 32px; padding-bottom: 20px; min-height: 0; }
  .has-workshop-art:before { display: none; }
  .has-workshop-art .hero-copy { order: 0; width: 100%; }
  .has-workshop-art .hero-text { max-width: none; }
  .has-workshop-art h1 { font-size: clamp(2.8rem,12vw,3.7rem); }
  .has-workshop-art .workshop-backdrop {
    order: 1; position: relative; inset: auto; z-index: auto; height: auto;
    margin-top: 24px !important; flex: 0 0 auto;
  }
  .has-workshop-art .workshop-backdrop img { height: auto; object-fit: contain; }
  .has-workshop-art .hero-art-caption { order: 2; width: 100%; margin-top: 12px; font-size: .72rem; }
  .has-workshop-art .hero-footnote { font-size: .65rem; }
}