/*
 * assets/css/shops-list.css
 * The first page only (index.php, the Shops List). Loaded by nothing else, and
 * every rule is under an .sl- class, so style.css and every other page are
 * untouched. Always light, like the rest of PALABAHAN.
 */

:root {
    color-scheme: light;
    --sl-navy: #0E1B33;
    --sl-page: #F5F7FB;
    --sl-card: #FFFFFF;
    --sl-line: #E3E8F0;
    --sl-blue: #1D5BD8;
    --sl-blue-dark: #1546A8;
    --sl-ink: #0E1B33;
    --sl-muted: #52617A;
    --sl-free: #0B6641;
    --sl-free-bg: #E3F5EC;
    --sl-run: #1546A8;
    --sl-run-bg: #E8EFFD;
    --sl-near: #7A4A00;
    --sl-near-bg: #FFF1D9;
    --sl-free-bar: rgba(147, 197, 253, .8);   /* light blue at 80% (user request) */
    --sl-run-bar: #1D5BD8;
    --sl-near-bar: #E59A1A;
    --sl-off-bar: #C3CCD9;
}

*, *::before, *::after { box-sizing: border-box; }

body.sl-page {
    margin: 0;
    background: var(--sl-page);
    color: var(--sl-ink);
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* :where() keeps this reset at zero specificity, so each component's own
   margin-top below still applies. */
:where(.sl-page) :where(h1, h2, h3, p) { margin: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.sl-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Buttons ---------- */

.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sl-btn:focus-visible,
.sl-chip:focus-visible,
.sl-page a:focus-visible,
.sl-page input:focus-visible {
    outline: 3px solid #8FB1F5;
    outline-offset: 2px;
}
.sl-btn--primary { background: var(--sl-blue); color: #fff; }
.sl-btn--primary:hover { background: var(--sl-blue-dark); }
/* Outline now sits on the WHITE header (2026-11-12 redesign); --ghost is the
   white-on-photo version used in the hero. */
.sl-btn--outline { border-color: #BFD0EE; color: var(--sl-blue-dark); background: #fff; }
.sl-btn--outline:hover { border-color: var(--sl-blue); background: #F2F6FE; }
.sl-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.sl-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.sl-btn--lg { min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 15px; }
.sl-btn--block { width: 100%; }

/* ---------- Header ---------- */

/* White header with section links (2026-11-12 redesign). */
.sl-header {
    background: #fff;
    color: var(--sl-ink);
    border-bottom: 1px solid var(--sl-line);
    box-shadow: 0 2px 12px rgba(14, 27, 51, .06);
}
.sl-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}
.sl-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sl-ink);
    text-decoration: none;
    line-height: 1.15;
}
.sl-mark-icon {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sl-blue);
    color: #fff;
}
.sl-mark-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.sl-mark-text { display: flex; flex-direction: column; }
.sl-mark-name { font-size: 19px; font-weight: 800; letter-spacing: .04em; color: var(--sl-blue-dark); }
.sl-mark-sub  { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-header-actions { display: flex; gap: 8px; }

.sl-nav { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.sl-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    color: #33415A;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.sl-nav a:hover { background: #EEF4FF; color: var(--sl-blue-dark); }
@media (max-width: 880px) { .sl-nav { display: none; } }

/* ---------- Hero ---------- */

.sl-hero {
    background: var(--sl-navy);
    color: #fff;
    padding: 32px 0 48px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.sl-hero h1 {
    font-size: clamp(28px, 4.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.sl-hero-sub { margin-top: 8px; font-size: 15px; color: #C9D2E3; }

.sl-search { margin-top: 24px; max-width: 560px; }
.sl-search label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #DCE3EF;
}
.sl-search input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #fff;
    color: var(--sl-ink);
    font: inherit;
    font-size: 15px;
}
.sl-search input::placeholder { color: #6B7891; }

/* ---------- Toolbar ---------- */

.sl-list { padding-top: 24px; padding-bottom: 40px; }
.sl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
}
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sl-line);
    border-radius: 999px;
    background: #fff;
    color: var(--sl-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sl-chip:hover { border-color: #C5D0E0; }
.sl-chip[aria-pressed="true"] { background: var(--sl-navy); border-color: var(--sl-navy); color: #fff; }
.sl-count { font-size: 14px; font-weight: 600; color: var(--sl-muted); }

.sl-empty {
    padding: 32px 20px;
    border: 1px dashed #C9D3E2;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    color: var(--sl-muted);
}
.sl-empty[hidden] { display: none; }

/* ---------- Shop cards ---------- */

.sl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 680px) { .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* On a phone the shop cards are one row swiped sideways (user request,
   2026-10-30), the same as .card-grid--swipe on the other shop lists: each
   card 84% wide so the next one peeks in, snapping to a whole card. A phone
   set to "Desktop site" is caught by its touch pointer, as there. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .sl-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        gap: 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .sl-grid::-webkit-scrollbar { display: none; }
    .sl-grid > .sl-card { scroll-snap-align: start; }
}

.sl-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--sl-line);
    border-radius: 20px;
    background: var(--sl-card);
}
.sl-card[hidden] { display: none; }

/* The shop's picture as the card's background, under a dark wash so the white
   text stays readable on any photograph (same idea as .card--photo on Choose
   Your Laundry Shop). The machine box keeps its light surface on top. */
.sl-card--photo {
    background-color: var(--sl-navy);
    background-image: linear-gradient(to bottom,
                                      rgba(9, 17, 34, .66) 0%,
                                      rgba(9, 17, 34, .76) 45%,
                                      rgba(9, 17, 34, .88) 100%),
                      var(--sl-card-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}
.sl-card--photo h3,
.sl-card--photo .sl-address,
.sl-card--photo .sl-hours-text,
.sl-card--photo .sl-price,
.sl-card--photo .sl-price strong {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.sl-card--photo .sl-address,
.sl-card--photo .sl-hours-text,
.sl-card--photo .sl-price { color: rgba(255, 255, 255, .9); }
.sl-card--photo .shop-logo {
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.sl-card--photo .sl-avail { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.sl-card--photo .sl-avail-main { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.sl-card--photo .sl-avail-sub { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.sl-card--photo .sl-bar-seg--off { background: rgba(255, 255, 255, .55); }

.sl-card-head { display: flex; align-items: flex-start; gap: 12px; }
.sl-card .shop-logo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-run-bg);
    color: var(--sl-blue-dark);
    font-size: 16px;
    font-weight: 800;
}
.sl-card .shop-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-card-title { min-width: 0; }
.sl-card h3 { font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.sl-address { margin-top: 2px; font-size: 13px; color: var(--sl-muted); overflow-wrap: anywhere; }

.sl-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.sl-hours-text { color: var(--sl-muted); font-weight: 500; }

.sl-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.sl-pill--free  { color: var(--sl-free); background: var(--sl-free-bg); }
.sl-pill--muted { color: #4A5770; background: #EEF1F6; }

.sl-avail {
    padding: 16px;
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    background: #FAFBFD;
}
.sl-avail-main { font-size: 15px; font-weight: 800; }
.sl-avail-sub  { margin-top: 2px; font-size: 13px; color: var(--sl-muted); }
.sl-bar {
    display: flex;
    gap: 3px;
    height: 8px;
    margin-top: 12px;
    border-radius: 999px;
    overflow: hidden;
}
.sl-bar-seg { flex-basis: 0; min-width: 6px; }
.sl-bar-seg--free    { background: var(--sl-free-bar); }
.sl-bar-seg--running { background: var(--sl-run-bar); }
.sl-bar-seg--near    { background: var(--sl-near-bar); }
.sl-bar-seg--off     { background: var(--sl-off-bar); }

.sl-card-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.sl-price { font-size: 14px; color: var(--sl-muted); }
.sl-price strong { color: var(--sl-ink); font-weight: 800; }

/* ---------- Shop detail (index.php?shop=N) ---------- */

.sl-hero--shop { padding: 20px 0 32px; }
.sl-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #B9C4D8;
}
.sl-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.sl-crumbs a:hover { text-decoration: underline; }
.sl-crumbs [aria-current] { color: #DCE3EF; overflow-wrap: anywhere; }

.sl-shop-head { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.sl-hero .sl-avatar {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--sl-blue-dark);
    font-size: 24px;
    font-weight: 800;
}
.sl-hero .sl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-hero--shop h1 { font-size: clamp(22px, 3.4vw, 32px); overflow-wrap: anywhere; }

.sl-shop-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    color: #DCE3EF;
}

.sl-shop-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.sl-icon-btn {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    color: #fff;
}
.sl-icon-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.sl-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}
.sl-shop-book { flex: 1 1 auto; min-height: 48px; }
@media (min-width: 720px) { .sl-shop-book { flex: 0 0 auto; padding: 0 28px; } }

.sl-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 48px;
}
@media (min-width: 900px) {
    .sl-detail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

.sl-section-head { margin-bottom: 16px; }
.sl-section-head h2 { font-size: 19px; font-weight: 800; }
.sl-section-sub { margin-top: 2px; font-size: 14px; color: var(--sl-muted); }

.sl-group-title {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--sl-muted);
}
.sl-machine-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
@media (min-width: 560px) { .sl-machine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sl-machine {
    padding: 16px;
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    background: #fff;
}
.sl-machine-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sl-machine-id { font-size: 17px; font-weight: 800; }
.sl-machine-note { margin-top: 8px; font-size: 13px; color: var(--sl-muted); font-weight: 600; }

.sl-pill--running { color: var(--sl-run);  background: var(--sl-run-bg); }
.sl-pill--near    { color: var(--sl-near); background: var(--sl-near-bg); }
.sl-pill--off     { color: #4A5770; background: #EEF1F6; }

.sl-progress {
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: #EEF1F6;
    overflow: hidden;
}
.sl-progress span { display: block; height: 100%; border-radius: 999px; background: var(--sl-run-bar); }
.sl-machine--near .sl-progress span { background: var(--sl-near-bar); }

/* ---- Machine cards with a drawing (user request, 2026-11-12) ----------
   Each card gets a small front-loader whose door colour follows the state,
   and whose load moves only while the machine runs. Only a transform is
   animated, on a 20px group, so it costs next to nothing to draw. */
.sl-machine {
    --art-glass: #E8EFFD;
    --art-load: #93C5FD;
    --art-door: #C3CCD9;
    border-top: 4px solid var(--sl-off-bar);
}
/* Free uses the footer navy instead of green (user request, 2026-11-12). */
.sl-machine--free    { --art-glass: #E9EEF6; --art-load: #34496E; --art-door: #8FA3C4; border-top-color: var(--sl-navy); }
.sl-machine .sl-pill--free { color: var(--sl-navy); background: #E6EAF2; }
.sl-machine--running { --art-glass: #E8EFFD; --art-load: #1D5BD8; --art-door: #6F9BEA; border-top-color: var(--sl-run-bar); }
.sl-machine--near    { --art-glass: #FFF1D9; --art-load: #E59A1A; --art-door: #F0BE6A; border-top-color: var(--sl-near-bar); }
.sl-machine--off     { --art-glass: #EEF1F6; --art-load: #C3CCD9; --art-door: #C3CCD9; }

.sl-machine-top { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; }
.sl-machine-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
    flex: 1;
    min-width: 0;
}
.sl-machine-art { flex: none; display: block; width: 44px; height: 52px; }
.sl-machine-art svg { display: block; width: 100%; height: 100%; }
/* Body in the footer's navy (user request, 2026-11-12); the door ring and
   glass keep the state colours so free / running / almost done still read. */
.sl-art-body   { fill: #34496E; stroke: #34496E; stroke-width: 1.5; }   /* footer navy, a little lighter */
.sl-art-line   { stroke: #4B618A; stroke-width: 1.5; }
.sl-art-screen { fill: #5A6F96; }
.sl-machine--free .sl-art-screen { fill: #AFBDD6; }
.sl-machine--running .sl-art-screen,
.sl-machine--near .sl-art-screen { fill: var(--art-load); }
.sl-art-knob   { fill: #AFBDD6; stroke: none; }
.sl-art-door   { fill: #fff; stroke: var(--art-door); stroke-width: 2.5; }
.sl-art-glass  { fill: var(--art-glass); }
.sl-art-load   { fill: var(--art-load); }
.sl-art-bubble { fill: #fff; opacity: .8; }

.sl-art-spin { transform-box: view-box; transform-origin: 24px 35px; }
.sl-machine--running .sl-art-spin--slosh,
.sl-machine--near .sl-art-spin--slosh { animation: sl-slosh 1.6s ease-in-out infinite alternate; }
.sl-machine--running .sl-art-spin--tumble,
.sl-machine--near .sl-art-spin--tumble { animation: sl-tumble 2.4s linear infinite; }
@keyframes sl-slosh  { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes sl-tumble { to { transform: rotate(360deg); } }

.sl-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sl-progress-row .sl-progress { flex: 1; margin-top: 0; }
.sl-progress-num { font-size: 12px; font-weight: 800; color: var(--sl-run); font-variant-numeric: tabular-nums; }
.sl-machine--near .sl-progress-num { color: var(--sl-near); }

/* "Live" line under the Machines heading: a green dot that softly blinks. */
.sl-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sl-free);
}
.sl-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22A06B;
    animation: sl-live-blink 2s ease-in-out infinite;
}
@keyframes sl-live-blink { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .sl-art-spin, .sl-live-dot { animation: none !important; }
}

.sl-service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    background: #fff;
}
.sl-service {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}
.sl-service + .sl-service { border-top: 1px solid var(--sl-line); }
.sl-service-text { min-width: 0; }
.sl-service h3 { font-size: 15px; font-weight: 800; }
.sl-service-desc {
    margin-top: 2px;
    font-size: 13px;
    color: var(--sl-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-service-time { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--sl-run); }
.sl-service-price { flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--sl-muted); }
.sl-service-price strong { display: block; font-size: 16px; font-weight: 800; color: var(--sl-ink); }

/* ---------- Track an order ---------- */

.sl-track { padding-bottom: 48px; }
.sl-track-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--sl-line);
    border-radius: 20px;
    background: #fff;
}
.sl-track-text h2 { font-size: 19px; font-weight: 800; }
.sl-track-text p  { margin-top: 4px; font-size: 14px; color: var(--sl-muted); }
.sl-track-form { display: flex; flex-direction: column; gap: 8px; }
.sl-track-form input {
    flex: 1;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #C9D3E2;
    border-radius: 12px;
    background: #fff;
    color: var(--sl-ink);
    font: inherit;
    font-size: 15px;
}
.sl-track-form .sl-btn { min-height: 48px; padding: 0 28px; }

@media (min-width: 720px) {
    .sl-track-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 32px; }
    .sl-track-form { flex-direction: row; flex: 0 1 460px; }
}

/* ---------- Footer ---------- */

.sl-footer { background: var(--sl-navy); color: #C9D2E3; font-size: 13px; }
.sl-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
/* Column footer (2026-11-12 redesign). */
.sl-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 48px;
    padding-bottom: 32px;
}
@media (min-width: 560px) { .sl-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sl-footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .sl-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .sl-footer-brand { grid-column: auto; } }
.sl-footer-brand p { max-width: 340px; font-size: 14px; line-height: 1.6; }
.sl-footer-brand .sl-footer-name { margin-bottom: 8px; font-size: 20px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.sl-footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.sl-footer-head {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8FA3C4;
}
.sl-footer-col a { min-height: 36px; }
.sl-footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sl-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.sl-footer a:hover { text-decoration: underline; }

/* ---------- Phone ---------- */

@media (max-width: 420px) {
    .sl-mark-name { font-size: 17px; }
    .sl-mark-sub  { font-size: 9px; letter-spacing: .1em; }
    .sl-btn { padding: 0 14px; }
    .sl-card { padding: 20px; }
}

/* Services, Comforters and Add ons sit as separate groups (2026-11-05). */
.sl-services + .sl-services { margin-top: 24px; }

/* A shop's own note above its services (user request, 2026-11-05). */
.sl-service-note {
    margin: 0 0 18px;
    padding: 14px 18px;
    background: #EEF4FF;
    border: 1px solid var(--sl-line);
    border-left: 4px solid var(--sl-blue);
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sl-ink);
}
.sl-service-note p { margin: 0 0 4px; font-weight: 700; }
.sl-service-note ul { margin: 2px 0 8px; padding-left: 20px; }
.sl-service-note li { margin: 2px 0; }
.sl-service-note > :last-child { margin-bottom: 0; }

/* Simple animations (user request, 2026-11-05): the shop cards rise in once
   when the page opens, and lift a little under the pointer. Opacity and
   transform only; none for anyone who asked their system for less motion. */
@keyframes sl-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.sl-grid > .sl-card { animation: sl-rise .4s ease-out backwards; transition: transform .2s ease, box-shadow .2s ease; }
.sl-grid > .sl-card:nth-child(2) { animation-delay: .06s; }
.sl-grid > .sl-card:nth-child(3) { animation-delay: .12s; }
.sl-grid > .sl-card:nth-child(n+4) { animation-delay: .18s; }
.sl-grid > .sl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14, 27, 51, .12); }
.sl-hero, .sl-machines, .sl-services { animation: sl-rise .4s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
    .sl-grid > .sl-card, .sl-hero, .sl-machines, .sl-services { animation: none; transition: none; }
    .sl-grid > .sl-card:hover { transform: none; }
}

/* Scroll animation (user request, 2026-11-05) -- see assets/js/scroll-reveal.js. */
.reveal { opacity: 0; transform: translateY(16px); animation: none !important; }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media print { .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; } }


/* --- Hide-on-scroll header (2026-11-05) -----------------------------------
   assets/js/header-autohide.js adds .hdr-autohide to the page header and
   toggles .hdr-hidden: scrolling down slides the header up out of view,
   scrolling up brings it back. Transform only, so it costs no layout.
   Without the script none of this applies and the header is unchanged. */
.hdr-autohide {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Same easing as style.css (user request, 2026-11-06: "mas smooth"). */
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.hdr-autohide.hdr-hidden {
    /* the extra 12px tucks the drop shadow away with it */
    transform: translate3d(0, calc(-100% - 12px), 0);
    transition: transform .32s cubic-bezier(.4, 0, .6, 1);
}

@media (prefers-reduced-motion: reduce) {
    .hdr-autohide,
    .hdr-autohide.hdr-hidden { transition: none; }
}


/* =========================================================================
   Landing-page layout (user request, 2026-11-12): photo hero with a wave,
   feature cards on a light-blue band, centred section intros, numbered step
   cards and a blue Track card. Blue and white only; static gradients and
   inline SVG waves, no blur or fixed backgrounds (no-heavy-effects rule).
   ========================================================================= */

:root {
    --sl-band: #E6EEFB;
    --sl-hi: #93C5FD;
}

/* ---------- Photo hero ---------- */

.sl-hero--photo {
    position: relative;
    background-color: var(--sl-navy);
    background-image:
        linear-gradient(90deg, rgba(10, 22, 46, .94) 0%, rgba(10, 22, 46, .82) 42%, rgba(10, 22, 46, .35) 100%),
        var(--sl-hero-image, url("../img/portal-bg.jpg"));
    background-size: cover;
    background-position: center right;
    border-top: 0;
    padding-bottom: 88px;
}
.sl-hero--home { padding: 64px 0 132px; }
@media (min-width: 900px) { .sl-hero--home { padding: 88px 0 156px; min-height: 620px; } }
.sl-hero-inner { position: relative; }
.sl-hero--home h1 {
    margin-top: 18px;
    max-width: 640px;
    font-size: clamp(36px, 6vw, 62px);
    line-height: 1.06;
    letter-spacing: -.02em;
}
.sl-hero--home h1 span { color: var(--sl-hi); }
.sl-hero--home .sl-hero-sub { max-width: 520px; margin-top: 16px; font-size: 17px; line-height: 1.6; color: #D6DEEC; }
.sl-hero--home .sl-search { margin-top: 28px; }
.sl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.sl-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #D6DEEC;
}
.sl-trust li { display: inline-flex; align-items: center; gap: 8px; }
.sl-trust li::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sl-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' fill='none' stroke='%230E1B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Live count badge, bottom right of the hero (real numbers from the page). */
.sl-hero-stat {
    position: absolute;
    right: max(20px, calc((100vw - 1120px) / 2 + 20px));
    bottom: 96px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 18px;
    background: var(--sl-blue);
    color: #fff;
    box-shadow: 0 12px 28px rgba(5, 15, 35, .35);
}
.sl-hero-stat strong { font-size: 36px; font-weight: 800; line-height: 1; color: #fff; }
.sl-hero-stat span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: #DCE6FB; }
@media (max-width: 899px) {
    .sl-hero-stat { position: relative; right: auto; bottom: auto; margin: 32px 20px 0; width: fit-content; }
}

/* Waves: one static SVG each, filled with the colour of the section below. */
.sl-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    height: 48px;
    fill: var(--sl-page);
    pointer-events: none;
}
@media (min-width: 900px) { .sl-wave { height: 64px; } }
.sl-wave--band { fill: var(--sl-band); }
.sl-wave--page { fill: var(--sl-page); }
.sl-wave--top { top: -1px; bottom: auto; fill: var(--sl-page); }

/* Shop detail hero: the shop's own picture behind the same wash. */
.sl-hero--shop.sl-hero--photo { padding-bottom: 80px; }

/* ---------- Light-blue band + feature cards ---------- */

.sl-band { position: relative; background: var(--sl-band); }
.sl-band:not(.sl-how) { padding: 24px 0 96px; }

.sl-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) { .sl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sl-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.sl-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid #D3E0F5;
    border-radius: 18px;
    background: #fff;
}
.sl-feature h3 { font-size: 15px; font-weight: 800; }
.sl-feature p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--sl-muted); }

.sl-ico {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sl-run-bg);
    color: var(--sl-blue);
}
.sl-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Section intros ---------- */

.sl-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #BFD3F7;
    border-radius: 999px;
    background: #EEF4FF;
    color: var(--sl-blue-dark);
    font-size: 13px;
    font-weight: 700;
}
.sl-tag--dark { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; }
.sl-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }

.sl-intro { max-width: 660px; margin: 0 auto 28px; text-align: center; }
.sl-intro h2 {
    margin-top: 14px;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.sl-intro > p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sl-muted); }

.sl-list { padding-top: 40px; padding-bottom: 72px; scroll-margin-top: 16px; }

/* ---------- How it works ---------- */

.sl-how { padding: 104px 0 80px; }
.sl-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) { .sl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sl-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.sl-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 22px;
    border: 1px solid #D3E0F5;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.sl-step .sl-ico { width: 54px; height: 54px; flex-basis: 54px; border-radius: 16px; }
.sl-step .sl-ico svg { width: 26px; height: 26px; }
.sl-step-no {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sl-blue);
}
.sl-step h3 { margin-top: 6px; font-size: 17px; font-weight: 800; }
.sl-step p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--sl-muted); }
.sl-how-cta { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Track card, now a blue call-out ---------- */

.sl-track { padding-top: 56px; padding-bottom: 64px; scroll-margin-top: 16px; }
.sl-track-card {
    border: 0;
    background: linear-gradient(120deg, var(--sl-blue) 0%, var(--sl-blue-dark) 100%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(21, 70, 168, .25);
}
.sl-track-text p { color: #DCE6FB; }
.sl-track-form input { border-color: transparent; }
.sl-track-card .sl-btn--primary { background: var(--sl-navy); }
.sl-track-card .sl-btn--primary:hover { background: #050D1E; }
@media (min-width: 720px) { .sl-track-card { padding: 36px 40px; } .sl-track-text h2 { font-size: 24px; } }

/* Phone: the photo wash runs top-to-bottom so text stays readable. */
@media (max-width: 720px) {
    .sl-hero--photo {
        background-image:
            linear-gradient(to bottom, rgba(10, 22, 46, .9) 0%, rgba(10, 22, 46, .82) 100%),
            var(--sl-hero-image, url("../img/portal-bg.jpg"));
    }
    .sl-hero-cta .sl-btn { flex: 1 1 auto; }
}
@media (max-width: 899px) { .sl-hero--home { padding-bottom: 84px; } }

/* "Shop owner or staff? Log in here" under the shop hero (2026-11-12). */
.sl-staff-link { margin-top: 14px; font-size: 13px; color: #C9D2E3; }
.sl-staff-link a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* "Coming soon" cards (2026-11-12): the SAME design as a real shop card
   (.sl-card + .sl-card--photo), only the logo is an icon and the button is a
   greyed, unpressable "Coming soon". */
.sl-pill--soon { color: #1546A8; background: #E8EFFD; }
.sl-card .sl-soon-logo { background: #FFFFFF; color: var(--sl-blue); }
.sl-soon-logo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-btn--soon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .85);
    cursor: default;
}
.sl-card--soon:not(.sl-card--photo) .sl-btn--soon { background: #EEF1F6; border-color: #E3E8F0; color: #6B7891; }