/*
* Alltools Geelong — consolidated stylesheet.
* Stage 2: header + footer (pixel-matched to previous astra-child render).
* Sections will grow stage-by-stage. Class naming stays in the legacy `alltools-*` BEM scheme
* so this CSS transplants 1:1 from the old astra-child/style.css.
*/
/* ============================================================
Block-theme global resets
============================================================ */
body { margin: 0; background: #fff !important; }
.wp-site-blocks { margin: 0 !important; background: #fff; }
main.wp-block-group { padding-top: 0; padding-bottom: 0; margin-top: 0 !important; }
/* Ensure no gap between template parts */
header.wp-block-template-part,
footer.wp-block-template-part { margin: 0 !important; }
/* Hide the block theme's default post title on pages we don't want to label */
.home .wp-block-post-title,
.page-id-3029 .wp-block-post-title { display: none; }
/* ============================================================
Alltools Custom Header
Ported verbatim from legacy astra-child/style.css (lines 2030-2158),
with the cart-icon rules rewritten for our own [atg_cart_icon] markup.
============================================================ */
.alltools-header { font-family: "Poppins", sans-serif; width: 100%; position: relative; z-index: 999; }
.alltools-header *, .alltools-header *::before, .alltools-header *::after { box-sizing: border-box; }
.alltools-header a { text-decoration: none; }
/* Top Bar */
.alltools-header__topbar { background: #000 url("/wp-content/uploads/2025/08/header-bg-image.webp") center center / cover no-repeat; }
.alltools-header__topbar-inner { max-width: 1520px; margin: 0 auto; display: flex; align-items: center; padding: 12px 25px; }
.alltools-header__logo { flex-shrink: 0; display: block; }
.alltools-header__logo img { width: 400px; height: auto; display: block; }
.alltools-header__contact { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 50px; }
.alltools-header__contact-item { display: flex; align-items: center; gap: 10px; color: #fff; white-space: nowrap; }
.alltools-header__contact-item:hover { color: #fff; opacity: 0.85; }
.alltools-header__contact-icon { font-size: 15px; color: #fff; }
.alltools-header__contact-text { display: flex; flex-direction: column; }
.alltools-header__contact-label { font-size: 12px; font-weight: 400; color: #fff; }
.alltools-header__contact-value { font-size: 16px; font-weight: 500; color: #fff; }
/* Cart icon (rendered by [atg_cart_icon] shortcode) */
.alltools-header__cart { flex-shrink: 0; display: flex; align-items: center; padding: 0 10px; }
.alltools-header__cart-link { position: relative; color: #fff; font-size: 24px; display: inline-flex; align-items: center; }
.alltools-header__cart-link:hover { color: #fff; opacity: 0.85; }
.alltools-header__cart-count {
position: absolute; top: -8px; right: -10px;
background: #FC1C03; color: #fff;
font-size: 11px; font-weight: 700;
min-width: 18px; height: 18px; line-height: 18px;
text-align: center; border-radius: 50%; padding: 0 4px;
}
/* Nav Bar */
.alltools-header__navbar { background: #FC1C03; }
.alltools-header__navbar-inner { max-width: 1520px; margin: 0 auto; display: flex; align-items: center; padding: 0 25px; }
.alltools-header__search-area { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; }
.alltools-header__shop-btn { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #FC1C03; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; padding: 0 14px; border: 2px solid #fff; border-radius: 4px; text-align: center; white-space: nowrap; height: 44px; line-height: 44px; transition: background 0.3s, color 0.3s; gap: 6px; }
a.alltools-header__shop-btn:visited { color: #FC1C03; }
.alltools-header__shop-btn--desktop { min-width: 150px; }
.alltools-header__shop-btn:hover { background: #FC1C03; color: #fff !important; border-color: #fff; }
/* Shop dropdown (hidden on desktop, shown on mobile) */
.alltools-header__shop-dropdown { display: none; position: relative; }
.alltools-header__shop-dropdown-toggle { cursor: pointer; border: 2px solid #fff; background: #fff; color: #FC1C03; }
.alltools-header__shop-dropdown-toggle i { font-size: 10px; transition: transform 0.2s; }
.alltools-header__shop-dropdown-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.alltools-header__shop-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 4px; z-index: 100; overflow: hidden; margin-top: 4px; }
.alltools-header__shop-dropdown-menu.active { display: block; }
.alltools-header__shop-dropdown-menu a { display: block; padding: 12px 16px; color: #333 !important; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid #eee; }
.alltools-header__shop-dropdown-menu a:last-child { border-bottom: none; }
.alltools-header__shop-dropdown-menu a:hover { background: #FC1C03; color: #fff !important; }
/* Search form inside navbar */
.alltools-header__search-area .search-form-wrap { flex: 1; }
.alltools-header__search-area .header-search-wrap { display: flex; align-items: center; width: 100%; }
.alltools-header__search-area .search-field-wrap { flex: 1; }
.alltools-header__search-area .search-input { width: 100%; padding: 0 15px; border: none; font-family: "Poppins", sans-serif; font-size: 14px; outline: none; height: 44px; border-radius: 4px 0 0 4px !important; }
.alltools-header__search-area .submit-btn-wrap { flex-shrink: 0; }
.alltools-header__search-area .search-btn { background: #000; color: #fff; border: none; padding: 0 20px; cursor: pointer; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; transition: background 0.3s; height: 44px; border-radius: 0 4px 4px 0 !important; }
.alltools-header__search-area .search-btn:hover { background: #333; }
/* Free shipping badge in navbar */
.alltools-header__free-shipping {
color: #fff; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
display: flex; align-items: center; gap: 8px; padding: 0 20px; white-space: nowrap;
}
.alltools-header__free-shipping i { font-size: 18px; }
/* Desktop nav */
.alltools-header__nav-desktop { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.alltools-header__menu { list-style: none; margin: 0; padding: 0; display: flex; }
.alltools-header__menu li { position: relative; }
.alltools-header__menu > li > a { display: block; color: #fff; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 400; text-transform: uppercase; padding: 14px 23px; transition: background 0.3s, color 0.3s; }
.alltools-header__menu > li:last-child > a { padding-right: 0; }
.alltools-header__menu > li > a:hover { background: #fff; color: #FC1C03; }
.alltools-header__menu li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 250px; list-style: none; margin: 0; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; }
.alltools-header__menu li:hover > ul.sub-menu { display: block; }
.alltools-header__menu li ul.sub-menu li a { display: block; padding: 10px 20px; color: #000; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 400; transition: background 0.3s, color 0.3s; }
.alltools-header__menu li ul.sub-menu li a:hover { background: #FC1C03; color: #fff; }
/* Hamburger */
.alltools-header__hamburger { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 10px; margin-left: auto; }
/* Slide-out Drawer */
.alltools-header__drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9998; }
.alltools-header__drawer-overlay.active { display: block; }
.alltools-header__drawer { position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; background: #000; z-index: 9999; transition: right 0.35s ease; overflow-y: auto; padding: 20px; }
.alltools-header__drawer.active { right: 0; }
.alltools-header__drawer-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; position: absolute; top: 15px; right: 15px; padding: 5px 10px; }
.alltools-header__drawer-contact { display: flex; flex-direction: column; gap: 12px; padding: 15px 0 25px; border-bottom: 1px solid #333; margin-bottom: 15px; }
.alltools-header__drawer-contact a { color: #fff; font-family: "Poppins", sans-serif; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.alltools-header__drawer-contact a:hover { color: #FC1C03; }
.alltools-header__drawer-contact i { font-size: 14px; width: 20px; text-align: center; }
.alltools-header__drawer-menu { list-style: none; margin: 0; padding: 0; }
.alltools-header__drawer-menu li a { display: block; color: #fff; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid #222; transition: color 0.3s; }
.alltools-header__drawer-menu li a:hover { color: #FC1C03; }
.alltools-header__drawer-menu li ul.sub-menu { list-style: none; margin: 0; padding: 0 0 0 20px; }
.alltools-header__drawer-menu li ul.sub-menu li a { font-size: 15px; font-weight: 400; text-transform: none; padding: 8px 0; }
.alltools-header__drawer-actions { padding-top: 20px; }
.alltools-header__drawer-shop-btn { display: block; background: #FC1C03; color: #fff; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 700; text-align: center; padding: 14px 20px; border: 2px solid #FC1C03; transition: background 0.3s, color 0.3s; }
.alltools-header__drawer-shop-btn:hover { background: transparent; color: #FC1C03; }
/* Header — Tight desktop (1200–1344): just drop the ABOUT US link so the
orange bar stops overflowing. CATALOGUE + search stay. */
@media (min-width: 1200px) and (max-width: 1344px) {
.alltools-header__nav-desktop { display: none; }
.alltools-header__navbar-inner { padding: 8px 16px; gap: 8px; }
.alltools-header__shop-btn--desktop { padding: 8px 14px; font-size: 13px; height: 40px; line-height: 40px; }
.alltools-header__search-area .search-input,
.alltools-header__search-area .search-btn { height: 40px; }
}
/* Header — Tablet (787–1199)
Top bar: keep Address + Phone; drop Email. Keep Account + Cart right.
Orange bar: hamburger + full-width search + Free Shipping. All other
nav items (Shop by Category/Brand, Catalogue, About) collapse into
the drawer menu. */
@media (min-width: 787px) and (max-width: 1199px) {
.alltools-header__topbar-inner { padding: 12px 20px; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
.alltools-header__contact { gap: 18px; flex-wrap: nowrap; justify-content: center; flex: 1 1 auto; min-width: 0; }
.alltools-header__contact a[href^="mailto:"] { display: none; }
/* Drop the ALLCAPS label row at tablet; show icon + value inline so
Address + Phone sit on one line. */
.alltools-header__contact .alltools-header__contact-label { display: none; }
.alltools-header__contact .alltools-header__contact-value { font-size: 14px; }
.alltools-header__contact .alltools-header__contact-item { gap: 8px; }
.alltools-header__logo img { max-width: 220px; }
.alltools-header__navbar-inner { padding: 8px 20px; gap: 10px; }
.alltools-header__search-area {
display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; order: 2;
}
.alltools-header__search-area .search-form,
.alltools-header__search-area form {
display: flex; background: #fff; border-radius: 4px; overflow: hidden; height: 40px;
}
.alltools-header__search-area .search-input {
height: 40px; border-radius: 4px 0 0 4px !important;
}
.alltools-header__search-area .search-btn {
height: 40px; border-radius: 0 4px 4px 0 !important; padding: 0 18px;
}
.alltools-header__shop-btn--desktop { display: none !important; }
.alltools-header__shop-dropdown { display: none; }
.alltools-header__nav-desktop { display: none; }
.alltools-header__catalogue-btn { display: none; }
.alltools-header__hamburger { display: flex; align-items: center; order: 1; margin-right: 4px; }
.alltools-header__free-shipping { order: 3; }
}
/* Drawer — shared tablet styling (borrowed from mobile template).
Slides in from the left, white bg, red header, clean list. */
@media (min-width: 787px) and (max-width: 1199px) {
.alltools-header__drawer-overlay { display: none; }
.alltools-header__drawer-overlay.active { display: block; }
.alltools-header__drawer {
padding: 0 !important;
width: 86% !important; max-width: 360px;
right: auto !important;
left: -360px;
background: #fff !important;
transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
color: #111;
}
.alltools-header__drawer.active { left: 0 !important; right: auto !important; }
.alltools-header__drawer-header {
display: flex !important; align-items: center; justify-content: space-between;
background: #FC1C03; color: #fff; padding: 14px 16px;
}
.alltools-header__drawer-title {
font-family: "Poppins", sans-serif;
font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.alltools-header__drawer-close {
background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer;
padding: 4px 6px; line-height: 1;
}
.alltools-header__drawer-menu {
list-style: none; padding: 0; margin: 0;
max-height: calc(100vh - 280px); overflow-y: auto;
}
.alltools-header__drawer-menu li { border-bottom: 1px solid #E5E7EB; }
.alltools-header__drawer-menu li a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; color: #111; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
}
.alltools-header__drawer-menu li a::after {
content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
color: #5A6372; font-size: 12px;
}
.alltools-header__drawer-menu li a > span { display: inline-flex; align-items: center; gap: 8px; }
.alltools-header__drawer-menu .drawer-menu__count {
font-size: 12px; color: #5A6372; font-weight: 500; margin-left: auto;
}
.alltools-header__drawer-menu li.drawer-menu__brands a {
background: #F5F5F5; font-weight: 700; color: #111;
}
.alltools-header__drawer-menu li.drawer-menu__brands i { color: #FC1C03; margin-right: 8px; }
.alltools-header__drawer-menu .sub-menu { display: none; }
.alltools-header__drawer-actions {
padding: 16px; display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid #E5E7EB;
}
.alltools-header__drawer-btn {
display: block; text-align: center; padding: 12px;
font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px;
text-decoration: none;
}
.alltools-header__drawer-btn--primary { background: #FC1C03; color: #fff !important; border: 0; }
.alltools-header__drawer-btn--primary:hover { background: #D91800; }
.alltools-header__drawer-btn--outline { background: #fff; color: #111 !important; border: 1.5px solid #111; }
.alltools-header__drawer-contact {
padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid #E5E7EB; background: #F5F5F5;
}
.alltools-header__drawer-contact a {
color: #5A6372; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 12px;
display: flex; align-items: center; gap: 8px;
}
.alltools-header__drawer-contact i { color: #FC1C03; width: 14px; }
.alltools-header__drawer-shop-btn { display: none !important; }
}
/* Header — Mobile */
@media (max-width: 786px) {
.alltools-header__topbar-inner { padding: 12px 10px; justify-content: space-between; }
.alltools-header__logo img { width: 200px; }
.alltools-header__contact { display: none; }
.alltools-header__cart { padding: 0; font-size: 22px; }
.alltools-header__cart-count { top: -6px; right: -10px; font-size: 10px; min-width: 18px; height: 18px; line-height: 18px; }
.alltools-header__navbar-inner { padding: 5px 10px; }
.alltools-header__search-area { flex: 1; }
.alltools-header__shop-btn--desktop { display: none !important; }
.alltools-header__shop-dropdown { display: block; }
.alltools-header__shop-btn { padding: 8px 12px; font-size: 13px; height: 38px; line-height: 38px; }
.alltools-header__search-area .search-input { padding: 10px 12px; font-size: 13px; }
.alltools-header__search-area .search-btn { padding: 10px 14px; font-size: 13px; }
.alltools-header__search-area .search-btn .btn-text { display: none; }
.alltools-header__free-shipping { display: none; }
}
/* ============================================================
Alltools Custom Footer
Ported verbatim from legacy astra-child/style.css (lines 2165-2364).
============================================================ */
.alltools-footer { font-family: "Poppins", sans-serif; background: #000; width: 100%; }
.alltools-footer a { text-decoration: none; }
.alltools-footer__inner {
max-width: 1520px; margin: 0 auto;
display: flex; flex-wrap: wrap;
padding: 20px 15px 5px;
background: url("/wp-content/uploads/2024/09/footer-bg-banner.webp") left center / contain no-repeat;
}
/* Left column */
.alltools-footer__left {
width: 20%;
display: flex; flex-direction: column; justify-content: flex-end;
gap: 8px; padding-bottom: 35px;
}
a.alltools-footer__btn,
a.alltools-footer__btn:visited {
display: inline-block;
background: #FC1C03; color: #fff !important;
font-family: "Poppins", sans-serif; font-weight: 500;
text-transform: uppercase;
padding: 6px 12px; border: 1px solid #FC1C03;
transition: background 0.3s, color 0.3s;
text-align: center; font-size: 12px;
width: auto; align-self: flex-start;
}
a.alltools-footer__btn:hover { background: transparent; color: #FC1C03 !important; }
.alltools-footer__btn--fb i { margin-left: 5px; }
/* Center column */
.alltools-footer__center {
width: 60%;
display: flex; flex-direction: column; align-items: center;
gap: 0; padding: 0;
}
.alltools-footer .alltools-footer__logo,
img.alltools-footer__logo { max-width: 400px !important; width: 100%; height: auto; }
.alltools-footer__nav { width: 100%; margin: 5px 0 50px; }
.alltools-footer__menu {
list-style: none; margin: 0; padding: 0;
display: flex; justify-content: space-around;
}
.alltools-footer__menu li a {
color: #fff; font-family: "Poppins", sans-serif;
font-size: 14px; padding: 8px 12px; transition: color 0.3s;
}
.alltools-footer__menu li a:hover { color: #FC1C03; }
.alltools-footer__copyright { color: #fff; font-size: 13px; text-align: center; margin: 0; padding: 5px 0; }
.alltools-footer__copyright--mobile { display: none; }
/* Right column */
.alltools-footer__right {
width: 20%;
display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
gap: 8px; padding-bottom: 35px;
}
.alltools-footer__ais-badge {
display: inline-block; color: #fff; font-size: 13px;
padding: 3px 6px; border: 1px solid #FC1C03; border-radius: 5px;
text-align: center; width: 212px;
}
.alltools-footer__ais-link { display: block; }
.alltools-footer__ais-logo { width: 70%; height: auto; display: block; margin-left: auto; }
/* Footer — Tablet (787–1199)
Stack into one column: buttons row, logo, 2×3 menu grid, AIS centred. */
@media (min-width: 787px) and (max-width: 1199px) {
.alltools-footer__inner { flex-direction: column; align-items: center; padding: 24px 20px 12px; gap: 12px; }
.alltools-footer__left,
.alltools-footer__center,
.alltools-footer__right { width: 100%; padding: 0; }
.alltools-footer__left {
flex-direction: row; justify-content: center; align-items: center;
gap: 10px; padding-bottom: 8px;
}
a.alltools-footer__btn { align-self: auto; }
.alltools-footer__center { align-items: center; }
.alltools-footer__logo { max-width: 300px; }
.alltools-footer__nav { margin: 10px 0 8px; }
.alltools-footer__menu {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-items: center;
gap: 2px 16px;
max-width: 680px; margin: 0 auto;
}
.alltools-footer__menu li a {
font-size: 13px; white-space: nowrap; padding: 6px 8px;
}
.alltools-footer__right {
flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 4px 0 16px;
}
.alltools-footer__ais-badge { margin: 0 auto; }
.alltools-footer__ais-link { margin: 0 auto; }
.alltools-footer__ais-logo { margin: 0 auto; }
}
/* ============================================================
Shop archive layout — sidebar + product grid
Ported from astra-child/style.css (lines 3214-3253 + 2499-2533).
============================================================ */
.ats-shop-page { width: 100%; }
.ats-shop-inner { max-width: 1520px; margin: 0 auto; padding: 10px 25px 30px; box-sizing: border-box; }
.ats-shop-row { display: flex; align-items: flex-start; gap: 30px; }
.ats-shop-sidebar { flex: 0 0 20%; max-width: 20%; position: sticky; top: 20px; }
.ats-shop-products { flex: 1 1 0%; min-width: 0; }
.ats-sorting-wrap {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.ats-sorting-wrap .woocommerce-result-count { margin: 0; font-size: 13px; color: #666; }
.ats-sorting-wrap .woocommerce-ordering select { font-size: 13px; padding: 6px 10px; }
.ats-shop-products ul.products {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.ats-shop-products ul.products li.product,
.ats-shop-products ul.products li.product.first,
.ats-shop-products ul.products li.product.last {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
.ats-shop-products ul.products::before, .ats-shop-products ul.products::after { content: none !important; display: none !important; }
.ats-mobile-filter-btn, .ats-mobile-filter-modal,
.ats-product-mobile-filter-btn, .ats-product-mobile-modal { display: none !important; }
/* Mobile product filter modal — slides from right, full-height, overlay dims the page */
.ats-product-mobile-modal.active,
.ats-mobile-filter-modal.active { display: block !important; position: fixed; inset: 0; z-index: 9997; }
.ats-mobile-filter-modal.active .ats-mobile-filter-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ats-mobile-filter-modal.active .ats-mobile-filter-drawer {
position: absolute; top: 0; right: 0; bottom: 0;
width: 86%; max-width: 380px; background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,0.25);
display: flex; flex-direction: column; overflow: hidden;
}
.ats-mobile-filter-modal.active .ats-mobile-filter-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: #FC1C03; color: #fff;
}
.ats-mobile-filter-modal.active .ats-mobile-filter-header h3 {
margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
}
.ats-mobile-filter-modal.active .ats-mobile-filter-close {
background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.ats-mobile-filter-modal.active .ats-mobile-filter-body { flex: 1; overflow-y: auto; padding: 10px 14px 20px; }
.ats-mobile-filter-modal .ats-shop-sidebar--mobile-clone { display: block !important; position: static !important; max-width: 100% !important; flex: unset !important; }
.ats-product-mobile-modal .ats-product-mobile-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ats-product-mobile-modal .ats-product-mobile-drawer {
position: absolute; top: 0; right: 0; bottom: 0;
width: 86%; max-width: 380px; background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,0.25);
display: flex; flex-direction: column; overflow: hidden;
}
.ats-product-mobile-modal .ats-mobile-filter-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: #FC1C03; color: #fff;
}
.ats-product-mobile-modal .ats-mobile-filter-header h3 {
margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
}
.ats-product-mobile-modal .ats-product-mobile-close {
background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.ats-product-mobile-modal .ats-product-mobile-body { flex: 1; overflow-y: auto; padding: 10px 14px 20px; }
.ats-product-mobile-modal .ats-product-sidebar--mobile-clone { display: block !important; position: static !important; max-width: 100% !important; flex: unset !important; }
body.drawer-open { overflow: hidden; }
@media (max-width: 768px) {
.ats-mobile-filter-btn, .ats-product-mobile-filter-btn { display: block !important; }
}
/* Sidebar back bar (brand archive pages) */
.ats-back-bar { background: #333; padding: 0; margin: 0 0 12px; }
/* Single-product: desktop back bar lives inside sidebar, mobile bar spans full width */
.ats-back-bar--mobile { display: none; }
.ats-back-bar--desktop { display: block; }
@media (max-width: 768px) {
.ats-back-bar--mobile { display: flex; }
.ats-back-bar--desktop { display: none; }
}
a.ats-back-link, a.ats-back-link:visited {
display: flex; align-items: center; gap: 8px;
color: #fff !important;
font-family: "Poppins", sans-serif;
font-size: 13px; font-weight: 500;
text-decoration: none; padding: 10px 14px;
transition: color 0.2s;
}
a.ats-back-link:hover { color: #FC1C03 !important; }
a.ats-back-link i { font-size: 11px; }
/* Sidebar filter title bar */
.ats-filter-title {
background: #333; color: #fff;
font-size: 14px; font-weight: 700;
text-transform: uppercase;
padding: 10px 14px; margin: 0;
letter-spacing: 0.5px;
}
.ats-filter-title--brand { margin-top: 20px; }
/* Category tree */
ul.ats-cat-filter { list-style: none; margin: 0; padding: 0; border: 1px solid #ddd; border-top: none; }
ul.ats-cat-filter > li { border-bottom: 1px solid #eee; }
ul.ats-cat-filter > li:last-child { border-bottom: none; }
.ats-cat-row { display: flex; align-items: center; padding: 8px 14px; }
.ats-cat-row a, ul.ats-cat-filter > li > a { flex: 1; color: #333; text-decoration: none; font-size: 14px; padding: 8px 14px; }
.ats-cat-row a { padding: 0; }
ul.ats-cat-filter > li > a { display: flex; align-items: center; justify-content: space-between; }
.ats-cat-row a:hover, ul.ats-cat-filter > li > a:hover { color: #FC1C03; }
.current-cat > a, .current-cat > .ats-cat-row > a { font-weight: 700; color: #FC1C03 !important; }
.ats-cat-count { font-size: 12px; color: #999; margin-left: auto; white-space: nowrap; }
.ats-cat-row .ats-cat-count { margin-left: 8px; }
.ats-cat-toggle {
background: none; border: 1px solid #ddd; border-radius: 3px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px; line-height: 1;
color: #666; margin-right: 8px; padding: 0; flex-shrink: 0;
}
.ats-cat-toggle:hover { border-color: #FC1C03; color: #FC1C03; }
ul.ats-cat-children { list-style: none; margin: 0; padding: 0 0 6px; }
ul.ats-cat-children li { display: flex; align-items: center; justify-content: space-between; }
ul.ats-cat-children li a { font-size: 13px; color: #555; text-decoration: none; padding: 5px 14px 5px 44px; flex: 1; }
ul.ats-cat-children li a:hover { color: #FC1C03; }
ul.ats-cat-children .current-cat a { color: #FC1C03; font-weight: 600; }
ul.ats-cat-children .ats-cat-count { padding-right: 14px; }
/* Brand filter */
ul.ats-brand-filter { list-style: none; margin: 0; padding: 0; border: 1px solid #ddd; border-top: none; }
.ats-brand-item { border-bottom: 1px solid #eee; }
.ats-brand-item:last-child { border-bottom: none; }
.ats-brand-link {
display: flex; align-items: center;
padding: 8px 14px; text-decoration: none; color: #333;
font-size: 14px; gap: 10px; transition: background 0.2s;
}
.ats-brand-link:hover { background: #f9f9f9; color: #333; }
.ats-brand-item.active .ats-brand-link { background: #fff5f2; font-weight: 600; }
.ats-brand-radio {
display: inline-block; width: 18px; height: 18px;
border: 2px solid #ccc; border-radius: 50%;
flex-shrink: 0; position: relative;
}
.ats-brand-radio.checked { border-color: #FC1C03; }
.ats-brand-radio.checked::after {
content: ""; position: absolute;
top: 3px; left: 3px;
width: 8px; height: 8px;
background: #FC1C03; border-radius: 50%;
}
.ats-brand-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ats-brand-name { flex: 1; }
.ats-brand-item .ats-cat-count { margin-left: auto; }
/* Archive description (category/brand SEO text wrapper). Parent categories get the rich
P7b template (grid + headings + subcat-also); sub-categories get a tight paragraph. */
.ats-archive-description {
margin-bottom: 1.5rem;
padding: 1.25rem 1.5rem;
background: #fafafa;
border-left: 4px solid #f5a623;
border-radius: 4px;
font-size: 0.94rem;
line-height: 1.65;
color: #333;
}
.ats-archive-description p { margin: 0 0 0.75rem 0; }
.ats-archive-description p:last-child { margin-bottom: 0; }
.ats-archive-description strong { color: #222; }
.ats-archive-description h2 {
font-size: 1.25rem;
font-weight: 700;
margin: 1.5rem 0 0.75rem;
color: #1a1a1a;
}
.ats-archive-description h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.ats-archive-description a {
color: #e5430a;
text-decoration: none;
}
.ats-archive-description a:hover { text-decoration: underline; }
/* ATG category archive H1 — from Customizer CSS */
.atg-archive-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 18px;
padding-bottom: 8px;
border-bottom: 3px solid #e5430a;
line-height: 1.2;
}
@media (max-width: 767px) {
.atg-archive-title { font-size: 1.5rem; }
}
/* ============================================================
Single Product — 20/80 sidebar + back button
Ported from astra-child/style.css (lines 2369-2425).
============================================================ */
.ats-product-layout {
display: flex;
align-items: flex-start;
gap: 25px;
max-width: 1520px;
margin: 0 auto;
padding: 20px 25px;
box-sizing: border-box;
}
.ats-product-sidebar {
flex: 0 0 20%;
max-width: 20%;
position: sticky;
top: 20px;
}
.ats-product-content {
flex: 1 1 0%;
min-width: 0;
}
@media (max-width: 992px) {
.ats-product-sidebar { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 768px) {
.ats-product-layout { flex-direction: column; padding: 15px 10px; }
.ats-product-sidebar { display: none; }
.ats-product-content { width: 100%; }
}
/* Hide WC's own page title on single product (we have the product H1 inside content) */
.single-product .wp-block-post-title { display: none !important; }
/* Force the product gallery to show — WC starts it at opacity:0 and expects its JS init to fade it in.
We override so the image is visible even if WC's gallery JS doesn't initialise. */
.single-product .woocommerce-product-gallery { opacity: 1 !important; position: relative; }
/* Layout: two-column gallery + summary */
.single-product div.product { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 0; align-items: flex-start; }
.single-product .woocommerce-product-gallery-wrap { flex: 1 1 48%; max-width: 48%; position: relative; }
.single-product .summary.entry-summary { flex: 1 1 48%; max-width: 48%; margin: 0 !important; }
.single-product .woocommerce-tabs-wrap,
.single-product .up-sells,
.single-product .related { flex: 1 1 100%; width: 100%; margin-top: 0; }
/* Gallery wrapper border */
.single-product .woocommerce-product-gallery__wrapper { border: 1px solid #e0e0e0; padding: 10px; background: #fff; }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
/* Hide the default Sale! badge on single-product (brand logo sits where the badge would) */
.single-product .summary .onsale,
.single-product .ats-product-content > div.product > .onsale,
.single-product span.onsale:not(.onsale--gallery) { display: none !important; }
/* Title */
.single-product h1.product_title {
font-size: 1.6rem;
font-weight: 700;
color: #000;
margin: 0 0 12px;
line-height: 1.25;
}
/* Categories above title */
.single-product .summary .posted_in--top {
display: block;
color: #e5430a;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 4px;
}
.single-product .summary .posted_in--top a { color: #e5430a; text-decoration: none; }
.single-product .summary .posted_in--top a:hover { color: #b8360a; }
/* Hide duplicate categories inside product_meta (we already rendered them above) */
.single-product .summary .product_meta .posted_in,
.single-product .summary .product_meta .tagged_as { display: none; }
/* Price */
.single-product .summary p.price { font-size: 1.35rem; font-weight: 700; color: #000; margin: 0 0 14px; }
.single-product .summary p.price del { color: #888; font-weight: 400; font-size: 1rem; margin-right: 6px; }
.single-product .summary p.price ins { text-decoration: none; color: #000; }
/* Short description */
.single-product .summary .woocommerce-product-details__short-description { margin-bottom: 18px; color: #333; line-height: 1.55; }
/* Availability */
.single-product .summary p.stock { font-weight: 500; color: #2a9d5c; margin: 0 0 14px; }
/* Quantity + add to cart row */
.single-product form.cart { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.single-product form.cart .quantity .qty {
border: 1px solid #ccc;
padding: 8px 10px;
width: 60px;
text-align: center;
border-radius: 4px;
}
.single-product .single_add_to_cart_button {
background-color: #FC1C03 !important;
color: #fff !important;
font-weight: 700;
padding: 12px 28px !important;
border-radius: 30px !important;
border: none !important;
font-size: 15px;
text-transform: none;
transition: background 0.3s;
}
.single-product .single_add_to_cart_button:hover {
background-color: #d91800 !important;
color: #fff !important;
}
/* Product meta row (barcode / brand) */
.single-product .summary .product_meta { font-size: 0.85rem; color: #444; padding-top: 12px; margin-top: 12px; border-top: 1px solid #eee; }
.single-product .summary .product_meta a { color: #e5430a; text-decoration: none; font-weight: 600; }
/* Brand logo tile inside gallery — top-left */
.single-product .woocommerce-product-gallery .brand-logo {
position: absolute;
top: 12px;
left: 12px;
width: 80px;
height: 80px;
z-index: 10;
background: #fff;
padding: 6px;
border-radius: 4px;
overflow: visible;
box-sizing: border-box;
}
.single-product .woocommerce-product-gallery .brand-logo img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block;
}
/* Thumbnails row below main image */
.single-product .flex-control-thumbs { display: flex; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { flex: 0 0 auto; width: calc((100% - 36px) / 4); max-width: 120px; aspect-ratio: 1 / 1; }
.single-product .flex-control-thumbs li img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 3px;
cursor: pointer;
padding: 4px;
box-sizing: border-box;
}
.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover { border-color: #e5430a; }
/* Tabs */
.single-product .woocommerce-tabs ul.tabs {
list-style: none;
padding: 0;
margin: 24px 0 0;
border-bottom: 1px solid #ddd;
display: flex;
}
.single-product .woocommerce-tabs ul.tabs li {
margin: 0 4px 0 0;
padding: 10px 20px;
background: #f5f5f5;
border: 1px solid #ddd;
border-bottom: none;
border-radius: 4px 4px 0 0;
cursor: pointer;
}
.single-product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom: 1px solid #fff; margin-bottom: -1px; font-weight: 700; }
.single-product .woocommerce-tabs ul.tabs li a { color: #333; text-decoration: none; }
.single-product .woocommerce-tabs .panel { padding: 20px 0; }
/* Gallery + summary: stack full-width on tablet and mobile.
At desktop (≥1200) they sit 48/48 via the rule above.
!important because a later rule (~line 1782) sets a hard 46/50 split
without a media query and would otherwise override. */
@media (max-width: 1199px) {
.single-product div.product { flex-direction: column; }
.single-product .woocommerce-product-gallery-wrap,
.single-product .summary.entry-summary { max-width: 100% !important; flex: 1 1 100% !important; flex-basis: 100% !important; }
}
/* ============================================================
P2 Product Description Styles
(Classes emitted by atg-csv-pipeline-p2-research HTML template
into the product's description tab — render the brand badge, part number,
pills, features list, spec tables, pro tips, callouts, material tags, etc.)
Ported verbatim from legacy Customizer Additional CSS (lines 17-249).
============================================================ */
.woocommerce div.product .woocommerce-tabs .wc-tab .brand-badge {
display: inline-block;
background: #1a1a1a; color: #fff;
font-size: 11px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
padding: 3px 10px; border-radius: 3px;
margin-bottom: 10px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab h1 {
font-size: 1.4rem; color: #1a1a1a;
margin-bottom: 4px; border-bottom: none; padding-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .part-number {
font-size: 0.85rem; color: #5a6372; margin-bottom: 18px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .part-number span { font-weight: 600; color: #222; }
.woocommerce div.product .woocommerce-tabs .wc-tab .short-desc {
font-size: 1rem; margin-bottom: 20px;
padding-left: 12px; border-left: 4px solid #e5430a;
line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pills {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pill {
background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 20px;
padding: 4px 14px; font-size: 0.82rem; font-weight: 600; color: #1a1a1a;
}
.woocommerce div.product .woocommerce-tabs .wc-tab h2 {
font-size: 1.05rem; color: #1a1a1a;
margin: 24px 0 10px; padding-bottom: 5px;
border-bottom: 2px solid #e0e0e0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features { list-style: none; padding: 0; }
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features li {
padding: 5px 0 5px 24px; position: relative;
font-size: 0.93rem; line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features li::before {
content: "\2714"; position: absolute; left: 0;
color: #e5430a; font-size: 0.8rem; top: 7px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .materials {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .material-tag {
background: #fff5f2; border: 1px solid #f5bfa0; color: #e5430a;
font-size: 0.82rem; font-weight: 700;
padding: 4px 12px; border-radius: 4px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .callout {
background: #f5f5f5; border-left: 4px solid #1a1a1a;
padding: 12px 16px; border-radius: 0 6px 6px 0;
font-size: 0.9rem; margin: 16px 0; line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-type {
display: inline-flex; align-items: flex-start; gap: 10px;
background: #fff5f2; border: 1px solid #f5bfa0; border-radius: 6px;
padding: 8px 14px; margin: 10px 0 18px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-arrow { font-size: 1.3rem; color: #e5430a; line-height: 1; }
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-label { font-weight: 700; color: #e5430a; font-size: 0.9rem; }
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-desc { font-size: 0.82rem; color: #5a6372; }
.woocommerce div.product .woocommerce-tabs .wc-tab .pro-tip {
background: #f2faf5; border-left: 4px solid #2a9d5c;
padding: 10px 14px; border-radius: 0 6px 6px 0;
font-size: 0.88rem; margin: 12px 0 20px; line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pro-tip strong { color: #1a6e3c; }
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table {
width: 100%; border-collapse: collapse;
font-size: 0.85rem; margin-bottom: 8px; margin-top: 8px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table caption {
text-align: left; font-weight: 700; color: #1a1a1a;
font-size: 0.9rem; padding: 0 0 8px; caption-side: top;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table th {
background: #1a1a1a; color: #fff;
padding: 8px 10px; text-align: left;
font-weight: 600; font-size: 0.82rem;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table td {
padding: 7px 10px; border-bottom: 1px solid #e0e0e0;
vertical-align: middle; color: #222;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table tr:nth-child(even) td { background: #f5f5f5; }
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table .highlight td {
background: #fff3eb; font-weight: 700; color: #e5430a;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .meta-row {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 0.8rem; color: #5a6372;
margin-top: 24px; padding-top: 14px;
border-top: 1px solid #e0e0e0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .meta-row span strong { color: #222; }
/* Supplier warranty / authorised dealer trust block */
.supplier-warranty {
border-left: 4px solid #2980b9;
background: #f0f7fb;
padding: 14px 18px;
margin: 20px 0;
font-size: 0.95rem;
line-height: 1.5;
color: #222;
border-radius: 0 4px 4px 0;
}
.supplier-warranty strong { color: #2980b9; display: block; margin-bottom: 4px; font-size: 1rem; }
.supplier-warranty a { color: #2980b9; text-decoration: underline; font-weight: 600; }
.supplier-warranty a:hover { color: #1a5276; }
/* ============================================================
P7b category SEO content — subcategory tiles + "also in" links
(Classes generated by atg-csv-pipeline-p7b-category-seo skill.
Ported from legacy Customizer Additional CSS so content keeps matching.)
============================================================ */
.subcat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 20px 0 24px;
align-items: stretch;
}
.subcat-tile {
display: flex;
flex-direction: column;
padding: 18px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: all 0.2s ease;
position: relative;
}
/* Only the description fills; the wpautop-wrapped CTA
stays natural size and pins to bottom */
.subcat-tile > p:first-of-type { flex: 1 1 auto; }
.subcat-tile > p:has(.subcat-tile-cta) { flex: 0 0 auto; margin-top: auto; }
.subcat-tile:hover {
border-color: #e5430a;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transform: translateY(-2px);
cursor: pointer;
}
.subcat-tile h3 {
margin: 0 0 8px;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.subcat-tile h3 a {
color: #1a1a1a;
text-decoration: none;
position: relative;
z-index: 2;
}
.subcat-tile h3 a:hover { color: #e5430a; }
.subcat-tile p {
flex: 1;
margin: 0 0 12px;
font-size: 0.88rem;
line-height: 1.45;
color: #5a6372;
}
.subcat-tile-cta {
display: inline-block;
margin-top: auto;
font-size: 0.85rem;
font-weight: 600;
color: #e5430a;
text-decoration: none;
}
.subcat-tile-cta:hover {
color: #b8360a;
text-decoration: underline;
}
/* Whole-tile clickable — CTA's ::after stretches across the tile */
.subcat-tile .subcat-tile-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.subcat-also {
margin: 8px 0 24px;
padding-top: 10px;
font-size: 0.88rem;
color: #5a6372;
}
.subcat-also a {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #999;
}
.subcat-also a:hover {
color: #e5430a;
border-bottom-color: #e5430a;
}
@media (max-width: 1023px) { .subcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
.subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.subcat-tile { padding: 14px; }
.subcat-tile h3 { font-size: 0.95rem; }
}
@media (max-width: 420px) { .subcat-grid { grid-template-columns: 1fr; } }
/* Shop archive responsive */
@media (max-width: 1200px) {
.ats-shop-products ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 992px) {
.ats-shop-sidebar { flex: 0 0 25%; max-width: 25%; }
.ats-shop-products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
.ats-shop-inner { padding: 15px 10px; }
.ats-shop-sidebar { display: none !important; }
.ats-shop-row { display: block; }
.ats-shop-products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}
/* ============================================================
WooCommerce product card (shop loop tile)
Ported from astra-child/style.css (lines 43-88, 213-216, 447-454, 2716-2732).
Used everywhere products render: shop, archives, home on-sale, single-product related.
============================================================ */
.woocommerce .woocommerce-loop-product__link,
.woocommerce .woocommerce-loop-product__link:visited,
.woocommerce .woocommerce-loop-product__link:hover {
display: block !important;
text-decoration: none;
color: #111 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: #111 !important; }
.woocommerce .woocommerce-LoopProduct-link .brand-logo,
.woocommerce li.product .brand-logo {
display: block !important;
position: absolute;
top: 8px;
left: 8px;
width: 44px;
height: 44px;
overflow: hidden;
z-index: 2;
border-radius: 3px;
background: #fff;
}
.woocommerce .woocommerce-LoopProduct-link .brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.woocommerce .woocommerce-product-gallery .brand-logo {
z-index: 999;
position: absolute;
width: 80px;
left: 10px;
top: 10px;
}
.woocommerce .woocommerce-LoopProduct-link .brand-logo img { margin-bottom: 0 !important; }
.woocommerce ul.products li.product a > img { margin-top: 0; margin-bottom: 10px; }
.woocommerce .products .woocommerce-loop-product__title { word-break: break-word; }
/* Card container */
.woocommerce-shop li.product,
.woocommerce li.product {
margin-bottom: 30px !important;
border: 1px solid #d3d3d3;
border-radius: 6px;
padding: 52px 12px 12px !important; /* top padding = logo height + 4px gap, so image sits just below the flush-corner logo */
background: #fff;
display: flex !important;
flex-direction: column !important;
position: relative;
text-align: center;
transition: box-shadow 0.2s, border-color 0.2s;
box-sizing: border-box;
}
.woocommerce-shop li.product:hover,
.woocommerce li.product:hover {
border-color: #FC1C03;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Keep the link un-positioned so the brand-logo (position:absolute) anchors to li.product (the card), not the link */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link { position: static !important; display: block; }
.woocommerce ul.products li.product a img {
margin: 0 auto 8px !important;
max-height: 180px;
width: auto !important;
object-fit: contain;
}
/* Category line under title */
.woocommerce ul.products li.product .atg-loop-category {
display: block;
color: #666;
font-size: 13px;
font-weight: 400;
margin: 4px 0 10px;
}
/* Centered price + button */
.woocommerce ul.products li.product .price {
text-align: center;
font-size: 16px;
font-weight: 700;
color: #111;
margin: 10px 0 0;
padding: 0;
}
.woocommerce ul.products li.product .button {
margin: 12px auto 0 !important;
display: inline-block !important;
}
/* Title clamp — 3 lines max, fixed height so neighbouring cards align.
Extra specificity (body + h2 tag) to beat WP block-theme h2 display defaults. */
/* Title clamp — position:relative + overflow:hidden with fading fade-out mask at the bottom
Acts as a visual ellipsis substitute when line-clamp isn't hinting correctly on flow-root. */
html body ul.products li.product h2.woocommerce-loop-product__title,
html body.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
line-height: 1.2 !important;
font-size: 13px !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
position: relative !important;
}
/* Fade-out mask — bottom 10px gradient hides any partial 4th line so truncation looks deliberate */
html body ul.products li.product h2.woocommerce-loop-product__title::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 40%; height: 16px;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 60%);
pointer-events: none;
}
/* Hide default sale badge (site-wide design choice) */
.woocommerce ul.products li.product .onsale { display: none !important; }
/* Hide "Read more" on out-of-stock */
.woocommerce ul.products li.product a.button.product_type_simple:not(.add_to_cart_button) {
display: none !important;
}
/* Red pill Add-to-Cart */
.woocommerce .ajax_add_to_cart,
.woocommerce .products .product .button {
font-size: 14px !important;
width: 100% !important;
max-width: max-content !important;
padding: 10px 15px !important;
border-radius: 30px !important;
background-color: #FC1C03 !important;
color: #fff !important;
text-align: center;
border: 1px solid #FC1C03 !important;
transition: background 0.3s, color 0.3s;
}
.woocommerce .ajax_add_to_cart:hover,
.woocommerce .products .product .button:hover {
background-color: transparent !important;
color: #FC1C03 !important;
}
/* Price styling — struck-through original + red sale price */
.woocommerce ul.products li.product .price { color: #111; font-weight: 700; }
.woocommerce ul.products li.product .price del { color: #999; font-weight: 400; }
.woocommerce ul.products li.product .price ins {
text-decoration: none;
color: #FC1C03;
font-weight: 700;
margin-left: 6px;
}
/* ============================================================
Homepage — Hero banner, section headers, product grid, brand carousel
Ported from astra-child/style.css (lines 2743-2988).
============================================================ */
.ats-hero-banner { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 25px; box-sizing: border-box; }
.ats-hero-banner__grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 0;
width: 100%;
}
.ats-hero-banner__tile { overflow: hidden; height: 280px; }
.ats-hero-banner__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ats-hero-banner__tile--center img { object-fit: cover; background: transparent; }
@media (max-width: 786px) {
.ats-hero-banner__grid { grid-template-columns: 1fr; }
.ats-hero-banner__tile { height: 200px; }
.ats-hero-banner__tile:not(.ats-hero-banner__tile--center) { display: none; }
}
/* Hero: below 1520 (tablet + narrow desktop), drop the side tiles and let
the storefront image span full-width edge-to-edge. Above 1520 all three
tiles still show. */
@media (min-width: 787px) and (max-width: 1519px) {
.ats-hero-banner { padding: 0 !important; margin: 0 !important; max-width: 100%; }
.ats-hero-banner__grid { grid-template-columns: 1fr; }
.ats-hero-banner__tile:not(.ats-hero-banner__tile--center) { display: none; }
.ats-hero-banner__tile { height: 320px; }
.ats-hero-banner__tile--center img { object-fit: cover; background: transparent; }
/* Kill WP block-theme's default top margin so the hero butts up against the header. */
body.home main .wp-block-post-content > :first-child,
body.home main .wp-block-group:first-child,
body.home :root :where(.wp-site-blocks) > :first-child,
body.home :root :where(.is-layout-flow) > :first-child,
body.home :root :where(.is-layout-constrained) > :first-child { margin-top: 0 !important; margin-block-start: 0 !important; }
}
.ats-home-section { padding: 0; }
.ats-home-section__inner { max-width: 1520px; margin: 0 auto; padding: 15px 25px 30px; box-sizing: border-box; }
a.ats-home-section__header {
display: flex; align-items: center; gap: 15px;
background: #333; color: #fff !important;
text-decoration: none; padding: 8px 20px;
border-radius: 4px; margin-bottom: 20px;
transition: background 0.3s; min-height: 44px;
}
a.ats-home-section__header:hover { background: #FC1C03; }
.ats-home-section__title {
font-family: "Poppins", sans-serif;
font-size: 28px; font-weight: 800;
margin: 0; color: #fff;
text-transform: uppercase; letter-spacing: 1.5px;
flex: 1;
}
.ats-home-section__arrow { font-size: 14px; font-weight: 600; white-space: nowrap; color: #fff; margin-left: auto; }
.ats-home-products-wrap ul.products {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Neutralize WC's float/clear/width assumptions that fight our grid */
.ats-home-products-wrap ul.products li.product,
.ats-home-products-wrap ul.products li.product.first,
.ats-home-products-wrap ul.products li.product.last {
width: auto !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
clear: none !important;
}
.ats-home-products-wrap ul.products::before,
.ats-home-products-wrap ul.products::after { content: none !important; display: none !important; }
@media (max-width: 1200px) { .ats-home-products-wrap ul.products { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 992px) { .ats-home-products-wrap ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px) { .ats-home-products-wrap ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } }
/* Brand carousel.
Pre-init: static 6-col grid (shown briefly before Slick JS initializes).
Post-init: Slick handles layout; our rules target .slick-* children. */
.ats-brands-carousel:not(.slick-initialized) {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.ats-brands-carousel.slick-initialized { position: relative; }
.ats-brands-carousel .slick-slide { padding: 4px; box-sizing: border-box; }
.ats-brands-carousel .slick-list { overflow: hidden; }
/* Carousel arrow buttons */
.ats-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: #333;
color: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.3s;
}
.ats-carousel-arrow:hover { background: #FC1C03; color: #fff; }
.ats-carousel-arrow.slick-prev { left: -18px; }
.ats-carousel-arrow.slick-next { right: -18px; }
.ats-home-brands .ats-home-section__inner { position: relative; overflow: visible; }
.ats-brands-carousel__slide { padding: 0; }
.ats-brands-carousel__link {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
text-decoration: none;
transition: box-shadow 0.2s, border-color 0.2s;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.ats-brands-carousel__link:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #FC1C03;
}
.ats-brands-carousel__link img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 1200px) { .ats-brands-carousel { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
.ats-brands-carousel { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ats-home-section__inner { padding: 15px 10px; }
.ats-home-section__title { font-size: 18px; }
.ats-hero-banner__tile { height: 180px; }
.ats-brands-carousel__link { padding: 6px; }
}
/* Footer — Mobile */
@media (max-width: 786px) {
.alltools-footer__inner {
flex-direction: column; align-items: center; text-align: center;
gap: 20px; padding: 30px 15px 20px; background-image: none;
}
.alltools-footer__left, .alltools-footer__center, .alltools-footer__right {
width: 100%; align-items: center; padding-bottom: 0;
}
.alltools-footer__left { flex-direction: row; justify-content: center; gap: 10px; order: 3; }
.alltools-footer__center { order: 1; }
.alltools-footer__right { order: 2; align-items: center; }
.alltools-footer__nav { margin-bottom: 15px; }
.alltools-footer__menu { flex-direction: column; gap: 5px; }
.alltools-footer__copyright--desktop { display: none; }
.alltools-footer__copyright--mobile { display: block; margin-top: 10px; }
.alltools-footer__ais-badge { width: 273px; }
.alltools-footer__ais-logo { width: 70%; margin: 0 auto; }
}
/* ============================================================
PORTED FROM LIVE CUSTOMIZER ADDITIONAL CSS (wp_posts ID 118288)
Source: astra-child theme on live, ported 2026-04-18
Styles the CSV-pipeline HTML classes inside product descriptions:
.brand-badge .part-number .short-desc .pills .features .materials
.material-tag .spec-table .supplier-warranty .subcat-grid etc.
============================================================ */
/* [removed legacy shop-loop price override — was pulling prices to the top of product cards] */
/* ============================================================
Alltools Geelong — Product Description Styles
Colour palette adapted from site brand:
--atg-primary: #1a1a1a (near black — headings, badges, table headers)
--atg-accent: #e5430a (Alltools orange — highlights, checkmarks, tags)
--atg-light-bg: #f5f5f5 (pale grey — alt table rows, pill backgrounds)
--atg-border: #e0e0e0 (soft grey — dividers, table borders)
--atg-muted: #5a6372 (grey — part numbers, secondary labels)
============================================================ */
.woocommerce div.product .woocommerce-tabs .wc-tab .brand-badge {
display: inline-block;
background: #1a1a1a;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 3px;
margin-bottom: 10px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab h1 {
font-size: 1.4rem;
color: #1a1a1a;
margin-bottom: 4px;
border-bottom: none;
padding-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .part-number {
font-size: 0.85rem;
color: #5a6372;
margin-bottom: 18px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .part-number span {
font-weight: 600;
color: #222;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .short-desc {
font-size: 1rem;
margin-bottom: 20px;
padding-left: 12px;
border-left: 4px solid #e5430a;
line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pill {
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 20px;
padding: 4px 14px;
font-size: 0.82rem;
font-weight: 600;
color: #1a1a1a;
}
.woocommerce div.product .woocommerce-tabs .wc-tab h2 {
font-size: 1.05rem;
color: #1a1a1a;
margin: 24px 0 10px;
padding-bottom: 5px;
border-bottom: 2px solid #e0e0e0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features {
list-style: none;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features li {
padding: 5px 0 5px 24px;
position: relative;
font-size: 0.93rem;
line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab ul.features li::before {
content: "\2714";
position: absolute;
left: 0;
color: #e5430a;
font-size: 0.8rem;
top: 7px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .materials {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .material-tag {
background: #fff5f2;
border: 1px solid #f5bfa0;
color: #e5430a;
font-size: 0.82rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 4px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .callout {
background: #f5f5f5;
border-left: 4px solid #1a1a1a;
padding: 12px 16px;
border-radius: 0 6px 6px 0;
font-size: 0.9rem;
margin: 16px 0;
line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-type {
display: inline-flex;
align-items: flex-start;
gap: 10px;
background: #fff5f2;
border: 1px solid #f5bfa0;
border-radius: 6px;
padding: 8px 14px;
margin: 10px 0 18px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-arrow {
font-size: 1.3rem;
color: #e5430a;
line-height: 1;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-label {
font-weight: 700;
color: #e5430a;
font-size: 0.9rem;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .cut-desc {
font-size: 0.82rem;
color: #5a6372;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pro-tip {
background: #f2faf5;
border-left: 4px solid #2a9d5c;
padding: 10px 14px;
border-radius: 0 6px 6px 0;
font-size: 0.88rem;
margin: 12px 0 20px;
line-height: 1.6;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .pro-tip strong {
color: #1a6e3c;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin-bottom: 8px;
margin-top: 8px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table caption {
text-align: left;
font-weight: 700;
color: #1a1a1a;
font-size: 0.9rem;
padding: 0 0 8px;
caption-side: top;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table th {
background: #1a1a1a;
color: #fff;
padding: 8px 10px;
text-align: left;
font-weight: 600;
font-size: 0.82rem;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table td {
padding: 7px 10px;
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
color: #222;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table tr:nth-child(even) td {
background: #f5f5f5;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .spec-table .highlight td {
background: #fff3eb;
font-weight: 700;
color: #e5430a;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .meta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 0.8rem;
color: #5a6372;
margin-top: 24px;
padding-top: 14px;
border-top: 1px solid #e0e0e0;
}
.woocommerce div.product .woocommerce-tabs .wc-tab .meta-row span strong {
color: #222;
}
/* Supplier Warranty / Authorised Dealer Trust Block */
.supplier-warranty {
border-left: 4px solid #2980b9;
background: #f0f7fb;
padding: 14px 18px;
margin: 20px 0;
font-size: 0.95rem;
line-height: 1.5;
color: #222;
border-radius: 0 4px 4px 0;
}
.supplier-warranty strong {
color: #2980b9;
display: block;
margin-bottom: 4px;
font-size: 1rem;
}
.supplier-warranty a {
color: #2980b9;
text-decoration: underline;
font-weight: 600;
}
.supplier-warranty a:hover {
color: #1a5276;
}
/* (Duplicate .subcat-grid / .subcat-tile rules removed 2026-04-21 — canonical
definition is above at ~line 742; the CTA + "also" + media-query rules below are kept.) */
.subcat-tile-cta {
display: inline-block;
margin-top: auto;
font-size: 0.85rem;
font-weight: 600;
color: #e5430a;
text-decoration: none;
}
.subcat-tile-cta:hover {
color: #b8360a;
text-decoration: underline;
}
.subcat-also {
margin: 8px 0 24px;
padding-top: 10px;
font-size: 0.88rem;
color: #5a6372;
}
.subcat-also a {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #999;
}
.subcat-also a:hover {
color: #e5430a;
border-bottom-color: #e5430a;
}
@media (max-width: 1023px) {
.subcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.subcat-tile { padding: 14px; }
.subcat-tile h3 { font-size: 0.95rem; }
}
@media (max-width: 420px) {
.subcat-grid { grid-template-columns: 1fr; }
}
/* ATG category archive H1 */
.atg-archive-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 18px;
padding-bottom: 8px;
border-bottom: 3px solid #e5430a;
line-height: 1.2;
}
@media (max-width: 767px) {
.atg-archive-title { font-size: 1.5rem; }
}
/* ATG:subcat-tile-clickable START */
/* Whole-tile clickable: the CTA link's ::after stretches across the tile so a click anywhere fires the subcat link. H3 link stays above it for accessibility. */
.subcat-tile { position: relative; }
.subcat-tile:hover { cursor: pointer; }
.subcat-tile .subcat-tile-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.subcat-tile h3 a { position: relative; z-index: 2; }
/* ATG:subcat-tile-clickable END */
/* ============================================================
Ported from Astra parent theme + astra-child
Single-product stock availability + barcode meta row
============================================================ */
.ast-stock-detail { font-size: 1em; margin-bottom: 12px; }
.ast-stock-detail .ast-stock-avail { font-weight: 700; margin-right: 6px; }
.ast-stock-detail .stock.in-stock { color: #2a9d5c; }
.ast-stock-detail .stock.out-of-stock { color: #c0392b; }
.product_meta .product-code-wrapper { display: inline-block; margin-right: 12px; font-size: 0.9rem; color: #5a6372; }
.product_meta .product-code-wrapper .product-code { font-weight: 600; color: #222; }
/* ============================================================
Gallery sizing fix: WC's own CSS gives .woocommerce-product-gallery
a width of 48% (float left) by default; inside our 48% wrap this
compounded to ~23% width (quarter-sized image). Reset it.
============================================================ */
.single-product .woocommerce-product-gallery-wrap .woocommerce-product-gallery {
width: 100% !important;
float: none !important;
}
/* ============================================================
WooCommerce tabs (Description / Reviews) — strip default WC
pastel theme, apply flat ATG look matching live site.
============================================================ */
.woocommerce-tabs { margin-top: 0; }
.woocommerce-tabs ul.tabs {
list-style: none;
margin: 0 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 2px solid #e0e0e0;
background: transparent;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
display: block;
margin: 0;
padding: 0;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
position: relative;
box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 12px 22px;
color: #5a6372;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 0;
background: transparent;
transition: color 0.2s ease;
}
.woocommerce-tabs ul.tabs li a:hover { color: #1a1a1a; }
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active:hover a {
color: #1a1a1a;
background: transparent;
}
.woocommerce-tabs ul.tabs li.active::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: #e5430a;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
padding: 24px 4px 0;
background: transparent;
border: 0;
}
.woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; }
/* Brand term next to barcode in meta row */
.product_meta .product-brand-wrapper {
display: inline-block;
margin-right: 12px;
font-size: 0.9rem;
color: #5a6372;
}
.product_meta .product-brand-wrapper .product-brand { font-weight: 600; color: #222; }
.product_meta .product-brand-wrapper a { color: #e5430a; text-decoration: none; font-weight: 600; }
.product_meta .product-brand-wrapper a:hover { color: #b8360a; }
/* ============================================================
Breadcrumb + meta divider + gallery polish (match live)
============================================================ */
.cstm-breadcrumps-wrap {
padding: 0 0 18px;
font-size: 0.88rem;
color: #5a6372;
}
.cstm-breadcrumps-wrap .woocommerce-breadcrumb,
.cstm-breadcrumps-wrap nav { margin: 0; }
.cstm-breadcrumps-wrap a { color: #5a6372; text-decoration: none; }
.cstm-breadcrumps-wrap a:hover { color: #e5430a; }
/* Horizontal divider above the Barcode/Brand meta row */
.single-product .summary .product_meta {
border-top: 1px solid #e0e0e0;
padding-top: 14px;
margin-top: 18px;
}
/* Zoom magnifier icon (WC's built-in lightbox trigger) */
.woocommerce-product-gallery__trigger {
position: absolute !important;
top: 16px; right: 16px;
z-index: 10;
display: flex !important;
align-items: center; justify-content: center;
width: 36px; height: 36px;
background: transparent;
text-indent: -999em;
font-size: 0;
opacity: 0.6;
transition: opacity 0.2s;
}
.woocommerce-product-gallery__trigger:hover { opacity: 1; }
.woocommerce-product-gallery__trigger::before {
content: "";
position: absolute;
width: 16px; height: 16px;
border: 2px solid #1a1a1a;
border-radius: 50%;
top: 6px; left: 6px;
text-indent: 0;
}
.woocommerce-product-gallery__trigger::after {
content: "";
position: absolute;
width: 2px; height: 10px;
background: #1a1a1a;
bottom: 4px; right: 6px;
transform: rotate(-45deg);
}
/* Make gallery wrap a touch smaller so there's breathing room */
.single-product .woocommerce-product-gallery-wrap { max-width: 46%; flex-basis: 46%; }
.single-product .summary.entry-summary { max-width: 50%; flex-basis: 50%; }
/* ============================================================
Product tile: OUT OF STOCK overlay on the image area.
WC adds `.outofstock` to li.product when _stock_status = outofstock.
============================================================ */
.woocommerce ul.products li.product.outofstock .woocommerce-LoopProduct-link { position: relative; }
.woocommerce ul.products li.product.outofstock .woocommerce-LoopProduct-link::after {
content: "OUT OF STOCK";
position: absolute;
left: 0;
right: 0;
top: 42%;
transform: translateY(-50%);
text-align: center;
font-weight: 700;
font-size: 1rem;
letter-spacing: 1.5px;
color: #1a1a1a;
background: rgba(255, 255, 255, 0.85);
padding: 10px 0;
z-index: 5;
pointer-events: none;
}
.woocommerce ul.products li.product.outofstock img.attachment-woocommerce_thumbnail {
opacity: 0.55;
filter: grayscale(20%);
}
/* Part No line on shop-loop product tile (between title and category) */
.woocommerce ul.products li.product .atg-loop-partno {
display: block;
margin: 2px 0 6px;
font-size: 0.78rem;
font-weight: 500;
color: #5a6372;
letter-spacing: 0.3px;
}
.woocommerce ul.products li.product .atg-loop-partno strong {
color: #1a1a1a;
font-weight: 700;
}
/* ============================================================
Shop tile alignment: keep Part No / button / price rows at
stable heights so tiles in the same grid row line up even when:
- product has no Part No (empty span reserves the line)
- product is out of stock (button hidden but space reserved)
============================================================ */
.woocommerce ul.products li.product .atg-loop-partno {
display: block;
min-height: 1.1em;
line-height: 1.3;
}
/* Every tile becomes a flex column so the button + price row always anchors
to the bottom. Keeps rows aligned even when tiles have/lack a Part No,
and when OOS products hide the button. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: block; }
/* In-stock: button is the first bottom-anchored element (pushes button+price down) */
.woocommerce ul.products li.product .button.add_to_cart_button { margin-top: auto; min-height: 42px; }
/* OOS: button is hidden, so price becomes first bottom-anchored element */
.woocommerce ul.products li.product.outofstock .button.add_to_cart_button { display: none; }
.woocommerce ul.products li.product.outofstock .price { margin-top: auto; }
.woocommerce ul.products li.product .price { margin-top: 10px; }
/* Empty part-no placeholder: white text to stay invisible but reserve the row */
.woocommerce ul.products li.product .atg-loop-partno--empty,
.woocommerce ul.products li.product .atg-loop-partno--empty strong {
color: #fff !important;
}
/* Shop-loop Add to cart button: compact pill, centered in tile */
.woocommerce ul.products li.product .button.add_to_cart_button {
display: inline-block !important;
align-self: center;
width: auto;
max-width: 140px;
padding: 8px 22px;
font-size: 0.9rem;
line-height: 1.2;
min-height: 0 !important;
border-radius: 999px;
}
/* ============================================================
Contact page (/contact/) — page 3045, block-built layout
============================================================ */
.atg-contact-lede { font-size: 1.1rem; color: #5a6372; margin: 0 0 28px; }
.atg-contact-details h2 { font-size: 1.5rem; margin: 0 0 16px; color: #1a1a1a; }
.atg-contact-details h3 { font-size: 1.05rem; margin: 22px 0 8px; color: #1a1a1a; }
.atg-contact-details p { margin: 0 0 14px; line-height: 1.5; color: #333; }
.atg-contact-details p strong { display: inline-block; color: #5a6372; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; }
.atg-contact-details a { color: #e5430a; text-decoration: none; font-weight: 600; }
.atg-contact-details a:hover { color: #b8360a; }
.atg-trading-hours { list-style: none; padding: 0; margin: 0; }
.atg-trading-hours li { padding: 4px 0; border-bottom: 1px dashed #e0e0e0; }
.atg-trading-hours li:last-child { border-bottom: 0; }
.atg-contact-map iframe { display: block; }
.atg-map-link { margin-top: 10px; font-size: 0.88rem; }
.atg-map-link a { color: #5a6372; text-decoration: none; border-bottom: 1px dotted #999; }
.atg-map-link a:hover { color: #e5430a; border-bottom-color: #e5430a; }
/* Form wrap — use wide alignment (1520px max-width) so it spans the page */
.atg-contact-form-wrap { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e0e0e0; }
.atg-contact-form-heading { font-size: 1.7rem; margin: 0 0 6px; color: #1a1a1a; }
.atg-contact-form-lede { margin: 0 0 20px; color: #5a6372; }
/* ============================================================
CF7 form fields — clean 2-column grid with field-group styling
============================================================ */
.wpcf7 .contact-us-form-wrap { background: #fafafa; padding: 28px 32px; border-radius: 6px; border: 1px solid #e5e5e5; }
.wpcf7 .contact-form-fields { display: grid; gap: 14px 20px; grid-template-columns: 1fr 1fr; }
/* Field wrapping: some containers hold multiple fields inline */
.wpcf7 .contact-form-fields > .name-field-wrap,
.wpcf7 .contact-form-fields > .subject-field-wrap,
.wpcf7 .contact-form-fields > .title-field-wrap { grid-column: 1 / -1; }
.wpcf7 .contact-form-fields > .comp-field-wrap,
.wpcf7 .contact-form-fields > .mailphone-fields-wrap { grid-column: 1 / -1; }
/* Name fields */
.wpcf7 .name-fields,
.wpcf7 .comp-field-wrap,
.wpcf7 .mailphone-fields-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.wpcf7 .name-field-wrap > label,
.wpcf7 .subject-field-wrap > label,
.wpcf7 .title-field-wrap > label,
.wpcf7 .label-wrap label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.wpcf7 .label-wrap { margin: 0 0 6px; }
/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 0.95rem;
background: #fff;
color: #1a1a1a;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: #e5430a;
box-shadow: 0 0 0 3px rgba(229, 67, 10, 0.12);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
/* Acceptance & checkboxes */
.wpcf7 .bg-white-wrap { background: #fff; padding: 14px 18px; border-radius: 4px; border: 1px solid #e5e5e5; margin-top: 8px; }
.wpcf7 .checkbox-field { margin: 8px 0; }
.wpcf7 .checkbox-field label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; line-height: 1.5; color: #444; cursor: pointer; }
.wpcf7 .checkbox-field input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.wpcf7 .checkbox-field a { color: #e5430a; }
/* Submit row: captcha on the left, button on the right */
.wpcf7 .contact-form-sbmt {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 10px;
}
.wpcf7 .contact-form-sbmt .wpcf7-submit,
.wpcf7 input.wpcf7-submit[type="submit"] {
background: #e5430a;
color: #fff;
border: 0;
padding: 12px 40px;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s;
margin-left: auto;
}
.wpcf7 input.wpcf7-submit[type="submit"]:hover { background: #b8360a; }
/* Required-field asterisk via validation class */
.wpcf7-not-valid { border-color: #c0392b !important; }
.wpcf7-response-output {
grid-column: 1 / -1;
margin: 16px 0 0 !important;
padding: 12px 16px !important;
border-radius: 4px;
font-size: 0.9rem;
}
@media (max-width: 767px) {
.wpcf7 .contact-form-fields,
.wpcf7 .name-fields,
.wpcf7 .comp-field-wrap,
.wpcf7 .mailphone-fields-wrap { grid-template-columns: 1fr; }
.wpcf7 .contact-us-form-wrap { padding: 20px; }
}
/* ============================================================
Policy pages (Privacy, Terms, Shipping/Returns)
Wide content, clean typography.
============================================================ */
.atg-policy-wrap { margin: 0 auto; padding: 0; }
/* Hide all
separators — H2 already has an orange underline rule that
visually separates sections, so the grey inset hr's are redundant noise. */
.atg-policy-wrap hr { display: none; }
.atg-policy-wrap h2 {
font-size: 1.4rem;
color: #1a1a1a;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid #e5430a;
}
.atg-policy-wrap h2:first-child { margin-top: 0; }
.atg-policy-wrap h3 { font-size: 1.1rem; color: #1a1a1a; margin: 24px 0 8px; }
.atg-policy-wrap p, .atg-policy-wrap li { font-size: 1rem; line-height: 1.65; color: #333; }
.atg-policy-wrap p { margin: 0 0 14px; }
.atg-policy-wrap ul { padding-left: 22px; margin: 0 0 18px; }
.atg-policy-wrap ul li { padding: 3px 0; }
.atg-policy-wrap a { color: #e5430a; text-decoration: underline; font-weight: 500; }
.atg-policy-wrap a:hover { color: #b8360a; }
.atg-policy-wrap strong { color: #1a1a1a; }
/* ============================================================
Page layout: align main content edges with the site header.
Header uses max-width 1520px with 25px horizontal padding.
Any `.alignwide` child gets the same container width, so visual
left/right edges of content match the header's nav items.
============================================================ */
body main.wp-block-group.is-layout-constrained { padding: 40px 25px 60px; max-width: 1520px; margin-left: auto; margin-right: auto; }
/* post-content: no intrinsic cap; children choose their own width */
body main .wp-block-post-content { max-width: none !important; width: 100%; }
body main .wp-block-post-content > :not(.alignwide):not(.alignfull) { max-width: 1520px; margin-left: auto; margin-right: auto; }
body main .wp-block-post-content > .alignwide { max-width: 1520px; margin-left: auto; margin-right: auto; }
body main.wp-block-group > .wp-block-post-title { max-width: 1520px; margin-left: auto; margin-right: auto; }
/* Hide WP's auto post-title on pages that supply their own styled lead */
main:has(.atg-page__lead) > .wp-block-post-title { display: none; }
/* Collapse the cascade of top padding/margin that WP block theme + our main wrapper add */
main:has(.atg-page__lead).wp-block-group.is-layout-constrained { padding-top: 0 !important; padding-bottom: 0 !important; }
main:has(.atg-page__lead) > * { margin-block-start: 0 !important; }
main:has(.atg-page__lead) .wp-block-post-content > * { margin-block-start: 0 !important; }
/* ============================================================
Generic content pages (About, Legal, etc.)
Full-width wrapper with inner readable column.
============================================================ */
.atg-page { width: 100%; background: #fff; }
.atg-page__inner { max-width: 1520px; margin: 0 auto; padding: 40px 25px 60px; }
.atg-page__lead { text-align: center; margin: 0 0 40px; padding-bottom: 24px; border-bottom: 3px solid #FC1C03; }
.atg-page__lead h1 { font-size: 40px; font-weight: 700; margin: 0 0 12px; color: #111; line-height: 1.15; }
.atg-page__tagline { font-size: 18px; color: #5A6372; margin: 0; }
/* Legal/About body copy: constrain to a readable column inside the 1520 wrapper */
.atg-legal__block, .atg-about__intro, .atg-about__block { max-width: 980px; margin-left: auto; margin-right: auto; }
.atg-about__gallery { max-width: 1380px; margin-left: auto; margin-right: auto; }
.atg-page h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 14px; position: relative; padding-left: 14px; }
.atg-page h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: #FC1C03; border-radius: 2px; }
.atg-page p { font-size: 16px; line-height: 1.7; color: #333; margin: 0 0 16px; }
.atg-page ul { font-size: 16px; line-height: 1.7; color: #333; padding-left: 22px; margin: 0 0 16px; }
.atg-page a { color: #FC1C03; text-decoration: underline; }
.atg-page a:hover { color: #D91800; }
/* About page */
.atg-about__banner { margin: 0; padding: 0; }
.atg-about__banner img { display: block; width: 100%; height: auto; }
.atg-about__intro { margin: 0 0 40px; }
.atg-about__quote { font-size: 20px; font-style: italic; color: #111; text-align: center; margin: 28px auto 8px; padding: 20px 24px; background: #F5F5F5; border-left: 4px solid #FC1C03; border-radius: 4px; max-width: 720px; }
.atg-about__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 48px; }
.atg-about__gallery br, .atg-about__gallery p:empty { display: none; }
.atg-about__gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 6px; display: block; }
.atg-about__block { margin: 0 0 40px; }
.atg-about__stock { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 40px; margin: 8px 0 20px; }
.atg-about__stock ul { margin: 0; }
.atg-about__ais { background: #F5F5F5; padding: 24px 28px; border-radius: 6px; }
@media (max-width: 768px) {
.atg-page__inner { padding: 28px 18px 40px; }
.atg-page__lead h1 { font-size: 30px; }
.atg-page__tagline { font-size: 16px; }
.atg-about__gallery { grid-template-columns: 1fr; gap: 10px; }
.atg-about__gallery img { height: 220px; }
.atg-about__stock { grid-template-columns: 1fr; gap: 0; }
.atg-about__quote { font-size: 17px; }
}
/* Legal pages (privacy, terms) */
.atg-legal__block { margin: 0 0 32px; }
.atg-legal__block:last-child { margin-bottom: 0; }
.atg-legal__contact { background: #F5F5F5; padding: 20px 24px; border-radius: 6px; margin-top: 40px; }
.atg-legal__contact p { margin: 0; line-height: 2; }
/* Generic ATG primary button — brand red pill */
a.atg-btn, .atg-btn { display: inline-block; background: #FC1C03; color: #fff !important; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; padding: 12px 32px; border-radius: 30px; text-decoration: none !important; letter-spacing: 0.3px; line-height: 1.2; transition: background 0.25s; border: none; cursor: pointer; }
a.atg-btn:hover, .atg-btn:hover { background: #D91800; color: #fff !important; }
/* Contact page: full wide canvas, larger map */
.atg-contact-page .atg-contact-grid { margin: 16px auto 32px; max-width: 1380px; display: grid; grid-template-columns: 400px 1fr; gap: 32px; align-items: start; }
.atg-contact-page .atg-contact-details { background: #F5F5F5; padding: 24px 24px; border-radius: 6px; }
.atg-contact-page .atg-contact-details h2 { font-size: 22px; margin: 0 0 18px; }
.atg-contact-page .atg-contact-details h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #5A6372; margin: 22px 0 10px; padding: 0; }
.atg-contact-page .atg-contact-details h3::before { display: none; }
.atg-contact-page .atg-contact-block { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.atg-contact-page .atg-contact-block:last-child { margin-bottom: 0; }
.atg-contact-page .atg-contact-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #888; margin: 0 0 2px; }
.atg-contact-page .atg-contact-block a { color: #FC1C03; text-decoration: none; font-weight: 600; }
.atg-contact-page .atg-contact-block a:hover { text-decoration: underline; }
.atg-contact-page .atg-trading-hours { list-style: none; padding: 0; margin: 0; }
.atg-contact-page .atg-trading-hours li { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed #d5d5d5; font-size: 14px; }
.atg-contact-page .atg-trading-hours li:last-child { border-bottom: 0; }
.atg-contact-page .atg-trading-hours .day { font-weight: 700; color: #111; }
.atg-contact-page .atg-trading-hours .time { color: #5A6372; }
.atg-contact-page .atg-contact-map iframe { min-height: 520px; width: 100%; border-radius: 6px; display: block; }
.atg-contact-page .atg-page__inner { padding-top: 24px; }
.atg-contact-page .atg-page__lead { margin-top: 0; }
.atg-contact-page .atg-contact-form-wrap { max-width: none; margin: 40px 0 0; padding: 32px 0 0; }
.atg-contact-page .atg-contact-form-wrap .wpcf7 { max-width: 1380px; margin: 0 auto; }
@media (max-width: 900px) {
.atg-contact-page .atg-contact-grid { grid-template-columns: 1fr; gap: 24px; }
.atg-contact-page .atg-contact-map iframe { min-height: 380px; }
}
/* Hide the "View cart" link that WC injects next to the Add-to-cart button after a successful AJAX add. */
.woocommerce ul.products li.product .added_to_cart.wc-forward,
.woocommerce-grouped-product-list .added_to_cart.wc-forward { display: none !important; }
/* ============================================================
Cart page (/cart/) — black header row, clean table, pill buttons
============================================================ */
.atg-cart-page .woocommerce { max-width: 1470px; margin: 0 auto; }
.atg-cart-page .woocommerce-cart-form { margin-bottom: 32px; }
/* Layout: two-column — items table left, totals right */
.atg-cart-page .woocommerce {
display: grid;
grid-template-columns: 1fr 360px;
gap: 40px;
align-items: start;
}
.atg-cart-page .woocommerce-cart-form { grid-column: 1; }
.atg-cart-page .cart-collaterals { grid-column: 2; position: sticky; top: 20px; }
.atg-cart-page .cart-collaterals .cart_totals { width: 100% !important; }
.atg-cart-page .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* Items table */
.atg-cart-page table.shop_table {
border: 1px solid #e0e0e0;
border-radius: 6px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
.atg-cart-page table.shop_table thead tr { background: #1a1a1a; }
.atg-cart-page table.shop_table thead th {
color: #fff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
font-size: 0.82rem;
padding: 14px 16px;
border: 0;
text-align: left;
}
.atg-cart-page table.shop_table tbody td {
padding: 16px;
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
background: #fff;
}
.atg-cart-page table.shop_table tr:last-child td { border-bottom: 0; }
.atg-cart-page table.shop_table td.product-remove { width: 40px; padding-left: 16px; padding-right: 8px; }
.atg-cart-page table.shop_table td.product-remove a.remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: #e5430a;
color: #fff !important;
font-size: 1rem;
text-decoration: none;
transition: background 0.15s;
}
.atg-cart-page table.shop_table td.product-remove a.remove:hover { background: #b8360a; }
.atg-cart-page table.shop_table td.product-thumbnail { width: 90px; padding-right: 8px; }
.atg-cart-page table.shop_table td.product-thumbnail img { width: 72px; height: auto; border: 1px solid #e5e5e5; border-radius: 3px; padding: 4px; background: #fff; }
.atg-cart-page table.shop_table td.product-name a { color: #1a1a1a; text-decoration: none; font-weight: 600; }
.atg-cart-page table.shop_table td.product-name a:hover { color: #e5430a; }
.atg-cart-page table.shop_table td.product-price,
.atg-cart-page table.shop_table td.product-subtotal { font-weight: 600; color: #1a1a1a; font-variant-numeric: tabular-nums; }
/* Quantity input */
.atg-cart-page .quantity { display: inline-flex; align-items: center; }
.atg-cart-page .quantity input.qty {
width: 70px;
padding: 6px 8px;
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 0.95rem;
text-align: center;
}
.atg-cart-page .quantity input.qty:focus { outline: none; border-color: #e5430a; box-shadow: 0 0 0 3px rgba(229,67,10,0.12); }
/* Actions row (Update cart button) */
.atg-cart-page table.shop_table td.actions {
padding: 14px 16px;
background: #fafafa;
text-align: right;
border-top: 1px solid #e0e0e0;
}
.atg-cart-page table.shop_table td.actions .button,
.atg-cart-page table.shop_table td.actions button[name="update_cart"] {
background: #5a6372;
color: #fff;
border: 0;
padding: 10px 24px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s;
}
.atg-cart-page table.shop_table td.actions button[name="update_cart"]:not(:disabled):hover { background: #1a1a1a; }
.atg-cart-page table.shop_table td.actions button[name="update_cart"]:disabled { background: #ccc; cursor: not-allowed; }
/* Coupon form (if it's enabled) */
.atg-cart-page .coupon { display: flex; gap: 10px; align-items: center; }
.atg-cart-page .coupon input[type="text"] { padding: 10px 14px; border: 1px solid #d0d0d0; border-radius: 4px; min-width: 200px; }
/* Cart Totals panel */
.atg-cart-page .cart_totals {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 24px 28px;
}
.atg-cart-page .cart_totals h2 {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 18px;
color: #1a1a1a;
padding-bottom: 10px;
border-bottom: 2px solid #e5430a;
}
.atg-cart-page .cart_totals table.shop_table { border: 0; margin: 0; }
.atg-cart-page .cart_totals table.shop_table tr th,
.atg-cart-page .cart_totals table.shop_table tr td {
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
background: transparent;
color: #333;
font-size: 0.95rem;
text-align: left;
}
.atg-cart-page .cart_totals table.shop_table thead { display: none; }
.atg-cart-page .cart_totals table.shop_table tr th { width: 40%; font-weight: 600; color: #5a6372; text-transform: none; letter-spacing: 0; font-size: 0.95rem; background: transparent; }
.atg-cart-page .cart_totals table.shop_table tr.order-total th,
.atg-cart-page .cart_totals table.shop_table tr.order-total td {
font-weight: 800;
font-size: 1.1rem;
color: #1a1a1a;
padding-top: 14px;
border-bottom: 0;
}
.atg-cart-page .cart_totals .woocommerce-shipping-methods { list-style: none; padding: 0; margin: 4px 0; }
.atg-cart-page .cart_totals .woocommerce-shipping-methods li { padding: 4px 0; }
.atg-cart-page .cart_totals .shipping-calculator-button,
.atg-cart-page .cart_totals .woocommerce-shipping-destination { font-size: 0.85rem; color: #5a6372; }
.atg-cart-page .wc-proceed-to-checkout { padding: 0; margin-top: 18px; }
.atg-cart-page .wc-proceed-to-checkout a.checkout-button {
display: block;
background: #e5430a;
color: #fff !important;
padding: 14px 24px;
border-radius: 999px;
text-align: center;
text-decoration: none;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
font-size: 0.95rem;
transition: background 0.15s;
}
.atg-cart-page .wc-proceed-to-checkout a.checkout-button:hover { background: #b8360a; }
/* Mobile */
@media (max-width: 900px) {
.atg-cart-page .woocommerce { grid-template-columns: 1fr; }
.atg-cart-page .cart-collaterals { grid-column: 1; position: static; }
.atg-cart-page table.shop_table thead { display: none; }
.atg-cart-page table.shop_table tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid #e0e0e0; }
.atg-cart-page table.shop_table tbody td { display: block; border: 0; padding: 4px 16px; }
.atg-cart-page table.shop_table tbody td::before { content: attr(data-title) ": "; font-weight: 700; color: #5a6372; margin-right: 8px; }
.atg-cart-page table.shop_table tbody td.product-remove::before,
.atg-cart-page table.shop_table tbody td.product-thumbnail::before { display: none; }
}
/* Override WC block-theme compat stylesheet which forces .woocommerce-cart/checkout/account
main content to max-width:1000px — we want our wide (1470px) alignment. */
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce,
body.woocommerce-account main .woocommerce,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-account .wp-block-post-title { max-width: 1470px !important; }
/* Remove ad-hoc top margin on the post-title so main's top padding alone
controls the header→title gap (keeps it consistent across pages). */
body main > .wp-block-post-title { margin-top: 0 !important; }
/* Cart grid items need min-width:0 so the table cell can shrink to its column
(1fr / 1070px) instead of expanding to its intrinsic content width and
overlapping the Cart Totals panel. */
.atg-cart-page .woocommerce { min-width: 0; }
.atg-cart-page .woocommerce-cart-form { min-width: 0; overflow: hidden; }
.atg-cart-page .cart-collaterals { min-width: 0; }
.atg-cart-page table.shop_table { table-layout: fixed; width: 100%; }
/* Tighten the gap between H1 and cart form */
.atg-cart-page { margin-top: 0; }
.atg-cart-page .woocommerce { margin-top: 12px; }
body.woocommerce-cart main > .wp-block-post-title { margin-bottom: 8px !important; }
/* Tighten cart top + increase horizontal separation between items and totals */
.atg-cart-page .woocommerce { row-gap: 0; column-gap: 140px; }
.atg-cart-page .woocommerce > .woocommerce-notices-wrapper:empty { display: none !important; height: 0 !important; }
body.woocommerce-cart main > .wp-block-post-title { margin-bottom: 0 !important; }
.atg-cart-page { margin-top: 0; }
.atg-cart-page .woocommerce-cart-form,
.atg-cart-page .cart-collaterals { margin-top: 0 !important; }
/* ============================================================
Catalogues page (/catalogues/)
============================================================ */
.atg-catalogue-page { text-align: center; }
.atg-catalogue-lede {
font-size: 1.1rem;
color: #5a6372;
max-width: 820px;
margin: 0 auto 28px;
line-height: 1.55;
}
.atg-catalogue-btn-row { margin: 0 0 32px; justify-content: center; }
.atg-catalogue-page .wp-block-button__link,
.atg-catalogue-page a.wp-element-button {
background: #e5430a !important;
color: #fff !important;
padding: 14px 42px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
border-radius: 999px !important;
border: 0;
transition: background 0.15s;
display: inline-block;
}
.atg-catalogue-page .wp-block-button__link:hover { background: #b8360a !important; }
.atg-catalogue-cover-link {
display: block;
text-align: center;
margin: 0 auto 18px;
}
.atg-catalogue-cover {
display: block;
width: auto;
max-width: min(100%, 720px);
height: auto;
margin: 0 auto;
border: 1px solid #e0e0e0;
border-radius: 6px;
box-shadow: 0 4px 18px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.atg-catalogue-cover-link:hover .atg-catalogue-cover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.atg-catalogue-note {
font-size: 0.85rem;
color: #5a6372;
margin-top: 14px;
}
/* ============================================================
About Us page (/about-us/) — full-bleed banner, hide page title,
kill main top padding so banner sits flush against the header.
============================================================ */
body.page-id-3030 main > .wp-block-post-title { display: none; }
body.page-id-3030 main.wp-block-group.is-layout-constrained { padding-top: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; }
body.page-id-3030 .wp-site-blocks > main { margin-block-start: 0 !important; }
body.page-id-3030 main > .wp-block-post-content { margin-top: 0 !important; margin-block-start: 0 !important; }
body.page-id-3030 main > .wp-block-post-content > :first-child { margin-top: 0 !important; margin-block-start: 0 !important; }
body.page-id-3030 .ats-about-banner-wrap { margin-top: 0 !important; }
/* Banner constrained to the 1470 wide zone (aligned with header edges) */
.ats-about-banner-wrap { margin: 0 auto 32px !important; width: 100%; max-width: 1470px !important; }
.ats-about-banner-wrap img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; object-position: center; border-radius: 4px; }
.atg-about-page { margin-top: 0; }
.atg-about-page h2 { font-size: 1.75rem; margin: 0 0 18px; color: #1a1a1a; }
.atg-about-page p { font-size: 1.05rem; line-height: 1.65; color: #333; margin: 0 0 16px; }
.atg-about-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 32px 0 0;
}
.atg-about-gallery img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
@media (max-width: 900px) { .atg-about-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .atg-about-gallery { grid-template-columns: 1fr; } .atg-about-gallery img { height: 200px; } }
/* No special active state for primary menu — all items look identical (red bg, white text) regardless of current page */
/* Home hero tile row: uniform image height, fits the 1470 alignwide */
.atg-home-hero { margin-bottom: 32px; }
.atg-hero-tiles { flex-wrap: nowrap !important; }
.atg-hero-tiles .wp-block-column { display: flex; }
.atg-hero-tiles .wp-block-image { margin: 0; width: 100%; }
.atg-hero-tiles .wp-block-image img {
width: 100%;
height: 320px;
object-fit: cover;
object-position: center;
border-radius: 4px;
display: block;
}
@media (max-width: 900px) {
.atg-hero-tiles { flex-wrap: wrap !important; }
.atg-hero-tiles .wp-block-image img { height: 200px; }
}
/* ============================================================
Checkout page styling
============================================================ */
body.woocommerce-checkout main { padding-top: 40px; padding-bottom: 60px; }
/* Two-column layout: billing/shipping on left, order summary on right */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
align-items: start;
max-width: 1470px;
margin: 0 auto;
}
body.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
body.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; min-width: 0; margin: 0 0 8px; align-self: start; }
body.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; min-width: 0; align-self: start; }
/* Section cards */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout #order_review {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 24px 28px;
margin-bottom: 20px;
}
body.woocommerce-checkout h3 {
font-size: 1.1rem;
color: #1a1a1a;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #e5430a;
}
body.woocommerce-checkout #order_review_heading {
font-size: 1.2rem;
margin: 0 0 12px;
color: #1a1a1a;
}
/* Form rows */
body.woocommerce-checkout .form-row {
display: flex;
flex-direction: column;
margin: 0 0 14px;
}
body.woocommerce-checkout .form-row label {
font-size: 0.82rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
width: 100%;
padding: 10px 14px;
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 0.95rem;
background: #fff;
color: #1a1a1a;
box-sizing: border-box;
height: auto;
}
body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
outline: none;
border-color: #e5430a;
box-shadow: 0 0 0 3px rgba(229,67,10,0.12);
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 22px; padding: 0; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
/* Ship to different address heading */
body.woocommerce-checkout h3#ship-to-different-address {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 0;
padding-bottom: 0;
font-weight: 600;
font-size: 1rem;
text-transform: none;
letter-spacing: 0;
margin-bottom: 0;
}
body.woocommerce-checkout h3#ship-to-different-address label { margin: 0; cursor: pointer; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] { margin: 0; transform: scale(1.15); cursor: pointer; }
/* Order review table */
body.woocommerce-checkout #order_review table.shop_table {
border: 1px solid #e0e0e0;
border-radius: 6px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
body.woocommerce-checkout #order_review table.shop_table thead tr { background: #1a1a1a; }
body.woocommerce-checkout #order_review table.shop_table thead th { color: #fff; padding: 10px 14px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; }
body.woocommerce-checkout #order_review table.shop_table tbody td,
body.woocommerce-checkout #order_review table.shop_table tfoot td,
body.woocommerce-checkout #order_review table.shop_table tfoot th { padding: 10px 14px; border-bottom: 1px solid #e5e5e5; background: #fff; }
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { font-weight: 800; font-size: 1.05rem; color: #1a1a1a; border-bottom: 0; }
/* Payment methods */
body.woocommerce-checkout #payment {
background: #fff !important;
border: 1px solid #e0e0e0;
border-radius: 6px !important;
padding: 0 !important;
margin-top: 16px;
}
body.woocommerce-checkout #payment ul.wc_payment_methods { padding: 18px 24px !important; margin: 0; border-bottom: 1px solid #e5e5e5; list-style: none; }
body.woocommerce-checkout #payment ul.wc_payment_methods li { padding: 8px 0; }
body.woocommerce-checkout #payment .place-order { padding: 18px 24px; background: #fafafa; border-radius: 0 0 6px 6px; }
/* Place order button */
body.woocommerce-checkout #place_order {
background: #e5430a;
color: #fff;
border: 0;
padding: 14px 24px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
font-size: 0.95rem;
cursor: pointer;
width: 100%;
transition: background 0.15s;
}
body.woocommerce-checkout #place_order:hover { background: #b8360a; }
/* Login / coupon info boxes above form */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
background: #fff3eb;
border-left: 4px solid #e5430a;
color: #1a1a1a;
padding: 14px 18px;
border-radius: 0 4px 4px 0;
margin-bottom: 20px;
}
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a { color: #e5430a; font-weight: 600; }
/* Create Account card — moved above Place Order via JS, emphasised */
body.woocommerce-checkout .atg-create-account-card {
background: #FFF5F2; border: 2px solid #FC1C03; border-radius: 6px;
padding: 16px 18px; margin: 0 0 16px;
}
body.woocommerce-checkout .atg-create-account-card__title {
font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 700;
color: #FC1C03; display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
}
body.woocommerce-checkout .atg-create-account-card__hint {
font-size: 13px; color: #5A6372; margin: 0 0 10px; line-height: 1.4;
}
body.woocommerce-checkout .atg-create-account-card__label {
display: flex; align-items: center; gap: 8px; cursor: pointer;
font-weight: 600; color: #111; font-size: 14px; margin: 0;
}
body.woocommerce-checkout .atg-create-account-card__checkbox {
width: 18px; height: 18px; accent-color: #FC1C03; cursor: pointer; margin: 0;
}
/* Hide the original checkbox + password field (inside billing) once lifted into the card */
body.woocommerce-checkout p.create-account.atg-create-account-hidden,
body.woocommerce-checkout #account_password_field.atg-account-password-hidden { display: none !important; }
/* Password field inside the card */
body.woocommerce-checkout .atg-create-account-card__password {
margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(252,28,3,0.3);
}
body.woocommerce-checkout .atg-create-account-card__password label {
display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700;
color: #111; text-transform: uppercase; letter-spacing: 0.4px;
}
body.woocommerce-checkout .atg-create-account-card__pwd {
width: 100%; padding: 10px 12px; border: 1px solid #d0d0d0;
border-radius: 4px; font-size: 14px; font-family: "Poppins", sans-serif; box-sizing: border-box;
}
body.woocommerce-checkout .atg-create-account-card__pwd:focus {
outline: none; border-color: #FC1C03; box-shadow: 0 0 0 3px rgba(252,28,3,0.12);
}
@media (max-width: 900px) {
body.woocommerce-checkout form.checkout.woocommerce-checkout {
grid-template-columns: 1fr;
gap: 16px;
display: flex; flex-direction: column;
}
/* Explicit order: billing/shipping first, then order summary heading, then review, then payment */
body.woocommerce-checkout form.checkout #customer_details { order: 1; }
body.woocommerce-checkout form.checkout #order_review_heading { order: 2; margin: 16px 0 0; }
body.woocommerce-checkout form.checkout #order_review { order: 3; }
body.woocommerce-checkout form.checkout #payment,
body.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout form.checkout .place-order { order: 4; }
}
@media (max-width: 768px) {
body.woocommerce-checkout main { padding: 0 !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout { padding: 12px; max-width: 100%; }
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout #order_review {
padding: 16px 14px !important; margin-bottom: 12px !important;
}
body.woocommerce-checkout .form-row { margin-bottom: 10px; }
body.woocommerce-checkout h3 { font-size: 1rem; margin-bottom: 10px; }
/* Order review table: horizontal scroll if overflowing */
body.woocommerce-checkout #order_review table.shop_table {
font-size: 13px; width: 100%; table-layout: fixed;
}
body.woocommerce-checkout #order_review table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table th { padding: 8px 10px; word-break: break-word; }
/* Payment methods: neutralise tipBox floating position */
body.woocommerce-checkout #payment .payment_box {
position: relative !important;
margin: 8px 0 0 !important;
padding: 12px 14px !important;
background: #f7f6f1 !important;
border-radius: 4px !important;
}
body.woocommerce-checkout #payment .payment_box::before { display: none !important; }
body.woocommerce-checkout #payment ul.payment_methods { padding: 0; margin: 0; list-style: none; }
body.woocommerce-checkout #payment ul.payment_methods li { padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 8px; background: #fff; }
body.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; font-size: 14px; }
/* Place order button: full-width, brand colour, obvious on mobile */
body.woocommerce-checkout #place_order {
width: 100%; padding: 14px; font-size: 15px; font-weight: 700;
background: #FC1C03; color: #fff; border-radius: 24px;
text-transform: uppercase; letter-spacing: 0.5px; border: 0;
}
}
/* ============================================================
WooCommerce My Account — sidebar nav + content area
============================================================ */
body.woocommerce-account main { padding: 20px 25px 60px; max-width: 1520px; margin: 0 auto; box-sizing: border-box; }
body.woocommerce-account .woocommerce { display: block; }
body.woocommerce-account .woocommerce-MyAccount-navigation {
float: left; width: 25%; background: #F5F5F5; padding: 18px 20px; border-radius: 6px; box-sizing: border-box;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block; padding: 10px 12px; color: #111; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500;
border-radius: 4px; transition: background 0.15s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #fff; color: #FC1C03; }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #FC1C03; color: #fff; font-weight: 700; }
body.woocommerce-account .woocommerce-MyAccount-content {
float: right; width: calc(75% - 24px); box-sizing: border-box;
background: #fff; padding: 4px 0 0;
}
body.woocommerce-account .woocommerce::after { content: ""; display: block; clear: both; }
/* Login + Register forms (logged out) — full-width grid regardless of WC's float defaults */
body.woocommerce-account #customer_login.u-columns,
body.woocommerce-account .woocommerce #customer_login {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 30px;
clear: both;
float: none !important;
width: 100%;
margin: 0;
}
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after { content: none !important; display: none !important; }
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2 {
background: #F5F5F5; padding: 24px 28px; border-radius: 6px;
float: none !important; width: auto !important; max-width: none !important;
margin: 0 !important; box-sizing: border-box;
}
/* When user is LOGGED OUT there's no nav — neutralise the float rules */
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content { float: none; width: 100%; }
body.woocommerce-account .woocommerce .u-columns h2 {
font-size: 20px; font-weight: 700; margin: 0 0 16px; color: #111;
padding-bottom: 8px; border-bottom: 3px solid #FC1C03; display: inline-block;
}
body.woocommerce-account form.login,
body.woocommerce-account form.register { margin: 0; }
body.woocommerce-account form.login .form-row,
body.woocommerce-account form.register .form-row { margin-bottom: 12px; }
body.woocommerce-account form.login label,
body.woocommerce-account form.register label {
display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600;
color: #111; text-transform: uppercase; letter-spacing: 0.4px;
}
body.woocommerce-account form.login input[type="text"],
body.woocommerce-account form.login input[type="email"],
body.woocommerce-account form.login input[type="password"],
body.woocommerce-account form.register input[type="text"],
body.woocommerce-account form.register input[type="email"],
body.woocommerce-account form.register input[type="password"] {
width: 100%; padding: 10px 12px; border: 1px solid #d0d0d0;
border-radius: 4px; font-size: 14px; font-family: "Poppins", sans-serif; box-sizing: border-box;
}
body.woocommerce-account form.login button[type="submit"],
body.woocommerce-account form.register button[type="submit"],
body.woocommerce-account button.woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
background: #FC1C03; color: #fff; border: 0;
padding: 12px 24px; border-radius: 24px;
font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
transition: background 0.2s;
}
body.woocommerce-account button[type="submit"]:hover { background: #D91800; }
/* Orders table */
body.woocommerce-account table.shop_table_responsive { width: 100%; border-collapse: collapse; }
body.woocommerce-account table.shop_table_responsive th { background: #111; color: #fff; padding: 10px 12px; text-align: left; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
body.woocommerce-account table.shop_table_responsive td { padding: 12px; border-bottom: 1px solid #e5e5e5; font-size: 14px; }
body.woocommerce-account .woocommerce-button.view {
display: inline-block; background: #111; color: #fff !important; padding: 6px 14px;
border-radius: 16px; font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px; text-decoration: none;
}
/* Mobile layout for My Account */
@media (max-width: 768px) {
body.woocommerce-account main { padding: 12px 14px 40px; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; padding: 12px; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 0 auto; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 8px 10px; font-size: 12px; text-align: center; }
body.woocommerce-account .woocommerce .u-columns,
body.woocommerce-account #customer_login.u-columns,
body.woocommerce-account .woocommerce #customer_login { grid-template-columns: 1fr !important; gap: 16px; }
body.woocommerce-account .woocommerce .u-column1,
body.woocommerce-account .woocommerce .u-column2 { padding: 16px; }
body.woocommerce-account table.shop_table_responsive th { display: none; }
body.woocommerce-account table.shop_table_responsive tr { display: block; margin-bottom: 12px; border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; }
body.woocommerce-account table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; border: 0; padding: 6px 8px; }
body.woocommerce-account table.shop_table_responsive td::before { content: attr(data-title); font-weight: 700; color: #5A6372; font-size: 12px; text-transform: uppercase; }
}
.ats-brands-page { width: 100%; }
.ats-brands-inner { max-width: 1520px; margin: 0 auto; padding: 30px 15px; }
.ats-brands-title { font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 700; margin: 0 0 20px; color: #333; }
/* A-Z Navigation */
.ats-brands-az {
display: flex;
flex-wrap: wrap;
gap: 4px;
background: #333;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 30px;
position: sticky;
top: 0;
z-index: 50;
}
.ats-az-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
height: 44px;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background 0.2s;
}
a.ats-az-link:hover { background: #FC1C03; color: #fff; }
a.ats-az-link:visited { color: #fff; }
.ats-az-disabled { color: #666; cursor: default; }
/* Brand Sections */
.ats-brands-section { margin-bottom: 30px; scroll-margin-top: 70px; }
.ats-brands-letter {
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 700;
color: #333;
border-bottom: 3px solid #FC1C03;
padding-bottom: 6px;
margin: 0 0 16px;
}
/* Brand Grid */
.ats-brands-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ats-brand-tile {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
text-decoration: none;
color: #333;
transition: box-shadow 0.2s, border-color 0.2s;
}
.ats-brand-tile:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #FC1C03;
}
.ats-brand-tile__logo {
width: 60px;
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ats-brand-tile__logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ats-brand-tile__placeholder {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 4px;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 700;
color: #999;
}
.ats-brand-tile__info { display: flex; flex-direction: column; }
.ats-brand-tile__name {
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
color: #333;
}
.ats-brand-tile__count {
font-size: 12px;
color: #999;
margin-top: 2px;
}
@media (max-width: 992px) {
.ats-brands-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.ats-brands-inner { padding: 15px 10px; }
.ats-brands-title { font-size: 22px; }
.ats-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ats-brand-tile { padding: 12px; gap: 10px; }
.ats-brand-tile__logo { width: 45px; height: 45px; }
/* A-Z nav: 2 rows of 13, each letter a big tap target */
.ats-brands-az {
display: grid !important; grid-template-columns: repeat(13, 1fr);
gap: 4px; padding: 10px; border-radius: 6px; margin-bottom: 24px;
}
.ats-az-link {
flex: unset; width: 100%; height: 38px; font-size: 15px; font-weight: 700;
min-width: 0;
}
}
/* ============================================================
MOBILE TEMPLATE (Phase A) — Alltools mobile design
Design source: alltools-mobile/project (2026-04-21)
Black topbar + red search + secondary tabs + drawer + footer
============================================================ */
/* defaults: hide mobile-only pieces on desktop */
.alltools-header__hamburger--mobile,
.alltools-header__mobile-tabs,
.alltools-header__mobile-tab,
.alltools-header__catalogue-btn,
.alltools-header__drawer-header,
.alltools-footer__mobile-contact,
.ats-archive-mobile-bar,
.ats-jump-to-products { display: none; }
/* Desktop account + cart alignment — identical box so icons sit on the same baseline */
@media (min-width: 769px) {
.alltools-header__contact { margin-right: 40px; }
.alltools-header__account,
.alltools-header__cart {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 10px;
color: #fff !important; text-decoration: none;
}
/* Cart shortcode output is wrapped in with
s — flatten them so icon doesn't drift */
.alltools-header__cart p { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; height: 100%; }
.alltools-header__cart br { display: none !important; }
.alltools-header__cart .atg-cart-icon-wrap { display: inline-flex; align-items: center; height: 100%; }
.alltools-header__cart .alltools-header__cart-link { display: inline-flex; align-items: center; height: 100%; }
.alltools-header__account i,
.alltools-header__cart i { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; }
.alltools-header__account:hover { color: #FC1C03 !important; opacity: 0.85; }
}
@media (max-width: 768px) {
body { background: #fff; }
/* Edge-to-edge content: no gap between header and first block, no side padding */
body main.wp-block-group { padding: 0 !important; margin: 0 !important; }
body main .wp-block-post-content { padding: 0 !important; margin: 0 !important; }
body main .wp-block-post-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body main .wp-block-post-content > :not(.alignwide):not(.alignfull) { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.ats-hero-banner { padding: 0 !important; margin: 0 !important; }
.ats-hero-banner__tile { border-radius: 0; }
:root :where(.wp-site-blocks) > * { margin-block-start: 0 !important; }
:root :where(.is-layout-flow) > * { margin-block-start: 0 !important; margin-top: 0 !important; }
:root :where(.is-layout-constrained) > * { margin-block-start: 0 !important; margin-top: 0 !important; }
:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 !important; }
/* ─── Topbar: two rows - logo full width, then action bar ─── */
.alltools-header__topbar { background: #111; padding: 0; }
.alltools-header__topbar-inner {
padding: 0;
display: flex; flex-wrap: wrap; align-items: stretch;
justify-content: flex-start; gap: 0;
}
/* Row 1: logo full width */
.alltools-header__logo {
order: 1; width: 100%; flex: 0 0 100%;
display: block; margin: 0; padding: 0; text-align: center; line-height: 0;
}
.alltools-header__logo img {
width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important;
display: block; margin: 0;
}
/* desktop contact info — already hidden by legacy rule, reinforce */
.alltools-header__contact { display: none !important; }
/* Row 2: action bar with hamburger (left), CONTACT (centre), account+cart (right) */
.alltools-header__hamburger { display: none; } /* hide old one from navbar */
.alltools-header__hamburger--mobile {
display: flex !important; align-items: center; justify-content: center;
background: none; border: 0; color: #fff; padding: 10px 14px;
font-size: 22px; cursor: pointer; order: 2;
}
.alltools-header__mobile-tab {
order: 3; flex: 1;
display: flex !important; align-items: center; justify-content: center; gap: 6px;
padding: 10px 6px;
color: #fff !important; text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
}
.alltools-header__mobile-tab i { font-size: 13px; }
/* account icon (right side, before cart) */
.alltools-header__account {
order: 4;
display: flex !important; align-items: center; justify-content: center;
color: #fff !important; text-decoration: none; padding: 10px 10px;
font-size: 19px;
}
/* cart icon — wpautop wraps the shortcode output in
and inserts
s, squash them */
.alltools-header__cart {
order: 5;
padding: 10px 14px 10px 4px; font-size: 20px; color: #fff;
display: flex; align-items: center;
}
.alltools-header__cart p { margin: 0; padding: 0; display: inline-flex; align-items: center; }
.alltools-header__cart br { display: none; }
.alltools-header__cart .atg-cart-icon-wrap { display: inline-flex; align-items: center; }
.alltools-header__cart a, .alltools-header__cart i { color: #fff !important; }
.alltools-header__cart-link { line-height: 1; }
.alltools-header__cart-count {
top: -4px; right: -6px; background: #FC1C03; color: #fff;
min-width: 16px; height: 16px; line-height: 16px; font-size: 10px;
border-radius: 8px; padding: 0 4px;
}
/* ─── Red navbar: search + catalogue button ─── */
.alltools-header__navbar { background: #FC1C03; }
.alltools-header__navbar-inner {
padding: 8px 10px; display: flex; align-items: center; gap: 6px;
flex-wrap: nowrap; max-width: 100%;
}
.alltools-header__search-area {
display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
/* Hide all shop dropdown/menu buttons in search area on mobile — only search + catalogue should show */
.alltools-header__shop-dropdown,
.alltools-header__shop-btn--desktop { display: none !important; }
.alltools-header__search-area .search-form-wrap { flex: 1; min-width: 0; }
.alltools-header__search-area .search-form,
.alltools-header__search-area form {
display: flex; background: #fff; border-radius: 4px; overflow: hidden;
height: 40px;
}
.alltools-header__search-area input[type="search"],
.alltools-header__search-area .search-input {
flex: 1; border: 0; outline: none;
padding: 0 12px; font-size: 13px; min-width: 0;
font-family: "Poppins", sans-serif;
}
.alltools-header__search-area button,
.alltools-header__search-area .search-btn {
background: #111; color: #fff; border: 0; width: 44px; min-width: 44px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
padding: 0; font-size: 13px;
}
.alltools-header__search-area .btn-text { display: none; }
/* free-shipping banner: hidden on mobile (CATALOGUE takes its place) */
.alltools-header__free-shipping { display: none !important; }
/* CATALOGUE button in the red search bar */
.alltools-header__catalogue-btn {
display: flex !important; align-items: center; gap: 6px;
background: #fff; color: #FC1C03 !important; text-decoration: none;
border-radius: 4px; padding: 0 12px; height: 40px;
font-family: "Poppins", sans-serif;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
white-space: nowrap; flex-shrink: 0;
}
.alltools-header__catalogue-btn i { font-size: 13px; }
.alltools-header__catalogue-btn:hover { background: #F5F5F5; }
/* Hide desktop nav */
.alltools-header__nav-desktop { display: none; }
/* ─── Secondary tabs: HOT DEALS / SHIPPING / CONTACT ─── */
.alltools-header__mobile-tabs {
display: flex !important; background: #111;
border-top: 1px solid rgba(255,255,255,0.08);
}
.alltools-header__mobile-tab {
flex: 1; padding: 10px 6px;
display: flex; align-items: center; justify-content: center; gap: 6px;
color: #fff !important; text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.alltools-header__mobile-tab i { font-size: 12px; }
.alltools-header__mobile-tab--deals i { color: #F4FF19; }
.alltools-header__mobile-tab:hover { background: rgba(255,255,255,0.06); }
/* ─── Hamburger drawer (mobile) — slides from LEFT, white bg ─── */
.alltools-header__drawer-overlay { display: none; }
.alltools-header__drawer-overlay.active { display: block; }
.alltools-header__drawer {
padding: 0 !important;
width: 86% !important; max-width: 360px;
right: auto !important;
left: -360px;
background: #fff !important;
transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
color: #111;
}
.alltools-header__drawer.active { left: 0 !important; right: auto !important; }
.alltools-header__drawer-header {
display: flex !important; align-items: center; justify-content: space-between;
background: #FC1C03; color: #fff; padding: 14px 16px;
}
.alltools-header__drawer-title {
font-family: "Poppins", sans-serif;
font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.alltools-header__drawer-close {
background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer;
padding: 4px 6px; line-height: 1;
}
.alltools-header__drawer-menu {
list-style: none; padding: 0; margin: 0;
max-height: calc(100vh - 280px); overflow-y: auto;
}
.alltools-header__drawer-menu li { border-bottom: 1px solid #E5E7EB; }
.alltools-header__drawer-menu li a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; color: #111; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
}
.alltools-header__drawer-menu li a::after {
content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
color: #5A6372; font-size: 12px;
}
.alltools-header__drawer-menu li a > span { display: inline-flex; align-items: center; gap: 8px; }
.alltools-header__drawer-menu .drawer-menu__count {
font-size: 12px; color: #5A6372; font-weight: 500; margin-left: auto;
}
.alltools-header__drawer-menu li.drawer-menu__brands a {
background: #F5F5F5; font-weight: 700; color: #111;
}
.alltools-header__drawer-menu li.drawer-menu__brands i { color: #FC1C03; margin-right: 8px; }
.alltools-header__drawer-menu .sub-menu { display: none; }
.alltools-header__drawer-actions {
padding: 16px; display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid #E5E7EB;
}
.alltools-header__drawer-btn {
display: block; text-align: center; padding: 12px;
font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px;
text-decoration: none;
}
.alltools-header__drawer-btn--primary { background: #FC1C03; color: #fff !important; border: 0; }
.alltools-header__drawer-btn--primary:hover { background: #D91800; }
.alltools-header__drawer-btn--outline { background: #fff; color: #111 !important; border: 1.5px solid #111; }
.alltools-header__drawer-contact {
padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid #E5E7EB; background: #F5F5F5;
}
.alltools-header__drawer-contact a {
color: #5A6372; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 12px;
display: flex; align-items: center; gap: 8px;
}
.alltools-header__drawer-contact i { color: #FC1C03; width: 14px; }
/* hide the legacy SHOP button in drawer */
.alltools-header__drawer-shop-btn { display: none !important; }
/* ─── Footer (mobile) ─── */
.alltools-footer__inner {
flex-direction: column; padding: 0; background: #111; background-image: none;
}
.alltools-footer__left,
.alltools-footer__center,
.alltools-footer__right { width: 100% !important; padding: 0; }
/* Brand strip: logo + FB button centered */
.alltools-footer__center {
order: 1; align-items: center;
padding: 24px 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.alltools-footer .alltools-footer__logo,
img.alltools-footer__logo { max-width: 100% !important; width: 100% !important; padding: 0 8px; box-sizing: border-box; }
.alltools-footer__nav { margin: 16px 0 0; }
.alltools-footer__menu {
flex-direction: column; padding: 0;
}
.alltools-footer__menu li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.alltools-footer__menu li a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; font-size: 14px; font-weight: 500;
}
.alltools-footer__menu li a::after {
content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
color: rgba(255,255,255,0.4); font-size: 12px;
}
.alltools-footer__copyright--desktop { display: none; }
/* Left column: Get a Quote + Follow FB on a single row */
.alltools-footer__left {
order: 0; flex-direction: row; align-items: center; justify-content: center;
padding: 14px 16px 10px; gap: 10px;
}
a.alltools-footer__btn { font-size: 12px; padding: 8px 16px; width: auto; }
/* Right column: AIS badge + copyright */
.alltools-footer__right {
order: 3; flex-direction: column; align-items: center;
padding: 16px 16px 20px; gap: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.alltools-footer__ais-badge { width: auto; font-size: 12px; }
.alltools-footer__ais-logo { max-width: 140px; margin: 0 auto; }
.alltools-footer__copyright--mobile {
display: block; font-size: 11px; color: rgba(255,255,255,0.45);
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 12px; width: 100%; text-align: center;
}
/* Contact mini block */
.alltools-footer__mobile-contact {
display: flex !important; flex-direction: column; gap: 8px;
padding: 14px 18px;
background: #111; order: 2;
border-top: 1px solid rgba(255,255,255,0.08);
}
.alltools-footer__mobile-contact a {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,0.75); text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 12px;
}
.alltools-footer__mobile-contact i { color: #FC1C03; width: 14px; font-size: 12px; }
/* Re-order children of footer container so contact sits after menu */
.alltools-footer { display: flex; flex-direction: column; }
.alltools-footer__inner { order: 0; }
.alltools-footer__mobile-contact { order: 1; }
/* ─── Shared mobile back+filter bar (single product + archive) ─── */
.single-product .ats-back-bar,
.ats-archive-mobile-bar {
display: flex !important; align-items: center; justify-content: space-between;
background: #F5F5F5; padding: 10px 12px;
border-bottom: 1px solid #E5E7EB; margin: 0;
}
.single-product a.ats-back-link, .single-product a.ats-back-link:visited,
.ats-archive-mobile-bar a.ats-back-link,
.ats-archive-mobile-bar a.ats-back-link:visited {
color: #111 !important; font-size: 13px; font-weight: 600;
padding: 0; background: none; gap: 6px;
}
.single-product a.ats-back-link i,
.ats-archive-mobile-bar a.ats-back-link i { color: #FC1C03; }
.ats-mobile-filter-btn,
.single-product .ats-product-mobile-filter-btn,
.single-product .ats-mobile-filter-btn {
display: inline-flex !important; align-items: center; gap: 6px;
background: #111; color: #fff; border: 0;
padding: 7px 14px; border-radius: 20px;
font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer;
}
.ats-mobile-filter-btn i,
.single-product .ats-product-mobile-filter-btn i { font-size: 12px; }
/* Inline Filter button in the sort row (mobile) — existing
.ats-mobile-filter-btn default-hide rule already covers desktop. */
.ats-sorting-wrap { gap: 10px; align-items: center; flex-wrap: wrap; }
.ats-sorting-wrap .ats-mobile-filter-btn--inline { display: inline-flex !important; }
.ats-mobile-filter-group--inline { display: inline-flex !important; align-items: center; gap: 6px; order: -1; margin-right: auto; }
/* Filter + Clear group: pill + X button */
.ats-mobile-filter-group { display: inline-flex; align-items: center; gap: 6px; }
.ats-clear-filter-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; background: #fff; color: #FC1C03 !important;
border: 1.5px solid #FC1C03; border-radius: 50%; text-decoration: none;
font-size: 11px; cursor: pointer; flex-shrink: 0;
}
.ats-clear-filter-btn:hover { background: #FC1C03; color: #fff !important; }
/* Jump to products button in the archive back bar */
.ats-jump-to-products {
display: inline-flex; align-items: center; gap: 4px;
background: #FC1C03; color: #fff !important; border: 0;
padding: 6px 12px; border-radius: 20px; text-decoration: none;
font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
}
.ats-jump-to-products i { font-size: 10px; }
.ats-jump-to-products:hover { background: #D91800; }
/* Back bar layout: all on one line — back link left, products + filter right */
.ats-archive-mobile-bar { gap: 6px; flex-wrap: nowrap; padding: 8px 10px; }
.ats-archive-mobile-bar .ats-back-link { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.ats-archive-mobile-bar .ats-back-link span { overflow: hidden; text-overflow: ellipsis; }
.ats-archive-mobile-bar .ats-jump-to-products { flex-shrink: 0; padding: 6px 10px; font-size: 10px; }
.ats-archive-mobile-bar .ats-mobile-filter-group { flex-shrink: 0; }
.ats-archive-mobile-bar .ats-mobile-filter-btn { padding: 6px 10px; font-size: 11px; }
/* No back link — push actions to the right */
.ats-archive-mobile-bar--no-back .ats-jump-to-products { margin-left: auto; }
/* Product layout: full-width, no side padding */
.single-product .ats-product-layout { padding: 0 !important; margin: 0 !important; }
.single-product .ats-product-content { padding: 0 !important; }
.single-product div.product { margin: 0 !important; padding: 0 !important; }
/* Gallery: full viewport width — let flexslider handle inner layout */
.single-product .woocommerce-product-gallery-wrap {
max-width: 100% !important; flex: 1 1 100% !important;
padding: 0 !important; margin: 0 !important;
}
.single-product .woocommerce-product-gallery { padding: 0; }
.single-product .woocommerce-product-gallery__wrapper { padding: 0; border: 0; border-radius: 0; }
.single-product .woocommerce-product-gallery img { height: auto !important; }
/* Shrink brand logo chip so it doesn't clash with product image */
.single-product .woocommerce-product-gallery .brand-logo {
top: 8px; left: 8px; width: 50px; height: 50px; padding: 4px;
}
/* Summary (title/price/description) — breathing room, full width */
.single-product .summary.entry-summary {
padding: 16px 14px !important;
max-width: 100% !important; flex: 1 1 100% !important;
margin: 0 !important;
}
.single-product .product_meta { padding: 0 14px; }
.single-product .posted_in, .single-product .posted_in--top { padding: 0 14px; margin: 12px 0 0; }
.single-product .woocommerce-tabs { padding: 0 14px; }
}