/*
Theme Name: Mr IT Storefront
Theme URI: https://mrit.com.sg
Description: Mr IT's own branding and homepage layout, built on top of WooCommerce's official Storefront theme. No page builder - plain WordPress templates and CSS, kept deliberately lean.
Author: Mr IT Pte Ltd
Template: storefront
Version: 2.9.7
Text Domain: mrit-storefront-child
*/

/* ==========================================================================
   Brand colours - change these and the whole site updates.
   ========================================================================== */
:root {
	/* #0088CC is the actual button/link blue from the previous mrit.com.sg
	 * (pulled from a Wayback Machine capture, 2025-06-20) - keeping brand
	 * continuity rather than picking an arbitrary new blue. */
	--mrit-primary: #0088cc;
	--mrit-primary-rgb: 0, 136, 204;
	--mrit-primary-dark: #006699;
	--mrit-accent: #e8792c;
	--mrit-ink: #222;
	--mrit-ink-soft: #5a5a5a;
	--mrit-bg-soft: #f7f8fa;
	--mrit-border: #e2e4e8;
}

/* ==========================================================================
   Header / navigation - Storefront's own structure, just re-coloured.
   ========================================================================== */
.site-header {
	border-bottom: 1px solid var(--mrit-border);
}

/* Storefront's own default header carries a ~68px margin-bottom, meant to
 * create breathing room before a normal page's breadcrumb/title area -
 * confirmed via direct computed-style inspection (`margin-bottom:
 * 67.7728px` exactly matched the gap Derrick flagged). The homepage has
 * neither of those, so it just read as a large dead gap between the
 * category nav bar and the hero. A plain `.site-header { margin-bottom: 0 }`
 * didn't win - Storefront's own rule targets `#masthead` specifically,
 * whose ID-level specificity beats a single class regardless of source
 * order, so this needs to match that (and !important, since the competing
 * rule may itself carry !important - cheaper to guarantee the override
 * than to keep guessing at exact specificity). */
#masthead.site-header {
	/* A small gap, not literally 0 - Derrick asked for a bit of breathing
	 * room between the search box and the category nav bar below it,
	 * after seeing the two sitting flush against each other. */
	margin-bottom: 10px !important;
	/* Storefront's own default header also carries ~26px of padding-top,
	 * pushing the logo down from the blue top bar - confirmed via the same
	 * direct computed-style inspection technique. Derrick wants that gap
	 * gone but not literally 0 (the logo shouldn't touch the top bar
	 * outright) - a small deliberate cushion instead of Storefront's
	 * larger default. */
	padding-top: 8px !important;
}

/* This theme invented ".site-header-container" as a guessed class name in
 * an earlier round and it silently matched nothing - Storefront's real
 * wrapper here is ".col-full" (confirmed via direct DOM inspection: the
 * logo/search/icons are its only real children, alongside 2 skip-links).
 * Scoped to inside .site-header specifically since .col-full is also
 * Storefront's generic content-width wrapper class used elsewhere on the
 * page - this rule must not leak into the main content area. */
.site-header .col-full {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
}

/* Storefront's own CSS gives .site-branding an explicit percentage width
 * (~74%) meant for its old float-based header layout - `flex: 0 0 auto`
 * alone doesn't defeat that, since an explicit `width` still wins as the
 * flex-basis under `flex-basis: auto`. Confirmed via direct computed-style
 * inspection (683px measured against a 925px-wide row - ~74% exactly).
 * Overriding `width` directly, not just the flex shorthand, actually fixes
 * it. Explicit `order` on all three so the visual sequence (logo, search,
 * icons) doesn't depend on which hook priority rendered each one first. */
.site-header .col-full .site-branding {
	flex: 0 0 auto;
	width: auto;
	order: 1;
	/* The real cause, found by testing align-self directly (setting it via
	 * JS had zero visible effect, which is only possible if something else
	 * wins first): Storefront gives this element `margin: 0 auto auto 0`
	 * (confirmed via computed style - margin-bottom/-right resolved to a
	 * real px value, not 0). An auto margin always overrides align-self
	 * for that axis, which is exactly why align-self alone can't fix this
	 * - the actual fix is killing the auto margin so align-items: center
	 * on the row can finally reach it. */
	margin: 0;
}

.site-header .col-full .site-search {
	flex: 1 1 auto;
	max-width: 720px;
	margin: 0 24px;
	order: 2;
}

/* Bordered pill search box with an icon-only submit button, matching the
 * reference design - WooCommerce's own search-widget markup is untouched
 * (form.woocommerce-product-search > input.search-field + button), this is
 * CSS-only restyling. */
.woocommerce-product-search {
	display: flex;
	align-items: center;
	border: 1px solid var(--mrit-border);
	border-radius: 24px;
	padding: 4px 6px 4px 20px;
	background: #fff;
}

.woocommerce-product-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 10px 0;
	font-size: 0.95rem;
	color: var(--mrit-ink);
}

/* Storefront visually hides this button by default (position:absolute,
 * 1x1px, overflow:hidden - a screen-reader-only accessibility pattern,
 * relying on Enter-to-submit instead) - confirmed via computed-style
 * inspection after the icon refused to show up at any size. Deliberately
 * un-hiding it here since a visible clickable icon is exactly what's
 * wanted, so every property that pattern sets needs !important to win. */
.woocommerce-product-search button[type="submit"] {
	position: relative !important;
	flex-shrink: 0;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50%;
	background: transparent;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
}

.woocommerce-product-search button[type="submit"]:hover {
	background: var(--mrit-bg-soft);
}

.woocommerce-product-search button[type="submit"]::before {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	border: 2px solid var(--mrit-primary);
	border-radius: 50%;
	top: 9px;
	left: 9px;
}

.woocommerce-product-search button[type="submit"]::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 8px;
	background: var(--mrit-primary);
	top: 20px;
	left: 22px;
	transform: rotate(45deg);
}

.mrit-header-icons {
	flex: 0 0 auto;
	order: 3;
	display: flex;
	align-items: center;
	gap: 20px;
}

.mrit-category-nav {
	background: var(--mrit-bg-soft);
	border-top: 1px solid var(--mrit-border);
	border-bottom: 1px solid var(--mrit-border);
	/* The real fix for "search box touching the grey menu bar" - both this
	   nav and the search/icons row above it are siblings *inside*
	   #masthead (mrit_category_nav is hooked to storefront_header, which
	   fires inside the <header> tag, not after it) - the earlier attempt
	   at this gap set margin-bottom on #masthead itself, which only adds
	   space AFTER the whole header closes (i.e. before the hero banner),
	   never touching this internal boundary. Confirmed via direct
	   getBoundingClientRect() comparison - the two rows had a 0px gap
	   despite that other fix being in place. */
	margin-top: 10px;
}

.mrit-category-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 40px;
}

.mrit-category-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 2px;
	color: var(--mrit-ink);
	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 700;
	border-bottom: 2px solid transparent;
}

.mrit-category-nav-item:hover {
	color: var(--mrit-primary);
	border-bottom-color: var(--mrit-primary);
}

.mrit-category-nav-icon {
	display: flex;
	color: var(--mrit-primary);
}

.mrit-category-nav-icon svg {
	width: 28px;
	height: 28px;
}

.mrit-header-icon {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--mrit-primary);
	text-decoration: none;
}

.mrit-header-icon svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.mrit-header-icon:hover {
	color: var(--mrit-primary-dark);
}

.mrit-header-icon-count {
	position: absolute;
	top: -8px;
	right: -9px;
	background: var(--mrit-accent);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.mrit-header-cart-text {
	margin-left: 8px;
	font-size: 0.88rem;
	line-height: 1.25;
	color: var(--mrit-ink);
	white-space: nowrap;
}

.mrit-header-cart-text strong {
	color: var(--mrit-primary-dark);
}

@media (max-width: 767px) {
	.mrit-header-icons {
		gap: 14px;
	}
	.mrit-header-cart-text {
		display: none;
	}
}

.main-navigation ul li a,
.storefront-primary-navigation .main-navigation ul li a {
	color: var(--mrit-ink);
}

.storefront-primary-navigation {
	background-color: #fff;
	border-top: 3px solid var(--mrit-primary);
}

/* ==========================================================================
   Buttons / links - WooCommerce + Storefront both key off these classes.
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
button.alt {
	background-color: var(--mrit-primary);
	color: #fff;
	border-radius: 4px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--mrit-primary-dark);
	color: #fff;
}

.price ins,
.woocommerce ul.products li.product .price {
	color: var(--mrit-primary-dark);
}

/* ==========================================================================
   Shop / category archive - product cards, sort bar. Storefront's own
   default templates are untouched (no PHP override) - this is CSS only,
   scoped to the shop-loop wrapper, nowhere near cart/checkout markup.
   ========================================================================== */
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--mrit-border);
	border-radius: 8px;
	padding: 16px 16px 20px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* "Select options"/"Read more"/"Add to cart" button below every product
   card, site-wide - Derrick asked for it gone on all category archive
   pages, extending the same cleanup already applied to the homepage's
   Best Sellers/Featured Products sections specifically. Scoped to the
   shop-loop card's own button (a direct child of li.product) so the real
   single-product-page "Add to Cart" button (a different template
   entirely, inside form.cart) is never touched. */
.woocommerce ul.products li.product > a.button {
	display: none;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
	border-radius: 4px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.98rem;
	margin: 10px 0 4px;
}

.woocommerce ul.products li.product .button {
	border-radius: 4px;
	font-size: 0.85rem;
}

.woocommerce span.onsale {
	background-color: var(--mrit-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 4px;
	top: 12px;
	left: 12px;
}

.woocommerce-ordering select {
	border: 1px solid var(--mrit-border);
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 0.85rem;
	color: var(--mrit-ink);
	background-color: #fff;
}

.woocommerce-result-count {
	color: var(--mrit-ink-soft);
	font-size: 0.88rem;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	margin-bottom: 0;
}

/* ==========================================================================
   Top bar - slim value-prop strip above the header.
   ========================================================================== */
.mrit-top-bar {
	background: var(--mrit-primary-dark);
	color: #fff;
	text-align: center;
	font-size: 0.82rem;
	padding: 8px 16px;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   Homepage - hero, trust strip, category tiles, promo banners.
   ========================================================================== */
/* Sized to ~80% of the screen width per Derrick's direction (a step back
 * from the earlier near-full-bleed 1800px cap, once he saw it live) -
 * `80%` alone measured as only ~71% of the actual viewport, since it's a
 * percentage of this element's own (padded) parent container, not the
 * screen itself - `80vw` is what actually matches "80% of the screen".
 * Capped at 1600px so it doesn't become absurdly wide on very large
 * monitors.
 *
 * Real bug caught from Derrick's own screenshot: on a wide monitor, 80vw
 * (e.g. 1536px on a 1920px screen) is WIDER than this element's own parent
 * container (Storefront's content wrapper, which has its own fixed
 * max-width well under 1536px on any screen size). A child wider than its
 * parent can't be centred by plain `margin: auto` - the browser can't use
 * a negative auto-margin, so it resolves to 0 and the child's left edge
 * just snaps to the parent's left edge, extending rightward past the
 * parent - exactly the "left-aligned, not centred" look Derrick flagged,
 * and correctly guessed was a container-width issue. Fixed with the
 * standard "break out of a narrower centred parent" technique: `left: 50%`
 * moves the box to the parent's own horizontal centre (which, since the
 * parent itself is centred on the page, equals the viewport's centre
 * regardless of the parent's own width), then `translateX(-50%)` shifts
 * back by half of *this element's own* width - centring it on the
 * viewport even though it's wider than its parent. */
.mrit-hero-carousel {
	position: relative;
	width: 80vw;
	max-width: 1600px;
	left: 50%;
	transform: translateX(-50%);
	margin: 16px 0 24px;
}

.mrit-hero-slide {
	position: relative;
	display: none;
	box-sizing: border-box;
	background-color: #1a1a1a;
	background-size: cover;
	/* "center center" rather than a side-anchored position - this now
	 * holds 3 slides with the interesting content (product, or a banner's
	 * own baked-in headline) in different horizontal positions, so no
	 * single fixed side crops well for all of them. */
	background-position: center center;
	color: var(--mrit-ink);
	padding: 72px 24px;
	/* A fixed aspect-ratio (matching the 2 newer banner images, 1712x624)
	 * instead of min-height - Derrick asked for one consistent size across
	 * slides, using the new banners' own proportions as the standard,
	 * rather than each slide sizing independently. box-sizing:border-box
	 * above makes the padding count inside this ratio rather than adding
	 * to it. */
	aspect-ratio: 1712 / 624;
	align-items: center;
	border-radius: 16px;
	overflow: hidden;
}

.mrit-hero-slide.is-active {
	display: flex;
}

/* For slides whose own photo already carries SanDisk's headline/copy -
 * just a CTA button, positioned bottom-right (both such banners so far
 * keep that corner relatively clear of their own baked-in text/subject). */
.mrit-hero-cta-only {
	position: absolute;
	right: 28px;
	bottom: 28px;
}

/* The Dual Drive Go banner has its own real SanDisk logo printed bottom-
   right in the photo itself - the default position above sits right on
   top of it, so this one slide moves its button to the opposite corner
   (clear dark wood table there) via the optional cta_position slide key. */
.mrit-hero-cta-bottom-left {
	right: auto;
	left: 28px;
}

.mrit-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mrit-hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	border: none;
	padding: 0;
	cursor: pointer;
}

.mrit-hero-dot.is-active {
	background: #fff;
}

.mrit-hero-content {
	max-width: 560px;
}

.mrit-hero-slide h1 {
	color: var(--mrit-ink);
	font-size: 2.3rem;
	margin: 0 0 14px;
	line-height: 1.15;
}

.mrit-hero-slide p {
	font-size: 1.08rem;
	max-width: 480px;
	margin: 0 0 24px;
	color: var(--mrit-ink-soft);
}

.mrit-hero-slide .button {
	background-color: var(--mrit-accent);
	color: #fff;
	padding: 12px 28px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
}

.mrit-hero-slide .button:hover {
	opacity: 0.9;
	color: #fff;
}

.mrit-hero-contact {
	margin-top: 20px !important;
	font-size: 0.92rem;
	color: var(--mrit-ink-soft);
}

.mrit-hero-contact a {
	color: var(--mrit-primary-dark);
	text-decoration: underline;
}

.mrit-trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	background: var(--mrit-bg-soft);
	border-bottom: 1px solid var(--mrit-border);
	padding: 16px 24px;
}

.mrit-trust-strip-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mrit-ink);
	white-space: nowrap;
}

.mrit-trust-strip-icon {
	font-size: 1.1rem;
}

.mrit-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 24px;
}

/* The "Shop by Category" section sits directly under the slim trust strip
 * - its full 56px top padding felt like a big empty gap there specifically,
 * cut down just for this one section rather than all of them. Nudged back
 * up slightly from an earlier 28px - Derrick asked for "a little space,
 * but not too much" once he saw it fully flush. */
.mrit-trust-strip + .mrit-section {
	padding-top: 40px;
}

/* Best Sellers directly follows Shop by Category - Derrick asked to
 * tighten that specific gap too, separately from the default 56px every
 * other .mrit-section still uses. */
#mrit-best-sellers {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Featured Products directly follows Best Sellers - Derrick flagged the
   default 56px gap above it as too much, same tightening as Best Sellers
   got above. */
#mrit-featured-products {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Full-width Verbatim promo banner, sitting between Featured Products and
   the 2-col category promo tiles - Derrick pointed at the big empty gap
   there and asked for a real banner in it rather than just less padding.
   Deliberately not force-cropped to a fixed height like the smaller
   promo tiles below - this image already reads as a finished banner
   (headline, feature icons, product photos), so it keeps its own
   proportions at full section width instead of losing content to a
   height crop. */
.mrit-verbatim-banner-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 24px;
}

.mrit-verbatim-banner-section a {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mrit-verbatim-banner-section a:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.mrit-verbatim-banner-section img {
	display: block;
	width: 100%;
	height: auto;
}

/* Featured Products cards, same cleaner variant as the Best Sellers
   carousel - Derrick asked for the category badge chip and "Select
   options"/"Read more" button removed here too, just image + title +
   price. Scoped to this section only, so the shop archive keeps its
   badge/button as normal. */
#mrit-featured-products .mrit-product-badge {
	display: none;
}

#mrit-featured-products li.product > a.button {
	display: none;
}

.mrit-section h2 {
	text-align: center;
	margin-bottom: 8px;
}

.mrit-section .mrit-section-intro {
	text-align: center;
	color: var(--mrit-ink-soft);
	max-width: 640px;
	margin: 0 auto 36px;
}

.mrit-category-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (min-width: 820px) {
	.mrit-category-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 480px) {
	.mrit-category-tiles {
		grid-template-columns: 1fr;
	}
}

.mrit-category-tile {
	background: var(--mrit-bg-soft);
	border: 1px solid var(--mrit-border);
	border-radius: 8px;
	padding: 32px 24px;
	text-align: center;
	text-decoration: none;
	color: var(--mrit-ink);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mrit-category-tile:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	color: var(--mrit-ink);
}

.mrit-category-tile .mrit-category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(var(--mrit-primary-rgb), 0.1);
	color: var(--mrit-primary);
}

.mrit-category-tile:hover .mrit-category-icon {
	background: var(--mrit-primary);
	color: #fff;
}

/* Deliberately bigger than the header's top category-nav-bar icons (28px,
   .mrit-category-nav-icon svg below) - Derrick asked for "Shop by
   Category" to read as the larger, more prominent icon set of the two. */
.mrit-category-tile .mrit-category-icon svg {
	width: 42px;
	height: 42px;
	transition: none;
}

.mrit-category-tile h3 {
	margin: 0 0 6px;
	color: var(--mrit-primary-dark);
}

.mrit-category-tile p {
	margin: 0;
	color: var(--mrit-ink-soft);
	font-size: 0.92rem;
}

/* ==========================================================================
   Product cards - category badge chip, shared by the homepage's [products]
   grids and the shop/category archive pages (same WooCommerce hook).
   Derrick asked for this removed from every product image site-wide (it had
   already been hidden on Best Sellers/Featured Products/the homepage
   carousel individually - those scoped rules below are now redundant but
   left in place, harmless). Hiding the shared base class instead covers the
   one place it was still showing: the shop/category archive grids. */
.mrit-product-badge {
	display: none;
	background: var(--mrit-primary);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 3px;
	margin-bottom: 8px;
}

/* ==========================================================================
   Homepage [products] shortcode grids (e.g. "New In") - found while
   building the Best Sellers carousel below: Storefront's own woocommerce.css
   (still v4.6.2-era, older than the WooCommerce plugin now installed,
   v11.1.0) has no width/float rule at all for shortcode-rendered
   `ul.products li.product` on this WC version - confirmed via direct
   CSS-rule inspection, not guessed - so cards silently stacked into a
   single column at real desktop widths instead of the intended 4-across
   grid. The shop/category archive pages are unaffected (different render
   path, covered by other CSS). The `[products]` shortcode always wraps its
   own output in an extra `<div class="woocommerce columns-N">` before the
   real `<ul>` - confirmed via direct DOM inspection after a first attempt
   at this fix (a plain `.mrit-section > ul.products` selector) silently
   matched nothing, since that wrapper div sits in between. Scoped via that
   wrapper's own direct-child position instead, which also deliberately
   excludes the Best Sellers carousel below (there, the same wrapper div
   sits inside `.mrit-carousel-track`, not as a direct child of
   `.mrit-section`) so the two rules can't fight each other regardless of
   source order.
   ========================================================================== */
.mrit-section > .woocommerce > ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Storefront/WooCommerce's own CSS puts a `content: ""` clearfix
   pseudo-element on `.products` (a leftover from its old float-based
   grid, confirmed via direct computed-style inspection on the
   ::before). A `content`-bearing pseudo-element still becomes a real
   grid item once the parent is display:grid, so it was silently eating
   the very first grid cell - the exact "blank product space at the
   start" Derrick spotted. Grid never needed a clearfix to begin with,
   so just drop the content entirely for this specific grid. */
.mrit-section > .woocommerce > ul.products::before,
.mrit-section > .woocommerce > ul.products::after {
	content: none;
}

@media (max-width: 820px) {
	.mrit-section > .woocommerce > ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.mrit-section > .woocommerce > ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Best Sellers carousel - horizontal scroll with prev/next buttons
   (Derrick asked to match a reference screenshot's layout), instead of the
   plain wrapping grid every other [products] section on the homepage uses.
   Scoped to .mrit-carousel-track only, so "New In" and the shop archive
   keep their normal wrapping grid untouched. Real horizontal scrolling
   (overflow-x, touch/trackpad drag all work natively) - the two buttons
   are a convenience on top of that, not the only way to move through it,
   so this still works fine on touch devices even before any JS runs.
   ========================================================================== */
.mrit-carousel {
	position: relative;
}

.mrit-carousel-track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mrit-carousel-track::-webkit-scrollbar {
	display: none;
}

.mrit-carousel-track ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px;
	overflow: visible;
}

.mrit-carousel-track ul.products li.product {
	flex: 0 0 260px;
	width: 260px;
	scroll-snap-align: start;
}

.mrit-carousel-btn {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--mrit-border);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mrit-ink);
	cursor: pointer;
	padding: 0;
}

.mrit-carousel-btn:hover {
	background: var(--mrit-primary);
	color: #fff;
	border-color: var(--mrit-primary);
}

.mrit-carousel-btn svg {
	width: 20px;
	height: 20px;
}

.mrit-carousel-prev {
	left: -8px;
}

.mrit-carousel-next {
	right: -8px;
}

@media (max-width: 700px) {
	.mrit-carousel-track ul.products li.product {
		flex-basis: 200px;
		width: 200px;
	}
	.mrit-carousel-btn {
		width: 34px;
		height: 34px;
	}
	.mrit-carousel-prev {
		left: 0;
	}
	.mrit-carousel-next {
		right: 0;
	}
}

/* Best Sellers cards, cleaner variant - Derrick asked to drop the category
   badge chip above the image and the "Read more"/add-to-cart button below
   it, just image + title + price for this specific carousel. Scoped to
   .mrit-carousel-track only, so the shop archive and any other product
   grid keep their badge/button as-is. */
.mrit-carousel-track .mrit-product-badge {
	display: none;
}

.mrit-carousel-track li.product > a.button {
	display: none;
}

/* ==========================================================================
   Promo banners - 2-col image blocks linking into a category.
   ========================================================================== */
.mrit-promo-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.mrit-promo-banner {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	background: var(--mrit-bg-soft);
	border: 1px solid var(--mrit-border);
	height: 220px;
}

.mrit-promo-banner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 16px;
	box-sizing: border-box;
}

.mrit-promo-banner-text {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
	padding: 32px 20px 16px;
}

.mrit-promo-banner-text h3 {
	color: #fff;
	margin: 0 0 4px;
	font-size: 1.15rem;
}

.mrit-promo-banner-link {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

@media (max-width: 600px) {
	.mrit-top-bar {
		font-size: 0.72rem;
		padding: 6px 12px;
	}
	.mrit-category-nav-inner {
		gap: 4px 24px;
	}
	.mrit-category-nav-item {
		font-size: 0.9rem;
	}
	.mrit-category-nav-icon svg {
		width: 22px;
		height: 22px;
	}
	.mrit-hero-carousel {
		/* 80% reads fine on desktop but wastes too much of a small phone
		 * screen with margin - close to full-width here instead. */
		width: auto;
		padding: 0 16px;
		margin: 12px auto 16px;
	}
	.mrit-hero-slide {
		padding: 36px 20px;
		background-position: center 65%;
		border-radius: 12px;
	}
	.mrit-hero-content {
		max-width: 100%;
	}
	.mrit-hero-slide h1 {
		font-size: 1.5rem;
	}
	.mrit-hero-slide p {
		font-size: 0.95rem;
	}
	.mrit-trust-strip {
		gap: 8px 18px;
		padding: 12px 16px;
	}
	.mrit-trust-strip-item {
		font-size: 0.78rem;
	}
	.mrit-section {
		padding: 40px 20px;
	}
	.mrit-promo-banner {
		height: 180px;
	}
}

/* ==========================================================================
   Product description content - the real long-form description written
   into each product's WooCommerce "Description" tab (single product page,
   below the price/add-to-cart area). Prefixed .mrit-pdp ("product detail
   page") so it can't collide with the homepage's .mrit-* classes above.

   Second attempt at this - the first (a heavier, colour-card-boxed design)
   didn't match what Derrick wanted either. He then gave a concrete
   reference screenshot: plain editorial article styling (near-black text
   on white, no card boxes), real photography broken up across the page
   (not icon abstractions), and comparison-style tables (capacity as
   columns) rather than a single narrow spec list - closer to how a real
   review site or an AI-generated shopping answer page reads, since the
   explicit goal is content structured for an AI answer engine to pull
   ("which microSD card to buy" style searches). This version follows
   that reference directly.
   ========================================================== */

/* Storefront's own default product-page tabs layout floats the tab list
 * ("Description" / "Additional information" / "Reviews") as a left-hand
 * sidebar on desktop, squeezing the actual panel content into a narrow
 * right-hand column - exactly the "bookmark pushing the description to
 * the right" Derrick flagged. Removing the tab nav entirely (the
 * description is the only tab with real content anyway) and letting the
 * one visible panel take the full width - .mrit-pdp's own max-width +
 * margin:auto below then centres the actual content within that. */
.woocommerce-tabs ul.tabs {
	display: none;
}

.woocommerce-tabs .panel {
	float: none !important;
	width: 100% !important;
}

/* WooCommerce's own generic "Description" <h2> sits directly in the panel,
 * outside .mrit-pdp - it isn't part of our centred/margined content, so it
 * renders flush at the panel's own left edge while the real content below
 * starts further in (Derrick circled this exact misalignment). Redundant
 * anyway - the description content already opens with the real product
 * name as its own heading - so just remove the generic label. */
.woocommerce-Tabs-panel--description > h2:first-child {
	display: none;
}

.mrit-pdp {
	max-width: 900px;
	margin: 40px auto 0;
	padding: 0 24px;
	line-height: 1.75;
	font-size: 1.08rem;
}

.mrit-pdp p {
	margin: 0 0 16px;
}

.mrit-pdp h2 {
	margin: 0 0 6px;
	font-size: 1.7rem;
}

.mrit-pdp-tagline {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--mrit-ink-soft);
	margin: 0 0 4px;
}

.mrit-pdp-lead {
	margin: 0 0 20px;
}

.mrit-pdp-capacities-line {
	font-weight: 600;
	margin: 0 0 20px;
}

.mrit-pdp-divider {
	border: none;
	border-top: 1px solid var(--mrit-border);
	margin: 40px 0;
}

.mrit-pdp-photo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 20px 0;
}

.mrit-pdp-photo-row img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 8px;
}

/* A single, larger lead image for sections that don't need a 3-across
 * grid - deliberately varied per product so pages don't all share the
 * same visual rhythm. */
.mrit-pdp-photo-single {
	margin: 20px 0;
}

.mrit-pdp-photo-single img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 8px;
}

.mrit-pdp ul {
	padding-left: 22px;
	margin: 0 0 16px;
}

.mrit-pdp ul li {
	margin-bottom: 6px;
}

.mrit-pdp-tip {
	border-left: 3px solid var(--mrit-primary);
	background: var(--mrit-bg-soft);
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 1rem;
}

.mrit-pdp-compare-wrap {
	overflow-x: auto;
	margin: 20px 0;
}

.mrit-pdp-compare {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
}

.mrit-pdp-compare th,
.mrit-pdp-compare td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--mrit-border);
	text-align: left;
	font-size: 1rem;
}

.mrit-pdp-compare th {
	font-weight: 700;
	background: var(--mrit-bg-soft);
}

.mrit-pdp-compare td:first-child,
.mrit-pdp-compare th:first-child {
	font-weight: 600;
}

.mrit-pdp-quicklist {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.mrit-pdp-quicklist li {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mrit-border);
}

.mrit-pdp-quicklist li:last-child {
	border-bottom: 0;
}

.mrit-pdp-quicklist-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--mrit-primary);
}

.mrit-pdp-quicklist strong {
	display: block;
}

.mrit-pdp-details dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 20px;
	font-size: 1rem;
	margin: 0;
}

.mrit-pdp-details dt {
	font-weight: 600;
	color: var(--mrit-ink);
}

.mrit-pdp-details dd {
	margin: 0;
	color: var(--mrit-ink-soft);
}

@media (max-width: 700px) {
	.mrit-pdp-photo-row {
		grid-template-columns: 1fr 1fr;
	}
	.mrit-pdp-photo-row img {
		height: 140px;
	}
	.mrit-pdp-photo-single img {
		height: 220px;
	}
	.mrit-pdp-details dl {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}
	.mrit-pdp-details dt {
		margin-top: 8px;
	}
}

/* ==========================================================================
   Shop/category archive page header (e.g. /product-category/memory/) -
   Derrick circled two large gaps: breadcrumb-to-title, and description-to-
   product-grid. Storefront's own defaults: `.storefront-breadcrumb` carries
   a ~59px margin-bottom (on top of its own ~23px padding-bottom), and
   `.woocommerce-products-header` carries a ~96px padding-bottom - both
   confirmed via direct computed-style measurement, not guessed. Cut down
   to a real gap that still keeps things visually separated, not touching.
   ========================================================================== */
.storefront-breadcrumb {
	margin-bottom: 16px !important;
}

.woocommerce-products-header {
	padding-bottom: 24px !important;
}

/* Font sizes bumped up - Derrick compared against Porto's Shop 51 demo and
 * found the category title/description and product-card titles too small
 * relative to it. */
.woocommerce-products-header__title.page-title {
	font-size: 2.6rem !important;
}

.term-description {
	font-size: 1.05rem !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem !important;
}

/* Storefront's own default heading weight is a light 300 site-wide (hero
 * headline, section titles, category tiles, product titles, Cart/page
 * titles, WooCommerce's own Reviews/Related products headings, this child
 * theme's .mrit-pdp description titles - confirmed via direct computed-
 * style checks that ALL of these were sitting at weight 300) - Derrick
 * flagged the page as "looking quite plain" and asked for more bolding
 * across the board, not just one heading. One broad rule instead of
 * chasing every individual selector. */
h1, h2, h3 {
	font-weight: 700 !important;
}

/* ==========================================================================
   Cart page (block-based - WooCommerce's Cart/Checkout blocks, not the
   classic shortcode template) - a few real elements aren't semantic
   headings so the h1/h2/h3 rule above doesn't reach them, plus two real
   fixes Derrick asked for directly.
   ========================================================================== */

/* "Product" / "Details" / "Total" column headers, the "Add coupons" toggle,
   and the "Estimated total" label - none are h1/h2/h3, so need their own
   bold rule. */
.wc-block-cart-items__header th,
.wc-block-components-panel__button,
.wc-block-components-totals-item__label {
	font-weight: 700 !important;
}

/* Tighten the default browser/theme margin under the "Cart" page title -
   consistent with the same "don't let default spacing balloon" fix already
   applied to the shop/category archive header. */
.page .entry-title {
	margin-bottom: 12px !important;
}

/* Cart page only ever shows a summary of whichever single shipping rate is
   currently selected (WooCommerce Blocks design - the real Ship/Local
   Pickup switcher only renders at Checkout) - Derrick asked for a plain
   note here so shoppers know the other option exists before they get to
   Checkout. Plain paragraph inserted directly into the Cart page's own
   content (a sibling of the WooCommerce Cart block, not nested inside it),
   so it can't interfere with the block's own reactive markup. */
.mrit-cart-shipping-note {
	background: var(--mrit-bg-soft);
	border: 1px solid var(--mrit-border);
	border-radius: 6px;
	padding: 10px 16px;
	margin: 0 0 20px !important;
	font-size: 15px;
	color: var(--mrit-ink-soft);
}

/* The standard WordPress "Edit Cart" link (core's edit_post_link(), present
   on every page for a logged-in admin who can edit it) - real customers
   never see this at all, but it's noise while reviewing the site as admin. */
.edit-link {
	display: none !important;
}

/* WooCommerce's Cart block hardcodes 14px (and smaller - 12.25px/10.7px on a
   couple of fine-print elements) on its own typography (product name/price,
   quantity input, column headers, the Subtotal/Shipping/coupon rows, the
   "Cart totals" heading, the item's short description, the shipping method
   sub-label) regardless of the site's own font-size - confirmed via a full
   computed-style walk of every leaf element under the cart block showing
   these sitting well under the 18px used everywhere else on the page (the
   html{font-size:112.5%} bump above only scales rem/em sizing, and WC Blocks
   sets most of these as fixed px on its own component-root classes,
   independent from each other rather than one shared ancestor). Derrick
   asked for the cart text bigger - covering every one of those roots found
   during that walk, not just the couple caught in an earlier pass. */
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-quantity-selector__input,
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-components-product-metadata__description,
.woocommerce-cart .wc-block-components-product-metadata__description p,
.woocommerce-cart .wc-block-cart-items__header th,
.woocommerce-cart .wc-block-components-totals-shipping__via {
	font-size: 16px !important;
}

.woocommerce-cart .wc-block-cart__totals-title {
	font-size: 20px !important;
}

/* Storefront's own article/.hentry (the Cart page's own content wrapper)
   carries a ~76px default margin-bottom, and .entry-header carries ~108px
   of padding-bottom below the "Cart" title - both rem-based Storefront
   defaults, confirmed via computed-style inspection. An earlier attempt at
   the bottom gap targeted #primary/.site-main directly and looked like it
   did nothing - turned out that fix just got dropped in a later edit, not
   that it was wrong: margins on a parent with no border/padding collapse
   with its last child's own margin, taking whichever is LARGER, not the
   sum - so article/#primary/.site-main all need the *same* small value, or
   whichever one is still left at its bigger default wins the collapse and
   the fix looks like it "didn't work." Fixing every element in that
   collapsing chain to the same value this time, for both the gap above the
   cart table (title-to-content) and below it (cart-to-footer) - real on a
   short cart since there's no other content to fill that dead space. */
body.woocommerce-cart .entry-header {
	padding-bottom: 24px !important;
}

body.woocommerce-cart article.hentry,
body.woocommerce-cart #primary,
body.woocommerce-cart main.site-main {
	margin-bottom: 16px !important;
}

/* ==========================================================================
   Site-wide font size + a couple more elements Derrick pointed at directly:
   the "Home / Memory / ..." breadcrumb trail and the numbered pagination
   links on shop/category archives - both were sitting at the browser
   default 14px/400 weight, same light/small pattern already fixed
   elsewhere on the site.
   ========================================================================== */

/* Scales every rem/em-based size across the theme proportionally (including
   the earlier rem-based fixes above) - a broad "slightly bigger, everywhere"
   bump rather than resizing each element individually. */
html {
	font-size: 112.5%;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	font-weight: 700 !important;
	font-size: 0.95rem !important;
}

.woocommerce-pagination .page-numbers,
nav.woocommerce-pagination {
	font-weight: 700 !important;
	font-size: 1rem !important;
}

/* ==========================================================================
   Blog articles - the first one is "SanDisk Ultra vs Extreme vs Extreme
   PRO" (Derrick supplied editorial copy, ChatGPT-drafted, checked for
   technical accuracy before publishing). Deliberately its own self-
   contained editorial design (warm paper background, Georgia serif
   headings, olive/rust palette), separate from the site's blue/orange
   brand system used everywhere else - a blog read is a different context
   than a shop page. Everything below is scoped under .mrit-blog-article
   (applied directly on the post's own <article> tag) so it can't leak
   into product pages or the rest of the site, and every rule wins over
   the global "h1, h2, h3 { font-weight: 700 !important; }" rule above via
   its own !important on the h1 (this design wants a lighter serif
   headline, not the site-wide bold sans one).
   ========================================================================== */

/* This design supplies its own full header (eyebrow, big serif H1,
   standfirst, reading time) inside .entry-content, so Storefront's default
   .entry-header (plain sans title + "Posted on ... by ... - Leave a
   comment" meta line) above it just duplicates the title - confirmed by
   previewing the first post live, title rendered twice. Hides it only for
   posts using this article format (:has() looking at a later sibling),
   so ordinary future posts without .mrit-blog-article keep the normal
   theme header. */
.entry-header:has(~ .entry-content .mrit-blog-article) {
	display: none;
}

/* Storefront's own storefront_post_thumbnail() prints the post's featured
   image directly into .entry-content, right before this article - since
   every .mrit-blog-article already opens with that exact same image in
   its own <figure>, it was rendering twice. Hides only the theme-injected
   copy (matched by having this article as a later sibling), so a future
   ordinary post without .mrit-blog-article still gets its normal
   thumbnail. */
.entry-content > img.wp-post-image:has(~ .mrit-blog-article) {
	display: none;
}

.mrit-blog-article {
	--blog-ink: #202d2b;
	--blog-muted: #5b6662;
	--blog-accent: #a6452b;
	--blog-paper: #faf8f3;
	background: var(--blog-paper);
	color: var(--blog-ink);
	font: 18px/1.75 system-ui, -apple-system, "Segoe UI", sans-serif;
	max-width: 1080px;
	margin: 0 auto;
	padding: 64px 36px 72px;
	border-radius: 12px;
}
.mrit-blog-article *,
.mrit-blog-article *::before,
.mrit-blog-article *::after {
	box-sizing: border-box;
}
.mrit-blog-article header {
	max-width: 820px;
}
.mrit-blog-article h1,
.mrit-blog-article h2,
.mrit-blog-article h3 {
	line-height: 1.2;
	letter-spacing: -.025em;
}
.mrit-blog-article h1 {
	font-family: Georgia, serif;
	font-size: clamp(36px, 5vw, 58px);
	font-weight: 500 !important;
	margin: 14px 0 22px;
}
.mrit-blog-article h2 {
	font-size: 29px;
	font-weight: 700 !important;
	margin: 40px 0 18px;
}
.mrit-blog-article h3 {
	font-size: 21px;
	font-weight: 700 !important;
	margin: 27px 0 12px;
}
.mrit-blog-article p {
	margin: 0 0 20px;
}
.mrit-blog-article .eyebrow {
	font-size: 12px;
	letter-spacing: .16em;
	font-weight: 750;
	color: var(--blog-accent);
}
.mrit-blog-article .standfirst {
	font-size: 22px;
	line-height: 1.5;
	color: var(--blog-muted);
}
.mrit-blog-article .reading,
.mrit-blog-article .meta,
.mrit-blog-article figcaption {
	font-size: 13px;
	color: var(--blog-muted);
}
/* Second article (DJI Osmo Pocket) uses ".meta" where the first used
   ".reading", and adds a disclaimer <footer> the first article didn't
   have - both extend the same shared design rather than forking it. */
.mrit-blog-article footer {
	font-size: 13px;
	color: var(--blog-muted);
	border-top: 1px solid #d9d7cf;
	padding-top: 20px;
	margin-top: 20px;
}
/* Capacity-suggestion grid (DJI article) - same 3-across card pattern as
   .checklist above, kept as its own selector since it's a visually
   distinct component (a number + heading + line, not a numbered step). */
.mrit-blog-article .capacity-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 25px 0;
}
.mrit-blog-article .capacity-grid > div {
	padding: 22px;
	background: #e8ede7;
	border-radius: 10px;
}
.mrit-blog-article .capacity-grid span {
	font: 30px Georgia, serif;
	color: #507364;
}
.mrit-blog-article .capacity-grid h3 {
	font-size: 19px;
	margin: 12px 0;
}
.mrit-blog-article .capacity-grid p {
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}
.mrit-blog-article figure {
	margin: 30px 0;
}
.mrit-blog-article figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.mrit-blog-article figcaption {
	margin-top: 10px;
	line-height: 1.5;
}
.mrit-blog-article a {
	color: #8b3824;
	text-underline-offset: 3px;
}
.mrit-blog-article a:hover {
	color: #542113;
}
.mrit-blog-article aside {
	padding: 26px 30px;
	border-radius: 12px;
	margin: 32px 0;
}
.mrit-blog-article aside h2 {
	margin-top: 0;
}
.mrit-blog-article .answer {
	background: #eeeade;
	border-left: 4px solid var(--blog-accent);
}
.mrit-blog-article li {
	margin: 10px 0;
}
.mrit-blog-article nav {
	display: flex;
	gap: 10px 20px;
	flex-wrap: wrap;
	border-block: 1px solid #d9d7cf;
	padding: 20px 0;
	font-size: 14px;
}
.mrit-blog-article nav strong {
	flex-basis: 100%;
}
.mrit-blog-article .table-wrap {
	overflow-x: auto;
}
.mrit-blog-article table {
	border-collapse: collapse;
	width: 100%;
	font-size: 16px;
	line-height: 1.55;
}
.mrit-blog-article caption {
	text-align: left;
	font-size: 13px;
	color: var(--blog-muted);
	padding-bottom: 12px;
}
.mrit-blog-article th,
.mrit-blog-article td {
	text-align: left;
	vertical-align: top;
	padding: 18px;
	border-bottom: 1px solid #d9d7cf;
}
.mrit-blog-article thead {
	background: #253c35;
	color: white;
}
.mrit-blog-article tbody th {
	white-space: nowrap;
}
.mrit-blog-article .checklist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 25px 0;
}
.mrit-blog-article .checklist > div {
	background: #e8ede7;
	border-radius: 10px;
	padding: 23px;
}
.mrit-blog-article .checklist h3 {
	margin: 10px 0;
}
.mrit-blog-article .checklist p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}
.mrit-blog-article .step {
	font-size: 34px;
	font-family: Georgia, serif;
	color: #507364;
}
.mrit-blog-article .cta {
	background: #253c35;
	color: white;
}
/* Storefront's own theme CSS sets an explicit dark heading color
   (rgb(51,51,51)) on h2 - an explicit rule always beats plain inheritance,
   so the .cta block's "color: white" above never reached its own heading,
   leaving it near-invisible against the dark green background. Needs its
   own explicit override, not just inheritance, to actually win. */
.mrit-blog-article .cta h2 {
	color: #fff;
}
.mrit-blog-article .cta .eyebrow {
	color: #eeb597;
}
.mrit-blog-article .cta p:last-child {
	margin-bottom: 0;
}
@media (max-width: 600px) {
	.mrit-blog-article {
		padding: 30px 20px;
		font-size: 17px;
	}
	.mrit-blog-article .checklist,
	.mrit-blog-article .capacity-grid {
		grid-template-columns: 1fr;
	}
	.mrit-blog-article .checklist > div,
	.mrit-blog-article .capacity-grid > div {
		padding: 18px;
	}
	.mrit-blog-article h2 {
		font-size: 25px;
	}
	.mrit-blog-article aside {
		padding: 22px;
	}
	.mrit-blog-article th,
	.mrit-blog-article td {
		padding: 12px;
		min-width: 125px;
	}
}
@media print {
	.mrit-blog-article {
		background: white;
		font-size: 11pt;
		padding: 0;
		max-width: none;
	}
	.mrit-blog-article nav {
		display: none;
	}
	.mrit-blog-article h2,
	.mrit-blog-article h3 {
		break-after: avoid;
	}
	.mrit-blog-article figure,
	.mrit-blog-article .checklist,
	.mrit-blog-article tr {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Real 4-column footer - Storefront's default footer only ever showed a
   bare copyright line (no widgets were ever assigned to its footer
   sidebars). Modeled on the Porto "Shop 51" reference Derrick pointed at;
   content itself comes from mrit_footer_columns() (functions.php).
   ========================================================================== */
.site-footer {
	background: var(--mrit-primary-dark);
	color: rgba(255, 255, 255, 0.85);
	padding-top: 40px;
}

.mrit-footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom: 24px;
	text-align: left;
}

.mrit-footer-col h3 {
	color: #fff;
	font-size: 1.05rem;
	margin: 0 0 16px;
}

.mrit-footer-logo {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 12px;
}

.mrit-footer-logo span {
	font-weight: 400;
	opacity: 0.85;
}

.mrit-footer-col p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
}

.mrit-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mrit-footer-col ul a,
.mrit-footer-contact a {
	/* Storefront's own theme CSS sets an explicit dark link color
	   (confirmed the same rgb(51,51,51) pattern hit twice already
	   elsewhere on this site) that otherwise wins over the plain rule
	   below - needs !important to actually show white against the dark
	   blue footer. */
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
	font-size: 0.92rem;
}

.mrit-footer-col ul a:hover,
.mrit-footer-contact a:hover {
	color: #fff !important;
	text-decoration: underline;
}

.mrit-footer-social {
	display: flex;
	gap: 12px;
}

.mrit-footer-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--mrit-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.mrit-footer-social a:hover {
	background: var(--mrit-accent);
	color: #fff;
}

.mrit-footer-social svg {
	width: 18px;
	height: 18px;
}

/* Derrick asked for this strip to stay white (as it was before the
   footer redesign turned the whole .site-footer dark blue), rather than
   carrying the columns' dark background down into the copyright line. */
.site-footer .site-info {
	background: #fff;
	color: var(--mrit-ink-soft) !important;
	padding: 12px 0 !important;
	margin: 0 !important;
	text-align: center;
	font-size: 0.82rem;
	float: none !important;
}

.site-footer .site-info a {
	color: var(--mrit-ink-soft);
}

@media (max-width: 820px) {
	.mrit-footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}
}

@media (max-width: 480px) {
	.mrit-footer-columns {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.mrit-footer-social {
		justify-content: center;
	}
}

/* ==========================================================================
   Blog index ("Blog" page / home.php) - real card grid instead of dumping
   every post's full content one after another, modeled on the Porto
   "Shop 51" reference's own blog page (thumbnail + date badge, category,
   title, excerpt, "Continue Reading"). Styled with the site's own brand
   tokens (blue/orange), not the individual articles' warm-paper palette -
   this page is part of the main site shell, the articles themselves stay
   self-contained under .mrit-blog-article.
   ========================================================================== */
.mrit-blog-index h1 {
	text-align: center;
	margin-bottom: 32px;
}

.mrit-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.mrit-blog-card {
	background: #fff;
	border: 1px solid var(--mrit-border);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mrit-blog-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.mrit-blog-card-thumb {
	position: relative;
	display: block;
	background: var(--mrit-bg-soft);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mrit-blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrit-blog-card-date {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #fff;
	border-radius: 6px;
	padding: 6px 12px;
	text-align: center;
	line-height: 1.2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mrit-blog-card-day {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--mrit-ink);
}

.mrit-blog-card-month {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--mrit-ink-soft);
}

.mrit-blog-card-body {
	padding: 20px 24px 24px;
}

.mrit-blog-card-cat {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mrit-primary);
	margin-bottom: 8px;
}

.mrit-blog-card-cat a {
	color: inherit;
	text-decoration: none;
}

.mrit-blog-card-title {
	margin: 0 0 10px;
	font-size: 1.2rem;
}

.mrit-blog-card-title a {
	color: var(--mrit-ink);
	text-decoration: none;
}

.mrit-blog-card-title a:hover {
	color: var(--mrit-primary);
}

.mrit-blog-card-excerpt {
	color: var(--mrit-ink-soft);
	font-size: 0.95rem;
	margin: 0 0 14px;
}

.mrit-blog-card-more {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--mrit-primary);
	text-decoration: none;
}

.mrit-blog-card-more:hover {
	color: var(--mrit-primary-dark);
	text-decoration: underline;
}

.mrit-blog-index .pagination,
.mrit-blog-index .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

@media (max-width: 700px) {
	.mrit-blog-grid {
		grid-template-columns: 1fr;
	}
}