/* Veton Charger Configurator — /inquiry/ page styling. Header/footer come from the theme; only the wizard body is styled here. */ /* Cookiebot revisit widget defaults to bottom-left and gets injected on * by Cookiebot's JS — outside our page wrapper, so we can't scope * with a parent class. Desktop keeps the default left position; on mobile * we flip it to the right so it doesn't overlap the sticky bar / CTAs. */ @media (max-width: 767.98px) { #CookiebotWidget { left: auto !important; right: 10px !important; } } /* ============ Step indicator (1..4) ============ */ .vcc-steps { position: relative; padding: 110px 0 50px; } /* Connector line spans the full viewport width — sits behind the circles (which have a white background to mask it). */ .vcc-steps::before { content: ""; position: absolute; top: 130px; /* padding-top (110) + circle vertical center (20) */ left: 0; right: 0; height: 1px; background: #dbdadb; z-index: 0; } .vcc-steps-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: space-between; position: relative; counter-reset: vcc-step; } .vcc-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; } .vcc-step-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 5px; font-size: 0.95rem; font-weight: 300; line-height: 1; } /* White halo that masks the connector line for ~15px on either side of the circle, so the line visually breaks around each step. */ .vcc-step-circle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -15px; right: -15px; background: #fff; } .vcc-step-circle .icon-vo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; color: #b9b9b9; /* future state — overridden below for past/active */ } .vcc-step-num { position: relative; z-index: 1; font-size: 1.2rem; font-weight: 500; color: #b9b9b9; /* future state — overridden below */ } .vcc-step-label { font-size: 0.875rem; font-weight: 500; color: #b9b9b9; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Past steps — circle ring softened to cream, number stays gold (editable). */ .vcc-step.is-completed .icon-vo { color: #f9f5ee; } .vcc-step.is-completed .vcc-step-num { color: #C49E60; } .vcc-step.is-completed .vcc-step-label { color: #C49E60; } /* Active step — full gold. */ .vcc-step.is-active .icon-vo { color: #C49E60; } .vcc-step.is-active .vcc-step-num { color: #C49E60; } .vcc-step.is-active .vcc-step-label { color: #C49E60; } /* Step 1, once completed, stays non-editable — gray number and label. */ .vcc-step.is-completed:first-child .vcc-step-num { color: #b9b9b9; } .vcc-step.is-completed:first-child .vcc-step-label { color: #b9b9b9; } /* Clickable completed step. The anchor reproduces .vcc-step's flex-column * layout so it spans the full step area — circle + label + the blank * space between them are all part of the same click target. Hover * darkens the gold to signal the affordance. Future steps render the * same anchor in markup (so JS can promote them when the user has * already visited that step in-session), but pointer events are off so * the click is inert until the step is unlocked. */ .vcc-step-link { display: flex; flex-direction: column; align-items: center; width: 100%; cursor: pointer; text-decoration: none; } .vcc-step.is-future .vcc-step-link { pointer-events: none; cursor: default; } .vcc-step-link:hover .vcc-step-num, .vcc-step-link:hover .vcc-step-label, .vcc-step-link:focus-visible .vcc-step-num, .vcc-step-link:focus-visible .vcc-step-label { color: #a07f3f; } /* ============ Header (title + VAT toggle) ============ */ .vcc-inquiry-body { padding: 30px 0 0; } /* Installation page (the /inquiry/ route, labelled "Installation" in the * step bar) doesn't surface prices in the body — the VAT toggle has nothing * to flip there, so hide it on every viewport. */ .vcc-installation-page .vcc-vat-toggle { display: none; } /* Submit-time validation banner — appears above the form when the user * hits the next-step CTA with required fields still empty. JS in * questionnaire.js (/installation/) and details.js (/details/) injects * the same `.alert.alert-danger` markup; the high-specificity selector * beats Bootstrap's own `.alert` defaults (border-radius + margin-bottom) * which the theme loads after our stylesheet. */ /* Global alert reset for the configurator step pages (all main elements * carry .vcc-inquiry-page). Two jobs: * 1. Drop border-radius — the flat look of the rest of the page. * 2. Force descendants to `color: inherit` so the contextual text * colour Bootstrap puts on .alert-warning / .alert-secondary / * .alert-danger actually reaches the title and paragraph. Without * this the theme's generic `h4 { color: ... }` / `p { color: ... }` * win on specificity and steamroll the amber / grey / red. */ .vcc-inquiry-page .alert { border-radius: 0; } .vcc-inquiry-page .alert :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, em) { color: inherit; } /* Pin the contextual alert text colours to Bootstrap 4 defaults. The * theme's bootstrap build sometimes uses the BS5 `--bs-alert-color` * custom property instead of a flat `color`, which doesn't propagate * via `color: inherit` on our child rules. Setting the canonical hex * directly on the alert element ensures the descendant rule above * inherits the right amber / grey / red regardless of which Bootstrap * variant is active in the theme. */ .vcc-inquiry-page .alert.alert-warning { color: #856404; } .vcc-inquiry-page .alert.alert-secondary { color: #383d41; } .vcc-inquiry-page .alert.alert-danger { color: #721c24; } /* Antialiased text in every alert — title + body alike — so the * contextual amber/grey/red text reads crisp on the lighter alert * background. Universal child selector beats per-tag theme rules * (specificity 0,2,0 + 0,0,1 = 0,2,1). */ .vcc-inquiry-page .alert, .vcc-inquiry-page .alert * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Symmetric 32px gap below alerts that sit directly under the page * header — matches the .vcc-inquiry-header's own margin-bottom so the * alert reads as a balanced sub-section of the heading. Specificity * 0,2,0 beats the per-alert custom margins (multi-charger, project- * pricing, vcc-important) on the cascade. */ .vcc-inquiry-header + .alert { margin-bottom: 32px; } .vcc-inquiry-page .alert.vcc-inquiry-validation-alert { margin-bottom: 32px; /* Entry / exit animation. JS inserts the node without .is-shown so it * starts faded + nudged up; the next tick the class lands and the * transition runs. Hide reverses it; the JS removes the node on * transitionend (with a safety timeout fallback). */ opacity: 0; transform: translateY(-12px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .vcc-inquiry-page .alert.vcc-inquiry-validation-alert.is-shown { opacity: 1; transform: translateY(0); } .vcc-inquiry-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; } .vcc-inquiry-title { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: 0; color: #2A2A2A; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* iOS-style pill toggle — mirrors the configure page. */ .vcc-vat-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; flex-shrink: 0; } .vcc-vat-toggle .vcc-vat-label { font-size: 1rem; } .vcc-vat-toggle .vcc-vat-label { color: #737373; font-weight: 300; transition: color 200ms ease-out; user-select: none; } .vcc-vat-toggle[data-mode="excl"] .vcc-vat-label[data-side="excl"], .vcc-vat-toggle[data-mode="incl"] .vcc-vat-label[data-side="incl"] { color: #C49E60; } .vcc-vat-toggle .vcc-vat-switch { width: 48px; height: 26px; border-radius: 14px; background: #f5f5f5; border: 0; padding: 0; position: relative; flex-shrink: 0; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25); } .vcc-vat-toggle[data-mode="incl"] .vcc-vat-switch { background: #f9f5ee; } .vcc-vat-toggle .vcc-vat-knob { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #C49E60; top: 3px; left: 3px; transition: left 200ms ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .vcc-vat-toggle[data-mode="incl"] .vcc-vat-knob { left: calc(100% - 23px); } .vcc-vat-toggle .vcc-vat-switch:focus { outline: none; } /* ============ Inquiry items list ============ */ .vcc-inquiry-items { margin-bottom: 0; min-height: 150px; } .vcc-inquiry-line { display: grid; /* image | name (~half width) | qty | remove | attrs (flex) | price */ grid-template-columns: 80px minmax(140px, 220px) auto 30px 1fr auto; gap: 30px; align-items: center; padding: 24px 0; border-bottom: 1px solid #dbdadb; } .vcc-inquiry-line:first-child { border-top: 1px solid #dbdadb; } .vcc-inquiry-items .vcc-inquiry-line:last-child { border-bottom: 0; } .vcc-inquiry-line-image { width: 80px; height: 80px; background: #f1f1f1; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; position: relative; } .vcc-inquiry-line-image img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Stacked composite: each layer is absolutely positioned over the previous * one — shadow at z:1 → body → trim → cable, matching the composer. */ .vcc-inquiry-line-image--stacked .vcc-inquiry-line-image-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; max-height: none; } .vcc-inquiry-line-image-layer[data-layer="shadow"] { z-index: 1; } .vcc-inquiry-line-image-layer[data-layer="body"] { z-index: 2; } .vcc-inquiry-line-image-layer[data-layer="trim"] { z-index: 3; } .vcc-inquiry-line-image-layer[data-layer="cable"] { z-index: 4; } .vcc-inquiry-line-name { font-size: 1.25rem; font-weight: 700; color: #2A2A2A; text-decoration: none; transition: color 0.18s ease-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-line-name:hover, .vcc-inquiry-line-name:focus { color: #C49E60; text-decoration: none; outline: none; } .vcc-inquiry-line-qty { position: relative; display: inline-flex; align-items: center; } .vcc-inquiry-line-qty .vcc-qty-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 4px 8px 4px 6px; border: 0; background: transparent; font-size: 1.25rem; font-weight: 700; color: #2A2A2A; cursor: pointer; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-line-qty .vcc-qty-select:focus { outline: none; } .vcc-inquiry-line-qty .icon-arrow-down-simple { position: absolute; right: 4px; top: 50%; transform: translateY(calc(-50% + 2px)); font-size: 0.75rem; color: #8C8C8C; pointer-events: none; } .vcc-inquiry-line-remove { background: transparent; border: 0; padding: 4px; font-size: 1.1rem; color: #656565; cursor: pointer; line-height: 1; transition: color 0.18s ease-out; } .vcc-inquiry-line-remove:hover, .vcc-inquiry-line-remove:focus { color: #C49E60; outline: none; } /* One column per category — auto-flow column lets each attribute claim an equal slice of the available width, so 3 attrs spread out further than 4. */ .vcc-inquiry-line-attrs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 30px; padding-left: 40px; /* extra breathing room after the trash icon */ } .vcc-inquiry-line-attr { min-width: 0; font-size: 1.1rem; font-weight: 500; color: #656565; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-line-price { font-size: 1.1rem; font-weight: 700; color: #2A2A2A; text-align: right; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-empty { margin: 40px 0; text-align: center; color: #737373; font-weight: 300; } /* ============ Optional extras section ============ */ .vcc-inquiry-extras { margin: 20px 0 30px; } .vcc-inquiry-extras-title { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; color: #2A2A2A; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-extras-list { list-style: none; padding: 0; margin: 0; } .vcc-inquiry-extra { display: grid; /* label (flex) | qty | trash | price */ grid-template-columns: 1fr auto 30px auto; align-items: center; gap: 30px; padding: 16px 24px; background: #f1f1f1; margin-bottom: 4px; } .vcc-inquiry-extra-label { font-size: 1.1rem; font-weight: 500; color: #2A2A2A; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-extra-qty { position: relative; display: inline-flex; align-items: center; } .vcc-inquiry-extra-qty .vcc-qty-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 4px 8px 4px 6px; border: 0; background: transparent; font-size: 1.25rem; font-weight: 500; color: #2A2A2A; cursor: pointer; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcc-inquiry-extra-qty .vcc-qty-select:focus { outline: none; } .vcc-inquiry-extra-qty .icon-arrow-down-simple { position: absolute; right: 4px; top: 50%; transform: translateY(calc(-50% + 2px)); font-size: 0.75rem; color: #8C8C8C; pointer-events: none; } .vcc-inquiry-extra-remove { background: transparent; border: 0; padding: 4px; font-size: 1.1rem; color: #656565; cursor: pointer; line-height: 1; transition: color 0.18s ease-out; } .vcc-inquiry-extra-remove:hover, .vcc-inquiry-extra-remove:focus { color: #C49E60; outline: none; } .vcc-inquiry-extra-price { font-size: 1.1rem; font-weight: 700; color: #2A2A2A; text-align: right; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============ No-pricing mode (region = INT) ============ The inquiry page renders fully but every price element is suppressed. Grid templates drop their last "auto" track so the rows close cleanly without an empty price column. */ .vcc-no-pricing .vcc-inquiry-line-price, .vcc-no-pricing .vcc-inquiry-extra-price, .vcc-no-pricing .vcc-inquiry-subtotal, .vcc-no-pricing .vcc-project-pricing-notice, .vcc-no-pricing .vcc-vat-toggle { display: none !important; } .vcc-no-pricing .vcc-inquiry-line { grid-template-columns: 80px minmax(140px, 220px) auto 30px 1fr; } .vcc-no-pricing .vcc-inquiry-extra { grid-template-columns: 1fr auto 30px; } /* ============ Subtotal ============ */ .vcc-inquiry-subtotal { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0; border-top: 1px solid #dbdadb; margin-bottom: 50px; } .vcc-inquiry-subtotal-label, .vcc-inquiry-subtotal-amount { font-size: 1.2rem; font-weight: 700; color: #2A2A2A; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============ Installation card ============ */ .vcc-install-card { padding: 20px; border: 1px solid #dbdadb; margin-bottom: 30px; } .vcc-install-title { margin: 0 0 14px; font-size: 1.5rem; font-weight: 700; color: #2A2A2A; } /* Re-uses the same .vcc-radio component as the configure page — including the hover/focus ripple. */ .vcc-install-card .vcc-radio { display: flex; align-items: center; position: relative; cursor: pointer; line-height: 20px; margin: 10px 0; user-select: none; } .vcc-install-card .vcc-radio input { position: absolute; opacity: 0; pointer-events: none; } .vcc-install-card .vcc-radio .vcc-radio-text { color: #2A2A2A; font-size: 1.1rem; font-weight: 300; } /* Pearl-style radio — transparent body with an inset shadow giving a * "carved-in" look when unchecked; on check the background fills with the * gold accent and a cream ring picks up the border. Mirrors the accessory * pearl checkbox on /extras/. */ .vcc-install-card .vcc-radio .vcc-radio-box { position: relative; display: inline-block; margin-right: 10px; width: 25px; height: 25px; border-radius: 50%; border: 1px solid transparent; background: transparent; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); flex-shrink: 0; transition: background-color 320ms ease, border-color 320ms ease; } .vcc-install-card .vcc-radio input:focus-visible + .vcc-radio-box { border-color: #C49E60; } .vcc-install-card .vcc-radio input:checked + .vcc-radio-box { border-color: #ECE0CB; background-color: #C49E60; } /* ============ Important info block ============ * Bootstrap `.alert.alert-secondary` regelt nu het grijze palet + de border. * We tweaken alleen layout (vlakke hoeken, eigen padding) en houden de * typografie van title + p zodat ze niet door de alert-default platgeslagen * worden. */ .vcc-important { padding: 20px; margin-bottom: 0; border-radius: 0; } /* Nested .vcc-important inside the questionnaire pane has no breathing * room below — the pane's own bottom padding handles the gap. */ .vcc-questionnaire-inner .vcc-important { margin-bottom: 0; } .vcc-important-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; } .vcc-important p { margin: 0 0 14px; font-size: 1rem; font-weight: 300; line-height: 1.5; } .vcc-important p:last-child { margin-bottom: 0; } /* ============ Apartment alert (questionnaire) ============ * Yellow Bootstrap `.alert.alert-warning` shown by questionnaire.js when * the customer picks "in an apartment building". Slots in where the * "Belangrijk" block normally sits, so we mirror its margin treatment + * add a clear 40px gap above so it reads as a deliberate notice rather * than crowding the dropdowns. Chained `.alert.vcc-appartement-alert` * out-specifies Bootstrap's `.alert { margin-bottom: 1rem }`. Title + * body typography mirror `.vcc-important` — same heading scale, same * 1rem body, same 14px paragraph rhythm — only the colour swings to the * Bootstrap warning brown so it reads as the same family of notice. */ .alert.vcc-appartement-alert { margin-top: 40px; margin-bottom: 0; padding: 20px; border-radius: 0; } /* Theme's `.vcc-installation-page p { color: #656565 }` outranks a * bare `color: inherit` on this nested p — pin the brown explicitly via * the chained selector below so the warning palette wins regardless of * where the alert lives in the DOM. */ .alert.vcc-appartement-alert .vcc-appartement-alert-title, .alert.vcc-appartement-alert .vcc-appartement-alert-body, .alert.vcc-appartement-alert .vcc-appartement-alert-body p { color: #856404; } .vcc-appartement-alert-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; } .vcc-appartement-alert-title[hidden] { display: none; } .vcc-appartement-alert-body p { margin: 0 0 14px; font-size: 1rem; font-weight: 500; line-height: 1.5; } .vcc-appartement-alert-body p:last-child { margin-bottom: 0; } /* ============ Actions ============ */ /* From step 3 onwards the actions row holds a left-aligned "Back" and a * right-aligned forward CTA. `space-between` works for both two-button * (steps 3/4) and single-button setups (legacy fallback — the lone * .vcc-inquiry-next still ends up on the right because flexbox pushes * the only child against the start, and we counter that by setting * `margin-left: auto` on .vcc-inquiry-next so it always hugs the right * edge regardless of whether a back button is present). */ .vcc-inquiry-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 40px; } .vcc-inquiry-actions .vcc-inquiry-next, .vcc-inquiry-actions .vcc-details-next { margin-left: auto; } /* "Your details" CTA stays disabled until the user picks all-in or own * installer. JS toggles .is-disabled based on the radio state; CSS gates * pointer events so the link's href can't be reached. Animate the opacity * so the transition from disabled → enabled (and back) is a smooth fade * rather than an instant flip. */ /* Beat the theme's `.btn.btn-secondary` (specificity 0,2,0) — it has its own * `transition` shorthand that doesn't include `opacity`, and the theme CSS * loads after ours so on a tie it wins. Triple-class selector (0,3,0) takes * the cascade decisively. */ .btn.btn-secondary.vcc-inquiry-next, .btn.btn-secondary.vcc-extras-next { opacity: 1; transition: opacity 300ms ease-out; } .btn.btn-secondary.vcc-inquiry-next.is-disabled, .btn.btn-secondary.vcc-extras-next.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* ============ Help line (shared visual with configure page) ============ */ .vcc-inquiry-page .vcc-help-line { position: relative; margin: 0; padding: 30px 0; color: #656565; font-size: 1rem; font-weight: 300; line-height: 1.5; } /* Theme-default `p { margin-bottom: 1em }` leaves a phantom gap below * the help-line text — zero it out so the help-line padding is the * only thing controlling spacing below. */ .vcc-inquiry-page .vcc-help-line p { margin: 0; } /* Full-viewport hairline above the help line — escapes the .container width by anchoring to the viewport via translateX. */ .vcc-inquiry-page .vcc-help-line::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: #dbdadb; } .vcc-inquiry-page .vcc-help-link { color: #C49E60; font-size: 1rem; font-weight: 300; text-decoration: none; transition: color 0.18s ease-out; } .vcc-inquiry-page .vcc-help-link:hover, .vcc-inquiry-page .vcc-help-link:focus { color: #9D783A; text-decoration: none; outline: none; } /* ============ Responsive (collapse line into stacked layout) ============ */ /* ---- Mobile-only typography + step-bar dimensions ---- * These are tighter values for narrow viewports; desktop keeps the original * sizing above. Kept separate from the inquiry-line layout media query * (which fires at 991px) because the step bar / title only need to shrink * once we're actually phone-sized. */ @media (max-width: 767.98px) { .vcc-steps { padding: 75px 0 0; } .vcc-steps::before { top: 95px; /* padding-top (75) + circle vertical center (20) */ } .vcc-inquiry-body { padding-top: 20px; } .vcc-inquiry-title { font-size: 1.5rem; margin-bottom: 15px; } .vcc-inquiry-header { margin-bottom: 10px; } /* Step bar: hide labels for non-active steps so the row fits a narrow * viewport. The active step claims more flex width so its label stays on * a single line; inactive siblings shrink to give back the space. */ .vcc-step:not(.is-active) .vcc-step-label { display: none; } .vcc-step.is-active { flex: 2; } .vcc-step.is-active .vcc-step-label { white-space: nowrap; } /* Header: VAT toggle moves to its own row above the heading, right-aligned, * with a full-width hairline separator between toggle and title. The 100vw * trick lets the line escape the .container width — same pattern as * .vcc-help-line::before below. */ .vcc-inquiry-header { flex-direction: column-reverse; align-items: stretch; gap: 0; } .vcc-inquiry-header .vcc-vat-toggle { position: relative; justify-content: flex-end; padding: 0 0 16px; margin: 0 0 24px; } .vcc-inquiry-header .vcc-vat-toggle::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: #dbdadb; } /* Install card: strip padding + border on phones so the section title and * radios sit flush in the narrow viewport. */ .vcc-install-card { padding: 0; border: 0; } } @media (max-width: 991px) { /* Mobile inquiry-line: square thumb on the left, name + price stacked at * the top of the right column, qty + delete grouped at the bottom of the * right column, and the attribute summary on a full-width row below. */ .vcc-inquiry-line { grid-template-columns: 33% max-content auto 1fr; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "image name name name" "image price price price" "image . . . " "image qty remove ." "attrs attrs attrs attrs"; row-gap: 4px; column-gap: 16px; align-items: start; padding: 20px 0; } /* Image fills the left column at ~1/3 of the row, square aspect. */ .vcc-inquiry-line-image { width: 100%; height: auto; aspect-ratio: 1; } .vcc-inquiry-line-image { grid-area: image; } .vcc-inquiry-line-name { grid-area: name; align-self: start; } .vcc-inquiry-line-price { grid-area: price; text-align: left; font-weight: 500; } .vcc-inquiry-line-qty { grid-area: qty; justify-self: start; align-self: end; } .vcc-inquiry-line-remove { grid-area: remove; justify-self: start; align-self: end; } .vcc-inquiry-line-attrs { grid-area: attrs; display: block; grid-auto-flow: row; grid-auto-columns: auto; gap: 0; padding-left: 0; padding-top: 16px; text-align: center; } /* Inline join the attribute spans with " / " separators on mobile. */ .vcc-inquiry-line-attr { display: inline; } .vcc-inquiry-line-attr + .vcc-inquiry-line-attr::before { content: " / "; } }