/*
 * Layout 43 — trip product page (Travlla reference styling)
 * ---------------------------------------------------------------------------
 * Loaded ONLY by extension/so_theme/catalog/view/template/product/trip.twig,
 * so nothing here can leak into another layout or page.
 *
 * All values below are taken from the reference page's own CSS
 * (demo/travlla/tours/california-coast-road-trip.html):
 *
 *   body                  background #ffffff · Figtree 400 14px/1.5 · #346065
 *                         (item 2 of the layout round: the reference #efffff canvas
 *                          became white; the cards keep the reference shadow)
 *   h1..h6                font-family Afacad · line-height 1.2 · colour #066168
 *   .trv-inner-title-sm   Afacad 500 28px #066168      (section headings)
 *   .trv-tour-single-r-*  #fff · 1px solid rgba(6,97,104,.2) · radius 30px · padding 24px
 *                         (the reference value is 40px; 24px is used here because
 *                          40px + the 8/4 grid squeezed the price calendar on a
 *                          1440px screen - see section 3 and section 9)
 *   .trv-clist-st-3-wrap  #fff8eb · radius 30px · padding 40px   (itinerary panel)
 *                         - REMOVED in item 3: on the white canvas the journey list
 *                          is plain content (no panel, no padding), so only the day
 *                          accordion frames remain.
 *   .duration .media      46px circle #ffaa0d          (orange ring)
 *   .duration .green-bg   38px circle #066168 · Afacad 700 22px #fff (day number)
 *   .duration .day        Figtree 600 14px #066168
 *   .info .trv-title      Afacad 500 24px #066168     (day heading)
 *   .info p               Figtree 400 16px #066168    (day description)
 *
 * Scoping note: the trip page markup lives in .content-main.product-detail —
 * NOT inside #content (that id belongs to the theme's module area, which only
 * holds the related-products block).  Every trip rule is therefore scoped with
 * "body.layout-43.product-product .product-detail"; only the related-products
 * rules keep the #content scope.
 */

/* ==========================================================================
   0. Reference webfonts — real weights instead of browser-synthesised bold.
      layout43-theme.css (always loaded) only declares Figtree 400 / Afacad 400,
      so bold text was synthesised.  The reference uses Figtree 300-900 and
      Afacad 400-700; both variable faces already exist in the theme's asset
      folder (they are the exact files layout43.css references), so they are
      re-declared here — trip page only — without shipping new binaries.
   ========================================================================== */
@font-face {
	font-family: Afacad;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../../../../../../image/catalog/demo/home43/asset-ff2a238d8a4740d916ad.woff2") format("woff2");
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../../../../../../image/catalog/demo/home43/asset-4ba7d3d096695818fe06.woff2") format("woff2");
}

/* ==========================================================================
   1. Page canvas — the tour page is white; sections are separated by shadows
      and the 1px dividers below, not by a tinted body (item 2 of the layout
      round: "背景色改为白色 + 用阴影区分").
   ========================================================================== */
body.layout-43.product-product {
	background-color: #ffffff;
}

body.layout-43.product-product .content-main.product-detail {
	background-color: transparent;
	font-family: Figtree, sans-serif;
	color: #346065;
}

/* ==========================================================================
   2. Headings — reference h1..h6 { font-family:Afacad; line-height:1.2; color:#066168 }
   ========================================================================== */
body.layout-43.product-product .product-detail h1,
body.layout-43.product-product .product-detail h2,
body.layout-43.product-product .product-detail h3,
body.layout-43.product-product .product-detail h4,
body.layout-43.product-product .product-detail h5,
body.layout-43.product-product .product-detail h6 {
	font-family: Afacad, Figtree, sans-serif;
	color: #066168;
	line-height: 1.2;
}

/* Product name (h1).  trip.twig forces Arial on .custom-title h*, hence !important. */
body.layout-43.product-product .product-detail .custom-title h1.title-product-heading {
	font-family: Afacad, Figtree, sans-serif !important;
	color: #066168;
}

/* Section titles — reference .trv-inner-title-sm = Afacad 500 28px #066168 */
body.layout-43.product-product .product-detail .custom-title h2,
body.layout-43.product-product .product-detail .trip-itinerary-head h2.trip-section-title {
	font-family: Afacad, Figtree, sans-serif !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	color: #066168 !important;
	line-height: 1.2;
}

/* The tour title sits under the photo mosaic, just above "Tour Overview".  It
   stays the page's only H1 (SEO outline: H1 -> H2 "Tour Overview" -> H3 day
   titles), but it now carries exactly the same type as those section titles:
   Afacad 500 / 28px / #066168, instead of a heavier 32px bold that out-shouted
   the page. */
body.layout-43.product-product .product-detail .trip-title-fallback {
	margin: 0 0 18px;
}

body.layout-43.product-product .product-detail .trip-title-fallback h1.title-product-heading {
	font-family: Afacad, Figtree, sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	color: #066168;
	margin: 0;
}

/* Narrow phones: the same type, scaled just enough for a long tour name to keep
   breathing (from ~440px up it is the 28px the section titles use). */
@media (max-width: 767px) {
	body.layout-43.product-product .product-detail .trip-title-fallback h1.title-product-heading {
		font-size: clamp(20px, 6.4vw, 28px);
	}
}

body.layout-43.product-product .product-detail .custom-title h3,
body.layout-43.product-product .product-detail .custom-title h5 {
	font-family: Afacad, Figtree, sans-serif !important;
	color: #066168;
}

/* ==========================================================================
   3. Tab panel — reference card look:
      #fff · 1px solid rgba(6,97,104,.2) · radius 30px · padding 40px
      (below 1200px the reference switches to padding 20px / radius 16px)
   ========================================================================== */
body.layout-43.product-product .product-detail #productTabsContent {
	background-color: #fff;
	/* Item 2: on the white canvas the panel is separated by a shadow instead of
	   a border (Bootstrap's .border / .rounded-bottom utilities use !important). */
	border: 0 !important;
	border-radius: 24px !important;
	/* Item 5 (this round): the left/right column layout follows the reference
	   (pro.bookingcore.co/tour/paris-vacation-travel) shadows - a neutral two
	   layer shadow ("0 1px 2px #00000014, 0 4px 12px #0000000d" is the most used
	   value in its app.css) instead of the teal-tinted one used before.
	   !important is required: layout43-theme.css sets box-shadow:none!important
	   on #productTabsContent. */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05) !important;
	/* 40px (the reference value) squeezed the sidebar on a 1440px screen and
	   clipped the calendar price labels; 24px keeps the panel generous while
	   leaving the price column fully usable. */
	padding: 24px !important;
}


body.layout-43.product-product .product-detail #productTabs .nav-link {
	font-family: Figtree, sans-serif;
}

@media (max-width: 1199px) {
	body.layout-43.product-product .product-detail #productTabsContent {
		border-radius: 0 0 16px 16px !important;
		padding: 20px !important;
	}
}

/* ==========================================================================
   Item 1 (this round): the photo mosaic lines up with the tab bar.
   The tab bar and the panel both span the full column, but the panel's 24px
   padding pushed the mosaic inwards (it started 24px right of the tab bar's
   left edge) and left a 24px gap right below the tab bar.  The strip is pulled
   out to the panel edges with negative margins, the gap below the tab bar is
   reduced to 8px and the whole image block is clipped to a rounded outline
   (all four corners) instead of the sharp ones it had before.
   ========================================================================== */
body.layout-43.product-product .product-detail #productTabsContent #tripPhotoGallery {
	/* Item 1 (this round): the gap between the tab bar and the mosaic was 8px
	   (24px panel padding pulled back by 16px); it is now 4px. */
	margin: -20px -24px 16px !important;
	padding: 0 !important;
	/* .container-fluid's own "width:100%" would keep the strip at the *padded*
	   width and only the left margin would show; auto lets the block fill the
	   negative-margin box so both edges land on the tab bar edges (135..1305). */
	width: auto !important;
	max-width: none !important;
	border-radius: 24px;
	overflow: hidden;
}

@media (max-width: 1199px) {
	body.layout-43.product-product .product-detail #productTabsContent #tripPhotoGallery {
		margin: -16px -20px 12px !important;
		border-radius: 16px;
	}
}

@media (max-width: 380px) {
	body.layout-43.product-product .product-detail #productTabsContent #tripPhotoGallery {
		margin: -14px -10px 10px !important;
		border-radius: 12px;
	}
}

/* ==========================================================================
   4. Tour overview strip — Duration / Departure / Destination, then Departure
      Time / Departure Location.
      Every item is TWO lines: the icon and the label share the first line, the
      value starts on the second line and lines up under the LABEL (i.e. past
      the 16px icon + its 8px gap) - .trip-meta__value's 24px padding is exactly
      that offset.  The strip uses the page's own 24px line box (14px text on
      line-height 24px, no extra flex gaps), so its line spacing is the same as
      the description / highlights; on desktop the first row is three columns
      and the departure pair is a second row of 4 / 8, both falling back to a
      wrapping grid below 992px.
   ========================================================================== */
body.layout-43.product-product .product-detail .trip-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 26px;
	margin: 0 0 20px;
	padding: 0;
	background-color: transparent;
	border: 0;
}

body.layout-43.product-product .product-detail .trip-meta__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Page rhythm: 14px text on a 24px line box (same as .admin-content), no
	   extra gap between the label line and the value line(s). */
	gap: 0;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #346065;
}

/* First line of an item: icon + label. */
body.layout-43.product-product .product-detail .trip-meta__head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

body.layout-43.product-product .product-detail .trip-meta__item > i,
body.layout-43.product-product .product-detail .trip-meta__head > i {
	flex: 0 0 auto;
	width: 16px;
	color: #066168;
	font-size: 16px;
	text-align: center;
}

body.layout-43.product-product .product-detail .trip-meta__label {
	color: #066168;
	font-weight: 600;
}

/* Second line of an item: 16px icon + 8px gap = 24px, so the value starts under
   the label instead of under the icon.  One span per departure (time / address)
   keeps the two departure columns in step. */
body.layout-43.product-product .product-detail .trip-meta__value {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 24px;
	color: #346065;
	font-weight: 400;
	overflow-wrap: break-word;
}

body.layout-43.product-product .product-detail .trip-meta__line {
	display: block;
}

body.layout-43.product-product .product-detail .trip-meta__icons {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* The row gap is gone (the strip sits on the page's 24px rhythm), so the
	   actions keep the same 12px the page uses between blocks. */
	margin-top: 12px;
	margin-left: auto;
}

/* Desktop: row 1 = Duration / Departure / Destination (three columns), row 2 =
   Departure Time / Departure Location as 4 / 8 - Departure Location spans the
   2nd + 3rd track (2 * track + the 26px gap), so its icon and label start
   exactly under "Departure" of the row above.  52px is the two gaps of row 1. */
@media (min-width: 992px) {
	body.layout-43.product-product .product-detail .trip-meta--duration,
	body.layout-43.product-product .product-detail .trip-meta--departure,
	body.layout-43.product-product .product-detail .trip-meta--destination {
		flex: 0 0 calc((100% - 52px) / 3);
	}

	body.layout-43.product-product .product-detail .trip-meta--departure-time {
		flex: 0 0 calc((100% - 52px) / 3);
	}

	body.layout-43.product-product .product-detail .trip-meta--departure-place {
		flex: 0 0 calc(2 * ((100% - 52px) / 3) + 26px);
	}

	body.layout-43.product-product .product-detail .trip-meta__icons {
		flex: 0 0 100%;
		margin-left: 0;
	}
}

/* Tablet / phone: the fixed columns become a wrapping grid (two per row, then
   one per row on narrow phones) so nothing overflows. */
@media (max-width: 991px) {
	body.layout-43.product-product .product-detail .trip-meta__item {
		flex: 1 1 220px;
	}
}

@media (max-width: 575px) {
	body.layout-43.product-product .product-detail .trip-meta__item {
		flex: 1 1 100%;
	}
}

/* Compare / wishlist / share — reference palette (teal, orange on hover) */
body.layout-43.product-product .product-detail .trip-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #066168;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

body.layout-43.product-product .product-detail .trip-icon-btn:hover {
	background-color: #ffaa0d;
	color: #0d2d31;
}

/* ==========================================================================
   5. Typography - ONE line rhythm for the whole page.
      The tour description is the yardstick (16px / line-height 1.5 = 24px);
      every admin-authored block follows it.  trip.twig used to force
      14px / line-height 1.3 on ".admin-content *" while only <p>/<li> were
      restored from here, which is why two different line spacings appeared.
   ========================================================================== */
body.layout-43.product-product .product-detail .admin-content,
body.layout-43.product-product .product-detail .admin-content p,
body.layout-43.product-product .product-detail .admin-content div,
body.layout-43.product-product .product-detail .admin-content li,
body.layout-43.product-product .product-detail .admin-content span,
body.layout-43.product-product .product-detail .admin-content strong,
body.layout-43.product-product .product-detail .admin-content b,
body.layout-43.product-product .product-detail .admin-content em {
	font-family: Figtree, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #346065 !important;
}

body.layout-43.product-product .product-detail .admin-content a {
	color: #066168 !important;
	text-decoration: underline;
}

body.layout-43.product-product .product-detail .admin-content p,
body.layout-43.product-product .product-detail .admin-content ul,
body.layout-43.product-product .product-detail .admin-content ol {
	margin: 0 0 12px;
}

body.layout-43.product-product .product-detail .admin-content > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   6. HIGHLIGHTS - one rounded dot per line (reference renders a plain <ul>).
   ========================================================================== */
body.layout-43.product-product .product-detail .trip-highlights {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.layout-43.product-product .product-detail .trip-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	/* Item 2 (this round): the extra 8px sat on top of the 24px line box and made
	   the highlight rows 32px apart while every paragraph line on the page is 24px.
	   Dropping it puts the list on the page's own line rhythm. */
	margin-bottom: 0;
}

body.layout-43.product-product .product-detail .trip-highlights li:last-child {
	margin-bottom: 0;
}

body.layout-43.product-product .product-detail .trip-highlights li::before {
	content: "\25CF";
	flex: 0 0 auto;
	color: #066168;
	font-size: 12px;
	line-height: 2;
}

body.layout-43.product-product .product-detail .trip-highlights-note {
	margin-top: 14px;
}
/* ==========================================================================
   7. Included / Excluded - bold label plus tick / cross rows
      (bookingcore: ul.include with mod-icon-check, ul.exclude with
      mod-icon-close).
      The block used to be the "Inclusions" tab pane; it is now the closing
      block of the tour overview, directly above "Scheduled Travel Plan", so it
      carries its own top gap and its rows sit on the page's 24px line rhythm
      (margin-bottom 0, exactly like .trip-highlights).
   ========================================================================== */
body.layout-43.product-product .product-detail .trip-inexclude {
	/* Two columns from ~640px up, stacked below; 40px is the page's wide column
	   gutter and the block starts/ends exactly on the reading column edges (the
	   Bootstrap row grid would inset it 15px). */
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin: 24px 0 10px;
}

body.layout-43.product-product .product-detail .trip-inexclude__col {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 100%;
}

body.layout-43.product-product .product-detail .trip-inexclude__title {
	font-family: Afacad, Figtree, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #066168 !important;
	margin: 0 0 12px;
}

body.layout-43.product-product .product-detail .trip-inexclude__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.layout-43.product-product .product-detail .trip-inexclude__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* Page rhythm: the 16px/1.5 line box is 24px, so no extra row gap (same fix
	   as .trip-highlights li). */
	margin-bottom: 0;
}

body.layout-43.product-product .product-detail .trip-inexclude__list li:last-child {
	margin-bottom: 0;
}

body.layout-43.product-product .product-detail .trip-inexclude__list li > i {
	flex: 0 0 auto;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1;
}

body.layout-43.product-product .product-detail .trip-inexclude__list--include li > i {
	color: #85d200;
}

body.layout-43.product-product .product-detail .trip-inexclude__list--exclude li > i {
	color: #e2453c;
}

/* ==========================================================================
   8. Scheduled Travel Plan - click-to-expand day list.
      Reference (bookingcore .bc-program): card #fff / 1px border / radius 16px
      / padding 16px / margin-bottom 12px, a 28px "+ / -" toggle on the right and
      plain rounded photos inside the expanded body (img.w-75.rounded-lg.mb-3).
      The day badge keeps the current Travlla ring-and-disc treatment; only its
      label changed from "1 / DAY" to "Day1", so the type size is reduced to fit.
   ========================================================================== */
/* Item 3 (this round): "Scheduled Travel Plan" needs air below it before the
   first day card (the heading is margin-less because trip.twig pins
   .custom-title h2 { margin-bottom: 0 }), so the head wrapper carries it. */
body.layout-43.product-product .product-detail .trip-itinerary-head {
	margin-top: 0;
	margin-bottom: 20px;
}

body.layout-43.product-product .product-detail .trip-itinerary-head h2.trip-section-title {
	margin: 0;
}

body.layout-43.product-product .product-detail .trv-section-divider {
	border: 0;
	border-top: 1px solid rgba(6, 97, 104, .2);
	/* Item 3 (this round): the rule now sits ABOVE the section title (it moved in
	   trip.twig), so the space belongs under it instead of above it. */
	margin: 32px 0 18px;
}

/* Item 3: the cream (#fff8eb) itinerary panel is gone.  On the white canvas the
   day cards carry their own shadow, and dropping the 40px inset lines the day
   list up with the description above it. */
body.layout-43.product-product .product-detail .tab-pane#content-itinerary .container {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	margin-bottom: 40px;
	max-width: 100%;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion {
	margin: 0;
	padding: 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-item.itinerary-day {
	background-color: #fff;
	border: 1px solid rgba(6, 97, 104, .18);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 12px;
	box-shadow: 0 2px 10px rgba(6, 97, 104, .05);
	/* Item 3b (this round): the day cards used to carry data-aos="fade-up" and AOS
	   parked every below-the-fold day at opacity:0 (re-hiding them after the layout
	   shift of opening another day).  They are content, so AOS can never fade them. */
	opacity: 1 !important;
	transform: none !important;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-item.itinerary-day:last-child {
	margin-bottom: 0;
}
body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-header {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Day row header: DayN disc + title, toggle pushed to the right */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button:not(.collapsed) {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	text-align: left;
	color: #066168;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button:focus {
	box-shadow: none;
	outline: 0;
}

/* Toggle chip: "+" when closed, filled "-" when open (reference colours) */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button::after {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-left: auto;
	content: "+";
	background: transparent;
	background-image: none;
	border: 1px solid rgba(6, 97, 104, .3);
	border-radius: 50%;
	color: #066168;
	font-family: Figtree, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
	transform: none;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button:not(.collapsed)::after {
	content: "\2212";
	background-color: #066168;
	border-color: #066168;
	color: #fff;
	transform: none;
}

/* Day badge - Travlla 46px orange ring + 38px teal disc, label "DayN" */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-badge {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-badge__disc {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 4px solid #ffaa0d;
	border-radius: 50%;
	background-color: #066168;
	color: #fff;
	font-family: Afacad, Figtree, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-title {
	font-family: Afacad, Figtree, sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: #066168 !important;
}

/* Expanded body — no side padding: the day photo has to reach both edges of
   the card (the reference image is a full-width rounded banner, not a 75%
   thumbnail with empty gutters on each side). */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-body {
	padding: 20px 0 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-photo {
	display: block;
	width: 100%;
	margin-bottom: 16px;
}

/* Day photo: fill the card width and crop to a fixed 16:9 frame.
   object-fit: cover keeps the photo sharp (no stretching / no upscaling) and
   aspect-ratio guarantees the same height for portrait and landscape sources. */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
}

/* Day description - same rhythm as the tour description (16px / 1.5) */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content.itinerary {
	/* the template's inline "margin-left: .5ch" predates the full-width photo */
	margin-left: 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content p,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content div,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content li,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content span,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content strong,
body.layout-43.product-product .product-detail .trip-itinerary-accordion .admin-content b {
	font-family: Figtree, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #066168 !important;
}

/* Day meta icons (bus / breakfast / lunch / dinner) - reference green */
body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-meta {
	margin: 14px 0 0;
	padding: 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #346065;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-meta li:last-child {
	margin-bottom: 0;
}

body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-meta li i {
	color: #85d200;
}

/* ==========================================================================
   9. Responsive margins + column widths.
      Two separate problems are solved here:

      a) margins: the reference lets the paddings shrink with the viewport
         instead of keeping the desktop values (spacing only - the itinerary /
         inclusions structure stays untouched).
      b) the price column: on a 1440px screen the 8/4 grid left the booking
         card 343px wide (263px of usable inner width) with 34px calendar cells,
         which clipped the "$189.99" price label (it needs 36px).  63/37 plus
         the smaller paddings give the sidebar the room the reference has.
   ========================================================================== */
@media (min-width: 992px) {
	/* Item 2: the reference keeps a generous gutter between the tour column and
	   the booking card; 63/37 is what makes the day cards comfortable at 1440px. */
	body.layout-43.product-product .product-detail #content-itinerary > .row {
		--bs-gutter-x: 40px;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-8 {
		flex: 0 0 auto;
		width: 63%;
		max-width: 63%;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-4 {
		flex: 0 0 auto;
		width: 37%;
		max-width: 37%;
	}
}

@media (max-width: 1199px) {
	body.layout-43.product-product .product-detail #productTabsContent {
		border-radius: 16px !important;
		padding: 20px !important;
	}
}

/* 992-1199px the container is only 960px wide, so the calendar cell stays
   around 38px: give the price label one extra pixel of headroom. */
@media (min-width: 992px) and (max-width: 1199px) {
	body.layout-43.product-product .product-detail #inline-datepicker {
		--dp-label-fs: 9px;
	}
}

/* Same idea for small phones: a 36px cell cannot hold a 10px "$189.99". */
@media (max-width: 480px) {
	body.layout-43.product-product .product-detail #inline-datepicker {
		--dp-label-fs: 9px;
	}
}

@media (max-width: 991px) {
	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-item.itinerary-day {
		padding: 14px;
		border-radius: 14px;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-body {
		padding: 16px 0 0;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-photo img {
		border-radius: 10px;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .trip-day-title {
		font-size: 20px !important;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-button {
		gap: 10px;
	}
}

@media (max-width: 767px) {
	body.layout-43.product-product .product-detail #productTabsContent {
		padding: 15px !important;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-item.itinerary-day {
		padding: 12px;
	}
}

/* ==========================================================================
   10. Booking sidebar — reference .trv-tour-single-r-info card
      (#fff · 1px solid rgba(6,97,104,.2) · radius 30px · padding 40px, no shadow)
   ========================================================================== */
body.layout-43.product-product .product-detail .card.bg-white.rounded-3 {
	background-color: #fff;
	border: 1px solid rgba(6, 97, 104, .2) !important;
	border-radius: 30px !important;
	/* Item 5 (this round): the card used to drop its shadow; it now carries the
	   same neutral two layer shadow as the content panel - the value the
	   bookingcore reference page uses on its cards. */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05) !important;
	padding: 24px !important;
	margin-bottom: 30px;
}
/* Responsive paddings must sit AFTER the base rule above, otherwise the base
   "padding: 24px !important" would win again (same specificity, later wins). */
@media (max-width: 1199px) {
	body.layout-43.product-product .product-detail .card.bg-white.rounded-3 {
		border-radius: 16px !important;
		padding: 16px !important;
	}
}

@media (max-width: 767px) {
	body.layout-43.product-product .product-detail .card.bg-white.rounded-3 {
		padding: 16px !important;
	}
}



/* Prices — reference .trv-star-amount (#066168 / 600) with s { color:#ffaa0d } */
body.layout-43.product-product .product-detail .product_page_price .price-new,
body.layout-43.product-product .product-detail .product_page_price #price-special {
	font-family: Afacad, Figtree, sans-serif;
	font-weight: 600;
	color: #066168;
}

body.layout-43.product-product .product-detail .product_page_price #price-old,
body.layout-43.product-product .product-detail .product_page_price .price-old {
	font-family: Afacad, Figtree, sans-serif;
	font-weight: 400;
	color: #ffaa0d;
}

/* Booking form labels / values */
body.layout-43.product-product .product-detail .product_page_price + * ,
body.layout-43.product-product .product-detail .inner-box-desc .model {
	font-family: Figtree, sans-serif;
	color: #346065;
}

body.layout-43.product-product .product-detail .form-label,
body.layout-43.product-product .product-detail .form-group > label {
	font-family: Figtree, sans-serif;
	font-weight: 600;
	color: #066168;
}

/* Options block (webkend catalog/trip.form5) */
body.layout-43.product-product .product-detail #product > h3 {
	font-family: Afacad, Figtree, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #066168;
	padding-bottom: 8px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(6, 97, 104, .2);
}

/* Estimated total + quantity controls follow the reference palette */
body.layout-43.product-product .product-detail #trip-estimated-total {
	font-family: Afacad, Figtree, sans-serif;
	font-weight: 600;
	color: #066168;
}

body.layout-43.product-product .product-detail .trip-qty-button {
	border-color: rgba(6, 97, 104, .2);
	color: #066168;
}

body.layout-43.product-product .product-detail .trip-qty-button:hover {
	background-color: #066168;
	color: #fff;
}

/* ==========================================================================
   11. Related products — reference palette (teal tabs, cream active tab)
      These live in the theme's module area (#content), so the scope stays
      #content here.
   ========================================================================== */
body.layout-43.product-product #content .content-product-bottom > ul.nav.nav-tabs > li > a {
	min-width: 180px;
	text-align: center;
	color: #fff;
	background-color: #066168;
	font-family: Afacad, Figtree, sans-serif;
	font-weight: 500;
}

body.layout-43.product-product #content .content-product-bottom > ul.nav.nav-tabs > li > a.active {
	color: #066168;
	background-color: #fff8eb;
	border-bottom: 3px solid #066168;
}

body.layout-43.product-product #content .related-products .product-image-container,
body.layout-43.product-product #content .related-products .product-image-container a {
	display: block;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
}

/* The related block sits directly under the itinerary panel, so it needs its
   own top gap (the reference separates the two sections by ~48px). */
body.layout-43.product-product #content .content-product-bottom {
	margin-top: 48px;
}

/* No grey surfaces: the tab strip, the cards and the text boxes must all read
   as the page background (the theme paints .product-item-container and
   .right-block with #f7f7f7, which showed as a grey band).

   The travel card of the related block (section 14) is deliberately NOT part of
   this reset: it is a white card with its own elevation, and letting the reset
   flatten it made its white text area merge with the white page. */
body.layout-43.product-product #content .content-product-bottom,
body.layout-43.product-product #content .content-product-bottom > ul.nav.nav-tabs,
body.layout-43.product-product #content .content-product-bottom > .tab-content,
body.layout-43.product-product #content .content-product-bottom #product-related,
body.layout-43.product-product #content .module.related-horizontal,
body.layout-43.product-product #content .related-products,
body.layout-43.product-product #content .product-layout.product-grid,
body.layout-43.product-product #content .product-item-container:not(.trip-related-card),
body.layout-43.product-product #content .product-item-container .left-block,
body.layout-43.product-product #content .product-item-container .right-block {
	background-color: transparent !important;
	box-shadow: none !important;
}

body.layout-43.product-product #content .content-product-bottom > ul.nav.nav-tabs {
	border-bottom: 1px solid rgba(6, 97, 104, .2) !important;
}

/* Product image: white frame, fixed 4:3 crop, no gutters, no distortion. */
body.layout-43.product-product #content .related-products .product-image-container {
	background-color: #fff;
	border-radius: 14px;
	overflow: hidden;
}

body.layout-43.product-product #content .related-products .product-image-container img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

body.layout-43.product-product #content .related-products .product-name a,
body.layout-43.product-product #content .related-products .caption h4 a {
	font-family: Afacad, Figtree, sans-serif;
	font-weight: 500;
	color: #066168;
}

/* ==========================================================================
   12. Booking sidebar — form rows.
       Everything here keeps label + control on predictable lines inside the
       (narrow) price card:

       * #display_room rendered an inline label next to a 10px <select>, so the
         Room row looked misaligned compared with the Tour Date / Pick Up rows
         -> label above the field, exactly like the other rows.
       * the JS-injected room cards (trip.twig builds #room_assignments) contain
         a nested Bootstrap .row whose negative 15px gutters pushed the
         passenger counters ~30px outside the card -> gutters neutralised.
       * the two counters per room are allowed to wrap instead of overflowing.
       * the price table in #selected-date-info gets the full card width.
   ========================================================================== */

/* HIGHLIGHTS heading -> first list item needs a little air (the inline
   ".custom-title h2 { margin-bottom: 0 }" rule would otherwise glue them). */
body.layout-43.product-product .product-detail #productTabsContent .custom-title + ul.trip-highlights {
	margin-top: 12px;
}

body.layout-43.product-product .product-detail .card.bg-white.rounded-3 .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.layout-43.product-product .product-detail .card.bg-white.rounded-3 .row > [class*='col-'] {
	padding-left: 0;
	padding-right: 0;
}

/* Room count: same stacked pattern as the other booking fields. */
body.layout-43.product-product .product-detail #display_room > label {
	display: block;
	width: 100%;
	margin-bottom: 6px;
}

body.layout-43.product-product .product-detail #display_room > select#room_count {
	/* Bootstrap's .w-auto / .d-inline-block utilities are !important */
	display: block !important;
	width: 100% !important;
	min-width: 0;
	height: 38px;
	padding: 6px 12px;
	border-color: rgba(6, 97, 104, .2);
	font-family: Figtree, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #346065;
}

/* Passenger counters inside each room card. */
body.layout-43.product-product .product-detail #room_assignments .d-flex {
	flex-wrap: wrap;
	row-gap: 8px;
}

body.layout-43.product-product .product-detail #room_assignments label {
	margin-bottom: 0;
	white-space: nowrap;
}

body.layout-43.product-product .product-detail #room_assignments small {
	white-space: nowrap;
}

body.layout-43.product-product .product-detail #room_assignments .trip-quantity-control {
	flex: 0 0 auto;
}

/* Date info (room price list) — use the full card width, compact type. */
body.layout-43.product-product .product-detail #selected-date-info {
	padding-left: 0;
	padding-right: 0;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #346065;
}

body.layout-43.product-product .product-detail #selected-date-info table {
	width: 100%;
}

body.layout-43.product-product .product-detail #selected-date-info td {
	padding-right: 8px;
	vertical-align: top;
}


/* ==========================================================================
   13. Price calendar — the selected departure date.
       jQuery UI's base theme (pulled in from the CDN after this file) paints
       the active day cell with its default blue border (#003eff); the Layout 43
       reference marks the chosen departure with the theme's main green
       (soconfig_advanced_store.theme_color = #066168).
   ========================================================================== */
body.layout-43.product-product .product-detail #inline-datepicker .ui-datepicker-calendar td a.ui-state-active,
body.layout-43.product-product .product-detail #inline-datepicker .ui-datepicker-calendar td span.ui-state-active,
body.layout-43.product-product #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
body.layout-43.product-product #ui-datepicker-div .ui-datepicker-calendar td span.ui-state-active {
	/* 2px keeps the ring readable on top of the teal / orange day fills; the
	   day cells are box-sizing: border-box, so the cell geometry stays. */
	border: 2px solid #066168 !important;
}

/* ==========================================================================
   14. Related products — travel card.
       trip.twig renders product/trip_related.twig here instead of the
       ecommerce card: cover-cropped photo (fills the frame for every column
       count the admin picks), duration + discount badges, destination strip,
       price with the struck-through original and a filled "Book Now" button in
       the theme's main green.  The look mirrors the home-page card
       (layout43-theme.css → .layout43-catalog-card) but the class names are
       separate, so the carousel keeps its own (flexible) item widths.

       The card is a white panel with a soft teal elevation: the page canvas is
       white too, so without the shadow the text area (price, title, "Book Now")
       had no edge and reads as if it were floating in the page.
   ========================================================================== */
body.layout-43.product-product #content .related-products .trip-related-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #fff !important;
	border: 0;
	border-radius: 24px;
	/* The card is the only white surface in this block, so its elevation is what
	   separates the white text area from the white page.  It mirrors the home-page
	   card (layout43-theme.css → .layout43-catalog-card) and is pinned with
	   !important for the same reason background-color is: the grey-surface reset
	   of section 12 flattens .product-item-container with !important. */
	box-shadow: 0 14px 30px rgba(6, 97, 104, .12) !important;
	transition: transform .3s ease, box-shadow .3s ease;
}

body.layout-43.product-product #content .related-products .trip-related-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 38px rgba(6, 97, 104, .2) !important;
}

/* Photo frame: fixed height + object-fit cover = automatic fill crop. */
body.layout-43.product-product #content .related-products .trip-related-card__media {
	position: relative;
	display: block;
	height: clamp(180px, 15vw, 230px);
	overflow: hidden;
	background-color: #efffff;
}

body.layout-43.product-product #content .related-products .trip-related-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform .45s ease;
}

body.layout-43.product-product #content .related-products .trip-related-card:hover .trip-related-card__media img {
	transform: scale(1.05);
}

/* Days / nights badge (top left) and discount badge (top right). */
body.layout-43.product-product #content .related-products .trip-related-card__duration {
	position: absolute;
	top: 16px;
	left: 0;
	z-index: 1;
	padding: 8px 14px;
	border-radius: 0 18px 18px 0;
	background-color: rgba(6, 97, 104, .8);
	color: #fff;
	font-family: Figtree, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

body.layout-43.product-product #content .related-products .trip-related-card__sale {
	position: absolute;
	top: 16px;
	right: 0;
	z-index: 1;
	padding: 7px 12px;
	border-radius: 16px 0 0 16px;
	background-color: #ff9f00;
	color: #fff;
	font-family: Figtree, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

/* Destination strip overlapping the bottom of the photo (translucent teal). */
body.layout-43.product-product #content .related-products .trip-related-card__destination {
	position: relative;
	z-index: 1;
	margin-top: -44px;
	min-height: 44px;
	padding: 12px 18px;
	background-color: rgba(4, 70, 72, .55);
	color: #fff;
	font-family: Figtree, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	backdrop-filter: blur(8px);
}

body.layout-43.product-product #content .related-products .trip-related-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px 18px;
}

body.layout-43.product-product #content .related-products .trip-related-card__summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	/* Item 6: the text area is a fixed height so a one-line and a two-line title
	   keep the price and the "Book Now" button on the same line across the row. */
	min-height: 74px;
}

body.layout-43.product-product #content .related-products .trip-related-card__price {
	flex: 0 0 auto;
	color: #ff9f00;
	line-height: 1.05;
}

body.layout-43.product-product #content .related-products .trip-related-card__price strong {
	display: block;
	font-family: Afacad, Figtree, sans-serif;
	font-size: 22px;
	font-weight: 800;
	white-space: nowrap;
}

body.layout-43.product-product #content .related-products .trip-related-card__price small {
	display: block;
	margin-top: 4px;
	color: #346065;
	font-family: Figtree, sans-serif;
	font-size: 12px;
	font-weight: 400;
}

body.layout-43.product-product #content .related-products .trip-related-card__old-price {
	display: block;
	margin-bottom: 4px;
	color: #98a2a3;
	font-family: Figtree, sans-serif;
	font-size: 12px;
	text-decoration: line-through;
}

body.layout-43.product-product #content .related-products .trip-related-card__summary h4 {
	flex: 1 1 auto;
	margin: 2px 0 0;
	font-family: Afacad, Figtree, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	/* Item 6: long titles are clamped to two lines instead of stretching the card. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.layout-43.product-product #content .related-products .trip-related-card__summary h4 a {
	color: #066168;
	text-decoration: none;
}

body.layout-43.product-product #content .related-products .trip-related-card__summary h4 a:hover {
	color: #85d200;
}

body.layout-43.product-product #content .related-products .trip-related-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

/* "Book Now": filled with the theme's main green, white label, no underline. */
body.layout-43.product-product #content .related-products .trip-related-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 20px;
	border: 2px solid #066168 !important;
	border-radius: 24px;
	background-color: #066168 !important;
	color: #fff !important;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

body.layout-43.product-product #content .related-products .trip-related-card__action:hover,
body.layout-43.product-product #content .related-products .trip-related-card__action:focus {
	background-color: #044648 !important;
	border-color: #044648 !important;
	color: #fff !important;
	text-decoration: none !important;
}

body.layout-43.product-product #content .related-products .trip-related-card__rating {
	color: #346065;
	font-family: Figtree, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
}

body.layout-43.product-product #content .related-products .trip-related-card__rating > span {
	display: block;
	color: #ff9f00;
	font-size: 13px;
	letter-spacing: 1px;
}

@media (max-width: 767px) {
	body.layout-43.product-product #content .related-products .trip-related-card__media {
		height: 200px;
	}

	body.layout-43.product-product #content .related-products .trip-related-card__body {
		padding: 14px 16px 16px;
	}

	body.layout-43.product-product #content .related-products .trip-related-card__price strong {
		font-size: 20px;
	}
}



/* ==========================================================================
   15. Map tab: the Google embed keeps the pane width at 16:9.
       The stored code is a Google Maps iframe with fixed attributes
       (width="100%" height="450"): 450px is too tall on a phone and wastes
       the pane on a wide desktop.  CSS beats the presentational width/height
       attributes, so one aspect-ratio rule gives every tour map the same
       shape at every width.  The wrapper div lives in trip.twig
       (.trip-map-embed) because the stored markup is printed verbatim.
   ========================================================================== */
body.layout-43.product-product .product-detail .trip-map-embed {
	width: 100%;
	max-width: 100%;
}

body.layout-43.product-product .product-detail .trip-map-embed iframe {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

/* The stored block ships as <p><iframe …></iframe></p>: drop the paragraph
   margins so the frame sits flush like every other tab block. */
body.layout-43.product-product .product-detail .trip-map-embed p {
	margin: 0;
}

@media (max-width: 991px) {
	body.layout-43.product-product .product-detail .trip-map-embed iframe {
		border-radius: 10px;
	}
}

/* ==========================================================================
   16. Very narrow phones (<=380px).
       This block MUST stay at the very end of the file: it overrides the
       padding values that section 9 (<=767px) and section 10 (<=1199px) set
       later in the cascade - equal specificity means the last rule wins.
       Reclaiming those paddings keeps the 7-column price calendar readable
       (at 360px the price label fits thanks to this rule).
   ========================================================================== */
@media (max-width: 380px) {
	body.layout-43.product-product .product-detail #productTabsContent {
		padding: 10px !important;
	}

	body.layout-43.product-product .product-detail .card.bg-white.rounded-3 {
		padding: 12px !important;
	}

	body.layout-43.product-product .product-detail .tab-pane#content-itinerary .container {
		padding: 12px;
	}
}

/* The responsive Layout 43 booking column already sits inside the page gutter.
   Remove its second Bootstrap gutter so the price calendar keeps one consistent
   page margin plus the card's own readable inner padding. */
@media (max-width: 991px) {
	body.layout-43.product-product .content-main.product-detail {
		padding-right: 2px !important;
		padding-left: 2px !important;
	}

	body.layout-43.product-product .product-detail #productTabsContent {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	body.layout-43.product-product .content-main.product-detail > .row {
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .content-main.product-detail > .row > #content.product-view {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail .content-product-mainheader > .row {
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail .content-product-mainheader > .row > .content-product-right {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail #productTabsContent #tripPhotoGallery {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row {
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-4 {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-4 > .card {
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-8 {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-8 > .container {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-item.itinerary-day,
	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-4 > .card {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	body.layout-43.product-product .product-detail .trip-itinerary-accordion .accordion-body {
		padding-right: 0;
		padding-left: 0;
	}

	body.layout-43.product-product .product-detail .bc-description {
		padding-right: 12px;
		padding-left: 12px;
	}

	/* Keep the date controls in-flow while letting the whole group use the card width. */
	body.layout-43.product-product .product-detail .form-group:has(#inline-datepicker) {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail .form-group:has(#inline-datepicker) #input-date-from,
	body.layout-43.product-product .product-detail .form-group:has(#inline-datepicker) #inline-datepicker {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail #selected-date-info {
		box-sizing: border-box;
		padding-right: 0 !important;
		padding-left: 0 !important;
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	body.layout-43.product-product .product-detail .trip-day-title,
	body.layout-43.product-product .product-detail .trip-meta__value,
	body.layout-43.product-product .product-detail .admin-content {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 380px) {
	body.layout-43.product-product .product-detail #content-itinerary > .row > .col-lg-4 > .card {
		margin-right: 0;
		margin-left: 0;
	}

}