/**
 * ToyTool — reusable components.
 * Mobile-first.
 */

/* ---------- Product grid / card ---------- */
.tt-product-grid,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* WooCommerce core's own woocommerce-layout.css puts a `content:" ";
   display:table` clearfix on ul.products::before/::after for its
   float-based grid. display:table is not display:none, so once the
   parent becomes display:grid, that pseudo-element is a real grid
   item — it silently claims column 1 and pushes every actual product
   one slot to the right. Must be neutralized explicitly. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}
@media (min-width: 768px) {
	.tt-product-grid,
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
	.tt-product-grid,
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.tt-product-card,
.woocommerce ul.products li.product.tt-product-card {
	position: relative;
	list-style: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* WooCommerce core's own woocommerce-layout.css sets width: 22.05%,
   float: left and a right margin on li.product for ITS default
   float-based grid. Once the parent is display: grid (above), that
   leftover width/margin resolves against the grid *track* instead of
   the full row and compounds into a sliver — so it must be explicitly
   cancelled here rather than just left to interact with grid. */
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
@media (min-width: 1024px) {
	.tt-product-card:hover .tt-product-card__media img { transform: scale(1.04); }
}

.tt-product-card__inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.tt-product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--tt-light-background);
	border-radius: var(--tt-card-radius);
	overflow: hidden;
}
.tt-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

/* Only rendered when $product->is_on_sale() is genuinely true (Sale
   price < Regular price) — see template-parts/product/product-card.php.
   MRP display (a separate field, inc/woocommerce.php) never sets that,
   so this never shows for MRP-only pricing. */
.tt-product-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--tt-sale);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.25em 0.65em;
	border-radius: var(--tt-radius-pill);
}

.tt-product-card__body { padding: 0.9rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }

.tt-product-card__title {
	color: var(--tt-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tt-product-card__price {
	font-weight: 700;
	color: var(--tt-heading);
	font-size: 1rem;
	margin-top: auto;
}
.tt-product-card__price del { color: var(--tt-muted); font-weight: 400; opacity: 0.75; margin-right: 0.35em; }
.tt-product-card__price ins { text-decoration: none; color: var(--tt-sale); }

.tt-product-card .add_to_cart_button,
.tt-product-card .button.product_type_variable,
.tt-product-card .button.product_type_simple {
	margin: 0.75rem 0 0;
	min-height: 40px;
	border-radius: var(--tt-radius-pill);
	background: var(--tt-light-background);
	color: var(--tt-heading);
	border: 1px solid var(--tt-border);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
	line-height: 38px;
	padding: 0 1rem;
	display: block;
}
.tt-product-card .add_to_cart_button:hover { background: var(--tt-primary); color: #fff; border-color: var(--tt-primary); }
.tt-product-card .added_to_cart { display: none; } /* "view cart" text link — keep the card compact; header cart badge already reflects it */

/* ---------- Breadcrumbs ---------- */
.tt-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--tt-muted);
	margin-bottom: 1rem;
}
.tt-breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--tt-muted); text-decoration: underline; }

/* ---------- Forms ---------- */
.tt-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: var(--tt-touch-target);
	padding: 0 1rem;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius-sm);
	font-size: var(--tt-body);
	font-family: inherit;
	color: var(--tt-text);
	background: var(--tt-background);
}
textarea { padding-block: 0.75rem; min-height: 100px; }

label {
	display: block;
	font-size: var(--tt-small);
	font-weight: 600;
	color: var(--tt-heading);
	margin-bottom: 0.4rem;
}

/* Inline field validation — added by assets/js/form-validation.js
   (register/contact/review/login forms; checkout has its own separate
   equivalent, .woocommerce-invalid, styled in woocommerce.css).
   !important on the border because the base input rule above matches
   each field by its own type selector (input[type="text"], [type="email"],
   etc.) — same specificity as a plain .tt-field-invalid class, so it's
   a coin-flip tie unless forced; an error state must always win
   outright regardless (same reasoning base.css's .tt-mobile-only/
   .tt-desktop-only utilities use !important for). */
.tt-field-invalid { border-color: var(--tt-sale) !important; }
.tt-field-error {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: var(--tt-sale);
}

/* ---------- Quantity stepper ---------- */
.tt-qty-stepper,
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius-pill);
	overflow: hidden;
}
.tt-qty-stepper button,
.quantity .tt-qty-btn {
	background: transparent;
	border: 0;
	width: 40px;
	height: var(--tt-touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--tt-heading);
}
.quantity { position: relative; }
.quantity .qty {
	width: 3rem;
	min-height: var(--tt-touch-target);
	border: 0;
	text-align: center;
	padding: 0;
	-moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Filter sidebar ---------- */
.tt-filter-group { padding-block: 1.25rem; border-bottom: 1px solid var(--tt-border); }
.tt-filter-group .widget-title { font-size: 0.9375rem; font-weight: 700; color: var(--tt-heading); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tt-filter-list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.tt-filter-list li { margin-bottom: 0.5rem; }
.tt-filter-list a { color: var(--tt-text); display: flex; align-items: center; gap: 0.6rem; }
.tt-filter-list a.is-active { color: var(--tt-primary); font-weight: 600; }
.tt-filter-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--tt-border); border-radius: 4px; display: inline-block; flex-shrink: 0; }
.tt-filter-checkbox.is-checked { background: var(--tt-primary); border-color: var(--tt-primary); }

.tt-filter-group ul.product-categories,
.tt-filter-group ul.wc-layered-nav-list,
.tt-filter-group ul.wc-block-components-checkbox-list,
.tt-filter-group .wc-rating-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}
.tt-filter-group ul.product-categories li,
.tt-filter-group ul.wc-layered-nav-list li { margin-bottom: 0.5rem; }
.tt-filter-group ul.product-categories a,
.tt-filter-group ul.wc-layered-nav-list a { color: var(--tt-text); text-decoration: none; }
.tt-filter-group .price_slider { margin-bottom: 1.25rem; }
.tt-filter-group .price_slider_amount { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; }
.tt-filter-group .price_slider_amount .button { min-height: 36px; padding: 0 0.75rem; font-size: 0.75rem; }
.tt-filter-group .ui-slider { position: relative; height: 4px; background: var(--tt-border); border-radius: 999px; margin-bottom: 1.25rem; }
.tt-filter-group .ui-slider .ui-slider-range { position: absolute; height: 100%; background: var(--tt-primary); border-radius: 999px; }
.tt-filter-group .ui-slider .ui-slider-handle {
	position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px;
	background: var(--tt-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--tt-border); border-radius: 50%; cursor: pointer; outline: none;
}

/* ---------- Accordion (FAQ) — native <details>/<summary>, zero JS.
   Targets both a custom .tt-accordion-item wrapper and the core block
   editor's own Details block output (wp-block-details), since the FAQ
   page's content is written with that block. ---------- */
.tt-accordion-item,
.tt-faq details {
	border-bottom: 1px solid var(--tt-border);
	margin: 0 0 0.25rem;
}
.tt-accordion-item summary,
.tt-faq details summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 0.25rem;
	font-weight: 600;
	color: var(--tt-heading);
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--tt-touch-target);
}
.tt-accordion-item summary::-webkit-details-marker,
.tt-faq details summary::-webkit-details-marker { display: none; }
.tt-accordion-item summary::marker,
.tt-faq details summary::marker { content: ""; }
.tt-accordion-item summary::after,
.tt-faq details summary::after {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--tt-muted);
	border-bottom: 2px solid var(--tt-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-left: 1rem;
}
.tt-accordion-item[open] summary::after,
.tt-faq details[open] summary::after { transform: rotate(-135deg); }
.tt-accordion-item__body,
.tt-faq details p { padding: 0 0.25rem 1rem; color: var(--tt-muted); margin: 0 0 1rem; }

/* ---------- Pills (Just Launched filters) ---------- */
.tt-pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tt-pill {
	min-height: 40px;
	padding: 0 1.1rem;
	border-radius: var(--tt-radius-pill);
	border: 1px solid var(--tt-border);
	background: transparent;
	color: var(--tt-text);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.tt-pill.is-active,
.tt-pill:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-pill.is-active { background: var(--tt-light-blue); }

/* ---------- Notices ----------
   WooCommerce's own icon-font glyph (a colored circular check/alert,
   from its bundled WooCommerce.woff2) is genuinely fine — the bug was
   that core's own padding-left:3.5em (which reserves room for that
   glyph, positioned absolutely at left:1.5em) got collapsed to a flat
   1.25rem here, so the icon landed on top of the first couple of
   letters of the message. Rebuilt as a flex row instead of fighting
   the legacy absolute-position layout: the pseudo-element becomes a
   normal flex child sitting next to the text, not on top of it. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	list-style: none;
	background: var(--tt-light-blue);
	border-radius: var(--tt-radius-md);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	color: var(--tt-heading);
	border-top: 0;
}
/* The icon (::before) and the message text form separate flex items
   from any action link (View cart / Undo? / "enter your code"), since
   ::before doesn't merge into the same anonymous flex item as
   adjacent text — with justify-content:space-between that spread the
   text into the middle of the row instead of grouping it with the
   icon. flex-start (above) plus pushing just the action link to the
   right via margin-left:auto is the standard, robust fix regardless
   of how many items precede it. */
.woocommerce-message > a,
.woocommerce-error > a,
.woocommerce-info > a {
	margin-left: auto;
	flex-shrink: 0;
}
/* Replace WooCommerce's own icon-font glyphs with small inline SVGs
   matching this theme's own icon language — core's is a plain box
   outline for .woocommerce-info (not broken, just visually dated next
   to the theme's line icons), and this also removes any dependency on
   that bundled icon font loading correctly for these three notices. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: "";
	position: static;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	background-repeat: no-repeat;
	background-size: contain;
}
.woocommerce-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2316A34A'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232563EB'/%3E%3Cline x1='12' y1='11' x2='12' y2='17' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.5' r='1.3' fill='white'/%3E%3C/svg%3E");
}
.woocommerce-error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23DC2626'/%3E%3Cline x1='12' y1='7' x2='12' y2='13' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='white'/%3E%3C/svg%3E");
}
.woocommerce-error { background: #FEF2F2; color: #991B1B; }