/* =============================================================================
   V2 THEME — visual direction modelled on the "K7 Creative Agency" template:
   pale yellow page ground, yellow accent, deep olive-brown dark blocks, Poppins,
   pill buttons, large-radius cards, stat strip, floating pill navigation.

   Page colour is a light tint of #bba651 (client-specified). Loaded AFTER
   styles.css so it only overrides what differs from V1.
   ========================================================================== */
:root {
  /* Brand accent (client colour) and tints */
  --color-accent: #e9c400;
  --color-accent-hover: #f2d024;
  --color-accent-strong: #7d6600;     /* text/icons on light backgrounds (6.1:1 on page bg) */
  --color-accent-soft: #f7eaa6;
  --color-accent-on: #1f1a05;
  --color-accent-on-dark: #f2d54a;

  /* Page ground: a lighter shade of #bba651 */
  --color-bg: #fbf7d9;
  --color-bg-alt: #f6edb8;
  --color-surface: #ffffff;
  --color-border: #e6d98f;
  --color-border-strong: #cdbb55;
  --color-text: #1f1a05;
  --color-text-muted: #5a5018;
  --color-dark: #2b2408;             /* deep olive for dark blocks (K7 uses deep teal) */
  --color-dark-2: #3b3210;
  --color-dark-text: #fbf7e6;
  --color-dark-muted: #d6cb9c;
  --color-dark-border: rgba(43, 36, 8, 0.14);
  --color-focus: #2f5cc4;

  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Corners: near-square (0.1rem) for cards, panels, and inputs; buttons/chips/nav stay pill-shaped */
  --radius-sm: 0.1rem;
  --radius-md: 0.1rem;
  --radius-lg: 0.1rem;
  --shadow-sm: 0 1px 2px rgba(43, 36, 8, 0.05), 0 2px 6px rgba(43, 36, 8, 0.06);
  --shadow-md: 0 10px 24px rgba(43, 36, 8, 0.10);
  --shadow-lg: 0 24px 48px rgba(43, 36, 8, 0.14);
  --header-h: 94px; /* 6px top offset + 80px card */
  --text-display: clamp(1.85rem, 1.1rem + 2.7vw, 3.15rem); /* Poppins is wider than the V1 stack */
}

body { background: var(--color-bg); }
.section-title { font-weight: 600; letter-spacing: -0.01em; }
.hero__title { font-weight: 700; }
.eyebrow { letter-spacing: 0.22em; font-weight: 600; }

/* ---------- Buttons: pills, K7 style (dark primary, lime secondary) --------- */
.btn { border-radius: var(--radius-lg); font-weight: 600; } /* squared to match the cards */
.btn--primary { background: var(--color-dark); color: #fff; }
.btn--primary:hover { background: var(--color-dark-2); }
.btn--secondary { background: var(--color-accent); color: var(--color-accent-on); border-color: var(--color-accent); }
.btn--secondary:hover { background: var(--color-accent-hover); color: var(--color-accent-on); }
.btn--light { background: var(--color-accent); color: var(--color-accent-on); }
.btn--light:hover { background: var(--color-accent-hover); }
.btn--ghost { border-color: var(--color-border-strong); background: #fff; }

/* ---------- Top bar: phone | Facebook eBay (right-justified) ----------------- */
.topbar { padding-top: var(--space-1); font-size: var(--text-xs); }
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); min-height: 26px; }
.topbar__phone { font-weight: 700; color: #f15a2b; text-decoration: none; letter-spacing: 0.01em; }
.topbar__phone:hover { text-decoration: underline; }
.topbar__sep { color: var(--color-border-strong); font-weight: 300; }
.topbar__social { display: inline-flex; align-items: center; min-width: 28px; min-height: 28px; justify-content: center; color: var(--color-dark); text-decoration: none; }
.topbar__social .icon { width: 17px; height: 17px; }
a.topbar__social:hover { color: #f15a2b; }
.topbar__social--pending { opacity: 0.55; cursor: default; }

/* ---------- Header: floating pill nav ------------------------------------- */
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; height: var(--header-h); padding-top: 6px; }
.site-header.is-scrolled { box-shadow: none; }
.site-header__inner { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0 0.75rem 0 1.25rem; height: 80px; box-shadow: var(--shadow-sm); max-width: calc(var(--container) - 2 * var(--gutter)); }
.site-header.is-scrolled .site-header__inner { box-shadow: var(--shadow-md); }
/* Logos: +20% in the header, +25% in the footer (vs V1's 40px / 36px) */
.brand__logo { height: 48px; }
@media (max-width: 479px) { .brand__logo { height: 41px; } }
.brand__logo--footer { height: 45px; }
/* Menu sits flush right, next to the CTA */
.nav { margin-left: auto; }
.site-header__inner { gap: var(--space-4); }
/* Header CTA in the logo orange (dark text keeps 4.7:1 contrast) */
.site-header__cta, .nav__cta { background: #f15a2b; color: #fff; border-color: #f15a2b; }
.site-header__cta:hover, .nav__cta:hover { background: #f26a40; color: #fff; animation: cta-bounce 0.45s cubic-bezier(0.28, 0.84, 0.42, 1); }
@keyframes cta-bounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-5px); }
  65% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .site-header__cta:hover, .nav__cta:hover { animation: none; } }
/* V2: no service-area pill under the header (the hero eyebrow is removed in page.js) */
.hero__area { display: none; }
.nav__link { border-radius: var(--radius-pill); }
.nav__link:hover, .nav__link[aria-current="true"] { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.nav__link--highlight { color: #f15a2b; font-weight: 700; }
.nav__link--highlight:hover, .nav__link--highlight[aria-current="true"] { color: #f15a2b; background: var(--color-accent-soft); }
.nav-toggle { border-radius: var(--radius-lg); }
@media (max-width: 959px) {
  .nav { top: calc(var(--header-h) + 4px); left: var(--gutter); right: var(--gutter); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
}

/* ---------- Hero ----------------------------------------------------------- */
.hero { background: transparent; border-bottom: 0; padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.hero__area { border-radius: var(--radius-pill); background: #fff; }
.hero__audience { color: var(--color-accent-strong); }
.il-backdrop { fill: var(--color-accent-soft); stroke: var(--color-border); }
.il-card { filter: drop-shadow(0 12px 24px rgba(42, 37, 18, 0.12)); }
.il-bar { fill: #e0dbc5; }
.il-pill { fill: var(--color-accent-soft); }
.il-dark { fill: var(--color-dark); } .il-screen { fill: var(--color-dark-2); }

/* ---------- Trust bar -> text-only strip, each label on two centred lines --- */
.trust { border: 0; padding-block: 0 var(--space-4); background: transparent; }
.trust__list { background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5); }
.trust__item { justify-content: center; text-align: center; font-size: var(--text-sm); }
.trust__label { white-space: pre-line; line-height: 1.3; }
@media (min-width: 640px) { .trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); } }
@media (min-width: 960px) { .trust__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .trust__item { font-size: var(--text-base); } }

/* ---------- At a glance: card straddles the edge of the dark section below ---- */
:root { --glance-overlap: clamp(150px, 16vw, 190px); }
.glance { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--glance-overlap)); }
.glance__card { border-left-width: 1px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.problems { padding-top: calc(var(--section-pad) + var(--glance-overlap)); }
.glance__fact dt { color: var(--color-accent-strong); }

/* ---------- Sections ---------------------------------------------------------- */
.section--alt { background: var(--color-bg-alt); border-block: 0; }
.section--dark { background: var(--color-dark); }
.section--dark .section-title { color: #fff; }
.section--accent { background: var(--color-accent); color: var(--color-accent-on); }
.section--accent .section-title, .section--accent .eyebrow { color: var(--color-accent-on); }

/* Problems block rendered as a dark "why choose us" panel */
.problems .section-title { color: #fff; }
.problems .section-intro { color: var(--color-dark-muted); }
.problems__col--problems { background: var(--color-dark-2); border-color: var(--color-dark-border); color: var(--color-dark-text); border-radius: var(--radius-lg); }
.problems .list--problems .list__icon { color: var(--color-accent-on-dark); }
.problems__col--benefits { padding: var(--space-6); background: rgba(43, 36, 8, 0.06); border: 1px solid var(--color-dark-border); border-radius: var(--radius-lg); color: var(--color-dark-text); }
.benefit__icon { background: var(--color-accent); color: var(--color-accent-on); border-radius: 50%; }
.benefit__text { color: var(--color-dark-muted); }

/* ---------- Hero graphic: oversized, sits behind the headline and copy --------- */
.hero__graphic { width: 100%; height: auto; }
@media (min-width: 960px) {
  .hero { overflow-x: clip; }
  .hero__grid { position: relative; grid-template-columns: 1fr; }
  .hero__content { position: relative; z-index: 1; max-width: 640px; }
  .hero__visual { position: absolute; z-index: 0; right: -3%; top: calc(4% + 70px); width: 80%; max-width: none; pointer-events: none; opacity: 0.55; }
}
@media (min-width: 1280px) { .hero__visual { width: 78%; top: 70px; } }
@media (max-width: 959px) { .hero__visual { max-width: 720px; } }

/* ---------- Services switcher: list of services left, one detail panel right --- */
.switcher { display: grid; gap: var(--space-5); align-items: start; }
.switcher > * { min-width: 0; max-width: 100%; }
.switcher__tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
.switcher__tab { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; text-align: left; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.switcher__num { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-strong); letter-spacing: 0.06em; }
.switcher__label { font-weight: 600; font-size: var(--text-sm); }
.switcher__icon { margin-left: auto; display: none; color: var(--color-accent); }
.switcher__icon .icon { width: 18px; height: 18px; }
.switcher__tab:hover { border-color: var(--color-border-strong); background: var(--color-accent-soft); }
.switcher__tab[aria-selected="true"] { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.switcher__tab[aria-selected="true"] .switcher__num { color: var(--color-accent); }
.switcher__panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
.switcher__panel:focus-visible { outline-offset: 0; }
.switcher__head { display: flex; gap: var(--space-4); align-items: center; }
.switcher__head .card__icon { margin: 0; flex: none; }
.switcher__kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-strong); }
.switcher__panel .card__title { font-size: var(--text-xl); }
.switcher__text { margin-top: var(--space-4); font-size: var(--text-md); color: var(--color-text-muted); max-width: 64ch; }
.switcher__body { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
.switcher__body .card__subtitle { margin-top: var(--space-3); }
.switcher__body .list--compact { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-2); }
.switcher__body .list--compact li { padding: 0.3rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-xs); font-weight: 500; }
.switcher__body .list--compact .list__icon { display: none; }
.switcher__body .compare { margin-top: 0; }
.switcher__body .compare__table { min-width: 0; }
.switcher__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.switcher__foot .card__note { margin: 0; padding: 0; border: 0; max-width: 48ch; }
@media (min-width: 900px) {
  .switcher { grid-template-columns: 300px 1fr; gap: var(--space-6); }
  .switcher__tabs { flex-direction: column; overflow: visible; padding-bottom: 0; position: sticky; top: calc(var(--header-h) + 16px); }
  .switcher__tab { white-space: normal; min-height: 56px; }
  .switcher__icon { display: inline-flex; opacity: 0; transition: opacity 0.15s ease; }
  .switcher__tab[aria-selected="true"] .switcher__icon, .switcher__tab:hover .switcher__icon { opacity: 1; }
  .switcher__body { grid-template-columns: 1fr 1fr; }
  .switcher__body > div:only-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) { .switcher { grid-template-columns: 340px 1fr; } }

/* ---------- Cards ------------------------------------------------------------- */
.card { border-radius: var(--radius-lg); border-color: var(--color-border); }
.card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-on); }
.service-card { position: relative; padding-bottom: calc(var(--space-8) + 56px); }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* feature lists become K7-style tag pills */
.service-card .list--compact { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.service-card .list--compact li { padding: 0.3rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-xs); font-weight: 500; gap: 0.3rem; }
.service-card .list--compact .list__icon { display: none; }
.card__arrow { position: absolute; right: var(--space-6); bottom: var(--space-6); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-dark); color: #fff; transition: background 0.15s ease, transform 0.15s ease; }
.card__arrow:hover { background: var(--color-accent); color: var(--color-accent-on); transform: rotate(-45deg); }
.card__arrow .icon { width: 20px; height: 20px; }
.hierarchy li::before { background: var(--color-accent); color: var(--color-accent-on); }

/* ---------- Process ------------------------------------------------------------ */
.step__num { background: var(--color-accent); color: var(--color-accent-on); }
.step:not(:last-child)::after { background: var(--color-border-strong); }

/* ---------- Chips --------------------------------------------------------------- */
.chip { border-radius: var(--radius-pill); background: #fff; }
.chip .icon { color: var(--color-accent-strong); }

/* ---------- Asset recovery: lime accent block instead of dark ------------------ */
.recovery { background: var(--color-accent); color: var(--color-accent-on); }
.recovery .section-title, .recovery .eyebrow { color: var(--color-accent-on); }
.recovery__text { color: #3a341a; }
.recovery .list--on-dark { color: var(--color-accent-on); }
.recovery .list--on-dark .list__icon { color: var(--color-dark); }
.flow__step { background: rgba(255, 255, 255, 0.55); border-color: rgba(42, 37, 18, 0.15); color: var(--color-accent-on); border-radius: var(--radius-md); }
.flow__num { background: var(--color-dark); color: #fff; }
.flow__arrow { color: var(--color-dark); }
.flow__step:last-child { border-color: var(--color-dark); background: #fff; }
.recovery mark.ph { background: rgba(255, 255, 255, 0.6); color: #5a2a10; }
.recovery .btn--light { background: var(--color-dark); color: #fff; }
.recovery .btn--light:hover { background: var(--color-dark-2); }

/* ---------- Refurbished: text + visit card with address, phone, map ------------ */
.refurb__grid { align-items: start; }
.visit-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.visit-card__title { font-size: var(--text-lg); font-weight: 600; }
.visit-card__text { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.visit-card__details { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.visit-card__details div { display: flex; gap: var(--space-3); align-items: flex-start; }
.visit-card__details dt { color: var(--color-accent-strong); margin-top: 0.15em; }
.visit-card__details dd { margin: 0; font-weight: 600; line-height: 1.4; }
.visit-card__details address { font-style: normal; }
.visit-card__details .contact-link { margin-top: 0; }
.visit-card__map { margin-top: var(--space-5); aspect-ratio: 4 / 3; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); }
.visit-card__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.visit-card__map-link { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); }
.refurb__expect { margin-top: var(--space-4); font-size: var(--text-sm); }
.refurb__expect li { padding-block: 0.3rem; }

/* ---------- Refurbished / product cards ---------------------------------------- */
.product-card__media { border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong); }

/* ---------- FAQ: compact two-column accordion -------------------------------------- */
.faq { padding-block: clamp(2.5rem, 5vw, 4rem); }
.faq .section-header { margin-bottom: var(--space-6); }
.faq__list { max-width: none; border-top: 0; display: grid; gap: 0 var(--space-10); align-items: start; }
.faq__item { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; margin: 0; }
.faq__question { padding: 0.8rem 0.25rem; gap: var(--space-3); }
.faq__q-text { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.faq__chevron { width: 24px; height: 24px; background: var(--color-accent-soft); color: var(--color-accent-strong); }
.faq__chevron .icon { width: 14px; height: 14px; }
.faq__item[open] .faq__chevron { background: var(--color-dark); color: #fff; }
.faq__item[open] .faq__q-text { color: var(--color-accent-strong); }
.faq__answer { padding: 0 0.25rem 1rem; font-size: var(--text-sm); max-width: none; }
@media (min-width: 900px) { .faq__list { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact --------------------------------------------------------------- */
.contact { background: var(--color-bg-alt); border-top: 0; }
.field__input { border-radius: var(--radius-sm); }
.contact-card { border-radius: var(--radius-lg); }
.mini-steps li::before { background: var(--color-accent); color: var(--color-accent-on); }

/* ---------- Footer -------------------------------------------------------------- */
.site-footer { background: var(--color-dark); }
.site-footer__links a:hover { color: var(--color-accent-on-dark); }

/* ---------- Mobile bar ------------------------------------------------------------ */
.mobile-bar { background: rgba(251, 247, 217, 0.96); border-top-color: var(--color-border); }
.mobile-bar__call { border-radius: var(--radius-lg); border-color: var(--color-dark); }

/* ---------- Tao Designs attribution: 12px orange square, footer far right ------- */
.site-footer__legal { align-items: center; }
.tao-mark { display: inline-block; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #f15a2b; background: transparent; margin-left: var(--space-2); }
.tao-mark:hover { background: transparent; }

/* ---------- Waitlist mini form: full-width row under the refurbished columns ----- */
.mini-form { display: grid; gap: var(--space-4); align-items: center; margin-top: var(--space-10); padding: var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.mini-form__title { font-size: var(--text-md); font-weight: 600; }
.mini-form__title { max-width: 22ch; }
.mini-form .field__label { font-size: var(--text-xs); }
.mini-form .btn { width: 100%; }
.mini-form__note { font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-form .form-status { margin: 0; }
@media (min-width: 640px) { .mini-form { grid-template-columns: 1fr 1fr; } .mini-form__intro, .mini-form__note, .mini-form .form-status { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .mini-form { grid-template-columns: minmax(280px, 1.3fr) 1fr 1.2fr auto; column-gap: var(--space-6); }
  .mini-form__intro { grid-column: auto; }
  .mini-form__field { align-self: center; }
  .mini-form__action { align-self: center; padding-top: 1.35rem; } /* lines the button up with the inputs, below their labels */
  .mini-form .btn { width: auto; }
  .mini-form__note { grid-column: 2 / -1; margin-top: calc(-1 * var(--space-2)); }
  .mini-form .form-status { grid-column: 1 / -1; }
}

/* ---------- FAQ page (/faq/) ----------------------------------------------------- */
.faq__more { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); }
.breadcrumb ol { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-accent-strong); text-decoration: none; font-weight: 600; }
.faq-page__title { max-width: 26ch; }
.faq-page__toc { margin-top: var(--space-6); padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.faq-page__toc ol { counter-reset: q; display: grid; gap: 0.35rem; font-size: var(--text-sm); }
@media (min-width: 900px) { .faq-page__toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }
.faq-page__toc li { counter-increment: q; display: flex; gap: var(--space-2); }
.faq-page__toc li::before { content: counter(q) "."; color: var(--color-accent-strong); font-weight: 700; min-width: 1.6em; }
.faq-page__toc a { color: var(--color-text); text-decoration: none; }
.faq-page__toc a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.faq-page__list { margin-top: var(--space-8); display: grid; gap: var(--space-5); max-width: 78ch; }
.faq-page__item { padding: var(--space-5) var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + 16px); }
.faq-page__q { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); }
.faq-page__a { margin-top: var(--space-3); color: var(--color-text-muted); }
.faq-page__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-10); padding: var(--space-6); background: var(--color-dark); color: var(--color-dark-text); border-radius: var(--radius-lg); }
.faq-page__cta p { font-weight: 600; }
.faq-page__cta .contact-link { margin: 0; color: #fff; }
.faq-page__cta .contact-link .icon { color: var(--color-accent); }

/* ---------- Legal holding pages ---------------------------------------------------- */
.legal { max-width: 72ch; }
.legal__body { margin-top: var(--space-6); display: grid; gap: var(--space-4); font-size: var(--text-md); }
.legal__body a { color: var(--color-accent-strong); font-weight: 600; }
.legal__updated { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Social icons in the refurbished visit card --------------------------- */
.visit-card__social { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.visit-card__social-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-right: var(--space-1); }
.visit-card__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-dark); background: #fff; text-decoration: none; }
.visit-card__social-link .icon { width: 20px; height: 20px; }
a.visit-card__social-link:hover { border-color: #f15a2b; color: #f15a2b; }
.visit-card__social-link--pending { opacity: 0.55; cursor: default; }

/* ---------- Refurbished: wholesale badge + photo ---------------------------------- */
.refurb__badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: 0.4rem 0.9rem 0.4rem 0.7rem; background: var(--color-dark); color: #fff; font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-lg); }
.refurb__badge .icon { color: var(--color-accent); }
.refurb__side { display: grid; gap: var(--space-5); }
.refurb__photo { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.refurb__photo img { display: block; width: 100%; height: auto; }
.refurb__photo figcaption { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); border-top: 1px solid var(--color-border); }

/* ---------- Footer social icons ------------------------------------------------- */
.site-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-dark-border); border-radius: var(--radius-lg); color: var(--color-dark-text); text-decoration: none; }
.site-footer__social-link .icon { width: 20px; height: 20px; }
a.site-footer__social-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.site-footer__social-link--pending { opacity: 0.5; }

/* ---------- Protected email button (looks like the other contact links) ---------- */
.contact-link--btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.contact-link--btn:hover { color: var(--color-accent-strong); text-decoration: underline; }
.site-footer .contact-link--btn:hover { color: var(--color-accent-on-dark); }