/*
 * Additions for the plain-PHP site. Everything else is the ported WPDT
 * WExPress / WooCommerce CSS, so this file stays deliberately small.
 */

/* --- floating LINE button (was injected through a WordPress plugin) ------- */
.floating-line {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	text-align: right;
	margin: 0;
}
.floating-line img { max-width: 120px; height: auto; }
.floating-line-pill {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 30px;
	background: #06c755;
	color: #fff;
	font-size: 15px;
	line-height: 1.2;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.floating-line a:hover .floating-line-pill { background: #05a948; }
@media (max-width: 767px) {
	.floating-line { right: 12px; bottom: 12px; }
	.floating-line img { max-width: 84px; }
}

/* --- product page contact actions (replaced the add-to-cart form) -------- */
.product-contact-actions {
	margin: 1.2em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.product-contact-actions .button { margin: 0; }
.product-contact-actions .fa { margin-right: 6px; }

/* --- enquiry form -------------------------------------------------------- */
.inquiry-box {
	margin-top: 2.5em;
	padding: 24px;
	background: #fff;
	border: 1px solid #e4e1ea;
	border-radius: 4px;
}
.inquiry-box h2 { margin-top: 0; font-size: 20px; }
.inquiry-about { margin-bottom: 1em; }
.inquiry-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.inquiry-form .form-control { margin-bottom: 14px; }
.inquiry-form textarea { resize: vertical; }
.inquiry-note { color: #777; font-size: 13px; margin: 8px 0 14px; }
/* Honeypot: present in the DOM, never shown to a person. */
.inquiry-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- catalogue extras ---------------------------------------------------- */
.products.product-category-list { margin-bottom: 2em; }
.woocommerce-loop-category__title .count { background: none; color: #999; font-size: .85em; }
.wpdt-sorting { overflow: hidden; margin-bottom: 1em; }
.wpdt-sorting .woocommerce-ordering { float: left; }
.wpdt-sorting .woocommerce-result-count { float: right; margin: 6px 0 0; }
@media (max-width: 600px) {
	.wpdt-sorting .woocommerce-ordering,
	.wpdt-sorting .woocommerce-result-count { float: none; }
}
.home-featured { padding: 40px 0; }
.home-featured-more { text-align: center; margin-top: 1em; }
.search-again { max-width: 520px; margin-bottom: 1.5em; }

/* Single visible description tab: show the panel without WooCommerce's JS. */
.woocommerce div.product .woocommerce-tabs .panel { display: block; }

/* --- page width system ---------------------------------------------------
 * The theme's Bootstrap build caps .container at 1004px and never grows past
 * it, so on anything wider than a small laptop the product grid stopped well
 * short of the section around it. One width serves the navbar, the catalogue
 * and the footer, so the page reads as a single column system.
 */
@media (min-width: 1024px) {
	.container,
	.catalog-wrap {
		width: auto;
		max-width: 1600px;
		padding-left: 20px;
		padding-right: 20px;
	}
}
.catalog-wrap { padding-left: 20px; padding-right: 20px; }

/* --- product grid -------------------------------------------------------
 * Six across in every section. WooCommerce's own .columns-6 rule does the
 * sizing (13.5% per card plus a 3.8% gutter = exactly 100%), and the
 * .first/.last row markers are generated for six columns in
 * templates/layout/product-grid.php.
 *
 * Below 769px woocommerce-smallscreen.css takes over with two across. That is
 * left alone on purpose: six cards on a phone would be about 50px wide.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px;
	line-height: 1.4;
}
.woocommerce ul.products li.product .price { font-size: 13px; }
.woocommerce ul.products li.product .buttons .button {
	padding: 6px 10px;
	font-size: 12px;
}

/* --- category sidebar ---------------------------------------------------
 * Off by default (show_sidebar_categories). The theme shipped .widget,
 * .product-categories and .sidebar-* as empty rule sets, so the box below is
 * built from scratch, using the brand colours recovered from the Customizer.
 */
.sidebar-shop .widget_product_categories {
	background: #fff;
	border: 1px solid #e4e1ea;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 22px;
}
.sidebar-shop .widget_product_categories .widget-title {
	margin: 0;
	padding: 12px 16px;
	background: #fe6e00;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.sidebar-shop .widget_product_categories > ul.product-categories {
	margin: 0;
	padding: 6px 0;
	list-style: none;
}
.sidebar-shop .product-categories li { margin: 0; list-style: none; }
.sidebar-shop .product-categories > li + li { border-top: 1px solid #f0eef4; }
.sidebar-shop .product-categories a {
	display: block;
	padding: 9px 48px 9px 16px;
	color: #444;
	position: relative;
	line-height: 1.4;
}
.sidebar-shop .product-categories a:hover,
.sidebar-shop .product-categories a:focus {
	background: #fff4ec;
	color: #612f56;
	text-decoration: none;
}
.sidebar-shop .product-categories .count {
	position: absolute;
	right: 16px;
	top: 9px;
	color: #9b96a6;
	font-size: 12px;
	font-weight: 400;
}
.sidebar-shop .product-categories .children {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	background: #fbfafc;
	border-top: 1px solid #f0eef4;
}
.sidebar-shop .product-categories .children a {
	padding-left: 30px;
	font-size: 14px;
	color: #5c5767;
}
.sidebar-shop .product-categories .children a::before {
	content: "–";
	position: absolute;
	left: 16px;
	color: #c3bdcd;
}
.sidebar-shop .product-categories .children .children a { padding-left: 44px; }
.sidebar-shop .product-categories .children .children a::before { left: 30px; }
.sidebar-shop .product-categories .current-cat > a {
	background: #612f56;
	color: #fff;
	font-weight: 700;
}
.sidebar-shop .product-categories .current-cat > a:hover { background: #4e2545; }
.sidebar-shop .product-categories .current-cat > a .count { color: #e6d6e1; }
.sidebar-shop .product-categories .current-cat > .children { background: #fff; }
@media (max-width: 767px) {
	.sidebar-shop .widget_product_categories { margin-top: 24px; }
}

/* Search box under the category list. */
.sidebar-shop .widget_product_search {
	background: #fff;
	border: 1px solid #e4e1ea;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 22px;
}
.sidebar-shop .widget_product_search .widget-title {
	margin: 0;
	padding: 12px 16px;
	background: #612f56;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.sidebar-shop .widget_product_search .widget-inner { padding: 14px 16px; }
.sidebar-shop .widget_product_search .search-field {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #cfcad7;
	border-radius: 3px;
	margin-bottom: 8px;
}
.sidebar-shop .widget_product_search button {
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 3px;
	background: #fe6e00;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.sidebar-shop .widget_product_search button:hover { background: #e46200; }
.sidebar-shop .widget_product_search .screen-reader-text {
	position: absolute !important;
	left: -9999px;
}

/* --- home page with the category sidebar --------------------------------
 * Only used when home_sidebar is on. The Elementor layout was authored
 * full-width, so inside a 9-column slot its sections must stop adding their
 * own gutters or everything indents twice.
 */
.home-with-sidebar { padding-top: 18px; }
.home-with-sidebar .home-inner { min-width: 0; }
.home-with-sidebar .home-inner .elementor-section.elementor-section-boxed > .elementor-container,
.home-with-sidebar .home-inner .elementor-section-full_width > .elementor-container {
	max-width: 100% !important;
}
.home-with-sidebar .home-inner img { max-width: 100%; height: auto; }
.home-with-sidebar .home-inner .swiper,
.home-with-sidebar .home-inner .elementor-image-carousel-wrapper { max-width: 100%; }
.home-with-sidebar .home-inner ul.products { margin-left: 0; margin-right: 0; }
@media (max-width: 767px) {
	.home-with-sidebar { padding-top: 0; }
}