/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast), color var(--duration-fast),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* "Flow" hover treatment: an arrow slides in from the left as the text
   shifts right, a circle wipes in from the center to swap the fill shade,
   and the original arrow slides out to the right — markup is injected by
   assets/js/flow-buttons.js so every .btn--primary gets this for free. */
.flow-btn__text {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform: translateX(-8px);
  transition: transform 700ms var(--ease-flow);
}

/* The fill circle is always full size, centred on the button, and grows
   from a dot with transform only (no layout or size change per frame), so
   the darker copper covers the whole pill, also on wide buttons. */
.flow-btn__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: max(320px, 130%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-hover);
  opacity: 0;
  translate: -50% -50%;
  transform: scale(0.05);
  transition: transform 700ms var(--ease-flow), opacity 500ms var(--ease-standard);
}

.flow-btn__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  transition: transform 700ms var(--ease-flow-back), opacity 500ms var(--ease-standard);
}

.flow-btn__arrow svg {
  width: 100%;
  height: 100%;
}

.flow-btn__arrow--in {
  left: 14px;
  opacity: 0;
  transform: translateX(-80px);
}

.flow-btn__arrow--out {
  right: 14px;
  opacity: 1;
}

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-ink);
}

.section--dark .btn--outline {
  color: var(--color-dark-text);
}

.btn--light {
  background: var(--color-bg);
  color: var(--color-ink);
}

.btn--block {
  width: 100%;
}

/* touch devices keep :hover after a tap — the base link hover colour must
   never reach button labels */
.btn--primary:hover {
  color: var(--color-accent-foreground);
}

.btn--outline:hover {
  color: var(--color-ink);
}

.section--dark .btn--outline:hover {
  color: var(--color-dark-text);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover .flow-btn__text {
    transform: translateX(10px);
  }

  .btn--primary:hover .flow-btn__circle {
    transform: scale(1);
    opacity: 1;
  }

  .btn--primary:hover .flow-btn__arrow--in {
    transform: none;
    opacity: 1;
  }

  .btn--primary:hover .flow-btn__arrow--out {
    transform: translateX(80px);
    opacity: 0;
  }

  .btn--outline:hover {
    background: var(--color-ink);
    color: var(--color-bg);
  }

  .section--dark .btn--outline:hover {
    background: var(--color-dark-text);
    color: var(--color-dark);
  }

  .btn--light:hover {
    background: var(--color-surface);
  }
}

/* ============ Outline flow button ============ */
/* "Anfrage für Ihren Ofen" / "Inquire for your furnace" (hero) and
   "Jetzt Kontakt aufnehmen" / "Get in touch now" (contact band).
   Same motion as the primary "Produkte entdecken" button (.flow-btn__*):
   on hover the ring fades, a filled circle grows from the centre while the
   pill keeps its shape, the text slides from −8 to +10 px, one arrow springs
   in from the left while the other leaves to the right — same durations
   (700 / 500 ms) and curves. Everything moves with
   transform/opacity; circle size and arrow distance depend on the button's
   width and are measured by flow-buttons.js (--flow-size, --flow-start,
   --flow-arrow; the fallbacks fit a ~190 px button). */
.btn--flow {
  position: relative;
  overflow: hidden;
  gap: 4px;
  padding: 0 32px;
  border: 1.5px solid color-mix(in srgb, var(--color-ink) 40%, transparent);
  border-radius: 100px;
  background: transparent;
  color: var(--color-ink);
  white-space: nowrap;
  /* the colour change is slow and deliberate; the press stays snappy */
  transition: border-color 500ms var(--ease-standard), color 500ms var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn--flow:active {
  transform: scale(0.95);
}

.btn-flow__text {
  position: relative;
  z-index: 1;
  transform: translateX(-8px);
  transition: transform 700ms var(--ease-flow);
}

.btn-flow__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--flow-size, 220px);
  height: var(--flow-size, 220px);
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0;
  /* starts as a 16 px dot */
  transform: translate(-50%, -50%) scale(var(--flow-start, 0.0727));
  transition: transform 700ms var(--ease-flow), opacity 500ms var(--ease-standard);
}

.btn-flow__arrow {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--color-ink);
  transition: transform 700ms var(--ease-flow-back), opacity 500ms var(--ease-standard),
    color 500ms var(--ease-standard);
}

/* waits outside the left edge (where "left: -25%" would put it) */
.btn-flow__arrow--in {
  left: 16px;
  opacity: 0;
  transform: translateX(calc(var(--flow-arrow, 64px) * -1));
}

.btn-flow__arrow--out {
  right: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .btn--flow:hover {
    border-color: transparent;
    color: var(--color-bg);
  }

  .btn--flow:hover .btn-flow__text {
    transform: translateX(10px);
  }

  .btn--flow:hover .btn-flow__circle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .btn--flow:hover .btn-flow__arrow {
    color: var(--color-bg);
  }

  .btn--flow:hover .btn-flow__arrow--in {
    opacity: 1;
    transform: none;
  }

  .btn--flow:hover .btn-flow__arrow--out {
    opacity: 0;
    transform: translateX(var(--flow-arrow, 64px));
  }
}

/* on the always-dark hero and contact band the colours are inverted:
   white ring and text, a white circle fills in, text and arrow turn dark */
.hero-section .btn--flow,
.section--dark .btn--flow {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.hero-section .btn--flow .btn-flow__arrow,
.section--dark .btn--flow .btn-flow__arrow {
  color: #fff;
}

.hero-section .btn--flow .btn-flow__circle,
.section--dark .btn--flow .btn-flow__circle {
  background: #fff;
}

/* touch devices keep :hover after a tap — the label stays white there */
.hero-section .btn--flow:hover,
.section--dark .btn--flow:hover {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .hero-section .btn--flow:hover,
  .section--dark .btn--flow:hover {
    border-color: transparent;
    color: var(--color-dark);
  }

  .hero-section .btn--flow:hover .btn-flow__arrow,
  .section--dark .btn--flow:hover .btn-flow__arrow {
    color: var(--color-dark);
  }
}

/* ============ Cards ============ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base);
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.product-card__media {
  background: var(--color-panel);
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  /* without this the image's own size wins over the 4:3 ratio and the
     titles in a row no longer line up */
  min-height: 0;
  /* the product's soft shadow ends at the panel edge instead of greying
     the white card body below */
  overflow: hidden;
}

/* cut-out product on its fireclay panel: the only element with a shadow */
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--shadow-object);
  transition: transform var(--duration-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
  }

  .product-card:hover .product-card__media img {
    transform: translateY(-4px);
  }

  .product-card:hover .product-card__link svg {
    transform: translateX(3px);
  }
}

.product-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.product-card__title {
  font-size: var(--text-lg);
  line-height: 1.2;
  margin: 0;
}

.product-card__desc {
  font-size: var(--text-sm);
  color: var(--color-slate);
  margin: 0;
  flex: 1;
}

.product-card__link {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
}

.product-card__link svg {
  transition: transform var(--duration-base) var(--ease-standard);
}

.category-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  /* cards in the same row stretch to equal height (grid default); the
     titles line up at the top (v16 – centred content left them at three
     different heights) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.category-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.category-card__title > h3 {
  min-width: 0;
}

.category-card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ============ Spec list / technical detail ============ */

.spec-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.spec-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.spec-list__label {
  color: var(--color-slate);
  font-size: var(--text-sm);
}

.spec-list__value {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.variant-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}

.variant-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.variant-card__range {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============ Trust bar ============ */

.trust-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-5) 0;
}

@media (min-width: 768px) {
  .trust-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trust-bar__item {
  text-align: center;
  padding: var(--space-3);
}

.trust-bar__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
  display: block;
}

.trust-bar__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* ============ Country / trust chips ============ */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}

.chip-list li {
  margin: 0;
}

.chip {
  font-size: var(--text-sm);
  padding: 6px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-ink-soft);
}

/* ============ Customers by region ============ */

.region-list {
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
}

.region-list__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.region-list dt {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-top: 0.25em;
}

.region-list dd {
  margin: 0;
  color: var(--color-ink-soft);
}

@media (max-width: 480px) {
  .region-list__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ============ Forms ============ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-field label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.form-field .hint {
  font-size: var(--text-xs);
  color: var(--color-slate);
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 12px 14px;
  min-height: 50px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--color-danger);
}

.form-field__error {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  display: none;
}

.form-status[data-visible="true"] {
  display: block;
}

.form-status--success {
  background: var(--color-accent-tint);
  color: var(--color-accent-hover);
}

.form-status--error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

/* ============ Contact detail blocks ============ */

.contact-block {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-block__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
}

.hours-table td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.hours-table td:last-child {
  text-align: right;
  font-weight: 600;
}

/* on mobile, the contact column (address/phone/email/buttons) reads
   better centered than left-hugging the icons */
/* the first block lines up with the top of the form next to it */
.contact-info > .contact-block:first-child {
  padding-top: 0;
}

@media (max-width: 767px) {
  .contact-info {
    text-align: center;
  }

  .contact-info .contact-block {
    justify-content: center;
    gap: var(--space-2);
  }

  .contact-info .cluster {
    justify-content: center;
  }

  /* the hours block's text wrapper is flex:1 on desktop so the table has
     room to spread label/value apart — on mobile that swallows all the
     leftover space, so centering the row does nothing and the icon is
     left stranded. Let it shrink to content instead, and pull the table
     itself into a compact, centered block rather than a full-width row. */
  .contact-info .contact-block > div {
    flex: initial;
  }

  .contact-info .hours-table {
    width: fit-content;
    margin-inline: auto;
  }

  .contact-info .hours-table td:first-child {
    padding-right: var(--space-5);
  }
}

/* ============ Misc ============ */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-hover);
}

.notice {
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-slate);
}

/* ============ Photography ============ */

.about-photo {
  width: 100%;
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
}

/* ============ Product carousel ============ */

.carousel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.carousel-header__intro {
  max-width: 60ch;
}

.carousel-header__intro > :last-child {
  margin-bottom: 0;
}

.carousel-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
}

.carousel-explore svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .carousel-explore:hover {
    color: var(--color-accent);
  }

  .carousel-explore:hover svg {
    transform: translateX(3px);
  }
}

.product-carousel__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  margin: 0 calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scroll-padding-inline: var(--container-pad);
}

.product-carousel__track::-webkit-scrollbar {
  display: none;
}

.product-carousel__slide {
  /* contains the visually-hidden helper text in each slide — without a
     positioned parent it escaped the scrolling track and made the whole
     page wider than the screen */
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 84%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .product-carousel__slide {
    flex-basis: 46%;
  }
}

@media (min-width: 1000px) {
  .product-carousel__slide {
    flex-basis: 30.5%;
  }
}

.product-carousel__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  overflow: hidden;
  cursor: zoom-in;
}

.product-carousel__media:focus-visible {
  outline-offset: 3px;
}

.product-carousel__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4) var(--space-4) var(--space-5);
  filter: var(--shadow-object);
  transition: transform var(--duration-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .product-carousel__media:hover img {
    transform: scale(1.04);
  }
}

.product-carousel__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(30, 34, 39, 0.78);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-carousel__body {
  padding-top: var(--space-3);
  /* stretches to fill the equal-height slide (see .product-carousel__track
     stretch below) so the CTA button lines up at the same height across
     every card in the row, regardless of description length */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-carousel__body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.product-carousel__body p {
  font-size: var(--text-sm);
  color: var(--color-slate);
  margin-bottom: var(--space-3);
  flex: 1;
}

.product-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-dots button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  /* 44 px tall touch target, same row height as the arrows beside it */
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: width var(--duration-fast) var(--ease-standard);
}

/* the visible dot; the 24px button around it is the touch target */
.carousel-dots button::before {
  content: "";
  width: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border-strong);
  transition: width var(--duration-fast) var(--ease-standard), background var(--duration-fast);
}

.carousel-dots button[aria-current="true"] {
  width: 36px;
}

.carousel-dots button[aria-current="true"]::before {
  width: 28px;
  background: var(--color-accent);
}

.carousel-dots {
  gap: 2px;
}

.carousel-arrows {
  display: flex;
  gap: var(--space-2);
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-foreground);
  }
}

.carousel-arrow:active {
  transform: scale(0.97);
}

.carousel-arrow svg {
  width: 16px;
  height: 16px;
}

/* ============ Lightbox ============ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 10, 10, 0.92);
  opacity: 1;
  transition: opacity 260ms var(--ease-standard), display 260ms;
  transition-behavior: allow-discrete;
}

/* opens with a short fade and the image settling from 96 %, and closes the
   same way (instantly where display can't be transitioned) */
@starting-style {
  .lightbox:not([hidden]) {
    opacity: 0;
  }
  .lightbox:not([hidden]) .lightbox__image {
    transform: scale(0.96);
  }
}

.lightbox[hidden] {
  display: none;
  opacity: 0;
}

.lightbox[hidden] .lightbox__image {
  transform: scale(0.96);
}

/* previous / next: the picture dips out and the new one fades in
   (product-carousel.js) */
.lightbox__image.is-switching {
  opacity: 0;
  transform: scale(0.985);
}

.lightbox__image {
  max-width: min(90vw, 1000px);
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  /* fixed fireclay panel — the overlay stays dark in both colour modes */
  background: #e7e5e2;
  padding: var(--space-4);
  transition: transform 320ms var(--ease-soft), opacity 160ms var(--ease-standard);
  /* horizontal swipes go to the script (previous/next product) */
  touch-action: pan-y;
}

.lightbox__caption {
  max-width: 100%;
  margin-top: var(--space-4);
  text-align: center;
  color: #fff;
}

.lightbox__caption .lightbox__title {
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
  max-width: none;
}

.lightbox__caption p {
  color: #b9bdc2;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.lightbox__prev {
  left: var(--space-4);
}

.lightbox__next {
  right: var(--space-4);
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  /* the "translate" property, so the pressed scale() of .carousel-arrow
     doesn't replace the centring and make the arrow jump */
  translate: 0 -50%;
}

.lightbox .carousel-arrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* on phones the arrows sit over the light product panel */
@media (max-width: 640px) {
  .lightbox .carousel-arrow {
    background: rgba(18, 20, 23, 0.55);
  }
}

@media (hover: hover) and (pointer: fine) {
  .lightbox .carousel-arrow:hover {
    background: #fff;
    border-color: #fff;
    /* fixed dark tone — the lightbox overlay is always dark regardless of
       the light/dark toggle, and --color-ink flips light in dark mode */
    color: #23272c;
  }
}

/* ============ Category tabs ============ */

.v-tabs {
  position: relative;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.v-tabs__list {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  /* narrow viewports scroll the tab row horizontally rather than wrapping
     (wrapping would break the sliding underline's left/width math) */
  overflow-x: auto;
  scrollbar-width: none;
}

.v-tabs__list::-webkit-scrollbar {
  display: none;
}

/* on phones the last tab can be partly off-screen — the fading edge shows
   that the row scrolls */
@media (max-width: 479px) {
  .v-tabs__list {
    padding-right: 2rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }
}

.v-tabs__hover {
  position: absolute;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  opacity: 0;
  transition: left var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

/* a 1 px line moved and stretched with transform (set by category-tabs.js),
   so the glide to the next tab never triggers layout */
.v-tabs__active-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--color-ink);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* the newly chosen panel settles in instead of popping */
.v-tabs__panel {
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}

@starting-style {
  .v-tabs__panel:not([hidden]) {
    opacity: 0;
    transform: translateY(6px);
  }
}

.v-tabs__item {
  position: relative;
  z-index: 1;
  height: 44px;
  padding: 0 var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-slate);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.v-tabs__item[aria-selected="true"] {
  color: var(--color-ink);
}

.v-tabs__item:focus-visible {
  /* inside the scrolling row an outside ring would be clipped */
  outline-offset: -3px;
}

.v-tabs__panel[hidden] {
  display: none;
}

/* ============ Wall vibrator finder (product page) ============ */

.finder {
  margin-top: var(--space-5);
  padding: 20px 22px;
  background: var(--color-accent-tint);
  border-radius: var(--radius-md);
}

.finder__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.finder__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.finder__field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.finder__input {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 4px;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.finder__input:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 2px;
}

.finder__input input {
  width: 4.4ch;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: 600 2.3rem/1.1 var(--font-heading);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent);
}

.finder__input span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
}

.finder__view {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.finder__scale {
  transform-box: view-box;
  transform-origin: 50px 50px;
  transition: transform 180ms var(--ease-standard);
}

.finder__view circle,
.finder__view line {
  vector-effect: non-scaling-stroke;
}

.finder__wall {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.finder__wall--special {
  stroke-dasharray: 4 3;
}

.finder__arm {
  stroke: currentColor;
  stroke-width: 1.6;
}

.finder__arm--alt {
  stroke-dasharray: 5 2 1 2;
}

.finder__hub {
  fill: currentColor;
}

.finder__result {
  min-height: 2.9em;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink);
}


/* ============ FAQ ============ */

.faq__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 860px;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.faq__item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.faq__q {
  text-wrap: balance;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.faq__a {
  margin: 0;
  max-width: 70ch;
}

/* ============ Lining process (products overview) ============ */

.process__intro {
  max-width: 62ch;
  color: var(--color-slate);
}

.process__steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0;
  margin: var(--space-5) 0 0;
}

@media (min-width: 900px) {
  .process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process__step {
  counter-increment: step;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-accent);
}

.process__step::before {
  content: counter(step);
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.process__step h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.process__step p {
  margin: 0;
  font-size: var(--text-sm);
}

/* ============ Definition lists (insulation, templates, company facts) ============ */

.tab-intro {
  max-width: 62ch;
}

.def-list,
.facts-list {
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.def-list > div,
.facts-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .def-list > div {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  }

  .facts-list > div {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr);
  }
}

.def-list dt,
.facts-list dt {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
}

.def-list dd,
.facts-list dd {
  margin: 0;
  color: var(--color-ink-soft);
}

.facts-title {
  font-size: var(--text-lg);
  margin: var(--space-5) 0 0;
}