/* ============================================================================
   Layout 43 - Mobile compliance layer                    round 19 / Phase A
   ----------------------------------------------------------------------------
   The desktop Layout 43 has no phone definition of its own, so on a narrow
   viewport it kept its desktop look: 14px Figtree body copy, a 28-38px heading
   scale, 38px buttons, 36px filter controls and multi-column grids.

   This file is a PURE CSS compliance overlay.  It is loaded only from the
   Layout 43 branch of common/header.twig and every rule is guarded twice:
     1. `@media (max-width: 639px)`  - the base breakpoint of rule 九;
     2. `body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5)`
   so it can never affect
       - the desktop rendering at >= 640px, or
       - the mobile templates 4 / 5 (which own their own layers).

   Clause map (.clinerules mobile rules)
     二.2 gutter 16px           二.3 single column       二.4 no h-scroll
     二.5 drawer nav            二.6 full-width cards     二.7 safe area
     三.1 touch >= 48px         三.2 >= 12px spacing
     四.1 16px body             四.3 18-24px headings    四.4 line-height 1.5-1.8
     四.5 inputs >= 16px        四.6 Roboto
     六   images                七.5 no horizontal tabs
   ========================================================================== */

@media (max-width: 639px) {

/* ---- 0. scope + design tokens ------------------------------------------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) {
  --l43m-gutter: 16px;   /* 二.2 the page gutter                          */
  --l43m-touch:  48px;   /* 三.1 minimum touch target                     */
  --l43m-body:   16px;   /* 四.1 body copy                                */
  --l43m-title:  24px;   /* 四.3 h1                                       */
  --l43m-h2:     20px;   /* 四.3 h2                                       */
  --l43m-h3:     18px;   /* 四.3 h3 / h4                                  */
  --l43m-meta:   12px;   /* 四.2 secondary text                           */
  --l43m-radius: 12px;   /* 六.2 card radius                              */
  --l43m-space:  8px;    /* 二.1 8dp grid                                 */
  max-width: 100%;
  overflow-x: hidden;    /* 二.4 */
}

/* ---- 1. page gutter = 16px (二.2) --------------------------------------
   Bootstrap stacks the 15px container padding on top of the 15px column
   padding, so the first text pixel used to land at 30px.  Keep 16px on the
   container and drop the matching column padding for the *top-level* row
   only, so the content edge is exactly 16px without flattening nested grids. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper > .container,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container.content-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: var(--l43m-gutter);
  padding-right: var(--l43m-gutter);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper > .container > .row,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container.content-main > .row {
  margin-left: 0;
  margin-right: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper > .container > .row > [class*="col-"],
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container.content-main > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* ---- 2. single column everywhere (二.3 / 二.6) --------------------------
   Every Bootstrap column inside a page container is forced to its own row.
   Carousels are untouched: Swiper uses `.swiper-slide`, not `.col-*`. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container .row {
  margin-left: 0;
  margin-right: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container [class*="col-"] {
  box-sizing: border-box;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  float: none !important;
  padding-left: 0;
  padding-right: 0;
}
/* Sidebars become full-width blocks above the content (二.3). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #column-left,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #column-right {
  display: block;
  width: 100%;
  margin: 0 0 var(--l43m-gutter);
}

/* ---- 3. no horizontal page scroll (二.4) -------------------------------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper {
  max-width: 100%;
  overflow-x: hidden;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) img,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) video,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) iframe {
  max-width: 100%;
}

/* ---- 4. typography: Roboto + 16px body + 18-24px headings (四) ---------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) {
  font-family: "Roboto", Figtree, Arial, sans-serif;   /* 四.6 */
  font-size: var(--l43m-body);                          /* 四.1 */
  line-height: 1.6;                                     /* 四.4 */
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(p, li, dd, dt, td, th, label, blockquote) {
  font-size: var(--l43m-body);
  line-height: 1.6;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(small, .text-muted, .meta, .date) {
  font-size: var(--l43m-meta);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) h1,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) .current-name {
  font-size: var(--l43m-title) !important;
  line-height: 1.3 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) h2 {
  font-size: var(--l43m-h2) !important;
  line-height: 1.35 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(h3, h4) {
  font-size: var(--l43m-h3) !important;
  line-height: 1.4 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(h5, h6) {
  font-size: var(--l43m-h4) !important;
}
/* Legacy 28-38px display headings used inline on the category / breadcrumb bars. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(.title-category, .title-underline, .bc-heading-section, .page-title, .title-product) {
  font-size: var(--l43m-title) !important;
  line-height: 1.3 !important;
}

/* ---- 5. forms + touch targets (四.5 / 三.1 / 三.2) ---------------------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(input, select, textarea) {
  font-size: 16px !important;            /* 四.5 - also stops iOS zoom-in */
  min-height: var(--l43m-touch);
  max-width: 100%;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(input[type="checkbox"], input[type="radio"]) {
  min-height: 0;
  width: 24px;
  height: 24px;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(.btn, button, input[type="submit"], input[type="button"], .nav-link) {
  min-height: var(--l43m-touch);         /* 三.1 */
  min-width: var(--l43m-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) .btn-group,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(.buttons, .form-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                             /* 三.2 */
  align-items: center;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) .pagination > li > a,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--l43m-touch);
  min-height: var(--l43m-touch);
  padding: 0 12px;
}



/* ---- 6. images (六) ----------------------------------------------------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) img {
  max-width: 100%;
  height: auto;
}
/* Card media keeps a fixed ratio and never stretches (六.4). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(.product-item-container .left-block, .product-thumb .image, .layout43-catalog-card__media, .blog-item .image, .article-image) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- 7. no horizontal tab strips (七.5) -------------------------------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(#productTabs, .nav-tabs, .nav-pills) {
  display: flex;
  flex-direction: column;               /* 七.5 */
  flex-wrap: wrap;
  overflow: visible;
  border: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(#productTabs, .nav-tabs, .nav-pills) .nav-item {
  flex: 0 0 100%;
  max-width: 100%;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(#content, .content-main, .product-detail) :is(#productTabs, .nav-tabs, .nav-pills) .nav-link {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
}

/* ---- 8. navigation stays in the existing collapse drawer (二.5) --------- */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #header.travlla43-header .layout43-menu-toggle {
  min-width: var(--l43m-touch);
  min-height: var(--l43m-touch);
  width: var(--l43m-touch);
  height: var(--l43m-touch);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #layout43-navigation a {
  min-height: var(--l43m-touch);
  display: flex;
  align-items: center;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #header.travlla43-header .travlla43-icons > li > a {
  min-width: var(--l43m-touch);
  min-height: var(--l43m-touch);
  width: var(--l43m-touch);
  height: var(--l43m-touch);
}

/* ---- 9. full-bleed media + safe area (六.1 / 二.7) ---------------------- */
/* Home hero / banner rows go edge-to-edge instead of keeping a page gutter. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(.home-slider, .trv-banner, .banners-effect-4 .banner) {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(.home-slider, .trv-banner) img {
  width: 100%;
  object-fit: cover;
}
/* Fixed bottom furniture must clear the home indicator (二.7). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) :is(.scroltop, .back-to-top, footer.site-footer, .footer-bottom) {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) footer.site-footer .container {
  padding-left: var(--l43m-gutter);
  padding-right: var(--l43m-gutter);
}

/* ---- 10. fixes found while testing desktop 43 at phone width (round 19b) ----
   10.1  The broad rule in section 5 gave EVERY button `min-width:48px`.  Inside
         the trip stepper the "−/+" buttons then ate the whole row and the number
         input collapsed: measured `.trip-qty-input` width = 4px ("人数被挤得看不见").
         Rule 三.1 is honoured by widening the *control* instead, so button /
         input / button each keep a 48px target.
        ROUND 21 correction: round 19 widened the ONE-DAY row as well, where Adult
         and Children share `#num_people .trip-one-day-people`.  Giving every
         `.trip-person-group` `flex:1 1 100%` + `flex-wrap:wrap` pushed each
         counter below its own label and left the two counters at different
         heights (measured groups 78px vs 88px, counters 5px apart) and 163px
         wide against the desktop 98px.  The one-day row now stacks
         label-over-counter inside each group and bottom-aligns the two groups,
         while the >1-day room cards (plain `.d-flex`, no `.trip-person-group`)
         keep the widened control.
   10.2  Section 1 only compensated the gutter on TOP-LEVEL containers, while
         section 2 removed the padding of EVERY nested column.  A nested
         `.container` therefore lost its gutter: measured the "Include" block at
         left=2 while its sibling context sat at left=14.  Give nested containers
         the same gutter back. */

/* 10.1a  One-day tours (days = 1): Adult left, Children right, one line each. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-one-day-people {
  flex-wrap: nowrap;
  align-items: stretch !important;   /* beats Bootstrap .align-items-center */
  gap: 12px;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-person-group {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start !important; /* beats Bootstrap .align-items-center */
  justify-content: flex-end;
  gap: 8px;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-person-group > label {
  margin-right: 0 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-person-group .trip-quantity-control {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: var(--l43m-touch);
  min-height: var(--l43m-touch);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-person-group .trip-quantity-control > :is(button, .btn) {
  flex: 0 0 var(--l43m-touch);
  width: var(--l43m-touch);
  min-width: var(--l43m-touch);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #num_people .trip-person-group .trip-quantity-control > :is(input, .form-control) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: center;
}

/* 10.1b  Multi-day tours: one counter pair per room card in #room_assignments. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #room_assignments .trip-quantity-control {
  flex: 1 1 auto;
  width: auto;
  min-width: calc(var(--l43m-touch) * 3);
  max-width: 100%;
  height: var(--l43m-touch);
  min-height: var(--l43m-touch);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #room_assignments .trip-quantity-control > :is(button, .btn) {
  flex: 0 0 var(--l43m-touch);
  width: var(--l43m-touch);
  min-width: var(--l43m-touch);
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #room_assignments .trip-quantity-control > :is(input, .form-control) {
  flex: 1 1 var(--l43m-touch);
  width: auto;
  min-width: var(--l43m-touch);
  text-align: center;
}

body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container .container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: var(--l43m-gutter);
  padding-right: var(--l43m-gutter);
}

/* 10.3  layout43-trip.css pins the trip page to a 2px page gutter with
         `!important` at <=991px; round 19b overrode that with this layer's 16px
         (rule 二.2) because the "Include" block looked flush next to a 14px
         context.  Round 25: the owner explicitly asked for the trip page's own
         2px face on the phone (tab strip / tab panel / price calendar / related
         block), so the 2px gutter is re-asserted here instead - the deviation
         from 二.2 is intentional and stays scoped to the trip pane.
         #productTabsContent stays at 0 left/right so the gutter is not applied
         twice (its content then sits exactly 2px inside the frame). */
html body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .content-main.product-detail:has(#productTabs) {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
html body.layout-43.product-product:not(.mobilelayout-4):not(.mobilelayout-5) .product-detail #productTabsContent {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- 11. home carousels: the viewport-height stretch (round 20) ----------
   11.1  Swiper's own stylesheet pins `.swiper-wrapper{height:100%}` and nothing
         above the wrapper in the Layout 43 chain is definite, so the browser
         resolved that percentage against the *viewport*: measured the "Popular
         Destination" tile at 353x844 on a 390x844 phone, i.e. exactly the whole
         screen, and each "Popular Tours" card with it.  The height chain is
         neutralised for every width in layout43-theme.css (round 20 block), so
         the desktop fixes the same defect; here the phone only needs the tile
         ratio.
   11.2  Keep the portrait 3/4 ratio the mobile layouts 4/5 already use
         (somobile/css/travlla5.css section 7): 353x471 instead of 353x844, so
         the photo is cropped rather than stretched. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-categories-module .trv-destination-bx1 .trv-media {
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
}

/* ---- 12. home search pill: passenger stepper overflow (round 21) ---------
   12.1  Section 5 gives every button `min-width:48px` (rule 三.1).  The vendor
         travellers stepper keeps its two 24px glyph buttons inside a
         `.input-group-btn-vertical` that Bootstrap-Touchspin pins to
         `width:1%`, so the 48px buttons spilled out of the white card and the
         "−" was clipped: measured the "+" button right edge at 388px while the
         card ends at 356px on a 390px viewport.  Let the stepper own the row and
         the input shrink instead, so both 48px targets stay inside the pill.
   12.2  `.bootstrap-touchspin` is `display:table` in the vendor sheet; the flex
         row below keeps the input and the two buttons on one line without the
         `width:1%` squeeze.  Only the travellers group is touched - the city
         dropdowns and the date field keep their vendor metrics. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-search-st1 .trv-search-st1-column .btn-quantity2 {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-search-st1 .trv-search-st1-column .btn-quantity2 .bootstrap-touchspin {
  display: flex;
  flex-wrap: nowrap !important;      /* Bootstrap `.input-group` wraps by default */
  align-items: center;
  width: 100%;
  max-width: 100%;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-search-st1 .trv-search-st1-column .btn-quantity2 .bootstrap-touchspin > input.form-control {
  flex: 1 1 0;                        /* the input gives way to the two 48px buttons */
  width: auto !important;
  min-width: 0;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-search-st1 .trv-search-st1-column .btn-quantity2 .input-group-btn-vertical {
  position: static;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  margin-left: 12px;
  white-space: nowrap;
}

/* ---- 13. tour-card overlays + trust logo wall (round 24, desktop parity) ---
   Tour cards paint three labels over the photo:
     .trv-tour-duration   the "1 Day" chip
     .home43-tour-sale    the discount badge
     .trv-tour-title      the destination strip along the photo bottom
   The DESKTOP card is the reference the design compares against.  Measured on
   common/home at 1440px the three overlays render:
     .trv-tour-duration   rgba(6,97,104,.8)    backdrop-filter:none
     .home43-tour-sale    rgba(255,170,13,.8)  backdrop-filter:none
     .trv-tour-title      rgba(6,97,104,.5)    backdrop-filter:none
   (the two chips come from `layout43-theme.css` L722 / L723, which win the
   cascade because their `body.common-home.layout-43.header-43 ...` selector is
   the most specific; the strip comes from `layout43.css` L14774.)
   Below 640px this file used to repaint a DIFFERENT set - the vendor's frosted
   `rgba(6,97,104,.31)+blur(7px)` strip plus two fully OPAQUE chips (`#066168` /
   `#ffaa0d`) - so the phone cards did not match the desktop cards.  Re-assert
   the exact desktop values here so the overlay transparency is identical at
   every width. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-tour-duration,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-listing-tabs .trv-tour-duration,
body.common-home.layout-43.header-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-tour-duration {
  background: rgba(6, 97, 104, .8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .home43-tour-sale,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-listing-tabs .home43-tour-sale,
body.common-home.layout-43.header-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .home43-tour-sale {
  background: rgba(255, 170, 13, .8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-popular-tour-st1 .trv-media .trv-tour-title,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-listing-tabs .home43-tour-location {
  background: rgba(6, 97, 104, .5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- 14. "Trusted by Travellers" achievement block (round 22) ---------------
   The vendor stacks a 640px video stage and pins the counter sheet to its bottom
   (`autumn.css`: `.trv-achivment-row{overflow:hidden}`,
   `.parallax-section{height:640px;background:#000}`,
   `.trv-vid-st2-counter{height:160px;position:absolute;bottom:0;background:rgba(6,97,104,.62);
    backdrop-filter:blur(5px)}`, below 1199px `height:auto`).
   The four counters are `col-lg-3 col-md-6 col-sm-6 col-6`, i.e. TWO per row on a
   phone - but section 2 of this file forces every Bootstrap column to 100%, which
   turned them into a 481px column; because the sheet is bottom-anchored it grew
   upwards, buried the video stage and dropped the round play button on top of the
   numbers.  Give this one grid back its vendor rhythm. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #wrapper .container .trv-vid-st2-counter [class*="col-"] {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  padding-left: 8px;
  padding-right: 8px;
  /* the vendor utility `m-b30` (30px) is too tall for a two-row phone grid and
     is what pushed the sheet's top edge back up into the play button */
  margin-bottom: 12px !important;
}
/* The vendor hides the photo behind the stage below 767px only through
   `background-position:35%`; keep the sheet's own padding readable on a phone. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-achivment-section .trv-vid-st2-counter {
  padding: 20px 12px 16px;
}

/* Trusted-by wall: rule 六.5 gives every content image `height:auto`, which also
   hit `.client-logo img` and shrank the vendor's fixed 45px brand marks to
   ~32px, so the row lost its rhythm and every logo came out a different size.
   Logos are brand marks, not content photography - keep the vendor height. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-client-carousel .client-logo img,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .trv-client-carousel .client-logo-media img {
  width: auto !important;
  height: 45px !important;
  max-width: 100%;
  object-fit: contain;
}

/* ---- 15. round 25: tab strip / price card / related block on the 2px face ----
   The owner marked the phone screenshots (tab strip, price calendar, related
   products) and asked for the same face on all of them: the box touches the
   screen edge and its content sits 2px inside it.  The trip sheet already uses
   that face between 640px and 991px - layout43-trip.css pins the page gutter to
   2px and drops the panel's left/right padding - so this section only has to
   carry the same numbers into the <=639px band, where section 10.3 used to
   re-assert 16px.  Measured before this round at 390px:
     tab links   342x52, one per row, 5 rows      -> 3 per row, 2 rows
     price card  padding 16px 12px + 1px border   -> calendar 13px from the edge
     calendar    17px under the date input        -> 2px
     related     .content-product-bottom pad 15px -> cards started 31px in
   Selectors stay on ids / class pairs that exist on these two pages only. */

/* 15.1 tab strip: 2px padding, three tabs per row (5 tabs -> 2 rows).
   Section 7 of this file forces every `.nav-item` to 100% AND turns the strip
   into a column (七.5 "no horizontal tab strips"); the owner wants a wrapping
   3-up grid here instead, so the direction is flipped back to a row and the
   width is set on the item (the offset is the strip's own 1px `gap`). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #productTabs {
  flex-direction: row !important;
  padding: 2px !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #productTabs .nav-item {
  flex: 0 0 calc((100% - 2px) / 3) !important;
  max-width: calc((100% - 2px) / 3) !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #productTabs .nav-item .nav-link {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 4px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  border-radius: 6px 6px 0 0 !important;
  white-space: nowrap !important;
}

/* 15.2 price card: the calendar keeps 2px to the card edge.
   `.card.bg-white.rounded-3` is 16px 12px on a phone (layout43-trip.css section
   9/10), which left the calendar 13px inside the frame.  `.card.card` is there
   on purpose: layout43-trip.css pins the side paddings through
   `body.layout-43.product-product .product-detail #content-itinerary > .row >
   .col-lg-4 > .card` (1 id / 6 classes), which outranks a plain `.card`. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-detail #content-itinerary > .row > .col-lg-4 > .card.card {
  padding: 2px !important;
  border-radius: 8px !important;
}
/* The date row was 17px tall: `.mt-2` on #inline-datepicker (5px in this theme,
   1rem = 10px) plus the form-group's 12px row-gap.  Cancel the gap for this one
   row and give it back to the label, so input -> calendar is exactly 2px. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content-itinerary .form-group:has(#inline-datepicker) {
  row-gap: 0 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content-itinerary .form-group:has(#inline-datepicker) > label {
  margin-bottom: 12px;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #inline-datepicker {
  margin-top: 2px !important;
}

/* 15.3 related products: flush, so the cards start 2px from the screen edge.
   The block carried 15px of its own padding on top of the page gutter. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content .content-product-bottom {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 15.4 category listing: same face.  The page gutter goes to 2px and the
   Bootstrap row/column side margins are removed, because `.products-list.row`
   keeps its -12px gutter and each `article.product-layout` its 12px margin -
   measured 375px wide at left=16 on a 390px screen, i.e. 8px of every card was
   clipped by `overflow-x:hidden` (rule 二.4) and the right edge never showed.
   NOTE (round 28): the 2px page gutter stays as the base, but the listing itself
   now carries the 12px inner gutter of §17.3, so the phone face reads 14px -
   exactly like every block on the trip product page.  If this 2px ever changes,
   §17.3 must change with it (same lockstep trap as §18.1). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .container.product-listing.content-main {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing .products-list.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing article.product-layout {
  box-sizing: border-box;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing .layout43-catalog-card__destination,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing .layout43-catalog-card__body {
  padding: 2px !important;
}

/* ---- 16. round 26: 2+3 tabs / include gutter / city strip height ------------
   Three follow-ups on the same 2px face:
   16.1  the five tabs must read 2 + 3, not 3 + 2: the first two items take half
         the bar each, items 3..5 a third.  (Measured before: row1=3, row2=2.)
   16.2  the "Include / Excluded" block sat flush (left = 2) while the text above
         it is inset by `.bc-description { padding-inline: 12px }` (measured text
         at left = 14, list items at left = 2) - the block now carries the same
         12px inner gutter so both columns line up.
   16.3  the category card's city strip (`.layout43-catalog-card__destination`)
         lost its height when round 25 turned all of its padding into 2px
         (measured 26px, was 47px).  The vertical padding goes back to 12px; the
         horizontal stays on the 2px face.
   ------------------------------------------------------------------------- */

/* 16.1 five tabs -> a row of 2, then a row of 3 */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #productTabs .nav-item:nth-child(-n+2) {
  flex: 0 0 calc((100% - 1px) / 2) !important;
  max-width: calc((100% - 1px) / 2) !important;
}
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #productTabs .nav-item:nth-child(n+3) {
  flex: 0 0 calc((100% - 2px) / 3) !important;
  max-width: calc((100% - 2px) / 3) !important;
}

/* 16.2 Include / Excluded keeps the inner gutter of the text above it.
   On the phone band this is now done at the container level by §17.1 (which
   insets the whole `.container`, so the itinerary below the list lines up too);
   §16.4 keeps the tablet band (640..991px) aligned, where `.bc-description`
   still carries its own 12px padding. */

/* 16.3 category city strip keeps its height (longhands win over 15.4's shorthand) */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing .layout43-catalog-card__destination {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ---- 17. round 27: ONE left/right gutter for every content block -----------
   The owner wants the whole phone face to keep a single edge: the description
   text sits at 2px page gutter + 12px (`.bc-description`), while the itinerary,
   the FAQ, the price/booking card and the related products were still flush on
   the 2px gutter (measured at 476px: description text x=14, all of those blocks
   x=2..467).  Every content block now carries the same 12px inner gutter so the
   cards line up with the paragraph above them.  The full-bleed layer (photo
   gallery + tab strip) intentionally stays flush - it is the band the owner
   already signed off on.
   ------------------------------------------------------------------------- */

/* 17.1 the column containers: itinerary head + divider + include + accordion
   (inside the plain `.container`), the FAQ block, and the price/booking card.
   `.product-faq` and `.custom-title` are direct children of `.col-lg-8`; the
   tablet band is handled separately by §16.4. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content-itinerary .col-lg-8 > .container,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content-itinerary .product-faq,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .product-detail #content-itinerary > .row > .col-lg-4 > .card.card {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* 17.2 related products: same gutter, so the cards start at 14px instead of 2px
   (padding rather than margin keeps the block's own box rules from 15.3). */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content .content-product-bottom {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 17.3 category listing (round 28): the owner wants the trip category page to
   keep the same edge as the trip product page.  §15.4 pins the page gutter to
   2px for the whole `.container.product-listing` face (so the product grid row
   had to drop its negative margins), which left every card flush: measured at
   476px the heading, the toolbar, `article.product-layout`, its media/img, the
   city strip and the body all started at x=2, while the trip product page text
   starts at 14.  The listing wrapper - the only child of `#content.col-sm-12`,
   `.products-category` - now takes the same 12px inner gutter, so heading +
   toolbar + every card + pagination read 2 + 12 = 14 and line up with the trip
   product page blocks.  Scoped to `body.product-category`, so search/special
   listings keep whatever face they have today. */
body.layout-43.product-category:not(.mobilelayout-4):not(.mobilelayout-5) .product-listing .products-category {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

}

/* end @media (max-width: 639px) */

/* 16.4 16.2 for the tablet band: `layout43-trip.css` keeps
   `.bc-description { padding-right/left: 12px }` active up to 991px, so between
   640px and 991px the include/exclude list sat 12px left of its own context
   (measured at 744px: description text x=113, list x=101).  The phone band is
   covered by §17.1 instead (container margin), hence the 640px lower bound - a
   plain `max-width: 991px` would stack on top of §17.1 and push the list to 26px.
   From 992px up both blocks are flush, so the desktop face is untouched. */
@media (min-width: 640px) and (max-width: 991px) {
  body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) #content-itinerary .trip-inexclude {
    padding-left: 12px;
    padding-right: 12px;
  }
}