/*
Theme Name:   BEST Astra
Description:  BEST ordering portal. Child theme of Astra; branding per customer group comes from the SEFA BEST Brands plugin.
Author:       SEFA
Template:     astra
Version:      0.1.0
Requires PHP: 8.2
Text Domain:  best-astra
*/

/* Brand logos are wordmarks of varying proportions; cap height, keep ratio. */
.site-header .custom-logo-link img,
.site-header .site-logo-img img {
	max-height: 70px;
	width: auto;
}

/* My Account → Team */
.best-team-table form { margin: 0; }
.best-team-table select { max-width: 14em; }
.best-team-groups { border: 0; margin: .5em 0; padding: 0; }
.best-team-groups legend { font-size: .85em; font-weight: 600; padding: 0; }
.best-team-groups label { display: block; font-weight: normal; }

/* Category bar under the header. Colors follow the active palette, so it
   picks up each brand's accent. */
.best-catnav {
	background: var(--ast-global-color-0);
	position: relative;
	z-index: 20;
}
.best-catnav__inner { padding-top: 0; padding-bottom: 0; display: flex; align-items: center; gap: 12px; }
.best-catnav__list,
.best-catnav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.best-catnav__list {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}
/* Product search at the end of the category bar. */
.best-catnav__search { display: flex; flex: 0 0 260px; margin: 6px 0; }
.best-catnav__search input[type="search"] {
	flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px;
	border: 0; border-radius: 4px 0 0 4px; font-size: 14px; background: #fff;
}
.best-catnav__search button {
	height: 34px; padding: 0 12px; border: 0; border-radius: 0 4px 4px 0;
	background: var(--ast-global-color-1); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}
.best-catnav__item { position: relative; margin: 0; }
.best-catnav__link {
	display: block;
	padding: .75em 1.1em;
	color: #fff;
	font-weight: 600;
	font-size: .95em;
	text-decoration: none;
}
.best-catnav__list > .best-catnav__item > .best-catnav__link:hover,
.best-catnav__list > .best-catnav__item > .best-catnav__link:focus-visible,
.best-catnav__list > .best-catnav__item--current > .best-catnav__link {
	background: var(--ast-global-color-1);
	color: #fff;
}
.best-catnav__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.best-catnav__item--has-children > .best-catnav__link::after {
	content: "";
	display: inline-block;
	margin-left: .45em;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
	vertical-align: middle;
}

/* Subcategory dropdown: opens on hover and on keyboard focus. */
.best-catnav__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	border-top: 3px solid var(--ast-global-color-0);
}
.best-catnav__item:hover > .best-catnav__sub,
.best-catnav__item:focus-within > .best-catnav__sub { display: block; }
.best-catnav__sub .best-catnav__link { color: var(--ast-global-color-2); font-weight: 500; }
.best-catnav__sub .best-catnav__link:hover,
.best-catnav__sub .best-catnav__link:focus-visible,
.best-catnav__sub .best-catnav__item--current > .best-catnav__link {
	background: #f3f5f8;
	color: var(--ast-global-color-0);
}
.best-catnav__sub .best-catnav__sub { top: 0; left: 100%; border-top: 0; }

/* Phones: one scrollable row of top-level categories; tapping one opens its
   page, which lists everything inside it. */
@media (max-width: 768px) {
	.best-catnav__inner { flex-wrap: wrap; gap: 0; }
	.best-catnav__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-basis: 100%; }
	.best-catnav__search { flex: 1 1 100%; margin: 0 0 8px; }
	.best-catnav__link { white-space: nowrap; }
	.best-catnav__sub,
	.best-catnav__item--has-children > .best-catnav__link::after { display: none !important; }
}

/* "More" overflow menu in the category bar. */
.best-catnav__more {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: inherit;
}
.best-catnav__item--more > .best-catnav__sub { left: auto; right: 0; }
.best-catnav__item--more.is-open > .best-catnav__sub { display: block; }
/* Flyouts inside More open toward the page, not off the right edge. */
.best-catnav__item--more .best-catnav__sub .best-catnav__sub { left: auto; right: 100%; }
.best-catnav__item--more .best-catnav__sub .best-catnav__link { color: var(--ast-global-color-2); font-weight: 500; }
.best-catnav__item--more .best-catnav__item--has-children > .best-catnav__link::after {
	border-top-color: transparent;
	border-left-color: currentColor;
	border-width: 4px 0 4px 5px;
	margin-left: .5em;
}

/* Shop, category and search grids: smaller product images, all the same height,
   the whole product visible (never cropped). */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	width: 100%;
	height: 170px;
	object-fit: contain;
	margin-bottom: .75em;
	background: #fff;
}
@media (min-width: 1200px) {
	.woocommerce ul.products li.product a img,
	.woocommerce-page ul.products li.product a img { height: 190px; }
}

/* Single product: a narrower gallery and a capped image height. */
@media (min-width: 922px) {
	/* Matches Astra's own selectors (which set 50%) so ours win. */
	.woocommerce .ast-woocommerce-container div.product div.images,
	.woocommerce #content .ast-woocommerce-container div.product div.images,
	.woocommerce-page .ast-woocommerce-container div.product div.images,
	.woocommerce-page #content .ast-woocommerce-container div.product div.images { width: 36%; }
	.woocommerce .ast-woocommerce-container div.product div.summary,
	.woocommerce #content .ast-woocommerce-container div.product div.summary,
	.woocommerce-page .ast-woocommerce-container div.product div.summary,
	.woocommerce-page #content .ast-woocommerce-container div.product div.summary { width: 60%; }
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img.wp-post-image {
	max-height: 400px;
	width: 100%;
	object-fit: contain;
	background: #fff;
}
.woocommerce div.product div.images .flex-control-thumbs li img { height: 64px; object-fit: contain; }

/* Product cards: breathing room inside each card and between them. */
.woocommerce ul.products:not(.elementor-grid),
.woocommerce-page ul.products:not(.elementor-grid) {
	column-gap: 28px;
	row-gap: 32px;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	padding: 18px 18px 22px;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	background: #fff;
	margin-bottom: 0;
}
@media (max-width: 544px) {
	.woocommerce ul.products:not(.elementor-grid),
	.woocommerce-page ul.products:not(.elementor-grid) { column-gap: 14px; row-gap: 18px; }
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product { padding: 12px 12px 16px; }
}