@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

/*
 * Clean, technical typography inspired by the ProSkin reference.
 *
 * The homepage campaign hero and brand showcase deliberately keep their
 * original art direction. Every other direct page region opts into this
 * layer, including the shared header/footer and all internal pages.
 */
:root {
  --font-interface: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

body > :not(.concept):not(.brand-showcase) {
  font-family: var(--font-interface);
}

body > :not(.concept):not(.brand-showcase) :where(
  p,
  a,
  button,
  input,
  select,
  textarea,
  label,
  li,
  dt,
  dd,
  small,
  span,
  strong,
  b,
  em,
  figcaption
) {
  font-family: var(--font-interface) !important;
}

body > :not(.concept):not(.brand-showcase) :where(h1, h2, h3, h4, h5, h6),
body > :not(.concept):not(.brand-showcase) :where(h1, h2, h3, h4, h5, h6) * {
  font-family: var(--font-display) !important;
}

/* Product cards use a sturdier, simpler hierarchy than the editorial serif. */
body > :not(.concept):not(.brand-showcase) .product-card,
body > :not(.concept):not(.brand-showcase) .product-card * {
  font-family: var(--font-interface) !important;
}

body > :not(.concept):not(.brand-showcase) .product-card h3 {
  min-height: 2.5em;
  margin-block: 8px 7px;
  font-size: clamp(1rem, .88vw, 1.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

body > :not(.concept):not(.brand-showcase) .product-card__brand {
  font-size: .6875rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: .1em;
}

body > :not(.concept):not(.brand-showcase) .product-card__spec {
  color: rgba(247, 241, 229, .76);
  font-size: .75rem !important;
  font-weight: 500;
  line-height: 1.45;
}

body > :not(.concept):not(.brand-showcase) .product-card__price {
  min-height: 32px;
  padding-inline: 10px;
  font-size: .6875rem !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: .055em;
}

body > :not(.concept):not(.brand-showcase) .product-card__media::after,
body > :not(.concept):not(.brand-showcase) .product-card__placeholder {
  font-family: var(--font-interface);
  font-size: .6875rem !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .075em;
}

.bags-page .bag-catalogue .product-card__body,
.watches-page .watch-catalogue .product-card__body {
  min-height: 132px;
  padding: 12px 12px 11px;
}

/*
 * Legibility floor for labels and supporting copy. Most of these elements
 * previously rendered at 6-9px; 11-12px keeps the compact look without making
 * readers strain, while the relaxed tracking prevents dense all-caps labels.
 */
body > :not(.concept):not(.brand-showcase) :where(
  .eyebrow,
  .kicker,
  .campaign-eyebrow,
  .inspection-kicker,
  .inspection-page-eyebrow,
  .page-intro__eyebrow,
  .page-hero__note,
  .catalogue-intro > p,
  .catalog-toolbar button,
  .catalog-toolbar > span,
  .catalog-search input,
  .filter-heading,
  .filter-heading button,
  .watch-filters label,
  .results-bar,
  .filter-trigger,
  .load-catalogue-more,
  .catalog-status,
  .catalog-empty span,
  .service-card > div > span,
  .service-card a,
  .about-section figcaption,
  .about-copy .disclaimer,
  .contact-grid span,
  .contact-action span,
  .site-footer > div,
  .site-footer p,
  .site-footer small,
  .site-footer .footer-contact strong,
  .back-catalogue,
  .product-detail__media > span,
  .detail-image-placeholder,
  .detail-specs dt,
  .detail-enquiry,
  .product-not-found p,
  .recommendations-heading p,
  .footer-socials a,
  .product-footer,
  .bag-brand-banner__copy p,
  .bag-brand-banner__copy a,
  .bag-sort,
  .bag-sort select,
  .bag-quick-view > p,
  .bag-quick-view #bag-quick-view-content > a,
  .luxury-form label,
  .story-stats span,
  .process-step > span,
  .repair-hero__status strong,
  .repair-hero__status small,
  .repair-hero__status b,
  .repair-hero__status > p,
  .sell-hero__metrics span,
  .sell-hero__card p,
  .sell-hero__card span,
  .sell-hero__card a,
  .about-hero__meta span,
  .about-hero__meta strong,
  .repair-diagnostic span,
  .valuation-campaign__proof span,
  .valuation-docket p,
  .valuation-docket a,
  .concierge-contact .contact-grid span,
  .concierge-contact__socials a,
  .inspection-stage__hint,
  .inspection-detail__code,
  .inspection-detail__checks > span,
  .inspection-reset,
  .inspection-detail__cta,
  .inspection-page-proof small,
  .inspection-assurance__micro,
  .inspection-assurance__list span,
  .section-heading > div > p,
  .center-action a,
  .center-action button,
  .trade-benefits small,
  .about-copy > p:first-child,
  .about-copy > a,
  .contact-lead > p:first-child,
  .concierge-contact__actions .contact-action strong,
  .site-footer .footer-columns strong,
  .site-footer .footer-columns a,
  .site-footer .footer-contact a,
  .site-footer .footer-contact p,
  .header-button,
  .detail-brand,
  .brand-list-intro p,
  .inspection-page-button,
  .editorial-button,
  .policy-nav a,
  .policy-content > p:first-child
) {
  font-size: clamp(.6875rem, .66vw, .75rem) !important;
  line-height: 1.35;
  letter-spacing: .09em;
}

/* Longer supporting copy gets a comfortable, still-compact reading size. */
body > :not(.concept):not(.brand-showcase) :where(
  .section-intro,
  .service-card p,
  .about-copy > p:not(:first-child),
  .contact-lead > p:last-child,
  .page-intro__summary,
  .policy-intro > p:last-child,
  .filter-note,
  .inspection-workbench__heading > p:last-child,
  .inspection-detail > p:not(.inspection-detail__code),
  .inspection-detail__checks li
) {
  font-size: clamp(.875rem, .82vw, 1rem) !important;
  line-height: 1.6 !important;
}

/* Improve low-contrast copy on the site's dark editorial surfaces. */
body > :not(.concept):not(.brand-showcase) :where(
  .section-intro,
  .service-card p,
  .about-copy > p:not(:first-child),
  .page-intro__summary,
  .policy-intro > p:last-child,
  .filter-note,
  .results-bar,
  .catalog-status,
  .site-footer > div,
  .inspection-workbench__heading > p:last-child,
  .inspection-detail > p:not(.inspection-detail__code),
  .inspection-detail__checks li
) {
  color: rgba(247, 241, 229, .74);
}

body > .site-footer p,
body > .site-footer small {
  color: rgba(247, 241, 229, .58);
}

body > :not(.concept):not(.brand-showcase) :where(.catalog-toolbar > span, .catalog-search input::placeholder) {
  color: rgba(247, 241, 229, .62);
}

body > :not(.concept):not(.brand-showcase) .policy-nav a {
  color: rgba(247, 247, 242, .7);
}

@media (max-width: 760px) {
  body > :not(.concept):not(.brand-showcase) .product-card h3 {
    font-size: .9375rem !important;
  }

  body > :not(.concept):not(.brand-showcase) .product-card__price {
    padding-inline: 8px;
    font-size: .625rem !important;
  }
}

/* Navigation scale is intentionally last in the cascade so catalogue and
   editorial themes retain the same enlarged header treatment. */
@media (min-width: 981px) {
  body .header.site-header { height: 86px !important; min-height: 86px !important; }
  body .header.site-header .brand img { width: 142px !important; }
  body .header.site-header .site-nav,
  body .header.site-header .site-nav > a,
  body .header.site-header .site-nav > .nav-item { height: 86px !important; min-height: 86px !important; }
  body .header.site-header .site-nav > a,
  body .header.site-header .nav-item__toggle { min-height: 86px !important; }
  body .header.site-header .header-button { width: 224px !important; min-width: 224px !important; min-height: 54px !important; }
}
@media (min-width: 981px) and (max-width: 1250px) {
  body .header.site-header { height: 78px !important; min-height: 78px !important; }
  body .header.site-header .brand img { width: 132px !important; }
  body .header.site-header .site-nav,
  body .header.site-header .site-nav > a,
  body .header.site-header .site-nav > .nav-item { height: 78px !important; min-height: 78px !important; }
  body .header.site-header .site-nav > a,
  body .header.site-header .nav-item__toggle { min-height: 78px !important; }
  body .header.site-header .header-button { min-height: 50px !important; }
  body .header.site-header .nav-socials { display: none !important; }
}
@media (max-width: 980px) {
  body .header.site-header,
  body .catalogue-header.site-header { position: sticky !important; top: 0 !important; z-index: 2000 !important; min-height: 84px !important; background: #050505 !important; background-color: #050505 !important; opacity: 1 !important; isolation: isolate; }
  body .header.site-header .brand img,
  body .catalogue-header.site-header .brand img { width: 138px !important; max-width: 46vw !important; }
  body .header.site-header .mobile-menu,
  body .catalogue-header.site-header .mobile-menu { width: 50px !important; height: 50px !important; background: #050505 !important; }
  body.site-menu-open .header.site-header .site-nav,
  body.site-menu-open .catalogue-header.site-header .site-nav { position: absolute !important; z-index: 2001 !important; top: 100% !important; right: 0 !important; left: 0 !important; display: flex !important; width: 100% !important; max-width: none !important; padding: 12px 24px 20px !important; border: 0 !important; border-bottom: 1px solid rgba(212,175,55,.42) !important; background: #050505 !important; box-shadow: 0 24px 36px rgba(0,0,0,.58) !important; backdrop-filter: none !important; }
  body.site-menu-open .header.site-header .site-nav > a,
  body.site-menu-open .catalogue-header.site-header .site-nav > a,
  body.site-menu-open .header.site-header .nav-item__toggle { min-height: 54px !important; color: rgba(247,247,242,.9) !important; font-size: 12px !important; letter-spacing: .2em !important; }
  body.site-menu-open .header.site-header .nav-item--dropdown { display: block !important; height: auto !important; min-height: 54px !important; }
  body.site-menu-open .header.site-header .nav-item__toggle { display: flex !important; justify-content: space-between; }
  body.site-menu-open .header.site-header .nav-dropdown { position: static !important; display: grid !important; min-width: 0 !important; padding: 0 0 4px 16px !important; border: 0 !important; border-left: 1px solid rgba(212,175,55,.35) !important; background: #090909 !important; transform: none !important; box-shadow: none !important; }
  body.site-menu-open .header.site-header .nav-dropdown a { min-height: 44px !important; color: var(--gold) !important; font-size: 11px !important; letter-spacing: .17em !important; }
  body.site-menu-open .header.site-header .nav-socials { display: flex !important; gap: 22px; margin-top: 12px; padding: 16px 4px 4px; border-top: 1px solid rgba(212,175,55,.25); }
  body.site-menu-open .header.site-header .nav-socials a { min-height: auto !important; color: var(--gold) !important; font-size: 10px !important; letter-spacing: .18em !important; }
}