/* Gabion Wall Creator — [itc_build_gabion_wall]. Scoped to .wf-gabion-wall;
   the step blocks follow the look of the other builders in inc/custom/. */

.wf-gabion-wall { --wfw-green: #03ba48; --wfw-green-dark: #0a8f3c; --wfw-grey: #e6e6e6; --wfw-ink: #1f2937; }

/* Step blocks */
.wf-gabion-wall .step-block { position: relative; border-radius: 25px; background-color: var(--wfw-grey); margin-bottom: 40px; padding-top: 1px; display: flex; align-items: center; }
.wf-gabion-wall .step-block .circle-box { position: relative; width: 96px; overflow: hidden; margin-top: -14px; align-self: flex-end; margin-left: 18px; flex-shrink: 0; }
.wf-gabion-wall .step-block .circle { width: 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: -12px; background-color: var(--wfw-green); color: #fff; font-size: 14px; line-height: 1.1; }
.wf-gabion-wall .step-block .circle p { margin: 0; }
.wf-gabion-wall .step-block .num { font-size: 32px; line-height: 1; }
.wf-gabion-wall .step-block .info-box { width: calc(100% - 114px); padding: 22px 28px 22px 22px; }
.wf-gabion-wall .step-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; }
.wf-gabion-wall .step-head label { font-size: 20px; font-weight: 700; color: var(--wfw-ink); margin: 0; }
.wf-gabion-wall .step-note { font-size: 13px; color: #6b7280; }
/* Step 3's "Compare options": opens the gabion page's compare popup (client, 2026-10-07);
   since 2026-10-08 a small link with an (i) right after the title (client). */
.wf-gabion-wall .step-head:has(.wf-wall-compare) { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 14px; }
.wf-gabion-wall button.wf-wall-compare { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; width: auto; height: auto; min-height: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--wfw-green-dark); white-space: nowrap; cursor: pointer; }
.wf-gabion-wall button.wf-wall-compare:hover, .wf-gabion-wall button.wf-wall-compare:focus-visible { background: none; color: var(--wfw-green-dark); text-decoration: underline; }
.wf-gabion-wall button.wf-wall-compare[hidden] { display: none; }
.wf-gabion-wall .wf-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border: 1.2px solid currentColor; border-radius: 50%; font-size: 7px; line-height: 1; text-decoration: none; }

/* Optional steps (6, 7): collapsed by default; the head toggles, a strip previews the choice */
.wf-gabion-wall .step-toggle { align-items: center; flex-wrap: nowrap; cursor: pointer; user-select: none; margin-bottom: 10px; }
.wf-gabion-wall .step-toggle label { cursor: pointer; }
.wf-gabion-wall .step-toggle-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-gabion-wall .step-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wf-gabion-wall .wf-tag-optional { background: #d1d5db; color: #374151; text-transform: uppercase; letter-spacing: .05em; }
.wf-gabion-wall .wf-tag-summary { background: #d1fae5; color: #065f46; font-size: 11px; padding: 4px 8px; border-radius: 999px; }
.wf-gabion-wall .wf-tag-summary.is-empty { background: #f3f4f6; color: #4b5563; }
.wf-gabion-wall .step-toggle-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--wfw-ink); font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.wf-gabion-wall .step-toggle:hover .step-toggle-btn { border-color: var(--wfw-green); color: var(--wfw-green-dark); }
.wf-gabion-wall .step-toggle-btn:focus-visible { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
.wf-gabion-wall .step-chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.wf-gabion-wall .step-collapsible.is-open .step-chevron { transform: translateY(2px) rotate(-135deg); }
.wf-gabion-wall .step-body { padding-top: 12px; border-top: 1px solid #d1d5db; }
.wf-gabion-wall .step-body-intro { margin: 0 0 12px; font-size: 13px; color: #4b5563; }

/* Option cards */
.wf-gabion-wall .wf-cards { display: grid; gap: 10px; }
.wf-gabion-wall .wf-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-gabion-wall .wf-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-gabion-wall .wf-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-gabion-wall .wf-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0; background: #fff; border: 2px solid #d1d5db; border-radius: 10px; cursor: pointer; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.wf-gabion-wall .wf-card:hover { border-color: #9ca3af; }
.wf-gabion-wall .wf-card input { position: absolute; opacity: 0; pointer-events: none; }
/* One selection look for every choice box of steps 1-4 (client, 2026-10-08):
   a radio dot, and when picked a solid green box with white text - the
   selected height pill's look. Unpicked: white with a grey border. */
.wf-gabion-wall .wf-card:has(input[type="radio"])::before { content: ""; flex: 0 0 auto; align-self: center; width: 18px; height: 18px; border: 2px solid #9ca3af; border-radius: 50%; background: #fff; box-sizing: border-box; }
.wf-gabion-wall .wf-card:has(input:checked) { background: var(--wfw-green); border-color: var(--wfw-green-dark); }
.wf-gabion-wall .wf-card:has(input[type="radio"]:checked)::before { border-color: #fff; background: radial-gradient(circle, #fff 0 4px, transparent 4.5px); }
.wf-gabion-wall .wf-card:has(input:checked) .wf-card-title, .wf-gabion-wall .wf-card:has(input:checked) .wf-card-coat { color: #fff; }
.wf-gabion-wall .wf-card:has(input:focus-visible) { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
.wf-gabion-wall .wf-card.is-unavailable { opacity: .55; }
.wf-gabion-wall .wf-card.is-disabled { opacity: .6; cursor: default; }
.wf-gabion-wall .wf-card-stack { align-items: stretch; }
.wf-gabion-wall .wf-card-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 5px; }
.wf-gabion-wall .wf-card-icon-wide { height: 36px; width: 46px; }
.wf-gabion-wall .wf-card-icon svg { width: 100%; height: 100%; display: block; }
.wf-gabion-wall .wf-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.wf-gabion-wall .wf-card-title { font-weight: 700; color: var(--wfw-ink); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wf-gabion-wall .wf-card-use { font-size: 13px; font-weight: 600; color: var(--wfw-green-dark); }
.wf-gabion-wall .wf-card-text { font-size: 12.5px; color: #4b5563; line-height: 1.4; }
.wf-gabion-wall .wf-card-sub { font-size: 12px; color: #6b7280; }
.wf-gabion-wall .wf-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f3f4f6; font-size: 12.5px; color: #6b7280; }
.wf-gabion-wall .wf-card-foot strong { color: var(--wfw-green-dark); font-size: 14px; }

/* Tags & badges */
.wf-gabion-wall .wf-tag { display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 4px; text-transform: none; }
.wf-gabion-wall .wf-tag[hidden] { display: none; } /* the 50% stone reduction tag: .wf-tag's display beat [hidden] */
.wf-gabion-wall .wf-tag-green { background: #d1fae5; color: #065f46; }
.wf-gabion-wall .wf-tag-blue { background: #dbeafe; color: #1e3a8a; }
.wf-gabion-wall .wf-tag-amber { background: #fef3c7; color: #78350f; }
.wf-gabion-wall .wf-tag-grey { background: #f3f4f6; color: #374151; }
.wf-gabion-wall .wf-tag-dark { background: #065f46; color: #d1fae5; padding: 5px 9px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* Steps 1-3: the boxes fill the whole row in equal columns, so every step's
   right edge lines up (client, 2026-10-08; the 300px cap of 2026-10-07 left an
   empty strip). */
.wf-gabion-wall [data-step="type"] .wf-cards-2, .wf-gabion-wall [data-step="design"] .wf-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Steps 1-2: bigger cards and icons (Szilard, 2026-10-07) */
.wf-gabion-wall [data-step="type"] .wf-card, .wf-gabion-wall [data-step="design"] .wf-card { gap: 14px; min-height: 84px; padding: 12px 16px; }
.wf-gabion-wall [data-step="type"] .wf-card-icon, .wf-gabion-wall [data-step="design"] .wf-card-icon { width: 60px; height: 60px; padding: 7px; border-radius: 10px; }
.wf-gabion-wall [data-step="design"] .wf-card-icon-wide { width: 68px; height: 52px; }
.wf-gabion-wall [data-step="type"] .wf-card-title, .wf-gabion-wall [data-step="design"] .wf-card-title { font-size: 15px; }


/* Step 3: two labelled rows (Galfan, Grey PVC), three columns each, one
   choice across both - the design canvas's D2 (Szilard, 2026-10-08). */
.wf-gabion-wall .wf-wire-groups { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.wf-gabion-wall .wf-wire-group-label { font-size: 13px; font-weight: 700; color: #374151; }
.wf-gabion-wall .wf-wire-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-gabion-wall .wf-card-wire { flex-wrap: wrap; gap: 2px 8px; padding: 10px 12px; } /* the price drops under the size when the card is narrow, never out of it */
.wf-gabion-wall .wf-card-wire .wf-card-title { font-size: 15px; }

/* Step 4: a slider with - / + either side of a readout in the selected
   look (green, radio dot) - the design canvas's C2 (Szilard, 2026-10-08). */
.wf-gabion-wall .wf-height { display: grid; gap: 8px; }
.wf-gabion-wall .wf-height-row { display: flex; align-items: stretch; gap: 8px; }
.wf-gabion-wall button.wf-height-btn { flex: 0 0 48px; width: 48px; height: auto; min-height: 48px; margin: 0; padding: 0; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; box-shadow: none; font-size: 22px; font-weight: 700; line-height: 1; color: var(--wfw-ink); cursor: pointer; }
.wf-gabion-wall button.wf-height-btn:hover, .wf-gabion-wall button.wf-height-btn:focus-visible { border-color: var(--wfw-green); background: #fff; color: var(--wfw-green-dark); }
.wf-gabion-wall button.wf-height-btn:disabled { opacity: .4; cursor: default; border-color: #d1d5db; color: var(--wfw-ink); }
.wf-gabion-wall .wf-height-readout { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--wfw-green-dark); border-radius: 10px; background: var(--wfw-green); color: #fff; }
.wf-gabion-wall .wf-height-readout strong { font-size: 18px; font-weight: 700; white-space: nowrap; }
.wf-gabion-wall .wf-height-readout span { font-size: 14px; white-space: nowrap; }
.wf-gabion-wall .wf-height-readout .wf-height-dot { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle, #fff 0 4px, transparent 4.5px); box-sizing: border-box; }
.wf-gabion-wall .wf-height-range { width: 100%; height: 28px; margin: 4px 0 0; padding: 0; accent-color: var(--wfw-green); cursor: pointer; }
.wf-gabion-wall .wf-height-range:focus-visible { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
.wf-gabion-wall .wf-height-scale { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; }
@media (max-width: 767px) {
	.wf-gabion-wall .wf-wire-groups { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.wf-gabion-wall .wf-wire-group-label:not(:first-child) { margin-top: 6px; }
	.wf-gabion-wall .wf-card-wire { flex-wrap: wrap; gap: 4px 6px; padding: 10px 8px; }
	.wf-gabion-wall .wf-card-wire .wf-card-title { font-size: 14px; }
	.wf-gabion-wall .wf-height-row { gap: 6px; }
	.wf-gabion-wall button.wf-height-btn { flex-basis: 44px; width: 44px; }
	.wf-gabion-wall .wf-height-readout { min-width: 0; gap: 6px; padding: 8px 10px; }
	.wf-gabion-wall .wf-height-readout strong { font-size: 16px; }
	.wf-gabion-wall .wf-height-readout span { font-size: 13px; }
	.wf-gabion-wall .wf-height-readout .wf-height-dot { display: none; }
}

/* Length stepper */
.wf-gabion-wall .wf-stepper { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; overflow: hidden; }
.wf-gabion-wall .wf-stepper-btn { border: 0; background: #f3f4f6; color: var(--wfw-ink); font-size: 20px; font-weight: 700; width: 48px; height: 46px; cursor: pointer; padding: 0; line-height: 1; }
.wf-gabion-wall .wf-stepper-btn:hover { background: #e5e7eb; }
.wf-gabion-wall .wf-stepper input { width: 90px; height: 46px; border: 0; text-align: center; font-weight: 700; font-size: 16px; color: var(--wfw-ink); background: #fff; -moz-appearance: textfield; }
.wf-gabion-wall .wf-stepper input::-webkit-outer-spin-button, .wf-gabion-wall .wf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wf-gabion-wall .wf-stepper-unit { padding: 0 12px 0 4px; font-size: 13px; font-weight: 600; color: #6b7280; }
.wf-gabion-wall .wf-wall-real-length { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #4b5563; }
.wf-gabion-wall .wf-wall-real-length strong { color: var(--wfw-ink); }
.wf-gabion-wall .wf-wall-real-length:empty { display: none; }
/* The (i) icon + tooltip after "Actual length" went on 2026-10-15 (client). */

/* Stone banner */
.wf-gabion-wall .wf-stone-banner { background: #fff; border: 1px solid #d1d5db; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.wf-gabion-wall .wf-stone-banner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wf-gabion-wall .wf-stone-banner-label { font-size: 12px; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }
.wf-gabion-wall .wf-stone-banner-figure { font-size: 20px; font-weight: 700; color: #065f46; }
.wf-gabion-wall .wf-stone-banner-volume { font-size: 15px; font-weight: 700; color: #065f46; }
.wf-gabion-wall .wf-stone-banner-tip { margin: 8px 0 0; font-size: 12.5px; color: #4b5563; }

/* CTA */
.wf-gabion-wall .cost-holder { text-align: center; margin: 0 0 30px; }
.wf-gabion-wall .btn-wrapper { display: inline-block; position: relative; }
.wf-gabion-wall .btn { cursor: pointer; }
/* Same orange as the single-product add-to-cart button (style.css), sized up as the primary CTA */
.wf-gabion-wall .btn.wf-wall-calculate, .wf-gabion-wall .btn.wf-wall-add { background: #ff8400; border-color: #ff8400; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.25; text-transform: uppercase; padding: 16px 36px; border-radius: 6px; white-space: normal; }
.wf-gabion-wall .btn.wf-wall-calculate:hover, .wf-gabion-wall .btn.wf-wall-calculate:focus, .wf-gabion-wall .btn.wf-wall-add:hover, .wf-gabion-wall .btn.wf-wall-add:focus { background: #0ba2e8; border-color: #0ba2e8; color: #fff; }
.wf-gabion-wall .btn.wf-wall-add:disabled { opacity: .55; cursor: not-allowed; background: #ff8400; border-color: #ff8400; }

/* Result */
.wf-gabion-wall .wf-wall-result { border-top: 3px solid var(--wfw-green); padding-top: 28px; margin-top: 10px; display: grid; gap: 24px; }
/* Nothing worked out yet = no empty package box; once it is, the Calculate button goes and the result follows every change (client, 2026-10-06). */
.wf-gabion-wall .wf-wall-result[hidden],
.wf-gabion-wall .cost-holder[hidden] { display: none; }
.wf-gabion-wall .wf-wall-package { background: #065f46; color: #fff; border-radius: 18px; padding: 22px 24px; display: grid; gap: 14px; }
.wf-gabion-wall .wf-wall-package-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wf-gabion-wall .wf-wall-package-spec { font-size: 13px; color: #a7f3d0; }
.wf-gabion-wall .wf-wall-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-gabion-wall .wf-wall-package-buy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
.wf-gabion-wall .wf-wall-package-price { flex: 1 1 240px; min-width: 0; }
.wf-gabion-wall .wf-wall-package-total { font-size: 38px; font-weight: 700; line-height: 1.1; }
.wf-gabion-wall .wf-wall-package-note { margin: 6px 0 0; font-size: 12px; color: #a7f3d0; }
.wf-gabion-wall .wf-badge { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.wf-gabion-wall .wf-wall-add.is-loading { opacity: .6; }
/* Not .wf-notice: style.css owns that class (flex row with an icon) and it leaked in here. */
.wf-gabion-wall .wf-wall-alert { display: flex; align-items: flex-start; gap: 12px; border-radius: 12px; padding: 14px 16px; border: 1px solid; margin-bottom: 10px; }
.wf-gabion-wall .wf-wall-alert-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.wf-gabion-wall .wf-wall-alert-warn .wf-wall-alert-icon { background: #dc2626; }
.wf-gabion-wall .wf-wall-alert-info .wf-wall-alert-icon { background: #d97706; }
.wf-gabion-wall .wf-wall-alert-body { flex: 1; min-width: 0; }
.wf-gabion-wall .wf-wall-alert:last-child { margin-bottom: 0; }
.wf-gabion-wall .wf-wall-alert strong { display: block; margin-bottom: 4px; font-size: 15px; }
.wf-gabion-wall .wf-wall-alert p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.wf-gabion-wall .wf-wall-alert-warn { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.wf-gabion-wall .wf-wall-alert-info { background: #fffbeb; border-color: #fcd34d; color: #78350f; }

/* Profile */
.wf-gabion-wall .wf-wall-profile { background: #fff; border: 1px solid #d1d5db; border-radius: 18px; overflow: hidden; }
.wf-gabion-wall .wf-wall-profile-head { background: #0f172a; color: #fff; padding: 12px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; }
.wf-gabion-wall .wf-wall-profile-title { font-weight: 700; }
.wf-gabion-wall .wf-wall-profile-spec { color: #6ee7b7; font-weight: 600; }
/* Spec line under the title in the dark bar (2026-10-14). */
.wf-gabion-wall .wf-wall-profile-head { align-items: center; }
.wf-gabion-wall .wf-wall-profile-spec { flex: 0 0 100%; }
.wf-gabion-wall .wf-wall-profile-spec[hidden] { display: none; } /* the flex item beat [hidden]; the PDF still reads its text */
/* Download design (client, 2026-10-14): out of the dark bar to the bottom of the profile box,
   under the tabs and the rows table; green, left aligned, full width on a phone. Orange stays
   reserved for the add-to-cart button. */
.wf-gabion-wall .wf-wall-download-bar { padding: 0 18px 18px; }
.wf-gabion-wall button.wf-wall-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; min-height: 44px; margin: 0; padding: 10px 18px; border: 0; border-radius: 6px; background: #03ba48; box-shadow: none; font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; color: #fff; cursor: pointer; }
.wf-gabion-wall button.wf-wall-download:hover { background: #0a8f3c; color: #fff; }
.wf-gabion-wall .wf-wall-download svg { flex: 0 0 auto; }
@media (max-width: 575px) {
	.wf-gabion-wall button.wf-wall-download { width: 100%; }
}
.wf-gabion-wall button.wf-wall-download:focus-visible { outline: 2px solid #0a8f3c; outline-offset: 2px; }
.wf-gabion-wall .wf-wall-notice { flex: 0 0 100%; padding: 8px 0 4px; }
.wf-gabion-wall .wf-wall-profile-svg { padding: 16px; background: #f8fafc; }
.wf-gabion-wall .wf-profile { width: 100%; height: auto; display: block; max-height: 520px; font-family: inherit; background: #e3effa; }
/* Rows table under every tab (2026-10-14), in the site's table look since later
   that day (design B4): green header "Row | Baskets Required", one table row per
   wall row - its name in green, the depth under it - the basket sizes stacked
   beside them, the wall rows banded white / grey as the stone page's tables. */
.wf-gabion-wall .wf-wall-rows { padding: 12px 18px 18px; overflow-x: auto; }
/* Resets against the theme's global table rules (legacy.css): "table { table-layout: fixed;
   border-width: 1px 0 0 1px !important }", "..., td { border-bottom: 1px solid #e9e9e9 !important }"
   and "table.shop_table th, td { vertical-align: middle !important }" - hence the !important here. */
.wf-gabion-wall .wf-wall-rows-table { width: 100%; margin: 0; border: 0 !important; border-collapse: collapse; table-layout: auto; font-size: 14px; line-height: 1.4; color: #555; }
.wf-gabion-wall .wf-wall-rows-table tr { border: 0; background: none; }
.wf-gabion-wall .wf-wall-rows-table th,
.wf-gabion-wall .wf-wall-rows-table td { padding: 10px 14px; border: 0 !important; background: none; text-align: left; vertical-align: middle !important; }
.wf-gabion-wall .wf-wall-rows-table thead th { padding: 11px 14px; background: #03ba48; color: #fff; font-size: 13px; font-weight: 600; }
.wf-gabion-wall .wf-wall-rows-table thead th:first-child { width: 200px; }
.wf-gabion-wall .wf-wall-rows-table tbody:nth-of-type(even) { background: #f1f1f1; }
.wf-gabion-wall .wf-wall-rows-table tbody th { white-space: nowrap; }
.wf-gabion-wall .wf-wall-rows-table td { font-weight: 600; line-height: 1.75; }
.wf-gabion-wall .wf-wall-row-name { display: block; font-size: 15px; font-weight: 700; color: #03ba48; }
.wf-gabion-wall .wf-wall-row-depth { display: block; font-size: 13px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.wf-gabion-wall .wf-wall-basket { display: block; white-space: nowrap; }
.wf-gabion-wall .wf-wall-qty { display: inline-block; text-align: right; font-weight: 700; color: #333; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) {
	.wf-gabion-wall .wf-wall-rows { padding: 10px 8px 12px; }
	.wf-gabion-wall .wf-wall-rows-table { font-size: 13px; }
	.wf-gabion-wall .wf-wall-rows-table th,
	.wf-gabion-wall .wf-wall-rows-table td { padding: 9px 10px; }
	.wf-gabion-wall .wf-wall-rows-table thead th:first-child { width: 84px; }
	.wf-gabion-wall .wf-wall-row-name { font-size: 14px; }
	.wf-gabion-wall .wf-wall-row-depth { font-size: 12px; }
}
/* Front view of the stacking pattern (pattern.js, client 2026-10-09; replaced the
   per-row "front line, left to right" list): the drawing with each row's count
   beside it, under it when the box is too narrow. The SVG carries its own size. */
/* Since 2026-10-13 on the Front view tab in the side view's look: the same
   light box, the drawing across it (.wf-profile), the counts under it. */
/* Caption + counts under it removed on 2026-10-14 (client). */
.wf-gabion-wall .wf-wall-pattern { padding: 16px; background: #f8fafc; }
/* Side view / Front view tabs (client, 2026-10-13): folder tabs - the open
   one joins the light drawing box under it (same background, no bottom
   edge, a green top line), the other sits behind on grey. Szilard,
   2026-10-13: "the tab should grow together with the content". */
.wf-gabion-wall .wf-wall-views { display: flex; align-items: flex-end; gap: 6px; padding: 14px 18px 0; border-bottom: 1px solid #d1d5db; }
.wf-gabion-wall button.wf-wall-view-tab { flex: 0 1 auto; width: auto; height: auto; min-height: 44px; margin: 0 0 -1px; padding: 9px 20px; border: 1px solid #d1d5db; border-top-width: 3px; border-top-color: #d1d5db; border-radius: 8px 8px 0 0; background: #f1f1f1; box-shadow: none; font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; color: #4b5563; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.wf-gabion-wall button.wf-wall-view-tab:hover { background: #fff; color: #222; }
.wf-gabion-wall button.wf-wall-view-tab.is-active { background: #f8fafc; border-top-color: var(--wfw-green); border-bottom-color: #f8fafc; color: #222; }
.wf-gabion-wall button.wf-wall-view-tab:focus-visible { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
.wf-gabion-wall .wf-wall-view[hidden] { display: none; }
/* 3D View (2026-10-13, view3d.js): the canvas in the drawings' light box, the
   tools above it. */
.wf-gabion-wall .wf-wall-3d-panel { padding: 16px; background: #f8fafc; }
.wf-gabion-wall .wf-wall-3d-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wf-gabion-wall button.wf-wall-3d-btn { width: auto; height: auto; min-height: 40px; margin: 0; padding: 7px 14px; border: 2px solid var(--wfw-green); border-radius: 6px; background: #fff; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--wfw-green-dark); cursor: pointer; }
.wf-gabion-wall button.wf-wall-3d-btn.is-fill { background: var(--wfw-green); color: #fff; }
.wf-gabion-wall button.wf-wall-3d-btn:focus-visible { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
.wf-gabion-wall .wf-wall-3d { position: relative; height: 520px; border-radius: 4px; overflow: hidden; background: #e3effa; touch-action: none; }
.wf-gabion-wall .wf-wall-3d canvas { display: block; width: 100%; height: 100%; }
.wf-gabion-wall .wf-wall-3d-hint { position: absolute; left: 10px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .75); font-size: 12px; color: #334155; pointer-events: none; }
/* The Front View's "Same pattern repeats" box in a long wall's gap, moved by view3d.js. */
.wf-gabion-wall .wf-wall-3d-gap { position: absolute; left: 0; top: 0; padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; white-space: nowrap; color: var(--wfw-ink); pointer-events: none; }
/* Its "Start" / "End" over the two parts (client, 2026-10-15): bold dark text, no box, as the Front View's. */
.wf-gabion-wall .wf-wall-3d-part { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; color: var(--wfw-ink); pointer-events: none; }
@media (max-width: 575px) {
	.wf-gabion-wall .wf-wall-3d { height: 380px; }
	/* Three tabs on one line on a phone */
	.wf-gabion-wall .wf-wall-views { gap: 4px; padding: 12px 12px 0; }
	.wf-gabion-wall button.wf-wall-view-tab { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
}

/* Steps 6 + 7 product rows: the Stone / Accessories tabs' row look (client,
   2026-10-08, "visually consistent") - picture + Assembly Video, name,
   explainer, green "You need" box, price - with an "Add to wall"
   tick on the right instead of quantity + Add to basket. A ticked row is in
   the wall package. Values copied from gabion-category-tabs.css, because the
   builder also runs on its own page without the tabs' stylesheet. */
.wf-gabion-wall .wf-rows { display: grid; gap: 12px; }
.wf-gabion-wall .wf-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 14px 18px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); transition: border-color .15s; }
.wf-gabion-wall .wf-row[hidden] { display: none; } /* the geotextile row on a freestanding wall: the grid display beat [hidden] */
.wf-gabion-wall .wf-row:has(input:checked) { border-color: var(--wfw-green); }
.wf-gabion-wall .wf-row.is-disabled { opacity: .55; }
.wf-gabion-wall .wf-row-media { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wf-gabion-wall .wf-row-thumb { display: block; width: 110px; height: 110px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: hidden; }
.wf-gabion-wall .wf-row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-gabion-wall .wf-row-thumb img[hidden] { display: none; }
.wf-gabion-wall button.wf-row-video { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; min-height: 0; margin: 0; padding: 2px 0; border: 0; background: none; box-shadow: none; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: normal; white-space: nowrap; color: #1e293b; cursor: pointer; }
.wf-gabion-wall button.wf-row-video .fa { font-size: 14px; color: #e00; }
.wf-gabion-wall button.wf-row-video:hover { background: none; text-decoration: underline; }
.wf-gabion-wall .wf-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-gabion-wall .wf-row-name { font-size: 16px; font-weight: 800; line-height: 1.3; color: #0f172a; }
.wf-gabion-wall a.wf-row-name:hover { color: var(--wfw-green-dark); }
.wf-gabion-wall .wf-row-lead { margin: 0; font-size: 13px; line-height: 1.45; color: #475569; }
.wf-gabion-wall .wf-row-need { display: block; margin: 4px 0 0; padding: 7px 12px; border: 1px solid #a7f3d0; border-radius: 6px; background: #ecfdf5; font-size: 13px; line-height: 1.45; color: #047857; }
.wf-gabion-wall .wf-row-need strong { display: block; font-weight: 700; color: #065f46; }
.wf-gabion-wall .wf-row-calc:empty { display: none; }
.wf-gabion-wall .wf-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.wf-gabion-wall .wf-row-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 20px; line-height: 1.2; color: #0f172a; }
.wf-gabion-wall .wf-row-price strong { font-weight: 800; }
.wf-gabion-wall .wf-row-price strong:empty + .wf-row-per { display: none; }
.wf-gabion-wall .wf-row-per { max-width: 220px; font-size: 12px; font-weight: 400; line-height: 1.35; text-align: right; color: #64748b; }
/* "Add to wall": a tick that looks like the tabs' buy button */
.wf-gabion-wall .wf-row-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 142px; min-height: 40px; margin: 0; padding: 8px 14px; white-space: nowrap; border: 2px solid var(--wfw-green); border-radius: 6px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--wfw-green-dark); cursor: pointer; }
.wf-gabion-wall .wf-row-pick input { position: absolute; opacity: 0; pointer-events: none; }
.wf-gabion-wall .wf-row-pick:has(input:checked) { background: var(--wfw-green); color: #fff; }
.wf-gabion-wall .wf-row.is-disabled .wf-row-pick { cursor: default; }
.wf-gabion-wall .wf-row-check { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--wfw-green); border-radius: 4px; background: #fff; box-sizing: border-box; }
.wf-gabion-wall .wf-row-pick:has(input:checked) .wf-row-check { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%23fff'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%2303ba48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wf-gabion-wall .wf-row-pick:has(input:focus-visible) { outline: 2px solid var(--wfw-green-dark); outline-offset: 2px; }
@media (max-width: 767px) {
	/* Phone, as the tabs: picture + video beside the name and explainer, the
	   "You need" box across the card, then the price, then the tick on its own
	   full-width row (client 2026-10-09: beside a wrapping price line the
	   button jumped between right and left from card to card) */
	.wf-gabion-wall .wf-row { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 4px 12px; padding: 12px; }
	.wf-gabion-wall .wf-row-media { grid-column: 1; grid-row: 1 / span 2; }
	.wf-gabion-wall .wf-row-thumb { width: 96px; height: 96px; }
	/* "Video" dropped on phones so icon + label share one line (client 2026-10-13) */
	.wf-gabion-wall button.wf-row-video { gap: 4px; max-width: 96px; font-size: 11px; line-height: 1.2; }
	.wf-gabion-wall .wf-video-word { display: none; }
	.wf-gabion-wall .wf-row-body { display: contents; }
	.wf-gabion-wall .wf-row-name { grid-column: 2; grid-row: 1; font-size: 15px; }
	.wf-gabion-wall .wf-row-lead { grid-column: 2; grid-row: 2; align-self: start; }
	.wf-gabion-wall .wf-row-need { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
	/* Price and tick on one row (client 2026-10-13, was two rows since 10-09);
	   the price column wraps inside itself so the tick keeps its right edge */
	.wf-gabion-wall .wf-row-side { grid-column: 1 / -1; grid-row: 4; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
	.wf-gabion-wall .wf-row-price { flex: 1 1 auto; align-items: flex-start; min-width: 0; font-size: 18px; }
	.wf-gabion-wall .wf-row-per { text-align: left; }
	.wf-gabion-wall .wf-row-pick { flex: none; min-width: 0; min-height: 44px; }
}

/* Bulk discount in the package box (client, 2026-10-08): list price struck
   through, the discounted total, the saving. */
.wf-gabion-wall .wf-wall-package-was { display: block; font-size: 16px; font-weight: 600; color: #a7f3d0; text-decoration: line-through; }
.wf-gabion-wall .wf-wall-package-was[hidden], .wf-gabion-wall .wf-wall-package-save[hidden] { display: none; }
.wf-gabion-wall .wf-wall-package-save { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: #fde68a; }
.wf-gabion-wall .wf-wall-package-price { margin: -6px -10px; padding: 6px 10px; border-radius: 12px; }
.wf-gabion-wall .wf-wall-package-price.is-highlight { animation: wfw-price-glow 1.6s ease-out; }
@keyframes wfw-price-glow {
	0%, 30% { background-color: rgba(255, 255, 255, .16); box-shadow: 0 0 0 3px rgba(253, 230, 138, .75); }
	100% { background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 3px rgba(253, 230, 138, 0); }
}

/* "Price & design updated" pop-up (Szilard, 2026-10-08): a short "Updating..."
   spinner, then the click-to-scroll note; main.js removes it after 3 s. In the
   middle of the changed step until 2026-10-15 (client: it covered the - / +
   being pressed), then in the step head (client: it clashed with the sticky
   site header). Now a toast fixed at the bottom centre of the window, over the
   page's header (999) and the back-to-top button (9), under the mobile menu
   (10001) and the modals. The back-to-top button (bottom right, from 768px
   only: emallshop functions.js) stays clear of a centred 420px toast at
   every width it shows at; on a phone the toast spans the width, 16px gutters. */
.wf-gabion-wall .wf-price-pop { position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; max-width: min(420px, calc(100% - 32px)); margin: 0 auto; padding: 12px 20px; border-radius: 12px; background: #0f172a; box-shadow: 0 10px 28px rgba(15, 23, 42, .28); font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; animation: wfw-pop-in .2s ease-out; transition: opacity .6s ease; }
.wf-gabion-wall .wf-price-pop.is-done { background: var(--wfw-green-dark); }
.wf-gabion-wall .wf-price-pop.is-out { opacity: 0; }
.wf-gabion-wall .wf-price-pop-title { display: block; font-size: 16px; }
.wf-gabion-wall .wf-price-pop-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; text-decoration: underline; }
.wf-gabion-wall .wf-price-pop-spin { flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: wfw-spin .7s linear infinite; }
.wf-gabion-wall button.wf-price-pop-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; text-transform: none; letter-spacing: normal; color: #fff; cursor: pointer; text-align: left; }
.wf-gabion-wall button.wf-price-pop-btn:hover, .wf-gabion-wall button.wf-price-pop-btn:focus-visible { background: none; color: #fff; }
.wf-gabion-wall .wf-price-pop-tick { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2L9 4' fill='none' stroke='%230a8f3c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes wfw-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wfw-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
	.wf-gabion-wall .wf-price-pop { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.wf-gabion-wall .wf-price-pop, .wf-gabion-wall .wf-price-pop-spin, .wf-gabion-wall .wf-wall-package-price.is-highlight { animation: none; transition: none; }
}

/* Responsive */
@media (max-width: 991px) {
	.wf-gabion-wall .wf-cards-3, .wf-gabion-wall .wf-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.wf-gabion-wall .step-block { flex-direction: column; align-items: stretch; border-radius: 18px; margin-bottom: 28px; }
	.wf-gabion-wall .step-block .circle-box { width: auto; margin: 0; align-self: flex-start; overflow: visible; }
	.wf-gabion-wall .step-block .circle { width: auto; height: auto; border-radius: 18px 0 18px 0; flex-direction: row; gap: 6px; padding: 6px 14px; margin: 0; font-size: 14px; }
	.wf-gabion-wall .step-block .num { font-size: 20px; }
	.wf-gabion-wall .step-block .info-box { width: 100%; padding: 14px 16px 18px; }
	.wf-gabion-wall .step-head label { font-size: 17px; }
	/* Step 6/7 head (client QA 2026-10-09): the title and the Select button
	   on one line, "Optional" and the selection chip under them as two
	   matching pills. Beside the button (240px of head on a phone) the two
	   tags used to stack one under the other; display: contents lifts them
	   into the head's flex row, order puts them after the button. */
	.wf-gabion-wall .step-head:has(.step-title-row) { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
	.wf-gabion-wall .step-head:has(.step-title-row) .step-toggle-text,
	.wf-gabion-wall .step-title-row { display: contents; }
	.wf-gabion-wall .step-title-row label { order: 1; flex: 1 1 calc(100% - 100px); min-width: 0; }
	.wf-gabion-wall .step-head:has(.step-title-row) .step-toggle-btn { order: 2; margin-left: auto; }
	.wf-gabion-wall .step-title-row .wf-tag { order: 3; padding: 5px 8px; border-radius: 999px; font-size: 11px; line-height: 1; }
	.wf-gabion-wall .step-toggle { align-items: flex-start; gap: 10px; }
	.wf-gabion-wall .step-toggle-btn { padding: 6px 10px; }
	.wf-gabion-wall .wf-cards-2, .wf-gabion-wall .wf-cards-3, .wf-gabion-wall .wf-cards-4 { grid-template-columns: 1fr; }
	.wf-gabion-wall .wf-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-gabion-wall [data-step="type"] .wf-cards-2, .wf-gabion-wall [data-step="design"] .wf-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-gabion-wall [data-step="type"] .wf-card, .wf-gabion-wall [data-step="design"] .wf-card { flex-direction: column; text-align: center; gap: 6px; }
	.wf-gabion-wall [data-step="type"] .wf-card-icon, .wf-gabion-wall [data-step="design"] .wf-card-icon { width: 56px; height: 56px; }
	.wf-gabion-wall [data-step="design"] .wf-card-icon-wide { width: 64px; height: 48px; }
	.wf-gabion-wall .wf-wall-package-total { font-size: 30px; }
	.wf-gabion-wall .wf-wall-package-buy .btn-wrapper { width: 100%; }
	.wf-gabion-wall .wf-wall-package-buy .btn { width: 100%; }
	.wf-gabion-wall .cost-holder .btn-wrapper { display: block; }
	.wf-gabion-wall .btn.wf-wall-calculate { width: 100%; padding: 15px 18px; }
	.wf-gabion-wall .btn.wf-wall-calculate:hover, .wf-gabion-wall .btn.wf-wall-add:hover { background: #ff9900; border-color: #ff9900; }
}

/* A figure a choice just changed (Szilard, 2026-10-07): a short green flash;
   the package total also pops. Restarted by main.js on every change. */
.wf-gabion-wall .wf-figure-flash { border-radius: 4px; animation: wfw-figure-flash 1s ease-out; }
.wf-gabion-wall .wf-wall-package-total.wf-figure-flash { display: inline-block; animation: wfw-total-pop .7s ease-out; }
@keyframes wfw-figure-flash {
	0% { background-color: rgba(3, 186, 72, .28); box-shadow: 0 0 0 3px rgba(3, 186, 72, .28); }
	100% { background-color: rgba(3, 186, 72, 0); box-shadow: 0 0 0 3px rgba(3, 186, 72, 0); }
}
@keyframes wfw-total-pop {
	0% { transform: scale(1); color: inherit; }
	35% { transform: scale(1.08); color: #03ba48; }
	100% { transform: scale(1); color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
	.wf-gabion-wall .wf-figure-flash, .wf-gabion-wall .wf-wall-package-total.wf-figure-flash { animation: none; }
}