/* ==========================================================================
   TshirtPrint2u — PRODUCTS PAGE (products.html)
   Loaded AFTER style.css. Reuses its tokens and components; only adds what the
   Products page needs. Scoped so nothing here can affect the homepage.
   ========================================================================== */

/* ---- Shared refinements ------------------------------------------------- */
.btn-brand--accent {
    background: var(--secondary-dark);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(194, 65, 12, 0.55);
}
.btn-brand--accent:hover { transform: translateY(-2px); background: #9A3412; color: #fff; }
.btn-brand--accent:active { transform: translateY(0); }

/* Card-type components on this page share the 12px radius from the page spec. */
.page-products main .method-card,
.page-products main .project-card,
.page-products main .solution-card,
.page-products main .testimonial-card,
.page-products main .accordion-brand,
.page-products main .capability-guidance {
    border-radius: var(--radius-md);
}
.page-products main .method-title a:focus-visible::after { border-radius: var(--radius-md); }

/* Headings on this page are left-aligned, so section links align with them. */
.page-products main .section-more-link { text-align: left; }

/* Shared pill link used for subcategories, use-case links, fabric and style links. */
.chip-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip-link:hover { border-color: var(--primary); color: var(--primary); }
.chip-link:focus-visible { outline: 2.5px solid var(--secondary); outline-offset: 2px; }
@media (pointer: coarse) {
    .chip-link { min-height: 40px; padding-inline: 0.85rem; }
}

/* ---- Hero (copy + supporting visual, mirrors .hero--services) ------------ */
.hero--products { min-height: 0; padding-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.hero--products .hero-grid { align-items: center; }
.hero--products .hero-visual { aspect-ratio: 5 / 4; }
.hero--products .hero-copy { max-width: 52rem; }
.hero--products .hero-eyebrow { color: #FDBA74; margin-bottom: 1rem; }
.hero--products .hero-eyebrow::before { background: #FDBA74; }
.hero--products .hero-sub { margin-bottom: 0; }
.hero--products .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.6rem;
    margin-bottom: 1.4rem;
}
.hero--products .hero-trust-inline { margin-bottom: 0.75rem; }
.hero-jump {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.hero-jump:hover { color: #FDBA74; }
.hero-fineprint { font-size: 0.85rem; color: var(--text-on-dark-muted); max-width: 58ch; }

/* ---- Quick navigation (sticky, horizontally scrollable; mirrors .svc-quicknav) --- */
.pp-quicknav {
    position: sticky;
    top: calc(var(--header-h-scrolled) - 1px);
    z-index: 60;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.pp-quicknav-inner { display: flex; align-items: center; gap: 1.25rem; }
.pp-quicknav-label {
    flex-shrink: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
}
.pp-quicknav-list {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pp-quicknav-list::-webkit-scrollbar { display: none; }
.pp-quicknav-list li { flex-shrink: 0; scroll-snap-align: start; }
.pp-quicknav-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.15rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pp-quicknav-list a:hover { border-color: var(--primary); color: var(--primary); }
.pp-quicknav-list a[aria-current="location"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.crumbs { position: relative; z-index: 1; margin-bottom: 1.25rem; }
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-on-dark-muted);
}
.breadcrumb-item + .breadcrumb-item::before { content: '/'; padding-right: 0.5rem; opacity: 0.6; }
.breadcrumb-item a { color: #fff; font-weight: 600; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-item.active { color: var(--text-on-dark-muted); }

/* ---- Product categories -------------------------------------------------- */
.pcat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.pcat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.25s ease, border-color var(--dur-fast) var(--ease);
}
.pcat:hover { transform: translateY(-4px); border-color: var(--primary); }
.pcat-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-alt); }
.pcat-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.pcat-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.3rem; }
.pcat-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary-dark); margin-bottom: 0.4rem; }
.pcat-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.pcat-best, .pcat-deco { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.pcat-best span, .pcat-deco span, .info-best span, .method-suit span { font-weight: 700; color: var(--primary-dark); margin-right: 0.3rem; }
.pcat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
}
/* Sit above the card's stretched title link so each subcategory stays clickable. */
.pcat-subs .chip-link { position: relative; z-index: 2; }
/* The CTA is now the card's one real link; stretching it over the whole
   card (via ::after) keeps the entire card clickable without nesting links.
   Subcategory chips keep a higher z-index so they stay independently clickable. */
.pcat-cta {
    position: relative;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.pcat-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcat-cta:focus-visible { outline: none; }
.pcat-cta:focus-visible::after { outline: 2.5px solid var(--secondary); outline-offset: -3px; border-radius: var(--radius-md); }
.pcat-cta svg, .pop-cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.pcat:hover .pcat-cta svg, .pop-card:hover .pop-cta svg { transform: translateX(4px); }
.category-more-line { margin-top: 0.9rem; font-size: 0.9rem; color: var(--text-muted); }

/* ---- Shop by use (reuses .solution-card from style.css) ------------------- */
.page-products .solution-card { height: 100%; }
.use-links { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1rem 0 0; padding: 0; }

/* ---- Popular picks -------------------------------------------------------- */
.pop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.pop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.25s ease, border-color var(--dur-fast) var(--ease);
}
.pop-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.pop-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); }
.pop-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pop-media--alt img { object-position: center 78%; }
.pop-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.pop-cat { font-size: 0.82rem; font-weight: 700; color: var(--secondary-dark); margin-bottom: 0.4rem; }
.pop-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary-dark); margin-bottom: 0.5rem; }
.pop-desc { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.pop-spec { font-size: 0.86rem; color: var(--text); font-weight: 600; margin-bottom: 0.9rem; }
.pop-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.pop-tags li {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(30, 58, 138, 0.07);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
}
.pop-cta { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.pop-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pop-cta:focus-visible { outline: none; }
.pop-cta:focus-visible::after { outline: 2.5px solid var(--secondary); outline-offset: -3px; border-radius: var(--radius-md); }

/* ---- Fabric + style ------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.info-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.info-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.4rem; }
.info-card p { font-size: 0.92rem; color: var(--text-muted); }
.info-best { margin-top: 0.75rem; font-size: 0.85rem !important; }
.fabric-links { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1rem 0 0; padding: 0; }

.style-block { margin-top: clamp(2.75rem, 2.2rem + 2.5vw, 4rem); }
.style-group { margin-top: 1.5rem; }
.style-group h3 { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.6rem; }
.style-group h3 a { color: inherit; text-decoration: none; }
.style-group h3 a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.style-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

/* ---- Ready-made vs custom-made ------------------------------------------- */
.rvc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.rvc-card {
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
}
.rvc-card h3 { font-size: 1.1rem; font-weight: 700; color: #fff; }
.rvc-moq {
    margin: 0.35rem 0 0.9rem;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #FDBA74;
}
.rvc-card p:last-child { color: var(--text-on-dark-muted); max-width: 46ch; }

.compare-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
}
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td {
    padding: 0.95rem 1.25rem;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.compare-table thead th { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.06); }
.compare-table tbody th { color: #fff; font-weight: 600; }
.compare-table td { color: var(--text-on-dark-muted); }
.compare-table tbody tr:first-child td { color: #FDBA74; font-weight: 700; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

.rvc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }

/* ---- Customisation -------------------------------------------------------- */
.method-suit { font-size: 0.82rem; color: var(--text-muted); }

.factor-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.factor-chip {
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

/* ---- Ordering ------------------------------------------------------------- */
.order-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}
.ofact {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.25rem 1.3rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ofact svg { width: 22px; height: 22px; color: var(--secondary); flex-shrink: 0; margin-top: 2px; }
.ofact-title { font-size: 0.98rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.25rem; }
.ofact p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

.proc-callout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    margin-top: 2rem;
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.proc-callout h3 { font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.5rem; }
.proc-callout .section-sub { margin-bottom: 1.25rem; }
.check-list { display: grid; gap: 0.85rem; list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.94rem; color: var(--text); }
.check-list svg { width: 18px; height: 18px; color: var(--secondary); flex-shrink: 0; margin-top: 2px; }

/* ---- Proof ---------------------------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    border-block: 1px solid var(--border);
}
.stat-strip li { padding: 1.4rem 0; }
.stat-strip strong {
    display: block;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-dark);
}
.stat-strip span { font-size: 0.9rem; color: var(--text-muted); }
.proof-block { margin-top: 3.5rem; }
.proof-sub { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary-dark); margin-bottom: 1.25rem; }
.page-products .project-card-desc { -webkit-line-clamp: 5; }
.project-card-product { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.project-card-product strong { color: var(--primary-dark); }

/* ---- Final CTA ------------------------------------------------------------ */
.final-cta--center { max-width: 860px; text-align: center; }
.final-cta--center .section-sub { margin-inline: auto; }
.final-cta--center .final-cta-actions { justify-content: center; }
.final-cta-note { margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-on-dark-muted); }

/* ---- Mobile sticky CTA ---------------------------------------------------- */
.mobile-cta-bar { display: none; }

/* ---- Not-sure strip (category grid) --------------------------------------- */
.notsure-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.notsure-title { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.25rem; }
.notsure-copy p:not(.notsure-title) { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.notsure-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* ---- Catalogue cross-link note --------------------------------------------- */
.catalogue-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.catalogue-note-title { font-weight: 700; color: var(--primary-dark); margin-bottom: 0.25rem; }
.catalogue-note p:not(.catalogue-note-title) { font-size: 0.88rem; color: var(--text-muted); max-width: 60ch; margin: 0; }

/* ---- Shop by use: corporate uniform pathway -------------------------------- */
.use-pathway { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.use-pathway h3 { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.35rem; }
.use-pathway > p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.9rem; max-width: 60ch; }
.pathway-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

/* ---- Product selection guide (matrix) -------------------------------------- */
.guide-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td {
    padding: 0.85rem 1.1rem;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--border);
}
.guide-table thead th { font-weight: 700; color: var(--primary-dark); background: var(--surface); }
.guide-table tbody th { font-weight: 600; color: var(--text); }
.guide-table tbody td a { color: var(--primary); font-weight: 600; text-decoration: none; }
.guide-table tbody td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-table tbody tr:last-child th, .guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.75rem; }

/* ---- Before-you-choose strip ----------------------------------------------- */
.section--strip { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.strip-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 1rem; }
.before-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.before-strip li { display: flex; align-items: flex-start; gap: 0.65rem; }
.before-strip svg { width: 20px; height: 20px; color: var(--secondary); flex-shrink: 0; margin-top: 2px; }
.before-strip strong { display: block; font-size: 0.92rem; color: var(--primary-dark); }
.before-strip span { font-size: 0.84rem; color: var(--text-muted); }

/* ---- Starting points: extra attribute lines -------------------------------- */
.pop-attrs { font-size: 0.86rem; color: var(--text); font-weight: 600; margin-bottom: 0.35rem; }
.pop-best { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0.9rem; }
.pop-best span { font-weight: 700; color: var(--primary-dark); margin-right: 0.25rem; }

/* ---- Fabric & style: collapsible style groups ------------------------------ */
.style-group { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; }
.style-group summary {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
    list-style: none;
}
.style-group summary::-webkit-details-marker { display: none; }
.style-group summary::after { content: '+'; float: right; font-weight: 700; color: var(--text-muted); }
.style-group[open] summary::after { content: '\2212'; }
.style-body { margin-top: 0.9rem; }
.style-all { margin: 0.75rem 0 0; font-size: 0.86rem; }
.style-all a { color: var(--primary); font-weight: 600; text-decoration: none; }
.style-all a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Ordering: 3-step summary + link to full process ----------------------- */
.page-products .order-steps--3 { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); }
.order-step-title { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.35rem; }
.order-step-desc { font-size: 0.9rem; color: var(--text-muted); }
.order-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }

/* ---- Procurement heading (moved out of section-head pattern) --------------- */
.proc-heading { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary-dark); margin: 0.35rem 0 0.5rem; }

/* ---- Recent work: category chips + testimonial tag -------------------------- */
.project-card-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.testimonial-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary-dark); margin-bottom: 0.6rem; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pcat:hover, .pop-card:hover, .btn-brand--accent:hover { transform: none; }
    .pcat:hover .pcat-cta svg, .pop-card:hover .pop-cta svg { transform: none; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .proc-callout { grid-template-columns: 1fr; }
    .order-facts { grid-template-columns: repeat(2, 1fr); }
    .before-strip { grid-template-columns: repeat(2, 1fr); }
    /* Copy first on stacked layouts so the H1 and CTAs stay above the fold */
    .hero--products .hero-visual { aspect-ratio: 16 / 10; order: 1; }
}

@media (max-width: 991.98px) {
    .pcat-grid { grid-template-columns: repeat(2, 1fr); }
    .pop-grid { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    /* Quick nav: label hides, pills scroll horizontally with an edge fade hint */
    .pp-quicknav-label { display: none; }
    .pp-quicknav-inner { display: block; }
    .pp-quicknav-list.is-scrollable:not(.is-end) {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    .rvc-grid { grid-template-columns: 1fr; }
    .compare-table th, .compare-table td { padding: 0.75rem 0.85rem; font-size: 0.88rem; }
    .stat-strip { grid-template-columns: 1fr; gap: 0; }
    .stat-strip li + li { border-top: 1px solid var(--border); }

    .mobile-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        padding: 0.6rem var(--container-pad) calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 22px -12px rgba(15, 23, 42, 0.3);
        transition: transform var(--dur-med) var(--ease), visibility 0s;
    }
    /* visibility removes the hidden bar from the tab order and screen-reader tree. */
    .mobile-cta-bar.is-hidden {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
    }
    body.overlay-open .mobile-cta-bar { display: none; }

    .mobile-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 48px;
        border-radius: var(--radius-pill);
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
        color: #fff;
    }
    .mobile-cta-btn .wa-badge-icon { width: 22px; height: 22px; }
    .mobile-cta-btn--wa { background: var(--whatsapp-dark); }
    .mobile-cta-btn--quote { background: var(--secondary-dark); }

    /* Keep clear of the fixed bar; the floating WhatsApp is replaced by it here. */
    body.page-products { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .page-products .float-actions { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .page-products .whatsapp-float-wrap { display: none; }
}

@media (max-width: 767.98px) {
    .page-products .order-steps--3 { grid-template-columns: 1fr; row-gap: 0; }
    .order-steps--3 .order-step {
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 1rem;
        align-content: start;
        padding-bottom: 1.5rem;
    }
    .order-steps--3 .order-step-num { grid-row: 1 / span 2; margin-bottom: 0; }
    .order-steps--3 .order-step:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 22px;
        top: 50px;
        bottom: 4px;
        border-left: 2px dashed var(--border-strong);
    }
    .notsure-strip, .catalogue-note { flex-direction: column; align-items: flex-start; }
    .before-strip { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
    .order-facts { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    /* Ten categories as full-width stacked cards: image on top at a fixed
       aspect ratio so it never stretches to match the copy below it.
       "Best for", decoration and subcategory links stay visible: they are
       what tells the categories apart. */
    .pcat-grid { grid-template-columns: 1fr; gap: 1rem; }
    .pcat { flex-direction: column; }
    .pcat-media { flex: none; width: 100%; aspect-ratio: 16 / 10; }
    .pcat-media img { position: static; object-position: center 30%; }
    .pcat-body { padding: 1rem 1.1rem 1.2rem; }
    .pcat-title { font-size: 1.05rem; margin-bottom: 0.3rem; }
    .pcat-desc { font-size: 0.88rem; margin-bottom: 0.6rem; }
    .pcat-subs { margin-bottom: 0.85rem; }

    .pop-grid, .info-grid { grid-template-columns: 1fr; }
    .pop-media { aspect-ratio: 16 / 10; }
}