/* =====================================================================
   Holysmartphone verkopen - frontend design system
   Loaded after newdesign.css (include/header.php). Templates stay free of inline styles.

   1. Tokens          colours, type, radius, shadow, motion
   2. Base            font + text colour for the whole site
   3. Building blocks reuse these before making a new class:
                      hs-section, hs-title, hs-lead, hs-btn, hs-chip, hs-search,
                      hs-card, hs-icon-box, hs-link, hs-stars
   4. Layouts         header, hero, home sections, FAQ, reviews, footer, category page
                      (layout only; looks come from tokens and building blocks)
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root {
  --hs-teal: #008392;          /* primary: buttons, links, active states */
  --hs-teal-dark: #006d79;     /* primary hover, price text */
  --hs-deep: #015261;          /* page titles, footer, help card */
  --hs-mint: #eef8f9;          /* soft backgrounds, icon boxes, chips */
  --hs-mint-2: #f4f8f9;        /* photo panels */
  --hs-line: #e3e9ec;          /* card and field borders */
  --hs-line-strong: #c9dfe2;   /* border on hover of quiet elements */
  --hs-ink: #1b2430;           /* headings and strong text */
  --hs-text: #2b3440;          /* body copy */
  --hs-muted: #5b6573;         /* secondary text */
  --hs-orange: #ff8d3d;        /* the one call to action colour */
  --hs-orange-dark: #f57a24;
  --hs-on-deep: #e5f4ef;       /* text on --hs-deep */
  --hs-on-deep-soft: #9fd9d1;  /* icons on --hs-deep */
  --hs-gold: #f4ab21;          /* review stars */
  --hs-white: #ffffff;

  --hs-font: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --hs-radius-sm: 8px;         /* buttons, small boxes */
  --hs-radius: 14px;           /* cards */
  --hs-radius-lg: 20px;        /* large panels, sections */
  --hs-pill: 999px;            /* chips, search fields */

  --hs-shadow: 0 8px 24px rgba(0, 60, 70, 0.10);
  --hs-shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);

  --hs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-fast: 0.15s;
  --hs-base: 0.25s;
}

/* 2. Base ------------------------------------------------------------ */
body { font-family: var(--hs-font); color: var(--hs-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--hs-font); }

/* 3. Building blocks ------------------------------------------------- */

/* section: vertical rhythm; --tint for a mint band */
.hs-section { padding: 72px 0; }
.hs-section--tint { background: var(--hs-mint); }
.hs-section--flush { padding-top: 0; }

/* titles */
.hs-title { margin: 0 0 8px; color: var(--hs-ink); font-size: 34px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
.hs-title--page { color: var(--hs-deep); font-size: 38px; }
.hs-title--brand { color: var(--hs-teal); font-size: 44px; }
.hs-title--center, .hs-lead--center { text-align: center; }
.hs-lead { margin: 0 0 32px; color: var(--hs-muted); font-size: 17px; line-height: 1.55; }

/* buttons: one shape, colour by modifier; hover changes the colour only */
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--hs-radius-sm); font-family: var(--hs-font); font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--hs-fast) var(--hs-ease), border-color var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
.hs-btn:hover, .hs-btn:focus { text-decoration: none; }
.hs-btn:focus-visible { outline: 3px solid var(--hs-on-deep-soft); outline-offset: 2px; }
.hs-btn--primary { background: var(--hs-teal); color: var(--hs-white) !important; }
@media (hover: hover) { .hs-btn--primary:hover { background: var(--hs-teal-dark); } }
.hs-btn--accent { background: var(--hs-orange); color: var(--hs-white) !important; }
@media (hover: hover) { .hs-btn--accent:hover { background: var(--hs-orange-dark); } }
.hs-btn--light { background: var(--hs-white); color: var(--hs-deep) !important; }
@media (hover: hover) { .hs-btn--light:hover { background: var(--hs-on-deep); } }
.hs-btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--hs-white) !important; }
@media (hover: hover) { .hs-btn--ghost:hover { background: var(--hs-white); color: var(--hs-teal-dark) !important; } }
.hs-btn--outline { border-color: var(--hs-teal); color: var(--hs-teal-dark) !important; }
@media (hover: hover) { .hs-btn--outline:hover { background: var(--hs-teal); color: var(--hs-white) !important; } }
.hs-btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.hs-btn--block { display: flex; width: 100%; }
.hs-btn--round { width: 44px; padding: 0; border-radius: 50%; }
.hs-btn--round.hs-btn--sm { width: 36px; height: 36px; }
.hs-btn--pill { border-radius: var(--hs-pill); }

/* chips: pill links for filters and model lists */
.hs-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--hs-line); border-radius: var(--hs-pill); background: var(--hs-white); color: var(--hs-ink); font-size: 15px; font-weight: 700; text-decoration: none; transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { .hs-chip:hover { border-color: var(--hs-teal); color: var(--hs-ink); text-decoration: none; } }
.hs-chip.is-active { border-color: var(--hs-teal); background: var(--hs-teal); color: var(--hs-white); }
.hs-chip:focus-visible { outline: 3px solid var(--hs-teal); outline-offset: 2px; }
.hs-chip--soft { min-height: 0; padding: 6px 12px; border-color: transparent; background: var(--hs-mint); color: #23505a; font-size: 13px; }
@media (hover: hover) { .hs-chip--soft:hover { border-color: transparent; background: var(--hs-teal); color: var(--hs-white); } }

/* search: white pill with a teal border and a round button (navbar, category page); --hero is the big one on the teal hero */
.hs-search { position: relative; display: flex; align-items: center; height: 52px; padding: 4px 4px 4px 20px; border: 1px solid var(--hs-teal); border-radius: var(--hs-pill); background: var(--hs-white); }
.hs-search:focus-within { box-shadow: 0 0 0 3px rgba(0, 131, 146, 0.18); }
.hs-search__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; outline: none; }
.hs-search__icon { margin-right: 12px; color: var(--hs-muted); }
.hs-search--hero { height: 60px; padding: 6px 6px 6px 22px; border: 0; box-shadow: 0 12px 32px rgba(0, 40, 48, 0.22); }
.hs-search--hero:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45), 0 12px 32px rgba(0, 40, 48, 0.22); }
.hs-search--hero .hs-btn { height: 48px; border-radius: var(--hs-pill); }

/* cards: white, thin border; --link cards get a teal border on hover (nothing moves) */
.hs-card { border: 1px solid var(--hs-line); border-radius: var(--hs-radius); background: var(--hs-white); }
.hs-card--link { color: var(--hs-ink); text-decoration: none; transition: border-color var(--hs-base) var(--hs-ease); }
@media (hover: hover) { .hs-card--link:hover { border-color: var(--hs-teal); color: var(--hs-ink); text-decoration: none; } }
.hs-card--lg { border-radius: var(--hs-radius-lg); }

/* icon box: square with an icon; --solid on teal */
.hs-icon-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hs-mint); color: var(--hs-teal); font-size: 18px; }
.hs-icon-box--solid { background: var(--hs-teal); color: var(--hs-white); }

/* text link: the underline grows from left to right on hover and leaves to the right */
.hs-link { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; transition: background-size 0.3s var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { a:hover > .hs-link, a.hs-link:hover { color: inherit; text-decoration: none; background-size: 100% 1px; background-position: left bottom; } }
.hs-link--teal { color: var(--hs-teal); font-weight: 700; }
@media (hover: hover) { .hs-link--teal:hover { color: var(--hs-teal-dark) !important; } }

/* review stars: five outlines with a gold fill; --90 etc. sets the fill (rating x 20) */
.hs-stars { position: relative; display: flex; }
.hs-stars__track, .hs-stars__fill { display: flex; }
.hs-stars__track { color: rgba(255, 255, 255, 0.35); }
.hs-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--hs-gold); }
.hs-stars svg { flex: none; width: 16px; height: 16px; }
.hs-stars--80 .hs-stars__fill { width: 80%; }
.hs-stars--90 .hs-stars__fill { width: 90%; }
.hs-stars--100 .hs-stars__fill { width: 100%; }

@media (max-width: 575.98px) {
  .hs-section { padding: 52px 0; }
  .hs-title { font-size: 26px !important; }
  .hs-title--page, .hs-title--brand { font-size: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-btn, .hs-chip, .hs-card--link, .hs-link { transition: none; }
}

/* 4. Layouts --------------------------------------------------------- */

/* header: topbar + navbar stay on screen while scrolling */
.hh-stickyhead { position: sticky; top: 0; z-index: 1030; background: var(--hs-white); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10); }
.hh-stickyhead .nav-link, .hh-stickyhead .header-tag { font-family: var(--hs-font); font-size: 16px; font-weight: 700; color: var(--hs-ink) !important; }

/* topbar: four USPs spread evenly; one at a time on phones */
.topbar.hh-topbar { display: flex; align-items: center; height: 52px; padding: 0; background: var(--hs-teal); font-family: var(--hs-font); font-size: 16px; letter-spacing: 0.03em; color: var(--hs-white); }
.hh-topbar > .container-fluid { width: 100%; }
.hh-topbar__list { display: flex; justify-content: space-evenly; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hh-topbar__usp { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hh-topbar__icon { display: flex; }
.topbar .hh-topbar__svg { display: block; width: 18px; height: 18px; margin: 0 !important; }
.topbar .hs-stars svg { width: 16px; height: 16px; margin: 0 !important; }

/* navbar: Kopen button, expandable search, cart */
.hh-quicknav { display: flex; align-items: center; gap: 6px; margin-left: 40px; }
.hh-quicknav__link { white-space: nowrap; padding: 10px 12px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .hh-quicknav__link:hover { color: var(--hs-ink); text-decoration: none; } }   /* underline: the shared .hs-link (left to right) */
@media (max-width: 1199px) { .hh-quicknav { margin-left: 20px; gap: 0; } .hh-quicknav__link { padding: 10px 8px; font-size: 15px; } }   /* "... verkopen" stays on one line on small laptops */
.hh-quicknav__link:focus-visible { outline: 2px solid var(--hs-teal); outline-offset: 2px; border-radius: 6px; }
.hh-navsearch { position: relative; display: flex; align-items: center; margin-left: 12px; }
.hh-navsearch__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--hs-ink); font-size: 21px; cursor: pointer; transition: background-color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { .hh-navsearch__toggle:hover { background: var(--hs-mint); } }
.hh-navsearch.is-open .hh-navsearch__toggle .fa-magnifying-glass::before { content: "\f00d"; }
.hh-navsearch__form { position: absolute; top: 50%; right: 48px; width: 0; height: 44px; padding: 0; overflow: hidden; border-color: transparent; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: width var(--hs-base) var(--hs-ease), opacity 0.2s var(--hs-ease); }
.hh-navsearch.is-open .hh-navsearch__form { width: 360px; padding: 4px 4px 4px 16px; border-color: var(--hs-teal); opacity: 1; pointer-events: auto; }
.hh-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; color: var(--hs-ink); }
@media (hover: hover) { .hh-cart:hover { color: var(--hs-teal); } }
.hh-cart__icon { width: 30px; height: 30px; }
.hh-cart__count { position: absolute; top: 2px; right: 0; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--hs-white); border-radius: var(--hs-pill); background: var(--hs-teal); color: var(--hs-white); font-size: 10px; font-weight: 700; line-height: 1; box-sizing: content-box; }

@media (max-width: 1199.98px) {
  .topbar.hh-topbar { font-size: 14px; letter-spacing: 0.01em; }
}
@media (max-width: 991.98px) {
  .topbar.hh-topbar { height: 44px; }
  .hh-topbar__list { position: relative; height: 24px; }
  .hh-topbar__usp { position: absolute; left: 0; right: 0; justify-content: center; opacity: 0; animation: hh-usp 16s infinite; }
  .hh-topbar__usp:nth-child(2) { animation-delay: 4s; }
  .hh-topbar__usp:nth-child(3) { animation-delay: 8s; }
  .hh-topbar__usp:nth-child(4) { animation-delay: 12s; }
  @keyframes hh-usp { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-6px); } }
  .navbar-custom > .container-fluid { flex-wrap: nowrap; }
  .hh-navsearch { order: 1; margin: 0 8px 0 0; }
  .hh-navsearch.is-open .hh-navsearch__form { width: calc(100vw - 88px); }
  .hh-cart { order: 1; margin: 0 4px 0 0; }
  .hh-cart__icon { width: 26px; height: 26px; }
  .navbar-custom .navbar-toggler { order: 2; }
}
@media (max-width: 575.98px) {
  .navbar-custom .navbar-brand { margin-right: 0; }
  .navbar-custom .navbar-brand img { height: 40px; }
  .hh-navsearch { margin-right: 2px; }
  .hh-navsearch__toggle { width: 36px; }
  .hh-cart { width: 36px; }
  .navbar-custom .navbar-toggler { padding: 4px 6px; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .hh-topbar__usp { animation: none; }
  .hh-topbar__usp:first-child { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-navsearch__form { transition: none; }
}

/* hero: teal with a rounded bottom; the search is .hs-search--hero */
.hh-hero { position: relative; overflow: hidden; padding: 64px 0 72px; border-radius: 0 0 40px 40px; background: var(--hs-teal); color: var(--hs-white); }
.hh-hero::before { content: ""; position: absolute; inset: 0; background: url("../../newdesign-assets/images/hero-bg.webp") center / 15% auto repeat; opacity: 0.06; pointer-events: none; }
.hh-hero > .container-fluid { position: relative; }
.hh-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hh-hero__title { margin: 0; color: var(--hs-white); font-size: 56px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }
.hh-hero__lead { max-width: 560px; margin: 18px 0 0; color: #dff7f5; font-size: 18px; line-height: 1.55; }
.hh-hero__media img { display: block; width: 100%; max-width: 640px; height: auto; margin-left: auto; }
.hh-hero .hs-search { max-width: 560px; margin-top: 28px; }
.hh-hero__checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--hs-white); font-size: 15px; font-weight: 700; }
.hh-hero__checks i { margin-right: 6px; color: #9ff0e6; }
.hh-hero .hs-btn--ghost { margin-top: 20px; }
.hh-hero__title > span { display: block; }   /* min-height set by common.js (tallest typed word) */
.hh-type { color: #b9f3ea; white-space: nowrap; }
.hh-type::after { content: ""; display: inline-block; width: 3px; height: 0.85em; margin-left: 4px; background: currentColor; vertical-align: -0.06em; animation: hh-caret 1s steps(1) infinite; }
@keyframes hh-caret { 50% { opacity: 0; } }

/* home: category tiles (hover = teal border + photo crossfade) */
.hh-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.hh-cat { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 20px; border-radius: var(--hs-radius-lg); }
.hh-cat__img { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 160px; }
.hh-cat__img img { max-width: 80%; max-height: 100%; object-fit: contain; transition: opacity 0.3s var(--hs-ease); }
.hh-cat__img i { color: var(--hs-teal); font-size: 64px; }
.hh-cat__img .hh-cat__hover { position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -50%); }
@media (hover: hover) { .hh-cat:hover .hh-cat__hover { opacity: 1; } }
@media (hover: hover) { .hh-cat:hover .hh-cat__img:has(.hh-cat__hover[src]) .hh-cat__main { opacity: 0; } }
.hh-cat__name { margin-top: 16px; font-size: 18px; font-weight: 700; }

/* home: steps */
.hh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: hh-step; }
.hh-step { display: flex; gap: 16px; align-items: flex-start; counter-increment: hh-step; }
.hh-step__num { width: 48px; height: 48px; border-radius: 50%; font-size: 20px; font-weight: 900; }
.hh-step__num::before { content: counter(hh-step); }
.hh-step__title { margin: 4px 0 6px; color: var(--hs-ink); font-size: 18px; font-weight: 700; }
.hh-step__text { margin: 0; color: var(--hs-muted); font-size: 15px; line-height: 1.55; }

/* home: intro + reasons + privacy */
.hh-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.hh-intro p { margin: 0; color: var(--hs-text); font-size: 16px; line-height: 1.7; }
.hh-usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.hh-usp { padding: 24px; border-radius: var(--hs-radius-lg); }
.hh-usp__title { margin: 16px 0 6px; color: var(--hs-ink); font-size: 17px; font-weight: 700; }
.hh-usp__text { margin: 0; color: var(--hs-muted); font-size: 15px; line-height: 1.55; }
.hh-privacy { display: flex; gap: 18px; align-items: flex-start; margin-top: 20px; padding: 24px; border-radius: var(--hs-radius-lg); background: var(--hs-mint); }
.hh-privacy__title { margin: 0 0 4px; color: var(--hs-ink); font-size: 17px; font-weight: 700; }
.hh-privacy__text { margin: 0; color: var(--hs-text); font-size: 15px; line-height: 1.6; }

/* home: popular models (one row per category: head left, model chips right) */
.hh-models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hh-mcard { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; border-radius: var(--hs-radius-lg); }
.hh-mcard__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 18px; border-right: 1px solid var(--hs-line); background: #fafcfc; color: var(--hs-ink); text-align: center; text-decoration: none; }
@media (hover: hover) { .hh-mcard__head:hover { color: var(--hs-ink); text-decoration: none; } }
.hh-mcard__img { display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 16px; background: var(--hs-white); }
.hh-mcard__img img { max-width: 112px; max-height: 112px; object-fit: contain; }
.hh-mcard__name { font-size: 19px; font-weight: 700; }
.hh-mcard__name small { display: block; margin-top: 2px; color: var(--hs-muted); font-size: 14px; font-weight: 400; }
.hh-mcard__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 16px 18px; }

/* FAQ: title + dark help card left (sticky under the header), questions as cards right */
.hh-faq-section { overflow: visible; } /* sticky needs visible overflow; the old theme hides it on every section */
.hh-faq { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; align-items: start; }
.hh-faq__intro { position: sticky; top: 140px; }
.hh-faq__intro .hs-lead { margin: 14px 0 32px; }
.hh-faq__help { padding: 26px 24px 24px; border-radius: 16px; background: var(--hs-deep); color: var(--hs-on-deep); }
.hh-faq__help-title { margin: 0 0 6px; color: var(--hs-white); font-size: 19px; font-weight: 900; }
.hh-faq__help-text { margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.hh-faq__help .hs-btn { margin-top: 18px; }
.hh-faq__contact { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--hs-white); font-size: 15px; font-weight: 700; text-decoration: none; }
.hh-faq__contact i { width: 16px; color: var(--hs-on-deep-soft); }
@media (hover: hover) { .hh-faq__contact:hover { color: var(--hs-white); text-decoration: none; } }
.hh-faq__list { display: flex; flex-direction: column; gap: 12px; }
.hh-faq__item { transition: border-color var(--hs-base) var(--hs-ease); }
@media (hover: hover) { .hh-faq__item:hover { border-color: var(--hs-line-strong); } }
.hh-faq__item:has(.hh-faq__q[aria-expanded="true"]) { border-color: var(--hs-teal); }
.hh-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; border: 0; border-radius: var(--hs-radius); background: none; color: var(--hs-ink); font-family: var(--hs-font); font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; transition: color 0.2s var(--hs-ease); }
.hh-faq__q[aria-expanded="true"] { color: var(--hs-teal-dark); }
.hh-faq__q:focus { outline: none; }
.hh-faq__q:focus-visible { outline: 2px solid var(--hs-teal); outline-offset: 2px; }
.hh-faq__icon { position: relative; width: 30px; height: 30px; border-radius: 50%; transition: transform 0.28s var(--hs-ease); }
.hh-faq__icon::before, .hh-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--hs-deep); }
.hh-faq__icon::after { transform: rotate(90deg); }
.hh-faq__q[aria-expanded="true"] .hh-faq__icon { transform: rotate(45deg); }
.hh-faq__a { color: var(--hs-text); font-size: 15px; line-height: 1.65; }
.hh-faq__a.collapsing { transition: height 0.28s var(--hs-ease); } /* padding sits on the inner block so the height animation does not jump */
.hh-faq__body { padding: 0 24px 20px; }
.hh-faq__body p:last-child { margin-bottom: 0; }

/* reviews: equal cards, "Lees meer" popup */
.slider_review_section .slick-slide > div, .slider_review_section .slick-slide .review-slide { height: 100%; }   /* the cards only: the slider itself also carries .review-slide */
.slider_review_section .slick-slide .review-slide { display: flex !important; }
.slider_review_section .review-card { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 220px; }
.slider_review_section .review-card p { margin-bottom: 0; }
.reviews-footer-text i { margin-left: 4px; font-size: 12px; }
.hh-review-modal .modal-dialog { max-width: 520px; }
.hh-review-modal .modal-content { position: relative; padding: 28px 28px 24px; border: 0; border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-lg); }
.hh-review-modal__close { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--hs-mint); color: var(--hs-deep); font-size: 16px; cursor: pointer; transition: background-color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { .hh-review-modal__close:hover { background: #dcf0f2; } }
.hh-review-modal__head { display: flex; align-items: center; gap: 14px; margin: 0 40px 18px 0; }
.hh-review-modal__head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(14, 107, 116, 0.24); }
.hh-review-modal__name { margin: 0 0 4px; color: var(--hs-ink); font-size: 18px; font-weight: 700; }
.hh-review-modal__text { margin: 0; color: var(--hs-text); font-size: 16px; line-height: 1.65; }
.hh-review-modal__src { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hs-line); color: var(--hs-muted); font-size: 14px; }

/* footer, in the style of holysmartphone.nl */
.hs-foot { padding: 48px 0 0; background: var(--hs-deep); color: var(--hs-on-deep); }
.hs-foot__brand { padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hs-foot__brand img { display: block; height: 64px; width: auto; }
.hs-foot__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 32px; padding: 32px 0; }
.hs-foot__title { margin: 0 0 14px; color: var(--hs-white); font-size: 16px; font-weight: 700; }
.hs-foot__hours { margin: 0; padding: 0; list-style: none; }
.hs-foot__hours li { display: flex; justify-content: space-between; max-width: 260px; padding: 5px 10px; border-radius: 6px; font-size: 14px; }
.hs-foot__hours li.is-today { background: rgba(255, 255, 255, 0.10); color: var(--hs-white); font-weight: 700; }
.hs-foot__line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: var(--hs-on-deep); font-size: 14px; line-height: 1.5; }
.hs-foot__line i { width: 16px; margin-top: 3px; color: var(--hs-on-deep-soft); }
@media (hover: hover) { a.hs-foot__line:hover, .hs-foot__link:hover { color: var(--hs-white); text-decoration: none; } }
.hs-foot__link { display: block; width: fit-content; margin-bottom: 8px; color: var(--hs-on-deep); font-size: 14px; }
.hs-foot__bottom { display: flex; justify-content: flex-end; padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hs-foot__legal { color: #b8d9d4; font-size: 13px; }

/* category page (views/models.php): head, category shelf, brand filters, model grid */
.hh-cp-head { margin-bottom: 24px; }
.hh-cp-head .hs-title { margin: 0; }
.hh-cp-head .hs-lead { margin: 8px 0 0; }
.hh-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* tiles are .hs-card.hs-card--link: hover = teal border + photo crossfade; the active category keeps the teal border */
.hh-shelf__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 16px; }
.hh-shelf__item.is-active { border-color: var(--hs-teal); }
.hh-shelf__item:focus-visible { outline: 3px solid var(--hs-teal); outline-offset: 2px; }
.hh-shelf__img { position: relative; display: block; width: 100%; max-width: 132px; aspect-ratio: 1; }
.hh-shelf__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.3s var(--hs-ease); }
.hh-shelf__alt { opacity: 0; }
@media (hover: hover) { .hh-shelf__item:hover .hh-shelf__alt { opacity: 1; } }
@media (hover: hover) { .hh-shelf__item:hover .hh-shelf__img:has(.hh-shelf__alt[src]) .hh-shelf__main { opacity: 0; } }
.hh-shelf__name { font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; }
.hh-shelf__item.is-active .hh-shelf__name { color: var(--hs-teal-dark); }
.hh-cp-panel { margin-bottom: 24px; padding: 24px; overflow: hidden; border: 1px solid var(--hs-line); border-radius: var(--hs-radius-lg); background: var(--hs-white); box-shadow: 0 2px 10px rgba(0, 60, 70, 0.05); }
.hh-cp-panel .hh-cp-bar { margin-bottom: 0; }
@media (max-width: 575.98px) { .hh-cp-panel { padding: 16px; } }   /* same as the sideways-swipe bleed of .hh-shelf / .hh-brands */
.hh-cp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 20px; }
.hh-brands { display: flex; flex-wrap: wrap; gap: 10px; }
.hh-cp-bar__search { flex: 0 1 380px; margin-left: auto; }

/* model cards: photo panel, name + price left, Verkoop bottom-right */
.tab-content-section .products-grid { gap: 20px; }
.tab-content-section .product-card { padding: 14px 14px 18px; border-radius: 18px; row-gap: 16px; }
.tab-content-section .product-image { height: 230px; max-height: 230px; border-radius: 12px; background: var(--hs-mint-2); }
.tab-content-section .product-image img { max-width: 92%; max-height: 94%; }
.product-card .product-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 0 6px; }
.product-card .product-name { grid-column: 1; grid-row: 1; font-family: var(--hs-font); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--hs-ink); }
.product-card .product-price { grid-column: 1; grid-row: 2; font-family: var(--hs-font); color: var(--hs-muted); font-size: 14px; }
.product-card .product-price .current { margin-left: 4px; font-family: var(--hs-font); font-size: 22px; font-weight: 900; line-height: 28px; color: var(--hs-teal-dark); }
.product-card .hs-btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; }
.product-card.hh-later, .product-card.hh-out { display: none; }
.hh-cp-empty { margin: 8px 0 24px; }
.product-card.hh-in { animation: hh-card-in 0.35s ease both; }
@keyframes hh-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* back-to-top button (category page, after the first batch) */
.hh-totop { position: fixed; right: 24px; bottom: 24px; z-index: 1020; width: 48px; height: 48px; box-shadow: 0 8px 20px rgba(0, 60, 70, 0.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--hs-base) var(--hs-ease), transform var(--hs-base) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease); }
.hh-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* layout breakpoints */
@media (max-width: 1199.98px) {
  .hh-hero__title { font-size: 46px; }
  .hh-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) and (min-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .hh-hero { padding: 40px 0 48px; border-radius: 0 0 28px 28px; }
  .hh-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hh-hero__media img { max-width: 440px; margin: 0 auto; }
  .hh-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hh-intro, .hh-faq { grid-template-columns: minmax(0, 1fr); }
  .hh-faq { gap: 24px; }
  .hh-faq__intro { position: static; }
  .hh-mcard { grid-template-columns: minmax(0, 1fr); }
  .hh-mcard__head { flex-direction: row; justify-content: flex-start; padding: 16px 18px; border-right: 0; border-bottom: 1px solid var(--hs-line); text-align: left; }
  .hh-mcard__img { width: 48px; height: 48px; border-radius: 12px; }
  .hh-mcard__img img { max-width: 40px; max-height: 40px; }
  .hh-mcard__name { font-size: 17px; }
  .hs-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .hh-shelf::-webkit-scrollbar { display: none; }
  .hh-shelf__item { flex: 0 0 132px; scroll-snap-align: start; }
  .hh-cp-bar__search { flex-basis: 100%; order: -1; margin-left: 0; }
}
@media (max-width: 575.98px) {
  .hh-hero__title { font-size: 32px !important; }
  .hh-hero__lead { font-size: 16px; }
  .hs-search--hero .hs-btn { padding: 0 16px; font-size: 15px; }
  .hh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hh-cat { padding: 16px 10px 14px; }
  .hh-cat__img { height: 110px; }
  .hh-cat__name { margin-top: 10px; font-size: 16px; }
  .hh-usps { grid-template-columns: minmax(0, 1fr); }
  .hh-faq__q { padding: 16px 18px; font-size: 16px; }
  .hh-faq__body { padding: 0 18px 16px; }
  .hs-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hs-foot__bottom { justify-content: flex-start; }
  .hh-shelf__item { flex-basis: 112px; padding: 12px 6px 10px; }
  .hh-shelf__name { font-size: 14px; }
  .tab-content-section .product-image { height: 200px; }
  .hh-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-type::after { animation: none; }
  .hh-cat__img img, .hh-shelf__img img, .hh-faq__icon, .hh-faq__item, .hh-totop, .hh-navsearch__toggle, .hh-review-modal__close { transition: none; }
  .product-card.hh-in { animation: none; }
}

/* ===== product page (views/model_details.php, views/model_details/multiple_steps_fields.php) ===== */
.hh-sell-head { margin: 24px 0 24px; }
.hh-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 18px; padding: 0 18px 0 14px; border: 1px solid var(--hs-line); border-radius: 12px; background: var(--hs-white); color: var(--hs-ink); font-family: var(--hs-font); font-size: 15px; font-weight: 700; text-decoration: none; transition: border-color var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
.hh-back i { color: var(--hs-teal); }
@media (hover: hover) { .hh-back:hover { border-color: var(--hs-teal); color: var(--hs-teal-dark); text-decoration: none; } }
.hh-back:focus-visible { outline: 2px solid var(--hs-teal); outline-offset: 2px; }
.hh-sell-head .hs-lead { margin: 8px 0 0; }
.product-form-container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; padding: 32px; border: 1px solid var(--hs-line); border-radius: var(--hs-radius-lg); background: var(--hs-white); }
.product-form-container.offer-header-active { border: 0; padding: 0; }
/* progress: "Vraag 2 van 6" with one segment per question */
.hh-progress.step-navigation-container { display: block; margin: 0 0 24px; padding: 0; border: 0; }
.hh-progress .step-indicator, .hh-progress .step-indicator .active-step { font-family: var(--hs-font); font-size: 14px; line-height: 1.4; color: var(--hs-muted); }
.hh-progress .step-indicator .active-step { color: var(--hs-teal-dark); font-weight: 700; }
.hh-progress .hh-progress__bar { display: flex; flex-direction: row; gap: 4px; margin-top: 8px; }
.hh-progress .step-dot { flex: 1; width: auto; height: 4px; border-radius: 2px; background: var(--hs-line); cursor: default; transition: background-color var(--hs-base) var(--hs-ease); }
.hh-progress .step-dot.active, .hh-progress .step-dot.is-done { width: auto; height: 4px; background: var(--hs-teal); }
.offer-header-active .hh-progress { display: none; }
/* answers */
.product-form-left .radio-option { margin-bottom: 12px; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease); }
.product-form-left .radio-option label { padding: 18px 20px; font-family: var(--hs-font); font-size: 17px; font-weight: 700; color: var(--hs-ink); }
.product-form-left .radio-option.selected { border-color: var(--hs-teal); background: var(--hs-mint); }
.product-form-left .radio-option.selected label { color: var(--hs-teal-dark); }
.product-form-left .radio-option.selected label::before { background: var(--hs-teal) !important; border-color: var(--hs-teal) !important; }
@media (hover: hover) { .product-form-left .radio-option:hover { border-color: var(--hs-teal); background: var(--hs-mint-2); } }
@media (hover: none) { .product-form-left .radio-option:hover { border-color: var(--hs-line); background: var(--hs-white); } .product-form-left .radio-option.selected:hover { border-color: var(--hs-teal); background: var(--hs-mint); } }
/* photo with the "tot" price underneath, stays in view while answering */
.product-form-right { display: block; }
.product-image-box { position: sticky; top: 140px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; }
.hh-sell-photo { display: flex; align-items: center; justify-content: center; height: 420px; padding: 12px; border-radius: 16px; background: var(--hs-mint-2); }
.product-image-box .hh-sell-photo img { width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.product-badge { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); background: var(--hs-white); box-shadow: none; color: var(--hs-muted); font-family: var(--hs-font); font-size: 15px; font-weight: 400; }
.product-badge span { display: inline; color: var(--hs-teal-dark); font-family: var(--hs-font); font-size: 26px; font-weight: 900; line-height: 1.2; }
@media (max-width: 991px) {
  .product-form-container { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .product-form-right { order: -1; }
  /* phone: photo and price side by side, the questions right below */
  .product-image-box { position: static; flex-direction: row; align-items: center; }
  .hh-sell-photo { flex: 0 0 120px; height: 120px; padding: 4px; border-radius: 12px; }
  .product-badge { flex: 1; flex-direction: column; gap: 0; padding: 12px 16px; }
  .product-badge span { font-size: 22px; }
  .product-form-left .radio-option label { padding: 16px; font-size: 16px; }
}

/* whole model card clickable: the "Verkoop" link stretches over the card (one link, valid HTML) */
.product-card { position: relative; }
.product-card .hh-stretch { position: static; }
.hh-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* ===== phones: header with logo + search + cart + burger, side menu (include/header.php #hhDrawer) ===== */
.hh-burger { display: none; }
.hh-drawer { position: fixed; inset: 0; z-index: 1050; }   /* under the search suggestions (1100) */
.hh-drawer[hidden] { display: none; }
.hh-drawer__backdrop { position: absolute; inset: 0; background: rgba(1, 82, 97, 0.35); opacity: 0; transition: opacity var(--hs-base) var(--hs-ease); }
.hh-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 16px; width: min(88vw, 380px); padding: 20px 16px 24px; overflow-y: auto; background: var(--hs-white); font-family: var(--hs-font); transform: translateX(100%); transition: transform var(--hs-base) var(--hs-ease); }
.hh-drawer.is-open .hh-drawer__backdrop { opacity: 1; }
.hh-drawer.is-open .hh-drawer__panel { transform: none; }
.hh-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.hh-drawer__title { color: var(--hs-ink); font-size: 22px; font-weight: 900; }
.hh-drawer__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--hs-mint-2); color: var(--hs-ink); font-size: 18px; }
.hh-drawer__search { height: 48px; padding-left: 16px; }
.hh-drawer__nav { display: flex; flex-direction: column; gap: 8px; }
.hh-drawer__link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--hs-radius); background: var(--hs-mint-2); color: var(--hs-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.hh-drawer__link:hover, .hh-drawer__link:focus { color: var(--hs-ink); text-decoration: none; }
.hh-drawer__icon { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; }
.hh-drawer__icon img { max-width: 40px; max-height: 40px; object-fit: contain; }
.hh-drawer__label { flex: 1; }
.hh-drawer__link .fa-chevron-right { color: var(--hs-muted); font-size: 13px; }
.hh-drawer__foot { display: flex; flex-direction: column; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hs-line); }
.hh-drawer__foot-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; font-weight: 900; text-align: left; }
.hh-drawer__foot-toggle i { color: var(--hs-muted); font-size: 13px; transition: transform var(--hs-base) var(--hs-ease); }
.hh-drawer__foot.is-open .hh-drawer__foot-toggle i { transform: rotate(180deg); }
/* closed: 0 rows high and hidden for keyboard/screen readers; opens smoothly to its own height */
.hh-drawer__foot-list { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--hs-base) var(--hs-ease), visibility var(--hs-base); }
.hh-drawer__foot.is-open .hh-drawer__foot-list { grid-template-rows: 1fr; visibility: visible; }
.hh-drawer__foot-inner { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.hh-drawer__foot-link { padding: 8px 0; color: var(--hs-text); font-size: 15px; text-decoration: none; }
.hh-drawer__foot-link:hover { color: var(--hs-teal-dark); text-decoration: none; }
html.hh-noscroll { overflow: hidden; }
@media (min-width: 992px) { .hh-drawer { display: none !important; } }
@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse, .hh-quicknav { display: none !important; }
  .navbar-custom .navbar-brand { margin-right: auto; }
  .hh-burger { display: flex; order: 2; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--hs-ink); font-size: 22px; }
  /* search drops down under the header, full width */
  .hh-navsearch { position: static; }
  .hh-navsearch__form, .hh-navsearch.is-open .hh-navsearch__form { top: calc(100% + 8px); right: 16px; left: 16px; width: auto; height: 50px; box-shadow: 0 12px 28px rgba(0, 40, 48, 0.18); transform: translateY(-6px); transition: opacity 0.2s var(--hs-ease), transform 0.2s var(--hs-ease); }
  .hh-navsearch.is-open .hh-navsearch__form { transform: none; }
  /* category tiles: 2.5 visible, so it is clear you can swipe */
  .hh-shelf__item { flex: 0 0 calc((100% - 40px) / 4.5); padding: 12px 6px 10px; }
  .hh-shelf__img { max-width: 80px; }
}
@media (max-width: 767.98px) {
  /* model cards: two per row */
  .tab-content-section .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tab-content-section .product-card { padding: 8px 8px 12px; border-radius: 14px; row-gap: 10px; }
  .tab-content-section .product-image { height: 140px; max-height: 140px; }
  .product-card .product-content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 4px; }
  .product-card .product-name { font-size: 15px; }
  .product-card .product-price { font-size: 13px; }
  .product-card .product-price .current { font-size: 17px; line-height: 22px; }
  .product-card .hs-btn { align-self: stretch; height: 36px; margin-top: 8px; font-size: 14px; }
}
@media (max-width: 575.98px) {
  .hh-shelf__item { flex-basis: calc((100% - 20px) / 2.5); }
  .hh-shelf__img { max-width: 64px; }
  .tab-content-section .product-image { height: 120px; max-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-drawer__backdrop, .hh-drawer__panel, .hh-drawer__foot-list, .hh-drawer__foot-toggle i { transition: none; }
}
.hh-drawer__panel > * { flex-shrink: 0; }   /* a long menu scrolls; nothing gets squeezed */
@media (max-width: 991.98px) {
  .modal-page-wrap { padding-top: 24px; padding-bottom: 32px; }
  /* tiles and brands swipe sideways up to the screen edge */
  .hh-shelf, .hh-brands { margin: 0 -24px; padding: 0 24px 4px; scroll-padding: 0 24px; }
  .hh-brands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hh-brands::-webkit-scrollbar { display: none; }
  .hh-brands .hs-chip { flex: 0 0 auto; }
  .hh-cp-bar { margin: 20px 0 16px; }
  .hh-cp-bar .hh-brands { width: calc(100% + 48px); }
}
@media (max-width: 575.98px) {
  .hh-shelf, .hh-brands { margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .hh-cp-bar .hh-brands { width: calc(100% + 32px); }
  .hh-cp-head { margin-bottom: 18px; }
}
.product-form-left .model-details-panel > .h4 { font-family: var(--hs-font); font-size: 24px; font-weight: 900; line-height: 1.25; color: var(--hs-ink); }
@media (max-width: 575.98px) { .product-form-left .model-details-panel > .h4 { font-size: 20px; } }

/* ===== order done (views/order_completion.php) ===== */
.hh-done > .container-fluid { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.hh-done__hero { display: flex; flex-direction: column; align-items: center; padding: 36px 24px 32px; border-radius: var(--hs-radius-lg); text-align: center; }
.hh-done__check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--hs-teal); color: var(--hs-white); font-size: 28px; }
.hh-done__hero .hs-title { margin: 0; }
.hh-done__ref { margin: 10px 0 0; color: var(--hs-muted); font-size: 15px; }
.hh-done__ref strong { color: var(--hs-ink); font-weight: 900; letter-spacing: 0.02em; }
.hh-done__total { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding: 16px 28px; border-radius: var(--hs-radius); background: var(--hs-mint); }
.hh-done__total-label { color: var(--hs-teal-dark); font-size: 14px; font-weight: 700; }
.hh-done__total-price { color: var(--hs-teal-dark); font-size: 34px; font-weight: 900; line-height: 1.2; }
.hh-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hh-done__card { padding: 24px; border-radius: var(--hs-radius-lg); }
.hh-done .hh-done__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 19px !important; /* beats the old mobile h2 { 28px !important } in newdesign.css */ font-weight: 900; }
.hh-done__text { margin: 0; color: var(--hs-text); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.hh-done__item { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.hh-done__item + .hh-done__item { border-top: 1px solid var(--hs-line); }
.hh-done__img { display: flex; flex: 0 0 72px; align-items: center; justify-content: center; height: 72px; border-radius: 12px; background: var(--hs-mint-2); }
.hh-done__img img { max-width: 56px; max-height: 60px; object-fit: contain; }
.hh-done__item-body { flex: 1; min-width: 0; }
.hh-done__item-name { color: var(--hs-ink); font-size: 17px; font-weight: 900; }
.hh-done__item-price { color: var(--hs-teal-dark); font-size: 18px; font-weight: 900; white-space: nowrap; }
/* answers of a device (views/sections/item_answers.php): question, answer below it, one per row */
.hh-answers { margin-top: 6px; font-size: 14px; }
.hh-answers summary { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-teal-dark); font-weight: 700; cursor: pointer; list-style: none; }
.hh-answers summary::-webkit-details-marker { display: none; }
.hh-answers summary::before { content: "\f078"; font-family: "Font Awesome 6 Free"; font-size: 11px; font-weight: 900; transition: transform var(--hs-fast) var(--hs-ease); }
.hh-answers[open] summary::before { transform: rotate(180deg); }
.hh-answers__list { margin: 10px 0 2px; padding: 4px 14px; border-radius: var(--hs-radius); background: var(--hs-mint-2); }
.hh-answers__row { padding: 8px 0; }
.hh-answers__row + .hh-answers__row { border-top: 1px solid var(--hs-line); }
.hh-answers__list dt { color: var(--hs-muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
.hh-answers__list dd { margin: 2px 0 0; color: var(--hs-ink); font-size: 15px; font-weight: 700; }
.hh-done__sum { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hs-line); font-size: 15px; }
.hh-done__sum div { display: flex; justify-content: space-between; }
.hh-done__sum-total { color: var(--hs-ink); font-weight: 900; }
.hh-done__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hh-done__more { display: flex; justify-content: center; margin-top: 8px; }
@media (max-width: 575.98px) {
  .hh-done__hero { padding: 28px 16px 24px; }
  .hh-done__total-price { font-size: 30px; }
  .hh-done__actions .hs-btn, .hh-done__more .hs-btn { width: 100%; }
  .hh-done__card { padding: 18px 16px; }
  .hh-done__grid { grid-template-columns: minmax(0, 1fr); }
  .hh-done__item { align-items: flex-start; gap: 12px; }
  .hh-done__img { flex-basis: 56px; height: 56px; }
  .hh-done__img img { max-width: 44px; max-height: 48px; }
  .hh-done__item { position: relative; }
  .hh-done__item-price { position: absolute; top: 12px; right: 0; font-size: 16px; }
  .hh-done__item-name { padding-right: 84px; }
}

/* ===== no sideways scrolling anywhere; the old theme's off-screen phone menu is fully removed ===== */
html, body { overflow-x: clip; }
@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse.navbar-mobile-drawer { display: none !important; }   /* beats newdesign.css .collapse:not(.show) */
}

/* ===== checkout (views/checkout.php; its inline <style> loads later, hence the .main-checkout-page prefix) ===== */
.main-checkout-page .checkout-header h1 { margin-bottom: 20px; font-family: var(--hs-font); font-weight: 900; color: var(--hs-deep); }
.main-checkout-page .checkout-container-inner { border-color: var(--hs-line); border-radius: var(--hs-radius-lg); }
/* steps: one segment per step; the label of the current step (all labels from tablet width up) */
.main-checkout-page .checkout-step-navigation-container { gap: 6px; margin-bottom: 28px; padding-top: 0; }
.main-checkout-page .checkout-step-item { min-width: 0; margin: 0; padding-top: 8px; border-top-width: 4px; border-top-color: var(--hs-line); border-radius: 0; }
.main-checkout-page .checkout-step-item.active, .main-checkout-page .checkout-step-item.completed { border-top-color: var(--hs-teal); }
.main-checkout-page .checkout-step-circle { display: none; }
.main-checkout-page .checkout-step-label { overflow: hidden; font-family: var(--hs-font); font-size: 13px; font-weight: 700; color: var(--hs-muted); text-overflow: ellipsis; }
.main-checkout-page .checkout-step-item.active .checkout-step-label { color: var(--hs-teal-dark); }
.main-checkout-page .checkout-step-item.completed .checkout-step-label { color: var(--hs-text); }
/* address block, same order as holysmartphone.nl */
.hh-addr__row { display: grid; gap: 14px; margin-bottom: 16px; }
.hh-addr__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hh-addr__row--pc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.hh-addr__label { display: block; margin-bottom: 6px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 14px; font-weight: 700; }
.hh-req { color: #c0392b; }
.main-checkout-page .hh-addr .checkout-form-control { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius); background: var(--hs-white); color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; }
.main-checkout-page .hh-addr .checkout-form-control:focus { border-color: var(--hs-teal); outline: none; box-shadow: 0 0 0 3px rgba(0, 131, 146, 0.18); }
.main-checkout-page .hh-addr .hh-addr__select { appearance: none; padding-right: 40px; background: var(--hs-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6573' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.hh-addr__status { min-height: 0; margin: -6px 0 14px; font-size: 14px; }
.hh-addr__status:empty { display: none; }
.hh-addr__status.is-ok { color: var(--hs-teal-dark); }
.hh-addr__status.is-busy { color: var(--hs-muted); }
.hh-addr__status.is-warn { color: #a5521c; }
.main-checkout-page .hh-addr .iti { display: block; width: 100%; }
/* overview: price never runs out of the card */
.main-checkout-page .checkout-step4-product-content { gap: 14px; align-items: center; }
.main-checkout-page .checkout-step4-product-info { min-width: 0; }
.main-checkout-page .checkout-step4-trade-value-row { flex-wrap: wrap; gap: 2px 8px; }
.main-checkout-page .checkout-step4-product-image { width: 56px; height: 64px; object-fit: contain; }
@media (max-width: 767.98px) {
  .main-checkout-page .checkout-step-item:not(.active) .checkout-step-label { visibility: hidden; }
  .main-checkout-page .checkout-step-item.active { flex: 2.5; }
}
@media (max-width: 575.98px) {
  .main-checkout-page .checkout-container { padding: 16px 0 32px; }
  .main-checkout-page .checkout-container-inner { padding: 20px 16px; }
  .hh-addr__row--pc { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hh-addr__row--2 { gap: 10px; }
}

/* ===== cart (views/cart/cart.php, views/cart/empty_basket.php) ===== */
.hh-cartp .hs-lead { margin: 8px 0 24px; }
.hh-cartp__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.hh-cartp__items { display: flex; flex-direction: column; gap: 12px; }
.hh-cartp__item { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 52px 16px 16px; border-radius: var(--hs-radius-lg); }
.hh-cartp__img { display: flex; flex: 0 0 88px; align-items: center; justify-content: center; height: 88px; border-radius: 12px; background: var(--hs-mint-2); }
.hh-cartp__img img { max-width: 68px; max-height: 74px; object-fit: contain; }
.hh-cartp__body { flex: 1; min-width: 0; }
.hh-cartp__name { color: var(--hs-ink); font-size: 18px; font-weight: 900; line-height: 1.3; }
.hh-cartp__qty { color: var(--hs-muted); font-size: 14px; }
.hh-cartp__edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--hs-teal-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.hh-cartp__edit:hover { color: var(--hs-teal-dark); text-decoration: none; }
.hh-cartp__price { color: var(--hs-teal-dark); font-size: 20px; font-weight: 900; white-space: nowrap; }
.hh-cartp__remove { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--hs-muted); font-size: 16px; text-decoration: none; transition: background-color var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { .hh-cartp__remove:hover { background: #fdecea; color: #c0392b; } }
.hh-cartp__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.hh-cartp__empty { margin-left: auto; color: var(--hs-muted); font-size: 14px; text-decoration: underline; }
.hh-cartp__empty:hover { color: #c0392b; }
.hh-cartp__sum { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--hs-radius-lg); }
.hh-cartp .hh-cartp__sum-title { margin: 0 0 4px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 19px !important; font-weight: 900; }
.hh-cartp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--hs-text); font-size: 15px; }
.hh-cartp__amount, .hh-cartp__row--total .total_amt { color: var(--hs-teal-dark); font-size: 26px; font-weight: 900; }
.hh-cartp__row--total { padding-top: 10px; border-top: 1px solid var(--hs-line); }
.hh-cartp__promo { display: flex; gap: 8px; align-items: center; }
.hh-cartp__input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius-sm); font-family: var(--hs-font); font-size: 15px; }
.hh-cartp__promo-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--hs-mint-2); color: var(--hs-muted); }
.hh-cartp__sum .hs-btn--block { height: 52px; margin-top: 4px; font-size: 17px; }
.hh-cartp__checks { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--hs-text); font-size: 14px; }
.hh-cartp__checks i { width: 18px; color: var(--hs-teal); }
/* empty cart */
.hh-cartp__empty-card { display: flex; flex-direction: column; align-items: center; max-width: 640px; margin: 0 auto; padding: 40px 24px; border-radius: var(--hs-radius-lg); text-align: center; }
.hh-cartp__empty-icon .hh-cart__icon { width: 32px; height: 32px; }
.hh-cartp__empty-card .hs-title { margin: 0; }
.hh-cartp__search { width: 100%; max-width: 480px; margin-bottom: 18px; }
.hh-cartp__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 991.98px) {
  .hh-cartp__grid { grid-template-columns: minmax(0, 1fr); }
  .hh-cartp__sum { position: static; }
}
@media (max-width: 575.98px) {
  .hh-cartp__item { align-items: flex-start; gap: 12px; padding: 12px 44px 12px 12px; }
  .hh-cartp__img { flex-basis: 64px; height: 64px; }
  .hh-cartp__img img { max-width: 50px; max-height: 56px; }
  .hh-cartp__body { display: flex; flex-direction: column; }
  .hh-cartp__price { position: absolute; top: 14px; right: 46px; font-size: 16px; }
  .hh-cartp__name { padding-right: 76px; }
  .hh-cartp__name { font-size: 16px; }
  .hh-cartp__sum { padding: 20px 16px; }
  .hh-cartp__empty-card { padding: 28px 16px; }
}

/* ===== day picker "Wanneer kom je langs?" (checkout, dropping off in the shop) ===== */
.hh-days__label { margin: 16px 0 10px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 15px; font-weight: 700; }
.hh-days { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.hh-day { display: flex; flex: 0 0 72px; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius); background: var(--hs-white); color: var(--hs-ink); font-family: var(--hs-font); cursor: pointer; scroll-snap-align: start; transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease); }
.hh-day__wd { color: var(--hs-muted); font-size: 12px; font-weight: 700; }
.hh-day__d { font-size: 22px; font-weight: 900; line-height: 1.1; }
.hh-day__m { color: var(--hs-muted); font-size: 12px; }
@media (hover: hover) { .hh-day:hover { border-color: var(--hs-teal); } }
.hh-day[aria-checked="true"] { border-color: var(--hs-teal); background: var(--hs-teal); color: var(--hs-white); }
.hh-day[aria-checked="true"] .hh-day__wd, .hh-day[aria-checked="true"] .hh-day__m { color: var(--hs-on-deep); }
.hh-day:focus { outline: none; }
.hh-day:focus-visible { outline: 3px solid var(--hs-teal); outline-offset: 2px; }
#shipping_pickup_date_error_msg { display: none; margin-top: 4px; color: #c0392b; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .hh-day { transition: none; } }

/* ===== product questions: no "Verder"/"Terug" buttons (answering moves on, "Terug" sits at the top), smooth step change ===== */
.product-form-left #device-prop-area > .step-navigation, .product-form-left #device-prop-area > .show_device_value_section { display: none !important; }
#device-prop-area .model-details-panel { animation: hh-step-in 0.32s var(--hs-ease); }   /* no fill-mode: if animations are paused the step is still visible */
#device-prop-area.is-back .model-details-panel { animation-name: hh-step-back; }
@keyframes hh-step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes hh-step-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.product-form-left .radio-option.selected { animation: hh-pick 0.22s var(--hs-ease); }
@keyframes hh-pick { 50% { transform: scale(0.985); } }

/* ===== offer (last step): trade-in vs selling value ===== */
.product-form-right .product-image-offer { display: none !important; }   /* the price now lives in the choice cards */
.product-form-container.offer-header-active .product-form-left { padding: 28px !important; border-color: var(--hs-line); border-radius: var(--hs-radius-lg); }
.hh-offer__head { margin-bottom: 18px; }
.hh-offer .hh-offer__title { margin: 0; color: var(--hs-deep); font-family: var(--hs-font); font-size: 26px !important; font-weight: 900; line-height: 1.2; }
.hh-offer__count { color: var(--hs-orange-dark); font-variant-numeric: tabular-nums; }
.hh-offer__valid { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px; border-radius: var(--hs-pill); background: #fff4e8; color: #8a4510; font-size: 14px; font-weight: 700; }
.hh-offer__choices { display: grid; gap: 12px; margin-bottom: 18px; }
.hh-offer__choices[hidden] { display: none; }
.hh-choice { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "dot title price" "dot text price"; column-gap: 12px; row-gap: 2px; align-items: center; margin: 0; padding: 18px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius-lg); background: var(--hs-white); cursor: pointer; transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease), box-shadow var(--hs-fast) var(--hs-ease); }
.hh-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hh-choice::before { content: ""; grid-area: dot; width: 22px; height: 22px; border: 2px solid var(--hs-line-strong); border-radius: 50%; background: var(--hs-white); box-sizing: border-box; transition: border-color var(--hs-fast) var(--hs-ease), box-shadow var(--hs-fast) var(--hs-ease); }
.hh-choice:has(input:checked) { border-color: var(--hs-teal); background: var(--hs-mint); box-shadow: inset 0 0 0 1px var(--hs-teal); }   /* ring inside, so a chosen tile keeps its size */
.hh-choice:has(input:checked)::before { border-color: var(--hs-teal); box-shadow: inset 0 0 0 5px var(--hs-white); background: var(--hs-teal); }
.hh-choice:has(input:focus-visible) { outline: 3px solid var(--hs-teal); outline-offset: 2px; }
.hh-choice__title { grid-area: title; color: var(--hs-ink); font-size: 18px; font-weight: 900; }
.hh-choice__text { grid-area: text; color: var(--hs-muted); font-size: 14px; line-height: 1.45; }
.hh-choice__price { grid-area: price; color: var(--hs-ink); font-size: 22px; font-weight: 900; white-space: nowrap; }
.hh-choice--best .hh-choice__price { color: var(--hs-teal-dark); font-size: 26px; }
.hh-choice__badge { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: var(--hs-pill); background: var(--hs-orange); color: var(--hs-white); font-size: 13px; font-weight: 900; }
@media (hover: hover) { .hh-choice:hover { border-color: var(--hs-teal); } }
.hh-offer .offer-action-row { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; margin: 0 0 16px; }
.hh-offer .offer-action-row .hs-btn--block { height: 54px; font-size: 17px; }
.hh-offer .offer-action-row[hidden], .hh-offer .js-hh-continue[hidden] { display: none !important; }
.hh-offer__edit { align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--hs-teal-dark); font-family: var(--hs-font); font-size: 14px; font-weight: 700; cursor: pointer; }
.hh-offer__answers .device-name-dt { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.hh-offer__answers .device_brand_name { display: none; }
.hh-offer__answers .device-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; background: var(--hs-mint-2); }
.hh-offer__answers .device-summary-question { flex: 1; color: var(--hs-text); font-size: 14px; line-height: 1.4; }
.hh-offer__answers .device-summary-dropdown { max-width: 150px; height: 38px; padding: 0 8px; border: 1px solid var(--hs-line-strong); border-radius: 8px; background: var(--hs-white); color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; font-weight: 700; }
.product-form-left .device-summary-dropdown { font-size: 16px; }   /* 16px: phones do not zoom in on the select */
.hh-offer__checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--hs-text); font-size: 14px; }
.hh-offer__checks i { margin-right: 6px; color: var(--hs-teal); }
.hh-confetti { position: fixed; inset: 0; z-index: 1200; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 575.98px) {
  .product-form-container.offer-header-active .product-form-left { padding: 18px 16px !important; }
  .hh-offer .hh-offer__title { font-size: 22px !important; }
  .hh-choice { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 16px 14px; column-gap: 10px; }
  .hh-choice__price, .hh-choice--best .hh-choice__price { font-size: 19px; }
  .hh-choice__text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #device-prop-area .model-details-panel, .product-form-left .radio-option.selected { animation: none; }
  .hh-choice, .hh-choice::before { transition: none; }
}
/* answers of the offer, folded under the photo */
.hh-offer__answers { margin: 0; padding: 14px 16px; text-align: left; border: 1px solid var(--hs-line); border-top: 1px solid var(--hs-line); border-radius: var(--hs-radius); background: var(--hs-white); }
.hh-offer__answers[hidden] { display: none; }
.hh-offer__answers summary { font-size: 15px; }
@media (max-width: 991.98px) {
  .product-image-box { flex-wrap: wrap; }
  .product-image-box .hh-offer__answers { flex: 1 0 100%; }
}
.hh-sell-head .hs-title { color: var(--hs-ink); }   /* "Verkoop jouw …" in black */

/* ===== checkout payment step (.hh-pay): trade-in or selling, standard or express ===== */
.main-checkout-page .checkout-step-data { display: none; }
.hh-pay__title { margin: 4px 0 10px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; font-weight: 900; }
.hh-pay__options { display: grid; gap: 12px; margin-bottom: 18px; }
.hh-pay__options--speed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hh-pay__options--speed .hh-choice { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "dot title" "dot text"; }
.hh-pay__bank { margin: -4px 0 20px; padding: 16px; border-radius: var(--hs-radius); background: var(--hs-mint-2); }
.hh-pay__bank .hh-addr__row:last-of-type { margin-bottom: 0; }
.main-checkout-page .hh-pay__bank .checkout-form-control { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius); background: var(--hs-white); font-family: var(--hs-font); font-size: 16px; }
.hh-pay__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--hs-radius); background: var(--hs-mint); color: var(--hs-teal-dark); font-weight: 700; }
.hh-pay__total strong { font-size: 26px; font-weight: 900; }
.hh-pay__note { margin: 8px 0 0; color: var(--hs-muted); font-size: 13px; }
.hh-pay__recap { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; color: var(--hs-muted); font-size: 13px; }
.hh-days__hint { color: var(--hs-muted); font-size: 13px; font-weight: 400; }
@media (max-width: 575.98px) {
  .hh-pay__options--speed { grid-template-columns: minmax(0, 1fr); }
  .hh-pay__total strong { font-size: 22px; }
}
.hh-done__facts { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--hs-text); font-size: 15px; line-height: 1.5; }
.hh-done__facts i { margin-right: 6px; color: var(--hs-teal); }

/* ===== offer, redesign 2 (product page last step): one card, device on the left, the decision on the right ===== */
.product-form-section:has(.offer-header-active) .hh-sell-head .hs-title,
.product-form-section:has(.offer-header-active) .hh-sell-head .hs-lead { display: none; }   /* the card carries the heading */
.product-form-container.offer-header-active { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--hs-line); border-radius: var(--hs-radius-lg); background: var(--hs-white); }
.offer-header-active .product-form-right { order: -1; padding: 32px 28px; background: var(--hs-mint-2); }
.product-form-container.offer-header-active .product-form-left { padding: 36px 40px !important; border: 0 !important; border-radius: 0; background: var(--hs-white); }
.offer-header-active .product-image-box { gap: 16px; }
.offer-header-active .hh-sell-photo { height: 320px; padding: 0; background: transparent; }
.hh-offer-device[hidden] { display: none; }
.hh-offer-device { text-align: left; }
.hh-offer-device__name { margin: 0 0 8px; color: var(--hs-ink); font-size: 22px; font-weight: 900; line-height: 1.2; }
.hh-offer__eyebrow { margin: 0 0 4px; color: var(--hs-teal-dark); font-size: 15px; font-weight: 700; }
.hh-offer .hh-offer__title { color: var(--hs-ink); font-size: 28px !important; }
.hh-offer__head { margin-bottom: 22px; }
/* the two options as tiles side by side */
.hh-offer .hh-offer__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.hh-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 26px 18px 18px; border: 1.5px solid var(--hs-line-strong); border-radius: var(--hs-radius-lg); background: var(--hs-white); cursor: pointer; transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease), box-shadow var(--hs-fast) var(--hs-ease); }
.hh-tile input { position: absolute; opacity: 0; pointer-events: none; }
.hh-tile::after { content: ""; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border: 2px solid var(--hs-line-strong); border-radius: 50%; background: var(--hs-white); box-sizing: border-box; }
.hh-tile:has(input:checked) { border-color: var(--hs-teal); background: var(--hs-mint); box-shadow: inset 0 0 0 1px var(--hs-teal); }
.hh-tile:has(input:checked)::after { border-color: var(--hs-teal); background: var(--hs-teal); box-shadow: inset 0 0 0 5px var(--hs-white); }
.hh-tile:has(input:focus-visible) { outline: 3px solid var(--hs-teal); outline-offset: 2px; }
@media (hover: hover) { .hh-tile:hover { border-color: var(--hs-teal); } }
.hh-tile__badge { position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: var(--hs-pill); background: var(--hs-orange); color: var(--hs-white); font-size: 13px; font-weight: 900; }
.hh-tile__title { color: var(--hs-ink); font-size: 17px; font-weight: 900; }
.hh-tile__price { color: var(--hs-ink); font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.hh-tile--best .hh-tile__price { color: var(--hs-teal-dark); }
.hh-tile__text { color: var(--hs-muted); font-size: 14px; line-height: 1.4; }
.hh-offer .offer-action-row { margin-bottom: 26px; }
/* what happens next: a real sequence, so numbered */
.hh-offer__next-title { margin: 0 0 12px; color: var(--hs-ink); font-size: 16px; font-weight: 900; }
.hh-offer__next { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: hh-next; }
.hh-offer__next li { position: relative; display: flex; flex-direction: column; padding-left: 40px; counter-increment: hh-next; }
.hh-offer__next li::before { content: counter(hh-next); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hs-mint); color: var(--hs-teal-dark); font-size: 14px; font-weight: 900; }
.hh-offer__next strong { color: var(--hs-ink); font-size: 15px; }
.hh-offer__next span { color: var(--hs-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 991.98px) {
  .product-form-container.offer-header-active { grid-template-columns: minmax(0, 1fr); }
  .offer-header-active .product-form-right { padding: 16px; }
  .offer-header-active .product-image-box { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .offer-header-active .hh-sell-photo { flex: 0 0 96px; height: 96px; }
  .offer-header-active .hh-offer-device { flex: 1; min-width: 0; }
  .hh-offer-device__name { font-size: 18px; }
  .product-form-container.offer-header-active .product-form-left { padding: 22px 16px 8px !important; }
  .hh-offer .hh-offer__title { font-size: 22px !important; }
  /* the button stays in reach while scrolling through the steps */
  .hh-offer .offer-action-row { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px 18px; padding: 12px 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -8px 18px rgba(0, 40, 48, 0.08); }
}
@media (max-width: 575.98px) {
  .hh-offer .hh-offer__choices { gap: 10px; }
  .hh-tile { padding: 24px 12px 14px; }
  .hh-tile::after { top: 12px; right: 12px; width: 20px; height: 20px; }
  .hh-tile__price { font-size: 22px; }
  .hh-tile__text { font-size: 13px; }
  .hh-tile__badge { left: 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hh-tile { transition: none; } }

/* ===== content pages (FAQ, contact, reviews, promises, how it works, terms) ===== */
.hh-page { padding-top: 40px; }
.hh-page--intro { padding-bottom: 0; }
.hh-page__head { max-width: 720px; margin-bottom: 28px; }
.hh-page__head .hs-title { margin: 0 0 10px; }
.hh-page__head .hs-lead { margin: 0; }
.hh-page__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: var(--hs-radius-lg); background: var(--hs-mint); border-color: transparent; }
.hh-page .hh-page__cta-title, .hh-page__cta-title { margin: 0 0 4px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 22px !important; font-weight: 900; }
.hh-page__cta-text { margin: 0; color: var(--hs-text); }
/* FAQ page: grouped */
.hh-faq__groups { min-width: 0; }
.hh-page .hh-faq__group, .hh-faq__group { margin: 28px 0 12px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 18px !important; font-weight: 900; }
.hh-faq__group:first-child { margin-top: 0; }
.hh-faq__intro .hs-title--page { margin-bottom: 12px; }
/* contact */
.hh-contact__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.hh-contact__form { padding: 28px; border-radius: var(--hs-radius-lg); }
.hh-contact__side { display: flex; flex-direction: column; gap: 16px; }
.hh-contact__card { padding: 22px; border-radius: var(--hs-radius-lg); }
.hh-page .hh-contact__title, .hh-contact__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 18px !important; font-weight: 900; }
.hh-contact__intro { margin-bottom: 16px; color: var(--hs-text); }
.hh-contact__text { margin: 0 0 10px; color: var(--hs-text); line-height: 1.6; }
.hh-contact__status { margin: 0 0 14px; font-weight: 900; }
.hh-contact__status.is-open { color: #1e7a3c; }
.hh-contact__status.is-closed { color: #a5521c; }
.hh-contact__status span { color: var(--hs-muted); font-weight: 400; }
.hh-contact__map { overflow: hidden; border-radius: var(--hs-radius); }
.hh-contact__map iframe { display: block; width: 100%; height: 220px; border: 0; }
.hh-contact__line { display: block; padding: 4px 0; color: var(--hs-teal-dark); font-size: 17px; font-weight: 700; text-decoration: none; }
.hh-contact__line:hover { color: var(--hs-teal-dark); text-decoration: none; }
.hh-contact__hours { margin: 0; padding: 0; list-style: none; }
.hh-contact__hours li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--hs-line); color: var(--hs-text); font-size: 15px; }
.hh-contact__hours li:last-child { border-bottom: 0; }
.hh-contact__hours li.is-today { color: var(--hs-ink); font-weight: 900; }
.hh-field { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--hs-line-strong); border-radius: var(--hs-radius); background: var(--hs-white); color: var(--hs-ink); font-family: var(--hs-font); font-size: 16px; }
.hh-field:focus { border-color: var(--hs-teal); outline: none; box-shadow: 0 0 0 3px rgba(0, 131, 146, 0.18); }
textarea.hh-field { min-height: 140px; resize: vertical; }
.hh-contact .iti { display: block; width: 100%; }
.hh-opt { color: var(--hs-muted); font-weight: 400; }
.hh-contact .contact_form_sbmt_btn { height: 52px; margin-top: 4px; padding: 0 28px; }
/* reviews page */
.hh-revpage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.hh-revpage__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 22px; border-radius: var(--hs-radius-lg); color: var(--hs-ink); text-decoration: none; white-space: nowrap; }
.hh-revpage__score:hover { color: var(--hs-ink); text-decoration: none; border-color: var(--hs-teal); }
.hh-revpage__num { font-size: 34px; font-weight: 900; line-height: 1; }
.hh-revpage__num small { color: var(--hs-muted); font-size: 16px; }
.hh-revpage__src { color: var(--hs-muted); font-size: 14px; }
.hh-revpage__grid { columns: 3 300px; column-gap: 16px; }
.hh-revpage__card { display: inline-block; width: 100%; margin: 0 0 16px; padding: 20px; border-radius: var(--hs-radius-lg); break-inside: avoid; }
.hh-revpage__who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hh-revpage__who > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hh-revpage__who strong { color: var(--hs-ink); font-size: 16px; }
.hh-revpage__who span { color: var(--hs-muted); font-size: 14px; }
.hh-revpage__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hh-revpage__avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--hs-mint); color: var(--hs-teal-dark); font-size: 18px; font-weight: 900; }
.hh-revpage__who .reviews-stars { flex: none; color: var(--hs-gold); font-size: 13px; white-space: nowrap; }
.hh-revpage__text { margin: 0; color: var(--hs-text); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.hh-revpage__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--hs-muted); font-size: 13px; }
.hh-revpage__more { display: flex; justify-content: center; margin-top: 12px; }
/* terms: readable column, the site's own type */
.hh-legal { max-width: 760px; color: var(--hs-text); font-family: var(--hs-font); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.hh-legal h1, .hh-legal h2, .hh-legal h3, .hh-legal h4 { margin: 28px 0 10px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 19px !important; font-weight: 900; line-height: 1.3; }
.hh-legal p, .hh-legal ul, .hh-legal ol { margin: 0 0 14px; }
.hh-legal * { font-family: inherit !important; }
/* terms: "Inhoudsopgave" as on holysmartphone.nl (hs-toc on .hs-doc--single); script assets/js/hh-toc.js */
.hh-page--legal { overflow: visible; }   /* .hs-section clips, which stops the list from sticking */
.hh-legal h2 { margin: 40px 0 20px; color: var(--hs-teal); font-size: 24px !important; line-height: 1.2; scroll-margin-top: 130px; }   /* below the sticky header */
.hh-legal h2:first-of-type { margin-top: 24px; }
.hh-legal ul { padding-left: 24px; }
.hh-legal li { margin-bottom: 6px; }
.hh-toc { margin: 0 0 32px; padding: 20px; border-radius: 16px; background: var(--hs-mint-2); font-family: var(--hs-font); }
.hh-toc__title { margin: 0 0 12px; color: var(--hs-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.hh-toc__list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.hh-toc__list li { margin: 0; }
.hh-toc__list a { display: block; padding: 8px 0 8px 16px; border-left: 2px solid var(--hs-line); color: var(--hs-text); text-decoration: none; transition: color var(--hs-fast) var(--hs-ease), border-color var(--hs-fast) var(--hs-ease); }
.hh-toc__list a:hover { border-left-color: var(--hs-on-deep-soft); color: var(--hs-teal-dark); text-decoration: none; }
.hh-toc__list a.is-current { border-left-color: var(--hs-teal); color: var(--hs-teal-dark); font-weight: 700; }
.hh-toc-bar, .hh-toc__close { display: none; }
@media (min-width: 1200px) {
  .hh-doc.has-toc { display: grid; grid-template-columns: 13.75rem minmax(0, 760px); column-gap: clamp(40px, 3.5vw, 64px); align-items: start; }
  .hh-toc { position: sticky; top: 130px; max-height: calc(100vh - 160px); margin: -4px 0 0 -4px; padding: 4px 8px 4px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: none; }
}
@media (max-width: 1199.98px) {
  .hh-toc-bar { display: block; width: 100%; margin: 0 0 32px; padding: 12px 20px; border: 1px solid var(--hs-line); border-radius: var(--hs-pill); background: var(--hs-white); box-shadow: 0 4px 12px rgba(15, 23, 26, 0.06), 0 2px 4px rgba(15, 23, 26, 0.04); color: var(--hs-ink); font-family: var(--hs-font); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
  .hh-toc.is-collapsible { display: none; }
  .hh-toc.is-collapsible.is-open { position: fixed; inset: 0; z-index: 2000; display: block; margin: 0; padding: 64px 24px 32px; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; background: var(--hs-white); }
  .hh-toc.is-open .hh-toc__title { color: var(--hs-teal); font-size: 24px; }
  .hh-toc.is-open .hh-toc__list { font-size: 16px; }
  .hh-toc.is-open .hh-toc__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--hs-pill); background: var(--hs-mint-2); color: var(--hs-ink); cursor: pointer; }
  .hh-toc__close svg { width: 20px; height: 20px; }
  .hh-toc-locked, .hh-toc-locked body { overflow: hidden; }
}
/* navbar search: hidden while closed, so it is not reachable with Tab */
.hh-navsearch__form { visibility: hidden; }
.hh-navsearch.is-open .hh-navsearch__form { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {   /* hide only after the closing fade, so it closes as smoothly as it opens */
  .hh-navsearch__form { transition: width var(--hs-base) var(--hs-ease), opacity 0.2s var(--hs-ease), transform 0.2s var(--hs-ease), visibility 0s linear var(--hs-base); }
  .hh-navsearch.is-open .hh-navsearch__form { transition-delay: 0s; }
}
@media (max-width: 991.98px) {
  .hh-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .hh-revpage__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .hh-page { padding-top: 24px; }
  .hh-contact .hh-addr__row--2 { grid-template-columns: minmax(0, 1fr); }   /* long labels: one field per row on phones */
  .hh-page__cta { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .hh-page__cta .hs-btn { width: 100%; }
  .hh-contact__form { padding: 20px 16px; }
  .hh-contact .contact_form_sbmt_btn { width: 100%; }
}
/* missing model form (views/sections/missing_product_section_popup.php) */
.hh-mp .modal-dialog { max-width: 520px; }
.hh-mp__box { position: relative; padding: 28px 26px 22px; border: 0; border-radius: var(--hs-radius-lg); box-shadow: 0 24px 60px rgba(0, 40, 48, 0.25); font-family: var(--hs-font); text-align: left; }
.hh-mp__close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--hs-ink); font-size: 20px; cursor: pointer; }
@media (hover: hover) { .hh-mp__close:hover { background: var(--hs-mint); } }
.hh-mp__title { margin: 0 44px 6px 0; color: var(--hs-ink); font-size: 24px; font-weight: 900; line-height: 1.2; }
.hh-mp__lead { margin: 0 0 18px; color: var(--hs-muted); font-size: 15px; line-height: 1.5; }
.hh-mp__form { display: grid; gap: 14px; }
.hh-mp__row { display: grid; gap: 6px; }
.hh-mp__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hh-mp__row--2 > div { display: grid; gap: 6px; align-content: start; }
.hh-mp .iti { width: 100%; }
.hh-mp textarea.hh-field { min-height: 84px; }
.hh-mp__opt { color: var(--hs-muted); font-weight: 400; }
.hh-mp__error { color: #c0392b; font-size: 13px; }
.hh-field.is-invalid { border-color: #c0392b; }
.hh-mp__note { margin: -4px 0 0; color: var(--hs-muted); font-size: 13px; text-align: center; }
@media (max-width: 575.98px) {
  .hh-mp .modal-dialog { margin: 12px; }
  .hh-mp__box { padding: 22px 18px 18px; }
  .hh-mp__title { font-size: 21px; }
  .hh-mp__row--2 { grid-template-columns: minmax(0, 1fr); }
}
/* laptop series, personal offer on request (views/model_details*.php, type 'quote') */
.hh-step-next { margin-top: 14px; }
.model-details-panel input.input.hh-field { height: 54px; }
.model-details-panel input.input.is-invalid { border-color: #c0392b; }
.hh-offer--quote .hh-quote { margin: 4px 0 22px; }
.product-badge--quote span { font-size: 18px; }
.hh-quote-done { max-width: 640px; margin: 8px 0 40px; padding: 28px; text-align: left; }
.hh-quote-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; background: var(--hs-mint); color: var(--hs-teal-dark); font-size: 22px; }
.hh-quote-done__title { margin: 0 0 8px; color: var(--hs-ink); font-size: 24px; font-weight: 900; }
.hh-quote-done p { margin: 0 0 18px; color: var(--hs-text); line-height: 1.55; }
@media (max-width: 575.98px) { .hh-step-next { width: 100%; } .hh-quote-done { padding: 22px 18px; } }
/* laptop series without price yet: "Bod volgt" note (checkout payment step, order completion) */
.hh-await-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--hs-radius); background: var(--hs-mint); color: var(--hs-teal-dark); font-size: 14px; line-height: 1.45; text-align: left; }
.hh-await-note i { margin-top: 3px; }

/* checkout delivery step (views/checkout.php, 2026-11-12): question as heading, description inside each option,
   for "Inleveren in de winkel" first the day, then a compact shop card with map and route */
.main-checkout-page .checkout-form-section h2 { margin: 0 0 4px; color: var(--hs-ink); font-family: var(--hs-font); font-size: 22px; font-weight: 900; line-height: 1.3; }
.main-checkout-page .checkout-form-group-description { margin: 0 0 20px; color: var(--hs-muted); font-family: var(--hs-font); font-size: 15px; }
.main-checkout-page .checkout-radio-option { align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); transition: border-color var(--hs-fast) var(--hs-ease), background-color var(--hs-fast) var(--hs-ease); }
.main-checkout-page .checkout-radio-option.selected { padding: 15px 17px; border: 2px solid var(--hs-teal); background: var(--hs-mint); }
.main-checkout-page .checkout-radio-option label { display: block; color: var(--hs-ink); font-family: var(--hs-font); font-size: 17px; font-weight: 700; line-height: 1.35; }
.checkout-radio-desc { display: block; margin-top: 4px; color: var(--hs-text); font-size: 14px; line-height: 1.5; }
.main-checkout-page .shipping-instruction-list { display: none; }   /* the text now sits inside the option */
.main-checkout-page .pickup_date_fields { margin-top: 4px; }
.pickup_date_fields:not(.has-day) .hh-ship-map { display: none; }   /* shown after a day is chosen (hh-checkout.js) */
.hh-ship-map { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-top: 18px; overflow: hidden; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); background: var(--hs-white); }
.hh-ship-map__frame { height: 210px; background: var(--hs-mint); }
.hh-ship-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.hh-ship-map__info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 18px 20px; }
.hh-ship-map__title { margin: 0; color: var(--hs-muted); font-size: 13px; font-weight: 700; }
.hh-ship-map__addr { margin: 0 0 8px; color: var(--hs-ink); font-size: 16px; font-weight: 700; line-height: 1.45; }
.hh-ship-map__route { gap: 8px; }
@media (max-width: 575.98px) {
  .hh-ship-map { grid-template-columns: minmax(0, 1fr); }
  .hh-ship-map__frame { height: 170px; }
  .hh-ship-map__route { width: 100%; justify-content: center; }
  .main-checkout-page .checkout-form-section h2 { font-size: 20px; }
}

/* checkout review step (views/checkout.php, 2026-11-12): big photo, the value next to it, answers to unfold, "Afronden" by the terms */
.hh-review-item { margin-bottom: 12px; }
.hh-review-item__main { display: flex; align-items: flex-start; gap: 20px; }
.hh-review-item__img { width: 160px; height: 160px; flex: none; object-fit: contain; border-radius: var(--hs-radius); background: var(--hs-white); }
.hh-review-item__info { flex: 1; min-width: 0; }
.hh-review-item__title { margin-bottom: 8px; font-size: 18px; }
.hh-review-item__answers summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--hs-teal-dark); font-size: 15px; font-weight: 700; cursor: pointer; }
.hh-review-item__answers summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; transition: transform var(--hs-fast) var(--hs-ease); }
.hh-review-item__answers[open] summary::after { transform: rotate(180deg); }
.hh-review-item__answers dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 4px 0 0; font-size: 14px; }
.hh-review-item__answers dt { color: #4a5565; font-weight: 400; }
.hh-review-item__answers dd { margin: 0; color: var(--hs-ink); font-weight: 700; text-align: right; }
.hh-review-value { margin: 4px 0 6px; padding: 14px 18px; border-radius: var(--hs-radius); background: var(--hs-mint); }
.hh-review-value__label { display: block; color: #23505a; font-size: 15px; font-weight: 700; }
.hh-review-value__price { display: block; margin-top: 2px; color: var(--hs-teal-dark); font-size: 36px; font-weight: 900; line-height: 1.15; }
.hh-review-value .hh-pay__recap { margin: 8px 0 0; }
.hh-review-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; }
@media (max-width: 575px) {
  .hh-review-item__main { gap: 14px; }
  .hh-review-item__main { flex-direction: column; align-items: stretch; }
  .hh-review-item__img { width: 140px; height: 140px; align-self: center; }
  .hh-review-value__price { font-size: 30px; }
}

/* confirmation page "Zo gaat het verder" (views/order_completion.php, 2026-11-12): numbered steps on a line */
.hh-done__steps { display: flex; flex-direction: column; gap: 20px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: hh-step; }
.hh-done__steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 52px; counter-increment: hh-step; }
.hh-done__steps li::before { content: counter(hh-step); position: absolute; top: -2px; left: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hs-teal); color: var(--hs-white); font-size: 16px; font-weight: 900; }
.hh-done__steps li:not(:last-child)::after { content: ""; position: absolute; top: 36px; bottom: -18px; left: 16px; width: 2px; background: var(--hs-line); }
.hh-done__steps strong { color: var(--hs-ink); font-size: 17px; font-weight: 900; }
.hh-done__steps span { color: var(--hs-text); font-size: 15px; line-height: 1.55; }
.hh-done__step-link { align-self: flex-start; margin-top: 2px; color: var(--hs-teal-dark); font-size: 15px; font-weight: 700; }
.hh-done__valid { margin: 20px 0 0; padding: 10px 14px; border-radius: var(--hs-radius-sm); background: #fff4e8; color: #8a4510; font-size: 14px; font-weight: 700; }
.hh-done__valid i { margin-right: 6px; }

/* category page: brands as one segmented bar inside the card (views/models.php, 2026-11-12) */
.hh-cp-panel .hh-cp-bar { flex-wrap: nowrap; }
.hh-brandbar { position: relative; flex: 1 1 auto; min-width: 0; }
.hh-cp-panel .hh-brands { flex-wrap: nowrap; gap: 4px; width: auto; margin: 0; padding: 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; background: var(--hs-mint); }
.hh-cp-panel .hh-brands::-webkit-scrollbar { display: none; }
.hh-brandbar.is-more-right .hh-brands { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.hh-brandbar.is-more-left .hh-brands { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
.hh-brandbar.is-more-left.is-more-right .hh-brands { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.hh-brandbar__btn { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--hs-line); border-radius: 50%; background: var(--hs-white); color: var(--hs-ink); font-size: 13px; box-shadow: 0 2px 8px rgba(0, 60, 70, 0.14); transform: translateY(-50%); cursor: pointer; }
.hh-brandbar__btn[hidden] { display: none; }
.hh-brandbar__btn--prev { left: -6px; }
.hh-brandbar__btn--next { right: -6px; }
@media (hover: hover) { .hh-brandbar__btn:hover { border-color: var(--hs-teal); color: var(--hs-teal-dark); } }
.hh-brandbar__btn:focus-visible { outline: 2px solid var(--hs-teal); outline-offset: 2px; }
.hh-cp-panel .hh-cp-bar__search { flex: 0 0 300px; height: 48px; border-radius: 12px; }   /* same height and corners as the brand bar */
.hh-seg { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px; color: #23505a; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background-color var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease); }
@media (hover: hover) { .hh-seg:hover { background: rgba(255, 255, 255, 0.7); color: var(--hs-ink); text-decoration: none; } }
.hh-seg.is-active { background: var(--hs-white); color: var(--hs-teal-dark); box-shadow: 0 1px 4px rgba(0, 60, 70, 0.14); }
.hh-seg:focus-visible { outline: 2px solid var(--hs-teal); outline-offset: 1px; }
.hh-seg__icon { display: inline-flex; align-items: center; }
.hh-seg__icon svg { width: auto; max-width: 20px; height: 18px; }
@media (max-width: 991.98px) {
  .hh-cp-panel .hh-cp-bar { flex-wrap: wrap; }
  .hh-brandbar { flex-basis: 100%; }
  .hh-cp-panel .hh-cp-bar__search { flex-basis: 100%; }
  .hh-brandbar__btn { display: none !important; }   /* touch: swipe */
}
@media (prefers-reduced-motion: reduce) { .hh-seg { transition: none; } }