/* =========================================================================
   Asian Star Travel — WooCommerce polish (scoped & conservative)
   Tour archive cards, single-tour title/price/CTA, related, and gentle
   cart / checkout / account harmonisation.

   SAFETY: presentation only. Commerce rules, product data, pricing logic,
   add-to-cart behaviour, payment gateways and checkout inputs are NOT
   restyled or altered. Everything is guarded by body.ast-site so wp-admin
   and the homepage are never touched.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Product / tour archive cards
   ---------------------------------------------------------------------- */
body.ast-site.woocommerce .products .product-small.box,
body.ast-site .products .product-small.box {
	transition: transform .25s ease;
}
body.ast-site .products .product-small .box-image {
	border-radius: var(--ast-radius);
	overflow: hidden;
	box-shadow: var(--ast-shadow-sm);
	transition: box-shadow .25s ease;
}
body.ast-site .products .product-small:hover .box-image { box-shadow: var(--ast-shadow-md); }
body.ast-site .products .product-small .box-image img { transition: transform .5s ease; }
body.ast-site .products .product-small:hover .box-image img { transform: scale(1.05); }

/* Image-frame normalization — one 3:2 frame for every standard product card.
   Upstream, `.box-image img{width:100%}` leaves the frame height tracking each
   photo's natural ratio (catalog thumbnails span ~1.46–1.78), so equal-width
   cards in the same grid render unequal image heights. A fixed 3:2 frame with
   a centered cover crop equalizes them without touching cell widths (owned by
   Flatsome's `large/medium/small-columns-*`), Flickity geometry, or queries.

   Scope: `.products` is the WooCommerce loop container (shop, product
   taxonomy archives incl. /type_tour/ and /location/, product search,
   up-sells/cross-sells wrappers); `.product-home` is the class this child
   theme passes to every custom [ux_products] shelf (recently viewed, explore
   tour, wishlist page). Both require the `.product-small` card, so category
   boxes (`.product-category`), blog cards (`.box-blog-post`), destination
   cards, galleries, cart/checkout/account rows and admin are never matched.
   The height chain runs through the hover-style wrapper (`.image-<hover>`,
   always the frame's first child); `.image-tools`/`.wishlist-icon` overlays
   are later absolutely-positioned siblings and stay untouched. The secondary
   hover image is already absolute-fill upstream and inherits the same frame.
   (Mirrors the accepted Related Tours contract in ast-product-page.css.) */
body.ast-site .products .product-small .box-image,
body.ast-site .product-home .product-small .box-image {
	aspect-ratio: 3 / 2;
}
body.ast-site .products .product-small .box-image > div:first-child,
body.ast-site .products .product-small .box-image > div:first-child > a,
body.ast-site .product-home .product-small .box-image > div:first-child,
body.ast-site .product-home .product-small .box-image > div:first-child > a {
	display: block;
	height: 100%;
}
body.ast-site .products .product-small .box-image > div:first-child img,
body.ast-site .product-home .product-small .box-image > div:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.ast-site .products .product-small .name.product-title,
body.ast-site .products .product-small .woocommerce-loop-product__title {
	font-family: var(--ast-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.22;
}
body.ast-site .products .product-small .name.product-title a { color: var(--ast-navy); }
body.ast-site .products .product-small .name.product-title a:hover { color: var(--ast-gold-ink); }

/* Price — gold ink, confident weight. */
body.ast-site .price,
body.ast-site .price-wrapper .price,
body.ast-site .woocommerce-Price-amount.amount {
	color: var(--ast-gold-ink);
	font-weight: 600;
}
body.ast-site .price del .woocommerce-Price-amount { color: var(--ast-body); font-weight: 400; }
body.ast-site .price ins .woocommerce-Price-amount { color: var(--ast-gold-ink); }

/* Category / meta chips. */
body.ast-site .products .product-small .category { color: var(--ast-body); letter-spacing: .04em; }

/* -------------------------------------------------------------------------
   2. Buttons — Flatsome/Woo primary buttons → gold pill (non-destructive)
   Scoped to shop contexts; excludes tiny utility & quantity controls.
   ---------------------------------------------------------------------- */
body.ast-site .button.primary:not(.is-outline),
body.ast-site a.button.primary:not(.is-outline),
body.ast-site button.button.primary:not(.is-outline),
body.ast-site .single_add_to_cart_button,
body.ast-site .checkout-button,
body.ast-site #place_order {
	background-color: var(--ast-gold);
	border-color: var(--ast-gold);
	color: var(--ast-navy-deep);
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .01em;
	box-shadow: 0 8px 22px rgba(212, 175, 55, .26);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.ast-site .button.primary:not(.is-outline):hover,
body.ast-site .single_add_to_cart_button:hover,
body.ast-site .checkout-button:hover,
body.ast-site #place_order:hover {
	background-color: #c6a233;
	border-color: #c6a233;
	color: var(--ast-navy-deep);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(212, 175, 55, .38);
}
/* Secondary / outline buttons → navy outline. */
body.ast-site .button.is-outline.primary {
	color: var(--ast-navy);
	border-color: var(--ast-navy);
	border-radius: 999px;
}
body.ast-site .button.is-outline.primary:hover { background: var(--ast-navy); color: #fff; }

/* -------------------------------------------------------------------------
   3. Single product / tour
   ---------------------------------------------------------------------- */
body.ast-site.single-product .product-gallery-slider,
body.ast-site.single-product .woocommerce-product-gallery__image { border-radius: var(--ast-radius); overflow: hidden; }

/* Gallery pre-Flickity dimension reservation (AST-PRODUCT-GALLERY-DIMENSION-
   CLS-STABILIZATION1). WooCommerce hard-crops every gallery slide — the main
   image and every secondary image — to the same registered size: confirmed
   live as `width="600" height="338"` on every <img> in both the Central
   Vietnam Heritage and Hanoi Airport Fast Track galleries, across three
   different source photos. That is this catalog's real, uniform gallery
   contract (300:169, ~16:9), not an assumed ratio.

   Before Flickity attaches (it adds `.flickity-enabled` to this same
   element), every slide is still a plain block-flow child of the wrapper, so
   the wrapper's rendered height depends on how many slides have loaded
   rather than on the one active slide Flickity will show — measured live to
   differ from the settled post-init height by 37-70px on Hanoi Airport Fast
   Track (240px -> 203px at a 390px viewport; 452px -> 382px at 1440px).
   Reserving the registered crop ratio up front, and keeping every slide but
   the first out of flow, makes the pre-init box equal the post-init box, so
   Flickity's own adaptiveHeight settlement becomes a no-op instead of a
   visible reflow of everything below the gallery (thumbnails, quick-fact
   chips, Overview, the booking card on mobile).

   Gated on `html.js` (Flatsome's own no-js/js swap, set at wp_head priority
   0 — the same gate `ast-product-page.css` already uses for the mobile
   booking-card reorder) so a visitor with JavaScript disabled, for whom
   `.flickity-enabled` is never added, is never limited to one slide — they
   see the original stacked, all-images-visible fallback exactly as before.
   Once `.flickity-enabled` is present this whole block stops matching, so
   Flickity's own post-init behaviour is completely untouched. */
html.js body.ast-site.single-product .product-gallery-slider:not(.flickity-enabled) {
	position: relative;
	aspect-ratio: 600 / 338;
}
html.js body.ast-site.single-product .product-gallery-slider:not(.flickity-enabled) .woocommerce-product-gallery__image {
	position: absolute;
	inset: 0;
	margin: 0;
}
html.js body.ast-site.single-product .product-gallery-slider:not(.flickity-enabled) .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}
html.js body.ast-site.single-product .product-gallery-slider:not(.flickity-enabled) .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
html.js body.ast-site.single-product .product-gallery-slider:not(.flickity-enabled) .woocommerce-product-gallery__image:not(:first-child) {
	/* !important: Flickity's constructor sets inline styles on each cell as
	   part of its own (synchronous, pre-flickity-enabled) DOM prep, which
	   would otherwise outrank this rule regardless of selector specificity —
	   confirmed live, without !important the non-first slides stayed
	   display:block. Reserving the box (position/aspect-ratio above) already
	   fixes the height instability on its own; this rule is a smaller,
	   separate guarantee that the FIRST slide is what's actually visible
	   during the pre-init window, not whichever slide happens to paint last. */
	display: none !important;
}

body.ast-site.single-product .product-page-price .price-main,
body.ast-site.single-product .custom-single-price-wrapper .price { color: var(--ast-gold-ink); }
body.ast-site.single-product .price-from-label { color: var(--ast-body); }

/* Tabs → gold active underline, quiet inactive.
   NOT corrected to the compound `body.ast-site.single-product` selector
   (AST-SINGLE-PRODUCT-CSS-SELECTOR-CORRECTION1): confirmed live on both
   representative tour products that WooCommerce's own `.woocommerce-tabs
   .nav-tabs` is unhooked and never rendered on this template (replaced by
   the `.ast-accordion` Overview / Itinerary / What's Included sections), so
   that half of the rule has no target either way. `.nav-line` DOES exist
   elsewhere on the page — the itinerary's North/Central/Southern region
   selector (`nav nav-line nav-vertical`) — but that widget already carries
   Flatsome's own active-state styling (a `--fs-color-primary` right-edge
   accent bar via `.nav-vertical.nav-line>li>a:before`, sized for a vertical
   list). Correcting the selector here would layer this rule's navy text +
   bottom-inset gold underline (a horizontal-tab treatment) on top of that
   unrelated vertical widget, producing double/conflicting active-state
   styling nobody has reviewed. Left broken deliberately; scope a separate
   design pass if the itinerary widget's active state should change. */
body.ast-site .single-product .woocommerce-tabs .nav-tabs > li > a,
body.ast-site .single-product .nav-line > li > a { color: var(--ast-body); }
body.ast-site .single-product .woocommerce-tabs .nav-tabs > li.active > a,
body.ast-site .single-product .nav-line > li.active > a { color: var(--ast-navy); box-shadow: inset 0 -2px 0 0 var(--ast-gold); }

/* Section titles (related / upsells).
   body.ast-site .product-section-title (0,2,0) beats Flatsome's
   `.product-section-title` (0,1,0); the display font holds without !important. */
body.ast-site .product-section-title {
	font-family: var(--ast-display);
	font-weight: 700;
	color: var(--ast-navy);
	letter-spacing: 0;
	text-transform: none;
}
body.ast-site .product-section-title:after,
body.ast-site .product-section-title:before { border-color: var(--ast-hair); }

/* Sale flash badge. */
body.ast-site .sale-flash,
body.ast-site .onsale {
	background: var(--ast-navy);
	color: #fff;
	border-radius: 999px;
	font-family: var(--ast-sans);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. Cart — table hairlines, totals, actions
   ---------------------------------------------------------------------- */
body.ast-site.woocommerce-cart .cart_totals h2,
body.ast-site.woocommerce-checkout .woocommerce h3,
body.ast-site.woocommerce-checkout #order_review_heading {
	font-family: var(--ast-display);
	color: var(--ast-navy);
	font-weight: 700;
}
body.ast-site.woocommerce-cart table.cart,
body.ast-site .woocommerce table.shop_table {
	border-color: var(--ast-hair);
	border-radius: var(--ast-radius-sm);
	overflow: hidden;
}
body.ast-site .woocommerce table.shop_table th { color: var(--ast-navy); }
body.ast-site .cart-sidebar,
body.ast-site .cart_totals { border-radius: var(--ast-radius); }

/* -------------------------------------------------------------------------
   5. Checkout — headings & place-order only; inputs / gateways UNTOUCHED
   ---------------------------------------------------------------------- */
body.ast-site.woocommerce-checkout .col-name .row-title,
body.ast-site.woocommerce-checkout h3#order_review_heading { color: var(--ast-navy); }
/* Keep form fields at native Woo styling to preserve validation UX; only the
   focus ring is brand-aligned (from ast-site-shell.css). No changes to
   .wc_payment_methods, payment radios, or gateway iframes. */

/* -------------------------------------------------------------------------
   6. My Account
   ---------------------------------------------------------------------- */
body.ast-site.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.ast-site.woocommerce-account .account-nav li.is-active a { color: var(--ast-gold-ink); font-weight: 600; }
body.ast-site.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--ast-gold-ink); }
body.ast-site.woocommerce-account .woocommerce-MyAccount-content { border-radius: var(--ast-radius); }

/* -------------------------------------------------------------------------
   7. Notices — on-brand success / error / info
   ---------------------------------------------------------------------- */
body.ast-site .woocommerce-message { border-top-color: var(--ast-gold); }
body.ast-site .woocommerce-info { border-top-color: var(--ast-navy); }