.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.ghost-border { border: 1px solid rgba(190, 201, 195, 0.2); }
/* Scoped styles for places template */
.places-custom-template * { box-sizing: border-box; }
.places-custom-template img { max-width: 100%; height: auto; }
.places-custom-template a { text-decoration: none; }
@media (max-width: 1024px) {
/* Shell: 8px above the island, nothing below it. 8 + 56 = 64px, which is
exactly the max-height ak-mobile-polish.php caps the header at, so the
island no longer overflows its own shell. */
html body header.elementor-location-header,
html body header#site-header,
html body .ts-header {
padding: 8px 10px 0 !important;
}
/* One 40px row — logo · account · burger — 8px apart. Dropping the row
from 48px to 40px is the whole height saving: the island's 7px
vertical padding and 1px border are left alone, so 40 + 14 + 2 = 56. */
html body header.elementor-location-header .e-con-inner {
gap: 8px !important;
}
html body header.elementor-location-header nav.ts-nav-menu,
html body header.elementor-location-header ul.ts-nav,
html body header.elementor-location-header li.ts-mobile-menu,
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
height: 40px !important;
min-height: 40px !important;
}
/* post-2270.css ships the nav item with `margin: 0 8px` and the account
dropdown with `margin-left: 8px`; the 8px rhythm is the flex gap's job
now, so each control is exactly 40px wide with nothing added. */
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
margin: 0 !important;
}
html body header.elementor-location-header .ak-account-dd {
margin-left: 0 !important;
}
/* header-premium-style.php paints `.ts-mobile-menu` white for the stock
Voxel slide-out; that class is also on the , which printed a white
square behind the round burger. The drawer (ak-mobile-menu.php)
replaced that popup, so the needs no surface of its own — and at
40px the square is exactly the size of the button it sits behind. */
html body header.elementor-location-header li.ts-mobile-menu {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Logo: 24px tall (was 26px on phones, 30px at 768–1024), capped at
28px so no other rule can grow it back. Same image as desktop —
scaled, not swapped. */
html body header.elementor-location-header .elementor-widget-image img,
html body header.elementor-location-header.header-scrolled .elementor-widget-image img {
height: 24px !important;
max-height: 28px !important;
width: auto !important;
}
/* Account: an icon-only 40×40 circle at every width up to the
breakpoint. ak-header-account-dropdown.php only does this ≤767px, so
768–1024 still showed a 66px icon+caret capsule next to a 40px
burger. */
html body header.elementor-location-header .ak-account-dd .ak-account-trigger {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
justify-content: center !important;
}
html body header.elementor-location-header .ak-account-dd .ak-account-caret {
display: none !important;
}
/* header-premium-style.php shrinks the island to 4px padding once the
page is scrolled past 24px. At this size the island is already
compact, and a 6px shrink mid-scroll just shifts the page under the
reader's thumb — so the scrolled state keeps the same box. */
html body header.elementor-location-header.header-scrolled > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
html body header.elementor-location-header > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
}
/* Heroes that pull up under the header. At ≤860px each template already
uses -64px, which is still exactly the shell height, so nothing to do
there. Between 861px and the breakpoint they keep their desktop -72px,
which was 4px deeper than the old 68px shell and would now be 8px
deeper than the 64px one — so here they pull up by exactly 64px and
the hero top sits flush with the page top. */
@media (min-width: 861px) and (max-width: 1024px) {
html body .akhc-hero,
html body .akps-hero,
html body .akfs-hero,
html body .akgl-hero,
html body .akab-hero,
html body .akfs-top {
margin-top: -64px;
}
}
.ak-map-host .ts-map-defer,.akev-map .ts-map-defer{display:block;width:100%;height:100%}
/* every H1: the logo's Fredoka. High specificity + !important to beat the
per-template Plus Jakarta Sans H1 rules (incl. inline + body-injected). */
/* Specificity-proof: templates set their H1 font with a CLASS selector +
!important (e.g. `.ak-guide-single-title`), which outranks a plain
`html body h1 !important`. Enumerating every class meant every NEW template
silently fell back to Plus Jakarta Sans (the guides single page did).
These attribute-selector forms out-specify any single/double class rule
without needing to know the class name. */
html body h1,
html body h1[class],
html body h1[style],
html body [class] h1,
html body [class] [class] h1,
html body [class] [class] [class] h1,
html body h1.elementor-heading-title,
html body h1.akh-h1,
html body h1.akb-h1,
html body h1.akev-h1,
html body h1.akp-h1,
html body .akd-hero h1,
html body .ak-guides-hero h1,
html body .blog-custom-template h1,
html body [data-id="32db6b7"] .elementor-heading-title,
html body [data-id="f74d5c0"] .elementor-heading-title {
font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
letter-spacing: -0.01em !important;
}
picture.ak-webp{display:contents}.akpv-link>picture.ak-webp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:scale(1.05)}.akpa-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img,.akhc-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:none}@media (prefers-reduced-motion:reduce){.akpv-link>picture.ak-webp>img{transition:none!important}}
.akp-page {
--tq:#b5d5d9; --tq-deep:#8bbcc2; --teal:#2A7780; --teal-dk:#1D5B62;
--tq-soft:#EAF4F5; --ink:#0B1324; --body:#3e4944; --muted:#6e7a74;
--red:#E24B4B; --red-dk:#C83D3D; --line:rgba(190,201,195,.28);
font-family: 'Manrope', sans-serif; color: var(--body); background: #f6fafb;
}
.akp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.akp-breadcrumbs { padding: 14px 0 0; font-size: 13px; color: var(--muted); }
.akp-breadcrumbs a { color: var(--teal); text-decoration: none; }
.akp-breadcrumbs .akp-sep { margin: 0 6px; color: var(--muted); }
/* Hero */
.akp-hero-section { margin-top: 22px; }
.akp-hero { background: #fff; border-radius: 24px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; }
.akp-hero-info { padding: 36px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.akp-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.akp-type-chip { background: var(--tq-soft); color: var(--teal-dk); font: 800 11px/1 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 9999px; }
.akp-type-chip-link { text-decoration: none; transition: background .16s ease; }
.akp-type-chip-link:hover { background: #d4ebee; }
.akp-more-cat { text-align: center; margin-top: 30px; }
.akp-more-cat a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 9999px; background: var(--teal, #2A7780); color: #fff; font: 700 14.5px 'Plus Jakarta Sans', sans-serif; text-decoration: none; transition: background .16s ease; }
.akp-more-cat a:hover { background: #21606a; }
.akp-verified-pill { background: var(--teal); color: #fff; font: 700 12px/1 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 5px; }
.akp-verified-pill .ak-ico { width: 15px; height: 15px; }
.akp-h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); margin: 0; line-height: 1.15; }
.akp-rating-row { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--muted); }
.akp-rating-line { display: flex; align-items: center; gap: 6px; }
.akp-rating-line .akp-stars { color: #f0a93c; }
.akp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.akp-chk .ak-ico { width: 14px; height: 14px; flex-shrink: 0; }
.akp-address-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); }
.akp-address-row .ak-ico { color: var(--teal); width: 19px; height: 19px; flex-shrink: 0; }
.akp-hero-overview { font-family: Manrope, sans-serif; font-size: 15px; color: var(--body); line-height: 1.65; margin: 0; max-width: 520px; }
.akp-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* The shared CTA row (ak-cta.php) is a flex box of its own; `display: contents`
lets its buttons wrap alongside Save and Share as one row rather than sitting
in a block that wraps as a lump. The place accent is this page's own teal. */
.akp-action-row .akcta-row { display: contents; }
.akp-action-row { --akcta-accent: var(--teal); --akcta-accent-hover: var(--teal-dk); --akcta-shadow: rgba(42,119,128,.34); }
.akp-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: #fff; color: var(--teal-dk); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.akp-icon-btn:hover { background: var(--tq-soft); transform: translateY(-1px); color: var(--teal-dk); }
.akp-icon-btn.active { background: var(--tq); border-color: var(--tq); color: #00291f; }
.akp-icon-btn.active .ak-ico { fill: currentColor; }
.akp-icon-btn.vx-pending { opacity: .6; pointer-events: none; }
/* Hero-right gallery: fixed height so tiles are uniform regardless of source image size.
A definite height lets the tiles' height:100% + object-fit:cover crop consistently. */
.akp-media { position: relative; display: grid; grid-template-columns: 1.6fr .6fr; gap: 8px; height: 440px; padding: 8px 8px 8px 0; }
.akp-media.akp-no-gallery { grid-template-columns: 1fr; padding: 0; }
.akp-media-featured { border-radius: 0 20px 20px 0; overflow: hidden; position: relative; height: 100%; cursor: pointer; }
.akp-media.akp-no-gallery .akp-media-featured { border-radius: 0 24px 24px 0; }
.akp-media-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akp-media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--tq), var(--teal)); }
.akp-media-strip { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.akp-media-strip a { flex: 1 1 0; display: block; border-radius: 0 12px 12px 0; overflow: hidden; position: relative; cursor: pointer; min-height: 0; }
.akp-media-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.akp-media-strip a:hover img, .akp-media-featured:hover img { transform: scale(1.04); }
.akp-media-more { position: absolute; inset: 0; background: rgba(11,19,36,.58); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; z-index: 2; }
.akp-media-more .ak-ico { width: 24px; height: 24px; }
.akp-media-more span.akp-more-count { font: 800 20px 'Plus Jakarta Sans', sans-serif; }
.akp-photos-pill { position: absolute; right: 16px; bottom: 16px; background: rgba(11,19,36,.72); color: #fff; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; padding: 8px 14px; border-radius: 9999px; text-decoration: none; z-index: 3; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.akp-photos-pill .ak-ico { width: 16px; height: 16px; }
/* Shared fullscreen lightbox — ak-photo-lightbox.php */
.akp-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(7,12,22,.94); display: none; align-items: center; justify-content: center; }
.akp-lightbox.is-open { display: flex; }
.akp-lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 72px; box-sizing: border-box; }
.akp-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.akp-lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .1s; z-index: 2; }
.akp-lb-btn:hover { background: rgba(255,255,255,.25); }
.akp-lb-btn:active { transform: scale(.94); }
.akp-lb-btn .ak-ico { width: 30px; height: 30px; }
.akp-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.akp-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.akp-lb-prev:active { transform: translateY(-50%) scale(.94); }
.akp-lb-next:active { transform: translateY(-50%) scale(.94); }
.akp-lb-close { top: 20px; right: 20px; }
.akp-lb-counter { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: #fff; font: 700 14px 'Plus Jakarta Sans', sans-serif; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 9999px; z-index: 2; }
.akp-lb-open { cursor: zoom-in; }
@media (max-width: 640px) {
.akp-lb-stage { padding: 56px 12px; }
.akp-lb-btn { width: 44px; height: 44px; }
.akp-lb-prev { left: 8px; } .akp-lb-next { right: 8px; }
}
/* Chip strip */
.akp-chipstrip { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.akp-chip-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex: 1 1 200px; }
.akp-chip-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--tq-soft); display: flex; align-items: center; justify-content: center; color: var(--teal-dk); flex-shrink: 0; }
.akp-chip-text .akp-label { font: 700 10.5px 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: block; }
.akp-chip-text .akp-value { font: 800 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--ink); display: block; }
/* Main grid */
.akp-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; margin-top: 28px; }
.akp-col-left { display: flex; flex-direction: column; gap: 24px; }
.akp-card { background: #fff; border-radius: 20px; border: 1px solid var(--line); padding: 30px; }
.akp-card h2 { font: 800 20px 'Plus Jakarta Sans', sans-serif; color: var(--ink); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.akp-card h3 { font: 800 17px 'Plus Jakarta Sans', sans-serif; color: var(--ink); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.akp-icon-box { width: 34px; height: 34px; border-radius: 10px; background: var(--tq-soft); color: var(--teal-dk); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.akp-icon-box .ak-ico { width: 19px; height: 19px; }
.akp-prose { font-size: 16px; line-height: 1.7; color: var(--body); margin: 0; }
.akp-prose-sm { font-size: 15.5px; line-height: 1.7; color: var(--body); }
.akp-age-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.akp-age-pill { padding: 7px 15px; background: var(--tq-soft); color: var(--teal-dk); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; border-radius: 9999px; }
.akp-highlight { background: var(--tq-soft); border-radius: 20px; padding: 28px 30px; color: var(--teal-dk); display: flex; gap: 14px; align-items: flex-start; }
.akp-highlight .ak-ico { width: 26px; height: 26px; flex-shrink: 0; }
.akp-highlight p { margin: 0; font-size: 16px; line-height: 1.7; }
.akp-facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.akp-fact { display: flex; align-items: flex-start; gap: 12px; background: #f8fafb; border-radius: 12px; padding: 12px 14px; }
.akp-fact .ak-ico { color: var(--teal); width: 21px; height: 21px; flex-shrink: 0; }
.akp-fact .ak-ico.akp-no { color: var(--red); }
.akp-fact .akp-label { font: 700 10.5px 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 2px; }
.akp-fact .akp-value { font: 700 14px Manrope, sans-serif; color: var(--ink); }
.akp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.akp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--body); }
.akp-checklist .ak-ico { color: var(--teal); width: 20px; height: 20px; flex-shrink: 0; }
.akp-getting-grid { display: grid; gap: 22px; }
.akp-getting-item .akp-label { display: flex; align-items: center; gap: 7px; font: 700 11px 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 6px; }
.akp-getting-item .akp-label .ak-ico { color: var(--teal); width: 17px; height: 17px; }
.akp-getting-item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.akp-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.akp-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.akp-feature-pill { display: inline-block; padding: 6px 14px; background: var(--tq-soft); color: var(--teal-dk); font-weight: 600; font-size: 12px; border-radius: 9999px; }
.akp-address-strip .ak-ico { flex-shrink: 0; }
.akp-address-strip { display: flex; align-items: center; gap: 12px; background: var(--tq-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; color: var(--teal-dk); font-weight: 700; font-size: 14px; }
.ak-map-host { border-radius: 14px; overflow: hidden; position: relative; background: #e5e9ea; }
.akp-review-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.akp-theme-chip { background: #fff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: var(--body); text-transform: capitalize; }
.akp-gmb-note { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
/* Sidebar */
.akp-sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; align-self: start; }
.akp-side-card { background: #fff; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; }
.akp-side-header { background: linear-gradient(135deg, var(--tq-deep), var(--tq)); padding: 20px 24px; display: flex; align-items: center; gap: 10px; }
.akp-side-header .ak-ico { color: #00291f; flex-shrink: 0; }
.akp-side-header h3 { margin: 0; font: 800 17px 'Plus Jakarta Sans', sans-serif; color: #00291f; }
.akp-side-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.akp-side-row { display: flex; align-items: flex-start; gap: 14px; }
.akp-side-row .ak-ico { color: var(--teal); width: 20px; height: 20px; flex-shrink: 0; }
.akp-side-row .akp-label { font: 700 10.5px 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: block; }
.akp-side-row .akp-value { font: 600 14px Manrope, sans-serif; color: var(--ink); display: block; }
.akp-side-row a.akp-value { color: var(--teal-dk); text-decoration: none; font-weight: 700; }
.akp-side-hours { padding: 0 24px 22px; }
.akp-accessibility-list { list-style: none; margin: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.akp-accessibility-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.akp-accessibility-list .ak-ico { color: var(--teal); width: 19px; height: 19px; flex-shrink: 0; }
.akp-claim-card, .akp-owner-card { background: var(--tq-soft); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.akp-claim-card h4, .akp-owner-card h4 { margin: 0; font: 800 16px 'Plus Jakarta Sans', sans-serif; color: var(--teal-dk); }
.akp-claim-card p, .akp-owner-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--teal-dk); }
.akp-claim-btn, .akp-owner-btn { align-self: flex-start; background: var(--tq); color: #00291f; font: 700 13.5px 'Plus Jakarta Sans', sans-serif; padding: 10px 18px; border-radius: 9999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.akp-owner-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.akp-owner-btn.akp-secondary { background: #fff; border: 1.5px solid var(--teal); color: var(--teal-dk); }
/* Similar places */
.akp-similar { background: #f0f4f5; padding: 56px 0; }
.akp-similar h2 { text-align: center; font: 800 26px 'Plus Jakarta Sans', sans-serif; color: var(--ink); margin: 0 0 32px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.akp-similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.akp-similar-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: inherit; display: block; transition: transform .2s; }
.akp-similar-card:hover { transform: translateY(-4px); }
.akp-similar-img { height: 170px; position: relative; overflow: hidden; }
.akp-similar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akp-similar-body { padding: 16px; }
.akp-similar-type { font: 700 11px 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: var(--teal); margin-bottom: 6px; }
.akp-similar-title { font: 800 15.5px 'Plus Jakarta Sans', sans-serif; color: var(--ink); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.akp-similar-area { font-size: 12.5px; color: var(--muted); margin: 0; }
@media (max-width: 1024px) {
.akp-hero { grid-template-columns: 1fr; }
.akp-media { order: -1; height: 340px; }
.akp-media-featured, .akp-media.akp-no-gallery .akp-media-featured { border-radius: 20px 20px 0 0; }
.akp-main-grid { grid-template-columns: 1fr; }
.akp-sidebar { position: static; }
.akp-similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.akp-wrap { padding: 0 14px; }
.akp-hero-info { padding: 22px; }
.akp-card, .akp-side-body { padding: 22px 16px; }
.akp-media-strip { display: none; }
.akp-media { grid-template-columns: 1fr; height: 280px; padding: 0; }
.akp-media-featured { border-radius: 16px; }
.akp-facts-grid, .akp-features-grid { grid-template-columns: 1fr; }
.akp-similar-grid { grid-template-columns: 1fr; }
}
.akcta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.akcta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 1.5px solid rgba(11,19,36,.12); border-radius: 9999px; background: #fff; color: #0b1324 !important; font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none !important; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.akcta-btn .ak-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.akcta-btn:hover { border-color: #2A7780; color: #2A7780 !important; transform: translateY(-1px); }
.akcta-btn.is-primary { border-color: transparent; background: var(--akcta-accent, #2A7780); color: #fff !important; box-shadow: 0 4px 16px var(--akcta-shadow, rgba(42,119,128,.34)); }
.akcta-btn.is-primary:hover { background: var(--akcta-accent-hover, #1f5d64); color: #fff !important; box-shadow: 0 8px 22px var(--akcta-shadow, rgba(42,119,128,.42)); }
.akcta-btn.is-ghost { padding: 11px 17px; font-size: 13px; }
.akcta-btn.is-ghost .ak-ico { width: 16px; height: 16px; flex: 0 0 16px; }
/* Post-type accents, so the shared component still looks like the page it is on. */
.akcta-row.for-events, .akcta-sticky.for-events { --akcta-accent: #ff6b6b; --akcta-accent-hover: #f2554f; --akcta-shadow: rgba(255,107,107,.38); }
.akcta-row.for-deals-offers, .akcta-sticky.for-deals-offers { --akcta-accent: #E24B4B; --akcta-accent-hover: #C83D3D; --akcta-shadow: rgba(226,75,75,.34); }
/* Family services is the site's sun yellow, not the indigo in config.php's
category palette — that is what the family-service single has looked
like since it was written, and the sticky bar has to match the inline
row it mirrors. Dark ink, because yellow will not carry white text. */
.akcta-row.for-services, .akcta-sticky.for-services { --akcta-accent: #F4B942; --akcta-accent-hover: #E39B1F; --akcta-shadow: rgba(244,185,66,.34); }
.for-services .akcta-btn.is-primary, .for-services .akcta-btn.is-primary:hover { color: #4A340A !important; }
.akcta-sticky { display: none; }
@media (max-width: 720px) {
.akcta-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 8px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97);
backdrop-filter: saturate(150%) blur(8px); border-top: 1px solid rgba(11,19,36,.10); box-shadow: 0 -6px 20px rgba(11,19,36,.10); }
.akcta-sticky .akcta-btn { flex: 1 1 auto; min-width: 0; padding: 13px 14px; }
.akcta-sticky .akcta-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akcta-sticky .akcta-btn.is-icon { flex: 0 0 52px; padding: 0; height: 46px; }
.akcta-sticky .akcta-btn.is-icon .ak-ico { width: 19px; height: 19px; flex: 0 0 19px; }
body.ak-has-cta-sticky { padding-bottom: 86px; }
.akcta-row .akcta-btn { flex: 1 1 auto; }
}