/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* ==========================================================================
   Liberty Watches
   ========================================================================== */

:root {
	--lw-navy: #123D73;
	--lw-red: #D72638;
	--lw-ink: #1A1A1A;
	--lw-muted: #5A6472;
	--lw-line: #E6EAF0;
	--lw-light: #F5F7FA;
}

/* --- Hero slider ----------------------------------------------------------- */

.lw-hero {
	position: relative;
	width: 100%;
	height: 520px;
	overflow: hidden;
	background: #0A192F;
}

.lw-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s ease;
}

.lw-slide.is-active { opacity: 1; visibility: visible; }

.lw-slide img.lw-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Readability over any client-uploaded picture. */
.lw-slide-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 16, 34, .82) 0%, rgba(6, 16, 34, .45) 55%, rgba(6, 16, 34, .15) 100%);
}

.lw-slide-inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.lw-slide-eyebrow {
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--lw-red);
}

.lw-slide-title {
	margin: 0;
	max-width: 620px;
	font-family: "Playfair Display", serif;
	font-size: 58px;
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
}

.lw-slide-text {
	margin: 16px 0 0;
	max-width: 460px;
	font-family: Poppins, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #E5E5E5;
}

.lw-slide-btn {
	display: inline-block;
	margin-top: 26px;
	padding: 14px 32px;
	background: var(--lw-navy);
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 4px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
	transition: background .18s ease;
}

.lw-slide-btn:hover { background: var(--lw-red); color: #fff !important; }

.lw-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	transition: background .18s ease;
}

.lw-hero-arrow:hover { background: var(--lw-red); }
.lw-hero-prev { left: 18px; }
.lw-hero-next { right: 18px; }

.lw-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
}

.lw-hero-dot {
	width: 26px;
	height: 4px;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background .18s ease;
}

.lw-hero-dot.is-active { background: var(--lw-red); }

@media (max-width: 1024px) {
	.lw-hero { height: 430px; }
	.lw-slide-title { font-size: 42px; }
}

@media (max-width: 767px) {
	.lw-hero { height: 360px; }
	.lw-hero-arrow { display: none; } /* swipe instead */
	.lw-slide-inner { padding: 0 22px; }
	.lw-slide-eyebrow { font-size: 12px; letter-spacing: 1.2px; }
	.lw-slide-title { font-size: 27px; line-height: 1.2; }
	.lw-slide-text { font-size: 13px; margin-top: 10px; }
	.lw-slide-btn { margin-top: 18px; padding: 11px 24px; font-size: 12px; }
	.lw-slide-shade { background: linear-gradient(90deg, rgba(6,16,34,.86) 0%, rgba(6,16,34,.55) 70%, rgba(6,16,34,.3) 100%); }
}

/* --- Search form + suggestion dropdown ------------------------------------- */

.lw-search {
	position: relative;
	display: flex;
	width: 100%;
}

.lw-search input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--lw-line);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: var(--lw-light);
	font-family: Poppins, sans-serif;
	font-size: 14px;
	color: var(--lw-ink);
}

.lw-search input:focus { outline: none; border-color: var(--lw-navy); }

/* Direct child only: the "See all results" button inside the dropdown is also
   type=submit, and this rule was shrinking it into a 52px navy square. */
.lw-search > button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 46px;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: var(--lw-navy);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease;
}

.lw-search > button[type="submit"]:hover { background: var(--lw-red); }

.lw-search-drop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9990;
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(10, 25, 47, .18);
	overflow: hidden;
}

.lw-sd-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	text-decoration: none;
	border-bottom: 1px solid var(--lw-light);
	transition: background .12s ease;
}

.lw-sd-item:hover { background: var(--lw-light); }

.lw-sd-item img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 4px;
	flex: none;
}

.lw-sd-name {
	flex: 1;
	min-width: 0;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	color: var(--lw-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lw-sd-price {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--lw-navy);
	flex: none;
}

.lw-sd-all {
	display: block;
	width: 100% !important;
	height: auto !important;
	padding: 11px !important;
	border: 0;
	border-radius: 0 !important;
	background: var(--lw-light);
	color: var(--lw-navy);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}

.lw-sd-all:hover { background: var(--lw-navy); color: #fff; }

.lw-sd-none {
	margin: 0;
	padding: 16px;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	color: var(--lw-muted);
	text-align: center;
}

.lw-oc-address { margin: 8px 0 0; text-align: center; font-size: 12px; line-height: 1.5; }
.lw-oc-address a { color: var(--lw-muted); text-decoration: none; }
.lw-oc-phone a { color: var(--lw-navy); text-decoration: none; }

/* --- Floating WhatsApp button --------------------------------------------- */

.lw-float-wa {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #25D366;
	color: #fff !important;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .18s ease, background .18s ease;
}

.lw-float-wa:hover { background: #128C7E; color: #fff !important; transform: scale(1.07); }
.lw-float-wa svg { width: 30px; height: 30px; }

@media (max-width: 767px) {
	.lw-float-wa { width: 50px; height: 50px; right: 14px; bottom: 14px; }
	.lw-float-wa svg { width: 27px; height: 27px; }
}

/* --- Burger + off-canvas menu --------------------------------------------- */

.lw-burger {
	display: none; /* mobile only */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	background: none;
	border: 0;
	cursor: pointer;
}

.lw-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--lw-navy);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.lw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lw-oc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(10, 25, 47, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.lw-oc-backdrop.is-open { opacity: 1; visibility: visible; }

.lw-oc {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	width: 300px;
	max-width: 86vw;
	height: 100%;
	padding: 18px;
	background: #fff;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
	overflow-y: auto;
	/* Slide in from the right. */
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
	visibility: hidden;
}

.lw-oc.is-open { transform: translateX(0); visibility: visible; }

body.lw-oc-locked { overflow: hidden; }

.lw-oc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lw-line);
}

.lw-oc-logo img { height: 46px; width: auto; }

.lw-oc-close {
	width: 38px;
	height: 38px;
	background: var(--lw-light);
	border: 0;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var(--lw-navy);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.lw-oc-close:hover { background: var(--lw-red); color: #fff; }

.lw-oc-search { display: flex; margin: 16px 0; }

.lw-oc-search input {
	flex: 1;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--lw-line);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: var(--lw-light);
	font-size: 14px;
}

.lw-oc-search button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	background: var(--lw-navy);
	border: 0;
	border-radius: 0 4px 4px 0;
	color: #fff;
	cursor: pointer;
}

.lw-oc-menu { list-style: none; margin: 0; padding: 0; }

.lw-oc-menu li { border-bottom: 1px solid var(--lw-line); }

.lw-oc-menu a {
	display: block;
	padding: 14px 4px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--lw-ink);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}

.lw-oc-menu a:hover,
.lw-oc-menu .current-menu-item > a {
	color: var(--lw-red);
	padding-left: 7px;
}

.lw-oc-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 20px;
	padding: 13px;
	background: #25D366;
	color: #fff !important;
	border-radius: 6px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lw-oc-wa:hover { background: #128C7E; color: #fff !important; }
.lw-oc-wa svg { width: 19px; height: 19px; }

.lw-oc-phone {
	margin: 10px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--lw-navy);
}

/* --- Header --------------------------------------------------------------- */

.lw-topbar-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
}

.lw-topbar .elementor-widget-text-editor p { margin: 0; letter-spacing: .3px; }

/* Logo | search | WhatsApp | burger. Search takes the slack; the burger cell
   collapses to zero on desktop and only appears under 767px. */
.lw-head-row {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 28px;
	width: 100%;
}

/* Elementor gives each child container its own align/justify settings; pin
   every header cell (and its content) to the vertical centre so the logo,
   search box and burger sit on one optical line. */
.lw-head-row > .e-con {
	align-self: center !important;
	align-items: center !important;
	justify-content: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.lw-head-row .lw-search { margin: 0; }
.lw-head-row .elementor-widget { margin-bottom: 0 !important; }

/* Search sits in the grid's 1fr cell, but align-items:center on the header
   containers pinned the shortcode widget to its ~254px content width. Let it
   stretch to a wide, prominent bar and keep it centred in the cell. */
.lw-head-search .elementor-widget { width: 100% !important; max-width: 640px !important; margin-left: auto; margin-right: auto; }
.lw-head-search .elementor-shortcode { width: 100%; }

.lw-head-burger { display: none; }

/* Elementor's own .elementor-widget-image img rule matches at the same
   specificity and loads later, so scope ours up to win. */
.elementor .lw-head-logo img,
.elementor .lw-head-logo .elementor-widget-image img {
	height: 62px;
	width: auto;
	max-width: none;
}

.lw-navbar { border-top: 1px solid var(--lw-line); border-bottom: 1px solid var(--lw-line); }
.lw-nav-wrap { align-items: center; }

.lw-nav .elementor-nav-menu--main .elementor-item { font-size: 13px; }

/* The nav-menu widget runs with dropdown:none because Elementor's burger panel
   would not open on this install (see lib_build_chrome.php). The full menu is
   always rendered, so it has to wrap gracefully on narrow screens. */
.lw-nav .elementor-nav-menu--main {
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 1024px) {
	.lw-nav .elementor-nav-menu--main .elementor-item {
		padding: 10px 9px !important;
		font-size: 12px !important;
	}
}

@media (max-width: 767px) {
	.lw-nav .elementor-nav-menu--main .elementor-item {
		padding: 8px 7px !important;
		font-size: 11px !important;
		letter-spacing: 0 !important;
	}
}

/* --- Footer --------------------------------------------------------------- */

.lw-foot-row {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 34px;
	width: 100%;
	align-items: start;
}

.elementor .lw-foot-logo img {
	height: 74px;
	width: auto;
	max-width: none;
}

.lw-footer .elementor-widget-text-editor p { margin: 10px 0 0; line-height: 1.65; }
.lw-footer .elementor-heading-title { margin-bottom: 14px; }
.lw-footer .elementor-icon-list-item a:hover { padding-left: 3px; transition: padding-left .15s ease; }
.lw-copybar .elementor-widget-text-editor p { margin: 0; }

/* --- Prices: kill the framework defaults --------------------------------- */

/* WooCommerce ships a green .price (#57BF6D) and Elementor's kit shipped a blue
   #6EC1E4, both of which won over the widgets' own colour settings. Pin the
   brand colours once, here, for every price on the site. */
.woocommerce .price,
.woocommerce .price .amount,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.lw-sp-price .price,
.lw-sp-price .price .amount {
	color: var(--lw-navy);
}

/* Was-price: muted and struck, never coloured. */
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce div.product p.price del,
.lw-sp-price .price del,
.lw-sp-price .price del .amount {
	color: var(--lw-muted) !important;
	font-weight: 400;
	opacity: .8;
}

/* Now-price: brand red. */
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce div.product p.price ins,
.lw-sp-price .price ins,
.lw-sp-price .price ins .amount {
	color: var(--lw-red) !important;
	text-decoration: none;
	font-weight: 600;
}

/* --- Global link / accent defaults --------------------------------------- */

/* OceanWP defaults every link hover to its own #13aff0 accent. */
a { color: var(--lw-navy); }
a:hover,
a:focus { color: var(--lw-red); }

.woocommerce-breadcrumb a:hover,
.lw-crumbs a:hover,
.product_meta a:hover,
.woocommerce-tabs .wc-tabs li a:hover { color: var(--lw-red); }

/* Star ratings: amber, not the theme accent. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.lw-sp-rating .elementor-star-rating i.elementor-star-full { color: #F5A623; }

/* Form focus rings */
input:focus,
select:focus,
textarea:focus { border-color: var(--lw-navy) !important; outline-color: var(--lw-navy); }

/* OceanWP's grid/list switcher on the shop archive defaults to its own
   #13aff0 cyan for the active view. */
.oceanwp-grid-list a,
.oceanwp-grid-list a i { color: var(--lw-muted); }

.oceanwp-grid-list a.active,
.oceanwp-grid-list a.active i,
.oceanwp-grid-list a:hover,
.oceanwp-grid-list a:hover i { color: var(--lw-navy) !important; }

/* The switcher buttons are styled by ID (#oceanwp-grid / #oceanwp-list), which
   outranks any class selector - hence the ID here rather than a class. */
.oceanwp-grid-list a.active,
.oceanwp-grid-list a:hover,
#oceanwp-grid.active,
#oceanwp-list.active,
#oceanwp-grid:hover,
#oceanwp-list:hover {
	border-color: var(--lw-navy) !important;
	color: var(--lw-navy) !important;
}

/* Social icons: brand palette, not each network's own colour. */
.lw-footer .elementor-social-icon,
.elementor-social-icons-wrapper .elementor-social-icon {
	background-color: rgba(255, 255, 255, .12) !important;
	transition: background-color .18s ease;
}

.lw-footer .elementor-social-icon:hover,
.elementor-social-icons-wrapper .elementor-social-icon:hover {
	background-color: var(--lw-red) !important;
}

.lw-footer .elementor-social-icon i,
.lw-footer .elementor-social-icon svg { color: #fff; fill: #fff; }

/* --- Product grids (Featured / Best Sellers / Shop) ---------------------- */

/* OceanWP lays the loop out with floats and percentage `span_1_of_4` widths.
   Adding a border + padding tipped each item past 25% and the rows wrapped
   ragged (3-1-3-1). Drive the columns with CSS Grid instead so the count is
   exact regardless of item box model. */
.lw-grid ul.products,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
}

.lw-grid ul.products li.product,
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 14px !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Pin the Add to Cart button to the bottom so ragged titles don't
   leave the buttons at different heights. */
.lw-grid ul.products li.product .product-inner,
.woocommerce ul.products li.product .product-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lw-grid ul.products li.product .button,
.woocommerce ul.products li.product .button {
	margin-top: auto;
}

.lw-grid ul.products li.product,
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 8px;
	padding: 14px;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lw-grid ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(18, 61, 115, .13);
	border-color: transparent;
}

/* Source images vary in aspect ratio and background; contain them in a
   uniform box so the grid rows stay level. */
.lw-grid ul.products li.product img,
.woocommerce ul.products li.product img {
	height: 190px;
	width: 100%;
	object-fit: contain;
	background: #fff;
	margin-bottom: 10px;
}

/* OceanWP prints the loop title as a bare <h2>, without WooCommerce's
   .woocommerce-loop-product__title class - target both. */
.lw-grid ul.products li.product h2,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px !important;
	line-height: 1.45;
	min-height: 38px;
	margin-bottom: 6px;
	color: var(--lw-ink);
}

/* OceanWP shows the category name above the title; mute it. */
.woocommerce ul.products li.product .woo-entry-inner .category {
	font-size: 11px;
	color: var(--lw-muted);
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* Struck-through original price sits next to the sale price. */
.woocommerce ul.products li.product .price del {
	color: var(--lw-muted);
	font-weight: 400;
	opacity: .75;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--lw-red);
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	border-radius: 4px;
	letter-spacing: .4px;
	text-transform: uppercase;
}

/* --- SALE badge ---------------------------------------------------------- */

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--lw-red);
	color: #fff;
	border-radius: 3px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
}

/* --- Category cards ------------------------------------------------------ */

.woocommerce ul.products li.product-category a {
	display: block;
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product-category a:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(18, 61, 115, .13);
}

.woocommerce ul.products li.product-category img {
	height: 210px;
	object-fit: contain;
	background: var(--lw-light);
	padding: 18px;
	margin: 0;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	font-size: 15px !important;
	font-weight: 600;
	padding: 16px 10px;
	margin: 0;
	color: var(--lw-navy);
}

/* Product count reads as a subtitle rather than a raw number. */
.woocommerce ul.products li.product-category h2 .count {
	display: block;
	background: none;
	color: var(--lw-red);
	font-size: 12px;
	font-weight: 400;
	padding: 4px 0 0;
}

/* --- Equal-width rows (Why Choose / Testimonials) ------------------------ */

/* Elementor tags these; the column count lives here. Percentage widths plus a
   flex gap always overflow the container and wrap the last cell. */
.elementor .lw-row {
	display: grid !important;
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.elementor .lw-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.elementor .lw-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.elementor .lw-row > .lw-cell {
	width: auto !important;
	max-width: none !important;
	background: #fff;
	border-radius: 8px;
	padding: 26px 18px;
	box-shadow: 0 2px 12px rgba(18, 61, 115, .08);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* --- Single product ------------------------------------------------------ */

.single-product .product_title {
	font-family: Poppins, sans-serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--lw-navy);
	margin-bottom: 10px;
}

.single-product .summary .price {
	font-family: Poppins, sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--lw-red);
	margin-bottom: 14px;
}

.single-product .summary .price del {
	color: var(--lw-muted);
	font-size: 17px;
	font-weight: 400;
	margin-right: 8px;
}

.single-product .summary .price ins { text-decoration: none; color: var(--lw-red); }

.single-product .woocommerce-product-gallery img {
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 8px;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--lw-muted);
	font-size: 14px;
	line-height: 1.7;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lw-line);
	margin-bottom: 18px;
}

/* --- WhatsApp order box (replaces Add to Cart) ---------------------------- */

.lw-order-box {
	margin: 6px 0 22px;
	padding: 20px;
	background: var(--lw-light);
	border: 1px solid var(--lw-line);
	border-radius: 10px;
}

.lw-wa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	background: #25D366;
	color: #fff !important;
	border-radius: 6px;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.lw-wa-btn:hover {
	background: #128C7E;
	transform: translateY(-2px);
	color: #fff !important;
}

.lw-wa-btn svg { width: 22px; height: 22px; flex: none; }

.lw-order-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lw-muted);
	text-align: center;
}

/* Loop card enquiry button */
.lw-loop-wa {
	display: block;
	width: 100%;
	padding: 10px 8px !important;
	background: var(--lw-navy) !important;
	color: #fff !important;
	border-radius: 4px;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: .3px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease;
}

.lw-loop-wa:hover { background: #25D366 !important; color: #fff !important; }

/* --- Product tabs / related ---------------------------------------------- */

.woocommerce-tabs .wc-tabs li a,
.woocommerce-tabs ul.tabs li a {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.woocommerce-tabs .wc-tabs li.active a { color: var(--lw-red); }

.woocommerce-tabs .panel h2,
.related > h2,
.upsells > h2 {
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--lw-navy);
	margin-bottom: 18px;
}

.woocommerce-tabs .panel { color: var(--lw-muted); font-size: 14px; line-height: 1.75; }
.woocommerce-tabs .panel strong { color: var(--lw-ink); }

/* =========================================================================
   Theme Builder templates: Shop archive / Search / Single product
   ========================================================================= */

/* --- Archive + search title band ----------------------------------------- */

.lw-arch-title { text-align: center; }

.lw-arch-title h1 {
	font-family: Poppins, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--lw-navy);
	margin: 0;
}

.lw-arch-sub { margin: 8px 0 0; font-size: 13px; color: var(--lw-muted); }

.lw-crumbs {
	margin-top: 10px;
	font-size: 12px;
	color: var(--lw-muted);
}

.lw-crumbs a { color: var(--lw-navy); text-decoration: none; }
.lw-crumbs a:hover { color: var(--lw-red); }
.lw-crumbs span { margin: 0 6px; color: #9AA7B8; }
.lw-crumbs strong { color: var(--lw-muted); font-weight: 500; }

/* --- Shop layout: sidebar + grid ------------------------------------------ */

.lw-shop-row {
	display: grid !important;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 36px;
	width: 100%;
	align-items: start;
}

.lw-side {
	background: #fff;
	border: 1px solid var(--lw-line);
	border-radius: 8px;
	padding: 20px 18px;
	position: sticky;
	top: 20px;
}

.lw-side-head .elementor-heading-title {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--lw-red);
	margin-bottom: 4px;
}

/* --- Categories filter ---------------------------------------------------- */

.lw-cat-filter { list-style: none; margin: 0; padding: 0; }

.lw-cat-filter li { border-bottom: 1px solid var(--lw-line); }
.lw-cat-filter li:last-child { border-bottom: 0; }

.lw-cat-filter a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 2px;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	color: var(--lw-ink);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}

.lw-cat-filter a:hover { color: var(--lw-red); padding-left: 5px; }

.lw-cat-filter a span {
	min-width: 26px;
	padding: 2px 6px;
	background: var(--lw-light);
	border-radius: 20px;
	font-size: 11px;
	color: var(--lw-muted);
	text-align: center;
}

.lw-cat-filter li.is-active > a { color: var(--lw-red); font-weight: 600; }
.lw-cat-filter li.is-active > a span { background: var(--lw-red); color: #fff; }

.lw-side-help {
	margin-top: 18px;
	padding: 14px;
	background: var(--lw-light);
	border-radius: 6px;
	line-height: 1.6;
}

.lw-side-help p { margin: 0; }
.lw-side-help strong { color: var(--lw-navy); }

/* Result count + ordering above the grid */
.lw-shop-main .woocommerce-result-count,
.lw-shop-main .woocommerce-ordering select {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	color: var(--lw-muted);
}

.lw-shop-main .woocommerce-ordering select {
	padding: 9px 12px;
	border: 1px solid var(--lw-line);
	border-radius: 4px;
	background: #fff;
}

/* --- Single product ------------------------------------------------------- */

.lw-sp-crumbband .woocommerce-breadcrumb { margin: 0; font-size: 12px; }

.lw-sp-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	width: 100%;
	align-items: start;
}

.lw-sp-gallery .woocommerce-product-gallery { width: 100% !important; }

.lw-sp-summary > .elementor-widget { margin-bottom: 12px; }

.lw-sp-title .elementor-heading-title { line-height: 1.3; }

.lw-sp-price .price del {
	font-size: 17px;
	font-weight: 400;
	opacity: .7;
	margin-right: 8px;
}

.lw-sp-price .price ins { text-decoration: none; color: var(--lw-red); }

.lw-sp-short {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--lw-line);
	line-height: 1.75;
}

.lw-sp-short ul { margin: 10px 0 0 18px; }
.lw-sp-short li { margin-bottom: 5px; }

.lw-sp-meta .product_meta {
	border-top: 1px solid var(--lw-line);
	padding-top: 14px;
	font-size: 13px;
}

.lw-sp-meta .product_meta > span { display: block; margin-bottom: 6px; color: var(--lw-muted); }
.lw-sp-meta .product_meta a { color: var(--lw-navy); }
.lw-sp-meta .product_meta a:hover { color: var(--lw-red); }

/* Tabs */
.lw-sp-tabs .elementor-tabs-wrapper,
.lw-sp-tabs ul.wc-tabs { border-bottom: 1px solid var(--lw-line); }

.lw-sp-tabs ul.wc-tabs li.active a,
.lw-sp-tabs .elementor-tab-title.elementor-active { border-bottom: 2px solid var(--lw-red) !important; }

.lw-sp-related > .elementor-widget-container > h2 { text-align: center; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.lw-shop-row { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
	.lw-sp-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 767px) {
	/* Sidebar above the grid rather than a squeezed column. */
	.lw-shop-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.lw-side { position: static; }
	.lw-arch-title h1 { font-size: 21px; }
}

/* --- Archive / category pages -------------------------------------------- */

.lw-archive-head {
	text-align: center;
	padding: 8px 0 30px;
	border-bottom: 1px solid var(--lw-line);
	margin-bottom: 30px;
}

.lw-archive-head h1 {
	font-family: Poppins, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--lw-navy);
	margin: 0;
}

/* The short red rule under section titles, repeated here for consistency. */
.lw-archive-head h1::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--lw-red);
}

.lw-archive-desc,
.lw-archive-count {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--lw-muted);
}

@media (max-width: 767px) {
	.lw-archive-head { padding-bottom: 20px; margin-bottom: 20px; }
	.lw-archive-head h1 { font-size: 21px; }
}

.woocommerce .page-header,
.woocommerce .woocommerce-products-header {
	text-align: center;
	padding: 26px 0 8px;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce .page-header-title {
	font-family: Poppins, sans-serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: var(--lw-navy) !important;
	letter-spacing: .5px;
}

.woocommerce .term-description,
.woocommerce .woocommerce-result-count {
	color: var(--lw-muted);
	font-size: 13px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
	font-family: Poppins, sans-serif;
	font-weight: 600;
	border-radius: 4px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--lw-navy);
	color: #fff;
}

/* --- Testimonials -------------------------------------------------------- */

.lw-quote .elementor-testimonial-wrapper {
	padding: 0;
}

.lw-quote .elementor-testimonial-content {
	position: relative;
	padding-left: 26px;
	line-height: 1.65;
}

.lw-quote .elementor-testimonial-content::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -14px;
	font-family: Georgia, serif;
	font-size: 46px;
	line-height: 1;
	color: var(--lw-red);
}

.lw-quote .elementor-testimonial-meta-inner {
	padding-left: 26px;
}

/* --- Hero: scale the 72px headline down on smaller screens ---------------- */
/* The hero was built by hand in Elementor with only a desktop size set, so
   phones rendered "TIME THAT DEFINES YOU" at 72px, one word per line. */

@media (max-width: 1024px) {
	.elementor-element-206f084 .elementor-heading-title { font-size: 52px !important; line-height: 1.1 !important; }
}

@media (max-width: 767px) {
	.elementor-element-8414af4 .elementor-heading-title { font-size: 13px !important; letter-spacing: 1px; }
	.elementor-element-206f084 .elementor-heading-title { font-size: 32px !important; line-height: 1.2 !important; }
	.elementor-element-bbafe46 .elementor-heading-title { font-size: 14px !important; line-height: 1.55 !important; }
	/* The hero band's 100px desktop padding dwarfs a phone screen. */
	.elementor-element-8c4f783 { padding-top: 56px !important; padding-bottom: 40px !important; }
}

/* --- Responsive: header & footer ----------------------------------------- */

@media (max-width: 1024px) {
	/* Four footer columns collapse to unreadable ~50px strips below this. */
	.lw-foot-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

@media (max-width: 767px) {
	/* Mobile header: logo | search | burger. */
	.lw-head-row {
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		gap: 8px !important;
		align-items: center;
	}

	.lw-head-cta,
	.lw-topbar,
	.lw-navbar { display: none !important; }

	/* Compact search so all three fit on one line. */
	.elementor .lw-head-search { padding: 0 !important; }
	.lw-head-search .lw-search input { height: 38px; font-size: 13px; padding: 0 10px; }
	.lw-head-search .lw-search button[type="submit"] { height: 38px; width: 40px; }
	/* flex-shrink squashed the icon to 0 width inside the 40px button */
	.lw-head-search .lw-search button[type="submit"] svg {
		width: 14px !important;
		height: 14px !important;
		min-width: 14px;
		flex: 0 0 auto;
	}

	/* Elementor's container rules set justify-content on .e-con, so this needs
	   the extra weight or the burger sits left in its column. */
	.elementor .lw-head-burger {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		padding: 0 !important;
	}

	/* Logo hard left, burger hard right: strip the nested container paddings
	   (band 20 + row 10 + cell 10 each side) that pushed both inward. */
	.elementor-element.lw-headmain { padding-left: 14px !important; padding-right: 14px !important; }
	.elementor .lw-head-row { padding-left: 0 !important; padding-right: 0 !important; }
	.elementor .lw-head-logo { padding-left: 0 !important; }
	/* The button's own 9px hit-area padding would still hold the icon off the
	   edge; pull it back so the glyph sits flush. */
	.lw-burger { margin-right: -9px; }

	/* The shortcode widget's wrapper doesn't fill the cell, so flex-end on the
	   cell alone left the button floating mid-column. Push at every level. */
	.elementor .lw-head-burger .elementor-widget-shortcode,
	.elementor .lw-head-burger .elementor-widget-container {
		width: auto !important;
		margin-left: auto !important;
	}

	.lw-burger { display: flex; margin-left: auto; }

	/* Must match the desktop rule's specificity, which uses the longer
	   .elementor-widget-image selector, or it loses despite coming later. */
	.elementor .lw-head-logo img,
	.elementor .lw-head-logo .elementor-widget-image img { height: 44px; }

	.lw-headmain > .e-con-inner,
	.lw-headmain { padding-top: 10px !important; padding-bottom: 10px !important; }

	.lw-foot-row {
		grid-template-columns: 1fr;
		gap: 26px;
		text-align: center;
	}

	.lw-foot-col .elementor-icon-list-items { align-items: center; }
	.lw-foot-brand .elementor-widget-image,
	.lw-foot-brand .elementor-social-icons-wrapper { text-align: center; }
	.elementor .lw-foot-logo img { height: 62px; }
	.lw-foot-brand .elementor-image,
	.lw-foot-brand .elementor-widget-container { text-align: center; }
}

/* --- Responsive: content -------------------------------------------------- */

@media (max-width: 1024px) {
	.lw-grid ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Related shows exactly 4 items - 3 columns strands one on its own row. */
	.lw-sp-related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elementor .lw-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* There are exactly 4 categories - 3 columns would strand one on its own. */
	.elementor-widget-wc-categories ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.lw-grid ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lw-grid ul.products li.product img,
	.woocommerce ul.products li.product img {
		height: 140px;
	}

	.woocommerce ul.products li.product-category img {
		height: 150px;
	}

	/* Two columns stay (72 products in one column is an endless scroll), but
	   the desktop type sizes crowded the ~160px cards - tune everything down. */
	.lw-grid ul.products li.product,
	.woocommerce ul.products li.product { padding: 10px !important; }

	.lw-grid ul.products li.product h2,
	.woocommerce ul.products li.product h2 {
		font-size: 12px !important;
		line-height: 1.4;
		min-height: 32px;
	}

	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .price .amount { font-size: 13px !important; }
	.woocommerce ul.products li.product .price del,
	.woocommerce ul.products li.product .price del .amount { font-size: 11px !important; }

	.woocommerce ul.products li.product .category,
	.woocommerce ul.products li.product .woo-entry-inner .category { font-size: 10px; }

	.lw-loop-wa {
		font-size: 10px !important;
		padding: 9px 4px !important;
		letter-spacing: .2px;
	}

	/* Category cards: tighter image box, title reads as one attached card. */
	.woocommerce ul.products li.product-category img { height: 130px; padding: 12px; }
	.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
		font-size: 13px !important;
		padding: 12px 8px;
	}
	.woocommerce ul.products li.product-category h2 .count { font-size: 11px; }

	.elementor .lw-row-4,
	.elementor .lw-row-3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	/* Homepage sections carry 70-80px desktop padding; on a phone the navy CTA
	   band plus the navy footer read as one huge empty block. The padding of a
	   boxed container lives on its .e-con-inner, NOT the outer element - the
	   outer must stay 0 or the two stack. */
	.elementor-element.lw-gen,
	.elementor-element.lw-footer { padding-top: 0 !important; padding-bottom: 0 !important; }

	.elementor-element.lw-gen > .e-con-inner {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.elementor-element.lw-footer > .e-con-inner {
		padding-top: 30px !important;
		padding-bottom: 22px !important;
	}
	.lw-foot-row { gap: 22px; }
	.elementor .lw-foot-logo img { height: 52px; }
}

/* =========================================================================
   Carousels (js/lw.js wraps the targets and adds the arrows)
   - Homepage product rows + related products: slider on >=768px, the
     2-column grid stays on phones (.lw-car-md).
   - Categories + testimonials: slider at every width.
   Appended last on purpose: these override the grid rules on specificity ties.
   ========================================================================= */

.lw-car-wrap { position: relative; width: 100%; }

ul.products.lw-carousel,
.elementor .lw-row.lw-carousel {
	display: flex !important;
	/* Elementor containers (.e-con) default to flex-direction:column, which made
	   the testimonial row (.lw-row) stack vertically instead of sliding. */
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	gap: 20px;
	padding-bottom: 6px !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

ul.products.lw-carousel::-webkit-scrollbar,
.lw-row.lw-carousel::-webkit-scrollbar { display: none; }

ul.products.lw-carousel > li,
.lw-row.lw-carousel > .lw-cell {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 60px) / 4) !important; /* 4-up, 3 gaps of 20px */
	width: auto !important;
	max-width: none !important;
}

.lw-row-3.lw-carousel > .lw-cell { flex-basis: calc((100% - 40px) / 3) !important; }

.lw-car-btn {
	position: absolute;
	/* Dead-centred on the carousel card, per the design. */
	top: 50%;
	transform: translateY(-50%);
	transition: background .15s ease, color .15s ease;
	z-index: 5;
	width: 40px;
	height: 40px;
	/* Flex-centre the chevron glyph inside the circle - default button
	   padding/line-height left it stuck in the top corner. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--lw-line);
	border-radius: 50%;
	background: #fff;
	color: var(--lw-navy);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(10, 25, 47, .14);
}

.lw-car-btn:hover { background: var(--lw-red); border-color: var(--lw-red); color: #fff; }
.lw-car-prev { left: -8px; }
.lw-car-next { right: -8px; }

@media (max-width: 1024px) {
	ul.products.lw-carousel > li { flex-basis: calc((100% - 40px) / 3) !important; }
	.lw-row-3.lw-carousel > .lw-cell { flex-basis: calc((100% - 20px) / 2) !important; }
	.elementor-widget-wc-categories ul.products.lw-carousel > li { flex-basis: calc((100% - 40px) / 3) !important; }
}

@media (max-width: 767px) {
	/* Product rows slide one product at a time on phones (swipe + arrows). */
	.lw-car-md-wrap ul.products.lw-carousel > li { flex: 0 0 100% !important; }
	.lw-car-md-wrap .lw-car-btn { display: flex; }
	.lw-car-md-wrap .lw-car-prev { left: 6px; }
	.lw-car-md-wrap .lw-car-next { right: 6px; }

	/* ...while categories and testimonials keep sliding, one card + a peek. */
	.elementor-widget-wc-categories ul.products.lw-carousel > li {
		flex-basis: calc(78% - 10px) !important;
	}
	.lw-row-3.lw-carousel > .lw-cell { flex-basis: 86% !important; }

	.lw-car-btn { width: 34px; height: 34px; font-size: 13px; }
	.lw-car-prev { left: -4px; }
	.lw-car-next { right: -4px; }
}

/* --- Star rating ----------------------------------------------------------- *
   Elementor's star-rating stylesheet is not enqueued in this build, so the
   eicons glyph came through empty and the stars rendered as blank boxes. Draw
   them with a plain Unicode star instead - no icon font needed. Colour still
   comes from the widget's own inline stars_color rule. */
.elementor-widget-star-rating .elementor-star-rating i:before {
	font-family: "Segoe UI Symbol", "Apple Color Emoji", Arial, sans-serif !important;
	speak: none;
}
.elementor-widget-star-rating .elementor-star-full:before { content: "\2605" !important; }
.elementor-widget-star-rating .elementor-star-empty:before { content: "\2606" !important; }
.elementor-widget-star-rating .elementor-star-half:before { content: "\2605" !important; }
.elementor-widget-star-rating .elementor-star-rating { display: inline-flex; gap: 2px; }

/* --- Contact page map ------------------------------------------------------ */
.lw-contact-map { width: 100%; }
.lw-map-frame {
	width: 100%;
	border: 0;
	display: block;
	border-radius: 10px;
	box-shadow: 0 10px 34px rgba(10, 25, 47, .14);
}