/* Creative Visuals — product pages.
   Only components no UX Builder control provides. Sizes, colours and spacing of
   editable content stay on the elements themselves. Scoped to body.cv-page. */

:root { --cv-red: #cd1719; --cv-ink: #202126; --cv-line: #dededb; }

/* Eyebrow label (UX Builder text element → Class "cv-eyebrow"). Font size stays on the element. */
.cv-page .cv-eyebrow p { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--cv-red); margin-bottom: .9em; }
.cv-page .cv-eyebrow-light p { color: #ff7583; }
.cv-page .cv-eyebrow-white p { color: #fff; }

/* Second line of the H1 ("Portable LED lightboxes"). */
.cv-page .cv-h1-sub { display: block; font-size: .5em; line-height: 1.15; margin-top: .35em; letter-spacing: -.01em; }

/* Section navigation: sticks below the site's sticky header (offset set by cv-pages.js). */
.cv-page .cv-jump { position: sticky; top: var(--cv-top, 0px); z-index: 29; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.cv-page .cv-jump .col, .cv-page .cv-jump .col-inner { padding: 0; }
.cv-page .cv-jump-links p { display: flex; justify-content: center; gap: 28px; margin: 0; padding: 16px 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.cv-page .cv-jump-links a { color: var(--cv-ink); font-weight: 700; font-size: .85em; }
.cv-page .cv-jump-links a:hover, .cv-page .cv-jump-links a:focus-visible { color: var(--cv-red); }
@media (max-width: 849px) { .cv-page .cv-jump-links p { justify-content: flex-start; gap: 22px; } }

/* Anchor targets ([scroll_to]): the theme scrolls to span.scroll-to minus its sticky header height,
   so lift the span by the section navigation's height. Direct loads (#quote in the URL) use scroll-margin. */
.cv-page span.scroll-to { display: block; height: 0; position: relative; top: -68px; }
.cv-page span.scroll-to > a[name] { display: block; scroll-margin-top: calc(var(--cv-anchor, 170px) - 68px); }
html.cv-smooth { scroll-behavior: smooth; }

/* Layout cards: the main banner (class cv-main) shows View 1; "Watch video" plays its MP4 there (cv-pages.js). */
.cv-page .cv-layout-card .banner.cv-main:not(.cv-show-video) .video-bg,
.cv-page .cv-layout-card .banner.cv-main:not(.cv-show-video) .video-overlay { opacity: 0; visibility: hidden; }
.cv-page .cv-layout-card .banner.cv-main:not(.cv-show-video) .bg { display: block; } /* the theme hides .bg on banners with video */
/* 6 × 3 m cards: the main view fills the card's full height beside the thumbnails (row set to Equal height).
   !important: the banner's square ratio is an ID rule the theme prints for the Height option. */
@media (min-width: 850px) {
	.cv-page .cv-layout-wide .banner.cv-main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: 0 !important; }
}
.cv-page .cv-layout-card .cv-thumb { cursor: pointer; }
/* The theme adds 1em under images that aren't last in a column; drop it in the thumbnail rows so labels line up. */
.cv-page .cv-layout-card .row-collapse .col-inner > .img:not(:last-child) { margin-bottom: 0; }
.cv-page .cv-layout-card .cv-thumb .img-inner,
.cv-page .cv-layout-card .cv-thumb .banner { border-bottom: 3px solid transparent; opacity: .8; transition: opacity .2s, border-color .2s; }
.cv-page .cv-layout-card .cv-thumb:hover .img-inner, .cv-page .cv-layout-card .cv-thumb:hover .banner,
.cv-page .cv-layout-card .cv-thumb.is-active .img-inner, .cv-page .cv-layout-card .cv-thumb.is-active .banner { opacity: 1; border-bottom-color: var(--cv-red); }
.cv-page .cv-layout-card .cv-thumb:focus-visible { outline: 3px solid #287fd2; outline-offset: 2px; }
.cv-page .cv-layout-card .cv-thumb p { margin: 4px 0 8px; font-weight: 700; }

/* Sections: columns keep 30px bottom padding and text keeps its bottom margin, which left ~47px more space
   under a section's content than above it. Balance the last row. */
.cv-page .section-content > .row:last-child { margin-bottom: -30px; }
.cv-page .section-content > .row:last-child > .col > .col-inner > :last-child,
.cv-page .section-content > .row:last-child > .col > .col-inner > :last-child > :last-child,
.cv-page .section-content > .row:last-child > .col > .col-inner > :last-child > :has(+ style:last-child) { margin-bottom: 0; } /* text elements end with their <style> */

/* FAQs (native Accordion, Class "cv-faq"; its Title is the group heading): + / − rows as in the approved design.
   !important only where the theme's toggle rules use it. */
.cv-page h3.accordion_title { font-size: 1em; letter-spacing: .025em; margin: 40px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--cv-red); }
.cv-page .cv-faq .accordion-item { border-bottom: 1px solid #d7d7d7; }
.cv-page .cv-faq .accordion-title { border-top: 0; padding: 22px 40px 22px 0; font-size: 1em; font-weight: 700; color: var(--cv-ink); background: none; }
.cv-page .cv-faq .accordion-title:hover { color: var(--cv-red); }
.cv-page .cv-faq .accordion-title .toggle { position: absolute !important; top: 50% !important; right: 4px; left: auto; width: auto; min-height: 0; margin: 0 !important; padding: 0; opacity: 1; color: var(--cv-red); transform: translateY(-50%); }
.cv-page .cv-faq .accordion-title .toggle i { display: none; }
.cv-page .cv-faq .accordion-title .toggle::before { content: '+'; font-size: 24px; font-weight: 400; line-height: 1; }
.cv-page .cv-faq .accordion-title.active .toggle::before { content: '\2212'; }
.cv-page .cv-faq .accordion-inner { padding: 0 30px 22px 0; }
.cv-page .cv-faq .accordion-inner p, .cv-page .cv-faq .accordion-inner li { font-size: 1em; color: #66686d; }
.cv-page .cv-faq .accordion-inner > :last-child { margin-bottom: 0; }

/* Ribbon tiles: centre the text vertically. */
.cv-page .cv-tile > .col-inner { display: flex; align-items: center; justify-content: center; min-height: 96px; }
.cv-page .cv-tile p { margin: 0; }

/* Video elements fill their column (native <video>, see wp_video_shortcode_library filter). */
.cv-page .wp-video { width: 100% !important; max-width: 100%; margin: 0 0 .6em; }
.cv-page .wp-video video { display: block; width: 100%; height: auto; background: #000; }

/* Text links built with the native "Simple" button style. */
.cv-page .button.is-link { padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Size guide — chooser */
.cv-size-guide .cv-size-set { border: 0; padding: 0; margin: 22px 0; }
.cv-size-guide legend { font-size: .95em; font-weight: 700; margin-bottom: 12px; padding: 0; border: 0; text-transform: none; letter-spacing: 0; width: auto; color: inherit; }
.cv-size-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.cv-size-set + .cv-size-set .cv-size-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 470px; }
.cv-size-chip { position: relative; cursor: pointer; margin: 0; font-weight: 400; }
.cv-size-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cv-size-chip span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 74px; border: 1px solid #d6d8da; background: #fafafa; transition: border-color .15s; }
.cv-size-chip strong { font-size: 1.3em; line-height: 1.2; }
.cv-size-chip small { font-size: .8em; color: #666; }
.cv-size-chip:hover span { border-color: #9a9ca0; }
.cv-size-chip input:checked + span { border: 2px solid var(--cv-red); background: #fff; }
.cv-size-chip input:focus-visible + span { outline: 3px solid #287fd2; outline-offset: 3px; }
.cv-size-note { font-size: .85em; color: #66686d; }
@media (max-width: 849px) { .cv-size-chips, .cv-size-set + .cv-size-set .cv-size-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Size guide — diagram */
.cv-size-diagram { background: #f0f0ee; text-align: center; padding: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.cv-size-diagram svg { width: 100%; height: auto; font-family: inherit; }
@media (max-width: 849px) { .cv-size-diagram svg { max-height: 330px; } }
.cv-size-diagram .cv-dim-frame, .cv-size-diagram .cv-dim-width-line { transition: all .25s ease; }
.cv-dim-selected { margin: 8px 0 12px; color: #66686d; }
.cv-dim-selected strong { font-size: 1.5em; color: var(--cv-ink); }

/* Quote form on the red section (Gravity Forms). */
.cv-page .cv-quote-form .gform_wrapper .gfield_label, .cv-page .cv-quote-form .gform_wrapper legend { color: #fff; font-weight: 700; font-size: .85em; }
.cv-page .cv-quote-form .gform_wrapper .gfield_required { color: #fff; }
.cv-page .cv-quote-form .gform_wrapper input:not([type=submit]), .cv-page .cv-quote-form .gform_wrapper select, .cv-page .cv-quote-form .gform_wrapper textarea { background: #fff; color: #202126; border: 1px solid #fff; border-radius: 0; margin: 0; }
.cv-page .cv-quote-form .gform_wrapper .gform_button { background: #fff; color: var(--cv-ink); border: 0; border-radius: 0; margin: 0; }
.cv-page .cv-quote-form .gform_wrapper .gform_button:hover { background: #f0f0ee; }
.cv-page .cv-quote-form .gform_confirmation_message { color: #fff; font-size: 1.1em; }
.cv-page .cv-quote-form .gform_wrapper .validation_message, .cv-page .cv-quote-form .gform_wrapper .gform_validation_errors h2 { color: #fff; }
.cv-page .cv-quote-form .gfield.is-highlighted textarea { box-shadow: 0 0 0 3px rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
	html.cv-smooth { scroll-behavior: auto; }
	.cv-size-diagram .cv-dim-frame, .cv-size-diagram .cv-dim-width-line,
	.cv-page .cv-layout-card .cv-thumb .img-inner, .cv-page .cv-layout-card .cv-thumb .banner { transition: none; }
}