/*
Theme Name: Medical Supplies Perth
Description: Child theme of Twenty Twenty-Five for Medical Supplies Perth (WooCommerce).
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: msp
*/

/* ---------- base ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.msp-eyebrow {
	color: var(--wp--preset--color--accent-1);
	font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.msp-lead { font-size: 1.2rem; color: var(--wp--preset--color--contrast); }

/* buttons used inside raw HTML (category copy) */
.msp-btn {
	display: inline-block; padding: 0.8rem 1.4rem; border-radius: 6px; font-weight: 700; text-decoration: none;
	background: var(--wp--preset--color--accent-1); color: #fff !important; border: 2px solid var(--wp--preset--color--accent-1);
}
.msp-btn:hover { background: #034f17; border-color: #034f17; }
.msp-btn--outline { background: transparent; color: var(--wp--preset--color--contrast) !important; border-color: var(--wp--preset--color--contrast); }
.msp-btn--outline:hover { background: var(--wp--preset--color--contrast); color: #fff !important; border-color: var(--wp--preset--color--contrast); }
.msp-cat-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

/* ---------- header ---------- */
.msp-topbar { background: var(--wp--preset--color--accent-2); color: #fff; font-size: 0.875rem; font-weight: 600; }
.msp-topbar p { margin: 0; padding: 0.55rem 0; }
.msp-topbar a { color: #fff; }
.msp-header { background: #fff; border-bottom: 1px solid var(--wp--preset--color--accent-5); position: relative; z-index: 20; }
.msp-header > .alignwide { padding-block: 1rem; }
.msp-logo { display: inline-block; line-height: 0; }
.msp-logo img { height: 66px; width: auto; display: block; }
.msp-header .wp-block-navigation { font-weight: 600; font-size: 0.975rem; gap: 1.75rem; }
.msp-header .wp-block-navigation a { text-decoration: none; }
.msp-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-1); }
.msp-header .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--accent-5) !important; border-radius: 8px; padding: 0.5rem 0 !important; box-shadow: 0 12px 30px rgba(11, 31, 69, 0.12); min-width: 240px !important; }
.msp-header .wp-block-navigation__submenu-container a { padding: 0.45rem 1.1rem !important; }
.msp-header-actions { gap: 1rem !important; }
.msp-header-actions .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.msp-header .wc-block-mini-cart__button { color: var(--wp--preset--color--contrast); }

/* ---------- hero ---------- */
.msp-hero { background: var(--wp--preset--color--accent-3); overflow: hidden; }
.msp-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 1.25rem; }
.msp-hero .msp-hero-copy p:not(.msp-eyebrow) { font-size: 1.2rem; color: var(--wp--preset--color--contrast); max-width: 30rem; }
.msp-hero-art { position: relative; min-height: 340px; }
.msp-hero-art img { mix-blend-mode: multiply; display: block; height: auto; }
.msp-hero-art .msp-hero-a { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 62%; }
.msp-hero-art .msp-hero-b { position: absolute; left: 2%; top: 50%; transform: translateY(-42%); width: 46%; }

/* ---------- category grid ---------- */
.msp-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.msp-card {
	display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 8px; overflow: hidden; text-decoration: none !important; color: inherit !important;
	transition: box-shadow .2s ease, transform .2s ease;
}
.msp-card:hover { box-shadow: 0 14px 32px rgba(11, 31, 69, 0.12); transform: translateY(-2px); }
.msp-card > span, .msp-card__body > span { display: block; }
.msp-card__body { flex: 1; }
.msp-card__img { background: #eef1f4; aspect-ratio: 16 / 10; display: flex !important; overflow: hidden; align-items: center; justify-content: center; padding: 0.9rem; }
.msp-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.msp-card__img svg { width: 38%; height: auto; color: var(--wp--preset--color--accent-1); }
.msp-card__body { padding: 1rem 1.15rem 1.15rem; }
.msp-card__title { font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--wp--preset--color--contrast); margin: 0 0 0.45rem; }
.msp-card__link { color: var(--wp--preset--color--accent-1); font-weight: 700; font-size: 0.95rem; }
.msp-card--cta { background: var(--wp--preset--color--accent-2); border-color: var(--wp--preset--color--accent-2); justify-content: center; padding: 1.6rem; }
.msp-card--cta .msp-card__title { color: #fff; font-size: 1.55rem; margin-bottom: 1.1rem; }
.msp-card--cta > span { display: block; }
.msp-card--cta .msp-pill { display: inline-block !important; align-self: flex-start; border: 2px solid #5cc275; color: #fff; border-radius: 6px; padding: 0.55rem 1.1rem; font-weight: 700; }

/* ---------- bands ---------- */
.msp-restock { background: var(--wp--preset--color--accent-4); }
.msp-restock img { mix-blend-mode: multiply; max-height: 340px; width: auto !important; }
.msp-local .wp-block-column:first-child { border-right: 1px solid var(--wp--preset--color--accent-5); }
.msp-pin::before { content: ""; display: inline-block; width: 14px; height: 18px; margin-right: 0.5rem; vertical-align: -3px; background: var(--wp--preset--color--accent-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0zm0 17a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0zm0 17a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- page hero + page layouts ---------- */
.msp-page-hero { background: var(--wp--preset--color--accent-3); }
.msp-page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.03em; margin: 0 0 0.9rem; }
.msp-page-hero .msp-lead, .msp-page-hero .wp-block-post-excerpt__excerpt { font-size: 1.2rem; color: var(--wp--preset--color--contrast); max-width: 36rem; margin: 0; }
.msp-page-hero-art img { mix-blend-mode: multiply; max-height: 300px; width: auto !important; margin-left: auto; display: block; }
.msp-page-hero-art:not(:has(img)) { display: none; }
.msp-page-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: 2.25rem; }
.msp-page-body > .wp-block-post-content > :first-child { margin-top: 0; }
.msp-info-card { background: #fff; border: 1px solid var(--wp--preset--color--accent-5); border-radius: 8px; padding: 1.5rem 1.6rem; height: 100%; }
.msp-info-card h3 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.msp-info-card p { margin: 0.25rem 0; }
.msp-tint { background: var(--wp--preset--color--accent-4); border-color: transparent; }
.msp-cta-band { background: var(--wp--preset--color--accent-2); color: #fff; border-radius: 10px; padding: 2rem 2.2rem; }
.msp-cta-band h2 { color: #fff; margin: 0 0 0.4rem !important; }
.msp-cta-band p { color: rgba(255,255,255,.88); margin: 0; }
.msp-cta-band .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; }
.msp-cat-links { columns: 2; column-gap: 2rem; padding-left: 1.1rem; }
.msp-cat-links li { margin-bottom: 0.4rem; break-inside: avoid; }
@media (max-width: 781px) { .msp-page-hero-art img { margin: 1rem auto 0; max-height: 220px; } .msp-cat-links { columns: 1; } }

/* ---------- footer ---------- */
.msp-footer { background: var(--wp--preset--color--accent-2); color: #fff; }
.msp-footer a { color: #fff; text-decoration: none; }
.msp-footer a:hover { text-decoration: underline; }
.msp-footer .msp-footer-brand { margin: 0; line-height: 0; }
.msp-footer .msp-footer-brand img { height: 56px; width: auto; }
.msp-footer .msp-footer-small { font-size: 0.85rem; opacity: 0.85; margin: 0; }
.msp-footer-cats { font-size: 0.9rem; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.msp-footer-cats span { opacity: 0.7; }
.msp-footer hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); margin: 1rem 0; }

/* ---------- shop / category pages ---------- */
.msp-cat-hero { background: var(--wp--preset--color--accent-3); }
.msp-cat-hero .wp-block-term-description h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin: 0.25rem 0 0.5rem; }
.msp-cat-hero .wp-block-term-description p { max-width: 52rem; margin: 0 0 0.8rem; }
.msp-cat-hero .wp-block-term-description .msp-lead { font-weight: 600; margin-bottom: 1rem; }
.msp-short-desc p { margin: 0 0 0.8rem; }
.msp-cat-more { max-width: 52rem; }
.msp-cat-more h2 { font-size: 1.6rem; margin-top: 2.25rem; }
.wc-block-components-product-price, .wp-block-woocommerce-product-price { font-weight: 700; color: var(--wp--preset--color--contrast); }
.woocommerce-price-suffix { font-size: 0.8em; font-weight: 500; color: var(--wp--preset--color--accent-6); }
.wp-block-woocommerce-product-image img, .wc-block-components-product-image img { mix-blend-mode: multiply; }

/* ---------- product cards (shop, categories, related products) ---------- */
.wc-block-product-template.is-flex-container {
	display: grid !important; gap: 1.25rem !important;
	grid-template-columns: repeat(var(--msp-cols, 4), minmax(0, 1fr));
}
.wc-block-product-template.columns-2 { --msp-cols: 2; }
.wc-block-product-template.columns-3 { --msp-cols: 3; }
.wc-block-product-template.columns-4 { --msp-cols: 4; }
.wc-block-product-template.columns-5 { --msp-cols: 5; }
.wc-block-product-template.columns-6 { --msp-cols: 6; }
.wc-block-product-template.is-flex-container > li { width: auto !important; margin: 0 !important; max-width: none !important; }
.tax-product_cat .wc-block-product-template, .post-type-archive-product .wc-block-product-template { --msp-cols: 4; }
/* Shop + category pages use WooCommerce's "responsive" grid variant */
.wc-block-product-template.wc-block-product-template__responsive {
	display: grid !important; gap: 1.25rem !important;
	grid-template-columns: repeat(var(--msp-cols, 4), minmax(0, 1fr)) !important;
}
.wc-block-product-template__responsive > li { width: auto !important; margin: 0 !important; max-width: none !important; }
@media (max-width: 1000px) { .wc-block-product-template.wc-block-product-template__responsive { --msp-cols: 3 !important; } }
@media (max-width: 781px) { .wc-block-product-template.wc-block-product-template__responsive { --msp-cols: 2 !important; gap: 0.9rem !important; } }
@media (max-width: 1000px) { .wc-block-product-template.is-flex-container { --msp-cols: 3 !important; } }
@media (max-width: 781px) { .wc-block-product-template.is-flex-container { --msp-cols: 2 !important; } }
.wc-block-product-template .wc-block-product {
	display: flex !important; flex-direction: column; text-align: left;
	background: #fff; border: 1px solid var(--wp--preset--color--accent-5); border-radius: 8px; overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.wc-block-product-template .wc-block-product:hover { box-shadow: 0 14px 32px rgba(11, 31, 69, 0.12); transform: translateY(-2px); }
.wc-block-product .wc-block-components-product-image {
	background: #eef1f4; margin: 0 0 0.9rem !important; padding: 1rem; border-radius: 0 !important;
}
.wc-block-product .wc-block-components-product-image img { object-fit: contain !important; }
.wc-block-product .wp-block-post-title {
	text-align: left !important; font-size: 1rem !important; font-weight: 700; line-height: 1.35;
	margin: 0 1rem 0.35rem !important;
}
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-1); }
.wc-block-product .wp-block-woocommerce-product-price { margin: 0 1rem 1rem !important; text-align: left !important; }
.wc-block-product .wc-block-components-product-price { justify-content: flex-start !important; text-align: left !important; font-size: 1.05rem; }
.wc-block-product .wp-block-woocommerce-product-button { margin: auto 1rem 1rem !important; }
.wc-block-product .wc-block-components-product-button { align-items: stretch !important; }
.wc-block-product .wc-block-components-product-button .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	width: 100%; justify-content: center; padding: 0.6rem 1rem !important; font-size: 0.95rem !important; border-radius: 6px;
}
.wc-block-product .wc-block-components-product-sale-badge { margin: 0.5rem; }

/* Related products block on product pages */
.single-product .wp-block-woocommerce-product-collection { margin-top: 3.5rem !important; margin-bottom: 4rem !important; }
.single-product .wp-block-woocommerce-product-collection > .wp-block-heading { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 1.25rem; }
@media (max-width: 781px) {
	.wc-block-product-template.is-flex-container { gap: 0.9rem !important; }
	.wc-block-product .wp-block-post-title { font-size: 0.95rem !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
	.msp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.msp-hero-art { min-height: 260px; }
	.msp-local .wp-block-column:first-child { border-right: 0; }
	.msp-header-actions .wp-block-button { display: none; }
	.msp-logo img { height: 50px; }
}
@media (max-width: 480px) {
	.msp-cats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- product description tab ---------- */
.woocommerce-Tabs-panel--description > h2:first-child { display: none; }
.wp-block-woocommerce-product-details h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin: 1.75rem 0 0.6rem; }
.wp-block-woocommerce-product-details ul { padding-left: 1.2rem; }
.wp-block-woocommerce-product-details table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 0.95rem; margin: 0.5rem 0 1.5rem; }
.wp-block-woocommerce-product-details td { border-bottom: 1px solid var(--wp--preset--color--accent-5); padding: 0.45rem 0.6rem; vertical-align: top; }
.wp-block-woocommerce-product-details tr:first-child td { font-weight: 700; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--accent-3); }
.wp-block-woocommerce-product-details td.sku, .wp-block-woocommerce-product-details tr td:first-child { white-space: nowrap; color: var(--wp--preset--color--accent-6); font-size: 0.85rem; }

/* ---------- photo hero (Contact) ---------- */
.msp-photo-hero { background-color: var(--wp--preset--color--accent-2); padding-top: 4rem !important; padding-bottom: 4rem !important; }
.msp-photo-hero .wp-block-cover__image-background { object-position: 70% center; }
.msp-photo-hero__copy { max-width: 34rem; }
.msp-photo-hero__eyebrow { color: #fff !important; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem; }
.msp-photo-hero h1 { color: #fff !important; font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -0.035em; margin: 0 0 1rem; }
.msp-photo-hero__lead, .msp-photo-hero__lead p { color: #fff !important; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; margin: 0; }
.msp-photo-hero__buttons { margin-top: 2rem !important; gap: 0.9rem; }
.msp-photo-hero__buttons .wp-block-button__link { font-size: 1.1rem; padding: 0.9rem 1.6rem; }
.msp-btn-white .wp-block-button__link { color: #fff !important; border: 2px solid #fff !important; background: transparent !important; }
.msp-btn-white .wp-block-button__link:hover { background: #fff !important; color: var(--wp--preset--color--contrast) !important; }
.msp-contact-strip {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2.5rem;
	padding: 1.4rem 1rem; border-bottom: 1px solid var(--wp--preset--color--accent-5); background: #fff;
	font-size: 1.1rem; font-weight: 600; color: var(--wp--preset--color--contrast);
}
.msp-contact-strip a, .msp-contact-strip span { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--wp--preset--color--contrast); text-decoration: none; }
.msp-contact-strip a:hover { color: var(--wp--preset--color--accent-1); }
.msp-contact-strip svg { width: 26px; height: 26px; color: var(--wp--preset--color--accent-1); flex: none; }
.msp-contact-strip__sep { width: 1px; height: 32px; background: var(--wp--preset--color--accent-5); }
@media (max-width: 781px) {
	.msp-photo-hero .wp-block-cover__background { background: rgba(4, 26, 62, 0.82) !important; }
	.msp-contact-strip { flex-direction: column; gap: 0.8rem; }
	.msp-contact-strip__sep { display: none; }
}

.msp-info-card h3:not(:first-child) { margin-top: 1.4rem; }

/* ---------- green header (site-wide) ---------- */
.msp-header { background: var(--wp--preset--color--accent-1); border-bottom: 0; }
.msp-header > .alignwide { padding-block: 0.9rem; }
.msp-header .wp-block-navigation,
.msp-header .wp-block-navigation a,
.msp-header .wp-block-navigation .wp-block-navigation-item__content,
.msp-header .wp-block-navigation__submenu-icon,
.msp-header .wp-block-navigation__responsive-container-open { color: #fff; }
.msp-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.msp-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
/* dropdown + mobile overlay stay white with navy text */
.msp-header .wp-block-navigation__submenu-container,
.msp-header .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--contrast) !important; background: #fff; }
.msp-header .wp-block-navigation__submenu-container a:hover { color: var(--wp--preset--color--accent-1) !important; text-decoration: none; }
.msp-header .wp-block-navigation__responsive-container.is-menu-open,
.msp-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--contrast) !important; background: #fff; }
.msp-header-actions .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff; color: var(--wp--preset--color--accent-1); border-color: #fff;
}
.msp-header-actions .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-1); }
.msp-header .wc-block-mini-cart__button, .msp-header .wc-block-mini-cart__icon,
.msp-header .wc-block-customer-account a, .msp-header .wc-block-customer-account svg { color: #fff !important; fill: currentColor; }
.msp-header .wc-block-mini-cart__badge { background: #fff; color: var(--wp--preset--color--accent-1); }
.msp-topbar p { letter-spacing: 0.01em; }

/* ---------- photo hero: photo fills the right two-thirds, fades into navy ---------- */
.msp-photo-hero .wp-block-cover__image-background { left: auto !important; right: 0; width: 68% !important; object-position: center 35%; }
.msp-photo-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(4,26,62,1) 0%, rgba(4,26,62,1) 32%, rgba(4,26,62,0.55) 48%, rgba(4,26,62,0.1) 66%, rgba(4,26,62,0) 80%) !important; }
@media (max-width: 781px) {
	.msp-photo-hero .wp-block-cover__image-background { width: 100% !important; }
	.msp-photo-hero .wp-block-cover__background { background: rgba(4, 26, 62, 0.82) !important; }
}

.msp-photo-hero__buttons { display: flex; flex-wrap: wrap; }
.msp-photo-hero__buttons .wp-block-button__link { display: inline-block; border: 2px solid var(--wp--preset--color--accent-1); border-radius: 6px; font-weight: 700; text-decoration: none; }

/* Contact: wide photo runs full width under the fade */
.page-id-286 .msp-photo-hero .wp-block-cover__image-background { width: 100% !important; object-position: 62% center; }

/* Home: wide photo runs full width under the fade */
.msp-home-hero .wp-block-cover__image-background { width: 100% !important; object-position: 62% center; }
.msp-home-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }

/* ---------- home: shop-by-category strip under the hero ---------- */
.msp-cat-strip { background: #fff; border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.msp-cat-strip__inner { max-width: 1200px; margin: 0 auto; padding: 1.6rem var(--wp--style--root--padding-right, 1.5rem) 1.6rem var(--wp--style--root--padding-left, 1.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.msp-cat-strip__title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.msp-cat-strip a { color: var(--wp--preset--color--contrast); font-weight: 700; font-size: 1.15rem; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--contrast); padding-bottom: 0.15rem; }
.msp-cat-strip a:hover { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); }
@media (max-width: 781px) { .msp-cat-strip__inner { justify-content: flex-start; gap: 0.8rem 1.4rem; } .msp-cat-strip__title { width: 100%; } }