/* GiGi Wig Boutique child theme: high-fashion black (Chanel) front-end polish. */

/* WooCommerce buttons: black, sharp, uppercase, letter-spaced. */
.woocommerce a.button,
.woocommerce ul.products li.product .button,
.woocommerce button.button {
	background-color: #0A0A0A;
	color: #ffffff;
	border-radius: 0;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	padding: 0.85em 1.6em;
}

.woocommerce a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce button.button:hover {
	background-color: #000000;
	color: #ffffff;
}

/* Product cards: editorial, left-aligned, uppercase tracked titles, hairline image. */
.woocommerce ul.products li.product {
	text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #0A0A0A;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	border: 1px solid #E7E4DF;
}

/* Nav: uppercase, wide-tracked (fashion). */
header .wp-block-navigation {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
}

/* Shop archive title in the serif display face. */
.woocommerce-products-header__title,
.woocommerce .woocommerce-loop-product__link + *,
h1.entry-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Sharpen inputs and remove rounded corners site-wide for the couture look. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wp-block-search__input,
select {
	border-radius: 0;
}

/* iOS zooms the viewport whenever a focused input renders under 16px, and does
   not zoom back out. Caught by responsive-qa on /shop/ (a select at 15.2px) and
   on every product page (text, email and textarea at 13.3px). Ported from am,
   which hit the same trap.
   !important is required here, not lazy: the input carries has-small-font-size,
   and WordPress emits its preset font-size classes as
   `.has-small-font-size{font-size:var(--wp--preset--font-size--small)!important}`
   in global styles. Only an !important at matched-or-higher specificity wins. */
@media (max-width: 782px) {
	input[type="search"],
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* The product gallery overflows a 390px viewport (measured 407px, the image
   sitting at right=708 against a 390 clientWidth). WooCommerce's gallery sizes
   itself from the image's own dimensions, so it needs an explicit cap; nothing
   in the block layout gives it one. */
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery {
	max-width: 100%;
	height: auto;
}

/* WooCommerce's hover-zoom injects a full-resolution img.zoomImg, positioned
   absolutely inside the gallery figure. At 390px it measured 800px wide sitting
   at right=824, so it alone dragged the page 434px past the viewport. It is
   injected by JS and carries inline width/height, so a max-width on the gallery
   selectors never reached it. Clip it at the figure instead, which leaves the
   zoom working on pointer devices and simply stops the overflow. */
.woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	overflow: hidden;
}

/* A textarea sizes from its `cols` attribute, not from its container, so the
   review box rendered 460px wide on a 390px screen. Nothing in the block layout
   constrains it. */
textarea,
.woocommerce textarea,
.comment-form textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Single product: the quote CTA band. Ported from the am theme.
 *
 * The band is a core/group, so its border, its 10px radius and its background
 * come from block supports in the template, not from here. The radius is the
 * one deliberate exception to the sharp-corner rule above: it is set inline by
 * the block, so it wins on specificity without fighting this file.
 *
 * Only the bits the block system cannot reach live here: WooCommerce renders
 * <form class="cart"> itself, and nothing in the group's layout can centre a
 * form it did not create.
 * ---------------------------------------------------------------------- */

.gigi-quote-cta .wp-block-add-to-cart-form,
.gigi-quote-cta .wc-block-add-to-cart-form {
	text-align: center;
}

/* Qty and button on one centred row. flex-wrap keeps them stacked, not
   squeezed, on a narrow phone. */
.gigi-quote-cta form.cart {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.gigi-quote-cta form.cart .quantity {
	margin: 0;
	float: none; /* Woo floats this by default, which breaks the flex row. */
}

/* The qty field arrives completely unstyled: the browser default is 58x20 with a
   2px inset grey border, sat next to a 48px black button. Measured on am, not guessed. Two things it has to fix:
     - the 28px height gap, which is what makes the band look unfinished
     - a 22px tap target on a phone, well under the 44px minimum
   Matching the button's height solves both. Note this theme sharpens inputs
   site-wide above; the 4px here is deliberate, so the field reads as part of the
   band rather than as a stray form control. */
.gigi-quote-cta form.cart .quantity input {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	width: 5rem;
	padding: 0 0 0 0.5rem;
	text-align: center;
	font-size: 16px; /* also the iOS zoom threshold, so it holds at every width */
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	appearance: auto; /* keep the steppers: quantity is what they are for */
}

.gigi-quote-cta form.cart .quantity input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

/* The button must not stretch to the flex line. */
.gigi-quote-cta form.cart button[type="submit"] {
	flex: 0 0 auto;
	margin: 0;
}

/* Out-of-stock renders instead of the form. Centre it too, or the band looks
   broken on every out-of-stock product. */
.gigi-quote-cta p.stock {
	text-align: center;
	margin: 0;
}

/* On a phone the button's side padding leaves too little room for the label, so
   "ADD TO QUOTE" wraps to two lines and stands taller than the 48px input. Give
   the button the rest of the row instead of squeezing it. */
@media (max-width: 600px) {
	.gigi-quote-cta form.cart {
		align-items: stretch;
	}

	.gigi-quote-cta form.cart button[type="submit"] {
		flex: 1 1 auto;
		min-height: 48px;
		padding-left: 1rem;
		padding-right: 1rem;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
 * Filter sidebar and product search, ported verbatim from the am theme.
 *
 * The archive templates were ported without these rules, so the sidebar
 * rendered WooCommerce's defaults: counts in full-strength black at 15.5px
 * (am uses muted grey at 0.78rem) and a search submit inheriting the house
 * button element from theme.json, which put an 88x56 black slab against a
 * 152px field (am renders 48x43, transparent). Both are what Daniel flagged.
 *
 * WooCommerce prints its block styles AFTER this file, so every override
 * carries a .wc-block-product-filters prefix for specificity rather than
 * !important.
 * ------------------------------------------------------------------------ */
/* Gigi: filter sidebar, ASIAMQ-11. WC 10.7 product-filters collection styled
   to the house look: Nunito, no underlines, tight rhythm, champagne accent
   on hover and checked, sharp checkboxes. No price or rating filter exists
   in the pattern (quote model). WC prints its block styles after this file,
   so overrides carry a .wc-block-product-filters prefix for specificity. */
.wc-block-product-filters {
	font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wc-block-product-filters a {
	text-decoration: none;
}

/* Checkbox list: tight vertical rhythm, quiet labels. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #0A0A0A;
	cursor: pointer;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__text {
	color: #A8894E;
}

/* Hierarchy: top-level terms as uppercase group heads, children indented one
   step per depth.
   Keyed on data-wp-context, NOT on has-depth-N. Those classes are editor-only:
   WC's PHP renderer (ProductFilterCheckboxList.php, 10.9.4) emits none of them,
   so has-depth-N matches nothing in production and :not([class*="has-depth"])
   matches EVERY item and bolds the whole list. Depth IS server-rendered inside
   each item's data-wp-context JSON ({"item":{...,"depth":1}}), so select on
   that: correct on first paint, no JS, and if WC ever reformats that JSON these
   degrade to a flat evenly-weighted list, which is the safe direction to fail.
   Found on frozenmeat, ASIAMQ-27, written up in
   ~/Core/skills/designing/references/woo-product-filters-rail.md.
   This taxonomy is flat today (0 of 2 terms have a parent), so the rules are
   inert here. They are correct rather than dead so that the day a child category
   is added it indents, instead of silently not. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__item:not([data-wp-context*='"depth":']) .wc-block-product-filter-checkbox-list__text {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":1'] {
	padding-inline-start: 1rem;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":2'] {
	padding-inline-start: 2rem;
}

/* Sharp checkbox, champagne when checked, white tick. WC paints the box via
   input[type=checkbox].__input plus a 10% currentColor :before wash on the
   wrapper, and exposes color hooks as custom properties: use both. */
.wc-block-product-filters {
	--wc-product-filter-checkbox-list-option-element: #FFFFFF;
	--wc-product-filter-checkbox-list-option-element-border: #0A0A0A;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	width: 15px;
	height: 15px;
	min-width: 15px;
	border-radius: 0;
	background: #FFFFFF;
	border: 1px solid #0A0A0A;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: #A8894E;
	border-color: #A8894E;
}

.wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 1px solid #A8894E;
	outline-offset: 1px;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__mark {
	color: #FFFFFF;
}

/* Counts in muted grey. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__count {
	color: #6B6B6B;
	font-size: 0.78rem;
}

/* Show more: quiet uppercase text control, champagne hover, no underline. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__show-more,
.wc-block-product-filters .wc-block-product-filter-checkbox-list__show-less {
	background: none;
	border: none;
	padding: 0;
	margin-top: 0.6rem;
	color: #6B6B6B;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__show-more:hover,
.wc-block-product-filters .wc-block-product-filter-checkbox-list__show-less:hover {
	color: #A8894E;
}

/* Active filter chips: sharp, hairline border, champagne hover. */
.wc-block-product-filters .wc-block-product-filter-removable-chips__item {
	border: 1px solid #E7E4DF;
	border-radius: 0;
	background: #FFFFFF;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wc-block-product-filters .wc-block-product-filter-removable-chips__item:hover {
	border-color: #A8894E;
	color: #A8894E;
}

/* Clear filters: quiet text button, champagne hover. */
.wc-block-product-filters .wc-block-product-filter-clear-button .wp-block-button__link {
	background: transparent;
	color: #6B6B6B;
	border: none;
	padding: 0.25rem 0;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.wc-block-product-filters .wc-block-product-filter-clear-button .wp-block-button__link:hover {
	color: #A8894E;
	background: transparent;
}


/* ---------------------------------------------------------------------------
 * Lean product search (ASIAMQ-20).
 * The search button inherits the house button element style from theme.json
 * (black fill, 1rem/2rem padding), so in a 260px sidebar it rendered as an
 * 88x56 black block bolted to the field. Moving it inside the field only
 * relocated the block. Make it what it should be: a hairline field with a
 * quiet icon, matching the thin-rule look used elsewhere on the page.
 * ------------------------------------------------------------------------- */
.wp-block-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
}

.wp-block-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.55rem 0.75rem;
}

.wp-block-search .wp-block-search__button {
	background: transparent;
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 0;
	min-height: 0;
	min-width: 0;
	padding: 0 0.75rem;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus {
	background: transparent;
	background-color: transparent;
	color: var(--wp--preset--color--accent);
}

.wp-block-search .wp-block-search__button svg,
.wp-block-search .wp-block-search__button svg path {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

/* Category counts flush right.
   The text wrapper shrink-wraps, so each count landed at a different x (111,
   190, 284...). Fill the row and push the count to the edge so they form a
   column. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__text-wrapper {
	flex: 1 1 auto;
	justify-content: space-between;
	gap: 0.5rem;
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list__count {
	flex: 0 0 auto;
}

/* Content headings (About, Contact) carry no font-size, so a bare wp:heading in
   page content inherits Kiosko's raw h1 default, which rendered "About GiGi Wig
   Boutique" at 62px against a 37px template title. The template already prints a
   small page-title above it, so this is also the second, oversized half of a
   duplicated heading. Cap in-content headings to the family scale (~2.1rem, the
   xx-large the front page uses) rather than editing every page. Site-title and
   template titles keep their own sizing. */
.entry-content h1:not([class*="font-size"]),
.wp-block-post-content h1:not([class*="font-size"]) {
	font-size: 2.1rem;
	line-height: 1.15;
}
.entry-content h2:not([class*="font-size"]),
.wp-block-post-content h2:not([class*="font-size"]) {
	font-size: 1.6rem;
	line-height: 1.2;
}