/*
Theme Name:   Techmarket Child
Theme URI:    https://matzotech.co.za/
Template:     techmarket
Version:      1.1.6
Author:       MatzoTech
Author URI:   https://matzotech.co.za/
Description:  Child theme of Techmarket for MatzoTech. Houses theme-specific
              overrides only. All site-wide business logic (PayFast fee, VAT
              field, SmartIT subscription conversion, backorder text) lives
              in wp-content/mu-plugins/matzotech-business-rules.php so it
              survives theme switches.
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  techmarket-child
*/

/* -----------------------------------------------------------
 * Slider Revolution — Home v1 hero slider text legibility
 * -----------------------------------------------------------
 * Our MatzoTech hero photos (laptops / hardware / refurbished)
 * are dark, moody compositions. RevSlider's `static_styles`
 * field doesn't pipe `text-shadow` to the inline caption style,
 * so we apply a soft drop-shadow here. Colour values are still
 * driven from the slide JSON (`static_styles.color`).
 * Scope is restricted to slider 1 to avoid bleeding onto any
 * future light-background slider. */
.home-v1-slider .tp-caption[data-type="text"] {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.home-v1-slider .tp-caption[data-type="button"] {
	/* Solid premium CTA — see "hero CTA button" block below for box styles. */
	text-shadow: none;
}

/* -----------------------------------------------------------
 * Slider Revolution — Home v1 hero CTA button (solid premium)
 * -----------------------------------------------------------
 * RevSlider's static_styles only carries text-level keys
 * (color / font-size / font-weight / letter-spacing /
 * line-height) for buttons. Box styles — background, border,
 * radius, padding, shadow — must come from CSS. We scope this
 * to slider 1 so we don't leak across future sliders.
 *
 * Brand primary: #0063d1 (rgb 0,99,209) — read from
 * techmarket_options.custom_primary_color.
 *
 * !important is used because RevSlider applies inline
 * background/border via its caption renderer and would
 * otherwise win the cascade. */
.home-v1-slider .tp-caption[data-type="button"],
.home-v1-slider .tp-caption[data-type="button"]:link,
.home-v1-slider .tp-caption[data-type="button"]:visited,
.home-v1-slider .tp-caption.rev-btn,
.home-v1-slider .tp-caption.rev-btn:link,
.home-v1-slider .tp-caption.rev-btn:visited {
	background-color: #0063d1 !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 14px 28px !important;
	min-height: 0 !important;
	height: auto !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	box-shadow: 0 4px 14px rgba(0, 99, 209, 0.35) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.home-v1-slider .tp-caption[data-type="button"]:hover,
.home-v1-slider .tp-caption[data-type="button"]:focus,
.home-v1-slider .tp-caption.rev-btn:hover,
.home-v1-slider .tp-caption.rev-btn:focus {
	background-color: #1a78d6 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(0, 99, 209, 0.5) !important;
	transform: translateY(-1px) !important;
}
.home-v1-slider .tp-caption[data-type="button"] i,
.home-v1-slider .tp-caption.rev-btn i {
	margin-left: 8px !important;
	color: inherit !important;
}

/* -----------------------------------------------------------
 * Homepage product cards — equal height + smooth motion
 * -----------------------------------------------------------
 * Techmarket emits this card markup (verified via curl):
 *   <div class="product type-product …">
 *     <div class="product-inner">
 *       <a class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
 *         <span class="onsale">-R…</span>            (sale only)
 *         <img class="attachment-woocommerce_thumbnail" w=430 h=390>
 *         <span class="price"><ins>…</ins><del>…</del></span>  (price first!)
 *         <h2 class="woocommerce-loop-product__title">…</h2>
 *       </a>
 *       <div class="hover-area"><a class="button add_to_cart_button">…</a></div>
 *     </div>
 *   </div>
 *
 * Carousels are slick (data-ride="tm-slick-carousel"). After init the
 * .products wrapper gains .slick-slider; cards live under
 *   .slick-list > .slick-track > .slick-slide > div > .product
 *
 * Without a flex track + reserved title/price space, on-sale cards are
 * taller than non-sale cards (sale badge above image + 2nd price line +
 * varying title wrap). This block:
 *   1. Stretches slick slides so columns share the tallest card's height.
 *   2. Pulls the .onsale badge out of flow (absolute) so the top edge
 *      lines up regardless of sale state.
 *   3. Clamps the title to 2 lines and reserves both price lines so
 *      title + price areas have a consistent rhythm.
 *   4. Pins the CTA (Add to basket) to the bottom via margin-top: auto.
 *   5. Adds a subtle lift + image zoom on hover for "smooth".
 *
 * Scope: every selector is prefixed with `.home` so this NEVER reaches
 * single-product, category-archive, cart, checkout, account, mini-cart,
 * or admin views. Specialty cards (`.landscape-product-card`,
 * `.tab-product-featured`, `.sale-product-with-timer`) are intentionally
 * excluded — they're spotlight layouts with their own rhythm.
 *
 * The aspect-ratio is set from the WC thumbnail size Techmarket uses
 * (430×390 → ~1.10:1) so containers match the natural image shape and
 * don't crop. */

/* 1) Slick infrastructure: stretch siblings to the tallest card.
 *
 * This rule is intentionally scoped AWAY from multi-row carousels
 * (slick `rows > 1`). For rows>1, slick wraps each row in its own
 * <div> directly under .slick-slide and relies on those wrappers
 * being block-level so the rows stack vertically. Forcing
 * .slick-slide { display: flex } here would re-flow those row
 * wrappers horizontally, which is exactly the regression that
 * collapsed pcbg cards to 25% of slide width (215px instead of
 * ~430px) and dwtc cards to 12.5% of slide width (95px instead
 * of ~190px). The opt-out below restores slick's native rows
 * layout for those two sections; every other homepage carousel
 * still gets the equal-height treatment. */
.home .products-carousel .slick-track,
.home .products .slick-track {
	display: flex !important;
	align-items: stretch !important;
}
.home .products-carousel .slick-slide,
.home .products .slick-slide {
	height: auto !important;
	display: flex !important;
}
.home .products-carousel .slick-slide > div,
.home .products .slick-slide > div {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
/* Multi-row carousel opt-out (rows > 1): every Home v1 section whose
 * slick `carousel_args` set `rows > 1`. Revert the slick-slide + inner
 * div back to slick's native block layout so slick can stack its
 * internal row wrappers vertically and lay cards out horizontally
 * inside each row. Without this, the equal-height `display: flex`
 * rule above re-flows slick's row wrappers horizontally and collapses
 * cards to ~1/(slidesPerRow*rows) of slide width.
 *
 * Covered sections (audited via
 *   docker compose exec -T wordpress php -r "..."
 * against post 57 `_home_v1_options`, cross-checked with the PHP
 * defaults in wp-content/themes/techmarket/inc/template-tags/home-v1.php):
 *
 *   pcbg  "Best Sellers" / Power Audio & Visual              rows=2 sPR=2
 *         → .section-landscape-full-product-cards-carousel
 *         (template: home/product-cards-carousel-with-bg.php)
 *
 *   dwtc.ptc  Deals tabs right-hand panel                    rows=2 sPR=5
 *         → .section-deals-carousel-and-products-carousel-tabs
 *             .section-products-carousel-tabs
 *         (templates: home/deals-carousel-and-products-carousel-tabs.php
 *          → products-carousel-tabs.php)
 *
 *   pcwfp  "Featured Products" tabs + featured spotlight     rows=2 sPR=6
 *         → .section-product-carousel-with-featured-product
 *         (template: home/products-carousel-tabs-with-featured-product.php
 *          line 14 -- shares .section-products-carousel-tabs with dwtc.ptc
 *          so we anchor to the unique pcwfp class to avoid double-matching) */
.home .section-landscape-full-product-cards-carousel .products-carousel .slick-slide,
.home .section-landscape-full-product-cards-carousel .products .slick-slide,
.home .section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .products-carousel .slick-slide,
.home .section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .products .slick-slide,
.home .section-product-carousel-with-featured-product .products-carousel .slick-slide,
.home .section-product-carousel-with-featured-product .products .slick-slide {
	display: block !important;
}
.home .section-landscape-full-product-cards-carousel .products-carousel .slick-slide > div,
.home .section-landscape-full-product-cards-carousel .products .slick-slide > div,
.home .section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .products-carousel .slick-slide > div,
.home .section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .products .slick-slide > div,
.home .section-product-carousel-with-featured-product .products-carousel .slick-slide > div,
.home .section-product-carousel-with-featured-product .products .slick-slide > div {
	display: block;
	flex-direction: row;
	flex: 0 1 auto;
	width: auto;
}

/* 2) Card column = full height, content stretches */
.home .product-inner {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 6px;
	overflow: hidden;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}
.home .product:hover .product-inner {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	border-color: #dde2ea;
}
/* Specialty layouts opt out — they have their own intentional rhythm.
 * We previously hard-set display:block/height:auto/border:0 here which
 * broke the parent theme's 196px contract on landscape cards and the
 * compact-card layout on the dwtc tabs. The narrower opt-out below
 * uses `revert` so the parent theme's intended .product-inner values
 * come back. Section-specific reskinning is then applied via the
 * scoped .section-deals-carousel-and-products-carousel-tabs and
 * .section-products-cards-carousel-with-bg blocks further down. */
.home .product.landscape-product-card .product-inner,
.home .product.tab-product-featured .product-inner,
.home .product.sale-product-with-timer .product-inner {
	display: revert;
	height: revert;
	border: revert;
	border-radius: revert;
	transition: revert;
	transform: none;
	box-shadow: revert;
}
.home .product.landscape-product-card:hover .product-inner,
.home .product.tab-product-featured:hover .product-inner,
.home .product.sale-product-with-timer:hover .product-inner {
	transform: none;
	box-shadow: revert;
}

/* 3) Anchor inside the card hosts the badge + image + price + title */
.home .product-inner > .woocommerce-loop-product__link,
.home .product-inner > a.woocommerce-LoopProduct-link {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 14px 12px;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

/* 4) Sale badge — absolute so it doesn't shove the image down */
.home .product-inner > a > .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	z-index: 2;
}

/* 5) Image — fixed aspect ratio (matches WC thumbnail 430×390) so all
 *    cards reserve the same vertical space. Centred + contained so
 *    portrait product shots aren't cropped. */
.home .product-inner > a > img.attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 430 / 390;
	object-fit: contain;
	background: #fff;
	transition: transform 0.25s ease;
	order: 1;
}
.home .product:hover .product-inner > a > img.attachment-woocommerce_thumbnail {
	transform: scale(1.04);
}

/* 6) Title clamped to 2 lines so cards with very long names don't push
 *    sale-priced cards taller than non-sale cards. */
.home .product-inner .woocommerce-loop-product__title {
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
	order: 3;
}

/* 7) Price — reserves space for the strikethrough line so non-sale
 *    cards (single price) match the height of sale cards (ins + del). */
.home .product-inner .price {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	min-height: 1.6em;
	order: 2;
}
.home .product-inner .price ins {
	text-decoration: none;
	font-weight: 700;
}
.home .product-inner .price del {
	opacity: 0.6;
	font-size: 13px;
}

/* 8) CTA pinned to the bottom so all card feet line up */
.home .product-inner .hover-area {
	margin-top: auto;
	padding: 10px 14px 14px;
}
.home .product-inner .hover-area .button {
	display: block;
	width: 100%;
	text-align: center;
}

/* -----------------------------------------------------------
 * Footer — Recent Posts widget polish
 * -----------------------------------------------------------
 * Techmarket's `techmarket_default_footer_widgets()` calls
 * `the_widget('WP_Widget_Recent_Posts', …)` with `before_widget`
 * hardcoded as `<aside class="widget clearfix"><div class="body">`.
 * That overrides the canonical `widget_recent_entries` class WP core
 * would otherwise apply, so selectors targeting that class are dead
 * for this footer instance — verified via curl. Selectors below
 * therefore use the actual rendered classes:
 *   .site-footer .footer-widgets .widget          (wrapper)
 *   .site-footer .footer-widgets .widget-title    (h4 title)
 *   .site-footer .footer-widgets .widget div > ul li
 *   .site-footer .footer-widgets .widget > ul li  (mirrors parent)
 *
 * The parent theme sets `line-height: 2.267em` on those items, which
 * is what the user described as "over-loose typography". Tighten it,
 * add a subtle 1px separator between items, and tighten the title
 * letter-spacing while keeping uppercase.
 *
 * Scope is `.site-footer` so this only applies to the footer,
 * leaving sidebar widgets (`#secondary .widget`) untouched. */
.site-footer .footer-widgets .widget div > ul li,
.site-footer .footer-widgets .widget > ul li {
	line-height: 1.45;
	font-size: 14px;
	margin: 0 0 12px 0;
	padding: 0 0 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer .footer-widgets .widget div > ul li:last-child,
.site-footer .footer-widgets .widget > ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.site-footer .footer-widgets .widget div > ul li a,
.site-footer .footer-widgets .widget > ul li a {
	display: block;
	transition: opacity 0.18s ease, color 0.18s ease;
}
.site-footer .footer-widgets .widget div > ul li a:hover,
.site-footer .footer-widgets .widget > ul li a:hover {
	opacity: 0.85;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer .footer-widgets .widget .widget-title,
.site-footer .footer-widgets .widget .widgettitle {
	letter-spacing: 0.5px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 18px;
}

/* -----------------------------------------------------------
 * Home v1 dwtc tabs — match Techmarket demo compact cards
 * -----------------------------------------------------------
 * Scope: `.section-deals-carousel-and-products-carousel-tabs
 * .section-products-carousel-tabs` (the right-hand tabbed panel
 * inside the dwtc row only). Recreates the demo's compact card
 * design: ~110px image, green save-pill top-right, sale price
 * (blue, bold) + strikethrough regular price inline, 2-line
 * title clamp. Hover area + add-to-cart hidden to match demo.
 * Combined with the dwtc.ptc.carousel_args postmeta override
 * (5/4/3/2 responsive ladder) this gives 5 cols x 2 rows at
 * desktop and steps down sanely on tablet/phone.
 *
 * Does not bleed: every selector starts with the dwtc row
 * class, so the latest-arrivals / featured / brands / pcbg /
 * pct / pcwfp / vpc / pcwsb carousels keep their existing
 * styling. */
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product {
	padding: 14px 12px;
	border: 1px solid #ededed;
	border-right: 0;
	border-bottom: 0;
	background: #fff;
	text-align: center;
	position: relative;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .product-thumbnail {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .product-thumbnail img,
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product img.attachment-woocommerce_thumbnail {
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	background: #62a728;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 3px;
	min-width: 0;
	min-height: 0;
	line-height: 1.4;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .price {
	font-size: 14px;
	font-weight: 700;
	color: #0063d1;
	margin: 0 0 4px 0;
	min-height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	align-items: baseline;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .price del {
	font-weight: 400;
	font-size: 12px;
	color: #999;
	opacity: 1;
	text-decoration: line-through;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .price ins {
	text-decoration: none;
	background: transparent;
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .woocommerce-loop-product__title {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: #555;
	margin: 0;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
	min-height: calc(1.35em * 2);
}
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .star-rating,
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .hover-area,
.section-deals-carousel-and-products-carousel-tabs .section-products-carousel-tabs .product .add_to_cart_button {
	display: none;
}

/* -----------------------------------------------------------
 * Home v1 pcbg "Best Sellers" — restore 196px landscape cards
 * -----------------------------------------------------------
 * Scope: `.section-landscape-full-product-cards-carousel` only.
 * That is the actual rendered class for the `pcbg` section --
 * emitted by wp-content/themes/techmarket/templates/home/
 * product-cards-carousel-with-bg.php (line 10). It is unique
 * to pcbg and does NOT bleed to lpc1 / lpc2 / pct / pcwfp /
 * vpc / pcwsb / any other carousel.
 *
 * The earlier equal-card opt-out broke the parent theme's
 * 196px contract on these landscape cards (it set height:auto
 * on .landscape-product-card .product-inner), so the 2x2 slick
 * grid rendered with mismatched row heights and a stray offset
 * on the bottom-right card. The opt-out has now been narrowed
 * (uses `revert`), but we still pin height: 196px here to
 * guarantee the demo's aligned 2x2 layout regardless of any
 * future parent-theme changes. Image stays left, content right
 * (flex media object). */
.section-landscape-full-product-cards-carousel .landscape-full-product-cards-carousel .slick-track,
.section-landscape-full-product-cards-carousel .landscape-full-product-cards-carousel .slick-list {
	align-items: stretch;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card {
	height: 196px;
	margin-bottom: 12px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card:hover {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	transform: translateY(-2px);
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card .media {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 12px;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card .media img {
	max-width: 100px;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
}
/* min-width: 0 is critical: a flex item with text content will
 * otherwise refuse to shrink below its content's intrinsic width,
 * which is what was letting long SmartIT product titles overflow
 * the card and get hard-clipped at the .product overflow:hidden
 * boundary without ellipsis. */
.section-landscape-full-product-cards-carousel .product.landscape-product-card .media-body {
	padding-left: 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card .price {
	margin: 0;
	font-weight: 700;
	color: #0063d1;
}
/* The 2-line ellipsis is produced by display: -webkit-box +
 * -webkit-line-clamp: 2 + overflow: hidden (no text-overflow needed,
 * the box clamp handles it). word-break + overflow-wrap let SmartIT
 * titles with long unbroken sequences (model numbers, SKUs) break
 * cleanly at any character if they don't fit. !important defeats any
 * parent-theme/plugin rule that might restore display: block here. */
.section-landscape-full-product-cards-carousel .product.landscape-product-card .woocommerce-loop-product__title {
	font-size: 13.5px;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card .hover-area {
	margin-top: 6px;
}
.section-landscape-full-product-cards-carousel .product.landscape-product-card .hover-area .button {
	display: inline-block;
	padding: 6px 16px;
	font-size: 13px;
}

/* -----------------------------------------------------------
 * Primary nav (top utility nav) — render all six items inline
 * -----------------------------------------------------------
 * The menu has six items and "Laptop and Computer Repair
 * Centre" is wide enough that the parent theme's flex-menu JS
 * (wp-content/themes/techmarket/assets/js/scripts.js, function
 * navigationResize, triggered on every nav whose root carries
 * data-nav="flex-menu") detects horizontal overflow and DOM-
 * moves trailing items into a "..." dropdown — the rendered
 * markup is:
 *
 *   <nav class="primary-navigation" data-nav="flex-menu">
 *     <ul class="nav yamm">
 *       <li>Home</li> <li>Shop</li> ...
 *       <li class="techmarket-flex-more-menu-item dropdown">
 *         <a class="dropdown-toggle">...</a>
 *         <ul class="overflow-items dropdown-menu">
 *           ...items the JS pushed in...
 *         </ul>
 *       </li>
 *     </ul>
 *   </nav>
 *
 * We can't stop the JS from CSS, so we defeat the layout by:
 *   1. display: contents on the more-menu li — the wrapper
 *      vanishes from layout but its children inherit the parent
 *      nav's layout context (JS still finds and manipulates it).
 *   2. display: none on the "..." anchor so the indicator never
 *      paints.
 *   3. display: contents on the overflow-items <ul> so the
 *      <li> children the JS pushed in render as if they were
 *      direct siblings of the other top-level nav items.
 *   4. inline-block + padding on those rescued <li>s so they
 *      match the Techmarket primary-nav item rhythm.
 *
 * v2 (user request 2026-06-05): force single-row layout, never
 * wrap. The parent theme rule at techmarket/style.css:8939 sets
 * `display:block; flex-wrap:wrap` on `.nav` <ul> which let the row
 * wrap onto two lines on narrow viewports. We override that to
 * `display:flex; flex-wrap:nowrap; white-space:nowrap` so the six
 * items stay on a single horizontal line, and the row scrolls
 * horizontally only if the viewport is so narrow it can't fit
 * all six (essentially never on desktop ≥1025px since the handheld
 * nav takes over below that threshold). Tightened item padding
 * from 1.6em -> 0.9em so the row fits comfortably on 1024-1280px.
 *
 * Scope: `.site-header .primary-navigation` only. We deliberately
 * do NOT touch .secondary-navigation, .navbar-primary, the
 * departments mega-menu, or any other .dropdown-menu so the
 * sticky-header secondary nav, mini-cart dropdown, and shop
 * filter dropdowns keep their existing behaviour. */
.site-header .primary-navigation .nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	white-space: nowrap;
}
.site-header .primary-navigation .nav > li {
	flex: 0 0 auto;
}
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item {
	display: contents !important;
}
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > a.dropdown-toggle,
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > a[title="..."] {
	display: none !important;
}
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > ul.overflow-items {
	display: contents !important;
}
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > ul.overflow-items > li {
	display: inline-block !important;
	position: static !important;
	flex: 0 0 auto;
	line-height: 1.933em;
	padding: 0 0.9em;
	list-style: none;
}
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > ul.overflow-items > li > a {
	color: #444;
	text-transform: uppercase;
	font-weight: 500;
	white-space: nowrap;
	background: transparent;
	padding: 0;
	border: 0;
	line-height: inherit;
}
.site-header .primary-navigation .nav > li > a {
	white-space: nowrap;
	padding-left: 0.9em;
	padding-right: 0.9em;
}

/* -----------------------------------------------------------
 * Mobile (handheld) drawer nav — never truncate item labels
 * -----------------------------------------------------------
 * The handheld nav (<nav id="handheld-navigation">) uses a
 * vertical drawer (.handheld-navigation-menu, 80vw wide) with
 * its own static CSS — no flex-menu JS — so labels already
 * render in full today. This is a defensive belt-and-suspenders
 * rule so a future parent-theme update can't start clipping
 * long titles like "Laptop and Computer Repair Centre". Wrapping
 * is allowed; the drawer is vertical with plenty of room. */
.site-header .handheld-navigation .nav li > a,
.site-header .handheld-navigation .handheld-navigation-menu .nav li > a {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: normal;
	overflow-wrap: anywhere;
	max-width: none;
}

/* ===========================================================
   Typography overhaul (matzotech) — added 2026-06-05
   Font: Inter (Google Fonts variable, weights 300-800)
   -----------------------------------------------------------
   Replaces the parent theme's Rubik stack on every visible
   front-end surface: body, headings, primary nav, mobile
   hamburger drawer, product cards (titles + prices), buttons,
   forms, footer, the matzotech mu-plugin labels (FOLLOW US
   social strip + departments mega-menu).

   Inter is enqueued from functions.php at priority 5 so it
   registers before the parent theme's Rubik enqueue. The
   parent theme's Rubik stack remains in the cascade as a
   vestigial fallback (Inter -> -apple-system -> Rubik ->
   sans-serif via the parent stack), so any surface we miss
   degrades sanely instead of jumping to system serif.

   `!important` is used where the parent theme pins the same
   property at high specificity or inline. It is NOT used on
   font-feature-settings / smoothing hints since nothing in
   the parent ever sets those.
   =========================================================== */

/* base — body text, form controls, the safe default */
html, body, button, input, select, textarea {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-feature-settings: "cv11", "ss01", "ss03";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* headings — slightly tighter tracking for the cleaner Inter shapes
   at 24px+. The parent theme's H1-H6 inherits font-family from body
   in style.css:1196 but pins font-weight per-level; we keep its
   weight ladder and only override family + tracking. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title, .widgettitle,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	letter-spacing: -0.01em;
}

/* prices + product metadata — tabular figures so column-aligned
   price stacks line up across cards (R1,299.00 vs R12,499.00 etc.). */
.price,
.woocommerce-Price-amount,
.product-meta,
.product_meta,
.amount {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-variant-numeric: tabular-nums;
}

/* primary nav (desktop) — including the rescued overflow-items the
   sibling menu-polish block re-flows from the "..." dropdown */
.site-header .primary-navigation a,
.site-header .navigation-primary a,
.site-header nav.primary-navigation a,
.site-header .primary-navigation .nav > li > a,
.site-header .primary-navigation .nav > li.techmarket-flex-more-menu-item > ul.overflow-items > li > a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* secondary nav (sticky-header) + handheld (mobile drawer) */
.site-header .secondary-navigation a,
.site-header .handheld-navigation a,
.site-header .handheld-navigation .nav li > a,
.site-header .handheld-navigation .handheld-navigation-menu .nav li > a,
.handheld-navigation a,
.mobile-menu a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* FOLLOW US strip (matzotech-social-icons mu-plugin).
   The mu-plugin's inline CSS does NOT pin font-family (verified
   wp-content/mu-plugins/matzotech-social-icons.php:161 -- it only
   sets color/font-weight/letter-spacing/text-transform/font-size),
   so this rule is what changes the label from Rubik to Inter. */
.matzotech-social-topbar,
.matzotech-social-topbar .matzotech-social-label {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.matzotech-social-topbar .matzotech-social-label {
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* left departments mega-menu (matzotech-departments-menu mu-plugin) */
body.matzo-has-dept-sidebar .matzo-dept-menu,
body.matzo-has-dept-sidebar .matzo-dept-menu a,
body.matzo-has-dept-sidebar .matzo-dept-menu .menu-item-title,
.departments-menu,
.departments-menu a,
#departments-menu,
#departments-menu a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* buttons — Woo CTAs, hero button shell, WP block button */
.button, button,
input[type="button"], input[type="submit"], input[type="reset"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.add_to_cart_button {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* forms — inputs/selects/textareas in cart, checkout, account, search */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.search-field, .search-form input, .search-form select,
#commentform input, #commentform textarea {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* footer — sweep every text node (widgets, copyright, payment row,
   matzotech-footer-credit mu-plugin output). The wildcard is safe
   because it only forces font-family; nothing else is touched. */
.site-footer,
.site-footer * {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* preserve icon fonts -- FontAwesome / techmarket-icons / slick
 *
 * The earlier version of this block used `font-family: revert
 * !important` to "let the icon CSS win". That is wrong: per CSS
 * `revert` rolls back to the user-agent value, which has no
 * font-family for `<i>` elements, so the element ends up
 * inheriting body's `Inter !important` font-family -- breaking
 * EVERY FontAwesome icon site-wide (verified via puppeteer
 * computed-style probe: search/cart icons rendered with Inter
 * glyph substitution and showed as empty boxes).
 *
 * Fix: pin the actual icon font-family explicitly. FA 4.7 uses
 * the family name `FontAwesome` (set by the .fa rule in
 * font-awesome.min.css line 1 -- verified). FA5 utility classes
 * (.fas/.far/.fab/.fal/.fad) are emitted by the parent theme in
 * a few spots (e.g. `<i class="fas fa-search">` in the header
 * search button) but the bundled font IS still FA 4.7, so the
 * same family name works for them. tm tm-* icons render via
 * `font-family: 'techmarket-icons'` set by the parent theme's
 * .tm rule (style.css). slick arrows are also FA glyphs in this
 * theme.
 *
 * `tm-icon-*` (with the dash) is included for future-proofing
 * even though current markup uses `tm tm-*` (no dash, no
 * "icon-" suffix) and would not match this selector anyway --
 * the existing tm icons already work because the parent theme's
 * `.tm { font-family: 'techmarket-icons' }` rule does not
 * collide with the body Inter override (the .tm rule wins on
 * direct match vs. inheritance). */
[class^="fa-"], [class*=" fa-"],
.fa, .fas, .far, .fab, .fal, .fad {
	font-family: 'FontAwesome' !important;
}
[class^="tm-icon-"], [class*=" tm-icon-"] {
	font-family: 'techmarket-icons' !important;
}
.slick-prev:before, .slick-next:before {
	font-family: 'FontAwesome' !important;
}

/* -----------------------------------------------------------
 * Top-bar "Menu" dropdown — kill the speech-bubble pointer
 * -----------------------------------------------------------
 * The header dropdown the user calls "Menu" (hamburger icon +
 * chevron) is the parent theme's `.departments-menu`. It is
 * re-labelled to the word "Menu" by our mu-plugin
 *   wp-content/mu-plugins/matzotech-menu-labels.php (line 24,
 *   filter `techmarket_departments_menu_title` @ priority 20),
 * which is why a search for "Menu" in the header markup looks
 * like the handheld navbar-toggler -- but on desktop the
 * actually-visible Menu button (with the dropdown chevron) is
 * `.departments-menu`. The handheld nav is a separate vertical
 * drawer (no triangle of its own on the top panel, only on
 * nested submenus, see techmarket/style.css:11313).
 *
 * The parent theme draws a CSS speech-bubble pointer above the
 * `.dropdown-menu` panel using a stacked pair of pseudo-element
 * triangles (the classic "border-solid-transparent +
 * border-bottom-color" trick):
 *
 *   .departments-menu > .dropdown-menu::before
 *       (techmarket/style.css:9383-9388)
 *       border-bottom-color: #eee  -- the outer grey border
 *       border-width: 17px
 *   .departments-menu > .dropdown-menu::after
 *       (techmarket/style.css:9389-9394)
 *       border-bottom-color: #fff  -- the inner white fill
 *       border-width: 14px
 *
 * Per-header-version selectors at techmarket/style.css:9593
 * (.header-v2/v3/v4/v5/v6/v10) shift the same pseudo-elements
 * horizontally via `left: 84%`, .header-v3 swaps the inner
 * fill to #f8f8f8 (line 9619), and .header-v4 hides the outer
 * grey via `border-bottom-color: transparent` (line 9480).
 * Killing `display` on the base selector wins over all of those
 * because `display` is not respecified by any of the per-
 * header-version rules.
 *
 * We use `display: none` (not `content: none`) so the rule is
 * obviously about hiding rather than re-defining the pseudo,
 * and we add `!important` defensively in case a future parent-
 * theme update or Redux skin tries to set display on these
 * pseudos at higher specificity.
 *
 * Safety -- this selector intentionally does NOT match:
 *   - `.departments-menu > .dropdown-menu .menu-item-has-children
 *      a[data-toggle=dropdown]::after` (techmarket/style.css:9424)
 *      -- those are the per-item FontAwesome `\f105` right-chevron
 *      submenu carets. The selector above is a descendant of
 *      `.dropdown-menu`, not a direct pseudo on it.
 *   - `.departments-menu button.dropdown-toggle::after` -- the
 *      chevron inside the Menu BUTTON itself (Bootstrap default;
 *      hidden anyway on header-v2..v10 via techmarket/style.css
 *      :9548-9554). That pseudo lives on the button, not on the
 *      .dropdown-menu panel.
 *   - `.handheld-navigation ul .dropdown-menu .dropdown-menu::after,
 *      .dropdown-menu::before` (techmarket/style.css:11352) --
 *      the mobile drawer's nested-submenu triangle. Different
 *      ancestor, different pseudo target.
 *
 * Scope is therefore strictly the direct triangle on
 * `.departments-menu > .dropdown-menu` -- exactly the white
 * pyramid the user wanted gone. */
.departments-menu > .dropdown-menu::before,
.departments-menu > .dropdown-menu::after {
	display: none !important;
}

/* ===========================================================
   Laptop & Computer Repair Centre service page polish
   (post 27419 -- /services/laptop-and-computer-repair-centre/)
   -----------------------------------------------------------
   Premium services-page layout built from core Gutenberg
   blocks. Every rule below is scoped to `.page-id-27419` so it
   cannot bleed onto any other services page (Custom
   Installations, the services index, etc.) or onto category
   archives that happen to share `.wp-block-*` class names.

   Brand primary: #0063d1 (rgb 0,99,209) -- matches the parent
   theme's `techmarket_options.custom_primary_color` and the
   hero CTA in the home slider block higher up in this file.
   WhatsApp green (#25d366) is used for the primary CTA fill
   because the primary action on this page is "WhatsApp the
   workshop" -- it's the existing channel customers use.
   =========================================================== */

/* hero band ------------------------------------------------ */
.page-id-27419 .entry-content > .repair-hero {
	background: linear-gradient(180deg, #f5f8fd 0%, #ffffff 100%);
	border: 1px solid #e7ecf3;
	border-radius: 10px;
	padding: 36px 36px 30px;
	margin: 8px 0 36px;
}
.page-id-27419 .repair-hero__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #0063d1;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.page-id-27419 .repair-hero__lede {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
.page-id-27419 .repair-hero__sub {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 22px;
	max-width: 56ch;
}
.page-id-27419 .repair-hero__ctas {
	gap: 12px;
	margin: 0 0 18px;
}
.page-id-27419 .repair-hero__meta {
	font-size: 14px;
	color: #475569;
	margin: 0;
}
.page-id-27419 .repair-hero__meta i.fa {
	color: #0063d1;
	margin-right: 2px;
}
.page-id-27419 .repair-hero__image .wp-block-image {
	margin: 0;
}
.page-id-27419 .repair-hero__image img {
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
	width: 100%;
	height: auto;
}

/* CTA buttons (reused in hero + closing band) -------------- */
.page-id-27419 .repair-cta-primary .wp-block-button__link,
.page-id-27419 .repair-cta-primary a.wp-block-button__link {
	background-color: #25d366;
	color: #ffffff;
	border: 0;
	border-radius: 6px;
	padding: 14px 22px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.30);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.page-id-27419 .repair-cta-primary .wp-block-button__link:hover,
.page-id-27419 .repair-cta-primary .wp-block-button__link:focus {
	background-color: #1fbf59;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.40);
	transform: translateY(-1px);
}
.page-id-27419 .repair-cta-secondary .wp-block-button__link,
.page-id-27419 .repair-cta-secondary a.wp-block-button__link {
	background: transparent;
	color: #0063d1;
	border: 2px solid #0063d1;
	border-radius: 6px;
	padding: 12px 20px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.page-id-27419 .repair-cta-secondary .wp-block-button__link:hover,
.page-id-27419 .repair-cta-secondary .wp-block-button__link:focus {
	background: #0063d1;
	color: #ffffff;
}
.page-id-27419 .repair-cta-primary .wp-block-button__link i.fa,
.page-id-27419 .repair-cta-secondary .wp-block-button__link i.fa {
	margin-right: 4px;
}

/* three-up value props ------------------------------------- */
.page-id-27419 .repair-valueprops {
	margin: 0 0 56px;
}
.page-id-27419 .repair-valueprops .wp-block-columns {
	gap: 24px;
}
.page-id-27419 .repair-vp {
	background: #ffffff;
	border: 1px solid #e7ecf3;
	border-radius: 10px;
	padding: 28px 24px;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.page-id-27419 .repair-vp:hover {
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
	border-color: #d8e0eb;
	transform: translateY(-2px);
}
.page-id-27419 .repair-vp__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #e6f0fb;
	color: #0063d1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 0 18px;
}
.page-id-27419 .repair-vp__title {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}
.page-id-27419 .repair-vp__body {
	font-size: 15px;
	line-height: 1.55;
	color: #475569;
	margin: 0;
}

/* generic section header ----------------------------------- */
.page-id-27419 .repair-section {
	margin: 0 0 56px;
}
.page-id-27419 .repair-section__title {
	font-size: 28px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.page-id-27419 .repair-section__lede {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	margin: 0 auto 28px;
	max-width: 60ch;
}

/* how it works -- 4-up numbered steps ---------------------- */
.page-id-27419 .repair-how .repair-steps {
	gap: 24px;
}
.page-id-27419 .repair-step {
	position: relative;
	padding: 28px 22px;
	background: #ffffff;
	border: 1px solid #e7ecf3;
	border-radius: 10px;
}
.page-id-27419 .repair-step__num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0063d1;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
	box-shadow: 0 4px 12px rgba(0, 99, 209, 0.25);
}
.page-id-27419 .repair-step__title {
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}
.page-id-27419 .repair-step__body {
	font-size: 14.5px;
	line-height: 1.55;
	color: #475569;
	margin: 0;
}
.page-id-27419 .repair-how__walkin {
	margin: 24px auto 0;
	font-size: 15px;
	color: #475569;
	max-width: 60ch;
	padding: 14px 18px;
	background: #f5f8fd;
	border-left: 3px solid #0063d1;
	border-radius: 4px;
	text-align: left;
}

/* what we fix -- two-column tick list ---------------------- */
.page-id-27419 .repair-fix-grid {
	gap: 32px;
}
.page-id-27419 .repair-fix-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.page-id-27419 .repair-fix-list li {
	padding: 12px 0;
	border-bottom: 1px solid #eef1f6;
	font-size: 15px;
	line-height: 1.5;
	color: #334155;
}
.page-id-27419 .repair-fix-list li:last-child {
	border-bottom: 0;
}
.page-id-27419 .repair-fix-list li i.fa {
	color: #16a34a;
	margin-right: 6px;
}
.page-id-27419 .repair-fix__note {
	font-size: 14px;
	color: #64748b;
	margin: 22px auto 0;
	max-width: 70ch;
}

/* service area panel --------------------------------------- */
.page-id-27419 .repair-area {
	background: #f8fafc;
	border: 1px solid #e7ecf3;
	border-radius: 10px;
	padding: 32px;
}
.page-id-27419 .repair-area img {
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}
.page-id-27419 .repair-area__lead {
	font-size: 16px;
	line-height: 1.6;
	color: #334155;
	margin: 0 0 18px;
}
.page-id-27419 .repair-area__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.page-id-27419 .repair-area__list li {
	padding: 8px 0;
	font-size: 15px;
	color: #334155;
}
.page-id-27419 .repair-area__list li i.fa {
	color: #0063d1;
	margin-right: 6px;
	width: 18px;
	text-align: center;
}

/* why MatzoTech -- two-up bullet panel --------------------- */
.page-id-27419 .repair-why .repair-section__title {
	text-align: center;
	margin-bottom: 24px;
}
.page-id-27419 .repair-why-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.page-id-27419 .repair-why-list li {
	position: relative;
	padding: 10px 0 10px 28px;
	font-size: 15px;
	line-height: 1.55;
	color: #334155;
	border-bottom: 1px solid #eef1f6;
}
.page-id-27419 .repair-why-list li:last-child {
	border-bottom: 0;
}
.page-id-27419 .repair-why-list li:before {
	content: "\f00c"; /* FA check */
	font-family: FontAwesome;
	color: #16a34a;
	position: absolute;
	left: 0;
	top: 11px;
	font-size: 14px;
}

/* closing CTA band ----------------------------------------- */
.page-id-27419 .repair-cta-band {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	border-radius: 12px;
	padding: 48px 32px;
	text-align: center;
	color: #ffffff;
	margin: 0 0 56px;
}
.page-id-27419 .repair-cta-band .repair-cta-band__title {
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.page-id-27419 .repair-cta-band__lede {
	color: #cbd5e1;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 auto 24px;
	max-width: 55ch;
}
.page-id-27419 .repair-cta-band__ctas {
	gap: 12px;
}
/* on the dark band the outline CTA needs a light border + text */
.page-id-27419 .repair-cta-band .repair-cta-secondary .wp-block-button__link {
	color: #ffffff;
	border-color: #ffffff;
}
.page-id-27419 .repair-cta-band .repair-cta-secondary .wp-block-button__link:hover,
.page-id-27419 .repair-cta-band .repair-cta-secondary .wp-block-button__link:focus {
	background: #ffffff;
	color: #0f172a;
}

/* reviews + all-services button ---------------------------- */
.page-id-27419 .repair-reviews__title {
	margin-top: 0;
	margin-bottom: 22px;
}
.page-id-27419 .repair-all-services {
	margin: 32px 0 0;
}
.page-id-27419 .repair-all-services .wp-block-button__link {
	background: transparent;
	color: #0063d1;
	border: 2px solid #0063d1;
	border-radius: 6px;
	padding: 12px 26px;
	font-weight: 600;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.page-id-27419 .repair-all-services .wp-block-button__link:hover,
.page-id-27419 .repair-all-services .wp-block-button__link:focus {
	background: #0063d1;
	color: #ffffff;
}

/* small viewports ------------------------------------------ *
 * Below 783px the core columns block stacks automatically
 * (mobileColumns layout). We only need to soften the heavier
 * padding + headline sizes so the page doesn't feel cramped
 * on a phone. */
@media (max-width: 783px) {
	.page-id-27419 .entry-content > .repair-hero {
		padding: 24px 20px;
	}
	.page-id-27419 .repair-hero__lede {
		font-size: 22px;
	}
	.page-id-27419 .repair-section__title,
	.page-id-27419 .repair-cta-band .repair-cta-band__title {
		font-size: 22px;
	}
	.page-id-27419 .repair-cta-band {
		padding: 32px 20px;
	}
	.page-id-27419 .repair-area {
		padding: 22px;
	}
	/* On phone, the hero image stacks above the text. Put it on
	 * top by reversing column order so the photo establishes the
	 * service immediately. */
	.page-id-27419 .repair-hero .repair-hero__cols {
		flex-direction: column-reverse;
	}
}


/* -----------------------------------------------------------
 * Services pages — Custom Installations (30895) and IT Support
 * & SLA Agreements (69628). Same fix-and-polish pattern used
 * for the Repair Centre rewrite.
 * -----------------------------------------------------------
 *
 * BACKGROUND
 *   The services-restructure worker (see
 *   wp-content/uploads/matzotech-services-backup-2026-06-09/)
 *   replaced the Elementor layouts on these pages with
 *   Gutenberg blocks. The post_content opened with an
 *   `<h1>` and the theme also emits its own
 *   `<h1 class="entry-title">` from
 *   wp-content/themes/techmarket/inc/template-tags/content.php
 *   :29 (techmarket_page_header). Result: duplicate H1.
 *   Additionally techmarket_page_header_image() at line 119
 *   of the same file renders a full-bleed `.page-featured-image`
 *   from `_thumbnail_id` whenever the attachment is wider than
 *   1170px — which on Custom Installations was the same network-
 *   cables photo as the in-body image, so the user reported
 *   "this image is duplicated and so large and in the heading".
 *
 * FIX (CSS side, scoped to the two page IDs)
 *   1. Hide `.page-featured-image` on these pages so the title
 *      stands alone in a clean entry-header. The post_content
 *      now carries one wide in-body image instead.
 *      `_thumbnail_id` itself is preserved so OG/social-card
 *      previews (rank_math) still work.
 *   2. Style the value-prop FontAwesome icons (.matzo-vp-icon i)
 *      to the site accent colour and give them generous spacing
 *      below — keeps the three-up row feeling premium.
 *   3. Round the "wide" in-body image (.matzo-inline-image) and
 *      give it a soft shadow so it reads as an editorial photo
 *      rather than a raw asset.
 *   4. Tighten the entry-header so the title sits comfortably
 *      now that the giant header image is gone.
 *   5. Light cosmetic spacing on the .matzo-steps ordered list
 *      so the "How it works / How a session works" panels feel
 *      airy inside their light-grey card.
 *
 * The post_content `<h1>` itself is not removed via CSS — it has
 * already been removed at the source in the new post_content
 * markup. We do NOT add a generic `.entry-content h1 { display: none }`
 * because that would also kill any legitimate H1 a future editor
 * adds elsewhere on the site. */
.page-id-30895 .page-featured-image,
.page-id-69628 .page-featured-image {
	display: none;
}

.page-id-30895 .entry-header,
.page-id-69628 .entry-header {
	margin-bottom: 32px;
	padding-top: 8px;
}

.page-id-30895 .matzo-vp-icon,
.page-id-69628 .matzo-vp-icon {
	margin-bottom: 12px;
	line-height: 1;
}

.page-id-30895 .matzo-vp-icon i,
.page-id-69628 .matzo-vp-icon i {
	color: #1e2547;
}

.page-id-30895 .matzo-value-props .wp-block-column,
.page-id-69628 .matzo-value-props .wp-block-column {
	padding: 8px 12px;
}

.page-id-30895 .matzo-inline-image img,
.page-id-69628 .matzo-inline-image img {
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(30, 37, 71, 0.08);
}

.page-id-30895 .matzo-steps,
.page-id-69628 .matzo-steps {
	margin: 0;
	padding-left: 24px;
}

.page-id-30895 .matzo-steps li,
.page-id-69628 .matzo-steps li {
	margin-bottom: 10px;
}

.page-id-30895 .matzo-steps li:last-child,
.page-id-69628 .matzo-steps li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Premium page-header spacing (site-wide, every WP Page)
 * ---------------------------------------------------------------------------
 * Parent theme (wp-content/themes/techmarket/style.css:1509) ships:
 *
 *     .page .hentry.type-page .entry-header {
 *         margin-bottom: 4.438em !important;
 *     }
 *
 * That hard-codes ~71px of dead space under every page H1 -- the gap the
 * user flagged as "too much white space" on /services/. Combined with
 * .page-content's own top padding it pushes the actual content well
 * below the fold on landing.
 *
 * We override site-wide to ~1.25em and also trim the leading margin of
 * a centred first paragraph (a common page intro/lede pattern, e.g.
 * /services/'s "MatzoTech is your trusted tech partner ..." sentence)
 * so the title visually anchors the content rather than floating alone.
 *
 * Scoped to `.page .hentry.type-page` exactly like the parent rule so:
 *   - Posts / single-post / archive / shop / product pages are unaffected
 *   - Pages that opt to hide the title via the parent theme's
 *     techmarket_show_page_header filter still behave correctly
 *   - Mobile inherits the same compressed spacing (the parent rule had no
 *     responsive override, so neither do we)
 *
 * If a specific page ever needs MORE top breathing room we can add a
 * page-id-scoped override below this block; the !important matches the
 * parent specificity so we'll always win.
 * --------------------------------------------------------------------------- */
.page .hentry.type-page .entry-header {
	margin-bottom: 1.25em !important;
}

.page .hentry.type-page .entry-content > .has-text-align-center:first-child,
.page .hentry.type-page .entry-content > p:first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	.page .hentry.type-page .entry-header {
		margin-bottom: 0.75em !important;
	}
}

/* ---------------------------------------------------------------------------
 * Header logo — display-size cap (high-res source preserved)
 * ---------------------------------------------------------------------------
 * The site logo (attachment 127624) is a 1976x961 high-res PNG so it stays
 * crisp on retina displays. WordPress emits the full intrinsic dimensions
 * as inline HTML attributes:
 *
 *     <img class="custom-logo" width="1976" height="961" ...>
 *
 * The parent theme (wp-content/themes/techmarket/style.css:2711-2716) only
 * caps display size with `max-width: 200px` and ONLY inside
 * `@media (min-width: 500px)`. There is no `max-height` and nothing below
 * 500px, so on actual phone viewports (~375-430px CSS px) the logo renders
 * at its container's full width and dominates the header before the menu
 * row -- which is exactly the regression the user reported.
 *
 * Aspect ratio is 1976:961 = ~2.056:1 (~2x wider than tall), so the cap
 * needs both axes:
 *
 *   Desktop / tablet (>=768px) ... max-width 180px, max-height 60px
 *                                  (aspect-driven render: ~123x60)
 *   Mobile (<=767px) ............. max-width 140px, max-height 48px
 *                                  (aspect-driven render: ~99x48)
 *
 * `width: auto !important; height: auto !important` is mandatory: without
 * them, WP's inline width="1976" height="961" attributes win over the
 * max-* rules and the image still paints at its intrinsic size. The
 * `!important` is therefore not specificity bullying -- it's the only way
 * to defeat inline HTML attributes from CSS (presentational attributes
 * have lower priority than any author CSS, but width/height attributes
 * specifically interact with the layout box BEFORE max-* rules clamp it,
 * so they need explicit overrides).
 *
 * Scope: `.site-header .custom-logo` and `.site-header .custom-logo-link
 * img`. The header markup (curl-verified) emits TWO `.site-branding` blocks
 * (main header row + sticky header on desktop); both share the same
 * `.custom-logo` class so a single selector covers both. We deliberately
 * do NOT touch other `.custom-logo` instances (there are none today, but
 * if a future plugin adds one in the footer or sidebar it will keep its
 * own dimensions). */
.site-header .custom-logo,
.site-header .custom-logo-link img {
	max-width: 180px !important;
	max-height: 60px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

@media (max-width: 767px) {
	.site-header .custom-logo,
	.site-header .custom-logo-link img {
		max-width: 140px !important;
		max-height: 48px !important;
	}
}