/* IAN Computers and Appliances - shared design system.
   Loaded site-wide, and the only place site styling lives: the home page's
   own sections are styled here too (see "home page" below), so its content
   carries no <style> of its own and a deploy is enough to restyle it. */

:root{
  --paper:#F4F8FC;
  --paper-raised:#FFFFFF;
  --navy:#0A2E45;
  --navy-deep:#071F30;
  --ink:#0B2A40;
  --ink-soft:#4C6478;
  --ink-faint:#5A7082;
  --line:rgba(11,42,64,0.10);
  --line-strong:rgba(11,42,64,0.2);
  --blue:#1485CC;
  --blue-deep:#0B5F97;
  --blue-soft:#E3F1FB;
  --orange:#EB512A;
  --orange-soft:#FDE6DF;
  --gold:#EE9C23;
  --gold-soft:#FCEBD1;
  --gold-ink:#C27A00;
  --green:#1E7A46;
  --green-soft:#DCF2E5;
  --on-navy:#EAF3FA;
  --on-navy-soft:#9FC3DC;
  --shadow-sm:0 1px 2px rgba(11,42,64,0.06), 0 2px 8px rgba(11,42,64,0.06);
  --shadow-lg:0 4px 10px rgba(11,42,64,0.06), 0 22px 48px -12px rgba(11,42,64,0.24);
  --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  /* Text on orange fills is navy, never white: white on --orange is 3.7:1,
     navy is 4.6:1 (6.5:1 on the dark theme's lighter orange). */
  --on-warm:#071F30;
  /* Orange dark enough for small text on white / --orange-soft (AA). */
  --orange-ink:#B5390B;
}
:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
:root[data-theme="dark"]{
  --paper:#081C2B; --paper-raised:#0E2A3D; --navy:#050F18; --navy-deep:#03090F;
  --ink:#EAF3FA; --ink-soft:#AFC6D8; --ink-faint:#7E9DB4;
  --line:rgba(234,243,250,0.10); --line-strong:rgba(234,243,250,0.22);
  --blue:#4FB3F0; --blue-deep:#8FD0FF; --blue-soft:rgba(79,179,240,0.14);
  --orange:#FF7A50; --orange-soft:rgba(255,122,80,0.14);
  --gold:#FFB84D; --gold-soft:rgba(255,184,77,0.14); --gold-ink:#FFB84D;
  --green:#5FD196; --green-soft:rgba(95,209,150,0.14);
  --orange-ink:#FF9A78; --wc-red:#FF8A80; /* WooCommerce errors/asterisks; its #a00 is 2.2:1 on dark */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:0 22px 48px -12px rgba(0,0,0,0.6);
}

.shell{max-width:1180px;margin:0 auto;padding:0 28px;}
@media (max-width:640px){ .shell{padding:0 18px;} }

/* ---------------- header ---------------- */
/* Pages get their <header> tag from the template's tagName wrapper, so the
   part itself is a plain div. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,46,69,0.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:46px;height:46px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.25);}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--on-navy);letter-spacing:-0.01em;line-height:1.15;}
nav.primary{display:flex;gap:4px;}
nav.primary a{font-size:0.9rem;font-weight:600;color:var(--on-navy-soft);white-space:nowrap;padding:8px 11px;border-radius:999px;transition:background 0.2s, color 0.2s;}
nav.primary a:hover{color:#fff;background:rgba(255,255,255,0.1);}
.header-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
/* Icon buttons (menu, search, cart) share one round 40px shape. */
.nav-toggle, .header-cart, .header-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
  color:var(--on-navy);cursor:pointer;
  transition:background 0.2s, transform 0.3s var(--ease-bounce);
}
.nav-toggle:hover, .header-cart:hover, .header-search-toggle:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.nav-toggle{display:none;}
/* Menu button below 1100px: brand + full nav + actions need ~1090px on one row. */
@media (max-width:1099px){
  .nav-toggle{display:inline-flex;order:3;}
  .site-bar{flex-wrap:nowrap;}
  nav.primary{
    display:none;
    position:absolute;top:calc(100% + 8px);left:12px;right:12px;
    flex-direction:column;gap:2px;
    background:var(--navy-deep);
    padding:10px;border-radius:var(--r);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
  }
  nav.primary.is-open{display:flex;animation:pop-in 0.25s var(--ease-bounce);}
  nav.primary a{padding:12px 14px;border-radius:var(--r-sm);}
}
@keyframes pop-in{ from{opacity:0;transform:translateY(-6px) scale(0.98);} to{opacity:1;transform:none;} }

/* Call button: phone icon + number; below 1200px just the icon, as a round
   button like search and cart, so the header stays on one row. */
.btn-call{padding:11px 16px;}
.btn-call svg{flex:none;}
@media (max-width:1199px){
  .btn-call{width:40px;height:40px;padding:0;justify-content:center;box-sizing:border-box;}
  .btn-call-num{display:none;}
}

/* Light/dark switch: a round icon button first among the header icons
   (search, cart). Phones have no room for a fourth icon in the header, so
   there the icon hides and a labelled row in the menu takes over. Shows the
   moon in light mode, the sun in dark. */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:40px;height:40px;flex:none;padding:0;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
  color:var(--on-navy);cursor:pointer;font:inherit;
  transition:background 0.2s, transform 0.3s var(--ease-bounce);
}
.theme-toggle:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.theme-toggle .i-sun, .theme-toggle-label, .theme-toggle--menu{display:none;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
@media (max-width:768px){
  .header-cta .theme-toggle{display:none;}
  nav.primary .theme-toggle--menu{
    display:flex;width:auto;height:auto;margin:6px 0 0;padding:12px 14px;border-radius:var(--r-sm);
    background:none;border:none;border-top:1px solid rgba(255,255,255,0.08);justify-content:flex-start;
    color:var(--on-navy-soft);font-size:0.9rem;font-weight:600;
  }
  nav.primary .theme-toggle--menu:hover{transform:none;background:rgba(255,255,255,0.1);color:#fff;}
  .theme-toggle-label{display:inline;}
}

/* The cart's count badge is populated by the header script; it stays hidden
   at zero rather than showing a "0", which reads as a broken counter. */
.header-cart{position:relative;}
.header-cart-count{
  position:absolute;top:-5px;right:-5px;
  min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--on-warm);
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
  border-radius:999px;
  box-shadow:0 0 0 2px var(--navy);
  animation:pop-in 0.35s var(--ease-bounce);
}
.header-cart-count[hidden]{display:none;}

.header-search{position:relative;}
.header-search-form{
  display:none;align-items:stretch;gap:4px;
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--paper-raised);border:1px solid var(--line-strong);
  padding:5px;z-index:60;box-shadow:var(--shadow-lg);border-radius:999px;
}
.header-search-form.is-open{display:flex;animation:pop-in 0.25s var(--ease-bounce);}
.header-search-form input{border:none;padding:9px 14px;font-family:var(--sans);font-size:0.9rem;color:var(--ink);background:transparent;width:220px;border-radius:999px;}
.header-search-form input:focus{outline:none;}
.header-search-form button{display:inline-flex;align-items:center;justify-content:center;border:none;background:var(--orange);color:var(--on-warm);padding:0 16px;cursor:pointer;border-radius:999px;}
/* Phones and tablets: Call moves to the bottom action bar (see
   .mobile-actions), so the header drops its text buttons and fits on one
   slim row - brand, search, cart, menu. */
@media (max-width:768px){
  .header-cta .btn{display:none;}
  .site-bar{flex-wrap:nowrap;gap:8px;}
  .nav-toggle{order:3;}
}
@media (max-width:480px){
  .header-search-form{position:fixed;top:68px;left:12px;right:12px;}
  .header-search-form input{width:auto;flex:1;}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:0.9rem;
  border:none;white-space:nowrap;
  font-family:var(--sans);cursor:pointer;
  text-decoration:none;
  transition:transform 0.3s var(--ease-bounce), box-shadow 0.2s, background 0.2s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn-primary{background:var(--orange);color:var(--on-warm);}
.btn-ghost-on-navy{background:rgba(255,255,255,0.08);color:var(--on-navy);border:1px solid rgba(255,255,255,0.2);}
.btn-ghost-on-navy:hover{background:rgba(255,255,255,0.16);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--line-strong);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}

/* WooCommerce's own buttons (add to cart, place order, proceed to checkout)
   pick up the same pill shape and flat orange, so the shop's main actions
   look like the rest of the site's. */
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:var(--orange) !important;color:var(--on-warm) !important;border:none !important;
  border-radius:999px !important;font-family:var(--sans);font-weight:700;
  transition:transform 0.3s var(--ease-bounce), box-shadow 0.2s;
}
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{transform:translateY(-2px);}

/* ---------------- shared navy backdrop ----------------
   Plain navy for the home hero and the page-header band, so every page
   opens the same way. */
.hero, .page-header{
  position:relative;overflow:hidden;color:var(--on-navy);
  background:var(--navy);
}

/* ---------------- page header band (non-home pages) ---------------- */
/* margin-top:0 cancels WP's block-gap margin, which otherwise leaves a strip
   of page background between the sticky header and this band. Side padding
   keeps the breadcrumb and title off the screen edge below 1180px. */
.page-header{
  margin-top:0;
  padding:44px 28px 34px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
@media (max-width:640px){ .page-header{padding-left:18px;padding-right:18px;} }
/* Tighten the gap after the header band: WP's block spacing preset on <main>
   stacks on top of page-header's own padding, reading as dead space -
   especially in dark mode where the header and body backgrounds are too
   close in luminance to visually separate on their own (see border above). */
.page-header + main.wp-block-group{padding-top:var(--wp--preset--spacing--30) !important;}
.page-header .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.page-header .eyebrow .dot{width:6px;height:6px;background:var(--orange);border-radius:50%;}
.page-header h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.08;letter-spacing:-0.03em;
  margin:0;
}
.page-header p{
  font-size:1.02rem;color:var(--on-navy-soft);max-width:60ch;margin:12px 0 0;line-height:1.55;
}
.page-header .woocommerce-breadcrumb, .page-header .woocommerce-breadcrumb a{color:var(--on-navy-soft);}
.page-header .woocommerce-breadcrumb a:hover{color:#fff;}
.page-header h1.wp-block-query-title{margin-top:12px !important;}
/* Pin the band's content to the 1180px shell. WordPress's constrained-layout
   CSS for this group isn't printed on every page, and the fallback global
   content width (1000px) left titles misaligned from page to page. */
.page-header.is-layout-constrained > *{max-width:1180px;}

/* ---------------- generic pages (policies, cart, account) ----------------
   templates/page.html and page-with-title.html. The parent theme's heading
   styles are a light display weight meant for marketing pages; long-form
   text reads better in the site's own type at a steady rhythm. */
.page-body .wp-block-post-content{color:var(--ink);font-size:1rem;line-height:1.7;}
.page-body .wp-block-post-content :is(h2,h3,h4){font-family:var(--display);color:var(--ink);letter-spacing:-0.02em;line-height:1.25;}
.page-body .wp-block-post-content h2{font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:800;margin:2.4em 0 0.6em;}
.page-body .wp-block-post-content h3{font-size:1.15rem;font-weight:700;margin:1.8em 0 0.5em;}
.page-body .wp-block-post-content > :first-child{margin-top:0;}
.page-body .wp-block-post-content :is(ul,ol){padding-left:1.3em;}
.page-body .wp-block-post-content li{margin:0.35em 0;}
.page-body .wp-block-post-content li::marker{color:var(--orange-ink);}
/* WooCommerce's classic forms (login, register, lost password). */
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password{
  border:1px solid var(--line) !important;border-radius:var(--r) !important;background:var(--paper-raised);padding:28px !important;
}
.woocommerce form .form-row label{color:var(--ink);font-weight:600;font-size:0.9rem;}
.woocommerce form .form-row .input-text{
  background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 14px;
}
.woocommerce form .form-row .input-text:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.woocommerce :is(button.button, a.button, input.button){
  background:var(--orange) !important;color:var(--on-warm) !important;border:none !important;
  border-radius:999px !important;padding:11px 24px !important;font-family:var(--sans);font-weight:700;
}
.woocommerce :is(button.button, a.button, input.button):hover{filter:brightness(1.05);}
.woocommerce-LostPassword a, .woocommerce-privacy-policy-text a{color:var(--blue-deep);}

/* ---------------- section scaffolding (shared) ---------------- */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--blue-deep);background:var(--blue-soft);
  padding:6px 12px;border-radius:999px;margin-bottom:14px;
}
h2.section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-0.03em;line-height:1.1;color:var(--ink);}
p.section-sub{color:var(--ink-soft);font-size:1.05rem;margin-top:14px;line-height:1.6;}

/* ---------------- product / category card grid ---------------- */
/* Specificity + !important: overriding WooCommerce's own inline product-template
   block CSS (.wc-block-product-template__responsive), which otherwise wins the
   cascade regardless of source order. */
.cat-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px !important;list-style:none;margin:0;padding:0;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px !important;} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr !important;} }
.cat-grid > li{margin:0 !important;width:auto !important;list-style:none;}
.cat-card{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform 0.35s var(--ease-bounce), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
.cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-soft);flex:none;}
.cat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(.2,.7,.2,1);}
.cat-card:hover .cat-media img{transform:scale(1.07);}
.cat-media.pending{display:flex;align-items:center;justify-content:center;background:var(--paper);border-bottom:1px solid var(--line);}
.cat-media.pending .cat-icon{width:30px;height:30px;color:var(--ink-faint);}
/* Stock badge, pinned over the card image. Colour carries the same meaning as
   the words, never instead of them - the label is always spelled out, so it
   still reads correctly in greyscale or to anyone who can't separate the
   green from the amber. */
.cat-stock{
  position:absolute;top:10px;left:10px;z-index:2;
  margin:0 !important;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:var(--paper-raised);
  border:1px solid currentColor;
  box-shadow:0 2px 6px rgba(0,0,0,0.14);
}
.cat-stock.wc-block-components-product-stock-indicator--in-stock{color:var(--green);}
.cat-stock.wc-block-components-product-stock-indicator--available-on-backorder{color:var(--gold);}
.cat-stock.wc-block-components-product-stock-indicator--out-of-stock{color:var(--ink-faint);}
/* Out-of-stock cards read as unavailable at a glance, without hiding them -
   customers still want to see the product exists and ask when it's back. */
.cat-card:has(.wc-block-components-product-stock-indicator--out-of-stock) .cat-media img{opacity:0.55;filter:saturate(0.5);}
.cat-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.cat-name{font-weight:800;font-size:1.02rem;color:var(--ink);line-height:1.3;letter-spacing:-0.01em;}
.cat-desc{font-size:0.85rem;color:var(--ink-soft);line-height:1.45;}
.cat-price{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--blue-deep);margin-top:auto;padding-top:4px;}
.cat-link{font-size:0.85rem;font-weight:700;color:var(--orange-ink);display:flex;align-items:center;gap:5px;}
/* Home category cards: the whole card is the click target, not just "Browse". */
.cat-card > .cat-body > a.cat-link::after{content:"";position:absolute;inset:0;}
/* Once an item is in the cart, core relabels the button "N in cart" and adds a
   separate "View cart" link beside it - two competing controls in one row, at
   the block's own 16px gap, which is what makes the card look broken. The
   header cart button already carries a count and a way through to the cart, so
   the card keeps a single control. Clicking it again adds another unit;
   lowering a quantity is done on the cart page. Specificity has to beat
   .wp-block-button.wc-block-components-product-button, hence the extra class. */
.cat-card .cat-link.wc-block-components-product-button{gap:5px;align-items:center;}
.cat-card .cat-link.wc-block-components-product-button > span{display:none !important;}

/* Cart page: hide the shipping row. Pickup is the only option, so WooCommerce
   auto-selects the first branch and prints "Store Pickup (Quezon Branch)" in
   the totals - a customer who has chosen nothing reasonably reads that as
   their order already being routed to Quezon. Branch choice is a real decision
   and belongs at checkout, where it's presented as one. The row carries
   nothing else: pickup is always free, so it only ever reads FREE.
   Done in CSS rather than by removing the block, because the cart block
   re-renders its totals client-side and puts the row back. display:none also
   takes it out of the accessibility tree, so it isn't read aloud either. */
.wp-block-woocommerce-cart .wc-block-components-totals-shipping{display:none;}

/* ---------------- checkout / cart form fields ---------------- */
/* WooCommerce ships light-mode field styling: white boxes with near-black text,
   regardless of the surrounding page. On this navy layout that reads as a stack
   of bright rectangles, and it broke the labels outright - WooCommerce uses
   floating labels that sit *inside* the field, so they inherited the theme's
   near-white --ink and became white-on-white. Giving the fields the same tokens
   as the rest of the site fixes the contrast and the visual noise together. */
/* WooCommerce's own rule is .wc-block-components-form .wc-block-components-text-input
   input[type="email"] - three classes and an attribute. Matching that shape and
   adding the block wrapper wins on specificity outright, rather than depending
   on which stylesheet happens to load last. */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-textarea,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type],
.wp-block-woocommerce-cart .wc-block-components-form .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-textarea{
  background:var(--paper-raised);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
}
/* The select's own wrapper paints a background behind the transparent <select>. */
.wp-block-woocommerce-checkout .wc-blocks-components-select,
.wp-block-woocommerce-cart .wc-blocks-components-select{background:transparent;}

/* The resting label doubles as the placeholder, so it has to be readable, not
   just present. --ink-faint was too dim for that when this was written, so the resting
   state uses --ink-soft (6.17:1 light, 8.39:1 dark) and brightens to full
   --ink once the field has content and the label shrinks into its corner. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-cart .wc-block-components-text-input label{color:var(--ink-soft);}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-cart .wc-block-components-text-input.is-active label{color:var(--ink);}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type]:focus{
  border-color:var(--blue);
  outline:2px solid var(--blue);
  outline-offset:1px;
}
.cat-card:hover .cat-link{gap:9px;}
.cat-link svg{width:13px;height:13px;transition:transform 0.15s;}

/* ---------------- product card: WooCommerce block overrides ----------------
   The card grid re-uses .cat-card/.cat-media/.cat-body/.cat-name/.cat-price
   from the category grid, applied as className on WooCommerce's dynamic
   product-image/post-title/product-price/product-button blocks. These rules
   strip WooCommerce's own button/price chrome so the blocks read like the
   rest of the card system instead of default WooCommerce styling. */
.cat-name a{color:inherit;text-decoration:none;}
.cat-name a:hover{color:var(--blue-deep);}
.cat-price .wc-block-components-product-price{margin:0;}
.cat-link{margin-top:auto;padding-top:6px;}
.cat-link .wp-block-button__link{
  background:var(--orange-soft);color:var(--orange-ink);padding:8px 14px;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:0.82rem;
  display:inline-flex;align-items:center;gap:5px;
  transition:background 0.2s, color 0.2s, transform 0.3s var(--ease-bounce);
}
.cat-link .wp-block-button__link::after{content:"\2192";transition:margin-left 0.15s;}
.cat-link .wp-block-button__link:hover::after{margin-left:4px;}
.cat-link .wp-block-button__link:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px);}

/* ---------------- product search / sort bar ---------------- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--line);margin-bottom:28px;}
@media (max-width:480px){
  .shop-toolbar .is-nowrap{flex-wrap:wrap;row-gap:12px;}
  .shop-toolbar .is-nowrap .shop-search{flex:1 1 100%;}
  .shop-toolbar .is-nowrap .shop-search input{width:auto;flex:1;}
  .shop-toolbar .is-nowrap .woocommerce-ordering{flex:1 1 100%;}
}
.shop-count{font-family:var(--mono);font-size:0.82rem;color:var(--ink-faint);}
.shop-search{display:flex;gap:4px;border:1px solid var(--line-strong);border-radius:999px;padding:4px;background:var(--paper-raised);}
.shop-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.shop-search input{border:none;padding:8px 12px;font-family:var(--sans);font-size:0.88rem;color:var(--ink);background:transparent;width:220px;}
.shop-search input:focus{outline:none;}
.shop-search button{border:none;background:var(--navy);color:#fff;padding:8px 16px;cursor:pointer;border-radius:999px;font-family:var(--sans);font-weight:700;}
.shop-search button:hover{background:var(--blue-deep);}
.woocommerce-breadcrumb{font-family:var(--mono);font-size:0.78rem;color:var(--ink-faint);margin-bottom:18px;}
.woocommerce-breadcrumb a{color:var(--ink-faint);text-decoration:underline;}

/* ---------------- shop filters ----------------
   WooCommerce's own Product Filters block (Type + Price), restyled. Sidebar
   beside the grid on desktop; below 601px WooCommerce collapses it into its
   own "Filter products" button and overlay, which we only restyle. */
@media (min-width:901px){
  .shop-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;}
  .shop-filters{position:sticky;top:90px;}
  /* WooCommerce sizes the (non-overlay) panel at a fixed 340px. */
  .shop-filters :is(.wc-block-product-filters__overlay, .wc-block-product-filters__overlay-wrapper, .wc-block-product-filters__overlay-dialog){width:auto;min-width:0;}
  .shop-results .cat-grid{grid-template-columns:repeat(3,1fr) !important;}
}
.shop-filters{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px;margin-bottom:24px;gap:22px !important;
}
@media (max-width:600px){
  .shop-filters{background:none;border:none;padding:0;}
}
.shop-filters .shop-filter-title{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 10px;
}
.shop-filters fieldset{border:none;margin:0;padding:0;min-width:0;}
.shop-filters .wc-block-product-filter-checkbox-list__items{display:flex;flex-direction:column;gap:2px;}
.shop-filters .wc-block-product-filter-checkbox-list__label{
  display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-sm);
  font-size:0.86rem;line-height:1.3;color:var(--ink);cursor:pointer;transition:background 0.15s;
}
.shop-filters .wc-block-product-filter-checkbox-list__label:hover{background:var(--blue-soft);}
.shop-filters .wc-block-product-filter-checkbox-list__count{color:var(--ink-faint);font-family:var(--mono);font-size:0.78rem;margin-left:auto;}
.shop-filters .wc-block-product-filter-checkbox-list__text-wrapper{display:flex;flex:1;gap:6px;}
/* Subcategories (Refrigerators under Appliances...) indent under their parent.
   The depth only exists in the item's context JSON, hence the attribute match. */
.shop-filters .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":1']{padding-left:14px;}
.shop-filters .wc-block-product-filter-checkbox-list__item:not([data-wp-context*='"depth"']) .wc-block-product-filter-checkbox-list__text{font-weight:700;}
.shop-filters input[type=checkbox]{accent-color:var(--orange);}
.shop-filters .wc-block-product-filter-price-slider{--wc-product-filter-price-slider:var(--orange);--wc-product-filter-price-slider-handle:var(--orange);}
/* Scoped to __content: the wrapper doesn't carry the class WooCommerce's own
   input rule expects, so without this the boxes fall back to the browser's
   default ~150px input width and overflow a phone screen. */
.shop-filters .wc-block-product-filter-price-slider__content .text input{
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:0.82rem;padding:7px 8px;
  width:100%;max-width:92px;box-sizing:border-box;
}
.shop-filters .wc-block-product-filter-removable-chips__item{
  background:var(--orange-soft);color:var(--orange-ink);border:none;border-radius:999px;font-size:0.8rem;font-weight:700;
}
.shop-filters .wp-block-button.is-style-outline .wp-block-button__link{
  border-radius:999px;border:1.5px solid var(--line-strong);color:var(--ink);background:transparent;
  padding:7px 16px;font-family:var(--sans);font-size:0.82rem;font-weight:700;
}
/* Mobile: the "Filter products" button, as a pill matching the toolbar. */
.shop-filters .wc-block-product-filters__open-overlay{
  border:1.5px solid var(--line-strong) !important;border-radius:999px;padding:9px 16px !important;
  color:var(--ink) !important;font-family:var(--sans);font-weight:700;font-size:0.88rem;
}
.shop-filters .wc-block-product-filters__overlay-dialog{background:var(--paper-raised);color:var(--ink);}
.shop-filters .wc-block-product-filters__apply{background:var(--orange) !important;color:var(--on-warm) !important;border-radius:999px !important;font-weight:800;}

/* ---------------- sort dropdown ---------------- */
.woocommerce-ordering select.orderby{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid var(--line-strong);background-color:var(--paper-raised);
  color:var(--ink);font-family:var(--sans);font-size:0.85rem;font-weight:600;
  padding:10px 36px 10px 16px;cursor:pointer;border-radius:999px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237E93A3' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
}
.woocommerce-ordering select.orderby:hover{border-color:var(--blue);}
.woocommerce-ordering select.orderby:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}

/* ---------------- pagination ---------------- */
.wp-block-query-pagination{gap:6px !important;margin-top:36px !important;padding-top:28px;border-top:1px solid var(--line);}
.wp-block-query-pagination-numbers{display:flex;gap:4px;}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border-radius:999px;
  font-family:var(--mono);font-size:0.85rem;font-weight:700;color:var(--ink-soft);
  border:1px solid transparent;transition:background 0.2s, border-color 0.2s;
}
a.page-numbers:hover{border-color:var(--line-strong);color:var(--blue-deep);background:var(--blue-soft);}
.page-numbers.current{background:var(--orange);color:var(--on-warm);}
.wp-block-query-pagination-next, .wp-block-query-pagination-previous{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:0.85rem;font-weight:700;color:var(--blue-deep);
  padding:0 6px;
}
.wp-block-query-pagination-next:hover, .wp-block-query-pagination-previous:hover{color:var(--blue);}
.wp-block-query-pagination-previous::before{content:"\2190";}
.wp-block-query-pagination-next::after{content:"\2192";}

/* ---------------- single product ---------------- */
.product-detail{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;padding:44px 0 64px;}
@media (max-width:860px){ .product-detail{grid-template-columns:1fr;} }
.product-detail .woocommerce-product-gallery{border:1px solid var(--line);background:var(--paper-raised);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.product-detail .woocommerce-product-gallery img{width:100%;height:auto;display:block;}
.product-summary .product_title, .product-summary .wp-block-post-title{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-0.03em;color:var(--ink);margin:0 0 12px;}
.product-summary .price, .product-summary .wc-block-components-product-price{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--blue-deep);display:block;margin-bottom:20px;}
.product-summary .price ins{text-decoration:none;}
.product-summary .price del{opacity:0.5;font-size:0.8em;margin-right:8px;}
.product-summary .woocommerce-product-details__short-description{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin-bottom:24px;}
.product-summary .posted_in{display:block;font-size:0.85rem;color:var(--ink-faint);margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.product-summary .posted_in a{color:var(--blue-deep);text-decoration:underline;}
.product-cta-row{margin-top:8px;}
.woocommerce-tabs{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.woocommerce-tabs ul.tabs{display:flex;gap:20px;list-style:none;padding:0;margin:0 0 16px;font-family:var(--mono);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em;}
.woocommerce-tabs ul.tabs a{color:var(--ink-faint);}
.woocommerce-tabs ul.tabs li.active a{color:var(--blue-deep);}
.woocommerce-Tabs-panel{color:var(--ink-soft);font-size:0.96rem;line-height:1.7;}

/* =====================================================================
   Home page sections. The home page content is plain markup; everything
   it looks like is defined here. Element-level resets are wrapped in
   :where(body.home, body.page-template-landing) - the home page and the
   home-style /services/ pages (templates/landing.html) - so they stay at
   element specificity and never reach shop or policy pages.
   ===================================================================== */
:where(body.home, body.page-template-landing) *{box-sizing:border-box;}
:where(body.home, body.page-template-landing) img{max-width:100%;display:block;}
:where(body.home, body.page-template-landing) :is(h1,h2,h3){text-wrap:balance;margin:0;}
:where(body.home, body.page-template-landing) section{padding:88px 0;}
.section-head{max-width:62ch;margin-bottom:44px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------------- hero ---------------- */
.hero{padding:84px 0 100px;}
/* Phones: less air above the headline, so search is in the first screen. */
@media (max-width:640px){ .hero{padding:32px 0 56px;} .eyebrow{margin-bottom:16px;} h1.hero-title{font-size:2.2rem;margin-bottom:16px;} p.hero-sub{margin-bottom:24px;} }
.hero-inner{position:relative;max-width:880px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
}
.eyebrow .dot{width:7px;height:7px;background:var(--orange);border-radius:50%;}
h1.hero-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem, 6vw, 4.3rem);
  line-height:1.02;letter-spacing:-0.04em;
  margin-bottom:24px;
}
.hero-title .accent{color:var(--gold);}
p.hero-sub{
  font-size:1.15rem;color:var(--on-navy-soft);max-width:54ch;margin:0 0 36px;line-height:1.6;
}
/* Hero search: the first thing most visitors want is "do you have X", so
   search is the hero's primary action. Same native GET as the header
   search (/?s=...&post_type=product); no JS. */
.hero-search{
  display:flex;align-items:center;gap:8px;max-width:620px;
  padding:6px 6px 6px 18px;border-radius:999px;
  background:var(--paper-raised);color:var(--ink-faint);
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.5);
  transition:box-shadow 0.2s;
}
.hero-search:focus-within{box-shadow:0 0 0 4px rgba(238,156,35,0.45), 0 18px 40px -12px rgba(0,0,0,0.5);}
.hero-search svg{flex:none;}
/* 16px+ so iOS doesn't zoom the page when the field is focused. */
.hero-search input[type=search]{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  padding:12px 4px;font-family:var(--sans);font-size:1.05rem;color:var(--ink);
}
.hero-search input::placeholder{color:var(--ink-soft);}
.hero-search button{
  flex:none;border:none;cursor:pointer;
  padding:13px 26px;border-radius:999px;
  background:var(--orange);color:var(--on-warm);
  font-family:var(--sans);font-size:0.95rem;font-weight:800;
  transition:transform 0.3s var(--ease-bounce);
}
.hero-search button:hover{transform:scale(1.04);}
@media (max-width:480px){ .hero-search button{padding:13px 18px;} }
.hero-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.hero-chips span{font-size:0.85rem;color:var(--on-navy-soft);margin-right:2px;}
.hero-chips a{
  font-size:0.85rem;font-weight:600;color:var(--on-navy);
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  transition:background 0.2s, border-color 0.2s, transform 0.3s var(--ease-bounce);
}
.hero-chips a:hover{background:rgba(255,255,255,0.14);border-color:var(--gold);transform:translateY(-2px);}
p.hero-note{font-size:0.92rem;color:var(--on-navy-soft);margin:22px 0 52px;}
.hero-note a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.hero-note a:hover{color:#fff;}
.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:820px;}
@media (max-width:900px){ .hero-proof{grid-template-columns:repeat(2,1fr);} }
.proof-item{
  display:flex;flex-direction:column;
  padding:16px 18px;border-radius:var(--r);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform 0.35s var(--ease-bounce), background 0.2s;
}
.proof-item:hover{transform:translateY(-4px) rotate(-1deg);background:rgba(255,255,255,0.09);}
.proof-n{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-0.03em;line-height:1.1;}
.proof-l{font-size:0.8rem;color:var(--on-navy-soft);margin-top:4px;}

/* Service cards linking to the /services/ pages - the home page's only links
   to them. Beside the hero text from 1100px, so the hero isn't left-heavy
   with an empty right half; below that, under the text. The storefront photo
   and opening hours that used to sit here are on the Quezon branch card. */
.hero-services{display:flex;flex-direction:column;gap:14px;position:relative;max-width:560px;margin-top:40px;}
@media (min-width:1100px){
  .hero .shell{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:56px;align-items:center;}
  .hero-services{max-width:none;margin-top:0;}
}
.hero-services-label{font-family:var(--mono);font-size:12px;letter-spacing:0.09em;text-transform:uppercase;color:var(--gold);}
.hero-svc{
  display:block;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(7,31,48,0.82);border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  transition:transform 0.35s var(--ease-bounce), border-color 0.2s;
}
.hero-svc:hover{transform:translateY(-4px);border-color:var(--gold);}
.hero-svc img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;}
.hero-svc-body{display:block;padding:14px 18px 16px;}
.hero-svc-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:#fff;}
.hero-svc-name svg{flex:none;color:var(--gold);transition:transform 0.2s;}
.hero-svc:hover .hero-svc-name svg{transform:translateX(4px);}
.hero-svc-desc{display:block;margin-top:4px;font-size:0.88rem;color:var(--on-navy-soft);}
.hero-services-all{align-self:flex-start;font-size:0.92rem;font-weight:700;color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.hero-services-all:hover{color:#fff;}
/* Under the text, the cards are compact rows - thumbnail beside the name -
   so they don't double the hero's height on phones. */
@media (max-width:1099px){
  .hero-svc{display:flex;}
  .hero-svc img{width:96px;aspect-ratio:auto;flex:none;}
  .hero-svc-body{padding:12px 16px;}
}

/* ---------------- stock announcement ----------------
   One dated line under the hero. Change the date with the text, so a stale
   notice reads as old rather than as a claim about today. */
.announce{background:var(--paper-raised);border-bottom:1px solid var(--line);padding:14px 0;}
p.announce-row{margin-top:0;margin-bottom:0;font-size:0.92rem;color:var(--ink-soft);}
.announce-date{font-weight:700;color:var(--orange-ink);margin-right:6px;}
.announce-row b{color:var(--ink);}
.announce-row a{color:var(--blue-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* Category cards rotate through the brand colours on hover, so the grid
   feels lively without eight competing colours at rest. */
#products .cat-card:nth-child(4n+1){--accent:var(--blue);}
#products .cat-card:nth-child(4n+2){--accent:var(--orange);}
#products .cat-card:nth-child(4n+3){--accent:var(--gold);}
#products .cat-card:nth-child(4n+4){--accent:var(--green);}
#products .cat-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1);
}
#products .cat-card:hover::before{transform:scaleX(1);}

/* Categories sold in the branches but not (yet) online: badge over the
   photo, and the card opens Messenger rather than an empty category page. */
.cat-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:var(--navy-deep);color:var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* ---------------- services (navy) ---------------- */
/* A rounded navy panel floating on the page, rather than a full-bleed band.
   Also the body of the /services/ page, inside its wide content column. */
section.services{
  background:var(--navy);
  color:var(--on-navy);
  border-radius:var(--r-lg);
}
:where(body.home, body.page-template-landing) section.services{margin:0 16px;}
.page-body section.services{padding:56px 0;}
.page-body section.services img{max-width:100%;}
@media (max-width:640px){
  :where(body.home, body.page-template-landing) section.services{margin:0 8px;}
  section.services{border-radius:var(--r);}
  .page-body section.services{padding:36px 0;}
}
/* Straight after the navy hero (the /services/ page), a second navy block
   reads as one dark slab - so there the panel is a plain light section with
   white cards, like the rest of the site's content. */
.hero + section.services{background:none;color:var(--ink);}
.hero + section.services :is(h2.section-title, .svc-name, .svc-steps-title, .step-name){color:var(--ink);}
.hero + section.services :is(p.section-sub, .svc-desc, p.step-desc){color:var(--ink-soft);}
.hero + section.services .section-eyebrow{color:var(--orange-ink);background:var(--orange-soft);}
.hero + section.services .svc-card{background:var(--paper-raised);border-color:var(--line);box-shadow:var(--shadow-sm);}
.hero + section.services .svc-card:hover{background:var(--paper-raised);border-color:var(--line-strong);box-shadow:var(--shadow-lg);}
.hero + section.services .svc-media{background:var(--paper);}
.hero + section.services .svc-cta{color:var(--orange-ink);}
.hero + section.services .svc-card:hover .svc-cta{color:var(--ink);}
.hero + section.services .svc-steps{border-top-color:var(--line);}
.services .section-eyebrow{color:var(--gold);background:rgba(238,156,35,0.14);}
.services h2.section-title{color:#fff;}
.services p.section-sub{color:var(--on-navy-soft);}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{
  position:relative;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r);
  display:flex;flex-direction:column;
  padding:0 0 22px;overflow:hidden;
  transition:transform 0.35s var(--ease-bounce), background 0.2s, border-color 0.2s;
}
.svc-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.09);border-color:rgba(238,156,35,0.5);}
.svc-card-body{padding:18px 22px 0;display:flex;flex-direction:column;gap:10px;flex:1;}
.svc-media{aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,0.06);}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(.2,.7,.2,1);}
.svc-card:hover .svc-media img{transform:scale(1.07);}
.svc-num{
  font-family:var(--display);font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-0.04em;
  color:var(--orange);
}
.svc-name{font-weight:800;font-size:1.06rem;color:#fff;}
.svc-desc{font-size:0.88rem;color:var(--on-navy-soft);line-height:1.55;flex:1;margin:0;}
.svc-cta{font-size:0.85rem;font-weight:700;color:var(--gold);}
.svc-card:hover .svc-cta{color:#fff;}
/* The whole service card opens the quote form. */
.svc-cta::after{content:"";position:absolute;inset:0;}

/* "How a repair works": four numbered steps joined by a dashed line -
   across on desktop, down the left on phones. Unknown cost and process is
   what stops people asking about a repair, so the steps answer that. */
.svc-steps{margin-top:56px;padding-top:44px;border-top:1px solid rgba(255,255,255,0.1);}
.services .svc-steps-title{font-family:var(--display);font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;color:#fff;margin:0 0 28px;}
.services ol.steps{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:none;}
.services .steps li{margin:0;position:relative;display:flex;flex-direction:column;gap:8px;}
.steps li:not(:last-child)::after{
  content:"";position:absolute;top:22px;left:56px;right:-12px;
  border-top:2px dashed rgba(238,156,35,0.4);
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:6px;
  background:var(--orange);color:var(--on-warm);
  font-family:var(--display);font-weight:800;font-size:1.15rem;
  transition:transform 0.35s var(--ease-bounce);
}
.steps li:hover .step-n{transform:scale(1.12) rotate(-8deg);}
.step-name{font-weight:800;font-size:1.02rem;color:#fff;}
p.step-desc{font-size:0.88rem;line-height:1.55;color:var(--on-navy-soft);margin:0;}
@media (max-width:900px){
  .services ol.steps{grid-template-columns:1fr;gap:22px;}
  .steps li{padding-left:62px;min-height:44px;}
  .step-n{position:absolute;left:0;top:0;margin:0;}
  .steps li:not(:last-child)::after{top:52px;bottom:-18px;left:21px;right:auto;border-top:none;border-left:2px dashed rgba(238,156,35,0.4);}
}

/* ---------------- CCTV packages ----------------
   Four priced packages from the IAN Tech Services flyer, as real text rather
   than the flyer image, so prices read on phones, follow light/dark and can
   be found by search. ColorVu cards get the warm accent. */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1100px){ .pkg-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pkg-grid{grid-template-columns:1fr;} }
.pkg-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:var(--r);
  background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform 0.35s var(--ease-bounce), box-shadow 0.3s;
}
.pkg-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.pkg-card.is-colorvu{border:1.5px solid var(--orange);}
.pkg-tier{
  align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);
}
.is-colorvu .pkg-tier{background:var(--orange-soft);color:var(--orange-ink);}
.pkg-body{display:flex;align-items:center;gap:14px;}
.pkg-cam{width:48px;height:32px;flex:none;color:var(--ink-soft);}
.is-colorvu .pkg-cam{color:var(--orange-ink);}
h3.pkg-name{font-family:var(--sans);font-size:0.95rem;font-weight:700;color:var(--ink);margin:0;letter-spacing:0;}
p.pkg-price{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--blue-deep);margin:2px 0 0;}
.is-colorvu p.pkg-price{color:var(--orange-ink);}
.pkg-cta{margin-top:auto;font-size:0.85rem;font-weight:700;color:var(--blue-deep);display:inline-flex;align-items:center;}
.pkg-cta::after{content:"";position:absolute;inset:0;}
.pkg-included{
  margin-top:22px;padding:20px 22px;border-radius:var(--r);
  background:var(--blue-soft);border:1px solid var(--line);
}
.pkg-included-title{display:block;font-weight:800;font-size:0.95rem;color:var(--ink);margin-bottom:12px;}
.pkg-included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:760px){ .pkg-included ul{grid-template-columns:repeat(2,1fr);} }
.pkg-included li{display:flex;align-items:center;gap:10px;font-size:0.92rem;color:var(--ink);}
.pkg-included svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--blue-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
p.pkg-note{margin:14px 0 0;font-size:0.85rem;color:var(--ink-soft);}
.pkg-contact{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:26px;}
.pkg-phone{font-size:0.95rem;color:var(--ink-soft);}
.pkg-phone strong{color:var(--ink);font-family:var(--mono);letter-spacing:0.02em;}
.pkg-phone:hover strong{color:var(--blue-deep);}
.pkg-more{font-size:0.95rem;font-weight:700;color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px;}

/* ---------------- service price guides ----------------
   /services/<service>/ pages (content/services/*.html). Starting prices sit in a real two-column table at every
   width: on phones "Starts at" stacks above the amount rather than the table
   turning into cards, so rows keep their table semantics and nothing scrolls
   sideways. Fees that are not starting prices (diagnostic, home visit) get a
   dashed .pg-fee panel so they can't be read as one. */
.pg-fee{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:16px;padding:20px 22px;
  border-radius:var(--r);background:var(--paper-raised);border:1.5px dashed var(--line-strong);
}
p.pg-fee-price{margin:0;display:flex;flex-direction:column;flex:none;}
.pg-fee-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);}
.pg-fee-amt{font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-0.03em;line-height:1.2;color:var(--ink);white-space:nowrap;}
p.pg-fee-desc{margin:0;flex:1 1 280px;color:var(--ink-soft);line-height:1.6;}
.pg-waived{display:inline;color:var(--ink);background:var(--green-soft);padding:1px 6px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

.pg-table{
  width:100%;margin:18px 0 0;border-collapse:separate;border-spacing:0;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
}
.pg-table :is(th,td){padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line);}
.pg-table thead th{
  border-top:none;padding-top:11px;padding-bottom:11px;background:var(--blue-soft);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-deep);
}
.pg-table :is(thead th:last-child, td){text-align:right;}
.pg-table td{white-space:nowrap;}
.pg-svc{display:block;font-weight:800;color:var(--ink);line-height:1.35;}
.pg-desc{display:block;margin-top:4px;font-weight:400;font-size:0.9rem;line-height:1.55;color:var(--ink-soft);}
.pg-from{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
.pg-amt{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;color:var(--blue-deep);}
.pg-ask{
  display:inline-block;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;
  font-size:0.85rem;font-weight:700;line-height:1.3;color:var(--orange-ink);
  transition:background 0.2s;
}
.pg-ask:hover{background:var(--orange-soft);}
@media (max-width:560px){
  .pg-table :is(th,td){padding:14px;}
  .pg-table td{white-space:normal;}
  .pg-from{display:block;}
  .pg-amt{white-space:nowrap;}
  .pg-ask{text-align:center;}
}
p.pg-note{margin:14px 0 0;padding-left:14px;border-left:3px solid var(--line-strong);font-size:0.92rem;line-height:1.6;color:var(--ink-soft);}

.pg-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.4em;}
@media (max-width:640px){ .pg-facts{grid-template-columns:1fr;} }
.pg-fact{padding:20px 22px;border-radius:var(--r);background:var(--paper-raised);border:1px solid var(--line);}
.pg-fact p{margin:0;color:var(--ink-soft);line-height:1.6;}

p.pg-request-ask{margin:16px 0 4px;font-weight:700;}

/* ---------------- home-style service pages ----------------
   templates/landing.html (the /services/ pages): the home page's sections,
   plus a shorter hero with a photo on the right on wide screens. */
.hero--page{padding:64px 0 76px;}
.hero--page h1.hero-title{font-size:clamp(2.2rem,5vw,3.6rem);}
.hero--page p.hero-sub{margin-bottom:28px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
ul.hero-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:0.92rem;font-weight:600;color:var(--on-navy);}
.hero-points svg{flex:none;color:#5FD196;}
/* Beside the text from 1100px (the .hero .shell grid above); under it below. */
.hero-media{
  display:block;margin:36px 0 0;max-width:560px;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.hero-media img{width:100%;height:100%;object-fit:cover;}
@media (min-width:1100px){ .hero-media{margin:0;max-width:none;} }
/* The navy panel floats with a gap on all sides, so it never butts against
   the hero above it or the footer below. */
:where(body.page-template-landing) section.services{margin:16px;}
@media (max-width:640px){ :where(body.page-template-landing) section.services{margin:8px;} }
/* The steps panel on its own, without a service grid above it. */
.svc-steps:first-child{margin-top:0;padding-top:0;border-top:none;}
/* Two paper sections in a row would stack 176px of padding. */
:where(body.page-template-landing) section:not(.hero, .services) + section:not(.hero, .services, .contact-section){padding-top:0;}
p.page-footnote{margin:48px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:0.85rem;line-height:1.6;color:var(--ink-faint);}
/* Price guide layout: fees and tables side by side on wide screens. */
.pg-fees, .pg-tables{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pg-tables{gap:32px;margin-top:40px;}
@media (max-width:900px){ .pg-fees, .pg-tables{grid-template-columns:1fr;} }
.pg-fees .pg-fee{margin-top:0;}
h3.pg-h{font-family:var(--display);font-size:1.25rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink);}
.pg-fact h3{font-family:var(--display);font-size:1.1rem;font-weight:800;color:var(--ink);margin:0 0 8px;}
ul.pg-include{margin:6px 0 0;padding-left:1.3em;color:var(--ink-soft);line-height:1.7;}
.pg-include li::marker{color:var(--orange-ink);}

/* ---------------- voice / quote ---------------- */
.voice-inner{
  position:relative;max-width:820px;margin:0 auto;text-align:center;
}
.voice-inner::before{
  content:"\201C";display:block;
  font-family:Georgia, serif;font-size:7rem;line-height:0.7;height:0.55em;
  color:var(--orange);
}
.voice-quote{
  font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.5rem);
  color:var(--ink);letter-spacing:-0.03em;line-height:1.2;margin-bottom:16px;
}
.voice-en{color:var(--ink-soft);font-size:1rem;margin:0 auto 16px;max-width:60ch;}
.voice-src{
  display:inline-block;font-family:var(--mono);font-size:0.76rem;color:var(--ink-soft);letter-spacing:0.02em;
  background:var(--gold-soft);padding:6px 14px;border-radius:999px;transform:rotate(-1.5deg);
}

/* ---------------- reviews ---------------- */
:where(body.home, body.page-template-landing) section.reviews{padding:0 0 88px;}
.reviews .shell{display:flex;flex-direction:column;align-items:center;text-align:center;}
.reviews-head{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.reviews-score{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--ink);letter-spacing:-0.04em;}
.reviews-stars{color:var(--gold-ink);letter-spacing:3px;font-size:1.3rem;}
.reviews-count{color:var(--ink-soft);font-size:0.95rem;}
.review-card{
  background:var(--paper-raised);border:1px solid var(--line);padding:26px 30px;max-width:480px;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);transform:rotate(-1deg);
  transition:transform 0.4s var(--ease-bounce);
}
.review-card:hover{transform:rotate(0) scale(1.03);}
.review-stars{color:var(--gold-ink);letter-spacing:2px;margin-bottom:10px;font-size:1rem;}
.review-quote{font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 12px;}
.review-src{font-family:var(--mono);font-size:0.78rem;color:var(--ink-faint);}

/* ---------------- branches ---------------- */
:where(body.home, body.page-template-landing) section#branches{padding-top:0;}
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){ .branch-grid{grid-template-columns:1fr;} }
.branch-card{
  background:var(--paper-raised);border:1px solid var(--line);padding:24px;
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform 0.35s var(--ease-bounce), box-shadow 0.3s;
}
.branch-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.branch-photo{aspect-ratio:4/3;overflow:hidden;margin:-24px -24px 20px;background:var(--blue-soft);}
.branch-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(.2,.7,.2,1);}
.branch-card:hover .branch-photo img{transform:scale(1.06);}
.branch-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.12rem;color:var(--ink);margin-bottom:8px;}
.branch-name::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;}
.branch-addr{font-size:0.92rem;color:var(--ink-soft);line-height:1.5;margin-bottom:18px;min-height:44px;}
.branch-actions{display:flex;gap:10px;flex-wrap:wrap;}
.branch-actions a{
  font-size:0.84rem;font-weight:700;color:var(--blue-deep);
  border:1px solid var(--line-strong);padding:8px 16px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.branch-actions a:first-child{background:var(--navy);border-color:var(--navy);color:#fff;}
.branch-actions a:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-deep);}

/* Opening hours, rendered by [ian_branch_hours]; the status badge is filled
   in by site-hours.js and stays hidden without it, leaving the plain hours. */
.branch-hours{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:0.88rem;color:var(--ink-soft);margin:-8px 0 18px;}
.branch-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--line);color:var(--ink-soft);
}
.branch-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.branch-status.is-open{background:var(--green-soft);color:var(--green);}
.branch-status.is-open::before{animation:pulse-green 2s infinite;}
@keyframes pulse-green{ 0%{box-shadow:0 0 0 0 currentColor;} 70%,100%{box-shadow:0 0 0 6px transparent;} }
/* Footer: just the hours under each branch name. The live badge stays on the
   home page cards - in a footer column it wraps to two cramped lines. */
.footer-branch .branch-hours{margin:2px 0 0;font-size:0.82rem;color:var(--on-navy-soft);}
.footer-branch .branch-status{display:none;}

/* ---------------- contact / quote form ---------------- */
:where(body.home, body.page-template-landing) section.contact-section{
  background:var(--paper-raised);border-top:1px solid var(--line);
}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-quick{display:flex;flex-direction:column;gap:12px;margin-top:28px;}
.contact-quick a{
  display:flex;align-items:center;gap:10px;
  font-size:0.95rem;font-weight:700;color:var(--ink);
  border:1px solid var(--line-strong);padding:14px 20px;border-radius:999px;
  transition:transform 0.3s var(--ease-bounce), background 0.2s, border-color 0.2s;
}
.contact-quick a::after{content:"\2192";margin-left:auto;color:var(--orange);transition:transform 0.2s;}
.contact-quick a:hover{border-color:var(--blue);color:var(--blue-deep);background:var(--blue-soft);transform:translateX(4px);}
.contact-form-card{background:var(--paper);border:1px solid var(--line);padding:32px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}

/* minmax(0,1fr): without it the column grows to the inputs' intrinsic width
   (CF7 prints size="40") and pushes the card off narrow screens. */
.contact-form-card .wpcf7 form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.contact-form-card .wpcf7 p{margin:0;}
.contact-form-card .wpcf7 label{display:block;color:var(--ink);font-size:0.9rem;font-weight:700;margin-bottom:6px;}
.contact-form-card .wpcf7 input[type="text"],
.contact-form-card .wpcf7 input[type="email"],
.contact-form-card .wpcf7 input[type="tel"],
.contact-form-card .wpcf7 select,
.contact-form-card .wpcf7 textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line-strong);padding:12px 16px;border-radius:var(--r-sm);
  font-family:var(--sans);font-size:0.95rem;color:var(--ink);background:var(--paper-raised);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.contact-form-card .wpcf7 textarea{min-height:120px;resize:vertical;}
.contact-form-card .wpcf7 input[type="file"]{max-width:100%;font-family:var(--sans);font-size:0.88rem;color:var(--ink-soft);}
.contact-form-card .wpcf7 input[type="file"]::file-selector-button{
  margin-right:12px;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--paper-raised);color:var(--ink);font:inherit;font-weight:700;
}
.contact-form-card .wpcf7 input[type="file"]:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
/* Checkbox groups (the security site survey's "interested in"). */
.contact-form-card .wpcf7 fieldset{border:none;margin:0;padding:0;min-width:0;}
.contact-form-card .wpcf7 legend{padding:0;margin-bottom:8px;color:var(--ink);font-size:0.9rem;font-weight:700;}
.contact-form-card .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px 20px;}
.contact-form-card .wpcf7-list-item{margin:0;}
.contact-form-card .wpcf7-list-item label{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer;}
.contact-form-card .wpcf7 input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--blue-deep);}
.contact-form-card .wpcf7 input:focus,
.contact-form-card .wpcf7 select:focus,
.contact-form-card .wpcf7 textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);}
.contact-form-card .wpcf7 .wpcf7-submit{
  background:var(--orange);color:var(--on-warm);border:none;padding:14px 30px;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:0.95rem;cursor:pointer;justify-self:start;
  transition:transform 0.3s var(--ease-bounce), box-shadow 0.2s;
}
.contact-form-card .wpcf7 .wpcf7-submit:hover{transform:translateY(-2px);}
.contact-form-card .wpcf7-not-valid-tip{color:var(--orange);font-size:0.82rem;margin-top:4px;}
.contact-form-card .wpcf7-response-output{border:1px solid var(--line-strong);padding:10px 14px;margin-top:4px;font-size:0.9rem;border-radius:var(--r-sm);}
.contact-form-card .wpcf7-spinner{margin-left:8px;}
.ian-hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;
}

/* ---------------- scroll reveal ----------------
   site-motion.js tags cards and section heads with .reveal, adds .is-in as
   they scroll into view, then removes both so the hover lift/tilt rules get
   transform back. Only JS ever adds .reveal, so without it nothing is hidden. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease var(--d,0s), transform 0.7s cubic-bezier(.2,.7,.2,1) var(--d,0s) !important;}
.reveal.is-in{opacity:1;transform:none;}

/* ---------------- Messenger links ----------------
   Messenger is how most customers here reach a shop, so it's the primary
   contact action site-wide. .msg puts the Messenger glyph before any link;
   one masked icon, coloured by currentColor, so it suits every button style. */
.msg::before{
  content:"";display:inline-block;flex:none;vertical-align:-0.2em;
  width:1.15em;height:1.15em;margin-right:0.45em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8c-4.6 0-8.2 3.4-8.2 7.8 0 2.3 1 4.3 2.6 5.7v3l2.9-1.6c.9.2 1.8.4 2.7.4 4.6 0 8.2-3.4 8.2-7.6S14.6 1.8 10 1.8zm.9 10.3-2.1-2.2-4 2.2 4.4-4.7 2.1 2.2 4-2.2-4.4 4.7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8c-4.6 0-8.2 3.4-8.2 7.8 0 2.3 1 4.3 2.6 5.7v3l2.9-1.6c.9.2 1.8.4 2.7.4 4.6 0 8.2-3.4 8.2-7.6S14.6 1.8 10 1.8zm.9 10.3-2.1-2.2-4 2.2 4.4-4.7 2.1 2.2 4-2.2-4.4 4.7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Flex containers already space the icon with gap. */
.btn.msg::before, .contact-quick .msg::before, .product-ask.msg::before{margin-right:0;}
.contact-quick a.is-primary{background:var(--orange);color:var(--on-warm);border-color:transparent;}
.contact-quick a.is-primary::after{color:inherit;}
.contact-quick a.is-primary:hover{background:var(--orange);color:var(--on-warm);}
/* Product page: stock and price questions go straight to a person. */
.product-ask{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:11px 20px;border-radius:999px;border:1.5px solid var(--line-strong);
  font-family:var(--sans);font-size:0.9rem;font-weight:700;color:var(--ink);
  transition:background 0.2s, border-color 0.2s, transform 0.3s var(--ease-bounce);
}
.product-ask:hover{background:var(--blue-soft);border-color:var(--blue);transform:translateY(-2px);}

/* ---------------- mobile action bar ----------------
   Call, Messenger and Directions pinned within thumb reach on phones and
   tablets - the three things a visitor on mobile most often came to do.
   Hidden on cart and checkout, where WooCommerce pins its own checkout
   button to the bottom of the screen and the two would overlap. */
.mobile-actions{display:none;}
@media (max-width:768px){
  body:not(.woocommerce-cart):not(.woocommerce-checkout) .mobile-actions{
    display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:6px;
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;
    padding:6px;border-radius:999px;
    background:rgba(7,31,48,0.9);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 12px 32px rgba(0,0,0,0.35);
    animation:bar-in 0.5s var(--ease-bounce);
  }
  /* Room at the end of the footer so the bar never covers its last line.
     Inside the footer rather than on body, so the gap stays footer navy. */
  body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-footer{padding-bottom:calc(108px + env(safe-area-inset-bottom));}
}
@keyframes bar-in{ from{transform:translateY(120%);} to{transform:none;} }
.mobile-actions a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:0 10px;border-radius:999px;
  font-family:var(--sans);font-size:0.86rem;font-weight:700;color:var(--on-navy);
  transition:background 0.2s, transform 0.2s var(--ease-bounce);
}
.mobile-actions a:active{transform:scale(0.95);}
.mobile-actions a:hover{background:rgba(255,255,255,0.1);}
.mobile-actions a.is-primary{background:var(--orange);color:var(--on-warm);}

/* ---------------- footer ---------------- */
.site-footer{
  position:relative;
  background:var(--navy-deep);color:var(--on-navy-soft);padding:60px 0 28px;margin-top:0;
}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange);}
/* Five columns since Policies was added. The brand column keeps its wider
   share; the rest divide what's left evenly. */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
@media (max-width:1000px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr;} }
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand img{width:40px;height:40px;border-radius:50%;}
.footer-brand span{font-family:var(--display);font-weight:800;color:#fff;font-size:0.98rem;}
.footer-desc{font-size:0.88rem;line-height:1.6;max-width:32ch;}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:700;}
.footer-col a, .footer-col p{display:block;font-size:0.9rem;color:var(--on-navy-soft);margin-bottom:10px;line-height:1.5;}
.footer-col a{transition:color 0.2s, transform 0.2s;}
.footer-col a:hover{color:#fff;transform:translateX(3px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;font-family:var(--mono);color:var(--on-navy-soft);}
/* Legal links sit in the footer's bottom rule, the conventional place people
   look for them. Inherits the row's mono sizing so it reads as fine print
   rather than navigation. */
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:var(--on-navy-soft);}
.footer-legal a:hover{color:#fff;}

/* ---------------- base ---------------- */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
/* Theme global styles set heading fonts at element specificity; body-scoped
   wins without !important, so every heading uses the site font. */
body :is(h1,h2,h3,h4,h5,h6){font-family:var(--display);}
a{text-decoration:none;}
/* The theme's colour palette (a DB Global Styles record) was built for a blue
   site: "foreground" is white and "background" #243B8C. Our tokens override
   body text and background, but anything else WordPress colours from the
   palette - links in page content, WooCommerce block text/borders - came out
   white, invisible on the light theme. Pointing the palette at our tokens
   makes all of it follow light/dark. Set on body so it wins over the :root
   definitions regardless of stylesheet order. */
body{
  --wp--preset--color--foreground:var(--ink);
  --wp--preset--color--foreground-alt:var(--ink);
  --wp--preset--color--background:var(--paper);
}
/* Links inside page text (policies, etc. - .page-body, so not the home
   page's designed sections): blue and underlined in both themes. */
/* Only plain links: anything with a class (buttons, the price guide's
   quote links, Messenger links) is styled where it's defined. */
.page-body .wp-block-post-content a:where(:not([class])){color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px;}
.page-body .wp-block-post-content a:where(:not([class])):hover{color:var(--blue);}

::selection{background:var(--gold);color:var(--navy-deep);}
a:focus-visible, button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1;transform:none;}
}