/*
 * Tour Guide Tanger. One stylesheet, no framework, no webfonts.
 *
 * Fonts are Georgia for headings and Trebuchet MS for everything else: both ship with every
 * OS the site's visitors use, so there is nothing to download and nothing to shift.
 *
 * Colour is declared once here, at the top. The old rule about hardcoding colours per section
 * existed because Elementor imports broke variables; nothing imports sections any more, so one
 * set of tokens is safe and keeps the site consistent.
 */

:root {
	/* Measured from the live site, see docs/design-tokens.md */
	--navy: #0e1620;
	--navy-panel: #101b28;
	--cream: #f8f5ee;
	--gold: #c8a44a;
	--gold-light: #e0c475;
	--gold-dark: #a8862e;
	--gold-gradient: linear-gradient(135deg, #e0c475 0%, #c8a44a 60%);
	--teal: #1a6e8a;
	--teal-dark: #145670;
	--ink: #1b1b1b;
	--ink-soft: #3a3a3a;
	--muted-warm: #6b6257;
	--muted: #6b6b6b;
	--line: #e6e0d5;
	--white: #fff;
	--on-dark: rgba(248, 245, 238, .85);
	--on-dark-strong: rgba(248, 245, 238, .88);
	--on-dark-soft: rgba(248, 245, 238, .72);
	--whatsapp: #25d366;
	--whatsapp-dark: #1da851;

	--wrap: 1140px;
	--gutter: 20px;
	--gap: 24px;
	--header-h: 76px;
	--radius: 7px;
	--radius-lg: 10px;
	--shadow: 0 6px 24px rgba(15, 28, 38, .08);
	--shadow-lg: 0 14px 40px rgba(15, 28, 38, .14);
	--shadow-gold: 0 4px 16px rgba(200, 164, 74, .35);

	--font-head: Georgia, "Times New Roman", serif;
	--font-body: "Trebuchet MS", Tahoma, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 .5em;
	font-weight: 700;
}

h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.375rem); line-height: 1.1; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2rem); line-height: 1.2; }
h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.3; }

/* The gold line that sits above most H1s and H2s on this site. */
.tgt-eyebrow {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 16px;
}

p { margin: 0 0 1.1em; }

/* Components style their own links; only running text gets the underline. */
a { color: inherit; text-decoration: none; }
.tgt-prose a, .tgt-faq__item p a {
	color: var(--teal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.tgt-prose a:hover { color: var(--teal-dark); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.tgt-skip {
	position: absolute;
	left: -9999px;
	background: var(--ink);
	color: var(--white);
	padding: 12px 18px;
	z-index: 100;
}
.tgt-skip:focus { left: 12px; top: 12px; }

.tgt-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tgt-section { padding-block: clamp(32px, 4vw, 40px); }
.tgt-section--lg { padding-block: clamp(44px, 6vw, 80px); }
.tgt-section--cream { background: var(--cream); }

/* ---------------------------------------------------------------- buttons */

.tgt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tgt-btn:hover { transform: translateY(-1px); }
.tgt-btn--sm { padding: 10px 18px; font-size: 15px; }

.tgt-btn--gold { background: var(--gold); color: var(--ink); }
.tgt-btn--gold:hover { background: var(--gold-light); color: var(--ink); }

/* The pill in the header: gradient, rounded, small uppercase Trebuchet */
.tgt-btn--pill {
	font-family: var(--font-body);
	font-size: 11.84px;
	letter-spacing: 1.42px;
	padding: 9.5px 17.8px;
	border-radius: 999px;
	border: 1px solid var(--gold-light);
	background: var(--gold-gradient);
	color: var(--navy);
	box-shadow: var(--shadow-gold);
}
.tgt-btn--pill:hover { color: var(--navy); filter: brightness(1.06); }

.tgt-btn--teal { background: var(--teal); color: var(--white); }
.tgt-btn--teal:hover { background: var(--teal-dark); color: var(--white); }

.tgt-btn--ghost { border-color: currentColor; color: var(--white); background: transparent; }
.tgt-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: var(--white); }

.tgt-btn--whatsapp { background: var(--whatsapp); color: var(--white); }
.tgt-btn--whatsapp:hover { background: var(--whatsapp-dark); color: var(--white); }

/* ---------------------------------------------------------------- header
 * Moved to assets/css/header-footer.css (redesign, 2026-09-26).
 */

a:focus-visible,button:focus-visible{outline:2px solid #E0C475;outline-offset:3px}


/* ---------------------------------------------------------------- hero
 * Values measured from the live homepage hero: the navy gradient, the gold diamond
 * pattern, the radial glow, and the type scale of each line.
 */

.tgt-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--navy);
	background-image:
		radial-gradient(58% 42% at 50% 36%, rgba(200, 164, 74, .16), rgba(0, 0, 0, 0) 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C8A44A' stroke-opacity='.15'%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Cpath d='M48 8l6 6-6 6-6-6zM48 76l6 6-6 6-6-6zM8 42l6 6-6 6-6-6zM76 42l6 6-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(#12202e 0%, #0e1620 55%, #0a1119 100%);
	background-size: auto, 96px 96px, auto;
}

.tgt-hero--home { min-height: 92svh; }
.tgt-hero--page { min-height: var(--tgt-hero-height, 52svh); }
/* A hero whose live padding and type were measured sizes itself from those. */
.tgt-hero--measured { min-height: 0; padding-block: var(--tgt-sec-pad, 120px); background-color: var(--tgt-sec-bg, var(--navy)); }
.tgt-hero--measured .tgt-hero-h1 {
	font-size: var(--tgt-t-size, clamp(2rem, 4vw, 3.2rem));
	font-family: var(--tgt-t-font, var(--font-head));
	line-height: var(--tgt-t-line, 1.12);
	color: var(--tgt-t-color, var(--white));
}
.tgt-hero--measured .tgt-eyebrow {
	font-size: var(--tgt-k-size, 13px);
	letter-spacing: var(--tgt-k-track, 3px);
	color: var(--tgt-k-color, var(--gold-light));
}

/* Tour pages set their H1 in Georgia; only the homepage uses the Roboto kit heading. */
.tgt-hero--page .tgt-hero-h1 {
	font-family: var(--font-head);
	font-size: clamp(2rem, 1.15rem + 2.6vw, 3.375rem);
	font-weight: 700;
	line-height: 1.1;
}

/* Tour heroes are left aligned and as wide as the container; the homepage one is centred. */
.tgt-hero--left { text-align: left; }
.tgt-hero--left .tgt-hero-inner { text-align: left; }
.tgt-hero--left .tgt-hero-sub { margin-inline: 0; max-width: 78ch; }
.tgt-hero--left .tgt-hero-cta { justify-content: flex-start; }
.tgt-hero--left .tgt-trust-link { justify-content: flex-start; }

/* A photo hero keeps the same dark wash over the image. */
.tgt-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tgt-hero-image);
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.tgt-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(14, 22, 32, .82) 0%, rgba(14, 22, 32, .3) 44%, rgba(14, 22, 32, .85) 100%);
}

.tgt-hero-inner {
	position: relative;
	z-index: 2;
	width: min(92%, var(--tgt-hero-inner, 860px));
	text-align: center;
	padding-block: 90px;
}

.tgt-eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: clamp(.72rem, .55rem + .5vw, .82rem);
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold-light);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.tgt-hero-h1 {
	margin: 0 0 22px;
	font-family: Roboto, var(--font-body);
	font-size: clamp(2.1rem, 1.1rem + 4.8vw, 3.125rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--cream);
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.tgt-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.tgt-orn-line { display: block; width: min(72px, 16vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.tgt-orn-line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.tgt-orn-diamond { display: block; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(200, 164, 74, .22); }

.tgt-hero-sub {
	margin: 0 auto 24px;
	max-width: 620px;   /* 58ch at the subtitle's own size, measured on the live page */
}
.tgt-hero-sub p {
	margin: 0;
	font-family: "Open Sans", var(--font-body);
	font-size: clamp(1rem, .92rem + .45vw, 1.17rem);
	line-height: 1.65;
	color: rgba(248, 245, 238, .88);
}

.tgt-trust-link {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 34px;
	font-family: var(--font-body);
	font-size: .9rem;
	color: rgba(248, 245, 238, .82);
	text-decoration: none;
	transition: color .25s ease;
}
.tgt-trust-link .tgt-trust-text { border-bottom: 1px dotted rgba(224, 196, 117, .55); padding-bottom: 2px; }
.tgt-trust-link:hover { color: var(--gold-light); }
.tgt-trust-link:hover .tgt-trust-text { border-bottom-color: var(--gold-light); }
.tgt-stars { color: var(--gold-light); letter-spacing: .18em; font-size: .95rem; text-shadow: 0 0 12px rgba(224, 196, 117, .45); }

.tgt-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.tgt-btn-gold, .tgt-btn-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 40px;
	border-radius: 50px;
	font-family: Inter, var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.tgt-btn-gold {
	background: var(--gold-gradient);
	color: var(--navy);
	border: 1px solid var(--gold-light);
	box-shadow: 0 6px 22px rgba(200, 164, 74, .35);
}
.tgt-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200, 164, 74, .5); color: var(--navy); }
.tgt-btn-line {
	background: rgba(14, 22, 32, .25);
	color: var(--cream);
	border: 1px solid rgba(248, 245, 238, .5);
}
.tgt-btn-line:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }

@media (max-width: 767px) {
	.tgt-hero--home { min-height: 86svh; }
	.tgt-hero-inner { padding-block: 64px; }
	.tgt-btn-gold, .tgt-btn-line { width: 100%; }
}

/* ---------------------------------------------------------------- carousels
 * Card styles lifted from the live homepage widgets
 * (design/extracted/home-private-tours-carousel.html and -shore-excursions-carousel.html).
 * The slider itself is CSS scroll-snap instead of Swiper from a CDN.
 */

.ptc-wrap{font-family:var(--font-body);max-width:1240px;margin:0 auto;padding:0;}
.ptc-wrap *{box-sizing:border-box;}
.ptc-swiper{overflow:hidden;padding:0;}
.ptc-card{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E5E1D8;
  border-top:3px solid #C8A44A;border-radius:6px;overflow:hidden;height:auto;text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.ptc-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(14,22,32,.25);}
.ptc-img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#0E1620;}
.ptc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(14,22,32,.45) 100%);}
.ptc-price{position:absolute;bottom:12px;right:12px;z-index:2;background:rgba(255,255,255,.96);
  color:#1B1B1B;font-family:Georgia,serif;font-weight:700;font-size:17px;padding:7px 11px;border-radius:4px;line-height:1;}
.ptc-price small{font-family:'Trebuchet MS',sans-serif;font-weight:400;font-size:9px;color:#6b6b6b;margin-left:2px;}
.ptc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.ptc-meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#6b6b6b;margin-bottom:10px;}
.ptc-name{font-family:Poppins,'Trebuchet MS',sans-serif;font-weight:600;font-size:19px;line-height:1.3;color:#000;margin:0 0 8px;}
.ptc-tag{font-size:14px;line-height:1.55;color:#3a3a3a;margin:0 0 18px;flex:1;}
.ptc-cta{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;color:#A8862E;transition:gap .3s ease;}
.ptc-card:hover .ptc-cta{gap:13px;}
.ptc-arr{font-size:17px;line-height:1;}
.ptc-ctrls{display:flex;align-items:center;gap:18px;margin-top:28px;position:relative;min-height:46px;padding-left:98px;}
.ptc-btn{width:80px;height:46px;border-radius:50px;border:0;background:#eed36a;color:#1b1b1b;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;}
.ptc-btn:hover{filter:brightness(1.06);}
.ptc-btn:disabled,.sec-btn:disabled{opacity:.35;cursor:default;}
.ptc-prev,.sec-prev{position:absolute;left:0;}
.ptc-next,.sec-next{position:absolute;right:0;}
.ptc-dots{display:flex;gap:8px;align-items:center;}
.ptc-dots button{width:8px;height:8px;background:#D4CFC2;opacity:1;border-radius:50%;transition:all .2s;}
.ptc-dots button-active{background:#C8A44A;width:22px;border-radius:4px;}
.ptc-track.ptc-nofx{display:flex;flex-wrap:wrap;gap:20px;}
.ptc-track.ptc-nofx .ptc-card{width:calc(33.333% - 14px);}
@media(max-width:1024px){.ptc-track.ptc-nofx .ptc-card{width:calc(50% - 10px);}}
@media(max-width:767px){.ptc-track.ptc-nofx .ptc-card{width:100%;}}

.sec-wrap{font-family:var(--font-body);max-width:1240px;margin:0 auto;padding:0;}
.sec-wrap *{box-sizing:border-box;}
.sec-swiper{overflow:hidden;padding:0;}
.sec-card{position:relative;display:block;border-radius:8px;overflow:hidden;text-decoration:none;
  min-height:440px;background:#0E1620;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease;}
.sec-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -18px rgba(0,0,0,.6);}
.sec-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.2s ease;}
.sec-card:hover .sec-img{transform:scale(1.07);}
.sec-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,22,32,.15) 0%,rgba(14,22,32,.30) 45%,rgba(14,22,32,.92) 100%);}
.sec-tier{position:absolute;top:0;left:0;z-index:3;font-family:Georgia,serif;font-size:11px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 15px;}
.sec-price{position:absolute;top:14px;right:14px;z-index:3;background:rgba(255,255,255,.96);
  color:#1B1B1B;font-family:Georgia,serif;font-size:14px;padding:7px 11px;border-radius:4px;line-height:1;}
.sec-price b{font-size:17px;}
.sec-price small{font-family:'Trebuchet MS',sans-serif;font-weight:400;font-size:9px;color:#6b6b6b;margin-left:2px;}
.sec-overlay{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 26px 28px;}
.sec-meta{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#6FA8B8 !important;font-weight:700;margin-bottom:10px;}
.sec-overlay .sec-name,.sec-name{font-family:Georgia,serif !important;font-weight:700 !important;font-size:25px !important;line-height:1.2 !important;color:#ffffff !important;margin:0 0 10px !important;text-shadow:0 1px 14px rgba(0,0,0,.55);}
.sec-tag{font-size:14px;line-height:1.55;color:#d7dde3 !important;margin:0 0 16px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .45s ease,margin .45s ease;}
.sec-card:hover .sec-tag{max-height:120px;opacity:1;margin:0 0 16px;}
.sec-cta{display:inline-flex;align-items:center;gap:8px;font-family:Georgia,serif;font-weight:700;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff !important;transition:gap .3s ease;}
.sec-card:hover .sec-cta{gap:13px;color:#6FA8B8;}
.sec-arr{font-size:16px;line-height:1;}
/* On touch devices, reveal the tagline by default (no hover) */
@media (hover:none){
  .sec-tag{max-height:120px;opacity:1;margin:0 0 16px;}
}
.sec-ctrls{display:flex;align-items:center;gap:18px;margin-top:30px;position:relative;min-height:46px;padding-left:98px;}
.sec-btn{width:80px;height:46px;border-radius:50px;border:0;background:#eed36a;
  color:#6FA8B8;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;}
.sec-btn{color:#1b1b1b;}
.sec-btn:hover{filter:brightness(1.06);}
.sec-dots{display:flex;gap:8px;align-items:center;}
.sec-dots button{width:8px;height:8px;background:#2a3a44;opacity:1;border-radius:50%;transition:all .2s;}
.sec-dots button-active{background:#6FA8B8;width:22px;border-radius:4px;}
.sec-track.sec-nofx{display:flex;flex-wrap:wrap;gap:24px;}
.sec-track.sec-nofx .sec-card{width:calc(33.333% - 16px);}
@media(max-width:1024px){.sec-track.sec-nofx .sec-card{width:calc(50% - 12px);}}
@media(max-width:767px){.sec-track.sec-nofx .sec-card{width:100%;} .sec-card{min-height:380px;}}

/* The track scrolls and snaps, which is what Swiper was doing on the live site.
   Three cards at desktop, two at tablet, one on a phone. */
.ptc-track, .sec-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 32px) / 3);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.sec-track { grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }

/* The shore excursions carousel is wider than the text column, as on the live page. */
.tgt-wrap--wide { max-width: 1240px; }
.ptc-track::-webkit-scrollbar, .sec-track::-webkit-scrollbar { display: none; }
.ptc-card, .sec-card { scroll-snap-align: start; }
.ptc-dots button, .sec-dots button { border: 0; padding: 0; cursor: pointer; }

@media (max-width: 1024px) {
	.ptc-track { grid-auto-columns: calc((100% - 20px) / 2); }
	.sec-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
	.ptc-track, .sec-track { grid-auto-columns: 86%; }
}


/* ---------------------------------------------------------------- reviews
 * From the live reviews widget (design/extracted/home-reviews.html), unchanged.
 */

.tgt-reviews{
  --tgt-navy:#0E1620; --tgt-gold:#C8A44A; --tgt-cream:#F8F5EE;
  --tgt-card:#FFFFFF; --tgt-line:#E7E0D1; --tgt-muted:#6E675B; --tgt-gap:22px;
  box-sizing:border-box;
  font-family:"Trebuchet MS",-apple-system,"Segoe UI",sans-serif;
  color:var(--tgt-navy); background:var(--tgt-cream);
  margin:0; padding:clamp(40px,6vw,72px) clamp(16px,4vw,28px);
}
.tgt-reviews *{box-sizing:border-box}
.tgt-reviews__head{max-width:1160px;margin:0 auto clamp(26px,4vw,40px);text-align:center}
.tgt-reviews__eyebrow{display:inline-block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tgt-gold);font-weight:700;margin:0 0 12px}
.tgt-reviews__title{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.15;margin:0 0 18px}
.tgt-reviews__badge{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;color:var(--tgt-navy);background:#fff;border:1px solid var(--tgt-line);border-radius:999px;padding:10px 20px;font-size:1rem;transition:border-color .18s ease,transform .18s ease}
.tgt-reviews__badge:hover,.tgt-reviews__badge:focus-visible{border-color:var(--tgt-gold);transform:translateY(-1px)}
.tgt-reviews__g{flex:0 0 auto;display:block}
.tgt-reviews__rating{font-weight:700;font-size:1.08rem}
.tgt-reviews__sep{color:var(--tgt-muted)}
.tgt-reviews__count{color:var(--tgt-navy)}
.tgt-reviews__arrow{color:var(--tgt-gold);font-weight:700;margin-left:2px}
.tgt-slider{max-width:1160px;margin:0 auto}
.tgt-slider__track{display:flex;gap:var(--tgt-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px}
.tgt-slider__track::-webkit-scrollbar{display:none}
.tgt-review{scroll-snap-align:start;flex:0 0 calc((100% - (2 * var(--tgt-gap))) / 3);background:var(--tgt-card);border:1px solid var(--tgt-line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(14,22,32,.04)}
.tgt-review__stars{color:var(--tgt-gold);letter-spacing:2px;font-size:1.05rem;line-height:1}
.tgt-review__text{margin:0;font-size:1rem;line-height:1.62}
.tgt-review__by{margin:auto 0 0;font-size:.88rem;color:var(--tgt-muted)}
.tgt-review__by strong{color:var(--tgt-navy)}
@media (max-width:1023px){.tgt-review{flex-basis:calc((100% - var(--tgt-gap)) / 2)}}
@media (max-width:599px){.tgt-review{flex-basis:85%}}
@media (max-width:380px){.tgt-reviews__badge{font-size:.9rem;gap:7px;padding:9px 16px}.tgt-reviews__rating{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.tgt-reviews__badge{transition:none}.tgt-slider__track{scroll-behavior:auto}}

/* ---------------------------------------------------------------- page heads */

.tgt-page__head, .tgt-archive__head {
	background: var(--cream);
	padding-block: clamp(28px, 4vw, 52px);
	border-bottom: 1px solid var(--line);
}
.tgt-page__standfirst, .tgt-archive__standfirst {
	font-size: 1.15rem;
	color: var(--ink-soft);
	max-width: 62ch;
	margin-bottom: .4em;
}
.tgt-archive__trust { font-size: .95rem; color: var(--ink-soft); margin: 0; }

.tgt-crumbs { margin-bottom: 14px; font-size: .88rem; color: var(--ink-soft); }
.tgt-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.tgt-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.tgt-crumbs a { color: var(--ink-soft); text-decoration: none; }
.tgt-crumbs a:hover { color: var(--teal); text-decoration: underline; }
/* Phones (Fadi 2026-09-28): the trail stays on one line. Home keeps its width; the other crumbs shorten
   with an ellipsis, in proportion to their length (the current page, which the title below repeats,
   gives up the most). The links and the BreadcrumbList data keep the full names. */
@media (max-width: 759px) {
	.tgt-crumbs ol { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
	/* A short crumb ("Blog") keeps its word: nothing shrinks below 3.1em (a short word's own width); the current page shrinks three times as fast. */
	.tgt-crumbs li { display: flex; flex: 0 1 auto; min-width: 3.1em; white-space: nowrap; }
	.tgt-crumbs li:first-child { flex: none; min-width: 0; }
	.tgt-crumbs li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tgt-crumbs li[aria-current="page"] { display: block; flex-shrink: 3; overflow: hidden; text-overflow: ellipsis; }
}

.tgt-page__media { margin-block: clamp(20px, 3vw, 36px); }
.tgt-page__media img { width: 100%; border-radius: var(--radius); }

/* ---------------------------------------------------------------- prose */

.tgt-prose { max-width: 74ch; padding-block: clamp(24px, 3.5vw, 44px); }
.tgt-prose > :first-child { margin-top: 0; }
.tgt-prose h2 { margin-top: 1.6em; }
.tgt-prose h3 { margin-top: 1.4em; }
.tgt-prose ul, .tgt-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.tgt-prose li { margin-bottom: .45em; }
.tgt-prose img { border-radius: var(--radius); margin-block: 1.5em; }
.tgt-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--gold);
	color: var(--ink-soft);
	font-size: 1.05rem;
}
.tgt-prose table { width: 100%; border-collapse: collapse; margin-block: 1.5em; }
.tgt-prose th, .tgt-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.tgt-prose th { background: var(--cream); }

/* ---------------------------------------------------------------- cards */

.tgt-cards {
	list-style: none;
	margin: clamp(24px, 4vw, 44px) 0;
	padding: 0;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.tgt-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.tgt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tgt-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.tgt-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--cream); }
.tgt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tgt-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--cream), #ece5d8); }
.tgt-card__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(15, 28, 38, .82);
	color: var(--white);
	font-size: .78rem;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
}

.tgt-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tgt-card__title { margin-bottom: .35em; }
.tgt-card__text { color: var(--ink-soft); font-size: .97rem; margin-bottom: 1em; }
.tgt-card__meta {
	margin: auto 0 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.tgt-card__price { font-weight: 700; color: var(--teal); }
.tgt-card__more { color: var(--gold-dark); font-weight: 700; font-size: .92rem; }
.tgt-card:hover .tgt-card__more { text-decoration: underline; }

/* ---------------------------------------------------------------- tour page */

.tgt-tour__hero { position: relative; background: var(--navy); color: var(--white); }
.tgt-tour__hero-media { position: absolute; inset: 0; opacity: .34; }
.tgt-tour__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tgt-tour__hero-body { position: relative; padding-block: clamp(40px, 6vw, 84px); }
.tgt-tour__hero-body h1 { color: var(--white); max-width: 20ch; }
.tgt-tour__summary { font-size: 1.15rem; max-width: 60ch; color: rgba(255, 255, 255, .9); }
.tgt-tour__hero .tgt-crumbs, .tgt-tour__hero .tgt-crumbs a { color: rgba(255, 255, 255, .75); }

.tgt-facts {
	list-style: none;
	margin: 26px 0;
	padding: 0;
	display: grid;
	gap: 14px 30px;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	max-width: 760px;
}
.tgt-facts li { display: flex; flex-direction: column; gap: 2px; }
.tgt-facts span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.tgt-facts strong { font-size: 1.02rem; }

.tgt-tour__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.tgt-tour__trust { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }

.tgt-promise {
	margin: 24px 0 0;
	padding: 16px 20px;
	background: var(--cream);
	border-left: 4px solid var(--teal);
	border-radius: 0 10px 10px 0;
	font-weight: 700;
}

.tgt-ticks, .tgt-crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tgt-ticks li, .tgt-crosses li { padding-left: 30px; position: relative; }
.tgt-ticks li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .5em;
	width: 14px;
	height: 7px;
	border-left: 2.5px solid var(--teal);
	border-bottom: 2.5px solid var(--teal);
	transform: rotate(-45deg);
}
.tgt-crosses li::before { content: "x"; position: absolute; left: 6px; color: var(--ink-soft); font-weight: 700; }

.tgt-included { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.tgt-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tgt-timeline li {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
}
.tgt-timeline li:last-child { border-bottom: 1px solid var(--line); }
.tgt-timeline__time { font-weight: 700; color: var(--teal); }
.tgt-timeline h3 { margin-bottom: .2em; }
.tgt-timeline p { margin: 0; color: var(--ink-soft); }

@media (max-width: 600px) {
	.tgt-timeline li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------------------------------------------------------- faq */

.tgt-faq__list { display: grid; gap: 10px; max-width: 80ch; margin-inline: auto; }
.tgt-faq__item { border: 1px solid #d5d8dc; border-radius: 0; background: transparent; }
.tgt-faq__item summary {
	cursor: pointer;
	padding: 14px 16px;
	font-family: Poppins, var(--font-body);
	font-size: 17px;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 48px;
}
.tgt-faq__item summary::-webkit-details-marker { display: none; }
.tgt-faq__item summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 22px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.tgt-faq__item[open] summary::after { transform: rotate(-135deg); top: 26px; }
.tgt-faq__item p {
	padding: 0 16px 16px;
	margin: 0;
	font-family: "Open Sans", var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.tgt-faq__list { gap: 0; }
.tgt-faq__item + .tgt-faq__item { border-top: 0; }

/* ---------------------------------------------------------------- forms */

.tgt-form {
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(20px, 3vw, 34px);
	max-width: 720px;
}
.tgt-form__title { margin-top: 0; }
.tgt-form__intro { color: var(--ink-soft); }
.tgt-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.tgt-form__row label { font-weight: 700; font-size: .95rem; }
.tgt-form__row span { color: #b3261e; }
.tgt-form input, .tgt-form select, .tgt-form textarea {
	font-family: var(--font-body);
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	width: 100%;
}
.tgt-form input:focus, .tgt-form select:focus, .tgt-form textarea:focus {
	border-color: var(--teal);
	outline: 2px solid rgba(26, 110, 138, .25);
	outline-offset: 0;
}
.tgt-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tgt-form__actions { margin: 22px 0 10px; }
.tgt-form__actions .tgt-btn { width: 100%; }
.tgt-form__promise { font-size: .9rem; color: var(--ink-soft); margin: 0; text-align: center; }
.tgt-form__errors {
	background: #fdeceb;
	border: 1px solid #f3c2bd;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 18px;
}
.tgt-form__errors p { margin: 0 0 4px; color: #8c1d18; font-size: .95rem; }
.tgt-form__errors p:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
	.tgt-form__actions .tgt-btn { width: auto; min-width: 260px; }
}

/* ---------------------------------------------------------------- section bands
 * Measured from the live homepage: 42px Georgia headings, 11px gold eyebrows at 3px
 * tracking, 17px intros, and the white / navy / cream alternation.
 */

.tgt-band { padding-block: clamp(44px, 5vw, 70px); }
.tgt-band--white { background: var(--white); }
.tgt-band--cream { background: var(--cream); }
.tgt-band--navy { background: var(--navy); }

.tgt-sechead { margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.tgt-sechead__intro { max-width: 900px; margin-inline: auto; }
.tgt-sechead__eyebrow {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.tgt-sechead__title {
	margin: 0 0 14px;
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 1.1rem + 2vw, 2.625rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
}
.tgt-sechead__intro {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--muted);
}
.tgt-sechead--dark .tgt-sechead__eyebrow { color: #6fa8b8; }
.tgt-sechead--dark .tgt-sechead__title { color: var(--white); }
.tgt-sechead--dark .tgt-sechead__intro { color: #aeb8c2; }

.tgt-band__more { margin: 26px 0 0; text-align: center; }
.tgt-textlink {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--gold-dark);
	text-decoration: none;
}
.tgt-textlink:hover { text-decoration: underline; }
.tgt-textlink--light { color: #6fa8b8; }

/* ---------------------------------------------------------------- beyond the tour
 * Dark cards with a coloured rule and a solid button, as on the live page.
 */

.tgt-xp { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.tgt-xp__card {
	position: relative;
	z-index: 0;
	background-color: var(--navy);
	background-image: var(--tgt-xp-image);
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	padding: 40px 38px 38px;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;   /* live centres the copy in the card, it does not sit at the top */
	overflow: hidden;
}
/* The photo needs a wash under the copy, or the text is unreadable on a bright picture. */
.tgt-xp__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(14, 22, 32, .78) 0%, rgba(14, 22, 32, .55) 45%, rgba(14, 22, 32, .82) 100%);
}
.tgt-xp__card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; z-index: 1; }
.tgt-xp__card--terracotta::before { background: #c66a45; }
.tgt-xp__card--olive::before { background: #7a8b5a; }

.tgt-xp__meta {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #e8a98a;
}
.tgt-xp__card--olive .tgt-xp__meta { color: #a8bf8a; }
.tgt-xp__title { margin: 0 0 14px; font-family: var(--font-head); font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--white); }
.tgt-xp__text { margin: 0 0 40px; font-size: 15px; line-height: 1.7; color: #e6e8ea; max-width: 46ch; }
.tgt-xp__btn {
	align-self: flex-start;
	padding: 15px 30px;
	border-radius: 3px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--white);
	transition: filter .2s ease, transform .2s ease;
}
.tgt-xp__card--terracotta .tgt-xp__btn { background: #c66a45; }
.tgt-xp__card--olive .tgt-xp__btn { background: #7a8b5a; }
.tgt-xp__btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--white); }

/* ---------------------------------------------------------------- why book with us */

.tgt-why { display: grid; grid-template-columns: repeat(var(--tgt-why-cols, auto-fit), minmax(0, 1fr)); gap: 0; text-align: center; }
/* A page that carries its own reasons draws them as cards, as the live blocks do. */
.tgt-whyband .tgt-why { gap: 18px; }
.tgt-whyband .tgt-why__item { border: 1px solid var(--line); border-radius: 10px; padding: 26px 22px; }
.tgt-why__item { padding: 15px 10px; border-right: 1px solid var(--line); }
.tgt-icon { width: 70px; height: 70px; margin: 0 auto 14px; display: block; }
.tgt-why__title { margin: 0 0 8px; font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); }
.tgt-why__text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

@media (max-width: 900px) {
	.tgt-why__item { border-right: 0; border-bottom: 1px solid var(--line); }
	.tgt-why__item:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------- closing call to action */

.tgt-cta { background: var(--gold); padding-block: clamp(44px, 5vw, 64px); text-align: center; }
.tgt-cta__eyebrow {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--navy);
}
.tgt-cta__title {
	margin: 0 0 14px;
	font-family: var(--font-head);
	font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
}
.tgt-cta__intro { max-width: 62ch; margin: 0 auto 26px; font-size: 18px; line-height: 1.6; color: #3a2f12; }
.tgt-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 18px; }
.tgt-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 18px 40px;
	border-radius: 3px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--white);
	text-decoration: none;
	transition: transform .2s ease, filter .2s ease;
}
.tgt-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.07); color: var(--white); }
.tgt-cta__btn svg { width: 17px; height: 17px; fill: currentColor; }
.tgt-cta__btn--whatsapp { background: var(--whatsapp); }
.tgt-cta__btn--navy { background: var(--navy); }
.tgt-cta__micro { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #5a4a1e; }

/* ---------------------------------------------------------------- tour sections
 * Measured from /tangier-shore-excursions/tangier-highlights-shore-excursions/ on the
 * reference: trust bar, snapshot, stops, itinerary, included, gallery, pills.
 */

.tgt-band--tight { padding-block: 32px; }

.tgt-hero-micro {
	margin: 18px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(248, 245, 238, .72);
}

/* trust bar */
.tgt-trustbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; }
.tgt-trustbar__item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tgt-trustbar__title { margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); }
.tgt-trustbar__text { margin: 0; font-size: 13px; color: var(--muted-warm); }
.tgt-trustbar .tgt-icon { width: 34px; height: 34px; margin: 0; color: var(--gold); }

/* snapshot */
.tgt-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 24px; }
.tgt-snapshot__item { display: flex; align-items: flex-start; gap: 14px; }
.tgt-snapshot__label { margin: 0 0 2px; font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--ink); }
.tgt-snapshot__value { margin: 0; font-size: 14px; color: var(--ink-soft); }
.tgt-snapshot .tgt-icon { width: 26px; height: 26px; margin: 2px 0 0; flex: none; color: var(--teal); }

/* stops: white cards, three across then the remainder centred, as the live page lays them out */
.tgt-stops {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 62px;
}
.tgt-stop {
	flex: 0 1 323px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 14px 24px;
	box-shadow: 0 2px 10px rgba(15, 28, 38, .04);
}
.tgt-stop__media { margin-bottom: 18px; border-radius: 6px; overflow: hidden; aspect-ratio: 512 / 250; background: var(--cream); }
.tgt-stop__media img { width: 100%; height: 100%; object-fit: cover; }
.tgt-stop__title { margin: 0 8px 6px; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.tgt-stop__note { margin: 0 8px 14px; font-size: 13px; color: var(--gold-dark); }
.tgt-stop__text { margin: 0 8px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* the small facts inside a prose band: plain, centred, no box */
.tgt-pills {
	display: grid;
	grid-template-columns: repeat(var(--tgt-pill-cols, 3), 1fr);
	justify-content: center;
	gap: 18px 40px;
	margin: 26px auto 30px;
	padding: 22px 28px;
	max-width: var(--tgt-p-width, 100%);
	background: rgba(200, 164, 74, .07);
	border-radius: 12px;
}
.tgt-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 190px; text-align: center; }
.tgt-pill__icon { display: block; margin-bottom: 6px; color: var(--gold); }
.tgt-pill__icon svg { width: 26px; height: 26px; display: block; margin-inline: auto; }
.tgt-pill strong { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink); }
.tgt-pill span { font-size: 12.5px; color: var(--muted); }

.tgt-prose--centered { max-width: 74ch; margin-inline: auto; }
.tgt-prose--centered p { margin: 0 0 1.1em; line-height: 1.75; color: var(--ink-soft); }

/* itinerary */
.tgt-timeline {
	list-style: none;
	margin: 0;
	padding: 0 clamp(20px, 4vw, 48px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	display: grid;
	max-width: 960px;
	margin-inline: auto;
}
.tgt-timeline__row { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); min-height: 183px; align-content: center; }
.tgt-timeline__row:first-child { border-top: 0; }
.tgt-timeline__when { display: flex; flex-direction: column; gap: 4px; }
.tgt-timeline__time { font-family: var(--font-head); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.tgt-timeline__step { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.tgt-timeline__what h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); }
.tgt-timeline__what p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 700px) {
	.tgt-timeline__row { grid-template-columns: 1fr; gap: 8px; }
}

/* included */
.tgt-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tgt-included__box { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px 28px; }
.tgt-included__box--yes { border-top: 3px solid #2f9e5f; }
.tgt-included__box--no { border-top: 3px solid #c2503f; }
.tgt-included__title { margin: 0 0 16px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); }
.tgt-included .tgt-ticks li, .tgt-included .tgt-crosses li { font-family: "Open Sans", var(--font-body); font-size: 15px; color: var(--ink-soft); }
.tgt-included .tgt-ticks li::before { border-color: #2f9e5f; }
.tgt-included .tgt-crosses li::before { color: #c2503f; }

/* why, six up on a tour page */
.tgt-why--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 35px; }
@media (max-width: 860px) { .tgt-why--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tgt-why--six { grid-template-columns: 1fr; } }
.tgt-why--six .tgt-why__item { border: 0; padding: 0; }
.tgt-why--six .tgt-why__title { font-size: 18px; }

/* gallery: 300px wide pictures keeping their own proportions, in a scrolling row */
.tgt-gallery {
	display: flex;
	gap: 80px;
	justify-content: center;
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.tgt-gallery::-webkit-scrollbar { display: none; }
.tgt-gallery__item { margin: 0; flex: 0 0 300px; scroll-snap-align: center; border-radius: 8px; overflow: hidden; }
.tgt-gallery__item img { width: 300px; height: auto; display: block; }

/* The photo slider, standing in for Elementor's Image Carousel ------------------------
 *
 * The track is a scroll-snap row, so it slides with no library and still shows every
 * photo with JavaScript off. How many are on screen, and the space between them, come
 * from the live widget's own settings (--tgt-car-show / --tgt-car-gap).
 */
.tgt-car { position: relative; margin-top: 26px; }
.tgt-car__track {
	display: flex;
	gap: var(--tgt-car-gap, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tgt-car__track::-webkit-scrollbar { display: none; }
.tgt-car__slide {
	margin: 0;
	flex: 0 0 calc((100% - (var(--tgt-car-show, 3) - 1) * var(--tgt-car-gap, 20px)) / var(--tgt-car-show, 3));
	scroll-snap-align: start;
	border-radius: 6px;
	overflow: hidden;
	background: var(--cream);
}
.tgt-car__slide img { display: block; width: 100%; height: auto; }
/* "Static" means every photo fits the desktop row (carousel-photos.php counts against the
   desktop number). Tablets and phones show fewer per row, so there the track keeps scrolling;
   letting it overflow there pushed the whole page sideways. */
@media (min-width: 1025px) {
	.tgt-car--static .tgt-car__track { overflow-x: visible; }
}

.tgt-car__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	cursor: pointer;
}
.tgt-car__arrow:hover { color: var(--gold); }
.tgt-car__arrow[disabled] { opacity: 0.35; cursor: default; }
.tgt-car__arrow--prev { left: 6px; }
.tgt-car__arrow--next { right: 6px; }
.tgt-car--inside .tgt-car__arrow--prev { left: 10px; }
.tgt-car--inside .tgt-car__arrow--next { right: 10px; }

.tgt-car__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.tgt-car__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(26, 110, 138, 0.28);
	cursor: pointer;
}
.tgt-car__dots button[aria-current="true"] { background: var(--teal); }

@media (max-width: 1024px) {
	.tgt-car__slide { flex-basis: calc((100% - (var(--tgt-car-show-t, 2) - 1) * var(--tgt-car-gap, 20px)) / var(--tgt-car-show-t, 2)); }
	.tgt-car__arrow--prev { left: 6px; }
	.tgt-car__arrow--next { right: 6px; }
}
@media (max-width: 767px) {
	.tgt-car__slide { flex-basis: calc((100% - (var(--tgt-car-show-m, 1) - 1) * var(--tgt-car-gap, 20px)) / var(--tgt-car-show-m, 1)); }
}
@media (prefers-reduced-motion: reduce) {
	.tgt-car__track { scroll-behavior: auto; }
}

.tgt-prose-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 30px; }
.tgt-prose-figures figure { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--cream); }
.tgt-prose-figures img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- faq on the homepage */

.tgt-band--faq .tgt-faq { max-width: 860px; margin-inline: auto; }
.tgt-faq__intro { margin: 0 0 22px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.tgt-faq__title {
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 1.1rem + 2vw, 2.625rem);
	margin-bottom: 26px;
}

/* ---------------------------------------------------------------- footer
 * Moved to assets/css/header-footer.css (redesign, 2026-09-26).
 */


/* ---------------------------------------------------------------- whatsapp float
 * Removed on Fadi's request (2026-09-26): no floating WhatsApp button anywhere. The header
 * button and the phone booking bars stay.
 */


/* ---------------------------------------------------------------- misc */

.tgt-404 { padding-block: clamp(40px, 6vw, 80px); }
.tgt-404__links { padding-left: 1.2em; margin-bottom: 1.6em; }

.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block: 30px;
}
.nav-links .page-numbers {
	display: inline-flex;
	min-width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink);
}
.nav-links .page-numbers.current { background: var(--teal); border-color: var(--teal); color: var(--white); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Private tour pages ("classic" layout)

   These pages were built before the excursions were renovated, and they look
   different: a row of square photos, a one-line title band, a bordered strip of
   facts, then plain blocks on a 1140 grid. Every number below was measured off
   the live page (localhost:8081) rather than guessed.
   ========================================================================== */

.tgt-tour--classic { background: var(--white); }
.tgt-tour--classic .tgt-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 0; }

/* Photo strip above the title ------------------------------------------- */
.tgt-strip { padding: 10px; }
.tgt-strip .tgt-car { margin-top: 0; }
.tgt-strip .tgt-car__slide { border-radius: 8px; }
.tgt-strip__rail {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.tgt-strip__rail::-webkit-scrollbar { display: none; }
.tgt-strip__item { flex: 0 0 300px; margin: 0; scroll-snap-align: start; }
.tgt-strip__item img {
	width: 300px;
	height: 300px;
	/* The live carousel scales the square source to the box rather than cropping it. */
	object-fit: fill;
	border-radius: 10px;
	display: block;
}

/* One-line title band ---------------------------------------------------- */
.tgt-hero-band { padding: 10px; }
.tgt-hero-band__row {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 10px 0;
}
.tgt-hero-band__title {
	flex: 0 1 60%;
	min-width: 0;
	margin: 0;
	padding: 0 10px;
	font-family: "Stardos Stencil", Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
	letter-spacing: normal;
}
.tgt-hero-band__price {
	flex: 0 0 15%;
	margin: 0;
	padding: 0 10px;
	font-family: "Open Sans", var(--font-body);
	font-size: 15px;
	line-height: 1;
	color: #000;
	text-align: center;
	white-space: nowrap;
}
.tgt-hero-band__price b { font-weight: 700; }
.tgt-hero-band__price small { font-size: 80%; }
.tgt-hero-band__cta { flex: 0 0 25%; margin: 0; padding: 0 10px; text-align: center; }
.tgt-hero-band__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 20px 40px;
	border-radius: 50px;
	background: #eed36a;
	color: #000;
	font-family: Poppins, var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.3px;
	text-transform: capitalize;
	text-decoration: none;
}
.tgt-hero-band__btn:hover { background: var(--gold); }

/* Facts strip, intro copy, "Read More" ------------------------------------ */
.tgt-quickfacts { padding: 10px 0; }
.tgt-quickfacts__wrap { max-width: var(--wrap); margin-inline: auto; }
.tgt-quickfacts__row {
	display: flex;
	border: 1px solid #e6e6e6;
	padding: 10px;
}
.tgt-quickfacts__item {
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 10px;
}
.tgt-quickfacts__icon { flex: none; width: 50px; height: 50px; display: block; }
.tgt-quickfacts__icon svg { width: 50px; height: 50px; display: block; }
.tgt-quickfacts__label {
	margin: 0;
	font-family: Poppins, var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #000;
}
.tgt-quickfacts__value {
	margin: 0;
	font-family: "Open Sans", var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: #000;
}
.tgt-quickfacts__text { margin-top: 31px; }
.tgt-quickfacts__text p,
.tgt-more__body p {
	margin: 0 0 14.4px;
	font-family: "Open Sans", var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: #000;
}
.tgt-quickfacts__text p:last-child, .tgt-more__body p:last-child { margin-bottom: 0; }
.tgt-quickfacts a, .tgt-more a, .tgt-copy a { color: #ddba5d; text-decoration: none; }
.tgt-quickfacts a:hover, .tgt-more a:hover, .tgt-copy a:hover { text-decoration: underline; }

.tgt-more { margin-top: 16px; }
.tgt-more > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	list-style: none;
	cursor: pointer;
	font-family: "Open Sans", var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: #ddba5d;
}
.tgt-more > summary::-webkit-details-marker { display: none; }
.tgt-more__minus { display: none; }
.tgt-more[open] > summary .tgt-more__plus { display: none; }
.tgt-more[open] > summary .tgt-more__minus { display: inline-block; }
.tgt-more__body { padding: 0 10px; }

/* A plain block: kicker, heading, hairline, content ----------------------- */
.tgt-block { padding: 40px 0; }
.tgt-block > .tgt-wrap { display: flex; flex-direction: column; gap: 16px; }
/* A copied block sits in a container of its own, which adds 10px on the live page. */
.tgt-block.tgt-raw > .tgt-wrap { padding: 10px; }
.tgt-flush { padding: 10px 0; }
.tgt-blockhead { display: contents; }
.tgt-blockhead__eyebrow {
	margin: 0;
	font-family: var(--tgt-k-font, var(--font-body));
	font-size: var(--tgt-k-size, 14px);
	font-weight: var(--tgt-k-weight, 700);
	line-height: 1.4;
	letter-spacing: var(--tgt-k-track, 2px);
	text-transform: var(--tgt-k-case, uppercase);
	color: var(--tgt-k-color, var(--teal));
	text-align: var(--tgt-k-align, left);
}
.tgt-blockhead__title {
	margin: 0;
	font-family: var(--tgt-t-font, Georgia, serif);
	font-size: var(--tgt-t-size, 35px);
	font-weight: var(--tgt-t-weight, 700);
	line-height: var(--tgt-t-line, 1.15);
	letter-spacing: var(--tgt-t-track, -0.5px);
	text-transform: var(--tgt-t-case, none);
	color: var(--tgt-t-color, var(--navy));
	text-align: var(--tgt-t-align, left);
}
.tgt-blockhead__rule {
	margin: 8px 0;
	border: 0;
	border-top: 1px solid rgba(14, 22, 32, 0.14);
}

/* What's included, the private tours' version ----------------------------- */
.tgt-terms__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; }
.tgt-terms__title {
	margin: 0 0 16px;
	font-family: Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
}
.tgt-terms__list { margin: 0; padding: 0; list-style: none; }
.tgt-terms__list li {
	display: flex;
	align-items: center;
	padding: 0 0 8px;
	font-family: "Open Sans", var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--navy);
}
.tgt-terms__list li + li { margin-top: 8px; }
.tgt-terms__list li { position: relative; }
.tgt-terms__list li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 1px solid rgba(14, 22, 32, 0.14);
}
.tgt-terms__list svg { flex: none; width: 15px; height: 15px; margin-right: 15.75px; }
.tgt-terms__list--yes svg { color: #2f7d5b; }
.tgt-terms__list--no svg { color: #b23b3b; }

/* "Why travelers loved it" quotes ----------------------------------------- */
.tgt-quotes { padding: 10px 0; }
.tgt-quotes__title {
	margin: 0 0 20px;
	font-family: Poppins, var(--font-body);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: #000;
	text-align: center;
}
.tgt-quotes__box { position: relative; padding: 0 28.5px; }
.tgt-quotes__rail {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.tgt-quotes__rail::-webkit-scrollbar { display: none; }
.tgt-quote {
	flex: 0 0 50%;
	margin: 0;
	padding: 20px;
	scroll-snap-align: start;
}
.tgt-quote__text {
	margin: 0;
	font-family: "Open Sans", var(--font-body);
	font-size: 19.5px;
	font-style: italic;
	line-height: 1.5;
	color: #000;
}
.tgt-quote__cite { display: flex; flex-direction: column; margin-top: 25px; font-style: normal; }
.tgt-quote__name {
	font-family: "Open Sans", var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #000;
}
.tgt-quote__stars { display: flex; gap: 2px; }
.tgt-quotes__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: #8f8d8d;
	cursor: pointer;
}
.tgt-quotes__arrow--prev { left: -20px; }
.tgt-quotes__arrow--next { right: -20px; }
.tgt-quotes__dots { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.tgt-quotes__dots button {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	opacity: 0.2;
	cursor: pointer;
}
.tgt-quotes__dots button[aria-selected="true"] { opacity: 1; }

/* A copy block between the structured ones -------------------------------- */
.tgt-copy { padding: var(--tgt-sec-pad, 10px 0); }
.tgt-copy__wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
/* The renovated excursions run wider bands, several of them navy with reversed type. */
.tgt-copy--editorial { padding: var(--tgt-sec-pad, clamp(44px, 5vw, 70px) 0); }
.tgt-copy--editorial.tgt-band--white { background: var(--tgt-sec-bg, var(--white)); }
.tgt-copy--editorial.tgt-band--cream { background: var(--tgt-sec-bg, var(--cream)); }
.tgt-copy--classic { background: var(--tgt-sec-bg, transparent); }
.tgt-copy__subtitle {
	margin: 0 0 12px;
	font-family: var(--tgt-s-font, var(--font-head));
	font-size: var(--tgt-s-size, 22px);
	font-weight: var(--tgt-s-weight, 700);
	line-height: var(--tgt-s-line, 1.25);
	letter-spacing: var(--tgt-s-track, normal);
	text-transform: var(--tgt-s-case, none);
	color: var(--tgt-s-color, var(--ink));
	text-align: var(--tgt-s-align, start);
}
.tgt-copy__kicker {
	margin: 0 0 20px;
	font-family: var(--tgt-k-font, var(--font-body));
	font-size: var(--tgt-k-size, 14px);
	font-weight: var(--tgt-k-weight, 700);
	letter-spacing: var(--tgt-k-track, 2px);
	text-transform: var(--tgt-k-case, uppercase);
	color: var(--tgt-k-color, var(--teal));
	text-align: var(--tgt-k-align, center);
}
.tgt-copy__title {
	margin: 0 0 20px;
	font-family: var(--tgt-t-font, Poppins, var(--font-body));
	font-size: var(--tgt-t-size, 18px);
	font-weight: var(--tgt-t-weight, 600);
	line-height: var(--tgt-t-line, 1.3);
	letter-spacing: var(--tgt-t-track, normal);
	text-transform: var(--tgt-t-case, none);
	color: var(--tgt-t-color, #000);
	text-align: var(--tgt-t-align, center);
}
.tgt-copy__text {
	max-width: var(--tgt-p-width, none);
	margin-inline: var(--tgt-p-mi, auto);
}
.tgt-copy--ruled .tgt-copy__part + .tgt-copy__part::before {
	content: "";
	display: block;
	width: var(--tgt-rule-w, 100%);
	max-width: 100%;
	border-top: var(--tgt-rule-t, 1px) solid var(--tgt-rule-c, rgba(255, 255, 255, .18));
	margin-bottom: calc(var(--tgt-gap, 44px) / 2);
	margin-top: calc(var(--tgt-gap, 44px) / 2);
}
.tgt-copy--ruled .tgt-copy__part + .tgt-copy__part { margin-top: 0; }
.tgt-copy--ruled.tgt-band--white .tgt-copy__part + .tgt-copy__part::before,
.tgt-copy--ruled.tgt-band--cream .tgt-copy__part + .tgt-copy__part::before { border-top-color: var(--tgt-rule-c, rgba(14, 22, 32, .14)); }
.tgt-copy__parts .tgt-copy__part + .tgt-copy__part::before { content: none; }
.tgt-copy__text p {
	margin: 0 0 var(--tgt-p-gap, 14.4px);
	font-family: var(--tgt-p-font, "Open Sans", var(--font-body));
	font-size: var(--tgt-p-size, 15px);
	line-height: var(--tgt-p-line, 1.5);
	color: var(--tgt-p-color, #000);
	text-align: var(--tgt-p-align, start);
}

.tgt-copy__part + .tgt-copy__part { margin-top: var(--tgt-gap, 36px); }
.tgt-copy__parts {
	display: grid;
	grid-template-columns: repeat(var(--tgt-cols, 2), 1fr);
	gap: 0 64px;
}
.tgt-copy__parts .tgt-copy__part + .tgt-copy__part { margin-top: 0; }
.tgt-copy__lists { display: grid; grid-template-columns: repeat(var(--tgt-list-cols, 1), 1fr); gap: 0 64px; }
.tgt-copy__list { margin: 0 0 14.4px; padding-left: 20px; }
.tgt-copy__list li {
	margin-bottom: 6px;
	font-family: var(--tgt-p-font, "Open Sans", var(--font-body));
	font-size: var(--tgt-p-size, 15px);
	line-height: var(--tgt-p-line, 1.5);
	color: var(--tgt-p-color, #000);
}
.tgt-more--inline { margin-top: 8px; }
.tgt-copy__inline { text-align: center; margin: 0 0 14.4px; }
.tgt-copy__inline > * { display: inline-block; text-align: left; }

.tgt-why__icon { display: block; margin-bottom: 12px; }
.tgt-why__icon svg { width: 30px; height: 30px; display: block; margin-inline: auto; color: var(--teal); }
.tgt-whyband .tgt-icon--line { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--teal); }

/* A block's own button, where the live one differs from the theme's gold. */
.tgt-copy .tgt-btn--gold {
	background: var(--tgt-b-bg, var(--gold));
	color: var(--tgt-b-color, var(--white));
	border-radius: var(--tgt-b-radius, 999px);
	font-size: var(--tgt-b-size, 15px);
	letter-spacing: var(--tgt-b-track, normal);
}

/* Raw blocks copied from the live page ------------------------------------ */
.tgt-raw iframe { display: block; width: 100%; height: 480px; border: 0; }

/* The reserve card --------------------------------------------------------- */
.tgt-booking { padding: 0; }
.tgt-booking__card {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 28px 32px 32px;
	background: var(--white);
	border: 1px solid rgba(200, 164, 74, 0.18);
	border-radius: 16px;
	box-shadow: 0 12px 40px -8px rgba(26, 110, 138, 0.14);
}
.tgt-booking__head {
	/* Some cards open with a cream panel, some do not; the page's own values decide. */
	margin: -28px -32px 22px;
	padding: 28px 32px 22px;
	background: var(--tgt-sec-bg, transparent);
	border-radius: 16px 16px 0 0;
	text-align: center;
}
.tgt-booking__eyebrow {
	margin: 0 0 4px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
}
.tgt-booking__title {
	margin: 0;
	font-family: var(--tgt-t-font, Georgia, serif);
	font-size: var(--tgt-t-size, 28px);
	font-weight: var(--tgt-t-weight, 400);
	line-height: var(--tgt-t-line, 1.2);
	color: var(--tgt-t-color, var(--teal));
}
.tgt-booking__sub {
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}
.tgt-booking .tgt-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 -8px;
	padding: 0;
	max-width: none;
	background: none;
	border: 0;
}
.tgt-booking .tgt-form__row {
	flex: 0 0 50%;
	gap: 6px;
	padding: 0 8px;
	margin: 0 0 14px;
}
.tgt-booking .tgt-form__row--wide,
.tgt-booking .tgt-form__errors,
.tgt-booking .tgt-form__actions,
.tgt-booking .tgt-form__promise { flex: 0 0 100%; }
.tgt-booking .tgt-form__row label {
	display: block;
	font-family: var(--tgt-l-font, var(--font-body));
	font-size: var(--tgt-l-size, 12px);
	font-weight: var(--tgt-l-weight, 700);
	line-height: 30px;
	letter-spacing: var(--tgt-l-track, 0.3px);
	text-transform: var(--tgt-l-case, uppercase);
	color: var(--tgt-l-color, #1f2937);
}
.tgt-booking .tgt-form input,
.tgt-booking .tgt-form select,
.tgt-booking .tgt-form textarea {
	width: 100%;
	height: 47px;
	padding: 6px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: var(--white);
	font-family: var(--font-body);
	font-size: 15px;
	color: #1f2937;
}
.tgt-booking .tgt-form textarea { height: 77px; min-height: 47px; }
.tgt-booking .tgt-form__actions { margin: 0; padding: 0 8px; }
.tgt-booking .tgt-form__actions .tgt-btn {
	width: 100%;
	height: 59px;
	border-radius: var(--tgt-b-radius, 10px);
	background: var(--tgt-b-bg, var(--gold));
	color: var(--tgt-b-color, var(--white));
	font-family: Georgia, serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.tgt-booking .tgt-form__promise { display: none; }
.tgt-booking__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6b7280;
}
.tgt-booking__or span { flex: 1; height: 1px; background: #e5e7eb; }
.tgt-booking__or em { font-style: normal; }
.tgt-booking__wa { margin: 0; text-align: center; }
.tgt-booking__wabtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 360px;
	justify-content: center;
	padding: 14px 20px;
	border: 1px solid #25d366;
	border-radius: 10px;
	background: var(--white);
	color: #25d366;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	text-decoration: none;
}
.tgt-booking__wabtn:hover { background: #25d366; color: var(--white); }
.tgt-booking__micro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px dashed #e5e7eb;
	font-family: var(--font-body);
	font-size: 12px;
	color: #6b7280;
}

@media (max-width: 860px) {
	.tgt-hero-band__row { flex-wrap: wrap; }
	.tgt-hero-band__title { flex: 0 0 100%; }
	.tgt-terms__cols { grid-template-columns: 1fr; gap: 32px; }
	.tgt-quote { flex: 0 0 100%; }
	.tgt-booking .tgt-form__row { flex: 0 0 100%; }
	.tgt-booking__wabtn { min-width: 0; width: 100%; }
}

/* Cloned pages ------------------------------------------------------------------------
 *
 * Pages whose design is the order of their widgets are drawn from a tree read off the
 * reference (inc/clone.php). Everything about how they look comes from the generated
 * stylesheet in design-sections/clone/, keyed by the live element ids. What is here is
 * only the plumbing those ids hang on.
 */
.tgtc-page { overflow-x: clip; }
.tgtc, .tgtc-in, .tgtc-w { box-sizing: border-box; }
.tgtc { display: block; width: 100%; }
.tgtc-in { width: 100%; margin-inline: auto; }
.tgtc-w { min-width: 0; }
.tgtc-w img { max-width: 100%; height: auto; }
/* No margin resets here: the generated stylesheet carries the live page's own margins,
   and a reset of :last-child beat them, which cost 14px under every paragraph. */

.tgtc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
}
.tgtc-btn svg { width: 1em; height: 1em; flex: none; }

.tgtc-spacer { display: block; width: 100%; }
.tgtc-divider { display: flex; align-items: center; width: 100%; }
.tgtc-hr { display: block; flex: 1 1 auto; border-top: 1px solid currentColor; }

.tgtc-icon { display: inline-flex; }
.tgtc-icon svg { width: 1em; height: 1em; }

.tgtc-ib { display: block; text-decoration: none; color: inherit; }
.tgtc-ib__icon { display: inline-flex; }
.tgtc-ib__title { margin: 0; }
.tgtc-ib__text > :last-child { margin-bottom: 0; }

.tgtc-il { list-style: none; margin: 0; padding: 0; }
.tgtc-il__item { display: flex; align-items: center; }
.tgtc-il__item a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.tgtc-il__icon { display: inline-flex; flex: none; }

/* The questions block. <details> keeps it working with no script at all. */
.tgtc-acc { width: 100%; }
.tgtc-acc__item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.tgtc-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
}
.tgtc-acc__q::-webkit-details-marker { display: none; }
.tgtc-acc__label { flex: 1 1 auto; }
.tgtc-acc--right .tgtc-acc__q { flex-direction: row-reverse; }
.tgtc-acc__mark { display: inline-flex; flex: none; align-items: center; }
.tgtc-acc__mark svg { width: 1em; height: 1em; fill: currentColor; }
.tgtc-acc__mark--open { display: none; }
.tgtc-acc__item[open] .tgtc-acc__mark--shut { display: none; }
.tgtc-acc__item[open] .tgtc-acc__mark--open { display: inline-flex; }

.tgtc-acc__mark--chevron {
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 0.2s ease;
}
.tgtc-acc__item[open] .tgtc-acc__mark--chevron { transform: rotate(-135deg) translate(-3px, -3px); }
.tgtc-acc__a { padding: 0 0 20px; }
.tgtc-acc__a > :first-child { margin-top: 0; }
.tgtc-acc__a > :last-child { margin-bottom: 0; }

/* The site kit that cloned pages carry styles every button on the page, including the
   slider's arrows and the questions block. Those are ours, not the page's, so they say so
   with a class the kit's `.tgtc-page button` cannot outweigh. */
.tgtc-page .tgt-car__arrow {
	background: none;
	border-radius: 0;
	padding: 0;
	color: #fff;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	line-height: normal;
}
.tgtc-page .tgt-car__arrow:hover,
.tgtc-page .tgt-car__arrow:focus { background: none; color: var(--gold); }
.tgtc-page .tgt-car__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	background: rgba(26, 110, 138, 0.28);
}
.tgtc-page .tgt-car__dots button[aria-current="true"] { background: var(--teal); }

/* Stepped forms ------------------------------------------------------------------------
 *
 * The contact form asks its questions a few at a time. The step wrapper has to be
 * invisible to layout (display: contents), or the rows inside it stop being children of
 * the form and every booking form on the site loses its two-column grid.
 */
.tgt-form__fieldset { display: contents; }
.tgt-form__fieldset[hidden] { display: none; }

.tgt-form__steps {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.tgt-form__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
/* The rule joining one step to the next. */
.tgt-form__step + .tgt-form__step::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 50%;
	left: -50%;
	height: 1px;
	background: var(--line);
}
.tgt-form__stepno {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
}
.tgt-form__step.is-now { color: var(--ink); }
.tgt-form__step.is-now .tgt-form__stepno { border-color: var(--gold); background: var(--gold); color: #fff; }
.tgt-form__step.is-done .tgt-form__stepno { border-color: var(--teal); background: var(--teal); color: #fff; }

/* A question with a set of answers. */
.tgt-form__choices { display: flex; flex-direction: column; gap: 10px; }
.tgt-form__choices--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.tgt-form__choice { display: inline-flex; align-items: center; gap: 8px; }
.tgt-form__choice input { width: auto; margin: 0; }
.tgt-form__choice label { font-weight: 400; cursor: pointer; }
.tgt-form__row--choices > label { margin-bottom: 4px; }

/* Two questions to a line where the live form puts them there. */
.tgt-form--stepped { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tgt-form--stepped .tgt-form__row { flex: 1 1 calc(50% - 9px); min-width: 220px; }
.tgt-form--stepped .tgt-form__row--wide,
.tgt-form--stepped .tgt-form__steps,
.tgt-form--stepped .tgt-form__errors,
.tgt-form--stepped .tgt-form__actions,
.tgt-form--stepped .tgt-form__promise { flex: 0 0 100%; }
.tgt-form--stepped .tgt-form__actions { display: flex; gap: 12px; }
.tgt-form--stepped .tgt-form__actions .tgt-btn { flex: 1 1 auto; }
.tgt-btn--quiet { background: none; border: 1px solid var(--line); color: var(--ink); }
@media (max-width: 560px) {
	.tgt-form--stepped .tgt-form__row { flex: 0 0 100%; }
	.tgt-form__steplabel { display: none; }
}

/* A form on a cloned page wears the page's own box, not the theme's card. And a button
   set to inline-flex ignores the hidden attribute unless it is told not to, which left
   Previous, Next and Send all on screen at once. */
.tgtc-page .tgt-form {
	max-width: none;
	background: none;
	border: 0;
	padding: 0;
}
.tgtc-page .tgt-form__promise { display: none; }
.tgt-form [hidden] { display: none !important; }

/* An icon box with its icon beside the title, as Elementor's left and right positions do. */
.tgtc-ib--left, .tgtc-ib--right { display: flex; align-items: flex-start; gap: 15px; }
.tgtc-ib--right { flex-direction: row-reverse; text-align: right; }
.tgtc-ib--left > .tgtc-ib__icon, .tgtc-ib--right > .tgtc-ib__icon { flex: none; }
.tgtc-ib__body { flex: 1 1 auto; min-width: 0; }

/* An icon that sits on a shape needs to be centred on it; the size and colour of both
   come from the generated stylesheet. */
.tgtc-ib__icon, .tgtc-icon { display: inline-flex; align-items: center; justify-content: center; }
.tgtc-ib__icon svg, .tgtc-icon svg { fill: currentColor; }

/* ---------------------------------------------------------------- private-tour template
 * Trial additions for the reusable private-tour template (full-day tour first): a visible
 * breadcrumb spacer, a two-column rail beside the quickfacts/itinerary/included run, a
 * mobile sticky booking bar and an accessible photo lightbox. Everything here only ever
 * matches markup that single-tour.php prints for the one page opted in, so it cannot
 * change how any other tour or excursion renders.
 */

.tgt-tour__crumbs { padding-top: 22px; }

.tgt-rail-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
}
.tgt-rail-grid__main { min-width: 0; }
/* Descendant, not direct-child: sections.php wraps an anchored section (#included etc.)
   in its own div for the sub-nav to target, which sits between this and .tgt-band/.tgt-block. */
.tgt-rail-grid__main .tgt-band,
.tgt-rail-grid__main .tgt-block { padding-inline: 0; }
.tgt-rail-grid__main .tgt-band > .tgt-wrap,
.tgt-rail-grid__main .tgt-block > .tgt-wrap { max-width: none; padding-inline: 0; }

.tgt-rail-card {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	background: var(--white);
}
.tgt-rail-card__price {
	margin: 0;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
}
.tgt-rail-card__cta {
	background: var(--gold);
	color: var(--white);
	border-radius: var(--radius);
	padding: 15px 20px;
	font-size: 15px;
	text-align: center;
}
.tgt-rail-card__cta:hover { background: var(--gold-dark); }
.tgt-rail-card__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--whatsapp);
	border-radius: var(--radius);
	color: var(--whatsapp-dark);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.tgt-rail-card__wa svg { width: 16px; height: 16px; fill: currentColor; }
.tgt-rail-card__wa:hover { background: var(--whatsapp); color: var(--white); }
.tgt-rail-card__trust {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
}
@media (max-width: 1024px) {
	.tgt-rail-grid { grid-template-columns: 1fr; }
	.tgt-rail-card { position: static; }
}
@media (max-width: 600px) {
	/* .tgt-quickfacts__row doesn't wrap at this width sitewide; scope the fix to this
	   page's own wrapper so other classic-layout tour pages are untouched for now. */
	.tgt-rail-grid .tgt-quickfacts__row { flex-wrap: wrap; }
	.tgt-rail-grid .tgt-quickfacts__item { flex: 1 1 100%; }
}

/* Mobile sticky booking bar: hidden once the desktop rail card takes over. */
.tgt-mobile-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--white);
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 20px rgba(15, 28, 38, .1);
}
.tgt-mobile-cta__price {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
.tgt-mobile-cta__btn {
	flex: 1 1 auto;
	max-width: 220px;
	padding: 13px 20px;
	font-size: 14px;
	background: var(--gold);
	color: var(--white);
	border-radius: var(--radius);
}
@media (max-width: 1024px) {
	.tgt-mobile-cta { display: flex; }
	body:has(.tgt-mobile-cta) { padding-bottom: 58px; }
}

/* Itinerary: optional per-stop duration/admission line and photo, used only when a stop's
   data actually carries them (see section-itinerary.php). */
.tgt-timeline__meta { margin-top: 6px !important; font-size: 13px; color: var(--muted); }
.tgt-timeline__row--img { grid-template-columns: 170px 1fr auto; }
.tgt-timeline__img { align-self: center; }
.tgt-timeline__img img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 600px) {
	.tgt-timeline__row--img { grid-template-columns: 1fr; }
	.tgt-timeline__img img { width: 100%; height: auto; aspect-ratio: 16/9; }
}

/* Gallery lightbox: a "view all photos" trigger plus an accessible modal. Opt-in per
   carousel (carousel-photos.php's lightbox arg); absent everywhere else. */
.tgt-car__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tgt-car__zoom img { display: block; width: 100%; height: 100%; }
.tgt-car__viewall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.tgt-car__viewall:hover { border-color: var(--teal); color: var(--teal); }

.tgt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tgt-lightbox[hidden] { display: none; }
.tgt-lightbox__scrim { position: absolute; inset: 0; background: rgba(11, 11, 11, .92); }
.tgt-lightbox__dialog {
	position: relative;
	z-index: 1;
	width: min(92vw, 1100px);
	height: min(86vh, 780px);
	display: grid;
	grid-template-columns: 56px 1fr 56px;
	align-items: center;
}
.tgt-lightbox__stage { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.tgt-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.tgt-lightbox__img { display: none; }
.tgt-lightbox__img:not([hidden]) { display: block; }
.tgt-lightbox__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	border: 0;
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
}
.tgt-lightbox__close:hover { background: rgba(255, 255, 255, .24); }
.tgt-lightbox__arrow {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .1);
	border: 0;
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	justify-self: center;
}
.tgt-lightbox__arrow:hover { background: rgba(255, 255, 255, .22); }
.tgt-lightbox__arrow[disabled] { opacity: .35; cursor: default; }
.tgt-lightbox__count {
	position: absolute;
	bottom: -34px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: rgba(255, 255, 255, .8);
	font-family: var(--font-body);
	font-size: 13px;
}
/* Visible keyboard focus inside the dialog; the rest of the theme relies on the browser
   default, but white-on-near-black needs its own ring to stay visible. */
.tgt-lightbox :is(button):focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 600px) {
	.tgt-lightbox__dialog { grid-template-columns: 1fr; width: 100vw; height: 100dvh; padding: 0 8px; }
	.tgt-lightbox__arrow--prev, .tgt-lightbox__arrow--next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
	.tgt-lightbox__arrow--prev { left: 8px; }
	.tgt-lightbox__arrow--next { right: 8px; }
	.tgt-lightbox__close { top: 12px; right: 12px; }
	.tgt-lightbox__count { bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
	.tgt-lightbox__img { transition: opacity .15s ease; }
}
/* ---------------------------------------------------------------- tour hero + booking
 * The Viator-style top block for the one page trialling it: title + rating above a large
 * photo, a sticky price card beside it (see the 'rail' argument in single-tour.php, which
 * opens the two-column grid at 'gallery' instead of further down the page), and a sub-nav
 * of jump links to the sections below. Scoped to markup section-hero-booking.php and
 * section-tabnav.php print, so it cannot touch any other tour page.
 */

.tgt-tour-hero { padding-top: clamp(4px, 1vw, 10px); }
.tgt-tour-hero__h1 {
	margin: 0 0 10px;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	line-height: 1.25;
}
.tgt-tour-hero .tgt-trust-link {
	justify-content: flex-start;
	margin-bottom: 22px;
	color: var(--ink-soft);
}
.tgt-tour-hero .tgt-trust-link .tgt-trust-text { border-bottom-color: rgba(200, 164, 74, .55); }
.tgt-tour-hero .tgt-trust-link:hover,
.tgt-tour-hero .tgt-trust-link:hover .tgt-trust-text { color: var(--gold-dark); border-bottom-color: var(--gold-dark); }
.tgt-tour-hero .tgt-stars { color: var(--gold); text-shadow: none; }

.tgt-tour-hero__media .tgt-car { margin-top: 0; }
.tgt-tour-hero__media .tgt-car__track { border-radius: var(--radius-lg); overflow: hidden; }
.tgt-tour-hero__media .tgt-car__slide img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.tgt-rail-card__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tgt-rail-card__checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.tgt-rail-card__checks svg { flex: none; margin-top: 3px; color: var(--teal); }

/* Sub-nav: sticks under the header once the hero block scrolls past it. */
.tgt-tabnav {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	margin-top: 28px;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 2px 10px rgba(15, 28, 38, .04);
}
.tgt-tabnav__row {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.tgt-tabnav__row::-webkit-scrollbar { display: none; }
.tgt-tabnav a {
	flex: none;
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.tgt-tabnav a:hover { color: var(--ink); }
.tgt-tabnav a.is-active { color: var(--teal); border-bottom-color: var(--teal); }

/* The rail card now starts beside the gallery, so it needs to clear both the sticky header
   and the sticky sub-nav once both are pinned, not just the header. */
.tgt-rail-grid .tgt-rail-card { top: calc(var(--header-h) + 58px); }

/* The form now asks its questions a step at a time (see the 'steps' arg passed to
   tgt_form() in section-booking-rail.php), so the visible card is short again and can stay
   pinned like the reference page's own widget. Its two buttons pick up the site's own gold
   gradient instead of Viator's green. */
.tgt-rail-card--form .tgt-btn--gold {
	background: var(--gold-gradient);
	color: var(--navy);
}
.tgt-rail-card--form .tgt-btn--gold:hover { filter: brightness(1.05); }

/* Anchors the sub-nav and the rail card's own CTA jump to: keep their target clear of the
   sticky header + sub-nav instead of landing underneath them. Scoped to this page's own
   wrapper so no other tour page's #form anchor changes behaviour. */
.tgt-tour--v2 #overview,
.tgt-tour--v2 #included,
.tgt-tour--v2 #pickup,
.tgt-tour--v2 #itinerary,
.tgt-tour--v2 #policy,
.tgt-tour--v2 #reviews,
.tgt-tour--v2 #form { scroll-margin-top: calc(var(--header-h) + 66px); }

@media (max-width: 1024px) {
	.tgt-tabnav { margin-top: 20px; }
}

/* ---------------------------------------------------------------- booking card as a form
 * section-booking-rail.php now renders the real tgt_form() inside the card: reuse the
 * form's own styling, just tightened for a narrower column.
 */
.tgt-rail-card--form .tgt-form__row { margin-bottom: 12px; }
.tgt-rail-card--form .tgt-form__actions { margin-top: 4px; }
.tgt-rail-card--form .tgt-form__promise { font-size: 12px; }
.tgt-rail-card__or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}
.tgt-rail-card__or span { flex: 1 1 auto; height: 1px; background: var(--line); }
/* ---------------------------------------------------------------- a form built for the card
 * tgt_form() is styled for the full-width page section it was written for: its own cream
 * box, fields with a 220px floor, buttons with a 260px floor once the viewport clears
 * 640px. All three assumptions break a 360px sidebar card — hence the double box, the
 * squeezed fields and the button that ran outside the card in testing. This replaces every
 * one of those measurements for the card specifically; the fields, validation, labels and
 * tgt_form() markup itself are untouched.
 */
.tgt-rail-card--form .tgt-form {
	background: none;
	border: 0;
	padding: 0;
	max-width: none;
}
.tgt-rail-card--form .tgt-form__row {
	flex: 1 1 100%;
	min-width: 0;
	margin-bottom: 14px;
	gap: 5px;
}
/* Date + Travelers only: narrow enough to sit side by side, like the reference widget. */
.tgt-rail-card--form .tgt-form__fieldset[data-step="0"] .tgt-form__row {
	flex: 1 1 calc(50% - 6px);
}
.tgt-rail-card--form .tgt-form__row label { font-size: 12.5px; }
.tgt-rail-card--form .tgt-form input,
.tgt-rail-card--form .tgt-form select,
.tgt-rail-card--form .tgt-form textarea {
	font-size: 15px;
	padding: 11px 12px;
	border-radius: 8px;
}
.tgt-rail-card--form .tgt-form__steps { margin-bottom: 18px; }
.tgt-rail-card--form .tgt-form__stepno { width: 24px; height: 24px; font-size: 12px; }
.tgt-rail-card--form .tgt-form__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 10px;
}
.tgt-rail-card--form .tgt-form__actions .tgt-btn {
	flex: none;
	width: 100%;
	min-width: 0;
	padding: 13px 20px;
	font-size: 14px;
	letter-spacing: .3px;
	border-radius: 8px;
}
.tgt-rail-card--form .tgt-form__promise { font-size: 11.5px; }
@media (max-width: 560px) {
	.tgt-rail-card--form .tgt-form__fieldset[data-step="0"] .tgt-form__row { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------- the real gutter bug
 * Root cause of every "content touches the edge" report: the classic tour-page layout
 * zeroes .tgt-wrap's own side padding sitewide (.tgt-tour--classic .tgt-wrap), because that
 * layout's components (the old .tgt-timeline box, .tgt-quickfacts__row, etc.) used to add
 * their own inset instead. Once those boxes were stripped for this page, nothing was left
 * to push content in from the edge at any width under 1140px (it only ever looked fine on
 * a wide desktop screen, where the wrap's own centering happens to fake a margin). Restored
 * here, once, for every section on this page at every viewport -- not sitewide, so no other
 * classic-layout page's spacing changes.
 */
.tgt-tour--v2 .tgt-wrap { padding-inline: var(--gutter); }

/* The breadcrumb's current-page crumb is the full page title and will never fit beside
 * "Home / Tangier Private Tours" on one line at a phone width; every other crumb keeps
 * its natural width and this one truncates instead of wrapping the row onto three lines.
 */
.tgt-tour__crumbs .tgt-crumbs ol { flex-wrap: nowrap; }
.tgt-tour__crumbs .tgt-crumbs li { flex: none; white-space: nowrap; }
.tgt-tour__crumbs .tgt-crumbs li[aria-current="page"] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}