/*
 * Webshop frontend styles.
 *
 * The public webshop pages are rendered inside the CMS "site" layout, which
 * loads the generated site.css plus whatever is pushed to the `custom-styles`
 * stack — there is no Vite build for these routes. Rather than inline a <style>
 * block in each blade, shared webshop component styles live here and are linked
 * once via `@push('custom-styles')`.
 *
 * All rules are namespaced under a component root class (e.g. `.wpd`) to keep
 * them scoped.
 */

/* ==========================================================================
   Product detail page (.wpd — webshop product detail)
   ========================================================================== */
.wpd { --wpd-gold: var(--color-primary, #FEC000); --wpd-green: #629A36; --wpd-line: #e5e5e5; color: #171717; }
.wpd-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .wpd-grid { grid-template-columns: 5fr 7fr; gap: 3rem; } }

/* Media */
.wpd-no-image { color: #a3a3a3; }
.wpd-note { margin: 0.75rem 0 0; font-style: italic; color: #8a8a8a; }

/* ==========================================================================
   Product image carousel (.wic) — Splide main + synced thumbnails.
   Splide core CSS is already loaded site-wide by the CMS section manager;
   these rules only theme it to match the webshop.
   ========================================================================== */
.wic-main { position: relative; overflow: hidden; background: #fafafa; border: 1px solid var(--wpd-line); border-radius: 0.375rem; }
.wic-main .splide__track { aspect-ratio: 1 / 1; }
.wic-main .splide__slide { display: flex; align-items: center; justify-content: center; }
.wic-main .splide__slide img { width: 100%; height: 100%; object-fit: contain; }
.wic-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 0.875rem; color: #a3a3a3; }

/* Before Splide mounts, only show the first main slide (avoids a stacked flash). */
.wic-main.splide:not(.is-initialized) .splide__list { display: block; }
.wic-main.splide:not(.is-initialized) .splide__slide:not(:first-child) { display: none; }

/* Thumbnails */
.wic-thumbs { margin-top: 1rem; }
.wic-thumbs:not(.is-initialized) { visibility: hidden; }
.wic-thumbs .splide__slide { overflow: hidden; border: 2px solid var(--wpd-line); border-radius: 0.375rem; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease, border-color 0.15s ease; }
.wic-thumbs .splide__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wic-thumbs .splide__slide:hover { opacity: 1; }

/* Splide's own nav-track rule paints a 3px black border on the active thumb, at
   a higher specificity than a plain `.wic-thumbs .splide__slide.is-active`. It
   is matched here so the active thumb carries one border, in the brand colour.
   Widths match the inactive state, so switching thumbs shifts nothing. */
.wic-thumbs .splide__track--nav > .splide__list > .splide__slide.is-active {
    opacity: 1;
    border: 2px solid var(--wpd-gold);
    box-shadow: none;
}

/* Arrows — theme Splide's defaults into the webshop's rounded white buttons.
   Shared by every webshop carousel (product images, related products): a thin
   border at rest, a shadow only on hover. Disabled arrows fade out rather than
   sit there greyed, so a carousel that fits on screen looks like a plain row.
   The line colour falls back for carousels outside a `.wpd` root (the cart). */
.wic .splide__arrow,
.wrp-carousel .splide__arrow { width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--wpd-line, #e5e5e5); border-radius: 9999px; box-shadow: none; opacity: 1; transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.wic .splide__arrow:hover:not(:disabled),
.wrp-carousel .splide__arrow:hover:not(:disabled) { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.wic .splide__arrow:disabled,
.wrp-carousel .splide__arrow:disabled { opacity: 0; }
.wic .splide__arrow svg,
.wrp-carousel .splide__arrow svg { width: 1.1rem; height: 1.1rem; fill: #171717; }
.wic .splide__arrow--prev { left: 0.6rem; }
.wic .splide__arrow--next { right: 0.6rem; }
.wpd-summary { margin-top: 1.5rem; padding: 1rem 1.25rem; background: #f4f4f5; border-radius: 0.5rem; }
/* h3 keeps an !important because the theme forces one on every h3; 1rem is the
   body size, so this only cancels the heading scale. */
.wpd-summary h3 { margin: 0 0 0.6rem; font-size: 1rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #525252; }
.wpd-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; font-size: 0.925rem; border-top: 1px solid #e4e4e7; }
.wpd-summary-row:first-of-type { border-top: 0; }
.wpd-summary-row > span:first-child { color: #525252; }
.wpd-summary-row > span:last-child { font-weight: 600; text-align: right; }

/* Title */
.wpd h1.wpd-title { margin: 0; font-size: 1.5rem !important; line-height: 1.15; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: #1a171b; }
@media (min-width: 1024px) { .wpd h1.wpd-title { font-size: 1.875rem !important; } }
.wpd-title-accent { width: 3.5rem; height: 3px; margin: 0.75rem 0 1.5rem; background: var(--wpd-gold); }
.wpd-request { font-size: 1.5rem; font-weight: 800; }

/* Configurator card */
.wpd-config { border: 1px solid var(--wpd-line); border-radius: 0.5rem; overflow: hidden; }
.wpd-row { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--wpd-line); }
@media (min-width: 640px) { .wpd-row { grid-template-columns: minmax(9rem, 10rem) 1fr 1.75rem; align-items: center; } }

/* Rows where the control stacks an input and a hint below it: the label lines up
   with the inputs rather than being centred against input-plus-hint. The padding
   matches the input's own top padding and border, so the text sits on one line. */
@media (min-width: 640px) {
    .wpd-row:has(.wpd-row-control--stack) { align-items: start; }
    .wpd-row:has(.wpd-row-control--stack) .wpd-row-label { padding-top: calc(0.4rem + 1px); }
}
.wpd-row-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.wpd-row-control { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wpd-row-info { display: flex; align-items: center; justify-content: flex-end; }

/* Info "i" trigger: grey circle on the webshop configurator (theme default is gold). */
.wpd .option-group-info-trigger__button { background-color: #b3b3b3; color: #fff; }
.wpd .option-group-info-trigger__button:hover { background-color: #9a9a9a; filter: none; }
.wpd-row-control--stack { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
/* One height for every control in the configurator. Without it a <select> (which
   uses line-height: normal) and an <input> (which inherits the site's 26px line
   height) end up a few pixels apart. */
.wpd-input, .wpd-select, .wpd-dim-field { height: 2.25rem; }
.wpd-input, .wpd-select { border: 1px solid #d4d4d4; border-radius: 0.25rem; padding: 0.4rem 0.55rem; line-height: normal; background: #fff; color: #171717; }
.wpd-select { width: 100%; max-width: 22rem; }
.wpd-dims { display: flex; align-items: center; gap: 0.5rem; }

/* The B/H marker sits inside the field's border as a prepend, so letter and
   input read as one control instead of two loose elements. */
.wpd-dim-field { display: inline-flex; align-items: stretch; border: 1px solid #d4d4d4; border-radius: 0.25rem; background: #fff; overflow: hidden; }
.wpd-dim-field:focus-within { border-color: #a3a3a3; }
.wpd-dim-prefix { display: flex; align-items: center; padding: 0.4rem 0.55rem; border-right: 1px solid #d4d4d4; font-weight: 500; color: #525252; }
.wpd-dim-field .wpd-input { height: 100%; border: 0; border-radius: 0; }
.wpd-dim-input { width: 4.5rem; }
.wpd-dim-sep { color: #a3a3a3; }
.wpd-dim-unit { color: #737373; }
.wpd-hint { margin: 0; font-size: 0.925rem; color: #8a8a8a; }
.wpd-hint--error { color: #dc2626; }

/* Quantity select (1–10) */
.wpd-qty-select { width: 5rem; max-width: 5rem; }

/* Colour swatches */
.wpd-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wpd-swatch { padding: 0; background: transparent; border: 0; cursor: pointer; }
.wpd-swatch-chip { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; overflow: hidden; border-radius: 0.25rem; background: #f4f4f5; border: 1px solid #d4d4d4; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #737373; }
.wpd-swatch-chip img { width: 100%; height: 100%; object-fit: cover; }
/* 1px border plus a 1px ring: two pixels in total, and the ring keeps the chip
   the same size as the inactive ones (a thicker border would shift the image). */
.wpd-swatch.is-active .wpd-swatch-chip { border-color: var(--wpd-gold); box-shadow: 0 0 0 1px var(--wpd-gold); }
/* Imageless swatch: sizes to its own label instead of the fixed square. */
.wpd-swatch-chip--text { width: auto; min-width: 2.4rem; padding: 0 0.6rem; text-transform: none; white-space: nowrap; }

/* Option pills: every choice visible at once, with its full label */
.wpd-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wpd-pill { padding: 0.5rem 0.85rem; background: #fff; border: 1px solid #d4d4d4; border-radius: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: #525252; line-height: 1.2; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.wpd-pill:hover { border-color: #a3a3a3; color: #262626; }
.wpd-pill.is-active { border-color: var(--wpd-gold); box-shadow: 0 0 0 1px var(--wpd-gold); color: #262626; }

/* Footer: price + cart */
.wpd-config-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.1rem 1.25rem; }
.wpd-price { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.wpd-price small { margin-left: 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #737373; }
.wpd-cart { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem; background: var(--wpd-green); color: #fff; border: 0; border-radius: 0.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease; }
.wpd-cart:hover:not(:disabled) { background: #557f31; }
.wpd-cart:disabled { opacity: 0.45; cursor: not-allowed; }

/* Added-to-cart modal */
.wpd-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wpd-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
/* Wide enough to carry three related-product tiles side by side; scrolls
   internally once the stacked mobile layout outgrows the viewport. */
.wpd-modal__box { position: relative; width: 100%; max-width: 44rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: 0.75rem; padding: 1.75rem 1.25rem 1.5rem; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
@media (min-width: 640px) { .wpd-modal__box { padding: 1.75rem 2rem 1.75rem; } }
.wpd-modal__close { position: absolute; top: 0.5rem; right: 0.65rem; width: 1.75rem; height: 1.75rem; padding: 0; background: transparent; border: 0; font-size: 1.25rem; line-height: 1; color: #9e9e9e; cursor: pointer; border-radius: 9999px; }
.wpd-modal__close:hover { color: #171717; background: #f4f4f5; }
.wpd-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 9999px; background: var(--wpd-green); color: #fff; }
.wpd-modal__icon svg { width: 1.2rem; height: 1.2rem; }
.wpd-modal__title { margin: 0 0 0.4rem; font-size: 0.9375rem !important; font-weight: 800; color: #1a171b; }
.wpd-modal__text { margin: 0 0 1.15rem; font-size: 0.8125rem; line-height: 1.5; color: #525252; }
.wpd-modal__actions { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 480px) { .wpd-modal__actions { flex-direction: row; justify-content: center; } }
.wpd-modal__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.25rem; border-radius: 0.3rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.wpd-modal__btn--primary { background: var(--wpd-green); color: #fff; border: 0; }
.wpd-modal__btn--primary:hover { background: #557f31; color: #fff; }
.wpd-modal__btn--secondary { background: #fff; color: #1a171b; border: 1px solid #d4d4d4; }
.wpd-modal__btn--secondary:hover { border-color: #1a171b; }
.wpd-cart svg { width: 1.05rem; height: 1.05rem; }
.wpd-cart-notice { margin: 0.6rem 0 0; color: var(--wpd-green); font-weight: 600; }

/* USPs */
.wpd-usps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; margin-top: 1.25rem; padding: 0.85rem 1.25rem; background: #f5f5f5; border-radius: 0.5rem; }
.wpd-usp { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.wpd-usp svg { width: 1.1rem; height: 1.1rem; color: var(--wpd-green); }

/* Tabs */
.wpd-tabs { margin-top: 1.75rem; }
.wpd-tab-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 3px solid var(--wpd-gold); }
.wpd-tab { padding: 0.6rem 1.15rem 0.7rem; background: #e7e7e7; border: 0; border-radius: 0.5rem 0.5rem 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #888; cursor: pointer; }
.wpd-tab.is-active { background: var(--wpd-gold); color: #fff; }
.wpd-tab-panel { padding-top: 1.5rem; }
/* Editor content (description, specifications, mounting). Typography is left to
   the site theme — size, line-height, colour, headings and link colour all come
   from there, so this content reads like every other page. Only structural bits
   the theme does not cover are set here. */
.wpd-prose > :first-child { margin-top: 0; }
.wpd-prose > :last-child { margin-bottom: 0; }
.wpd-prose ul, .wpd-prose ol { margin: 0.6rem 0; padding-left: 1.25rem; }
.wpd-prose li { margin: 0.3rem 0; }

/* Inline links, same as the site's `.text-col`: underlined in the running text
   colour, underline off on hover. `:not([class])` leaves editor buttons
   (.btn.btn-primary) to the theme — which is why no `.wpd-prose a.btn` override
   is needed here: the theme's own button styling is never overridden to begin
   with. */
.wpd-prose a:not([class]) { text-decoration: underline; }
.wpd-prose a:not([class]):hover { text-decoration: none; }

/* Editors write the specifications as a plain two-column table with no classes,
   which the theme leaves unstyled: the columns then touch and the rows run
   together. A fixed first column keeps the values on one line. */
.wpd-prose table { width: 100%; margin: 0.5rem 0; border-collapse: collapse; font-size: 0.925rem; }
.wpd-prose th, .wpd-prose td { padding: 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wpd-line); }
.wpd-prose tr:last-child th, .wpd-prose tr:last-child td { border-bottom: 0; }
.wpd-prose th { font-weight: 700; }
.wpd-prose th:first-child, .wpd-prose td:first-child { width: 40%; padding-right: 1.5rem; }
@media (max-width: 639px) { .wpd-prose th:first-child, .wpd-prose td:first-child { width: 45%; padding-right: 1rem; } }

/* ==========================================================================
   Webshop checkout — .wc namespace (cart, details, overview, thank-you)

   Matches the app's offer-tool design language (resources/css/offer-wizard.css):
   rounded 16px cards with soft borders + a faint shadow, green pill CTAs, a gold
   accent, sentence-case section titles and small uppercase micro-labels.
   ========================================================================== */
.wc {
    --wc-ink: #1A171B;
    --wc-mute: #525252;
    --wc-soft: #9E9E9E;
    --wc-line: #EEEEEE;
    --wc-line-strong: #E2E2E2;
    --wc-bg-soft: #FAFAFA;
    --wc-gold: #F6BF40;
    --wc-green: #629A36;
    --wc-green-dark: #5A8B2F;
    color: var(--wc-ink);
}

/* Vertical rhythm of the checkout pages. It lives here rather than as utility
   classes on the container, so the closing space below the last section can be
   set at all: the `lg:!py-12` those carried was !important and beat any rule. */
.wc-page { padding-block: 2rem 4rem; }
@media (min-width: 1024px) { .wc-page { padding-block: 3rem 5rem; } }
.wc-page--thanks { padding-block: 3rem 5rem; }
@media (min-width: 1024px) { .wc-page--thanks { padding-block: 4rem 6rem; } }

.wc-title { margin: 1.25rem 0 0; font-size: 1.6rem !important; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--wc-ink); }
@media (min-width: 1024px) { .wc-title { font-size: 2rem !important; } }
.wc-title-accent { width: 3.5rem; height: 3px; margin: 0.75rem 0 1.75rem; background: var(--wc-gold); }

/* Shared card surface */
.wc-summary, .wc-empty, .wc-details-section, .wc-overview-section, .wc-custom-rows {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Stepper */
.wc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin: 0 0 2rem !important; padding: 0 !important; list-style: none; }
.wc-step { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 !important; padding: 0 !important; list-style: none !important; }
/* flex-basis plus aspect-ratio keep the badge a circle: without them a long
   label can squeeze it narrower than it is tall. */
.wc-step-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; aspect-ratio: 1; border-radius: 9999px; background: #e5e5e5; color: #8a8a8a; font-size: 0.8rem; font-weight: 700; }
.wc-step-label { font-size: 0.95rem; font-weight: 700; color: var(--wc-soft); text-decoration: none; }
a.wc-step-label:hover { color: var(--wc-ink); text-decoration: underline; }
.wc-step.is-active .wc-step-num { background: var(--wc-gold); color: #fff; }
.wc-step.is-active .wc-step-label { color: var(--wc-ink); }

/* Three states, told apart by the badge alone: the current step is a filled
   circle, a finished one keeps its number in an outlined circle, and a step
   still ahead stays plain grey. */
.wc-step.is-complete .wc-step-num { background: #fff; border: 1px solid var(--wc-gold); color: var(--wc-gold); }
.wc-step.is-complete .wc-step-label { color: var(--wc-ink); }

/* Notice banner (e.g. a line became unpriceable during checkout) */
.wc-notice { margin: 0 0 1.75rem; padding: 0.85rem 1.1rem; border: 1px solid #F5C6A5; border-left: 3px solid #C2410C; border-radius: 12px; background: #FFF7ED; color: #9A3412; font-size: 0.9rem; font-weight: 600; }

/* Empty state */
.wc-empty { padding: 3rem 1.5rem; text-align: center; }
.wc-empty-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--wc-ink); }
.wc-empty-body { margin: 0.5rem 0 1.5rem; color: var(--wc-mute); }

/* Layout: lines + summary */
.wc-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .wc-layout { grid-template-columns: 7fr 4fr; gap: 2.5rem; align-items: start; } }
.wc-main { min-width: 0; }

/* Product lines */
.wc-lines { margin: 0; padding: 0; list-style: none; }
.wc-line { position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--wc-line); align-items: start; }
.wc-line:first-child { padding-top: 0.25rem; }
.wc-line:last-child { border-bottom: 0; padding-bottom: 0.25rem; }
@media (min-width: 640px) { .wc-line { grid-template-columns: 5.5rem 1fr auto; gap: 1.5rem; } }
.wc-line-image { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; overflow: hidden; background: var(--wc-bg-soft); border: 1px solid var(--wc-line); border-radius: 12px; }
@media (min-width: 640px) { .wc-line-image { width: 5.5rem; height: 5.5rem; } }
.wc-line-image img { width: 100%; height: 100%; object-fit: contain; }
.wc-no-image { font-size: 0.6rem; color: var(--wc-soft); text-align: center; padding: 0.25rem; }
.wc-line-body { min-width: 0; grid-column: 2 / -1; }
@media (min-width: 640px) { .wc-line-body { grid-column: auto; } }
.wc-line-title { margin: 0; font-size: 1.05rem !important; font-weight: 700; line-height: 1.3; color: var(--wc-ink); text-transform: none; }
.wc-line-title a { color: inherit; text-decoration: none; }
.wc-line-title a:hover { text-decoration: underline; }

/* Options / dimensions as subtle chips */
.wc-line-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.65rem 0 0; }
.wc-line-spec { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.2rem 0.65rem; background: var(--wc-bg-soft); border: 1px solid var(--wc-line); border-radius: 9999px; font-size: 0.75rem; }
.wc-line-spec dt { margin: 0; color: var(--wc-soft); }
.wc-line-spec dt::after { content: ':'; }
.wc-line-spec dd { margin: 0; font-weight: 600; color: var(--wc-ink); }

/* Per-product note (auto-saves on blur) */
.wc-note { margin-top: 0.75rem; }
/* A secondary text action, not a confirmation — green read as a status
   colour here. Neutral by default, underlined on hover like other links. */
.wc-note-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; background: transparent; border: 0; font-size: 0.8rem; font-weight: 600; color: var(--wc-mute); cursor: pointer; }
.wc-note-toggle:hover { color: var(--wc-ink); text-decoration: underline; }
.wc-note-toggle svg { width: 0.9rem; height: 0.9rem; }
.wc-note-body { margin-top: 0.5rem; max-width: 32rem; }
.wc-note-saved { display: inline-block; margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--wc-mute); }

/* Right-hand line controls: quantity stepper, price, remove — one row */
.wc-line-side { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.9rem; }
@media (min-width: 640px) { .wc-line-side { grid-column: auto; text-align: right; } }
.wc-line-remove { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; font-size: 1.3rem; background: transparent; border: 0; color: var(--wc-soft); cursor: pointer; border-radius: 9999px; flex: none; }
.wc-line-remove:hover { color: #dc2626; background: #fee2e2; }

/* Quantity stepper */
.wc-qty { display: inline-flex; align-items: center; border: 1px solid var(--wc-line-strong); border-radius: 9999px; background: #fff; }
.wc-qty-btn { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--wc-ink); font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 9999px; }
.wc-qty-btn:hover:not(:disabled) { background: var(--wc-bg-soft); }
.wc-qty-btn:disabled { color: #d0d0d0; cursor: not-allowed; }
.wc-qty-value { min-width: 2rem; text-align: center; font-size: 0.9rem; font-weight: 700; }

.wc-line-price { min-width: 5.5rem; text-align: right; }
.wc-line-price-total { display: block; font-size: 1.1rem; font-weight: 800; color: var(--wc-ink); }
.wc-line-price-unit { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--wc-soft); }

/* Extra VTW-regels */
.wc-custom-rows { margin-top: 1.75rem; padding: 1.5rem; }
.wc-section-title { margin: 0; font-size: 1.05rem !important; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--wc-ink); }
.wc-section-intro { margin: 0.4rem 0 1rem; font-size: 0.85rem; color: var(--wc-mute); }
.wc-custom-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.wc-custom-item { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--wc-line); }
.wc-custom-item .wc-line-remove { position: static; }
.wc-custom-desc { flex: 1 1 auto; font-size: 0.9rem; }
.wc-custom-price { font-weight: 700; font-size: 0.9rem; }
.wc-custom-form-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.75rem; }
.wc-field { display: flex; flex-direction: column; gap: 0.3rem; }
.wc-field--grow { flex: 1 1 14rem; }

/* Forms */
.wc-field-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wc-mute); }
.wc-input, .wc-select, .wc-textarea { width: 100%; border: 1px solid var(--wc-line-strong); border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.9rem; background: #fff; color: var(--wc-ink); }
.wc-input:focus, .wc-select:focus, .wc-textarea:focus { outline: 2px solid var(--wc-gold); outline-offset: 0; border-color: var(--wc-gold); }
.wc-input--price { max-width: 9rem; }
.wc-textarea { resize: vertical; }
/* A <select> keeps line-height: normal (the site's rule for it outranks ours)
   while the inputs beside it inherit the site's line height, which left the
   salutation dropdown shorter than every other field. A min-height built from
   the same parts — line height, the vertical padding, the two borders — makes
   them match without depending on what a select inherits. */
.wc-input, .wc-select { min-height: calc(var(--lineheight-rem, 1.625rem) + 1.2rem + 2px); }
.wc-error { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: #dc2626; }
.wc-soft { color: var(--wc-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.wc-req { color: #dc2626; }

/* Buttons — pill style, matching the offer tool */
/* Same shape and type as the call to action on the webshop overview
   (`.wmc-cta`): a square-cornered block, uppercase at body size. The pill shape
   and 12px type it had before matched nothing else in the shop. */
.wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; border: 0; border-radius: 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.wc-btn--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.wc-btn--block { display: flex; width: 100%; }
/* A tenth darker than the theme green, so the band reads as the card's own
   surface rather than as a loose button dropped onto it. */
.wc-btn--primary { background: color-mix(in srgb, var(--wc-green) 90%, #000); color: #fff; }
.wc-btn--primary:hover { background: color-mix(in srgb, var(--wc-green) 80%, #000); color: #fff; }
.wc-btn--ghost { background: #fff; color: var(--wc-ink); border: 1px solid var(--wc-line-strong); }
.wc-btn--ghost:hover { border-color: var(--wc-ink); }
.wc-btn--link { background: transparent; color: var(--wc-mute); text-transform: none; letter-spacing: 0; font-weight: 600; padding-left: 0.5rem; padding-right: 0.5rem; }
.wc-btn--link:hover { color: var(--wc-ink); text-decoration: underline; }
.wc-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Summary */
/* Summary card, shaped like the "begin je bestelling" block on the webshop
   overview: a light panel, no border, with the call to action as a full-width
   band along the bottom edge — no card padding beside, above or below it.
   `overflow: hidden` keeps the band inside the rounded corners. */
.wc-summary { padding: 1.75rem; background: #f4f4f5; border: 0; overflow: hidden; }
@media (min-width: 1024px) { .wc-summary { position: sticky; top: 1.5rem; } }
/* Only the card's last child becomes the bottom band — a second block button
   would otherwise be pulled onto the same spot. The width is stated rather than
   left at auto: a <button> shrinks to its text, where an <a> would fill the row. */
.wc-summary > .wc-btn--block:last-child { margin: 1.5rem -1.75rem -1.75rem; width: calc(100% + 3.5rem); }
.wc-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.wc-summary-row--total { font-size: 1rem; font-weight: 700; }
.wc-summary-amount { font-size: 1.4rem; font-weight: 800; color: var(--wc-ink); }
.wc-summary-amount small { margin-left: 0.25rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wc-soft); }
.wc-summary-note { margin: 0.85rem 0 1.35rem; font-size: 0.8rem; color: var(--wc-soft); }
.wc-summary .wc-btn--block + .wc-btn--block { margin-top: 0.6rem; }

/* Compact, read-only order summary shown beside the later checkout steps
   (gegevens, verzending): a short list of what is being ordered plus the
   subtotal, with a link back to the cart to change anything. */
.wc-summary--compact > .wc-section-title { margin-bottom: 1rem; }
.wc-mini-lines { margin: 0; padding: 0; list-style: none; }
.wc-mini-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--wc-line); font-size: 0.85rem; }
.wc-mini-line:last-child { border-bottom: 0; }
.wc-mini-line-title { min-width: 0; line-height: 1.4; color: var(--wc-ink); }
.wc-mini-qty { font-weight: 700; }
.wc-mini-line-price { flex: none; font-weight: 700; white-space: nowrap; color: var(--wc-ink); }
.wc-summary--compact .wc-summary-row--total { margin-top: 0.25rem; padding-top: 0.85rem; border-top: 1px solid var(--wc-line); }
.wc-summary-edit { display: inline-block; margin-top: 1.1rem; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--wc-mute); }
.wc-summary-edit:hover { color: var(--wc-ink); text-decoration: underline; }

/* ==========================================================================
   Details / gegevens (step 2) — .wc-details
   ========================================================================== */
/* Fills its column edge-to-edge: the .wc-layout grid now sets the width, so a
   max-width would only leave the column visibly short of the summary beside it. */
.wc-details { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.wc-details-section { padding: 1.5rem; }
@media (min-width: 768px) { .wc-details-section { padding: 2rem; } }
.wc-details-section > .wc-section-title { margin-bottom: 1.1rem; }
/* Four columns, so a row can be split 2+2 (half and half) or 3+1 / 1+3 for a
   street with its house number and a postcode with its town. Fields always fill
   their cell — a max-width would leave the row visibly short of the edge. */
.wc-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; }
@media (min-width: 640px) { .wc-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wc-form-field { display: flex; flex-direction: column; gap: 0.35rem; }
@media (min-width: 640px) { .wc-form-field { grid-column: span 2; } }
.wc-form-field--full { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .wc-form-field--narrow { grid-column: span 1; }
    .wc-form-field--wide { grid-column: span 3; }
}
.wc-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--wc-ink); cursor: pointer; }

/* Checkboxes and radios share one look, matching the rest of the site: a light
   grey box that fills with the brand colour when checked — not the green these
   used, and not the browser's own control. `accent-color` can only colour the
   checked state, so the box itself is drawn with appearance: none.
   The mark inside is dark rather than white: white on this yellow is barely
   legible, while the checked colour still reads as the brand's. */
.wc input[type="checkbox"],
.wc input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    border: 1px solid var(--wc-line-strong);
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wc input[type="checkbox"] { border-radius: 0.25rem; }
.wc input[type="radio"] { border-radius: 9999px; }

.wc input[type="checkbox"]:checked,
.wc input[type="radio"]:checked { background-color: var(--wc-gold); border-color: var(--wc-gold); }

.wc input[type="checkbox"]::before,
.wc input[type="radio"]::before {
    content: '';
    background: var(--wc-ink);
    transform: scale(0);
    transition: transform 0.12s ease;
}
.wc input[type="checkbox"]::before {
    width: 0.65rem;
    height: 0.65rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.wc input[type="radio"]::before { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }

.wc input[type="checkbox"]:checked::before,
.wc input[type="radio"]:checked::before { transform: scale(1); }

.wc input[type="checkbox"]:focus-visible,
.wc input[type="radio"]:focus-visible { outline: 2px solid var(--wc-gold); outline-offset: 2px; }

/* Radios rendered as selectable cards */
.wc-radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.wc-radio { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border: 1px solid var(--wc-line-strong); border-radius: 12px; font-size: 0.9rem; color: var(--wc-ink); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.wc-radio:hover { border-color: var(--wc-gold); }
.wc-radio:has(input:checked) { border-color: var(--wc-gold); background: #fffdf5; }
.wc-radio-price { margin-left: auto; font-weight: 700; color: var(--wc-green); white-space: nowrap; }
.wc-details-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

/* ==========================================================================
   Overview (step 4) — .wc-overview
   ========================================================================== */
.wc-overview { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .wc-overview { grid-template-columns: 7fr 4fr; gap: 2.5rem; align-items: start; } }
.wc-overview-main { display: grid; gap: 1.5rem; min-width: 0; }
.wc-overview-section { padding: 1.5rem; }
@media (min-width: 768px) { .wc-overview-section { padding: 2rem; } }
.wc-overview-section > .wc-section-title { margin-bottom: 1rem; }
.wc-overview-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .wc-overview-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wc-overview-subtitle { margin: 0 0 0.5rem; font-size: 0.68rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wc-soft); }
.wc-address { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--wc-ink); }
.wc-overview-notes { margin-top: 1.5rem; }
.wc-overview-notes p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--wc-ink); }
.wc-line-note { margin: 0.5rem 0 0; font-size: 0.8rem; font-style: italic; color: var(--wc-mute); }
.wc-line--custom { grid-template-columns: 5rem 1fr auto; }
.wc-line--custom .wc-line-image { border-style: dashed; background: #fff; }

/* Overview summary breakdown (invoice-style rows) */
.wc-overview .wc-summary-row { padding: 0.3rem 0; font-size: 0.9rem; }
.wc-overview .wc-summary-row span:last-child { font-weight: 600; }
.wc-overview .wc-summary-row--total { margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--wc-line); font-size: 1.05rem; }
.wc-overview .wc-summary-row--total span:last-child { font-weight: 800; }
/* Akkoordverklaringen: als blok gescheiden van de bedragen erboven en van de
   bestelknop eronder, zodat de knop niet tegen de laatste checkbox aan plakt. */
.wc-checks { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0 1.75rem; }
/* Geen <label> om de tekst: alleen het vakje zelf is klikbaar. Deze teksten
   lopen over meerdere regels, dus het vakje staat bovenaan uitgelijnd in plaats
   van gecentreerd zoals de enkelregelige vinkjes elders in de checkout. */
.wc-check--conditions { align-items: flex-start; cursor: default; }
.wc-check--conditions input { margin-top: 0.15rem; }
.wc-check--conditions a { color: inherit; text-decoration: underline; }
.wc-check--conditions a:hover { color: var(--wc-green); }

/* ==========================================================================
   Thank you (bedankt) — .wc-thankyou
   ========================================================================== */
.wc-thankyou { max-width: 34rem; margin: 0 auto; text-align: center; padding: 1.5rem 0; }
.wc-thankyou-check { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1.25rem; border-radius: 9999px; background: var(--wc-green); color: #fff; }
.wc-thankyou-check svg { width: 2rem; height: 2rem; }
.wc-thankyou-title { margin: 0; font-size: 1.6rem !important; font-weight: 800; text-transform: none; color: var(--wc-ink); }
.wc-thankyou-order { margin: 0.75rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--wc-mute); }
.wc-thankyou-body { margin: 1rem 0 1.75rem; font-size: 0.95rem; line-height: 1.6; color: var(--wc-mute); }