/* =========================================================================
   WooCommerce styling to match the Fresh Filter Supply brand.
   ========================================================================= */

.woocommerce .ffs-shop { padding-block: 30px; }
.ffs-shop__layout { display: grid; gap: 24px; }
.ffs-shop__sidebar { display: none; }
.ffs-shop__sidebar.is-open { display: block; }
.ffs-filter-toggle { width: 100%; margin-bottom: 1rem; }

/* Shop archive is full width: hide the sidebar and collapse the layout to a
   single column even if the markup still renders it. */
.woocommerce-shop .ffs-shop__layout--has-sidebar { grid-template-columns: 1fr !important; }
.woocommerce-shop .ffs-shop__sidebar,
.woocommerce-shop .ffs-filter-toggle { display: none !important; }

/* Shop / archive product loop reuses the homepage card look */
.woocommerce ul.products {
	list-style: none; margin: 1.75rem 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
/* WooCommerce's default clearfix pseudo-elements become phantom grid cells
   (leaving an empty slot in the first row). Neutralise them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
	background: #fff; border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius);
	overflow: hidden; box-shadow: var(--ffs-shadow-sm); margin: 0 !important; width: auto !important;
	display: flex; flex-direction: column; padding: 0; text-align: left;
}
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; aspect-ratio: 1/1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .98rem; font-weight: 700; color: var(--ffs-navy); padding: 12px 14px 0; margin: 0;
	line-height: 1.3;
	/* Clamp to 2 lines so related/loop cards keep a uniform height regardless of
	   the (often long) filter product names. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: calc(1.3em * 2 + 12px);
}
.woocommerce ul.products li.product .price { color: var(--ffs-navy); font-weight: 800; padding: 0 14px; display: block; margin: .35rem 0; }
.woocommerce ul.products li.product .price del { color: var(--ffs-muted); font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ffs-green); }
.woocommerce ul.products li.product .star-rating { margin: .25rem 14px; font-size: .85rem; color: #F5A623; }
/* Loop / related add-to-cart button: full-width, centered, and allowed to wrap
   so long labels ("Select Variation") never overflow and clip inside the card. */
.woocommerce ul.products li.product .button {
	margin: auto 14px 14px; display: flex; width: auto;
	align-items: center; justify-content: center; gap: .35rem;
	white-space: normal; text-align: center; word-break: normal;
	padding: .55rem .7rem; font-size: .9rem; line-height: 1.15; min-height: 44px;
}
.woocommerce ul.products li.product .button .ffs-icon { flex: 0 0 auto; }
/* The theme shows a toast (with a "View cart" link) after an AJAX add, so hide
   WooCommerce's default appended "View cart" link next to the button. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce a.added_to_cart.wc-forward { display: none !important; }
.woocommerce span.onsale {
	background: var(--ffs-green); color: #fff; border-radius: 999px; min-height: 0; min-width: 0;
	padding: .25rem .6rem; font-weight: 800; font-size: .72rem; top: 10px; left: 10px; right: auto; margin: 0; line-height: 1.4;
}

/* Generic WooCommerce buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button {
	background: var(--ffs-primary); color: #fff; border-radius: 999px; font-weight: 700;
	min-height: 44px; padding: .6rem 1.2rem; line-height: 1.2; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: #0f57b8; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt { background: var(--ffs-green); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #2a9244; }

/* -------------------------------------------------------------------------
 * Pagination (shop + category archives): modern pill navigation.
 * ---------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
	margin: 2.5rem 0 .5rem; text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	border: 0; margin: 0; padding: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	border: 0; margin: 0; overflow: visible; display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 .85rem; margin: 0; float: none;
	border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm);
	background: #fff; color: var(--ffs-navy); font-weight: 700; font-size: .95rem; line-height: 1;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	background: var(--ffs-light, #f2f6fc); border-color: var(--ffs-primary); color: var(--ffs-primary);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	background: var(--ffs-primary); border-color: var(--ffs-primary); color: #fff; box-shadow: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
	border-color: transparent; background: transparent; box-shadow: none; color: var(--ffs-muted); min-width: 1.5rem; padding: 0;
}

/* Add to Cart buttons: transparent with a thick green border, 5px radius,
   centred text + icon. Hover fills green. Applies in the loop and single page. */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce button.single_add_to_cart_button,
.ffs-product-card .button,
.ffs-ajax-add {
	background: transparent !important;
	color: #10ce40 !important;
	border: 3px solid #10ce40 !important;
	border-radius: 5px !important;
	font-weight: 600 !important;
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	text-align: center;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce button.single_add_to_cart_button:hover,
.ffs-product-card .button:hover,
.ffs-ajax-add:hover {
	background: #10ce40 !important;
	color: #fff !important;
	border-color: #10ce40 !important;
}
.woocommerce .button.loading::after { color: inherit; }

/* Single product */
.single-product div.product { display: grid; gap: 28px; }
/* WooCommerce defaults float the gallery/summary and cap them at 48% width,
   which shrinks the summary inside its grid cell. Reset to full cell width. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
	width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .product_title { font-size: 1.5rem; letter-spacing: 1px; }
.single-product div.product p.price, .single-product div.product span.price { color: var(--ffs-navy); font-weight: 800; font-size: 1.4rem; }
.single-product .woocommerce-product-rating { margin-bottom: 1rem; }
.single-product form.cart { margin-bottom: 1.5rem; }
.single-product form.cart.is-loading { opacity: .6; pointer-events: none; }
.single-product .quantity input.qty { min-height: 46px; width: 72px; border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm); padding: .4rem; }

/* Variable product: sleek variation selectors + add-to-cart row */
.woocommerce div.product form.cart .variations { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.woocommerce div.product form.cart .variations tr { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.woocommerce div.product form.cart .variations th.label { text-align: left; padding: 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations th.label label { font-weight: 700; color: var(--ffs-navy); margin: 0; }
.woocommerce div.product form.cart .variations td.value { padding: 0; position: relative; }
.woocommerce div.product form.cart .variations select {
	min-height: 50px; width: 100%; max-width: 420px; padding: .7rem 2.6rem .7rem 1rem;
	font-size: 1rem; color: var(--ffs-text); background-color: #fff;
	border: 2px solid var(--ffs-border); border-radius: var(--ffs-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer;
}
.woocommerce div.product form.cart .variations select:hover { border-color: #c3ceda; }
.woocommerce div.product form.cart .variations select:focus { outline: none; border-color: var(--ffs-primary); box-shadow: 0 0 0 3px rgba(18, 102, 214, .15); }
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: .35rem; font-size: .85rem; color: var(--ffs-muted); }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .quantity input.qty {
	min-height: 50px; width: 84px; text-align: center; font-size: 1rem;
	border: 2px solid var(--ffs-border); border-radius: var(--ffs-radius-sm); background: #fff; padding: .4rem;
}
.woocommerce div.product form.cart .quantity input.qty:focus { outline: none; border-color: var(--ffs-primary); box-shadow: 0 0 0 3px rgba(18, 102, 214, .15); }
.woocommerce div.product form.cart button.single_add_to_cart_button {
	min-height: 50px; padding: .7rem 1.75rem; font-size: 1rem; flex: 1 1 auto; max-width: 340px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
	opacity: .55; cursor: not-allowed;
}
.woocommerce div.product form.cart.is-loading button.single_add_to_cart_button { opacity: .6; }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 1.3rem; margin-bottom: .75rem; display: block; }

/* Availability line under the price */
.ffs-availability { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; margin: 0 0 1rem; }
.ffs-availability--in { color: var(--ffs-green); }
.ffs-availability--out { color: var(--ffs-muted); }
.ffs-availability__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ffs-green); display: inline-block; }

/* -------------------------------------------------------------------------
 * YITH Product Add-ons & Extra Options: fix add-to-cart layout + style fields
 * to match the site. The cart form is a flex row (quantity + button); anything
 * YITH injects (add-on blocks, totals) must take its own full-width row so the
 * quantity field and Add to Cart button stay together and aligned.
 * ---------------------------------------------------------------------- */
.woocommerce div.product form.cart:not(.variations_form) > *:not(.quantity):not(.single_add_to_cart_button) {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}
.woocommerce div.product form.cart .yith-wapo-container,
.woocommerce div.product form.cart .yith-wapo-addons-container {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 1.25rem;
}
/* Add-on block spacing + titles */
.yith-wapo-container .yith-wapo-block { margin: 0 0 1.1rem; }
.yith-wapo-container .wapo-block-title,
.yith-wapo-container .yith-wapo-group-title,
.yith-wapo-container .wapo-addon-title,
.yith-wapo-container .yith-wapo-addon-label {
	font-weight: 700; color: var(--ffs-navy); margin: 0 0 .4rem; display: block;
}

/* Add-on SELECT fields: match the site's modern dropdown (custom chevron). */
.yith-wapo-container select,
.yith-wapo-addon select,
.yith-wapo-option select {
	appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
	min-height: 46px;
	width: 100%; max-width: 360px;
	padding: .55rem 2.5rem .55rem .9rem;
	font-size: .95rem; line-height: 1.3; font-weight: 500;
	color: var(--ffs-navy);
	background-color: #fff;
	border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 14px !important;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.yith-wapo-container select:hover,
.yith-wapo-addon select:hover { border-color: #b7c2d0; }
.yith-wapo-container select:focus,
.yith-wapo-addon select:focus { outline: none; border-color: var(--ffs-primary); box-shadow: 0 0 0 3px rgba(18, 102, 214, .15); }

/* Add-on text / number / textarea inputs: match the same field styling. */
.yith-wapo-container input[type="text"],
.yith-wapo-container input[type="number"],
.yith-wapo-container input[type="email"],
.yith-wapo-container input[type="tel"],
.yith-wapo-container textarea {
	min-height: 46px;
	width: 100%; max-width: 360px;
	padding: .55rem .9rem;
	font-size: .95rem; color: var(--ffs-navy);
	background-color: #fff;
	border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.yith-wapo-container textarea { min-height: 90px; }
.yith-wapo-container input[type="text"]:focus,
.yith-wapo-container input[type="number"]:focus,
.yith-wapo-container input[type="email"]:focus,
.yith-wapo-container input[type="tel"]:focus,
.yith-wapo-container textarea:focus {
	outline: none; border-color: var(--ffs-primary); box-shadow: 0 0 0 3px rgba(18, 102, 214, .15);
}

/* Single product meta (SKU / Categories / Tags / Brands): compact, one per row. */
.woocommerce div.product .product_meta { font-size: .8rem; color: var(--ffs-muted); margin-top: 1rem; }
.woocommerce div.product .product_meta > span,
.woocommerce div.product .product_meta > div {
	display: block; margin: 0 0 .35rem; line-height: 1.5;
}
.woocommerce div.product .product_meta > span:last-child,
.woocommerce div.product .product_meta > div:last-child { margin-bottom: 0; }
.woocommerce div.product .product_meta a { color: var(--ffs-primary); }

.ffs-spec-table { width: 100%; border-collapse: collapse; }
.ffs-spec-table th, .ffs-spec-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ffs-border); }
.ffs-spec-table th { width: 35%; color: var(--ffs-navy); }

/* Modern, flatter product tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 1.5rem;
	border-bottom: 2px solid var(--ffs-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 6px 6px 0 0;
	margin: 0; padding: 0; bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: .7rem 1.1rem; font-weight: 700; font-size: .95rem;
	color: var(--ffs-muted); border-bottom: 4px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ffs-navy); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ffs-primary); border-bottom-color: var(--ffs-primary); border-bottom-width: 5px;
}
.woocommerce div.product .woocommerce-tabs .panel { padding-top: .5rem; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.ffs-install-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .4rem; color: var(--ffs-text); }

/* Cart & checkout */
.woocommerce table.shop_table { border-radius: var(--ffs-radius); border-color: var(--ffs-border); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce form.checkout_coupon, .woocommerce-cart .cart-collaterals .cart_totals {
	border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius); padding: 1.25rem; background: #fff;
}
.woocommerce-checkout #payment { background: var(--ffs-light-blue); border-radius: var(--ffs-radius); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-checkout input:not([type="radio"]):not([type="checkbox"]), .select2-container .select2-selection {
	min-height: 46px; border: 1px solid var(--ffs-border) !important; border-radius: var(--ffs-radius-sm); padding: .55rem .75rem;
}

/* Modern, on-brand radio & checkbox fields (kept compact, not stretched) */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	width: 20px; height: 20px; min-height: 0; margin: 0 .55rem 0 0; padding: 0;
	border: 1.5px solid var(--ffs-border) !important; border-radius: 5px;
	background: #fff; vertical-align: -4px; cursor: pointer; flex: 0 0 auto;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.woocommerce input[type="radio"],
.woocommerce-checkout input[type="radio"] { border-radius: 50%; }
.woocommerce input[type="radio"]:hover,
.woocommerce input[type="checkbox"]:hover,
.woocommerce-checkout input[type="radio"]:hover,
.woocommerce-checkout input[type="checkbox"]:hover { border-color: var(--ffs-primary) !important; }
.woocommerce input[type="radio"]:focus-visible,
.woocommerce input[type="checkbox"]:focus-visible,
.woocommerce-checkout input[type="radio"]:focus-visible,
.woocommerce-checkout input[type="checkbox"]:focus-visible {
	outline: none; box-shadow: 0 0 0 3px rgba(18, 102, 214, .18);
}
/* Checked states */
.woocommerce input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
	background-color: var(--ffs-primary); border-color: var(--ffs-primary) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.woocommerce input[type="radio"]:checked,
.woocommerce-checkout input[type="radio"]:checked {
	border-color: var(--ffs-primary) !important;
	background-color: #fff;
	background-image: radial-gradient(circle, var(--ffs-primary) 0 5px, transparent 6px);
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--ffs-green); }
.woocommerce .woocommerce-error { border-top-color: #d63638; }

/* Review + comment form fields (modern, not native) */
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea,
#review_form select,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; min-height: 48px; padding: .65rem .85rem; font-size: 1rem;
	color: var(--ffs-text); background: #fff;
	border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-form textarea, #review_form textarea, #commentform textarea { min-height: 130px; line-height: 1.5; }
#review_form input:focus,
#review_form textarea:focus,
#review_form select:focus,
#commentform input:focus,
#commentform textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none; border-color: var(--ffs-primary);
	box-shadow: 0 0 0 3px rgba(18, 102, 214, .15);
}
.comment-form label, #review_form label { font-weight: 600; color: var(--ffs-navy); display: inline-block; margin-bottom: .3rem; }
.comment-form .comment-form-cookies-consent input { min-height: 0; width: auto; }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .7rem .9rem; border: 1px solid var(--ffs-border); border-radius: var(--ffs-radius-sm); color: var(--ffs-navy); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ffs-primary); color: #fff; border-color: var(--ffs-primary); }

/* Responsive */
@media (min-width: 600px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	/* Shop / category grid: 4 per row on smaller desktops. */
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
	.ffs-shop__layout--has-sidebar { grid-template-columns: 260px 1fr; }
	.ffs-shop__layout--has-sidebar .ffs-shop__sidebar { display: block; }
	.ffs-filter-toggle { display: none; }
	.single-product div.product { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related, .single-product div.product .up-sells { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	/* Full-desktop shop / category grid: 5 products per row. */
	.woocommerce ul.products { grid-template-columns: repeat(5, 1fr); }
	/* Wider content area on product listings so each card gets more room. */
	.ffs-shop.container { max-width: 1360px; }
}