/**
 * HS Mobile Drawer — Shoptimizer mobile menu (≤ 992px).
 * Author: Hesham Saad — https://heshamsaad.com
 */

/* The same hook prints the desktop navigation bar: keep the extras mobile-only. */
@media (min-width: 993px) {
	.hs-drawer-head,
	.hs-drawer-social {
		display: none;
	}
}

@media (max-width: 992px) {
	/* Logo */
	.hs-drawer-head {
		display: flex;
		align-items: center;
		min-height: 64px;
		margin: 0 0 6px;
		padding: 18px 0 14px;
		border-bottom: 1px solid #ececec;
	}

	.hs-drawer-logo {
		display: inline-flex;
	}

	.hs-drawer-logo img {
		display: block;
		width: auto;
		height: 28px;
	}

	/* Shoptimizer's RTL stylesheet puts a 20px right margin on every ul and only resets it above 992px: in Arabic the rows stopped short of the logo and widgets. */
	.col-full-nav .shoptimizer-mobile-menu > ul.menu {
		margin: 0;
	}

	/* Main menu rows: more air and a hairline between top-level items */
	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li {
		border-bottom: 1px solid #f1f1f1;
	}

	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li > a {
		padding-top: 13px;
		padding-bottom: 13px;
		font-size: 16px;
	}

	/* Submenu caret: same height as the taller row (13 + 24 + 13), wider tap area. */
	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.menu-item-has-children > span.caret {
		width: 44px;
		height: 50px;
		align-items: center;
		justify-content: flex-end;
	}

	/* The base rule spins the whole caret box, which swings the end-aligned arrow to the other side: spin only the arrow so it stays put. */
	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.menu-item-has-children.dropdown-open > span.caret {
		transform: none;
	}

	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.menu-item-has-children > span.caret::after {
		transition: transform 0.4s;
	}

	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.menu-item-has-children.dropdown-open > span.caret::after {
		transform: rotate(180deg);
	}

	/* Language switcher reads as a utility, not a category */
	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.wpml-ls-menu-item {
		border-bottom: 0;
	}

	.col-full-nav .shoptimizer-mobile-menu > ul.menu > li.wpml-ls-menu-item > a {
		font-weight: 600;
	}

	/* Useful Links: two columns, icon beside the label */
	.col-full-nav .mobile-extra {
		padding: 20px 0 8px;
	}

	.col-full-nav .mobile-extra .widget-title,
	.hs-drawer-social__title {
		display: block;
		margin: 0 0 6px;
		color: #777;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.col-full-nav .mobile-extra ul.menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.col-full-nav .mobile-extra ul li {
		margin: 0;
	}

	.col-full-nav .mobile-extra .menu-item > a {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 100%;
		padding: 12px;
		border: 1px solid #ececec;
		border-radius: 8px;
		color: #222;
		font-size: 14px;
		line-height: 1.25;
	}

	.col-full-nav .mobile-extra .menu-item > a .icon-wrapper {
		display: inline-flex;
		order: -1;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		margin: 0;
		font-size: 20px;
		line-height: 1;
	}

	.col-full-nav .mobile-extra .menu-item > a .icon-wrapper svg {
		width: 20px;
		height: 20px;
	}

	/* Fill the drawer height so the social block can sit at the bottom */
	.col-full-nav .shoptimizer-primary-navigation {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
	}

	/* Social links */
	.hs-drawer-social {
		margin: auto 0 0;
		padding: 18px 0 32px;
		border-top: 1px solid #ececec;
	}

	.hs-drawer-social__list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin: 6px 0 0;
		padding: 0;
		list-style: none;
	}

	.hs-drawer-social__list li {
		margin: 0;
	}

	.hs-drawer-social__list a {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		border: 1px solid #e2e2e2;
		border-radius: 50%;
		color: #222;
		font-size: 12px;
		transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
	}

	.hs-drawer-social__list a:hover,
	.hs-drawer-social__list a:focus-visible {
		border-color: #222;
		background: #222;
		color: #fff;
	}

	.hs-drawer-social__list svg {
		width: 18px;
		height: 18px;
	}
}