/* ===========================================================================================
   The business card.

   One stylesheet for every place a card is drawn: the standalone site (/site/{slug} and a
   business's own domain), the marketplace page (/card/{slug}) and the builder's preview in the
   business portal, which links this very file instead of keeping a copy. Two copies of these rules
   had drifted before — the preview showed square photos, 16px corners and no shadows whatever
   theme the owner picked — and an owner who designs against a preview that lies is designing blind.

   Themes (card-ground.css) supply the tokens: --c-bg, --c-surface, --c-text, --c-muted,
   --c-primary(-fg), --c-accent(-fg), --c-border, --c-radius, --c-border-w, --c-shadow, --c-space.
   Everything here is written against those tokens, so one rule reads right on cream and on noir.
   =========================================================================================== */

/* ---- tokens derived from the theme ------------------------------------------------------- */
/* Computed rather than stored, so every theme — and every colour an owner overrides — gets them. */
.js-card-root,
.card-foot {
  /* A quiet wash of the brand colour: icon tiles, chips, today's row. */
  --c-tint: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  --c-tint-line: color-mix(in srgb, var(--c-primary) 18%, transparent);
  /* Open/closed, pulled toward the text colour so they stay legible on a dark ground and a light one. */
  --c-ok: color-mix(in srgb, #16a34a 70%, var(--c-text));
  --c-bad: color-mix(in srgb, #dc2626 72%, var(--c-text));
  /* A form field's outline. Not --c-border: a theme may set that to nothing (violet), and a
     field you cannot see is a field nobody fills in. */
  --c-field-line: color-mix(in srgb, var(--c-text) 20%, transparent);
}

.ct-bg { background: var(--c-bg); color: var(--c-text); }
.ct-surface { background: var(--c-surface); color: var(--c-text);
  border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); }
.ct-primary { background: var(--c-primary); color: var(--c-primary-fg); }
.ct-accent { background: var(--c-accent); color: var(--c-accent-fg); }
.js-card-root .price { color: var(--c-primary); }

/* ---- cover -------------------------------------------------------------------------------- */
/* No veil. The old one darkened the top of every photo and faded the bottom into the page, so a
   bright shop front arrived looking grey. The photo now ends in a clean edge the owner chooses. */
.profile-cover { position: relative; height: 240px; overflow: hidden;
  background: color-mix(in srgb, var(--c-primary) 20%, var(--c-bg)); }
@media (min-width: 640px) { .profile-cover { height: 300px; } }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-cover.is-empty { height: 150px; }
.profile-cover.edge-curve { clip-path: ellipse(140% 100% at 50% 0%); }
.profile-cover.edge-angle { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

/* ---- head: logo, name, trade --------------------------------------------------------------- */
.profile-head { max-width: 760px; margin: -66px auto 0; padding: 0 16px; text-align: center; position: relative; }
.profile-logo { width: 128px; height: 128px; box-sizing: border-box; border-radius: 50%; overflow: hidden; margin: 0 auto;
  border: 4px solid var(--c-surface); background: var(--c-surface);
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .45); }
.profile-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A logo is artwork with its own margins and often its own text: it goes in whole, on white,
   rather than being cropped to the circle like a photograph. */
.profile-logo.fit-contain { background: #fff; }
.profile-logo.fit-contain img { object-fit: contain; padding: 13%; box-sizing: border-box; }
/* No logo yet: the business's initial, not an empty ring. */
.profile-logo.is-empty { display: grid; place-items: center; background: var(--c-tint); color: var(--c-primary);
  font-family: Rubik, Heebo, sans-serif; font-weight: 800; font-size: 50px; line-height: 1; }

.profile-head h1 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.2; margin: 14px 0 0; color: var(--c-text);
  text-transform: var(--c-heading-transform, none); letter-spacing: var(--c-heading-spacing, -.01em); }
.profile-head .prof { margin-top: 4px; font-size: 16px; font-weight: 600; color: color-mix(in srgb, var(--c-text) 80%, var(--c-bg)); }
.profile-head .slogan { margin: 6px auto 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: var(--c-muted); }

/* Where and whether-open, as two chips rather than a line of grey text with an emoji in it. */
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; font-size: 13px; }
.profile-meta .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px;
  background: var(--c-tint); color: color-mix(in srgb, var(--c-text) 82%, var(--c-bg)); font-weight: 600; }
.profile-meta .chip svg { width: 14px; height: 14px; }
.profile-meta .status-open,
.profile-meta .status-live { background: color-mix(in srgb, var(--c-ok) 13%, transparent); color: var(--c-ok); font-weight: 700; }
.profile-meta .status-closed { background: color-mix(in srgb, var(--c-bad) 11%, transparent); color: var(--c-bad); font-weight: 700; }
.profile-meta .status-live { animation: sos-pulse 1.6s ease-in-out infinite; }
@keyframes sos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .profile-meta .status-live { animation: none; } }

/* the card's own language switch — each label in its own script, so the pair also says
   which languages this card exists in */
.lang-switch { display: inline-flex; gap: 3px; margin-top: 12px; padding: 3px; border-radius: 999px;
               background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); }
.lang-switch a { padding: 5px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
                 color: var(--c-muted); text-decoration: none; line-height: 1.7; }
.lang-switch a:hover { color: var(--c-text); }
.lang-switch a.is-on { background: var(--c-primary); color: var(--c-primary-fg); }
.lang-switch a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---- contact actions ----------------------------------------------------------------------- */
/* One tile style for every action. The card used to fill WhatsApp with the accent colour, fill
   Call with the primary, and leave the rest white with a border — three styles in one row, which
   is what read as unfinished. Rows are flex, not grid, so a last row of one or two is centred
   instead of hanging off the right edge. */
.quick { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 16px; max-width: 372px; margin: 22px auto 0; }
.quick a { flex: 0 0 33.333%; box-sizing: border-box; padding: 0 4px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--c-text); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.quick.n-4 a, .quick.n-7 a, .quick.n-8 a { flex-basis: 25%; }
.quick .lbl { max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quick .ico { width: 56px; height: 56px; box-sizing: border-box; border-radius: var(--c-radius,16px); display: flex; align-items: center; justify-content: center;
  background: var(--c-tint); color: var(--c-primary); border: var(--c-border-w,1px) solid var(--c-tint-line);
  transition: transform .15s ease, background-color .15s ease; }
.quick .ico svg { width: 24px; height: 24px; }
.quick a:hover .ico { background: color-mix(in srgb, var(--c-primary) 17%, var(--c-surface)); }
.quick a:active .ico { transform: scale(.95); }
@media (min-width: 640px) {
  .quick { max-width: 600px; }
  .quick a, .quick.n-4 a, .quick.n-7 a, .quick.n-8 a { flex-basis: 16.666%; }
  .quick.n-4 a { flex-basis: 25%; }
}
.nw { white-space: nowrap; unicode-bidi: isolate; }

/* Social profiles: their own quieter row of real brand marks, so the tiles above stay about
   reaching the business. */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-primary); background: var(--c-surface); border: 1px solid var(--c-tint-line); }
.socials a:hover { background: var(--c-tint); }
.socials svg { width: 19px; height: 19px; }

/* The one thing a business card is for. Every other header control is secondary to it. */
.c-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 320px; min-height: 50px;
  margin: 22px auto 0; box-sizing: border-box; padding: 0 22px; border-radius: 999px;
  background: var(--c-primary); color: var(--c-primary-fg); font-weight: 800; font-size: 16px; text-decoration: none;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--c-primary) 75%, transparent); }
.c-cta:hover { filter: brightness(1.06); }
.c-cta svg { width: 20px; height: 20px; }

/* Favourites / follow / QR / share: one quiet row of text buttons. */
.c-util { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-top: 10px; }
.c-util form { display: inline; }
.js-card-root .c-util .btn-fav { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box;
  border: 0; background: transparent; color: var(--c-muted); padding: 9px 10px; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.js-card-root .c-util .btn-fav:hover { color: var(--c-text); background: var(--c-tint); }
.js-card-root .c-util .btn-fav svg { width: 16px; height: 16px; }
.js-card-root .c-util .btn-fav.saved { color: #e0245e; }
.js-card-root .c-util .btn-fav.is-following { color: var(--c-primary); background: transparent; border: 0; }

/* ---- sections ------------------------------------------------------------------------------ */
.psection { max-width: 760px; margin: calc(24px + var(--c-space,12px)) auto 0; padding: 0 16px; }
.psection h2 { display: flex; align-items: center; gap: 10px; color: var(--c-text); font-size: 22px; text-transform: var(--c-heading-transform, none); letter-spacing: var(--c-heading-spacing, -.01em); }
.psection h2:before { content: ""; width: 30px; height: 4px; border-radius: 999px; background: var(--c-accent); flex: 0 0 auto; }

/* services */
.svc { display: grid; gap: var(--c-space,10px); }
@media (min-width: 640px) { .svc { grid-template-columns: 1fr 1fr; } }
.svc .item { display: flex; flex-direction: column; gap: 10px; background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); padding: 14px; }
.svc .svc-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.svc .svc-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.svc .svc-name { font-weight: 700; line-height: 1.4; }
.svc .svc-sub { color: var(--c-muted); font-size: 13.5px; line-height: 1.55; margin-top: 2px; }
.svc .price { font-weight: 800; white-space: nowrap; font-size: 16px; }
/* optional per-service icon (chosen in the builder's icon picker) */
.svc-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: calc(var(--c-radius,16px) * .6);
  background: color-mix(in oklab, var(--c-primary) 12%, transparent); color: var(--c-primary);
}
.svc-ico svg { width: 20px; height: 20px; }
/* "Book" is a small outlined button at the end of the row. A full-width filled bar under every
   service turned a price list into a wall of identical buttons. */
.svc-book { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  box-sizing: border-box; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--c-primary);
  background: transparent; color: var(--c-primary); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.svc-book svg { width: 16px; height: 16px; }
.svc-book:hover { background: var(--c-primary); color: var(--c-primary-fg); }
/* the rest of a long list, folded */
.svc-more { margin-top: var(--c-space,10px); }
.svc-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px;
  border: 1px dashed color-mix(in srgb, var(--c-text) 24%, transparent); border-radius: var(--c-radius,16px);
  color: var(--c-primary); font-weight: 700; font-size: 14.5px; }
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more > summary svg { width: 16px; height: 16px; transition: transform .2s ease; }
.svc-more[open] > summary svg { transform: rotate(180deg); }
.svc-more .when-open, .svc-more[open] .when-closed { display: none; }
.svc-more[open] .when-open { display: inline; }
.svc-more > .svc { margin-top: var(--c-space,10px); }

/* responsive video embed (16:9) on the public card */
.pv-video { position: relative; padding-top: 56.25%; border-radius: var(--c-radius,14px); overflow: hidden; }
.pv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* products */
.prod { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--c-space,10px); }
@media (min-width: 640px) { .prod { grid-template-columns: repeat(4, 1fr); } }
.prod .item { display: block; color: inherit; text-decoration: none; background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); overflow: hidden; }
.prod .item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.prod .item .b { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.prod .item .price { font-weight: 800; font-size: 15px; }
.prod .item .price.ask { color: var(--c-muted); font-weight: 600; font-size: 13px; }

/* gallery */
.pgallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .pgallery { grid-template-columns: repeat(3, 1fr); } }
/* 4:3, not a square. Business photography is landscape almost without exception — a team on a
   shift, a warehouse aisle, a packing line — and a 1:1 tile center-cropped a third of the width
   off every one of them, cutting people out of the edges of their own photo. 4:3 is close enough
   to the 3:2 and 4:3 that cameras actually produce to keep the grid tidy while cropping little. */
.pgallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--c-radius,14px); }
/* "mosaic" (stored as masonry): the first photo leads, full width, the rest follow in pairs */
.pgallery.lay-masonry > :first-child { grid-column: 1 / -1; }
.pgallery.lay-masonry > :first-child img { aspect-ratio: 16 / 10; }
@media (max-width: 639px) {
  /* an odd photo out at the end spans the row instead of sitting alone beside a gap */
  .pgallery.lay-masonry > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .pgallery.lay-masonry > :last-child:nth-child(even) img { aspect-ratio: 16 / 10; }
}
@media (min-width: 640px) {
  .pgallery.lay-masonry > :first-child { grid-column: span 2; grid-row: span 2; }
  .pgallery.lay-masonry > :first-child img { aspect-ratio: auto; height: 100%; }
}
/* carousel: one swipeable strip */
.pgallery.lay-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
.pgallery.lay-carousel::-webkit-scrollbar { display: none; }
.pgallery.lay-carousel > * { flex: 0 0 84%; scroll-snap-align: center; }
@media (min-width: 640px) { .pgallery.lay-carousel > * { flex-basis: 46%; } }

/* ----- brand / partner logo strip ----- */
.lstrip { overflow: hidden; }
/* fade the two ends so logos enter and leave instead of being chopped off at the edge */
@supports (mask-image: linear-gradient(#000, #000)) {
  .lstrip { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
                    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
}
/* ltr on purpose: the track is a duplicated loop, and reversing its layout would only make the
   translate maths harder to follow. Logos have no reading direction to preserve. */
.lstrip-track { direction: ltr; display: flex; width: max-content; animation: lstrip-run var(--lstrip-dur, 32s) linear infinite; }
.lstrip:hover .lstrip-track, .lstrip:focus-within .lstrip-track { animation-play-state: paused; }
.lstrip-set { display: flex; gap: 18px; padding-inline-end: 18px; }
.lstrip-item { flex: 0 0 auto; width: 116px; height: 68px; display: grid; place-items: center; padding: 10px;
               background: #fff; border: 1px solid var(--c-border); border-radius: 12px; }
.lstrip-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lstrip-item a { display: grid; place-items: center; width: 100%; height: 100%; }
@media (min-width: 640px) { .lstrip-item { width: 148px; height: 84px; } .lstrip-set { gap: 24px; padding-inline-end: 24px; } }
/* half the track is the duplicate, so -50% lands on an identical frame */
@keyframes lstrip-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lstrip { overflow-x: auto; }
  .lstrip-track { animation: none; }
  .lstrip-set[aria-hidden="true"] { display: none; }   /* nothing is moving, so the copy is just clutter */
}

/* ----- running text ----- */
/* The text starts one container-width off the leading edge and slides across. The leading edge
   of a right-to-left line is the LEFT one: the old animation slid the text further left, away from
   the frame it had never been inside, so on every Hebrew and Arabic card the bar ran empty. */
.mq { overflow: hidden; white-space: nowrap; border-radius: var(--c-radius, 12px); padding: 11px 0; font-weight: 700; }
.mq-track { display: inline-block; padding-inline-start: 100%; animation: mq-run var(--mq-dur, 16s) linear infinite; }
[dir="rtl"] .mq-track { animation-name: mq-run-rtl; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes mq-run-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .mq { white-space: normal; text-align: center; padding: 11px 16px; }
  .mq-track { animation: none; padding-inline-start: 0; }
}

/* ----- gallery thumbs + lightbox ----- */
.pgal-item { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--c-radius,14px); overflow: hidden; }
.pgal-item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pgal-item img { display: block; transition: transform .25s ease; }
.pgal-item:hover img { transform: scale(1.04); }

/* position: fixed is stated, not left to the browser. The lightbox is a direct child of the card
   root, and card-ground.css gives every such child position: relative (so content sits above the
   ground layer). A modal dialog in the top layer turns relative into ABSOLUTE — anchored to the
   top of the document, not the screen — so a visitor who opened a photo halfway down the card got
   the dark backdrop and a picture thousands of pixels above it. */
dialog.lbox { position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; border: 0; padding: 0; background: transparent; overflow: hidden; }
dialog.lbox::backdrop { background: rgba(0,0,0,.9); }
.lbox-fig { margin: 0; height: 100%; box-sizing: border-box; padding: 60px 16px 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
/* contain, not cover: these are posters, and cropping one hides the text on it */
.lbox-fig img { max-width: min(100%, 1100px); max-height: 100%; object-fit: contain; border-radius: 12px; opacity: 0; transition: opacity .18s ease; }
.lbox-fig img.is-in { opacity: 1; }
.lbox-fig figcaption { color: #fff; font-size: 14.5px; line-height: 1.5; text-align: center; max-width: 680px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.lbox-x, .lbox-nav { position: fixed; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; }
.lbox-x:hover, .lbox-nav:hover { background: rgba(255,255,255,.32); }
.lbox-x:focus-visible, .lbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbox-x { top: 14px; inset-inline-end: 14px; width: 42px; height: 42px; }
/* physical sides on purpose: prev is the way the strip came from, which in RTL is the right */
.lbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lbox-prev { right: 12px; }
.lbox-next { left: 12px; }
.lbox-count { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: 13px; letter-spacing: .04em; }
@media (max-width: 640px) { .lbox-fig { padding: 56px 8px 44px; } .lbox-nav { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .pgal-item img, .lbox-fig img { transition: none; } }

/* ----- opening hours ----- */
.hours { padding: 8px; }
.hours .h-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; padding: 0 10px;
  border-radius: calc(var(--c-radius,16px) * .6); color: var(--c-muted); }
.hours .h-row.is-today { background: var(--c-tint); color: var(--c-text); font-weight: 700; }
.hours .today-tag { display: inline-block; margin-inline-start: 8px; padding: 0 8px; border-radius: 999px; line-height: 20px;
  background: var(--c-primary); color: var(--c-primary-fg); font-size: 11.5px; font-weight: 800; }

/* ----- FAQ ----- */
.faq { background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); padding: 14px; margin-bottom: 8px; }
.faq summary { font-weight: 700; cursor: pointer; color: var(--c-text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
/* a drawn chevron instead of the browser's triangle, which points the wrong way in RTL */
.faq summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: -4px; opacity: .55;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq p { color: var(--c-muted); margin: 8px 0 0; }

/* ----- contact form ----- */
.cform .fl { display: block; font-size: 13.5px; font-weight: 700; color: var(--c-text); margin: 0 0 6px; }
.cform input, .cform textarea { width: 100%; box-sizing: border-box; min-height: 46px; margin-bottom: 12px; padding: 11px 14px; font: inherit;
  border: max(1px, var(--c-border-w,1px)) solid var(--c-field-line); background: var(--c-surface); color: var(--c-text); border-radius: var(--c-radius,12px); }
.cform input:focus, .cform textarea:focus { outline: 2px solid color-mix(in srgb, var(--c-primary) 45%, transparent); outline-offset: 1px; border-color: var(--c-primary); }
.cform textarea { resize: vertical; }
.js-card-root .cform .btn { display: block; width: 100%; min-height: 50px; height: auto; border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; font-size: 16px; line-height: normal; }

/* ---- share ---------------------------------------------------------------------------------- */
/* Round brand marks of one size, centred. The labels stay in the markup for screen readers. */
.js-card-root .share { justify-content: center; gap: 12px; }
.js-card-root .share .lbl { display: none; }
.js-card-root .share a, .js-card-root .share button { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.js-card-root .share .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js-card-root .share svg { width: 21px; height: 21px; }
.js-card-root .share .cp, .js-card-root .share .nt { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-field-line); }

/* ---- sticky action bar ---------------------------------------------------------------------- */
/* Sticky, thumb-reachable primary actions on the business card (mobile only). */
.card-actionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: none; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--c-surface, #fff);
  border-top: 1px solid var(--c-border, rgba(0,0,0,.1)); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.card-actionbar .cab-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; border-radius: 14px; font-weight: 800; font-size: 15px; }
.card-actionbar .cab-btn svg { width: 20px; height: 20px; }
.cab-wa { background: #25d366; color: #06331b; }
.cab-call { background: var(--c-primary, #0e8c5b); color: var(--c-primary-fg, #fff); }
.cab-nav { background: var(--c-surface, #fff); color: var(--c-text, #15241d); border: 1.5px solid var(--c-border, rgba(0,0,0,.15)); }
@media (max-width: 639px) {
  .card-actionbar { display: flex; }
  .js-card-root.has-actionbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* Visible focus rings for keyboard users on the card's interactive controls (a11y). */
.card-actionbar .cab-btn:focus-visible, .svc-book:focus-visible, .quick a:focus-visible, .socials a:focus-visible, .c-cta:focus-visible {
  outline: 3px solid var(--c-primary, #0e8c5b); outline-offset: 2px; }

/* ---- reviews -------------------------------------------------------------------------------- */
.rev-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.rev-avg { font-size: 30px; font-weight: 800; color: var(--c-primary, #0e8c5b); }
.rev-stars { color: #f5b544; letter-spacing: 2px; font-size: 20px; }
.rev-stars.sm { font-size: 14px; }
.rev-count { color: var(--c-muted, #777); font-size: 13px; }
.rev-thanks { background: var(--success-strong); color: #fff; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; }
.rev-form { border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rev-form-row { display: flex; align-items: center; gap: 10px; }
.rev-form-row label { font-weight: 700; font-size: 14px; }
.rev-select, .rev-form textarea { padding: 9px 12px; border: 1px solid var(--c-field-line, rgba(0,0,0,.14)); border-radius: 10px; font: inherit;
  background: var(--c-surface); color: var(--c-text); }
.rev-form textarea { resize: vertical; }
.rev-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rev-item { border: 1px solid var(--c-border, rgba(0,0,0,.1)); background: var(--c-surface); border-radius: var(--c-radius, 14px); padding: 12px 14px; }
.rev-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-date { color: var(--c-muted, #999); font-size: 12px; margin-inline-start: auto; }
.rev-body { margin: 8px 0 0; line-height: 1.6; }
.rev-reply { margin-top: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--c-primary, #0e8c5b) 8%, transparent); border-radius: 10px; font-size: 13.5px; }
.rev-empty { color: var(--c-muted); margin: 0 0 12px; }

/* ---- owner-only live-availability toggle ---------------------------------------------------- */
.live-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: 460px; margin: 16px auto 0; padding: 12px 16px; border-radius: 16px;
  border: 1px solid var(--c-border, #e5e7eb); background: var(--c-surface, #fff); }
.live-toggle.on { border-color: #9be0c2; background: color-mix(in oklab, var(--success) 6%, transparent); }
.live-toggle .lt-state { display: flex; flex-direction: column; line-height: 1.2; }
.live-toggle .lt-state b { font-weight: 800; }
.live-toggle.on .lt-state b { color: var(--c-ok); }
.live-toggle .lt-state small { color: var(--c-muted, #6b7280); font-size: 12px; }
.live-toggle .lt-btn { border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; }
.live-toggle.off .lt-btn { background: var(--success); }
.live-toggle.on .lt-btn { background: #b03a3a; }

/* ---- footer of a card served as its own site ------------------------------------------------ */
/* It carries the card's theme, not the platform's blue: a visitor is on the business's page to the
   last pixel, and the offer to make one like it reads as a quiet credit, not an advert. */
.card-foot { background: var(--c-bg); color: var(--c-text); border-top: 1px solid var(--c-border); padding: 24px 0 30px; text-align: center; }
.card-foot .cf-made { margin: 0 0 14px; font-size: 13px; color: var(--c-muted); }
.card-foot .cf-made a { color: var(--c-text); font-family: Rubik, Heebo, sans-serif; font-weight: 800; text-decoration: none; }
.card-foot .cf-made .dot { color: var(--c-accent); }
.card-foot .join-cta { max-width: 460px; margin: 0 auto; }
.card-foot .join-box { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); }
.card-foot .join-box .join-lead { font-size: 15px; }
.card-foot .join-form input, .card-foot .join-form textarea { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-field-line); }
.card-foot .join-send { background: var(--c-primary); color: var(--c-primary-fg); }
.card-foot .join-done { background: var(--c-surface); border: 1px solid var(--c-border); }
/* The page body reserves room for the marketplace's bottom nav, which a card site does not have:
   that room showed as a strip of the platform's grey under the footer. On a card site the footer
   is the last thing on the page, so it is the footer that makes room for the sticky action bar. */
body.card-site { padding-bottom: 0; }
@media (max-width: 639px) {
  body.card-site .js-card-root.has-actionbar { padding-bottom: 40px !important; }
  body.card-site:has(.has-actionbar) .card-foot { padding-bottom: calc(30px + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- brutal keeps its character -------------------------------------------------------------- */
/* Hard black outlines and an offset shadow are the whole point of that theme; soft brand washes
   would turn it into just another card. */
.card-theme-brutal .quick .ico,
.card-theme-brutal .socials a { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); box-shadow: var(--c-shadow); }
.card-theme-brutal .socials a { border-radius: 0; }
.card-theme-brutal .c-cta,
.card-theme-brutal .svc-book,
.card-theme-brutal .cform .btn,
.card-theme-brutal .svc-more > summary { border-radius: 0; }
.card-theme-brutal .c-cta { box-shadow: var(--c-shadow); }
.card-theme-brutal .cform input, .card-theme-brutal .cform textarea { border-color: var(--c-border); }