/* PeptideLab header overrides (enqueued site-wide from inc/footer.php).
   Kept in a SEPARATE file on purpose: design.css is overwritten wholesale by a
   concurrent session, so header tweaks live here where they can't be clobbered.
   Selectors carry an extra ancestor so they outrank design.css regardless of
   stylesheet load order. */

/* Larger top-menu (primary nav) text — desktop header */
.ct-header .header-menu-1 .menu-item > a,
.ct-header #header-menu-1 .menu-item > a,
header .header-menu-1 .menu-item > a {
	font-size: 18px !important;
	font-weight: 500 !important;
}

/* Larger header logo (was capped at 90px in design.css), vertically centered on
   the nav line. The logo <a>/branding had a fixed ~50px height, so the taller
   image overflowed downward (top-anchored) and sat lower than the menu. Let the
   container grow to the image and center it so both share one baseline. */
.ct-header .site-branding,
.ct-header .site-logo-container,
header .site-logo-container {
	height: auto !important;
	display: flex !important;
	align-items: center !important;
}
.ct-header .site-logo-container img.default-logo,
header .site-logo-container img.default-logo {
	max-height: 124px !important;
	width: auto !important;
}

/* Keep the logo sensible on mobile/tablet */
@media (max-width: 999.98px) {
	.ct-header .site-logo-container img.default-logo,
	header .site-logo-container img.default-logo {
		max-height: 72px !important;
	}
}

/* ---- Font unification: the top menu + ALL headings use the CONTENT font
   (--pl-font = Heebo — the same font as the hero "סטנדרט מעבדה, בכל בקבוקון").
   Lives here (not design.css) so the concurrent session's overwrites can't
   drop it, as happened to the earlier heading-unify rule. ---- */

/* Top menu — every WP nav menu (header desktop + mobile offcanvas) */
.menu-item > a,
.ct-header [class*="header-menu"] .menu-item a,
.ct-header .menu-item > a > span {
	font-family: var(--pl-font) !important;
}

/* ---- Product page on mobile (<820px): the gallery + summary are block
   elements with sub-100% widths, so in RTL they hug the RIGHT edge and leave the
   left half of the screen empty (cramped text, off-center image, big gaps). Give
   them the full width, center the image, group name+price on the left, and trim
   the gaps. In header.css so a design.css overwrite can't drop it. ---- */
@media (max-width: 819.98px) {
	/* design.css forces gallery 40% / summary 55% with !important and NO media
	   query (desktop 2-col widths) — beat it with a body-prefixed selector so
	   full-width wins on mobile regardless of stylesheet load order. */
	body.single-product div.product .woocommerce-product-gallery,
	body.single-product div.product .summary,
	body.single-product div.product .entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		float: none !important;
	}
	body.single-product div.product .woocommerce-product-gallery {
		margin-bottom: 8px !important;
		text-align: center;
	}
	/* smaller image on mobile so the Add-to-cart button sits above the fold */
	body.single-product .woocommerce-product-gallery img {
		max-height: 168px !important;
		width: auto !important;
		max-width: 100% !important;
		margin-inline: auto !important;
	}
	/* tighten the space above the image (breadcrumb) */
	.single-product .woocommerce-breadcrumb { margin: 4px 0 8px !important; }

	/* product name + price grouped on the left, tight together */
	body.single-product .product_title { text-align: left !important; margin-bottom: 4px !important; }
	body.single-product .summary .price,
	body.single-product .entry-summary .price { text-align: left !important; margin: 0 0 12px !important; }

	/* trim the large empty gaps + pull the buy button up above the fold */
	.single-product .woocommerce-product-details__short-description { margin-bottom: 12px !important; }
	.single-product .summary .stock,
	.single-product .entry-summary .stock { margin: 6px 0 !important; }
	.single-product .summary form.cart,
	.single-product .entry-summary form.cart { margin-top: 10px !important; }
	/* Blocksy puts a divider with a 35px margin right before add-to-cart — collapse it */
	.single-product .ct-product-divider { margin-top: 6px !important; margin-bottom: 10px !important; }
	.single-product .summary > *:last-child,
	.single-product .entry-summary > *:last-child { margin-bottom: 0 !important; }
}

/* ---- Mobile homepage hero: take less vertical space so the products show
   sooner. The hero is stacked below 820px (design.css goes 2-col at min-width
   820px); on that stacked layout the big logo CARD is redundant (the header
   already shows the logo) and pushes the product grid far down — hide it and
   tighten the hero padding. In header.css so a design.css overwrite can't drop
   it. ---- */
@media (max-width: 819.98px) {
	.pl-hero__logo { display: none !important; }
	.pl-hero__in { padding: 1.15rem 1.1rem !important; gap: 0.7rem !important; }
}

/* All headings, site-wide (incl. product-page tab labels תיאור / מידע נוסף /
   חוות דעת, which are <a> in <li> and were left on the system font) */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .wp-block-post-title, .wp-block-heading,
.product_title, .woocommerce-loop-product__title,
.widget-title, .ct-widget-title, .woocommerce-Reviews-title,
.related.products > h2, .up-sells.upsells > h2, .cross-sells > h2,
.woocommerce-tabs .tabs li a, .wc-tabs li a {
	font-family: var(--pl-font) !important;
}

/* ---- Sticky top strip: pin the announcement bar + header (logo, search/cart
   icons, menu) so they stay visible while scrolling — desktop AND mobile.
   `.pl-topbar` is a body child → sticks at 0; `#header` sits just below it (the
   topbar is a consistent 41px, so top:40 avoids a hairline gap). In header.css
   so a design.css overwrite can't drop it. ---- */
.pl-topbar {
	position: sticky !important;
	top: 0 !important;
	z-index: 1002 !important;
}
#header.ct-header {
	position: sticky !important;
	top: 30px !important;
	z-index: 1001 !important;
}

/* ---- Mobile shop grid: 2 columns instead of 3. Blocksy drives the product
   grid via --shop-columns (base repeat(3)); force repeat(2) on phones. Scoped
   with :not(...) to skip the related/up-sell rows (now horizontal-scroll flex).
   In header.css so a design.css overwrite can't drop it. ---- */
@media (max-width: 689.98px) {
	ul.products[data-products]:not(.related):not(.upsells):not(.cross-sells) {
		--shop-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ---- Add-to-cart button = dark navy (#1e293b) instead of the brand blue,
   site-wide (grid loop + single product), so the "buy" action stands apart from
   the blue navigation CTAs. In header.css (clobber-proof). ---- */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product button.button.add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button,
.woocommerce div.product form.cart .single_add_to_cart_button.button {
	background: #1e293b !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #1e293b !important;
}
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product button.button.add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
	background: #0f172a !important;
	background-image: none !important;
	border-color: #0f172a !important;
}

/* Mobile grid: enlarge the add-to-cart button, keeping its text proportions
   (was 10px font / 5×9px padding). Same high-specificity selector so it beats
   design.css's `...button.button{font-size:10px!important}` (0,4,3). */
@media (max-width: 767.98px) {
	.woocommerce ul.products li.product a.button.add_to_cart_button,
	.woocommerce ul.products li.product button.button.add_to_cart_button {
		font-size: 15px !important;
		padding: 10px 18px !important;
		line-height: 1.2 !important;
	}
}

/* ---- WooCommerce BLOCK buttons → navy too, for consistency: the block
   add-to-cart buttons (recommendations on cart/checkout + any block product
   grid), and the primary cart/checkout buttons (proceed-to-checkout, place
   order). These use wp-block / wc-block classes, not the classic .button. ---- */
.woocommerce .wc-block-components-product-button .wp-block-button__link,
.wp-block-button__link.add_to_cart_button,
a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
	background: #1e293b !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #1e293b !important;
}
.woocommerce .wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-button__link.add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: #0f172a !important;
	background-image: none !important;
	border-color: #0f172a !important;
}