/*
Theme Name: Moderno-Child
Theme URI: https://parkofideas.com/moderno/
Text Domain: moderno-child
Description: Fashion & Furniture Store WooCommerce Theme — Ulzain customisations
License: GNU General Public License v2.0 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0
Template: moderno
Author: parkofideas.com
Author URI: https://parkofideas.com
Tags: right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, theme-options, translation-ready
*/

/* ============================================================
   Ulzain customisations
   Keep additions in this file so parent-theme updates are safe.
   ============================================================ */

/* --- Banners: never clip a tile ---------------------------------
   The parent sets .c-ip-banners__list--static{overflow:hidden} with a
   nowrap flex row, and drops items to 50% width below 1190px. With a
   3-tile row that silently hides the third tile on tablet. Let the row
   wrap and give the orphan tile the full width instead. */
@media (max-width: 1189px) {
	.c-ip-banners__list--static {
		flex-wrap: wrap;
		overflow: visible;
	}

	.c-ip-banners__list--static.c-ip-banners__list--3 .c-ip-banners__item:nth-child(3),
	.c-ip-banners__list--static.c-ip-banners__list--5 .c-ip-banners__item:nth-child(5) {
		width: 100%;
	}
}

/* --- Footer: the footer html_block is Elementor content, so the
   theme's .entry-content list markers do not apply; nothing to reset.
   Keep footer links comfortable to tap on mobile. */
@media (max-width: 767px) {
	.c-footer a {
		display: inline-block;
		padding: 2px 0;
	}
}

/* --- Hero slider: keep the copy readable at small sizes --------- */
@media (max-width: 767px) {
	.c-ip-slider__title {
		font-size: 30px;
		line-height: 1.12;
	}

	.c-ip-slider__subtitle {
		font-size: 14px;
		line-height: 1.65;
	}
}

/* --- Product grid: tidy the card so price and title never collide */
.c-product-grid__title {
	overflow-wrap: anywhere;
}
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
   Minimal shop toolbar (J.-style)
   Tabs row, then: density switches | product count | sort + filter
   ============================================================ */

/* The theme's own count / breadcrumb / ordering row duplicates what the bar
   shows, so hide it on product archives only. */
.c-page-header--product-list .c-page-header__row-1 {
	display: none;
}

.unu-toolbar {
	margin: 0 0 28px;
	font-family: Manrope, sans-serif;
}

/* --- category tabs ------------------------------------------------ */
.unu-toolbar__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 0 var(--device-padding, 20px) 14px;
}

.unu-toolbar__tabs .gwa-cs-catlinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-count: auto !important;
}

/* the shortcode emits one <div> per link; make them an inline pipe-separated row */
.unu-toolbar__tabs .gwa-cs-catlinks > div {
	margin: 0 !important;
	display: flex;
	align-items: center;
}

.unu-toolbar__tabs .gwa-cs-catlinks > div + div::before {
	content: "";
	width: 1px;
	height: 11px;
	margin: 0 18px;
	background: #d8d8d8;
}

.unu-toolbar__tabs a {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #111 !important;
	white-space: nowrap;
	transition: opacity .2s ease;
}

.unu-toolbar__tabs a:hover {
	opacity: .55;
}

/* --- the bar ------------------------------------------------------ */
.unu-toolbar__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	min-height: 52px;
	padding: 0 var(--device-padding, 20px);
}

.unu-toolbar__left  { justify-self: start; }
.unu-toolbar__mid   { justify-self: center; }
.unu-toolbar__right {
	justify-self: end;
	display: flex;
	align-items: center;
}

.unu-toolbar__count {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #6b6b6b;
	white-space: nowrap;
}

/* --- density switches --------------------------------------------- */
.unu-toolbar__density {
	display: flex;
	align-items: center;
	gap: 14px;
}

.unu-toolbar__density-btn {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	opacity: .32;
	transition: opacity .2s ease;
}

.unu-toolbar__density-btn i {
	display: block;
	width: 4px;
	height: 13px;
	background: #111;
}

/* fewer columns reads as chunkier bars, more columns as finer ones */
.unu-toolbar__density-btn[data-cols="2"] i { width: 6px; }
.unu-toolbar__density-btn[data-cols="4"] i { width: 3px; }

.unu-toolbar__density-btn:hover,
.unu-toolbar__density-btn.is-active { opacity: 1; }

/* --- sort + filter ------------------------------------------------- */
.unu-toolbar__sort {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
}

.unu-toolbar__sort-toggle {
	display: flex;
	align-items: center;
	padding: 0 22px 0 0;
	border: 0;
	background: transparent;
	font: 600 11px/1 Manrope, sans-serif;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #111;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	transition: opacity .2s ease;
}

.unu-toolbar__sort-toggle:hover { opacity: .6; }

.unu-toolbar__sort.is-open .unu-toolbar__sort-toggle {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E");
}

.unu-toolbar__sort-menu {
	position: absolute;
	top: calc(100% - 6px);
	right: 0;
	z-index: 60;
	min-width: 218px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ececec;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.unu-toolbar__sort.is-open .unu-toolbar__sort-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.unu-toolbar__sort-menu li { margin: 0; list-style: none; }

.unu-toolbar__sort-menu a {
	display: block;
	padding: 9px 20px;
	font-size: 13px;
	line-height: 1.4;
	color: #5a5a5a;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.unu-toolbar__sort-menu a:hover { background: #f6f6f6; color: #111; }

.unu-toolbar__sort-menu a.is-current {
	color: #111;
	font-weight: 600;
}

.unu-toolbar__sort-menu a.is-current::after {
	content: "\2713";
	float: right;
	margin-left: 14px;
}

.unu-toolbar__filter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 28px;
	padding: 0 0 0 28px;
	border: 0;
	border-left: 1px solid #e6e6e6;
	background: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #111;
	cursor: pointer;
	min-height: 52px;
	transition: opacity .2s ease;
}

.unu-toolbar__filter:hover { opacity: .6; }
.unu-toolbar__filter .ip-filter { font-size: 13px; }

/* The theme hides .c-header__filter on desktop; that class is only borrowed
   here so the theme's own JS still opens the filter panel. */
.unu-toolbar__filter.c-header__filter {
	display: flex !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
}

/* --- responsive ---------------------------------------------------- */
@media (max-width: 767px) {
	.unu-toolbar__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 12px;
	}

	.unu-toolbar__tabs::-webkit-scrollbar { display: none; }

	.unu-toolbar__tabs .gwa-cs-catlinks { flex-wrap: nowrap; }

	.unu-toolbar__tabs .gwa-cs-catlinks > div + div::before { margin: 0 14px; }

	/* the count is the least useful of the three on a phone */
	.unu-toolbar__mid { display: none; }

	.unu-toolbar__bar { grid-template-columns: auto 1fr; min-height: 46px; }

	.unu-toolbar__filter { margin-left: 18px; padding-left: 18px; min-height: 46px; }
}

/* --- filter drawer -------------------------------------------------
   Moderno only turns the shop sidebar into a drawer on mobile; on desktop it
   sits in the page and its Filter button does nothing. The toolbar's FILTER
   control would be dead, so the sidebar becomes an off-canvas panel here too.
   Scoped to >=1024px: below that the theme's own drawer already works. */
@media (min-width: 1024px) {
	body.unu-shop-toolbar .l-section__sidebar {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		width: min(380px, 90vw);
		max-width: none;
		height: 100vh;
		margin: 0;
		padding: 28px 24px 40px;
		background: #fff;
		box-shadow: -18px 0 48px rgba(0, 0, 0, .10);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(101%);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1);
		visibility: hidden;
	}

	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar {
		transform: none;
		visibility: visible;
	}

	/* The theme keeps the shop sidebar collapsed on desktop by setting
	   visibility:hidden on .c-sidebar, and visibility inherits — so revealing
	   only the outer panel gave a drawer full of invisible, full-height widgets
	   (real boxes, no content). Reveal the subtree with it. */
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar * {
		visibility: visible;
	}

	/* the grid takes the space the sidebar used to occupy */
	body.unu-shop-toolbar .l-section__content {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	.unu-filter-overlay {
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(0, 0, 0, .38);
		opacity: 0;
		visibility: hidden;
		transition: opacity .32s ease, visibility .32s ease;
	}

	body.unu-filter-open .unu-filter-overlay {
		opacity: 1;
		visibility: visible;
	}

	body.unu-filter-open {
		overflow: hidden;
	}

	.unu-filter-close {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 0 18px;
		padding: 0 0 16px;
		border: 0;
		border-bottom: 1px solid #e6e6e6;
		background: #fff;
		font: 600 11px/1 Manrope, sans-serif;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		color: #111;
		cursor: pointer;
	}

	.unu-filter-close span:last-child {
		font-size: 18px;
		line-height: 1;
	}
}

/* --- inside the filter drawer --------------------------------------
   The widgets come from WooCommerce and the theme with their own spacing;
   these give the panel a consistent rhythm. */
@media (min-width: 1024px) {
	body.unu-shop-toolbar .l-section__sidebar .widget {
		margin: 0 0 30px;
		padding: 0 0 26px;
		border-bottom: 1px solid #eee;
	}

	body.unu-shop-toolbar .l-section__sidebar .widget:last-child {
		margin-bottom: 0;
		border-bottom: 0;
	}

	body.unu-shop-toolbar .l-section__sidebar .widget-title,
	body.unu-shop-toolbar .l-section__sidebar .widgettitle {
		margin: 0 0 16px;
		font: 700 11px/1.2 Manrope, sans-serif;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		color: #111;
	}

	/* term lists: roomier tap targets, quieter default state */
	body.unu-shop-toolbar .l-section__sidebar .widget ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.unu-shop-toolbar .l-section__sidebar .widget ul li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.unu-shop-toolbar .l-section__sidebar .widget ul li a {
		display: inline-block;
		padding: 7px 0;
		font-size: 14px;
		line-height: 1.45;
		color: #5a5a5a;
		text-decoration: none;
		transition: color .15s ease;
	}

	body.unu-shop-toolbar .l-section__sidebar .widget ul li a:hover,
	body.unu-shop-toolbar .l-section__sidebar .widget ul li.current-cat > a,
	body.unu-shop-toolbar .l-section__sidebar .widget ul li.chosen > a {
		color: #111;
	}

	/* the count that follows each term */
	body.unu-shop-toolbar .l-section__sidebar .widget ul li .count {
		color: #a5a5a5;
		font-size: 12px;
	}

	/* price slider + its Filter button */
	body.unu-shop-toolbar .l-section__sidebar .price_slider_wrapper {
		padding-top: 6px;
	}

	body.unu-shop-toolbar .l-section__sidebar .price_slider_amount .button {
		float: none;
		width: 100%;
		margin-top: 16px;
		padding: 13px 18px;
		background: #0d1c57;
		color: #fff;
		border: 0;
		border-radius: 0;
		font: 600 11px/1 Manrope, sans-serif;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		cursor: pointer;
		transition: background .2s ease;
	}

	body.unu-shop-toolbar .l-section__sidebar .price_slider_amount .button:hover {
		background: #0a1743;
	}

	body.unu-shop-toolbar .l-section__sidebar .price_slider_amount .price_label {
		float: none;
		display: block;
		padding-top: 12px;
		font-size: 13px;
		color: #5a5a5a;
		text-align: left;
	}

	body.unu-shop-toolbar .l-section__sidebar .ui-slider .ui-slider-range { background: #0d1c57; }
	body.unu-shop-toolbar .l-section__sidebar .ui-slider .ui-slider-handle { background: #0d1c57; }
}

/* --- grid density widths ---------------------------------------------
   The theme only ships item widths for 3, 4 and 5 per row, so the 2-up
   button changed the classes but nothing on screen. Body-scoped to outrank
   the parent's single-class rules. */
@media (min-width: 1024px) {
	body.unu-shop-toolbar .c-product-grid__item--2-per-row { width: 50%; }
	body.unu-shop-toolbar .c-product-grid__item--3-per-row { width: calc(100% / 3); }
	body.unu-shop-toolbar .c-product-grid__item--4-per-row { width: 25%; }
}

/* --- neutralise the theme's own off-canvas inside our drawer ----------
   Moderno's shop sidebar is itself a fixed, opacity:0 off-canvas panel whose
   content sits parked off-screen (x ≈ 1631 on a 1600px viewport) until the
   theme's own filter JS slides it in. Nesting it inside our drawer produced a
   panel that reported "visible" in the DOM but painted as empty white space.
   Flatten it back to normal flow so the widgets render where they are. */
@media (min-width: 1024px) {
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-sidebar,
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-shop-sidebar__wrap,
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-shop-sidebar__content,
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-sidebar__wrap {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		opacity: 1 !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		visibility: visible !important;
		background: none !important;
		box-shadow: none !important;
	}

	/* the theme's own close button inside that panel is redundant here */
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-shop-sidebar__close,
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .c-sidebar__close {
		display: none !important;
	}
}

/* The theme ships its own close button inside the panel; with our header's
   close beside it the drawer showed two. Keep ours, hide the theme's. */
@media (min-width: 1024px) {
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .h-close-button,
	body.unu-shop-toolbar.unu-filter-open .l-section__sidebar .js-filter-close-button {
		display: none !important;
	}
}

/* --- mobile header: switcher | logo | menu ---------------------------
   The row renders as [switcher][logo][hamburger]; giving the outer two an
   equal flex basis keeps the logo optically centred whatever their content
   widths, which plain space-between would not.

   The hamburger's real class is .c-header__menu-button (not
   .c-header__mobile-menu-button). */
@media (max-width: 1023px) {
	.c-header--mobile .c-header__row {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.unu-mobile-switcher {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.c-header--mobile .c-header__logo,
	.c-header--mobile .c-header__logo--mobile {
		flex: 0 0 auto;
		margin: 0;
		text-align: center;
	}

	.c-header--mobile .c-header__menu-button {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* The mark is a circular badge, so its height is its full width -- at the
	   old 92px it stood taller than the header row it sits in. 58px reads
	   cleanly and still leaves "UNU" legible. */
	.c-header--mobile .c-header__logo-img,
	.c-header--mobile .c-header__logo-img--mobile,
	.c-header--mobile .c-header__logo-img--all {
		width: auto !important;
		height: auto !important;
		max-width: 58px !important;
		max-height: 58px !important;
	}

	.c-header--mobile .c-header__row {
		min-height: 84px;
	}

	.unu-mobile-switcher .gwa-cs-topbar__current {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
		color: #111;
	}

	.unu-mobile-switcher .gwa-cs-topbar__flag img,
	.unu-mobile-switcher img.emoji {
		width: 18px;
		height: 18px;
		max-width: 18px;
	}
}

/* Only on genuinely tiny screens does the country name need to go. */
@media (max-width: 340px) {
	.unu-mobile-switcher .gwa-cs-topbar__name,
	.unu-mobile-switcher .gwa-cs-topbar__label {
		display: none;
	}

	.c-header--mobile .c-header__logo-img,
	.c-header--mobile .c-header__logo-img--mobile,
	.c-header--mobile .c-header__logo-img--all {
		max-width: 50px !important;
		max-height: 50px !important;
	}
}