…
-------------------------------------------------------------------------- */
.gp-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #fbfafa 0%, #f4f2f1 60%, #efe9e8 100%);
border-bottom: 1px solid var(--gp-border);
padding: 4.25rem 0 3.75rem;
}
.gp-hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: repeating-linear-gradient(90deg, var(--gp-black) 0 18px, #f4f2f1 18px 36px);
opacity: 0.12;
pointer-events: none;
}
.gp-hero h1 { font-size: 4rem; }
.gp-hero .lead { color: var(--gp-muted); max-width: 560px; margin-inline: auto; }
/* --------------------------------------------------------------------------
6. Cards — product cards (3a) & category tiles (2a)
-------------------------------------------------------------------------- */
.card {
--bs-card-border-color: var(--gp-border);
--bs-card-border-radius: var(--bs-border-radius-lg);
}
/* Product photo area placeholder */
.gp-card-media {
background-color: var(--gp-surface);
height: 140px;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 0.75rem;
position: relative;
}
/* Category tile (2a "Shop the way you buy") — grey card, colored top bar.
Use:
or
*/
.gp-tile {
background-color: var(--gp-surface);
position: relative;
overflow: hidden;
}
.gp-tile::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--gp-red);
}
.gp-tile--dark::before { background: var(--gp-black); }
.gp-tile .card-title {
font-family: "Saira Condensed", var(--bs-body-font-family);
font-style: italic;
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;
}
.gp-tile .card-text { color: var(--gp-muted); font-size: 0.8125rem; }
.gp-tile .gp-tile-link { color: var(--gp-red); font-weight: 700; font-size: 0.8125rem; }
/* --------------------------------------------------------------------------
7. Badges — promo flags (Sale / New / Just Released) & stock status
-------------------------------------------------------------------------- */
.badge { font-weight: 700; text-transform: uppercase; }
.gp-badge-sale { background-color: var(--gp-red); color: #ffffff; }
.gp-badge-new { background-color: var(--gp-black); color: #ffffff; }
/* Overlay position on a card image:
*/
.gp-badge-flag { position: absolute; top: 10px; left: 10px; z-index: 1; }
/* Stock status text (with leading ● in markup) */
.gp-stock-in { color: var(--gp-success); font-weight: 600; font-size: 0.8125rem; }
.gp-stock-low { color: var(--gp-warning); font-weight: 600; font-size: 0.8125rem; }
.gp-stock-back { color: var(--gp-muted-2); font-weight: 600; font-size: 0.8125rem; }
/* --------------------------------------------------------------------------
8. Pricing
-------------------------------------------------------------------------- */
.gp-price {
font-family: "Saira Condensed", var(--bs-body-font-family);
font-weight: 700;
color: var(--gp-black);
}
.gp-price--sale { color: var(--gp-red); }
.gp-price-was {
color: #999999;
text-decoration: line-through;
font-size: 0.8125rem;
}
.gp-price-unit { color: var(--gp-muted-2); font-size: 0.75rem; }
/* --------------------------------------------------------------------------
9. Tables — list view (3b), spec tables & tier pricing (4a/4b)
-------------------------------------------------------------------------- */
/* Results list: */
.gp-table-results > thead th {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gp-muted-2);
border-bottom: 2px solid var(--gp-black);
}
.gp-table-results > tbody td { border-color: #eeeeee; }
/* Spec sheet: */
.gp-table-specs {
--bs-table-striped-bg: #fafafa;
border: 1px solid var(--gp-border);
border-radius: var(--bs-border-radius-lg);
overflow: hidden;
}
.gp-table-specs td:first-child {
color: var(--gp-muted-2);
font-weight: 600;
width: 40%;
}
/* Tier-pricing / variant tables reuse .gp-table-specs header treatment */
.gp-table-tiers thead th {
background-color: var(--gp-surface);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gp-muted-2);
}
/* --------------------------------------------------------------------------
10. Forms — qty inputs, filters
-------------------------------------------------------------------------- */
.form-control:focus, .form-select:focus {
border-color: var(--gp-red);
box-shadow: 0 0 0 0.25rem rgba(215, 20, 31, 0.25);
}
.form-check-input:checked {
background-color: var(--gp-red);
border-color: var(--gp-red);
}
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(215, 20, 31, 0.25); }
/* --------------------------------------------------------------------------
11. Filter sidebar (3a)
Use: