/* Seats and Sofas: component styles. Values come from tokens.css (custom properties). */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:ital,wght@0,300..800;1,400&family=Roboto:wght@400;700;900&display=swap");

.ss-root, .ss-root * { box-sizing: border-box; }
.ss-root { font-family: var(--font-body); color: var(--ink); font-size: 16px; line-height: 18.4px; }

/* ---------- Button ---------- */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 16px; line-height: 22.4px; font-weight: 800; letter-spacing: -0.02em;
  padding: var(--space-12) var(--space-20); border: 0; border-radius: var(--radius-medium);
  background: var(--surface); color: var(--black); text-decoration: none; cursor: pointer;
}
.ss-btn svg { width: 20px; height: 20px; flex: none; }
.ss-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.ss-btn--primary { background: var(--primary); color: var(--surface); }
.ss-btn--primary:hover { background: var(--secondary); }
.ss-btn--primary:active { background: var(--primary-medium); }
.ss-btn--light { background: var(--surface); color: var(--black); }
.ss-btn--light:hover { background: var(--surface-subtle); }
.ss-btn--block { display: flex; width: 100%; justify-content: space-between; }
/* header size: Zoek Megastore / Zoeken */
.ss-btn--header { font-size: 18px; line-height: 22.05px; font-weight: 400; padding: 10px var(--space-14); border-radius: var(--radius-6); }
.ss-btn--header.ss-btn--light { font-weight: 800; padding: var(--space-12); }
/* form submit: Aanmelden */
.ss-btn--submit { font-size: 18px; line-height: 19.26px; padding: 18px 44px 18px 26px; border-radius: var(--radius-10); }

/* ---------- Tag & Label ---------- */
.ss-tag {
  display: inline-block; font-family: var(--font-price); font-size: 14px; line-height: 16.8px; font-weight: 700;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-6); color: var(--surface); background: var(--black);
}
.ss-tag--discount { background: var(--discount-tag); }
.ss-tag--popular { background: var(--black); }
.ss-label {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; line-height: 14.4px; font-weight: 500;
  padding: var(--space-4) 10px; border: 1px solid var(--surface); border-radius: var(--radius-label); color: var(--surface);
}
.ss-label svg { width: 19px; height: 18px; }

/* ---------- Price ---------- */
.ss-price { display: flex; align-items: stretch; gap: 2px; }
.ss-price__box {
  display: flex; flex-direction: column; justify-content: center; background: var(--action); color: var(--surface);
  padding: 1px var(--space-12); border-radius: var(--radius-6); min-height: 71px;
}
.ss-price__prefix { font-family: var(--font-body); font-size: 10px; line-height: 10.7px; font-weight: 600; letter-spacing: -0.04em; }
.ss-price__value { font-family: var(--font-price); font-size: 42px; line-height: 44.94px; font-weight: 900; letter-spacing: -0.04em; }
.ss-price__cta {
  display: flex; align-items: center; justify-content: center; width: 36px; padding: var(--space-8);
  background: var(--black); color: var(--surface); border-radius: var(--radius-6); border: 0;
}
.ss-price__cta svg { width: 16px; height: 16px; }
.ss-price-old { font-family: var(--font-price); font-weight: 900; letter-spacing: -0.04em; font-size: 16px; line-height: 27.82px; color: var(--ink-strike); position: relative; display: inline-block; }
.ss-price-old::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 3px; background: var(--action); transform: translateY(-50%) rotate(-10deg); }
.ss-price-from { font-family: var(--font-price); font-size: 22px; line-height: 25.3px; font-weight: 900; letter-spacing: -0.04em; color: var(--action); }

/* ---------- Product card ---------- */
.ss-product-card { display: block; position: relative; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; color: var(--black); text-decoration: none; }
.ss-product-card__media { position: relative; height: 162px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.ss-product-card__media .ss-tag { position: absolute; top: 10px; right: 10px; }
.ss-product-card__content { display: flex; justify-content: space-between; align-items: stretch; padding: var(--space-8) 10px; gap: 10px; }
.ss-product-card__info { display: flex; flex-direction: column; align-items: flex-start; }
.ss-product-card__info .ss-price-old { margin-top: auto; }
.ss-product-card__name { margin: 0; font-family: var(--font-price); font-size: 12px; line-height: 12.84px; font-weight: 900; text-transform: uppercase; }
.ss-product-card__type { font-size: 12px; line-height: 12.84px; font-style: italic; color: var(--ink); }

/* ---------- Category card ---------- */
.ss-category-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: var(--radius-card); padding: 14px 13px 12px; color: var(--ink); text-decoration: none; }
.ss-category-card__title { font-family: var(--font-heading); font-size: 18px; line-height: 20.7px; font-weight: 700; text-align: center; }
.ss-category-card__media { height: 74px; display: flex; align-items: center; justify-content: center; }
.ss-category-card__row { display: flex; align-items: flex-end; justify-content: space-between; }
.ss-category-card__prefix { font-weight: 700; letter-spacing: -0.04em; }
.ss-category-card .ss-price__cta { width: 36px; height: 36px; }

/* ---------- Style card ---------- */
.ss-style-card { position: relative; display: flex; align-items: flex-end; padding: var(--space-14); border-radius: var(--radius-card); overflow: hidden; color: var(--surface); text-decoration: none; min-height: 300px; background: var(--grey-dark); }
.ss-style-card__glass {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: var(--space-16) var(--space-20); border-radius: var(--radius-card); background: var(--overlay); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.ss-style-card__title { margin: 0; font-size: 18px; line-height: 19.26px; font-weight: 700; }
.ss-style-card__count { margin: 4px 0 0; font-size: 14px; line-height: 14.98px; font-style: italic; }
.ss-style-card__glass svg { width: 16px; height: 15px; flex: none; }

/* ---------- Carousel nav ---------- */
.ss-carousel-nav { display: flex; align-items: center; gap: 12px; }
.ss-carousel-nav__line { flex: 1; height: 2px; background: var(--grey-50); }
.ss-carousel-btn { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 64px; border: 0; border-radius: var(--radius-10); background: var(--surface); color: var(--ink); cursor: pointer; }
.ss-carousel-btn svg { width: 19px; height: 15px; }
.ss-carousel-btn:disabled { background: var(--white-25); color: var(--ink-50); cursor: default; }
.ss-carousel-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ---------- Newsletter ---------- */
.ss-newsletter { background: var(--surface-muted); border-radius: var(--radius-card); padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.ss-newsletter__title { margin: 0 0 12px; font-size: 18px; line-height: 18px; font-weight: 700; color: var(--ink); }
.ss-input { width: 100%; font-family: var(--font-body); font-size: 18px; line-height: 20.7px; padding: var(--space-14); border: 0; border-radius: var(--radius-medium); background: var(--surface); color: var(--ink); }
.ss-input::placeholder { color: var(--ink); opacity: 1; }
.ss-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }