/* Amend 5, workstream w2 (catalogue). Loaded by includes/amend5/w2-catalogue.php. */

/* ------------------------------------------------ SHOP NOW mega menu, desktop */
/* His groups sit in balanced columns (a multi-column list keeps each group
   whole and fills the width without gaps), and "Shop by Category" runs across
   the bottom, A to Z, in five columns of its own.

   Where the panel sits (fix of 28 Sep): it hangs from the header, not from
   the SHOP NOW link, so it is centred on the page and is never wider than the
   window less 30px a side (1180px at most). Before, the theme's script pushed
   a fixed 1180px panel sideways, which cut a column off at the left or right
   edge on windows under about 1220px wide. If a window is too short for the
   whole panel, the list scrolls inside the panel instead of running off the
   bottom. The column counts for the A to Z order are in alpha-menus.css. */
@media (min-width: 1025px) {
	.wd-header-main-nav .gft-shopnow {
		--wd-dropdown-width: min(1180px, calc(100vw - 60px)) !important;
		position: static !important;
	}
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu {
		--wd-dropdown-padding: 24px 24px 20px;
		width: var(--wd-dropdown-width) !important;
		left: calc((100% - var(--wd-dropdown-width)) / 2) !important;
		right: auto !important;
		/* flush under the header it hangs from: 169px under the main header,
		   75px under the sticky header that shows once the page is scrolled
		   (from 1440px wide). The theme adds a top margin of 16.5px to the
		   sticky header's drop downs; with the item static that margin left a
		   strip of page showing between the sticky header and the panel. */
		top: 100% !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* room below the 169px header: the window less the header, the panel's
	   own padding and a 4px margin (32px more under the admin toolbar) */
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu > .container {
		max-height: calc(100vh - 217px - var(--gft-sn-bar, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.admin-bar .wd-header-main-nav .gft-shopnow > .wd-dropdown-menu > .container {
		--gft-sn-bar: 32px;
	}
	/* while the panel is open it sits above the floating chat buttons (the
	   Send message bubble and the WhatsApp button), which otherwise cover the
	   links at its bottom left on a short window; it stays under the Report an
	   issue window (2147483000) */
	.whb-main-header:has(.wd-header-main-nav li.gft-shopnow:hover) {
		z-index: 2147482000;
	}
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu > .container > .wd-sub-menu {
		display: block !important;
		column-count: 5;
		column-gap: 34px;
		margin: 0;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-column {
		display: block;
		width: auto !important;
		max-width: none !important;
		flex: none !important;
		margin: 0 0 16px;
		padding: 0;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-column > a {
		padding-top: 0;
		padding-bottom: 6px;
		line-height: 1.3;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-sbc {
		-webkit-column-span: all;
		column-span: all;
		margin: 6px 0 0;
		padding-top: 16px;
		border-top: 1px solid rgba(0, 0, 0, .09);
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-sbc > .sub-sub-menu {
		column-count: 5;
		column-gap: 34px;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-sbc > .sub-sub-menu > li {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: 3px;
		padding-bottom: 3px;
		line-height: 1.35;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li.gft-sn-gap {
		margin-top: 8px;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-auction {
		margin-top: 12px;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-auction > a {
		display: inline-block !important;
		padding: 8px 14px !important;
		background: #1a1a1a;
		color: #fff !important;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		transition: background .2s;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-auction > a:hover {
		background: #c6a44e;
	}
}

/* a laptop screen (768px tall, about 650px of page): the panel is packed a
   little tighter so it still ends above the bottom of the window. Under
   1200px wide the columns are narrower and the panel taller, so this starts
   at 860px tall there. */
@media (min-width: 1025px) and (max-height: 820px), (min-width: 1025px) and (max-width: 1199px) and (max-height: 860px) {
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu {
		--wd-dropdown-padding: 16px 24px 14px;
	}
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu > .container {
		max-height: calc(100vh - 203px - var(--gft-sn-bar, 0px));
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-column {
		margin-bottom: 10px;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: 1px;
		padding-bottom: 1px;
		font-size: 13px;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li.gft-sn-gap {
		margin-top: 5px;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-sbc {
		padding-top: 10px;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-sbc > .sub-sub-menu {
		column-count: 7;
		column-gap: 22px;
	}
	.wd-header-main-nav .gft-shopnow .gft-sn-auction {
		margin-top: 6px;
	}
}

/* a short window (700px tall or less, down to 650px; 740px under 1200px
   wide): tighter again, so the whole panel still ends above the bottom of
   the window */
@media (min-width: 1025px) and (max-height: 700px), (min-width: 1025px) and (max-width: 1199px) and (max-height: 740px) {
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu {
		--wd-dropdown-padding: 14px 24px 12px;
	}
	.wd-header-main-nav .gft-shopnow > .wd-dropdown-menu > .container {
		max-height: calc(100vh - 199px - var(--gft-sn-bar, 0px));
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-column {
		margin-bottom: 8px;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-column > a {
		padding-bottom: 4px;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 1.3;
	}
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li.gft-sn-gap {
		margin-top: 4px;
	}
	.wd-header-main-nav .gft-shopnow .wd-sub-menu > li.gft-sn-sbc {
		margin-top: 4px;
		padding-top: 8px;
	}
}

/* the rows on a short window: 18.9px tall (13px text, 1px above and below)
   wherever the panel still ends inside the window, and only as tight as
   16.9px where it would not. The padding grows with the window height and
   stops at 1px. With no padding the panel ends 643px down under 1200px wide
   (18 rows set its height), 626px from 1200px (17 rows) and 608px from
   1280px (17 rows); each formula keeps its bottom about 7px above the bottom
   of the window, so on a 650px window the rows are 16.9px under 1200px wide,
   17.9px from 1200px and 18.9px from 1280px, and 18.9px everywhere from
   686px tall. */
@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 740px) {
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: clamp(0px, calc((100vh - 650px) / 36), 1px);
		padding-bottom: clamp(0px, calc((100vh - 650px) / 36), 1px);
	}
}
@media (min-width: 1200px) and (max-width: 1279px) and (max-height: 700px) {
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: clamp(0px, calc((100vh - 633px) / 34), 1px);
		padding-bottom: clamp(0px, calc((100vh - 633px) / 34), 1px);
	}
}
@media (min-width: 1280px) and (max-height: 700px) {
	.wd-header-main-nav .gft-shopnow .sub-sub-menu > li > a {
		padding-top: clamp(0px, calc((100vh - 615px) / 34), 1px);
		padding-bottom: clamp(0px, calc((100vh - 615px) / 34), 1px);
	}
}

/* both menus */
.gft-shopnow .gft-sn-strong > a,
.gft-sn-all > a {
	font-weight: 600;
}
.gft-shopnow .gft-sn-nolink > a {
	cursor: default;
}
@media (min-width: 1025px) {
	.wd-header-main-nav .gft-shopnow .gft-sn-nolink > a {
		pointer-events: none;
	}
}

/* phone menu: the auction link stands out a little, as it does on desktop */
.wd-nav-mobile .gft-sn-auction > a {
	font-weight: 600;
	color: #8a6a1f;
}

/* ------------------------------------------- landing for an empty category */
.gft-landing-soon .gft-landing-soon-title {
	margin: 0 0 10px;
	font-size: 24px;
	letter-spacing: 0;
	text-transform: none;
	color: #23201a;
	font-weight: 500;
}
.gft-landing .gft-btn-wa {
	background: #1f8f4e;
}
.gft-landing .gft-btn-wa:hover {
	background: #176e3c;
	color: #fff;
}
.gft-w2-carats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
}
.gft-w2-carats a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #c6a44e;
	color: #8a6a1f;
	text-decoration: none;
}
.gft-w2-carats a:hover {
	background: #c6a44e;
	color: #fff;
}

/* ------------------------------------------------ no quantities, anywhere */
/* The counts are taken out where they are printed (hide-counts.php); this is
   only the net under that, for a count printed by something new. */
.product-categories .count,
.wd-nav-product-cat .nav-link-count,
.widget_product_categories .count,
.gft-tax-filter li span,
.woocommerce-loop-category__title mark.count {
	display: none !important;
}