/*
Theme Name:   Layali Oman
Theme URI:    https://layalioman.com/
Description:  Custom child theme for the Layali Oman website, built on top of Hello Elementor.
Author:       Layali Oman
Author URI:   https://layalioman.com/
Template:     hello-elementor
Version:      0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  layali
Tags:         elementor, child-theme
*/

/* =============================================================================
   Base typography & color
   These are intentionally light. Elementor will override per element when
   widgets set typography or colors themselves. Anything not styled by Elementor
   (raw editor content, fallbacks, admin previews) inherits this baseline.
   ============================================================================= */

body {
	font-family: var(--ly-text-body);
	color: var(--ly-color-text);
	background-color: var(--ly-color-bg);
	font-size: var(--ly-font-size-base);
	line-height: var(--ly-line-height-normal);
	font-weight: var(--ly-font-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Sticky footer: keep the body at least a viewport tall and stack
   header → content → footer in a column so on short pages (My account,
   empty cart, thin landings) the Elementor footer sits at the bottom instead
   of floating up with blank space beneath it. The portaled overlays
   (side-cart, mobile menu, WhatsApp) are position:fixed, so they stay out of
   this flow.

   EXCLUDES checkout / cart / order-received: those use the full-bleed minimal
   layout (Elementor header/footer hidden, custom header injected) and the WC
   Blocks checkout sizes itself from its container width — turning the body into
   a flex column collapses that container to min-content and breaks the layout. */
body:not( .woocommerce-checkout ):not( .woocommerce-cart ):not( .woocommerce-order-received ) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* The Hello Elementor content region between the header and footer grows to
   fill the leftover height, pushing the footer down. */
body > main.site-main {
	flex: 1 0 auto;
}

/* Admin-bar offset: WordPress pushes the page down with html{margin-top:32px}
   (46px on small screens) for logged-in users, which would make body's
   min-height:100vh overflow by exactly that much. Subtract it so the footer
   still lands flush. No effect for logged-out visitors (no .admin-bar). */
@media screen and ( min-width: 783px ) {
	body.admin-bar {
		min-height: calc( 100vh - 32px );
		min-height: calc( 100dvh - 32px );
	}
}
@media screen and ( max-width: 782px ) {
	body.admin-bar {
		min-height: calc( 100vh - 46px );
		min-height: calc( 100dvh - 46px );
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ly-text-heading);
	color: var(--ly-color-text);
	line-height: var(--ly-line-height-tight);
	letter-spacing: var(--ly-letter-spacing-tight);
	font-weight: var(--ly-font-weight-semibold);
}

h1 { font-size: var(--ly-font-size-3xl); }
h2 { font-size: var(--ly-font-size-2xl); }
h3 { font-size: var(--ly-font-size-xl); }
h4 { font-size: var(--ly-font-size-lg); }
h5 { font-size: var(--ly-font-size-md); }
h6 { font-size: var(--ly-font-size-base); }

a {
	color: var(--ly-color-primary);
	transition: color var(--ly-duration-base) var(--ly-ease-standard);
}

a:hover,
a:focus {
	color: var(--ly-color-primary-hover);
}

/* =============================================================================
   Accessibility: visible focus ring for keyboard users.
   Elementor's default focus styles are often invisible against brand colors.
   ============================================================================= */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ly-color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--ly-radius-sm);
}

/* =============================================================================
   Kill --kit-widget-spacing inside Theme Builder header/footer
   --------------------------------------------------------------------------
   Elementor's Kit sets --kit-widget-spacing: 20px and bakes it into every
   widget's bottom margin as `calc(var(--kit-widget-spacing, 0px) + 0px)`.
   It's designed for stacked vertical layouts and helps space paragraphs.
   In horizontal header/footer rows it shows up as an invisible 20px shelf
   below each widget, breaking align-items: center for icon rows that sit
   next to taller widgets (e.g. a pill-shaped search input).
   No per-widget Elementor setting nullifies it — explicit _margin values
   are *added* to the kit value, not replaced. So we override the CSS
   variable where horizontal layouts live: Theme Builder header/footer.
   ============================================================================= */

.elementor-location-header,
.elementor-location-footer {
	--kit-widget-spacing: 0px;
}

/* =============================================================================
   Background video — opt-in "show full frame" mode
   --------------------------------------------------------------------------
   Elementor renders bg videos with object-fit: cover (fills the container,
   crops overflow). For containers where cropping cuts the subject out of
   frame ("too zoomed in"), add the class `ly-video-contain` to the
   container (Advanced → CSS Classes) to letterbox instead. This was
   previously GLOBAL, which broke sections whose aspect ratio differs from
   the video: contain letterboxes, leaving blank bands instead of covering.
   Default behavior is back to Elementor's cover.
   ============================================================================= */

.ly-video-contain .elementor-background-video-hosted,
.ly-video-contain .elementor-background-video-container video {
	object-fit: contain !important;
}

/* =============================================================================
   Pill tag / badge utility (e.g. "NEW", "SALE", "-20%")
   --------------------------------------------------------------------------
   Apply by adding `ly-tag` to an Elementor Heading/Text widget's CSS Classes
   field (Advanced tab). Variants opt in by adding `ly-tag--<variant>`.
   The selector targets the inner text element so the wrapper's block layout
   still flows naturally; the pill itself sizes to its content.
   ============================================================================= */

.ly-tag .elementor-heading-title,
.ly-tag .elementor-widget-container > p,
span.ly-tag {
	display: inline-block;
	background-color: rgb(37, 44, 97);
	color: #ffffff;
	border-radius: 999px;
	font-family: var(--ly-text-body, 'DM Sans', sans-serif);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 6px 16px;
}

/* Plum primary variant */
.ly-tag--primary .elementor-heading-title,
.ly-tag--primary .elementor-widget-container > p,
span.ly-tag--primary {
	background-color: var(--ly-color-primary, #53225e);
}

/* Outlined variant — transparent bg, coral border + text */
.ly-tag--outline .elementor-heading-title,
.ly-tag--outline .elementor-widget-container > p,
span.ly-tag--outline {
	background-color: transparent;
	color: var(--ly-color-secondary, #ff7477);
	border: 1.5px solid var(--ly-color-secondary, #ff7477);
}

/* =============================================================================
   Pill chips — nav strip ("Sex toys", "Womanizer", "Gifts"...)
   --------------------------------------------------------------------------
   Sibling of .ly-tag but tuned for navigation: larger, sentence case, has a
   hover state. Two ways to use:
     1. Add class `ly-chip-strip` to an Elementor Nav Menu widget's parent
        Container. Each menu link inside auto-styles as a chip.
     2. Add class `ly-chip` to a Button widget for one-off use.
   ============================================================================= */

.ly-chip,
.ly-chip-strip .menu-item > a {
	display: inline-block;
	background-color: var(--ly-color-primary, #53225e);
	color: #ffffff;
	padding: 10px 22px;
	border-radius: 999px;
	font-family: var(--ly-text-body, 'DM Sans', sans-serif);
	font-weight: 600;
	font-size: 0.875rem; /* 14px */
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.ly-chip:hover,
.ly-chip:focus-visible,
.ly-chip-strip .menu-item > a:hover,
.ly-chip-strip .menu-item > a:focus-visible {
	background-color: var(--ly-color-secondary, #ff7477);
	color: #ffffff;
}

/* Nav Menu widget injects its own padding on the list — flatten it so chips
   sit on a clean row controlled only by the parent Container's gap. */
.ly-chip-strip .elementor-nav-menu,
.ly-chip-strip ul.elementor-nav-menu {
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.ly-chip-strip .elementor-nav-menu li.menu-item {
	margin: 0;
	padding: 0;
}

/* =============================================================================
   Single product — short description bullets with plum check icons
   --------------------------------------------------------------------------
   Targets both Elementor's WooCommerce Short Description widget AND the
   raw WC short_description container, so this works inside a Theme Builder
   template and on stock product pages.
   ============================================================================= */

.woocommerce-product-details__short-description ul,
.elementor-widget-woocommerce-product-short-description .woocommerce-product-details__short-description ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 28px;
	line-height: 1.4;
	color: var(--ly-color-text, #1f1f23);
}

.woocommerce-product-details__short-description ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background-color: var(--ly-color-primary, #53225e);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}

/* =============================================================================
   Single product — accordion (replaces stock WC tabs)
   --------------------------------------------------------------------------
   The accordion is rendered via woocommerce/single-product/tabs/tabs.php
   override. Each tab becomes a button + panel pair. JS toggles aria-expanded
   and the panel hides via [hidden].
   ============================================================================= */

.ly-accordion {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--ly-color-border, #e6e6e8);
	margin-top: 32px;
}

.ly-accordion__item {
	border-bottom: 1px solid var(--ly-color-border, #e6e6e8);
}

.ly-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--ly-text-heading, 'Bricolage Grotesque', sans-serif);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ly-color-primary, #53225e);
	text-align: left;
	transition: color 200ms ease;
}

.ly-accordion__trigger:hover {
	color: var(--ly-color-secondary, #ff7477);
}

.ly-accordion__trigger:focus-visible {
	outline: 2px solid var(--ly-color-focus-ring, #ff7477);
	outline-offset: 2px;
	border-radius: 4px;
}

.ly-accordion__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: currentColor;
	transition: transform 200ms ease;
}

.ly-accordion__trigger[aria-expanded="true"] .ly-accordion__icon {
	transform: rotate(180deg);
}

.ly-accordion__panel {
	padding: 0 4px 24px;
	color: var(--ly-color-text, #1f1f23);
	line-height: 1.6;
}

.ly-accordion__panel[hidden] {
	display: none;
}

/* =============================================================================
   Single product — variation swatches
   --------------------------------------------------------------------------
   No-op on simple products. On variable products, product.js converts each
   <select> in the variations form into a row of pill swatches that read the
   <option> labels. Colors are auto-detected by matching the attribute name
   against /colou?r/i — others render as labelled pills.
   ============================================================================= */

.ly-variations__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.ly-variations__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ly-color-text-muted, #4a4a52);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ly-variations__label-value {
	margin-left: 8px;
	color: var(--ly-color-text, #1f1f23);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.ly-variations__swatches {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* The host lives OUTSIDE form.cart (see product.js) so Pro Elements'
   `.cart button` rule (specificity 0,4,1 + !important on width/display/bg)
   can't reach our swatches. `!important` is kept here as defense in depth
   against other plugins / themes / inline editor styles. */
.ly-variations-host button.ly-variations__swatch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	min-width: 96px !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	border: 1.5px solid var(--ly-color-border, #e6e6e8) !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ly-color-text, #1f1f23) !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important;
}

.ly-variations-host button.ly-variations__swatch:hover {
	border-color: var(--ly-color-primary, #53225e) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ly-color-text, #1f1f23) !important;
}

.ly-variations-host button.ly-variations__swatch[aria-pressed="true"] {
	border-color: var(--ly-color-primary, #53225e) !important;
	background: var(--ly-color-primary, #53225e) !important;
	background-color: var(--ly-color-primary, #53225e) !important;
	color: #ffffff !important;
}

/* Color swatch: override the pill rules to render a circle with the
   color filling it. No text inside — the row header's `:Navy` text label
   provides the accessible name to sighted users; aria-label/title cover
   screen readers and tooltip. */
.ly-variations-host button.ly-variations__swatch--color {
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 3px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--ly-color-border, #e6e6e8) !important;
	background: transparent !important;
	background-color: transparent !important;
	overflow: hidden !important;
	transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

.ly-variations-host button.ly-variations__swatch--color .ly-variations__chip {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background-color: var( --ly-swatch-color, #d8d8dc );
	/* Inner ring keeps light/white swatches (e.g. a "Skin" = #fff value)
	   readable against the page; subtle on darker chips. */
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.12 );
	flex-shrink: 0;
}

.ly-variations-host button.ly-variations__swatch--color:hover {
	border-color: var(--ly-color-primary, #53225e) !important;
	transform: translateY( -1px );
	background: transparent !important;
	background-color: transparent !important;
}

.ly-variations-host button.ly-variations__swatch--color[aria-pressed="true"] {
	border-color: var(--ly-color-primary, #53225e) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 3px var(--ly-color-primary, #53225e) !important;
}

.ly-variations-host button.ly-variations__swatch--color[aria-pressed="true"] .ly-variations__chip {
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.12 );
}

/* Visible focus ring for keyboard users. The browser default outline is
   suppressed by Elementor's button reset; we restore it with a high-contrast
   ring that works equally on pill swatches and color circles. */
.ly-variations-host button.ly-variations__swatch:focus-visible {
	outline: 2px solid var(--ly-color-primary, #53225e) !important;
	outline-offset: 2px !important;
}

.ly-variations-host button.ly-variations__swatch--color:focus-visible {
	outline-offset: 3px !important;
}

/* Hide WC's inline variation price block — the top Product Price widget is
   updated dynamically by product.js's `found_variation` handler instead, so
   the price appears once per page in a single location. */
.single_variation .price,
.single_variation .woocommerce-variation-price,
.woocommerce-variation > .price,
.woocommerce-variation > .woocommerce-variation-price {
	display: none !important;
}

/* When the price is rendered inside an Elementor Heading widget (via the
   `woocommerce-product-price-tag` Dynamic Tag), and we swap its contents on
   variation change, force the injected WC price markup to inherit the
   heading's typography. Without this, `.woocommerce-Price-amount` and
   `<del>/<ins>` pick up WC's default font-size/color/weight and the heading
   visually "jumps" on selection. `<del>` keeps its strikethrough because we
   leave text-decoration alone. */
.elementor-heading-title .woocommerce-Price-amount,
.elementor-heading-title .woocommerce-Price-amount bdi,
.elementor-heading-title .woocommerce-Price-currencySymbol,
.elementor-heading-title del,
.elementor-heading-title ins {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	background: transparent;
}

.elementor-heading-title ins {
	text-decoration: none;
}

/* Hide the original WC variations table once JS has wired the swatches.
   Keep it in the DOM (off-screen, not display:none) so WC's variation-matching
   JS can still read <select> values and bind events. product.js additionally
   sets tabindex="-1" and aria-hidden="true" on the underlying <select>s so
   keyboard users and screen readers don't hit duplicate focus stops sitting
   off-screen. Clearing a selection is done by re-clicking the active swatch
   (the click handler toggles `select.value` to ''); the WC reset link stays
   off-screen with the table. */
/* No-FOUC: hide the native variation <select> table from the FIRST paint so the
   raw dropdowns never flash before product.js swaps them for swatches. Use
   `visibility` (not display/absolute) here so the table's height is reserved and
   there's no layout jump while the swatches build. The <noscript> rule in
   functions.php reveals the selects when JS is unavailable. */
form.variations_form .variations {
	visibility: hidden;
}

/* Once enhanced, pull the table fully off-screen so the swatch host takes its
   place in the flow. */
.ly-variations-active .variations {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =============================================================================
   Logged-in admin toolbar on phones
   --------------------------------------------------------------------------
   Core ships `#wpadminbar { min-width: 600px }`, which forces the whole
   document to 600px on narrower phones and creates horizontal panning for
   logged-in users (admins testing the site). Customers never see the bar.
   ============================================================================= */
@media screen and ( max-width: 600px ) {
	#wpadminbar {
		min-width: 100% !important;
	}
}

/* =============================================================================
   No horizontal panning, site-wide
   --------------------------------------------------------------------------
   Off-canvas drawers, transformed marquee tracks, and stray nowrap rows can
   each extend the document's scrollable width by a few hundred px on mobile.
   Clipping at the ROOT guarantees no sideways scroll regardless of source.
   `clip` (not `hidden`) — it doesn't turn the element into a scroll
   container, so position: sticky keeps working everywhere.
   ============================================================================= */
html {
	overflow-x: hidden;
	overflow-x: clip;
}


/* =============================================================================
   Add-to-cart feedback
   --------------------------------------------------------------------------
   After an AJAX add, WooCommerce appends an <a class="added_to_cart">
   "View cart" link beside the button. The auto-opening side cart IS the
   post-add affordance here, and cart.js swaps the button label to
   "Added to cart" — the extra link is redundant noise everywhere.
   ============================================================================= */
a.added_to_cart {
	display: none !important;
}