/* ═══════════════════════════════════════════════════════════════════════
   service-detail.css — per-service landing page (/services/<slug>).

   Block: .gg-sd  (Service Detail)

   Listings render as a VERTICAL LIST of rows (search-page style) — one
   row per listing — with three variants for visual rhythm:
     .gg-sd__row--featured  → first row, big media + full info + Top-pick ribbon
     .gg-sd__row--standard  → search-page row (media-left, body-right)
     .gg-sd__row--compact   → slim variant, smaller media, single meta line

   Per-row subtle stripes (top / new / fast) keep neighbouring standards
   from looking identical.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body / page wrapper ─────────────────────────────────────────────── */
.gg-sd-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-sd-body::before{
	content: "";
	position: fixed; inset: 0;
	background:
		radial-gradient(1100px 460px at 8% -8%, rgba(237,41,56,.06), transparent 70%),
		radial-gradient(900px 420px at 110% 12%, rgba(237,41,56,.04), transparent 75%);
	pointer-events: none; z-index: 0;
}
.gg-sd{ width: 100%; padding: 22px 28px 32px; position: relative; z-index: 1; }
@media (max-width: 700px){ .gg-sd{ padding: 14px 14px 48px; } }

/* ── Atoms ───────────────────────────────────────────────────────────── */
.gg-sd__eyebrow{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .14em; text-transform: uppercase;
}
.gg-sd__eyebrow::before{
	content: ""; width: 22px; height: 2px;
	background: var(--gg-red, #ED2938); border-radius: 2px;
}
.gg-sd__eyebrow i{ font-size: 13px; color: var(--gg-red, #ED2938); }
.gg-sd__eyebrow--light{ color: rgba(255,255,255,.82); }
.gg-sd__eyebrow--light::before{ background: rgba(255,255,255,.55); }
.gg-sd__eyebrow--light i{ color: #fff; }

.gg-sd__btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px;
	border-radius: 12px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: all 200ms ease;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.gg-sd__btn i{ font-size: 14px; transition: transform 200ms ease; }
.gg-sd__btn--primary{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(237,41,56,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-sd__btn--primary:hover{ filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.gg-sd__btn--primary:hover i{ transform: translateX(2px); }
.gg-sd__btn--ghost{
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.32);
	color: #fff;
	backdrop-filter: blur(10px);
}
.gg-sd__btn--ghost:hover{ background: rgba(255,255,255,.24); transform: translateY(-1px); color: #fff; }
.gg-sd__btn--white{
	background: #fff;
	color: var(--gg-red-deep, #B91C28);
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}
.gg-sd__btn--white:hover{ transform: translateY(-1px); }
.gg-sd__btn--white:hover i{ transform: translateX(2px); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-sd__crumbs{ margin-bottom: clamp(14px, 2vw, 20px); }
.gg-sd__crumbs-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-sd__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-sd__crumbs-list li:not(:last-child)::after{ content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500; }
.gg-sd__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-sd__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-sd__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── HERO — premium editorial split (content-left, showcase-right) ──────
   Soft light background with two large red-tinted blur glows behind it.
   Content sits in the left column. The right column shows the service
   image as a rotated, drop-shadow'd card with three floating chips:
     - a gold "Featured service" ribbon (top, rotated)
     - a "From $X / unit" price slab overlapping the bottom-left corner
     - a "★ rating + reviews" pill floating off the right edge
   The whole thing is light, premium and visually different from the old
   dark full-bleed hero.
   ─────────────────────────────────────────────────────────────────── */
.gg-sd__hero{
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 0;
	margin-bottom: clamp(14px, 2vw, 20px);
	background:
		linear-gradient(135deg, #FFF8F8 0%, #FFF1F2 45%, #FFFAF7 100%);
	border: 1px solid rgba(237,41,56,.14);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 16px 36px -22px rgba(237,41,56,.18);
}
.gg-sd__hero-bg{
	position: absolute; inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.gg-sd__hero-glow{
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
}
.gg-sd__hero-glow--a{
	top: -80px; left: -60px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(237,41,56,.2), transparent 70%);
}
.gg-sd__hero-glow--b{
	bottom: -70px; right: -50px;
	width: 260px; height: 260px;
	background: radial-gradient(circle, rgba(245,158,11,.14), transparent 70%);
}

.gg-sd__hero-grid{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
	gap: clamp(18px, 2.4vw, 32px);
	align-items: center;
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px);
}
@media (max-width: 900px){
	.gg-sd__hero-grid{ grid-template-columns: 1fr; gap: 22px; padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 28px); }
}

/* ── Left column — editorial content ───────────────────────────────── */
.gg-sd__hero-content{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gg-sd__hero-cat{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(237,41,56,.18);
	color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	width: max-content;
	box-shadow: 0 4px 10px -4px rgba(237,41,56,.18);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.gg-sd__hero-cat:hover{ transform: translateY(-1px); box-shadow: 0 8px 16px -6px rgba(237,41,56,.24); color: var(--gg-red-deep, #B91C28); }
.gg-sd__hero-cat i{ color: var(--gg-red, #ED2938); font-size: 12px; }

.gg-sd__hero-title{
	font-family: var(--gg-font-head);
	font-size: clamp(22px, 2.8vw, 36px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--gg-black, #0A0A0A);
	margin: 2px 0 0;
}
.gg-sd__hero-accent{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

.gg-sd__hero-dek{
	font-family: var(--gg-font-body);
	font-size: clamp(13px, 1vw, 15px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}

.gg-sd__hero-tags{
	list-style: none; padding: 0; margin: 2px 0 0;
	display: flex; flex-wrap: wrap; gap: 5px;
}
.gg-sd__hero-tags li{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(237,41,56,.16);
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
}
.gg-sd__hero-tags li i{ font-size: 10px; color: var(--gg-red, #ED2938); }

/* Stats — compact inline strip with dashed divider above */
.gg-sd__hero-stats{
	list-style: none; padding: 12px 0 0; margin: 4px 0 0;
	border-top: 1px dashed rgba(237,41,56,.2);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(6px, 1vw, 14px);
}
@media (max-width: 540px){ .gg-sd__hero-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.gg-sd__hero-stats li{ display: flex; flex-direction: column; gap: 2px; line-height: 1.05; min-width: 0; }
.gg-sd__hero-stats strong{
	font-family: var(--gg-font-head);
	font-size: clamp(14px, 1.2vw, 17px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gg-sd__hero-stats small{
	font-family: var(--gg-font-head);
	font-size: 9px;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .1em; text-transform: uppercase;
	font-weight: 600;
}

.gg-sd__hero-cta{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gg-sd__hero-cta .gg-sd__btn{ padding: 10px 18px; font-size: 11px; }

/* ── Right column — image showcase with floating chips ─────────────── */
.gg-sd__hero-showcase{
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	max-width: 320px;
	margin-left: auto;
}
@media (max-width: 900px){
	.gg-sd__hero-showcase{ aspect-ratio: 16 / 10; max-width: 480px; margin: 0 auto; }
}
.gg-sd__hero-image{
	position: relative;
	width: 100%; height: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(15,23,42,.04),
		0 22px 40px -22px rgba(237,41,56,.32),
		0 8px 16px -8px rgba(15,23,42,.14);
	transform: rotate(-1deg);
	transition: transform 480ms cubic-bezier(.16,1,.3,1);
}
.gg-sd__hero:hover .gg-sd__hero-image{ transform: rotate(-.5deg) scale(1.01); }
.gg-sd__hero-image::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(237,41,56,.08), transparent 50%);
	pointer-events: none;
}
.gg-sd__hero-image img{
	width: 100%; height: 100%;
	object-fit: cover;
}

/* "Featured service" gold ribbon — top-left, tilted */
.gg-sd__hero-tag{
	position: absolute;
	top: 14px; left: 14px;
	z-index: 3;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	background: linear-gradient(135deg, #F59E0B, #D97706);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	box-shadow: 0 8px 18px -8px rgba(245,158,11,.45);
	transform: rotate(-3deg);
}
.gg-sd__hero-tag i{ color: #fff; font-size: 10px; }

/* Floating "From $X" price chip — overlaps bottom-left of image */
.gg-sd__hero-chip{
	position: absolute;
	z-index: 4;
	background: #fff;
	border-radius: 14px;
	padding: 9px 12px;
	font-family: var(--gg-font-head);
	box-shadow:
		0 1px 2px rgba(15,23,42,.04),
		0 16px 28px -14px rgba(15,23,42,.24);
}
.gg-sd__hero-chip--price{
	bottom: -14px; left: -14px;
	display: flex; flex-direction: column; gap: 1px;
	border: 1.5px solid rgba(237,41,56,.18);
	transform: rotate(-4deg);
	min-width: 96px;
}
.gg-sd__hero-chip--price small{
	font-size: 8px;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .14em; text-transform: uppercase;
	font-weight: 700;
}
.gg-sd__hero-chip--price strong{
	font-size: 20px;
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: -.02em;
	line-height: 1;
}
.gg-sd__hero-chip--price span{
	font-family: var(--gg-font-body);
	font-size: 10px;
	color: var(--gg-gray-500, #6B7280);
}

/* Floating ★ rating chip — top-right of image */
.gg-sd__hero-chip--rating{
	top: 20px; right: -14px;
	display: flex; align-items: center; gap: 7px;
	border: 1.5px solid rgba(245,158,11,.2);
	transform: rotate(4deg);
}
.gg-sd__hero-chip--rating i{ color: #FBBF24; font-size: 16px; line-height: 1; }
.gg-sd__hero-chip--rating-body{ display: flex; flex-direction: column; line-height: 1.1; }
.gg-sd__hero-chip--rating strong{
	font-size: 15px;
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
}
.gg-sd__hero-chip--rating span{
	font-family: var(--gg-font-body);
	font-size: 9px;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .04em; text-transform: uppercase;
	font-weight: 600;
}

@media (max-width: 900px){
	.gg-sd__hero-chip--price{ bottom: -12px; left: 8px; }
	.gg-sd__hero-chip--rating{ top: 12px; right: 8px; }
}

/* Reduce motion — drop the rotations + hover */
@media (prefers-reduced-motion: reduce){
	.gg-sd__hero-image,
	.gg-sd__hero-tag,
	.gg-sd__hero-chip{ transform: none !important; }
}

/* Override the ghost button so it reads on the LIGHT hero (was tuned for the
   old dark hero where it sat over an image background). */
.gg-sd__hero .gg-sd__btn--ghost{
	background: #fff;
	border-color: var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-800, #1F2937);
}
.gg-sd__hero .gg-sd__btn--ghost:hover{
	background: #fff;
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	color: var(--gg-red-deep, #B91C28);
}
/* "List your business" gets a dark-button variant — premium contrast */
.gg-sd__btn--dark{
	background: var(--gg-black, #0A0A0A);
	color: #fff;
	border-color: transparent;
}
.gg-sd__btn--dark:hover{
	background: var(--gg-black-soft, #141414);
	color: #fff;
	transform: translateY(-1px);
}

/* ── Sticky filter bar ──────────────────────────────────────────────── */
.gg-sd__sentinel{ display: block; height: 1px; margin: 0; }
.gg-sd__bar{
	position: sticky; top: 72px; z-index: 50;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 18px;
	background: rgba(255,255,255,.86);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	box-shadow: 0 6px 20px -12px rgba(15,23,42,.18);
	transition: border-radius 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
/* Full-bleed when stuck — same technique as the business directory bar. */
.gg-sd__bar.is-stuck{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(14px, 4vw, 28px);
	padding-right: clamp(14px, 4vw, 28px);
	border-radius: 0;
	border-left: 0; border-right: 0;
	background: rgba(255,255,255,.94);
	box-shadow: 0 8px 24px -12px rgba(15,23,42,.16);
}
.gg-sd__bar-summary{ display: flex; align-items: center; gap: 14px; flex: 1 1 auto; flex-wrap: wrap; }
.gg-sd__bar-count{ font-family: var(--gg-font-body); font-size: var(--gg-text-sm, 14px); color: var(--gg-gray-700, #374151); }
.gg-sd__bar-count strong{ font-family: var(--gg-font-head); font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-sd__bar-meta{
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	padding: 3px 9px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 999px;
}
.gg-sd__bar-meta i{ color: var(--gg-red, #ED2938); font-size: 11px; }
.gg-sd__bar-controls{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gg-sd__cell{
	position: relative;
	display: inline-flex; align-items: center;
	height: 40px; min-width: 160px;
	padding-left: 12px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 10px;
}
.gg-sd__cell:focus-within{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.07));
}
.gg-sd__cell-ico{ color: var(--gg-red-deep, #B91C28); font-size: 13px; pointer-events: none; }
.gg-sd__cell .bootstrap-select{
	--bs-dropdown-link-active-bg:    var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-active-color: var(--gg-red-deep, #B91C28);
	--bs-dropdown-link-hover-bg:     var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-hover-color:  var(--gg-red-deep, #B91C28);
	width: 100% !important; height: 100%;
}
.gg-sd__cell .bootstrap-select > .dropdown-toggle{
	position: relative;
	width: 100%; height: 100%;
	display: flex !important; align-items: center;
	padding: 0 30px 0 8px;
	border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; outline: 0 !important;
	font-family: var(--gg-font-head);
	font-weight: 700; font-size: 12px;
	color: var(--gg-gray-800, #1F2937) !important;
	text-align: left; white-space: nowrap;
}
.gg-sd__cell .bootstrap-select > .dropdown-toggle::after{
	content: '\F282'; font-family: 'bootstrap-icons';
	position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%);
	border: 0 !important; margin: 0 !important;
	font-size: 11px;
	color: var(--gg-gray-400, #9CA3AF);
	transition: transform 150ms ease;
}
.gg-sd__cell .bootstrap-select.show > .dropdown-toggle::after{ transform: translateY(-50%) rotate(180deg); }
.gg-sd__cell .bootstrap-select .filter-option,
.gg-sd__cell .bootstrap-select .filter-option-inner,
.gg-sd__cell .bootstrap-select .filter-option-inner-inner{
	display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
}
.gg-sd__cell .bootstrap-select .dropdown-menu{
	z-index: 1100; border: 0; border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.18);
	margin-top: 6px !important; padding: 6px;
	min-width: 200px; overflow: hidden;
}
.gg-sd__cell .bootstrap-select .dropdown-menu li > a,
.gg-sd__cell .bootstrap-select .dropdown-menu .dropdown-item{
	padding: 9px 12px; border-radius: 8px;
	font-family: var(--gg-font-body);
	font-size: 13px;
	color: var(--gg-gray-800, #1F2937);
}
.gg-sd__cell .bootstrap-select .dropdown-menu li > a:hover,
.gg-sd__cell .bootstrap-select .dropdown-menu li.selected > a,
.gg-sd__cell .bootstrap-select .dropdown-menu .dropdown-item.active{
	background: var(--gg-red-subtle, rgba(237,41,56,.07)) !important;
	color: var(--gg-red-deep, #B91C28) !important;
}
.gg-sd__cell .bootstrap-select .bs-searchbox{ padding: 4px 4px 6px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); margin-bottom: 4px; }
.gg-sd__cell .bootstrap-select .bs-searchbox input{
	width: 100%; border: 1px solid var(--gg-gray-200, #E5E7EB) !important; border-radius: 8px !important;
	padding: 8px 12px; background: var(--gg-gray-50, #F9FAFB) !important;
	font-size: 13px; outline: 0;
}

.gg-sd__toggle{
	display: inline-flex; align-items: center; gap: 6px;
	height: 40px; padding: 0 14px;
	border-radius: 10px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-sd__toggle i{ color: var(--gg-gray-400, #9CA3AF); font-size: 14px; transition: color 200ms ease; }
.gg-sd__toggle:hover{ border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); color: var(--gg-red-deep, #B91C28); }
.gg-sd__toggle.is-on{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.45);
}
.gg-sd__toggle.is-on i{ color: #fff; }
.gg-sd__clear{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	padding: 8px 14px;
	border-radius: 10px;
	border: 1.5px dashed var(--gg-gray-300, #D1D5DB);
	transition: all 200ms ease;
}
.gg-sd__clear:hover{ color: var(--gg-red-deep, #B91C28); border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.gg-sd__empty{
	text-align: center;
	padding: clamp(40px, 6vw, 72px) 20px;
	background: var(--gg-white, #fff);
	border: 1px dashed var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
}
.gg-sd__empty-ico{
	width: 64px; height: 64px; margin: 0 auto 18px;
	display: grid; place-items: center;
	border-radius: 18px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 28px;
}
.gg-sd__empty h2{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xl, 22px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 8px;
}
.gg-sd__empty p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-500, #6B7280);
	margin: 0 0 22px;
	max-width: 50ch; margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   LISTING CARDS — premium 2-per-row grid.

   Layout:
     - .gg-sd__rows is a 2-column grid (1-column under 720px).
     - Position 0 → .gg-sd__row--featured spans the full row with a richer
       horizontal hero layout. Every subsequent listing renders as a
       vertical premium card in the 2-up grid.

   Subtle per-card variation (no hover border-colour change, per brief):
     - Flag stripes on the top edge (amber / cyan / red) — only one fires.
     - Hover effect: gentle lift + softer shadow + image zoom.
     - Image scale and title colour change, but the border stays neutral.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-sd__rows{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 18px);
}
@media (max-width: 1400px){ .gg-sd__rows{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px){ .gg-sd__rows{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:  900px){ .gg-sd__rows{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:  560px){ .gg-sd__rows{ grid-template-columns: 1fr; } }

/* Base card */
.gg-sd__row{
	position: relative;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 280ms cubic-bezier(.16,1,.3,1),
	            box-shadow 280ms cubic-bezier(.16,1,.3,1);
	display: flex; flex-direction: column;
}
/* Top-edge accent stripe — fires only when the card data flags it. */
.gg-sd__row::before{
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 0;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transition: height 220ms cubic-bezier(.16,1,.3,1);
	z-index: 3;
}
.gg-sd__row.is-top::before  { height: 3px; background: linear-gradient(90deg, #F59E0B, #D97706); }
.gg-sd__row.is-new::before  { height: 3px; background: linear-gradient(90deg, #0EA5E9, #38BDF8); }
.gg-sd__row.is-fast::before { height: 3px; background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28)); }
/* Hover: lift + shadow, NO border-colour change. */
.gg-sd__row:hover{
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(15,23,42,.04),
	            0 22px 44px -22px rgba(15,23,42,.22);
}

/* ═══════════════════════════════════════════════════════════════════════
   Variant 1 — FEATURED (full-width hero, position 0).
   ═══════════════════════════════════════════════════════════════════════ */
.gg-sd__row--featured{
	grid-column: 1 / -1;
	flex-direction: row;
	border: 1.5px solid rgba(237,41,56,.22);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 24px 48px -24px rgba(237,41,56,.22);
}
.gg-sd__row--featured::after{
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), #F59E0B);
	z-index: 3;
}
.gg-sd__row--featured:hover{
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 30px 52px -22px rgba(237,41,56,.26);
}

@media (max-width: 820px){
	.gg-sd__row--featured{ flex-direction: column; }
}

/* Featured media — fills the left side */
.gg-sd__row--featured > .gg-sd__row-media{
	flex: 0 0 360px;
	min-height: 240px;
	max-height: none;
}
@media (max-width: 820px){
	.gg-sd__row--featured > .gg-sd__row-media{ flex-basis: auto; aspect-ratio: 16/9; min-height: 0; }
}

/* Featured body — generous padding */
.gg-sd__row--featured .gg-sd__row-body{
	padding: clamp(20px, 2.2vw, 28px);
	gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MEDIA — shared between featured + standard.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-sd__row-media{
	position: relative;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
	aspect-ratio: 16 / 10;
	display: block;
}
.gg-sd__row-media img{
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 800ms cubic-bezier(.16,1,.3,1), filter 320ms ease;
}
.gg-sd__row:hover .gg-sd__row-media img{
	transform: scale(1.06);
	filter: saturate(1.06);
}
.gg-sd__row-media-veil{
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%);
}

/* Top pick ribbon — featured only */
.gg-sd__row-pick{
	position: absolute; top: 14px; left: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, #F59E0B, #D97706);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	box-shadow: 0 8px 18px -8px rgba(245,158,11,.55);
	z-index: 3;
}
.gg-sd__row-pick i{ color: #fff; font-size: 11px; }

/* Floating badges on the media */
.gg-sd__row-badges{
	position: absolute; bottom: 12px; left: 12px;
	display: flex; flex-wrap: wrap; gap: 6px;
	max-width: calc(100% - 24px);
	z-index: 3;
}
.gg-sd__row-badges span{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.gg-sd__row-badges span i{ font-size: 10px; }
.gg-sd__row-badges .is-verified{ background: rgba(255,255,255,.94); color: #15803D; box-shadow: 0 4px 10px -4px rgba(15,23,42,.18); }
.gg-sd__row-badges .is-verified i{ color: #16A34A; }
.gg-sd__row-badges .is-top{      background: rgba(245,158,11,.94); color: #fff; box-shadow: 0 4px 10px -4px rgba(245,158,11,.4); }
.gg-sd__row-badges .is-fast{     background: rgba(237,41,56,.94);  color: #fff; box-shadow: 0 4px 10px -4px rgba(237,41,56,.4); }
.gg-sd__row-badges .is-new{      background: rgba(56,189,248,.94); color: #fff; box-shadow: 0 4px 10px -4px rgba(56,189,248,.4); }

/* ═══════════════════════════════════════════════════════════════════════
   BODY — shared structure, refined typography spacing.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-sd__row-body{
	display: flex; flex-direction: column;
	gap: 10px;
	padding: clamp(18px, 1.6vw, 22px);
	min-width: 0;
	flex: 1;
}

.gg-sd__row-head{
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 6px 10px;
}
.gg-sd__row-cat{
	display: inline-flex; align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	transition: background 200ms ease, color 200ms ease;
}
.gg-sd__row-cat:hover{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-sd__row-rating{
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--gg-font-head);
	font-size: 12px;
	color: var(--gg-gray-700, #374151);
}
.gg-sd__row-rating i{ color: #FBBF24; font-size: 12px; }
.gg-sd__row-rating strong{ font-weight: 800; letter-spacing: -.01em; color: var(--gg-black, #0A0A0A); }
.gg-sd__row-rating em{ font-style: normal; color: var(--gg-gray-500, #6B7280); font-size: 11px; }
.gg-sd__row-response, .gg-sd__row-fast{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-700, #374151);
}
.gg-sd__row-response i{ color: var(--gg-red-deep, #B91C28); font-size: 11px; }
.gg-sd__row-fast{ background: rgba(237,41,56,.08); border-color: rgba(237,41,56,.16); color: var(--gg-red-deep, #B91C28); }
.gg-sd__row-fast i{ color: var(--gg-red, #ED2938); font-size: 11px; }

.gg-sd__row-title{
	margin: 4px 0 0;
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-md, 16px), 1.2vw, var(--gg-text-lg, 18px));
	font-weight: 800;
	letter-spacing: -.018em;
	line-height: 1.3;
	color: var(--gg-black, #0A0A0A);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-sd__row--featured .gg-sd__row-title{
	font-size: clamp(var(--gg-text-xl, 22px), 1.8vw, var(--gg-text-2xl, 26px));
	letter-spacing: -.022em;
	-webkit-line-clamp: 3;
}
.gg-sd__row-title a{ color: inherit; transition: color 220ms ease; }
.gg-sd__row:hover .gg-sd__row-title a{ color: var(--gg-red-deep, #B91C28); }

.gg-sd__row-biz{
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--gg-font-body);
	font-size: 12px;
	color: var(--gg-gray-500, #6B7280);
}
.gg-sd__row-biz i{ color: var(--gg-red-deep, #B91C28); font-size: 12px; }
.gg-sd__row-biz a{
	font-family: var(--gg-font-head);
	font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}
.gg-sd__row-biz a:hover{ color: var(--gg-red-deep, #B91C28); border-bottom-color: currentColor; }
.gg-sd__row-biz-tick{ color: var(--gg-red, #ED2938) !important; margin-left: 2px; font-size: 13px !important; }

.gg-sd__row-subs{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-sd__row--featured .gg-sd__row-subs{ -webkit-line-clamp: 3; }

.gg-sd__row-meta{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.gg-sd__row-meta li{
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--gg-font-body);
	font-size: 12px; font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
}
.gg-sd__row-meta li i{ color: var(--gg-red-deep, #B91C28); font-size: 12px; }
.gg-sd__row-meta li.is-new{ color: #0369A1; }
.gg-sd__row-meta li.is-new i{ color: #0EA5E9; }

/* Tags — hidden on standard cards (kept for featured for the editorial feel). */
.gg-sd__row-tags{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 5px;
}
.gg-sd__row--standard .gg-sd__row-tags{ display: none; }
.gg-sd__row-tags li{
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	color: var(--gg-gray-700, #374151);
	padding: 3px 9px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 999px;
	letter-spacing: .04em; text-transform: uppercase;
}

/* Foot */
.gg-sd__row-foot{
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; flex-wrap: wrap;
}
.gg-sd__row-price{
	display: flex; align-items: baseline; gap: 4px;
	font-family: var(--gg-font-head);
	line-height: 1;
}
.gg-sd__row-price small{ font-size: 10px; color: var(--gg-gray-500, #6B7280); letter-spacing: .1em; text-transform: uppercase; }
.gg-sd__row-price strong{
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: -.02em;
}
.gg-sd__row--featured .gg-sd__row-price strong{ font-size: clamp(24px, 2vw, 28px); }
.gg-sd__row-price span{ font-family: var(--gg-font-body); font-size: 12px; color: var(--gg-gray-500, #6B7280); }

.gg-sd__row-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gg-sd__row-cta{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	transition: all 220ms ease;
	border: 1.5px solid transparent;
}
.gg-sd__row-cta i{ font-size: 12px; transition: transform 220ms ease; }
.gg-sd__row-cta--ghost{
	background: #fff;
	border-color: var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-800, #1F2937);
}
.gg-sd__row-cta--ghost:hover{ color: var(--gg-red-deep, #B91C28); border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); }
.gg-sd__row-cta--primary{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(237,41,56,.5);
}
.gg-sd__row-cta--primary:hover{ filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.gg-sd__row-cta--primary:hover i{ transform: translateX(2px); }

/* Standard cards drop the secondary ghost CTA — premium minimalism.
   Featured keeps both CTAs (View business + View listing). */
.gg-sd__row--standard .gg-sd__row-cta--ghost{ display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   STANDARD card refinements for 5-per-row.
   At ~280 px wide, the standard card has to stay lean. We tighten
   padding, shrink the title and drop the secondary content (subs / tags
   / extra meta) so only the essentials remain visible. The featured
   row keeps its premium spacing because it always spans the full row.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-sd__row--standard{ border-radius: 14px; }
.gg-sd__row--standard .gg-sd__row-body{
	padding: 12px 14px;
	gap: 7px;
}
.gg-sd__row--standard .gg-sd__row-head{ gap: 5px 8px; }
.gg-sd__row--standard .gg-sd__row-cat{ padding: 3px 8px; font-size: 9px; }
.gg-sd__row--standard .gg-sd__row-rating{ font-size: 11px; }
.gg-sd__row--standard .gg-sd__row-rating em{ display: none; }   /* drop "(284)" — keep just 4.9 */
.gg-sd__row--standard .gg-sd__row-response,
.gg-sd__row--standard .gg-sd__row-fast{ display: none; }
.gg-sd__row--standard .gg-sd__row-title{
	font-size: 13.5px;
	line-height: 1.3;
	margin-top: 2px;
}
.gg-sd__row--standard .gg-sd__row-biz{ font-size: 11px; }
.gg-sd__row--standard .gg-sd__row-biz a{ font-size: 11px; }
.gg-sd__row--standard .gg-sd__row-subs{ display: none; }        /* description hidden on standards */
.gg-sd__row--standard .gg-sd__row-meta{ gap: 4px 10px; }
.gg-sd__row--standard .gg-sd__row-meta li{ font-size: 11px; }
.gg-sd__row--standard .gg-sd__row-meta li:nth-child(n+2){ display: none; } /* keep just city */
.gg-sd__row--standard .gg-sd__row-foot{ padding-top: 8px; gap: 6px; }
.gg-sd__row--standard .gg-sd__row-price strong{ font-size: 17px; }
.gg-sd__row--standard .gg-sd__row-price small{ font-size: 8.5px; }
.gg-sd__row--standard .gg-sd__row-price span{ font-size: 10px; }
.gg-sd__row--standard .gg-sd__row-cta--primary{
	padding: 7px 12px;
	font-size: 10px;
}
/* Top pick ribbon shouldn't appear on standards (it's a featured-only chip). */
.gg-sd__row--standard .gg-sd__row-pick{ display: none; }

/* Once we're back at 2-up (≤900px) the card has more width — restore
   subs + extra meta + response chip so the layout fills the room. */
@media (max-width: 900px){
	.gg-sd__row--standard .gg-sd__row-subs{ display: -webkit-box; }
	.gg-sd__row--standard .gg-sd__row-meta li:nth-child(n+2){ display: inline-flex; }
	.gg-sd__row--standard .gg-sd__row-response{ display: inline-flex; }
	.gg-sd__row--standard .gg-sd__row-rating em{ display: inline; }
	.gg-sd__row--standard .gg-sd__row-title{ font-size: 15px; }
	.gg-sd__row--standard .gg-sd__row-body{ padding: 16px 18px; gap: 10px; }
	.gg-sd__row--standard .gg-sd__row-price strong{ font-size: 20px; }
}

/* Newly appended cards fade + rise in. */
.gg-sd__row.is-new-loaded{ animation: gg-sd-cardin .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes gg-sd-cardin{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Pagination + Load more ────────────────────────────────────────── */
.gg-sd__pager-meta{
	text-align: center;
	margin: 28px 0 12px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-sd__pager-meta strong{ color: var(--gg-gray-800, #1F2937); font-weight: 700; }
.gg-sd__pager{
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 8px;
	margin-bottom: 8px;
}
.gg-sd__pager-btn{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-sd__pager-btn:hover{ border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); color: var(--gg-red-deep, #B91C28); }
.gg-sd__pager-btn.is-disabled{ opacity: .4; pointer-events: none; }
.gg-sd__pager-pages{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 6px; }
.gg-sd__pager-page{
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px); font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-sd__pager-page:hover{ border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); color: var(--gg-red-deep, #B91C28); }
.gg-sd__pager-page.is-current{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent; color: #fff;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.5);
}
.gg-sd__pager-gap{
	display: grid; place-items: center;
	min-width: 28px; height: 40px;
	color: var(--gg-gray-400, #9CA3AF); font-weight: 700;
}
@media (max-width: 640px){ .gg-sd__pager-btn-label{ display: none; } }

.gg-sd__loadmore-wrap{ display: flex; justify-content: center; margin-top: clamp(14px, 2vw, 20px); }
.gg-sd__loadmore{
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	overflow: hidden;
	padding: 13px 28px;
	border-radius: 999px;
	border: 1.5px solid var(--gg-red, #ED2938);
	background: var(--gg-white, #fff);
	color: var(--gg-red, #ED2938);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px); font-weight: 700; letter-spacing: .02em;
	transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.gg-sd__loadmore-glow{
	position: absolute; top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	transition: left 600ms ease;
	pointer-events: none;
}
.gg-sd__loadmore:hover{
	background: var(--gg-red, #ED2938); color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px rgba(237,41,56,.55);
}
.gg-sd__loadmore:hover .gg-sd__loadmore-glow{ left: 100%; }
.gg-sd__loadmore[disabled]{ opacity: .65; pointer-events: none; }
.gg-sd__loadmore-spinner{
	display: none;
	width: 15px; height: 15px;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%;
	animation: gg-sd-spin .6s linear infinite;
}
.gg-sd__loadmore.is-loading{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-sd__loadmore.is-loading .gg-sd__loadmore-spinner{ display: inline-block; }
@keyframes gg-sd-spin{ to { transform: rotate(360deg); } }

/* Compat shim for any compact-variant markup (now unused). */
.gg-sd__row--compact{ display: none; }

/* ── Related services ────────────────────────────────────────────────── */
.gg-sd__related{ margin-top: clamp(32px, 4vw, 48px); }
.gg-sd__related-head{ margin-bottom: 18px; }
.gg-sd__related-title{
	margin: 6px 0 0;
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2vw, var(--gg-text-2xl, 28px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
}
.gg-sd__related-grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 1100px){ .gg-sd__related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px){  .gg-sd__related-grid{ grid-template-columns: 1fr; } }
.gg-sd__related-card{
	position: relative;
	display: flex; flex-direction: column; gap: 8px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	color: inherit;
	transition: transform 280ms cubic-bezier(.16,1,.3,1), border-color 280ms ease, box-shadow 280ms ease;
}
.gg-sd__related-card:hover{
	transform: translateY(-3px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 14px 28px -16px rgba(237,41,56,.2);
}
.gg-sd__related-ico{
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 16px;
	transition: all 280ms cubic-bezier(.22,1,.36,1);
}
.gg-sd__related-card:hover .gg-sd__related-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; transform: rotate(-4deg) scale(1.05);
}
.gg-sd__related-card strong{
	font-family: var(--gg-font-head);
	font-size: 14px; font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
}
.gg-sd__related-card small{
	font-family: var(--gg-font-body);
	font-size: 12px;
	color: var(--gg-gray-500, #6B7280);
}
.gg-sd__related-cta{
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-700, #374151);
	transition: color 220ms ease;
}
.gg-sd__related-card:hover .gg-sd__related-cta{ color: var(--gg-red-deep, #B91C28); }

/* ── Bottom CTA ──────────────────────────────────────────────────────── */
.gg-sd__cta{
	position: relative;
	overflow: hidden;
	margin-top: clamp(36px, 5vw, 64px);
	border-radius: var(--gg-r-xl, 16px);
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
}
.gg-sd__cta-glow{
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 300px at 12% 120%, rgba(237,41,56,.4), transparent 70%),
		radial-gradient(500px 260px at 95% -20%, rgba(237,41,56,.28), transparent 70%);
	pointer-events: none;
}
.gg-sd__cta-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px);
}
.gg-sd__cta-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 3vw, var(--gg-text-3xl, 36px));
	font-weight: 800; letter-spacing: -.02em;
	color: #fff; margin: 0 0 8px; line-height: 1.15;
}
.gg-sd__cta-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: rgba(255,255,255,.72);
	margin: 0; max-width: 520px;
}
.gg-sd__cta-actions{ flex-shrink: 0; }
@media (max-width: 640px){
	.gg-sd__cta-actions{ width: 100%; }
	.gg-sd__cta-actions .gg-sd__btn{ width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.gg-sd__row, .gg-sd__row-media img, .gg-sd__rowc-media img,
	.gg-sd__related-card, .gg-sd__related-ico{ transition: none !important; animation: none !important; }
}