/* ============================================================= SERVICES CATEGORY — css/services.css ------------------------------------------------------------- PORTING-MAP §E, E8. Decision: **restyle, partially — two of v1's four sections are deliberately not carried over.** This is the only §E entry that is not a page. `services` is `product_cat` term 395: a top-level category with 13 products and no children, so it runs the product loop like any leaf category. Its "content" is the term description field plus the ACF `bottom_description`, not `post_content` — which also means the block-editor "rewrite" option does not exist here. What v1's services.css covered, and what happens to each part: 1. **Term description panel + CTA buttons** — restyled below. This is the real work: the description carries a `.service-cta-row` with two buttons ("Request a Repair Quote" → /repair-maintenance/#repair-contact-form, and a WhatsApp deep link). Unstyled they render as two bare links in a row and the category loses its only call to action. 2. **FAQ accordion** — **not carried over, already covered.** v1 styled `.category-bottom-description details / summary` here, per-category. This theme styles `.wows-term-bottom` globally in style.css §10 (session 5), so those rules would be a duplicate that drifts. 46 terms carry a `bottom_description`; styling it once is the right level. 3. **`.services-hero`** — **restored 16 Aug 2026 at Eddy's request**, then **moved out of this file the same day** to `css/category-heroes.css` when D4 gave eight more categories the identical hero. The note below still describes it, because the reasoning is Services-specific; the rules are not here. ------------------------------------------------------------- THE HERO IS BACK, WITH ONE H1 INSTEAD OF TWO ------------------------------------------------------------- v1 injected this hero from `functions.php:197` on `generate_after_header` — a GeneratePress hook with no standalone equivalent, so `inc/archive.php` re-sites it onto `woocommerce_before_main_content`. **v1 shipped two H1s on this archive**: the hero's "Office Equipment Repair & Services" plus WooCommerce's own "Services" page title. v2 suppresses Woo's, so the hero's is the only one. That keeps the H1 *text* INSTRUCTIONS.md §7 protects while dropping a duplicate that was never deliberate. The photo is resolved from the media library at render time. v1 hardcoded the absolute production URL, which 404s on any other host — the same bug PORTING-MAP F1 fixed on the homepage preload. ============================================================= */ /* ============================================== 0. HERO — moved to css/category-heroes.css ---------------------------------------------- The `.services-hero` rules used to live here. D4 gave eight more categories the same hero (16 Aug 2026), so the component moved to a file that all nine archives enqueue. Nothing about the Services hero changed in the move; it is the same rules under a second selector. ============================================== */ /* ============================================== 1. TERM DESCRIPTION PANEL ---------------------------------------------- Scoped with the body classes WordPress core adds on any taxonomy archive (tax-product_cat, term-services, term-395) — not theme classes, so the scoping survived the switch untouched. style.css §10 already sets the prose size, colour and 68ch measure on .wows-shop-desc. Only the panel treatment is added here. ============================================== */ /* * style.css §10 caps every direct child of .wows-shop-desc at 68ch so a plain * category blurb keeps a readable measure. Here that child *is* the panel, so * the cap shrank the whole box to a 600px column with the CTA buttons inside * it and half the row empty. The panel goes full width and the 68ch measure * moves onto its paragraphs, where it was meant to apply. */ .tax-product_cat.term-services .wows-shop-desc > .term-description { max-width: none; } .tax-product_cat.term-services .term-description > p { max-width: 68ch; } .tax-product_cat.term-services .term-description, .tax-product_cat.term-services .woocommerce-product-archive__description { background: var(--wows-surface-2); border: 1px solid var(--wows-border-soft); border-left: 4px solid var(--wows-accent); border-radius: 0 var(--wows-r-panel) var(--wows-r-panel) 0; padding: var(--wows-sp-7) var(--wows-sp-8); margin-bottom: var(--wows-sp-8); } .tax-product_cat.term-services .term-description p, .tax-product_cat.term-services .woocommerce-product-archive__description p { font-size: var(--wows-fs-md); line-height: var(--wows-lh-lede); color: var(--wows-text); margin: 0 0 var(--wows-sp-2); } .tax-product_cat.term-services .term-description p:last-child, .tax-product_cat.term-services .woocommerce-product-archive__description p:last-child { margin-bottom: 0; } .tax-product_cat.term-services .term-description strong, .tax-product_cat.term-services .woocommerce-product-archive__description strong { color: var(--wows-ink); } .tax-product_cat.term-services .term-description a, .tax-product_cat.term-services .woocommerce-product-archive__description a { color: var(--wows-accent); text-decoration: underline; } /* ============================================== 2. CTA BUTTON ROW ---------------------------------------------- Markup lives inside the term description in the database: .service-cta-row wrapping two .service-btn anchors, each a .service-btn-title over a smaller .service-btn-subtext. ============================================== */ .tax-product_cat.term-services .service-cta-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--wows-sp-2); margin: var(--wows-sp-6) 0 var(--wows-sp-1); } /* Two stacked lines inside one button, hence column + centre. The !important on text-decoration answers style.css §8's link underline, which is more specific than a bare class. */ .tax-product_cat.term-services .service-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--wows-sp-2) var(--wows-sp-7); border-radius: var(--wows-r-md); font-family: var(--wows-font-display); font-size: var(--wows-fs-md); font-weight: 600; text-align: center; text-decoration: none !important; transition: background var(--wows-t-base), transform var(--wows-t-fast); } .tax-product_cat.term-services .service-btn:hover { transform: translateY(-1px); } .tax-product_cat.term-services .service-btn-title { line-height: 1.3; } .tax-product_cat.term-services .service-btn-subtext { font-family: var(--wows-font-body); font-size: var(--wows-fs-xs); font-weight: 400; line-height: 1.2; color: var(--wows-on-accent); } .tax-product_cat.term-services .service-btn-primary { background: var(--wows-accent); color: var(--wows-white) !important; } .tax-product_cat.term-services .service-btn-primary:hover { background: var(--wows-accent-dark); color: var(--wows-white) !important; } /* WhatsApp keeps a green identity, on --wows-success rather than v1's raw #25D366 (no raw hex — INSTRUCTIONS.md §5). */ .tax-product_cat.term-services .service-btn-whatsapp { background: var(--wows-success); color: var(--wows-white) !important; } .tax-product_cat.term-services .service-btn-whatsapp:hover { background: var(--wows-success-text); color: var(--wows-white) !important; } /* ============================================== 3. RESPONSIVE ============================================== */ @media (max-width: 680px) { .tax-product_cat.term-services .term-description, .tax-product_cat.term-services .woocommerce-product-archive__description { padding: var(--wows-sp-6) var(--wows-sp-5); } /* Full-width stacked buttons: side by side they wrap to two ragged lines at this width, and each one is a two-line button already. */ .tax-product_cat.term-services .service-cta-row { flex-direction: column; align-items: stretch; } }