/*
Theme Name:   Kilio Child
Theme URI:    https://uat.thepoeticresonance.com/
Description:  Child theme for Kilio. Holds the custom work for The Poetic Resonance so it survives parent theme updates.
Author:       Verz Design
Template:     kilio
Version:      1.0.13
Text Domain:  kilio-child
*/

/* ---------------------------------------------------------------
   Product gallery: thumbnails below the main image.

   The gallery is already a flex row; the thumbnail list sits at
   order:-1 with a hard 110px width, which pins it to the left.
   On a 375px viewport that column ate 110px of the 345px gallery,
   squeezing the main image to 235px. Stacking the column returns
   the full width to the image, so this also fixes the cramped
   image on mobile.

   !important throughout: the parent's woocommerce.css is enqueued
   after this file, so an equal-specificity rule there would win.
   --------------------------------------------------------------- */
.single-product .woocommerce-product-gallery {
	flex-direction: column;
}

.single-product .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	order: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
	order: 1 !important;
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap;
	margin-top: 20px !important;
}

/* Five per row, reusing the theme's existing 0 -5px / 0 5px gutter pair.
   flex-basis, not width: the parent sets flex-basis:100% on these items for
   the vertical layout, and flex-basis outranks width inside a flex container. */
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 20% !important;
	width: 20% !important;
	max-width: 20% !important;
	float: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
   Attribute swatches: match the Add to Cart button.

   The theme drives swatch hover and selected states from
   --e-global-color-primary-hover (#642f83 purple) and leaves the
   resting border at --e-global-color-border (#e1e1e1 grey), so the
   selector looked unrelated to the button beneath it.

   Overriding these rules rather than the Elementor variable keeps
   the purple intact everywhere else on the site that uses it.
   --------------------------------------------------------------- */
.woo-variation-swatches .variable-items-wrapper .button-variable-item:not(.radio-variable-item) {
	border-color: #29ABA4 !important;
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item:not(.radio-variable-item):hover,
.woo-variation-swatches .variable-items-wrapper .button-variable-item:not(.radio-variable-item).selected {
	border-color: #29ABA4 !important;
	background-color: #29ABA4 !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
   Optional contribution box on Healing Sessions products.
   Sits above the Add to Cart button and borrows the same teal.
   --------------------------------------------------------------- */
.kilio-contribution {
	width: 100%;
	margin: 0 0 18px;
}

.kilio-contribution-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.kilio-contribution-field {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #29ABA4;
	max-width: 220px;
	overflow: hidden;
}

.kilio-contribution-currency {
	display: flex;
	align-items: center;
	padding: 0 10px;
	background: #29ABA4;
	color: #fff;
	font-weight: 600;
	line-height: 1;
}

.kilio-contribution-field input {
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	margin: 0;
	padding: 10px 12px;
	width: 140px;
	background: transparent;
}

.kilio-contribution-help {
	display: block;
	margin-top: 6px;
	opacity: 0.75;
}

/* Name-your-price products carry their value in the amount box, so the
   theme's quantity stepper is meaningless. Scoped to the add-to-cart form
   so mini-cart and cart quantities are untouched. */
.kilio-nyp-product form.cart .quantity {
	display: none !important;
}

/* ---------------------------------------------------------------
   Footer intro paragraph, mobile only.

   The intro text-editor widget measures 48px but its <p> is 24px --
   the paragraph carries a 24px bottom margin. Stacked on mobile that
   pushed the SITEMAP heading 55px below the intro text while SERVICES
   and GET IN TOUCH sit 31px below the block above them.

   The widget's own bottom margin is already zeroed for mobile in
   Elementor; this clears the trailing paragraph margin so all three
   footer headings share the same 31px gap.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-44 .elementor-element-11e0377 p:last-child {
		margin-bottom: 0 !important;
	}
}

/* ---------------------------------------------------------------
   404 page background.

   The parent theme hard-codes a Kilio Sport stock photo of a woman
   in gym wear at .error404 .site-content-contain. Swapped for the
   site's own lotus banner.

   Root-relative URL on purpose: an absolute one would still point
   at the UAT domain after this goes to production.
   --------------------------------------------------------------- */
.error404 .site-content-contain {
	background-image:
		linear-gradient(rgba(10, 20, 40, 0.62), rgba(10, 20, 40, 0.62)),
		url("/wp-content/uploads/2026/03/banner1main-scaled.jpg") !important;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The theme colours this text #333 for the headings and #777 for the
   description, which worked on the old pale stock photo but vanishes against
   the lotus pond. The description is a bare <span> inside .error-text, so the
   rule has to reach descendants rather than just h1/h2/p/a. */
.error404 .site-content-contain .error-404-content,
.error404 .site-content-contain .error-404-content *,
.error404 .site-content-contain .error-text,
.error404 .site-content-contain .error-text *,
.error404 .site-content-contain h1,
.error404 .site-content-contain h2,
.error404 .site-content-contain h3 {
	color: #fff !important;
}

/* Keeps the copy legible where it crosses the pale lotus petals. */
.error404 .site-content-contain .error-404-content,
.error404 .site-content-contain .error-text {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------
   Shop filter: hide the Apply button.

   The WooCommerce Product Filters block hard-renders this button and
   exposes no attribute to disable it, so CSS is the only lever.
   NOTE: the price slider may rely on this button to commit, so the
   price filter must be re-tested whenever this rule changes.
   --------------------------------------------------------------- */
.wc-block-product-filters__apply {
	display: none !important;
}

/* ---------------------------------------------------------------
   GTranslate switcher in the header info bar.

   The plugin ships a default browser <select>, which renders as a
   white box bolted onto the purple bar and is tall enough to push
   the bar from 36px to 49px. This makes it sit inside the bar:
   transparent, white text, compact, vertically centred.
   --------------------------------------------------------------- */
.site-header .gtranslate_wrapper {
	display: inline-flex;
	align-items: center;
}

.site-header .gtranslate_wrapper select {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	padding: 1px 6px;
	margin: 0;
	height: auto;
	min-height: 0;
	line-height: 1.5;
	font-size: 13px;
	max-width: 170px;
	cursor: pointer;
}

/* The open list is painted by the OS, so it needs readable dark text. */
.site-header .gtranslate_wrapper select option {
	color: #333;
	background: #fff;
}


/* ------------------------------------------------------------------
   Login / Register / Checkout: WooCommerce's "show password" eye icon
   button has no styling from this theme's woocommerce.css override, so
   it renders as a bare collapsed <button> sitting below the password
   field instead of an icon inside it. Style it as an absolute-positioned
   icon overlay (using inline SVGs since the theme doesn't load the
   WooCommerce icon font).
   ------------------------------------------------------------------ */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	position: relative;
	display: block;
}
.woocommerce form .password-input .input-text,
.woocommerce-page form .password-input .input-text {
	padding-right: 36px;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.woocommerce form .show-password-input.display-password,
.woocommerce-page form .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a21.6 21.6 0 0 1-2.68 3.9M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------------
   Home page testimonials: the initials-avatar thumbnails (nav slides,
   e.g. "ST", "KU", "DA") are square 70x70 images by design, but the
   theme's global img{max-width:100%} clamps the width once slick
   shrinks each carousel slide below 70px on narrower screens, while
   the widget's own height:70px stays fixed - turning the square into
   a tall rectangle on mobile. Lock both dimensions so it always
   renders square regardless of the slide's own width.
   ------------------------------------------------------------------ */
.elementor-testimonial-item-wrapper .elementor-testimonial-image img {
	width: 70px !important;
	max-width: 70px !important;
	height: 70px !important;
	max-height: 70px !important;
	object-fit: cover;
	flex-shrink: 0;
}


/* ------------------------------------------------------------------
   Shop page mobile filter panel (#opal-canvas-filter, opened by the
   ".filter-toggle" button). Two separate bugs found 2026-09-01:

   1) Tap not registering: .filter-toggle has no touch-action/
      user-select rules, so a real tap can be interpreted by the
      browser as a text-selection gesture on the button label instead
      of a click, and the panel never opens. Fix: mark it as a tap
      target so no gesture other than a click is possible on it.

   2) Wrong open position: even when the "opal-canvas-filter-open"
      body class IS added, the theme's own open-state rule
      (transform: translateZ(0px)) does not settle the panel back to
      transform:none on this site - it stops partway across the
      screen (measured translateX(-166px) of a 300px-wide panel),
      leaving most of the panel off-screen and only a sliver visible.
      Fix: force the fully-open transform explicitly.

   If this ever needs to be reverted, both rules are self-contained
   and can be deleted as a pair - nothing else here depends on them.
   ------------------------------------------------------------------ */
.filter-toggle {
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.opal-canvas-filter-open .opal-canvas-filter.position-2cl,
.opal-canvas-filter-open .opal-canvas-filter.position-2cr {
	transform: translate3d(0, 0, 0) !important;
}


/* ------------------------------------------------------------------
   Shop mobile filter panel: "FILTER BY COLOURS" only showed 2 of 7
   terms (confirmed on real phones, Firefox responsive mode, and even
   the official theme demo - not something we caused). Root cause
   found 2026-09-01: WooCommerce's newer block-based "Product Filters"
   block (used here for the Price filter) implements its OWN
   full-screen "overlay dialog" behaviour on mobile, independent of
   this theme's classic off-canvas panel (#opal-canvas-filter). Both
   systems fight for the same screen space since the block lives
   inside the classic panel, which clips/corrupts the sibling colour
   widget. Disabling the block's own mobile overlay (position/height/
   transform) lets it render inline instead, since the classic panel
   already provides the slide-out behaviour we want.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	#opal-canvas-filter .wc-block-product-filters__open-overlay,
	#opal-canvas-filter .wc-block-product-filters__overlay-header,
	#opal-canvas-filter .wc-block-product-filters__overlay-footer {
		display: none !important;
	}

	#opal-canvas-filter .wc-block-product-filters__overlay,
	#opal-canvas-filter .wc-block-product-filters__overlay-wrapper,
	#opal-canvas-filter .wc-block-product-filters__overlay-dialog {
		position: relative !important;
		height: auto !important;
		transform: none !important;
	}

	#opal-canvas-filter .wc-block-product-filters__overlay-content {
		height: auto !important;
		overflow: visible !important;
	}
}