/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* ---------------------------------------------------------------------------
   Haleon brand font: New Hero Access
   Source files: content/fonts/ (client supplied), copied to ./fonts/
   Registered here so the family can be selected by name in
   Porto > Theme Options > Typography and in Elementor.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: 'New Hero Access';
	src: url('fonts/NewHeroAccess-Regular.woff2') format('woff2'),
	     url('fonts/NewHeroAccess-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'New Hero Access';
	src: url('fonts/NewHeroAccess-Medium.woff2') format('woff2'),
	     url('fonts/NewHeroAccess-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'New Hero Access';
	src: url('fonts/NewHeroAccess-Bold.woff2') format('woff2'),
	     url('fonts/NewHeroAccess-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'New Hero Access';
	src: url('fonts/NewHeroAccess-ExtraBold.woff2') format('woff2'),
	     url('fonts/NewHeroAccess-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Haleon pagination (product archives: WooCommerce ul.page-numbers,
   blog archive: .pagination) – same look and behaviour as the home hero
   slider arrows: 48px squares, 1px black border, transparent, black text;
   hover and current page = black fill, white text; 16px gaps.
   Prev / next use the hero's Font Awesome arrow-left / arrow-right.
   !important only on border-radius: Porto sets 2rem!important on .pagination.
   --------------------------------------------------------------------------- */

.pagination,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	float: none;
	border: 0;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.pagination > a,
.pagination > span,
.woocommerce-pagination ul.page-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	width: auto;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	line-height: 1;
	font-size: 16px;
	font-weight: 700;
	color: var(--e-global-color-primary, #000);
	background: transparent;
	border: 1px solid var(--e-global-color-primary, #000);
	border-radius: 0 !important;
	box-shadow: none;
	transition: background-color .3s, color .3s;
}

.pagination > a:hover,
.pagination > a:focus-visible,
.pagination > span.current,
.woocommerce-pagination ul.page-numbers a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers a.page-numbers:focus-visible,
.woocommerce-pagination ul.page-numbers span.current {
	color: #fff;
	background: var(--e-global-color-primary, #000);
	border-color: var(--e-global-color-primary, #000);
}

/* "…" is not a button */
.pagination > span.dots,
.woocommerce-pagination ul.page-numbers span.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: transparent;
	color: var(--e-global-color-primary, #000);
}

/* Prev / next: icon only (the blog adds a "Next" label + long-arrow icon, WooCommerce an empty link) */
.pagination > a.prev,
.pagination > a.next,
.woocommerce-pagination ul.page-numbers .prev,
.woocommerce-pagination ul.page-numbers .next {
	width: 48px;
	padding: 0;
	font-size: 0;
}

.pagination > a.prev i,
.pagination > a.next i {
	display: none;
}

.pagination > a.prev::before,
.pagination > a.next::before,
.woocommerce-pagination ul.page-numbers .prev::before,
.woocommerce-pagination ul.page-numbers .next::before {
	position: static;
	margin: 0;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 16px;
	line-height: 1;
}

.pagination > a.prev::before,
.woocommerce-pagination ul.page-numbers .prev::before {
	content: "\f060";
}

.pagination > a.next::before,
.woocommerce-pagination ul.page-numbers .next::before {
	content: "\f061";
}

/* ---------------------------------------------------------------------------
   Haleon page header – breadcrumb on every sub-page, as on the Shop page:
   left aligned on the grey page background, no border (colours: Porto
   Theme Options → breadcrumbs). Rhythm = the home page's header → hero
   slider gap: 40px (20px on mobile) above the breadcrumb and between the
   breadcrumb and the content. Works for Porto's own page top (Shop,
   product, My account, …) and for the "Haleon Page Header" block (2471,
   blog / posts / Contact), which adds the white title box.
   --------------------------------------------------------------------------- */

.page-top {
	margin: 0;
	padding: 40px 0 0;
	border: 0;
	background: none;
}

.page-top > .container {
	padding-top: 0;
	padding-bottom: 0;
}

.page-top .breadcrumbs-wrap {
	margin: 0;
}

.page-wrapper > .page-top + #main .main-content,
.page-wrapper > .porto-block + #main .main-content,
.hl-product-list .main-content {
	padding-top: 40px; /* the last one: product lists, which have no breadcrumb (functions.php) */
}

@media (max-width: 575px) {
	.page-top {
		padding-top: 20px;
	}

	.page-wrapper > .page-top + #main .main-content,
	.page-wrapper > .porto-block + #main .main-content,
	.hl-product-list .main-content {
		padding-top: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Haleon WooCommerce pages – login / register (My account), cart, checkout.
   Porto's layout is kept; only colours, type, spacing and corners follow the
   home page: white square boxes on the grey page, black square 48px buttons
   (12px bold uppercase), 48px square fields with a 1px #DCDCDC frame,
   rhythm 40px (20px mobile). Porto hard-codes #222529 / #E7E7E7 / round
   remove buttons here – overridden below.
   --------------------------------------------------------------------------- */

/* Rhythm: header → 40 → steps (cart / checkout) → 40 → content → 40 → footer. */
.woo-page-header.page-header-8 {
	padding: 40px 0 0;
	border: 0;
	background: none;
}

.woo-page-header.page-header-8 + #main .main-content {
	padding-top: 40px;
}

.woocommerce-cart .main-content,
.woocommerce-checkout .main-content,
.woocommerce-account .main-content {
	padding-bottom: 20px; /* + the footer's own 20px = 40px */
}

.woocommerce-cart .cart-v2 > .row {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.woocommerce-account .woocommerce > .mb-4 {
	margin-bottom: 0 !important; /* the login (col-md-6) or login + register (col-lg-10) wrapper */
}

@media (max-width: 575px) {
	.woo-page-header.page-header-8 {
		padding-top: 20px;
	}

	.woo-page-header.page-header-8 + #main .main-content {
		padding-top: 20px;
	}

	.woocommerce-cart .main-content,
	.woocommerce-checkout .main-content,
	.woocommerce-account .main-content {
		padding-bottom: 0;
	}
}

/* Steps: Shopping Cart > Checkout > Order Complete – current black, the others Mid grey. */
.woo-page-header .breadcrumb {
	margin: 0;
	line-height: 1.2;
}

.woo-page-header .breadcrumb li {
	line-height: 1.2;
}

/* The 30px chevron made the row 57px tall (≈60px visual gap under the header). */
.woo-page-header .breadcrumb .delimiter {
	height: auto;
	line-height: 1;
	vertical-align: middle;
}

.woo-page-header .breadcrumb li.current,
.woo-page-header .breadcrumb li.current > a {
	color: var(--e-global-color-primary, #000);
}

.woo-page-header .breadcrumb li:not(.current),
.woo-page-header .breadcrumb li:not(.current) > a,
.woo-page-header .breadcrumb li .delimiter {
	color: var(--e-global-color-tertiary, #8d979d) !important; /* Porto: #222529 */
}

.woo-page-header .breadcrumb li:not(.current):not(.disable) > a:hover {
	color: var(--e-global-color-primary, #000);
}

/* White square boxes. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals .card,
.woocommerce-checkout #customer_details .col-lg-7 > .align-left,
.woocommerce-checkout .checkout-order-review .featured-boxes {
	margin: 0;
	padding: 40px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

@media (max-width: 991px) {
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register,
	.woocommerce-account .woocommerce-ResetPassword,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart_totals .card,
	.woocommerce-checkout #customer_details .col-lg-7 > .align-left,
	.woocommerce-checkout .checkout-order-review .featured-boxes {
		padding: 32px;
	}
}

@media (max-width: 575px) {
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register,
	.woocommerce-account .woocommerce-ResetPassword,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart_totals .card,
	.woocommerce-checkout #customer_details .col-lg-7 > .align-left,
	.woocommerce-checkout .checkout-order-review .featured-boxes {
		padding: 20px;
	}
}

.woocommerce-cart .cart_totals .card-body {
	padding: 0;
}

/* Login + Register side by side (registration on): Porto's pe-0 / pl-lg-4 / pr-lg-4 are !important –
   even padding again, 40px / 20px apart when stacked. */
.woocommerce-account .u-columns .woocommerce-form-login,
.woocommerce-account .u-columns .woocommerce-form-register {
	padding: 40px !important;
}

@media (max-width: 991px) {
	.woocommerce-account .u-columns .woocommerce-form-login,
	.woocommerce-account .u-columns .woocommerce-form-register {
		padding: 32px !important;
	}
}

@media (max-width: 991px) {
	.woocommerce-account .u-columns .u-column2 {
		margin-top: 40px;
	}
}

@media (max-width: 575px) {
	.woocommerce-account .u-columns .woocommerce-form-login,
	.woocommerce-account .u-columns .woocommerce-form-register {
		padding: 20px !important;
	}

	.woocommerce-account .u-columns .u-column2 {
		margin-top: 20px;
	}
}

/* Box titles: 24px bold (as Overview / Details on the product page); 20px mobile. */
.woocommerce-account .woocommerce-form-login h3,
.woocommerce-account .woocommerce-form-register h3,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart_totals .card-sub-title,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout .checkout-order-review h3 {
	margin: 0 0 24px !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--e-global-color-primary, #000) !important;
}

@media (max-width: 575px) {
	.woocommerce-account .woocommerce-form-login h3,
	.woocommerce-account .woocommerce-form-register h3,
	.woocommerce-cart .cart_totals h2,
	.woocommerce-cart .cart_totals .card-sub-title,
	.woocommerce-checkout .woocommerce-billing-fields > h3,
	.woocommerce-checkout .woocommerce-shipping-fields h3,
	.woocommerce-checkout .woocommerce-additional-fields > h3,
	.woocommerce-checkout .checkout-order-review h3 {
		margin-bottom: 20px !important;
		font-size: 20px !important;
	}
}

/* Labels and text. */
.woocommerce-account .woocommerce form label,
.woocommerce-cart .woocommerce label,
.woocommerce-checkout .woocommerce form label {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account .woocommerce .lost_password a,
.woocommerce-checkout .showcoupon,
.woocommerce-checkout .showlogin {
	color: var(--e-global-color-primary, #000) !important;
	text-decoration: underline;
}

/* Fields: 48px, square, 1px #DCDCDC, black when focused. */
.woocommerce-account .woocommerce input.input-text,
.woocommerce-cart .woocommerce input.input-text,
.woocommerce-checkout .woocommerce input.input-text,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background-color: #fff;
	box-shadow: none !important;
	font-size: 16px;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

.woocommerce-checkout .woocommerce textarea {
	height: 120px;
	padding: 12px 16px;
	line-height: 1.5;
}

.woocommerce-cart .woocommerce input.qty,
.woocommerce-checkout .woocommerce input.qty {
	padding: 0;
	border: 0 !important;
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-cart .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--e-global-color-primary, #000) !important;
	outline: 0;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 12px;
}

.select2-dropdown {
	border-color: var(--e-global-color-primary, #000);
	border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--e-global-color-primary, #000);
	color: #fff;
}

/* Checkboxes / radios: black. */
.woocommerce-account .woocommerce input[type="checkbox"],
.woocommerce-cart .woocommerce input[type="radio"],
.woocommerce-checkout .woocommerce input[type="checkbox"],
.woocommerce-checkout .woocommerce input[type="radio"] {
	accent-color: var(--e-global-color-primary, #000);
}

.woocommerce .porto-control-label::before {
	border-color: var(--e-global-color-hlborder, #dcdcdc);
}

.woocommerce .porto-checkbox .porto-control-label::before {
	border-radius: 0;
}

/* Primary buttons: black square 48px, 12px bold uppercase; white with a black frame on hover. */
.woocommerce-account .woocommerce .button,
.woocommerce-cart .woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .btn-v-dark,
.woocommerce-cart .return-to-shop .button,
.woocommerce-checkout #place_order,
.woocommerce-checkout .woocommerce-form-coupon .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	height: auto;
	padding: 0 32px !important;
	border: 1px solid var(--e-global-color-primary, #000) !important;
	border-radius: 0 !important;
	background: var(--e-global-color-primary, #000) !important;
	box-shadow: none !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: #fff !important;
	transition: background-color .3s, color .3s;
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-cart .woocommerce .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .btn-v-dark:hover,
.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .woocommerce-form-coupon .button:hover {
	background: #fff !important;
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-account .woocommerce .button.login-btn,
.woocommerce-account .woocommerce .woocommerce-form-register__submit,
.woocommerce-cart .woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .btn-v-dark,
.woocommerce-checkout #place_order {
	width: 100%;
}

/* Secondary buttons (Apply coupon, Update cart): outlined, as the home "Contact us" button. */
.woocommerce-cart .woocommerce button[name="apply_coupon"],
.woocommerce-cart .woocommerce button[name="update_cart"] {
	min-height: 48px;
	padding: 0 24px !important;
	border: 1px solid var(--e-global-color-primary, #000) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000) !important;
	transition: background-color .3s, color .3s;
}

.woocommerce-cart .woocommerce button[name="apply_coupon"]:hover,
.woocommerce-cart .woocommerce button[name="update_cart"]:not(:disabled):hover {
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

/* Cart / order tables: black headings, #DCDCDC lines, black prices. */
.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table h4 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-cart .shop_table td,
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table tr,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table tr,
.woocommerce-cart .cart_totals tr {
	border-color: var(--e-global-color-hlborder, #dcdcdc) !important;
}

.woocommerce-cart .shop_table .product-name a,
.woocommerce-checkout .shop_table .product-name,
.woocommerce-cart .shop_table .amount,
.woocommerce-checkout .shop_table .amount,
.woocommerce-cart .cart_totals .amount {
	color: var(--e-global-color-primary, #000);
}

.woocommerce-cart .shop_table .product-name a:hover {
	text-decoration: underline;
}

.woocommerce-checkout .porto-separator hr {
	background: var(--e-global-color-hlborder, #dcdcdc);
}

.woocommerce-cart .shop_table .product-thumbnail img,
.woocommerce-checkout .shop_table .product-thumbnail img {
	border-radius: 0;
}

/* Remove (×): square, 1px frame, black on hover. */
.woocommerce-cart .shop_table a.remove,
.woocommerce-checkout .shop_table a.remove {
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--e-global-color-primary, #000) !important;
	transition: background-color .3s, color .3s, border-color .3s;
}

.woocommerce-cart .shop_table a.remove:hover,
.woocommerce-checkout .shop_table a.remove:hover {
	border-color: var(--e-global-color-primary, #000) !important;
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

/* Quantity: one square box with a 1px frame (as on the product page). */
.woocommerce-cart .shop_table .quantity,
.woocommerce-checkout .shop_table .quantity {
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	border-radius: 0;
	background: #fff;
}

.woocommerce-cart .shop_table .quantity .minus,
.woocommerce-cart .shop_table .quantity .plus,
.woocommerce-cart .shop_table .quantity .qty,
.woocommerce-checkout .shop_table .quantity .minus,
.woocommerce-checkout .shop_table .quantity .plus,
.woocommerce-checkout .shop_table .quantity .qty {
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff;
	box-shadow: none;
	color: var(--e-global-color-primary, #000);
}

/* Checkout order list: Porto's − / + are 36px there – the number field (48px from the field rule above)
   follows them, so the framed box is 38px and nothing is shifted. */
.woocommerce-checkout .shop_table div.quantity .qty {
	height: 36px;
	line-height: 36px;
}

/* Empty cart: icon in Light grey, text as body copy. */
.woocommerce-cart .cart-empty-page i.cart-empty {
	color: var(--e-global-color-quaternary, #d0d3d4);
}

.woocommerce-cart .cart-empty-page .return-to-shop {
	margin-bottom: 0;
}

.woocommerce-cart .cart-empty-page p.cart-empty {
	font-size: 16px;
	color: var(--e-global-color-hltext, #252525);
}

/* Notices (added to cart, errors): white square box with a black / red left line. */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-account .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
	margin: 0 0 40px;
	padding: 16px 20px;
	border: 0;
	border-left: 4px solid var(--e-global-color-primary, #000);
	border-radius: 0;
	background: #fff;
	font-size: 14px;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
	border-left-color: #e02b27;
}

@media (max-width: 575px) {
	.woocommerce-cart .woocommerce-message,
	.woocommerce-checkout .woocommerce-message,
	.woocommerce-account .woocommerce-message,
	.woocommerce-cart .woocommerce-info,
	.woocommerce-checkout .woocommerce-info,
	.woocommerce-account .woocommerce-info,
	.woocommerce-cart .woocommerce-error,
	.woocommerce-checkout .woocommerce-error,
	.woocommerce-account .woocommerce-error {
		margin-bottom: 20px;
	}
}

/* Mobile: the step names did not fit (20px) – 14px; Porto's responsive cart table draws a 4px black top
   border and a frame inside the white box – removed; stacked cart boxes 40px / 20px apart. */
@media (max-width: 991px) {
	.woocommerce-cart .cart-collaterals {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.woocommerce-cart table.shop_table.responsive,
	.woocommerce-cart table.shop_table.responsive tr,
	.woocommerce-cart table.shop_table.responsive tbody,
	.woocommerce-account table.shop_table.responsive,
	.woocommerce-account table.shop_table.responsive tr,
	.woocommerce-account table.shop_table.responsive tbody,
	.woocommerce-account table.shop_table_responsive,
	.woocommerce-account table.shop_table_responsive tr,
	.woocommerce-account table.shop_table_responsive tbody {
		border: 0 !important;
		box-shadow: none !important;
	}

	.woocommerce-cart table.shop_table.responsive tr.cart_item + tr,
	.woocommerce-cart table.shop_table.responsive tr.cart_item + tr.cart_item {
		border-top: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	}
}

@media (max-width: 575px) {
	.woocommerce-cart .cart-collaterals {
		margin-top: 20px;
	}

	.woo-page-header .breadcrumb li > a {
		font-size: 14px !important;
	}

	.woo-page-header .breadcrumb li .delimiter {
		margin: 0 6px !important;
		font-size: 16px !important;
	}
}

/* ---------------------------------------------------------------------------
   Haleon mini-cart (off-canvas panel from the header cart icon) – buttons as on
   the cart page: CHECKOUT black square 48px (white + black frame on hover),
   VIEW CART outlined (black on hover), 12px bold uppercase; square remove (×)
   and one framed quantity box. Porto: #E7E7E7 / #222529, 2px radius, round ×.
   --------------------------------------------------------------------------- */
.cart-popup .buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cart-popup .buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 1px solid var(--e-global-color-primary, #000) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000) !important;
	transition: background-color .3s, color .3s;
}

.cart-popup .buttons .button:hover {
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

.cart-popup .buttons .button.checkout {
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

.cart-popup .buttons .button.checkout:hover {
	background: #fff !important;
	color: var(--e-global-color-primary, #000) !important;
}

.cart-popup a.remove {
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--e-global-color-primary, #000) !important;
	transition: background-color .3s, color .3s, border-color .3s;
}

.cart-popup a.remove:hover {
	border-color: var(--e-global-color-primary, #000) !important;
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

.cart-popup div.quantity { /* span.quantity is the "× price" line */
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	border-radius: 0;
	background: #fff;
}

.cart-popup div.quantity .minus,
.cart-popup div.quantity .plus,
.cart-popup div.quantity .qty {
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff;
	box-shadow: none;
	color: var(--e-global-color-primary, #000);
}

.cart-popup .total,
.cart-popup .total .amount {
	color: var(--e-global-color-primary, #000);
}

/* ---------------------------------------------------------------------------
   Haleon 404 – Porto's layout kept (404 + icon + text left, the "useful links"
   block 5438 right, claude/build-404.php); one white square box on the grey
   page, black type, #DCDCDC list lines, rhythm 40px / 20px mobile.
   --------------------------------------------------------------------------- */
.error404 #content.no-content {
	margin: 0;
}

.error404 .main-content {
	padding-bottom: 20px; /* + the footer's own 20px = 40px */
}

.error404 .page-not-found {
	margin: 0;
	padding: 60px 40px;
	background: #fff;
	border-radius: 0;
}

.error404 .page-not-found .row {
	align-items: center;
	row-gap: 40px;
}

.error404 .page-not-found-main h2 {
	margin: 0 0 24px;
	font-size: 140px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.error404 .page-not-found-main h2 i {
	color: var(--e-global-color-primary, #000);
}

.error404 .page-not-found-main p {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--e-global-color-hltext, #252525);
}

.error404 .page-not-found .porto-block h4 {
	margin: 0 0 16px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.error404 .page-not-found .porto-block .elementor-widget-text-editor p:empty {
	display: none;
}

.error404 .page-not-found .nav-list {
	margin: 0;
}

.error404 .page-not-found .nav-list li {
	border-bottom: 1px solid var(--e-global-color-hlborder, #dcdcdc);
}

.error404 .page-not-found .nav-list li:first-child {
	border-top: 1px solid var(--e-global-color-hlborder, #dcdcdc);
}

.error404 .page-not-found .nav-list li a {
	padding: 12px 0 12px 20px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--e-global-color-primary, #000);
}

.error404 .page-not-found .nav-list li a {
	position: relative;
}

/* Porto's chevron sits at a fixed top: 9px – centred on the 48px row instead (margin, not transform:
   Porto's hover animation "arrowLeftRight" animates transform, which made it jump and wiggle). */
.error404 .page-not-found .nav-list li a::before {
	top: 50%;
	left: 4px;
	height: 10px;
	margin-top: -5px;
	transform: none;
	font-size: 10px;
	line-height: 10px;
	opacity: 1;
	color: var(--e-global-color-tertiary, #8d979d);
	transition: color .3s;
}

.error404 .page-not-found .nav-list li a:hover::before {
	animation: none;
	color: var(--e-global-color-primary, #000);
}

/* The block's boxed Elementor container kept the list narrow on tablet / mobile. */
.error404 .page-not-found .porto-block .e-con,
.error404 .page-not-found .porto-block .e-con-inner,
.error404 .page-not-found .porto-block .elementor-widget-text-editor {
	width: 100%;
	max-width: none;
	padding: 0;
}

.error404 .page-not-found .nav-list li a:hover {
	background: none;
	text-decoration: underline;
}

@media (max-width: 991px) {
	.error404 .page-not-found {
		padding: 40px 32px;
	}

	.error404 .page-not-found .col-lg-6 {
		margin-left: 0;
	}
}

@media (max-width: 575px) {
	.error404 .main-content {
		padding-bottom: 0;
	}

	.error404 .page-not-found {
		padding: 20px;
	}

	.error404 .page-not-found .row {
		row-gap: 20px;
	}

	.error404 .page-not-found-main h2 {
		margin-bottom: 16px;
		font-size: 96px;
	}

	.error404 .page-not-found-main p {
		font-size: 18px;
	}

	.error404 .page-not-found .porto-block h4 {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Haleon My account (logged in) – Porto's layout kept (menu left, content
   right); both in white square boxes on the grey page, black type, #DCDCDC
   lines, 24px box titles, square tiles / frames, 48px fields (select2 too).
   The column gutters (10px) stay outside the white boxes (transparent border).
   --------------------------------------------------------------------------- */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
	padding: 24px !important;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	background: #fff padding-box;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation h5 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
	margin: 0;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a {
	padding: 12px 0;
	border-bottom: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li:last-child a {
	padding-bottom: 0;
	border-bottom: 0;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover {
	text-decoration: underline;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content > .align-left {
	padding: 40px;
	background: #fff;
}

@media (max-width: 991px) {
	.woocommerce-account.logged-in .woocommerce-MyAccount-content > .align-left {
		padding: 32px;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		margin-bottom: 40px;
	}
}

@media (max-width: 575px) {
	.woocommerce-account.logged-in .woocommerce-MyAccount-content > .align-left,
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		padding: 20px !important;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		margin-bottom: 20px;
	}
}

/* Text and links. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content,
.woocommerce-account.logged-in .woocommerce-MyAccount-content p,
.woocommerce-account.logged-in .woocommerce-MyAccount-content address {
	font-size: 16px;
	line-height: 1.5;
	color: var(--e-global-color-hltext, #252525);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content p a,
.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-text-user {
	font-weight: 700;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content p a:hover {
	text-decoration: underline;
}

/* Titles: 24px bold (as the product page boxes); Porto's grey package icon removed. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
.woocommerce-account.logged-in .woocommerce-MyAccount-content h3,
.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-sub-title {
	margin: 0 0 24px !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-sub-title i {
	display: none;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content h4 {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

@media (max-width: 575px) {
	.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content h3,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-sub-title {
		margin-bottom: 20px !important;
		font-size: 20px !important;
	}
}

/* Dashboard tiles: square, 1px #DCDCDC frame (black on hover), black icon and 14px bold uppercase label. */
.woocommerce-account.logged-in .box-with-icon .row {
	row-gap: 20px;
}

.woocommerce-account.logged-in .box-with-icon .m-b-md {
	margin-bottom: 0 !important;
}

.woocommerce-account.logged-in .box-with-icon .featured-boxes {
	height: 100%;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0;
	background: #fff;
	transition: border-color .3s;
}

.woocommerce-account.logged-in .box-with-icon .featured-boxes:hover {
	border-color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-account.logged-in .box-with-icon .featured-box,
.woocommerce-account.logged-in .box-with-icon .featured-box .box-content {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.woocommerce-account.logged-in .box-with-icon i,
.woocommerce-account.logged-in .box-with-icon .featured-box i {
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-account.logged-in .box-with-icon h4,
.woocommerce-account.logged-in .box-with-icon .featured-box h4 {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

/* Order overview (number / status / date / total) and order tables. */
.woocommerce-account.logged-in .order-info {
	margin: 0 0 40px !important;
	padding: 0 !important;
	row-gap: 16px;
}

.woocommerce-account.logged-in .order-info .order-item {
	font-size: 14px;
	color: var(--e-global-color-hlmuted, #7d7d7d);
}

.woocommerce-account.logged-in .order-info mark {
	font-size: 16px;
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-account.logged-in .woocommerce-order-details .featured-boxes {
	padding: 24px !important;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

.woocommerce-account.logged-in .woocommerce-order-details .featured-boxes .card-sub-title {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-order-details {
	width: 100%;
	max-width: none;
	margin-bottom: 0 !important;
}

.woocommerce-account.logged-in .woocommerce-order-details .shop_table {
	margin-bottom: 0;
}

.woocommerce-account.logged-in .shop_table tr,
.woocommerce-account.logged-in .shop_table th,
.woocommerce-account.logged-in .shop_table td {
	border-color: var(--e-global-color-hlborder, #dcdcdc) !important;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .shop_table th {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

.woocommerce-account.logged-in .shop_table .amount,
.woocommerce-account.logged-in .shop_table td a {
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-orders-table .button {
	min-height: 40px !important;
	padding: 0 20px !important;
}

.woocommerce-account.logged-in .porto-separator hr {
	background: var(--e-global-color-hlborder, #dcdcdc);
}

.woocommerce-account.logged-in .woocommerce-customer-details {
	margin-top: 40px !important;
}

/* Addresses overview: two square frames 20px apart inside the content box (Porto: floated columns with
   gutters, so a border on them ran past the content padding and the two touched). */
.woocommerce-account.logged-in .woocommerce-Addresses {
	display: flex;
	gap: 20px;
	margin: 16px 0 0;
}

.woocommerce-account.logged-in .woocommerce-Addresses::before,
.woocommerce-account.logged-in .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	float: none;
	padding: 24px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	border-radius: 0;
	background: #fff;
}

.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address-title {
	margin: 0;
}

.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address-title h2 {
	margin-bottom: 16px !important;
}

@media (max-width: 767px) {
	.woocommerce-account.logged-in .woocommerce-Addresses {
		flex-direction: column;
	}
}

@media (max-width: 575px) {
	.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address {
		padding: 20px;
	}
}

/* Fields: select2 / select / textarea as the inputs (48px, square, 1px #DCDCDC). */
.woocommerce-account.logged-in .woocommerce select,
.woocommerce-account.logged-in .woocommerce textarea,
.woocommerce-account.logged-in .select2-container .select2-selection--single {
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background-color: #fff;
	box-shadow: none !important;
	font-size: 16px;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

.woocommerce-account.logged-in .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

.woocommerce-account.logged-in .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 12px;
}

.woocommerce-account.logged-in .select2-container--open .select2-selection--single,
.woocommerce-account.logged-in .woocommerce select:focus {
	border-color: var(--e-global-color-primary, #000) !important;
}

/* Password change: Porto frames the fieldset in .featured-boxes (2px #E7E7E7) – that is the 1px square
   frame now; the fieldset itself has none. */
.woocommerce-account.logged-in .woocommerce-EditAccountForm .featured-boxes {
	margin: 40px 0 !important;
	padding: 24px !important;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-account.logged-in fieldset {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

@media (max-width: 575px) {
	.woocommerce-account.logged-in .woocommerce-EditAccountForm .featured-boxes {
		margin: 20px 0 !important;
		padding: 20px !important;
	}
}

.woocommerce-account.logged-in fieldset legend {
	float: left; /* inside the frame, not on its top line */
	width: 100%;
	margin: 0 0 16px !important;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content em,
.woocommerce-account.logged-in .woocommerce-MyAccount-content .description {
	font-size: 14px;
	color: var(--e-global-color-hlmuted, #7d7d7d);
}

/* ---------------------------------------------------------------------------
   Haleon order pages – Order Tracking (body.hl-order-tracking, set in
   functions.php) and the order received / thank-you page (checkout endpoint).
   Porto's layout kept; one white square box each (40 / 32 / 20px padding),
   the order itself as in My account → Orders: grey labels / black values,
   1px #DCDCDC "Your order" frame, black 48px buttons, 48px fields.
   --------------------------------------------------------------------------- */
.hl-order-tracking .page-content > .woocommerce,
.woocommerce-order-received .woocommerce-thankyou {
	padding: 40px !important;
	background: #fff;
}

@media (max-width: 991px) {
	.hl-order-tracking .page-content > .woocommerce,
	.woocommerce-order-received .woocommerce-thankyou {
		padding: 32px !important;
	}
}

@media (max-width: 575px) {
	.hl-order-tracking .page-content > .woocommerce,
	.woocommerce-order-received .woocommerce-thankyou {
		padding: 20px !important;
	}
}

/* Rhythm: breadcrumb / steps → 40 → box → 40 → footer (20px mobile). */
.hl-order-tracking .main-content,
.woocommerce-order-received .main-content {
	padding-bottom: 20px; /* + the footer's own 20px */
}

.hl-order-tracking .page-content > .woocommerce > :last-child,
.hl-order-tracking .woocommerce-form-track-order > p:last-of-type,
.woocommerce-order-received .woocommerce-thankyou > :last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 575px) {
	.hl-order-tracking .main-content,
	.woocommerce-order-received .main-content {
		padding-bottom: 0;
	}
}

/* Text. */
.hl-order-tracking .page-content > .woocommerce,
.hl-order-tracking .page-content > .woocommerce p,
.hl-order-tracking .page-content > .woocommerce address,
.woocommerce-order-received .woocommerce-thankyou,
.woocommerce-order-received .woocommerce-thankyou p,
.woocommerce-order-received .woocommerce-thankyou address {
	font-size: 16px;
	line-height: 1.5;
	color: var(--e-global-color-hltext, #252525);
}

.hl-order-tracking .woocommerce-form-track-order > p:first-child {
	margin-bottom: 24px;
}

.hl-order-tracking .woocommerce-form-track-order .form-row {
	margin-bottom: 20px;
}

.hl-order-tracking .woocommerce-form-track-order label {
	margin-bottom: 8px !important;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500 !important;
	color: var(--e-global-color-primary, #000);
}

/* Tracking fields: 48px, square, 1px #DCDCDC, black when focused. */
.hl-order-tracking .woocommerce-form-track-order input.input-text {
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background-color: #fff;
	box-shadow: none !important;
	font-size: 16px;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

.hl-order-tracking .woocommerce-form-track-order input.input-text:focus {
	border-color: var(--e-global-color-primary, #000) !important;
	outline: 0;
}

/* Buttons (Track, order actions): black square 48px, 12px bold uppercase; white with a black frame on hover. */
.hl-order-tracking .woocommerce .button,
.woocommerce-order-received .woocommerce-thankyou .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	height: auto;
	margin-top: 4px !important;
	padding: 0 32px !important;
	border: 1px solid var(--e-global-color-primary, #000) !important;
	border-radius: 0 !important;
	background: var(--e-global-color-primary, #000) !important;
	box-shadow: none !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: #fff !important;
	transition: background-color .3s, color .3s;
}

.hl-order-tracking .woocommerce .button:hover,
.woocommerce-order-received .woocommerce-thankyou .button:hover {
	background: #fff !important;
	color: var(--e-global-color-primary, #000) !important;
}

/* Notices (order not found …): inside the white box, so a 1px frame + black / red left line. */
.hl-order-tracking .woocommerce-message,
.hl-order-tracking .woocommerce-info,
.hl-order-tracking .woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	border-left: 4px solid var(--e-global-color-primary, #000);
	border-radius: 0;
	background: #fff;
	font-size: 14px;
	color: var(--e-global-color-primary, #000);
}

.hl-order-tracking .woocommerce-error {
	border-left-color: #e02b27;
}

/* Thank-you line: Porto's 2px green frame / 36px padding → a 24px bold title, as the box titles elsewhere. */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce-order-received .woocommerce-thankyou-order-received i {
	display: none;
}

@media (max-width: 575px) {
	.woocommerce-order-received .woocommerce-thankyou-order-received {
		margin-bottom: 20px;
		font-size: 20px !important;
	}
}

/* Order overview (number / status / date / total / payment) – grey labels, black values. */
.woocommerce-order-received .woocommerce-thankyou .order-info {
	width: 100%;
	margin: 0 0 40px !important;
	padding: 0 !important;
	row-gap: 16px;
}

.woocommerce-order-received .woocommerce-thankyou .order-info .order-item {
	margin-bottom: 0;
	font-size: 14px;
	color: var(--e-global-color-hlmuted, #7d7d7d);
}

.woocommerce-order-received .woocommerce-thankyou .order-info mark {
	font-size: 16px;
	color: var(--e-global-color-primary, #000) !important;
}

/* Porto gives each of the 5 items a fixed 20% – the date ("September 19, 2026") broke in two lines;
   from 768px they take their content width, spread over the row (below: Porto's 3 / 2 columns). */
@media (min-width: 768px) {
	.woocommerce-order-received .woocommerce-thankyou .order-info {
		flex-wrap: nowrap !important;
		justify-content: space-between;
		column-gap: 24px;
	}

	.woocommerce-order-received .woocommerce-thankyou .order-info .order-item {
		width: auto;
		white-space: nowrap;
	}
}

@media (max-width: 575px) {
	.woocommerce-order-received .woocommerce-thankyou .order-info {
		margin-bottom: 20px !important;
	}
}

/* Tracking result: one sentence ("Order #… was placed on … and is currently …") – Porto turns every
   .order-info mark into a block (the overview grid above), here they stay inline and bold. */
.hl-order-tracking p.order-info {
	width: 100%;
	margin: 0 0 32px;
}

.hl-order-tracking p.order-info mark {
	display: inline;
	padding: 0;
	background: transparent;
	font-weight: 700;
	color: var(--e-global-color-primary, #000);
}

/* Order updates (customer notes) on the tracking result. */
.hl-order-tracking .featured-box {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

.hl-order-tracking .featured-box .box-content {
	padding: 0;
	border: 0; /* Porto: grey top line */
}

.hl-order-tracking .featured-box ol.notes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-order-tracking .featured-box ol.notes li + li {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--e-global-color-hlborder, #dcdcdc);
}

.hl-order-tracking .featured-box ol.notes .meta {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--e-global-color-hlmuted, #7d7d7d);
}

.hl-order-tracking .featured-box ol.notes .description p {
	margin: 0;
}

/* Titles (Order updates, Billing / Shipping address): 24px bold; "Your order" 14px bold uppercase. */
.hl-order-tracking .page-content > .woocommerce h2,
.hl-order-tracking .page-content > .woocommerce h3,
.woocommerce-order-received .woocommerce-thankyou h2,
.woocommerce-order-received .woocommerce-thankyou h3 {
	margin: 0 0 16px !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--e-global-color-primary, #000) !important;
}

@media (max-width: 575px) {
	.hl-order-tracking .page-content > .woocommerce h2,
	.hl-order-tracking .page-content > .woocommerce h3,
	.woocommerce-order-received .woocommerce-thankyou h2,
	.woocommerce-order-received .woocommerce-thankyou h3 {
		font-size: 20px !important;
	}
}

.hl-order-tracking .woocommerce-order-details .featured-boxes,
.woocommerce-order-received .woocommerce-order-details .featured-boxes {
	padding: 24px !important;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

@media (max-width: 575px) {
	.hl-order-tracking .woocommerce-order-details .featured-boxes,
	.woocommerce-order-received .woocommerce-order-details .featured-boxes {
		padding: 20px !important;
	}
}

.hl-order-tracking .woocommerce-order-details .featured-boxes .card-sub-title,
.woocommerce-order-received .woocommerce-order-details .featured-boxes .card-sub-title {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #000);
}

.hl-order-tracking .woocommerce-order-details,
.woocommerce-order-received .woocommerce-order-details {
	width: 100%;
	max-width: none;
	margin-bottom: 0 !important;
}

.hl-order-tracking .woocommerce-order-details .shop_table,
.woocommerce-order-received .woocommerce-order-details .shop_table {
	margin-bottom: 0;
}

.hl-order-tracking .shop_table tr,
.hl-order-tracking .shop_table th,
.hl-order-tracking .shop_table td,
.woocommerce-order-received .woocommerce-thankyou .shop_table tr,
.woocommerce-order-received .woocommerce-thankyou .shop_table th,
.woocommerce-order-received .woocommerce-thankyou .shop_table td {
	border-color: var(--e-global-color-hlborder, #dcdcdc) !important;
	color: var(--e-global-color-primary, #000);
}

.hl-order-tracking .shop_table th,
.woocommerce-order-received .woocommerce-thankyou .shop_table th {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

.hl-order-tracking .shop_table .amount,
.hl-order-tracking .shop_table td a,
.woocommerce-order-received .woocommerce-thankyou .shop_table .amount,
.woocommerce-order-received .woocommerce-thankyou .shop_table td a {
	color: var(--e-global-color-primary, #000);
}

.hl-order-tracking .porto-separator hr,
.woocommerce-order-received .woocommerce-thankyou .porto-separator hr {
	background: var(--e-global-color-hlborder, #dcdcdc);
}

/* Billing / shipping address. */
.hl-order-tracking .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-customer-details {
	margin-top: 40px !important;
	margin-bottom: 0 !important;
}

@media (max-width: 575px) {
	.hl-order-tracking .woocommerce-customer-details,
	.woocommerce-order-received .woocommerce-customer-details {
		margin-top: 20px !important;
	}
}

.hl-order-tracking .woocommerce-customer-details address,
.woocommerce-order-received .woocommerce-customer-details address {
	margin-bottom: 0;
}

.hl-order-tracking .woocommerce-customer-details .account-sub-title i,
.woocommerce-order-received .woocommerce-customer-details .account-sub-title i {
	display: none;
}

/* ---------------------------------------------------------------------------
   Haleon fixed quantity – the quantity is always 1 (inc/fixed-quantity.php,
   woocommerce/global/quantity-input.php): a read-only field without the Porto
   +/- buttons; no text cursor or focus ring, so it does not look editable.
   --------------------------------------------------------------------------- */

.hl-qty-fixed .qty,
.hl-qty-fixed .qty:focus {
	cursor: default;
	outline: none;
	box-shadow: none;
}

/* No "Update cart": with the fixed quantity and coupons off it has nothing to update, and it is the
   only thing in the cart table's actions row (empty coupon box + hidden nonce fields), so the whole
   row goes. display:none keeps the hidden fields in the form. */
.woocommerce-cart-form tr:has(> td.actions) {
	display: none;
}

/* ---------------------------------------------------------------------------
   Haleon registration fields – the "Custom User Registration Fields" plugin
   fields on the register form, the account details form and the checkout
   (inc/registration-fields.php, js/registration-fields.js moves them next to
   the WooCommerce fields). The plugin CSS makes them 40px high (!important)
   and 48% + 2% / 47% + 3% wide, so they do not line up with the other fields.
   --------------------------------------------------------------------------- */

/* The half-width rows float: contain them, so the next heading keeps its distance. */
.afreg_extra_fields {
	display: flow-root;
}

/* Half width as WooCommerce's first / last name: 50% each, 20px gutter, a pair per line.
   .half_width = plugin field, .half_field = plugin default field (first / last name). */
.woocommerce form .form-row.half_width,
.woocommerce form .form-row.half_field {
	float: left;
	clear: left;
	width: 50% !important;
	margin-right: 0 !important;
	padding-right: 10px;
	padding-left: 0;
}

.woocommerce form .form-row.half_width + .form-row.half_width,
.woocommerce form .form-row.half_field + .form-row.half_field {
	clear: none;
	padding-right: 0;
	padding-left: 10px;
}

/* A full-width row after a floated pair (plugin halves, or the checkout's first / last name the
   full-width plugin rows are moved after) starts on a new line. */
.woocommerce form .form-row.half_width + .form-row:not(.half_width),
.woocommerce form .form-row.half_field + .form-row:not(.half_field),
.woocommerce form .af-dependable-field.form-row-wide {
	clear: both;
}

.woocommerce form .af-dependable-field select,
.woocommerce form .af-dependable-field .input-text,
.woocommerce form .form-row.half_field .input-text {
	width: 100%;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-hlborder, #dcdcdc) !important;
	border-radius: 0 !important;
	background-color: #fff;
	box-shadow: none !important;
	font-size: 16px;
	line-height: 46px;
	color: var(--e-global-color-hltext, #252525);
}

/* Fields that depend on another one (Specialty, practice / student data) stay hidden until the
   plugin's script shows them – otherwise all of them flash up while the page loads. */
.af-dependable-field:has(> .afreg-dependable-field-on) {
	display: none;
}

/* Below 768px WooCommerce stacks first / last name – the half-width fields stack too. */
@media (max-width: 767px) {
	.woocommerce form .form-row.half_width,
	.woocommerce form .form-row.half_field,
	.woocommerce form .form-row.half_width + .form-row.half_width,
	.woocommerce form .form-row.half_field + .form-row.half_field {
		float: none;
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}
}

/* "You already have an account" dialog (checkout e-mail check). */
.hl-dialog {
	width: calc(100% - 32px);
	max-width: 480px;
	padding: 32px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--e-global-color-hltext, #252525);
}

.hl-dialog::backdrop {
	background: rgba(0, 0, 0, .5);
}

.hl-dialog__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
}

.hl-dialog__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.5;
}

.hl-dialog__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hl-dialog__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--e-global-color-primary, #000);
	border-radius: 0;
	background: #fff;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--e-global-color-primary, #000) !important;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}

.hl-dialog__btn--primary,
.hl-dialog__btn:hover {
	background: var(--e-global-color-primary, #000);
	color: #fff !important;
}

.hl-dialog__btn--primary:hover {
	background: #fff;
	color: var(--e-global-color-primary, #000) !important;
}

/* ---------------------------------------------------------------------------
   Haleon checkout country – one country per language (inc/checkout-country.php).
   WooCommerce prints a single allowed country as a one-option select: without
   the arrow and the pointer it reads as a fixed value, not as a choice.
   --------------------------------------------------------------------------- */
.woocommerce select.country_to_state--single {
	-webkit-appearance: none;
	appearance: none;
	background-image: none !important;
	pointer-events: none;
	cursor: default;
}

/* ---------------------------------------------------------------------------
   Haleon checkout layout (Figma Desktop - 8, user decision 2026-09-25):
   left the "Selected samples" block on the grey page (Porto block
   checkout-selected-samples, printed by inc/checkout-samples.php), right one
   white box: the form and under it the order button. WooCommerce's order
   list, totals and the shipping row stay in the page (hidden) – they are
   refreshed by AJAX and post the shipping method. Stacked below 992px.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > * {
		grid-column: 1 / -1; /* notices WooCommerce prepends to the form */
	}

	.woocommerce-checkout form.checkout > .hl-checkout-samples {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 2;
	}
}

/* One white box: the form column and the order column under each other, no gap between them. */
.woocommerce-checkout #customer_details > .col-lg-7,
.woocommerce-checkout #customer_details > .col-lg-5 {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
}

.woocommerce-checkout #customer_details .col-lg-7 > .align-left {
	padding-bottom: 0;
}

.woocommerce-checkout #customer_details .woocommerce-additional-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout #customer_details .woocommerce-additional-fields .form-row:last-child,
.woocommerce-checkout #customer_details .woocommerce-additional-fields .form-row:last-child textarea {
	margin-bottom: 0;
}

.woocommerce-checkout .checkout-order-review,
.woocommerce-checkout .checkout-order-review .featured-boxes {
	margin: 0 !important;
}

/* From WooCommerce's order table only the shipping row stays (the items and totals are on the left /
   not needed): "Shipment" as a section title like "Additional information", then the method. */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-checkout-review-order-table > thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table > tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table > tfoot > tr:not(.woocommerce-shipping-totals) {
	display: none !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	margin: 0 0 40px !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals h4 {
	margin: 0 0 24px !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-primary, #000);
}

@media (max-width: 991px) {
	.woocommerce-checkout .woocommerce-checkout-review-order-table {
		margin-bottom: 32px !important;
	}
}

@media (max-width: 575px) {
	.woocommerce-checkout .woocommerce-checkout-review-order-table {
		margin-bottom: 20px !important;
	}

	.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals h4 {
		margin-bottom: 20px !important;
		font-size: 20px !important;
	}
}

.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review #payment .place-order {
	margin: 0;
	padding: 0;
}

/* Above the button: the terms checkbox and the newsletter checkbox ("Haleon newsletter" below), then 24px. */
.woocommerce-checkout #order_review #place_order {
	margin-top: 24px !important;
}

/* Selected samples: title as the home About heading (32 / 24px), text 14px with an (i) icon,
   items as name × qty … "Free sample". */
.hl-checkout-samples {
	margin-bottom: 40px;
}

@media (min-width: 992px) {
	.hl-checkout-samples {
		margin-bottom: 0;
	}
}

.hl-checkout-samples .elementor-widget.hl-samples__title {
	margin-bottom: 24px;
}

.hl-checkout-samples .elementor-widget.hl-samples__note {
	margin-bottom: 32px;
}

.hl-checkout-samples .elementor-widget.hl-samples__items-title {
	margin-bottom: 16px;
}

.hl-checkout-samples .hl-samples__title .elementor-heading-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.hl-checkout-samples .hl-samples__note {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-primary, #000);
}

.hl-checkout-samples .hl-samples__note::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Ccircle cx='8' cy='8' r='7.2'/%3E%3Cpath d='M8 7v4.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.8' r='.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Ccircle cx='8' cy='8' r='7.2'/%3E%3Cpath d='M8 7v4.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.8' r='.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hl-checkout-samples .hl-samples__note p:last-child {
	margin-bottom: 0;
}

.hl-checkout-samples .hl-samples__items-title .elementor-heading-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.hl-selected-samples {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-selected-samples__item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 6px 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--e-global-color-primary, #000);
}

.hl-selected-samples__qty {
	flex: 0 0 auto;
	margin-right: auto;
	font-size: 14px;
}

.hl-selected-samples__label {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 575px) {
	.hl-checkout-samples {
		margin-bottom: 20px;
	}

	.hl-checkout-samples .elementor-widget.hl-samples__title {
		margin-bottom: 20px;
	}

	.hl-checkout-samples .hl-samples__title .elementor-heading-title {
		font-size: 24px;
	}

	.hl-checkout-samples .elementor-widget.hl-samples__note {
		margin-bottom: 24px;
	}

	.hl-selected-samples__item {
		gap: 12px;
		font-size: 14px;
	}
}

/* Form box titles (inc/checkout-samples.php, inc/registration-fields.php): Porto's "Billing & Shipping"
   hidden; "Sample confirmation" 32 / 24px as "Selected samples" on the left, then the section titles
   "Personal details" / "Profession" as the other box titles (24 / 20px). */
.woocommerce-checkout .woocommerce-billing-fields > h3:not(.hl-checkout-section) {
	display: none !important;
}

.woocommerce-checkout .hl-checkout-title {
	margin: 0 0 32px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .hl-checkout-section {
	clear: both; /* below the half-width First / Last name rows (floats); the clearance eats a top margin */
	margin: 0 0 24px !important;
	padding-top: 40px; /* + the row's 15px = the gap above "Additional information" */
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e-global-color-primary, #000);
}

@media (max-width: 575px) {
	.woocommerce-checkout .hl-checkout-title {
		margin-bottom: 24px;
		font-size: 24px;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .hl-checkout-section {
		margin: 0 0 20px !important;
		padding-top: 21px;
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Haleon cart – no subtotals / totals (samples are free; user decision
   2026-09-25): the Subtotal / Total rows of "Cart totals" hidden, Shipping
   and Proceed to checkout stay. The table's Subtotal column stays (to hide it
   too, add: .woocommerce-cart .woocommerce-cart-form .shop_table .product-subtotal).
   --------------------------------------------------------------------------- */

.woocommerce-cart .cart_totals tr.cart-subtotal,
.woocommerce-cart .cart_totals tr.order-total {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Haleon registration page (inc/registration-page.php, js/registration-page.js;
   Figma Desktop - 6, in 2 steps instead of 3): one white box – title, "Step x
   of 2 – …" with a progress bar, the fields in two columns (24px apart), the
   buttons under a line on the right; Back on the left in step 2. The body
   also has .woocommerce-account, so fields / buttons / notices look as on
   My account. Without JavaScript every field shows (no data-step).
   --------------------------------------------------------------------------- */

.hl-register {
	padding: 64px;
	background: #fff;
}

.hl-register__title {
	margin: 0 0 24px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.hl-register__progress {
	margin-bottom: 32px;
}

.hl-register__step {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--e-global-color-primary, #000);
}

.hl-register__bar {
	height: 12px;
	background: var(--e-global-color-quaternary, #d0d3d4);
}

.hl-register__fill {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	padding-right: 6px;
	background: var(--e-global-color-secondary, #30ea03); /* Haleon green */
	transition: width .3s;
}

.hl-register__percent {
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	color: var(--e-global-color-primary, #000); /* white is unreadable on the light green */
}

/* Fields: a two-column grid; the plugin's wrappers are dissolved so every row is a grid item
   (its floats / half widths no longer apply). */
.woocommerce.hl-register form.hl-register__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 24px;
	margin: 0;
	padding: 0 !important;
	background: none;
}

.woocommerce.hl-register form.hl-register__form .afreg_extra_fields {
	display: contents;
}

.woocommerce.hl-register form.hl-register__form > *,
.woocommerce.hl-register form.hl-register__form .afreg_extra_fields > * {
	grid-column: 1 / -1;
}

.woocommerce.hl-register form.hl-register__form .form-row {
	float: none !important;
	width: auto !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.woocommerce.hl-register form.hl-register__form .hl-register__half,
.woocommerce.hl-register form.hl-register__form .form-row.half_width,
.woocommerce.hl-register form.hl-register__form .form-row.half_field {
	grid-column: auto;
}

.hl-register__form[data-step="1"] .hl-step-2,
.hl-register__form[data-step="2"] .hl-step-1,
.hl-register__form[data-step="1"] .hl-register__back,
.hl-register__form[data-step="1"] .hl-register__submit,
.hl-register__form[data-step="2"] .hl-register__next {
	display: none !important;
}

.woocommerce.hl-register form.hl-register__form .woocommerce-invalid .input-text,
.woocommerce.hl-register form.hl-register__form .woocommerce-invalid select {
	border-color: var(--e-global-color-hlerror, #e2401c) !important;
}

.hl-register__error {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-hlerror, #e2401c);
}

/* Consent checkboxes (inc/registration-consent.php): regular text, underlined links, as the checkout terms. */
.woocommerce.hl-register .hl-register__consent {
	margin-top: 8px !important;
}

.woocommerce.hl-register .hl-register__check {
	margin: 0 0 12px;
}

.woocommerce.hl-register .hl-register__check label {
	display: inline;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.woocommerce.hl-register .hl-register__check input {
	margin: 0 8px 0 0;
	vertical-align: -1px;
}

.woocommerce.hl-register .hl-register__check a {
	color: inherit;
	text-decoration: underline;
}

.woocommerce.hl-register .hl-register__check abbr.required {
	text-decoration: none;
	border: 0;
}

/* Buttons: under a 1px line, Next / Register on the right, Back on the left. */
.hl-register__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--e-global-color-hlborder, #dcdcdc);
}

.hl-register__nav .button {
	min-width: 160px;
	margin: 0 !important;
}

.woocommerce.hl-register .hl-register__nav .hl-register__back {
	margin-right: auto !important;
	border: 1px solid var(--e-global-color-primary, #000) !important;
	background: #fff !important;
	color: var(--e-global-color-primary, #000) !important;
}

.woocommerce.hl-register .hl-register__nav .hl-register__back:hover {
	background: var(--e-global-color-primary, #000) !important;
	color: #fff !important;
}

/* "Already have an account? Log in" / "Don't have an account yet? Create an account". */
.hl-account-switch {
	margin: 24px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-primary, #000);
}

.hl-account-switch a {
	font-weight: 700;
	color: var(--e-global-color-primary, #000) !important;
	text-decoration: underline;
}

@media (max-width: 991px) {
	.hl-register {
		padding: 40px;
	}
}

@media (max-width: 767px) {
	.hl-register .hl-register__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.hl-register .hl-register__form .hl-register__half,
	.hl-register .hl-register__form .form-row.half_width,
	.hl-register .hl-register__form .form-row.half_field {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575px) {
	.hl-register {
		padding: 20px;
	}

	.hl-register__title {
		margin-bottom: 20px;
		font-size: 24px;
	}

	.hl-register__progress {
		margin-bottom: 24px;
	}

	.hl-register__nav .button {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
   Haleon checkout field errors – as on the registration page: a red frame
   around the field WooCommerce marks invalid and its message in red.
   --------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--e-global-color-hlerror, #e2401c) !important;
}

.woocommerce-checkout form.checkout .checkout-inline-error-message {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-hlerror, #e2401c);
}

/* ---------------------------------------------------------------------------
   Haleon newsletter – The Newsletter Plugin's forms in the site's look.
   Footer ([newsletter_form] in a Shortcode widget, class hl-newsletter): white
   box with the e-mail field and an outlined Subscribe button, the consent
   checkbox under it in white. Registration and checkout: the addon's checkbox
   like the other consent checkboxes.
   --------------------------------------------------------------------------- */

.hl-newsletter .tnp-subscription {
	max-width: none;
	margin: 0;
}

.hl-newsletter .tnp-subscription form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
}

.hl-newsletter .tnp-subscription .tnp-field {
	margin: 0;
	line-height: 1.5;
}

.hl-newsletter .tnp-subscription .tnp-field-email,
.hl-newsletter .tnp-subscription .tnp-field-button {
	background: #fff;
	border: 1px solid var(--e-global-color-hlborder, #dee2e6);
	padding: 4px;
}

.hl-newsletter .tnp-subscription .tnp-field-email {
	grid-area: 1 / 1;
	border-right: 0;
	padding-right: 8px;
}

.hl-newsletter .tnp-subscription .tnp-field-button {
	grid-area: 1 / 2;
	border-left: 0;
}

.hl-newsletter .tnp-subscription .tnp-privacy-field {
	grid-area: 2 / 1 / 3 / 3;
	margin-top: 16px;
}

.hl-newsletter .tnp-subscription input.tnp-email {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	line-height: 1.5;
	color: var(--e-global-color-hltext, #000);
}

.hl-newsletter .tnp-subscription input.tnp-email::placeholder {
	color: var(--e-global-color-hlmuted, #6c757d);
}

.hl-newsletter .tnp-subscription input.tnp-submit {
	display: block;
	width: auto;
	height: 48px;
	margin: 0;
	padding: 12px 24px;
	border: 1px solid var(--e-global-color-primary, #000);
	border-radius: 0;
	background: transparent;
	color: var(--e-global-color-primary, #000);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.hl-newsletter .tnp-subscription input.tnp-submit:hover,
.hl-newsletter .tnp-subscription input.tnp-submit:focus {
	background: var(--e-global-color-primary, #000);
	color: #fff;
}

.hl-newsletter .tnp-subscription .tnp-privacy-field label {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
	cursor: pointer;
}

.hl-newsletter .tnp-subscription .tnp-privacy-field input {
	margin: 0 4px 0 0;
	vertical-align: -2px;
}

.hl-newsletter .tnp-subscription .tnp-privacy-field a {
	color: #fff;
	text-decoration: underline;
}

/* Registration (inc/newsletter.php): under the GTC / Privacy checkboxes, same look. */
.woocommerce.hl-register .hl-register__newsletter {
	margin-top: 0 !important;
	padding-top: 0;
}

.woocommerce.hl-register .hl-register__newsletter p.form-row {
	margin: 0 0 12px;
	padding: 0;
}

.woocommerce.hl-register .hl-register__newsletter label {
	display: inline;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.woocommerce.hl-register .hl-register__newsletter input[type="checkbox"] {
	margin: 0 8px 0 0;
	vertical-align: -1px;
}

/* Checkout: the addon opens its label with a <br> and leaves it unclosed – one line under the terms checkbox. */
.woocommerce-checkout #payment .place-order label.checkbox > br {
	display: none;
}

.woocommerce-checkout #payment .place-order label.checkbox:has(#tnp-subscribe) {
	display: block;
	margin: 12px 0 0;
}

.woocommerce-checkout #payment .place-order #tnp-subscribe {
	margin: 0 8px 0 0;
}

/* The plugin's own page (profile / unsubscribe / messages; body class from inc/newsletter.php): white box as the
   registration page, fields and buttons as the site's forms. */
.hl-newsletter-page .page-content {
	padding: 64px;
	background: #fff;
}

.hl-newsletter-page .page-content h1 {
	margin: 0 0 24px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--e-global-color-primary, #000);
}

.hl-newsletter-page .page-content p {
	margin: 0 0 16px;
}

.hl-newsletter-page .page-content p:empty {
	display: none;
}

.hl-newsletter-page .page-content > :last-child {
	margin-bottom: 0;
}

.hl-newsletter-page .page-content a {
	color: inherit;
	text-decoration: underline;
}

.hl-newsletter-page .page-content .tnp {
	max-width: 560px;
	margin: 0 0 24px;
}

.hl-newsletter-page .page-content .tnp form {
	margin: 0;
}

.hl-newsletter-page .page-content .tnp .tnp-field {
	margin: 0 0 16px;
	line-height: 1.5;
}

.hl-newsletter-page .page-content .tnp .tnp-field label {
	display: block;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--e-global-color-hltext, #000);
}

.hl-newsletter-page .page-content .tnp .tnp-field input[type="text"],
.hl-newsletter-page .page-content .tnp .tnp-field input[type="email"],
.hl-newsletter-page .page-content .tnp .tnp-field select {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-hlborder, #dee2e6);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	font-size: 16px;
	line-height: 1.5;
	color: var(--e-global-color-hltext, #000);
}

.hl-newsletter-page .page-content .tnp .tnp-privacy-field label {
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.hl-newsletter-page .page-content .tnp .tnp-privacy-field input {
	margin: 0 8px 0 0;
	vertical-align: -1px;
}

.hl-newsletter-page .page-content .tnp .tnp-field-privacy {
	font-size: 14px;
}

.hl-newsletter-page .page-content .tnp .tnp-field-button {
	margin: 24px 0 0;
}

.hl-newsletter-page .page-content .tnp-submit {
	display: inline-block;
	width: auto;
	min-width: 160px;
	height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--e-global-color-primary, #000);
	border-radius: 0;
	background: var(--e-global-color-primary, #000);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.hl-newsletter-page .page-content .tnp-submit:hover,
.hl-newsletter-page .page-content .tnp-submit:focus {
	background: #fff;
	color: var(--e-global-color-primary, #000);
}

.hl-newsletter-page .page-content .tnp-button-form {
	margin: 0 0 16px;
}

/* My account dashboard: the addon's "Manage your newsletter preferences" link under the tiles. */
.woocommerce-MyAccount-content .tnp-newsletter-profile-url {
	margin-top: 24px;
}

.woocommerce-MyAccount-content .tnp-newsletter-profile-url a {
	text-decoration: underline;
}

@media (max-width: 991px) {
	.hl-newsletter-page .page-content {
		padding: 40px;
	}
}

@media (max-width: 767px) {
	.hl-newsletter-page .page-content {
		padding: 20px;
	}

	.hl-newsletter-page .page-content h1 {
		margin-bottom: 20px;
		font-size: 24px;
	}

	.hl-newsletter-page .page-content .tnp-submit {
		width: 100%;
	}
}

/* Responsive fixes (2026-09-30, Playwright pass, claude/playwright). */

/* A wrapped breadcrumb item (long post / product title) stays left-aligned like the first line. */
.page-top .breadcrumbs-wrap,
.page-top .breadcrumb,
.page-top .breadcrumb li {
	text-align: left;
}

/* Phone: inner pages use the same 16px side gutter as the header, the home page and the footer
   (Porto's container gives 20px, so the cards sat 4px inside the footer box). */
@media (max-width: 767px) {
	#main > .container,
	.page-top > .container {
		padding-left: 16px;
		padding-right: 16px;
	}
}