/**
 * Medimart theme stylesheet.
 *
 * This file is enqueued directly; it is not compiled from assets/css/src
 * yet. Source files live in assets/css/src for when a build step is added.
 */

/*
 * Minimal base reset. The theme had none at all until this was found
 * live: browser-default bullets on every <ul>, default box model. Kept
 * deliberately small -- box-sizing and list resets only, not a full
 * design system -- since that's a separate task from the category page.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
}

/*
 * margin: 0 -- the browser default 8px body margin was never reset
 * anywhere in the theme. Confirmed live: this was the actual reason the
 * mobile sticky category toolbar's "full width" background couldn't
 * reach the true screen edge even after it broke out of its own
 * container's padding -- the container itself was sitting 8px in from
 * the edge because of this, site-wide, not just on this page.
 */
/*
 * overflow-x: hidden + overflow-wrap -- a defensive guard, not a fix for
 * a specific bug: an unparsed WPBakery shortcode currently prints as one
 * long unbroken line of raw text on the homepage (that page is getting
 * rebuilt later, not touched here) and was pushing the whole site
 * sideways on mobile. Nothing on this site legitimately needs horizontal
 * overflow on body, so this stops any future instance of long
 * unbreakable text/content from doing the same thing again, site-wide.
 */
body {
	margin: 0;
	overflow-x: hidden;
	overflow-wrap: break-word;
	font-family: "Roboto", sans-serif;
}

/*
 * Shared page-width utility -- confirmed against the real site
 * (medimart.com.au): a 20px side gutter at all widths, then 150px padding
 * each side from 1440px up (re-confirmed 2026-09-14 -- the previous 0px
 * base gutter was wrong, reverse-engineered before the real site's own
 * --porto-fluid-spacing:20px base rule was found). Originally
 * reverse-engineered only for the category page (shop-archive.css);
 * pulled out here 2026-09-10 so the header uses the exact same rule
 * instead of duplicating the numbers -- "the width of the page... should
 * be for the entire website, persistent" per the user directly.
 */
.site-container {
	width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 1440px) {
	.site-container {
		padding-left: 150px;
		padding-right: 150px;
	}
}

/*
 * PayPal Pay Later messages ("Pay in 4 interest-free...") hidden site-wide,
 * as live does (legacy snippet 240). The PayPal Payments plugin still
 * prints the `.ppcp-messages` container on product and cart pages; live
 * never shows it.
 */
.ppcp-messages {
	display: none !important;
}

/* ==========================================================================
   WooCommerce notices: success, error and info bars on every page except
   the cart and checkout (cart.css / checkout.css style their own, matched
   to live's cart and checkout). Measured on live 2026-10-08 at 1920px and
   390px. Live drew the icons with Font Awesome 6 (check f00c, triangle
   f071); here they are the same glyphs as SVG masks so the colour stays a
   CSS value. The `:where()` keeps the page exclusion at zero specificity,
   so page-specific rules (My Account's green info border) still win.
   `!important` only where legacy css-by-sss-team.css forces its own
   (the "Matt" add-to-cart rules, written for Porto's markup).
   ========================================================================== */
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message,
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error,
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-info {
	position: static;
	margin: 0;
	border-radius: 0;
	list-style: none;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

/* Success: pale green bar, green tick, "View cart" pill on the right. */
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 15px !important;
	border: 1px solid #cbe6cb;
	background: #daedda;
	color: #255525;
}

:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message::before {
	content: "";
	position: static;
	order: -2;
	flex: 0 0 17.5px;
	height: 20px;
	margin-right: 2%;
	background-color: #589f3c;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%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 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* a.button.wc-forward outranks WooCommerce's `.woocommerce a.button` and
   legacy `.woocommerce-message .wc-forward { margin-left: 87% !important }`. */
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.button.wc-forward,
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.button,
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.wc-forward {
	order: 2;
	flex: 0 0 auto;
	/* Live's width is 8% of the bar (legacy rule); the minimum stops it
	   squeezing the text out on tablets, where live's own pill breaks. */
	width: 8% !important;
	min-width: max-content;
	text-align: center;
	margin: 0 23px 0 auto !important;
	height: auto;
	padding: 8px 12px;
	border: 0;
	border-radius: 25px;
	background: #589f3c;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.2px;
	text-decoration: none;
	white-space: nowrap;
}

/* Error: no box, dark red text, red warning triangle per line. */
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error {
	padding: 10px 3px;
	border: 0;
	background: none;
	color: #6d1a17;
}

:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error::before,
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-info::before {
	content: none;
	display: none;
}

:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error li {
	display: flex;
	align-items: center;
	min-height: 34px;
	margin: 0;
	padding: 0;
}

:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error li::before {
	content: "";
	flex: 0 0 23px;
	height: 23px;
	margin-right: 8px;
	background-color: #d2322d;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%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 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Info: plain teal text, no icon. */
:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-info {
	padding: 10px 3px;
	border: 0;
	background: none;
	color: #2f6473;
}

/*
 * Up to 767px: tick and text on the first line, then a smaller "View cart"
 * pill underneath, lined up with the text. Deliberately not live's phone
 * layout (a full-width pill beside the tick, text below), which the project
 * lead rejected on 2026-10-08. A two-column grid: the tick in a narrow
 * column, the text (an anonymous grid item) and then the pill in the
 * second, however long the text runs.
 */
@media (max-width: 767px) {
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message {
		display: grid;
		grid-template-columns: 17.5px 1fr;
		column-gap: 10px;
		align-items: start;
	}

	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message::before {
		grid-column: 1;
		margin: 1px 0 0;
	}

	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.button.wc-forward,
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.button,
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message a.wc-forward {
		order: 2;
		grid-column: 2;
		justify-self: start;
		width: auto !important;
		min-width: 0;
		margin: 10px 0 0 !important;
		padding: 6px 16px;
		font-size: 14px;
		line-height: 20px;
	}

	/* Long errors wrap with the triangle beside the first line. */
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error li {
		align-items: flex-start;
	}

	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error li::before {
		margin-top: -1px;
	}
}

/* Up to 575px, live's phone text style: 20px line height. */
@media (max-width: 575px) {
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-message,
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error,
	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-info {
		line-height: 20px;
	}

	:where(body:not(.woocommerce-cart):not(.woocommerce-checkout)) .woocommerce-error li {
		min-height: 32px;
	}
}

/* ==========================================================================
   Page not found (404.php), measured on live 2026-10-09 at 1920px: a
   column 5/12 wide starting 2/12 in (Porto's grid), 20px below the header,
   green 18px/700 "404" with a 14px file icon, a 32px gap, one grey 16/22
   sentence, then 60px to the footer. Full width on phones.
   ========================================================================== */
.error-404 {
	width: calc(41.667% - 30px);
	margin-left: 16.667%;
	padding: 20px 0 40px;
	font-family: "Open Sans", sans-serif;
}

.error-404__title {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 32px;
	color: #589f3c;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 42px;
}

.error-404__icon {
	width: 14px;
	height: 18px;
	fill: currentColor;
}

.error-404__text {
	margin: 0 0 20px;
	color: #7b858a;
	font-size: 16px;
	line-height: 22px;
}

@media (max-width: 991px) {
	.error-404 {
		width: auto;
		margin-left: 0;
	}
}

/* ==========================================================================
   Plain single (single.php: the store pages), as live's Porto single,
   measured 2026-10-09 at 1920px: green 36/44 title 20px below the header,
   then the next-item link (green 16px, chevron), about 60px to the footer.
   ========================================================================== */
.plain-single {
	/* Top/bottom only: a padding shorthand would wipe .site-container's gutters. */
	padding-top: 20px;
	padding-bottom: 62px;
	font-family: "Open Sans", sans-serif;
}

.plain-single__title {
	margin: 0 0 32px;
	color: #589f3c;
	font-family: "Open Sans", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
}

.plain-single__content:empty {
	min-height: 30px;
}

.plain-single .post-navigation a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #589f3c;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
}

.plain-single__chevron {
	width: 10px;
	height: 14px;
	fill: currentColor;
}

/* Only "next" shows, as live; the empty "previous" link is hidden. */
.plain-single .nav-previous {
	display: none;
}