/* Product range page (general/ProductList.aspx) only.
   Colour tokens and typography come from TheSourceTheme.css.
   .wrap and the footer rules live in MasterRetail.css. */

.hero{position:relative;overflow:hidden;background:var(--primary);text-align:center;color:rgba(255,255,255,0.82)}
.hero .sec-head{color:#fff}
.hero-inner strong{color:#fff}
.hero a.glink{color:var(--accent)}
.hero-inner{position:relative;max-width:820px;margin:0 auto;padding:66px 20px 76px;font-size:19px;line-height:1.9}
.hero-inner p{margin:0}
.hero.short .hero-inner{padding:36px 20px 52px;max-width:1100px}
a.glink{color:var(--accent);text-decoration:none;font-weight:500}
a.glink:hover{text-decoration:underline}
.sec-head{text-align:center;font-size:31px;font-weight:700;letter-spacing:-0.01em;margin:58px 0 0}
.sec-head::after{content:"";display:block;width:284px;max-width:60vw;height:1.5px;background:var(--accent);margin:16px auto 0}
.sec-head.in-hero{margin:0}

.plist-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;align-items:start;margin:54px 0 84px}
.pcat header{background:var(--primary);color:#fff;padding:10px 13px;font-size:15px;font-weight:500;border-radius:2px;letter-spacing:.2px}
.pcat ul{list-style:none;margin:4px 0 0;padding:0;border:1px solid var(--border);border-bottom:none}
.pcat li{border-bottom:1px solid var(--border);background:#fff}
.pcat li a{display:block;padding:9px 13px;font-size:13.5px;color:var(--accent);text-decoration:none}
.pcat li a:hover{background:#EDE8DF}

@media (max-width:1280px){.plist-grid{grid-template-columns:repeat(4,1fr)}}
/* Recorded deviation from the design, Anton's decision 2 September 2026.
   At phone width the categories flow down two columns instead of sitting
   in a two column grid, so a short category no longer leaves a gap beside
   a tall one. Each category stays whole. */
@media (max-width:720px){.plist-grid{display:block;column-count:2;column-gap:16px}.pcat{break-inside:avoid;margin-bottom:16px}}

/* Neutralise bootstrap's a:hover underline and colour on the list rows.
   The design has no bootstrap, so it never needed this. */
.pcat li a:hover{color:var(--accent);text-decoration:none}