/*
  Professionals directory (/professionals/) and detail pages (/professionals/<code>/).
  Loaded by professionals.html and _layouts/professional.html, on top of base.css.
  Colours, radii and type sizes come from tokens.css; the only page-level aliases
  are --pro-amethyst, the colour of the "Agencies" pill of the "get listed" card,
  which has no tag token, --pro-backdrop-rgb, the rgb triplet of the
  lightbox backdrop (no semantic token has one), and --pro-glow-teal and
  --pro-glow-blue, the two colours of the listing hero background, which is
  the one of vs/shopify-v3 (vs-shopify-v3.css, .vs3-hero). Titles come from base.css (js-section__title,
  js-cards__title); this file only adds rhythm and the components below.
*/

.professionals-page {
  --pro-glow-teal: var(--js-color-teal-light);
  --pro-glow-blue: var(--js-color-blue-light);
  /* The header is 80px from 768px up and 60px below; the anchor menu is 64px, 48px on phones. */
  --pro-header-h: var(--header-height-desktop);
  --pro-nav-h: 64px;
  --pro-filters-head-h: 64px;
  --pro-amethyst: var(--js-color-dark-amethyst);
  --pro-gap: calc(var(--js-padding) * 1.5);
  background: var(--color-background);
}

.professionals-page [hidden] {
  display: none !important;
}

/* ================================================================
  HERO
================================================================ */
.pro-hero {
  background: var(--color-background);
  color: var(--color-main);
}

/* Listing hero: the copy at the left, six stores of the directory on devices at the right. The solid
   header already offsets the first section (base.css), so the padding is only the hero's own breathing
   room. The background is the one of vs/shopify-v3 (.vs3-hero): three radial glows (a dim green behind the
   copy, a bright emerald and a blue behind the visual), plain radial-gradients with no blur filter, so
   they cost nothing to repaint on phones, and a fade at the bottom so they do not end in a hard line. */
.pro-hero--list {
  --pro-glow-emerald: color-mix(in srgb, var(--color-accent) 22%, var(--pro-glow-teal));
  --pro-glow-dim: color-mix(in srgb, var(--color-accent) 30%, var(--pro-glow-teal));
  position: relative;
  padding-top: calc(var(--js-padding) * 3.5);
  padding-bottom: calc(var(--js-padding) * 4.5);
  overflow-x: clip;
  overflow-y: hidden;
}

.pro-hero--list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 55% at 14% 58%, color-mix(in srgb, var(--pro-glow-dim) 32%, transparent), transparent),
    radial-gradient(30% 48% at 76% 36%, color-mix(in srgb, var(--pro-glow-emerald) 95%, transparent), transparent),
    radial-gradient(34% 50% at 88% 78%, color-mix(in srgb, var(--pro-glow-blue) 90%, transparent), transparent);
}

.pro-hero--list::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--color-background));
  pointer-events: none;
}

.pro-hero--list .pro-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--js-padding) * 3);
}

.pro-hero__copy {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--js-padding) * 1);
}

/* Face, size and tracking come from js-section__subtitle--accent and js-section__title (base.css). */
.pro-eyebrow {
  margin: 0;
  font-family: var(--font-main);
  font-size: calc(var(--font-base-size) * 0.8125);
  font-weight: 700;
}

.pro-hero__title {
  margin: 0;
  max-width: 560px;
  line-height: 1.05;
  text-wrap: balance;
}

.pro-hero__text {
  margin: 0;
  max-width: 460px;
  font-size: calc(var(--font-base-size) * 1.125);
  line-height: 1.5;
}

/* Nine devices placed in % of a 25:16 box, so the whole composition scales as one piece. The ring and the
   shadow are resolved here, on the onyx hero, because the frames take the page background. */
.pro-hero__visual {
  --pro-device-ring: var(--color-main-op2);
  --pro-device-shadow: var(--color-background-op6);
  position: relative;
  flex: 1 1 440px;
  max-width: 760px;
  margin-left: auto;
  aspect-ratio: 25 / 16;
}

/* All the devices lie on one plane, tilted to the left as a whole (the top edges climb to the right),
   a little larger than the box so that it still fills it once rotated. */
.pro-hero__plane {
  position: absolute;
  inset: 0;
  transform: rotate(8deg);
  transform-origin: 50% 50%;
}

.pro-device {
  position: absolute;
  overflow: hidden;
  border: 4px solid var(--color-background);
  background: var(--color-background);
  box-shadow:
    0 0 0 1px var(--pro-device-ring),
    0 24px 48px var(--pro-device-shadow);
}

.pro-device img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Tablets and the like: a framed screen. */
.pro-device--tablet {
  border-radius: 10px;
}

.pro-device--tablet-a {
  top: 10%;
  left: 1%;
  z-index: 1;
  width: 25%;
  aspect-ratio: 4 / 3;
}

/* A laptop here is just its screen with the rounded frame, no base; the box carries nothing itself. */
.pro-device--laptop {
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}

.pro-device--laptop-top {
  top: -10%;
  left: 34%;
  z-index: 1;
  width: 31%;
}

.pro-device--laptop-a {
  top: -2%;
  right: -8%;
  z-index: 1;
  width: 33%;
}

/* The big screen in the middle: the one the rest is arranged around. */
.pro-device--desktop {
  top: 25%;
  left: 20%;
  z-index: 3;
  width: 57%;
}

.pro-device--laptop-mid {
  top: 35%;
  right: -11%;
  z-index: 2;
  width: 33%;
}

.pro-device--corner {
  top: 74%;
  right: -9%;
  z-index: 2;
  width: 29%;
  aspect-ratio: 16 / 10;
}

.pro-device--bottom-a {
  top: 87%;
  left: 21%;
  z-index: 2;
  width: 31%;
  aspect-ratio: 4 / 3;
}

.pro-device--bottom-b {
  top: 92%;
  left: 57%;
  z-index: 2;
  width: 27%;
  aspect-ratio: 16 / 10;
}

.pro-device__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 4px solid var(--color-background);
  border-radius: 10px;
  background: var(--color-background);
  box-shadow:
    0 0 0 1px var(--pro-device-ring),
    0 24px 48px var(--pro-device-shadow);
}

.pro-device--desktop .pro-device__screen {
  border-width: 6px;
  border-radius: 14px;
}

.pro-device--phone {
  top: 50%;
  left: 3%;
  z-index: 4;
  width: 14%;
  aspect-ratio: 9 / 19;
  border-width: 3px;
  border-radius: 16px;
}

/* ================================================================
  DIRECTORY LAYOUT
================================================================ */
.pro-directory {
  padding-top: calc(var(--js-padding) * 3);
  padding-bottom: calc(var(--js-padding) * 5);
}

.pro-directory__layout {
  display: flex;
  flex-direction: column;
  gap: var(--pro-gap);
}

.pro-side {
  display: contents;
}

.pro-filters {
  order: 1;
}

.pro-results {
  order: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1.25);
}

.pro-apply {
  order: 3;
}

@media (min-width: 992px) {
  .pro-directory__layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: calc(var(--js-padding) * 2);
  }

  .pro-side {
    display: flex;
    flex-direction: column;
    gap: calc(var(--js-padding) * 1.25);
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--js-padding));
  }

  .pro-filters,
  .pro-results,
  .pro-apply {
    order: 0;
  }
}

/* ================================================================
  FILTERS
================================================================ */
.pro-filters,
.pro-apply,
.pro-empty {
  border-radius: var(--js-radius-lg);
}

.pro-filters {
  background: var(--color-background);
  color: var(--color-main);
  border: 1px solid var(--color-border);
}

.pro-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
  padding: 0 calc(var(--js-padding) * 1.5);
  height: var(--pro-filters-head-h);
  cursor: pointer;
  list-style: none;
}

.pro-filters__head::-webkit-details-marker {
  display: none;
}

.pro-filters__title {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 1.25);
}

.pro-filters__caret {
  transition: var(--js-transition);
}

.pro-filters__details[open] .pro-filters__caret {
  transform: rotate(180deg);
}

@media (min-width: 992px) {
  .pro-filters__head {
    cursor: default;
    pointer-events: none;
  }

  .pro-filters__caret {
    display: none;
  }
}

.pro-filters__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1.25);
  padding: 0 calc(var(--js-padding) * 1.5) calc(var(--js-padding) * 1.5);
}

.pro-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Group label as in the filters of /apps/all/: small, tracked capitals in a soft colour. */
.pro-fieldset__legend {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 calc(var(--js-padding) * 0.25);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.6875);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-secondary-op7);
}

/* "Clear all" sits on the title row, at the right. It is out of the flow, so showing it does not push the filters down. */
.pro-filters__details {
  position: relative;
}

.pro-text-btn {
  position: absolute;
  top: 0;
  right: calc(var(--js-padding) * 1.5);
  display: inline-flex;
  align-items: center;
  height: var(--pro-filters-head-h);
  background: none;
  border: 0;
  padding: 0 4px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.875);
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Pinned to the bottom of the open panel on phones and tablets; it sits at the end of the panel once that scrolls into view. */
.pro-filters__apply {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 calc(var(--js-padding) * -1.5) calc(var(--js-padding) * -1.5);
  padding: 12px calc(var(--js-padding) * 1.5) max(12px, env(safe-area-inset-bottom));
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--js-radius-lg) var(--js-radius-lg);
}

.pro-filters__apply .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (min-width: 992px) {
  .pro-filters__apply {
    display: none;
  }
}

@media (max-width: 991px) {
  /* beside the caret, not over it */
  .pro-text-btn {
    right: calc(var(--js-padding) * 1.5 + 36px);
  }

  /* On phones and tablets the filter bar stays pinned under the header, 8px below it, while the results scroll by.
     Open, the panel scrolls inside itself, so a short screen still reaches the pinned button at its foot. */
  .pro-filters {
    --pro-filters-gap: 8px;
    position: sticky;
    top: calc(var(--pro-header-h) + var(--pro-filters-gap));
    z-index: 15;
    max-height: calc(100vh - var(--pro-header-h) - var(--pro-filters-gap) - 12px);
    max-height: calc(100dvh - var(--pro-header-h) - var(--pro-filters-gap) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 6px 16px var(--color-main-op05);
  }
}

/* Filter options as in the filters of /apps/all/: flat rows with the checkbox at the left, the label and
   the count as soft text at the right. No card: the checkbox says what is on. */
.pro-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 2px 0;
  font-size: calc(var(--font-base-size) * 0.9375);
  line-height: 1.3;
  color: var(--color-main);
  cursor: pointer;
}

@media (pointer: coarse) {
  .pro-option {
    min-height: 44px;
  }
}

.pro-option:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* A small rounded square that turns the accent green with a dark check, as the one of the apps filters.
   Drawn here with tokens (the apps stylesheet has its colours as hex) and a masked SVG check, so the check
   takes the ink colour of the section. */
.pro-option input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--color-background);
  border: 1.5px solid var(--color-secondary-op7);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--js-transition);
}

.pro-option input:disabled {
  cursor: not-allowed;
}

.pro-option input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.pro-option input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-main);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath d='M1.75 7.5L5.05 10.75L11.25 3.1' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath d='M1.75 7.5L5.05 10.75L11.25 3.1' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 14px no-repeat;
}

.pro-option__label {
  min-width: 0;
}

.pro-option__count {
  font-size: calc(var(--font-base-size) * 0.8125);
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary-op7);
}

.pro-option input:focus-visible,
.pro-chip:focus-visible,
.pro-view__btn:focus-visible,
.pro-text-btn:focus-visible,
.pro-card:focus-visible,
.pro-filters__head:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* base.css removes the outline of .js-form__input / .js-form__select with !important, which leaves only a
   border that goes from 30% to 70% opacity as the focus indicator. These two controls get a real ring. */
.pro-sort:focus-visible,
.pro-search__input:focus-visible {
  outline: 2px solid var(--color-main) !important;
  outline-offset: 2px;
}

/* ================================================================
  "GET LISTED" PANEL
================================================================ */
.pro-apply {
  background: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  padding: calc(var(--js-padding) * 1.75);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--js-padding) * 1.25);
}

.pro-apply__title {
  margin: 0;
  font-size: calc(var(--font-base-size) * 1.75);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-main);
  text-wrap: balance;
}

.pro-apply__text {
  margin: 0;
  text-wrap: pretty;
  font-size: calc(var(--font-base-size) * 1.0625);
  line-height: 1.5;
}

/* Who it is for. The colours are the tag tokens of the system (danger, warning, success, info) and a
   tint of the amethyst for agencies, which has no tag token. */
.pro-apply__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pro-pill {
  height: 30px;
  padding: 0 calc(var(--js-padding) * 1.125);
  border-radius: 999px;
  font-size: calc(var(--font-base-size) * 0.9375);
  font-weight: 500;
}

.pro-pill--purple {
  background: color-mix(in srgb, var(--pro-amethyst) 16%, var(--color-background));
  color: var(--pro-amethyst);
}

.pro-apply__terms {
  margin: calc(var(--js-padding) * -0.25) 0 0;
  font-size: calc(var(--font-base-size) * 0.8125);
  line-height: 1.5;
  color: var(--color-secondary-op7);
}

.pro-apply__terms a {
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================================================
  RESULTS: search, toolbar, chips
================================================================ */
.pro-search {
  position: relative;
}

.pro-search__icon {
  position: absolute;
  top: 50%;
  left: calc(var(--js-padding) * 1);
  transform: translateY(-50%);
  font-size: calc(var(--font-base-size) * 1.25);
  color: var(--color-secondary-op7);
  pointer-events: none;
}

.pro-search__input {
  height: 52px;
  padding-left: calc(var(--js-padding) * 2.75);
}

.pro-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
}

.pro-toolbar__count {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 1.25);
  color: var(--color-main);
}

.pro-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--js-padding) * 0.75);
}

/* The native arrow is drawn flush against the border whatever the padding is, and a select takes no
   children: the arrow is the Phosphor caret of the rest of the site, over the select with room on the right. */
.pro-select {
  position: relative;
  display: inline-flex;
}

.pro-sort {
  width: auto;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 42px;
  appearance: none;
  cursor: pointer;
}

.pro-select__caret {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: calc(var(--font-base-size) * 1.125);
  color: var(--color-main);
  pointer-events: none;
}

.pro-view {
  display: inline-flex;
  border: 1px solid var(--color-main-op3);
  border-radius: var(--js-radius-md);
  overflow: hidden;
}

.pro-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--color-background);
  color: var(--color-main);
  font-size: calc(var(--font-base-size) * 1.25);
  cursor: pointer;
  transition: var(--js-transition);
}

.pro-view__btn[aria-pressed="true"] {
  background: var(--color-main);
  color: var(--color-background);
}

.pro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--js-padding) * 0.5);
}

.pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--js-tag-neutral-bg);
  color: var(--js-tag-neutral-ink);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.875);
  cursor: pointer;
  transition: var(--js-transition);
}

.pro-chip:hover {
  background: var(--color-main);
  color: var(--color-background);
}

/* ================================================================
  CARDS (one markup, two layouts)
================================================================ */
.pro-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1);
}

.pro-list[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: calc(var(--js-padding) * 1.25);
}

.pro-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--js-padding) * 1.5);
  padding: calc(var(--js-padding) * 1);
  background: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-lg);
  text-decoration: none;
  transition: var(--js-transition);
}

.pro-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px var(--color-main-op05);
  color: var(--color-secondary);
}

.pro-card__media {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: var(--js-radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.pro-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pro-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.625);
  min-width: 0;
}

.pro-card__name {
  margin: 0;
  font-size: calc(var(--font-base-size) * 1.375);
  font-weight: 600;
  color: var(--color-main);
  text-transform: capitalize;
}

.pro-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pro-card__tag--active {
  background: var(--color-main);
  color: var(--color-background);
}

.pro-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px calc(var(--js-padding) * 1.5);
  font-size: calc(var(--font-base-size) * 0.875);
  line-height: 1.4;
  color: var(--color-secondary-op7);
}

.pro-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pro-list[data-view="grid"] .pro-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: calc(var(--js-padding) * 0.875);
}

.pro-list[data-view="grid"] .pro-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

.pro-list[data-view="grid"] .pro-card__name {
  font-size: calc(var(--font-base-size) * 1.125);
}

.pro-list[data-view="grid"] .pro-card__meta {
  flex-direction: column;
  margin-top: auto;
}

.pro-list[data-view="grid"] .pro-card__cta {
  display: none;
}

@media (max-width: 767px) {
  .pro-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: calc(var(--js-padding) * 1);
  }

  .pro-card__media {
    width: 72px;
    height: 72px;
  }

  .pro-card__cta {
    display: none;
  }
}

/* Phones, list view: no logo, to save space. The card is the name, the tags and the place and price, at
   full width; the grid view keeps the logo. The image is display: none, so with loading="lazy" it is not
   downloaded either. */
@media (max-width: 575px) {
  .pro-list[data-view="list"] .pro-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }

  .pro-list[data-view="list"] .pro-card__media {
    display: none;
  }
}

.pro-empty {
  background: var(--color-background);
  color: var(--color-main);
  border: 1px dashed var(--color-main-op3);
  padding: calc(var(--js-padding) * 3.5) calc(var(--js-padding) * 2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--js-padding);
}

.pro-empty__title,
.pro-empty__text {
  margin: 0;
}

.pro-empty__text {
  max-width: 460px;
  color: var(--color-secondary-op7);
}

/* ================================================================
  WHY HIRE AN EXPERT
================================================================ */
.pro-why__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: calc(var(--js-padding) * 4);
}

.pro-why__copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1.25);
  max-width: 520px;
}

.pro-why__title {
  margin: 0;
}

.pro-why__copy p {
  margin: 0;
  text-wrap: pretty;
}

.pro-why__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--js-radius-lg);
}

@media (max-width: 991px) {
  /* Stacked, the hero is centred as a whole: copy, text and visual. */
  .pro-hero--list {
    padding-top: calc(var(--js-padding) * 2.5);
    padding-bottom: calc(var(--js-padding) * 3);
  }

  .pro-hero--list .pro-hero__inner {
    flex-direction: column;
    gap: calc(var(--js-padding) * 2.5);
  }

  /* Stacked, the glows follow the visual, which is now under the copy. */
  .pro-hero--list::before {
    background:
      radial-gradient(70% 24% at 18% 26%, color-mix(in srgb, var(--pro-glow-dim) 32%, transparent), transparent),
      radial-gradient(60% 26% at 70% 68%, color-mix(in srgb, var(--pro-glow-emerald) 95%, transparent), transparent),
      radial-gradient(60% 24% at 92% 90%, color-mix(in srgb, var(--pro-glow-blue) 90%, transparent), transparent);
  }

  .pro-hero__copy {
    flex-basis: auto;
    align-items: center;
    text-align: center;
  }

  .pro-hero__title,
  .pro-hero__text {
    margin-inline: auto;
  }

  /* Wide, not boxed: the mosaic takes 80% of the screen, so the stores are big, and the hero cuts its
     lower row. The devices at the right edge leave the box by 8%, so 80% keeps them inside the screen. */
  .pro-hero__visual {
    flex: 0 0 auto;
    width: 80vw;
    max-width: 900px;
    margin-inline: auto;
    /* The top devices leave the box by 10% of its height: room for them under the text, and a nudge to the
       left so the whole mosaic is centred (its devices at the right leave the box, the left ones do not). */
    margin-top: min(8vw, 72px);
    translate: -3vw 0;
  }

  .pro-why__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--js-padding) * 2);
    text-align: center;
  }

  .pro-why__copy {
    max-width: none;
  }
}

@media (max-width: 575px) {
  /* base.css sizes the title at 48px here and 40px from 418px down; on phones the headline is bigger (52px)
     and the subtitle is left out, so the hero is the headline and the stores. */
  .pro-hero__title {
    font-size: calc(var(--font-base-size) * 3.25) !important;
  }

  .pro-hero__text {
    display: none;
  }

  .pro-toolbar__controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* ================================================================
  DETAIL: hero and identity card
================================================================ */
/* A slim strip with the way back; the name of the professional is the h1 of the card below. */
.pro-hero--detail {
  padding-top: calc(var(--js-padding) * 0.75);
  padding-bottom: calc(var(--js-padding) * 0.75);
}

.pro-hero--detail .pro-hero__inner {
  display: flex;
  align-items: center;
  text-align: left;
}

.pro-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.9375);
  color: var(--color-accent);
  text-decoration: none;
}

.pro-back:hover {
  padding-left: 3px;
}

.pro-back:focus-visible,
.pro-nav__link:focus-visible,
.pro-copy:focus-visible,
.pro-car__btn:focus-visible,
.pro-car__dot:focus-visible,
.pro-car__track:focus-visible,
.pro-project__zoom:focus-visible,
.pro-project__link:focus-visible,
.pro-rel:focus-visible,
.pro-contact__link:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.pro-back:focus-visible {
  outline-color: var(--color-accent);
}

.pro-identity {
  padding-top: calc(var(--js-padding) * 3);
  padding-bottom: calc(var(--js-padding) * 3);
}

.pro-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--js-padding) * 1.75);
  padding: calc(var(--js-padding) * 1.75) calc(var(--js-padding) * 2);
  background: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-lg);
}

.pro-id__logo {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--js-radius-md);
  background: var(--color-surface);
}

.pro-id__main {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.875);
}

.pro-id__name {
  margin: 0;
  font-size: calc(var(--font-base-size) * 2.25);
  line-height: 1.15;
  overflow-wrap: break-word;
}

.pro-id__meta,
.pro-id__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px calc(var(--js-padding) * 1.5);
}

.pro-id__tags {
  gap: 8px;
}

.pro-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(var(--font-base-size) * 0.9375);
  color: var(--color-secondary-op7);
}

.pro-id__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--js-padding) * 0.75);
}

@media (max-width: 991px) {
  .pro-id {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(var(--js-padding) * 1.5);
  }

  .pro-id__main {
    flex-basis: auto;
    width: 100%;
    align-items: center;
  }

  .pro-id__meta,
  .pro-id__tags,
  .pro-id__actions {
    justify-content: center;
  }
}

@media (max-width: 575px) {

  .pro-id {
    padding: calc(var(--js-padding) * 1.25);
  }

  .pro-id__name {
    font-size: calc(var(--font-base-size) * 1.5);
  }

  .pro-id__actions {
    width: 100%;
  }

  .pro-id__actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
  DETAIL: sticky anchor menu
================================================================ */
.pro-nav-sentinel {
  height: 0;
}

.pro-nav {
  position: sticky;
  top: var(--pro-header-h);
  z-index: 20;
  background: var(--color-background);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pro-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
  min-height: var(--pro-nav-h);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.2s ease;
}

.pro-nav.is-stuck {
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 20px var(--color-main-op05);
}

.pro-nav.is-stuck .pro-nav__bar {
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.pro-nav__links {
  --pro-nav-pad: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pro-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--pro-nav-h);
  padding: 0 var(--pro-nav-pad);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.9375);
  color: var(--color-secondary-op7);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: var(--js-transition);
}

.pro-nav__link:hover {
  color: var(--color-main);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px) {
  .professionals-page {
    --pro-header-h: var(--header-height-mobile);
    --pro-nav-h: 48px;
  }
}

/* From 992px the contact card is sticky beside the content and always in view, so its link has nothing to jump to. */
@media (min-width: 992px) {
  .pro-nav__link--contact {
    display: none;
  }
}

.pro-nav__link[aria-current="true"] {
  color: var(--color-main);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 575px) {
  .pro-nav__links {
    --pro-nav-pad: 8px;
  }

  .pro-nav__link {
    font-size: calc(var(--font-base-size) * 0.875);
  }
}

/* ================================================================
  DETAIL: content, facts, services
================================================================ */
.pro-content {
  padding-bottom: calc(var(--js-padding) * 5);
}

.pro-content__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--js-padding) * 2);
  align-items: start;
}

@media (min-width: 992px) {
  .pro-content__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: calc(var(--js-padding) * 3);
  }
}

.pro-content__main {
  min-width: 0;
}

/* Only the contact: across the width, the items in a row. */
.pro-content__layout--solo {
  grid-template-columns: minmax(0, 1fr);
}

.pro-content__layout--solo .pro-contact {
  position: static;
  margin-top: 0;
}

@media (min-width: 768px) {
  .pro-content__layout--solo .pro-contact__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--js-padding) * 0.875) calc(var(--js-padding) * 2.5);
  }
}

.pro-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1.5);
  padding: calc(var(--js-padding) * 3) 0 calc(var(--js-padding) * 2.5);
  scroll-margin-top: calc(var(--pro-header-h) + var(--pro-nav-h));
}

.pro-block + .pro-block {
  border-top: 1px solid var(--color-border);
}

.pro-block:first-child {
  padding-top: calc(var(--js-padding) * 2.5);
}

.pro-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
}

.pro-block__title,
.pro-contact__title {
  margin: 0;
  font-size: calc(var(--font-base-size) * 2.25);
  line-height: 1.15;
}

.pro-block__count {
  font-size: calc(var(--font-base-size) * 0.9375);
  color: var(--color-secondary-op7);
}

.pro-block__lead {
  margin: 0;
  font-size: calc(var(--font-base-size) * 1.125);
  line-height: 1.7;
  color: var(--color-secondary);
}

.pro-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--js-padding);
}

.pro-service {
  display: flex;
  align-items: center;
  gap: calc(var(--js-padding) * 1);
  min-height: 64px;
  padding: calc(var(--js-padding) * 0.875) calc(var(--js-padding) * 1.25);
  border-radius: var(--js-radius-lg);
  background: var(--js-tag-success-bg);
  border: 1.5px solid var(--js-tag-success-dot);
  color: var(--js-tag-success-ink);
}

.pro-service__icon {
  flex-shrink: 0;
  font-size: calc(var(--font-base-size) * 1.875);
}

.pro-service__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 1.0625);
  line-height: 1.25;
}

.pro-service__check {
  flex-shrink: 0;
  font-size: calc(var(--font-base-size) * 1.5);
}

/* ================================================================
  DETAIL: contact column
================================================================ */
.pro-contact {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1.25);
  padding: calc(var(--js-padding) * 1.75);
  background: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-lg);
  scroll-margin-top: calc(var(--pro-header-h) + var(--pro-nav-h) + 16px);
}

.pro-contact__title {
  font-size: calc(var(--font-base-size) * 1.5);
}

.pro-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.875);
}

.pro-contact__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--js-padding) * 0.5) calc(var(--js-padding) * 0.75);
  line-height: 1.4;
}

.pro-contact__item > i {
  flex-shrink: 0;
  font-size: calc(var(--font-base-size) * 1.25);
  color: var(--color-secondary-op7);
}

.pro-contact__link {
  flex: 1 0 auto;
  max-width: 100%;
  min-width: 0;
  color: var(--color-main);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.pro-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
  background: var(--color-background);
  color: var(--color-main);
  border: 1px solid var(--color-main-op3);
  border-radius: var(--js-radius-sm);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.8125);
  cursor: pointer;
  transition: var(--js-transition);
}

.pro-copy:hover {
  background: var(--color-main);
  color: var(--color-background);
}

@media (min-width: 992px) {
  .pro-contact {
    margin-top: calc(var(--js-padding) * 2.5);
    position: sticky;
    top: calc(var(--pro-header-h) + var(--pro-nav-h) + 16px);
  }
}

/* ================================================================
  CAROUSELS (scroll-snap) AND PROJECTS
================================================================ */
.pro-car {
  --pro-car-gap: calc(var(--js-padding) * 1.5);
  --pro-car-per: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1);
  min-width: 0;
}

.pro-car__track {
  display: flex;
  gap: var(--pro-car-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.pro-car__track::-webkit-scrollbar {
  display: none;
}

/* Touch swipes natively; the mouse drags through professional-detail.js. */
@media (hover: hover) and (pointer: fine) {
  .pro-car__track {
    cursor: grab;
  }
}

.pro-car__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pro-car__track.is-dragging a,
.pro-car__track.is-dragging button {
  pointer-events: none;
}

.pro-car__slide {
  flex: 0 0 calc((100% - (var(--pro-car-per) - 1) * var(--pro-car-gap)) / var(--pro-car-per));
  min-width: 0;
  scroll-snap-align: start;
}

.pro-car--related {
  --pro-car-gap: calc(var(--js-padding) * 1.25);
}

@media (min-width: 576px) {
  .pro-car--related {
    --pro-car-per: 2;
  }
}

@media (min-width: 992px) {
  .pro-car--related {
    --pro-car-per: 3;
  }
}

.pro-car__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pro-car__dots {
  display: flex;
  align-items: center;
}

.pro-car__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-main-op3);
  background: var(--color-background);
  color: var(--color-main);
  font-size: calc(var(--font-base-size) * 1.25);
  cursor: pointer;
  transition: var(--js-transition);
}

.pro-car__btn:hover:not(:disabled) {
  background: var(--color-main);
  color: var(--color-background);
}

.pro-car__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pro-car__pos {
  min-width: 64px;
  text-align: center;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.9375);
  font-variant-numeric: tabular-nums;
  color: var(--color-main);
}

.pro-car__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.pro-car__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-main-op3);
  transition: var(--js-transition);
}

.pro-car__dot[aria-current="true"]::before {
  width: 28px;
  background: var(--color-main);
}

.pro-project {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.875);
}

.pro-project__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  line-height: 0;
  cursor: zoom-in;
}

.pro-project__zoom img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.pro-project__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-main);
  color: var(--color-background);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.8125);
  line-height: 1;
}

.pro-project__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
}

.pro-project__name {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 1.25);
  color: var(--color-main);
  overflow-wrap: anywhere;
}

.pro-project__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-main);
  font-size: calc(var(--font-base-size) * 1.25);
  transition: var(--js-transition);
}

.pro-project__link:hover {
  background: var(--color-main-op05);
}

/* ================================================================
  RELATED
================================================================ */
.pro-related {
  padding-top: calc(var(--js-padding) * 4.5);
  padding-bottom: calc(var(--js-padding) * 5);
}

.pro-related .js-container__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 2.5);
}

.pro-related__title {
  margin: 0;
  text-align: center;
}

.pro-rel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 1);
  padding: calc(var(--js-padding) * 1.25);
  background: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-lg);
  text-decoration: none;
  transition: var(--js-transition);
}

.pro-rel:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px var(--color-main-op05);
  color: var(--color-secondary);
}

.pro-rel__top {
  display: flex;
  align-items: center;
  gap: calc(var(--js-padding) * 1);
}

.pro-rel__media {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--js-radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.pro-rel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pro-rel__id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pro-rel__name {
  margin: 0;
  font-size: calc(var(--font-base-size) * 1.25);
  font-weight: 600;
  color: var(--color-main);
  overflow-wrap: anywhere;
}

.pro-rel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ================================================================
  LIGHTBOX
================================================================ */
.pro-lightbox {
  --pro-backdrop-rgb: var(--js-color-onyx-rgb);
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-main);
  overflow: auto;
}

.pro-lightbox::backdrop {
  background: rgba(var(--pro-backdrop-rgb), 0.88);
}

.pro-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
  padding-bottom: 12px;
  color: var(--color-main);
}

.pro-lightbox__title {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 1.125);
}

.pro-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--js-radius-md);
}

/* ================================================================
  FINAL CTA (create-store.html)
  The email placeholder falls back to the browser grey (3.4:1 on the
  dark glow). A fix in base.css would cover every 2026 page; until then it is
  tinted here from the section colour. The title balances its lines so a long
  translation does not leave one short word alone on the second line.
================================================================ */
#start .js-section__form-input::placeholder {
  color: var(--color-secondary-op7);
  opacity: 1;
}

#start .js-section__title {
  text-wrap: balance;
}

/* ================================================================
  REDUCED MOTION
  Colour and border changes stay as feedback; what moves goes: the
  caret turn, the dot stretch and the smooth scroll (professional-detail.js
  also reads this query before it scrolls a carousel).
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .pro-filters__caret,
  .pro-car__dot::before,
  .pro-nav,
  .pro-nav__bar {
    transition: none;
  }

  .pro-car__track {
    scroll-behavior: auto;
  }
}