/*
 * Tirta Ayu Spa Hardcoded — supplementary theme CSS.
 *
 * The bulk of the visual design (colors, spacing, typography) comes from the
 * original Jupiter X / Elementor stylesheets linked in header.php. This file
 * only adds what's needed now that the Elementor / Jupiter X / JetEngine JS
 * that used to drive certain interactions is no longer loaded:
 *   1. Mobile nav menu open/close (Jupiter X's "Raven" header JS is gone).
 *   2. The 3 site-wide popups (gift voucher, gift package, book appointment)
 *      that used to be opened by the JetPopup plugin's JS.
 *
 * Brand color fallbacks below match LatePoint's own --latepoint-* CSS
 * variables (in case LatePoint's stylesheet loads after this one on some
 * pages) - LatePoint's own plugin CSS remains the source of truth.
 */

:root {
	--ta-brand-primary: #a32f96;
	--ta-body-color: #1f222b;
	--ta-headings-color: #14161d;
	--ta-color-text-faded: #a58eb3;
}

/* ---------- Mobile nav menu ---------- */
.raven-nav-menu-dropdown {
	display: none;
}

body.ta-mobile-menu-open .raven-nav-menu-dropdown {
	display: block;
}

body.ta-mobile-menu-open .raven-nav-menu-toggle-button .hamburger {
	opacity: 0.7;
}

/* ---------- Popups (gift / gift package / book appointment) ---------- */
.jet-popup {
	display: none;
}

.jet-popup.ta-popup-open {
	display: block;
}

.jet-popup__close-button {
	cursor: pointer;
}

.jet-popup__overlay {
	cursor: pointer;
}

/* Prevent background scroll while a popup is open */
body.ta-popup-active {
	overflow: hidden;
}

/* ---------- Book Appointment modal (independent of JetPopup) ----------
 * Deliberately shares no class names with the JetPopup markup/CSS above -
 * that plugin's own hotlinked stylesheet sets
 * .jet-popup.jet-popup--front-mode { display: flex; } with higher
 * specificity than a single-class override here could beat, so the old
 * .bookappointment popup never actually became visible even though the
 * click handling itself was correct. Using entirely separate classes
 * here means there's no such conflict possible. */
.ta-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.ta-modal.is-open {
	display: block;
}

.ta-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 29, 0.6);
	cursor: pointer;
}

.ta-modal__panel {
	position: relative;
	z-index: 1;
	max-width: 900px;
	width: calc(100% - 40px);
	max-height: calc(100vh - 80px);
	margin: 40px auto;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 16px;
	padding: 48px 32px 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ta-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #f0e6ee;
	color: #2F1B37;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ta-modal__close:hover {
	background: #e6d9e4;
}

.ta-modal__fee-note {
	margin-top: 24px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: #1f222b;
	text-align: center;
}

.ta-modal__fee-note a {
	color: #993366;
}

body.ta-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.ta-modal__panel {
		padding: 40px 16px 24px;
		border-radius: 12px;
	}
}

/* ---------- Tooltip (Spa Menu "?" icons) ---------- */
.ta-tooltip {
	display: none;
	position: absolute;
	z-index: 9999;
	max-width: 340px;
	background: #2F1B37;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	padding: 16px 18px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

@media (max-width: 767px) {
	.ta-tooltip {
		max-width: 85vw;
	}
}

/* ---------- Gift product page: package table + FAQ accordion ---------- */
.ta-package-table {
	margin: 24px 0;
	border: 1px solid #e6d9e4;
	border-radius: 12px;
	padding: 8px 20px;
}

.ta-package-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #f0e6ee;
	font-family: "Roboto", sans-serif;
}

.ta-package-row:last-child {
	border-bottom: none;
}

.ta-package-icon {
	flex: 0 0 auto;
	color: #a32f96;
	font-size: 19px;
	cursor: default;
}

.ta-package-name {
	flex: 1 1 auto;
	font-weight: 500;
	color: #14161d;
}

.ta-package-gender,
.ta-package-duration {
	flex: 0 0 auto;
	color: #666;
	font-size: 14px;
	min-width: 90px;
}

.ta-package-price {
	flex: 0 0 auto;
	font-weight: 700;
	color: #14161d;
	min-width: 110px;
	text-align: right;
}

@media (max-width: 600px) {
	.ta-package-row {
		flex-wrap: wrap;
	}
	.ta-package-gender,
	.ta-package-duration {
		min-width: auto;
	}
}

.ta-faq-accordion {
	margin: 24px 0;
}

.ta-faq-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: none;
	border: 1px solid #e6d9e4;
	border-radius: 8px;
	padding: 14px 18px;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #14161d;
	cursor: pointer;
}

.ta-faq-caret {
	transition: transform 0.2s ease;
}

.ta-faq-accordion.ta-faq-open .ta-faq-caret {
	transform: rotate(180deg);
}

.ta-faq-panel {
	display: none;
	padding: 20px 4px 4px;
}

.ta-faq-accordion.ta-faq-open .ta-faq-panel {
	display: block;
}

.ta-faq-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #f0e6ee;
}

.ta-faq-item:last-of-type {
	border-bottom: none;
}

.ta-faq-item > i {
	flex: 0 0 auto;
	color: #a32f96;
	margin-top: 3px;
}

.ta-faq-question {
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #14161d;
	margin: 0 0 4px;
}

.ta-faq-answer {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

.ta-gift-policy-link {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	margin-top: 16px;
}

.ta-gift-policy-link a {
	color: #993366;
}

/* ---------- Hide the SKU / Category meta line ----------
 * This page is long enough (description, package table, FAQ, voucher
 * form) that hiding this one small line has no risk of the page-height-
 * triggered footer overlap seen earlier when several sections were hidden
 * at once on a much shorter page. */
body.single-product .product_meta {
	display: none;
}

/* ---------- Compensate for the always-fixed header ----------
 * The header carries both "jupiterx-header-fixed" (on <body>) and
 * "jupiterx-header-custom" (on the <header> itself), and this exact
 * combination is unconditionally position:fixed in the vendor CSS - not
 * "fixed after scrolling", permanently fixed from page load. Nothing
 * anywhere compensates #jupiterx-main with matching top padding, so a
 * page's content technically starts at the very top of the viewport,
 * underneath the nav bar, UNLESS that page has its own hero/background
 * section designed to sit flush under the header (which is most of this
 * theme's page-templates - Corporate Wellness, Membership, Spa Menu, Gift
 * Cards, and the homepage all rely on that same overlap intentionally).
 *
 * The pages that DON'T have that hero buffer, and so need explicit
 * padding-top to avoid their heading being hidden under the nav: single
 * WooCommerce pages (product/shop/cart/checkout/account - body.woocommerce-page)
 * and the plain Terms page, which both start directly with a heading and
 * no hero image.
 *
 * Note: WordPress does NOT add a body class based on a page's slug
 * (that was wrong in an earlier version of this rule - "page-terms"
 * never matched anything). The reliable class it does add is based on
 * the template file itself: page-template-page-templates-template-terms-php.
 *
 * 110px is calculated from the header's own padding (20px top + 20px
 * bottom) plus its internal content height (logo/nav row) in the vendor
 * CSS - may need a few px of adjustment once checked against the live
 * site at different screen widths. */
body.woocommerce-page #jupiterx-main,
body.page-template-page-templates-template-terms-php #jupiterx-main {
	padding-top: 110px;
}

/* ---------- Terms page: widen the narrow text column ----------
 * This page's three sections each use the original site's 33/33/33
 * three-column split (empty spacer | text | empty spacer), which reads
 * as uncomfortably narrow now that it's not constrained to the original
 * site's specific container width. Rebalances those same three columns
 * to 15/70/15 instead, so the text gets a proper reading width while
 * staying centered. */
body.page-template-page-templates-template-terms-php .elementor-container > .elementor-column.elementor-col-33 {
	width: 15%;
}

body.page-template-page-templates-template-terms-php .elementor-container > .elementor-column.elementor-col-33:nth-child(2) {
	width: 70%;
}

/* ---------- WooCommerce page container width ----------
 * Product/shop/cart/checkout/account pages no longer come wrapped in an
 * Elementor section (Elementor's gone), so give them the same comfortable
 * margins as the rest of the site instead of running edge-to-edge. */
body.woocommerce-page #jupiterx-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* ---------- Cap the product gallery image height ----------
 * The gap between the product content and the shop sidebar isn't a margin
 * bug - WooCommerce closes the whole product block (gallery + summary +
 * tabs + related) before the sidebar renders, so the sidebar only starts
 * once that block clears. Since the gallery image is much taller than the
 * short summary text beside it, the block stays tall long after the text
 * ends, and the sidebar reads as if it's floating far below the product.
 * Capping the gallery's rendered height shortens that block directly,
 * without touching #primary's width (which the gift-package table and
 * other .summary content depend on staying full-width). */
body.single-product div.woocommerce-product-gallery {
	max-width: 480px;
}

body.single-product div.woocommerce-product-gallery img {
	max-height: 480px;
	object-fit: cover;
}

/* ---------- Single product layout redesign: gallery + related products in
   one column, summary content in the other ----------
 * WooCommerce's own product template outputs the gallery, the summary
 * (title/price/description/table/FAQ/form), any product tabs, and Related
 * Products as direct siblings inside one wrapping <div class="product">.
 * That means they can be freely rearranged with CSS Grid alone - nothing
 * here required a template or markup change.
 *
 * Layout (desktop): gallery image and Related Products stack in a left
 * column; the full summary content occupies a right column running
 * alongside both of them. Any product tabs span the full width below.
 *
 * IMPORTANT structural note: summary is only ever assigned to ONE grid
 * row ("gallery summary"), never spanning into a second row shared with
 * "related". Grid rows sized as "auto" that share a row-spanning item
 * inflate to fit that item's content - since summary (title, price,
 * description, package table, FAQ, full voucher form) is far taller than
 * the image, letting it span the gallery's row too silently stretched
 * that row 200px+ past the image's real height, pushing "Related
 * products" down with it even though its own margin/gap was small. Related
 * is instead placed in the exact same cell as gallery (grid-column:1,
 * grid-row:1) and pushed below the image with a margin-top matching the
 * image's own fixed height (see the gallery img rule below) plus the
 * desired 10px gap - fully independent of how tall the summary column is. */
body.single-product div.product {
	display: grid;
	grid-template-columns: minmax(320px, 480px) 1fr;
	grid-template-areas:
		"gallery summary"
		"tabs tabs";
	column-gap: 48px;
	row-gap: 32px;
	align-items: start;
}

body.single-product div.product > .woocommerce-product-gallery {
	grid-area: gallery;
	/* Resets WooCommerce's own default plugin stylesheet
	   (woocommerce-layout.css), which floats this at width:48% regardless
	   of theme - without this, it fights the grid cell's actual width. */
	width: 100%;
	float: none;
}

/* Fixed, explicit height (not just a max-height ceiling) so Related
   Products' margin-top below can reliably calculate where the image
   actually ends, regardless of the source image's natural aspect ratio. */
body.single-product div.product > .woocommerce-product-gallery img {
	width: 100%;
	height: 480px;
	object-fit: cover;
}

body.single-product div.product > .summary.entry-summary {
	grid-area: summary;
	/* Same reset as the gallery above - WooCommerce's own CSS floats this
	   at width:48% too. */
	width: 100%;
	float: none;
	min-width: 0;
}

/* Same cell as the gallery (not a separate grid row), pushed below the
   fixed-height image by margin alone: 480px image height + 10px gap. */
body.single-product div.product > .related.products {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin-top: 490px;
}

body.single-product div.product > .woocommerce-tabs {
	grid-area: tabs;
}

/* Related Products was previously designed as a 4-column grid meant to
   span the page's full width - sized down here to read as a smaller,
   secondary card rather than matching the main product image's width.
   ul.products above is a centered vertical stack (flex-direction:column),
   so this width applies the same way whether there's 1 related product
   or 30 - always one per row, centered in the column. */
body.single-product div.product > .related.products ul.products li.product {
	width: 80%;
	max-width: 300px;
}

/* Mobile: drop back to a single stacked column, in standard reading order
   (image, then the full offer/purchase content, then related products,
   then tabs) rather than the desktop's "related right under the image"
   arrangement - there's no wasted side space to reclaim on a narrow
   screen, and readers still need to see the offer before browsing
   elsewhere. The margin-top/absolute positioning trick above is a
   desktop-only concern, so it's cleared here in favor of plain stacking. */
@media (max-width: 900px) {
	body.single-product div.product {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"summary"
			"related"
			"tabs";
	}

	body.single-product div.product > .related.products {
		grid-column: auto;
		grid-row: auto;
		grid-area: related;
		margin-top: 0;
	}

	body.single-product div.product > .woocommerce-product-gallery img {
		height: auto;
		max-height: 480px;
	}
}

/* ---------- Shop sidebar (sidebar.php / "Shop Sidebar" widget area) ----------
 * Styled to match the rest of the site: Playfair Display headings, the
 * same plum/purple palette used across header/footer/gift-package UI, and
 * card treatment consistent with .ta-package-table elsewhere in this file.
 * Covers WooCommerce's own "Products" widget (widget_products /
 * ul.product_list_widget) in addition to generic widget markup, since the
 * Shop Sidebar is meant to showcase other products. */
.ta-shop-sidebar {
	margin-top: 40px;
	max-width: 260px;
}

.ta-shop-sidebar .widget {
	margin-bottom: 20px;
	padding: 16px 14px;
	background: #ffffff;
	border: 1px solid #e6d9e4;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
	font-family: "Roboto", sans-serif;
	color: #1f222b;
}

.ta-shop-sidebar .widget:last-child {
	margin-bottom: 0;
}

.ta-shop-sidebar .widget-title {
	position: relative;
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-family: "Playfair Display", serif;
	font-size: 16px;
	font-weight: 700;
	color: #2F1B37;
	border-bottom: 1px solid #f0e6ee;
}

.ta-shop-sidebar .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 42px;
	height: 2px;
	background: #a32f96;
}

.ta-shop-sidebar .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-shop-sidebar .widget a {
	color: #2F1B37;
}

/* WooCommerce "Products" widget - the main content of this sidebar */
.ta-shop-sidebar .widget_products ul.product_list_widget li,
.ta-shop-sidebar .widget_recent_products ul.product_list_widget li,
.ta-shop-sidebar .widget_top_rated_products ul.product_list_widget li,
.ta-shop-sidebar .widget_recently_viewed_products ul.product_list_widget li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid #f0e6ee;
	float: none;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li:last-child,
.ta-shop-sidebar .widget_recent_products ul.product_list_widget li:last-child,
.ta-shop-sidebar .widget_top_rated_products ul.product_list_widget li:last-child,
.ta-shop-sidebar .widget_recently_viewed_products ul.product_list_widget li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 6px;
	float: none;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li a {
	display: block;
	margin-bottom: 3px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #14161d;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li a:hover {
	color: #a32f96;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li .star-rating {
	margin: 2px 0 3px !important;
	font-size: 11px;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li .amount {
	display: inline-block;
	font-weight: 700;
	font-size: 12px;
	color: #a32f96;
}

.ta-shop-sidebar .widget_products ul.product_list_widget li del .amount {
	font-weight: 400;
	color: #a58eb3;
}

/* Generic (non-product) widgets - Search, Categories, etc. if ever added */
.ta-shop-sidebar .widget ul li {
	margin-bottom: 10px;
}

.ta-shop-sidebar .widget .search-form input[type="search"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #e6d9e4;
	border-radius: 8px;
	font-family: "Roboto", sans-serif;
}

/* ---------- Related products: on-brand product cards ----------
 * WooCommerce's related-products output is a plain <ul class="products">
 * grid by default here (this theme adds no carousel wrapper around it).
 * Styled as cards matching the sidebar widgets (white card, soft shadow,
 * rounded corners) and the single-product "Buy Now" button (black,
 * rounded 10px) for a consistent look across the page. */
body.single-product .related.products h2 {
	font-family: "Playfair Display", serif;
	font-size: 24px;
	color: #2F1B37;
	margin: 0 0 24px;
	text-align: center;
}

body.single-product .related.products ul.products {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

body.single-product .related.products ul.products li.product {
	width: calc(25% - 18px);
	flex: 0 0 auto;
	float: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #e6d9e4;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .related.products ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(47, 27, 55, 0.12);
}

body.single-product .related.products ul.products li.product a {
	text-decoration: none;
}

body.single-product .related.products ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 16px !important;
}

body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
	font-family: "Playfair Display", serif;
	font-size: 18px;
	font-weight: 700;
	color: #2F1B37;
	margin: 0 0 8px;
}

body.single-product .related.products ul.products li.product .price {
	display: block;
	margin-bottom: 16px;
	color: #a32f96;
	font-weight: 700;
	font-size: 16px;
}

body.single-product .related.products ul.products li.product .price del .amount {
	font-weight: 400;
	color: #a58eb3;
}

body.single-product .related.products ul.products li.product .price ins {
	text-decoration: none;
}

body.single-product .related.products ul.products li.product a.button {
	display: inline-block;
	width: 100%;
	padding: 10px 18px;
	font-family: "Rambla", sans-serif;
	font-size: 14px;
	color: #ffffff;
	background-color: #000000;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	box-sizing: border-box;
	text-align: center;
	transition: background-color 0.2s ease;
}

body.single-product .related.products ul.products li.product a.button:hover {
	background-color: #2a2a2a;
	color: #ffffff;
}

/* In case a slick/carousel class ever ends up on this section, don't let
   it hide slides while there's no JS present to initialize it. */
body.single-product .related.products .slick-slide {
	display: block !important;
	float: none !important;
}

@media (max-width: 900px) {
	body.single-product .related.products ul.products li.product {
		width: calc(50% - 12px);
	}
}

@media (max-width: 560px) {
	body.single-product .related.products ul.products li.product {
		width: 100%;
	}
}

/* ---------- Remove nav menu hover underline, replace with a fade (sitewide) ----------
 * A generic Bootstrap-style rule in the vendor CSS underlines every <a>
 * on hover (a:hover { text-decoration: underline; }). Nav menu links
 * never override text-decoration themselves, so that generic rule wins.
 * Since header.php is shared by every page, this one fix removes the
 * underline sitewide - covers both the desktop nav and the mobile
 * dropdown nav, which share the same .raven-nav-menu markup.
 *
 * Removing the underline outright loses the visual cue that a link is
 * hoverable/clickable, so a smooth opacity fade replaces it instead -
 * works regardless of the link's underlying color (white nav text on
 * purple, white footer text on black), without needing a specific
 * color to fade toward. */
.raven-nav-menu a.raven-menu-item,
.raven-nav-menu a.raven-link-item {
	transition: opacity 0.2s ease;
}

.raven-nav-menu a.raven-menu-item:hover,
.raven-nav-menu a.raven-link-item:hover {
	text-decoration: none;
	opacity: 0.7;
}

/* Footer links (Information Centre, Find Us, Other Locations) use a
   different widget entirely - Elementor's icon-list - so the nav fix
   above doesn't reach them. Same underlying cause, same generic rule,
   same fade-instead-of-underline treatment. footer.php is shared
   sitewide too. */
.jupiterx-footer a {
	transition: opacity 0.2s ease;
}

.jupiterx-footer a:hover {
	text-decoration: none;
	opacity: 0.7;
}

/* ---------- JetElements pricing table (Membership & Corporate Wellness pages) ----------
 * The "Package / Duration / People" table on these two pages is a
 * JetElements "Table" widget (.jet-table__... classes), but this theme
 * never hotlinks that plugin's own stylesheet (only jet-tabs-frontend.css
 * is linked, for the FAQ accordion) - so the table renders with none of
 * its intended cell padding/spacing, reading as cramped and illegible.
 * This styles the table directly instead of relying on an unverified
 * plugin CSS path, matching the original site's look: a solid dark
 * header row, generous cell padding, and comfortable column spacing. */
.jet-table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Roboto", sans-serif;
}

.jet-table__head-row {
	background: #2F1B37;
}

.jet-table__head-cell {
	padding: 16px 24px;
	text-align: left;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
}

.jet-table__body-row {
	border-bottom: 1px solid #e6d9e4;
}

.jet-table__body-cell {
	padding: 14px 24px;
	color: #1f222b;
	font-size: 15px;
	vertical-align: top;
}

.jet-table__foot-cell {
	padding: 0;
	border-bottom: 3px solid #2F1B37;
}

@media (max-width: 700px) {
	.jet-table__head-cell,
	.jet-table__body-cell {
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ---------- Gift Cards page: hide price + "Select options" button ----------
 * This page renders its two products via WooCommerce's own
 * [products ids="1405,1468" columns="2"] shortcode, which outputs the
 * standard product-loop markup (.price, a.button). Scoped to this page's
 * template body class so Related Products elsewhere isn't affected. */

/* ---------- Gift Cards page: image + title tiles ----------
 * template-gift-cards.php now renders these two products directly via
 * wc_get_product() instead of the [products] shortcode, so there's no
 * price or add-to-cart markup generated at all - nothing to hide. This
 * just styles the resulting .ta-gift-card-grid/.ta-gift-card-tile
 * markup to match the original two-column layout.
 *
 * Grid instead of flex: flex items default to a minimum width based on
 * their content's natural size (the product image here), which was
 * forcing both tiles onto one column since neither would shrink enough
 * to sit side by side. Grid's minmax(0, 1fr) tracks don't have that
 * problem - each column is forced to the available fraction regardless
 * of the image's natural size. */
.ta-gift-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	max-width: 700px;
	margin: 0 auto;
}

.ta-gift-card-tile {
	display: block;
	text-align: center;
	text-decoration: none;
	transition: transform 0.3s ease-out, opacity 0.2s ease;
}

.ta-gift-card-tile:hover {
	text-decoration: none;
	transform: scale(1.03);
	opacity: 0.9;
}

.ta-gift-card-tile img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 16px;
}

.ta-gift-card-tile__title {
	display: block;
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 18px;
	color: #14161d;
}

@media (max-width: 560px) {
	.ta-gift-card-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
	}
}

/* ==========================================================================
   Cart & Checkout - on-brand redesign
   WooCommerce renders both pages entirely from its own plugin templates
   (no theme override files exist for either), so everything here targets
   WooCommerce's standard, stable class names. Palette/type matches the
   rest of the site: plum/purple (#2F1B37, #a32f96), Playfair Display
   headings, Roboto body text, and the same black rounded-button style
   used for "Buy Now" elsewhere.
   ========================================================================== */

/* ---------- Shared: page heading ---------- */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
	font-family: "Playfair Display", serif;
	font-size: 32px;
	color: #2F1B37;
	margin-bottom: 32px;
}

/* ---------- Shared: form inputs ---------- */
body.woocommerce-cart input.input-text,
body.woocommerce-cart select,
body.woocommerce-cart textarea,
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	font-family: "Roboto", sans-serif;
	border: 1px solid #e6d9e4;
	border-radius: 8px;
	padding: 12px 14px;
	background: #ffffff;
	color: #1f222b;
	transition: border-color 0.2s ease;
}

body.woocommerce-cart input.input-text:focus,
body.woocommerce-cart select:focus,
body.woocommerce-cart textarea:focus,
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: #a32f96;
}

/* ---------- Shared: primary buttons (Update cart, Apply coupon, Proceed
   to checkout, Place order) - same black pill style as "Buy Now" ---------- */
body.woocommerce-cart .button,
body.woocommerce-checkout .button,
body.woocommerce-checkout #place_order {
	font-family: "Rambla", sans-serif;
	background-color: #000000 !important;
	color: #ffffff !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 10px !important;
	padding: 14px 28px !important;
	font-size: 15px;
	transition: background-color 0.2s ease;
}

body.woocommerce-cart .button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-checkout #place_order:hover {
	background-color: #2a2a2a !important;
	color: #ffffff !important;
}

body.woocommerce-cart .button.disabled,
body.woocommerce-checkout .button.disabled {
	opacity: 0.5;
}

/* ---------- Cart page: the cart items table ---------- */
body.woocommerce-cart table.shop_table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
}

body.woocommerce-cart table.shop_table thead th {
	background: #2F1B37;
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 16px 20px;
	text-align: left;
	border: none;
}

body.woocommerce-cart table.shop_table tbody td {
	padding: 20px;
	border-bottom: 1px solid #f0e6ee;
	font-family: "Roboto", sans-serif;
	color: #1f222b;
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

body.woocommerce-cart td.product-thumbnail img {
	border-radius: 10px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

body.woocommerce-cart td.product-name a {
	color: #14161d;
	font-weight: 500;
}

body.woocommerce-cart td.product-price .amount,
body.woocommerce-cart td.product-subtotal .amount {
	color: #a32f96;
	font-weight: 700;
}

body.woocommerce-cart .quantity .qty {
	width: 64px;
	padding: 8px 10px;
	text-align: center;
}

body.woocommerce-cart td.product-remove a.remove {
	background: #f0e6ee !important;
	color: #2F1B37 !important;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	line-height: 28px;
	font-size: 16px;
}

body.woocommerce-cart td.product-remove a.remove:hover {
	background: #a32f96 !important;
	color: #ffffff !important;
}

body.woocommerce-cart .coupon {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

body.woocommerce-cart .coupon .input-text {
	width: auto;
	flex: 0 0 220px;
}

/* ---------- Cart page: totals box (sidebar-style card) ---------- */
body.woocommerce-cart .cart-collaterals .cart_totals {
	background: #ffffff;
	border: 1px solid #e6d9e4;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
}

body.woocommerce-cart .cart_totals h2 {
	font-family: "Playfair Display", serif;
	font-size: 22px;
	color: #2F1B37;
	margin: 0 0 20px;
}

body.woocommerce-cart .cart_totals table {
	border: none;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	padding: 12px 0;
	border-bottom: 1px solid #f0e6ee;
	font-family: "Roboto", sans-serif;
}

body.woocommerce-cart .cart_totals .order-total .amount {
	color: #a32f96;
	font-weight: 700;
	font-size: 18px;
}

body.woocommerce-cart .wc-proceed-to-checkout .button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 16px;
}

/* ---------- Checkout page: section headings ---------- */
body.woocommerce-checkout h3#order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-family: "Playfair Display", serif;
	font-size: 22px;
	color: #2F1B37;
	margin-bottom: 20px;
}

/* ---------- Checkout page: billing/shipping form as a card ---------- */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	background: #ffffff;
	border: 1px solid #e6d9e4;
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
}

body.woocommerce-checkout .form-row label {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: #1f222b;
	margin-bottom: 6px;
}

/* ---------- Checkout page: order review table ---------- */
body.woocommerce-checkout #order_review {
	background: #ffffff;
	border: 1px solid #e6d9e4;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(47, 27, 55, 0.06);
}

body.woocommerce-checkout table.shop_table {
	border: none;
	border-collapse: collapse;
}

body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
	padding: 14px 0;
	border-bottom: 1px solid #f0e6ee;
	font-family: "Roboto", sans-serif;
	color: #1f222b;
}

body.woocommerce-checkout table.shop_table .order-total .amount {
	color: #a32f96;
	font-weight: 700;
	font-size: 18px;
}

/* ---------- Checkout page: payment methods as selectable cards ---------- */
body.woocommerce-checkout #payment {
	background: transparent;
}

body.woocommerce-checkout ul.payment_methods {
	border: none;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

body.woocommerce-checkout ul.payment_methods li.payment_method_ {
	border: 1px solid #e6d9e4;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
	font-family: "Roboto", sans-serif;
}

body.woocommerce-checkout .payment_box {
	background: #fcf1fd;
	border-radius: 8px;
	margin-top: 12px;
	padding: 14px 16px;
}

body.woocommerce-checkout #place_order {
	width: 100%;
	margin-top: 20px;
	font-size: 16px;
	padding: 16px 28px !important;
}