/* =========================================================
   Neeotech — WordPress / Astra / WooCommerce layer.
   Base tokens and sections come from site.css (same as the static preview).
   ========================================================= */

/* ---------- Astra resets ---------- */
body.neeo { background: var(--c-white); font-family: var(--f-body); color: var(--c-text); }
body.neeo h1, body.neeo h2, body.neeo h3, body.neeo h4 { font-family: var(--f-head); color: var(--c-navy); }
body.neeo .section--navy h2, body.neeo .section--navy h3,
body.neeo .hero h1, body.neeo .page-hero h1, body.neeo .footer h2 { color: var(--c-white); }
body.neeo a:focus-visible, body.neeo button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.neeo-full #content, .neeo-full .site-content { padding: 0; margin: 0; background: var(--c-white); }
.neeo.ast-separate-container #content { background: var(--c-surface); }
.neeo address { font-style: normal; margin: 0; }
.neeo .topbar__tag { margin: 0; }
.neeo .footer__bottom p { margin: 0; }
.neeo .header .nav__list { margin: 0; }
.neeo .header .nav__list li { list-style: none; }
.neeo .current-menu-item > a { border-bottom-color: var(--c-accent); }
.neeo .btn { text-decoration: none; line-height: 1.2; }
.neeo .btn svg { width: 20px; height: 20px; flex: none; }
.neeo .nav__toggle { color: var(--c-navy); background: transparent; padding: 0; }
.neeo .nav__toggle svg { flex: none; width: 24px; min-width: 24px; height: 24px; max-width: none; }
.neeo .topbar svg, .neeo .card__icon svg, .neeo .checks svg, .neeo .hero__points svg { flex: none; max-width: none; }
.neeo .section.clients { padding: var(--s-5) 0; }
.neeo .clients__list, .neeo .cards, .neeo .steps, .neeo .stats, .neeo .checks, .neeo .card__list,
.neeo .hero__points, .neeo .info-list, .neeo .topbar__list, .neeo .footer ul { margin: 0; padding: 0; }
/* About photos (editable in Website Content): always a square frame, photo fills it without distortion */
.neeo .about__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Number boxes: equal 2×2 grid (4 boxes never leave one alone on a row), with space before the tick list */
.neeo .stats { margin: var(--s-3) 0; }
.neeo .stats li { flex: 1 1 calc(50% - var(--s-2)); min-width: 0; }

/* ---------- Extra buttons ---------- */
.btn--wa { background: #157A41; color: var(--c-white); }
.btn--wa:hover, .btn--wa:focus { background: #0F6334; color: var(--c-white); }
.btn--outline { border-color: var(--c-navy); color: var(--c-navy); background: var(--c-white); }
.btn--outline:hover { background: var(--c-navy); color: var(--c-white); }
.btn--sm { min-height: 42px; padding: 9px 16px; font-size: .875rem; }
.btn--icon { padding: 9px 12px; }

/* ---------- Page hero (inner pages, catalogue) ---------- */
.page-hero { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 100%); color: #D5DEEB; padding: var(--s-5) 0; }
.page-hero .container { gap: var(--s-1); align-items: flex-start; }
/* Same on-dark treatment as .hero / .section--navy: light accent text, badge sized to its content */
.page-hero .eyebrow { color: var(--c-accent-on-dark); background: rgba(var(--c-accent-rgb), .16); align-self: flex-start; }
.page-hero .hl { color: var(--c-accent-on-dark); background: none; padding: 0; }
.page-hero h1 { margin: 0; font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); }
.page-hero p { margin: 0; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: #D5DEEB; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .875rem; color: var(--c-muted); margin-bottom: var(--s-1); }
.breadcrumb a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Category chips ---------- */
.chips ul { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  background: var(--c-white); color: var(--c-navy); font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.chip:hover { border-color: var(--c-navy); }
.chip.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-navy); font-weight: 600; }

/* ---------- Product grid (catalogue + related) ---------- */
.neeo ul.products, .neeo.woocommerce ul.products, .neeo .woocommerce ul.products {
  display: flex !important; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none;
  grid-template-columns: none;
}
.neeo ul.products::before, .neeo ul.products::after { display: none !important; }
.neeo ul.products li.product.pcard {
  flex: 1 1 calc(25% - var(--s-3)); max-width: calc(25% - 18px); min-width: 220px; width: auto; margin: 0; padding: 0;
  display: flex; flex-direction: column; float: none;
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow var(--t), transform var(--t);
}
.neeo ul.products li.product.pcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.pcard__img { display: flex; justify-content: center; background: var(--c-white); border-bottom: 1px solid var(--c-border); padding: var(--s-2); }
.pcard__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 !important; transition: transform .4s ease; }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-2); flex: 1; }
.pcard__cat { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); }
.neeo .pcard__title { font-size: 1rem; line-height: 1.35; margin: 0; }
.pcard__title a { color: var(--c-navy); text-decoration: none; }
.pcard__title a:hover { text-decoration: underline; }
.pcard__spec { font-size: .875rem; color: var(--c-muted); margin: 0; }
.pcard__actions { display: flex; gap: var(--s-1); margin-top: auto; padding-top: var(--s-1); }
.pcard__actions .btn--navy { flex: 1; }

/* Pagination */
.neeo .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; justify-content: center; margin-top: var(--s-4); }
.neeo .woocommerce-pagination ul li { border: 0; }
.neeo .woocommerce-pagination ul li a, .neeo .woocommerce-pagination ul li span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: var(--radius-btn); color: var(--c-navy); padding: 0 12px;
}
.neeo .woocommerce-pagination ul li span.current { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* ---------- Single product ---------- */
.single-wrap { padding-top: var(--s-4); }
.neeo div.product { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; }
.neeo div.product .woocommerce-product-gallery { flex: 1 1 420px; min-width: 0; width: auto !important; float: none !important; margin: 0 !important; }
.neeo div.product .summary { flex: 1 1 380px; min-width: 0; width: auto !important; float: none !important; margin: 0 !important; }
.neeo div.product .woocommerce-tabs, .neeo div.product .related, .neeo div.product .up-sells { flex: 1 1 100%; width: 100%; }
.neeo .woocommerce-product-gallery__image { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.neeo div.product .product_title { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); margin-bottom: var(--s-2); }
.neeo div.product .woocommerce-product-details__short-description { color: var(--c-muted); font-size: 1.0625rem; }
.neeo div.product .product_meta { font-size: .875rem; color: var(--c-muted); display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-3); }
.neeo div.product .product_meta a { color: var(--c-navy); }

.enquire {
  display: flex; flex-direction: column; gap: var(--s-1);
  background: rgba(var(--c-accent-rgb), .08); border: 1px solid rgba(var(--c-accent-rgb), .45); border-radius: var(--radius);
  padding: var(--s-3); margin: var(--s-3) 0;
}
.enquire__title { font-family: var(--f-head); font-weight: 700; font-size: 1.25rem; color: var(--c-navy); margin: 0; }
.enquire__text { margin: 0; color: var(--c-text); }
.enquire__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.enquire__actions .btn { flex: 1 1 180px; }
.enquire__actions .btn--block { flex-basis: 100%; }

/* Tabs */
.neeo div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0; margin: 0 0 var(--s-3); border-bottom: 1px solid var(--c-border); }
.neeo div.product .woocommerce-tabs ul.tabs::before { display: none; }
.neeo div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; }
.neeo div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; font-family: var(--f-head); font-weight: 600; color: var(--c-muted); border-bottom: 3px solid transparent; }
.neeo div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-navy); border-bottom-color: var(--c-accent); }
.neeo div.product .woocommerce-tabs .panel h3 { font-size: 1.125rem; margin-top: var(--s-3); }
.neeo div.product .woocommerce-tabs .panel ul { margin: 0 0 var(--s-2) 1.25em; list-style: disc; }
.neeo table.shop_attributes { border: 1px solid var(--c-border); border-radius: var(--radius); }
.neeo table.shop_attributes th { width: 180px; background: var(--c-surface); color: var(--c-navy); font-weight: 600; padding: 12px 16px; }
.neeo table.shop_attributes td { padding: 12px 16px; font-style: normal; }
.neeo table.shop_attributes td p { margin: 0; }
.neeo .related > h2 { font-size: 1.5rem; margin: var(--s-4) 0 var(--s-3); }

/* ---------- Contact form (Contact Form 7) ---------- */
.contact__alt { color: var(--c-muted); display: flex; gap: var(--s-1); align-items: flex-start; }
.contact__wa-icon { width: 22px; height: 22px; flex: none; color: #157A41; margin-top: 2px; }
.enquiry-wa { margin-top: var(--s-2); }
.enquiry-wa[hidden] { display: none; }
.neeo-cf7 .form { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.neeo-cf7 .field p, .neeo-cf7 .field br { display: contents; }
.neeo-cf7 .wpcf7-form-control-wrap { display: block; }
.neeo-cf7 input:not([type=submit]):not([type=hidden]), .neeo-cf7 select, .neeo-cf7 textarea {
  font: inherit; color: var(--c-text); background: var(--c-white); width: 100%;
  border: 1px solid #B8C3D3; border-radius: var(--radius-btn); padding: 12px 14px; min-height: 48px;
}
.neeo-cf7 textarea { min-height: 130px; height: 130px; resize: vertical; }
.neeo-cf7 input:focus, .neeo-cf7 select:focus, .neeo-cf7 textarea:focus { outline: 3px solid rgba(var(--c-accent-rgb), .45); outline-offset: 0; border-color: var(--c-navy); }
.neeo-cf7 .wpcf7-submit {
  width: 100%; min-height: 48px; border: 0; border-radius: var(--radius-btn); cursor: pointer;
  background: var(--c-accent); color: var(--c-navy); font-family: var(--f-head); font-weight: 600; font-size: 1rem;
}
.neeo-cf7 .wpcf7-submit:hover { background: var(--c-accent-hover); color: var(--c-navy); }
.neeo-cf7 .wpcf7-not-valid-tip { color: #B42318; font-size: .8125rem; margin-top: 4px; }
.neeo-cf7 .wpcf7-response-output { margin: var(--s-2) 0 0 !important; border-radius: var(--radius-btn); padding: 12px 14px !important; }
.neeo-cf7 .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* ---------- Vision (About page) ---------- */
.vision .row { align-items: center; gap: var(--s-5); }
.vision__media { flex: 1 1 440px; min-width: 0; }
.vision__media img { border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, .3); }
.vision__text { flex: 1 1 440px; min-width: 0; }
.checks--light li { color: #E6ECF4; }
.checks--light svg { color: var(--c-accent-on-dark); }
.vision__policy { border-left: 4px solid var(--c-accent); background: rgba(255, 255, 255, .06); border-radius: 6px; padding: var(--s-2) var(--s-3); }
.vision__policy h3 { color: var(--c-white); font-size: 1.0625rem; margin-bottom: 6px; }
.vision__policy p { margin: 0; color: #D5DEEB; }

/* ---------- Google reviews ---------- */
.greviews { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s-3) var(--s-4); }
.greviews__score { display: flex; align-items: center; gap: var(--s-2); }
.greviews__num { font-family: var(--f-head); font-size: 2.75rem; font-weight: 700; color: var(--c-navy); line-height: 1; }
.greviews__stars { display: flex; gap: 2px; color: #B7791F; }
.greviews__stars svg { width: 22px; height: 22px; }
.greviews__meta { margin: 4px 0 0; color: var(--c-muted); font-size: .9375rem; }
.greviews__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.greviews__meta strong { color: var(--c-navy); }
.greviews__g { width: 18px; height: 18px; flex: none; }
.greviews .btn-row { gap: var(--s-1); }
.greviews__widget { width: 100%; }

/* ---------- Generic pages (About, Services, Privacy …) ---------- */
.neeo:not(.neeo-full) .site-content .ast-container { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.neeo .entry-content a { color: var(--c-navy); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .neeo ul.products li.product.pcard { flex-basis: calc(33.333% - var(--s-3)); max-width: calc(33.333% - 16px); }
}
@media (max-width: 767px) {
  .neeo ul.products { gap: var(--s-2); }
  .neeo ul.products li.product.pcard { flex-basis: calc(50% - var(--s-2)); max-width: calc(50% - 8px); min-width: 0; }
  .pcard__body { padding: 12px; }
  .pcard__img { padding: 8px; }
  .neeo .pcard__title { font-size: .9375rem; }
  .pcard__actions { gap: 6px; }
  .pcard__actions .btn--navy { font-size: .8125rem; padding: 8px 6px; white-space: nowrap; }
  .pcard__more { display: none; }
  .neeo div.product { gap: var(--s-3); }
  .chips ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .chip { white-space: nowrap; }
  .neeo table.shop_attributes th { width: 40%; }
}
@media (max-width: 339px) {
  .neeo ul.products li.product.pcard { flex-basis: 100%; max-width: 100%; }
}