/*
Theme Name: Komestic — Scents & Cosmetics
Theme URI: https://scentsbymfundo.co.za
Author: Tredicik
Description: Child theme of Komestic carrying all Scents & Cosmetics by Mfundo customisations, so the parent can be updated safely.
Template: komestic
Version: 1.0.0
Requires PHP: 8.1
Text Domain: komestic-child
*/

/* ---------------------------------------------------------------------------
   Brand palette
   The parent prints --color-primary / --color-secondary / --color-tertiary from
   theme options; these are the supporting tones the options screen has no slot
   for. Keep every brand colour referenced through a variable so a future palette
   change is a one-line edit.
--------------------------------------------------------------------------- */
:root {
	--scents-pink-deep: #d6417f;
	--scents-pink: #ef7fae;
	--scents-pink-soft: #fbdce8;
	--scents-blush: #fdf1f6;
	--scents-plum: #6e2547;
	--scents-ink: #4a3540;
	--scents-muted: #8d7480;
}

/* ---------------------------------------------------------------------------
   Split-text safety net
   Komestic hides .text-animated headings until its GSAP SplitText pass runs.
   That pass depends on the smooth-scroll module, which is off for this build, so
   without this the headings stay invisible. scripts/rebrand-content.php also
   rewrites those animations, but this keeps any newly-authored heading safe.
--------------------------------------------------------------------------- */
.text-animated,
.text-animated .heading__title-text {
	visibility: visible !important;
}

/* ---------------------------------------------------------------------------
   Header
   The brand mark is a stacked crest rather than the demo's wide wordmark, so it
   needs more vertical room than Komestic's default header rhythm allows.
--------------------------------------------------------------------------- */
.site-logo img,
.pxl-site-logo img {
	max-height: 58px;
	width: auto;
}

/* Navigation links.
   The height on the link is what sets the bar's height in this theme — the menu
   items are the tallest thing in the row — so the extra breathing room above and
   below comes from here rather than container padding.

   Selector must mirror the parent's own group (.pxl-menu-main, not
   .pxl-menu-primary) or the theme's rule wins on specificity and the size never
   applies. */
.header-desktop .pxl-menu-main > li > a,
.header-sticky .pxl-menu-main > li > a,
.elementor-editor-active .pxl-navigation-menu .pxl-menu-main > li > a,
.elementor-editor-preview .pxl-navigation-menu .pxl-menu-main > li > a {
	height: 100px;
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* Header actions: 32px filled glyphs read as heavy next to 13px nav text.
   The icons themselves are stroked (scripts/replace-header-icons.py); this only
   sets their footprint. */
.pxl-header .button--toggle .button__icon svg,
.pxl-header .pxl-button .button__icon svg,
.pxl-header .button__icon > svg,
.pxl-header .pxl-button > svg {
	width: 20px;
	height: 20px;
}

.pxl-header .pxl-button.button--toggle,
.pxl-header .header-actions .pxl-button {
	width: 28px;
	height: 28px;
}

/* ---------------------------------------------------------------------------
   Page gutters
   Komestic gives the header a 1792px inner width while the content container is
   capped at 1550px, so the logo and cart sit ~136px outside the product grid.
   Elementor sizes boxed containers from --content-width, so matching that to the
   content width lines the header up with everything below it.
--------------------------------------------------------------------------- */
.pxl-header .e-con.e-con-boxed,
.header-sticky .e-con.e-con-boxed,
.pxl-footer .e-con.e-con-boxed {
	--content-width: 1520px;
}

/* ---------------------------------------------------------------------------
   Product cards
   The demo card puts the name and price on one row, so a two-line name and a
   price range collide and leave a ragged gutter between them. Stack them, calm
   the type down, and give the image a soft panel to sit in.
--------------------------------------------------------------------------- */
.pxl-products .product__featured,
.shop-archive .products .product__featured,
.related .product__featured,
.product-suggested .product__featured {
	/* Product photography already carries a white backdrop, so a tinted panel
	   just frames a white rectangle. A hairline card reads cleaner. */
	background-color: #fff;
	border: 1px solid rgba(74, 53, 64, 0.09);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pxl-products .product:hover .product__featured,
.shop-archive .products .product:hover .product__featured,
.related .product:hover .product__featured {
	border-color: var(--scents-pink-soft);
	box-shadow: 0 10px 28px rgba(74, 53, 64, 0.07);
}

.pxl-products .product__featured img,
.shop-archive .products .product__featured img,
.related .product__featured img,
.product-suggested .product__featured img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.45s ease;
}

.pxl-products .product:hover .product__featured img,
.shop-archive .products .product:hover .product__featured img,
.related .product:hover .product__featured img {
	transform: scale(1.04);
}

/* Name over price, both left-aligned, instead of the demo's split row. */
.pxl-products .product__content,
.shop-archive .products .product__content,
.related .product__content,
.product-suggested .product__content {
	display: block;
	padding-top: 16px;
}

.pxl-products .product__content-group,
.shop-archive .products .product__content-group {
	width: 100%;
}

.pxl-products .product__name,
.shop-archive .products .product__name,
.related .product__name,
.product-suggested .product__name {
	font-family: var(--font-primary), sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 6px;
}

.pxl-products .product__name > a,
.shop-archive .products .product__name > a {
	color: var(--scents-ink);
	/* Two lines keeps every card in a row the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pxl-products .product__name > a:hover,
.shop-archive .products .product__name > a:hover {
	color: var(--scents-pink-deep);
}

.pxl-products .product__price,
.shop-archive .products .product__price,
.related .product__price,
.product-suggested .product__price {
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.pxl-products .product__price .price--normal,
.shop-archive .products .product__price .price--normal {
	font-size: 15px;
	color: var(--scents-plum);
}

.pxl-products .product__price del,
.shop-archive .products .product__price del {
	color: var(--scents-muted);
	font-weight: 400;
	margin-right: 6px;
}

/* Sale flag reads as a quiet tag rather than a shout. */
.pxl-products .product__label,
.shop-archive .products .product__label {
	top: 12px;
	left: 12px;
}

.pxl-products .product-label--onsale,
.shop-archive .products .product-label--onsale {
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.06em;
	padding: 5px 12px;
}

/* ---------------------------------------------------------------------------
   Typography
   Playfair Display carries the headings to echo the script logo; DM Sans keeps
   body copy and UI legible at small sizes.
--------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading__title {
	letter-spacing: -0.01em;
}

.heading__title-text em,
.heading__title--primary em {
	font-style: italic;
	color: var(--scents-pink-deep);
}

/* ---------------------------------------------------------------------------
   Buttons and interactive accents
   Komestic's demo buttons lean on hardcoded fills in places the theme options
   do not reach; pin them to the brand pink.
--------------------------------------------------------------------------- */
.btn-primary,
.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--scents-pink-deep);
	border-color: var(--scents-pink-deep);
	color: #fff;
}

.btn-primary:hover,
.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--scents-plum);
	border-color: var(--scents-plum);
	color: #fff;
}

a:hover {
	color: var(--scents-pink-deep);
}

/* ---------------------------------------------------------------------------
   WooCommerce
   Sale badges, prices and stock messages inherit the demo's warm palette in a
   few places the recolour pass cannot reach (they are theme CSS, not content).
--------------------------------------------------------------------------- */
.woocommerce span.onsale,
.product__badge--sale,
.pxl-product-badge {
	background-color: var(--scents-pink-deep);
	color: #fff;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--scents-plum);
}

.woocommerce-info,
.woocommerce-message {
	background-color: var(--scents-blush);
	border: 1px solid var(--scents-pink-soft);
	color: var(--scents-ink);
}

/* The demo's urgency counter reads "0 sold in last 24 hours" on a store with no
   sales history, and its flame icon carries a hardcoded orange fill attribute
   that CSS cannot recolour. Hide it until there is real sales data worth showing. */
.product-stock .selled {
	display: none;
}

/* The client is not a VAT vendor, so nothing may imply tax is included. Tax is
   off in WooCommerce; this is a belt-and-braces guard against any template that
   still prints a suffix or an includes-tax note. */
.woocommerce .price .woocommerce-price-suffix,
.woocommerce .includes_tax,
.order-summary .includes_tax {
	display: none;
}

/* ---------------------------------------------------------------------------
   Checkout summary
   The demo's totals block runs label and figure hard against the panel edges
   with no rhythm between rows, so the eye has nothing to follow. Give the rows
   even spacing and let the total carry the weight on its own.
--------------------------------------------------------------------------- */
.order-summary .order-review__item,
.order-review__totals .order-review__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px;
	font-size: 15px;
}

.order-summary .order-review__item .label,
.order-review__totals .order-review__item .label {
	color: var(--scents-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.order-summary .order-review__item .value,
.order-review__totals .order-review__item .value {
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.order-summary .order-review__total,
.order-review__totals .order-review__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-block: 20px;
	border-top: 1px solid rgba(74, 53, 64, 0.12);
	margin-top: 8px;
}

.order-summary .order-review__total .value,
.order-review__totals .order-review__total .value {
	font-size: 22px;
	font-weight: 600;
	color: var(--scents-plum);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Category tiles
   Komestic's circular category layout assumes square artwork. Ours comes from
   the demo media library at mixed ratios, so crop rather than letterbox.
--------------------------------------------------------------------------- */
.pxl-product-categories[data-layout="2"] .category-item__featured {
	aspect-ratio: 1;
	width: 100%;
}

.pxl-product-categories[data-layout="2"] .category-item__featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxl-product-categories .category-item__name-link {
	text-decoration: none;
}

/* Layout 1 stacks a name plate over the artwork, and assumes every image is the
   same shape. Ours are not, so pin the frame and crop inside it — otherwise one
   tile in the row stands taller than the rest. */
.pxl-product-categories[data-layout="1"] .category-item__featured,
.pxl-product-categories[data-layout="3"] .category-item__featured {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 12px;
	/* Some category artwork has a transparent background, which reads as the
	   image spilling out of the tile when its neighbours are opaque. */
	background-color: var(--scents-blush);
}

.pxl-product-categories[data-layout="1"] .category-item__featured img,
.pxl-product-categories[data-layout="3"] .category-item__featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Plain content pages
   Delivery, returns, terms and privacy are deliberately not Elementor layouts so
   the client can edit them in the normal editor. Komestic has no type scale for
   that case, so give them a readable measure and rhythm of their own.

   Scoped away from .elementor-page: the homepage is also page-template-default,
   and these rules would otherwise underline every link in the builder content.
--------------------------------------------------------------------------- */
body.page-template-default:not(.elementor-page) .main-content .container {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 20px;
}

body.page-template-default:not(.elementor-page) .main-content__inner {
	padding-block: 24px 96px;
	color: var(--scents-ink);
	font-size: 17px;
	line-height: 1.7;
}

body.page-template-default:not(.elementor-page) .main-content__inner h2 {
	font-size: 28px;
	line-height: 1.3;
	margin-block: 48px 12px;
	color: var(--scents-plum);
}

body.page-template-default:not(.elementor-page) .main-content__inner h2:first-child {
	margin-top: 0;
}

body.page-template-default:not(.elementor-page) .main-content__inner h3 {
	font-size: 21px;
	margin-block: 32px 8px;
}

body.page-template-default:not(.elementor-page) .main-content__inner p,
body.page-template-default:not(.elementor-page) .main-content__inner ul,
body.page-template-default:not(.elementor-page) .main-content__inner ol {
	margin-bottom: 16px;
}

body.page-template-default:not(.elementor-page) .main-content__inner ul,
body.page-template-default:not(.elementor-page) .main-content__inner ol {
	padding-left: 22px;
}

body.page-template-default:not(.elementor-page) .main-content__inner li {
	margin-bottom: 8px;
}

body.page-template-default:not(.elementor-page) .main-content__inner ul li {
	list-style: disc;
}

body.page-template-default:not(.elementor-page) .main-content__inner ol li {
	list-style: decimal;
}

body.page-template-default:not(.elementor-page) .main-content__inner a {
	color: var(--scents-pink-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Account forms
   Komestic centres the form in a 440px column but leaves the heading at the full
   panel width, so "Login" and "Create Account" sit hard against the left edge
   while the fields start 138px in. Give the heading the same column.
--------------------------------------------------------------------------- */
.login__inner .login__title,
.register__inner .register__title,
.login__inner > h3,
.register__inner > h3 {
	max-width: 440px;
	margin-inline: auto;
	width: 100%;
}

/* On the standalone account page the theme's floating-label CSS does not apply,
   so each label renders underneath its own field. The label follows the input in
   the markup, so reversing the column puts it back on top. Scoped to the account
   page — in the modal the theme already handles it. */
.woocommerce-account .login__inner .form__control,
.woocommerce-account .register__inner .form__control {
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	margin-bottom: 20px;
}

.woocommerce-account .login__inner .form__control label,
.woocommerce-account .register__inner .form__control label {
	position: static;
	font-size: 14px;
	color: var(--scents-muted);
}

/* ---------------------------------------------------------------------------
   Footer
   The footer sits on brand pink, so the demo's dark-on-dark link treatment needs
   lifting.
--------------------------------------------------------------------------- */
.site-footer a:hover,
.footer a:hover {
	color: #fff;
	opacity: 0.85;
}