/* Approved store layout. Loaded only for franchise posts 218, 250 and 245. */
.gygabon-garca-site {
  color: #163f56;
  font-family: Quicksand, sans-serif;
}
/* Header and banner use the existing theme styles from the Franquias page. */
.gygabon-garca-page { padding: 1.25rem 0 2.8rem; background: #f8fbfd; }
.gygabon-garca-shell { width: min(75rem, calc(100% - 3rem)); margin-inline: auto; }
.gygabon-garca-breadcrumb { display: flex; align-items: center; gap: .6rem; color: #657d8d; font-size: .8rem; font-weight: 600; }
.gygabon-garca-breadcrumb a { color: #0b668d; text-decoration: none; }
.gygabon-garca-breadcrumb a:hover { text-decoration: underline; }
.gygabon-garca-breadcrumb { margin-bottom: 1.5rem; }
.gygabon-garca-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(19rem, 1fr); grid-template-areas: "heading heading" "photo visit" "more more"; gap: .95rem 2rem; align-items: stretch; }
.gygabon-garca-gallery { grid-area: photo; display: flex; min-width: 0; }
.gygabon-garca-more-photos { grid-area: more; min-width: 0; }
.gygabon-garca-gallery-heading { grid-area: heading; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.gygabon-garca-gallery-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.4; letter-spacing: -.025em; }
.gygabon-garca-gallery-heading > span { flex: 0 0 auto; color: #6c8593; font-size: .8rem; font-weight: 600; }
.gygabon-garca-photo-item { position: relative; min-width: 0; margin: 0; }
.gygabon-garca-photo-link { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: .8rem; color: #fff; background: #e2edf2; cursor: zoom-in; isolation: isolate; }
.gygabon-garca-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.gygabon-garca-photo-main { flex: 1; }
.gygabon-garca-photo-main .gygabon-garca-photo-link { width: 100%; height: 100%; aspect-ratio: 8 / 5; border-radius: 1.25rem; }
.gygabon-garca-photo-main .gygabon-garca-photo { object-position: 50% 20%; }
.gygabon-garca-photo-main .gygabon-garca-photo-link::after { position: absolute; inset: 76% 0 0; z-index: 0; background: linear-gradient(transparent, rgba(8, 31, 44, .68)); content: ""; pointer-events: none; }
.gygabon-garca-photo-item figcaption { margin: .6rem .1rem 0; color: #294f65; font-size: .88rem; font-weight: 700; line-height: 1.4; }
.gygabon-garca-photo-main figcaption { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; margin: 0; color: #fff; font-size: .95rem; font-weight: 700; pointer-events: none; }
.gygabon-garca-photo-zoom { position: absolute; right: .65rem; bottom: .65rem; z-index: 1; display: inline-flex; min-width: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; gap: .4rem; padding: .45rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(14,44,66,.7); color: #fff; font-size: .78rem; font-weight: 700; }
.gygabon-garca-photo-main .gygabon-garca-photo-zoom { right: .9rem; bottom: .85rem; padding-inline: .8rem; }
.gygabon-garca-photo-zoom svg { width: 1rem; height: 1rem; }
.gygabon-garca-photo-link:hover .gygabon-garca-photo-zoom { background: #075a7f; }
.gygabon-garca-photo-link:focus-visible { outline: 3px solid #047fa8; outline-offset: 3px; }
.gygabon-garca-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .95rem; }
.gygabon-garca-thumbnails .gygabon-garca-photo-link { aspect-ratio: 8 / 5; border-radius: 1rem; }
.gygabon-garca-thumbnails img { object-position: 50% 35%; }
.gygabon-garca-thumbnails .gygabon-garca-photo-item:last-child img { object-position: 50% 75%; }
.gygabon-garca-thumbnails:focus-visible { outline: 2px solid #047fa8; outline-offset: 4px; border-radius: .8rem; }
.gygabon-garca-swipe-hint { display: none; }
.gygabon-garca-visit { grid-area: visit; display: flex; flex-direction: column; padding: 1.8rem; border: 1px solid #dce9f0; border-top: 4px solid #06a8c6; border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 32px rgba(21,72,96,.065); }
.gygabon-garca-eyebrow { margin: 0; color: #cd3549; font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.gygabon-garca-visit h2 { margin: .4rem 0 1.6rem; color: #153e55; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.gygabon-garca-detail { display: flex; align-items: flex-start; gap: .85rem; }
.gygabon-garca-detail > div { flex: 1; min-width: 0; }
.gygabon-garca-detail-icon { display: grid; flex: 0 0 auto; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .65rem; background: #ecf7fa; color: #067a9d; }
.gygabon-garca-detail-icon svg { width: 1.2rem; height: 1.2rem; }
.gygabon-garca-detail h3 { margin: 0 0 .4rem; color: #536f80; font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.gygabon-garca-address { margin: 0; color: #204b61; font-size: .98rem; font-weight: 700; line-height: 1.6; }
.gygabon-garca-detail-secondary { margin: .1rem 0 0; color: #6b8593; font-size: .86rem; line-height: 1.5; }
.gygabon-garca-hours { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid #e5edf2; }
.gygabon-garca-hours dl { margin: 0; font-size: .84rem; line-height: 1.6; }
.gygabon-garca-hours dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: .65rem; margin-top: .25rem; }
.gygabon-garca-hours dt { color: #4b6b7c; }
.gygabon-garca-hours dd { margin: 0; color: #19475f; font-weight: 800; white-space: nowrap; }
.gygabon-garca-actions { display: grid; gap: .65rem; margin-top: auto; padding-top: 1.5rem; }
.gygabon-garca-button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: .6rem; padding: .85rem .7rem; border: 1px solid transparent; border-radius: .8rem; font-size: .95rem; font-weight: 800; line-height: 1.25; text-decoration: none; }
.gygabon-garca-button svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.gygabon-garca-button-primary { color: #fff; background: #086c99; box-shadow: 0 6px 14px rgba(8,108,153,.16); }
.gygabon-garca-button-primary:hover { color: #fff; background: #05567c; }
.gygabon-garca-button-secondary { border-color: #cce0eb; color: #08678e; background: #fff; }

.gygabon-garca-button-whatsapp { border-color: #d7eee0; background: #fff; color: #168b4e; box-shadow: none; }
.gygabon-garca-button-whatsapp:hover { border-color: #25d366; background: #f2fcf6; color: #116c3d; }
.gygabon-garca-whatsapp-icon { display: inline-flex; flex: 0 0 3rem; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 999px; background: #16a34a; }
.gygabon-garca-button-whatsapp .gygabon-garca-whatsapp-icon img { display: block; width: 2rem; height: 2rem; object-fit: fill; }
.gygabon-garca-button-secondary:hover { color: #065071; background: #eef8fb; }
.gygabon-garca-button:focus-visible, .gygabon-garca-breadcrumb a:focus-visible { outline: 3px solid #047fa8; outline-offset: 3px; }
.gygabon-garca-viewer { width: min(72rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 1.1rem; overflow: auto; border: 1px solid #355367; border-radius: 1rem; color: #f4f8fb; background: #122a3a; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.gygabon-garca-viewer::backdrop { background: rgba(5,20,29,.88); }
.gygabon-garca-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .25rem .85rem; }
.gygabon-garca-viewer-toolbar p { margin: 0; color: #96bccf; font-size: .75rem; }
.gygabon-garca-viewer h2 { margin: .15rem 0 0; color: #fff; font-size: 1.15rem; font-weight: 700; }
.gygabon-garca-viewer-close { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .75rem; border: 1px solid #608196; border-radius: .65rem; color: #fff; background: #223e50; cursor: pointer; }
.gygabon-garca-viewer-close svg { width: 1.1rem; height: 1.1rem; }
.gygabon-garca-viewer-stage { position: relative; display: flex; min-height: 12rem; align-items: center; justify-content: center; overflow: hidden; border-radius: .6rem; background: #0b1d28; }
.gygabon-garca-viewer-stage img { display: block; width: 100%; height: min(68dvh, 48rem); object-fit: contain; }
.gygabon-garca-viewer-nav { position: absolute; top: 50%; z-index: 1; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; transform: translateY(-50%); border: 1px solid #819aaa; border-radius: 50%; color: #fff; background: rgba(16,40,56,.9); cursor: pointer; }
.gygabon-garca-viewer-nav[data-gallery-previous] { left: .6rem; }
.gygabon-garca-viewer-nav[data-gallery-next] { right: .6rem; }
.gygabon-garca-viewer-nav svg { width: 1.15rem; height: 1.15rem; }
.gygabon-garca-viewer-nav[hidden] { display: none; }
.gygabon-garca-viewer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; padding: .9rem .25rem .1rem; font-size: .86rem; }
.gygabon-garca-viewer-bottom p { margin: 0; }
.gygabon-garca-viewer-bottom a { color: #b8e6fb; text-decoration: underline; text-underline-offset: .2rem; }
.gygabon-garca-viewer button:hover { background: #356079; }
.gygabon-garca-viewer button:focus-visible, .gygabon-garca-viewer a:focus-visible { outline: 3px solid #b8e6fb; outline-offset: 3px; }
html.gygabon-gallery-open { overflow: hidden; }
@media (max-width: 859px) {
  .gygabon-garca-shell { width: calc(100% - 2rem); }
  .gygabon-garca-page { padding: 1.1rem 0 2.5rem; }
  .gygabon-garca-breadcrumb { margin-bottom: 1.4rem; }
  .gygabon-garca-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visit" "heading" "photo" "more"; gap: .85rem; }
  .gygabon-garca-visit { margin-bottom: .65rem; padding: 1.25rem; }
  .gygabon-garca-visit h2 { margin-bottom: 1.1rem; font-size: 1.55rem; }
  .gygabon-garca-detail { gap: .7rem; }
  .gygabon-garca-hours { margin-top: 1rem; padding-top: 1rem; }
  .gygabon-garca-actions { margin-top: 0; padding-top: 1.2rem; }
  .gygabon-garca-gallery-heading h2 { font-size: 1.25rem; }
  .gygabon-garca-photo-main .gygabon-garca-photo-link { height: auto; aspect-ratio: 4 / 3; border-radius: 1rem; }
  .gygabon-garca-thumbnails { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 60%); gap: .7rem; overflow-x: auto; padding: .2rem .1rem .7rem; scroll-snap-type: x mandatory; }
  .gygabon-garca-thumbnails .gygabon-garca-photo-item { scroll-snap-align: start; }
  .gygabon-garca-thumbnails .gygabon-garca-photo-link { aspect-ratio: 4 / 3; }
  .gygabon-garca-swipe-hint { display: block; margin: .2rem 0 0; color: #698291; font-size: .76rem; }
  .gygabon-garca-viewer { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); padding: .65rem; border-radius: .8rem; }
  .gygabon-garca-viewer-stage img { height: 62dvh; }
  .gygabon-garca-viewer-bottom { align-items: flex-start; flex-direction: column; }
}


/* Mesmo cartão de visita quando a unidade ainda não possui fotos. */
.gygabon-garca-layout-no-photos { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'visit'; }
.gygabon-garca-layout-no-photos .gygabon-garca-visit { max-width: 42rem; width: 100%; margin-inline: auto; }