/*
Theme Name: Fronty
Theme URI: https://wpfronty.com/
Author: Muzammil Hussain
Author URI: https://muzammil.dev/
Description: Clean, minimal design and powerful feature set, Fronty enables agencies to build stylish and sophisticated WordPress websites. Fronty is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you’re building a website for your business, personal brand, or creative project, Fronty is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 0.0.1
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: fronty
*/





/* =========================================================
   TOOLTIQUE — GLOBAL FORM STYLES
   WordPress + WooCommerce
   ========================================================= */

:root {
	--form-height: 46px;
	--form-radius: 8px;

	--form-bg: var(--wp--preset--color--surface, #fff);
	--form-text: var(--wp--preset--color--primary-dark, #332416);
	--form-border: var(--wp--preset--color--border, #d8d1c8);
	--form-accent: var(--wp--preset--color--accent, #598e94);
	--form-accent-dark: var(--wp--preset--color--contrast-2, #335a64);
	--form-muted-bg: var(--wp--preset--color--surface-alt, #f3f3f3);

	--form-font-size: 15px;

	--form-padding-x: 14px;
	--form-padding-y: 11px;

	--form-focus-ring: 0 0 0 3px rgba(89, 142, 148, 0.18);
}


/* =========================================================
   BOX SIZING
   ========================================================= */

form *,
form *::before,
form *::after {
	box-sizing: border-box;
}


/* =========================================================
   LABELS
   ========================================================= */

form label,
.woocommerce form .form-row label {
	display: inline-block;
	margin-bottom: 7px;

	color: var(--form-text);

	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}


/* Required marker */

form .required,
.woocommerce form .required {
	color: #b74735;
	text-decoration: none;
}


/* =========================================================
   TEXT INPUTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea,
.woocommerce form .input-text,
.woocommerce-page form .input-text {
	width: 100%;
	max-width: 100%;

	min-height: var(--form-height);

	margin: 0;

	padding: var(--form-padding-y) var(--form-padding-x);

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background-color: var(--form-bg);
	color: var(--form-text);

	font: inherit;
	font-size: var(--form-font-size);
	font-weight: 400;
	line-height: 1.45;

	box-shadow: none;

	outline: none;

	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}


/* =========================================================
   HOVER
   ========================================================= */

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover,
.woocommerce form .input-text:hover {
	border-color: var(--form-accent);
}


/* =========================================================
   FOCUS
   ========================================================= */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus,
.woocommerce form .input-text:focus {
	border-color: var(--form-accent);
	box-shadow: var(--form-focus-ring);
	background-color: #fff;
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

input::placeholder,
textarea::placeholder {
	color: #817970;
	opacity: 1;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

textarea,
.woocommerce form textarea.input-text {
	min-height: 130px;
	resize: vertical;
	line-height: 1.6;
}


/* =========================================================
   SELECT
   ========================================================= */

select {
	appearance: none;
	-webkit-appearance: none;

	cursor: pointer;

	padding-right: 42px;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--form-text) 50%),
		linear-gradient(135deg, var(--form-text) 50%, transparent 50%);

	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 13px) 50%;

	background-size:
		5px 5px,
		5px 5px;

	background-repeat: no-repeat;
}


/* =========================================================
   CHECKBOXES + RADIO BUTTONS
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;

	margin: 0 8px 0 0;

	flex: 0 0 auto;

	border: 1px solid var(--form-border);

	background: var(--form-bg);

	accent-color: var(--form-accent);

	cursor: pointer;

	vertical-align: middle;
}


/* Better modern checkbox appearance */

input[type="checkbox"] {
	border-radius: 4px;
}

input[type="radio"] {
	border-radius: 50%;
}


input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--form-accent);
	outline-offset: 3px;
}


/* =========================================================
   FIELDSETS
   ========================================================= */

fieldset {
	margin: 0 0 24px;
	padding: 20px;

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background: transparent;
}

legend {
	padding: 0 8px;

	color: var(--form-text);

	font-weight: 600;
}


/* =========================================================
   FORM ROW SPACING
   ========================================================= */

form p,
form .form-row,
.woocommerce form .form-row {
	margin-top: 0;
	margin-bottom: 18px;
}


/* =========================================================
   DISABLED / READONLY
   ========================================================= */

input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly] {
	cursor: not-allowed;

	background-color: var(--form-muted-bg);

	color: #756e66;

	opacity: 0.7;
}


/* =========================================================
   VALIDATION
   ========================================================= */

input:user-invalid,
textarea:user-invalid,
select:user-invalid {
	border-color: #b74735;
}

input:user-invalid:focus,
textarea:user-invalid:focus,
select:user-invalid:focus {
	border-color: #b74735;
	box-shadow: 0 0 0 3px rgba(183, 71, 53, 0.14);
}


/* WooCommerce validation */

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #b74735;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: var(--form-accent);
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: var(--form-height);

	padding: 11px 20px;

	border: 1px solid var(--form-accent);
	border-radius: var(--form-radius);

	background: var(--form-accent);
	color: var(--wp--preset--color--surface, #fff);

	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}


button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--form-accent-dark);
	border-color: var(--form-accent-dark);
	color: #fff;
}


button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--form-accent);
	outline-offset: 3px;
}


/* =========================================================
   SEARCH FORMS
   ========================================================= */

.wp-block-search__inside-wrapper {
	display: flex;
	gap: 0;
}

.wp-block-search__input {
	border-radius: var(--form-radius) 0 0 var(--form-radius);
}

.wp-block-search__button {
	margin: 0;

	border-radius: 0 var(--form-radius) var(--form-radius) 0;
}


/* =========================================================
   WOOCOMMERCE SELECT2
   Country / State / Checkout fields
   ========================================================= */

.select2-container {
	width: 100% !important;
}

.select2-container .select2-selection--single {
	height: var(--form-height);

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background: var(--form-bg);
}

.select2-container .select2-selection--single
.select2-selection__rendered {
	height: var(--form-height);

	padding-left: var(--form-padding-x);
	padding-right: 40px;

	color: var(--form-text);

	line-height: var(--form-height);
}

.select2-container .select2-selection--single
.select2-selection__arrow {
	height: var(--form-height);
	right: 8px;
}

.select2-container--default.select2-container--focus
.select2-selection--single,
.select2-container--default.select2-container--open
.select2-selection--single {
	border-color: var(--form-accent);
	box-shadow: var(--form-focus-ring);
}


/* Select2 dropdown */

.select2-dropdown {
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background: var(--form-bg);

	overflow: hidden;
}

.select2-results__option {
	padding: 10px 14px;
}

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
	background: var(--form-accent);
	color: #fff;
}


/* =========================================================
   WOOCOMMERCE QUANTITY
   ========================================================= */

.woocommerce .quantity .qty {
	width: 80px;
	min-height: var(--form-height);

	padding: 8px;

	text-align: center;

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
}


/* =========================================================
   WOOCOMMERCE CHECKOUT
   ========================================================= */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}


/* Default fields */

.woocommerce form .form-row {
	width: 100%;
}


/* Half-width WooCommerce fields */

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: calc(50% - 10px);
	float: none;
}


/* =========================================================
   LOGIN / COUPON / CART FORMS
   ========================================================= */

.woocommerce-form-login,
.woocommerce-form-coupon,
.woocommerce .checkout_coupon {
	padding: 24px;

	border: 1px solid var(--form-border);
	border-radius: 12px;

	background: var(--form-bg);
}


/* =========================================================
   FILE INPUTS
   ========================================================= */

input[type="file"] {
	width: 100%;

	padding: 8px;

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background: var(--form-bg);
	color: var(--form-text);
}

input[type="file"]::file-selector-button {
	margin-right: 12px;

	padding: 8px 14px;

	border: 0;
	border-radius: 6px;

	background: var(--form-accent);
	color: #fff;

	font: inherit;
	font-weight: 600;

	cursor: pointer;
}


/* =========================================================
   RANGE
   ========================================================= */

input[type="range"] {
	width: 100%;

	accent-color: var(--form-accent);

	cursor: pointer;
}


/* =========================================================
   COLOR INPUT
   ========================================================= */

input[type="color"] {
	width: 48px;
	height: 42px;

	padding: 3px;

	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);

	background: var(--form-bg);

	cursor: pointer;
}


/* =========================================================
   AUTOFILL
   Prevent browser yellow from breaking theme
   ========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--form-text);

	-webkit-box-shadow:
		0 0 0 1000px var(--form-bg) inset;

	transition: background-color 9999s ease-in-out 0s;
}


/* =========================================================
   DESKTOP / LARGE SCREENS
   ========================================================= */

@media (min-width: 1200px) {

	:root {
		--form-height: 48px;
		--form-font-size: 15px;
		--form-padding-x: 16px;
	}

	textarea,
	.woocommerce form textarea.input-text {
		min-height: 145px;
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	:root {
		--form-height: 46px;
		--form-padding-x: 14px;
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		column-gap: 16px;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - 8px);
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	:root {
		/*
		 * 16px prevents iOS Safari from automatically
		 * zooming when focusing fields.
		 */
		--form-font-size: 16px;
		--form-height: 48px;
		--form-padding-x: 13px;
	}

	form label,
	.woocommerce form .form-row label {
		font-size: 14px;
	}

	form p,
	form .form-row,
	.woocommerce form .form-row {
		margin-bottom: 16px;
	}

	textarea,
	.woocommerce form textarea.input-text {
		min-height: 120px;
	}

	/* WooCommerce fields become full width */

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
	}

	/* Easier buttons on phones */

	button,
	input[type="submit"],
	.wp-element-button,
	.wp-block-button__link,
	.woocommerce button.button,
	.woocommerce a.button,
	.woocommerce input.button {
		min-height: 48px;
	}

	/* Search stays usable */

	.wp-block-search__inside-wrapper {
		width: 100%;
	}

	/* Login / coupon */

	.woocommerce-form-login,
	.woocommerce-form-coupon,
	.woocommerce .checkout_coupon {
		padding: 18px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

	:root {
		--form-padding-x: 11px;
	}

	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
		gap: 8px;
	}

	.wp-block-search__input,
	.wp-block-search__button {
		width: 100%;

		border-radius: var(--form-radius);
	}
}


/* =========================================================
   ACCESSIBILITY
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	input,
	select,
	textarea,
	button,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}



/* ######################################################################################### */

.is-style-ribbon {
    position: relative;
}

.is-style-ribbon:before, .is-style-ribbon:after {
    content: "";
    background-image: url(https://www.tooltique.co.uk/wp-content/themes/toolshop/images/ribbon-left.png);
    position: absolute;
    top: -2px;
    left: -40px;
    z-index: 99;
    width: 40px;
    height: 86px;
}

.is-style-ribbon:after {
    background-image: url(https://www.tooltique.co.uk/wp-content/themes/toolshop/images/ribbon-right.png);
    right: -40px;
    left: auto;
}

/* 1. Tooltique global layout */
.tooltique-shell {
    width: min(100% - 2rem, 1140px);
    margin-inline: auto;
}

/* 2. Header */
.tooltique-header {
    background:
        #e8e5e0
        url("./assets/images/header-bg.png")
        center 30% / cover no-repeat;
    border-block: 3px solid var(--wp--preset--color--secondary);
    border-bottom-width: 5px;
}

/* 3. Content/sidebar layout */
.tooltique-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 2.5rem;
}

/* 4. Product cards */
.wp-block-woocommerce-product-template {
    gap: 1.75rem;
}

.wp-block-woocommerce-product-template .wc-block-components-product-image img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* 5. Responsive */
@media (max-width: 782px) {
    .tooltique-content-layout {
        grid-template-columns: 1fr;
    }
}

/**
 * Tooltique responsive layout overrides
 *
 * Add this after the theme's existing CSS so these rules can override
 * desktop dimensions, fixed widths, floats, and oversized spacing.
 */
@media screen and (max-width: 991px) {

	/* =========================================================
	 * GLOBAL LAYOUT
	 * ======================================================= */

	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	img,
	svg,
	video,
	iframe {
		max-width: 100%;
		height: auto;
	}

	.container,
	.site-container,
	.content-container,
	.wrapper,
	.inner-wrapper,
	.site-inner,
	.content-area,
	.site-content,
	.entry-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding-right: clamp(16px, 4vw, 32px) !important;
		padding-left: clamp(16px, 4vw, 32px) !important;
	}

	/* Prevent wide elements from creating horizontal scrolling. */
	table,
	pre,
	.wp-block-table,
	.woocommerce,
	.woocommerce-page {
		max-width: 100%;
		overflow-x: auto;
	}

	/* =========================================================
	 * TYPOGRAPHY
	 * ======================================================= */

	body {
		font-size: 16px;
		line-height: 1.65;
	}

	h1,
	.h1,
	.entry-title {
		font-size: clamp(30px, 7vw, 48px) !important;
		line-height: 1.12 !important;
		overflow-wrap: anywhere;
	}

	h2,
	.h2 {
		font-size: clamp(25px, 5.5vw, 36px) !important;
		line-height: 1.2 !important;
		overflow-wrap: anywhere;
	}

	h3,
	.h3 {
		font-size: clamp(21px, 4.5vw, 28px) !important;
		line-height: 1.25 !important;
	}

	h4,
	.h4 {
		font-size: clamp(18px, 4vw, 22px) !important;
		line-height: 1.3 !important;
	}

	p,
	li {
		overflow-wrap: anywhere;
	}

	/* =========================================================
	 * HEADER
	 * ======================================================= */

	.site-header,
	header.site-header,
	.header-wrapper,
	.header-inner,
	.header-main {
		width: 100%;
		max-width: 100%;
	}

	.site-header .container,
	.site-header .wrapper,
	.header-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 16px;
		min-height: 72px;
	}

	.site-branding,
	.logo,
	.custom-logo-link {
		flex: 0 1 auto;
		min-width: 0;
	}

	.custom-logo-link img,
	.site-logo img,
	.logo img {
		width: auto !important;
		max-width: min(210px, 58vw) !important;
		max-height: 62px !important;
		object-fit: contain;
	}

	.site-description,
	.tagline {
		font-size: 12px !important;
		line-height: 1.3;
	}

	.header-cart,
	.cart-contents,
	.site-header-cart {
		flex: 0 0 auto;
	}

	/* =========================================================
	 * MOBILE NAVIGATION
	 * ======================================================= */

	.menu-toggle,
	.mobile-menu-toggle,
	.nav-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
	}

	.main-navigation,
	.primary-navigation,
	.site-navigation {
		max-width: 100%;
	}

	.main-navigation ul,
	.primary-navigation ul,
	.site-navigation ul {
		max-width: 100%;
	}

	.main-navigation.toggled > ul,
	.main-navigation.toggled .menu,
	.primary-navigation.is-open .menu,
	.mobile-menu-open .main-navigation .menu {
		display: flex !important;
		flex-direction: column;
		width: 100%;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		padding: 12px 0;
		background: #fff;
	}

	.main-navigation li,
	.primary-navigation li {
		width: 100%;
		float: none !important;
	}

	.main-navigation a,
	.primary-navigation a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 46px;
		padding: 11px 16px !important;
		white-space: normal;
	}

	/* Convert desktop mega menus into normal stacked mobile menus. */
	.main-navigation .sub-menu,
	.main-navigation .mega-menu,
	.main-navigation .mega-sub-menu,
	.primary-navigation .sub-menu,
	.primary-navigation .mega-menu {
		position: static !important;
		inset: auto !important;
		display: none;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 0 0 14px !important;
		transform: none !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu,
	.main-navigation .menu-item-has-children.is-open > .sub-menu,
	.main-navigation .menu-item-has-children.focus > .sub-menu {
		display: block;
	}

	.main-navigation .mega-menu > *,
	.main-navigation .mega-menu-column,
	.main-navigation .sub-menu > li {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* =========================================================
	 * HERO / HOMEPAGE SLIDER
	 * ======================================================= */

	.hero,
	.hero-section,
	.home-slider,
	.main-slider,
	.slider-wrapper,
	.swiper,
	.slick-slider,
	.owl-carousel {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden;
	}

	.hero-slide,
	.slide,
	.swiper-slide,
	.slick-slide,
	.owl-item {
		min-height: auto !important;
	}

	.hero-slide,
	.hero-content,
	.slide-content,
	.banner-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: center;
		gap: 20px;
	}

	.hero-image,
	.slide-image,
	.banner-image,
	.hero-content > img {
		width: 100% !important;
		height: clamp(260px, 62vw, 520px) !important;
		object-fit: cover !important;
		object-position: center;
	}

	.hero-copy,
	.hero-text,
	.slide-caption,
	.banner-caption {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(22px, 5vw, 40px) !important;
		transform: none !important;
		text-align: center;
	}

	.hero-copy p,
	.hero-text p,
	.slide-caption p {
		max-width: 680px;
		margin-right: auto;
		margin-left: auto;
	}

	.hero .button,
	.hero .btn,
	.hero .wp-element-button,
	.slide-caption .button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 11px 22px;
	}

	.slick-prev,
	.slick-next,
	.swiper-button-prev,
	.swiper-button-next,
	.owl-prev,
	.owl-next {
		width: 42px !important;
		height: 42px !important;
	}

	/* =========================================================
	 * GENERAL COLUMNS AND GRIDS
	 * ======================================================= */

	.row,
	.columns,
	.content-row,
	.home-row,
	.section-row,
	.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-column,
	.column,
	.content-column,
	.home-column {
		min-width: 0 !important;
	}

	.three-columns,
	.four-columns,
	.feature-grid,
	.category-grid,
	.products-grid,
	.blog-grid,
	.footer-widgets,
	.sold-products,
	.product-gallery {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: clamp(16px, 3vw, 28px) !important;
	}

	/* =========================================================
	 * HOMEPAGE CONTENT SECTIONS
	 * ======================================================= */

	section,
	.home-section,
	.content-section {
		max-width: 100%;
	}

	.home-section,
	.content-section,
	.newsletter-section,
	.about-section,
	.investment-section,
	.sold-tools-section {
		padding-top: clamp(38px, 7vw, 72px) !important;
		padding-bottom: clamp(38px, 7vw, 72px) !important;
	}

	.entry-content > * {
		max-width: 100%;
	}

	.entry-content > p,
	.entry-content > h2,
	.entry-content > h3,
	.entry-content > ul,
	.entry-content > ol {
		width: min(100%, 860px);
		margin-right: auto;
		margin-left: auto;
	}

	/* Remove desktop floats that create narrow text columns. */
	.alignleft,
	.alignright,
	.wp-caption.alignleft,
	.wp-caption.alignright {
		float: none !important;
		display: block;
		max-width: 100% !important;
		margin: 24px auto !important;
	}

	/* =========================================================
	 * SOLD PRODUCTS / IMAGE GALLERIES
	 * ======================================================= */

	.products,
	ul.products,
	.woocommerce ul.products,
	.sold-products,
	.product-gallery,
	.gallery {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}

	.products::before,
	.products::after,
	ul.products::before,
	ul.products::after {
		display: none !important;
	}

	.products > *,
	ul.products > li,
	.woocommerce ul.products li.product,
	.gallery-item {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	.product img,
	.gallery-item img,
	.sold-products img {
		display: block;
		width: 100% !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* =========================================================
	 * NEWSLETTER
	 * ======================================================= */

	.newsletter,
	.newsletter-section,
	.newsletter-wrapper,
	.mc4wp-form,
	.mailpoet_form,
	.tnp-subscription {
		width: 100% !important;
		max-width: 100% !important;
	}

	.newsletter-wrapper,
	.newsletter-inner,
	.newsletter-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 24px;
	}

	.newsletter form,
	.mc4wp-form form,
	.mailpoet_form form,
	.tnp-subscription form {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		width: 100%;
		max-width: 720px;
		margin: 0 auto;
	}

	.newsletter input[type="email"],
	.mc4wp-form input[type="email"],
	.mailpoet_form input[type="email"],
	.tnp-subscription input[type="email"] {
		width: 100% !important;
		min-width: 0;
		min-height: 48px;
	}

	.newsletter input[type="submit"],
	.newsletter button,
	.mc4wp-form input[type="submit"],
	.mailpoet_form input[type="submit"],
	.tnp-subscription input[type="submit"] {
		min-height: 48px;
		padding-right: 22px;
		padding-left: 22px;
		white-space: nowrap;
	}

	/* =========================================================
	 * FORMS
	 * ======================================================= */

	input,
	select,
	textarea,
	button {
		max-width: 100%;
		font: inherit;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	select,
	textarea {
		width: 100%;
		min-height: 46px;
		font-size: 16px;
	}

	textarea {
		min-height: 130px;
	}

	.form-row,
	.form-group,
	.gform_fields,
	.wpforms-field-container {
		max-width: 100%;
	}

	/* =========================================================
	 * FOOTER
	 * ======================================================= */

	.site-footer,
	.footer,
	.footer-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.site-footer .widget-area,
	.footer-widgets,
	.footer-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 30px !important;
	}

	.site-footer ul,
	.footer ul {
		margin-left: 0;
		padding-left: 0;
		list-style: none;
	}

	/* =========================================================
	 * FLOATING REQUEST TAB / DRAWERS
	 * ======================================================= */

	.tool-request-tab,
	.request-tab,
	.contact-tab,
	.fixed-side-tab {
		right: 12px !important;
		bottom: 12px !important;
		left: auto !important;
		max-width: calc(100vw - 24px) !important;
		transform: none !important;
	}

	.tool-request-panel,
	.request-panel,
	.contact-panel,
	.offcanvas,
	.cart-drawer,
	.mini-cart-drawer {
		width: min(420px, 100vw) !important;
		max-width: 100vw !important;
	}

	/* =========================================================
	 * COOKIE BANNER / MODAL
	 * ======================================================= */

	.cookie-notice,
	.cookie-banner,
	#cookie-law-info-bar,
	.cky-consent-container,
	.cli-bar-container {
		width: calc(100% - 24px) !important;
		max-width: none !important;
		right: 12px !important;
		bottom: 12px !important;
		left: 12px !important;
		padding: 16px !important;
	}

	.cookie-notice button,
	.cookie-banner button,
	#cookie-law-info-bar .cli_action_button,
	.cky-consent-container button {
		min-height: 42px;
	}

	/* =========================================================
	 * TABLET-SPECIFIC REFINEMENTS
	 * ======================================================= */

	@media screen and (max-width: 767px) {

		.container,
		.site-container,
		.content-container,
		.wrapper,
		.site-inner,
		.content-area,
		.site-content,
		.entry-content {
			padding-right: 18px !important;
			padding-left: 18px !important;
		}

		.site-header .container,
		.site-header .wrapper,
		.header-inner {
			min-height: 64px;
		}

		.site-description,
		.tagline {
			display: none;
		}

		.hero-image,
		.slide-image,
		.banner-image,
		.hero-content > img {
			height: clamp(230px, 70vw, 420px) !important;
		}

		.hero-copy,
		.hero-text,
		.slide-caption,
		.banner-caption {
			padding: 24px 18px !important;
		}

		.three-columns,
		.four-columns,
		.feature-grid,
		.category-grid,
		.blog-grid,
		.footer-widgets {
			grid-template-columns: 1fr !important;
		}

		.newsletter form,
		.mc4wp-form form,
		.mailpoet_form form,
		.tnp-subscription form {
			grid-template-columns: 1fr;
		}

		.newsletter input[type="submit"],
		.newsletter button,
		.mc4wp-form input[type="submit"],
		.mailpoet_form input[type="submit"],
		.tnp-subscription input[type="submit"] {
			width: 100%;
		}

		.site-footer .widget-area,
		.footer-widgets,
		.footer-columns {
			grid-template-columns: 1fr !important;
		}

		.site-footer,
		.footer {
			text-align: center;
		}
	}

	/* =========================================================
	 * SMALL MOBILE REFINEMENTS
	 * ======================================================= */

	@media screen and (max-width: 479px) {

		body {
			font-size: 15px;
		}

		.custom-logo-link img,
		.site-logo img,
		.logo img {
			max-width: 170px !important;
			max-height: 54px !important;
		}

		.products,
		ul.products,
		.woocommerce ul.products,
		.sold-products,
		.product-gallery,
		.gallery {
			grid-template-columns: 1fr !important;
		}

		.hero-image,
		.slide-image,
		.banner-image,
		.hero-content > img {
			height: 250px !important;
		}

		.hero .button,
		.hero .btn,
		.hero .wp-element-button,
		.slide-caption .button {
			width: 100%;
		}

		.slick-prev,
		.swiper-button-prev,
		.owl-prev {
			left: 8px !important;
		}

		.slick-next,
		.swiper-button-next,
		.owl-next {
			right: 8px !important;
		}

		.tool-request-panel,
		.request-panel,
		.contact-panel,
		.offcanvas,
		.cart-drawer,
		.mini-cart-drawer {
			width: 100vw !important;
		}
	}
}









/* =========================================
   RESPONSIVE WOOCOMMERCE PRODUCT SHOWCASE
   ========================================= */

.product-showcase-mask {
	position: relative;
	overflow: hidden;

	/* Desktop visible area */
	height: clamp(420px, 38vw, 600px);
}


/* -----------------------------------------
   PRODUCT TRANSITIONS
   ----------------------------------------- */

.product-showcase-mask .wc-block-product {
	transform: translateY(0);
}


/* =========================================
   5 COLUMNS
   Large desktop
   ========================================= */

@media (min-width: 1280px) {

	.product-showcase-mask .wc-block-product:nth-child(5n + 1),
	.product-showcase-mask .wc-block-product:nth-child(5n + 5) {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(5n + 2),
	.product-showcase-mask .wc-block-product:nth-child(5n + 4) {
		transform: translateY(45px);
	}

	.product-showcase-mask .wc-block-product:nth-child(5n + 3) {
		transform: translateY(85px);
	}
}


/* =========================================
   4 COLUMNS
   Desktop / laptop
   ========================================= */

@media (min-width: 960px) and (max-width: 1279px) {

	.product-showcase-mask {
		height: clamp(400px, 46vw, 560px);
	}

	.product-showcase-mask .wc-block-product {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(4n + 1),
	.product-showcase-mask .wc-block-product:nth-child(4n + 4) {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(4n + 2),
	.product-showcase-mask .wc-block-product:nth-child(4n + 3) {
		transform: translateY(55px);
	}
}


/* =========================================
   3 COLUMNS
   Tablet
   ========================================= */

@media (min-width: 600px) and (max-width: 959px) {

	.product-showcase-mask {
		height: clamp(380px, 62vw, 520px);
	}

	.product-showcase-mask .wc-block-product {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(3n + 1),
	.product-showcase-mask .wc-block-product:nth-child(3n + 3) {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(3n + 2) {
		transform: translateY(55px);
	}
}


/* =========================================
   2 COLUMNS
   Mobile
   ========================================= */

@media (max-width: 599px) {

	.product-showcase-mask {
		height: clamp(350px, 110vw, 480px);
	}

	.product-showcase-mask .wc-block-product {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(2n + 1) {
		transform: translateY(0);
	}

	.product-showcase-mask .wc-block-product:nth-child(2n + 2) {
		transform: translateY(40px);
	}
}