/*
Theme Name: Divi Child
Theme URI:  https://www.wpserveur.net
Author:     WPServeur
Author URI: https://www.wpserveur.net
Template:   Divi
Version:    1.0
License:    GNU General Public License v2 or later
*/
/* --------------------------------------------------------------------------
   Header cart badge

   Site-wide chrome, so it lives here rather than in css/woocommerce.css — that
   sheet is enqueued only on WooCommerce surfaces, and the header is on every
   page. Markup comes from b7ectg_cart_badge_block() in functions.php.
   -------------------------------------------------------------------------- */

/* Divi already sets `position: relative` on .et_pb_button, but not on a linked
   icon. Scoped with :has() so only the two cart controls are touched. */
.et_pb_icon:has(> .yb-cart-count) {
	position: relative;
}

.yb-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	z-index: 2;
	box-sizing: border-box;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	/* Divi publishes its global colours as :root custom properties, so the badge
	   follows Brand / Pink from the Variable Manager instead of pinning a copy of
	   it here. The literal is the same #EF357F, kept as a fallback. */
	background: var(--gcid-ls3y1goh82, #ef357f);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	white-space: nowrap;
	/* The badge sits on top of the control it counts; clicks belong to the link. */
	pointer-events: none;
}

/* Hidden, not removed — the node has to stay for cart fragments to replace it. */
.yb-cart-count[data-count="0"] {
	display: none;
}

.yb-cart-count__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Wishlist count badge.
 *
 * Shares the trolley badge's shape and colour, but has two placements rather than one:
 *
 *   .yb-wishlist-count        inline, sitting after the label it counts. This is the side popup's
 *                             navigation item, which Divi renders as a clickable <li> with no
 *                             anchor and no positioning context to pin against.
 *   .yb-wishlist-count--pin   absolutely positioned on the control's corner, like the trolley.
 *                             Used on the header's Wish List button.
 *
 * The badge ships with no number in it and is filled by js/wishlist-count.js, so `data-count` is
 * empty on arrival — hidden by the same rule that hides a count of zero.
 * ------------------------------------------------------------------------ */

.yb-wishlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 19px;
	height: 19px;
	margin-left: 8px;
	padding: 0 5px;
	border-radius: 10px;
	/* Same Divi global colour the trolley badge follows; the literal is the same #EF357F. */
	background: var(--gcid-ls3y1goh82, #ef357f);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	/* The badge sits on the control it counts; clicks belong to the link. */
	pointer-events: none;
}

/* Hidden, not removed — the node has to stay for the script to fill it later. */
.yb-wishlist-count[data-count="0"],
.yb-wishlist-count:not([data-count]),
.yb-wishlist-count[data-count=""] {
	display: none;
}

/* The pinned variant needs a positioned ancestor; the anchor it is injected into is the only
   reliable one, since Divi's own positioning lives on the button wrapper. */
.et_pb_button:has(> .yb-wishlist-count--pin),
.et_pb_icon:has(> .yb-wishlist-count--pin) {
	position: relative;
}

.yb-wishlist-count--pin {
	position: absolute;
	top: -7px;
	right: -7px;
	z-index: 2;
	margin-left: 0;
}

.yb-wishlist-count__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The popup's list item is a flex row; keep the badge on the text baseline rather than letting
   it stretch to the row height. */
.et_pb_icon_list_text .yb-wishlist-count {
	flex: 0 0 auto;
	align-self: center;
}

/* `[yb_wishlist_count hide_zero="0"]` — keep the badge visible at a count of zero. The empty
   state (no count yet from the script) stays hidden either way: an empty pill is not a zero. */
.yb-wishlist-count--show-zero[data-count="0"] {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   Advanced Woo Search — "Sale!" corner ribbon

   The header search popup is site-wide, so this lives here with the other
   header badges. The plugin ships the ribbon green (`.aws-search-result
   .aws_onsale { background: #77a464 }`) and enqueues its sheet on the same
   hook and priority as this one, so order is not guaranteed. One extra class
   from the plugin's own markup wins on specificity without `!important`.
   -------------------------------------------------------------------------- */
.aws-search-result .aws_result_sale .aws_onsale {
	background: #ec4899;
}

/* --------------------------------------------------------------------------
   Header category nav — active button

   `yb-nav-active` is set by `b7ectg_nav_active_block()` on the button for the
   section being viewed. It takes the same gradient variable the buttons use on
   hover, so it follows the Variable Manager. One class more than Divi's own
   `body #page-container .et_pb_section .et_pb_button_N_tb_header` rule.
   -------------------------------------------------------------------------- */
body #page-container .et-l--header .et_pb_button.yb-nav-active {
	background-image: var(--gvid-zwhrp0v4v2);
}

/* --------------------------------------------------------------------------
   Header — responsive layout

   The Theme Builder header (#238) gives every column a fixed percentage, so
   between 981px and ~1600px everything shrinks together: the 120px Wish List
   and Trolley buttons overlapped in ~100px columns, "Delivered to" and the
   city wrapped into a narrow column, and nav labels broke mid-word.
   Measured 2026-10-23.

   Here the logo and the utility cluster take their content width, the search
   takes what is left, and the nav's gaps and type scale down towards 981px.
   Kept in code rather than in the builder because the header lives in live's
   database and this has to deploy. The selectors are Divi's own module
   classes, so they follow the header's module order — re-check after adding
   or reordering modules in the header. Each rule outranks the Divi rule it
   replaces on specificity, not on load order.

   Divi prints its header CSS twice: plain, and again prefixed
   `.et-db #et-boc .et-l` on pages with a Theme Builder body (shop, category,
   product). Where that second copy sets the same property, the rule here
   carries a matching `.et-db #et-boc` form, one class stronger.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 981px) {
	/* Top row: logo | search (flexes) | utility cluster. */
	.et-l--header .et_pb_row_0_tb_header {
		column-gap: clamp(20px, 6vw - 36px, 80px);
	}

	.et-l--header .et_pb_column_0_tb_header {
		flex: 0 0 auto;
		width: clamp(100px, 8vw, 153px);
	}

	.et-l--header .et_pb_column_1_tb_header {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.et-l--header .et_pb_column_2_tb_header {
		flex: 0 0 auto;
		width: auto;
	}

	.et-l--header .et_pb_row_1_tb_header {
		column-gap: clamp(12px, 3vw - 18px, 30px);
		align-items: center;
	}

	.et-l--header .et_pb_row_1_tb_header > .et_pb_column {
		flex: 0 0 auto;
		width: auto;
	}

	/* Delivered to / Sign In: icon beside the text, which never wraps. */
	.et-l--header .et_pb_column_3_tb_header,
	.et-l--header .et_pb_column_6_tb_header {
		column-gap: 10px;
	}

	.et-l--header .et_pb_column_3_tb_header,
	.et-db #et-boc .et-l--header .et_pb_row .et_pb_column_3_tb_header {
		align-items: center;
		--et-pb-icon-self-align: center;
	}

	.et-l--header .et_pb_column_3_tb_header .et_pb_text_inner,
	.et-l--header .et_pb_column_6_tb_header .et_pb_text_inner {
		white-space: nowrap;
	}

	/* Label over city, as in the comp. The width is reserved, so the cluster
	   does not shift when the geo-IP script fills the city in after load; a
	   long city ends in an ellipsis. Divi sizes nested rows with three
	   classes, hence four here. */
	.et-l--header .et_pb_column_3_tb_header .et_pb_row_2_tb_header.et_pb_row_nested {
		flex-direction: column;
		width: clamp(100px, 10vw, 130px);
		min-width: 0;
	}

	.et-l--header .et_pb_text_1_tb_header p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Wish List / Trolley: Divi fixes both at 120px; let them fit their label. */
	body #page-container .et-l--header .et_pb_section .et_pb_button_0_tb_header,
	body #page-container .et-l--header .et_pb_section .et_pb_button_1_tb_header,
	body.et-db #page-container #et-boc .et-l--header .et_pb_section .et_pb_row .et_pb_button_0_tb_header,
	body.et-db #page-container #et-boc .et-l--header .et_pb_section .et_pb_row .et_pb_button_1_tb_header {
		width: auto;
		max-width: none;
		min-width: clamp(90px, 9vw, 120px);
		white-space: nowrap;
	}

	/* Nav row: Category | separator | links. The separator is the Category
	   column's right border. */
	.et-l--header .et_pb_row_3_tb_header {
		column-gap: clamp(16px, 4.5vw - 28px, 58px);
	}

	.et-l--header .et_pb_column_9_tb_header {
		flex: 0 0 auto;
		width: auto;
		padding-right: clamp(16px, 4.5vw - 32px, 54px);
	}

	.et-l--header .et_pb_column_10_tb_header {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		column-gap: clamp(4px, 5vw - 50px, 30px);
	}

	/* Divi sets these buttons' font size with !important, so it is answered
	   in kind: 17px from ~1240px, down to 14px at 981px. */
	body #page-container .et-l--header .et_pb_section .et_pb_row_3_tb_header .et_pb_button,
	body.et-db #page-container #et-boc .et-l--header .et_pb_section .et_pb_row_3_tb_header .et_pb_button {
		font-size: clamp(14px, 1.16vw + 2.64px, 17px) !important;
		white-space: nowrap;
	}
}

/* Tablet and phone header: hamburger and trolley line up with the search
   bar's edges instead of sitting centred in their columns. */
@media only screen and (max-width: 980px) {
	.et-l--header .et_pb_column_11_tb_header,
	.et-db #et-boc .et-l--header .et_pb_row .et_pb_column_11_tb_header {
		--et-pb-icon-self-align: flex-start;
	}

	.et-l--header .et_pb_column_13_tb_header {
		--et-pb-icon-self-align: flex-end;
	}
}

/* --------------------------------------------------------------------------
   Footer Subscribe button — white type on every page

   Gravity Forms gives its submit the generic `button` class, and on the shop
   and category pages Divi's accent-colour rule for `.woocommerce-page … button.button`
   (an ID and four classes) painted it navy on its orange fill while the same
   button was white on the homepage. Measured 2026-10-05. The selector repeats
   Divi's own prefix so it outranks that rule without `!important`.
   -------------------------------------------------------------------------- */
.et-db #et-boc .et-l .gform_wrapper .gform-button.button,
.et-db #et-boc .et-l .gform_wrapper .gform-button.button:hover,
.et-db #et-boc .et-l .gform_wrapper .gform-button.button:focus-visible {
	color: #ffffff;
}